epmet-work-pc-chengyang/src/views/dataBoard/overview/components/DissatisfiedDetails.vue

<template>
  <el-dialog
      :before-close="handleClose"
      :modal="true"
      :modal-append-to-body="false"
      :visible.sync="dialogVisible"
      class="dissatisfied-detail"
      title=""
      width="1118px"
  >
    <div class="main-title main-title2">
      <Title text="不满意事项详情"/>
    </div>
    <div class="content">

      <el-row :gutter="20">
        <el-col :span="10">
          <div class="sub-title">事项详情</div>
          <div class="detail">
            <p>
              {{ 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;
  }
}
</style>