[update] 修改树形弹框改成树

2024-08-02 15:16:29 +08:00
parent 1f7fce5ddd
commit f6e647a3ae
3 changed files with 491 additions and 20 deletions
@@ -133,24 +133,24 @@
                               :label-in-value="false"
                               :placeholder="$t('pleaseSelect')+item.dbFieldTxt" />
                <!--16、树形弹框选择-->
-                <tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value || item.fieldShowType === FieldType.TREE_MODAL_SELECT_SEARCH_DIFF.value"
-                                :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
-                                v-model="formInline[item.dbFieldName]"
-                                @nameChange="treeSelectNameChange"
-                                :filedName="item.dbFieldName"
-                                type="checkbox"
-                                :options-href="item.fieldHref"
-                                :nameStr="formInline[item.dbFieldName + '_dictText']"
-                                :dict-id="item.dictId"
-                                :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />
-<!--                <tree-data-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value || item.fieldShowType === FieldType.TREE_MODAL_SELECT_SEARCH_DIFF.value"-->
-<!--                                     :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
-<!--                                     v-model="formInline[item.dbFieldName]"-->
-<!--                                     :fieldName="item.dbFieldName"-->
-<!--                                     :nameStr="formInline[item.dbFieldName + '_dictText']"-->
-<!--                                     @nameChange="treeDataSelectNameChange"-->
-<!--                                     :optionsHref="item.fieldHref"-->
-<!--                                     :dict-id="item.dictId"/>-->
+<!--                <tree-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value || item.fieldShowType === FieldType.TREE_MODAL_SELECT_SEARCH_DIFF.value"-->
+<!--                                :placeholder="$t('pleaseSelect')+item.dbFieldTxt"-->
+<!--                                v-model="formInline[item.dbFieldName]"-->
+<!--                                @nameChange="treeSelectNameChange"-->
+<!--                                :filedName="item.dbFieldName"-->
+<!--                                type="checkbox"-->
+<!--                                :options-href="item.fieldHref"-->
+<!--                                :nameStr="formInline[item.dbFieldName + '_dictText']"-->
+<!--                                :dict-id="item.dictId"-->
+<!--                                :disabled="disabled || disabledFieldList.includes(item.dbFieldName)" />-->
+                <tree-data-selection v-else-if="item.fieldShowType === FieldType.TREE_MODAL_SELECT.value || item.fieldShowType === FieldType.TREE_MODAL_SELECT_SEARCH_DIFF.value"
+                                     :placeholder="$t('pleaseSelect')+item.dbFieldTxt"
+                                     v-model="formInline[item.dbFieldName]"
+                                     :fieldName="item.dbFieldName"
+                                     :nameStr="formInline[item.dbFieldName + '_dictText']"
+                                     @nameChange="treeDataSelectNameChange"
+                                     :optionsHref="item.fieldHref"
+                                     :dict-id="item.dictId"/>
              </a-form-model-item>
            </div>
          </template>
@@ -182,12 +182,12 @@ import TreeSelection from '../selection/TreeSelection'
 import STreeSelect from '../STreeSelect'
 import { isHasPermission } from '../../utils/hasPermission'
 import { mapGetters } from 'vuex'
-// import TreeDataSelection from '../selection/TreeDataSelection'
+import TreeDataSelection from '../selection/TreeDataSelection'

 export default {
  name: 'AddForm',
  components: {
-    // TreeDataSelection,
+    TreeDataSelection,
    UserSelection,
    JMultipleDatePicker,
    StandardSelection,
@@ -0,0 +1,320 @@
+<template>
+  <j-modal
+    :title="$t('userSelect.select')"
+    :width="width"
+    :visible="visible"
+    switchFullscreen
+    :maskClosable="false"
+    :confirmLoading="confirmLoading"
+    @ok="handleOk"
+    @cancel="handleCancel">
+
+    <a-spin :spinning="confirmLoading">
+      <a-input-search style="margin-bottom: 1px" :placeholder="$t('pleaseEnter') + $t('treeSelection.primaryNodeName')" @search="onSearch" />
+      <a-tree
+        ref="tree"
+        :checkStrictly="checkStrictly"
+        :checkable="checkable"
+        :replaceFields="replaceFields"
+        :loadedKeys="loadedKeys"
+        :class="treeScreenClass"
+        :treeData="treeData"
+        :autoExpandParent="autoExpandParent"
+        @check="onCheck"
+        @select="onSelect"
+        @expand="onExpand"
+        @loadData="loadData"
+        :expandedKeys="expandedKeys"
+        :checkedKeys="checkedKeys">
+
+        <template slot="title" slot-scope="{name}">
+          <span v-if="searchValue && name.indexOf(searchValue) > -1">
+            <span style="color: #f50">{{ name }}</span>
+          </span>
+          <span v-else>{{name}}</span>
+        </template>
+      </a-tree>
+    </a-spin>
+  </j-modal>
+</template>
+
+<script>
+import { getAction, postAction } from '../../api/manage'
+
+export default {
+  name: 'TreeDataSelectModal',
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    checkable: { // 是否多选
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 是否校验必选
+    checkRequired: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 获取数据的接口
+    optionsHref: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // 自定义取值字段
+    replaceFields: {
+      type: Object,
+      required: false,
+      default: () => {
+        return { children: 'childPartNameList', title: 'name', key: 'id' }
+      }
+    },
+    // 标签库的限制，只能选第三级
+    isTagLibraryRestriction: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 查询传的字段名
+    searchFieldName: {
+      type: String,
+      required: false,
+      default: 'name'
+    },
+    // 存储字段 [key field]
+    storeField: {
+      type: String,
+      default: 'id',
+      required: false
+    },
+    // 显示字段 [label field]
+    textField: {
+      type: String,
+      default: 'name',
+      required: false
+    }
+  },
+  computed: {
+    treeScreenClass () {
+      return {
+        'my-dept-select-tree': true,
+        fullscreen: this.fullscreen
+      }
+    }
+  },
+  watch: {
+    // 是否只能选第三级
+    isTagLibraryRestriction (val) {
+      if (val) {
+        this.setOnlySelectThreeLevel(this.treeData)
+      }
+    },
+    value (val) {
+      if (val) {
+        this.checkedKeys = val.split(',')
+      }
+    }
+  },
+  data () {
+    return {
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      checkStrictly: true,
+      autoExpandParent: false, // 是否自动展开父节点
+      treeData: [],
+      expandedKeys: [],
+      checkedKeys: [],
+      checkedRows: [],
+      loadedKeys: [], // 已经加载的节点
+      searchValue: '' // 查询框内容
+    }
+  },
+  methods: {
+    show () {
+      this.visible = true
+      this.checkedRows = []
+      this.checkedKeys = []
+      this.searchValue = ''
+      this.getTreeData()
+    },
+    onCheck (checkedKeys, info) {
+      console.log('----------onCheck', checkedKeys, info)
+      if (!this.checkable) {
+        // // 不是多选
+        // const arr = checkedKeys.checked.filter(item => !this.checkedKeys.includes(item))
+        // this.checkedKeys = [...arr]
+        // this.checkedRows = (this.checkedKeys.length === 0) ? [] : [info.node.dataRef]
+      } else {
+        if (this.checkStrictly) {
+          this.checkedKeys = checkedKeys.checked
+        } else {
+          this.checkedKeys = checkedKeys
+        }
+        this.checkedRows = this.getCheckedRows(this.checkedKeys)
+      }
+    },
+    onSelect (selectedKeys, info) {
+      // 取消关联的情况下才走onSelect的逻辑
+      if (this.checkStrictly) {
+        const keys = []
+        keys.push(selectedKeys[0])
+        if (!this.checkedKeys || this.checkedKeys.length === 0 || !this.checkable) {
+          this.checkedKeys = [...keys]
+          this.checkedRows = [info.node.dataRef]
+        } else {
+          const currKey = info.node.dataRef.key
+          if (this.checkedKeys.indexOf(currKey) >= 0) {
+            this.checkedKeys = this.checkedKeys.filter(item => item !== currKey)
+          } else {
+            this.checkedKeys.push(...keys)
+          }
+        }
+        this.checkedRows = this.getCheckedRows(this.checkedKeys)
+      }
+    },
+    onExpand (expandedKeys) {
+      this.expandedKeys = expandedKeys
+    },
+    // 异步加载
+    loadData (node) {
+      if (node.dataRef.children) {
+        return
+      }
+      this.confirmLoading = true
+      const params = {}
+      // 查询条件的名称
+      params[this.searchFieldName] = this.searchValue
+      // 父节点id
+      params.pid = node.dataRef.id
+      getAction(this.optionsHref, params).then(res => {
+        if (res.success) {
+          node.childPartNameList = res.result.record
+          this.loadedKeys.push(node.id)
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    },
+    handleCancel () {
+      this.visible = false
+    },
+    close () {
+      this.visible = false
+      this.checkedKeys = []
+      this.expandedKeys = []
+      this.treeData = []
+      this.searchValue = ''
+    },
+    onSearch (value) {
+      this.searchValue = value
+      this.autoExpandParent = true
+      this.getTreeData()
+    },
+    // 设置树只能选第三级
+    setOnlySelectThreeLevel (treeData) {
+      for (const item of treeData) {
+        item.disabled = item.level + '' !== '3'
+        item.disableCheckbox = item.level + '' !== '3'
+        if (item.childPartNameList && item.childPartNameList.length > 0) {
+          this.setOnlySelectThreeLevel(item.childPartNameList)
+        }
+      }
+    },
+    getTreeData () {
+      this.confirmLoading = true
+      const params = {}
+      // 查询条件的名称
+      params[this.searchFieldName] = this.searchValue
+      // 展开的节点
+      // params.expandedKeys = this.expandedKeys.join(',')
+      getAction(this.optionsHref, params).then(res => {
+        if (res.success) {
+          this.treeData = res.result.records || res.result
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    },
+    handleOk () {
+      if (this.checkRequired && (!this.checkedKeys || this.checkedKeys.length === 0)) {
+        this.$message.warning(this.$t('selectLeastOne'))
+        return
+      }
+      if (!this.checkedKeys || this.checkedKeys.length === 0) {
+        this.$emit('ok', '')
+      } else {
+        const checkRow = this.getCheckedRows(this.checkedKeys)
+        const keyStr = this.checkedKeys.join(',')
+        this.$emit('ok', checkRow, keyStr)
+      }
+      this.close()
+    },
+    // 根据 checkedKeys 获取 rows
+    getCheckedRows (checkedKeys) {
+      const forChildren = (list, key) => {
+        for (const item of list) {
+          if (item[this.storeField] === key) {
+            return item
+          }
+          if (item[this.replaceFields.children] instanceof Array) {
+            const value = forChildren(item[this.replaceFields.children], key)
+            if (value != null) {
+              return value
+            }
+          }
+        }
+        return null
+      }
+
+      const rows = []
+      for (const key of checkedKeys) {
+        const row = forChildren(this.treeData, key)
+        if (row != null) {
+          rows.push(row)
+        }
+      }
+      return rows
+    },
+    getSelectedList (codes) {
+      const params = {
+        selectNodeCodes: codes
+      }
+      let url
+      // 涉及系统/部件
+      if (this.optionsHref === '/laws/standard/partName/') {
+        url = '/laws/standard/partName/echo'
+      } else if (this.optionsHref === '/laws/lawsLabelDatabase/queryTreeList') { // 标签库
+        url = '/laws/lawsLabelDatabase/queryByCodes'
+      }
+      if (!url) {
+        return
+      }
+      postAction(url, params).then(res => {
+        if (res.success) {
+          const nameArr = (res.result || []).map(item => item[this.text])
+          // 抛出名称
+          this.$emit('initComp', nameArr.join(','))
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.my-dept-select-tree{
+  height:350px;
+
+  &.fullscreen{
+    height: calc(100vh - 250px);
+  }
+  overflow-y: scroll;
+}
+
+</style>
@@ -0,0 +1,151 @@
+<template>
+  <div class="components-input-demo-presuffix">
+    <a-input @click="openModal" :placeholder="$t('pleaseSelect')" v-model="nameStr" readOnly :disabled="disabled">
+      <a-icon v-if="storeVals" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
+    </a-input>
+
+    <tree-data-select-modal
+      ref="selectModal"
+      :checkable="checkable"
+      :value="value"
+      :storeField="storeField"
+      :textField="textField"
+      :options-href="optionsHref"
+      @ok="handleOK"/>
+  </div>
+</template>
+
+<script>
+import TreeDataSelectModal from './TreeDataSelectModal'
+import { underLinetoHump } from '@/components/_util/StringUtil'
+
+export default {
+  name: 'TreeDataSelection',
+  components: { TreeDataSelectModal },
+  props: {
+    checkable: { // 是否多选
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    value: {
+      type: String,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 自定义返回字段，默认返回 id
+    customReturnField: {
+      type: String,
+      default: ''
+    },
+    // 获取数据的接口
+    optionsHref: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // 是否返回选中的对象
+    backObj: {
+      type: Boolean,
+      default: false,
+      required: false
+    },
+    // 存储字段 [key field]
+    storeField: {
+      type: String,
+      default: 'id',
+      required: false
+    },
+    // 显示字段 [label field]
+    textField: {
+      type: String,
+      default: 'name',
+      required: false
+    },
+    nameStr: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    fieldName: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      visible: false,
+      confirmLoading: false,
+      storeVals: '', // [key values]
+      textVals: '' // [label values]
+    }
+  },
+  mounted () {
+    this.storeVals = this.value
+  },
+  watch: {
+    value (val) {
+      this.storeVals = val
+    }
+  },
+  methods: {
+    // 返回选中的部门信息
+    backObjInfo () {
+      if (this.backObj === true) {
+        if (this.storeVals && this.storeVals.length > 0) {
+          const arr1 = this.storeVals.split(',')
+          const arr2 = this.textVals.split(',')
+          const info = []
+          for (let i = 0; i < arr1.length; i++) {
+            info.push({
+              value: arr1[i],
+              text: arr2[i]
+            })
+          }
+          this.$emit('back', info)
+        }
+      }
+    },
+    openModal () {
+      this.$refs.selectModal.show()
+    },
+    handleOK (rows) {
+      if (!rows && rows.length <= 0) {
+        this.textVals = ''
+        this.storeVals = ''
+      } else {
+        const arr1 = []
+        const arr2 = []
+        for (const dep of rows) {
+          arr1.push(dep[this.storeField])
+          arr2.push(dep[this.textField])
+        }
+        this.storeVals = arr1.join(',')
+        this.textVals = arr2.join(',')
+      }
+      this.$emit('change', this.storeVals)
+      this.$emit('nameChange', this.textVals, this.fieldName)
+      this.backObjInfo()
+    },
+    handleEmpty () {
+      if (this.disabled) {
+        return
+      }
+      this.handleOK('')
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  }
+}
+</script>
+
+<style scoped>
+
+</style>