epmet-work-pc/src/views/modules/base/residentManagement/resiDisability/detailForm.vue

<template>
  <div>
    <div class="dialog-h-content scroll-h">
      <div v-if="initLoading" class="m-row">
        <div class="m-info">
          <el-row>
            <el-col :span="12">
                <div class="info-prop">
                    <span class="info-title-2">姓名: </span>
                    <span>{{ formData.name || "--" }}</span>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="info-prop">
                    <span class="info-title-2">联系电话: </span>
                    <span>{{ formData.mobile || "--" }}</span>
                </div>
            </el-col>
          </el-row>
          <div class="info-prop">
            <span class="info-title-2">证件类型: </span>
            <span>{{ formData.idTypeName || "--" }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">证件号: </span>
            <span>{{ formData.idNum || "--" }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">性别: </span>
            <span>{{
              formData.gender
                ? formData.gender == "1"
                  ? "男"
                  : formData.gender == "2"
                  ? "女"
                  : "--"
                : "--"
            }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">本地户籍: </span>
            <span>{{
              formData.localResidenceFlag
                ? formData.localResidenceFlag == "1"
                  ? "是"
                  : formData.localResidenceFlag == "0"
                  ? "否"
                  : "--"
                : "--"
            }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-2">户籍地址: </span>
            <span>{{ formData.placeOfDomicile || "--" }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-2">现居地址: </span>
            <span>{{ formData.currentResidence || "--" }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-2">残疾类别: </span>
            <span>{{ formData.disabilityCategoryName || "--" }}</span>
          </div>

          <div class="info-prop">
            <span class="info-title-2">残疾级别: </span>
            <span>{{ formData.disabilityLevelName || "--" }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">残疾证号: </span>
            <span>{{ formData.disabilityNum || "--" }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">低保: </span>
            <span>{{
              formData.subsistenceAllowanceFlag
                ? formData.subsistenceAllowanceFlag == "1"
                  ? "是"
                  : formData.subsistenceAllowanceFlag == "0"
                  ? "否"
                  : "--"
                : "--"
            }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">退休金额: </span>
            <span>{{ formData.retirementAmount || "--" }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">月收入: </span>
            <span>{{ formData.monthIncome || "--" }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">联系人: </span>
            <span>{{ formData.contactName || "--" }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">联系电话: </span>
            <span>{{ formData.contactMobile || "--" }}</span>
          </div>
          <div class="info-prop">
            <span class="info-title-2">备注: </span>
            <span>{{ formData.remark || "--" }}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="div-btn"></div>
    <el-row type="flex" justify="right">
      <el-col :span="24" align="right">
        <el-button size="small" @click="handleCancle" style="margin-right: 16px"
          >关 闭</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>
  
  <script>
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost, requestGet } from "@/js/dai/request";

let loading; // 加载动画

export default {
  data() {
    return {
      initLoading: false,
      formData: {},
      showPersonList: false,
    };
  },
  components: {},
  async mounted() {
    await this.loadInfo();
    this.initLoading = true;
  },

  methods: {
    //加载详情信息
    async loadInfo() {
      const url = `/governance/commonDemand/detail/${this.gxxqId}`;
      const { data, code, msg } = await requestGet(url);

      if (code === 0) {
        console.log(data);
        this.formData = { ...data };
      } else {
        this.$message.error(msg);
      }
    },

    handleCancle() {
      this.resetData();
      this.$emit("handleClose");
    },
    resetData() {
      this.formData = {};
    },

    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  computed: {
    dataRule() {
      return {
        serviceTimeStart: [
          { required: true, message: "服务时间不能为空", trigger: "blur" },
        ],
      };
    },
    serverOrgType() {
      let text = "";
      this.serviceOptions.forEach((item) => {
        if (item.value == this.formData.assignInfo.serverOrgType) {
          text = item.label;
        }
      });
      return text ? text : "--";
    },
  },
  props: {},
};
</script>
  
  <style lang="scss" scoped>
@import "@/assets/scss/modules/management/detail-main.scss";
.info-prop {
  margin-top: 29px;
}
.scroll-h {
  padding: 0 90px !important;
}
</style>