xianmen-antd/src/views/repair/application-form/TransferApproval.vue

<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="6" :sm="24">
            <a-form-item label="关键字">
              <a-input v-model="queryParam.keyword" placeholder="设备名称/编号/问题描述" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="报修起始日期">
              <a-date-picker v-model="queryParam.searchStartTime" style="width: 100%"
                :format="BaseTool.Date.PICKER_NORM_DATETIME_PATTERN" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="报修结束日期">
              <a-date-picker v-model="queryParam.searchEndTime" style="width: 100%"
                :format="BaseTool.Date.PICKER_NORM_DATETIME_PATTERN" />
            </a-form-item>
          </a-col>
          <a-col :md="8 || 24" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleOk()">查询</a-button>
              <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData"
      :scroll="{ x: 1000, y: BaseTool.Constant.scrollY }" showPagination="auto">
      <span slot="action" slot-scope="record">
        <template>
          <a @click="handleView(record)">查看</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确认通过该转派申请？" @confirm="handleApprove(record)">
            <a>通过</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a @click="handleReject(record)">驳回</a>
        </template>
      </span>
      <span slot="status" slot-scope="text">
        <badge :text="BaseTool.Object.getField(statusMap, text)"
          :status="DictCache.COLOR.REPAIR_APPLICATION_FORM_STATUS[text]" />
      </span>
    </s-table>

    <detail ref="detailModal" @ok="handleOk" />
    <transfer-approve-form ref="approveForm" @ok="handleOk" />
  </a-card>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import Detail from './modules/DetailRepair'
import TransferApproveForm from './modules/TransferApproveForm'
import { getRepairApplicationFormPage, fetchRepairApplicationForm, transferApprove, transferReject } from '@/api/repair/application-form'

export default {
  name: 'TransferApproval',
  components: {
    STable,
    Ellipsis,
    Detail,
    TransferApproveForm
  },
  data() {
    return {
      queryParam: {
        status: 8,
        searchStartTime: null,
        searchEndTime: null
      },
      statusMap: {},
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: '70px',
          customRender: (text, record, index) => {
            return `${(this.$refs.table.localPagination.current - 1) * this.$refs.table.localPagination.pageSize + index + 1}`
          }
        },
        {
          title: '报修单号',
          width: '150px',
          dataIndex: 'no'
        },
        {
          title: '设备编号',
          width: '120px',
          dataIndex: 'sbNo'
        },
        {
          title: '设备名称',
          width: '150px',
          dataIndex: 'sbName'
        },
        {
          title: '报修人',
          width: '100px',
          dataIndex: 'actualUser'
        },
        {
          title: '当前维修人',
          width: '120px',
          dataIndex: 'repairUserName'
        },
        {
          title: '报修时间',
          width: '180px',
          dataIndex: 'applyTime'
        },
        {
          title: '状态',
          width: '120px',
          fixed: 'right',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          fixed: 'right',
          key: 'action',
          width: '180px',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: parameter => {
        parameter = {
          ...parameter,
          ...this.queryParam,
          type: 1,
          dataScope: {
            sortBy: 'desc',
            sortName: 'apply_time'
          }
        }
        return getRepairApplicationFormPage(parameter)
          .then(res => {
            return res.data
          })
      }
    }
  },
  created() {
    this.statusMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.REPAIR_APPLICATION_FORM_STATUS)
  },
  methods: {
    handleOk() {
      this.queryParam.searchStartTime = this.queryParam.searchStartTime ? this.BaseTool.Date.formatter(this.queryParam.searchStartTime, this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN) : null
      this.queryParam.searchEndTime = this.queryParam.searchEndTime ? this.BaseTool.Date.formatter(this.queryParam.searchEndTime, this.BaseTool.Date.PICKER_NORM_DATETIME_PATTERN) : null
      this.$refs.table.refresh()
    },
    resetSearchForm() {
      this.queryParam = { status: 8 }
      this.$refs.table.refresh()
    },
    handleView(record) {
      fetchRepairApplicationForm({ id: record.id }).then(res => {
        const modal = this.$refs.detailModal
        modal.base(res.data)
      })
    },
    handleApprove(record) {
      transferApprove({ id: record.id, repairDispatchRemark: '审批通过' })
        .then(() => {
          this.$message.success('转派审批通过')
          this.handleOk()
        })
    },
    handleReject(record) {
      const modal = this.$refs.approveForm
      modal.base(record, 'reject')
    }
  }
}
</script>