HS_MZAP/src/views/activityMan/religiousConference/religiousConferenceList.vue

<template>
  <van-nav-bar
    fixed
    title="负责人会议"
    left-text=""
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  >
    <template #right>
      <van-icon name="plus" size="18" />
    </template>
  </van-nav-bar>

<div class="main">
    <van-search
      v-model="searchVal"
      readonly="true"
      clearable
      show-action
      shape="round"
      placeholder="请选择"
      label="场所名称"
      input-align="center"
      @search="onSearch"
      @cancel="onCancel"
      @click-input="showPlace = true"
    />
    <van-popup v-model:show="showPlace" round position="bottom">
      <van-picker
        title="场所选择"
        :columns="places"
        :columns-field-names="customFieldName"
        @cancel="showPlace = false"
        @confirm="getPlace"
      />
    </van-popup>
    <van-tabs
      v-show="!searchShow"
      v-model:active="active"
      title-inactive-color="#bdbdbd"
      title-active-color="#36a7f3"
      @click-tab="onClickTab"
    >
      <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 style="color: #c4c4c4">
                  {{ item.updateDate }}
                </p>
                <p style="color: red">待审核</p>
              </div>
              <van-cell>
                <template #title>
                  {{ item.siteName.name }}（{{ item.meetingTime }}）
                  <!-- <van-text-ellipsis
                    rows="2"
                    :content="`${item.siteName.name}（${ item.placeDel}）`"
                  /> -->
                </template>
                <template #label>
                  {{ item.participants.name }}
                </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="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  style="color: #c4c4c4">
                  {{ item.updateDate }}
                </p>
                <p style="color: gray">已审核</p>
              </div>
              <van-cell>
                <template #title>
                  {{ item.siteName.name }}（{{ item.meetingTime }}）
                    <!-- <van-text-ellipsis
                      rows="2"
                      :content="`${item.siteName.name}（${ item.placeDel}）`"
                    /> -->
                </template>
                <template #label>
                  {{ item.participants.name }}
                </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.updateDate }}
            </p>
            <p style="color: red">
              <span v-if="item.assessment == 1">已审核</span>
              <span v-else>待审核</span>
            </p>
          </div>
          <van-cell>
            <template #title>
              {{ item.siteName.name }}（{{ item.meetingTime }}）
              <!-- <van-text-ellipsis
                rows="2"
                :content="`${item.siteName.name}（${ item.placeDel}）`"
              /> -->
            </template>
            <template #label>
              {{ item.participants.name }}
            </template>
          </van-cell>
        </div>
      </van-swipe-cell>
    </van-list>
    <van-dialog
      v-model:show="showDel"
      show-cancel-button
      confirmButtonText="删除"
      message="请确认删除该记录"
      @confirm="Itemdel"
    >
    </van-dialog>
  </div>
</template>

<script>
import { ref } from "vue";
import router from "@/router";
import religiousConferenceService from "@/api/religiousConference/religiousConferenceService";
import tools from "@/api/sys/tools";
export default {
name: "religiousConferenceList",
setup() {
  const onClickLeft = () => {
    history.back();
  };
  const onClickRight = () => {
    router.push("/religiousConferenceView");
  };
  let active = ref(0);
  let list = ref([]);
  const loading = ref(false);
  const finished = ref(false);
  let index = 0;
  
  //tab切换
  const onClickTab= ({name}) => {

    // 清空列表数据
    finished.value = false;
    list.value = [];
    loading.value = true;

    index = 0;
    onLoad();
  };

  const onLoad = (val) => {
    loading.value = true;
    finished.value = false;
    // 异步更新数据active绑定的是标签中的name值

    new religiousConferenceService()
      .list({
        current: index + 1,
        size: 10,
        assessment:active.value,
        siteName:{id:searchValId.value}
      })
      .then((res) => {
        list.value.push(...res.records) ;
        // 加载状态结束
        loading.value = false;        
        // 数据全部加载完成
        if (res.pages <= index + 1) {
          finished.value = true;
        }
        index++;
      });
  };
  // 搜索
    let searchShow = ref(false);
    let searchList = ref([]);
    const searchVal = ref("");
    const searchValId = ref("");    
    const onSearch = () => {
      searchShow.value = true;
      searchList.value = [];
      new siteInspectionService()
        .list({
          current: 1,
          size: 10000,
          activityName: searchVal.value,
        })
        .then(({ records }) => {
          searchList.value.push(...records);
          // 加载状态结束
          loading.value = false;
        });
    };
    const onCancel = () => {
      searchVal.value = "";
      searchValId.value = "";
      searchShow.value = false;

      finished.value = false;
      list.value = [];
      loading.value = true;
      index = 0;
      onLoad();
    };

    // 场所名称
    let places = ref([]);
    const customFieldName = {
      text: "name",
      value: "id",
    };
    new tools()
      .placeList({
        current: 1,
        size: 10000,
      })
      .then(({ records }) => {
        places.value.push(...records);
      });
    let showPlace = ref(false);
    const getPlace = ({ selectedOptions }) => {
      if(selectedOptions[0]!=undefined&&selectedOptions[0]!=null){ 
        showPlace.value = false;
        searchVal.value=selectedOptions[0].name;
        searchValId.value=selectedOptions[0].id;

        finished.value = false;
        list.value = [];
        loading.value = true;
        index = 0;
        onLoad();
      }
    };
    
    // 删除确认
    let showDel = ref(false);
    let ids = ref("");
    const deleteItem = (val) => {
      showDel.value = true;
      ids.value = val;
    };
    // 删除
    const Itemdel = () => {
      new siteInspectionService().delete(ids.value).then((res) => {
        index = 0;
        loading.value = true;
        list.value = [];
        onLoad();
      });
    };
    // 修改跳转
    const updateItem = (val) => {
      router.push({
        path: "/religiousConferenceView",
        query: { id: val.id },
      });
    };
    // 详情跳转
    const goInfo = (val) => {
      router.push({
        path: "/religiousConferenceInfo",
        query: { id: val },
      });
    };
  return {
   active,
    onClickTab,
    onClickLeft,
    onClickRight,
    //列表
    list,
    onLoad,
    loading,
    finished,
    //搜索
    searchShow,
    searchVal,
    searchValId,
    searchList,
    onSearch,
    onCancel,   
    // 场所
    customFieldName,
    showPlace,
    places,
    getPlace,

    deleteItem,
    updateItem,
    goInfo,
    showDel,
    Itemdel, 
  };
},
};
</script>

<style scoped>
</style>