epmet-work-pc/src/views/dataBoard/cpts/details/smyd.vue

<template>
  <el-dialog
    width="818px"
    :modal="true"
    :modal-append-to-body="false"
    :destroy-on-close="true"
    :visible="showDialog"
    @close="handleClose"
  >
    <div class="eventWrap">
      <el-row :gutter="32">
        <el-col :span="24" style="padding-left: 40px">
          <title-box text="省满意度调查不满意事项详情" />
        </el-col>
        <el-col
          :span="23"
          style="padding-left: 40px"
          v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 21, 64, 0"
        >
          <div class="leftEvent">
            <div class="eventDetails">
              <img
                :width="18"
                :height="18"
                src="@/assets/images/manyidu/tc-title-icon.png"
              />事项详情
            </div>
            <div class="eventItem">
              <span>所属组织：</span>
              <span>{{ item.agencyName }}</span>
            </div>
            <div class="eventItem">
              <span>不满意事项来源：</span>
              <span>省满意度调查</span>
            </div>
            <div class="eventItem">
              <span>不满意事项类型：</span>
              <span>{{ item.scopeId && getSxType(item.scopeId) }}</span>
            </div>
            <div class="eventItem">
              <span>所属月份：</span>
              <span>{{
                item.createdTime && getMonthData(item.createdTime)
              }}</span>
            </div>
            <div class="eventItem">
              <div>不满意事项描述：</div>
              <div style="margin-top: 20px">{{ item.problemDesc }}</div>
            </div>
            <div class="eventItem">
              <span>提交人姓名：</span>
              <span>{{ item.name }}</span>
            </div>
            <div class="eventItem">
              <span>提交人电话：</span>
              <span> {{ $sensitive(item.mobile, 3, 7) }}</span>
            </div>
            <div class="eventItem">
              <span>完成时限：</span>
              <span>{{ item.completeTime }}</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>
import titleBox from "@/views/dataBoard/satisfactionEval/components/Title";

export default {
  name: "ReportAnEvent",
  components: {
    titleBox,
  },
  props: {
    id: {
      type: String,
      default: "",
    },
    showDialog: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      item: {
        logList: [],
      },
      loading: false,
      loading1: false,
      activities: [],
      // 不满意类型列表
      satisfactionCategoryOptions: [],
    };
  },
  computed: {},
  watch: {
    showDialog: {
      handler(val) {
        if (val) {
          this.getDetailsData(this.id);
        }
      },
      immediate: true,
    },
  },
  mounted() {},

  methods: {
    handleClose() {
      this.$emit("close", false);
      this.item = {};
    },

    openImg(src) {
      window.open(src);
    },

    getTrueTime(time) {
      return this.$moment(time * 1000).format("YYYY-MM-DD hh:mm");
    },

    getSxType(value) {
      if (this.satisfactionCategoryOptions.length > 0 && value) {
        return this.satisfactionCategoryOptions.filter(
          (item) => item.value == value
        )[0].label;
      }
      return "";
    },
    getMonthData(time) {
      if (time) {
        return this.$moment(time).format("YYYY年MM月");
      }
      return "";
    },
    getDetailsData(id) {
      this.loading = true;
      this.$http
        .post("/governance/provinceEvaluationRecord/" + id)
        .then((res) => {
          this.loading = false;
          const { code, data, msg } = res.data;
          if (code === 0) {
            this.item = data;
          } else {
            this.$message.error(msg);
          }
        });
      this.$http
        .get(
          "/governance/satisfactionDetailList/getUnsatisfiedCategory?satisfactionSource="
        )
        .then(({ data: { data } }) => {
          this.satisfactionCategoryOptions = data.map((item) => {
            return {
              label: item.categoryName,
              value: item.categoryCode,
            };
          });
        });
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/dataBoard/popup-info.scss" scoped></style>

<style lang="scss" scoped>
@import "@/assets/scss/modules/shequzhili/event-info.scss";

/deep/ .el-dialog {
  background: url(~@/assets/images/manyidu/dialog-bg.png);
  background-size: 100% 100%;
  width: 818px;
  max-height: 822px;
}

/deep/ .el-dialog__body {
  padding: 0 20px 30px;
}

/deep/ .el-dialog__header {
  border: 0 !important;
}

/deep/ .el-dialog__headerbtn {
  top: 24px;
  right: 32px;

  .el-dialog__close {
    color: #ffffff;
    font-weight: 600;
  }
}

@mixin fontStyle {
  color: #fff !important;
  font-size: 14px !important;
}

.eventWrap {
  width: 1094px;
  max-height: 798px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;

  .eventDetails {
    font-size: 18px;
    margin: 48px 24px 48px 0;
    color: #ffffff;

    img {
      margin-top: -4px;
      margin-right: 8px;
    }
  }

  .m-info {
    padding: 0px !important;

    .m-process {
      margin: 0 !important;

      .name {
        @include fontStyle;
      }

      .date {
        @include fontStyle;
      }

      .detail {
        @include fontStyle;

        .detail-field {
          flex: none !important;
        }
      }
    }
  }

  .leftEvent {
    color: #fff;

    .eventItem {
      font-size: 14px;
      margin-bottom: 24px;

      span:first-child {
      }

      span:last-child {
      }
    }
  }

  .rightEvent {
    color: #fff;
  }
}
</style>