remuneration/src/views/approval/index.vue

<template>
  <div class="pa-3 white">
    <m-search class="mb-3" :items="searchItems" v-model="searchValues" @search="onSearch"></m-search>
    <m-table
      v-loading="loading"
      :items="items"
      :headers="headers"
      :page-size="pageInfo.size"
      :page-current="pageInfo.current"
      :total="total"
      @page-change="onPageChange"
    >
      <template #opType="{ row }">
        <el-tag size="small" :type="statusList[row.opType].color">{{ statusList[row.opType].text }}</el-tag>
      </template>
      <template #actions="{ row }">
        <m-button type="primary" text @click="onDetails(row)">审批进度</m-button>
        <template v-if="row.opType === 1">
          <m-button  type="primary" class="mr-2" text @click="onApproval(row.workFlowInstanceId)">通过审核</m-button>
          <m-button type="danger" text @click="onApprovalReject(row)">拒绝通过</m-button>
        </template>
      </template>
    </m-table>
    <ApprovalProgress ref="approvalProgressRefs"></ApprovalProgress>
    <ApprovalReject ref="approvalRejectRefs" @refresh="onInit"></ApprovalReject>
  </div>
</template>

<script>
import {
  getApprovalList,
  getApprovalProgress,
  setApproval
} from '@/api/approval'
import ApprovalProgress from './approvalProgress.vue'
import ApprovalReject from './approvalReject.vue'
export default {
  name: 'ApprovalPage',
  components: {
    ApprovalProgress,
    ApprovalReject
  },
  data () {
    return {
      statusList: [
        { text: '我发起的 ', color: 'default' },
        { text: '待我审批 ', color: 'warning' },
        { text: '我已审批 ', color: 'success' }
      ],
      searchItems: [
        {
          label: '名称',
          prop: 'name',
          type: 'input',
          options: {
            placeholder: '请输入名称'
          }
        }
      ],
      searchValues: {
        name: null
      },
      headers: [
        { label: '名称', prop: 'title' },
        { label: '发起人', prop: 'createUserName' },
        { label: '状态', prop: 'opType', align: 'center' },
        { label: '发起时间', prop: 'createDate' },
        { label: '版本号', prop: 'version' },
        { label: '操作', prop: 'actions', fixed: 'right', width: 300 }
      ],
      items: [],
      total: 0,
      pageInfo: {
        current: 1,
        size: 10
      },
      loading: false
    }
  },
  created () {
    this.onInit()
  },
  methods: {
    async onInit () {
      this.loading = true
      try {
        const { data } = await getApprovalList({
          page: {
            ...this.pageInfo,
            orders: [
              { column: 'create_date', asc: false }
            ]
          },
          entity: {
            ...this.searchValues
          }
        })
        this.items = data.records
        this.total = data.total || 0
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    async onDetails ({ workFlowInstanceId }) {
      try {
        const { data } = await getApprovalProgress({ workFlowInstanceId })
        this.$refs.approvalProgressRefs.open(data)
      } catch (error) {
        this.$message.error(error)
      }
    },
    onApprovalReject (item) {
      this.$refs.approvalRejectRefs.open(item)
    },
    async onApproval (workFlowInstanceId, status) {
      try {
        await setApproval({
          workFlowInstanceId: workFlowInstanceId,
          status: 1
        })
        this.$message.success(status ? '审批通过' : '拒绝成功')
      } catch (error) {
        this.$message.error(error)
      }
    },
    onSearch () {
      this.pageInfo.current = 1
      this.onInit()
    },
    onPageChange (index) {
      this.pageInfo.current = index
      this.onInit()
    }
  }
}
</script>

<style lang="scss" scoped>
  /* 自定义样式 */
</style>