doway-coms 2.2.18 → 2.2.21

package/packages/BaseTreeSelect/src/index.vue

@@ -1,416 +1,437 @@
-<template>
-  <div class="d-control-container">
-    <div
-      class="d-control-label"
-      v-if="showLabel === true"
-      :style="{ width: labelWidth > 0 ? labelWidth + 'px' : 'none' }"
-    >
-      {{ label }}
-      <span v-if="rules && rules['required']" class="d-control-label-required"
-        >*</span
-      >
-      <Tooltip :title="tooltip" v-if="tooltip" style="margin: 0 2px">
-        <img src="../../styles/icon/help.png" alt="" style="width: 14px" />
-      </Tooltip>
-    </div>
-    <div class="d-control">
-      <ValidationProvider
-        v-if="edit === true"
-        :name="label"
-        v-slot="v"
-        :rules="rules"
-      >
-        <TreeSelect
-          ref="treeSelectView"
-          v-model="currentValue"
-          :treeData="treeData"
-          :showSearch="showSearch"
-          :replaceFields="replaceFields"
-          :dropdownMatchSelectWidth="dropdownMatchSelectWidth"
-          :treeDefaultExpandAll="treeDefaultExpandAll"
-          :treeDefaultExpandedKeys="treeDefaultExpandedKeys"
-          @change="changeData"
-          size="small"
-          :allowClear="allowClear"
-          @focus="searchData"
-          @select="selectData"
-          :dropdownStyle="{
-            width: treeWidth + 'px',
-            height: '300px',
-            ...widthDropdownStyle,
-          }"
-          treeNodeFilterProp="title"
-          :style="{
-            width: '100%',
-          }"
-          :placeholder="placeholder"
-        ></TreeSelect>
-        <div class="d-error-msg">
-          {{ v.errors[0] }}
-        </div>
-      </ValidationProvider>
-
-      <span v-else>
-        <a v-if="route" @click="routeLinkClick">{{ value }}</a>
-        <span v-else> {{ value }}</span>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Tooltip, TreeSelect } from 'ant-design-vue'
-import request from '../../utils/request'
-import XEUtils from 'xe-utils'
-import { ValidationProvider } from 'vee-validate'
-export default {
-  name: 'BaseTreeSelect',
-  components: {
-    Tooltip,
-    TreeSelect,
-    ValidationProvider,
-  },
-  props: {
-    label: {
-      type: String,
-    },
-    showLabel: {
-      type: Boolean,
-      default: function () {
-        return true
-      },
-    },
-    labelWidth: {
-      type: Number,
-      default: function () {
-        return 100
-      },
-    },
-    api: {
-      type: String,
-      required: true,
-    },
-    exps: {
-      // 条件
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
-    value: {
-      type: String,
-      default: function () {
-        return ''
-      },
-    },
-    tooltip: {
-      type: String,
-      default: function () {
-        return ''
-      },
-    },
-    customTitle: {
-      type: Array,
-      default: function () {
-        return []
-      },
-    },
-    // 输入框宽度
-    width: {
-      type: Number,
-      default: function () {
-        return 100
-      },
-    },
-    // 树宽度
-    treeWidth: {
-      type: Number,
-      default: function () {
-        return 200
-      },
-    },
-    // 输入框和选择器同宽
-    dropdownMatchSelectWidth: {
-      type: Boolean,
-      default: function () {
-        return false
-      },
-    },
-    // 替换展示字段
-    replaceFields: {
-      type: Object,
-      default: function () {
-        return {
-          children: 'children',
-          title: 'title',
-          key: 'key',
-          value: 'value',
-        }
-      },
-    },
-    // 是否默认展开所有树节点
-    treeDefaultExpandAll: {
-      type: Boolean,
-      default: function () {
-        return false
-      },
-    },
-    size: {
-      type: String,
-      default: function () {
-        return 'small'
-      },
-    },
-    // 下拉中显示搜索框
-    showSearch: {
-      type: Boolean,
-      default: function () {
-        return true
-      },
-    },
-    // 下拉菜单的样式
-    widthDropdownStyle: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-    // 清除按钮
-    allowClear: {
-      type: Boolean,
-      default: function () {
-        return true
-      },
-    },
-    placeholder: {
-      type: String,
-      default: function () {
-        return ''
-      },
-    },
-    rules: {
-      type: Object,
-      default: function () {
-        return null
-      },
-    },
-    formRow: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-    row: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-    edit: {
-      type: Boolean,
-      default: function () {
-        return false
-      },
-    },
-    field: {
-      type: String,
-    },
-    columns: {
-      // 列集合
-      type: Array,
-      default: () => {
-        return []
-      },
-    },
-    propTableData: {
-      type: Array,
-      default: function () {
-        return []
-      },
-    },
-    linkedField: {
-      type: String,
-      required: true,
-    },
-    linkedTitle: {
-      type: [],
-      default: function () {
-        return []
-      },
-    },
-    method: {
-      type: String,
-      default: function () {
-        return 'post'
-      },
-    },
-    route: Object,
-  },
-  data() {
-    return {
-      treeData: [],
-      currentValue: '',
-      treeDefaultExpandedKeys: [],
-    }
-  },
-  mounted() {
-    this.searchData()
-    if (this.treeData.length) {
-      this.currentValue = this.row[this.linkedField]
-    } else {
-      this.currentValue = this.value
-    }
-  },
-  watch: {
-    treeData(val) {
-      if (this.treeData.length) {
-        this.currentValue = this.row[this.linkedField]
-        this.treeDefaultExpandedKeys = []
-        this.treeDefaultExpandedKeys.push(this.currentValue)
-      } else {
-        this.currentValue = this.value
-      }
-    },
-    edit(value) {
-      // debugger
-      if (value) {
-        if (this.treeData.length) {
-          this.currentValue = this.row[this.linkedField]
-        } else {
-          this.currentValue = this.value
-        }
-      }
-    },
-  },
-  computed: {},
-  methods: {
-    /**
-     * 查询数据
-     */
-    searchData() {
-      let tempExp = {
-        operator: 'or',
-        expressions: [],
-      }
-
-      let postExpression = {
-        field: this.field,
-        expression: tempExp,
-        extendParams: {},
-      }
-      let repeatRowInfo = {
-        field: '',
-        values: [],
-      }
-      //查询之前从外部组件构造其他的条件
-      this.$emit('preSearch', postExpression, repeatRowInfo, this.row)
-      let postData = {
-        begin: 1,
-        size: 0,
-        expression: postExpression.expression,
-        sorts: [],
-        extendParams: postExpression.extendParams,
-      }
-      let tempApi = this.getPostApi(postData)
-      let vm = this
-      vm.gridLoading = true
-      request({
-        url: tempApi,
-        method: this.method,
-        data: postData,
-      })
-        .then((responseData) => {
-          vm.treeData = responseData.content
-          if (this.linkedTitle.length) {
-            XEUtils.eachTree(vm.treeData, (item) => {
-              let title = ''
-              XEUtils.arrayEach(this.linkedTitle, (newTitle) => {
-                title = title + item[newTitle] + '-'
-              })
-              item[this.replaceFields.title] = title.slice(0, -1)
-            })
-          }
-        })
-        .catch((error) => {
-          console.error(error)
-        })
-        .finally(() => {
-          vm.gridLoading = false
-        })
-    },
-    getPostApi(postData) {
-      let tempApi = this.api
-      if (this.api.indexOf('?') > 0) {
-        tempApi = this.api.substring(0, this.api.indexOf('?'))
-        let tempExtenParams = this.api.substring(this.api.indexOf('?') + 1)
-        tempExtenParams = replaceParam(tempExtenParams, this.formRow)
-        let tempSplitParams = tempExtenParams.split('&')
-        for (let i = 0; i < tempSplitParams.length; i++) {
-          let tempSplitValue = tempSplitParams[i].split('=')
-          this.$set(postData.extendParams, tempSplitValue[0], tempSplitValue[1])
-        }
-      }
-      return tempApi
-    },
-    routeLinkClick() {
-      //首先需要判断是否有权限
-      this.$router.pushRoute({
-        name: this.route.name,
-        query: { id: this.row[this.route.field] },
-      })
-    },
-    selectData(value, node) {
-      // this.row[this.linkedField] = value
-      // this.row[this.field] = node.title
-      this.$set(this.row, this.linkedField, value)
-      this.$set(this.row, this.field, node.title)
-      this.$emit('selectChanged', this.row)
-    },
-    changeData(value) {
-      if (!value) {
-        this.$set(this.row, this.linkedField, '')
-        this.$set(this.row, this.field, '')
-        this.$emit('selectChanged', this.row)
-      }
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-// ::v-deep .ant-select-tree-dropdown::-webkit-scrollbar {
-//   width: 5px;
-// }
-// ::v-deep .ant-select-tree-dropdown::-webkit-scrollbar-thumb {
-//   /*滚动条里面小方块*/
-//   border-radius: 10px;
-//   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-//   background: #e5e5e5;
-// }
-// ::v-deep .ant-select-tree-dropdown::-webkit-scrollbar-track {
-//   /*滚动条里面轨道*/
-//   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
-//   border-radius: 10px;
-//   background: #ffffff;
-// }
-.pulldown-grid {
-  min-width: 600px;
-  width: auto;
-  height: 350px;
-  background-color: #fff;
-  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
-}
-
-.d-grid-control {
-  height: 30px;
-}
-.interceptor-class {
-  padding: 10px;
-  ::v-deep .ant-btn {
-    margin: 10px 10px 0;
-  }
-}
-</style>
-<style lang="less">
-@import '../../styles/default.less';
-</style>
+<template>
+  <div class="d-control-container">
+    <div
+      class="d-control-label"
+      v-if="showLabel === true"
+      :style="{ width: labelWidth > 0 ? labelWidth + 'px' : 'none' }"
+    >
+      {{ label }}
+      <span v-if="rules && rules['required']" class="d-control-label-required"
+        >*</span
+      >
+      <Tooltip :title="tooltip" v-if="tooltip" style="margin: 0 2px">
+        <img src="../../styles/icon/help.png" alt="" style="width: 14px" />
+      </Tooltip>
+    </div>
+    <div class="d-control">
+      <ValidationProvider
+        v-if="edit === true"
+        :name="label"
+        v-slot="v"
+        :rules="rules"
+      >
+        <TreeSelect
+          ref="treeSelectView"
+          v-model="currentValue"
+          :treeData="treeData"
+          :showSearch="showSearch"
+          :replaceFields="replaceFields"
+          :dropdownMatchSelectWidth="dropdownMatchSelectWidth"
+          :treeDefaultExpandAll="treeDefaultExpandAll"
+          :treeDefaultExpandedKeys="treeDefaultExpandedKeys"
+          :filterTreeNode="filterTreeNode"
+          @change="changeData"
+          size="small"
+          :allowClear="allowClear"
+          @focus="searchData"
+          @select="selectData"
+          :dropdownStyle="{
+            width: treeWidth + 'px',
+            height: '300px',
+            ...widthDropdownStyle,
+          }"
+          treeNodeFilterProp="title"
+          :style="{
+            width: '100%',
+          }"
+          :placeholder="placeholder"
+        ></TreeSelect>
+        <div class="d-error-msg">
+          {{ v.errors[0] }}
+        </div>
+      </ValidationProvider>
+
+      <span v-else>
+        <a v-if="route" @click="routeLinkClick">{{ value }}</a>
+        <span v-else> {{ value }}</span>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Tooltip, TreeSelect } from 'ant-design-vue'
+import request from '../../utils/request'
+import XEUtils from 'xe-utils'
+import { ValidationProvider } from 'vee-validate'
+export default {
+  name: 'BaseTreeSelect',
+  components: {
+    Tooltip,
+    TreeSelect,
+    ValidationProvider,
+  },
+  props: {
+    label: {
+      type: String,
+    },
+    showLabel: {
+      type: Boolean,
+      default: function () {
+        return true
+      },
+    },
+    labelWidth: {
+      type: Number,
+      default: function () {
+        return 100
+      },
+    },
+    api: {
+      type: String,
+      required: true,
+    },
+    exps: {
+      // 条件
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    value: {
+      type: String,
+      default: function () {
+        return ''
+      },
+    },
+    tooltip: {
+      type: String,
+      default: function () {
+        return ''
+      },
+    },
+    customTitle: {
+      type: Array,
+      default: function () {
+        return []
+      },
+    },
+    // 输入框宽度
+    width: {
+      type: Number,
+      default: function () {
+        return 100
+      },
+    },
+    // 树宽度
+    treeWidth: {
+      type: Number,
+      default: function () {
+        return 200
+      },
+    },
+    // 输入框和选择器同宽
+    dropdownMatchSelectWidth: {
+      type: Boolean,
+      default: function () {
+        return false
+      },
+    },
+    // 替换展示字段
+    replaceFields: {
+      type: Object,
+      default: function () {
+        return {
+          children: 'children',
+          title: 'title',
+          key: 'key',
+          value: 'value',
+        }
+      },
+    },
+    // 是否默认展开所有树节点
+    treeDefaultExpandAll: {
+      type: Boolean,
+      default: function () {
+        return false
+      },
+    },
+    size: {
+      type: String,
+      default: function () {
+        return 'small'
+      },
+    },
+    // 下拉中显示搜索框
+    showSearch: {
+      type: Boolean,
+      default: function () {
+        return true
+      },
+    },
+    // 下拉菜单的样式
+    widthDropdownStyle: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    // 清除按钮
+    allowClear: {
+      type: Boolean,
+      default: function () {
+        return true
+      },
+    },
+    placeholder: {
+      type: String,
+      default: function () {
+        return ''
+      },
+    },
+    rules: {
+      type: Object,
+      default: function () {
+        return null
+      },
+    },
+    formRow: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    row: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    edit: {
+      type: Boolean,
+      default: function () {
+        return false
+      },
+    },
+    field: {
+      type: String,
+    },
+    columns: {
+      // 列集合
+      type: Array,
+      default: () => {
+        return []
+      },
+    },
+    propTableData: {
+      type: Array,
+      default: function () {
+        return []
+      },
+    },
+    linkedField: {
+      type: String,
+      required: true,
+    },
+    linkedTitle: {
+      type: [],
+      default: function () {
+        return []
+      },
+    },
+    method: {
+      type: String,
+      default: function () {
+        return 'post'
+      },
+    },
+    route: Object,
+  },
+  data() {
+    return {
+      treeData: [],
+      currentValue: '',
+      treeDefaultExpandedKeys: [],
+    }
+  },
+  mounted() {
+    this.searchData()
+    if (this.treeData.length) {
+      this.currentValue = this.row[this.linkedField]
+    } else {
+      this.currentValue = this.value
+    }
+  },
+  watch: {
+    treeData(val) {
+      if (this.treeData.length) {
+        this.currentValue = this.row[this.linkedField]
+        this.treeDefaultExpandedKeys = []
+        this.treeDefaultExpandedKeys.push(this.currentValue)
+      } else {
+        this.currentValue = this.value
+      }
+    },
+    edit(value) {
+      // debugger
+      if (value) {
+        if (this.treeData.length) {
+          this.currentValue = this.row[this.linkedField]
+        } else {
+          this.currentValue = this.value
+        }
+      }
+    },
+  },
+  computed: {},
+  methods: {
+    /**
+     * 查询数据
+     */
+    searchData() {
+      let tempExp = {
+        operator: 'or',
+        expressions: [],
+      }
+
+      let postExpression = {
+        field: this.field,
+        expression: tempExp,
+        extendParams: {},
+      }
+      let repeatRowInfo = {
+        field: '',
+        values: [],
+      }
+      //查询之前从外部组件构造其他的条件
+      this.$emit('preSearch', postExpression, repeatRowInfo, this.row)
+      let postData = {
+        begin: 1,
+        size: 0,
+        expression: postExpression.expression,
+        sorts: [],
+        extendParams: postExpression.extendParams,
+      }
+      let tempApi = this.getPostApi(postData)
+      let vm = this
+      vm.gridLoading = true
+      request({
+        url: tempApi,
+        method: this.method,
+        data: postData,
+      })
+        .then((responseData) => {
+          vm.treeData = responseData.content
+          if (this.linkedTitle.length) {
+            XEUtils.eachTree(vm.treeData, (item) => {
+              let title = ''
+              XEUtils.arrayEach(this.linkedTitle, (newTitle) => {
+                title = title + item[newTitle] + '-'
+              })
+              item[this.replaceFields.title] = title.slice(0, -1)
+            })
+          }
+        })
+        .catch((error) => {
+          console.error(error)
+        })
+        .finally(() => {
+          vm.gridLoading = false
+        })
+    },
+    getPostApi(postData) {
+      let tempApi = this.api
+      if (this.api.indexOf('?') > 0) {
+        tempApi = this.api.substring(0, this.api.indexOf('?'))
+        let tempExtenParams = this.api.substring(this.api.indexOf('?') + 1)
+        tempExtenParams = replaceParam(tempExtenParams, this.formRow)
+        let tempSplitParams = tempExtenParams.split('&')
+        for (let i = 0; i < tempSplitParams.length; i++) {
+          let tempSplitValue = tempSplitParams[i].split('=')
+          this.$set(postData.extendParams, tempSplitValue[0], tempSplitValue[1])
+        }
+      }
+      return tempApi
+    },
+    routeLinkClick() {
+      //首先需要判断是否有权限
+      this.$router.pushRoute({
+        name: this.route.name,
+        query: { id: this.row[this.route.field] },
+      })
+    },
+    selectData(value, node) {
+      // this.row[this.linkedField] = value
+      // this.row[this.field] = node.title
+      this.$set(this.row, this.linkedField, value)
+      this.$set(this.row, this.field, node.title)
+      this.$emit('selectChanged', this.row)
+    },
+    filterTreeNode(inputValue,treeNode){
+        if(treeNode.data.props.dataRef.name.indexOf(inputValue)>-1){
+          //存在inputValue则返回true，显示该节点
+          return true;
+        }
+        //不存在inputValue则检查父节点是否包含inputValue
+        let parentId = treeNode.data.props.dataRef.parentId;
+        while(parentId){
+          let parentNode = XEUtils.findTree(this.treeData, p=>p.id===parentId)
+          if(parentNode){
+              if(parentNode.item.name.indexOf(inputValue)>-1){
+                  return true
+              }
+              parentId = parentNode.item.parentId
+          }else{
+            break
+          }
+        }
+        return false
+    },  
+    changeData(value) {
+      if (!value) {
+        this.$set(this.row, this.linkedField, '')
+        this.$set(this.row, this.field, '')
+        this.$emit('selectChanged', this.row)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+// ::v-deep .ant-select-tree-dropdown::-webkit-scrollbar {
+//   width: 5px;
+// }
+// ::v-deep .ant-select-tree-dropdown::-webkit-scrollbar-thumb {
+//   /*滚动条里面小方块*/
+//   border-radius: 10px;
+//   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   background: #e5e5e5;
+// }
+// ::v-deep .ant-select-tree-dropdown::-webkit-scrollbar-track {
+//   /*滚动条里面轨道*/
+//   -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+//   border-radius: 10px;
+//   background: #ffffff;
+// }
+.pulldown-grid {
+  min-width: 600px;
+  width: auto;
+  height: 350px;
+  background-color: #fff;
+  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
+}
+
+.d-grid-control {
+  height: 30px;
+}
+.interceptor-class {
+  padding: 10px;
+  ::v-deep .ant-btn {
+    margin: 10px 10px 0;
+  }
+}
+</style>
+<style lang="less">
+@import '../../styles/default.less';
+</style>