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

<template>
  <div>
    <el-table :data="tableData" style="width: 100%" height="320" @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>
    <el-pagination :page-size.sync="setPage.size" :total="setPage.total" :current-page.sync="setPage.page+1" style="margin-top: 8px;" layout="total, prev, pager, next, sizes" @size-change="sizeChangeHandler($event)" @current-change="pageChangeHandler" />
    <ArchivesInfo ref="archivesInfo" :category-id="categoryId" :arc-id="arcId" :is-title-type="isTitleType" />
  </div>
</template>

<script>
import ArchivesInfo from '@/views/components/archivesDetail/detail'
import { parseTime } from '@/utils/index'

export default {
  name: 'BusinessDetails',
  components: { ArchivesInfo },
  props: {
    tableData: {
      type: Array,
      default: null
    },
    isUtilize: {
      type: Boolean,
      default: false
    },
    isFlowableForm: {
      type: Boolean,
      default: false
    },
    setPage: {
      type: Object,
      default: function() {
        return {
          total: 0,
          size: 10,
          page: 0
        }
      }
    },
    baseInfo: {
      type: Object,
      default: function() {
        return { }
      }
    }
  },
  data() {
    return {
      categoryId: null,
      arcId: '',
      isTitleType: 3,
      uselist: [
        {
          value: 1,
          label: '电子查看'
        },
        {
          value: 2,
          label: '下载'
        },
        // {
        //   value: 3,
        //   label: '打印'
        // }
        {
          value: 4,
          label: '实体借阅'
        }
      ],
      utilizeStateOptions: [
        {
          value: 1,
          label: '同意借阅'
        },
        {
          value: 2,
          label: '不允许借阅'
        }
      ]

    }
  },
  mounted() {
  },
  methods: {
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    handleChange(id, value) {
      this.$emit('select-change', { id, value })
    },
    // table - 双击查看详情
    tableDoubleClick(row) {
      // 利用得情况会是true
      // console.log('666baseInfo', this.baseInfo)
      // console.log('baseInfo.status === 3 ???', this.baseInfo.status)
      // console.log('giveStartTime ???', parseTime(this.baseInfo.giveStartTime))
      // console.log('giveEndTime ???', parseTime(this.baseInfo.giveEndTime))
      // console.log('isUtilize', this.isUtilize)
      // console.log('row', row)

      this.categoryId = row.categoryPid
      this.arcId = row.archivesId
      this.$nextTick(() => {
        const currentDate = new Date()
        const formattedDate = this.formatDate(currentDate)
        // console.log('currentDate', currentDate)
        // console.log(parseTime(this.baseInfo.giveStartTime))
        const isStartTimeValid = parseTime(this.baseInfo.giveStartTime) <= formattedDate
        const isEndTimeValid = parseTime(this.baseInfo.giveEndTime) >= formattedDate
        console.log(isStartTimeValid)
        console.log(isEndTimeValid)
        // 根据条件设置 isShowUtilizeHandleBtn
        if (this.isUtilize && this.baseInfo.status === 3 && isStartTimeValid && isEndTimeValid) {
          this.$refs.archivesInfo.isShowUtilizeHandleBtn = true
        } else {
          this.$refs.archivesInfo.isShowUtilizeHandleBtn = false
        }
        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)
        }
      })
    },
    // 当前页改变
    pageChangeHandler(e) {
      this.$emit('page-change', e)
    },
    // 每页条数改变
    sizeChangeHandler(e) {
      this.$emit('size-change', e)
    }
  }
}

</script>

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