epmet-work-pc-chengyang/src/views/dataBoard/cpts/details/yxwxfw.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>{{ formData.principalName }}</span>
            </div>
            <div class="eventItem">
              <span>服务类型：</span>
              <span>{{
                formData.customerId && getFwType(formData.customerId)
              }}</span>
            </div>
            <div class="eventItem">
              <span>服务事项：</span>
              <span>{{ formData.serviceName }}</span>
            </div>
            <div class="eventItem">
              <span>服务时间：</span>
              <span
                >{{ formData.serviceTimeStart }} ~
                {{ formData.serviceTimeEnd }}</span
              >
            </div>
            <div class="eventItem">
              <div>服务内容：</div>
              <div style="margin-top: 20px">{{ formData.remark }}</div>
            </div>
            <div class="eventItem">
              <span>经办人：</span>
              <span>{{ formData.principalName }}</span>
            </div>
            <div class="eventItem">
              <span>联系电话：</span>
              <span> {{ $sensitive(formData.principalContact, 3, 7) }}</span>
            </div>
            <div class="eventItem">
              <span>服务组织：</span>
              <span>{{ formData.principalName }}</span>
            </div>
            <div class="eventItem">
              <span>政策依据：</span>
              <span>{{ formData.policyTitle }}</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: {},
      loading: false,
      loading1: false,
      activities: [],
      zuziTypes: {
        community_org: "社区自组织",
        ic_user_volunteer: "志愿者",
        party_unit: "联建单位",
        ommunity_org: "",
      },
      // 服务状态。
      serviceStatusList: {
        in_service: "服务中",
        completed: "已完成",
      },
      // 服务类型。
      serviceTypesLevel1: [],
    };
  },

  computed: {},
  watch: {
    showDialog: {
      handler(val) {
        if (val) {
          this.getDetailsData(this.id);
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.$http
      .get("/governance/commonServiceType/selectList/0")
      .then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        } else {
          this.serviceTypesLevel1 = res.data;
        }
      })
      .catch(() => {
        return this.$message.error("网络错误");
      });
  },

  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");
    },

    getFwType(value) {
      if (this.serviceTypesLevel1.length > 0 && value) {
        return this.serviceTypesLevel1.filter(
          (item) => item.customerId == value
        )[0].name;
      }
      return "";
    },
    getDetailsData(id) {
      this.loading = true;
      this.$http
        .post("/governance/icServiceRecordV2/detail", {
          serviceRecordId: id,
        })
        .then((res) => {
          const { code, data, msg } = res.data;
          if (code === 0) {
            this.formData = data;
            this.loading = false;
          } else {
            this.loading = false;
            this.$message.error(msg);
          }
        });
      this.$http
        .post("/governance/icEvent/process", { icEventId: id })
        .then((res) => {
          const { code, data, msg } = res.data;
          if (code === 0) {
            this.activities = data;
          } else {
            this.$message.error(msg);
          }
        });
    },
  },
};
</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 {
  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>