档案盒管理修改

src/views/archivesManage/archivesCheck/module/addCheck.vue

@@ -11,21 +11,39 @@
           label-width="80px"
           :rules="rules"
         >
-          <el-form-item label="选择区域" prop="selectArea" class="down-select" style="margin-right:20px">
+          <el-form-item label="选择区域" prop="selectArea" class="down-select" style="margin-right:10px">
             <treeselect
               v-model="selectAreaValue"
               :options="selectArea"
               multiple
               placeholder="请选择"
-              style="width:280px;height:30px"
+              style="width:200px;height:30px"
               :limit="1"
               :limit-text="count => `+${count}`"
             />
           </el-form-item>
-          <el-form-item label="选择门类" prop="category" class="down-select">
-            <el-select
+          <!-- @select="treeSelectChange"
+              @deselect="treeSelectDeselect"
+              @search-change="treeSelectSearch"
+              @open="treeSelectOpen"
+              @close="treeSelectClose" -->
+          <el-form-item label="选择门类" prop="categoryValue" class="down-select" style="margin-right:10px">
+            <treeselect
+              ref="treeselect"
+              v-model="categoryValue"
+              multiple
+              placeholder="请选择"
+              :options="category"
+              style="width: 220px;"
+              :normalizer="normalizer"
+              :default-expand-level="2"
+              :limit="1"
+              :limit-text="count => `+${count}`"
+              @input="treeSelectInput"
+            />
+            <!-- <el-select
               v-model="categoryValue"
-              style="width: 280px;height:30px"
+              style="width: 200px;height:30px"
               multiple
               filterable
               clearable
@@ -39,6 +57,25 @@
                 :label="item.label"
                 :value="item.value"
               />
+            </el-select> -->
+          </el-form-item>
+          <el-form-item label="选择年度" prop="years" class="down-select">
+            <!-- @change="selectChange" -->
+            <el-select
+              v-model="years"
+              style="width: 140px;height:30px"
+              multiple
+              filterable
+              clearable
+              placeholder="请选择"
+              :collapse-tags="showTags"
+            >
+              <el-option
+                v-for="item in yearsOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
             </el-select>
           </el-form-item>
           <el-button type="primary" size="mini" style="margin:0 0 0 20px;height:30px" @click="handleBuild">生成盘点单</el-button>
@@ -119,6 +156,13 @@ export default {
       allCategory: [],
       category: [],
       showTags: true,
+      years: null,
+      yearsOptions: [
+        {
+          value: '2023',
+          label: '2023'
+        }
+      ],
       page: {
         total: 0,
         size: 10,
@@ -132,7 +176,8 @@ export default {
       },
       rules: {
         selectArea: [{ required: true, trigger: 'blur' }],
-        category: [{ required: true, trigger: 'blur' }]
+        categoryValue: [{ required: true, trigger: 'blur' }],
+        years: [{ required: true, trigger: 'blur' }]
       }
     }
   },
@@ -174,19 +219,58 @@ export default {
         })
       })
     },
+    filterData(data) {
+      return data.filter(node => {
+        if (node.children && node.children.length > 0) {
+          node.children = this.filterData(node.children) // 递归处理子节点
+        }
+        return node.isType !== 4 // 过滤掉isType为3的节点
+      })
+    },
     getCateMenu() {
       getCategoryTree().then(res => {
-        this.category = res[0].children
-        this.category.forEach(item => {
-          item.value = item.id
-          item.label = item.cnName
-        })
-        this.category.unshift({ value: 0, label: '全选' })
-        this.allCategory = this.category.map(item => { return item.value })
-        this.categoryValue = JSON.parse(JSON.stringify(this.allCategory))
-        this.oldCategory = JSON.parse(JSON.stringify(this.allCategory))
+        this.category = this.filterData(res)
+        this.category[0].cnName = '全部'
+        // this.category = res[0].children
+        // this.category.forEach(item => {
+        //   item.value = item.id
+        //   item.label = item.cnName
+        // })
+        // this.category.unshift({ value: 0, label: '全选' })
+        // this.allCategory = this.category.map(item => { return item.value })
+        // this.categoryValue = JSON.parse(JSON.stringify(this.allCategory))
+        // this.oldCategory = JSON.parse(JSON.stringify(this.allCategory))
       })
     },
+    // 选中触发（第一次回显的时候会触发，清除值的时候会触发, value值为undefined） input事件用于v-model双向绑定组件更新父组件值
+    treeSelectInput(value, instanceId) {
+      console.log(value, 'input事件')
+      console.log('this.categoryValue', this.categoryValue)
+      console.log(this.value, 'this.value -- input') // 这个不需要 延迟
+    },
+    // 选中触发（清除值的时候不会触发）
+    // treeSelectChange(raw, instanceId) {
+    //   console.log(raw, '当前的对象')
+    //   setTimeout(() => { // 如果用到this.value 需要setTimeout延迟一下拿到最新的值
+    //     console.log(this.value, 'this.value -- select')
+    //   })
+    // },
+    // 移除选项时触发 当设置multiple为true时生效  raw为当前移除的对象
+    // treeSelectDeselect(raw, instanceId) {
+    //   console.log(raw, 'deselect-->>')
+    // },
+    // 搜索
+    // treeSelectSearch(searchQuery, instanceId) {
+    //   console.log(searchQuery, '当前搜索的值')
+    // },
+    // 展开触发
+    // treeSelectOpen(instanceId) {
+    //   console.log('展开了')
+    // },
+    // 关闭触发
+    // treeSelectClose(value, instanceId) {
+    //   console.log(value, '当前的value值')
+    // },
     // 生成盘点单
     handleBuild() {
       if (this.selectAreaValue.length > 0 && this.categoryValue.length > 0) {
@@ -306,6 +390,16 @@ export default {
       this.getTreeMenu()
       this.getCateMenu()
       this.tableData = []
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.cnName,
+        children: node.children
+      }
     }
 
   }
@@ -320,7 +414,7 @@ export default {
   padding-left: 12px;
 }
 ::v-deep .el-dialog{
-  width: 950px;
+  width: 1000px;
   // height: 520px;
 }
 ::v-deep .el-dialog .el-dialog__header .el-dialog__close::before{