xiangyuan-app/src/pages/dig/forms/submits.vue

<template>
  <FlexCol :padding="30">
    <SearchBar
      v-model="searchText"
      placeholder="搜一搜" 
      @search="search"
    />
    <Height :height="20" />
    <DropdownMenu>
      <DropdownMenuItem 
        v-model="filterStatus"
        :options="[
          { text: '全部状态', value: -100 },
          { text: '未通过', value: CommonInfoModel.STATUS_REJECT },
          { text: '待审核', value: CommonInfoModel.STATUS_AUDIT },
          { text: '审核通过', value: CommonInfoModel.STATUS_PASS },
          { text: '专家评估', value: CommonInfoModel.STATUS_EXPERT },
          { text: '终审', value: CommonInfoModel.STATUS_FINAL },
        ]"
        type="single-check"
      />
      <DropdownMenuItem 
        v-model="filterVillage"
        :options="villageListLoader.content.value || [{
          text: '未选择村社',
          value: -100,
        }]"
        type="single-check"
      />
    </DropdownMenu>
    <Height :height="20" />
    <SimplePageListLoader :loader="listLoader" :noEmpty="true">
      <template #empty>
        <Empty image="search" description="这里还没提交过投稿，欢迎成为志愿者投稿！">
        </Empty>
      </template>
      <FlexCol :gap="20">
        <Touchable 
          v-for="item in listLoader.list.value"
          :key="item.id" 
          :padding="[15,20]"
          radius="radius.md"
          justify="space-between"
          align="center"
          backgroundColor="white"
          direction="row"
          touchable
          @click="goDetail(item)"
        >
          <FlexRow align="center" :gap="20">
            <Image 
              :src="item.image"
              :showFailed="false"
              :width="150"
              :height="150"
              radius="radius.sm"
              mode="aspectFill"
            />
            <FlexCol>
              <H4 :size="36">{{ item.title }}</H4>
              <Height :height="10" />
              <Text :size="23" :text="`栏目： ${item.catalogName || item.collectModuleName || ''}`" />
              <Text :size="23" :text="`时间： ${DataDateUtils.formatDate(item.updatedAt, 'YYYY-MM-dd')}`" />
              <FlexRow align="center">
                <Text :size="23" :text="`状态：`" />
                <Tag 
                  size="small"
                  :text="(item.statusText as string)" 
                  :type="selectObjectByType(item.status as string, CommonInfoModel.STATUS_REJECT.toString(), {
                    [CommonInfoModel.STATUS_REJECT]: 'danger',
                    [CommonInfoModel.STATUS_DRAFT]: 'default',
                    [CommonInfoModel.STATUS_AUDIT]: 'warning',
                    [CommonInfoModel.STATUS_PASS]: 'primary',
                    [CommonInfoModel.STATUS_EXPERT]: 'primary',
                    [CommonInfoModel.STATUS_FINAL]: 'success',
                  })" 
                />
              </FlexRow>
              <Text v-if="item.opinion" :size="23" :text="`审核意见： ${item.opinion}`" />
            </FlexCol>
          </FlexRow>
          <Icon icon="arrow-right-bold" color="primary" :size="36" />
        </Touchable>
      </FlexCol>
    </SimplePageListLoader>
    <XBarSpace />
  </FlexCol>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { onPullDownRefresh } from '@dcloudio/uni-app';
import { DataDateUtils } from '@imengyu/js-request-transform';
import { useSimplePageListLoader } from '@/components/composeabe/loader/SimplePageListLoader';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import { useLoadQuerys } from '@/components/composeabe/LoadQuerys';
import { selectObjectByType } from '@/components/theme/ThemeTools';
import { navTo } from '@/components/utils/PageAction';
import SimplePageListLoader from '@/components/loader/SimplePageListLoader.vue';
import VillageInfoApi, { CommonInfoModel } from '@/api/inhert/VillageInfoApi';
import Image from '@/components/basic/Image.vue';
import Empty from '@/components/feedback/Empty.vue';
import SearchBar from '@/components/form/SearchBar.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Text from '@/components/basic/Text.vue';
import Height from '@/components/layout/space/Height.vue';
import H4 from '@/components/typography/H4.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import XBarSpace from '@/components/layout/space/XBarSpace.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Tag from '@/components/display/Tag.vue';
import Icon from '@/components/basic/Icon.vue';
import DropdownMenu from '@/components/feedback/DropdownMenu.vue';
import DropdownMenuItem from '@/components/feedback/DropdownMenuItem.vue';
import VillageApi, { type VillageListItem } from '@/api/inhert/VillageApi';
import { waitTimeOut } from '@imengyu/imengyu-utils';

const searchText = ref('');
const filterStatus = ref(-100);
const filterVillage = ref(0);

const villageListLoader = useSimpleDataLoader(async () => {
  let res = [] as VillageListItem[];
  try {
    res = await VillageApi.getClaimedVallageList()
  } catch (e) {
    console.log(e);
  }
  const list = res.map(item => ({
    text: item.villageName,
    value: item.villageId!,
  }));
  if (list.length == 0) {
    list.push({
      text: '未选择村社',
      value: -100,
    });
  }
  if (filterVillage.value == 0) 
    filterVillage.value = list[0].value;
  return list;
}, false);
const listLoader = useSimplePageListLoader<CommonInfoModel>(8, async (page, pageSize) => {
  await waitTimeOut(300);
  const res = await VillageInfoApi.getList({
    villageId: filterVillage.value,
    villageVolunteerId: querys.value.villageVolunteerId,
    page,
    pageSize,
    status: filterStatus.value === -100 ? undefined : filterStatus.value,
    keywords: searchText.value,
  })
  return {
    list: res.list,
    total: res.total,
  };
}, false);
function goDetail(item: CommonInfoModel) {
  navTo('common', { 
    id: item.id,
    villageId: item.villageId,
    villageVolunteerId: item.villageVolunteerId,
    catalogId: item.catalogId,
    collectModuleId: item.collectModuleId,
    subKey: '',
    subId: -1,
    subTitle: item.catalogName || item.collectModuleName || '',
  });
}
function search() {
  listLoader.reload();
}

const { querys } = useLoadQuerys({ 
  villageId: 0,  
  villageVolunteerId: 0,
}, async (querys) => {
  filterVillage.value = querys.villageId || 0;
  await villageListLoader.load()
  await listLoader.load(false, querys)
});

watch(filterStatus, () => listLoader.reload())
watch(filterVillage, () => listLoader.reload())

onPullDownRefresh(() => {
  listLoader.reload();
});

defineExpose({
  onPageBack(name: string, param: any) {
    if (param && param.needRefresh)
      listLoader.reload();
  }
})
</script>