</div> <div class="content"> <el-row :gutter="20"> <el-col :span="10"> <div class="sub-title">事项详情</div> <div class="detail"> <p class="describe"> {{ unsatisfiedMattersModel.reason }} </p> <ul> <li> <span>事项来源：</span >{{ satisfactionSourceOptions[ unsatisfiedMattersModel.satisfactionSource ] }} </li> <li> <span>事项类型：</span >{{ unsatisfiedMattersModel.satisfactionCategoryName }} </li> <li> <span>所属月份：</span >{{ unsatisfiedMattersModel.satisfactionCategoryName }} </li> <li> <span>所属社区：</span >{{ unsatisfiedMattersModel.organizationName }} </li> <li><span>提交人：</span>{{ unsatisfiedMattersModel.name }}</li> <li> <span>提交人电话：</span>{{ unsatisfiedMattersModel.mobile }} </li> </ul> </div> </el-col> <el-col :offset="4" :span="10"> <div class="sub-title">回访记录</div> <div class="log"> <div v-for="(item, index) in followUpRecordDetails" class="log-item" > <div class="name"> {{ item.followUpUser }}（{{ item.roleName }}） </div> <div>{{ item.followUpDate }}</div> <div> {{ item.followUpWay }} <i class="el-icon-arrow-right"></i> </div> </div> </div> </el-col> </el-row> </div> </el-dialog> </template> <script> import Title from "@/views/dataBoard/satisfactionEval/components/Title"; export default { name: "DissatisfiedDetails", components: {Title}, data() { return { dialogVisible: false, unsatisfiedMattersModel: "", unsatisfiedHisCount: "", followUpRecordDetails: "", satisfactionSourceOptions: { satisfaction_12345: "12345投诉", satisfaction_province: "省满意度调查", satisfaction_community: "社区满意度自查", }, }; }, methods: { handleClose(done) { this.dialogVisible = false; }, open(id) { this.dialogVisible = true; this.getDetail(id); }, getDetail(id) { this.$http .post( "/governance/satisfactionDetailList/getUnsatisfiedMattersDetailInfo", {id} ) .then(({data: {data}}) => { this.unsatisfiedMattersModel = data.unsatisfiedMattersModel; this.unsatisfiedHisCount = data.unsatisfiedHisCount; this.followUpRecordDetails = data.followUpRecordDetails; if (this.unsatisfiedMattersModel.satisfactionSource) { this.unsatisfiedMattersModel.satisfactionSource = satisfactionSourceOptions.filter( (item) => item.value === this.unsatisfiedMattersModel.satisfactionSource )[0].label; } }); }, }, }; </script> <style lang="scss" scoped> @import "~@/assets/scss/dataBoard/dialog.scss"; .dissatisfied-detail { .sub-title { font-size: 18px; font-weight: 500; line-height: 22px; margin-bottom: 14px; padding-left: 26px; color: #ffffff; background: url("@/assets/images/manyidu/icon_fk.png") no-repeat left center; } .detail { p { font-size: 14px; font-weight: 400; line-height: 32px; margin: 0 0 10px; color: #ffffff; } ul { margin: 0; padding: 0; list-style-type: none; } li { line-height: 32px; color: #ffffff; span { color: #9cb4d3; } } } .log { padding-left: 26px; .log-item { display: flex; justify-content: space-between; width: 100%; padding: 9px 0; color: #fff; background: url("@/assets/images/manyidu/hf_line.png") bottom center no-repeat; .name { flex: 0 0 33.33333%; } } } .content { padding: 0 60px; } } .describe { letter-spacing: 1px; line-height: 30px; } </style>