客户资料 巡检任务业务

renkang

2025-05-13 0a99001be87811ebb884b8f3f491f48054a22330

 admin/src/views/workorder/components/handleProblem.vue

@@ -1,95 +1,122 @@
<template>
    <GlobalWindow
        title="问题上报"
        :showConfirm="false"
        :title="title"
        :visible.sync="visible"
        width="100%">
        width="100%"
        @confirm="confirm">
        <div class="wt">
            <div class="wt_head">
                <div class="wt_head_title">
                    问题详情
                    <el-tag style="margin-left: 10px;">转工单</el-tag>
                    <div class="title">问题详情</div>
                    <el-tag style="margin-left: 10px;" v-if="info.dealStatus === 0">待处理</el-tag>
                    <el-tag style="margin-left: 10px;" v-if="info.dealStatus === 1">已转工单</el-tag>
                    <el-tag style="margin-left: 10px;" v-if="info.dealStatus === 2">已关闭</el-tag>
                </div>
                <el-button>查看工单</el-button>
            </div>
            <div class="wt_content">
                <div class="wt_content_row" style="width: 25%;">
                    位置：-
                    位置：{{info.position || '-'}}
                </div>
                <div class="wt_content_row" style="width: 25%;">
                    上报人：张三丰
                    上报人：{{info.name || '-'}}
                </div>
                <div class="wt_content_row" style="width: 50%;">
                    上报人电话：180553847234
                    上报人电话：{{info.phone || '-'}}
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                    上报时间：2024-11-21 12:00:23
                    上报时间：{{info.submitDate || '-'}}
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                    问题描述：这是问题描述这是问题描述这是问题描述这是问题描述这是问题描述这是问题描述这是问题描述这是问题描述
                    问题描述：{{info.content || '-'}}
                </div>
                <div class="wt_content_row" style="width: 100%; margin-top: 15px;">
                <div class="wt_content_row" style="width: 100%; margin-top: 15px; margin-bottom: 20px;">
                    <div class="wt_content_row_label">问题图片：</div>
                    <div class="wt_content_row_list">
                        <div class="wt_content_row_list_img">
                            <img src="" alt="" />
                    <div class="wt_content_row_list" v-if="info.fileList && info.fileList.length >= 0">
                        <div class="wt_content_row_list_img" v-for="(item, index) in info.fileList" :key="index">
                            <el-image
                                style="width: 100px; height: 100px"
                                :src="item.fileurlFull"
                                :preview-src-list="info.fileList.map(item => item.fileurlFull)">
                            </el-image>
                        </div>
                    </div>
                </div>
            </div>
            <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="处理方式" prop="resource">
                    <el-radio-group v-model="form.resource">
                        <el-radio :label="0">转工单</el-radio>
                        <el-radio :label="1">关闭问题</el-radio>
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
                <el-form-item label="处理方式" prop="dealStatus">
                    <el-radio-group v-model="form.dealStatus">
                        <el-radio :label="1">转工单</el-radio>
                        <el-radio :label="2">关闭问题</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div style="display: flex; align-items: center;">
                    <el-form-item label="位置类型" prop="region">
                        <el-select v-model="form.resource" placeholder="请选择位置类型">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                <template v-if="form.dealStatus === 1">
                    <div style="width: 100%; display: flex; align-items: center;">
                        <el-form-item label="位置类型" prop="workOrderAreaType">
                            <el-select v-model="form.workOrderAreaType" @change="changeType" placeholder="请选择位置类型">
                                <el-option label="室内维修" :value="0"></el-option>
                                <el-option label="公共区域" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="报修区域" prop="rooms">
                            <el-cascader
                                v-model="form.rooms"
                                :disabled="![0,1].includes(form.workOrderAreaType)"
                                ref="cascader"
                                @change="getHouseVal"
                                placeholder="请选择报修区域"
                                :options="form.workOrderAreaType === 0 ? houseList : houseList1"
                                :props="{
                                    label: 'name',
                                    value: 'id',
                                    children: 'projectDataVOList'
                                }" />
                        </el-form-item>
                    </div>
                    <div style="width: 100%; display: flex; align-items: center;">
                        <el-form-item label="工单分类" prop="workOrderCateId">
                            <el-cascader v-model="form.workOrderCateId" @change="changeSel" placeholder="请选择分类" clearable :options="cateList"
                            :props="{
                            label: 'name',
                            value: 'id',
                            children: 'childCategoryList'
                          }"></el-cascader>
                        </el-form-item>
                        <el-form-item label="上门时间" prop="workOrderGetDate" v-if="form.workOrderAreaType === 0">
                            <el-date-picker
                                v-model="form.workOrderGetDate"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择上门时间">
                            </el-date-picker>
                        </el-form-item>
                    </div>
                    <el-form-item label="描述" prop="dealInfo">
                        <el-input
                            type="textarea"
                            :rows="5"
                            placeholder="请输入描述"
                            v-model="form.dealInfo">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="报修区域" prop="resource">
                        <el-select v-model="form.resource" placeholder="请选择报修区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    <el-form-item label="问题图片" prop="resource">
                        <el-upload
                            :action="base"
                            :file-list="form.workOrderFileList"
                            accept=".png,.jpg,.jpeg,.PNG,.JPG"
                            :on-success="getFile"
                            :data="{ folder: 'YW_WORKORDER' }"
                            list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </div>
                <div style="display: flex; align-items: center;">
                    <el-form-item label="工单分类" prop="resource">
                        <el-select v-model="form.resource" placeholder="请选择工单分类">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="上门时间" prop="resource">
                        <el-date-picker v-model="form.resource" type="date" placeholder="选择上门时间"></el-date-picker>
                    </el-form-item>
                </div>
                <el-form-item label="描述" prop="resource">
                </template>
                <el-form-item label="关闭说明" prop="dealInfo" v-if="form.dealStatus === 2">
                    <el-input
                        type="textarea"
                        :rows="5"
                        placeholder="请输入描述"
                        v-model="form.resource">
                    </el-input>
                </el-form-item>
                <el-form-item label="问题图片" prop="resource">
                    <el-upload
                        action="https://jsonplaceholder.typicode.com/posts/"
                        list-type="picture-card">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="关闭问题" prop="resource">
                    <el-input
                        type="textarea"
                        :rows="5"
                        maxlength="300"
                        placeholder="请输入关闭问题"
                        v-model="form.resource">
                        v-model="form.dealInfo">
                    </el-input>
                </el-form-item>
            </el-form>
@@ -100,6 +127,9 @@
<script>
  import BaseOpera from '@/components/base/BaseOpera'
  import GlobalWindow from '@/components/common/GlobalWindow'
  import { fetchList as getCateList } from '@/api/business/category.js'
  import { tree } from '@/api/project/ywProject'
  import { editProblem } from '@/api/ywProblem'
  export default {
    name: "handleProblem",
    extends: BaseOpera,
@@ -107,61 +137,184 @@
    data() {
      return {
        info: {},
        cateList: [],
        base: process.env.VUE_APP_API_PREFIX + '/visitsAdmin/cloudService/public/uploadBatch',
        form: {
          resource: 0
          dealStatus: 1,
          workOrderAreaType: '',
          workOrderCateId: '',
          workOrderGetDate: '',
          dealInfo: '',
          workOrderFileList: [],
          rooms: [],
          
          workOrderProjectId: '',
          workOrderBuildId: '',
          workOrderFloorId: '',
          workOrderRoomId: ''
        },
        houseList: [],
        houseList1: [],
        rules: {
          resource: [
            { required: true, message: '请选择', trigger: 'change' }
          dealStatus: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          workOrderAreaType: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          workOrderCateId: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
          dealInfo: [
            { required: true, message: '请输入', trigger: 'blur' }
          ],
          rooms: [
            { required: true, message: '请选择', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {

      open (title, target) {
        this.title = title
        this.info = target
        this.getCate()
        this.getHouseTree()
        this.visible = true
      },
      getHouseVal(e) {
        if (this.form.workOrderAreaType === 0) {
          this.form.workOrderProjectId = e[0]
          this.form.workOrderBuildId = e[1]
          this.form.workOrderFloorId = e[2]
          this.form.workOrderRoomId = e[3]
        } else {
          this.form.workOrderProjectId = e[0]
          this.form.workOrderBuildId = e[1]
          this.form.workOrderFloorId = e[2]
        }
      },
      changeType(e) {
        this.form.rooms = []
        this.form.workOrderProjectId = ''
        this.form.workOrderBuildId = ''
        this.form.workOrderFloorId = ''
        this.form.workOrderRoomId = ''
      },
      getHouseTree() {
        tree({}).then(res => {
          let arr1 = JSON.parse(JSON.stringify(res))
          let arr2 = JSON.parse(JSON.stringify(res))
          this.addParamToArray(arr1)
          this.addParamToArray1(arr2)
          this.houseList = arr1
          this.houseList1 = arr2
        })
      },
      addParamToArray(arr) {
        for (let i = 0; i < arr.length; i++) {
          const currentItem = arr[i].projectDataVOList
          if (currentItem && currentItem.length >= 0) {
            currentItem.forEach(item => {
              if (item.lv === 3) {
                delete item.projectDataVOList
              }
            })
          }
          if (currentItem && currentItem.length > 0) {
            this.addParamToArray(currentItem)
          }
        }
      },
      addParamToArray1(arr) {
        for (let i = 0; i < arr.length; i++) {
          const currentItem = arr[i].projectDataVOList
          if (currentItem && currentItem.length >= 0) {
            currentItem.forEach(item => {
              if (item.lv === 2) {
                delete item.projectDataVOList
              }
            })
          }
          if (currentItem && currentItem.length > 0) {
            this.addParamToArray1(currentItem)
          }
        }
      },
      getFile(e) {
        console.log(e)
        this.form.workOrderFileList.push({ ...e })
      },
      changeSel(e) {
        if (e && e.length == 2) {
          this.$set(this.form, 'workOrderCateId', e[1])
        } else {
          this.$set(this.form, 'workOrderCateId', '')
        }
      },
      getCate() {
        getCateList({
          model: { type: 3 },
          capacity: 1000,
          page: 1,
        }).then(res => {
          this.cateList = res.records || []
        })
      },
      confirm() {
        this.$refs.form.validate((valid) => {
          if (!valid) {
            return
          }
          this.isWorking = true
          editProblem({
            ...this.form,
            id: this.info.id
          })
            .then(() => {
              this.visible = false
              this.$tip.apiSuccess('操作成功')
              this.$emit('success')
            })
            .finally(() => {
              this.isWorking = false
            })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
    @import '@/assets/style/variables.scss';
    .wt {
        width: 100%;
        display: flex;
        flex-direction: column;
        .wt_head {
            width: 100%;
            padding: 20px 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .wt_head_title {
                display: flex;
                align-items: center;
                font-size: 16px;
                color: black;
                margin-right: 10px;
            }
        }
    
        .wt_content {
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        
            .wt_content_row {
                font-size: 14px;
                color: rgb(51, 51, 51);
                display: flex;
                align-items: self-start;
            
                .wt_content_row_label {
                    flex-shrink: 0;
                    font-size: 14px;
                    color: rgb(51, 51, 51);
                }
            
                .wt_content_row_list {
                    flex: 1;
                    display: flex;
                    align-items: center;
                
                    .wt_content_row_list_img {
                        width: 106px;
                        height: 93px;
@@ -170,9 +323,11 @@
                        justify-content: center;
                        overflow-x: hidden;
                        margin-right: 15px;
                    
                        &:last-child {
                            margin: 0 !important;
                        }
                    
                        img {
                            width: 100%;
                        }
@@ -180,5 +335,30 @@
                }
            }
        }
    
        .wt_head {
            width: 100%;
            padding: 20px 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
        
            .wt_head_title {
                display: flex;
                align-items: center;
                font-size: 16px;
                color: black;
                margin-right: 10px;
            
                .title {
                    font-weight: 500;
                    font-size: 18px;
                    color: $primary-color;
                    display: flex;
                    align-items: center;
                }
            }
        }
    }
</style>