HS_MZAP/src/views/activityMan/differentbelievers/ReligiousPeopleReportList.vue

<template>
  <van-nav-bar
    fixed
    title="信教群众异常"
    right-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="searchVal"
      clearable
      show-action
      shape="round"
      placeholder="请输入搜索关键词"
      label="姓名"
      input-align="center"
      @search="onSearch"
      @cancel="onCancel"
    />
    <van-tabs
      v-show="!searchShow"
      v-model:active="active"
      title-inactive-color="#bdbdbd"
      title-active-color="#36a7f3"
    >
      <van-tab title="未审核" name="0">
        <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="goInfo(item.id)">
              <div class="item-left">
                <p v-show="item.partyTime != ''" style="color: #c4c4c4">
                  {{ item.partyTime }}
                </p>
                <p style="color: red">待审核</p>
              </div>
              <van-cell>
                <template #title>
                  <van-text-ellipsis
                    rows="2"
                    :content="`${item.abnormalName}存在${item.abnormalBehavior}异常行为`"
                  />
                </template>
                <template #label>
                  {{ item.currentResidence }}
                </template>
              </van-cell>
            </div>
            <template #right>
              <van-button
                square
                type="danger"
                text="删除"
                class="button"
                @click="deleteItem(item.id)"
              />
              <van-button
                square
                type="primary"
                text="修改"
                class="button"
                @click="updateItem(item)"
              />
            </template>
          </van-swipe-cell>
        </van-list>
      </van-tab>
      <van-tab title="已审核" name="1">
        <van-list
          v-model:loading="loading1"
          :finished="finished1"
          finished-text="没有更多了"
          @load="onLoad1"
        >
          <van-swipe-cell v-for="item in readList" :key="item">
            <div class="list_item" @click="goInfo(item.id)">
              <div class="item-left">
                <p style="color: #c4c4c4">{{ item.partyTime }}</p>
                <p style="color: red">已审核</p>
              </div>
              <van-cell>
                <template #title>
                  <van-text-ellipsis
                    rows="2"
                    :content="`${item.abnormalName}存在${item.abnormalBehavior}异常行为`"
                  />
                </template>
                <template #label>
                  {{ item.currentResidence }}
                </template>
              </van-cell>
            </div>
          </van-swipe-cell>
        </van-list>
      </van-tab>
    </van-tabs>
    <!-- 搜索结果 -->
    <van-list
      v-show="searchShow"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-swipe-cell v-for="item in searchList" :key="item">
        <div class="list_item" @click="goInfo(item.id)">
          <div class="item-left">
            <p style="color: #c4c4c4">{{ item.partyTime }}</p>
            <p style="color: red">已审核</p>
          </div>
          <van-cell>
            <template #title>
              <van-text-ellipsis
                rows="2"
                :content="`${item.abnormalName}存在${item.abnormalBehavior}异常行为`"
              />
            </template>
            <template #label>
              {{ item.currentResidence }}
            </template>
          </van-cell>
        </div>
      </van-swipe-cell>
    </van-list>
  </div>
</template>
    
<script>
import { ref } from "vue";
import ReligiousPeopleReportService from "@/api/differentbelievers/ReligiousPeopleReportService";
import { useRouter } from "vue-router";
export default {
  name: "ReligiousPeopleReportList",
  setup() {
    const onClickLeft = () => {
      history.back();
    };
    // 导航栏颜色
    const selectColor = ref(window.localStorage.getItem("MZ_COLOR"));
    // 上报
    const onClickRight = () => {
      router.push("/differentbelievers");
    };
    // 切换
    let active = ref(0);
    // 未审核列表
    let list = ref([]);
    // 已审核列表
    let readList = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    let index = 0;
    const onLoad = () => {
      loading.value = true;
      finished.value = false;
      // 异步更新数据
      new ReligiousPeopleReportService()
        .list({
          current: index + 1,
          size: 10,
          assessment: 0,
        })
        .then(({ records, pages }) => {
          list.value.push(...records);
          // 加载状态结束
          loading.value = false;
          // 数据全部加载完成
          if (index + 1 >= pages) {
            finished.value = true;
          }
          index++;
        });
    };
    const loading1 = ref(false);
    const finished1 = ref(false);
    let index1 = 0;
    const onLoad1 = () => {
      loading1.value = true;
      finished1.value = false;
      // 异步更新数据
      new ReligiousPeopleReportService()
        .list({
          current: index1 + 1,
          size: 10,
          assessment: 1,
        })
        .then(({ records, pages }) => {
          readList.value.push(...records);
          // 加载状态结束
          loading1.value = false;
          // 数据全部加载完成
          if (index1 + 1 >= pages) {
            finished1.value = true;
          }
          index1++;
        });
    };
    // 搜索
    let searchShow = ref(false);
    let searchList = ref([]);
    const searchVal = ref("");
    const onSearch = () => {
      searchShow.value = true;
      searchList.value = [];
      new ReligiousPeopleReportService()
        .list({
          current: 1,
          size: 10000,
          abnormalName: searchVal.value,
        })
        .then(({ records }) => {
          searchList.value.push(...records);
          // 加载状态结束
          loading.value = false;
        });
    };
    const onCancel = () => {
      searchVal.value = "";
      searchShow.value = false;
    };
    // 删除
    const deleteItem = (val) => {
      xm.showConfirm({
        title: "删除确认",
        message: "确认删除该记录",
      }).then((result) => {
        if (result == "ok") {
          new ReligiousPeopleReportService().delete(val).then((res) => {
            if (res.status == 200 || res.statusText == "OK") {
              xm.showToast({
                message: res.data,
              });
            }
            index = 0;
            loading.value = true;
            list.value = [];
            readList.value = [];
            onLoad();
          });
        }
      });
    };
    let router = useRouter();
    // 修改跳转
    const updateItem = (val) => {
      router.push({
        path: "/differentbelievers",
        query: { id: val.id },
      });
    };
    // 详情跳转
    const goInfo = (val) => {
      router.push({
        path: "/differentbelieversInfo",
        query: { id: val },
      });
    };
    return {
      active,
      onClickLeft,
      selectColor,
      list,
      readList,
      onLoad,
      loading,
      finished,
      onLoad1,
      loading1,
      finished1,
      searchShow,
      searchVal,
      searchList,
      onSearch,
      onCancel,
      onClickRight,
      updateItem,
      goInfo,
      deleteItem,
    };
  },
};
</script >
    
<style scope>
</style>