HS_MZAP/src/views/placeManage/placePerson.vue

<template>
  <van-nav-bar
    fixed
    title="人员档案管理"
    left-arrow
    @click-left="onClickLeft"
    :style="{ 'background-color': selectColor }"
  />
  <div class="main">
    <div class="serach">
      <van-search
        v-model="value"
        show-action
        shape="round"
        placeholder="请输入姓名/身份证/场所名称"
      >
        <template #action>
          <div>
            <van-dropdown-menu>
              <van-dropdown-item
                overlay="false"
                v-model="value1"
                :options="option1"
                @change="changeValue(value1)"
              />
            </van-dropdown-menu>
          </div>
        </template>
      </van-search>
    </div>
    <div class="PersonList" v-if="value1 == 0 || value == ''">
      <div
        class="PersonItem"
        v-for="item in dataList"
        :key="item.id"
        @click="goPlacePersonInfo(item)"
      >
        <van-row>
          <van-col span="18">
            <p>
              {{ item.name }}（<span style="color: #36a7f3">{{
                item.idcard
              }}</span
              >）
            </p>
          </van-col>
          <van-col span="6" style="text-align: right">
            <!-- <div
            v-for="(item2, index) in item.userManagenmetDetailsDTOList"
            :key="index"
            style="font-size: 12px"
          >
            <p
              v-if="
                item2.dataType == 1 &&
                item2.dataDictionary == 'hs_religion_type'
              "
              style="color: #36a7f3"
            >
              <span v-if="item2.value == 1" style="color: #1eba56"
                >伊斯兰教</span
              >
              <span v-if="item2.value == 2" style="color: #36a7f3">基督教</span>
              <span v-if="item2.value == 3" style="color: #ffa500">天主教</span>
              <span v-if="item2.value == 4" style="color: #d3c701">佛教</span>
              <span v-if="item2.value == 5" style="color: #a0522d">道教</span>
            </p>
          </div> -->
            <span v-if="item.sex == 1" style="color: #36a7f3">男</span>
            <span v-if="item.sex == 2" style="color: #d3c701">女</span>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="18">
            <span style="color: #a2a2a2" v-if="item.locationName">{{
              item.locationName
            }}</span>
          </van-col>
          <van-col span="6" style="text-align: right; font-size: 12px">
            <span v-if="item.personnelType == 1">宗教从业人员</span>
            <span v-else-if="item.personnelType == 2">民族场所从业人员</span>
            <span v-else-if="item.personnelType == 3">教职人员</span>
            <span v-else-if="item.personnelType == 4">固定信徒</span>
            <span v-else-if="item.personnelType == 5">场所居住人员</span>
            <span v-else-if="item.personnelType == 6">境外人员</span>
            <span v-else-if="item.personnelType == 7">非本市人员</span>
            <span v-else-if="item.personnelType == 8">非本教人员</span>
            <span v-else-if="item.personnelType == 9">新增信徒人员</span>
            <span v-else-if="item.personnelType == 10">临时人员</span>
            <span v-else-if="item.personnelType == 11">异常人员</span>
            <span v-else-if="item.personnelType == 12">邪教人员</span>
            <span v-else-if="item.personnelType == 13">管理人员</span>
            <span v-else-if="item.personnelType == 14">全能神离家人员</span>
            <span v-else-if="item.personnelType == 15">全能神骨干人员</span>
            <span v-else-if="item.personnelType == 16">网络运营人员</span>
            <span v-else-if="item.personnelType == 17">涉政有害活动人员</span>
            <span v-else-if="item.personnelType == 18">境内外记者</span>
            <span v-else-if="item.personnelType == 19">境外法轮功骨干人员</span>
            <span v-else-if="item.personnelType == 20">其他邪教骨干人员</span>
            <span v-else-if="item.personnelType == 21">心灵法门骨干人员</span>
            <span v-else>“精神控制”有害培训骨干人员</span>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="PersonList" v-if="value1 != 0 && value != ''">
      <div
        class="PersonItem"
        v-for="item in PersonList"
        :key="item.id"
        @click="goPlacePersonInfo(item)"
      >
        <van-row>
          <van-col span="18">
            <p>
              {{ item.name }}（<span style="color: #36a7f3">{{
                item.idcard
              }}</span
              >）
            </p>
          </van-col>
          <van-col span="6" style="text-align: right">
            <!-- <div
            v-for="(item2, index) in item.userManagenmetDetailsDTOList"
            :key="index"
            style="font-size: 12px"
          >
            <p
              v-if="
                item2.dataType == 1 &&
                item2.dataDictionary == 'hs_religion_type'
              "
              style="color: #36a7f3"
            >
              <span v-if="item2.value == 1" style="color: #1eba56"
                >伊斯兰教</span
              >
              <span v-if="item2.value == 2" style="color: #36a7f3">基督教</span>
              <span v-if="item2.value == 3" style="color: #ffa500">天主教</span>
              <span v-if="item2.value == 4" style="color: #d3c701">佛教</span>
              <span v-if="item2.value == 5" style="color: #a0522d">道教</span>
            </p>
          </div> -->
            <span v-if="item.sex == 1" style="color: #36a7f3">男</span>
            <span v-if="item.sex == 2" style="color: #d3c701">女</span>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="18">
            <span style="color: #a2a2a2" v-if="item.locationName">{{
              item.locationName
            }}</span>
          </van-col>
          <van-col span="6" style="text-align: right; font-size: 12px">
            <span v-if="item.personnelType == 1">宗教从业人员</span>
            <span v-else-if="item.personnelType == 2">民族场所从业人员</span>
            <span v-else-if="item.personnelType == 3">教职人员</span>
            <span v-else-if="item.personnelType == 4">固定信徒</span>
            <span v-else-if="item.personnelType == 5">场所居住人员</span>
            <span v-else-if="item.personnelType == 6">境外人员</span>
            <span v-else-if="item.personnelType == 7">非本市人员</span>
            <span v-else-if="item.personnelType == 8">非本教人员</span>
            <span v-else-if="item.personnelType == 9">新增信徒人员</span>
            <span v-else-if="item.personnelType == 10">临时人员</span>
            <span v-else-if="item.personnelType == 11">异常人员</span>
            <span v-else-if="item.personnelType == 12">邪教人员</span>
            <span v-else-if="item.personnelType == 13">管理人员</span>
            <span v-else-if="item.personnelType == 14">全能神离家人员</span>
            <span v-else-if="item.personnelType == 15">全能神骨干人员</span>
            <span v-else-if="item.personnelType == 16">网络运营人员</span>
            <span v-else-if="item.personnelType == 17">涉政有害活动人员</span>
            <span v-else-if="item.personnelType == 18">境内外记者</span>
            <span v-else-if="item.personnelType == 19">境外法轮功骨干人员</span>
            <span v-else-if="item.personnelType == 20">其他邪教骨干人员</span>
            <span v-else-if="item.personnelType == 21">心灵法门骨干人员</span>
            <span v-else>“精神控制”有害培训骨干人员</span>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
import UserManage from "@/api/user/UserManage";
export default {
  setup() {
    const value = ref("");
    const value1 = ref(0);
    // const option1 = [
    //   { text: "所有教别", value: 0 },
    //   { text: "伊斯兰教", value: 1 },
    //   { text: "基督教", value: 2 },
    //   { text: "天主教", value: 3 },
    //   { text: "佛教", value: 4 },
    //   { text: "道教", value: 5 },
    // ];
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    const option1 = [
      { text: "搜索选择", value: 0 },
      { text: "姓名", value: 1 },
      { text: "身份证号", value: 2 },
      { text: "场所名称", value: 3 },
    ];
    let PersonList = ref([]);
    let dataList = ref([]);
    //数据获取
    const loading = ref(false);
    const finished = ref(false);
    new UserManage()
      .list({
        current: 1,
        size: 10,
      })
      .then((res) => {
        let list2 = [];
        list2.push(...res.records);
        list2.forEach((n1) => {
          let id = n1.id;
          new UserManage().queryById(id).then((LP) => {
            n1.userManagenmetDetailsDTOList = LP.userManagenmetDetailsDTOList;
          });
        });
        dataList.value = list2;
      });
    //跳转
    let router = useRouter();
    const goPlacePersonInfo = (item) => {
      var data = JSON.stringify(item);
      router.push({
        path: "/placePersoninfo",
        query: { data: data },
      });
    };
    //宗教选择
    const changeValue = (value2) => {
      if (value.value != "") {
        switch (value2) {
          case 0:
            PersonList.value = dataList.value;
            break;
          case 1:
            dataList.value.forEach((s1) => {
              if (s1.name == value.value) {
                PersonList.value.push(s1);
              }
            });
            break;
          case 2:
            dataList.value.forEach((s1) => {
              if (s1.idcard == value.value) {
                PersonList.value.push(s1);
              }
            });
            break;
          case 3:
            dataList.value.forEach((s1) => {
              if (s1.locationName == value.value) {
                PersonList.value.push(s1);
              }
            });
            break;
          default:
            break;
        }
      } else {
        PersonList.value.splice(0, PersonList.value.length);
      }
    };
    //返回
    const onClickLeft = () => {
      history.back();
    };
    return {
      onClickLeft,
      value,
      value1,
      option1,
      loading,
      finished,
      goPlacePersonInfo,
      changeValue,
      PersonList,
      dataList,
      selectColor,
    };
  },
};
</script>
<style lang="less">
body,
html {
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}
.van-nav-bar {
  background-color: #36a7f3;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-badge__wrapper {
    color: #fff;
  }
}
.search {
  background-color: #fff;
  .van-dropdown-menu__item {
    width: 20px;
    height: 50px;
  }
}
.PersonList {
  background-color: #fff;
  margin-top: 20px;
  height: 100vh;
  p {
    margin: 0;
    padding: 0;
  }
  .PersonItem {
    padding: 10px 10px;
    font-size: 16px;
    border-bottom: 1px solid #f2f2f2;
    .van-row {
      &:nth-child(1) {
        margin-bottom: 10px;
        .van-col {
          &:nth-child(1) {
            p {
              font-weight: 700;
            }
          }
          &:nth-child(2) {
            p {
              text-align: right;
            }
          }
        }
      }
      &:nth-child(2) {
        .van-col {
          &:nth-child(1) {
            p {
              color: #d0d0d0;
            }
          }
          &:nth-child(2) {
            p {
              text-align: right;
              color: #d0d0d0;
            }
          }
        }
      }
    }
  }
}
</style>