批量组卷

src/views/collectReorganizi/batchPaper/index.vue

@@ -0,0 +1,335 @@
+<template>
+  <div class="app-container">
+    <div class="collect-paper-header">
+      <div class="paper-step-item paper-step1">
+        <i />
+        <p>选择组卷条件</p>
+      </div>
+      <div class="paper-step-dot dot-active" />
+      <div class="paper-step-item paper-step2 paper-step2-active">
+        <i />
+        <p>确认组卷条目</p>
+      </div>
+      <div class="paper-step-dot" />
+      <div class="paper-step-item paper-step3">
+        <i />
+        <p>补充案卷数据</p>
+      </div>
+    </div>
+    <div class="collect-paper-filter">
+      <div class="collect-paper-form">
+        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="年份" prop="years">
+                <el-select v-model="form.years" placeholder="请选择" style="width: 110px;">
+                  <el-option
+                    v-for="item in yearsOptions"
+                    :key="item"
+                    :label="item"
+                    :value="item"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="月份" prop="month">
+                <el-select v-model="form.month" placeholder="请选择" style="width: 110px;">
+                  <el-option
+                    v-for="item in monthOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-form-item label="全宗" prop="fonds.id">
+            <el-select v-model="form.fonds.id" placeholder="请选择" style="width: 320px;" @click.native="lastValue = form.fonds.id" @change="changeFondsValue($event)">
+              <el-option
+                v-for="(item,index) in fondsOptions"
+                :key="index"
+                :label="item.fondsName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="档案门类" prop="categoryId">
+            <treeselect
+              v-model="form.categoryId"
+              :options="categoryDatas"
+              placeholder="请选择"
+              flat
+              :multiple="false"
+              :normalizer="normalizer"
+              @select="selectCategoryTree"
+            />
+          </el-form-item>
+          <el-form-item label="档案分类" prop="archivesClassId">
+            <treeselect
+              v-model="form.archivesClassId"
+              :options="classifyOptions"
+              :normalizer="classifyNormalizer"
+              placeholder="请选择"
+              no-options-text="暂无数据"
+            />
+          </el-form-item>
+          <el-button class="next-btn" type="primary">下一步</el-button>
+        </el-form>
+      </div>
+      <div class="collect-paper-list">
+        <div class="collect-no-data">选择组卷条件后自动获取数据</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { FetchFondsAll } from '@/api/system/fonds'
+import { FetchCategoryMenu } from '@/api/system/category/category'
+import { FetchArchivesClassTree } from '@/api/system/archivesClass'
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
+export default {
+  name: 'BatchPaper',
+  components: { Treeselect },
+  data() {
+    return {
+      form: {
+        years: null,
+        month: null,
+        fonds: { id: null },
+        categoryId: null,
+        archivesClassId: null
+      },
+      yearsOptions: [],
+      monthOptions: [
+        { label: '一月', value: 1 },
+        { label: '二月', value: 2 },
+        { label: '三月', value: 3 },
+        { label: '四月', value: 4 },
+        { label: '五月', value: 5 },
+        { label: '六月', value: 6 },
+        { label: '七月', value: 7 },
+        { label: '八月', value: 8 },
+        { label: '九月', value: 9 },
+        { label: '十月', value: 10 },
+        { label: '十一月', value: 11 },
+        { label: '十二月', value: 12 }
+      ],
+      fondsOptions: [],
+      lastValue: '',
+      categoryDatas: [],
+      classifyOptions: [],
+      rules: {
+        years: [{ required: true, message: '请选择年份', trigger: 'change' }],
+        month: [{ required: true, message: '请选择月份', trigger: 'change' }],
+        'fonds.id': [{ required: true, message: '请选择全宗', trigger: 'change' }],
+        categoryId: [{ required: true, message: '请选择档案门类', trigger: 'change' }]
+      }
+    }
+  },
+  computed: {
+  },
+  mounted() {
+    this.generateYears()
+    this.getFondsDatas()
+    this.getCategoryDataTree()
+  },
+  methods: {
+    generateYears() {
+      const currentYear = new Date().getFullYear()
+      for (let i = 0; i < 11; i++) {
+        this.yearsOptions.push(currentYear - i)
+      }
+    },
+    getFondsDatas() {
+      const parent = {}
+      parent.id = 0
+      parent.fondsName = '全宗选择'
+      FetchFondsAll().then(res => {
+        // res.forEach(item => {
+        //   item.children = item.depts
+        // })
+        // parent.children = res
+        // this.fondsDatas.push(parent)
+        this.fondsOptions = res
+        // this.$nextTick(() => {
+        //   Vue.set(this.defaultExpandedKeys, 0, this.fondsDatas[0].children[0].children[0].id)
+        //   this.$refs.tree.setCurrentKey(this.fondsDatas[0].children[0].children[0].id)
+        //   this.handleNodeClick(this.fondsDatas[0].children[0].children[0])
+        // })
+      })
+    },
+    changeFondsValue(value) {
+      console.log(this.lastValue)
+      if (this.lastValue) {
+        if (value !== this.lastValue) {
+          this.form.dept.id = null
+        }
+      }
+    },
+    filterData(data) {
+      return data.filter(node => {
+        if (node.children && node.children.length > 0) {
+          node.children = this.filterData(node.children) // 递归处理子节点
+        }
+        return node.isType !== 3 // 过滤掉isType为3的节点
+      })
+    },
+    getCategoryDataTree() {
+      FetchCategoryMenu().then(res => {
+        this.categoryDatas = this.filterData(res)
+      })
+    },
+    selectCategoryTree(val) {
+      this.getClassifyTree(val.id)
+    },
+    getClassifyTree(categoryId) {
+      FetchArchivesClassTree({ 'categoryId': categoryId }).then(res => {
+        this.classifyOptions = res.map(function(obj) {
+          if (obj.childArchivesClass !== null) {
+            obj.hasChildren = true
+          } else {
+            obj.hasChildren = false
+          }
+          if (obj.hasChildren) {
+            obj.children = null
+          }
+          return obj
+        })
+      })
+    },
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children
+      }
+      return {
+        id: node.id,
+        label: node.cnName,
+        children: node.children,
+        isDisabled: node.isType !== 2
+      }
+    },
+    classifyNormalizer(node) {
+      if (node.childArchivesClass && !node.childArchivesClass.length) {
+        delete node.childArchivesClass
+      }
+      return {
+        id: node.id,
+        label: node.name,
+        children: node.childArchivesClass
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.collect-paper-header{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 174px;
+  background: linear-gradient(180deg, #F3F5F8 29%, #fff 100%);
+  border: 2px solid #fff;
+  .paper-step-item{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    width: 100px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #0C0E1E;
+    i{
+      display: block;
+      height: 60px;
+    }
+    p{
+      margin-top: 15px;
+    }
+    &.paper-step1{
+      i{
+        width: 65px;
+        background: url('~@/assets/images/collect/one.png') no-repeat center center;
+        background-size: 65px 60px;
+      }
+    }
+    &.paper-step2{
+      i{
+        width: 41px;
+        background: url('~@/assets/images/collect/two.png') no-repeat bottom center;
+        background-size: 41px 41px;
+      }
+      &.paper-step2-active{
+        i{
+          width: 65px;
+          background: url('~@/assets/images/collect/two2.png') no-repeat center center;
+          background-size: 65px 60px;
+        }
+      }
+    }
+    &.paper-step3{
+      i{
+        width: 41px;
+        background: url('~@/assets/images/collect/three.png') no-repeat bottom center;
+        background-size: 41px 41px;
+      }
+      &.paper-step3-active{
+        i{
+          width: 65px;
+          background: url('~@/assets/images/collect/three2.png') no-repeat center center;
+          background-size: 65px 60px;
+        }
+      }
+    }
+  }
+  .paper-step-dot{
+    width: 146px;
+    text-align: center;
+    height: 5px;
+    background: url('~@/assets/images/collect/dot.png') no-repeat center center;
+    background-size: contain;
+    &.dot-active{
+      background: url('~@/assets/images/collect/dot2.png') no-repeat center center;
+      background-size: contain;
+    }
+  }
+}
+.collect-paper-filter{
+  margin-top: 20px;
+  height: calc(100vh - 333px);
+  background-color: #fff;
+  .collect-paper-form{
+    width: 420px;
+    padding-top: 50px;
+    margin: 0 auto;
+    ::v-deep .el-form{
+      .el-form-item__label{
+        color: #0C0E1E;
+      }
+    }
+  }
+  .next-btn{
+    margin-left: 220px;
+    color: #fff;
+    background-color: #0348f3;
+    border-color: #0348f3;
+  }
+  .collect-paper-list{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(100% - 334px);
+    margin: 20px;
+    background-color: #EDEFF3;
+    .collect-no-data{
+      font-size: 20px;
+      color: #A6ADB6;
+    }
+  }
+}
+</style>
+

src/views/collectReorganizi/collectionLibrary/module/collectHeader.vue

@@ -266,16 +266,16 @@
 
 <script>
 import PreviewForm from '@/views/components/category/PreviewForm'
-import UploadOriginal from './uploadOriginal/index.vue'
-import BlukImport from './bulkImport/index.vue'
-import BlukEditing from './blukEditing/index.vue'
-import FileNumberAdjustment from './fileNumberAdjustment/index.vue'
-import CombineFile from './combineFile/index.vue'
-import InsertFile from './insertFile/index.vue'
-import CollectMoveFile from './collectMoveFile/index.vue'
-import Print from './print/index.vue'
-import FourTest from './fourTest/index.vue'
-import QuickPaper from './quickPaper/index.vue'
+import UploadOriginal from './uploadOriginal/index'
+import BlukImport from './bulkImport/index'
+import BlukEditing from './blukEditing/index'
+import FileNumberAdjustment from './fileNumberAdjustment/index'
+import CombineFile from './combineFile/index'
+import InsertFile from './insertFile/index'
+import CollectMoveFile from './collectMoveFile/index'
+import Print from './print/index'
+import FourTest from './fourTest/index'
+import QuickPaper from './quickPaper/index'
 // import { exportFile } from '@/utils/index'
 import { mapGetters } from 'vuex'
 export default {