epmet-oper-gov/src/views/modules/visual/basicinfo/cpts/people-more.vue

<template>
  <div class="m-pop">
    <div class="wrap">
      <cpt-card>
        <div class="title">
          <img src="@/assets/img/shuju/title-tip.png" />
          <span>更多信息</span>
        </div>

        <div class="btn-close" @click="handleClose">
          <img src="@/assets/img/shuju/people/close.png" />
        </div>

        <div
          :key="'fieldSubList' + index"
          v-for="(fieldSubList, index) in fieldList"
        >
          <div class="list">
            <div class="item" v-if="index == 0">
              <span class="item-field">所属网格：</span>
              <span>{{gridName}}</span>
            </div>
            <div class="item" v-if="index == 0">
              <span class="item-field">所属小区：</span>
              <span></span>
            </div>
            <div class="item" v-if="index == 0">
              <span class="item-field">所属楼宇：</span>
              <span></span>
            </div>
            <div class="item" v-if="index == 0">
              <span class="item-field">所属家庭：</span>
              <span></span>
            </div>
            <div class="item" :key="field.itemId" v-for="field in fieldSubList">
              <span class="item-field">{{ field.label }}：</span>

              <span
                v-if="field.itemType == 'select' || field.itemType == 'radio'"
                >{{
                  info[field.columnName] == null
                    ? "--"
                    : getOptionLabel(field.options, info[field.columnName])
                }}</span
              >

              <span v-else>{{
                info[field.columnName] == null ? "--" : info[field.columnName]
              }}</span>
            </div>
          </div>

          <div class="line"></div>
        </div>

        <div class="tabs">
          <div class="tab-btn" @click="groupIndex -= 1">
            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
          </div>
          <div
            class="tab"
            :class="groupIndex % groupList.length == index ? 'z-on' : ''"
            :key="'tab' + index"
            @click="groupIndex = groupList.length * 100 + index"
            v-for="(item, index) in groupList"
          >
            {{ item.label }}
          </div>
          <div class="tab-btn" @click="groupIndex += 1">
            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
          </div>
        </div>

        <div
          class="list"
          :key="'group' + index"
          v-show="groupIndex % groupList.length == index"
          v-for="(group, index) in groupList"
        >
          <div class="item" :key="field.itemId" v-for="field in group.itemList">
            <span class="item-field">{{ field.label }}：</span>
            <span
              v-if="field.itemType == 'select' || field.itemType == 'radio'"
              >{{
                info[field.columnName] == null
                  ? "--"
                  : getOptionLabel(field.options, info[field.columnName])
              }}</span
            >

            <span v-else>{{
              info[field.columnName] == null ? "--" : info[field.columnName]
            }}</span>
          </div>
        </div>
      </cpt-card>
    </div>
  </div>
</template>

<script>
import cptCard from "@/views/modules/visual/cpts/card";
import { requestPost } from "@/js/dai/request";

export default {
  name: "peopleMore",
  props: {
    userId: {
      type: String,
      default: "",
    },
    gridName: {
      type: String,
      default: "",
    }
  },

  components: {
    cptCard,
  },

  data() {
    return {
      fieldList: [],
      groupList: [],
      groupIndex: 0,
      info: {},

      
    };
  },

  watch: {
    userId() {
      this.getInfo();
    },
  },

  mounted() {
    this.getApiData();
  },

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

    getApiData() {
      this.getField();
      this.getInfo();
    },

    getOptionLabel(options, value) {
      if (Array.isArray(options)) {
        let item = options.find((item) => item.value == value);
        if (item && item.label) {
          return item.label;
        }
      }
      return "--";
    },

    //加载组织数据
    async getField() {
      const url = "/oper/customize/icform/getcustomerform";

      const { data, code, msg } = await requestPost(url, {
        dynamic: true,
        formCode: "resi_base_info",
      });

      if (code === 0) {
        this.groupList = data.groupList;
        this.fieldList = (function (arr) {
          let col = [];
          let ele = [];
          for (let i = 0; i < arr.length; i++) {
            let item = arr[i];
            if (item.itemType == "divider" || i == arr.length - 1) {
              col.push([...ele]);
              ele = [];
            } else {
              ele.push(item);
            }
          }
          return col;
        })(data.itemList);

        this.fieldList.forEach((subList, index) => {
          subList.forEach(async (item, subIndex) => {
            if (item.optionSourceType == "remote" && item.optionSourceValue) {
              this.fieldList[index][subIndex].options = await this.getOptions(
                item.optionSourceValue
              );
            }
          });
        });

        this.groupList.forEach((subList, index) => {
          subList.itemList.forEach(async (item, subIndex) => {
            if (item.optionSourceType == "remote" && item.optionSourceValue) {
              this.groupList[index].itemList.options = await this.getOptions(
                item.optionSourceValue
              );
            }
          });
        });

        this.groupIndex = this.groupList.length * 100;
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getInfo() {
      const url = "/epmetuser/icresiuser/detail";

      const { data, code, msg } = await requestPost(url, {
        icResiUserId: this.userId,
        formCode: "resi_base_info",
      });

      if (code === 0) {
        this.info = data.ic_resi_user[0];
      } else {
        this.$message.error(msg);
      }
    },

    //加载组织数据
    async getOptions(url) {
      if (!url) return [];

      const { data, code, msg } = await requestPost(url, {});

      if (code === 0) {
        return data;
      } else {
        return [];
      }
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/people.scss" scoped></style>