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

zhuguifei

2025-05-20 7fe7b6182c2d407d28c2c9da1c070c3ce964e3e7

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

@@ -2,30 +2,25 @@
{
  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" @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
      >
        <template #right>
          <text v-if="isOperatorOrRepair()" class="text-white">接单</text>
        </template>
      </wd-navbar>
      <wd-drop-menu>
        <wd-drop-menu-item
          v-model="resTypeId"
@@ -33,6 +28,11 @@
          value-key="dictValue"
          :options="resTypeList"
          @change="handleResType"
        />
        <wd-drop-menu-item
          v-model="filterDate"
          :options="filterDateList"
          @change="handleFilterDate"
        />
        <wd-drop-menu-item
          v-model="status"
@@ -140,9 +140,8 @@
                  size="small"
                  icon="edit-outline"
                  @click.stop="goToFeedBack(item)"
                  v-if="item.fbId === null"
                >
                  写评价
                  查看评价
                </wd-button>
              </view>
            </template>
@@ -176,9 +175,8 @@
                  size="small"
                  icon="edit-outline"
                  @click.stop="goToFeedBack(item)"
                  v-if="item.fbId === null"
                >
                  写评价
                  {{ item.fbId == null ? '写评价' : '查看评价' }}
                </wd-button>
              </view>
            </template>
@@ -197,23 +195,50 @@
import { isLeader, isOperatorOrRepair } from '@/utils/RoleUtils'
import { useUserStore } from '@/store'
import { formatDate } from '@/utils/DateUtils'
import dayjs from "dayjs";
const userStore = useUserStore()

const message = useMessage()
const toast = useToast()

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

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

// 维修单类型
const resTypeId = ref<number>(0)
const resTypeId = ref<number>(-1)
// 维修单处理状态
const status = ref<number>(0)
const status = ref<number>(-1)

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

const resTypeList = ref<any>([{ dictLabel: '所有类型', dictValue: 0 }])
const statusList = ref<any>([{ dictLabel: '所有状态', dictValue: 0 }])
const filterDateList = ref<Record<string, any>[]>([
  { label: '所有数据', value: '0' },
  { label: '当天数据', value: '1' },
  { label: '当月数据', value: '2' },
])
const resTypeList = ref<any>([{ dictLabel: '所有类型', dictValue: -1 }])
const statusList = ref<any>([{ dictLabel: '所有状态', dictValue: -1 }])
function handleResType({ value }) {
  reloadData()
}
function handleResStatu({ value }) {
  reloadData()
}
function handleFilterDate({ value }) {
  reloadData()
}

@@ -221,19 +246,40 @@
const dataList = ref([])

const queryList = (pageNum?: number, pageSize?: number) => {
  const parmams = {
  const queryParams: any = {
    pageNum,
    pageSize,
    reqType: resTypeId.value,
    status: status.value,
  }
  if (resTypeId.value === 0) {
    delete parmams.reqType
  if (resTypeId.value === -1) {
    delete queryParams.reqType
  }
  if (status.value === 0) {
    delete parmams.status
  if (status.value === -1) {
    delete queryParams.status
  }
  getRepairResList(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
  }
  // 如果是从扫码页面过来，只能查询固定设备的数据
  if (option?.from === 'scan') {
    queryParams.assetNo = option.assetNo
  }
  getRepairResList(queryParams)
    .then((res: any) => {
      paging.value.completeByTotal(res.rows, res.total)
    })
@@ -308,19 +354,20 @@

function goToFeedBack(item) {
  uni.navigateTo({
    url: `/pages/repair/feedback?id=${item.id}`,
    url: `/pages/repair/repair-fb?id=${item.id}`,
  })
}

onNavigationBarButtonTap((e) => {
  if (e.index === 0) {
    if (isLeader()) {
      toast.info('请登录维修工账号接单')
    } else if (isOperatorOrRepair()) {
      handleSelectReq()
    }
const goBack = () => {
  uni.navigateBack()
}
function handleClickRight() {
  if (isLeader()) {
    toast.info('请登录维修工账号接单')
  } else if (isOperatorOrRepair()) {
    handleSelectReq()
  }
})
}


/**
 * 选择报修单
@@ -373,7 +420,8 @@
  const sList: any = await getDictInfo(DICT_REPAIR_RES_STATUS)
  statusList.value.push(...sList)
}
onLoad(() => {
onLoad((options) => {
  Object.assign(option, options)
  initData()
  uni.$on('res-list-refresh', reloadData)
})