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

zhuguifei

2025-05-20 7fe7b6182c2d407d28c2c9da1c070c3ce964e3e7

 eims-ui-mobile/src/pages/repair/req-list.vue

@@ -2,30 +2,27 @@
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '设备报修',
    'app-plus': {
      titleNView: {
        buttons: [
          {
            text: '新增',
            fontSize: '14px',
            color: '#FFFFFF',
          },
          {
            text: '',
            fontSize: '24px',
            color: '#FFFFFF',
          },
        ],
      },
    },
  },
  style: { navigationBarTitleText: '报修列表', navigationStyle: 'custom' },
}
</route>
<template>
  <z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList" show-refresher-update-time>
  <z-paging
    ref="paging"
    v-model="dataList"
    :auto="false"
    @query="queryList"
    show-refresher-update-time
  >
    <template #top>
      <wd-navbar
        title="报修列表"
        left-arrow
        @click-left="goBack"
        right-text="新增"
        @click-right="handleClickRight"
        custom-style="background: #4D80F0;"
        safeAreaInsetTop
      ></wd-navbar>
      <wd-drop-menu v-if="!isSelectReq">
        <wd-drop-menu-item
          v-model="reqTypeId"
@@ -33,6 +30,11 @@
          value-key="dictValue"
          :options="reqTypeList"
          @change="handleReqType"
        />
        <wd-drop-menu-item
          v-model="filterDate"
          :options="filterDateList"
          @change="handleFilterDate"
        />
        <wd-drop-menu-item
          v-model="status"
@@ -138,6 +140,7 @@
import { useToast, useMessage } from 'wot-design-uni'
import { getRepairReqList, delRepairReq } from '@/service/repair'
import { DICT_REPAIR_REQ_STATUS, DICT_REPAIR_REQ_TYPE, getDictInfo } from '@/service/dict'
import dayjs from "dayjs";

const message = useMessage()
const toast = useToast()
@@ -148,6 +151,14 @@

const isSelectReq = ref(false)

const filterDate = ref<string>('2')

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

const reqTypeList = ref<any>([{ dictLabel: '所有类型', dictValue: -1 }])
const statusList = ref<any>([{ dictLabel: '所有状态', dictValue: -1 }])
function handleReqType({ value }) {
@@ -156,25 +167,47 @@
function handleReqStatu({ value }) {
  reloadData()
}
function handleFilterDate({ value }) {
  reloadData()
}



const paging = ref(null)
const dataList = ref([])

const queryList = (pageNum?: number, pageSize?: number) => {
  const parmams = {
  const queryParams: any = {
    pageNum,
    pageSize,
    reqType: reqTypeId.value,
    status: status.value,
  }
  if (reqTypeId.value === -1) {
    delete parmams.reqType
    delete queryParams.reqType
  }
  if (status.value === -1) {
    delete parmams.status
    delete queryParams.status
  }

  getRepairReqList(parmams)
  if (filterDate.value === '1') {
    // 获取当前日期
    const now = dayjs()
    queryParams.params = {
      beginReqTime: now.startOf('day').format('YYYY-MM-DD 00:00:00'),
      endReqTime: now.endOf('day').format('YYYY-MM-DD 23:59:59'),
    }
  } else if (filterDate.value === '2') {
    const now = dayjs()
    queryParams.params = {
      beginReqTime: now.startOf('month').format('YYYY-MM-DD 00:00:00'),
      endReqTime: now.endOf('month').format('YYYY-MM-DD 23:59:59'),
    }
  } else {
    delete queryParams.params
  }

  getRepairReqList(queryParams)
    .then((res: any) => {
      paging.value.completeByTotal(res.rows, res.total)
    })
@@ -246,13 +279,20 @@
  })
}

onNavigationBarButtonTap((e) => {
  if (e.index === 0 && !isSelectReq.value) {
    uni.navigateTo({
      url: `/pages/repair/repair-add`,
    })
  }
})
const goBack = () => {
  uni.navigateBack()
}
function handleClickRight() {
  // if (e.index === 0 && !isSelectReq.value) {
  //   uni.navigateTo({
  //     url: `/pages/repair/repair-add`,
  //   })
  // }

  uni.navigateTo({
    url: `/pages/repair/repair-add`,
  })
}

const eventChannel = ref<any>()
onMounted(() => {