cnhis-design-vue 2.1.17 → 2.1.18

package/packages/table-filter/src/components/c-tree-select/tree-select.vue

@@ -1,336 +1,336 @@
-<template>
-  <a-tree-select
-    v-model="item.value"
-    dropdownClassName="c-a-tree-select-container"
-    @select="treeSelect"
-    @change="change"
-    :maxTagCount="handleMaxTagCount(item)"
-    :maxTagPlaceholder="handleMaxTag"
-    showSearch
-    multiple
-    :style="`width: ${item.advanceColWidth||160}px`"
-    :class="[!showRemoveIcon && 'c-a-tree-select-show-hide-icon','c-a-quick-input-tree-mul']"
-    :dropdown-style="{ maxHeight: '292px', overflow: 'auto' }"
-    :tree-data="treeData"
-    :allowClear="item.explicitRequired != 1"
-    treeNodeFilterProp="title"
-    ref="quickInputSelect"
-    :placeholder="`请选择${item.alias || item.title}`"
-  >
-    <a-icon slot="suffixIcon" type="smile" />
-    <span class="init-key-loading" v-if="key === '_init_key_'" slot="title" slot-scope="{ key, value }" style="color: #08c">
-      <span v-show="false">{{ value }}</span>
-      <a-spin :tip="`加载中...`" />
-    </span>
-  </a-tree-select>
-</template>
-
-<script>
-import { TreeSelect, Spin, Icon } from 'ant-design-vue';
-import vexutils from '@/utils/vexutils';
-export default {
-  name: 'cTreeSelect',
-  data() {
-    return {
-      treeData: [
-        {
-          // title: "_init_key_",
-          value: '_init_key_',
-          key: '_init_key_',
-          selectable: false,
-          scopedSlots: {
-            title: 'title'
-          }
-        }
-      ]
-    };
-  },
-  props: {
-    item: {
-      type: Object,
-      default: () => ({ value: [] })
-    },
-    handleGetConfigApi: {
-      type: Function,
-      default: () => {}
-    },
-    outFilterChange: {
-      type: Function,
-      default: () => {}
-    }
-  },
-  computed: {
-    handleMaxTagCount() {
-      return function(item) {
-        let len = this.maxTagPlaceholder(item);
-        if (len <= 1) return 1;
-        return 0;
-      };
-    },
-    // handleMaxTag() {
-    //   return function(item) {
-    //     let len = this.maxTagPlaceholder(item);
-    //     if (len <= 1) return '';
-    //     return `已选${this.maxTagPlaceholder(item)}个${item.alias || item.title}`;
-    //   };
-    // },
-
-    showRemoveIcon() {
-      let v = this.item.value;
-       let f = 1 == this?.item?.filterExplicit
-      if (Array.isArray(v) && f) {
-        let l = v.length;
-        if (this.item.explicitRequired == 1) {
-          return l > 1;
-        }
-      }
-      return true;
-    }
-  },
-  watch: {
-    'item.value': {
-      immediate: true,
-      deep: true,
-      handler() {
-        // if (this.showRemoveIcon) return;
-        this.handleDisabledTreeData(this.treeData,{showRemoveIcon: this.showRemoveIcon});
-        this.$forceUpdate();
-      }
-    }
-  },
-  beforeCreate() {},
-  created() {},
-  beforeMount() {},
-  mounted() {
-    this.init();
-    this.createSuffixIcon();
-  },
-  beforeUpdate() {},
-  updated() {},
-  beforeDestroy() {},
-  destroyed() {},
-  activated() {},
-  methods: {
-    async init() {
-      try {
-        let res = await this.handleRequestedOptions(this.item);
-        let { result, map } = res.data;
-        if (result !== 'SUCCESS') {
-          this.treeData = [];
-          return;
-        }
-        let rows = map.rows || [];
-        if (rows) {
-          this.handleInitTreeData(rows, this.item);
-          this.treeData = rows;
-        }
-      } catch (error) {
-        console.log(error);
-        this.treeData = [];
-      } finally {
-        this.hanldeSetTreeDef();
-      }
-    },
-    handleMaxTag() {
-        let item = this.item;
-        let len = this.maxTagPlaceholder(item);
-        if (len <= 1) return '';
-        return `已选${this.maxTagPlaceholder(item)}个${item.alias || item.title}`;
-      },
-    async handleRequestedOptions(item = {}) {
-      let params = this.getSearchDefParams(item);
-      let res = await this.handleGetConfigApi(params, 'requestGetWordbookData', { fields: item });
-      return res;
-    },
-
-    getSearchDefParams(item = {}) {
-      let obj = {};
-      let { params = [], autograph, filterKeys, id, wordbookType } = item?.settingObj?.wordbook || {};
-      if (params) {
-        params.forEach(item => {
-          obj[item.p_name] = item.p_value;
-        });
-      }
-      if (autograph) {
-        obj.autograph = autograph;
-      }
-      let resFieldKeys = Array.isArray(filterKeys) ? JSON.stringify(filterKeys) : filterKeys;
-      let res = {
-        wordbookId: id,
-        fieldKeys: resFieldKeys,
-        wordbookType: wordbookType || 'WORDBOOK',
-        isLevelLazyLoad: false,
-        ...obj
-      };
-
-      return res;
-    },
-
-    /* 解析下拉选择接口返回字段 */
-    formatField(value, key) {
-      let res = value;
-      try {
-        if (res && typeof res == 'string' && res.startsWith('###')) {
-          res = res.slice(3);
-          res = JSON.parse(res);
-          res = res.change_text;
-        }
-
-        return res || '';
-      } catch (error) {
-        return '';
-      }
-    },
-
-    hanldeGetCascadelabel(v = [], k = {}) {
-      if (Array.isArray(v) && v.length) {
-        const l = [];
-        v.forEach(i => {
-          let res = this.formatField(k[i]);
-          l.push(res);
-        });
-        if (l.length == 0) {
-          return '';
-        }
-        return l.join(' ');
-      }
-      return '';
-    },
-
-    handleInitTreeData(list = [], config = {}) {
-      let { showKeys = [], field_key } = config?.setting?.wordbook || {};
-      list.forEach((item, i) => {
-        let val = vexutils.stringToValue(item[field_key], 'value');
-        item.myLabel = this.hanldeGetCascadelabel(showKeys, item) || val;
-        item.key = item.theUniqueKey;
-        item.title = item.myLabel;
-        // 避免接口配置的value 不知唯一值，导致前端页面卡死
-        item.value = `${val}<&=&>${i}<&=&>${item.key}`;
-        // item.scopedSlots = {
-        //   title: "title"
-        // };
-
-        if (item.children && item.children.length) {
-          this.handleInitTreeData(item.children, config);
-        }
-      });
-    },
-
-    hanldeSetTreeDef() {
-      let f = 1 == this?.item?.filterExplicit
-      let df = this?.item?.explicitDefaultVal || '';
-      if (df === 'firstOption' && f) {
-        let [v] = this.treeData;
-        this.item.value = v?.value ? [v.value] : [];
-        if (typeof this.outFilterChange === 'function') {
-          this.outFilterChange({type: 'outSearchInit'});
-        }
-      }
-    },
-
-    maxTagPlaceholder(item) {
-      if (Array.isArray(item.value)) {
-        return item.value.length;
-      } else {
-        return 1;
-      }
-    },
-
-    treeSelect(key, vnode) {
-    },
-
-    change(){
-    },
-
-    handleDisabledTreeData(list = [], config = {}) {
-      list.forEach((item, i) => {
-        let k = config.showRemoveIcon? false: this.item.value.includes(item.value);
-        this.$set(item, 'disabled', k);
-        if (item.children && item.children.length) {
-          this.handleDisabledTreeData(item.children, config);
-        }
-      });
-    },
-
-    createSuffixIcon() {
-      let refDom = this.$refs.quickInputSelect;
-      if (!refDom) return;
-      let selectDom = refDom.$el;
-      if(!selectDom) return;
-
-      let pDom = selectDom.querySelector('.ant-select-selection--multiple');
-      let hasTag = pDom.querySelector('.quick-input-select-span');
-      if (!hasTag) {
-        let tag = document.createElement('span');
-        tag.className = 'quick-input-select-span';
-        let icon = `<i aria-label="图标: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i>`;
-        tag.innerHTML = icon;
-        pDom.appendChild(tag);
-      }
-    },
-  },
-  components: {
-    [TreeSelect.name]: TreeSelect,
-    [Spin.name]: Spin,
-    [Icon.name]: Icon
-  }
-};
-</script>
-
-<style lang="less">
-.c-a-tree-select-container {
-  .ant-select-tree-title {
-    display: inline-block;
-    width: 100%;
-  }
-
-  .init-key-loading {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-  }
-
-  .ant-select-tree {
-    li.filter-node {
-      > span {
-        font-weight: 600;
-      }
-    }
-  }
-}
-
-.c-a-quick-input-tree-mul {
-    .ant-select-selection--multiple {
-      max-height: unset !important;
-    }
-    .ant-select-selection__rendered {
-      height: 32px !important;
-      overflow: hidden;
-    }
-    .ant-select-selection--multiple {
-      position: relative;
-      max-height: 32px !important;
-      .quick-input-select-span {
-        position: absolute;
-        right: 2px;
-        top: 4px;
-        top: 50%;
-        right: 11px;
-        transform-origin: 50% 50%;
-        margin-top: -7px;
-        line-height: 1;
-        .quick-input-select-icon {
-          font-size: 12px;
-        }
-      }
-  }
-}
-
-
-
-.c-a-tree-select-show-hide-icon {
-  .ant-select-selection__choice__remove {
-    display: none!important;
-  }
-}
-</style>
+<template>
+  <a-tree-select
+    v-model="item.value"
+    dropdownClassName="c-a-tree-select-container"
+    @select="treeSelect"
+    @change="change"
+    :maxTagCount="handleMaxTagCount(item)"
+    :maxTagPlaceholder="handleMaxTag"
+    showSearch
+    multiple
+    :style="`width: ${item.advanceColWidth||160}px`"
+    :class="[!showRemoveIcon && 'c-a-tree-select-show-hide-icon','c-a-quick-input-tree-mul']"
+    :dropdown-style="{ maxHeight: '292px', overflow: 'auto' }"
+    :tree-data="treeData"
+    :allowClear="item.explicitRequired != 1"
+    treeNodeFilterProp="title"
+    ref="quickInputSelect"
+    :placeholder="`请选择${item.alias || item.title}`"
+  >
+    <a-icon slot="suffixIcon" type="smile" />
+    <span class="init-key-loading" v-if="key === '_init_key_'" slot="title" slot-scope="{ key, value }" style="color: #08c">
+      <span v-show="false">{{ value }}</span>
+      <a-spin :tip="`加载中...`" />
+    </span>
+  </a-tree-select>
+</template>
+
+<script>
+import { TreeSelect, Spin, Icon } from 'ant-design-vue';
+import vexutils from '@/utils/vexutils';
+export default {
+  name: 'cTreeSelect',
+  data() {
+    return {
+      treeData: [
+        {
+          // title: "_init_key_",
+          value: '_init_key_',
+          key: '_init_key_',
+          selectable: false,
+          scopedSlots: {
+            title: 'title'
+          }
+        }
+      ]
+    };
+  },
+  props: {
+    item: {
+      type: Object,
+      default: () => ({ value: [] })
+    },
+    handleGetConfigApi: {
+      type: Function,
+      default: () => {}
+    },
+    outFilterChange: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  computed: {
+    handleMaxTagCount() {
+      return function(item) {
+        let len = this.maxTagPlaceholder(item);
+        if (len <= 1) return 1;
+        return 0;
+      };
+    },
+    // handleMaxTag() {
+    //   return function(item) {
+    //     let len = this.maxTagPlaceholder(item);
+    //     if (len <= 1) return '';
+    //     return `已选${this.maxTagPlaceholder(item)}个${item.alias || item.title}`;
+    //   };
+    // },
+
+    showRemoveIcon() {
+      let v = this.item.value;
+       let f = 1 == this?.item?.filterExplicit
+      if (Array.isArray(v) && f) {
+        let l = v.length;
+        if (this.item.explicitRequired == 1) {
+          return l > 1;
+        }
+      }
+      return true;
+    }
+  },
+  watch: {
+    'item.value': {
+      immediate: true,
+      deep: true,
+      handler() {
+        // if (this.showRemoveIcon) return;
+        this.handleDisabledTreeData(this.treeData,{showRemoveIcon: this.showRemoveIcon});
+        this.$forceUpdate();
+      }
+    }
+  },
+  beforeCreate() {},
+  created() {},
+  beforeMount() {},
+  mounted() {
+    this.init();
+    this.createSuffixIcon();
+  },
+  beforeUpdate() {},
+  updated() {},
+  beforeDestroy() {},
+  destroyed() {},
+  activated() {},
+  methods: {
+    async init() {
+      try {
+        let res = await this.handleRequestedOptions(this.item);
+        let { result, map } = res.data;
+        if (result !== 'SUCCESS') {
+          this.treeData = [];
+          return;
+        }
+        let rows = map.rows || [];
+        if (rows) {
+          this.handleInitTreeData(rows, this.item);
+          this.treeData = rows;
+        }
+      } catch (error) {
+        console.log(error);
+        this.treeData = [];
+      } finally {
+        this.hanldeSetTreeDef();
+      }
+    },
+    handleMaxTag() {
+        let item = this.item;
+        let len = this.maxTagPlaceholder(item);
+        if (len <= 1) return '';
+        return `已选${this.maxTagPlaceholder(item)}个${item.alias || item.title}`;
+      },
+    async handleRequestedOptions(item = {}) {
+      let params = this.getSearchDefParams(item);
+      let res = await this.handleGetConfigApi(params, 'requestGetWordbookData', { fields: item });
+      return res;
+    },
+
+    getSearchDefParams(item = {}) {
+      let obj = {};
+      let { params = [], autograph, filterKeys, id, wordbookType } = item?.settingObj?.wordbook || {};
+      if (params) {
+        params.forEach(item => {
+          obj[item.p_name] = item.p_value;
+        });
+      }
+      if (autograph) {
+        obj.autograph = autograph;
+      }
+      let resFieldKeys = Array.isArray(filterKeys) ? JSON.stringify(filterKeys) : filterKeys;
+      let res = {
+        wordbookId: id,
+        fieldKeys: resFieldKeys,
+        wordbookType: wordbookType || 'WORDBOOK',
+        isLevelLazyLoad: false,
+        ...obj
+      };
+
+      return res;
+    },
+
+    /* 解析下拉选择接口返回字段 */
+    formatField(value, key) {
+      let res = value;
+      try {
+        if (res && typeof res == 'string' && res.startsWith('###')) {
+          res = res.slice(3);
+          res = JSON.parse(res);
+          res = res.change_text;
+        }
+
+        return res || '';
+      } catch (error) {
+        return '';
+      }
+    },
+
+    hanldeGetCascadelabel(v = [], k = {}) {
+      if (Array.isArray(v) && v.length) {
+        const l = [];
+        v.forEach(i => {
+          let res = this.formatField(k[i]);
+          l.push(res);
+        });
+        if (l.length == 0) {
+          return '';
+        }
+        return l.join(' ');
+      }
+      return '';
+    },
+
+    handleInitTreeData(list = [], config = {}) {
+      let { showKeys = [], field_key } = config?.setting?.wordbook || {};
+      list.forEach((item, i) => {
+        let val = vexutils.stringToValue(item[field_key], 'value');
+        item.myLabel = this.hanldeGetCascadelabel(showKeys, item) || val;
+        item.key = item.theUniqueKey;
+        item.title = item.myLabel;
+        // 避免接口配置的value 不知唯一值，导致前端页面卡死
+        item.value = `${val}<&=&>${i}<&=&>${item.key}`;
+        // item.scopedSlots = {
+        //   title: "title"
+        // };
+
+        if (item.children && item.children.length) {
+          this.handleInitTreeData(item.children, config);
+        }
+      });
+    },
+
+    hanldeSetTreeDef() {
+      let f = 1 == this?.item?.filterExplicit
+      let df = this?.item?.explicitDefaultVal || '';
+      if (df === 'firstOption' && f) {
+        let [v] = this.treeData;
+        this.item.value = v?.value ? [v.value] : [];
+        if (typeof this.outFilterChange === 'function') {
+          this.outFilterChange({type: 'outSearchInit'});
+        }
+      }
+    },
+
+    maxTagPlaceholder(item) {
+      if (Array.isArray(item.value)) {
+        return item.value.length;
+      } else {
+        return 1;
+      }
+    },
+
+    treeSelect(key, vnode) {
+    },
+
+    change(){
+    },
+
+    handleDisabledTreeData(list = [], config = {}) {
+      list.forEach((item, i) => {
+        let k = config.showRemoveIcon? false: this.item.value.includes(item.value);
+        this.$set(item, 'disabled', k);
+        if (item.children && item.children.length) {
+          this.handleDisabledTreeData(item.children, config);
+        }
+      });
+    },
+
+    createSuffixIcon() {
+      let refDom = this.$refs.quickInputSelect;
+      if (!refDom) return;
+      let selectDom = refDom.$el;
+      if(!selectDom) return;
+
+      let pDom = selectDom.querySelector('.ant-select-selection--multiple');
+      let hasTag = pDom.querySelector('.quick-input-select-span');
+      if (!hasTag) {
+        let tag = document.createElement('span');
+        tag.className = 'quick-input-select-span';
+        let icon = `<i aria-label="图标: down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></i>`;
+        tag.innerHTML = icon;
+        pDom.appendChild(tag);
+      }
+    },
+  },
+  components: {
+    [TreeSelect.name]: TreeSelect,
+    [Spin.name]: Spin,
+    [Icon.name]: Icon
+  }
+};
+</script>
+
+<style lang="less">
+.c-a-tree-select-container {
+  .ant-select-tree-title {
+    display: inline-block;
+    width: 100%;
+  }
+
+  .init-key-loading {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .ant-select-tree {
+    li.filter-node {
+      > span {
+        font-weight: 600;
+      }
+    }
+  }
+}
+
+.c-a-quick-input-tree-mul {
+    .ant-select-selection--multiple {
+      max-height: unset !important;
+    }
+    .ant-select-selection__rendered {
+      height: 32px !important;
+      overflow: hidden;
+    }
+    .ant-select-selection--multiple {
+      position: relative;
+      max-height: 32px !important;
+      .quick-input-select-span {
+        position: absolute;
+        right: 2px;
+        top: 4px;
+        top: 50%;
+        right: 11px;
+        transform-origin: 50% 50%;
+        margin-top: -7px;
+        line-height: 1;
+        .quick-input-select-icon {
+          font-size: 12px;
+        }
+      }
+  }
+}
+
+
+
+.c-a-tree-select-show-hide-icon {
+  .ant-select-selection__choice__remove {
+    display: none!important;
+  }
+}
+</style>