From a4b31a2c6751eed590031722849823e4baf4a3b0 Mon Sep 17 00:00:00 2001
From: chenze <1824191732@qq.com>
Date: Thu, 29 Aug 2024 17:39:35 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E4=BA=86=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=B7=A5=E5=8D=95=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/admin/modules/RepairModal.vue | 199 ++++++++++++------------
 1 file changed, 97 insertions(+), 102 deletions(-)

diff --git a/src/views/admin/modules/RepairModal.vue b/src/views/admin/modules/RepairModal.vue
index 2326015..cdf9103 100644
--- a/src/views/admin/modules/RepairModal.vue
+++ b/src/views/admin/modules/RepairModal.vue
@@ -1,122 +1,122 @@
 <template>
   <a-modal
-    title='指派维修员'
-    style='top: 20px;'
-    :width='1200'
-    v-model='visible'
-    :confirmLoading='confirmLoading'
-    @ok='handleSubmit'
+    title="指派维修员"
+    style="top: 20px;"
+    :width="1200"
+    v-model="visible"
+    :confirmLoading="confirmLoading"
+    @ok="handleSubmit"
   >
-    <a-form :form='form'>
-      <a-form-item style='display:none'>
+    <a-form :form="form">
+      <a-form-item style="display:none">
         <a-input v-decorator="['id']" />
       </a-form-item>
 
       <a-row>
-        <a-col :span='10'>
-          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='所属分类'>
+        <a-col :span="10">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="所属分类">
             <a-select v-decorator="['typeId', {rules: [{ required: true, message: '请选择所属分类' }]}]"
-                      @change='selectDevice'>
-              <a-select-option v-for='item in typeList' :key='item.id' :value='item.id'>{{ item.name }}
+                      @change="selectDevice">
+              <a-select-option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}
               </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span='10'>
-          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='报修设备'>
+        <a-col :span="10">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="报修设备">
             <a-select v-decorator="['deviceId', {rules: [{ required: true, message: '请选择所属设备' }]}]"
-                      @change='getDeviceName'>
-              <a-select-option v-for='item in deviceList' :key='item.id' :value='item.id'>{{ item.name }}
+                      @change="getDeviceName">
+              <a-select-option v-for="item in deviceList" :key="item.id" :value="item.id">{{ item.name }}
               </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span='10'>
-          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='报修人'>
-            <a-input placeholder='报修人'
+        <a-col :span="10">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="报修人">
+            <a-input placeholder="报修人"
                      v-decorator="['name', {rules: [{ required: true, message: '请选择报修人' }]}]" />
           </a-form-item>
         </a-col>
-        <a-col :span='10'>
-          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='联系电话'>
-            <a-input placeholder='联系电话'
+        <a-col :span="10">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="联系电话">
+            <a-input placeholder="联系电话"
                      v-decorator="['phone', {rules: [{ required: true, message: '请输入联系电话' }]}]" />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span='10'>
-          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='维修负责人'>
+        <a-col :span="10">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="维修负责人">
             <a-select v-decorator="['repairUserId']"
-                      @change='selectUser'>
-              <a-select-option v-for='item in userList' :key='item.userId'>{{ item.userName }}</a-select-option>
+                      @change="selectUser">
+              <a-select-option v-for="item in userList" :key="item.userId">{{ item.userName }}</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span='10'>
-          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='报修地点'>
+        <a-col :span="10">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="报修地点">
             <a-select v-decorator="['addressId', {rules: [{ required: true, message: '请选择报修地点' }]}]"
-                      @change='selectRoomList'>
-              <a-select-option v-for='item in addressList' :key='item.id' :value='item.id'>{{ item.name }}
+                      @change="selectRoomList">
+              <a-select-option v-for="item in addressList" :key="item.id" :value="item.id">{{ item.name }}
               </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span='10'>
-          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='楼层'>
+        <a-col :span="10">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="楼层">
             <a-select v-decorator="['floorId', {rules: [{ required: true, message: '请选择详细地址' }]}]"
-                      @change='selectFloorName'>
-              <a-select-option v-for='item in roomList' :key='item.id' :value='item.id'>{{ item.name }}
+                      @change="selectFloorName">
+              <a-select-option v-for="item in roomList" :key="item.id" :value="item.id">{{ item.name }}
               </a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span='10'>
-          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='门牌号(地点)'>
-            <a-input placeholder='门牌号'
+        <a-col :span="10">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="门牌号(地点)">
+            <a-input placeholder="门牌号"
                      v-decorator="['room' ]" />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span='10'>
-          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='故障类型'>
+        <a-col :span="10">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="故障类型">
             <a-select v-decorator="['failureTypeId' ]"
             >
-              <a-select-option v-for='item in failureTypeList' :key='item.id'>{{ item.name }}</a-select-option>
+              <a-select-option v-for="item in failureTypeList" :key="item.id">{{ item.name }}</a-select-option>
             </a-select>
           </a-form-item>
         </a-col>
-        <a-col :span='10'>
-          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='故障描述'>
-            <a-textarea placeholder='故障描述' v-decorator="['explain']" />
+        <a-col :span="10">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="故障描述">
+            <a-textarea placeholder="故障描述" v-decorator="['explain']" />
           </a-form-item>
         </a-col>
       </a-row>
       <a-row>
-        <a-col :span='10'>
-          <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='报修图片'>
+        <a-col :span="10">
+          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="报修图片">
             <a-upload
               v-decorator="['repairImages']"
-              list-type='picture-card'
-              class='avatar-uploader'
-              :file-list='fileList'
-              :action='uploadUrl'
-              :headers='headers'
-              @preview='handlePreview'
-              @change='handleChangeFileList'
+              list-type="picture-card"
+              class="avatar-uploader"
+              :file-list="fileList"
+              :action="uploadUrl"
+              :headers="headers"
+              @preview="handlePreview"
+              @change="handleChangeFileList"
             >
-              <div v-if='fileList.length < 4'>
-                <a-icon type='plus' />
-                <div class='ant-upload-text'> 上传</div>
+              <div v-if="fileList.length < 4">
+                <a-icon type="plus" />
+                <div class="ant-upload-text"> 上传</div>
               </div>
             </a-upload>
-            <a-modal :visible='previewVisible' :footer='null' @cancel='handleCancel'>
-              <img style='width: 100%' :src='previewImage' />
+            <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
+              <img style="width: 100%" :src="previewImage" />
             </a-modal>
           </a-form-item>
         </a-col>
@@ -145,7 +145,7 @@ export default {
   name: 'RepairModal',
   props: {},
   components: {},
-  data() {
+  data () {
     return {
       visible: false,
       labelCol: {
@@ -190,28 +190,27 @@ export default {
       files: []
     }
   },
-  beforeCreate() {
+  beforeCreate () {
   },
-  created() {
+  created () {
     this.selectType()
     this.selectFailureType()
     this.getRepairAddressList()
   },
   methods: {
     moment,
-    selectType() {
+    selectType () {
       getRepairTypeList().then(res => {
         this.typeList = res.rows
       })
     },
-    selectUser(id) {
+    selectUser (id) {
     },
     // 根据分类id 查询对应设备
-    selectDevice(typeId) {
+    selectDevice (typeId) {
       let type = this.typeList.find(item => item.id == typeId)
       this.typeId = type.id
       this.typeName = type.name
-      console.log('selectDevice', type)
       getRepairDeviceList({
         typeId
       }).then(res => {
@@ -219,49 +218,57 @@ export default {
       })
       selectWorkerIdByTypeId({ typeId }).then(res => {
         this.userList = res.data
+        this.userList = this.userList.map(item => {
+          item.repairUserId = item.userId
+          return item
+        })
       })
     },
-    getDeviceName(item) {
-      console.log(item)
-      this.deviceName = item.label
-      this.deviceId = item.key
+    getDeviceName (deviceId) {
+      let device = this.deviceList.find(item => item.id == deviceId)
+      console.log(device)
+      this.deviceName = device.label
+      this.deviceId = device.key
     },
-    selectFailureType() {
+    selectFailureType () {
       getRepairFailureTypeList().then(res => {
         this.failureTypeList = res.rows
       })
     },
-    getRepairAddressList() {
+    getRepairAddressList () {
       getRepairAddressList().then(res => {
         this.addressList = res.rows
       })
     },
 
-    selectRoomList(item) {
-      console.log(item)
-      getRepairRoomList({ 'addressId': item.key }).then(res => {
+    selectRoomList (roomId) {
+      console.log('selectRoomList', roomId)
+      let room = this.addressList.find(item => item.id == roomId)
+      getRepairRoomList({ 'addressId': roomId }).then(res => {
         this.roomList = res.rows
       })
-      this.address = item.label
-      this.addressId = item.key
+      this.address = room.label
+      this.addressId = room.key
     },
-    selectFloorName(item) {
-      this.floor = item.label
-      this.floorId = item.key
+    selectFloorName (floorId) {
+      let floor = this.roomList.find(item => item.id == floorId)
+
+      this.floor = floor.label
+      this.floorId = floor.key
     },
 
-    async handlePreview(file) {
+    async handlePreview (file) {
       if (!file.url && !file.preview) {
         file.preview = await getBase64FileList(file.originFileObj)
       }
       this.previewImage = file.url || file.preview
       this.previewVisible = true
     },
-    handleCancel() {
+    handleCancel () {
       this.previewVisible = false
     },
     // 上传banner
-    handleChangeFileList({ fileList }) {
+    handleChangeFileList ({ fileList }) {
       fileList.forEach(item => {
         if (item.response !== undefined) {
           this.files.push(item.response.id)
@@ -269,43 +276,31 @@ export default {
       })
       this.fileList = fileList
     },
-    add() {
+    add () {
       this.form.resetFields()
       this.mdl.repairImages = null
       this.edit({ id: 0 })
     },
-    edit(record) {
-      console.log(this.typeList)
+    edit (record) {
+      this.selectDevice(record.typeId)
+      this.selectRoomList(record.addressId)
       this.mdl = Object.assign(record)
       this.mdl.typeList = this.typeList
+
       this.visible = true
       this.$nextTick(() => {
         this.form.setFieldsValue(pick(this.mdl, 'id', 'sn', 'repairName', 'typeList', 'repairLevel', 'typeId', 'typeName', 'deviceId', 'deviceName',
-          'name', 'phone', 'addressId', 'address', 'floorId', 'floor', 'room', 'explain', 'perUserId', 'perUserName', 'preDate', 'cause',
+          'name', 'phone', 'addressId', 'address', 'floorId', 'floor', 'repairUserId', 'room', 'explain', 'perUserId', 'perUserName', 'preDate', 'cause',
           'solution', 'failureTypeId', 'failureTypeName'))
       })
-      // 处理日期
-      if (this.mdl.beginDate !== null && this.mdl.beginDate !== undefined && this.mdl.endDate !== null && this.mdl.endDate !== undefined) {
-        this.dateValue = [moment(this.mdl.beginDate, dateFormat), moment(this.mdl.endDate, dateFormat)]
-      }
-      // 图片
-      if (this.mdl.repairImages) {
-        this.mdl.repairImages = JSON.parse(this.mdl.repairImages)
-        this.mdl.repairImages.forEach((item, i) => {
-          item.url = process.env.VUE_APP_API_BASE_URL + item.url
-        })
-        this.fileList = this.mdl.repairImages
-      } else {
-        this.fileList = []
-      }
     },
-    onChange(dates, dateStrings) {
+    onChange (dates, dateStrings) {
       console.log('From: ', dateStrings[0], ', to: ', dateStrings[1])
       this.beginDate = dateStrings[0]
       this.endDate = dateStrings[1]
       this.dateValue = [moment(this.beginDate, dateFormat), moment(this.endDate, dateFormat)]
     },
-    handleSubmit(e) {
+    handleSubmit (e) {
       e.preventDefault()
       console.log(this.files)
 
@@ -360,7 +355,7 @@ export default {
   watch: {}
 }
 
-function getBase64(img, callback) {
+function getBase64 (img, callback) {
   const reader = new FileReader()
   reader.addEventListener('load', () => callback(reader.result))
   reader.readAsDataURL(img)