</div> <div class="contents"> <el-row> <el-col :span="12"> <div class="items"> <div class="label">需求类别：</div> <div class="value">{{detail.commonServiceTypeName}}</div> </div> </el-col> <el-col :span="12"> <div class="items"> <div class="label">需求标题：</div> <div class="value">{{detail.title}}</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> <el-row v-if="isSelect"> <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-col :span="24"> <div class="items"> <div class="label">自动通知服务方：</div> <el-radio-group v-model="form.noticeType" text-color="#fff" class="select" popper-class="selectPopClass"> <el-radio label="短信通知" value="1"/> <el-radio label="微信公众号通知" value="2"/> </el-radio-group> </div> </el-col> <el-col :span="24"> <div class="items"> <div class="label">服务范围：</div> <el-select v-model="form.range" class="select" popper-class="selectPopClass"> <el-option label="志愿者" value="1"/> </el-select> </div> </el-col> <el-col :span="24"> <div class="items"> <div class="label">服务时间：</div> <el-date-picker v-model="form.date" :append-to-body="false" class="select" end-placeholder="结束日期" format="yyyy-MM-dd" popper-class="date-current-weiyi" range-separator="至" start-placeholder="开始日期" type="daterange" value-format="yyyy-MM-dd" /> </div> </el-col> </el-row> <div v-if="!isSelect" class="btn-group"> <el-button class="green" plain round type="success" @click="handleDispatch">资源调度</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"/> </div> </template> <script> import Title from "@/views/dataBoard/satisfactionEval/components/Title"; import ResourceScheduling from "@/views/dataBoard/overview/components/ResourceScheduling.vue"; import CallPhone from "@/views/dataBoard/cpts/CallPhone"; export default { name: "ServiceDetails", components: {Title, ResourceScheduling, CallPhone}, 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.get('/governance/commonDemand/detail/'+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: flex-start; margin-bottom: 17px; line-height: 34px; .label { color: #9CB4D3; white-space: nowrap; } .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-date-editor .el-range-separator { color: #fff; } /deep/ .el-radio { color: #fff; } /deep/ .el-input__inner { width: 360px; height: 40px; color: #fff; border: 1px solid #0E3978; border-radius: 20px; background: rgba(0, 23, 66, 0.72); } /deep/ .el-range-editor .el-range-input { background: none; color: #fff; } ::v-deep .date-current-weiyi { background: rgba(3, 19, 51, 0.9); border-color: #006cff; box-shadow: inset 0px 0px 16px 0px rgba(0, 145, 255, 1); .el-date-picker__header-label { color: #ffffff; } .el-picker-panel__icon-btn { color: #ffffff; } .el-month-table { td { .cell { color: #ffffff; } } } .el-month-table td.current:not(.disabled) .cell { color: #fff; background-color: #409eff; } .el-month-table td.today:not(.disabled) .cell { color: #0056d6; } .el-date-picker__header--bordered { border-bottom: solid 1px #006cff; } } </style>