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

<template>
  <ion-page class="list-page log-list-page">
    <ion-header class="header-theme2">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-icon :icon="arrowBackOutline" @click="onBack"></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 style="font-size: 10px;--border-style: none;">
        <ion-datetime-button datetime="reportDateBegin"></ion-datetime-button>
        <span style="margin:0 5px">至</span>
        <ion-modal :keep-contents-mounted="true">
          <ion-datetime id="reportDateBegin" placeholder="日期"
                        v-model="searchParamsState.workStartDate"
                        dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
                        @ionChange="onSearch"
                        :show-default-buttons="true">
          </ion-datetime>
        </ion-modal>
        <ion-datetime-button datetime="reportDateEnd"></ion-datetime-button>
        <ion-modal :keep-contents-mounted="true">
          <ion-datetime id="reportDateEnd" placeholder="日期"
                        v-model="searchParamsState.workEndDate"
                        dataformatas="YYYY-MM-DD" presentation="date" cancel-text="取消" done-text="确定"
                        @ionChange="onSearch"
                        :show-default-buttons="true">
          </ion-datetime>
        </ion-modal>
        <ion-button slot="end" style="height: 33px;width:70px;margin-left: 10px;--box-shadow: none;--border-radius: 14px;" @click="onSearch">搜索</ion-button>
      </ion-item>
      <!-- 滑动数据列表 -->
      <div class="bw-vue-list">
        <div class="list-content">
          <ion-list>
            <div v-for="(record,key) in dataList" :key="key">
              <ion-item-sliding>
                <ion-item detail @click="onDetail(record.doWorkID)">
                  <ion-grid @click="onDetail(record.doWorkID)">
                    <ion-row>
                      <ion-col>
                        <ion-label style="display: flex;justify-content: space-between;">
                          <ion-text>
                            {{ record.workTime }}工作日志
                          </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-item-options>
                  <ion-item-option @click="onEdit(record.doWorkID)">
                    <ion-icon :icon="buildOutline"></ion-icon>
                  </ion-item-option>
                  <ion-item-option color="danger" @click="setDelAlertOpen(true, record.doWorkID)">
                    <ion-icon :icon="trashOutline"></ion-icon>
                  </ion-item-option>
                </ion-item-options>
              </ion-item-sliding>
            </div>
          </ion-list>
        </div>
      </div>
      <b-empty v-if="dataList.length<=0" :loading="loading"/>
      <ion-infinite-scroll threshold="100px" @ionInfinite="onScroll($event)">
        <ion-infinite-scroll-content
            :loadingText="searchParamsState.total>searchParamsState.pageIndex*searchParamsState.pageSize?'正在加载...':'暂无更多'"
            loadingSpinner="bubbles">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </ion-content>

    <ion-alert
        :is-open="delAlertOpen"
        header="删除确认"
        message="确定要删除该工作日志吗？"
        :buttons="delAlertButtons"
        @didDismiss="setDelAlertOpen(false, null)"
    ></ion-alert>

    <ion-alert
        :is-open="infoAlertOpen"
        :header="infoAlterData.title"
        :message="infoAlterData.message"
        :buttons="infoAlertButtons"
        @didDismiss="setInfoAlertOpen(false)"
    ></ion-alert>

    <ion-loading
        :is-open="delLoading"
        message="删除中..."
        @didDismiss="setDelLoadingOpen(false)" >
    </ion-loading>
  </ion-page>
</template>

<script lang="ts">

import {useRouter} from "vue-router";
import {defineComponent, onMounted, reactive, ref} from 'vue';
import {arrowBackOutline, addCircleOutline} from 'ionicons/icons';
import {IonIcon, onIonViewDidEnter} from '@ionic/vue';
import {deleteWorkLog, getWorkLogList} from '@/api/workLog';
import BEmpty from "@/components/empty.vue";
import dayjs from "dayjs";
import {chevronForwardOutline,buildOutline,trashOutline} from 'ionicons/icons';

export default defineComponent({
  name: 'WorkLogList',
  components: {IonIcon, BEmpty},
  setup() {
    const searchParamsState = reactive({
      pageIndex: 1,
      pageSize: 10,
      total:0,
      workStartDate: '',
      workEndDate: ''
    })
    const loading = ref(true);
    const dataList = ref<any>([]);
    const router = useRouter();
    const colors = ref(["secondary", "tertiary", "success", "warning"]);

    // 删除警告弹窗按钮定义
    const delAlertButtons = [
      {
        text: '取消',
        role: 'cancel',
        handler: () => {
          console.log('Alert canceled');
        },
      },
      {
        text: '确定',
        role: 'confirm',
        handler: () => {
          delLoading.value = true
          deleteWorkLog(delWorkIds.value).then((res) => {
            infoAlterData.title = "提示";
            infoAlterData.message = "删除成功";
            setInfoAlertOpen(true);
          }).finally(()=>{
            delLoading.value = false
          })
        },
      },
    ];
    // 删除警告弹窗开关
    const delAlertOpen = ref(false);
    // 删除数据
    const delWorkIds = ref<Array<any>>([])
    // 删除加载
    const delLoading = ref(false);
    // 信息弹窗开关
    const infoAlertOpen = ref(false);
    // 信息弹窗内容
    const infoAlterData = reactive({
      title:"",
      message:""
    })
    // 删除警告弹窗按钮定义
    const infoAlertButtons = [
      {
        text: '确定',
        role: 'confirm',
        handler: () => {
          loading.value = true;
          getWorkLogList(searchParamsState).then(res=>{
            dataList.value = res.list;
            searchParamsState.total = res.total;
          }).finally(() => {
            loading.value = false;
          })
        },
      },
    ];


    const loadData = async function () {
      loading.value = true;
      const result: any = await getWorkLogList(searchParamsState);
      dataList.value = dataList.value.concat(result.list);
      console.log("dataList",dataList.value);
      searchParamsState.total = result.total;
      loading.value = false;
    }


    const onScroll = (e: any) => {
      setTimeout(() => {
        e.target.complete();
        if (searchParamsState.total > searchParamsState.pageIndex * searchParamsState.pageSize) {
          searchParamsState.pageSize += 10;
          loadData();
        }
      }, 500);
    }

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

    const onEdit = (doWorkID: string) => {
      router.push({path: './edit', query: {reload: 1, doWorkID: doWorkID}});
    }

    const onBack =()=>{
      router.push('../');
    }

    const onDetail = (doWorkID:string) =>{
      router.push({path: './detail', query: {reload:1, doWorkID: doWorkID}});
    }

    const reload = () => {
      // 设置查询初始截止日期为当天
      const firstDay = new Date();
      // 设置查询初始开始时间为当天的一个月前
      const lastDay = new Date();
      lastDay.setDate(firstDay.getDate() - 30);

      dataList.value = [];
      searchParamsState.pageIndex = 1;
      searchParamsState.workStartDate=dayjs(lastDay.toLocaleDateString()).format('YYYY-MM-DD');
      searchParamsState.workEndDate = dayjs(firstDay.toLocaleDateString()).format('YYYY-MM-DD');
      loadData();
    }

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

    // 设置要删除的日志
    function setDelAlertOpen(value: boolean, doWorkId: any) {
      delAlertOpen.value = value;
      if(doWorkId != null) {
        delWorkIds.value = new Array(doWorkId);
      }
    }

    // 设置删除弹窗开启关闭
    function setDelLoadingOpen(value: boolean) {
      delLoading.value = value
    }

    // 设置信息提示弹窗开关
    function setInfoAlertOpen(value: boolean) {
      infoAlertOpen.value = value;
    }

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

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

    return {
      router,
      colors,
      dataList,
      loading,
      searchParamsState,
      onScroll,
      onAdd,
      onBack,
      onSearch,
      onDetail,
      loadData,
      reload,
      arrowBackOutline,
      addCircleOutline,
      chevronForwardOutline,
      buildOutline,
      trashOutline,
      onEdit,
      delAlertButtons,
      delAlertOpen,
      setDelAlertOpen,
      delLoading,
      setDelLoadingOpen,
      infoAlertOpen,
      infoAlterData,
      setInfoAlertOpen,
      infoAlertButtons
    }
  }
});
</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;
  }
}

.log-list-page {
  .list-content {
    margin: 0px 15px !important;
    background-color: white !important;
    border-radius: 0 !important;

    ion-item {
      font-size: 14px;

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