yxk-electronic-archives/src/views/archivesManage/openInventory/index.vue

<template>
  <!-- 开放清册 -->
  <div class="app-container  row-container">
    <div class="connection-header collect-header" style="margin-bottom: 20px;">
      <div class="head-search" style="margin-bottom: 0;">
        <el-select
          v-model="status"
          style="margin-right: 10px; width: 110px;"
          placeholder="请选择"
          @change="getBusinessFlowHistory"
        >
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="search" clearable size="small" placeholder="输入关键字可模糊搜索" prefix-icon="el-icon-search" style="width: 200px;" class="filter-item" @keyup.enter.native="getBusinessFlowHistory" @clear="getBusinessFlowHistory" />
        <el-button class="filter-item filter-search" size="mini" type="success" icon="el-icon-search" @click="getBusinessFlowHistory">搜索</el-button>
        <el-button class="filter-item filter-refresh" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>
      </div>
      <el-button size="mini" :disabled="selections.length === 0" @click="doExport(selections)">
        <i class="iconfont icon-daochu" />
        导出
      </el-button>
    </div>
    <el-table ref="table" :data="tableData" style="width: 100%;" height="calc(100vh - 330px)" @select="handleCurrentChange" @selection-change="selectionChangeHandler" @row-dblclick="handleDetail">
      <el-table-column type="selection" align="center" width="55" />
      <el-table-column v-if="inventType===6" prop="business_type" label="类型">
        <template>
          <div>内部移交</div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" min-width="180" />
      <el-table-column prop="reason" label="申请理由" />
      <el-table-column prop="applicant" label="申请人" />
      <el-table-column prop="deptsName" label="申请部门" />
      <el-table-column prop="createTime" label="申请时间">
        <template slot-scope="scope">
          <div>{{ scope.row.createTime }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="completeTime" label="完成时间">
        <template slot-scope="scope">
          <div>{{ scope.row.completeTime }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="状态" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.status === 1" class="row-state ing-state">进行中</span>
          <span v-if="scope.row.status === 2" class="row-state case-cancel">已取消</span>
          <span v-if="scope.row.status === 3" class="row-state end-state">已完成</span>
          <span v-if="scope.row.status === 4" class="row-state cancel-state">不通过</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      v-if="tableData.length !== 0"
      :current-page="page.page"
      :total="page.total"
      :page-size="page.size"
      :pager-count="5"
      layout="total, prev, pager, next, sizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentPage"
    />
    <Detail ref="mDetail" :invent-type="inventType" />
  </div>

</template>

<script>
import Detail from './module/detail'
import { FetchBusinessFlowHistory } from '@/api/archivesManage/library'
import qs from 'qs'
import { exportFile } from '@/utils/index'
import { mapGetters } from 'vuex'

export default {
  name: 'OpenInventory',
  components: { Detail },
  props: {
    inventType: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {
      status: null,
      stateOptions: [
        {
          value: 1,
          label: '进行中'
        },
        {
          value: 2,
          label: '已取消'
        },
        {
          value: 3,
          label: '已完成'
        },
        {
          value: 4,
          label: '不通过'
        }
      ],
      businessType: this.inventType,
      search: '',
      tableData: [],
      selections: [],
      page: {
        page: 0,
        size: 10,
        total: 0
      }
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ])
  },
  created() {
  },
  mounted() {
    this.getBusinessFlowHistory()
  },
  methods: {
    resetQuery() {
      this.search = ''
      this.status = null
      this.getBusinessFlowHistory()
    },
    getBusinessFlowHistory() {
      const params = {
        'status': this.status,
        'search': this.search,
        'businessType': this.businessType,
        'page': this.page.page,
        'size': this.page.size
      }
      FetchBusinessFlowHistory(params).then((res) => {
        if (res.code !== 500) {
          this.tableData = res.content
          this.page.total = res.totalElements
        } else {
          this.$message.error('获取数据失败')
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleDetail(row) {
      this.$refs.mDetail.rowCurrent = row
      this.$refs.mDetail.detialVisible = true
    },
    // 触发单选
    handleCurrentChange(selection, row) {
      this.selections = selection
    },
    handleSizeChange(size) {
      this.page.size = size
      this.page.page = 1
    },
    handleCurrentPage(val) {
      this.page.page = val
    },
    selectionChangeHandler(val) {
      this.selections = val
    },
    doExport(data) {
      this.$confirm('此操作将导出所选数据' + '<span>你是否还要继续？</span>', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        const ids = []
        data.forEach(val => {
          ids.push(val.id)
        })
        const params = {
          'businessIds': ids,
          'businessType': this.businessType
        }
        exportFile(this.baseApi + '/api/control/exportBusinessFlow?' + qs.stringify(params, { indices: false }))
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/collect-reorganizi.scss";
.connection-header{
  padding: 0 !important;
}
.case-cancel{
  color: #a6adb6;
  border: 1px solid #e6e8ed;
  background-color: #f3f5f9;
}
</style>