epmet-oper-gov-yifengdian/src/views/modules/communityParty/govern/dialogDetail.vue

<template>
  <div>
    <div class="dialog-h-content scroll-h">
      <div class="m-row">
        <div class="m-info">
          <div class="info-prop">
            <span class="info-title-2">类型：</span>
            <span>{{ getTypeLable(formData.type) }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">姓名：</span>
            <span>{{ formData.name }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">介绍：</span>
            <span>{{ formData.introduction }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">排序：</span>
            <span>{{ formData.sort }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">封面：</span>
            <img width="450px" :src="formData.cover" />
          </div>
        </div>
      </div>
    </div>

    <div class="div-btn">
      <el-button size="small" @click="handleCancle">关 闭</el-button>
    </div>
  </div>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import daiMap from "@/utils/dai-map";

var map;
let loading; // 加载动画

export default {
  data() {
    return {
      formData: {},
      initLoading: false,
      types: [
        {
          label: '高端科技人才',
          value: '1'
        },
        {
          label: '土秀才田专家',
          value: '2'
        },
      ],
    };
  },
  components: {},
  mounted() {},

  methods: {
    handleCancle() {
      this.diaDestroy();
      this.$emit("diaDetailClose");
    },

    diaDestroy() {
      if (map) {
        // map.destroy()
      }
    },

    getTypeLable(type) {
      if (type) {
        const lable =
          this.unitList.filter((item) => item.value == type)[0].label;
        return lable;
      }
      return "";
    },
    async initForm(row) {
      this.startLoading();
      this.formData = row;
      this.endLoading();
    },

    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  computed: {},
  props: {
    serviceList: {
      type: Array,
      default: [],
    },
    gridList: {
      type: Array,
      default: [],
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/modules/management/detail-main.scss";
</style>

<style lang="scss" scoped>
/deep/ .text_p {
  margin: 0 0;
  border: 3px;

  > p {
    margin: 0 0;
  }
  img {
    max-width: 100%;
    height: auto;
  }
}
</style>