yxk-electronic-archives/src/views/archiveKeeping/caseManage/caseList/module/detailDialog.vue

<template>
  <div>
    <el-dialog class="detail-dialog" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" title="档案盒详情" :visible.sync="detailVisible">
      <div class="setting-dialog">
        <div class="detail-tab tab-content">
          <ul class="tab-nav">
            <li :class="{'active-tab-nav': caseTabIndex == 0}" @click="changeActiveTab(0)">基本信息</li>
            <li :class="{'active-tab-nav': caseTabIndex == 1}" @click="changeActiveTab(1)">盒内档案</li>
          </ul>
          <div v-if="caseTabIndex===0" class="base-info">
            <ul>
              <li>
                <span>所在库：</span>
                <p>{{ rowData && rowData.collectFormal===1 ? '收集库' : (rowData.collectFormal===3 ? '管理库':'') }}</p>
              </li>
              <li>
                <span>门类：</span>
                <p>{{ rowData && rowData.cnName }}</p>
              </li>
              <li>
                <span>盒号：</span>
                <p>{{ rowData && rowData.caseCode }}</p>
              </li>
              <li>
                <span>状态：</span>
                <p>{{ rowData && rowData.depositNum ? '已装':'未装' }}</p>
              </li>
              <li>
                <span>盒名称：</span>
                <p>{{ rowData && rowData.caseName }}</p>
              </li>
              <li>
                <span>规格：</span>
                <p>{{ rowData && rowData && rowData.caseSpecs }}</p>
              </li>
            </ul>
            <ul>
              <li>
                <span>全宗：</span>
                <p>{{ rowData && rowData.caseFonds }}</p>
              </li>
              <li>
                <span>年度：</span>
                <p>{{ rowData && rowData.caseYear }}</p>
              </li>
              <li>
                <span>保管期限：</span>
                <p>{{ rowData && rowData.caseRetention }}</p>
              </li>
              <li>
                <span>密级：</span>
                <p>{{ rowData && rowData.caseClass }}</p>
              </li>
              <li>
                <span>开始件号：</span>
                <p>{{ rowData && rowData.startItemNo }}</p>
              </li>
              <li>
                <span>结束件号：</span>
                <p>{{ rowData && rowData.endItemNo }}</p>
              </li>
            </ul>
            <ul>
              <li>
                <span>装盒人：</span>
                <p>{{ rowData && rowData.packing }}</p>
              </li>
              <li>
                <span>装盒日期：</span>
                <p>{{ rowData && rowData.packDate | parseTime }}</p>
              </li>
              <li>
                <span>检查人：</span>
                <p>{{ rowData && rowData.check }}</p>
              </li>
              <li>
                <span>检查日期：</span>
                <p>{{ rowData && rowData.checkDate | parseTime }}</p>
              </li>
            </ul>
            <ul class="case-detail-row">
              <li>
                <span>电子标签：</span>
                <p>{{ rowData && rowData.tid }}</p>
              </li>
              <li>
                <span>条码：</span>
                <p>{{ rowData && rowData.barcode }}</p>
              </li>
              <li>
                <span>存放位置：</span>
                <p>{{ rowData && !rowData.folderLocationDetails ? '-' : rowData.folderLocationDetails }}</p>
              </li>
            </ul>
            <ul>
              <li>
                <span>备注：</span>
                <p>{{ rowData && rowData.caseNotes }}</p>
              </li>
            </ul>
          </div>
          <div v-if="caseTabIndex===1 && tableData.length !== 0 && queryFields.includes('record_no')" class="double-click-btn"><i class="iconfont icon-zhuyi-lan" /><span>双击列表数据查看详情</span></div>
          <el-table
            v-show="caseTabIndex===1"
            ref="table"
            :data="tableData"
            style="width: 100%;"
            row-key="id"
            height="342px"
            @cell-dblclick="tableDoubleClick"
          >
            <el-table-column type="index" label="序号" width="55" align="center" />
            <template v-for="(field, index) in queryFields">
              <el-table-column
                v-if="field !== 'id'"
                :key="index"
                :prop="field"
                :label="queryCnFields[index]"
                :show-overflow-tooltip="true"
                :width="field === 'archive_no' ? '260px' : '120px'"
                :formatter="formatCell"
              />
            </template>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <el-dialog class="detail-dialog" append-to-body :close-on-click-modal="false" :modal-append-to-body="false" title="文件列表" :visible.sync="fileVisible">
      <div class="setting-dialog">
        <el-table
          ref="table"
          :data="fileTableData"
          style="width: 100%;"
          row-key="id"
          height="342px"
        >
          <el-table-column type="index" label="序号" width="55" align="center" />
          <template v-for="(field, index) in queryFields">
            <el-table-column
              v-if="field !== 'id'"
              :key="index"
              :prop="field"
              :label="queryCnFields[index]"
              :show-overflow-tooltip="true"
              :width="field === 'archive_no' ? '260px' : '120px'"
              :formatter="formatCell"
            />
          </template>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findArchiveInCase } from '@/api/archivesKeeping/caseManage'
export default {
  data() {
    return {
      caseTabIndex: 0,
      detailVisible: false,
      rowData: {},
      tableData: [],
      collectLevel: null,
      selectedItem: null,
      queryCnFields: null,
      queryFields: null,
      fileVisible: false,
      fileTableData: []
    }
  },
  methods: {
    changeActiveTab(data) {
      this.caseTabIndex = data
    },
    formatCell(row, column) {
      if (row[column.property] === 'null' || row[column.property] === null) {
        return ''
      } else {
        return row[column.property]
      }
    },
    tableDoubleClick(row) {
      if (row.id) {
        const params = {
          'caseId': this.rowData.id, // 档案盒id
          'archivesId': row.id// 档案id
        }
        findArchiveInCase(params).then(res => {
          this.fileTableData = res.archives_o
          this.fileVisible = true
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.base-info{
  background: #F6F8FC;
  padding: 20px;
  ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 10px 0;
    li{
      display: flex;
      justify-content: flex-start;
      width: 50%;
      font-size: 14px;
      color: #545B65;
      line-height: 35px;
      span{
        display: block;
        width: 120px;
        font-weight: bold;
        text-align: right;
        color: #0C0E1E;
      }
    }
  }
  .case-detail-row{
    li{
      width: 100%;
    }
  }
}
</style>