</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">缺字段</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">{{detail.reportUserMobile}}</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">{{detail.demandUserMobile}}</div> <CallPhone icon="el-icon-phone"/> </div> </el-col> <el-col :span="12"> <div class="items"> <div class="label">服务时间：</div> <div class="value">{{detail.serviceStartTime}}-{{detail.serviceEndTime}}</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-col :span="12"> <div class="items"> <div class="label">服务方联系电话：</div> <div class="value">缺字段</div> <CallPhone icon="el-icon-phone"/> </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.roles" class="select" popper-class="selectPopClass"> <el-option label="志愿者" value="1"/> </el-select> <el-select v-model="form.user" class="select" popper-class="selectPopClass"> <el-option label="王军（13210141412）" value="1"/> </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"/> <Supervision ref="supervision"/> </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}, data() { return { dialogVisible: false, isSelect: false, form: { roles: "", user: "", }, detail: {} }; }, methods: { handleClose(done) { this.dialogVisible = false; }, open(id) { this.dialogVisible = true; 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() }, handleCancel() { }, handleSure() { }, }, }; </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>