feat: 🚀 远程搜索下拉框

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/compatibility/constant/table.ts

@@ -80,12 +80,14 @@ export const COLUMNS = [
     {
         align: "left",
         label: "创建时间",
-        prop: "created_at"
+        prop: "created_at",
+        width: 160
     },
     {
         align: "left",
         label: "更新时间",
-        prop: "updated_at"
+        prop: "updated_at",
+        width: 160
     },
 
     { prop: "operation", label: "操作", fixed: "right", width: 200 }

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

@@ -3,7 +3,7 @@ export const FORM_DATA_LV1: any[] = [
     {
         prop: "compat_id",
         placeholder: "请输入",
-        type: "selectMultiple",
+        type: "selectRemote",
         label: "关联标签: ",
         options: []
     },
@@ -36,8 +36,9 @@ export const FORM_DATA_LV2: any[] = [
     {
         prop: "compat_id",
         placeholder: "请输入",
-        type: "selectMultiple",
+        type: "selectRemote",
-        label: "关联标签: "
+        label: "关联标签: ",
+        options: []
     },
 
     {

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>
@@ -159,15 +160,18 @@ const getProductCategoryList = async () => {
 getProductCategoryList();
 
 //兼容性信息(后端大佬说直接掉列表接口)
-const getProductCompatibilityList = async () => {
+const getProductCompatibilityList = async (label_name: any) => {
-    const result = await getProductCompatibilityListApi({ is_show: 1 });
+    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,
-                    label: item.label_name
+                    name: item.label_name
                 };
                 arr.push(obj);
             });
@@ -176,7 +180,6 @@ const getProductCompatibilityList = async () => {
         }
     }
 };
-getProductCompatibilityList();
 
 //相关信息及行远程搜索下拉框点击
 const handleRemoteClick = (params: any) => {
@@ -216,11 +219,15 @@ const handleRadioGroupEmits = (params: any) => {
         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/utils/edit/initDetailParams.ts

@@ -92,17 +92,26 @@ export const initDetailParams = (dataStore: any, data: any, editorRef: any) => {
     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.className = "";
+            dataStore.ruleForm.series_name = "";
             dataStore.formData = cloneDeep(FORM_DATA_LV1);
             dataStore.rules = cloneDeep(RULES_LV1);
+            dataStore.formData[0].options = options;
         }
     }
 };