yxk-electronic-archives/src/views/system/processManage/runningProcess/module/businessDetails/index.vue

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" height="300" @cell-dblclick="tableDoubleClick">
      <el-table-column type="index" align="center" width="55" />
      <el-table-column prop="fondsName" label="所属全宗" min-width="120" />
      <el-table-column prop="categoryName" label="门类名称" min-width="120" />
      <el-table-column prop="categoryLevel" label="整理方式">
        <template slot-scope="scope">
          <span>{{ scope.row.categoryLevel === 2 ? '案卷整理' : '按件整理' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="archiveNo" label="项目号/档号" min-width="200" />
      <el-table-column prop="maintitle" label="题名" min-width="200" />
      <el-table-column v-if="isUtilize" prop="utilizeType" label="利用方式" width="300">
        <template slot-scope="scope">
          <el-checkbox-group v-model="scope.row.utilizeType" class="checkbox-style">
            <el-checkbox v-for="item in uselist" :key="item.value" :label="item.value" disabled>{{ item.label }}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-table-column>
      <el-table-column v-if="isUtilize" prop="utilizeState" label="实体借阅状态" align="center" width="160">
        <template slot-scope="scope">
          <el-select
            v-if="isFlowableForm"
            v-model="scope.row.utilizeState"
            placeholder="请选择"
            style="width: 140px;"
            @change="handleChange(scope.row.archivesId,$event)"
          >
            <el-option
              v-for="item in utilizeStateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <div v-else>
            <!-- 实体利用状态 -1.未确认流程(未审批) 0.无需借阅 1.同意借阅 2.不允许借阅 3.已归还 -->
            <span v-if="scope.row.utilizeState === -1" class="row-state soon-state">审批中</span>
            <span v-if="scope.row.utilizeState === 0" class="row-state end-state">无需借阅</span>
            <span v-if="scope.row.utilizeState === 1" class="row-state end-state">同意借阅</span>
            <span v-if="scope.row.utilizeState === 2" class="row-state cancel-state">不允许借阅</span>
            <span v-if="scope.row.utilizeState === 3" class="row-state end-state">已归还</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler"  -->
    <el-pagination :page-size.sync="page.size" :total="page.total" :current-page.sync="page.page" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" />
    <ArchivesInfo ref="archivesInfo" :category-id="categoryId" :arc-id="arcId" :is-title-type="isTitleType" />
  </div>
</template>

<script>
import ArchivesInfo from '@/views/components/archivesDetail/detail'

export default {
  name: 'BusinessDetails',
  components: { ArchivesInfo },
  props: {
    tableData: {
      type: Array,
      default: null
    },
    isUtilize: {
      type: Boolean,
      default: false
    },
    isFlowableForm: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      page: {
        total: 0,
        size: 10,
        page: 1
      },
      categoryId: null,
      arcId: '',
      isTitleType: 3,
      uselist: [
        {
          value: 1,
          label: '电子查看'
        },
        {
          value: 2,
          label: '下载'
        },
        {
          value: 3,
          label: '打印'
        },
        {
          value: 4,
          label: '实体借阅'
        }
      ],
      utilizeStateOptions: [
        {
          value: -1,
          label: '请选择'
        },
        {
          value: 0,
          label: '无需借阅'
        },
        {
          value: 1,
          label: '同意借阅'
        },
        {
          value: 2,
          label: '不允许借阅'
        }
      ]
    }
  },
  methods: {
    handleChange(id, value) {
      this.$emit('select-change', { id, value })
    },
    // table - 双击查看详情
    tableDoubleClick(row) {
      // this.$refs.archivesDetail.archivesInfoVisible = true
      // this.$refs.archivesDetail.getDetial()
      // this.$refs.archivesDetail.detailTitle = '项目详情'
      this.categoryId = row.categoryPid
      this.arcId = row.archivesId
      this.$nextTick(() => {
        this.$refs.archivesInfo.archivesInfoVisible = true
        this.$refs.archivesInfo.archivesTabIndex = 0
        this.$refs.archivesInfo.isFourTest = true
        if (row.categoryLevel === 2) {
          this.$refs.archivesInfo.isHasFile = false
          this.$refs.archivesInfo.detailTitle = '案卷详情'
          this.$refs.archivesInfo.getDetial(2, row.archivesId)
        } else {
          this.$refs.archivesInfo.isHasFile = true
          this.$refs.archivesInfo.detailTitle = '文件详情'
          this.$refs.archivesInfo.getDetial(3, row.archivesId)
        }
      })
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.loading = true
      this.page.size = e
      this.page.page = 1
      this.params.size = e
      this.params.page = 0
      // this.doQuery(this.params)
      this.loading = false
    },
    // 当前页改变
    pageChangeHandler(e) {
      this.loading = true
      this.page.page = e
      this.params.page = e - 1
      // this.doQuery(this.params)
      this.loading = false
    }
  }
}

</script>

<style lang='scss' scoped>
</style>