750 lines
		
	
	
		
			23 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			750 lines
		
	
	
		
			23 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <ai-detail class="reportAtWillDetail" v-loading="isLoading">
 | |
|     <template #title>
 | |
|       <ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
 | |
|         <template #rightBtn>
 | |
|           <div class="title-btns">
 | |
|             <el-button type="primary" icon="iconfont iconPerson_Transfered" @click="isShowForward = true" v-if="detail.eventStatus < 2">指派事件</el-button>
 | |
|             <el-button type="primary" icon="iconfont iconRegister" @click="isShowAdd = true" v-if="detail.eventStatus < 2">处理事件</el-button>
 | |
|           </div>
 | |
|         </template>
 | |
|       </ai-title>
 | |
|     </template>
 | |
|     <template #content>
 | |
|       <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>
 | |
|                 <ai-info-item label="当前状态" :value="dict.getLabel('clapEventStatus', detail.eventStatus)"></ai-info-item>
 | |
|                 <ai-info-item label="联系方式">{{ detail.phone }}</ai-info-item>
 | |
|                 <ai-info-item label="上报时间">{{ detail.createTime }}</ai-info-item>
 | |
|                 <!-- <ai-info-item label="事件来源">{{ dict.getLabel('residentEventSource', detail.eventSource) }}</ai-info-item> -->
 | |
|                 <ai-info-item label="事件类型">{{ detail.type }}</ai-info-item>
 | |
|                 <ai-info-item label="事件描述" isLine>
 | |
|                   <span v-html="detail.content"></span>
 | |
|                 </ai-info-item>
 | |
|                 <ai-info-item label="现场照片" isLine>
 | |
|                   <ai-uploader :instance="instance" disabled v-model="detail.files"></ai-uploader>
 | |
|                 </ai-info-item>
 | |
|                 <ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item>
 | |
|                 <ai-info-item label="事件地点" isLine>{{ detail.address }}</ai-info-item>
 | |
|                 <ai-info-item label="地图位置" isLine>
 | |
|                   <div id="map" style="width: 500px; height: 280px;"></div>
 | |
|                 </ai-info-item>
 | |
|               </ai-wrapper>
 | |
|             </template>
 | |
|           </ai-card>
 | |
|           <ai-evaluation v-if="!!detail.id" :bid="detail.id" :info.sync="evaluation"/>
 | |
|         </div>
 | |
|         <div class="rightZone">
 | |
|           <ai-card title="办理进度">
 | |
|             <template #content>
 | |
|               <el-steps direction="vertical" :active="1">
 | |
|                 <el-step
 | |
|                     v-for="(item, i) in process"
 | |
|                     :key="i"
 | |
|                     :title="item.systemExplain"
 | |
|                     :description="item.doTime">
 | |
|                   <template #title>
 | |
|                     <h2 class="step-title" style="font-weight: 500; font-size: 14px;">
 | |
|                       {{ item.systemExplain }}
 | |
|                     </h2>
 | |
|                   </template>
 | |
|                   <template #description>
 | |
|                     <p style="color: #888; margin: 0 4px 10px 0; font-size: 14px;">{{ item.doTime }}</p>
 | |
|                     <div style="color: #444;margin-bottom: 10px;" v-if="item.doExplain">{{ item.doExplain }}</div>
 | |
|                     <ai-uploader :instance="instance" disabled v-model="item.files"></ai-uploader>
 | |
|                   </template>
 | |
|                 </el-step>
 | |
|               </el-steps>
 | |
|             </template>
 | |
|           </ai-card>
 | |
|         </div>
 | |
|       </div>
 | |
|       <ai-dialog
 | |
|           :visible.sync="isShowAdd"
 | |
|           width="800px"
 | |
|           title="事件处理"
 | |
|           @closed="onClose"
 | |
|           @onConfirm="handleEvent">
 | |
|         <el-form class="ai-form" label-width="120px" :model="form" ref="form">
 | |
|           <!-- <el-form-item label="事件分类" prop="groupId" style="width: 100%;" :rules="[{ required: true, message: '请选择事件分类' }]">
 | |
|             <ai-select
 | |
|                 v-model="form.groupId"
 | |
|                 placeholder="请选择事件分类"
 | |
|                 :selectList="dictList">
 | |
|             </ai-select>
 | |
|           </el-form-item> -->
 | |
|           <el-form-item label="事件分类" prop="type"  :rules="[{ required: true, message: '请选择事件分类' }]" style="width: 100%;">
 | |
|             <ai-select v-model="form.type" :selectList="typeList" placeholder="请选择" />
 | |
|           </el-form-item>
 | |
| 
 | |
|           <el-form-item label="处理结果" prop="eventStatus" style="width: 100%;" :rules="[{ required: true, message: '请选择处理结果' }]">
 | |
|             <el-radio-group v-model="form.eventStatus">
 | |
|               <el-radio label="1">已办结</el-radio>
 | |
|               <el-radio label="0">已拒绝</el-radio>
 | |
|             </el-radio-group>
 | |
|           </el-form-item>
 | |
|           <el-form-item label="处理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入处理意见' }]">
 | |
|             <el-input type="textarea" :rows="5" :maxlength="500" v-model="form.content" clearable placeholder="请输入处理意见" show-word-limit></el-input>
 | |
|           </el-form-item>
 | |
|           <el-form-item label="图片" prop="files" style="width: 100%;">
 | |
|             <ai-uploader
 | |
|                 :instance="instance"
 | |
|                 isShowTip
 | |
|                 v-model="form.files"
 | |
|                 :limit="9">
 | |
|             </ai-uploader>
 | |
|           </el-form-item>
 | |
|         </el-form>
 | |
|       </ai-dialog>
 | |
|       <ai-dialog
 | |
|           :visible.sync="isShowForward"
 | |
|           width="800px"
 | |
|           @close="onClose"
 | |
|           title="事件指派"
 | |
|           @onConfirm="onForwardConfirm">
 | |
|         <el-form class="ai-form" label-width="120px" :model="forwardForm" ref="forwardForm">
 | |
|           <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">
 | |
|                 <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>
 | |
|           <el-form-item label="办理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入办理意见' }]">
 | |
|             <el-input type="textarea" :rows="5" :maxlength="500" v-model="forwardForm.content" clearable placeholder="请输入办理意见" show-word-limit></el-input>
 | |
|           </el-form-item>
 | |
|           <el-form-item label="图片" prop="files" style="width: 100%;">
 | |
|             <ai-uploader
 | |
|                 :instance="instance"
 | |
|                 v-model="forwardForm.files"
 | |
|                 isShowTip
 | |
|                 :limit="9">
 | |
|             </ai-uploader>
 | |
|           </el-form-item>
 | |
|         </el-form>
 | |
|       </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="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="type"  :rules="[{ required: true, message: '请选择事件类型' }]" style="width: 100%;">
 | |
|             <ai-select v-model="editInfo.type" :selectList="typeList" placeholder="请选择" />
 | |
|           </el-form-item>
 | |
|           <el-form-item label="所属网格" style="width: 100%;">
 | |
|             <el-input disabled size="small" v-model="editInfo.girdName" clearable>
 | |
|               <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="事件地点" style="width: 100%;">
 | |
|             <el-input disabled size="small" v-model="editInfo.address"></el-input>
 | |
|           </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 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>
 | |
|     </template>
 | |
|   </ai-detail>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import AMapLoader from '@amap/amap-jsapi-loader'
 | |
| import {mapState} from 'vuex'
 | |
| 
 | |
| export default {
 | |
|   name: 'Detail',
 | |
|   props: ['dict', 'instance'],
 | |
| 
 | |
|   data() {
 | |
|     return {
 | |
|       forwardForm: {
 | |
|         content: '',
 | |
|         handleUserId: '',
 | |
|         handleUserName: '',
 | |
|         files: [],
 | |
|         user: []
 | |
|       },
 | |
|       isLoading: true,
 | |
|       name: '',
 | |
|       detail: {},
 | |
|       eventList: [],
 | |
|       isShowAdd: false,
 | |
|       userList: [],
 | |
|       processList: [],
 | |
|       dictList: [],
 | |
|       defaultProps: {
 | |
|         label: 'girdName'
 | |
|       },
 | |
|       isShowForward: false,
 | |
|       tree: [],
 | |
|       gridInfo: {},
 | |
|       form: {
 | |
|         files: [],
 | |
|         groupId: '',
 | |
|         groupName: '',
 | |
|         content: [],
 | |
|         eventStatus: '1',
 | |
|         type: ''
 | |
|       },
 | |
|       evaluation: {},
 | |
|       isShowEdit: false, //编辑工单信息
 | |
|       editInfo: {},
 | |
|       placeDetail: {
 | |
|         lng: '',
 | |
|         lat: '',
 | |
|         address: ''
 | |
|       },
 | |
|       showMap: false,
 | |
|       searchPlace: '',
 | |
|       map: null,
 | |
|       typeList: []
 | |
|     }
 | |
|   },
 | |
| 
 | |
|   computed: {
 | |
|     ...mapState(['user']),
 | |
|     process: v => [v.evaluation.id ? {
 | |
|       systemExplain: `${v.evaluation.createUserName}完成评价 (${v.evaluation.score}星评价)`,
 | |
|       doTime: v.evaluation.createTime,
 | |
|       doExplain: v.evaluation.rateText,
 | |
|     } : null, v.processList].flat().filter(Boolean)
 | |
|   },
 | |
| 
 | |
|   created() {
 | |
|     this.getDict()
 | |
|     this.getTypeList()
 | |
|     this.dict.load('clapEventStatus', 'residentEventSource', 'xbotReportEventType').then(() => {
 | |
|       this.getDetail()
 | |
|     })
 | |
|   },
 | |
| 
 | |
|   methods: {
 | |
|     getDetail() {
 | |
|       this.instance.post('/app/appsessionarchivereportinfo/queryDetailById', null, {
 | |
|         params: {id: this.$route.query.id}
 | |
|       }).then(res => {
 | |
|         if (res?.data) {
 | |
|           this.detail = res.data
 | |
|           this.processList = res.data.processList
 | |
|           this.$forceUpdate()
 | |
|           this.$nextTick(() => {
 | |
|             this.initMap()
 | |
|           })
 | |
|           this.isLoading = false
 | |
|         }
 | |
|       }).catch(() => {
 | |
|         this.isLoading = false
 | |
|       })
 | |
|     },
 | |
|     getTypeList() {
 | |
|       this.instance.post(`/app/appsessionarchivefeaturelibrary/eventTypeList`).then(res => {
 | |
|         if (res.code == 0) {
 | |
|           res.data.map((item) => {
 | |
|             var i = {dictName: item, dictValue: item}
 | |
|             this.typeList.push(i)
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     getGirdList() {
 | |
|       return this.instance.post(`/app/appresidentreportinfo/listGirdInfoByTransfer?id=${this.$route.query.id}`).then(res => {
 | |
|         if (res?.data) {
 | |
|           // return this.tree = this.formatList([res.data])
 | |
|           this.tree = res.data
 | |
|           this.tree.map((item) => {
 | |
|             item.children = [item.girdMemberList?.map(e => ({
 | |
|               ...e, isUser: true, girdName: item.girdName
 | |
|             })) || []].flat()
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     onClose() {
 | |
|       this.form.files = []
 | |
|       this.form.groupId = ''
 | |
|       this.form.groupName = ''
 | |
|       this.form.content = ''
 | |
|       this.form.eventStatus = ''
 | |
|       this.forwardForm.content = ''
 | |
|       this.forwardForm.handleUserName = ''
 | |
|       this.forwardForm.user = []
 | |
|       this.forwardForm.files = []
 | |
|     },
 | |
| 
 | |
|     formatList(list) {
 | |
|       for (let item of list) {
 | |
|         item.children = [item.girdList, item.girdMemberList?.map(e => ({
 | |
|           ...e, isUser: true, girdName: item.girdName,
 | |
|           girdId: item.id
 | |
|         })) || []].flat()
 | |
|         if (item.girdList?.length > 0) {
 | |
|           this.formatList(item.girdList)
 | |
|         }
 | |
|       }
 | |
|       return list
 | |
|     },
 | |
| 
 | |
|     filterNode(value, data) {
 | |
|       if (!value) return true
 | |
| 
 | |
|       return (data.girdName && data.girdName.indexOf(value) !== -1) || (data.name && data.name.indexOf(value) !== -1) || (data.name && data.phone.indexOf(value) !== -1)
 | |
|     },
 | |
| 
 | |
|     onTreeChange(e) {
 | |
|       this.gridInfo = e
 | |
|     },
 | |
| 
 | |
|     onForwardConfirm() {
 | |
|       this.$refs.forwardForm.validate(v => {
 | |
|         if (v) {
 | |
|           this.instance.post('/app/appsessionarchivereportinfo/transfer', {
 | |
|             ...this.forwardForm,
 | |
|             id: this.$route.query.id
 | |
|           }).then(res => {
 | |
|             if (res?.code == 0) {
 | |
|               this.$message.success('转交成功!')
 | |
|               this.isShowForward = false
 | |
|               this.processList = []
 | |
|               this.onClose()
 | |
|               this.getDetail()
 | |
|               
 | |
|             }
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
|     getDict() {
 | |
|       this.instance.post(`/app/appresidentreportgroup/list?current=1&size=100000`).then(res => {
 | |
|         if (res.code == 0) {
 | |
|           this.dictList = res.data.records.map(v => {
 | |
|             return {
 | |
|               dictValue: v.id,
 | |
|               dictName: v.groupName
 | |
|             }
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     close() {
 | |
|       this.$confirm('确定关闭该事件?').then(() => {
 | |
|         this.instance.post(`/app/appresidentreportinfo/delete?ids=${this.$route.query.id}`).then(res => {
 | |
|           if (res.code == 0) {
 | |
|             this.$message.success('删除成功!')
 | |
|             this.getList()
 | |
|           }
 | |
|         })
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     cancel(isRefresh) {
 | |
|       this.$emit('change', {
 | |
|         type: 'list',
 | |
|         isRefresh: !!isRefresh
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     onChange(e) {
 | |
|       this.instance.post(`/app/appvillagerintegralrule/list?size=1000&classification=${e}&ruleStatus=1`).then(res => {
 | |
|         if (res.code === 0) {
 | |
|           this.form.ruleId = ''
 | |
|           this.eventList = res.data.records
 | |
|         }
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     initMap() {
 | |
|       let {lng, lat} = this.detail
 | |
|       let center = [lng, lat]
 | |
|       AMapLoader.load({
 | |
|         key: 'b553334ba34f7ac3cd09df9bc8b539dc',
 | |
|         version: '2.0'
 | |
|       }).then(AMap => {
 | |
|         let map = new AMap.Map('map', {
 | |
|           center,
 | |
|           zoom: 14
 | |
|         })
 | |
|         let marker = new AMap.Marker({
 | |
|           position: new AMap.LngLat(lng, lat),
 | |
|           title: this.detail.address
 | |
|         })
 | |
|         map.add(marker)
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     handleEvent() {
 | |
|       this.$refs.form.validate(v => {
 | |
|         if (v) {
 | |
|           this.instance.post('/app/appsessionarchivereportinfo/finish', {
 | |
|             ...this.form,
 | |
|             id: this.$route.query.id
 | |
|           }).then(res => {
 | |
|             if (res?.code == 0) {
 | |
|               this.isShowAdd = false
 | |
|               this.getDetail()
 | |
|               this.$message.success('处理成功!')
 | |
|             }
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     },
 | |
| 
 | |
|     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,
 | |
|             girdIds: this.editInfo.girdIds.length ? this.editInfo.girdIds[0] : ''
 | |
|           }).then(res => {
 | |
|             if (res?.code == 0) {
 | |
|               this.isShowEdit = false
 | |
|               this.getDetail()
 | |
|               this.$message.success('编辑成功!')
 | |
|             }
 | |
|           })
 | |
|         }
 | |
|       })
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| 
 | |
| <style lang="scss" scoped>
 | |
| .reportAtWillDetail {
 | |
|   height: 100%;
 | |
| 
 | |
|   .grid-wrapper {
 | |
|     min-height: 360px;
 | |
|   }
 | |
| 
 | |
|   .title-btns {
 | |
|     display: flex;
 | |
|     align-items: center;
 | |
|   }
 | |
| 
 | |
|   :deep( .el-tree ) {
 | |
|     background: transparent;
 | |
| 
 | |
|     .el-tree-node__expand-icon.is-leaf {
 | |
|       color: transparent !important;
 | |
|     }
 | |
| 
 | |
|     .el-tree-node__content > .el-tree-node__expand-icon {
 | |
|       padding: 4px;
 | |
|     }
 | |
| 
 | |
|     .el-tree-node__content {
 | |
|       height: 32px;
 | |
|     }
 | |
| 
 | |
|     .el-tree__empty-text {
 | |
|       color: #222;
 | |
|       font-size: 14px;
 | |
|     }
 | |
| 
 | |
|     .el-tree-node__children .el-tree-node__content {
 | |
|       height: 32px;
 | |
|     }
 | |
| 
 | |
|     .el-tree-node__content:hover {
 | |
|       background: #E8EFFF;
 | |
|       color: #222222;
 | |
|       border-radius: 2px;
 | |
|     }
 | |
| 
 | |
|     .is-current > .el-tree-node__content {
 | |
|       &:hover {
 | |
|         background: #2266FF;
 | |
|         color: #fff;
 | |
|       }
 | |
| 
 | |
|       background: #2266FF;
 | |
| 
 | |
|       span {
 | |
|         color: #fff;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .el-steps {
 | |
|     :deep( .el-step__icon ) {
 | |
|       font-size: 12px;
 | |
|       color: #555555;
 | |
|       border-color: #d0d4dc;
 | |
|     }
 | |
| 
 | |
|     :deep( .el-step__head.is-finish ) {
 | |
|       .el-step__icon.is-text {
 | |
|         border: none;
 | |
|         color: #fff;
 | |
|         font-size: 12px;
 | |
|         background: #2266ff;
 | |
|       }
 | |
|     }
 | |
| 
 | |
|     :deep( .el-step__line ) {
 | |
|       background-color: #d0d4dc;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   .imgs {
 | |
|     font-size: 0;
 | |
| 
 | |
|     img {
 | |
|       width: 108px;
 | |
|       height: 108px;
 | |
|       margin-right: 4px;
 | |
|       margin-bottom: 4px;
 | |
|       cursor: pointer;
 | |
|       user-select: none;
 | |
| 
 | |
|       &:hover {
 | |
|         opacity: 0.8;
 | |
|       }
 | |
| 
 | |
|       &:nth-of-type(2n) {
 | |
|         margin-right: 0;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   :deep( .report-dialog ) {
 | |
|     .el-select {
 | |
|       width: 100%;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   :deep( .el-step__head.is-process ) {
 | |
|     color: #555;
 | |
|     border-color: #555;
 | |
|   }
 | |
| 
 | |
|   :deep( .is-finish h2 ) {
 | |
|     color: #2266ff;
 | |
|   }
 | |
| 
 | |
|   .step-title {
 | |
|     color: #555;
 | |
|   }
 | |
| 
 | |
|   .detail-content__wrapper {
 | |
|     display: flex;
 | |
|     width: 100%;
 | |
|     flex-wrap: wrap;
 | |
| 
 | |
|     .detail-content__wrapper--left {
 | |
|       flex: 1;
 | |
|       margin-right: 20px;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   :deep( .ai-detail__content ) {
 | |
|     background: #f3f6f9;
 | |
| 
 | |
|     .ai-detail__content--wrapper {
 | |
|       display: flex;
 | |
|       gap: 16px;
 | |
|       width: 100%;
 | |
|       max-width: 100%;
 | |
|       padding: 16px;
 | |
|       box-sizing: border-box;
 | |
| 
 | |
|       & > .el-card {
 | |
|         flex: 1;
 | |
|         min-width: 0;
 | |
|       }
 | |
| 
 | |
|       .rightZone {
 | |
|         width: 400px;
 | |
|         flex-shrink: 0;
 | |
|         display: flex;
 | |
|         flex-direction: column;
 | |
|         gap: 16px;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   :deep( .el-card ) {
 | |
|     .el-card__header {
 | |
|       padding: 12px 16px;
 | |
|       font-weight: bold;
 | |
|     }
 | |
| 
 | |
|     .el-card__body {
 | |
|       padding: 8px;
 | |
|     }
 | |
| 
 | |
|     #amap {
 | |
|       width: 466px;
 | |
|       height: 232px;
 | |
|     }
 | |
| 
 | |
|     .el-steps {
 | |
|       margin-left: 8px;
 | |
|     }
 | |
| 
 | |
|     .imgFormItem > .el-form-item__content {
 | |
|       display: flex;
 | |
|       gap: 16px;
 | |
|       flex-wrap: wrap;
 | |
| 
 | |
|       &:before {
 | |
|         content: none;
 | |
|       }
 | |
| 
 | |
|       .el-image__inner {
 | |
|         width: 82px;
 | |
|         height: 82px;
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </style>
 |