pms-app/pages/overtime/index.vue

<template>
  <z-paging class="page" ref="paging" v-model="dataList" @query="queryList">
    <!-- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住 -->
    <!-- 需要固定在页面顶部的view请通过slot="top"插入，包括自定义的导航栏 -->
    <template #top>
      <uni-row class="search-row flex-row align-center justify-between" style="padding-top: 2px">
<!--        <uni-col :span="8">-->
<!--          <uni-data-select-->
<!--              v-model="type"-->
<!--              :localdata="typeList"-->
<!--              @change="searchList"-->
<!--          />-->
<!--        </uni-col>-->
        <uni-col :span="19">
          <uni-easyinput
            v-model="keywords"
            :styles="inputStyles"
            :placeholderStyle="placeholderStyle"
            :placeholder="$t('common.searchHint')" />
        </uni-col>
        <uni-col :span="5" class="flex-row justify-end">
          <button class="mini-btn" type="primary" size="mini" @click="searchList">
            {{ $t('operation.search')}}</button>
        </uni-col>
      </uni-row>
    </template>
    <view class="list">
      <view class="item" v-for="(item,index) in dataList" :key="index">
        <view class="item-module flex-row align-center justify-between tobeFilled">
          <view class="module-name">
            {{  item.createTime }}
          </view>
          <view class="module-status pending">
            {{ item.status }}
          </view>
        </view>
        <view class="item-content">
          <view class="item-title flex-row">
            <span class="item-title-width">{{$t('overtime.item.type')}}:</span>
            <span>{{ item.type }}</span>
          </view>
          <view class="item-title flex-row">
            <span class="item-title-width">{{ $t('overtime.item.title')}}:</span>
            <span>{{item.title }}</span>
          </view>
        </view>
        <view class="item-btn flex-row align-center justify-end">
          <button type="primary" @click="navigatorDetail(item)">{{$t('operation.fill')}}</button>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup>
import { ref, reactive, nextTick, getCurrentInstance } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getOvertimeTaskList } from "@/api/task"

const type = ref('')
const keywords = ref('')
const placeholderStyle = ref('color:#797979;font-weight:500;font-size:16px')
const inputStyles = reactive({
  backgroundColor: '#FFFFFF',
  color: '#797979',
})
const paging = ref(null)
// v-model绑定的这个变量不要在分页请求结束中自己赋值，直接使用即可
const dataList = ref([])

const { appContext } = getCurrentInstance();
const t = appContext.config.globalProperties.$t;

const typeList = [
  { value: t('overtime.type1'), text: t('overtime.type1') },
  { value: t('overtime.type2'), text: t('overtime.type2') },
  { value: t('overtime.type3'), text: t('overtime.type3') },
  { value: t('overtime.type4'), text: t('overtime.type4') },
]

// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
const queryList = (pageNo, pageSize) => {
  // 此处请求仅为演示，请替换为自己项目中的请求
  getOvertimeTaskList({
    pageNo,
    pageSize,
    commonParam: keywords.value,
    // type: type.value,
  }).then(res => {
    // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
    paging.value.complete(res.data.list);
  }).catch((e) => {
    console.log(e)
    // 如果请求失败写paging.value.complete(false);
    // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
    // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
    paging.value.complete(false);
  })
}
const searchList = () => {
  paging.value.reload()
}
const navigatorDetail = (item) => {
  if (item.type === '维修工单') {
    uni.navigateTo({ url: '/pages/repair/edit?id=' + item.id })
  } else if (item.type === '运行记录') {
    const json = JSON.stringify({
      orderId: item.id
    })
    uni.navigateTo({ url: `/pages/recordFilling/detail?view=1&param=${json}` })
  } else if (item.type === '保养工单') {
    uni.navigateTo({ url: "/pages/maintenance/edit?id=" + item.id })
  } else if (item.type === '巡检工单') {
    uni.navigateTo({ url: "/pages/inspection/edit?id=" + item.id })
  }
}
onShow(() => nextTick(() => searchList()))
</script>

<style lang="scss" scoped>
@import "@/style/work-order.scss";

.search-row {
  height: 35px;
  background: #F3F5F9;

  .mini-btn {
    height: 35px;
    line-height: 35px;
    width: 100%;
    margin-left: 8px;
  }
}

.item {
  width: 100%;
  height: 204px;
  min-height: 204px;
  background: #FFFFFF;
  border-radius: 6px;
  margin-top: 10px;
}
</style>