HS_MZAP/src/views/placeManage/placeRegister/placeRegisterList.vue

<template>
  <van-nav-bar
    fixed
    title="场所管理"
    left-text=""
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickright"
    :style="{ 'background-color': selectColor }"
  >
    <template #right>
      <van-icon name="plus" size="18" />
    </template>
  </van-nav-bar>
  <div class="main">
    <!-- <van-search
      v-model="searchName"
      shape="round"
      show-action
      input-align="center"
      label="场所名称"
      placeholder="请输入场所名称"
    >
      <template #action>
        <div @click="search">搜索</div>
      </template>
    </van-search> -->
    <div class="search">
      <div class="box1">
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" />
          <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
      </div>
      <div class="box2">
        <van-search
          v-model="value"
          show-action
          label="场所名称"
          placeholder="请输入场所名称"
        >
          <template #action>
            <div @click="search1">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    <van-pull-refresh
      v-if="show == false"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-swipe-cell v-for="item in list" :key="item">
          <div class="list-item" @click="gotoplaceRegister(item.id)">
            <div class="item_top">
              <div class="item_top_left">
                {{ item.name }}
              </div>
              <div class="item_top_right">
                <span v-if="item.religiousType == 1">伊斯兰教</span>
                <span v-if="item.religiousType == 2">基督教</span>
                <span v-if="item.religiousType == 3">天主教</span>
                <span v-if="item.religiousType == 4">佛教</span>
                <span v-if="item.religiousType == 5">道教</span>
              </div>
            </div>
            <div class="item_center">
              {{ item.place }}
            </div>
            <div class="item_down">
              <div class="item_down_left">
                {{ item.contact }}
              </div>
              <div class="item_down_right">
                {{ item.contactNumber }}
              </div>
            </div>
          </div>
        </van-swipe-cell>
      </van-list>
    </van-pull-refresh>
    <van-pull-refresh
      v-if="show == true"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="search"
      >
        <van-swipe-cell v-for="item in searchList" :key="item">
          <div class="list-item" @click="gotoplaceRegister(item.id)">
            <div class="item_top">
              <div class="item_top_left">
                {{ item.name }}
              </div>
              <div class="item_top_right">
                <span v-if="item.religiousType == 1">伊斯兰教</span>
                <span v-if="item.religiousType == 2">基督教</span>
                <span v-if="item.religiousType == 3">天主教</span>
                <span v-if="item.religiousType == 4">佛教</span>
                <span v-if="item.religiousType == 5">道教</span>
              </div>
            </div>
            <div class="item_center">
              {{ item.place }}
            </div>
            <div class="item_down">
              <div class="item_down_left">
                {{ item.contact }}
              </div>
              <div class="item_down_right">
                {{ item.contactNumber }}
              </div>
            </div>
          </div>
        </van-swipe-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import tools from "@/api/sys/tools";
import placePerson from "@/api/placePerson/placePerson";
import PlaceRegister from "@/api/placeRegister/placeRegister";
export default {
  setup() {
    //暂时列表数据
    const list = ref([]);
    const searchForm = ref({
      religiousType: "",
      name: "",
      filingNo: "",
      contact: "",
      place: "",
      siteType: "",
      constructionStage: "",
      nature: "",
      state: "",
      createBy: {
        id: "",
      },
    });
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    //返回取消按钮
    const onClickLeft = () => {
      history.back();
    };
    //搜索事件
    const show = ref(false);
    const searchList = ref([]);

    const search1 = () => {
      searchList.value = [];
      search();
    }

    const search = () => {
      loading.value = true;
      finished.value = false;
      // searchList.value = [];
      if (value2.value == 0) {
        show.value = true;
        new PlaceRegister()
          .searchlist({
            current: index + 1,
            size: 11,
            name: value.value,
            address: value1.value,
          })
          .then(({ records, pages }) => {
            searchList.value = searchList.value.concat(records);
            // 加载状态结束
            loading.value = false;
            if (index + 1 >= pages) {
              finished.value = true;
            }
            index++;
          });
      } else {
        show.value = true;
        new PlaceRegister()
          .searchlist({
            current: index + 1,
            size: 11,
            name: value.value,
            address: value1.value,
            religiousType: value2.value,
          })
          .then(({ records, pages }) => {
            searchList.value = searchList.value.concat(records);
            // 加载状态结束
            loading.value = false;
            if (index + 1 >= pages) {
              finished.value = true;
            }
            index++;
          });
      }
    };
    const value = ref("");
    const value1 = ref("");
    const value2 = ref(0);
    const option1 = ref([]);
    const option2 = [
      { text: "教别", value: 0 },
      { text: "伊斯兰教", value: 1 },
      { text: "基督教", value: 2 },
      { text: "天主教", value: 3 },
      { text: "佛教", value: 4 },
      { text: "道教", value: 5 },
    ];
    onMounted(() => {
      getUser();
    });
    const getUser = () => {
      let addressList = [];
      let user = localStorage.getItem("MZ_USER");
      new tools().treeData().then((res) => {
        addressList.push(res[0]);
        res[0].children.forEach((item) => {
          addressList.push(item);
        });
      });
      let userArea = "";
      new placePerson().userList({ loginName: user }).then((res1) => {
        let data = res1.records[0];
        userArea = data.areaDTO;
        addressList.forEach((item) => {
          if (item.id == userArea.code) {
            value1.value = item.code;
            localStorage.setItem("address", item.code);
            option1.value.push({
              text: item.name,
              value: item.code,
            });
            item.children.forEach((item1) => {
              option1.value.push({
                text: item1.name,
                value: item1.code,
              });
            });
          }
        });
      });
    };
    //跳转
    let router = useRouter();
    //进入场所录入页面
    const onClickright = () => {
      router.push("/placeRegister");
    };
    //进入地点详情页面
    const gotoplaceRegister = (item) => {
      var data = JSON.stringify(item);
      router.push({
        path: "/placeRegisterInfo",
        query: { id: data },
      });
    };
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    let index = 0;
    const onLoad = () => {
      loading.value = true;
      finished.value = false;
      let address = localStorage.getItem("address");
      // 异步更新数据
      new PlaceRegister()
        .searchlist({
          current: index + 1,
          size: 11,
          address: address,
        })
        .then(({ records, pages }) => {
          list.value = list.value.concat(records);
          // 加载状态结束
          loading.value = false;
          if (index + 1 >= pages) {
            finished.value = true;
          }
          index++;
        });
    };
    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };

    return {
      //返回取消按钮
      onClickLeft,
      //进入添加页面
      onClickright,
      //背景色
      selectColor,
      searchForm,
      list,
      loading,
      finished,
      refreshing,
      onLoad,
      onRefresh,
      //搜索
      search,
      gotoplaceRegister,
      show,
      searchList,
      value,
      value1,
      value2,
      option1,
      option2,
      search1,
    };
  },
};
</script>

<style lang='less'>
body,
html {
  margin: 0;
  padding: 0;
  background-color: #f2f2f2;
}
.main {
  .list-item {
    background-color: #fff;
    padding: 10px;
    margin-bottom: 5px;
    overflow: hidden;
    .item_top {
      width: 100%;
      overflow: hidden;
      .item_top_left {
        float: left;
        width: 80%;
        font-size: 16px;
        font-weight: 700;
      }
      .item_top_right {
        float: right;
        width: 20%;
        font-size: 16px;
        color: #000000;
      }
    }
    .item_center {
      width: 100%;
      font-size: 16px;
      color: #a2a2a2;
      text-align: left;
      padding: 10px 0;
      overflow: hidden;
    }
    .item_down {
      overflow: hidden;
      width: 100%;
      font-size: 16px;
      border-bottom: 1px solid #f5f5f5;
      .item_down_left {
        width: 70%;
        float: left;
        color: #000000;
      }
      .item_down_right {
        width: 30%;
        text-align: center;
        float: left;
      }
    }
  }
}
</style>