1.移动端添加自定义navbar导航栏

zhuguifei

2025-05-20 7fe7b6182c2d407d28c2c9da1c070c3ce964e3e7

 eims-ui-mobile/src/pages/maint/maint-st.vue

@@ -13,6 +13,11 @@
    <template #top>
      <wd-drop-menu>
        <wd-drop-menu-item v-model="equName" :options="equList" @change="handleEquName" />
        <wd-drop-menu-item
          v-model="filterDate"
          :options="filterDateList"
          @change="handleFilterDate"
        />
        <wd-drop-menu-item v-model="status" :options="statusList" @change="handleStatus" />
      </wd-drop-menu>
    </template>
@@ -52,7 +57,7 @@
            </view>
            <view class="text-color-gray text-xs mt-2 flex">
              <text>状态：</text>
              <template v-if="item.status=== '1'">
              <template v-if="item.status === '1'">
                <wd-icon class="icon-color-success" name="check-outline" size="34rpx"></wd-icon>
                <text class="ml-1">已完成</text>
              </template>
@@ -61,9 +66,7 @@
                <text class="ml-1">进行中</text>
              </template>
            </view>
            <view class="text-color-gray text-xs mt-2 flex">
              创建时间: {{item.createTime}}
            </view>
            <view class="text-color-gray text-xs mt-2 flex">创建时间: {{ item.createTime }}</view>
          </view>
          <wd-button size="small" icon="edit-outline" @click.stop="itemClick(item)">明细</wd-button>
        </view>
@@ -75,16 +78,40 @@
<script setup lang="ts">
import { ref } from 'vue'
import { getMaintStList } from '@/service/maint'
import dayjs from 'dayjs'

/**
 * 其他页面传过来的数据
 * assetNo: 资产编号
 * from: 是否是扫码进来的，如果是扫码进来，只能查询固定设备的数据
 */
interface PageParams {
  assetNo?: string
  from?: string
}

interface QueryParams {
  pageNum: number
  pageSize: number
  assetNo?: string
  equName?: string
  status?: string
  params?: NonNullable<unknown>
}

// 页面参数，上个页面传递过来的参数
const option = reactive<PageParams>({
  assetNo: '',
  from: '',
})
const status = ref<string>('-1')
const equName = ref<string>('-1')
const filterDate = ref<string>('1')

const filterDateList = ref<Record<string, any>[]>([
  { label: '所有数据', value: '0' },
  { label: '当月数据', value: '1' },
])

const statusList = ref<Record<string, any>[]>([
  { label: '所有状态', value: '-1' },
@@ -98,6 +125,9 @@
function handleEquName({ value }) {
  console.log(value)
}
function handleFilterDate({ value }) {
  reloadData()
}

const paging = ref(null)
const dataList = ref([])
@@ -105,20 +135,35 @@
const queryList = (pageNum?: number, pageSize?: number) => {
  // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  // 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
  const params: QueryParams = {
  const queryParams: QueryParams = {
    pageNum,
    pageSize,
    equName: equName.value,
    status: status.value,
  }
  if (equName.value === '-1') {
    delete params.equName
  }
  if (status.value === '-1') {
    delete params.status
  if (filterDate.value === '1') {
    // 获取当前日期
    const now = dayjs()
    queryParams.params = {
      beginPlanTime: now.startOf('month').format('YYYY-MM-DD 00:00:00'),
      endPlanTime: now.endOf('month').format('YYYY-MM-DD 23:59:59'),
    }
  } else {
    delete queryParams.params
  }

  getMaintStList(params)
  if (equName.value === '-1') {
    delete queryParams.equName
  }
  if (status.value === '-1') {
    delete queryParams.status
  }
  // 如果是从扫码页面过来，只能查询固定设备的数据
  if (option?.from === 'scan') {
    queryParams.assetNo = option.assetNo
  }

  getMaintStList(queryParams)
    .then((res: any) => {
      // 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
      paging.value.completeByTotal(res.rows, res.total)
@@ -140,7 +185,8 @@
function reloadData() {
  paging.value.reload()
}
onLoad(() => {
onLoad((options) => {
  Object.assign(option, options)
  uni.$on('maint-st-refresh', reloadData)
})
onUnload(() => {