yxk-electronic-archives/src/views/system/user/cart.vue

<template>
  <div class="app-container tab-container" style="height: calc(100vh - 140px);">
    <div class="head-container" style="display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;">
      <div class="head-search" style="margin-bottom: 0;">
        <el-input
          v-model="keyWord"
          size="small"
          clearable
          placeholder="输入关键字可模糊检索"
          style="width: 245px;"
          class="filter-item"
          @clear="crud.toQuery"
          @keyup.enter.native="crud.toQuery"
        />
        <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
        <el-button class="filter-item  filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery()">重置</el-button>
      </div>
      <crudOperation>
        <template v-slot:right>
          <el-button size="mini" :disabled="crud.selections.length === 0" @click="handleLend(crud.selections)">
            <i class="iconfont icon-shengchengpandiandan" />
            利用
          </el-button>
          <el-button size="mini" :loading="crud.delAllLoading" :disabled="crud.selections.length === 0" @click="toDelete(crud.selections)">
            <i class="iconfont icon-shanchu" />
            删除
          </el-button>
        </template>
      </crudOperation>
    </div>
    <el-table
      ref="table"
      v-loading="crud.loading"
      class="archives-table"
      :data="crud.data"
      row-key="id"
      style="width: 100%;"
      height="calc(100vh - 266px)"
      @row-click="clickRowHandler"
      @cell-dblclick="tableDoubleClick"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" :reserve-selection="true" width="55" align="center" />
      <el-table-column prop="maintitle" label="题名" />
      <el-table-column prop="archiveNo" label="档号" min-width="200" />
      <el-table-column prop="categoryName" label="门类" align="center" />
      <el-table-column prop="archivesClassName" label="分类" align="center" />
      <el-table-column prop="categoryLevel" label="层级" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.categoryLevel === 3 ? '文件' : '其他' }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="processStatus" label="审批锁定" align="center">
        <template slot-scope="scope">
          <span :class="['row-state', 'row-warehousing', scope.row.processStatus !== 1 ? 'state-active' : '' ]">{{ processedStatusText(scope.row.processStatus) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="加入时间" width="200">
        <template slot-scope="scope">
          <div>{{ scope.row.createTime | parseTime }}</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="crud.data.length !== 0" />
    <LendForm ref="lendFormRef" @close-dialog="closeDialog" />
    <!-- 档案详情 -->
    <ArchivesInfo ref="archivesInfo" :category-id="categoryId" :arc-id="arcId" :is-title-type="isTitleType" />
  </div>
</template>

<script>
import CRUD, { presenter, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import crudOperation from '@crud/CRUD.operation'
import LendForm from '@/views/archiveUtilize/utillizeRecord/module/utilizationProcess'
import ArchivesInfo from '@/views/components/archivesDetail/detail'
import { FetchDelBorrowCar } from '@/api/archiveUtilize/cart'
import { mapGetters } from 'vuex'
import store from '@/store'
export default {
  name: 'Cart',
  components: { pagination, crudOperation, LendForm, ArchivesInfo },
  mixins: [presenter(), crud()],
  cruds() {
    return CRUD({
      url: 'api/archivesUtilize/initborrowCar',
      title: '借阅车',
      crudMethod: { },
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: false,
        reset: false,
        group: false
      }
    })
  },
  data() {
    return {
      isTitleType: 3,
      keyWord: null,
      categoryId: null,
      arcId: ''
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ]),
    processedStatusText() {
      return function(status) {
        let text = ''
        if (status === 1) {
          text = '空闲'
        } else if (status === 2) {
          text = '退回'
        } else if (status === 3) {
          text = '开放'
        } else if (status === 4) {
          text = '销毁'
        } else if (status === 5) {
          text = '利用'
        } else if (status === 6) {
          text = '内部移交'
        } else if (status === 7) {
          text = '外部移交'
        }
        return text
      }
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    resetQuery() {
      this.keyWord = null
      this.crud.toQuery()
    },
    [CRUD.HOOK.beforeRefresh]() {
      this.crud.query.search = this.keyWord
    },
    toDelete(data) {
      console.log(data)
      this.$confirm('此操作将删除所选数据' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const ids = data.map(item => {
          return item.archivesId
        })
        const params = {
          'ids': ids
        }
        FetchDelBorrowCar(params).then((res) => {
          if (res) {
            this.$message({ message: '删除成功', type: 'success', offset: 8 })
            this.crud.refresh()
            store.dispatch('initborrowCar').then(() => {})
          } else {
            this.crud.notify(res.message, CRUD.NOTIFICATION_TYPE.ERROR)
          }
          this.$refs.table.clearSelection()
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
      })
    },
    handleLend(data) {
      console.log('data', data)
      this.$refs.lendFormRef.lendFormVisible = true
      this.$nextTick(() => {
        this.$refs.lendFormRef.detailArcData = []
        data.forEach(item => {
          item.checkedId = [1]
          item.childMenu = [{
            value: 1,
            label: '电子查看'
          },
          {
            value: 2,
            label: '下载'
          },
          {
            value: 3,
            label: '打印'
          },
          {
            value: 4,
            label: '实体借阅'
          }]
        })
        this.$refs.lendFormRef.detailArcData = data
      })
    },
    clickRowHandler(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    tableDoubleClick(row) {
      this.categoryId = row.categoryPid
      this.arcId = row.archivesId
      this.$nextTick(() => {
        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)
        }
        // this.$refs.archivesInfo.isHasFile = true
        // this.$refs.archivesInfo.detailTitle = '文件详情'
        // this.$refs.archivesInfo.getDetial(3, row.archivesId)
        this.$refs.archivesInfo.isFourTest = true
        this.$refs.archivesInfo.archivesInfoVisible = true
        this.$refs.archivesInfo.archivesTabIndex = 0
      })
    },
    closeDialog() {
      this.keyWord = null
      this.crud.toQuery()
      this.$refs.table.clearSelection()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination{
  margin: 10px 0 !important;
}
</style>