feat: 🚀 视频上传可以覆盖上传

src/components/Upload/UploadVideo.vue

@@ -9,11 +9,13 @@
             :show-file-list="false"
             :http-request="handleHttpUpload"
             :before-upload="beforeUpload"
-            :on-success="uploadSuccess"
             :on-error="uploadError"
+            :on-exceed="handleExceed"
             :limit="1"
             :accept="fileType.join(',')"
+            ref="upload"
         >
+            <!-- :on-success="uploadSuccess" -->
             <!-- disabled -->
             <el-input v-model="videoShowUrl" style="width: 414px" @click.stop @input="handleInput">
                 <template #prepend
@@ -33,9 +35,10 @@ import { FolderAdd } from "@element-plus/icons-vue";
 import { ref, computed, inject } from "vue";
 import { generateUUID } from "@/utils";
 import { uploadVideo } from "@/api/modules/upload";
+import { genFileId } from "element-plus";
 import { ElNotification, formContextKey, formItemContextKey } from "element-plus";
-import type { UploadProps, UploadRequestOptions } from "element-plus";
-
+import type { UploadProps, UploadRawFile, UploadInstance } from "element-plus";
+//UploadRequestOptions
 interface UploadFileProps {
     videoUrl: any; // 图片地址 ==> 必传
     api?: (params: any) => Promise<any>; // 上传图片的 api 方法，一般项目上传都是同一个 api 方法，在组件里直接引入即可 ==> 非必传
@@ -69,7 +72,7 @@ const routerName = ref(routerObj[routerValueName]);
 
 // 生成组件唯一id
 const uuid = ref("id-" + generateUUID());
-
+const upload = ref<UploadInstance>();
 // 获取 el-form 组件上下文
 const formContext = inject(formContextKey, void 0);
 // 获取 el-form-item 组件上下文
@@ -86,23 +89,45 @@ interface UploadEmits {
     (e: "update:videoUrl", value: string): void;
 }
 const emit = defineEmits<UploadEmits>();
-const handleHttpUpload = async (options: UploadRequestOptions) => {
+const handleHttpUpload = async (options: any) => {
     let formData = new FormData();
     formData.append("video", options.file);
     try {
         const api = props.api ?? uploadVideo;
         const { data } = await api(formData, routerName.value);
+        if (data.path) {
+            ElNotification({
+                title: "温馨提示",
+                message: "视频上传成功！",
+                type: "success"
+            });
             emit("update:videoUrl", data.path);
             // 调用 el-form 内部的校验方法（可自动校验）
             formItemContext?.prop && formContext?.validateField([formItemContext.prop as string]);
+        } else {
+            videoShowUrl.value = "";
+            emit("update:videoUrl", "");
+        }
     } catch (error) {
+        videoShowUrl.value = "";
+        emit("update:videoUrl", "");
+        if (!error) {
+            return;
+        }
         options.onError(error as any);
     }
 };
-
+const handleExceed: UploadProps["onExceed"] = files => {
+    upload.value!.clearFiles();
+    const file = files[0] as UploadRawFile;
+    file.uid = genFileId();
+    let options: any = {
+        file
+    };
+    handleHttpUpload(options);
+};
 const handleInput = () => {
     emit("update:videoUrl", videoShowUrl.value);
-    console.log("会触发吗");
 };
 
 /**
@@ -132,13 +157,13 @@ const beforeUpload: UploadProps["beforeUpload"] = rawFile => {
 /**
  * @description 视频上传成功
  * */
-const uploadSuccess = () => {
-    ElNotification({
-        title: "温馨提示",
-        message: "视频上传成功！",
-        type: "success"
-    });
-};
+// const uploadSuccess = () => {
+//     ElNotification({
+//         title: "温馨提示",
+//         message: "视频上传成功！",
+//         type: "success"
+//     });
+// };
 
 /**
  * @description 视频上传错误
@@ -153,8 +178,10 @@ const uploadError = () => {
 watch(
     () => props.videoUrl,
     (newVal: any) => {
+        if (newVal) {
             videoShowUrl.value = newVal;
         }
+    }
 );
 </script>
 

src/components/rulesForm/index.vue

@@ -159,6 +159,7 @@
                         show-checkbox
                         check-strictly
                         @change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
+                        style="max-width: 240px"
                     />
                 </template>
                 <template v-if="item.type === 'treeSelects'">

src/views/bannerManagement/list/constant/edit.ts

@@ -78,6 +78,14 @@ export const EDIT_FORM_DATA: FormItem[] = [
         label: "Banner分类: ",
         options: []
     },
+    {
+        prop: "rel_prod_cate_id",
+        placeholder: "请选择",
+        type: "treeSelect",
+        label: "相关分类: ",
+        options: []
+    },
+
     {
         prop: "sort",
         placeholder: "请输入",

src/views/bannerManagement/list/index.vue

@@ -84,6 +84,7 @@ import { messageBox } from "@/utils/messageBox";
 import { useMsg } from "@/hooks/useMsg";
 import { useExport } from "@/hooks/useExport";
 import { integerRexg } from "@/utils/regexp/index";
+import { getProductCategoryListApi } from "@/api/modules/productList";
 // 图片地址
 import { h } from "@/utils/url";
 // 列表接口
@@ -131,6 +132,28 @@ const treeProps = {
     label: "label",
     value: "value"
 };
+const addLabelValue = (arr: any) => {
+    return arr.map((item: any) => {
+        // 为当前对象添加 label 和 value 属性
+        const newItem = { ...item };
+        newItem.label = newItem.name;
+        newItem.value = newItem.id;
+
+        // 如果有子对象，递归调用 addLabelValue 处理子对象
+        if (newItem.children && Array.isArray(newItem.children)) {
+            newItem.children = addLabelValue(newItem.children);
+        }
+        return newItem;
+    });
+};
+//产品分类(后端大佬说直接掉列表接口)
+const getProductCategoryList = async () => {
+    const result = await getProductCategoryListApi();
+    if (result?.code === 0) {
+        let dataClone: any = cloneDeep(result?.data);
+        dataStore.editFormData[6].options = addLabelValue(dataClone);
+    }
+};
 
 const buildTree = (data: any, outerLinkTo: any = "") => {
     return data.map((item: any) => {
@@ -152,24 +175,18 @@ const buildTree = (data: any, outerLinkTo: any = "") => {
 };
 // let isFirstRequest = true;
 const handleRadioGroupEmits = (value: any) => {
-    // if (value !== "video" || value !== "image") {
-    //     return;
-    // }
     if (value === "video") {
         dataStore.editFormData = EDIT_FORM_DATA1;
         dataStore.rules = RULES1;
         getBannerClassEditList();
     }
-    // getBannerClassList();
+
     if (value === "image") {
         dataStore.isFirstRequest = true;
         dataStore.editFormData = EDIT_FORM_DATA;
         dataStore.rules = RULES;
         getBannerClassEditList();
     }
-
-    // console.log(value, "==========value==========");
-    // getBannerClassEditList();
 };
 
 const getSystemUrls = async (node: any, resolve: any) => {
@@ -201,7 +218,8 @@ const getSystemUrls = async (node: any, resolve: any) => {
 const setImgOrVideo = () => {
     if (dataStore.editRuleForm.type === "image") {
         dataStore.editFormData = EDIT_FORM_DATA;
-    } else {
+    }
+    if (dataStore.editRuleForm.type === "video") {
         dataStore.editFormData = EDIT_FORM_DATA1;
     }
     getBannerClassEditList();
@@ -214,6 +232,7 @@ const getBannerRead = async (id: any) => {
     if (result?.code === 0) {
         dataStore.editRuleForm = result?.data;
         setImgOrVideo();
+        getProductCategoryList();
         if (dataStore.editRuleForm.link && dataStore.editRuleForm.link_to) {
             let { id, name, link } = dataStore.editRuleForm.link_echo_data;
             if (!id || !name || !link) {
@@ -262,20 +281,6 @@ const getBannerUp = async () => {
         dataStore.isFirstRequest = true;
     }
 };
-
-// 分类
-const getBannerClassList = async () => {
-    const result = await getBannerClassListApi();
-    if (result?.code === 0) {
-        let arr: any = [];
-        result?.data?.forEach((item: any) => {
-            arr.push({ value: item.id, label: item.name });
-        });
-        dataStore.formData[1].options = arr;
-        // dataStore.editFormData[4].options = arr;
-    }
-};
-getBannerClassList();
 //详情里的分类
 const getBannerClassEditList = async () => {
     const result = await getBannerClassListApi();
@@ -284,10 +289,11 @@ const getBannerClassEditList = async () => {
         result?.data?.forEach((item: any) => {
             arr.push({ value: item.id, label: item.name });
         });
+        dataStore.formData[1].options = arr;
         dataStore.editFormData[5].options = arr;
     }
 };
-
+getBannerClassEditList();
 // 新增
 const getBannerListSave = async () => {
     const result = await getBannerListSaveApi(dataStore.editRuleForm);
@@ -343,6 +349,8 @@ const handleAdd = () => {
     dataStore.title = "添加Banner";
     dataStore.visible = true;
     getBannerClassEditList();
+    // getBannerClassList();
+    getProductCategoryList();
 };
 // 抽屉关闭前的钩子
 const handleBeforeClone = () => {

src/views/productManagement/list/components/basicInfo.vue

@@ -26,7 +26,12 @@
             </el-form-item>
 
             <el-form-item label="产品参数">
-                <el-input v-model="_ruleFormParam.params" style="width: 440px" />
+                <el-input
+                    v-model="_ruleFormParam.params"
+                    style="width: 440px"
+                    type="textarea"
+                    :autosize="{ minRows: 10, maxRows: 20 }"
+                />
             </el-form-item>
 
             <el-form-item label="产品排序" style="width: 440px" required>