EmploymentSite/h5app/src/views/pages/work/log/list.vue

<template>
  <ion-page class="list-page">
    <ion-header class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="()=>router.push('../')"></ion-icon>
        </ion-buttons>
        <ion-title>工作日志</ion-title>
        <ion-buttons slot="end">
          <ion-icon :icon="addCircleOutline" @click="onAdd()"></ion-icon>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-item class="search-item">
        <ion-input type="date"
                   placeholder="开始时间" mode="md"></ion-input>
        —
        <ion-input type="date"
                   placeholder="结束时间" mode="md"></ion-input>
        <ion-button slot="end" style="height: 30px;width: 60px;margin-left: 10px;--box-shadow: none;--border-radius: 12px;">搜索</ion-button>
      </ion-item>
      <ion-list class="list-content">
        <ion-item v-for="(record,key) in dataList" :key="key" detail>
          <ion-grid>
            <ion-row>
              <ion-col>
                <ion-label style="display: flex;justify-content: space-between;">
                  <ion-text>
                    {{ record.name }}
                  </ion-text>
                </ion-label>
              </ion-col>
            </ion-row>
            <ion-row>
              <ion-col>
                <ion-label>
                  <p>
                    日志类型：{{ record.logTypeName }}
                  </p>
                </ion-label>
              </ion-col>
            </ion-row>
          </ion-grid>
        </ion-item>
      </ion-list>
      <b-empty v-if="dataList.length<=0" :loading="loading"/>
      <ion-infinite-scroll threshold="100px" @ionInfinite="onScroll($event)">
        <ion-infinite-scroll-content
            :loadingText="pagination.total>pagination.current*pagination.pageSize?'正在加载...':'暂无更多'"
            loadingSpinner="bubbles">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">

import {computed, defineComponent, reactive, ref} from 'vue';
import dayjs from "dayjs";
import {useRoute, useRouter} from "vue-router";
import {arrowBackOutline, ellipse, addCircleOutline} from 'ionicons/icons';
import {IonIcon, onIonViewDidEnter} from '@ionic/vue';
import BEmpty from "@/components/empty.vue";

export default defineComponent({
  name: 'WorkLogList',
  components: {IonIcon, BEmpty},
  setup() {
    const loading = ref(true);
    const pagination = computed(() => ({
      total: total,
      current: searchParamsState.page,
      pageSize: searchParamsState.rows
    }));
    const dataList = ref<any>([]);
    const router = useRouter();
    const route = useRoute();
    const total = ref(15);
    const colors = ref(["secondary", "tertiary", "success", "warning"]);

    const searchParamsState = reactive({page: 1, rows: 10, writeStatus: null})

    const loadData = async function () {
      loading.value = true;

      /*const result: any = await getMyIntentionList(searchParamsState);
      dataList.value = dataList.value.concat(result.list);
      total.value = result.total;*/

      dataList.value = [{name: '2023年11月23日工作日志', logTypeName: "上门服务", updateTime: '2023-12-11'},
        {
          name: '2023年11月22日工作日志',
          logTypeName: "客户服务",
          updateTime: '2023-12-12'
        }, {name: '2023年11月21日工作日志', logTypeName: "客户服务", updateTime: '2023-12-13'}];
      loading.value = false;
    }

    const reload = () => {
      dataList.value = [];
      searchParamsState.page = 1;
      loadData();
    }

    const onScroll = (e: any) => {
      setTimeout(() => {
        e.target.complete();
        if (pagination.value.total.value > pagination.value.current * pagination.value.pageSize) {
          pagination.value.current += 1;
          loadData();
        }
      }, 500);
    }

    const onAdd = (item: any) => {
      router.push({path: './edit', query: {reload: 1, id: ""}});
    }

    onIonViewDidEnter(() => {
      reload();
    });

    return {
      router,
      pagination,
      colors,
      reload,
      loading,
      searchParamsState,
      dataList,
      total,
      dayjs,
      onScroll,
      onAdd,
      loadData,
      ellipse,
      arrowBackOutline,
      addCircleOutline,
    }
  }
});
</script>

<style lang="less">
.search-item{
  margin: 10px 0;
  font-size: 14px;
  ion-input{
    border: 1px solid #f2f2f5;border-radius: 4px;--padding-start: 10px;
    width: 100px;
  }

  input{
    padding: 6px !important;
  }
}
.list-content {
  margin: 0px 15px !important;
  background-color: white !important;
  border-radius: 0 !important;

  ion-item {
    margin-top: 10px;
    font-size: 14px;
    border: 1px solid rgb(242, 242, 245);

    p {
      font-size: 12px;
    }
  }
}
</style>