cnhis-design-vue 2.1.78 → 2.1.80

package/packages/table-filter/src/mixins/mixins.js

@@ -1,714 +1,773 @@
-import renderWidget from './renderWidget';
-
-const DURATIONS = {
-  minute: '分钟',
-  hour: '小时',
-  second: '秒',
-  day: '天'
-};
-const EVALUATEList = [
-  {
-    label: "一星",
-    value: "1",
-    isSelect: false
-  },
-  {
-    label: "二星",
-    value: "2",
-    isSelect: false
-  },
-  {
-    label: "三星",
-    value: "3",
-    isSelect: false
-  },
-  {
-    label: "四星",
-    value: "4",
-    isSelect: false
-  },
-  {
-    label: "五星",
-    value: "5",
-    isSelect: false
-  }
-];
-
-import moment from 'moment';
-import timeDomain from '@/utils/time-domain';
-import vexutils from '@/utils/vexutils';
-export const durationMixin = {
-  filters: {
-    // 格式化时长单位
-    fmtDurationUnit(unit) {
-      return (unit && DURATIONS[unit]) || '';
-    }
-  }
-};
-
-export const filterApiFn = {
-  props: {
-    filterApiConfig: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  methods: {
-    /**
-     * 获取配置的 api 方法
-     * @param {*} params  调用参数
-     * @param {String} key 方法名
-     * @param {Object} config 其他配置
-     */
-    async handleGetConfigApi(params, key, config = {}) {
-      try {
-        // TODO: 判断 fn 是异步函数还是同步
-        const filterApiConfig = this?.filterApiConfig || {};
-        const fn = filterApiConfig[key] || null;
-        if (typeof fn === 'function') {
-          let res = await fn(params, config);
-          return Promise.resolve(res);
-        } else {
-          return Promise.reject(new Error(`${key} Is not a function`));
-        }
-      } catch (error) {
-        return Promise.reject(error);
-      }
-    }
-  }
-};
-
-export const $utils = {
-  computed: {
-    $utils() {
-      return {
-        filterOption(input, option) {
-          try {
-            let text = option.componentOptions.children[0].text;
-            let lowText = text.toLowerCase();
-            let lowInput = input.toLowerCase();
-            let flag = false;
-            var reg = /^[a-zA-Z]+$/;
-            if (typeof text === 'string' && reg.test(input) && ''._toPinYin) {
-              flag = lowText._toPinYin().indexOf(lowInput) >= 0;
-            }
-            return flag || lowText.indexOf(lowInput) >= 0;
-          } catch (error) {
-            return false;
-          }
-        },
-        /**
-         * 获取按钮自定义颜色
-         * @param {string} v
-         */
-        getBtnStyle(v) {
-          // custom_bg， white_bg， none_bg
-          if (v.showStyle == 'white_bg') {
-            return {
-              'border-color': v.color,
-              color: v.color
-            };
-          } else if (v.showStyle == 'none_bg') {
-            return {
-              color: v.color
-            };
-          } else if (v.showStyle == 'only_icon') {
-            return {
-              'background-color': v.color,
-              'border-color': v.color
-              // color: v.color
-            };
-          }
-          return {
-            'background-color': v.color,
-            'border-color': v.color
-          };
-        },
-        /**
-         * 防抖
-         * @param {func} func 回调函数
-         * @param {wait} number 时间间隔
-         * @param {immediate} boolean  第一是否执行
-         */
-        debounce(func, wait, immediate) {
-          let timeout, args, context, timestamp, result;
-
-          const later = function () {
-            // 据上一次触发时间间隔
-            const last = +new Date() - timestamp;
-
-            // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
-            if (last < wait && last > 0) {
-              timeout = setTimeout(later, wait - last);
-            } else {
-              timeout = null;
-              // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
-              if (!immediate) {
-                result = func.apply(context, args);
-                if (!timeout) context = args = null;
-              }
-            }
-          };
-
-          return function (...args) {
-            context = this;
-            timestamp = +new Date();
-            const callNow = immediate && !timeout;
-            // 如果延时不存在，重新设定延时
-            if (!timeout) timeout = setTimeout(later, wait);
-            if (callNow) {
-              result = func.apply(context, args);
-              context = args = null;
-            }
-
-            return result;
-          };
-        },
-        /**
-         * @deprecated: 获取按钮的操作对象
-         * @param {Object} row 行对象
-         * @param {Object} btn 按钮
-         */
-        getRowOperatorIdSetting(row = {}, btn) {
-          /** 行操作id */
-          /**
-           * 行按钮对象
-           * operatorColumn 数据为：1290160860597063680###987654321
-           * btnId(按钮id)###objid(触发对象的id)
-           * */
-          if (row.operatorColumn) {
-            let rowOperatorId = row.operatorColumn.find(v => v.includes(btn.sid));
-            if (btn.setting && typeof rowOperatorId === 'string' && rowOperatorId.includes('###')) {
-              let [btnId, objId] = rowOperatorId.split('###');
-              if (btnId && objId) {
-                let settingObj = JSON.parse(btn.setting);
-                if (Array.isArray(settingObj)) {
-                  let f = settingObj.find(s => s.obj_id == objId);
-                  if (f) {
-                    let copyBtn = JSON.parse(JSON.stringify(btn));
-                    copyBtn.settingObj = {
-                      ...f
-                    };
-                    copyBtn.setting = JSON.stringify(f);
-                    return copyBtn;
-                  }
-                }
-              }
-            }
-          }
-
-          let copyBtn = JSON.parse(JSON.stringify(btn));
-          if (this.isJSON(copyBtn.setting)) {
-            let btnSetting = JSON.parse(copyBtn.setting);
-            if (Array.isArray(btnSetting)) {
-              let settingObj = btnSetting[0] || {};
-              copyBtn.settingObj = {
-                ...settingObj
-              };
-              copyBtn.setting = JSON.stringify(settingObj);
-              return copyBtn;
-            } else {
-              return copyBtn;
-            }
-          }
-          return btn;
-        },
-        // color 获取 alpha
-        getAlphafloat(a, alpha) {
-          if (typeof a !== 'undefined') {
-            return parseFloat((a / 256).toFixed(2));
-          }
-          if (typeof alpha !== 'undefined') {
-            if (1 < alpha && alpha <= 100) {
-              return parseFloat((alpha / 100).toFixed(2));
-            }
-            if (0 <= alpha && alpha <= 1) {
-              return parseFloat(alpha.toFixed(2));
-            }
-          }
-          return 1;
-        },
-        // hex 转 rgba
-        hexToRGBA(hex, alpha) {
-          const isValidHex = hex => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
-          const getChunksFromString = (st, chunkSize) => st.match(new RegExp(`.{${chunkSize}}`, 'g'));
-
-          const convertHexUnitTo256 = hexStr => parseInt(hexStr.repeat(2 / hexStr.length), 16);
-
-          if (!isValidHex(hex)) {
-            console.log('Invalid HEX');
-            return '';
-          }
-          const chunkSize = Math.floor((hex.length - 1) / 3);
-          const hexArr = getChunksFromString(hex.slice(1), chunkSize);
-          const [r, g, b, a] = hexArr.map(convertHexUnitTo256);
-          return {
-            r: r,
-            g: g,
-            b: b,
-            a: this.getAlphafloat(a, alpha)
-          };
-        },
-        // 标签样式解析
-        handleLabelColor(item, isSelect) {
-          let tempColor = '#5585f5';
-          let oldColorMap = {
-            blue: '#0000ff',
-            sky: '#87ceeb',
-            azure: '#f0ffff',
-            palegreen: '#98fb98',
-            yellow: '#ffff00',
-            darkorange: '#ff8c00',
-            magenta: '#ff00ff',
-            purple: '#800080',
-            maroon: '#800000',
-            orange: '#ffa500',
-            green: '#008000',
-            red: '#ff0000',
-            grey: '#808080'
-          };
-          if (item?.color?.includes('-')) {
-            let str = item.color.split('-')[1];
-            tempColor = oldColorMap[str] || '#5585f5';
-          } else {
-            tempColor = item.color || '#5585f5';
-          }
-          const tempRgba = this.hexToRGBA(tempColor) || {
-            r: 85,
-            g: 133,
-            b: 245,
-            a: 1
-          };
-          if (isSelect) {
-            return {
-              color: '#fff',
-              background: `rgba(${tempRgba.r}, ${tempRgba.g}, ${tempRgba.b})`,
-              borderColor: `rgba(${tempRgba.r}, ${tempRgba.g}, ${tempRgba.b})`
-            };
-          }
-          if (item.isSelect) {
-            return {
-              color: '#fff',
-              background: `rgba(${tempRgba.r}, ${tempRgba.g}, ${tempRgba.b})`,
-              borderColor: `rgba(${tempRgba.r}, ${tempRgba.g}, ${tempRgba.b})`
-            };
-          } else {
-            let isSys = !(item.isPublic && item.isPublic == 1);
-            let color = isSys ? 'rgba(28, 28, 28, 1)' : 'rgba(33, 33, 33, 0.6)';
-            return {
-              color: color,
-              background: 'rgba(250, 250, 250, 1)',
-              borderColor: 'rgba(213, 213, 213, 0.8)'
-            };
-          }
-        },
-        // 生日范围校验
-        validateBirthday(val, title, type) {
-          let res = true;
-          if (!type) return false;
-          let regObj = {
-            DAYReg: /^([0-9]|[1-9][0-9]|[1-2][0-9][0-9]|[3][0-5][0-9]|(360|361|363|362|364|365))$/,
-            MONTHReg: /^(?:[0-9]|1[0-2])$/,
-            YEARReg: /^(?:[1-9]?\d|100)$/
-          };
-          let testReg = `${type}Reg`;
-          if (!regObj[testReg].test(+val)) {
-            this.$message.warning(`${title}${this.$t('1.9.40')}`, 2);
-            res = false;
-          }
-          return res;
-        },
-        /**
-         *
-         * 时间转换
-         * @param {type} type 时间戳类型
-         * @param {time} time 时间戳
-         */
-        formatTime(type, time) {
-          let format = '';
-          if (!time) return '';
-          switch (type) {
-            case 'DATE':
-              format = 'yyyy-MM-dd';
-              break;
-            case 'DATETIME':
-              format = 'yyyy-MM-dd HH:mm:ss';
-              break;
-            case 'TIME':
-              format = 'HH:mm:ss';
-              break;
-            case 'MOUTH':
-              format = 'MM-dd';
-              break;
-            case 'DATETIMESTR':
-              format = 'yyyy年M月dd日 HH:mm';
-              break;
-            case 'MOUTHTIME':
-              format = 'M月d日 HH:mm';
-              break;
-            case 'HM':
-              format = ' HH:mm';
-              break;
-            default:
-              break;
-          }
-          return moment(time).format(format);
-        },
-        isJSON(str) {
-          if (typeof str == 'string') {
-            try {
-              let obj = JSON.parse(str);
-              if (typeof obj == 'object' && obj) {
-                return true;
-              } else {
-                return false;
-              }
-            } catch (e) {
-              return false;
-            }
-          }
-          return false;
-        },
-        isArray(val) {
-          return Array.isArray(val);
-        },
-        isEmpty(val) {
-          for (var key in val) {
-            return false;
-          }
-          return true;
-        },
-        isString(val) {
-          return typeof val === 'string';
-        },
-        isPlainObject(val) {
-          return typeof val === 'object';
-        }
-      };
-    }
-  },
-  components: {}
-};
-
-//  start--- 筛选外显 ---start
-export const outQuickSearchFn = {
-  mixins: [renderWidget],
-  methods: {
-    handlerInitSearchItem(arr) {
-      if (!Array.isArray(arr)) return;
-      arr.forEach(el => {
-        // 直接渲染相应组件，不经过下面的字段判断
-        if (this.initRenderWidgetCfg(el)) return;
-
-        el.setting = typeof el.setting == "string" ? JSON.parse(el.setting) : el.setting;
-        const attr = el?.settingObj?.attr || "";
-        const isPreciseSearch = el?.settingObj?.isPreciseSearch || "";
-        const showSetting = el?.setting?.showSetting || []
-        /**
-          * NUMBER和TEXT属性字段
-          * 如果 开启了精准搜索，则传条件的时候 要传 EQ
-          * isPreciseSearch: 0/1
-          */
-        let textCon = el.fieldType == "TEXT" &&  isPreciseSearch == 1 ? 'EQ' : 'CL';
-        let advanceOptionSetting = el.advanceOptionSetting;
-        let wordbookId = el?.setting?.wordbook?.id;
-        // let advanceColWidth = el.advanceColWidth;
-        // 映射优先级最高
-        if (showSetting?.length) {
-          let tvalue = []
-          // 设置了默认值
-          let df = el.explicitDefaultVal;
-          if(df){
-            if (df == 'firstOption') {
-              tvalue = String(advanceOptionSetting) === '0' ? 0 : [0];
-            } else {
-              if(String(advanceOptionSetting) === '0'){
-                // 单选
-                const index = showSetting.findIndex(v => v.change_text == df);
-                if (index > -1) tvalue = index;
-              } else {
-                // 多选 多默认值 处理
-                const dfs = df.split(',');
-                dfs.forEach((d) => {
-                  const index = showSetting.findIndex(v => v.change_text == d);
-                  if (index > -1) tvalue.push(index);
-                });
-              }
-            }
-          }
-          // 存在映射 使用下拉多选框
-          this.$set(el, "con", "CONVERT");
-          this.$set(el, "com", "SelectMui");
-          this.$set(el, "comType", "SelectMui");
-          this.$set(el, "value", tvalue);
-          const labelList = el.setting?.showSetting.map(i => {
-            i.labelName = i.change_text;
-            return i;
-          });
-          this.$set(el, "labelList", labelList);
-        } else if (!this.$utils.isEmpty(el.setting?.wordbook) && wordbookId) {
-          // TODO:
-          // 存在映射 wordbook
-          let isTree = "tree" === el?.setting?.wordbook?.showType;
-          let comType = isTree ? 'treeSelect' : 'SelectMuiWordBook';
-          let defVal = isTree ? [] : [];
-          this.$set(el, "con", "QUOTE");
-          this.$set(el, "com", "SelectMui");
-          this.$set(el, "comType", comType);
-          this.$set(el, "value", defVal);
-          this.$set(el, "dataSource", []);
-          this.$set(el, "searchPageConfig", {
-            keyword: undefined,
-            isRequest: false, // 是否已请求
-            page: 1, // 当前页
-            total: 1, // 总页数
-            hasNextPage: false
-          });
-        } else {
-          if (["MONEY", "PERCENTAGE", "AGE", "NUMBER"].includes(attr) || el.fieldType == "NUMBER") {
-            this.$set(el, "con", "BIGANDLESS");
-            this.$set(el, "com", "Number");
-            this.$set(el, "lessValue", "");
-            this.$set(el, "bigValue", "");
-            if (attr == "AGE" && el.fieldType != "NUMBER") {
-              this.$set(el, "AGEAttr", true);
-              this.$set(el, "inputUnit", "岁");
-            }
-            if (el.fieldType == "NUMBER" && attr == "PERCENTAGE") {
-              this.$set(el, "inputUnit", "%");
-            }
-          } else if (
-            ["BIRTHDAY", "DATE", "TASKDATE"].includes(attr) ||
-            ["DATETIME", "DATE"].includes(el.fieldType)
-          ) {
-            // 查找默认值
-            let value = this.getSearchDefValueByLimit(el, this.searchFieldLimit) || [];
-            // explicitDefaultVal: "YESTERDAY"
-            // explicitRequired: 1
-
-            // 配置了默认值
-            if(el.explicitDefaultVal){
-              // let showFormat = attr === "BIRTHDAY" ? 'MM-DD':'YYYY-MM-DD HH:mm:ss';
-              let t = timeDomain.getTimeDomain(el.explicitDefaultVal)
-              if(t.length > 0){
-                value = t;
-              }
-            }
-            this.$set(el, "con", "IN");
-            this.$set(el, "com", "DatePicker");
-            this.$set(el, "value", value);
-            if (attr === "BIRTHDAY") {
-              this.$set(el, "showFormat", "MM-DD");
-              this.$set(el, "showTime", false);
-            } else if(["TODAY","TOMORROW","YESTERDAY"].includes(el.explicitDefaultVal)){
-              // 如果外显默认是 以上三个，展示一个框，时间不可选
-              let [v] = value;
-              this.$set(el, "showFormat", "YYYY-MM-DD");
-              this.$set(el, "showTime", false);
-              this.$set(el, "com", "DayPicker");
-              this.$set(el, "value",v || moment());
-            } else {
-              this.$set(el, "showFormat", "YYYY-MM-DD HH:mm:ss");
-              this.$set(el, "showTime", true);
-            }
-          } else if (["LABEL", "EVALUATE"].includes(attr)) {
-            this.$set(el, "con", "CL");
-            this.$set(el, "com", "SelectMui");
-            this.$set(el, "value", []);
-            if (attr == "EVALUATE") {
-              let list = EVALUATEList.map(i => {
-                i.labelName = i.label;
-                return i;
-              });
-              this.$set(el, "labelList", list);
-            } else {
-              this.handleSetLabelOptions(el.setting?.labelType, el);
-            }
-          } else if ("PASSWORD" === attr) {
-            this.$set(el, "con", el.fieldType === "NUMBER" ? "EQ" : textCon);
-            this.$set(el, "comAttr", "PASSWORD");
-            this.$set(el, "PASSWORDTYPE", true);
-            this.$set(el, "value", "");
-            this.$set(el, "com", "Text");
-          } else if (["DURATION"].includes(attr)) {
-            this.$set(el, "con", "EQ");
-            this.$set(el, "value", "");
-            this.$set(el, "com", "Text");
-            this.$set(el, "attr", "DURATION");
-          } else {
-            this.$set(el, "con", textCon);
-            this.$set(el, "isPreciseSearch", isPreciseSearch == 1);
-            this.$set(el, "value", "");
-            this.$set(el, "com", "Text");
-          }
-        }
-      });
-    },
-    handleSetLabelOptions(labelType, el) {
-      this.handleRequestedLabel(labelType || "")
-        .then(({ data }) => {
-          if (data.result === "SUCCESS") {
-            let labelList = data.map.rows || [];
-            this.$set(el, "labelList", labelList);
-          }
-        })
-        .catch(err => console.log(err));
-    },
-    getConObj(arr) {
-      if (!Array.isArray(arr)) {
-        return [];
-      }
-      let conObj = [];
-      arr.forEach(item => {
-        const renderConObj = this.getRenderSearchConObj(item);
-        if (renderConObj) {
-          conObj.push(renderConObj);
-          return;
-        }
-
-        let temp = {
-          field_key: item.columnName,
-          con: item.con,
-          value: "",
-          limit_date: "",
-          start_val: item.start_val || "",
-          end_val: item.end_val || "",
-          unit: item.unit || "",
-          id: item.id
-        };
-        if (item.com === "Text" && item.value) {
-          temp.value = item.value;
-          conObj.push(temp);
-        }
-        let advanceOptionSetting = item.advanceOptionSetting;
-        if (item.com === "SelectMui" &&  vexutils.anyNotEmpty(item.value)) {
-          // 单选模式
-          let single = String(advanceOptionSetting) === '0';
-          if(single){
-            if(!Array.isArray(item.value)) {
-              item.value = [item.value]
-            }
-          }
-          let hasArr = Array.isArray(item.value) && item.value.length > 0
-          if (item.comType == "SelectMuiWordBook" && hasArr) {
-            temp.value = item.value.join("|#|");
-          } else if(item.comType == "treeSelect"){
-            // 樹狀
-            let value = item.value;
-            if(typeof value === 'string'){
-              [value]  = value.split('<&=&>')
-            } else if(Array.isArray(value)){
-              value = value.map((v)=>{
-                let [k] = typeof v === 'string' ? v.split('<&=&>'): [];
-                return k;
-              })
-              value = value.join("|#|");
-            }
-            temp.value = value;
-          } else {
-            if(hasArr){
-              if (item.con == "CONVERT") {
-                // 存在映射
-                let value = [];
-                value = item.value.map(i => {
-                  return item.labelList[i].filter;
-                });
-                temp.value = value;
-              } else {
-                let value = [];
-                value = item.value.map(i => {
-                  return item.labelList[i].labelName;
-                });
-                temp.value = value.join("|#|");
-              }
-            }
-
-          }
-          conObj.push(temp);
-        }
-        if (item.com === "DatePicker" && item.value.length) {
-          const start_val = item.value[0].format(item.showFormat);
-          const end_val = item.value[1].format(item.showFormat);
-          if (item.settingObj.attr === "BIRTHDAY") {
-            temp.limit_date = `${start_val}~${end_val}`;
-          } else {
-            temp.start_val = start_val;
-            temp.end_val = end_val;
-          }
-          conObj.push(temp);
-        }
-        if (item.com === "DayPicker" && item.value) {
-          const start_val = item.value.startOf('day').format('YYYY-MM-DD HH:mm:ss');
-          const end_val = item.value.endOf('day').format('YYYY-MM-DD HH:mm:ss');
-          if (item.settingObj.attr === "BIRTHDAY") {
-            temp.limit_date = `${start_val}~${end_val}`;
-          } else {
-            temp.start_val = start_val;
-            temp.end_val = end_val;
-          }
-          conObj.push(temp);
-        }
-        if (item.AGEAttr) {
-          temp.value = "";
-          temp.con = "IN";
-          let start_val = Number(item.lessValue) * 365;
-          let end_val = Number(item.bigValue) * 365;
-          if ((start_val || start_val === 0) && end_val) {
-            temp.start_val = start_val;
-            temp.end_val = end_val;
-            conObj.push(JSON.parse(JSON.stringify(temp)));
-          }
-        } else if (item.com === "Number") {
-          // 传参范围修改
-          let lessValue = item.lessValue ?? '';
-          let bigValue = item.bigValue ?? '';
-          if (lessValue || bigValue) {
-            if (item.settingObj?.attr === 'PERCENTAGE') {
-              lessValue = ((lessValue || lessValue === 0) && Number(lessValue) / 100) || '';
-              bigValue = (bigValue || bigValue === 0) && Number(bigValue) / 100;
-            }
-            temp.value = `${lessValue}~${bigValue}`;
-          }
-
-          temp.con = "EQ";
-          conObj.push(JSON.parse(JSON.stringify(temp)));
-        }
-        if (item.com === "SelectQuote" && item.value.length) {
-          temp.value = item.value.join("|#|");
-          conObj.push(temp);
-        }
-      });
-      let res = conObj.filter(
-        item => item.value || item.limit_date || item.start_val || item.end_val
-      );
-      return res;
-    },
-    getConObjParams() {
-      let conObj = this.getConObj(this.outSearchFieldList);
-      let realation = [];
-      this.outRelationQuickSearch.forEach(item => {
-        let curQuote = this.getConObj(item.fieldList);
-        if (curQuote && curQuote.length) {
-          realation.push({
-            field_key: item.primaryField,
-            valueField: item.relationField,
-            con: "QUOTE_IN",
-            tableId: item.tableId,
-            parameterConversionId: item.parameterConversionId,
-            converFun: item.converFun,
-            preConObj: item.preConObj,
-            relationOrgId: item.relationOrgId,
-            preSqlExpression: item.preSqlExpression,
-            quote_con: {
-              conObj: this.getConObj(item.fieldList),
-              sqlExpression: ""
-            }
-          });
-        }
-      });
-      conObj.push(...realation);
-      return conObj || [];
-    }
-  }
-}
-//  end--- 筛选外显 ---end
+import renderWidget from './renderWidget';
+
+const DURATIONS = {
+  minute: '分钟',
+  hour: '小时',
+  second: '秒',
+  day: '天'
+};
+const EVALUATEList = [
+  {
+    label: '一星',
+    value: '1',
+    isSelect: false
+  },
+  {
+    label: '二星',
+    value: '2',
+    isSelect: false
+  },
+  {
+    label: '三星',
+    value: '3',
+    isSelect: false
+  },
+  {
+    label: '四星',
+    value: '4',
+    isSelect: false
+  },
+  {
+    label: '五星',
+    value: '5',
+    isSelect: false
+  }
+];
+
+import moment from 'moment';
+import timeDomain from '@/utils/time-domain';
+import vexutils from '@/utils/vexutils';
+export const durationMixin = {
+  filters: {
+    // 格式化时长单位
+    fmtDurationUnit(unit) {
+      return (unit && DURATIONS[unit]) || '';
+    }
+  }
+};
+
+export const filterApiFn = {
+  props: {
+    filterApiConfig: {
+      type: Object,
+      default: () => ({})
+    },
+    filterApiConfigOutSearch: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      isOut: false
+    };
+  },
+  methods: {
+    /**
+     * 获取配置的 api 方法
+     * @param {*} params  调用参数
+     * @param {String} key 方法名
+     * @param {Object} config 其他配置
+     */
+    async handleGetConfigApi(params, key, config = {}) {
+      try {
+        // TODO: 判断 fn 是异步函数还是同步
+        const filterApiConfig = this.isOut ? this.filterApiConfigOutSearch : this?.filterApiConfig || {};
+        const fn = filterApiConfig[key] || null;
+        if (typeof fn === 'function') {
+          let res = await fn(params, config);
+          return Promise.resolve(res);
+        } else {
+          return Promise.reject(new Error(`${key} Is not a function`));
+        }
+      } catch (error) {
+        return Promise.reject(error);
+      }
+    }
+  }
+};
+
+export const $utils = {
+  computed: {
+    $utils() {
+      return {
+        filterOption(input, option) {
+          try {
+            let text = option.componentOptions.children[0].text;
+            let lowText = text.toLowerCase();
+            let lowInput = input.toLowerCase();
+            let flag = false;
+            var reg = /^[a-zA-Z]+$/;
+            if (typeof text === 'string' && reg.test(input) && ''._toPinYin) {
+              flag = lowText._toPinYin().indexOf(lowInput) >= 0;
+            }
+            return flag || lowText.indexOf(lowInput) >= 0;
+          } catch (error) {
+            return false;
+          }
+        },
+        /**
+         * 获取按钮自定义颜色
+         * @param {string} v
+         */
+        getBtnStyle(v) {
+          // custom_bg， white_bg， none_bg
+          if (v.showStyle == 'white_bg') {
+            return {
+              'border-color': v.color,
+              color: v.color
+            };
+          } else if (v.showStyle == 'none_bg') {
+            return {
+              color: v.color
+            };
+          } else if (v.showStyle == 'only_icon') {
+            return {
+              'background-color': v.color,
+              'border-color': v.color
+              // color: v.color
+            };
+          }
+          return {
+            'background-color': v.color,
+            'border-color': v.color
+          };
+        },
+        /**
+         * 防抖
+         * @param {func} func 回调函数
+         * @param {wait} number 时间间隔
+         * @param {immediate} boolean  第一是否执行
+         */
+        debounce(func, wait, immediate) {
+          let timeout, args, context, timestamp, result;
+
+          const later = function() {
+            // 据上一次触发时间间隔
+            const last = +new Date() - timestamp;
+
+            // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
+            if (last < wait && last > 0) {
+              timeout = setTimeout(later, wait - last);
+            } else {
+              timeout = null;
+              // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
+              if (!immediate) {
+                result = func.apply(context, args);
+                if (!timeout) context = args = null;
+              }
+            }
+          };
+
+          return function(...args) {
+            context = this;
+            timestamp = +new Date();
+            const callNow = immediate && !timeout;
+            // 如果延时不存在，重新设定延时
+            if (!timeout) timeout = setTimeout(later, wait);
+            if (callNow) {
+              result = func.apply(context, args);
+              context = args = null;
+            }
+
+            return result;
+          };
+        },
+        /**
+         * @deprecated: 获取按钮的操作对象
+         * @param {Object} row 行对象
+         * @param {Object} btn 按钮
+         */
+        getRowOperatorIdSetting(row = {}, btn) {
+          /** 行操作id */
+          /**
+           * 行按钮对象
+           * operatorColumn 数据为：1290160860597063680###987654321
+           * btnId(按钮id)###objid(触发对象的id)
+           * */
+          if (row.operatorColumn) {
+            let rowOperatorId = row.operatorColumn.find(v => v.includes(btn.sid));
+            if (btn.setting && typeof rowOperatorId === 'string' && rowOperatorId.includes('###')) {
+              let [btnId, objId] = rowOperatorId.split('###');
+              if (btnId && objId) {
+                let settingObj = JSON.parse(btn.setting);
+                if (Array.isArray(settingObj)) {
+                  let f = settingObj.find(s => s.obj_id == objId);
+                  if (f) {
+                    let copyBtn = JSON.parse(JSON.stringify(btn));
+                    copyBtn.settingObj = {
+                      ...f
+                    };
+                    copyBtn.setting = JSON.stringify(f);
+                    return copyBtn;
+                  }
+                }
+              }
+            }
+          }
+
+          let copyBtn = JSON.parse(JSON.stringify(btn));
+          if (this.isJSON(copyBtn.setting)) {
+            let btnSetting = JSON.parse(copyBtn.setting);
+            if (Array.isArray(btnSetting)) {
+              let settingObj = btnSetting[0] || {};
+              copyBtn.settingObj = {
+                ...settingObj
+              };
+              copyBtn.setting = JSON.stringify(settingObj);
+              return copyBtn;
+            } else {
+              return copyBtn;
+            }
+          }
+          return btn;
+        },
+        // color 获取 alpha
+        getAlphafloat(a, alpha) {
+          if (typeof a !== 'undefined') {
+            return parseFloat((a / 256).toFixed(2));
+          }
+          if (typeof alpha !== 'undefined') {
+            if (1 < alpha && alpha <= 100) {
+              return parseFloat((alpha / 100).toFixed(2));
+            }
+            if (0 <= alpha && alpha <= 1) {
+              return parseFloat(alpha.toFixed(2));
+            }
+          }
+          return 1;
+        },
+        // hex 转 rgba
+        hexToRGBA(hex, alpha) {
+          const isValidHex = hex => /^#([A-Fa-f0-9]{3,4}){1,2}$/.test(hex);
+          const getChunksFromString = (st, chunkSize) => st.match(new RegExp(`.{${chunkSize}}`, 'g'));
+
+          const convertHexUnitTo256 = hexStr => parseInt(hexStr.repeat(2 / hexStr.length), 16);
+
+          if (!isValidHex(hex)) {
+            console.log('Invalid HEX');
+            return '';
+          }
+          const chunkSize = Math.floor((hex.length - 1) / 3);
+          const hexArr = getChunksFromString(hex.slice(1), chunkSize);
+          const [r, g, b, a] = hexArr.map(convertHexUnitTo256);
+          return {
+            r: r,
+            g: g,
+            b: b,
+            a: this.getAlphafloat(a, alpha)
+          };
+        },
+        // 标签样式解析
+        handleLabelColor(item, isSelect) {
+          let tempColor = '#5585f5';
+          let oldColorMap = {
+            blue: '#0000ff',
+            sky: '#87ceeb',
+            azure: '#f0ffff',
+            palegreen: '#98fb98',
+            yellow: '#ffff00',
+            darkorange: '#ff8c00',
+            magenta: '#ff00ff',
+            purple: '#800080',
+            maroon: '#800000',
+            orange: '#ffa500',
+            green: '#008000',
+            red: '#ff0000',
+            grey: '#808080'
+          };
+          if (item?.color?.includes('-')) {
+            let str = item.color.split('-')[1];
+            tempColor = oldColorMap[str] || '#5585f5';
+          } else {
+            tempColor = item.color || '#5585f5';
+          }
+          const tempRgba = this.hexToRGBA(tempColor) || {
+            r: 85,
+            g: 133,
+            b: 245,
+            a: 1
+          };
+          if (isSelect) {
+            return {
+              color: '#fff',
+              background: `rgba(${tempRgba.r}, ${tempRgba.g}, ${tempRgba.b})`,
+              borderColor: `rgba(${tempRgba.r}, ${tempRgba.g}, ${tempRgba.b})`
+            };
+          }
+          if (item.isSelect) {
+            return {
+              color: '#fff',
+              background: `rgba(${tempRgba.r}, ${tempRgba.g}, ${tempRgba.b})`,
+              borderColor: `rgba(${tempRgba.r}, ${tempRgba.g}, ${tempRgba.b})`
+            };
+          } else {
+            let isSys = !(item.isPublic && item.isPublic == 1);
+            let color = isSys ? 'rgba(28, 28, 28, 1)' : 'rgba(33, 33, 33, 0.6)';
+            return {
+              color: color,
+              background: 'rgba(250, 250, 250, 1)',
+              borderColor: 'rgba(213, 213, 213, 0.8)'
+            };
+          }
+        },
+        // 生日范围校验
+        validateBirthday(val, title, type) {
+          let res = true;
+          if (!type) return false;
+          let regObj = {
+            DAYReg: /^([0-9]|[1-9][0-9]|[1-2][0-9][0-9]|[3][0-5][0-9]|(360|361|363|362|364|365))$/,
+            MONTHReg: /^(?:[0-9]|1[0-2])$/,
+            YEARReg: /^(?:[1-9]?\d|100)$/
+          };
+          let testReg = `${type}Reg`;
+          if (!regObj[testReg].test(+val)) {
+            this.$message.warning(`${title}${this.$t('1.9.40')}`, 2);
+            res = false;
+          }
+          return res;
+        },
+        /**
+         *
+         * 时间转换
+         * @param {type} type 时间戳类型
+         * @param {time} time 时间戳
+         */
+        formatTime(type, time) {
+          let format = '';
+          if (!time) return '';
+          switch (type) {
+            case 'DATE':
+              format = 'yyyy-MM-dd';
+              break;
+            case 'DATETIME':
+              format = 'yyyy-MM-dd HH:mm:ss';
+              break;
+            case 'TIME':
+              format = 'HH:mm:ss';
+              break;
+            case 'MOUTH':
+              format = 'MM-dd';
+              break;
+            case 'DATETIMESTR':
+              format = 'yyyy年M月dd日 HH:mm';
+              break;
+            case 'MOUTHTIME':
+              format = 'M月d日 HH:mm';
+              break;
+            case 'HM':
+              format = ' HH:mm';
+              break;
+            default:
+              break;
+          }
+          return moment(time).format(format);
+        },
+        isJSON(str) {
+          if (typeof str == 'string') {
+            try {
+              let obj = JSON.parse(str);
+              if (typeof obj == 'object' && obj) {
+                return true;
+              } else {
+                return false;
+              }
+            } catch (e) {
+              return false;
+            }
+          }
+          return false;
+        },
+        isArray(val) {
+          return Array.isArray(val);
+        },
+        isEmpty(val) {
+          for (var key in val) {
+            return false;
+          }
+          return true;
+        },
+        isString(val) {
+          return typeof val === 'string';
+        },
+        isPlainObject(val) {
+          return typeof val === 'object';
+        }
+      };
+    }
+  },
+  components: {}
+};
+
+//  start--- 筛选外显默认值 ---start
+export const outQuickSearchDefCommon = {
+  methods: {
+    isSelectMuiWordBookDef(item) {
+      return item.comType === 'SelectMuiWordBook' && item.explicitDefaultVal == 'firstOption';
+    },
+    isExistDefVal(item) {
+      return this.isSelectMuiWordBookDef(item) || !!item.explicitDefaultVal;
+    },
+    isSetDefVal() {
+      return this.outSearchFieldList.some(v => {
+        if (this.isRender(v)) {
+          return this.isExistDefValByRenderWidget(v);
+        }
+        return this.isExistDefVal(v);
+      });
+    },
+    async handleDefVal(config) {
+      try {
+        let isDef = this.isSetDefVal();
+        if (!isDef) return;
+        let promises = [];
+        this.outSearchFieldList.map(v => {
+          if (this.isRender(v)) {
+            if (this.isExplicitDefaultVal(v)) {
+              this.$set(v, 'initSearch', false);
+              promises.push(this.getWordbookFirstOptionRender(v));
+            }
+          }
+          if (this.isSelectMuiWordBookDef(v)) {
+            this.$set(v, 'initSearch', false);
+            promises.push(this.getWordbookFirstOption(v));
+          }
+        });
+        if (promises.length) {
+          await Promise.allSettled(promises);
+        }
+        let type = config?.type === 'reset' ? '' : 'outSearchInit';
+        this.outFilterChange({ type });
+      } catch (err) {
+        console.log(err);
+      }
+    }
+  }
+};
+
+//  end--- 筛选外显默认值 ---end
+
+//  start--- 筛选外显 ---start
+export const outQuickSearchFn = {
+  mixins: [renderWidget],
+  methods: {
+    handlerInitSearchItem(arr) {
+      if (!Array.isArray(arr)) return;
+      arr.forEach(el => {
+        // 直接渲染相应组件，不经过下面的字段判断
+        if (this.initRenderWidgetCfg(el)) return;
+
+        el.setting = typeof el.setting == 'string' ? JSON.parse(el.setting) : el.setting;
+        const attr = el?.settingObj?.attr || '';
+        const isPreciseSearch = el?.settingObj?.isPreciseSearch || '';
+        const showSetting = el?.setting?.showSetting || [];
+        /**
+         * NUMBER和TEXT属性字段
+         * 如果 开启了精准搜索，则传条件的时候 要传 EQ
+         * isPreciseSearch: 0/1
+         */
+        let textCon = el.fieldType == 'TEXT' && isPreciseSearch == 1 ? 'EQ' : 'CL';
+        let advanceOptionSetting = el.advanceOptionSetting;
+        let wordbookId = el?.setting?.wordbook?.id;
+        // let advanceColWidth = el.advanceColWidth;
+        // 映射优先级最高
+        if (showSetting?.length) {
+          let tvalue = [];
+          // 设置了默认值
+          let df = el.explicitDefaultVal;
+          if (df) {
+            if (df == 'firstOption') {
+              tvalue = String(advanceOptionSetting) === '0' ? 0 : [0];
+            } else {
+              if (String(advanceOptionSetting) === '0') {
+                // 单选
+                const index = showSetting.findIndex(v => v.change_text == df);
+                if (index > -1) tvalue = index;
+              } else {
+                // 多选 多默认值 处理
+                const dfs = df.split(',');
+                dfs.forEach(d => {
+                  const index = showSetting.findIndex(v => v.change_text == d);
+                  if (index > -1) tvalue.push(index);
+                });
+              }
+            }
+          }
+          // 存在映射 使用下拉多选框
+          this.$set(el, 'con', 'CONVERT');
+          this.$set(el, 'com', 'SelectMui');
+          this.$set(el, 'comType', 'SelectMui');
+          this.$set(el, 'value', tvalue);
+          const labelList = el.setting?.showSetting.map(i => {
+            i.labelName = i.change_text;
+            return i;
+          });
+          this.$set(el, 'labelList', labelList);
+        } else if (!this.$utils.isEmpty(el.setting?.wordbook) && wordbookId) {
+          // TODO:
+          // 存在映射 wordbook
+          let isTree = 'tree' === el?.setting?.wordbook?.showType;
+          let comType = isTree ? 'treeSelect' : 'SelectMuiWordBook';
+          let defVal = isTree ? [] : [];
+          this.$set(el, 'con', 'QUOTE');
+          this.$set(el, 'com', 'SelectMui');
+          this.$set(el, 'comType', comType);
+          this.$set(el, 'value', defVal);
+          this.$set(el, 'dataSource', []);
+          this.$set(el, 'searchPageConfig', {
+            keyword: undefined,
+            isRequest: false, // 是否已请求
+            page: 1, // 当前页
+            total: 1, // 总页数
+            hasNextPage: false
+          });
+        } else {
+          if (['MONEY', 'PERCENTAGE', 'AGE', 'NUMBER'].includes(attr) || el.fieldType == 'NUMBER') {
+            this.$set(el, 'con', 'BIGANDLESS');
+            this.$set(el, 'com', 'Number');
+            this.$set(el, 'lessValue', '');
+            this.$set(el, 'bigValue', '');
+            if (attr == 'AGE' && el.fieldType != 'NUMBER') {
+              this.$set(el, 'AGEAttr', true);
+              this.$set(el, 'inputUnit', '岁');
+            }
+            if (el.fieldType == 'NUMBER' && attr == 'PERCENTAGE') {
+              this.$set(el, 'inputUnit', '%');
+            }
+          } else if (['BIRTHDAY', 'DATE', 'TASKDATE'].includes(attr) || ['DATETIME', 'DATE'].includes(el.fieldType)) {
+            // 查找默认值
+            let value = this.getSearchDefValueByLimit(el, this.searchFieldLimit) || [];
+            // explicitDefaultVal: "YESTERDAY"
+            // explicitRequired: 1
+
+            // 配置了默认值
+            if (el.explicitDefaultVal) {
+              // let showFormat = attr === "BIRTHDAY" ? 'MM-DD':'YYYY-MM-DD HH:mm:ss';
+              let t = timeDomain.getTimeDomain(el.explicitDefaultVal);
+              if (t.length > 0) {
+                value = t;
+              }
+            }
+            this.$set(el, 'con', 'IN');
+            this.$set(el, 'com', 'DatePicker');
+            this.$set(el, 'value', value);
+            if (attr === 'BIRTHDAY') {
+              this.$set(el, 'showFormat', 'MM-DD');
+              this.$set(el, 'showTime', false);
+            } else if (['TODAY', 'TOMORROW', 'YESTERDAY'].includes(el.explicitDefaultVal)) {
+              // 如果外显默认是 以上三个，展示一个框，时间不可选
+              let [v] = value;
+              this.$set(el, 'showFormat', 'YYYY-MM-DD');
+              this.$set(el, 'showTime', false);
+              this.$set(el, 'com', 'DayPicker');
+              this.$set(el, 'value', v || moment());
+            } else {
+              this.$set(el, 'showFormat', 'YYYY-MM-DD HH:mm:ss');
+              this.$set(el, 'showTime', true);
+            }
+          } else if (['LABEL', 'EVALUATE'].includes(attr)) {
+            this.$set(el, 'con', 'CL');
+            this.$set(el, 'com', 'SelectMui');
+            this.$set(el, 'value', []);
+            if (attr == 'EVALUATE') {
+              let list = EVALUATEList.map(i => {
+                i.labelName = i.label;
+                return i;
+              });
+              this.$set(el, 'labelList', list);
+            } else {
+              this.handleSetLabelOptions(el.setting?.labelType, el);
+            }
+          } else if ('PASSWORD' === attr) {
+            this.$set(el, 'con', el.fieldType === 'NUMBER' ? 'EQ' : textCon);
+            this.$set(el, 'comAttr', 'PASSWORD');
+            this.$set(el, 'PASSWORDTYPE', true);
+            this.$set(el, 'value', '');
+            this.$set(el, 'com', 'Text');
+          } else if (['DURATION'].includes(attr)) {
+            this.$set(el, 'con', 'EQ');
+            this.$set(el, 'value', '');
+            this.$set(el, 'com', 'Text');
+            this.$set(el, 'attr', 'DURATION');
+          } else {
+            this.$set(el, 'con', textCon);
+            this.$set(el, 'isPreciseSearch', isPreciseSearch == 1);
+            this.$set(el, 'value', '');
+            this.$set(el, 'com', 'Text');
+          }
+        }
+      });
+    },
+    handleSetLabelOptions(labelType, el) {
+      this.handleRequestedLabel(labelType || '')
+        .then(({ data }) => {
+          if (data.result === 'SUCCESS') {
+            let labelList = data.map.rows || [];
+            this.$set(el, 'labelList', labelList);
+          }
+        })
+        .catch(err => console.log(err));
+    },
+    getConObj(arr) {
+      if (!Array.isArray(arr)) {
+        return [];
+      }
+      let conObj = [];
+      arr.forEach(item => {
+        const renderConObj = this.getRenderSearchConObj(item);
+        if (renderConObj) {
+          conObj.push(renderConObj);
+          return;
+        }
+
+        let temp = {
+          field_key: item.columnName,
+          con: item.con,
+          value: '',
+          limit_date: '',
+          start_val: item.start_val || '',
+          end_val: item.end_val || '',
+          unit: item.unit || '',
+          id: item.id
+        };
+        if (item.com === 'Text' && item.value) {
+          temp.value = item.value;
+          conObj.push(temp);
+        }
+        let advanceOptionSetting = item.advanceOptionSetting;
+        if (item.com === 'SelectMui' && vexutils.anyNotEmpty(item.value)) {
+          // 单选模式
+          let single = String(advanceOptionSetting) === '0';
+          if (single) {
+            if (!Array.isArray(item.value)) {
+              item.value = [item.value];
+            }
+          }
+          let hasArr = Array.isArray(item.value) && item.value.length > 0;
+          if (item.comType == 'SelectMuiWordBook' && hasArr) {
+            temp.value = item.value.join('|#|');
+          } else if (item.comType == 'treeSelect') {
+            // 樹狀
+            let value = item.value;
+            if (typeof value === 'string') {
+              [value] = value.split('<&=&>');
+            } else if (Array.isArray(value)) {
+              value = value.map(v => {
+                let [k] = typeof v === 'string' ? v.split('<&=&>') : [];
+                return k;
+              });
+              value = value.join('|#|');
+            }
+            temp.value = value;
+          } else if (item.settingObj.attr === 'EVALUATE') {
+            if (hasArr) {
+              let value = [];
+              value = item.value.map(i => {
+                return item.labelList[i].value;
+              });
+              temp.value = value.join('|#|');
+            }
+          } else {
+            if (hasArr) {
+              if (item.con == 'CONVERT') {
+                // 存在映射
+                let value = [];
+                value = item.value.map(i => {
+                  return item.labelList[i].filter;
+                });
+                temp.value = value;
+              } else {
+                let value = [];
+                value = item.value.map(i => {
+                  return item.labelList[i].labelName;
+                });
+                temp.value = value.join('|#|');
+              }
+            }
+          }
+          conObj.push(temp);
+        }
+        if (item.com === 'DatePicker' && item.value.length) {
+          const start_val = item.value[0].format(item.showFormat);
+          const end_val = item.value[1].format(item.showFormat);
+          if (item.settingObj.attr === 'BIRTHDAY') {
+            temp.limit_date = `${start_val}~${end_val}`;
+          } else {
+            temp.start_val = start_val;
+            temp.end_val = end_val;
+          }
+          conObj.push(temp);
+        }
+        if (item.com === 'DayPicker' && item.value) {
+          const start_val = item.value.startOf('day').format('YYYY-MM-DD HH:mm:ss');
+          const end_val = item.value.endOf('day').format('YYYY-MM-DD HH:mm:ss');
+          if (item.settingObj.attr === 'BIRTHDAY') {
+            temp.limit_date = `${start_val}~${end_val}`;
+          } else {
+            temp.start_val = start_val;
+            temp.end_val = end_val;
+          }
+          conObj.push(temp);
+        }
+        if (item.AGEAttr) {
+          temp.value = '';
+          temp.con = 'IN';
+          let start_val = Number(item.lessValue) * 365;
+          let end_val = Number(item.bigValue) * 365;
+          if ((start_val || start_val === 0) && end_val) {
+            temp.start_val = start_val;
+            temp.end_val = end_val;
+            conObj.push(JSON.parse(JSON.stringify(temp)));
+          }
+        } else if (item.com === 'Number') {
+          // 传参范围修改
+          let lessValue = item.lessValue ?? '';
+          let bigValue = item.bigValue ?? '';
+          if (lessValue || bigValue) {
+            if (item.settingObj?.attr === 'PERCENTAGE') {
+              lessValue = ((lessValue || lessValue === 0) && Number(lessValue) / 100) || '';
+              bigValue = (bigValue || bigValue === 0) && Number(bigValue) / 100;
+            }
+            temp.value = `${lessValue}~${bigValue}`;
+          }
+
+          temp.con = 'EQ';
+          conObj.push(JSON.parse(JSON.stringify(temp)));
+        }
+        if (item.com === 'SelectQuote' && item.value.length) {
+          temp.value = item.value.join('|#|');
+          conObj.push(temp);
+        }
+      });
+      let res = conObj.filter(item => item.value || item.limit_date || item.start_val || item.end_val);
+      return res;
+    },
+    getConObjParams() {
+      let conObj = this.getConObj(this.outSearchFieldList);
+      let realation = [];
+      this.outRelationQuickSearch.forEach(item => {
+        let curQuote = this.getConObj(item.fieldList);
+        if (curQuote && curQuote.length) {
+          realation.push({
+            field_key: item.primaryField,
+            valueField: item.relationField,
+            con: 'QUOTE_IN',
+            tableId: item.tableId,
+            parameterConversionId: item.parameterConversionId,
+            converFun: item.converFun,
+            preConObj: item.preConObj,
+            relationOrgId: item.relationOrgId,
+            preSqlExpression: item.preSqlExpression,
+            quote_con: {
+              conObj: this.getConObj(item.fieldList),
+              sqlExpression: ''
+            }
+          });
+        }
+      });
+      conObj.push(...realation);
+      return conObj || [];
+    }
+  }
+};
+//  end--- 筛选外显 ---end