工单管理

project/xbot/AppWorkOrder/components/Detail.vue

@@ -14,6 +14,9 @@
       <div class="detail-content__wrapper">
         <div class="detail-content__wrapper--left">
           <ai-card title="基础信息">
+            <template #right>
+              <el-button type="primary" @click="editClick()">编辑</el-button>
+            </template>
             <template #content>
               <ai-wrapper>
                 <ai-info-item label="上报人员" :value="detail.name"></ai-info-item>
@@ -100,10 +103,12 @@
           title="事件指派"
           @onConfirm="onForwardConfirm">
         <el-form class="ai-form" label-width="120px" :model="forwardForm" ref="forwardForm">
-          <el-form-item label="转交" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请选择网格员或网格' }]">
-            <el-input disabled size="small" v-model="forwardForm.name" clearable placeholder="请选择网格员或网格">
+          <el-form-item label="转交" prop="handleUserName" style="width: 100%;" :rules="[{ required: true, message: '请选择人员' }]">
+            <el-input disabled size="small" v-model="forwardForm.handleUserName" clearable placeholder="请选择人员">
               <template slot="append">
-                <el-button @click="getGirdList().then(()=>isShowUser=true )">选择</el-button>
+                <ai-user-selecter refs="addTags" :isMultiple="false" :instance="instance" v-model="forwardForm.user" @change="onChooseUser">
+                  <el-button size="small">选择人员</el-button>
+                </ai-user-selecter>
               </template>
             </el-input>
           </el-form-item>
@@ -121,36 +126,75 @@
         </el-form>
       </ai-dialog>
       <ai-dialog
-          :visible.sync="isShowUser"
+          :visible.sync="isShowEdit"
           width="800px"
-          title="选择网格员"
-          @onConfirm="onConfirm">
-        <div class="grid-wrapper">
-          <el-input
-              style="margin-bottom: 10px;"
-              size="small"
-              placeholder="请输入网格名称/网格员姓名/网格员电话"
-              v-model="name" @change="$refs.tree.filter(name)"
-              suffix-icon="iconfont iconSearch">
-          </el-input>
-          <el-tree
-              :filter-node-method="filterNode"
-              ref="tree"
-              :props="defaultProps"
-              node-key="id"
-              :data="tree"
-              highlight-current
-              @current-change="onTreeChange">
-            <div class="tree-container" slot-scope="{ data }">
-              <div class="tree-container__user">
-                <div class="tree-user__item">
-                  <span v-if="!data.isUser">{{ data.girdName }}</span>
-                  <span v-else>{{data.name}}<span v-if="data.phone">-{{data.phone}}</span></span>
-                </div>
-              </div>
-            </div>
-          </el-tree>
-        </div>
+          @close="onCloseEdit"
+          title="编辑工单信息"
+          @onConfirm="onConfirmEdit">
+        <el-form class="ai-form" label-width="120px" :model="editInfo" ref="editInfo">
+          <el-form-item label="事件描述" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入事件描述' }]">
+            <el-input type="textarea" :rows="8" :maxlength="500" v-model="editInfo.content" clearable placeholder="请输入事件描述" show-word-limit></el-input>
+          </el-form-item>
+          <el-form-item label="事件类型" prop="flId"  :rules="[{ required: true, message: '请选择事件类型' }]" style="width: 100%;">
+            <ai-select
+                v-model="editInfo.flId"
+                placeholder="请选择"
+                :selectList="dictList"
+            ></ai-select>
+          </el-form-item>
+          <el-form-item label="所属网格" style="width: 100%;">
+            <el-input disabled size="small" v-model="editInfo.girdName" clearable placeholder="选择所属网格">
+              <template slot="append">
+                <ai-picker :ops="{label: 'girdName'}" :instance="instance" v-model="editInfo.girdIds" @pick="e => onUserChange(e)" dialogTitle="选择所属网格" action="/app/appgirdinfo/girdList">
+                  <div class="time-select">
+                    <span class="dept-name" style="color:#999;">选择所属网格</span>
+                    <i class="el-icon-arrow-down"></i>
+                  </div>
+                </ai-picker>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="联系方式" prop="phone" style="width: 100%;">
+            <el-input
+                size="small"
+                v-model="editInfo.phone"
+                placeholder="请输入..."
+                clearabel
+                :maxLength="11"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="图片" prop="files" style="width: 100%;">
+            <ai-uploader
+                :instance="instance"
+                v-model="editInfo.files"
+                isShowTip
+                :limit="9">
+            </ai-uploader>
+          </el-form-item>
+          <el-form-item label="上报位置" prop="lat">
+            <el-button @click="showMap = true">地图标绘</el-button>
+          </el-form-item>
+        </el-form>
+      </ai-dialog>
+      <ai-dialog title="地图" :visible.sync="showMap" @opened="initMapSelect" width="800px" class="mapDialog" @onConfirm="selectMap">
+        <div id="mapDialog" style="height:400px;"></div>
+        <el-form label-width="80px" style="padding: 10px 20px 0 20px;">
+          <el-row type="flex" justify="space-between">
+            <el-form-item label="经度">
+              <el-input disabled size="small" v-model="placeDetail.lng" style="width:100px;"></el-input>
+            </el-form-item>
+            <el-form-item label="纬度">
+              <el-input disabled size="small" v-model="placeDetail.lat" style="width:100px;"></el-input>
+            </el-form-item>
+            <el-form-item label="地址">
+              <el-input disabled size="small" v-model="placeDetail.address" style="width:300px;"></el-input>
+            </el-form-item>
+          </el-row>
+        </el-form>
+        <el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
+          <el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
+        </el-input>
+        <div id="searchPlaceOutput" />
       </ai-dialog>
     </template>
   </ai-detail>
@@ -168,16 +212,14 @@ export default {
     return {
       forwardForm: {
         content: '',
-        girdId: '',
-        girdName: '',
-        girdMemberId: '',
-        girdMemberName: '',
-        name: ''
+        handleUserId: '',
+        handleUserName: '',
+        files: [],
+        user: []
       },
       isLoading: true,
       name: '',
       detail: {},
-      isShowUser: false,
       eventList: [],
       isShowAdd: false,
       userList: [],
@@ -196,7 +238,17 @@ export default {
         content: [],
         eventStatus: '1'
       },
-      evaluation: {}
+      evaluation: {},
+      isShowEdit: false, //编辑工单信息
+      editInfo: {},
+      placeDetail: {
+        lng: '',
+        lat: '',
+        address: ''
+      },
+      showMap: false,
+      searchPlace: '',
+      map: null,
     }
   },
 
@@ -303,29 +355,6 @@ export default {
         }
       })
     },
-
-    onConfirm() {
-      // if (this.gridInfo.userId) {
-      //   this.forwardForm.girdId = this.gridInfo.girdId
-      //   this.forwardForm.girdName = this.gridInfo.girdName
-      //   this.forwardForm.girdMemberId = this.gridInfo.id
-      //   this.forwardForm.girdMemberName = this.gridInfo.name
-      // } else {
-      //   this.forwardForm.girdId = this.gridInfo.id
-      // }
-      // this.forwardForm.girdName = this.gridInfo.girdName
-      // this.forwardForm.name = `${this.gridInfo.girdName}${this.gridInfo.name ? '-' + this.gridInfo.name : ''}`
-      // this.isShowUser = false
-      if(!this.gridInfo.userId) {
-        return this.$message.error('请选择网格员!')
-      } 
-      this.forwardForm.girdId = this.gridInfo.girdId
-      this.forwardForm.girdName = this.gridInfo.girdName
-      this.forwardForm.girdMemberId = this.gridInfo.id
-      this.forwardForm.girdMemberName = this.gridInfo.name
-      this.forwardForm.name = `${this.gridInfo.girdName}${this.gridInfo.name ? '-' + this.gridInfo.name : ''}`
-      this.isShowUser = false
-    },
     getDict() {
       this.instance.post(`/app/appresidentreportgroup/list?current=1&size=100000`).then(res => {
         if (res.code == 0) {
@@ -401,6 +430,111 @@ export default {
           })
         }
       })
+    },
+
+    onChooseUser(v) {
+      this.forwardForm.handleUserId = v[0].id
+      this.forwardForm.handleUserName = v[0].name
+      this.forwardForm.user = v
+    },
+
+    editClick() {
+      this.isShowEdit = true
+      this.editInfo = {...this.detail}
+      this.editInfo.girdIds = []
+      if(this.editInfo.girdId) {
+        this.editInfo.girdIds.push(this.editInfo.girdId)
+      }
+    },
+
+    selectMap() {
+      this.editInfo.lng = this.placeDetail.lng
+      this.editInfo.lat = this.placeDetail.lat
+      this.editInfo.address = this.placeDetail.address
+      this.showMap = false
+    },
+    initMapSelect() {
+      AMapLoader.load({
+        key: 'b553334ba34f7ac3cd09df9bc8b539dc',
+        version: '2.0',
+        plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
+      }).then((AMap2) => {
+        this.map = new AMap2.Map('mapDialog', {
+          resizeEnable: true,
+          zooms: [6, 20],
+          zoom: 11,
+          center:[107.11059, 31.56618],
+        })
+        this.placeSearch = new AMap2.PlaceSearch({ map: this.map })
+        new AMap2.AutoComplete({
+          input: 'searchPlaceInput',
+          output: 'searchPlaceOutput',
+        }).on('select', (e) => {
+          if (e?.poi) {
+            this.placeSearch.setCity(e.poi.adcode)
+            this.movePosition(e.poi.location)
+          }
+        })
+        this.map.on('click', (e) => {
+          new AMap2.Geocoder().getAddress(e.lnglat, (sta, res) => {
+            if (res?.regeocode) {
+              this.placeDetail = {
+                lng: e.lnglat?.lng,
+                lat: e.lnglat?.lat,
+                address: res.regeocode.formattedAddress,
+              }
+            }
+          })
+          this.movePosition(e.lnglat)
+        })
+      })
+    },
+  
+    movePosition(center) {
+      if (this.map) {
+        this.map.clearMap()
+        this.map.panTo(center)
+        this.map.add([
+          new AMap.Marker({
+            position: center,
+            clickable: true,
+          }),
+        ])
+        this.map.setFitView()
+      }
+    },
+
+    onUserChange (e) {
+      if (e.length) {
+        this.editInfo.girdName = e[0].girdName
+      } else {
+        this.editInfo.girdIds = []
+        this.editInfo.girdName = ''
+      }
+    },
+
+    onCloseEdit() {
+      this.isShowEdit = false
+      this.editInfo = {}
+    },
+
+    onConfirmEdit() {
+      this.$refs.editInfo.validate(v => {
+        if (v) {
+          this.instance.post('/app/appsessionarchivereportinfo/update', {
+            ...this.editInfo,
+            id: this.$route.query.id,
+            flName:  this.dictList.filter(v => v.dictValue === this.editInfo.flId)[0].dictName,
+            girdIds: this.editInfo.girdIds.length ? this.editInfo.girdIds[0] : ''
+          }).then(res => {
+            if (res?.code == 0) {
+              this.isShowEdit = false
+              this.getDetail()
+              this.$message.success('编辑成功!')
+            }
+          })
+        }
+      })
     }
   }
 }