ol-base-components 3.2.2 → 3.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-base-components",
-  "version": "3.2.2",
+  "version": "3.2.6",
   "private": false,
   "main": "src/package/index.js",
   "bin": {

package/src/App.vue

@@ -3,6 +3,7 @@
     <ol-customSearch
       :form-search-data="formSearchData"
       @handleSearch="handleSearch"
+      :dragable="false"
     ></ol-customSearch>
     =========
     <!-- <div>table组件案例</div> -->

package/src/package/customSearch/src/index.vue

@@ -4,6 +4,7 @@
     @onSave="onSave"
     v-bind="$attrs"
     v-on="$listeners"
+    :key="key"
   />
 </template>
 
@@ -33,12 +34,13 @@ export default {
   data() {
     return {
       currentPageItem: {},
+      key: 0,
     };
   },
-  created() {
+
+  mounted() {
     this.init();
   },
-  mounted() {},
   methods: {
     init() {
       const handleMenu = (arr, _this) => {
@@ -68,6 +70,7 @@ export default {
         if (res.code !== 200) return;
         const configList = res.result.settingJson ? JSON.parse(res.result.settingJson) : [];
         this.formSearchData.tableSearch = configList;
+        this.key++;
       });
     },
     //保存

package/src/package/formSearch/src/components/SearchConfigDialog.vue

@@ -29,7 +29,7 @@
         row-key="value"
         :tree-props="{ children: '' }"
       >
-        <el-table-column label="排序" width="80" align="center">
+        <el-table-column label="排序" width="80" align="center" v-if="dragable">
           <template slot-scope="scope">
             <i class="el-icon-rank sort-handle" style="cursor: move; font-size: 18px" />
           </template>
@@ -152,17 +152,18 @@
           </el-radio-group>
         </el-form-item>
 
-        <el-form-item v-if="currentOptionConfig.sourceType === 'dict'" label="字典Key">
+        <el-form-item v-if="currentOptionConfig.sourceType === 'dict'" label="字典">
           <el-select
             v-model="currentOptionConfig.dictKey"
             filterable
             remote
             reserve-keyword
-            placeholder="请输入字典Key，如：orderTypeEnum"
+            placeholder="请输入字典，如：orderTypeEnum"
             :remote-method="remoteDictQuery"
             :loading="dictLoading"
             style="width: 100%"
             @change="handleDictKeyChange"
+            clearable
           >
             <el-option
               v-for="dict in allDictList"
@@ -187,11 +188,11 @@
           </el-select>
         </el-form-item>
 
-        <el-form-item v-if="currentOptionConfig.sourceType === 'api'" label="文本字段">
+        <el-form-item v-if="currentOptionConfig.sourceType === 'api' && show" label="文本字段">
           <el-input v-model="currentOptionConfig.labelField" placeholder="如：name" />
         </el-form-item>
 
-        <el-form-item v-if="currentOptionConfig.sourceType === 'api'" label="值字段">
+        <el-form-item v-if="currentOptionConfig.sourceType === 'api' && show" label="值字段">
           <el-input v-model="currentOptionConfig.valueField" placeholder="如：id" />
         </el-form-item>
 
@@ -233,7 +234,7 @@
           </div>
         </el-form-item>
 
-        <el-form-item v-if="currentOptionConfig.sourceType === 'dict'" label="预览">
+        <el-form-item v-if="currentOptionConfig.sourceType === 'dict' && show" label="预览">
           <div class="preview-box">
             <el-tag v-for="(item, index) in previewOptions" :key="index" style="margin: 5px">
               {{ item.value }} ({{ item.key }})
@@ -246,10 +247,12 @@
           </div>
         </el-form-item>
       </el-form>
-      <slot name="footer">
-        <el-button @click="optionsDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="handleSaveOptions">确定</el-button>
-      </slot>
+      <div class="dialog-footer">
+        <slot name="footer">
+          <el-button @click="optionsDialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSaveOptions">确定</el-button>
+        </slot>
+      </div>
     </el-dialog>
 
     <el-dialog
@@ -353,9 +356,14 @@ export default {
       type: Array,
       default: () => [],
     },
+    dragable: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
+      show: false,
       dialogVisible: false,
       configList: [],
       optionsDialogVisible: false,
@@ -375,6 +383,7 @@ export default {
       dictLoading: false,
       dictQuery: "",
       sortable: null,
+      currentConfig: {}, // 配置选项
     };
   },
   computed: {
@@ -595,6 +604,7 @@ export default {
     handleConfigOptions(index) {
       this.currentEditIndex = index;
       const currentConfig = this.configList[index];
+      this.currentConfig = JSON.parse(JSON.stringify(currentConfig));
 
       const optionSource = currentConfig.optionSource || {};
       this.currentOptionConfig = {
@@ -624,7 +634,55 @@ export default {
     handleDeleteOption(index) {
       this.currentOptionConfig.options.splice(index, 1);
     },
-    handleSaveOptions() {
+    async loadApiOptions(item) {
+      try {
+        const apiUrl = item.optionSource.apiUrl;
+        const method = item.optionSource.method || "get";
+        if (!apiUrl) return;
+
+        let response;
+        if (method === "post") {
+          response = await this.post({ url: apiUrl });
+        } else {
+          response = await this.get({ url: apiUrl });
+        }
+        if (response.code !== 200) return;
+        if (response.result && Array.isArray(response.result)) {
+          const { valueField, labelField } = item.optionSource;
+          const children = response.result.map(d => ({
+            key: d[valueField],
+            value: d[labelField],
+          }));
+          return children;
+        }
+      } catch (error) {
+        console.error("加载接口数据失败:", error);
+        return [];
+      }
+    },
+    needSetChildren(oldConfig, newConfig) {
+      const { inputType, optionSource } = oldConfig;
+      if (!optionSource) return false;
+      const { sourceType, apiUrl, method, valueField, labelField } = optionSource;
+      if (inputType !== "select" || sourceType !== "api") return false;
+      const {
+        sourceType: newSourceType,
+        apiUrl: newApiUrl,
+        method: newMethod,
+        valueField: newValueField,
+        labelField: newLabelField,
+      } = newConfig;
+      if (
+        sourceType === newSourceType &&
+        apiUrl === newApiUrl &&
+        method === newMethod &&
+        valueField === newValueField &&
+        labelField === newLabelField
+      )
+        return false;
+      return true;
+    },
+    async handleSaveOptions() {
       const config = this.configList[this.currentEditIndex];
       const configDefault = {
         sourceType: "",
@@ -654,7 +712,12 @@ export default {
           valueField: this.currentOptionConfig.valueField,
           labelField: this.currentOptionConfig.labelField,
         };
-        config.children = [];
+        // 接口请求
+        // 判断是否需要走 api接口获取
+        let children = [];
+        const bool = this.needSetChildren(this.currentConfig, config.optionSource);
+        if (bool) children = await this.loadApiOptions(config);
+        else config.children = children || [];
       }
       this.optionsDialogVisible = false;
     },

package/src/package/formSearch/src/index.vue

@@ -181,6 +181,7 @@
       :table-search="formSearchData.tableSearch"
       :customs="formSearchData.customs"
       @save="handleSaveConfig"
+      v-bind="$attrs"
     />
   </div>
 </template>