maintenance-detail.vue

<template>
  <div class="page-content">
    <a-spin :spinning="confirmLoading">
      <div style="padding:24px 30px;font-weight:600;">报修流程</div>
      <div class="row-box">
        <a-steps :current="currentStep">
          <a-step v-for="(item, index) in auditList" :key="index" :title="item.title" :description="item.time" />
        </a-steps>
      </div>
      <a-divider />
      <div style="padding:0 30px 24px;font-weight:600;">报修信息</div>
      <j-form-container :disabled="true">
        <a-form-model ref="form" :model="model" slot="detail">
          <a-row>
            <a-col :span="12">
              <a-form-model-item label="报修主题" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repairTitle">
                <a-input v-model="model.repairTitle" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="报修单号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="id">
                <a-input v-model="model.id" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="报修物品" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repairArticle">
                <a-input v-model="model.repairArticle" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="预约上门时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="reservationTime">
                <a-input v-model="model.reservationTime" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="报修人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="ownerName">
                <a-input v-model="model.ownerName" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="报修位置" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repairAddress">
                <a-input v-model="model.repairAddress" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="报修描述" :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }" :wrapperCol="wrapperCol"
                prop="repairDesc">
                <a-textarea v-model="model.repairDesc" placeholder="请输入" style="width:80%" />
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="报修图片" :labelCol="{ xs:{ span: 24 }, sm:{ span: 2 } }" :wrapperCol="wrapperCol"
                prop="repairPhotoList">
                <j-image-upload :isMultiple="true" text="点击上传" bizPath="scott/pic"
                  v-model="model.repairPhotoList"></j-image-upload>
              </a-form-model-item>
            </a-col>

            <template v-if="model.maintenanceName">
              <a-col :span="12">
                <a-form-model-item label="维修员" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="maintenanceName">
                  <a-input v-model="model.maintenanceName" placeholder="请输入"></a-input>
                </a-form-model-item>
              </a-col>
              <a-col :span="24">
                <a-form-model-item label="维修记录" :labelCol="{ xs:{ span: 24 }, sm:{ span: 2 } }" :wrapperCol="wrapperCol"
                  prop="maintenancePhoto">
                  <j-image-upload :isMultiple="true" text="点击上传" bizPath="scott/pic"
                    v-model="model.maintenancePhoto"></j-image-upload>
                </a-form-model-item>
              </a-col>
            </template>
            <a-col :span="12">
              <a-form-model-item label="工单状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="repairStatusName">
                <a-input v-model="model.repairStatusName" placeholder="请输入"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="24"
              v-if="(model.repairStatus === 'initiateRefuse' || model.repairStatus === 'finishRefuse') && model.auditOpinion">
              <a-form-model-item label="驳回理由" :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }" :wrapperCol="wrapperCol"
                prop="auditOpinion">
                <a-textarea v-model="model.auditOpinion" placeholder="请输入" style="width:80%" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
      <j-form-container v-if="formShow">
        <a-form-model ref="form" :model="form" slot="detail">
          <a-row>
            <a-col :span="24">
              <a-form-model-item label="审核意见" :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }" :wrapperCol="wrapperCol"
                prop="repairStatus">
                <a-select v-model="form.repairStatus" placeholder="请选择与业主关系" style="width:50%">
                  <template v-if="model.repairStatus === 'initiateWaitAudit'">
                    <a-select-option value="waitDispatch">审核通过</a-select-option>
                    <a-select-option value="initiateRefuse">审核驳回</a-select-option>
                  </template>
                  <template v-if="model.repairStatus === 'finishWaitAudit'">
                    <a-select-option value="finishAuditPass">审核通过</a-select-option>
                    <a-select-option value="finishRefuse">审核驳回</a-select-option>
                  </template>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" v-if="form.repairStatus === 'initiateRefuse' || form.repairStatus === 'finishRefuse'">
              <a-form-model-item label="驳回理由" :labelCol="{ xs: { span: 24 }, sm: { span: 2 } }" :wrapperCol="wrapperCol"
                prop="auditOpinion">
                <a-textarea v-model="form.auditOpinion" placeholder="请输入" style="width:80%" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>

      <div style="text-align:center">
        <a-button @click="onReturn">返回</a-button>
        <a-button style="margin-left: 16px" type="primary" v-if="formShow" @click="onSubmit">提交</a-button>
      </div>
    </a-spin>
  </div>
</template>

<script>
import { auditCommunityRepairApi, queryCommunityRepairApi } from '@/api/api'
import { REPAIR_STATUS, filterDictTextByStatic } from '@/assets/static.js'
const initiatewaitAuditList = [
  { title: '提交维修信息', time: '' },
  { title: '报单待审核', time: '' },
  { title: '待派单', time: '' },
  { title: '维修中', time: '' },
  { title: '提单待审核', time: '' },
  { title: '完成', time: '' },
]
export default {
  name: 'PropertyChargruleForm',
  inject: ['closeCurrent'],
  data() {
    return {
      repairStatus: REPAIR_STATUS,
      auditList: [],
      currentStep: 1,
      model: {},
      form: {
        repairStatus: '',
        auditOpinion: '',
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
      confirmLoading: false,
      initiatewaitAuditList: [
        { title: '提交维修信息', time: '' },
        { title: '报单待审核', time: '' },
        { title: '待派单', time: '' },
        { title: '维修中', time: '' },
        { title: '提单待审核', time: '' },
        { title: '完成', time: '' },
      ]
    }
  },
  computed: {
    formShow() {
      return this.$route.query.type === 'audit'
    },
  },
  created() {
    //备份model原始值
    this.getDetail()
  },
  methods: {
    async getDetail() {
      this.confirmLoading = true
      let { result } = await queryCommunityRepairApi({ id: this.$route.query.id })
      result.repairPhotoList = result.repairPhoto.split(',')
      this.model = { ...result }
      this.confirmLoading = false
      this.model.repairStatusName = filterDictTextByStatic(REPAIR_STATUS, this.model.repairStatus)
      if (result.repairStatus === 'initiateRefuse') {
        this.initiatewaitAuditList[0].time = '提交成功' + result.createTime
        this.initiatewaitAuditList[1].time = '审核驳回' + result.initiateAuditTime
        this.auditList = [...this.initiatewaitAuditList]
      } else if (result.repairStatus === 'waitDispatch') {
        this.initiatewaitAuditList[0].time = '提交成功' + result.createTime
        this.initiatewaitAuditList[1].time = '审核通过' + result.initiateAuditTime
        this.auditList = [...this.initiatewaitAuditList]
        this.currentStep = 2
      } else if (result.repairStatus === 'waitReceive') {
        this.initiatewaitAuditList[0].time = '提交成功' + result.createTime
        this.initiatewaitAuditList[1].time = '审核通过' + result.initiateAuditTime
        this.initiatewaitAuditList[2].time = '派单成功待接收' + result.updateTime
        this.auditList = [...this.initiatewaitAuditList]
        this.currentStep = 3
      } else if (result.repairStatus === 'inRepair') {
        this.initiatewaitAuditList[0].time = '提交成功' + result.createTime
        this.initiatewaitAuditList[1].time = '审核通过' + result.initiateAuditTime
        this.initiatewaitAuditList[2].time = '派单成功待接收' + result.updateTime
        this.auditList = [...this.initiatewaitAuditList]
        this.currentStep = 3
      } else if (result.repairStatus === 'finishWaitAudit') {
        this.initiatewaitAuditList[0].time = '提交成功' + result.createTime
        this.initiatewaitAuditList[1].time = '审核通过'
        this.initiatewaitAuditList[2].time = '派单成功' + result.dispatchTime
        this.initiatewaitAuditList[3].time = `维修员'${result.updateBy}'维修成功 ${result.updateTime}`
        this.auditList = [...this.initiatewaitAuditList]
        this.currentStep = 4
      } else if(result.repairStatus === 'finishRefuse') {
        this.initiatewaitAuditList[0].time = '提交成功' + result.createTime
        this.initiatewaitAuditList[1].time = '审核通过' + result.initiateAuditTime
        this.initiatewaitAuditList[2].time = '派单成功' + result.dispatchTime
        this.initiatewaitAuditList[3].time = `维修员'${result.updateBy}'维修成功 ${result.updateTime}`
        this.initiatewaitAuditList[4].time = '审核驳回' + result.updateTime
        this.auditList = [...this.initiatewaitAuditList]
        this.currentStep = 4
      } else if (result.repairStatus === 'finishAuditPass') {
        this.initiatewaitAuditList[0].time = '提交成功' + result.createTime
        this.initiatewaitAuditList[1].time = '审核通过'
        this.initiatewaitAuditList[2].time = '派单成功' + result.dispatchTime
        this.initiatewaitAuditList[3].time = `维修员'${result.updateBy}'维修成功`
        this.initiatewaitAuditList[4].time = '审核通过' + result.updateTime
        this.auditList = [...this.initiatewaitAuditList]
        this.currentStep = 5
      } else {  // 提单待审核
        this.initiatewaitAuditList[0].time = '提交成功' + result.createTime
        this.auditList = [...this.initiatewaitAuditList]
      }
    },
    onReturn() {
      // this.$store.dispatch('tags/delView', this.$route.path)
      // this.$router.go(-1)
      this.closeCurrent()
    },
    async onSubmit() {
      if (this.form.repairStatus) {
        let res = await auditCommunityRepairApi({
          id: this.$route.query.id,
          repairStatus: this.form.repairStatus,
          auditOpinion: this.form.auditOpinion,
        })
        this.$message.success(res.message)
        this.onReturn()
      }else{
        this.$message.warning('请选择审核意见');
      }
    },
  },
}
</script>

<style scoped lang="less">
.page-content {
  min-height: 430px;
  background-color: #fff;
  padding: 0 15px 50px 5px;
  .row-box {
    padding: 0 50px;
  }
}
</style>