epmet-work-pc-chengyang/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 && gridName">
              <span class="item-field">所属网格：</span>
              <span>{{ gridName }}</span>
            </div>
            <div class="item" v-if="index == 0">
              <span class="item-field">所属小区：</span>
              <span>{{ xiaoquName }}</span>
            </div>
            <div class="item" v-if="index == 0">
              <span class="item-field">所属楼栋：</span>
              <span>{{ louName }}-{{ danyuanName }}</span>
            </div>
            <div class="item" v-if="index == 0">
              <span class="item-field">所属家庭：</span>
              <span>{{ homeName }}</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' ||
                  field.itemType == 'checkbox' ||
                  field.itemType == 'cascader'
                "
                >{{
                  info[field.columnName] == null
                    ? "--"
                    : getOptionLabel(
                        field.options,
                        info[field.columnName],
                        field.itemType
                      )
                }}</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="subStartGroupIndex"
            v-if="groupList.length > 9"
          >
            <img src="@/assets/img/shuju/people/arrow-double-left.png" />
          </div>
          <div
            v-show="index >= startGroupIndex && index < startGroupIndex + 9"
            class="tab"
            :class="groupIndex % groupList.length == index ? 'z-on' : ''"
            :key="'tab' + index"
            @click="groupIndex = index"
            v-for="(item, index) in groupList"
          >
            {{ item.label }}
          </div>
          <div
            class="tab-btn"
            @click="addStartGroupIndex"
            v-if="groupList.length > 9"
          >
            <img src="@/assets/img/shuju/people/arrow-double-right.png" />
          </div>
        </div>

        <div
          :key="'group' + index"
          v-show="groupIndex % groupList.length == index"
          v-for="(group, index) in groupList"
        >
          <div
            v-if="
              group.tableName == 'ic_resi_demand' &&
              Array.isArray(allInfo.ic_resi_demand) &&
              allInfo.ic_resi_demand.length > 0
            "
          >
            <div
              class="list"
              :key="'ic_resi_demand' + infoIndex"
              v-for="(infoItem, infoIndex) in allInfo.ic_resi_demand"
            >
              <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' ||
                    field.itemType == 'checkbox' ||
                    field.itemType == 'cascader'
                  "
                  >{{
                    infoItem[field.columnName] == null
                      ? "--"
                      : getOptionLabel(
                          field.options,
                          infoItem[field.columnName],
                          field.itemType
                        )
                  }}</span
                >

                <span v-else>{{
                  infoItem[field.columnName] == null
                    ? "--"
                    : infoItem[field.columnName]
                }}</span>
              </div>
            </div>
          </div>
          <div
            v-else-if="group.tableName == 'ic_hs'"
            style="margin-top: 10px; padding: 0 20px"
          >
            <div class="tb">
              <cpt-tb
                :col-list="natDemand.colList"
                :loading="natDemand.loading"
                :header="natDemand.header"
                :list="natDemand.list"
              ></cpt-tb>
            </div>
          </div>
          <div
            v-else-if="group.tableName == 'ic_xc'"
            style="margin-top: 10px; padding: 0 20px"
          >
            <div class="tb">
              <cpt-tb
                :col-list="tripDemand.colList"
                :loading="tripDemand.loading"
                :header="tripDemand.header"
                :list="tripDemand.list"
              ></cpt-tb>
            </div>
          </div>
          <div
            v-else-if="group.tableName == 'ic_ym'"
            style="margin-top: 10px; padding: 0 20px"
          >
            <div class="tb">
              <cpt-tb
                :col-list="vaccineDemand.colList"
                :loading="vaccineDemand.loading"
                :header="vaccineDemand.header"
                :list="vaccineDemand.list"
              ></cpt-tb>
            </div>
          </div>
          <div class="list" v-else>
            <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' ||
                  field.itemType == 'checkbox' ||
                  field.itemType == 'cascader'
                "
                >{{
                  !allInfo[group.tableName] ||
                  allInfo[group.tableName][0][field.columnName] == null
                    ? "--"
                    : getOptionLabel(
                        field.options,
                        allInfo[group.tableName][0][field.columnName],
                        field.itemType
                      )
                }}</span
              >

              <span v-else>{{
                !allInfo[group.tableName] ||
                allInfo[group.tableName][0][field.columnName] == null
                  ? "--"
                  : allInfo[group.tableName][0][field.columnName]
              }}</span>
            </div>
          </div>
        </div>
      </cpt-card>
    </div>
  </div>
</template>

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

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

  components: {
    cptCard,
    cptTb,
  },

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

      xiaoquList: [],
      louList: [],
      danyuanList: [],
      homeList: [],

      natList: [], //核酸信息
      tripList: [], //行程信息

      natDemand: {
        loading: false,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "55%",
          },
          {
            align: "center",
            width: "10%",
          },
        ],
        header: ["序号", "检测时间", "检测地点", "检测结果"],
        list: [],
        srcList: [],
      },
      tripDemand: {
        loading: false,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "30%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "15%",
          },
          {
            align: "center",
            width: "15%",
          },
        ],
        header: [
          "序号",
          "来自地区",
          "来到本地地区",
          "离开本地地区",
          "最近一次通知时间",
          "备注",
        ],
        list: [],
        srcList: [],
      },
      vaccineDemand: {
        loading: false,
        colList: [
          {
            align: "center",
            width: "10%",
          },
          {
            align: "center",
            width: "20%",
          },
          {
            align: "center",
            width: "35%",
          },
          {
            align: "center",
            width: "35%",
          },
        ],
        header: ["序号", "接种时间", "接种地点", "疫苗厂家"],
        list: [],
        srcList: [],
      },
    };
  },

  computed: {
    isShundeju() {
      return this.$store.state.user.customerId == "1550309684576591874";
    },
    
    xiaoquName() {
      const {
        xiaoquList,
        info: { VILLAGE_ID },
      } = this;
      if (Array.isArray(xiaoquList) && xiaoquList.length > 0 && VILLAGE_ID) {
        let item = xiaoquList.find((item) => item.value == VILLAGE_ID);
        if (item) {
          return item.label;
        }
      }
      return "";
    },
    louName() {
      const {
        louList,
        info: { BUILD_ID },
      } = this;
      if (Array.isArray(louList) && louList.length > 0 && BUILD_ID) {
        let item = louList.find((item) => item.value == BUILD_ID);
        if (item) {
          return item.label;
        }
      }
      return "";
    },
    danyuanName() {
      const {
        danyuanList,
        info: { UNIT_ID },
      } = this;
      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
        let item = danyuanList.find((item) => item.value == UNIT_ID);
        if (item) {
          return item.label;
        }
      }
      return "";
    },
    danyuanName() {
      const {
        danyuanList,
        info: { UNIT_ID },
      } = this;
      if (Array.isArray(danyuanList) && danyuanList.length > 0 && UNIT_ID) {
        let item = danyuanList.find((item) => item.value == UNIT_ID);
        if (item) {
          return item.label;
        }
      }
      return "";
    },
    homeName() {
      const {
        homeList,
        info: { HOME_ID },
      } = this;
      if (Array.isArray(homeList) && homeList.length > 0 && HOME_ID) {
        let item = homeList.find((item) => item.value == HOME_ID);
        if (item) {
          return item.label;
        }
      }
      return "";
    },
  },

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

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

  methods: {
    addStartGroupIndex() {
      const { startGroupIndex, groupList } = this;
      if (startGroupIndex < groupList.length - 9) {
        this.startGroupIndex = startGroupIndex + 1;
      } else {
        this.startGroupIndex = groupList.length - 9;
      }
    },
    subStartGroupIndex() {
      const { startGroupIndex, groupList } = this;
      if (startGroupIndex > 0) {
        this.startGroupIndex = startGroupIndex - 1;
      } else {
        this.startGroupIndex = 0;
      }
    },
    handleClose() {
      this.$emit("close");
    },

    async getApiData() {
      await this.getField();
      await this.getInfo();
      this.getDetailList();
      this.getXiaoquList();
      this.getLouList();
      this.getDanyuanList();
      this.getHomeList();
    },

    getOptionLabel(options, value, type = "") {
      if (Array.isArray(options)) {
        let valueArr = value.split(",");
        if (type == "cascader") {
          if (valueArr.length > 0) {
            let level1 = options.find((item) => item.value == valueArr[0]);
            if (level1) {
              if (valueArr.length > 1 && level1.children) {
                let level2 = level1.children.find(
                  (item) => item.value == valueArr[1]
                );
                if (level2) {
                  return level1.label + "-" + level2.label;
                }
              }
              return level1.label;
            }
          }
        } else {
          return valueArr
            .map((val) => {
              let item = options.find((item) => item.value == val);
              if (item && item.label) {
                return item.label;
              }
              return "--";
            })
            .join("、");
        }
      }
      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
              );
            }
          });
        });
      } 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];
        this.allInfo = data;

        this.fieldList.forEach((subList, index) => {
          subList.forEach((item, subIndex) => {
            if (
              item.itemType == "radio" &&
              item.childGroup &&
              this.allInfo[item.tableName] &&
              this.allInfo[item.tableName][0][item.columnName] == "1"
            ) {
              this.groupList = [...this.groupList, item.childGroup];
            }
          });
        });
        console.log("1111111111111111111111111", this.groupList);

        this.groupList.forEach((subList, index) => {
          subList.itemList.forEach(async (item, subIndex) => {
            if (item.optionSourceType == "remote" && item.optionSourceValue) {
              this.groupList[index].itemList[subIndex].options =
                await this.getOptions(item.optionSourceValue);
            }
          });
        });
        
        let arr = [
          {
            groupId: "hs123",
            itemList: [],
            label: "核酸检测信息",
            sort: 998,
            supportAdd: false,
            tableName: "ic_hs",
          },
        ];
        if (!this.isShundeju) {
          arr = [
            ...arr,
            {
              groupId: "hs124",
              itemList: [],
              label: "行程信息",
              sort: 999,
              supportAdd: false,
              tableName: "ic_xc",
            },
            {
              groupId: "hs125",
              itemList: [],
              label: "疫苗信息",
              sort: 999,
              supportAdd: false,
              tableName: "ic_ym",
            },
          ];
        }
        this.groupList = [...this.groupList, ...arr];
      } else {
        this.$message.error(msg);
      }
    },

    async getDetailList() {
      const url = "/epmetuser/epidemicPrevention/info";
      let params = {
        id: this.userId,
      };

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

      if (code === 0) {
        const { natList, tripList, vaccineList } = data;

        this.natList = natList;
        this.tripList = tripList;

        this.natDemand.list = natList.map((item) => {
          return [{ type: "index" }, item.testTime, item.address, item.result];
        });
        this.natDemand.srcList = natList;

        this.tripDemand.list = tripList.map((item) => {
          return [
            { type: "index" },
            item.fromRegion,
            item.arrivalTime,
            item.leaveTime,
            item.noticeTime,
            item.remark,
          ];
        });
        this.tripDemand.srcList = tripList;

        this.vaccineDemand.list = vaccineList.map((item) => {
          return [
            { type: "index" },
            item.vaccinateTime,
            item.address,
            item.manufactor,
          ];
        });
        this.vaccineDemand.srcList = vaccineList;
      } 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 [];
      }
    },

    async getXiaoquList() {
      const url = "/gov/org/icneighborhood/neighborhoodoption";

      const { data, code, msg } = await requestPost(url, {
        agencyId: this.info.AGENCY_ID,
        gridId: this.info.GRID_ID,
      });

      if (code === 0) {
        this.xiaoquList = data;
      } else {
        this.$message.error(msg);
      }
    },
    async getLouList() {
      const url = "/gov/org/icbuilding/buildingoption";

      const { data, code, msg } = await requestPost(url, {
        neighborHoodId: this.info.VILLAGE_ID,
      });

      if (code === 0) {
        this.louList = data;
      } else {
        this.$message.error(msg);
      }
    },
    async getDanyuanList() {
      const url = "/gov/org/icbuildingunit/unitoption";

      const { data, code, msg } = await requestPost(url, {
        buildingId: this.info.BUILD_ID,
      });

      if (code === 0) {
        this.danyuanList = data;
      } else {
        this.$message.error(msg);
      }
    },
    async getHomeList() {
      const url = "/gov/org/ichouse/houseoption";

      const { data, code, msg } = await requestPost(url, {
        unitId: this.info.UNIT_ID,
      });

      if (code === 0) {
        this.homeList = data;
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

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