yxk-electronic-archives/src/views/collectReorganizi/batchPaper/index.vue

<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', step===2 || step===3 ? 'dot-active':'']" />
      <div :class="['paper-step-item paper-step2', step===2 || step===3 ? 'paper-step2-active':'']">
        <i />
        <p>确认组卷条目</p>
      </div>
      <div :class="['paper-step-dot', step===3 ? 'dot-active':'']" />
      <div :class="['paper-step-item', 'paper-step3', step===3 ? 'paper-step3-active':'']">
        <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;" :disabled="step===2 || step===3">
                  <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;" :disabled="step===2 || step===3">
                  <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;" :disabled="step===2 || step===3" @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"
              :disabled="step===2 || step===3"
              @select="selectCategoryTree"
            />
          </el-form-item>
          <el-form-item label="档案分类" prop="archivesClassId">
            <treeselect
              v-model="form.archivesClassId"
              :options="classifyOptions"
              :normalizer="classifyNormalizer"
              :disabled="step===2 || step===3"
              placeholder="请选择"
              no-options-text="暂无数据"
            />
          </el-form-item>
          <el-button v-if="step === 1" class="step-btn next-btn" type="primary" @click="nextFilterStep('form')">下一步</el-button>
        </el-form>
      </div>
      <div :class="['collect-paper-list',{'paper-step2-list': step === 2}]">
        <div v-if="step===1" class="collect-no-data">选择组卷条件后自动获取数据</div>
        <div v-if="step===2 || step===3" class="collect-paper-table">
          <div class="paper-table-header">
            <p>成功获得待组卷文件<span>7</span>条，选中<span>N</span>条进行组卷</p>
            <div class="head-search">
              <el-input v-model="blurry" clearable size="small" placeholder="输入题名或档号搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" />
              <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search">搜索</el-button>
              <el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left">重置</el-button>
            </div>
            <el-button class="filter-item remove-btn" size="mini" type="success" :disabled="selections.length === 0" @click="toMove(selections)"><i class="iconfont icon-shanchu" />移除</el-button>
          </div>
          <el-table
            ref="table"
            v-loading="loading"
            class="archives-table"
            :data="tableData"
            style="width: 100%;"
            height="calc(100vh - 706px)"
            @select-all="selectAll"
            @row-click="clickRowHandler"
            @select="handleCurrentChange"
          >
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column prop="category_type" label="门类级别" align="center" min-width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.category_type === 5" style="width:56px">文件级</span>
                <span v-if="scope.row.category_type === 4" style="width:56px">卷内级</span>
                <span v-if="scope.row.category_type === 3" style="width:56px">案卷级</span>
              </template>
            </el-table-column>
            <el-table-column prop="category_name" label="门类名称" align="center" show-overflow-tooltip min-width="170" />
            <el-table-column prop="child" label="子条数目" align="center" width="100" />
            <el-table-column prop="archive_no" label="档号" align="center" show-overflow-tooltip min-width="220" />
            <el-table-column prop="maintitle" label="题名" show-overflow-tooltip align="center" min-width="240" />
            <el-table-column prop="doc_no" label="发文字号" show-overflow-tooltip width="140" align="center" />
            <el-table-column prop="serial_no" label="序号" width="100" align="center" />
            <el-table-column prop="fonds_no" label="全宗号" align="center" min-width="180" />
            <el-table-column prop="archive_year" label="年度" align="center" min-width="100" />
            <el-table-column prop="security_class" label="密级" align="center" min-width="100" />
            <el-table-column prop="retention" label="保管期限" align="center" min-width="100" />
            <el-table-column prop="arrive_class" label="收发类别" width="140" align="center" />
            <el-table-column prop="temp_no" label="临时卷号" show-overflow-tooltip width="140" align="center" />
            <el-table-column prop="created_date" label="成文日期" align="center" min-width="180" />
            <el-table-column prop="case_name" label="盒名称" show-overflow-tooltip align="center" min-width="200" />
          </el-table>
          <div class="paper-table-bottom">
            <el-button class="step-btn" type="primary" @click="step = 1">上一步</el-button>
            <el-button class="step-btn" type="primary" :disabled="selections.length === 0" @click="nextSelectedTable">下一步</el-button>
          </div>
        </div>
      </div>
    </div>
    <eForm ref="eform" />
  </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'
import eForm from './form'
import tableData from './table.json'
export default {
  name: 'BatchPaper',
  components: { eForm, 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: [],
      blurry: null,
      tableData: [],
      loading: false,
      selections: [],
      step: 1,
      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: {
    nextFilterStep(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.step = 2
          this.tableData = tableData.data.content
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    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 === null) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.cnName,
        children: node.children,
        isDisabled: node.isType !== 2
      }
    },
    classifyNormalizer(node) {
      if (node.childArchivesClass === null) {
        delete node.childArchivesClass
      }
      return {
        id: node.id,
        label: node.name,
        children: node.childArchivesClass
      }
    },
    nextSelectedTable() {
      this.step = 3
      this.handleForm('add')
    },
    // table - 全选
    selectAll(val) {
      this.selections = val
    },
    // table - 当前选中得row
    clickRowHandler(row) {
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row)
      this.selections = []
      this.selections.push(row)
    },
    // 触发单选
    handleCurrentChange(selection, row) {
      this.selections = selection
    },
    // 著录界面-form/详情-api
    handleForm(type) {
      this.$refs.eform.formVisible = true
      // if (type === 'add') {
      //   this.$refs.eform.formTitle = '新增档案'
      // } else if (type === 'edit') {
      //   this.$refs.eform.formTitle = '编辑文件'
      // }
      this.$refs.eform.formTitle = '新增档案'
      // 档案预编辑获取字段
      const params = {
        categoryId: this.categoryId,
        archivesId: this.arcId
      }
      this.getFormInfo(params, type)
    },
    getFormInfo(params, type, isAnOrJuan) {
      // FetchFormDisplayFields(params).then(data => {
      //   this.formPreviewData = data.showFiled
      //   this.$nextTick(() => {
      //     if (type === 'edit') {
      //       this.$refs.previewForm.addOrUpdateForm = data.echo
      //     } else {
      //       if (this.recycleMain.selectedCategory.isType !== 5) {
      //       // 新增时拿到项目和案卷的相同的字段的值
      //         this.formPreviewData.forEach(item => {
      //           if (isAnOrJuan === 1) {
      //             if (this.recycleMain.selectedCategory.isType !== 3) {
      //               if (this.recycleMain.projectSelection[item.fieldName]) {
      //                 this.$refs.previewForm.addOrUpdateForm = JSON.parse(JSON.stringify(this.recycleMain.projectSelection))
      //               }
      //             }
      //           } else if (isAnOrJuan === 2) {
      //             if (this.recycleMain.anjuanSelection[item.fieldName]) {
      //               this.$refs.previewForm.addOrUpdateForm = JSON.parse(JSON.stringify(this.recycleMain.anjuanSelection))
      //             }
      //           }
      //         })
      //       }
      //     }
      //     this.isDesFormType = 'arcives'
      //     this.$refs.previewForm.FetchNoFormatField(this.categoryId)
      //   })
      // })
    },
    // 删除用户
    toMove(datas) {
      this.$confirm('此操作将把所选条目从此次批量组卷中移除' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        // this.crud.delAllLoading = true
        const userIds = []
        datas.forEach(val => {
          userIds.push(val.userId)
        })
        // crudUser.del(userIds).then(() => {
        //   this.crud.notify('删除成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        //   this.crud.delAllLoading = false
        //   this.crud.refresh()
        // }).catch(err => {
        //   this.crud.delAllLoading = false
        //   console.log(err)
        // })
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.collect-paper-header{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 154px;
  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 - 313px);
  background-color: #fff;
  .collect-paper-form{
    width: 420px;
    padding-top: 30px;
    margin: 0 auto;
    ::v-deep .el-form{
      .el-form-item__label{
        color: #0C0E1E;
      }
    }
  }
  .step-btn{
    color: #fff;
    background-color: #0348f3;
    border-color: #0348f3;
    &.el-button.is-disabled,
    &.el-button.is-disabled:hover,
    &.el-button.is-disabled:focus{
      color: #fff;
      background-color: #0348f3;
      border-color: #0348f3;
      opacity: 0.5 !important;
    }
  }
  .next-btn{
    margin-left: 220px;
  }

  .collect-paper-list{
    position: relative;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    height: calc(100% - 314px);
    margin: 20px;
    background-color: #EDEFF3;
    &.paper-step2-list{
      height: calc(100% - 262px);
    }
    .collect-no-data{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      font-size: 20px;
      color: #A6ADB6;
      text-align: center;
    }
  }
}
.collect-paper-table{
  padding: 20px;
}
.paper-table-header{
  display: flex;
  justify-content: space-between;
  p{
    flex: 1;
    padding-left: 52px;
    margin-top: -8px;
    color: #0C0E1E;
    font-size: 15px;
    line-height: 52px;
    background: url('~@/assets/images/collect/jn.png') no-repeat left top;
    background-size: 46px 49px;
    span{
      padding: 0 2px;
      color: #0348F3;
    }
  }

  ::v-deep .el-input__inner,
  .filter-refresh{
    background-color: transparent !important;
    border-color: #D9D9D9;
  }
  .filter-search,

  .filter-refresh{
    margin-left: 10px;
  }
  .remove-btn{
    height: 32px;
    margin-left: 60px;
  }
}
.paper-table-bottom{
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
::v-deep .el-table {
  .el-table__body-wrapper {
    tr{
      background-color: #fff !important;
    }
  }
}

</style>