From 7815eca92ca3787d71ffb3b39e85106ebd83cc70 Mon Sep 17 00:00:00 2001
From: x_ying <2438792676@qq.com>
Date: Mon, 4 Jul 2022 14:52:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=A3=E6=A1=88=E7=9B=98=E7=82=B9=20?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=9B=98=E7=82=B9=20=E6=A0=91=E5=BD=A2?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E6=9B=B4=E6=8D=A2=E6=8E=A7=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../archivesCheck/module/addCheck.vue         | 201 ++++++------
 src/views/components/TreeSelect.vue           | 303 ------------------
 2 files changed, 93 insertions(+), 411 deletions(-)
 delete mode 100644 src/views/components/TreeSelect.vue

diff --git a/src/views/archivesManage/archivesCheck/module/addCheck.vue b/src/views/archivesManage/archivesCheck/module/addCheck.vue
index 9bde1c6..3c6d4a8 100644
--- a/src/views/archivesManage/archivesCheck/module/addCheck.vue
+++ b/src/views/archivesManage/archivesCheck/module/addCheck.vue
@@ -3,111 +3,112 @@
     <el-dialog ref="dialogTable" title="新增盘点" :visible.sync="addFormVisible" class="dialog-table">
       <span class="dialog-right-top" />
       <span class="dialog-left-bottom" />
-      <el-form
-        ref="form"
-        :model="checkForm"
-        size="small"
-        label-width="80px"
-      >
-        <el-form-item label="选择区域" prop="selectArea" class="down-select">
-          <tree-select
-            :data="selectArea"
-            :menus-ids="menusIds"
-            :default-props="defaultProps"
-            multiple
-            :node-key="nodeKey"
-            :checked-keys="defaultCheckedKeys"
-            @popoverHide="popoverHide"
-          />
-        </el-form-item>
-        <el-form-item label="选择门类" prop="category" class="down-select">
-          <el-select
-            v-model="categoryValue"
-            style="width: 300px"
-            multiple
-            filterable
-            clearable
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in category"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
+      <div class="setting-dialog">
+        <el-form
+          ref="form"
+          :model="checkForm"
+          size="small"
+          label-width="80px"
+        >
+          <el-form-item label="选择区域" prop="selectArea" class="down-select">
+            <treeselect
+              v-model="selectAreaValue"
+              :options="selectArea"
+              multiple
+              placeholder="请选择"
+              style="width:245px;height:30px"
             />
-          </el-select>
-        </el-form-item>
-        <el-button type="primary" style="margin:0 0 0 10px;height:32px;" @click="handleBuild">生成盘点单</el-button>
-      </el-form>
-      <el-table :data="gridData" style="height:290px">
-        <el-table-column type="index" align="center" label="序号" width="60" />
-        <el-table-column prop="fieldCnName" align="center" label="状态" width="80" />
-        <el-table-column prop="fieldCnName" align="center" label="所属门类" width="100" />
-        <el-table-column prop="fieldCnName" align="center" label="子条目数" width="100" />
-        <el-table-column prop="fieldCnName" align="center" label="全宗号" width="100" />
-        <el-table-column prop="fieldName" align="center" label="档号" width="180" />
-        <el-table-column prop="fieldCnName" align="center" label="部门名称" width="100" />
-        <el-table-column label="题名" align="center" width="180" />
-        <el-table-column label="年度" align="center" width="85" />
-        <el-table-column label="保管期限" align="center" width="120" />
-        <el-table-column label="密级" align="center" width="85" />
-        <el-table-column label="存放位置" align="center" width="150" />
-      </el-table>
-      <div slot="footer" class="dialog-footer">
-        <el-button @click="handleSave">保存</el-button>
+          </el-form-item>
+          <el-form-item label="选择门类" prop="category" class="down-select">
+            <el-select
+              v-model="categoryValue"
+              style="width: 245px"
+              multiple
+              filterable
+              clearable
+              placeholder="请选择"
+            >
+              <el-option
+                v-for="item in category"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-button type="primary" style="margin:0 0 0 10px;height:32px;" @click="handleBuild">生成盘点单</el-button>
+        </el-form>
+        <el-table :data="gridData" style="height:341px">
+          <el-table-column type="index" align="center" label="序号" width="60" />
+          <el-table-column prop="fieldCnName" align="center" label="状态" width="80" />
+          <el-table-column prop="fieldCnName" align="center" label="所属门类" width="100" />
+          <el-table-column prop="fieldCnName" align="center" label="子条目数" width="100" />
+          <el-table-column prop="fieldCnName" align="center" label="全宗号" width="100" />
+          <el-table-column prop="fieldName" align="center" label="档号" width="180" />
+          <el-table-column prop="fieldCnName" align="center" label="部门名称" width="100" />
+          <el-table-column label="题名" align="center" width="180" />
+          <el-table-column label="年度" align="center" width="85" />
+          <el-table-column label="保管期限" align="center" width="120" />
+          <el-table-column label="密级" align="center" width="85" />
+          <el-table-column label="存放位置" align="center" width="150" />
+        </el-table>
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="handleSave">保存</el-button>
+        </div>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import TreeSelect from '@/views/components/TreeSelect.vue'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 var menus = [
   {
-    'menuId': 1,
-    'menuName': '父区域',
-    'childrenList': [
+    id: 1,
+    label: '父区域',
+    children: [
       {
-        'menuId': 100,
-        'menuName': '子区域1',
-        'childrenList': [
+        id: 100,
+        label: '子区域1',
+        children: [
           {
-            'menuId': 1000,
-            'menuName': '设备1.1'
+            id: 1000,
+            label: '设备1.1'
           },
           {
-            'menuId': 1001,
-            'menuName': '设备1.2'
+            id: 1001,
+            label: '设备1.2'
           },
           {
-            'menuId': 1002,
-            'menuName': '设备1.3'
+            id: 1002,
+            label: '设备1.3'
           },
           {
-            'menuId': 1003,
-            'menuName': '设备1.4'
+            id: 1003,
+            label: '设备1.4'
           }
         ]
       },
       {
-        'menuId': 101,
-        'menuName': '子区域2',
-        'childrenList': [
+        id: 101,
+        label: '子区域2',
+        children: [
           {
-            'menuId': 1006,
-            'menuName': '设备2.1'
+            id: 1006,
+            label: '设备2.1'
           },
           {
-            'menuId': 1007,
-            'menuName': '设备2.2'
+            id: 1007,
+            label: '设备2.2'
           },
           {
-            'menuId': 1008,
-            'menuName': '设备2.3'
+            id: 1008,
+            label: '设备2.3'
           },
           {
-            'menuId': 1011,
-            'menuName': '设备2.4'
+            id: 1011,
+            label: '设备2.4'
           }
         ]
       }
@@ -115,7 +116,7 @@ var menus = [
   }
 ]
 export default {
-  components: { TreeSelect },
+  components: { Treeselect },
   data() {
     return {
       menusIds: [],
@@ -124,11 +125,8 @@ export default {
       addFormVisible: false,
       selectAreaValue: [],
       selectArea: menus,
-      defaultProps: {
-        children: 'childrenList',
-        label: 'menuName'
-      },
-      nodeKey: 'menuId',
+      defaultProps: { children: 'children', label: 'label' },
+      nodeKey: 'id',
       defaultCheckedKeys: [],
       categoryValue: ['选项1'],
       category: [
@@ -139,37 +137,13 @@ export default {
       ]
     }
   },
-  // 设置树形选择器默认值,暂留
-  // created() {
-  //   this.defaultCheckedKeys = [1000]
-  // },
-  // mounted() {
-  //   this.defaultCheckedKeys = [1001]
-  // },
-  created() {
-    this.HandlemenuId()
-  },
+
   methods: {
     handleBuild() {
       console.log(this.$refs.dialogTable.$refs)
     },
     handleSave() {
       this.addFormVisible = false
-    },
-    popoverHide(checkedIds, checkedData) {
-      console.log(checkedIds)
-      console.log(checkedData)
-    },
-    HandlemenuId() {
-      menus.forEach(item => {
-        if (item.childrenList && item.childrenList) {
-          item.childrenList.forEach(item2 => {
-            item2.childrenList.forEach(item3 => {
-              this.menusIds.push(item3.menuId)
-            })
-          })
-        }
-      })
     }
 
   }
@@ -188,4 +162,15 @@ export default {
     position: absolute;
     right: -155px;
 }
+
+::v-deep .el-tag.el-tag--info{
+  height: 26px;
+  line-height: 26px;
+  background-color: #13439E;
+  border: none;
+  color: #fff;
+}
+::v-deep .el-tag.el-tag--info .el-tag__close{
+  background-color: #fff;
+}
 </style>
diff --git a/src/views/components/TreeSelect.vue b/src/views/components/TreeSelect.vue
deleted file mode 100644
index c94efd9..0000000
--- a/src/views/components/TreeSelect.vue
+++ /dev/null
@@ -1,303 +0,0 @@
-<template>
-  <div>
-    <div v-show="isShowSelect" class="mask" @click="isShowSelect = !isShowSelect" />
-    <el-popover
-      v-model="isShowSelect"
-      placement="bottom-start"
-      :width="width"
-      trigger="manual"
-      @hide="popoverHide"
-    >
-      <el-tree
-        ref="tree"
-        class="common-tree"
-        :style="style"
-        :data="data"
-        :props="defaultProps"
-        :show-checkbox="multiple"
-        :node-key="nodeKey"
-        :check-strictly="checkStrictly"
-        default-expand-all
-        :expand-on-click-node="false"
-        :check-on-click-node="multiple"
-        :highlight-current="true"
-        @node-click="handleNodeClick"
-        @check-change="handleCheckChange"
-      />
-      <el-select
-        slot="reference"
-        ref="select"
-        v-model="selectedData"
-        :style="selectStyle"
-        :size="size"
-        :multiple="multiple"
-        :clearable="clearable"
-        :collapse-tags="collapseTags"
-        class="tree-select"
-        @click.native="isShowSelect = !isShowSelect"
-        @remove-tag="removeSelectedNodes"
-        @clear="removeSelectedNode"
-        @change="changeSelectedNodes"
-      >
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
-      </el-select>
-    </el-popover>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'TreeSelect',
-  props: {
-    // 树结构数据
-    data: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    defaultProps: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    // 没有子节点的id数组
-    menusIds: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    // 配置是否可多选
-    multiple: {
-      type: Boolean,
-      default() {
-        return false
-      }
-    },
-    // 配置是否可清空选择
-    clearable: {
-      type: Boolean,
-      default() {
-        return false
-      }
-    },
-    // 配置多选时是否将选中值按文字的形式展示
-    collapseTags: {
-      type: Boolean,
-      default() {
-        return false
-      }
-    },
-    nodeKey: {
-      type: String,
-      default() {
-        return 'id'
-      }
-    },
-    // 显示复选框情况下，是否严格遵循父子不互相关联
-    checkStrictly: {
-      type: Boolean,
-      default() {
-        return false
-      }
-    },
-    // 默认选中的节点key数组
-    checkedKeys: {
-      type: Array,
-      default() {
-        return []
-      }
-    },
-    size: {
-      type: String,
-      default() {
-        return 'small'
-      }
-    },
-    width: {
-      type: Number,
-      default() {
-        return 250
-      }
-    },
-    height: {
-      type: Number,
-      default() {
-        return 300
-      }
-    }
-  },
-  data() {
-    return {
-      isShowSelect: false, // 是否显示树状选择器
-      options: [],
-      selectedData: [], // 选中的节点
-      style: 'width:' + this.width + 'px;' + 'height:' + this.height + 'px;',
-      selectStyle: 'width:' + (this.width + 24) + 'px;',
-      checkedIds: [],
-      checkedData: []
-    }
-  },
-  watch: {
-    isShowSelect(val) {
-      // 隐藏select自带的下拉框
-      this.$refs.select.blur()
-    },
-    checkedKeys(val) {
-      if (!val) return
-      this.checkedKeys = val
-      this.initCheckedData()
-    }
-  },
-  mounted() {
-    this.initCheckedData()
-  },
-  methods: {
-    // 单选时点击tree节点，设置select选项
-    setSelectOption(node) {
-      const tmpMap = {}
-      tmpMap.value = node.key
-      tmpMap.label = node.label
-      this.options = []
-      this.options.push(tmpMap)
-      this.selectedData = node.key
-    },
-    // 单选，选中传进来的节点
-    checkSelectedNode(checkedKeys) {
-      var item = checkedKeys[0]
-      this.$refs.tree.setCurrentKey(item)
-      var node = this.$refs.tree.getNode(item)
-      this.setSelectOption(node)
-    },
-    // 多选，勾选上传进来的节点
-    checkSelectedNodes(checkedKeys) {
-      this.$refs.tree.setCheckedKeys(checkedKeys)
-    },
-    // 单选，清空选中
-    clearSelectedNode() {
-      this.selectedData = ''
-      this.$refs.tree.setCurrentKey(null)
-    },
-    // 多选，清空所有勾选
-    clearSelectedNodes() {
-      var checkedKeys = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据
-      for (let i = 0; i < checkedKeys.length; i++) {
-        this.$refs.tree.setChecked(checkedKeys[i], false)
-      }
-    },
-    initCheckedData() {
-      if (this.multiple) {
-        // 多选
-        if (this.checkedKeys.length > 0) {
-          this.checkSelectedNodes(this.checkedKeys)
-        } else {
-          this.clearSelectedNodes()
-        }
-      } else {
-        // 单选
-        if (this.checkedKeys.length > 0) {
-          this.checkSelectedNode(this.checkedKeys)
-        } else {
-          this.clearSelectedNode()
-        }
-      }
-    },
-    popoverHide() {
-      if (this.multiple) {
-        this.checkedIds = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据
-        this.checkedData = this.$refs.tree.getCheckedNodes() // 所有被选中的节点所组成的数组数据
-      } else {
-        this.checkedIds = this.$refs.tree.getCurrentKey()
-        this.checkedData = this.$refs.tree.getCurrentNode()
-      }
-      this.$emit('popoverHide', this.checkedIds, this.checkedData)
-    },
-    // 单选，节点被点击时的回调,返回被点击的节点数据
-    handleNodeClick(data, node) {
-      console.log(node, 'node')
-      if (!this.multiple) {
-        this.setSelectOption(node)
-        this.isShowSelect = !this.isShowSelect
-        this.$emit('change', this.selectedData)
-      }
-    },
-    // 多选，节点勾选状态发生变化时的回调
-    handleCheckChange() {
-      var checkedKeys = this.$refs.tree.getCheckedKeys() // 所有被选中的节点的 key 所组成的数组数据
-
-      this.options = checkedKeys.map((item) => {
-        var node = this.$refs.tree.getNode(item) // 所有被选中的节点对应的node
-        const tmpMap = {}
-        tmpMap.value = node.key
-        tmpMap.label = node.label
-        return tmpMap
-      })
-      // this.selectedData = this.options.map((item) => {
-      //   return item.value
-      // })
-      this.selectedData = this.menusIds.filter(item => this.options.some(v => v.value === item))
-      this.$emit('change', this.selectedData)
-    },
-    // 多选,删除任一select选项的回调
-    removeSelectedNodes(val) {
-      this.$refs.tree.setChecked(val, false)
-      var node = this.$refs.tree.getNode(val)
-      if (!this.checkStrictly && node.childNodes.length > 0) {
-        this.treeToList(node).map(item => {
-          if (item.childNodes.length <= 0) {
-            this.$refs.tree.setChecked(item, false)
-          }
-        })
-        this.handleCheckChange()
-      }
-      this.$emit('change', this.selectedData)
-    },
-    treeToList(tree) {
-      var queen = []
-      var out = []
-      queen = queen.concat(tree)
-      while (queen.length) {
-        var first = queen.shift()
-        if (first.childNodes) {
-          queen = queen.concat(first.childNodes)
-        }
-        out.push(first)
-      }
-      return out
-    },
-    // 单选,清空select输入框的回调
-    removeSelectedNode() {
-      this.clearSelectedNode()
-      this.$emit('change', this.selectedData)
-    },
-    // 选中的select选项改变的回调
-    changeSelectedNodes(selectedData) {
-      // 多选,清空select输入框时，清除树勾选
-      if (this.multiple && selectedData.length <= 0) {
-        this.clearSelectedNodes()
-      }
-      this.$emit('change', this.selectedData)
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .mask{
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    z-index: 11;
-  }
-  .common-tree{
-    overflow: auto;
-  }
-  .tree-select{
-    z-index: 111;
-  }
-</style>