ol-base-components 3.1.4 → 3.2.0

package/src/package/formSearch/src/index.js

@@ -27,3 +27,5 @@ const translateWord = async word => {
     return word.charAt(0).toUpperCase() + word.slice(1);
   }
 };
+
+// 由于配置更新children

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

@@ -163,24 +163,25 @@
           >
             {{ expend ? "收起" : "展开" }}</el-button
           >
+          <el-button
+            v-if="formSearchData.enableConfig"
+            plain
+            size="small"
+            icon="el-icon-setting"
+            @click="handleOpenConfig"
+          >
+            配置
+          </el-button>
         </el-form-item>
       </el-form>
     </div>
-
-    <!-- <div class="btnbox">
-        <el-form class="demo-form-inline">
-          <el-form-item>
-            <el-button
-              v-for="(btn, index) in btnlist"
-              :key="index"
-              size="small"
-              :type="btn.types ? btn.types : 'primary'"
-              @click="btn.method"
-              >{{ btn.title }}</el-button
-            >
-          </el-form-item>
-        </el-form>
-      </div> -->
+    <search-config-dialog
+      v-if="configDialogVisible"
+      :visible.sync="configDialogVisible"
+      :table-search="formSearchData.tableSearch"
+      :customs="formSearchData.customs"
+      @save="handleSaveConfig"
+    />
   </div>
 </template>
 
@@ -188,11 +189,13 @@
 import { getData } from "../../index.js";
 import { getEnum } from "../../../utils/getEnum.js";
 import OlNumberRange from "../../numberRange/index.js";
+import SearchConfigDialog from "./components/SearchConfigDialog.vue";
 
 export default {
   name: "search",
   components: {
     OlNumberRange,
+    SearchConfigDialog,
   },
   directives: {
     "el-select-loadmore": {
@@ -263,6 +266,7 @@ export default {
           // 表格框架各种样式
           options: {},
           reset: false, // 是否要重置
+          enableConfig: false, // 是否启用配置功能
         };
       },
     },
@@ -271,12 +275,6 @@ export default {
       type: Number,
       default: 4,
     },
-    tableSearch: {
-      type: Array,
-    },
-    rulesLength: {
-      type: Boolean,
-    },
     //获取swagger后的钩子，返回swagger结构数据。用于处理swagger数据
     onSwagger: {
       type: Function,
@@ -290,6 +288,7 @@ export default {
       formSearch: {
         ...this.formSearchData.value,
       },
+      configDialogVisible: false,
       // 自定义指令
       loadmores: {
         fn: this.loadmoreGX,
@@ -303,6 +302,11 @@ export default {
   async created() {
     this.init();
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.loadOptionSources();
+    });
+  },
   watch: {
     "formSearchData.value": {
       handler: function (newVal, OldVal) {
@@ -318,56 +322,62 @@ export default {
   },
   methods: {
     async init() {
-      const swaggerData = await getData();
-      let swaggersearchColumns = swaggerData.paths[this.url].get.parameters || [];
-      if (typeof this.onSwagger === "function") {
-        try {
-          const res = await this.onSwagger({ columns: swaggersearchColumns });
-          if (res) swaggersearchColumns = res;
-        } catch (err) {}
-      }
-      swaggersearchColumns.forEach(item => {
-        let tempItem = this.formSearchData.tableSearch.find(
-          e => e.value.toLowerCase() === item.name.toLowerCase()
-        );
-        if (tempItem) {
-          // 匹配到
-          tempItem = { ...item, ...tempItem };
-        } else if (item.description) {
-          // 未匹配到
-          const pushItem = {
-            value: item.name,
-            label: item.description,
-            inputType: "text",
-            props: {},
-          };
-          if (item.schema.enum && Array.isArray(item.schema.enum)) {
-            //枚举值
-            pushItem.inputType = "select";
-            const ref = item.schema["$$ref"].split("/");
-            const enumName = ref[ref.length - 1];
-            const tempEnum = getEnum(enumName);
-            pushItem.children = tempEnum.length
-              ? tempEnum
-              : item.schema.enum.map(e => ({
-                  key: e,
-                  value: e,
-                }));
-          } else if (item.schema.format === "date-time") {
-            //日期
-            pushItem.inputType = "picker";
-            pushItem.props.valueFormat = "yyyy-MM-dd";
-            pushItem.props.format = "yyyy/MM/dd";
-          } else if (item.schema && item.schema.type === "string") {
-            pushItem.inputType = "text";
-          }
-          this.formSearchData.tableSearch.push(pushItem);
+      if (
+        !this.formSearchData ||
+        !this.formSearchData.customs ||
+        !this.formSearchData.customs.length
+      ) {
+        const swaggerData = await getData();
+        let swaggersearchColumns = swaggerData.paths[this.url].get.parameters || [];
+        if (typeof this.onSwagger === "function") {
+          try {
+            const res = await this.onSwagger({ columns: swaggersearchColumns });
+            if (res) swaggersearchColumns = res;
+          } catch (err) {}
         }
-      });
+        swaggersearchColumns.forEach(item => {
+          let tempItem = this.formSearchData.tableSearch.find(
+            e => e.value.toLowerCase() === item.name.toLowerCase()
+          );
+          if (tempItem) {
+            // 匹配到
+            tempItem = { ...item, ...tempItem };
+          } else if (item.description) {
+            // 未匹配到
+            const pushItem = {
+              value: item.name,
+              label: item.description,
+              inputType: "text",
+              props: {},
+            };
+            if (item.schema.enum && Array.isArray(item.schema.enum)) {
+              //枚举值
+              pushItem.inputType = "select";
+              const ref = item.schema["$$ref"].split("/");
+              const enumName = ref[ref.length - 1];
+              const tempEnum = getEnum(enumName);
+              pushItem.children = tempEnum.length
+                ? tempEnum
+                : item.schema.enum.map(e => ({
+                    key: e,
+                    value: e,
+                  }));
+            } else if (item.schema.format === "date-time") {
+              //日期
+              pushItem.inputType = "picker";
+              pushItem.props.valueFormat = "yyyy-MM-dd";
+              pushItem.props.format = "yyyy/MM/dd";
+            } else if (item.schema && item.schema.type === "string") {
+              pushItem.inputType = "text";
+            }
+            this.formSearchData.tableSearch.push(pushItem);
+          }
+        });
 
-      // 自动识别范围时间字段,以Begin和End结尾的字段,和"BeginTime", "EndTime"，这样的时间范围字段
-      const rangeTimeCloumns = await this.autoDetectRangeTimeFields(swaggersearchColumns);
-      this.formSearchData.tableSearch = [...this.formSearchData.tableSearch, ...rangeTimeCloumns];
+        // 自动识别范围时间字段,以Begin和End结尾的字段,和"BeginTime", "EndTime"，这样的时间范围字段
+        const rangeTimeCloumns = await this.autoDetectRangeTimeFields(swaggersearchColumns);
+        this.formSearchData.tableSearch = [...this.formSearchData.tableSearch, ...rangeTimeCloumns];
+      }
 
       this.findTableSearch =
         this.formSearchData.tableSearch.length > this.tableSearchSlice
@@ -481,39 +491,65 @@ export default {
     getValue(val) {
       this.$emit("getTreeSelectValue", val);
     },
+    setFilterConditionsByFormSearch(formSearch) {
+      const filterConditions = [];
+      Object.keys(formSearch).forEach(key => {
+        const tempItem = this.formSearchData.tableSearch.find(item => item.value === key);
+        if (formSearch[key] !== undefined && formSearch[key] !== null) {
+          filterConditions.push({
+            key: key,
+            value: formSearch[key],
+            compare: tempItem && tempItem.compare ? tempItem.compare : "",
+          });
+        }
+      });
+      return filterConditions;
+    },
     // 搜索查询按钮
     handleSearch(formName, item) {
-      if (this.formSearch.createdTime) {
-        this.formSearch.BeginTime = this.formSearch.createdTime[0];
-        this.formSearch.EndTime = this.formSearch.createdTime[1];
-      } else {
-        this.formSearch.BeginTime = null;
-        this.formSearch.EndTime = null;
-      }
-      // 有originalFields字段的就是范围时间，查询时候转回接口需要的字段
-      Object.keys(this.formSearch).forEach(key => {
-        const fieldConfig = this.formSearchData.tableSearch.find(item => item.value === key);
-        if (fieldConfig && fieldConfig.originalFields) {
-          const { begin, end } = fieldConfig.originalFields;
-          if (this.formSearch[key] && Array.isArray(this.formSearch[key])) {
-            this.formSearch[begin] = this.formSearch[key][0];
-            this.formSearch[end] = this.formSearch[key][1];
-          } else {
-            this.formSearch[begin] = null;
-            this.formSearch[end] = null;
-          }
+      if (
+        !this.formSearchData ||
+        !this.formSearchData.customs ||
+        !this.formSearchData.customs.length
+      ) {
+        if (this.formSearch.createdTime) {
+          this.formSearch.BeginTime = this.formSearch.createdTime[0];
+          this.formSearch.EndTime = this.formSearch.createdTime[1];
+        } else {
+          this.formSearch.BeginTime = null;
+          this.formSearch.EndTime = null;
         }
-      });
-
-      const tempFormSearch = Object.assign({}, this.formSearch);
-      if (this.formSearchData.rules) {
-        return this.$refs[formName].validate(valid => {
-          if (!valid) return false;
-          this.$emit("handleSearch", tempFormSearch, item);
+        // 有originalFields字段的就是范围时间，查询时候转回接口需要的字段
+        Object.keys(this.formSearch).forEach(key => {
+          const fieldConfig = this.formSearchData.tableSearch.find(item => item.value === key);
+          if (fieldConfig && fieldConfig.originalFields) {
+            const { begin, end } = fieldConfig.originalFields;
+            if (this.formSearch[key] && Array.isArray(this.formSearch[key])) {
+              this.formSearch[begin] = this.formSearch[key][0];
+              this.formSearch[end] = this.formSearch[key][1];
+            } else {
+              this.formSearch[begin] = null;
+              this.formSearch[end] = null;
+            }
+          }
         });
+
+        const tempFormSearch = Object.assign({}, this.formSearch);
+        if (this.formSearchData.rules) {
+          return this.$refs[formName].validate(valid => {
+            if (!valid) return false;
+            this.$emit("handleSearch", tempFormSearch, item);
+          });
+        }
+        this.$emit("handleSearch", tempFormSearch, item);
+        console.log(`\x1b[36m\x1b[4mol插件-搜索框查询`, tempFormSearch);
+      } else {
+        // 转成接口需要的结构filterConditions
+        const filterConditions = this.setFilterConditionsByFormSearch(this.formSearch) || [];
+        // 动态模式
+        this.$emit("handleSearch", this.formSearch, { filterConditions });
+        console.log(`\x1b[36m\x1b[4mol插件-动态搜索框查询`, this.formSearch, { filterConditions });
       }
-      this.$emit("handleSearch", tempFormSearch, item);
-      console.log(`\x1b[36m\x1b[4mol插件-搜索框查询`, tempFormSearch);
     },
     loadmore(obj) {
       this.$emit("loadmore", obj);
@@ -553,6 +589,102 @@ export default {
 
       this.$emit("btnHandleExpend", this.expend);
     },
+    handleOpenConfig() {
+      this.configDialogVisible = true;
+    },
+    handleSaveConfig(configList) {
+      this.formSearchData.tableSearch = configList;
+      this.findTableSearch =
+        this.formSearchData.tableSearch.length > this.tableSearchSlice
+          ? this.formSearchData.tableSearch.slice(0, this.tableSearchSlice)
+          : this.formSearchData.tableSearch;
+      this.$emit("onSave", configList);
+    },
+    async loadOptionSources() {
+      for (const item of this.formSearchData.tableSearch) {
+        if (item.inputType === "select" && item.optionSource) {
+          await this.loadItemOptions(item);
+        }
+      }
+    },
+    async loadItemOptions(item) {
+      if (!item.optionSource) return;
+
+      const { sourceType } = item.optionSource;
+
+      if (sourceType === "dict") {
+        await this.loadDictOptions(item);
+      } else if (sourceType === "api") {
+        await this.loadApiOptions(item);
+      }
+    },
+    async loadDictOptions(item) {
+      try {
+        const dictKey = item.optionSource.dictKey;
+        if (!dictKey) return;
+
+        const dictData = await this.getDictData(dictKey);
+        if (dictData && Array.isArray(dictData)) {
+          const children = dictData.map(d => ({
+            key: d.key,
+            value: d.value,
+          }));
+          this.$set(item, "children", children);
+        }
+      } catch (error) {
+        console.error("加载字典数据失败:", error);
+      }
+    },
+    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.$http.post(apiUrl);
+        } else {
+          response = await this.$http.get(apiUrl);
+        }
+
+        if (response.result && Array.isArray(response.result)) {
+          const { valueField, labelField } = item.optionSource;
+          const children = response.result.map(d => ({
+            key: d[valueField],
+            value: d[labelField],
+          }));
+          this.$set(item, "children", children);
+        }
+      } catch (error) {
+        console.error("加载接口数据失败:", error);
+      }
+    },
+    getDictData(dictKey) {
+      return new Promise(resolve => {
+        try {
+          const wmsStr = localStorage.getItem("wms") || "{}";
+          const wmsData = JSON.parse(wmsStr);
+          const dictData = wmsData.SET_enumsSelect || {};
+          const dictItem = dictData[dictKey];
+          const result = [];
+
+          if (dictItem && dictItem.enums && Array.isArray(dictItem.enums)) {
+            dictItem.enums.forEach(item => {
+              result.push({
+                key: item.key,
+                value: item.value,
+              });
+            });
+          }
+
+          resolve(result);
+        } catch (error) {
+          console.error("获取字典数据失败:", error);
+          resolve([]);
+        }
+      });
+    },
     // input为number校验
     handleChangeInput(item) {
       return item.inputType === "number"

package/src/package/index.js

@@ -1,5 +1,6 @@
 import OlTable from "./table";
 import OlSearch from "./formSearch";
+import OlCustomSearch from "./customSearch";
 import Dialog from "./dialog";
 import OlForm from "./form";
 import OlNumberRange from "./numberRange";
@@ -205,15 +206,17 @@ function hideLoading() {
   }
 }
 
-const components = [OlTable, OlSearch, Dialog, OlForm, OlNumberRange, OlPrint];
+const components = [OlTable, OlSearch, OlCustomSearch, Dialog, OlForm, OlNumberRange, OlPrint];
 const install = async function (Vue) {
   // 设置全局数据
   components.map(item => {
+    console.log(777, item);
+
     Vue.component(`ol-${item.name}`, item);
   });
   consoleTooltip();
 };
 
 export default install;
-export { OlTable, OlSearch, Dialog, OlForm, OlNumberRange, OlPrint };
+export { OlTable, OlSearch, OlCustomSearch, Dialog, OlForm, OlNumberRange, OlPrint };
 export { swaggerInstall, swaggerUnload, Hiprint };