drp-ui/src/views/business/as/problemInfo/detail.vue

<template>
    <div class="detail">
      <el-row >
        <el-col :span="flag==false?20:24">
          <el-row :gutter="10" type="flex" justify="space-between">
            <el-col :span="6" v-if="flag">工单详情(待解决)</el-col>
            <el-col :span="6" v-if="flag == false" > 工单详情</el-col>
            <el-col :span="2" >
              <el-button type="text" @click="handleSolve"> 解决</el-button>
<!--              <el-button type="text" @click="handleWorkOrder"> 转单</el-button>-->
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="4" v-if="flag==false" >
          处理过程  <a style="color:orange">持续{{ this.data.processingTime }}</a>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="flag==false?20:24">
          <el-descriptions>
            <el-descriptions-item label="问题编码">{{ this.data.problemCode }}</el-descriptions-item>
            <el-descriptions-item label="来源项目/医院">{{this.data.projectSource}}
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ this.data.createTime }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="2">
            <el-descriptions-item label="提问人">{{ this.data.questioner }}</el-descriptions-item>
            <el-descriptions-item label="科室信息">{{this.data.roomInformation}}</el-descriptions-item>
            <el-descriptions-item label="问题类别">{{this.data.problemType}}
            </el-descriptions-item>
            <el-descriptions-item label="处理负责人">{{this.data.processorName}}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1">
            <el-descriptions-item label="问题描述">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="this.data.problemDescription"
                disabled>
              </el-input>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1">
            <el-descriptions-item label="问题图片">
              <div class="block" v-for="(item,index) in this.data.problemPicture">
                <el-image
                  style="width: 100px; height: 100px;margin-left: 20px"
                  :src="item.filepath"
                  :preview-src-list="index">
                </el-image>
              </div>
            </el-descriptions-item>
          </el-descriptions>

          <el-divider v-if="flag1==true"></el-divider>
          <el-descriptions v-if="flag1==true">
            <el-descriptions-item label="问题处理人">{{ this.data.processorName }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1" v-if="flag1==true">
            <el-descriptions-item label="处理反馈">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="this.data.processingFeedback"
                disabled>
              </el-input>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1" v-if="flag1==true">
            <el-descriptions-item label="处理图片">
              <div class="block" v-for="(item,index) in this.data.processorPicture">
                <el-image
                  style="width: 100px; height: 100px;margin-left: 20px"
                  :src="item.filepath"
                  :preview-src-list="index">
                </el-image>
              </div>
            </el-descriptions-item>
          </el-descriptions>

        </el-col>
        <el-col :span="4" v-if="flag==false" style="height: 1000px">
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in this.data.processFlow"
              :key="index"
              :timestamp="activity.timestamp">
              {{ activity.content+'\n'+'处理人:'+activity.processorName+activity.processorWay }}
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-row>

      <el-dialog
        title="确认该问题已解决？"
        :visible.sync="dialogSolve"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="15">
              <el-form-item label="描述" prop="processingFeedback">
                <el-input
                  v-model="form.processingFeedback"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入处理反馈"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <el-form-item label="图片">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  list-type="picture-card"
                  :file-list="form.processorPicture"
                  action="#"
                  :on-change="handleChange"
                  :on-remove="handleRemove"
                  :on-preview="handlePictureCardPreview"
                  :auto-upload="false"
                  :limit="1"
                >
                  <i slot="default" class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisiblePicture" append-to-body>
                  <img style="width: 100%;height: 100%"  :src="dialogImageUrl" />
                </el-dialog>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitFormSolve">确 定</el-button>
      </el-dialog>

      <el-dialog
        title="确认该问题转工单处理？"
        :visible.sync="dialogWorkOrder"
        width="30%"
        :before-close="handleClose">
        <el-form ref="form" :model="form" >
          <el-row>
            <el-col :span="15">
              <el-form-item >
                <el-select v-model="form.workOrderProcessor" filterable="true" placeholder="请选择工单处理人" clearable>
                  <el-option
                    v-for="item in workOrderProcessorOptions"
                    :key="item.userName"
                    :label="item.nickName"
                    :value="item.userName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="15">
              <el-form-item>
                <el-date-picker
                  v-model="form.processorEndTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择处理截至时间">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitFormWorkOrder">确 定</el-button>
      </el-dialog>


    </div>
</template>

<script>
import {getDetail} from "@/api/business/as/detail";
import axios from "axios";
import {getToken} from "@/utils/auth";
import {getProcessorOptions, getWorkOrderProcessorList, pushWorkOrder} from "@/api/business/as/problemInfo";

export default {
  created() {
    if(this.$route.query.id){
      this.queryParams.id = this.$route.query.id
      getDetail(this.queryParams.id).then(res => {
        if(200 == res.code){
          this.data=res.data
          this.hospitalId=res.data.hospitalId
          if(res.data.problemStateSolve == 0 || res.data.problemStateConvert == 0){
            this.flag=false
          }
          if(res.data.problemStateSolve == 0){
            this.flag1=true
          }
        }
      })
    }
  },
  methods:{
    //预览图片功能
    handlePictureCardPreview(file) {
      this.dialogVisiblePicture = true
      this.dialogImageUrl = file.url
    },
    submitFormWorkOrder(){
      pushWorkOrder(this.form).then(res =>{
        if(res.code == 200){
          this.$modal.msgSuccess("转工单成功");
        }
      })
      this.dialogWorkOrder=false
    },
    cancel(){
      this.dialogSolve=false
      this.dialogWorkOrder=false
    },
    handleChange(file, fileList) {
      this.pictureList = fileList
    },
    async submitFormSolve(){
      let formData = new FormData();
      formData.append("problemInfo",new Blob([JSON.stringify(this.form)], {type: "application/json"}))
      if(this.pictureList.length < 1 ){
        formData.append("files",null)
      }else {
        this.pictureList.forEach(file =>{
          formData.append("files",file.raw)
        })
      }
      return await axios({
        method: "POST",
        url: process.env.VUE_APP_BASE_API + '/mk/as/problem/editSolve1',
        headers: {
          'Content-Type': 'multipart/form-data',
          'Authorization': 'Bearer ' + getToken()
        },
        data: formData,
      }).then(res =>{
        if(res.data.code == 200){
          this.$modal.msgSuccess("修改成功");
          this.dialogSolve = false
          getDetail(this.queryParams.id).then(res => {
            if(200 == res.code){
              this.data=res.data
            }
          })
        }
      })
    },
    async handleRemove(file, fileList) {
      await axios({
        method: "get",
        url: `https://dev-sy.derom.com/document-center/fastdfs/delete?id=${file.id}`,
      }).then(res =>{
        if(res.data.code == 200) {
          this.$message.success("移除图片成功")
        }
      })
      this.form.problemPicture=fileList
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleSolve(){
      this.dialogSolve=true
      this.form=this.data
    },
    handleWorkOrder(){
      getProcessorOptions(this.hospitalId).then(res =>{
        if(res.code == 200){
          this.workOrderProcessorOptions=res.data
        }
      })
      this.dialogWorkOrder=true
      this.form=this.data
    },
  },
  data() {
    return {
      hospitalId:'',
      dialogImageUrl:'',
      dialogVisiblePicture: false,
      workOrderProcessorOptions:[],
      pictureList:[],
      form: {
        id:undefined,
        problemCode:'',
        projectSource:'',
        questioner:'',
        problemType:'',
        roomInformation:'',
        processor:'',
        processorWay:'',
        problemDescription:'',
        problemPicture:[],
        questionerWay:'',
        processingFeedback:'',
        problemStateSolve:'',
        problemStateConvert:'',
        processorPicture:[],
        workOrderProcessor:'',
        processorEndTime:'',
      },
      rules: {
        processingFeedback: [
          { required: true, message: '请输入处理反馈', trigger: 'blur' },
        ],
      },
      dialogSolve:false,
      dialogWorkOrder:false,
      problemTypeOptions:[
        {
          value: '1',
          label: '软件问题'
        },
        {
          value: '2',
          label: '硬件问题'
        },
        {
          value: '3',
          label: '服务问题'
        },
        {
          value: '4',
          label: '其他问题'
        },
      ],
      data:{},
      queryParams:{
        id:undefined,
      },
      flag:true,
      flag1:false,
      reverse: false,
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  margin: 20px;
}
.el-divider--vertical {
  height: 100%;
}

</style>