remuneration/src/views/workOrder/approval/index.vue

<template>
  <div v-loading="loading">
    <IndexPage ref="indexPageRefs" :dataType="dataType">
      <template #actions="{ row }">
        <m-button type="danger" text @click="onDetails(row)">审核</m-button>
      </template>
    </IndexPage>
    <ApprovalDetails ref="approvalDetailsRefs" @close="onClose">
      <template #approval-btn>
        <div>
          <m-button type="success" size="small" icon="el-icon-check" class="mr-3" @click="onApproval">通过</m-button>
          <el-popover
            placement="bottom"
            v-model="visible"
            width="300"
            trigger="click"
          >
            <el-input v-model="msg" type="textarea" :rows="3" placeholder="请输入拒绝原因"></el-input>
            <div class="pt-3 text-right">
              <m-button size="mini" @click="visible = false">取消</m-button>
              <m-button size="mini" type="orange" @click="onApprovalReject">提交</m-button>
            </div>
            <template #reference>
              <m-button type="danger" size="small" icon="el-icon-close">拒绝</m-button>
            </template>
          </el-popover>
        </div>
      </template>
    </ApprovalDetails>
  </div>
</template>

<script>
import IndexPage from '../components/IndexPage.vue'
import ApprovalDetails from '../components/ApprovalDetails.vue'

import {
  setApproval,
  getApprovalList
} from '@/api/approval'
export default {
  name: 'ApprovalPage',
  components: {
    IndexPage,
    ApprovalDetails
  },
  data () {
    return {
      msg: null,
      visible: false,
      loading: false,
      dataType: 3,
      itemData: {}
    }
  },
  watch: {
    '$route.query.id': {
      handler (val) {
        if (val) {
          this.onGetDetails(val)
        }
      },
      immediate: true
    }
  },
  // created () {
  //   if (this.$route.query.id) {
  //     // 获取数据明细
  //     this.onGetDetails(this.$route.query.id)
  //   }
  // },
  methods: {
    onClose () {
      this.$router.push(this.$route.path)
    },
    async onGetDetails (workFlowInstanceId) {
      this.loading = true
      try {
        const { data } = await getApprovalList({
          dataType: this.dataType,
          entity: {
            workFlowInstanceId
          }
        })
        if (!data.records.length) {
          return
        }
        // 唤起审核详情
        this.onDetails(data.records[0])
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.loading = false
      }
    },
    onRefresh () {
      this.$refs.approvalDetailsRefs.close()
      this.$refs.indexPageRefs.onInit()
    },
    onDetails (item) {
      this.itemData = item
      this.msg = null
      this.$refs.approvalDetailsRefs.open(item)
    },
    onApproval () {
      this.$confirm('确定审核通过吗？', '提示').then(async _ => {
        try {
          await setApproval({
            workFlowInstanceId: this.itemData.workFlowInstanceId,
            status: 1
          })
          this.$message.success('审核通过')
          this.onRefresh()
        } catch (error) {
          this.$message.error(error)
        }
      }).catch(_ => {})
    },
    async onApprovalReject () {
      if (!this.msg) {
        this.$message.error('请输入拒绝原因')
        return
      }
      try {
        await setApproval({
          workFlowInstanceId: this.itemData.workFlowInstanceId,
          status: 2,
          msg: this.msg
        })
        this.$refs.approvalDetailsRefs.close()
        this.$message.success('拒绝成功')
        this.onRefresh()
      } catch (error) {
        this.$message.error(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>