feat: 🚀 远程搜索下拉框

src/api/modules/productAccessoryType.ts

@@ -0,0 +1,28 @@
+import http from "@/api";
+
+const URL = `product/compat/parts/`;
+// 配件类型列表
+export const getProductAccessoryTypeListApi = (params: any) => {
+    return http.get<any>(`${URL}/index`, params);
+};
+// 配件类型详情
+export const getProductAccessoryTypeDetailsApi = (params: any) => {
+    return http.get<any>(`${URL}/read/${params}`);
+};
+// 配件类型删除
+export const getProductAccessoryTypeDelApi = (params: any) => {
+    return http.delete<any>(`${URL}/delete/${params}`);
+};
+// 配件类型更新
+export const getProductAccessoryTypeUpApi = (params: any) => {
+    const { id } = params;
+    return http.put<any>(`${URL}/update/${id}`, params);
+};
+//配件类型新增
+export const getProductAccessoryTypeAddApi = (params: any) => {
+    return http.post<any>(`${URL}/save`, params, {
+        headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+        }
+    });
+};

src/api/modules/productCompatibility.ts

@@ -0,0 +1,33 @@
+import http from "@/api";
+
+const PRODUCT_Compatibility = `/product/compat`;
+// 列表
+export const getProductCompatibilityListApi = (params: any) => {
+    return http.get<any>(`${PRODUCT_Compatibility}/index`, params);
+};
+// 详情
+export const getProductCompatibilityDetailsApi = (params: any) => {
+    return http.get<any>(`${PRODUCT_Compatibility}/read/${params}`);
+};
+// 删除
+export const getProductCompatibilityDelApi = (params: any) => {
+    return http.delete<any>(`${PRODUCT_Compatibility}/delete/${params}`);
+};
+// 更新
+export const getProductCompatibilityUpApi = (params: any) => {
+    const { id } = params;
+    return http.put<any>(`${PRODUCT_Compatibility}/update/${id}`, params);
+};
+//新增
+export const getProductCompatibilityAddApi = (params: any) => {
+    return http.post<any>(`${PRODUCT_Compatibility}/save`, params, {
+        headers: {
+            "Content-Type": "application/x-www-form-urlencoded"
+        }
+    });
+};
+//导入
+export const getProductCompatibilityListImportApi = (params: any) => {
+    return http.post<any>(`${PRODUCT_Compatibility}/import`, params);
+};
+//getProductCompatibilityListApi,getProductCompatibilityDetailsApi,getProductCompatibilityDelApi,getProductCompatibilityUpApi,getProductCompatibilityUpApi,getProductCompatibilityAddApi,getProductCompatibilityAddApi

src/components.d.ts

@@ -46,7 +46,6 @@ declare module "vue" {
         ElTabs: typeof import("element-plus/es")["ElTabs"];
         ElTag: typeof import("element-plus/es")["ElTag"];
         ElTooltip: typeof import("element-plus/es")["ElTooltip"];
-        ElTree: typeof import("element-plus/es")["ElTree"];
         ElTreeSelect: typeof import("element-plus/es")["ElTreeSelect"];
         ElUpload: typeof import("element-plus/es")["ElUpload"];
         IEpArrowDown: typeof import("~icons/ep/arrow-down")["default"];

src/components/rulesForm/index.vue

@@ -108,17 +108,6 @@
                         >
                     </el-radio-group>
                 </template>
-                <!-- <template v-if="item.type === 'radio1'">
-                    <el-radio-group v-model="_ruleForm[`${item.prop}`]">
-                        <el-radio
-                            :value="option.value"
-                            :label="option.value"
-                            v-for="(option, optionIndex) in item.options"
-                            :key="optionIndex"
-                            >{{ option.label }}</el-radio
-                        >
-                    </el-radio-group>
-                </template> -->
                 <template v-if="item.type === 'upImg'">
                     <UploadImg v-model:image-url="_ruleForm[`${item.prop}`]">
                         <template #tip>
@@ -149,6 +138,39 @@
                         />
                     </el-select>
                 </template>
+                <template v-if="item.type === 'selectRemote'">
+                    <el-select
+                        v-model="_ruleForm[`${item.prop}`]"
+                        :placeholder="item.placeholder"
+                        clearable
+                        remote
+                        filterable
+                        multiple
+                        :debounce="400"
+                        @clear="handleClear(item)"
+                        class="m-2 select"
+                        remote-show-suffix
+                        :remote-method="
+                              (query:any) => {
+                                remoteMethod(
+                                  query,
+                                  item
+                                );
+                              }
+                            "
+                        :disabled="item.disabled"
+                        style="width: 444px"
+                    >
+                        <el-option
+                            :label="option.name"
+                            :value="option.value"
+                            v-for="option in item.options"
+                            :key="option.value"
+                        />
+                    </el-select>
+                    <!--item.prop -->
+                </template>
+
                 <template v-if="item.type === 'selectMultiple'">
                     <el-select
                         style="width: 240px"
@@ -174,6 +196,7 @@
                         :data="item.options"
                         :placeholder="item.placeholder"
                         :render-after-expand="false"
+                        multiple
                         show-checkbox
                         check-strictly
                         @change="handleSelectChange(_ruleForm[`${item.prop}`], item.prop)"
@@ -219,6 +242,7 @@ interface IProps {
     handleSelectChangeEmits?: () => void;
     handleRadioGroupEmits?: () => void;
     handleTreesSelectChangeEmits?: () => void;
+    handleSelectRometeEmits?: () => void;
 }
 const emits = defineEmits<{
     (e: "handleInputButton", result?: Record<string, any>): void;
@@ -226,6 +250,7 @@ const emits = defineEmits<{
     (e: "handleSelectChangeEmits", result?: Record<string, any>): void;
     (e: "handleRadioGroupEmits", result?: any): void;
     (e: "handleTreesSelectChangeEmits", result?: any): void;
+    (e: "handleSelectRometeEmits", result?: any): void;
 }>();
 const editorRef = ref<any>(null);
 const ruleFormRef = ref<FormInstance>();
@@ -250,6 +275,14 @@ const handleSelectChange = (params: any, prop: any) => {
 const handleRadioGroup = (value: any) => {
     emits("handleRadioGroupEmits", value);
 };
+const handleClear = (item: any) => {
+    item.options = [];
+};
+//远程搜索(供应商)
+const remoteMethod = async (query: any, item: any) => {
+    emits("handleSelectRometeEmits", { query, item });
+    console.log(query, item);
+};
 // 暴露给父组件的参数和方法(外部需要什么，都可以从这里暴露出去)
 defineExpose({
     ruleForm: _ruleForm,

src/views/productManagement/accessoryType/constant/edit.ts

@@ -32,18 +32,18 @@ export const EDIT_FORM_DATA: FormItem[] = [
         label: "排序: "
     },
     {
-        prop: "recommend",
+        prop: "disabled",
         placeholder: "请输入",
         type: "radio",
         label: "是否启用: ",
         options: [
             {
                 label: "是",
-                value: 1
+                value: 0
             },
             {
                 label: "否",
-                value: 0
+                value: 1
             }
         ]
     }

src/views/productManagement/accessoryType/constant/rules.ts

@@ -1,5 +1,4 @@
 export const RULES = {
-    name: [{ required: true, message: "视频名称不能为空 ! ", trigger: "blur" }],
+    name: [{ required: true, message: "配件类型不能为空 ! ", trigger: "blur" }],
-    category_id1: [{ required: true, message: "视频分类不能为空 ! ", trigger: "blur" }],
+    sort: [{ required: true, message: "排序不能为空 ! ", trigger: "blur" }]
-    sort: [{ required: true, message: "视频排序不能为空 ! ", trigger: "blur" }]
 };

src/views/productManagement/accessoryType/constant/table.ts

@@ -15,7 +15,7 @@ export const COLUMNS = [
     {
         align: "left",
         label: "使用状态",
-        prop: "category_name"
+        prop: "disabled"
     },
 
     {
@@ -26,7 +26,7 @@ export const COLUMNS = [
     {
         align: "left",
         label: "更新时间",
-        prop: "created_at"
+        prop: "updated_at"
     },
     // {
     //     align: "center",

src/views/productManagement/accessoryType/index.vue

@@ -3,21 +3,17 @@
     <div class="table-box">
         <div style="padding-bottom: 16px">
             <el-button type="primary" @click="handleAdd"> 添加 </el-button>
-            <el-button type="primary" @click="handleExport"> 导出 </el-button>
         </div>
         <ProTable
             ref="proTableRef"
             :formData="dataStore.formData"
             :columns="dataStore.columns"
-            :request-api="getVideoListApi"
+            :request-api="getProductAccessoryTypeListApi"
             :init-param="dataStore.initParam"
         >
-            <template #image="scope">
+            <template #disabled="scope">
-                <el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
+                <el-tag :type="scope.row.stdisabledatus == 1 ? 'danger' : 'success'" effect="dark">{{
-            </template>
+                    scope.row.disabled == 1 ? "禁用" : "启用"
-            <template #status="scope">
-                <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'" effect="dark">{{
-                    scope.row.status == 1 ? "启用" : "禁用"
                 }}</el-tag>
             </template>
             <template #operation="scope">
@@ -43,7 +39,6 @@
                     :formData="dataStore.editFormData"
                     :rules="dataStore.rules"
                     ref="formRef"
-                    @handleSelectChangeEmits="handleSelectChangeEmits"
                 >
                 </rulesForm>
             </div>
@@ -65,29 +60,23 @@ import { useMsg } from "@/hooks/useMsg";
 
 //列表接口
 import {
-    getVideoListApi,
+    getProductAccessoryTypeUpApi,
-    getVideoListExportApi,
+    getProductAccessoryTypeAddApi,
-    getVideoListDelApi,
+    getProductAccessoryTypeDelApi,
-    getVideoReadApi,
+    getProductAccessoryTypeDetailsApi,
-    getVideoUpdateApi,
+    getProductAccessoryTypeListApi
-    getVideoSaveApi,
+} from "@/api/modules/productAccessoryType";
-    getVideoClassListApi
+
-} from "@/api/modules/videoList";
-import { recursiveCompare } from "@/utils/recursiveCompare";
-// import { getVideoClassListApi } from "@/api/modules/videoClass";
 //深拷贝方法
 import { cloneDeep } from "lodash-es";
 //表格和搜索條件
 import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES } from "./constant/index";
-import { useExport } from "@/hooks/useExport";
 // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
 const proTableRef = ref<any>(null);
 const formRef: any = ref(null);
-//图片地址
-import { h } from "@/utils/url";
 // 数据源
 const dataStore = reactive<any>({
-    title: "添加视频",
+    title: "添加配件类型",
     columns: COLUMNS, //列表配置项
     rules: cloneDeep(RULES), //抽屉表单验证
     editRuleForm: cloneDeep(EDIT_RULE_FORM),
@@ -104,7 +93,7 @@ const handleConfirmClick = () => {
     if (!formRef.value!.ruleFormRef) return;
     formRef!.value!.ruleFormRef!.validate((valid: any) => {
         if (valid) {
-            dataStore.title === "添加视频" ? getVideoSave() : getVideoUpdate();
+            dataStore.title === "添加配件类型" ? getProductAccessoryTypeSave() : getProductAccessoryTypeUpdate();
         } else {
             console.log("error submit!");
             return false;
@@ -118,54 +107,54 @@ const resetFields = () => {
 };
 //抽屉重置
 const handleResetClick = () => {
-    if (dataStore.title === "添加视频") {
+    if (dataStore.title === "添加配件类型") {
         resetFields();
     } else {
-        getVideoRead(dataStore.selectRow.id);
+        getProductAccessoryTypeRead(dataStore.selectRow.id);
     }
 };
 
-//视频分类接口
+// //视频分类接口
-const getVideoClassList = async () => {
+// const getProductAccessoryTypeClassList = async () => {
-    const result = await getVideoClassListApi();
+//     const result = await getProductAccessoryTypeClassListApi();
-    if (result?.code === 0) {
+//     if (result?.code === 0) {
-        let arr: any[] = [];
+//         let arr: any[] = [];
-        if (result?.data?.length) {
+//         if (result?.data?.length) {
-            result?.data?.forEach((item: any) => {
+//             result?.data?.forEach((item: any) => {
-                let obj = {
+//                 let obj = {
-                    value: item.id,
+//                     value: item.id,
-                    label: item.name
+//                     label: item.name
-                };
+//                 };
-                arr.push(obj);
+//                 arr.push(obj);
-            });
+//             });
-            dataStore.formData[1].options = arr;
+//             dataStore.formData[1].options = arr;
-        }
+//         }
-    }
+//     }
-};
+// };
-getVideoClassList();
+// getProductAccessoryTypeClassList();
 
-const getVideoClassEditList = async () => {
+// const getProductAccessoryTypeClassEditList = async () => {
-    const result = await getVideoClassListApi({ is_show: 1 });
+//     const result = await getProductAccessoryTypeClassListApi({ is_show: 1 });
-    if (result?.code === 0) {
+//     if (result?.code === 0) {
-        let arr: any[] = [];
+//         let arr: any[] = [];
-        if (result?.data?.length) {
+//         if (result?.data?.length) {
-            result?.data?.forEach((item: any) => {
+//             result?.data?.forEach((item: any) => {
-                let obj = {
+//                 let obj = {
-                    value: item.id,
+//                     value: item.id,
-                    label: item.name
+//                     label: item.name
-                };
+//                 };
-                arr.push(obj);
+//                 arr.push(obj);
-            });
+//             });
-            dataStore.editFormData[1].options = arr;
+//             dataStore.editFormData[1].options = arr;
-        }
+//         }
-    }
+//     }
-};
+// };
-getVideoClassEditList();
+// getProductAccessoryTypeClassEditList();
 
 //添加
 const handleAdd = () => {
     dataStore.visible = true;
-    dataStore.title = "添加视频";
+    dataStore.title = "添加配件类型";
 };
 //抽屉关闭前的钩子
 const handleBeforeClone = () => {
@@ -174,32 +163,16 @@ const handleBeforeClone = () => {
     dataStore.visible = false;
 };
 //详情
-const getVideoRead = async (id: any) => {
+const getProductAccessoryTypeRead = async (id: any) => {
-    const result = await getVideoReadApi(id);
+    const result = await getProductAccessoryTypeDetailsApi(id);
     if (result?.code === 0) {
         dataStore.editRuleForm = result?.data;
-        // let is = dataStore.editFormData[1].options.some((item: any) => {
-        //     console.log(item.id);
-        //     console.log(dataStore.editRuleForm.category_id);
-        //     return item.value == dataStore.editRuleForm.category_id;
-        // });
-        let is = dataStore.editFormData[1].options.some((item: any) =>
-            recursiveCompare(item, dataStore.editRuleForm.category_id)
-        );
-        dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
-    }
-};
-
-const handleSelectChangeEmits = (value: any) => {
-    console.log(value, "========value=33========");
-    if (value.prop === "category_id1") {
-        dataStore.editRuleForm.category_id = value.id;
     }
 };
 
 //保存
-const getVideoSave = async () => {
+const getProductAccessoryTypeSave = async () => {
-    const result = await getVideoSaveApi(dataStore.editRuleForm);
+    const result = await getProductAccessoryTypeAddApi(dataStore.editRuleForm);
     if (result?.code === 0) {
         const { msg } = result;
         useMsg("success", msg);
@@ -209,8 +182,8 @@ const getVideoSave = async () => {
     }
 };
 //更新
-const getVideoUpdate = async () => {
+const getProductAccessoryTypeUpdate = async () => {
-    const result = await getVideoUpdateApi(dataStore.editRuleForm);
+    const result = await getProductAccessoryTypeUpApi(dataStore.editRuleForm);
     if (result?.code === 0) {
         const { msg } = result;
         useMsg("success", msg);
@@ -219,18 +192,11 @@ const getVideoUpdate = async () => {
         proTableRef?.value?.getTableList();
     }
 };
-//导出接口
+
-const getProductListExport = async () => {
-    const result = await getVideoListExportApi({
-        ...proTableRef?.value?.searchParam,
-        ...proTableRef?.value?.pageable
-    });
-    await useExport(result);
-};
 //删除
-const getVideoListDel = (id: any) => {
+const getProductAccessoryTypeListDel = (id: any) => {
     messageBox("你确定要删除?", async () => {
-        const result = await getVideoListDelApi(id);
+        const result = await getProductAccessoryTypeDelApi(id);
         if (result?.code === 0) {
             const { msg } = result;
             useMsg("success", msg);
@@ -244,19 +210,15 @@ const handleBtnClick = (type: any, row: any) => {
     //编辑
     if (type === "编辑") {
         dataStore.visible = true;
-        dataStore.title = "编辑视频";
+        dataStore.title = "编辑配件类型";
-        getVideoRead(row.id);
+        getProductAccessoryTypeRead(row.id);
         return;
     }
     //删除
     if (type === "删除") {
-        getVideoListDel(row.id);
+        getProductAccessoryTypeListDel(row.id);
     }
 };
-//导出
-const handleExport = () => {
-    getProductListExport();
-};
 </script>
 
 <style scoped></style>

src/views/productManagement/compatibility/constant/edit.ts

@@ -19,64 +19,65 @@ interface FormItem {
 }
 export const EDIT_FORM_DATA: FormItem[] = [
     {
-        prop: "name",
+        prop: "label_name",
         placeholder: "请输入",
         type: "input",
         label: "标签名称: "
     },
     {
-        prop: "name",
+        prop: "part_id",
         placeholder: "请输入",
         type: "select",
-        label: "配件类型: "
+        label: "配件类型: ",
+        options: []
     },
     {
-        prop: "name",
+        prop: "brand_name",
         placeholder: "请输入",
         type: "input",
         label: "品牌: "
     },
     {
-        prop: "name",
+        prop: "level_name",
         placeholder: "请输入",
         type: "input",
         label: "级别: "
     },
     {
-        prop: "name",
+        prop: "class_name",
         placeholder: "请输入",
         type: "input",
         label: "类别: "
     },
     {
-        prop: "name",
+        prop: "series_name",
         placeholder: "请输入",
         type: "input",
         label: "系列: "
     },
     {
-        prop: "name",
+        prop: "model",
         placeholder: "请输入",
         type: "input",
         label: "市场型号: "
     },
     {
-        prop: "name",
+        prop: "capacity",
         placeholder: "请输入",
         type: "input",
-        label: "容器: "
+        label: "容量: "
     },
     {
-        prop: "name",
+        prop: "interface_type",
         placeholder: "请输入",
         type: "input",
         label: "接口类型: "
     },
     {
-        prop: "name",
+        prop: "compat_status",
         placeholder: "请输入",
         type: "input",
-        label: "兼容类型: "
+        label: "兼容状态: "
     },
     {
         prop: "sort",
@@ -85,18 +86,18 @@ export const EDIT_FORM_DATA: FormItem[] = [
         label: "排序: "
     },
     {
-        prop: "recommend",
+        prop: "disabled",
         placeholder: "请输入",
         type: "radio",
         label: "是否启用: ",
         options: [
             {
                 label: "是",
-                value: 1
+                value: 0
             },
             {
                 label: "否",
-                value: 0
+                value: 1
             }
         ]
     }

src/views/productManagement/compatibility/constant/rules.ts

@@ -0,0 +1,5 @@
+export const RULES = {
+    label_name: [{ required: true, message: "标签名称不能为空 ! ", trigger: "blur" }],
+    brand_name: [{ required: true, message: "标签名称不能为空 ! ", trigger: "blur" }],
+    sort: [{ required: true, message: "视频排序不能为空 ! ", trigger: "blur" }]
+};

src/views/productManagement/compatibility/constant/search.ts

@@ -17,13 +17,13 @@ interface FormItem {
 }
 export const FORM_DATA: FormItem[] = [
     {
-        prop: "name",
+        prop: "label_name",
         placeholder: "请输入",
         type: "input",
         label: "标签名称: "
     },
     {
-        prop: "name",
+        prop: "model",
         placeholder: "请输入",
         type: "input",
         label: "型号: "

src/views/productManagement/compatibility/constant/table.ts

@@ -10,66 +10,85 @@ export const COLUMNS = [
     {
         align: "left",
         label: "标签名称",
-        prop: "name"
+        prop: "label_name",
+        width: 200,
+        fixed: true
     },
     {
         align: "left",
         label: "配件类型",
-        prop: "category_name"
+        prop: "part_name",
+        width: 200,
+        fixed: true
     },
     {
         align: "left",
         label: "品牌",
-        prop: "sort",
+        prop: "brand_name",
-        width: 160
+        width: 200,
+        fixed: true
     },
     {
         align: "left",
         label: "级别",
-        prop: "sort",
+        prop: "level_name",
         width: 160
     },
     {
         align: "left",
         label: "系列",
-        prop: "sort",
+        prop: "series_name",
-        width: 160
+        width: 200
     },
 
     {
         align: "left",
         label: "型号",
-        prop: "created_at"
+        prop: "model",
+        width: 200
     },
     {
         align: "left",
         label: "容量",
-        prop: "created_at"
+        prop: "capacity",
+        width: 160
     },
     {
         align: "left",
         label: "接口型号",
-        prop: "created_at"
+        prop: "interface_type",
+        width: 200
     },
     {
         align: "left",
         label: "兼容性状态",
-        prop: "created_at"
+        prop: "compat_status",
+        width: 160
     },
     {
         align: "left",
         label: "排序",
-        prop: "created_at"
+        prop: "sort",
+        width: 160
+    },
+    {
+        align: "left",
+        label: "使用状态",
+        prop: "disabled",
+        width: 160
     },
     {
         align: "left",
         label: "创建时间",
-        prop: "created_at"
+        prop: "created_at",
+        width: 160
     },
     {
         align: "left",
         label: "更新时间",
-        prop: "created_at"
+        prop: "updated_at",
+        width: 160
     },
+
     { prop: "operation", label: "操作", fixed: "right", width: 200 }
 ];

src/views/productManagement/compatibility/index.vue

@@ -9,15 +9,12 @@
             ref="proTableRef"
             :formData="dataStore.formData"
             :columns="dataStore.columns"
-            :request-api="getVideoListApi"
+            :request-api="getProductCompatibilityListApi"
             :init-param="dataStore.initParam"
         >
-            <template #image="scope">
+            <template #disabled="scope">
-                <el-image :src="scope.row.image ? h + scope.row.image : ''" style="width: 60px; height: 60px" />
+                <el-tag :type="scope.row.stdisabledatus == 1 ? 'danger' : 'success'" effect="dark">{{
-            </template>
+                    scope.row.disabled == 1 ? "禁用" : "启用"
-            <template #status="scope">
-                <el-tag :type="scope.row.status == 1 ? 'success' : 'danger'" effect="dark">{{
-                    scope.row.status == 1 ? "启用" : "禁用"
                 }}</el-tag>
             </template>
             <template #operation="scope">
@@ -61,20 +58,21 @@
 <script setup lang="ts" name="productCompatibilityList">
 import ProTable from "@/components/ProTable/index.vue";
 import rulesForm from "@/components/rulesForm/index.vue";
+import ImportExcel from "@/components/ImportExcel/index.vue";
 import { messageBox } from "@/utils/messageBox";
 import { useMsg } from "@/hooks/useMsg";
-const importRef = ref();
+
 //列表接口
 import {
-    getVideoListApi,
+    getProductCompatibilityListApi,
-    getVideoListDelApi,
+    getProductCompatibilityDetailsApi,
-    getVideoReadApi,
+    getProductCompatibilityDelApi,
-    getVideoUpdateApi,
+    getProductCompatibilityUpApi,
-    getVideoSaveApi,
+    getProductCompatibilityAddApi,
-    getVideoClassListApi
+    getProductCompatibilityListImportApi
-} from "@/api/modules/videoList";
+} from "@/api/modules/productCompatibility";
-import { recursiveCompare } from "@/utils/recursiveCompare";
+//列表接口
-// import { getVideoClassListApi } from "@/api/modules/videoClass";
+import { getProductAccessoryTypeListApi } from "@/api/modules/productAccessoryType";
 //深拷贝方法
 import { cloneDeep } from "lodash-es";
 //表格和搜索條件
@@ -83,11 +81,10 @@ import { RULE_FORM, FORM_DATA, COLUMNS, EDIT_FORM_DATA, EDIT_RULE_FORM, RULES }
 // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
 const proTableRef = ref<any>(null);
 const formRef: any = ref(null);
-//图片地址
+const importRef = ref(null);
-import { h } from "@/utils/url";
 // 数据源
 const dataStore = reactive<any>({
-    title: "添加视频",
+    title: "添加",
     columns: COLUMNS, //列表配置项
     rules: cloneDeep(RULES), //抽屉表单验证
     editRuleForm: cloneDeep(EDIT_RULE_FORM),
@@ -104,7 +101,7 @@ const handleConfirmClick = () => {
     if (!formRef.value!.ruleFormRef) return;
     formRef!.value!.ruleFormRef!.validate((valid: any) => {
         if (valid) {
-            dataStore.title === "添加视频" ? getVideoSave() : getVideoUpdate();
+            dataStore.title === "添加" ? getSave() : getUpdate();
         } else {
             console.log("error submit!");
             return false;
@@ -118,54 +115,37 @@ const resetFields = () => {
 };
 //抽屉重置
 const handleResetClick = () => {
-    if (dataStore.title === "添加视频") {
+    if (dataStore.title === "添加") {
         resetFields();
     } else {
-        getVideoRead(dataStore.selectRow.id);
+        getRead(dataStore.selectRow.id);
     }
 };
 
-//视频分类接口
+const getProductAccessoryTypeList = async () => {
-const getVideoClassList = async () => {
+    const result = await getProductAccessoryTypeListApi({ is_show: 1 });
-    const result = await getVideoClassListApi();
+    console.log(result?.data.data, "==================>");
     if (result?.code === 0) {
         let arr: any[] = [];
-        if (result?.data?.length) {
+        if (result?.data?.data?.length) {
-            result?.data?.forEach((item: any) => {
+            result?.data?.data?.forEach((item: any) => {
-                let obj = {
-                    value: item.id,
-                    label: item.name
-                };
-                arr.push(obj);
-            });
-            dataStore.formData[1].options = arr;
-        }
-    }
-};
-getVideoClassList();
-
-const getVideoClassEditList = async () => {
-    const result = await getVideoClassListApi({ is_show: 1 });
-    if (result?.code === 0) {
-        let arr: any[] = [];
-        if (result?.data?.length) {
-            result?.data?.forEach((item: any) => {
                 let obj = {
                     value: item.id,
                     label: item.name
                 };
                 arr.push(obj);
             });
+            console.log(arr, "=================");
             dataStore.editFormData[1].options = arr;
         }
     }
 };
-getVideoClassEditList();
+getProductAccessoryTypeList();
 
 //添加
 const handleAdd = () => {
     dataStore.visible = true;
-    dataStore.title = "添加视频";
+    dataStore.title = "添加";
 };
 //抽屉关闭前的钩子
 const handleBeforeClone = () => {
@@ -174,32 +154,20 @@ const handleBeforeClone = () => {
     dataStore.visible = false;
 };
 //详情
-const getVideoRead = async (id: any) => {
+const getRead = async (id: any) => {
-    const result = await getVideoReadApi(id);
+    const result = await getProductCompatibilityDetailsApi(id);
     if (result?.code === 0) {
         dataStore.editRuleForm = result?.data;
-        // let is = dataStore.editFormData[1].options.some((item: any) => {
-        //     console.log(item.id);
-        //     console.log(dataStore.editRuleForm.category_id);
-        //     return item.value == dataStore.editRuleForm.category_id;
-        // });
-        let is = dataStore.editFormData[1].options.some((item: any) =>
-            recursiveCompare(item, dataStore.editRuleForm.category_id)
-        );
-        dataStore.editRuleForm.category_id1 = is ? dataStore.editRuleForm.category_id : dataStore.editRuleForm.category_name;
     }
 };
 
 const handleSelectChangeEmits = (value: any) => {
     console.log(value, "========value=33========");
-    if (value.prop === "category_id1") {
-        dataStore.editRuleForm.category_id = value.id;
-    }
 };
 
 //保存
-const getVideoSave = async () => {
+const getSave = async () => {
-    const result = await getVideoSaveApi(dataStore.editRuleForm);
+    const result = await getProductCompatibilityAddApi(dataStore.editRuleForm);
     if (result?.code === 0) {
         const { msg } = result;
         useMsg("success", msg);
@@ -209,8 +177,8 @@ const getVideoSave = async () => {
     }
 };
 //更新
-const getVideoUpdate = async () => {
+const getUpdate = async () => {
-    const result = await getVideoUpdateApi(dataStore.editRuleForm);
+    const result = await getProductCompatibilityUpApi(dataStore.editRuleForm);
     if (result?.code === 0) {
         const { msg } = result;
         useMsg("success", msg);
@@ -221,9 +189,9 @@ const getVideoUpdate = async () => {
 };
 
 //删除
-const getVideoListDel = (id: any) => {
+const getListDel = (id: any) => {
     messageBox("你确定要删除?", async () => {
-        const result = await getVideoListDelApi(id);
+        const result = await getProductCompatibilityDelApi(id);
         if (result?.code === 0) {
             const { msg } = result;
             useMsg("success", msg);
@@ -237,13 +205,13 @@ const handleBtnClick = (type: any, row: any) => {
     //编辑
     if (type === "编辑") {
         dataStore.visible = true;
-        dataStore.title = "编辑视频";
+        dataStore.title = "编辑";
-        getVideoRead(row.id);
+        getRead(row.id);
         return;
     }
     //删除
     if (type === "删除") {
-        getVideoListDel(row.id);
+        getListDel(row.id);
     }
 };
 
@@ -252,7 +220,7 @@ const handleImport = () => {
     let params = {
         title: "数据",
         tempApi: "",
-        importApi: "",
+        importApi: getProductCompatibilityListImportApi,
         proTableRef: proTableRef
     };
     importRef.value.acceptParams(params);

src/views/productManagement/compatibility/list/constant/rules.ts

@@ -1,5 +0,0 @@
-export const RULES = {
-    name: [{ required: true, message: "视频名称不能为空 ! ", trigger: "blur" }],
-    category_id1: [{ required: true, message: "视频分类不能为空 ! ", trigger: "blur" }],
-    sort: [{ required: true, message: "视频排序不能为空 ! ", trigger: "blur" }]
-};

src/views/productManagement/list/constant/form.ts

@@ -1,28 +1,15 @@
 //兼容性信息(否)
 export const FORM_DATA_LV1: any[] = [
     {
-        prop: "tag",
+        prop: "compat_id",
         placeholder: "请输入",
-        type: "selectMultiple",
+        type: "selectRemote",
         label: "关联标签: ",
-        options: [
+        options: []
-            {
-                value: 1,
-                label: "测试1"
-            },
-            {
-                value: 2,
-                label: "测试2"
-            },
-            {
-                value: 3,
-                label: "测试3"
-            }
-        ]
     },
 
     {
-        prop: "is_show",
+        prop: "show_series_name",
         placeholder: "请输入",
         type: "radio",
         label: "是否显示系列名: ",
@@ -47,14 +34,15 @@ export const FORM_DATA_LV1: any[] = [
 //兼容性信息(是)
 export const FORM_DATA_LV2: any[] = [
     {
-        prop: "tag",
+        prop: "compat_id",
         placeholder: "请输入",
-        type: "selectMultiple",
+        type: "selectRemote",
-        label: "关联标签: "
+        label: "关联标签: ",
+        options: []
     },
 
     {
-        prop: "is_show",
+        prop: "show_series_name",
         placeholder: "请输入",
         type: "radio",
         label: "是否显示系列名: ",
@@ -72,7 +60,7 @@ export const FORM_DATA_LV2: any[] = [
 
     //
     {
-        prop: "className",
+        prop: "series_name",
         placeholder: "请输入",
         type: "input",
         label: "产品系列名: "

src/views/productManagement/list/constant/rules.ts

@@ -1,7 +1,7 @@
 export const RULES_LV1 = {
-    tag: [{ required: true, message: "所属系列名称不能为空 ! ", trigger: "change" }]
+    compat_id: [{ required: true, message: "所属系列名称不能为空 ! ", trigger: "change" }]
 };
 export const RULES_LV2 = {
-    tag: [{ required: true, message: "所属系列名称不能为空 ! ", trigger: "change" }],
+    compat_id: [{ required: true, message: "所属系列名称不能为空 ! ", trigger: "change" }],
-    className: [{ required: true, message: "产品系列名不能为空 ! ", trigger: "blur" }]
+    series_name: [{ required: true, message: "产品系列名不能为空 ! ", trigger: "blur" }]
 };

src/views/productManagement/list/edit.vue

@@ -41,6 +41,7 @@
                         :formData="dataStore.formData"
                         :rules="dataStore.rules"
                         ref="formRef"
+                        @handleSelectRometeEmits="handleSelectRometeEmits"
                         @handleRadioGroupEmits="handleRadioGroupEmits"
                     />
                 </el-tab-pane>
@@ -54,13 +55,14 @@ import { ref, reactive } from "vue";
 import Editor from "@/components/Editor/index.vue";
 import rulesForm from "@/components/rulesForm/index.vue";
 import { FORM_DATA_LV2, FORM_DATA_LV1, RULES_LV1, RULES_LV2 } from "./constant/index";
-console.log(FORM_DATA_LV2, RULES_LV2);
+
 import {
     getProductDetailsApi,
     getProductListApi,
     getProductAttrsListApi,
     getProductCategoryListApi
 } from "@/api/modules/productList";
+import { getProductCompatibilityListApi } from "@/api/modules/productCompatibility";
 // import { getProductCategoryListApi } from "@/api/modules/productClass";
 import { RELATED_INFO_COLUMNS } from "./constant/related";
 import { cloneDeep, debounce } from "lodash-es";
@@ -157,6 +159,28 @@ const getProductCategoryList = async () => {
 };
 getProductCategoryList();
 
+//兼容性信息(后端大佬说直接掉列表接口)
+const getProductCompatibilityList = async (label_name: any) => {
+    if (!label_name) {
+        return;
+    }
+    const result = await getProductCompatibilityListApi({ is_show: 1, page: 1, size: 50, label_name });
+    if (result?.code === 0) {
+        let arr: any[] = [];
+        if (result?.data?.data?.length) {
+            result?.data?.data?.forEach((item: any) => {
+                let obj = {
+                    value: item.id,
+                    name: item.label_name
+                };
+                arr.push(obj);
+            });
+
+            dataStore.formData[0].options = arr;
+        }
+    }
+};
+
 //相关信息及行远程搜索下拉框点击
 const handleRemoteClick = (params: any) => {
     const { item, index } = params;
@@ -188,16 +212,22 @@ const handleRemote = debounce((params: any) => {
     getProductList(params.query);
 }, 800);
 const handleTabClick = () => {
-    formRef.value.ruleFormRef.clearValidate("tag");
+    formRef.value.ruleFormRef.clearValidate("compat_id");
 };
 const handleRadioGroupEmits = (params: any) => {
     if (params === 1) {
         dataStore.formData = cloneDeep(FORM_DATA_LV2);
+        dataStore.rules = cloneDeep(RULES_LV2);
     } else {
-        dataStore.ruleForm.className = "";
+        dataStore.ruleForm.series_name = "";
         dataStore.formData = cloneDeep(FORM_DATA_LV1);
+        dataStore.rules = cloneDeep(RULES_LV1);
     }
 };
+const handleSelectRometeEmits = (params: any) => {
+    console.log(params.query, "=============params=========");
+    getProductCompatibilityList(params.query);
+};
 </script>
 
 <style scoped></style>

src/views/productManagement/list/index.vue

@@ -62,6 +62,7 @@ import {
     getProductListExportApi,
     getProductCategoryListApi
 } from "@/api/modules/productList";
+
 // import { getProductCategoryListApi } from "@/api/modules/productClass";
 import { addLabelValue } from "@/utils/addLabelValue";
 

src/views/productManagement/list/utils/edit/initDetailParams.ts

@@ -1,4 +1,5 @@
 import { cloneDeep } from "lodash-es";
+import { FORM_DATA_LV2, FORM_DATA_LV1, RULES_LV1, RULES_LV2 } from "../../constant/index";
 // import { convertSpanToDiv } from "@/utils/convertSpanToDiv";
 const hasIdRecursive = (data: any, targetId: any) => {
     for (let i = 0; i < data.length; i++) {
@@ -88,4 +89,29 @@ export const initDetailParams = (dataStore: any, data: any, editorRef: any) => {
     if (data.related) {
         dataStore.relatedTableData = cloneDeep(data.related);
     }
+    if (data.compat.length) {
+        dataStore.ruleForm = data.compat[0];
+        let ids: any[] = [];
+        let options: any[] = [];
+        dataStore.ruleForm?.compat.forEach((item: any) => {
+            ids.push(item.compat_id);
+            options.push({
+                value: item.compat_id,
+                name: item.label_name
+            });
+        });
+        dataStore.ruleForm.compat_id = ids;
+        //
+        console.log(options, "===options===");
+        if (dataStore.ruleForm.show_series_name === 1) {
+            dataStore.formData = cloneDeep(FORM_DATA_LV2);
+            dataStore.rules = cloneDeep(RULES_LV2);
+            dataStore.formData[0].options = options;
+        } else {
+            dataStore.ruleForm.series_name = "";
+            dataStore.formData = cloneDeep(FORM_DATA_LV1);
+            dataStore.rules = cloneDeep(RULES_LV1);
+            dataStore.formData[0].options = options;
+        }
+    }
 };

src/views/productManagement/list/utils/edit/submit.ts

@@ -7,7 +7,7 @@ const WARN: any = {
     category_id: "产品分类不能为空 !",
     sort: "产品排序不能为空 !",
     tag: "关联标签不能为空 !",
-    className: "产品系列名不能为空 !"
+    seriesName: "产品系列名不能为空 !"
 };
 //警告
 const warnFunction = (data: any, data1: any) => {
@@ -27,12 +27,12 @@ const warnFunction = (data: any, data1: any) => {
         useMsg("warning", WARN["sort"]);
         return false;
     }
-    if (!data1.tag) {
+    // if (!data1.tag) {
-        useMsg("warning", WARN["tag"]);
+    //     useMsg("warning", WARN["tag"]);
-        return false;
+    //     return false;
-    }
+    // }
-    if (data1.is_show && !data1.className) {
+    if (data1.is_show && !data1.series_name) {
-        useMsg("warning", WARN["className"]);
+        useMsg("warning", WARN["seriesName"]);
         return false;
     }
     return true;
@@ -71,8 +71,11 @@ export const handleSubmit = async (infoRef: any, imgInfoRef: any, formRef: any,
     });
     console.log(skusClone, "=skusClone=");
     let skusCloneStr = JSON.stringify(skusClone);
+    // cloneDeep
+    let ruleForm: any = cloneDeep(dataStore.ruleForm);
+    ruleForm.compat_id = ruleForm.compat_id.join(",");
     console.log(typeof skusCloneStr);
-
+    console.log(dataStore.ruleForm, "=ruleForm=");
     const params = {
         ...infoRef.ruleForm,
         cover_image,
@@ -80,7 +83,8 @@ export const handleSubmit = async (infoRef: any, imgInfoRef: any, formRef: any,
         video_img,
         skus: skusCloneStr,
         detail: dataStore.detail,
-        related: JSON.stringify(relatedData) || []
+        related: JSON.stringify(relatedData) || [],
+        compat: JSON.stringify(ruleForm) || {}
     };
 
     console.log(params, "===========params=============");