编辑

project/biaopin/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()" v-if="detail.eventStatus != 2 && detail.eventStatus != 3">编辑</el-button>
+            </template>
             <template #content>
               <ai-wrapper>
                 <ai-info-item label="上报人员" :value="detail.name"></ai-info-item>
@@ -153,6 +156,112 @@
           </el-tree>
         </div>
       </ai-dialog>
+      <ai-dialog
+        :visible.sync="isShowEdit"
+        width="800px"
+        @close="onCloseEdit"
+        title="编辑事件"
+        @onConfirm="onConfirmEdit">
+        <el-form class="ai-form" label-width="120px" :model="editInfo" ref="editInfo">
+          <el-form-item label="事件类型" prop="groupName"  :rules="[{ required: true, message: '请选择事件类型' }]" style="width: 100%;">
+            <ai-select v-model="editInfo.groupName" :selectList="typeList" placeholder="请选择" />
+          </el-form-item>
+          <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="address" style="width: 100%;" :rules="[{ required: true, message: '请选择上报位置' }]">
+            <el-input disabled size="small" v-model="editInfo.address" style="width: calc(100% - 100px);"></el-input>
+            <el-button @click="showMap = true" style="margin-left:16px;">地图标绘</el-button>
+          </el-form-item>
+          <el-form-item label="所属网格" prop="girdName" style="width: 100%;" :rules="[{ required: true, message: '请选择所属网格' }]">
+            <!-- <el-input disabled size="small" v-model="editInfo.girdName" clearable>
+              <template slot="append">
+                <ai-picker :ops="{label: 'girdName'}" :instance="instance" v-model="editInfo.girdId" @pick="e => onUserChange(e)" dialogTitle="选择所属网格" action="/app/appgirdmemberinfo/queryMyGirdList">
+                  <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-input disabled size="small" v-model="editInfo.girdName" clearable placeholder="请选择所属网格">
+              <template slot="append">
+                <el-button @click="getEditGirdList().then(()=>isEditShowUser=true )">选择</el-button>
+              </template>
+            </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="name" style="width: 50%;" :rules="[{ required: true, message: '请输入姓名' }]">
+            <el-input
+                size="small"
+                v-model="editInfo.name"
+                placeholder="请输入..."
+                clearabel
+                :maxLength="11"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="联系方式" prop="phone" style="width: 50%;" :rules="[{ required: true, message: '请输入联系方式' }]">
+            <el-input
+                size="small"
+                v-model="editInfo.phone"
+                placeholder="请输入..."
+                clearabel
+                :maxLength="11"
+            ></el-input>
+          </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 0;">
+          <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>
+      <ai-dialog
+          :visible.sync="isEditShowUser"
+          width="800px"
+          title="选择所属网格"
+          @onConfirm="onEditConfirm">
+        <div class="grid-wrapper">
+          <el-tree
+              :filter-node-method="filterNodeEdit"
+              ref="tree"
+              :props="defaultProps"
+              node-key="id"
+              :data="treeEdit"
+              highlight-current
+              @current-change="onTreeEditChange">
+            <div class="tree-container" slot-scope="{ data }">
+              <div class="tree-container__user">
+                <div class="tree-user__item">
+                  <span>{{ data.girdName }}</span>
+                </div>
+              </div>
+            </div>
+          </el-tree>
+        </div>
+      </ai-dialog>
     </template>
   </ai-detail>
 </template>
@@ -197,7 +306,20 @@ export default {
         content: [],
         eventStatus: '1'
       },
-      evaluation: {}
+      evaluation: {},
+      isShowEdit: false, //编辑工单信息
+      editInfo: {},
+      placeDetail: {
+        lng: '',
+        lat: '',
+        address: ''
+      },
+      showMap: false,
+      searchPlace: '',
+      map: null,
+      typeList: [],
+      isEditShowUser: false,
+      treeEdit: []
     }
   },
 
@@ -231,6 +353,7 @@ export default {
             this.initMap()
           })
           this.isLoading = false
+          this.getTypeList()
         }
       }).catch(() => {
         this.isLoading = false
@@ -284,6 +407,11 @@ export default {
 
       return (data.girdName && data.girdName.indexOf(value) !== -1) || (data.name && data.name.indexOf(value) !== -1) || (data.name && data.phone.indexOf(value) !== -1)
     },
+    filterNodeEdit(value, data) {
+      if (!value) return true
+
+      return (data.girdName && data.girdName.indexOf(value) !== -1) 
+    },
 
     onTreeChange(e) {
       this.gridInfo = e
@@ -395,7 +523,129 @@ export default {
           })
         }
       })
+    },
+
+    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()
+      }
+    },
+
+    getEditGirdList() {
+      return this.instance.post(`/app/appgirdmemberinfo/queryMyGirdList`).then(res => {
+        if (res?.data) {
+          this.treeEdit = res.data
+        }
+      })
+    },
+
+    onTreeEditChange(e) {
+      console.log(e)
+      this.editInfo.girdId = e.id
+      this.editInfo.girdName = e.girdName
+    },
+
+    onEditConfirm() {
+      if(!this.editInfo.girdId) {
+        return this.$message.error('请选择网格!')
+      } 
+      this.isEditShowUser = false
+    },
+
+    onCloseEdit() {
+      this.isShowEdit = false
+      this.editInfo = {}
+    },
+
+    onConfirmEdit() {
+      this.$refs.editInfo.validate(v => {
+        if (v) {
+          this.instance.post('/app/apppatrolreportinfov2/addByGirdMember', {
+            ...this.editInfo,
+            id: this.$route.query.id
+          }).then(res => {
+            if (res?.code == 0) {
+              this.isShowEdit = false
+              this.getDetail()
+              this.$message.success('编辑成功!')
+            }
+          })
+        }
+      })
+    },
+
+    getTypeList() {
+      this.typeList = []
+      this.instance.post(`/app/apppatrolreportinfov2/eventTypeList?eventSource=${this.detail.eventSource}`).then(res => {
+        if (res.code == 0) {
+          res.data.map((item) => {
+            var i = {dictName: item, dictValue: item}
+            this.typeList.push(i)
+          })
+        }
+      })
+    },
   }
 }
 </script>

project/biaopin/AppWorkOrder/components/List.vue

@@ -259,7 +259,7 @@ export default {
     },
     handleDelete(ids) {
       this.$confirm("是否要进行删除?").then(() => {
-        this.instance.post("/app/appsessionarchivereportinfo/delete", null, {
+        this.instance.post("/app/apppatrolreportinfov2/delete", null, {
           params: {ids}
         }).then(res => {
           if (res?.code == 0) {