yxk-storeroom-system/src/views/archivesManage/outInStorage/module/detailDialog.vue

<template>
  <div>
    <el-dialog title="档案盒详情" :visible.sync="detailVisible">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <div v-if="rowData" class="msg-top">
          <div class="dpflex">
            <p class="left"><span class="color-blue">盒名称:</span><span class="color-white">{{ rowData.caseName }}</span></p>
            <p class="right"><span class="color-blue">存放位置:</span>
              <span class="color-white">
                <div v-if="rowData.folderLocationDetails.indexOf(',')">
                  <el-tag
                    v-for="(item,index) in rowData.folderLocationDetails.split(',')"
                    :key="index"
                    :type="item"
                    effect="dark"
                  >
                    {{ item }}
                  </el-tag>
                </div>
                <div v-else>
                  <el-tag effect="dark">{{ rowData.folderLocationDetails }}</el-tag>
                </div>
              </span>
            </p>
          </div>
          <div class="dpflex">
            <p class="left"><span class="color-blue">条形码:</span><span v-if="rowData.barcode" class="color-white">{{ rowData.barcode }}</span></p>
            <p class="right"><span class="color-blue">TID:</span><span class="color-white">{{ rowData.tid }}</span></p>
          </div>
          <div class="dpflex">
            <p class="left"><span class="color-blue">创建时间:</span><span class="color-white">{{ rowData.create_time| parseTime }}</span></p>
          </div>
        </div>
        <el-table :data="tableData" height="348px">
          <el-table-column type="index" label="序号" align="center" width="90" />
          <el-table-column prop="child" align="center" label="子条数目" width="100" />
          <el-table-column prop="categoryType" align="center" label="门类级别" width="140">
            <template slot-scope="scope">
              <!-- 未入 / 待入 -->
              <span v-if="scope.row.categoryType === 5" style="width:56px">文件级</span>
              <span v-if="scope.row.categoryType === 4" style="width:56px">卷内级</span>
              <span v-if="scope.row.categoryType === 3" style="width:56px">案卷级</span>
            </template>
          </el-table-column>
          <el-table-column prop="categoryName" align="center" label="门类名称" width="130" />
          <el-table-column prop="fondsNo" align="center" label="全宗号" width="80" />
          <el-table-column prop="archiveNo" align="center" label="档号" width="140" />
          <el-table-column prop="archiveYear" align="center" label="归档年度" width="140" />
          <el-table-column prop="maintitle" align="center" label="题名" width="140" />
          <el-table-column prop="securityClass" align="center" label="保密程度" width="140" />
          <el-table-column prop="department" align="center" label="部门" width="100" />
          <el-table-column prop="caseName" align="center" label="盒名称" width="140" />
          <el-table-column prop="folderLocationDetails" align="center" label="所在位置" width="300">
            <template v-if="rowData" slot-scope="">
              <el-tag effect="dark">{{ rowData.folderLocationDetails }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="update_time" align="center" label="创建时间" width="180">
            <template slot-scope="scope">
              <div>{{ scope.row.update_time | parseTime }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailVisible: false,
      rowData: null,
      tableData: []
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/lend-manage.scss";
::v-deep .el-dialog {
  width: 950px;
  height: 520px;
}
::v-deep .el-dialog__body{
  padding: 20px 0;
}
::v-deep .el-dialog .el-dialog__header .el-dialog__close::before {
  position: absolute;
  right: -162px;
  bottom: -10px;
}
.msg-top{
  padding: 0 20px;
}
p {
  display: flex;
  // height: 40px;
  margin-bottom: 20px;
  align-items: center;
  .color-blue {
    color: #3a99fd;
    width: 70px;
    height: 19px;
    text-align: right;
  }
  .color-white {
    color: white;
    padding: 0 0 0 20px;
  }
}
.dpflex {
  display: flex;
  .left {
    flex: 1;
  }
  .center {
    flex: 1;
  }
  .right {
    flex: 1;
    .cell-lend {
      margin-left: 20px;
      width: 76px;
    }
  }
}
</style>