yxk-electronic-archives/src/views/collectReorganizi/collectionLibrary/module/collectMoveFile/index.vue

<template>
  <!-- 移动 -->
  <el-dialog class="collectMoveFile-dialog" title="移动" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :visible.sync="collectMoveFileVisible" :before-close="handleCloseDialog" @open="open">
    <div class="collectMove-main">
      <div class="collectMove-left">
        <CategoryTree ref="categoryTree" @nodeClick="handleNodeClick" />
      </div>

      <div class="collectMove-right">
        <div class="collectMove-header">
          <div v-if="currentCategory && currentCategory.arrangeType===3" class="detail-tab tab-content">
            <ul class="tab-nav">
              <li :class="{'active-tab-nav': tabIndex == 0}" @click="changeActiveTab(0)">项目列表</li>
              <li :class="{'active-tab-nav': tabIndex == 1}" @click="changeActiveTab(1)">案卷列表</li>
            </ul>
          </div>
          <div class="head-search">
            <el-input v-model="query.search" clearable size="small" placeholder="输入题名或档号搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="getViewTableList" @clear="getViewTableList" />
            <el-button class="filter-item filter-search" style="margin: 0 10px;" size="mini" type="success" icon="el-icon-search" @click="getViewTableList">搜索</el-button>
            <el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
          </div>
        </div>
        <div class="table-list">
          <el-table
            ref="table"
            v-loading="loading"
            lazy
            :data="tableData"
            style="width: 100%;"
            height="calc(100%)"
            :row-key="getRowKey"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            highlight-current-row
            @selection-change="selectionChangeHandler"
            @row-click="clickRowHandler"
          >
            <el-table-column type="selection" align="center" width="55" />
            <el-table-column v-for="field in tableDisplayFields" :key="field.id" :label="field.fieldCnName" :align="field.displayformatType" :width="field.displayLength" show-overflow-tooltip>
              <template slot="header">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="field.fieldCnName"
                  placement="top-start"
                >
                  <span>{{ field.fieldCnName }}</span>
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                {{ scope.row[field.fieldName] }}
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <el-pagination
            v-if="tableData.length !== 0"
            :current-page="page.page"
            :total="page.total"
            :page-size="page.size"
            :pager-count="5"
            layout="total, prev, pager, next, sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentPage"
          />
        </div>
        <div class="move-checked">
          <div class="checkbox-style">
            <span>移动电子文件</span>
            <el-checkbox v-model="moveFile" label="移动电子文件" disabled />
          </div>
          <div class="checkbox-style">
            <span>保留原条目</span>
            <el-checkbox v-model="isReserve" label="保留原条目" />
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="handleCloseDialog">取消</el-button>
      <el-button type="primary" :disabled="currentCategory&&currentCategory.arrangeType===3&&moveSelections.length===0&&collectLevel===2 " @click.native="handleComfireCollectMoveFile">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import CategoryTree from '@/views/components/categoryTree'
import { FetchInitCategoryViewTable, FetchInitCategoryView, FetchMove } from '@/api/collect/collect'
export default {
  name: 'CollectMoveFile',
  components: { CategoryTree },
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    },
    collectLevel: {
      type: Number,
      default: function() {
        return null
      }
    },
    selections: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      query: {
        search: null
      },
      currentCategory: null,
      currentLevel: null,
      collectMoveFileVisible: false,
      toCategoryLevel: null,
      loading: false,
      arrySort: [],
      tableData: [],
      tableDisplayFields: [],
      moveSelections: [],
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      moveFile: true,
      isReserve: false,
      tabIndex: 0
    }
  },
  mounted() {
  },
  methods: {
    resetQuery() {
      this.query.search = null
      this.getViewTableList()
    },
    getRowKey(row) {
      return row.id
    },
    handleNodeClick(data) {
      if (data) {
        this.currentCategory = data
        if (this.currentCategory.isType !== 1) {
          this.getViewTable()
        } else {
          this.tableDisplayFields = []
          this.tableData = []
        }
      }
    },
    open() {
      if (this.currentCategory) {
        this.getViewTable()
      }
    },
    getViewTable() {
      this.loading = true
      this.tableDisplayFields = []
      if (this.currentCategory.arrangeType === 1) {
        this.currentLevel = 3
      } else if (this.currentCategory.arrangeType === 2) {
        this.currentLevel = 2
      } else {
        if (this.tabIndex === 1) {
          this.currentLevel = 2
        } else {
          this.currentLevel = 1
        }
      }
      FetchInitCategoryViewTable({ categoryId: this.currentCategory.id, categoryLevel: this.currentLevel }).then((res) => {
        if (res) {
          this.arrySort = []
          this.tableDisplayFields = res
          const orderSortArry = this.tableDisplayFields.filter(item => item.displayOrder).sort((a, b) => a.displayOrder - b.displayOrder)
          orderSortArry.forEach(item => {
            if (item.displayOrderBy) {
              this.arrySort.push(item.fieldName + ',' + item.displayOrderBy)
            }
          })
          this.$nextTick(() => {
            this.getViewTableList()
          })
          this.loading = false
        }
      })
    },
    getViewTableList() {
      this.tableData = []
      this.loading = true
      const params = {
        'categoryId': this.currentCategory.id,
        'categoryLevel': this.currentLevel,
        'search': this.query.search,
        'page': this.page.page - 1,
        'size': this.page.size
      }
      FetchInitCategoryView(params).then((res) => {
        console.log(res)
        if (res.code !== 500) {
          this.tableData = res.list.content
          this.page.total = res.list.totalElements
        }
        this.loading = false
      })
    },
    changeActiveTab(data) {
      this.tabIndex = data
      this.getViewTable()
      this.moveSelections = []
    },
    clickRowHandler(row) {
      this.moveSelections = []
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row)
      // this.moveSelections.push(row)
    },
    selectionChangeHandler(selection, row) {
      this.moveSelections = selection
    },
    handleComfireCollectMoveFile() {
      if (this.moveSelections.length > 1) {
        this.$message('该操作只可勾选唯一目标条目，请先确认！')
        return false
      }
      if (this.currentCategory.arrangeType === 1) {
        this.toCategoryLevel = 3
      } else if (this.currentCategory.arrangeType === 2) {
        this.toCategoryLevel = 2
      } else {
        console.log(this.collectLevel)
        if (this.collectLevel === 3) {
          if (this.moveSelections.length === 0) {
            this.toCategoryLevel = 3
          } else {
            if (this.tabIndex === 1) {
              this.toCategoryLevel = 2
            } else {
              this.toCategoryLevel = 3
            }
          }
        } else {
          if (this.tabIndex === 1) {
            this.toCategoryLevel = 2
          } else {
            this.toCategoryLevel = 1
          }
        }
      }
      if (this.collectLevel === 2) {
        if (this.toCategoryLevel === 3) {
          this.$message('案卷级的案卷不可移动到文件级，请先确认！')
          return false
        }
      }
      if (this.selectedCategory.id === this.currentCategory.id) {
        this.$message('正在移动的档案只可移动到其他位置，不可选择本身!')
        return false
      }
      const archivesIds = this.selections.map(item => item.id)
      // const toArchivesIds = this.moveSelections.map(item => item.id)
      let toArchivesId
      if (this.moveSelections.length === 0) {
        toArchivesId = null
      } else {
        if (this.collectLevel === 3) {
          console.log('this.tabIndex66', this.tabIndex)
          if (this.tabIndex === 1) {
            toArchivesId = this.moveSelections[0].id
          } else {
            if (this.selectedCategory.arrangeType === 1) {
              toArchivesId = this.moveSelections[0].id
            } else {
              toArchivesId = null
            }
          }
        } else {
          toArchivesId = this.moveSelections[0].id
        }
      }
      const params = {
        'reserve': this.isReserve, // 是否保留原条目   true 保留  false 删除
        'categoryId': this.selectedCategory.id, //  需要移动的门类总id
        'categoryLevel': this.collectLevel, // 需要移动的门类级别
        'archivesIds': archivesIds, // 需要移动的档案id集合
        'toCategoryId': this.currentCategory.id, // 移动到的门类id
        'toCategoryLevel': this.toCategoryLevel, // 移动到的门类级别
        'toArchivesId': toArchivesId // 移动到的档案id (选填)
      }
      console.log(params)
      FetchMove(params).then((res) => {
        console.log(res)
        if (res.code !== 500) {
          this.$message.success('移动成功')
          this.$emit('close-dialog')
        } else {
          this.$message.error('移动失败')
        }
        this.handleCloseDialog()
      })
    },
    handleSizeChange(size) {
      this.page.size = size
      this.page.page = 1
      this.getViewTableList()
    },
    handleCurrentPage(val) {
      this.page.page = val
      this.getViewTableList()
    },
    handleCloseDialog(done) {
      // 重置表单数据
      this.query.search = null
      this.tableDisplayFields = []
      this.tableData = []
      this.$refs.table.clearSelection()
      this.moveSelections = []
      this.collectMoveFileVisible = false
      this.isReserve = false
      // 关闭弹框
      // done()
    }
  }
}
</script>

<style lang='scss' scoped>
.collectMoveFile-dialog{
  ::v-deep .el-dialog{
    width: 1000px;
    .search-btn-box{
      .el-button{
        margin-left: 10px;
      }
    }
  }
}
.collectMove-main{
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 557px;
  border: 1px solid #E6E8ED;
  .collectMove-left{
    width: 260px;
    overflow: hidden;
    overflow-y: scroll;
    .elect-cont-left{
      width: auto !important;
      margin-right: 0 !important;
    }
    ::v-deep .container-left{
      min-height: calc(100%) !important;
    }
  }
  .collectMove-right{
    width: calc(100% - 260px);
    flex: 1;
    border-left: 1px solid #E6E8ED;
    .head-search{
      // padding: 0 20px 0 0;
      flex: 1;
      justify-content: flex-end;
      margin-bottom: 0;
    }
    .table-list{
      height: 440px;
      border-bottom: 1px solid #E6E8ED;
      .el-pagination{
        margin: 15px 0 !important;
      }
    }
    .move-checked{
      display: flex;
        justify-content: flex-start;
      padding: 0 30px;
      height: 42px;
      line-height: 42px;
      .checkbox-style{
        font-size: 14px;
        color: #0C0E1E;
        margin-right: 30px;
      }
      .el-checkbox{
        margin-right: 20px;
        ::v-deep .el-checkbox__input.is-disabled .el-checkbox__inner{
          border-color: #0348f3;
          background-color: #0348f3;
        }
        ::v-deep .el-checkbox__label{
          opacity: 0;
          margin-left: -100px;
          padding-left: 0;
        }
      }
    }
  }
}

.collectMove-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 20px 0;
  .detail-tab .tab-nav{
    margin: 0;
    border-bottom: none;
  }
  .detail-tab .tab-nav li{
    margin-right: 20px;
  }
  .detail-tab .tab-nav li.active-tab-nav{
    padding-bottom: 0;
  }
}
.dialog-footer{
  margin-top: 20px;
}
</style>