yxk-electronic-archives/src/views/archivesManage/managementLibrary/module/packingBox/index.vue

<template>
  <el-dialog class="partPackingDialog" :title="packingTitle" :visible.sync="packingVisible" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body :before-close="handleClose">
    <div class="setting-dialog">
      <div class="packing-head">
        <div class="head-search">
          <!-- 搜索 -->
          <el-input v-model="caseQuery[inputSelect]" clearable size="small" placeholder="请输入搜索关键字" style="width: 245px; margin-right: 10px;" class="input-prepend filter-item" @keyup.enter.native="getCaseList" @clear="clearTableData">
            <el-select slot="prepend" v-model="inputSelect" style="width: 90px" @change="querySelect">
              <el-option
                v-for="item in queryOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-input>
          <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="getCaseList">搜索</el-button>
          <el-button class="filter-rfid" type="success" disabled><i class="iconfont icon-duqu" />读取</el-button>
        </div>
        <div class="selct-data-head">
          <p v-if="selectedCategory.arrangeType === 1">数据来源：文件<span>{{ selections.length }}</span>条数据</p>
          <!-- totalSumAll -->
          <p v-else>数据来源：案卷<span>{{ selections.length }}</span>条数据 卷内<span>{{ 111 }}</span>条数据</p>
        </div>
      </div>
      <!--表格渲染-->
      <!-- 装盒 -->
      <el-table
        v-if="!isPackingOrPartType"
        ref="table"
        :data="tableData"
        style="min-width: 100%"
        height="calc(100vh - 382px)"
      >
        <el-table-column prop="create_date" label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button class="packing-handle-btn iconfont" @click="handleCartoning(scope.row)"><svg-icon icon-class="zhuanghe" class="svg-arc-style" />装盒</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="caseNum" label="盒号" min-width="60" align="center" />
        <el-table-column prop="depositNum" label="已装" min-width="100" align="center" />
        <el-table-column prop="tid" label="TID" min-width="120" align="center" />
        <el-table-column prop="barcode" label="条形码" min-width="120" align="center" />
        <el-table-column prop="retention" label="保管期限" min-width="100" align="center" />
        <el-table-column prop="security_class" label="密级" min-width="100" align="center" />
        <el-table-column prop="fonds" label="全宗" min-width="100" align="center" />
        <el-table-column prop="category" label="所属门类" min-width="100" align="center" />
        <el-table-column prop="classify" label="所属分类" min-width="100" align="center" />
      </el-table>
      <!-- 分卷 -->
      <div v-else class="part-packing-cont">
        <div class="part-packing-item">
          <h5 class="part-packing-title">盒列表-待选</h5>
          <el-table
            ref="table"
            class="custom-table"
            :data="tableData"
            style="width: 100%"
            height="calc(100vh/2 - 200px)"
          >
            <el-table-column prop="create_date" label="操作" width="80" align="center">
              <template slot-scope="scope">
                <el-button class="packing-handle-btn iconfont" @click="handleCartoning(scope.row)"><svg-icon icon-class="zhuanghe" class="svg-arc-style" />装盒</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="caseNum" label="盒号" min-width="60" align="center" />
            <el-table-column prop="depositNum" label="已装" min-width="100" align="center" />
            <el-table-column prop="tid" label="TID" min-width="120" align="center" />
            <el-table-column prop="barcode" label="条形码" min-width="120" align="center" />
            <el-table-column prop="retention" label="保管期限" min-width="100" align="center" />
            <el-table-column prop="security_class" label="密级" min-width="100" align="center" />
            <el-table-column prop="fonds" label="全宗" min-width="100" align="center" />
            <el-table-column prop="category" label="所属门类" min-width="100" align="center" />
            <el-table-column prop="classify" label="所属分类" min-width="100" align="center" />
          </el-table>
        </div>
        <div class="part-packing-item">
          <h5 class="part-packing-title">盒列表-已选</h5>
          <el-table
            ref="selectBox"
            class="custom-table"
            :data="selectTableData"
            style="width: 100%"
            height="calc(100vh/2 - 200px)"
          >
            <el-table-column prop="create_date" label="操作" align="center">
              <template slot-scope="scope">
                <el-button class="packing-recall-btn iconfont" @click="cancelParking(scope.row,scope.$index)"><svg-icon icon-class="chehui" class="svg-arc-style" />撤销</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="caseNum" label="盒号" min-width="60" align="center" />
            <el-table-column prop="depositNum" label="已装" min-width="100" align="center" />
            <el-table-column prop="tid" label="TID" min-width="120" align="center" />
            <el-table-column prop="barcode" label="条形码" min-width="120" align="center" />
            <el-table-column prop="retention" label="保管期限" min-width="100" align="center" />
            <el-table-column prop="security_class" label="密级" min-width="100" align="center" />
            <el-table-column prop="fonds" label="全宗" min-width="100" align="center" />
            <el-table-column prop="category" label="所属门类" min-width="100" align="center" />
            <el-table-column prop="classify" label="所属分类" min-width="100" align="center" />
          </el-table>
        </div>
        <div class="part-packing-item">
          <h5 class="part-packing-title">档案列表-待选</h5>
          <el-table
            ref="archivesList"
            class="archives-table custom-table"
            :data="archivesTable"
            highlight-current-row
            style="width: 100%;"
            height="calc(100vh/2 - 200px)"
            @selection-change="selectionChangeHandler"
            @row-click="clickRowHandler"
          >
            <el-table-column type="selection" width="55" align="center" />
            <!-- <el-table-column prop="fonds" label="全宗" min-width="100" align="center" /> -->
            <!-- <el-table-column label="文件" prop="children_num" width="55" align="center" /> -->
            <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>
        </div>
        <div class="part-packing-item">
          <h5 class="part-packing-title">档案列表-已选</h5>
          <el-table
            ref="selectArchivesList"
            class="archives-table custom-table"
            :data="selectArchivesTable"
            highlight-current-row
            style="width: 100%;"
            height="calc(100vh/2 - 200px)"
          >
            <el-table-column type="index" label="序号" width="55" align="center" />
            <!-- <el-table-column label="文件" prop="children_num" width="55" align="center" /> -->
            <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>
        </div>
      </div>
      <div v-if="isPackingOrPartType" slot="footer" class="dialog-footer">
        <el-button type="text">取消</el-button>
        <el-button type="primary" @click="handleComfireCartoning">确定</el-button>
      </div>
    </div>
  </el-dialog>

</template>

<script>
// import { FetchInitCartoningList, FetchCartoning } from '@/api/archivesManage/caseManage'
// import { FetchInitArchivesView } from '@/api/archivesManage/archivesList'
import { header, form } from '@crud/crud'
const data = [
  {
    'id': '02877E5A6559BEDE24B227',
    'caseName': 'ZL-2023-1',
    'caseType': 0,
    'tid': null,
    'barcode': null,
    'shelfId': null,
    'folderLocation': null,
    'folderLocationDetails': null,
    'depositNum': 0,
    'storageType': 0,
    'storageTime': null,
    'create_by': 'admin',
    'update_by': 'admin',
    'create_time': 1695628425000,
    'update_time': 1702971551000
  }, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}
]
export default {
  name: 'Packing',
  components: { },
  // inject: ['caseData', 'recycleMain'],
  mixins: [
    header(),
    form({})
  ],
  props: {
    selectedCategory: {
      type: Object,
      default: function() {
        return {}
      }
    },
    selections: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      packingTitle: '装盒',
      packingData: [],
      tableData: [],
      selectTableData: [],
      archivesTable: [],
      selectArchivesTable: [],
      tid: null,
      caseName: null,
      barcode: null,
      caseQuery: {},
      inputSelect: null,
      queryOption: [
        { value: 'caseName', label: '盒号' },
        { value: 'tid', label: 'TID' },
        { value: 'barcode', label: '条形码' }
      ],
      packingVisible: false, // 装盒
      isPackingOrPartType: 0
    }
  },
  created() {
    // 初始化带select的输入框的 - 搜索
    this.inputSelect = this.queryOption[0].value
    this.tableData = data
    this.selectTableData = data
  },
  methods: {
    // 搜索-select
    querySelect(val) {
      this.inputSelect = val
    },
    // 搜索盒列表
    getCaseList() {
      if (!this.caseQuery[this.inputSelect]) {
        this.$message.error('请输入后再搜索！')
        return
      }
      switch (this.inputSelect) {
        case 'caseName':
          this.caseName = this.caseQuery[this.inputSelect]
          this.tid = null
          this.barcode = null
          break
        case 'tid':
          this.tid = this.caseQuery[this.inputSelect]
          this.caseName = null
          this.barcode = null
          break
        case 'barcode':
          this.barcode = this.caseQuery[this.inputSelect]
          this.caseName = null
          this.tid = null
          break
      }
      // const params = {
      //   'tid': this.tid,
      //   'caseName': this.caseName,
      //   'barcode': this.barcode,
      //   'page': 0,
      //   'size': 10
      // }
      // FetchInitCartoningList(params).then(res => {
      //   this.tableData = res.content
      // })
    },
    async getPackingFileList() {
      // let categoryId
      // if (this.selectedCategory.isType === 2) {
      //   categoryId = this.selectedCategory.children[0].children[0].id
      // } else {
      //   categoryId = this.selectedCategory.children[0].id
      // }
      // const params = {
      //   'categoryId': categoryId,
      //   'parentsId': this.recycleMain.anjuanSelection.id,
      //   'isdel': false,
      //   'page': 0,
      //   'size': null,
      //   'sort': null,
      //   'queryType': null,
      //   'queryTitle': null,
      //   'itemNo': null,
      //   'archiveCtgNo': null,
      //   'responsibleby': null,
      //   'archiveNo': null,
      //   'archiveYear': null,
      //   'department': null,
      //   'retention': null,
      //   'securityClass': null,
      //   'organizationMatter': null
      // }
      // await FetchInitArchivesView(params).then(data => {
      //   if (data) {
      //     this.packingData = data.list.content
      //     this.archivesTable = data.list.content
      //   }
      // })
    },
    // 装盒 api
    async handleCartoning(row) {
      // let jnCategoryId
      // let archivesParentsId
      // if (this.caseData.selectedCategory.isType === 5) {
      //   this.packingData = this.caseData.selections
      //   jnCategoryId = this.caseData.selectedCategory.id
      // } else {
      //   await this.getPackingFileList()
      //   if (this.caseData.selectedCategory.isType === 2) {
      //     jnCategoryId = this.caseData.selectedCategory.children[0].children[0].id
      //   } else {
      //     jnCategoryId = this.caseData.selectedCategory.children[0].id
      //   }
      //   archivesParentsId = this.caseData.selections[0].id
      // }
      // const arrParams = this.packingData.map(item => {
      //   const json = {}
      //   json.archivesId = item.id
      //   if (this.caseData.selectedCategory.isType === 5) {
      //     json.archivesParentsId = item.id
      //   } else {
      //     json.archivesParentsId = archivesParentsId
      //   }
      //   json.caseId = row.id
      //   json.caseName = row.caseName
      //   json.categoryId = jnCategoryId
      //   return json
      // })
      // await this.FetchCartioning(arrParams)
    },
    FetchCartioning(arrParams) {
      // FetchCartoning(arrParams).then(res => {
      //   this.$message.success('装盒成功！')
      //   this.packingVisible = false
      //   this.crud.refresh()
      //   this.tableData = []
      //   this.caseQuery[this.inputSelect] = ''
      // })
    },
    // 分卷装盒
    handlePartParking(row, index) {
      // if (!this.selections.length) {
      //   this.$message.error('请选择要装盒的档案！')
      //   return
      // }
      // // 分卷装盒存在未完成装盒操作，且某一个盒能一直搜索到，故添加到盒里时进行判断筛选
      // if (this.selectTableData.findIndex(val => val.id === row.id) === -1) {
      //   this.selectTableData.push(row)
      // }
      // this.tableData.splice(index, 1)
      // this.selections.forEach(item => {
      //   item.caseId = row.id
      //   item.caseName = row.caseName
      //   this.archivesTable.splice(this.archivesTable.findIndex(val => val.id === item.id), 1)
      //   this.selectArchivesTable.push(item)
      // })
    },
    // 撤回装盒
    cancelParking(row, index) {
      // this.tableData.unshift(row)
      // this.selectTableData.splice(index, 1)
      // this.selectArchivesTable.forEach((item, i) => {
      //   if (item.caseId === row.id) {
      //     this.archivesTable.push(item)
      //   }
      // })
      // this.selectArchivesTable.splice(this.selectArchivesTable.findIndex((item, i) => item.caseId === row.id), this.archivesTable.length)
    },
    handleComfireCartoning() {
      // if (this.archivesTable.length) {
      //   this.$message.error('左侧档案待选列表全部装盒完成才可保存')
      //   return
      // }
      // let jnCategoryId
      // if (this.caseData.selectedCategory.isType === 2) {
      //   jnCategoryId = this.caseData.selectedCategory.children[0].children[0].id
      // } else {
      //   jnCategoryId = this.caseData.selectedCategory.children[0].id
      // }
      // const arrParams = this.selectArchivesTable.map(item => {
      //   const json = {}
      //   json.archivesId = item.id
      //   json.archivesParentsId = this.caseData.selections[0].id
      //   json.caseId = item.caseId
      //   json.caseName = item.caseName
      //   json.categoryId = jnCategoryId
      //   return json
      // })
      // this.FetchCartioning(arrParams)
    },
    clearTableData() {
      this.tableData = []
    },
    // table
    clickRowHandler(row) {
      this.$refs.archivesList.toggleRowSelection(row)
    },
    // table
    selectionChangeHandler(val) {
      this.selections = val
    },
    // dialog - close
    handleClose(done) {
      this.showCoverVisible = false
      this.$set(this.caseQuery, this.inputSelect, '')
      this.tableData = []
      this.selectTableData = []
      this.archivesTable = []
      this.selectArchivesTable = []
      done()
    }
  }
}
</script>
<style lang="scss" scoped>
.filter-rfid{
  margin-left: 10px;
  padding: 0 13px;
  height: 32px;
  line-height: 30px;
  &.is-disabled,
  &.is-disabled:focus{
    border-color: #0348F3 !important;
    background-color: rgba(31, 85, 235, 0.20) !important;
    color: #0348F3 !important;
    opacity: 0.6;
  }
  .iconfont{
    font-size: 20px;
  }
}
.el-table .el-button{
  padding: 0;
}

::v-deep .custom-table .el-table__body-wrapper::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
  background-color: #DDE8FB !important;
}

::v-deep .custom-table .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #4578F6 !important;
}

::v-deep .custom-table .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
  background-color: #4578F6 !important;
}

::v-deep .custom-table .el-table__body-wrapper::-webkit-scrollbar-corner {
  background-color: #DDE8FB !important;
}
</style>