cnhis-design-vue 2.1.12 → 2.1.15

package/packages/table-filter/src/components/out-quick-search/out-quick-search.vue

@@ -1,340 +1,340 @@
-<template>
-  <li class="outQuickSearch-li">
-    <slot v-if="item.com == 'Text'">
-      <a-input
-        @pressEnter="outFilterChange"
-        class="CL-input"
-        :style="{
-          width: `${item.advanceColWidth || 200}px`,
-          margin: '0 8px 8px 0',
-          'font-family': item.PASSWORDTYPE ? 'text-security-disc' : 'inherit'
-        }"
-        :placeholder="`搜索${item.alias || item.title}`"
-        v-model="item.value"
-        allowClear
-      >
-      </a-input>
-    </slot>
-  <template v-if="item.com == 'SelectMui'">
-    <c-tree-select
-      v-if="item.comType === 'treeSelect'"
-      :item="item"
-      :handleGetConfigApi="handleGetConfigApi"
-      :maxTagPlaceholder="maxTagPlaceholder"
-      :outFilterChange="outFilterChange"
-      style="margin: 0 8px 8px 0"
-    />
-    <multiSelect
-      v-else
-      :item="item"
-      :maxTagPlaceholder="maxTagPlaceholder"
-      :outFilterChange="outFilterChange"
-      :handleWordBookSearch="handleWordBookSearch"
-      :dropdownVisibleChange="dropdownVisibleChange"
-      :fetchingWordbook="fetchingWordbook"
-      style="margin: 0 8px 8px 0"
-    ></multiSelect>
-  </template>
-
-    <a-range-picker
-      :allowClear="item.explicitRequired != 1"
-      :format="item.showFormat"
-      @change="value => rangePickerChange(value, item)"
-      @ok="outFilterChange"
-      v-model="item.value"
-      :placeholder="[`${item.alias || item.title}起始日期`, `${item.alias || item.title}截止日期`]"
-      v-if="item.com == 'DatePicker'"
-      style="margin: 0 8px 8px 0"
-      :showTime="handlePickerShowTime(item)"
-      :title="`选择${item.alias || item.title}`"
-    />
-    <a-date-picker
-      :inputReadOnly="item.explicitRequired == 1"
-      :allowClear="item.explicitRequired != 1"
-      :format="item.showFormat"
-      @change="outFilterChange"
-      @ok="outFilterChange"
-      v-model="item.value"
-      :placeholder="`请选择${item.alias || item.title}`"
-      v-if="item.com == 'DayPicker'"
-      style="margin: 0 8px 8px 0"
-      :showTime="false"
-      :title="`选择${item.alias || item.title}`"
-    />
-    <span
-      v-if="item.com == 'Number'"
-      class="ant-calendar-picker"
-      style="margin: 0 8px 8px 0; width: 200px"
-    >
-      <span
-        class="ant-calendar-picker-input ant-input num-picker"
-        :class="{ 'num-picker-unit': item.inputUnit }"
-      >
-        <input
-          v-model="item.lessValue"
-          @keyup.enter="() => changeOutFilterNumber(item)"
-          :title="`起始${item.alias || item.title}`"
-          :placeholder="`起始${item.alias || item.title}`"
-          class="ant-calendar-range-picker-input"/>
-        <span class="ant-calendar-range-picker-separator"> ~ &nbsp;</span>
-        <input
-          v-model="item.bigValue"
-          :title="`截止${item.alias || item.title}`"
-          @keyup.enter="() => changeOutFilterNumber(item)"
-          :placeholder="`截止${item.alias || item.title}`"
-          class="ant-calendar-range-picker-input"/>
-        <template v-if="item.inputUnit">&nbsp;{{ item.inputUnit }}</template>
-        <span
-          class="ant-input-suffix clear-number-icon"
-          v-if="item.lessValue || item.bigValue"
-          @click="clearOutFilterNumber(item)"
-          ><i
-            aria-label="图标: close-circle"
-            tabindex="-1"
-            class="anticon anticon-close-circle ant-input-clear-icon"
-            ><svg
-              viewBox="64 64 896 896"
-              data-icon="close-circle"
-              width="1em"
-              height="1em"
-              fill="currentColor"
-              aria-hidden="true"
-              focusable="false"
-              class=""
-            >
-              <path
-                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-              ></path></svg></i
-        ></span>
-        <span class="ant-calendar-picker-icon"></span
-      ></span>
-    </span>
-  </li>
-</template>
-<script>
-
-import multiSelect from '../multi-select/multi-select';
-import cTreeSelect from '../c-tree-select/tree-select';
-import { filterApiFn } from '../../mixins/mixins';
-import wordBookutils from '../../mixins/wordBookutils';
-import moment from 'moment';
-import {  DatePicker} from 'ant-design-vue';
-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
-  }
-];
-export default {
-  name: "OutQuickSearch",
-  mixins: [filterApiFn],
-  components: { multiSelect,cTreeSelect,  [DatePicker.name]:DatePicker,  [DatePicker.RangePicker.name]: DatePicker.RangePicker },
-  props: {
-    item: Object
-  },
-  data() {
-    return {
-      fetchingWordbook: false,
-      initSearch: false,
-      curDefaultValue: null,
-    };
-  },
-
-  computed: {
-    handlePickerShowTime() {
-      return function(item) {
-        if (!item.showTime) return false;
-        return {
-          defaultValue: [moment("00:00:00", "HH:mm:ss"), moment("23:59:59", "HH:mm:ss")]
-        };
-      };
-    }
-  },
-  watch: {},
-  // 生命周期
-  created() {},
-  mounted() {
-    this.init();
-  },
-
-  // 方法
-  methods: {
-
-    init(){
-      let item = this.item;
-      let df = item.explicitDefaultVal;
-      if(item.com == 'SelectMui' && df){
-        this.dropdownVisibleChange(true, item, {type:'hasDefaultInit'})
-      }
-    },
-
-    handleWordBookSearch(value, item, config = {}) {
-      if (item.comType != "SelectMuiWordBook") return;
-      let curAutograph = item.settingObj.wordbook && item.settingObj.wordbook.autograph;
-      let params = {
-        keyword: value,
-        autograph: curAutograph
-      };
-      let obj = {};
-      let p = item?.setting?.wordbook?.params || undefined;
-      if (p) {
-        item.setting.wordbook.params.forEach(item => {
-          obj[item.p_name] = item.p_value;
-        });
-      }
-      let rp = { ...params, ...obj, ...config }
-      this.getWordbookData(item.setting.wordbook, rp).then(({ data }) => {
-        this.handleWordbookData(item, data, rp);
-      });
-    },
-    dropdownVisibleChange(open, item, config={}) {
-      if (item.comType != "SelectMuiWordBook") return;
-      if (open) {
-        let obj = {};
-        if (item.setting.wordbook.params) {
-          item.setting.wordbook.params.forEach(item => {
-            obj[item.p_name] = item.p_value;
-          });
-        }
-        if (item.settingObj.wordbook) {
-          obj.autograph = item.settingObj.wordbook.autograph;
-        }
-        let df = item.explicitDefaultVal;
-        if(df != 'firstOption'){
-          obj.keyword = df;
-        }
-        this.getWordbookData(item.setting.wordbook, obj).then(({ data }) => {
-          this.handleWordbookData(item, data, obj);
-          if('hasDefaultInit' == config?.type){
-            this.outFilterChange({type:'outSearchInit'});
-          }
-        });
-      }
-    },
-    handleWordbookData(item, data, params) {
-      this.$set(item, "hasFieldList", false);
-      const {rows,hasFieldList,searchPageConfig} = wordBookutils.handleWordbookData(item,data,params);
-      this.$set(item, "hasFieldList", hasFieldList);
-      this.$set(item, "dataSource", rows);
-       let showKeys = item?.setting?.wordbook?.showKeys || [];
-      item.searchPageConfig = Object.assign(item.searchPageConfig, searchPageConfig);
-      // 初始化获取值
-      if(!this.initSearch){
-        let df = item.explicitDefaultVal;
-        if(df){
-          let defval = [];
-          if(df === 'firstOption'){
-           let [v,k] = rows;
-          //  如果有添加提示标题，取第二个
-           if(showKeys.length > 0 && item.hasFieldList){
-             v = k;
-           }
-           v && (defval = [v.myName])
-          } else {
-            let f = rows.find(v => v.myName.includes(df));
-            if(f){
-              defval = [f.myName]
-            }
-          }
-          item.value = [...defval]
-          item.search_DefaultValue= [...defval]
-        }
-        this.initSearch = true;
-      }
-    },
-    getWordbookData(o, obj) {
-      let { id, filterKeys, wordbookType } = o;
-      this.fetchingWordbook = true;
-      let resFieldKeys = Array.isArray(filterKeys) ? JSON.stringify(filterKeys) : filterKeys;
-      let url = `/tableReader/getWordbookData`;
-      let params = {
-        wordbookId: id,
-        fieldKeys: resFieldKeys,
-        wordbookType: wordbookType || "WORDBOOK",
-        asyncCount: 1, // 开启性能模式
-        ...obj
-      };
-      return this.handleGetConfigApi(params, 'requestGetWordbookData', { fields: o }).then(res => {
-        this.fetchingWordbook = false;
-        if(typeof res.data === 'object'){
-          res.data.reqParams =  params;
-        }
-        return res;
-      }).catch(() => {
-        this.fetchingWordbook = false;
-      });
-      // return this.axios
-      //   .post(url, this.$qs.stringify(params))
-      //   .then(res => {
-      //     this.fetchingWordbook = false;
-      //     return res;
-      //   })
-      //   .catch(() => {
-      //     this.fetchingWordbook = false;
-      //   });
-    },
-    rangePickerChange(value, item) {
-      if (item.showTime) {
-        if (!value.length && item.showTime) {
-          this.outFilterChange();
-          return;
-        }
-      } else {
-        this.outFilterChange();
-      }
-    },
-    outFilterChange(config = {}) {
-      this.$emit("outFilterChange",config);
-    },
-    maxTagPlaceholder(item) {
-      if (Array.isArray(item.value)) {
-        return item.value.length;
-      } else {
-        return 1;
-      }
-    },
-    changeOutFilterNumber(item) {
-      if (item.lessValue && item.bigValue) {
-        const lessValue = item.lessValue;
-        const bigValue = item.bigValue;
-        if (bigValue < lessValue) {
-          this.$set(item, "lessValue", bigValue);
-          this.$set(item, "bigValue", lessValue);
-        }
-        this.outFilterChange();
-        return;
-      }
-      if (item.lessValue == "" && item.bigValue == "") {
-        this.outFilterChange();
-      }
-    },
-    clearOutFilterNumber(item) {
-      this.$set(item, "lessValue", "");
-      this.$set(item, "bigValue", "");
-      this.outFilterChange();
-    }
-  }
-};
-</script>
-<style lang="less" scoped></style>
+<template>
+  <li class="outQuickSearch-li">
+    <slot v-if="item.com == 'Text'">
+      <a-input
+        @pressEnter="outFilterChange"
+        class="CL-input"
+        :style="{
+          width: `${item.advanceColWidth || 200}px`,
+          margin: '0 8px 8px 0',
+          'font-family': item.PASSWORDTYPE ? 'text-security-disc' : 'inherit'
+        }"
+        :placeholder="`搜索${item.alias || item.title}`"
+        v-model="item.value"
+        allowClear
+      >
+      </a-input>
+    </slot>
+  <template v-if="item.com == 'SelectMui'">
+    <c-tree-select
+      v-if="item.comType === 'treeSelect'"
+      :item="item"
+      :handleGetConfigApi="handleGetConfigApi"
+      :maxTagPlaceholder="maxTagPlaceholder"
+      :outFilterChange="outFilterChange"
+      style="margin: 0 8px 8px 0"
+    />
+    <multiSelect
+      v-else
+      :item="item"
+      :maxTagPlaceholder="maxTagPlaceholder"
+      :outFilterChange="outFilterChange"
+      :handleWordBookSearch="handleWordBookSearch"
+      :dropdownVisibleChange="dropdownVisibleChange"
+      :fetchingWordbook="fetchingWordbook"
+      style="margin: 0 8px 8px 0"
+    ></multiSelect>
+  </template>
+
+    <a-range-picker
+      :allowClear="item.explicitRequired != 1"
+      :format="item.showFormat"
+      @change="value => rangePickerChange(value, item)"
+      @ok="outFilterChange"
+      v-model="item.value"
+      :placeholder="[`${item.alias || item.title}起始日期`, `${item.alias || item.title}截止日期`]"
+      v-if="item.com == 'DatePicker'"
+      style="margin: 0 8px 8px 0"
+      :showTime="handlePickerShowTime(item)"
+      :title="`选择${item.alias || item.title}`"
+    />
+    <a-date-picker
+      :inputReadOnly="item.explicitRequired == 1"
+      :allowClear="item.explicitRequired != 1"
+      :format="item.showFormat"
+      @change="outFilterChange"
+      @ok="outFilterChange"
+      v-model="item.value"
+      :placeholder="`请选择${item.alias || item.title}`"
+      v-if="item.com == 'DayPicker'"
+      style="margin: 0 8px 8px 0"
+      :showTime="false"
+      :title="`选择${item.alias || item.title}`"
+    />
+    <span
+      v-if="item.com == 'Number'"
+      class="ant-calendar-picker"
+      style="margin: 0 8px 8px 0; width: 200px"
+    >
+      <span
+        class="ant-calendar-picker-input ant-input num-picker"
+        :class="{ 'num-picker-unit': item.inputUnit }"
+      >
+        <input
+          v-model="item.lessValue"
+          @keyup.enter="() => changeOutFilterNumber(item)"
+          :title="`起始${item.alias || item.title}`"
+          :placeholder="`起始${item.alias || item.title}`"
+          class="ant-calendar-range-picker-input"/>
+        <span class="ant-calendar-range-picker-separator"> ~ &nbsp;</span>
+        <input
+          v-model="item.bigValue"
+          :title="`截止${item.alias || item.title}`"
+          @keyup.enter="() => changeOutFilterNumber(item)"
+          :placeholder="`截止${item.alias || item.title}`"
+          class="ant-calendar-range-picker-input"/>
+        <template v-if="item.inputUnit">&nbsp;{{ item.inputUnit }}</template>
+        <span
+          class="ant-input-suffix clear-number-icon"
+          v-if="item.lessValue || item.bigValue"
+          @click="clearOutFilterNumber(item)"
+          ><i
+            aria-label="图标: close-circle"
+            tabindex="-1"
+            class="anticon anticon-close-circle ant-input-clear-icon"
+            ><svg
+              viewBox="64 64 896 896"
+              data-icon="close-circle"
+              width="1em"
+              height="1em"
+              fill="currentColor"
+              aria-hidden="true"
+              focusable="false"
+              class=""
+            >
+              <path
+                d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+              ></path></svg></i
+        ></span>
+        <span class="ant-calendar-picker-icon"></span
+      ></span>
+    </span>
+  </li>
+</template>
+<script>
+
+import multiSelect from '../multi-select/multi-select';
+import cTreeSelect from '../c-tree-select/tree-select';
+import { filterApiFn } from '../../mixins/mixins';
+import wordBookutils from '../../mixins/wordBookutils';
+import moment from 'moment';
+import {  DatePicker} from 'ant-design-vue';
+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
+  }
+];
+export default {
+  name: "OutQuickSearch",
+  mixins: [filterApiFn],
+  components: { multiSelect,cTreeSelect,  [DatePicker.name]:DatePicker,  [DatePicker.RangePicker.name]: DatePicker.RangePicker },
+  props: {
+    item: Object
+  },
+  data() {
+    return {
+      fetchingWordbook: false,
+      initSearch: false,
+      curDefaultValue: null,
+    };
+  },
+
+  computed: {
+    handlePickerShowTime() {
+      return function(item) {
+        if (!item.showTime) return false;
+        return {
+          defaultValue: [moment("00:00:00", "HH:mm:ss"), moment("23:59:59", "HH:mm:ss")]
+        };
+      };
+    }
+  },
+  watch: {},
+  // 生命周期
+  created() {},
+  mounted() {
+    this.init();
+  },
+
+  // 方法
+  methods: {
+
+    init(){
+      let item = this.item;
+      let df = item.explicitDefaultVal;
+      if(item.com == 'SelectMui' && df){
+        this.dropdownVisibleChange(true, item, {type:'hasDefaultInit'})
+      }
+    },
+
+    handleWordBookSearch(value, item, config = {}) {
+      if (item.comType != "SelectMuiWordBook") return;
+      let curAutograph = item.settingObj.wordbook && item.settingObj.wordbook.autograph;
+      let params = {
+        keyword: value,
+        autograph: curAutograph
+      };
+      let obj = {};
+      let p = item?.setting?.wordbook?.params || undefined;
+      if (p) {
+        item.setting.wordbook.params.forEach(item => {
+          obj[item.p_name] = item.p_value;
+        });
+      }
+      let rp = { ...params, ...obj, ...config }
+      this.getWordbookData(item.setting.wordbook, rp).then(({ data }) => {
+        this.handleWordbookData(item, data, rp);
+      });
+    },
+    dropdownVisibleChange(open, item, config={}) {
+      if (item.comType != "SelectMuiWordBook") return;
+      if (open) {
+        let obj = {};
+        if (item.setting.wordbook.params) {
+          item.setting.wordbook.params.forEach(item => {
+            obj[item.p_name] = item.p_value;
+          });
+        }
+        if (item.settingObj.wordbook) {
+          obj.autograph = item.settingObj.wordbook.autograph;
+        }
+        let df = item.explicitDefaultVal;
+        if(df != 'firstOption'){
+          obj.keyword = df;
+        }
+        this.getWordbookData(item.setting.wordbook, obj).then(({ data }) => {
+          this.handleWordbookData(item, data, obj);
+          if('hasDefaultInit' == config?.type){
+            this.outFilterChange({type:'outSearchInit'});
+          }
+        });
+      }
+    },
+    handleWordbookData(item, data, params) {
+      this.$set(item, "hasFieldList", false);
+      const {rows,hasFieldList,searchPageConfig} = wordBookutils.handleWordbookData(item,data,params);
+      this.$set(item, "hasFieldList", hasFieldList);
+      this.$set(item, "dataSource", rows);
+       let showKeys = item?.setting?.wordbook?.showKeys || [];
+      item.searchPageConfig = Object.assign(item.searchPageConfig, searchPageConfig);
+      // 初始化获取值
+      if(!this.initSearch){
+        let df = item.explicitDefaultVal;
+        if(df){
+          let defval = [];
+          if(df === 'firstOption'){
+           let [v,k] = rows;
+          //  如果有添加提示标题，取第二个
+           if(showKeys.length > 0 && item.hasFieldList){
+             v = k;
+           }
+           v && (defval = [v.myName])
+          } else {
+            let f = rows.find(v => v.myName.includes(df));
+            if(f){
+              defval = [f.myName]
+            }
+          }
+          item.value = [...defval]
+          item.search_DefaultValue= [...defval]
+        }
+        this.initSearch = true;
+      }
+    },
+    getWordbookData(o, obj) {
+      let { id, filterKeys, wordbookType } = o;
+      this.fetchingWordbook = true;
+      let resFieldKeys = Array.isArray(filterKeys) ? JSON.stringify(filterKeys) : filterKeys;
+      let url = `/tableReader/getWordbookData`;
+      let params = {
+        wordbookId: id,
+        fieldKeys: resFieldKeys,
+        wordbookType: wordbookType || "WORDBOOK",
+        asyncCount: 1, // 开启性能模式
+        ...obj
+      };
+      return this.handleGetConfigApi(params, 'requestGetWordbookData', { fields: o }).then(res => {
+        this.fetchingWordbook = false;
+        if(typeof res.data === 'object'){
+          res.data.reqParams =  params;
+        }
+        return res;
+      }).catch(() => {
+        this.fetchingWordbook = false;
+      });
+      // return this.axios
+      //   .post(url, this.$qs.stringify(params))
+      //   .then(res => {
+      //     this.fetchingWordbook = false;
+      //     return res;
+      //   })
+      //   .catch(() => {
+      //     this.fetchingWordbook = false;
+      //   });
+    },
+    rangePickerChange(value, item) {
+      if (item.showTime) {
+        if (!value.length && item.showTime) {
+          this.outFilterChange();
+          return;
+        }
+      } else {
+        this.outFilterChange();
+      }
+    },
+    outFilterChange(config = {}) {
+      this.$emit("outFilterChange",config);
+    },
+    maxTagPlaceholder(item) {
+      if (Array.isArray(item.value)) {
+        return item.value.length;
+      } else {
+        return 1;
+      }
+    },
+    changeOutFilterNumber(item) {
+      if (item.lessValue && item.bigValue) {
+        const lessValue = item.lessValue;
+        const bigValue = item.bigValue;
+        if (bigValue < lessValue) {
+          this.$set(item, "lessValue", bigValue);
+          this.$set(item, "bigValue", lessValue);
+        }
+        this.outFilterChange();
+        return;
+      }
+      if (item.lessValue == "" && item.bigValue == "") {
+        this.outFilterChange();
+      }
+    },
+    clearOutFilterNumber(item) {
+      this.$set(item, "lessValue", "");
+      this.$set(item, "bigValue", "");
+      this.outFilterChange();
+    }
+  }
+};
+</script>
+<style lang="less" scoped></style>