</div> <div class="contents"> <el-row> <el-col :span="12"> <div class="items"> <div class="label">所属网格：</div> <div class="value">{{ detail.gridName }}</div> </div> </el-col> <el-col :span="12"> <div class="items"> <div class="label">需求类型：</div> <div class="value">{{ detail.categoryName }}</div> </div> </el-col> <el-col :span="12"> <div class="items"> <div class="label">上报类型：</div> <div class="value">{{ detail.reportTypeName }}</div> </div> </el-col> <el-col :span="12"> <div class="items"> <div class="label">上报人：</div> <div class="value">{{ detail.reportUserName }}</div> </div> </el-col> <el-col :span="12"> <div class="items"> <div class="label">上报人联系电话：</div> <div class="value">{{ $sensitive(detail.reportUserMobile, 3, 7) }}</div> <CallPhone icon="el-icon-phone"/> </div> </el-col> <el-col :span="12"> <div class="items"> <div class="label">上报时间：</div> <div class="value">{{ detail.reportTime }}</div> </div> </el-col> </el-row> <div class="hr"></div> <el-row> <el-col :span="12"> <div class="items"> <div class="label">需求人：</div> <div class="value">{{ detail.demandUserName }}</div> </div> </el-col> <el-col :span="12"> <div class="items"> <div class="label">需求人联系电话：</div> <div class="value">{{ $sensitive(detail.demandUserMobile, 3, 7) }}</div> <CallPhone icon="el-icon-phone"/> </div> </el-col> <el-col :span="12"> <div class="items"> <div class="label">服务时间：</div> <div class="value">{{ detail.wantServiceTime }}</div> </div> </el-col> <el-col :span="24"> <div class="items"> <div class="label">需求内容：</div> <div class="value"> {{ detail.content }} </div> </div> </el-col> </el-row> <div class="hr"></div> <el-row v-if="!isSelect"> <el-col :span="12"> <div class="items"> <div class="label">服务方：</div> <div class="value">{{ detail.serviceShowName }}</div> </div> </el-col>  </el-row> <el-row v-else> <el-col :span="24"> <div class="items"> <div class="label">服务方：</div> <el-select v-model="form.serviceType" class="select" popper-class="selectPopClass" @change="getServiceuserList($event, 'add_demand')" > <el-option v-for="item in serviceOptions" :key="item.value" :label="item.label" :value="item.value" > </el-option> </el-select> <el-select v-model="form.serverId" class="select" filterable popper-class="selectPopClass" > <el-option v-for="item in serviceOptiondList" :key="item.value" :label="item.label" :value="item.id" /> </el-select> <CallPhone icon="el-icon-phone"/> </div> </el-col> </el-row> <div v-if="!isSelect" class="btn-group"> <el-button class="green" plain round type="success" @click="handleDispatch">资源调度</el-button> <el-button class="orange" plain round type="warning" @click="handleSupervision">催办督办</el-button> </div> <div v-else class="btn-group"> <el-button class="cancel" plain round type="success" @click="handleCancel">取消</el-button> <el-button class="sure" plain round type="warning" @click="handleSure">确定</el-button> </div> </div> </div> </el-dialog> <ResourceScheduling ref="ResourceScheduling" :currentLevelData="currentLevelData" @handle="dispatchOrder"/> <Supervision ref="supervision" :currentLevelData="currentLevelData"/> </div> </template> <script> import Title from "@/views/dataBoard/satisfactionEval/components/Title"; import ResourceScheduling from "@/views/dataBoard/overview/components/ResourceScheduling.vue"; import Supervision from "@/views/dataBoard/overview/components/Supervision.vue"; import CallPhone from "@/views/dataBoard/cpts/CallPhone"; export default { name: "ServiceDetails", components: {Title, ResourceScheduling, CallPhone, Supervision}, props: { currentLevelData: { type: Object, default: () => { }, } }, data() { return { dialogVisible: false, isSelect: false, form: { serviceType: "", serverId: "", }, detail: { gridName: "" }, serviceOptions: [], serviceOptiondList: [], demandRecId: '' }; }, methods: { handleClose(done) { this.dialogVisible = false; this.detail = {} this.handleCancel() }, open(id) { this.dialogVisible = true; this.demandRecId = id this.getDetail(id); }, getDetail(id) { this.$http.post('/governance/userdemand/demandDetail', {demandRecId: id}).then(({data: {data}}) => { this.detail = data }) }, handleDispatch() { this.$refs.ResourceScheduling.open() }, handleSupervision() { this.$refs.supervision.open(this.detail, this.demandRecId,'services') }, handleCancel() { this.isSelect = false; this.form = {} }, handleSure() { this.$http.post('/governance/userdemand/assign',{ ...this.form, demandRecId: this.demandRecId }).then(res => { this.handleClose() this.$emit('ok') }) }, dispatchOrder() { console.log(6666) this.isSelect = true this.$http .post("/sys/dict/data/dictlist", { dictType: "user_demand_service_type", }) .then(({data: res}) => { if (res.code !== 0) { return this.$message.error(res.msg); } else { this.serviceOptions = res.data; } }) .catch(() => { return this.$message.error("网络错误"); }); }, async getServiceuserList(serviceType, query) { const {demandUserId} = this.form; const url = "/actual/base/serviceitem/listServerOrg"; let params = { serviceTypeId: this.detail.categoryCode[1],//上级ID serverOrgType: serviceType,//选的类型 businessType: "resi_service", }; await this.$http .post(url, params) .then(({data: res}) => { if (res.code !== 0) { return this.$message.error(res.msg); } else { this.serviceOptiondList = res.data || {} } }) .catch(() => { return this.$message.error("网络错误"); }); }, }, }; </script> <style lang="scss" scoped> @import "~@/assets/scss/dataBoard/dialog.scss"; .contents { padding: 40px 50px; .items { font-size: 14px; position: relative; display: flex; align-items: center; margin-bottom: 17px; .label { color: #9CB4D3; } .value { color: #FFFFFF; } } } .hr { height: 1px; margin: 25px 0; opacity: .4; border-bottom: 1px #0E79D6 dashed; } .btn-group { display: flex; align-items: center; justify-content: center; margin-top: 20px; .green { color: #00CD96; border: 1px solid #00CD96; background: rgba(39, 189, 127, 0.3); } .el-button { width: 136px; height: 36px; margin: 0 20px; } .orange { color: #FD8904; border: 1px solid #FD8904; background: rgba(253, 137, 4, 0.3); } .sure { color: #8ED3FF; border: 1px solid #006CFF; background: rgba(0, 108, 255, 0.5); } .cancel { color: #B6D2FF; border: 1px solid #6496E8; background: rgba(116, 146, 194, 0.6); } } .select { margin-right: 16px; } /deep/ .el-input__inner { width: 360px; height: 40px; color: #fff; border: 1px solid #0E3978; border-radius: 20px; background: rgba(0, 23, 66, 0.72); } </style>