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.
283 lines
7.0 KiB
283 lines
7.0 KiB
2 years ago
|
<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="!isSelect?'不满意事项详情':'共性需求派单'"/>
|
||
|
</div>
|
||
|
<div class="contents">
|
||
|
<el-row>
|
||
|
<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">教育讲座类共性需求</div>
|
||
|
</div>
|
||
|
</el-col>
|
||
|
<el-col :span="24">
|
||
|
<div class="items">
|
||
|
<div class="label">详细说明:</div>
|
||
|
<div class="value">
|
||
|
健康生活方式,是指有益于健康的习惯化的行为方式。主要表现为生活有规律,没有不良嗜好,讲求个人卫生、环境卫生、饮食卫生,讲科学、不迷
|
||
|
信,平时注意保健、生病及时就医,积极参加健康有益的文体活动和社会活动等等。
|
||
|
</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: "",
|
||
|
}
|
||
|
};
|
||
|
},
|
||
|
methods: {
|
||
|
handleClose(done) {
|
||
|
this.dialogVisible = false;
|
||
|
},
|
||
|
open(id) {
|
||
|
this.dialogVisible = true;
|
||
|
this.getDetail(id);
|
||
|
},
|
||
|
getDetail(id) {
|
||
|
|
||
|
},
|
||
|
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>
|