You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
371 lines
10 KiB
371 lines
10 KiB
<template>
|
|
<div>
|
|
|
|
<el-dialog
|
|
:before-close="handleClose"
|
|
:modal="true"
|
|
:modal-append-to-body="false"
|
|
:visible.sync="dialogVisible"
|
|
class="dissatisfied-detail"
|
|
title=""
|
|
width="1118px"
|
|
>
|
|
<div class="content">
|
|
<div class="main-title main-title2">
|
|
<Title text="个性服务详情"/>
|
|
</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>
|
|
<template v-if="detail.status == 'finished' && detail.reportType != 'self_help'">
|
|
<el-col :span="12">
|
|
<div class="items">
|
|
<div class="label">完成情况：</div>
|
|
<div class="value">{{
|
|
detail.finishResult === 'resolved' ? '已解决' : detail.finishResult === 'unresolved' ? '未解决' : '--'
|
|
}}
|
|
</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :span="12">
|
|
<div class="items">
|
|
<div class="label">评价：</div>
|
|
<div class="value">{{ detail.score ? detail.score : '--' }}</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
<el-col :span="24">
|
|
<div class="items">
|
|
<div class="label">备注：</div>
|
|
<div class="value">{{ detail.finishDesc ? detail.finishDesc : '--' }}</div>
|
|
</div>
|
|
</el-col>
|
|
|
|
|
|
</template>
|
|
</el-row>
|
|
<el-row v-else>
|
|
<el-col :span="24">
|
|
<div class="items">
|
|
<div class="label">服务方：</div>
|
|
<el-select
|
|
v-model.trim="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.trim="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>
|
|
|
|
<template v-if="detail.status !== 'finished'">
|
|
|
|
<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>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</el-dialog>
|
|
<ResourceScheduling ref="ResourceScheduling" :demandRecDetail="detail" :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>
|
|
|