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

zhuguifei

2025-05-20 7fe7b6182c2d407d28c2c9da1c070c3ce964e3e7

 eims-ui-mobile/src/pages/inspect/insp-record.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>
  <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
      >
        <template #right>
          <text v-if="isOperatorOrRepair()" class="text-white">提交</text>
        </template>
      </wd-navbar>
      <wd-card type="rectangle">
        <template #title>
          <view class="flex justify-between">
@@ -66,9 +61,7 @@
                <text class="ml-1">进行中</text>
              </template>
            </view>
            <view class="text-color-gray text-xs mt-2 flex">
              创建时间: {{inspSt.createTime}}
            </view>
            <view class="text-color-gray text-xs mt-2 flex">创建时间: {{ inspSt.createTime }}</view>
          </view>
        </view>
      </wd-card>
@@ -85,11 +78,11 @@
        </wd-button>
      </wd-cell>
      <wd-collapse v-model="collSelects" title="点检项" ref="collapseRef">
        <wd-collapse-item :name="item.id" v-for="(item, index) in dataList">
        <wd-collapse-item :name="item.id" v-for="(item, index) in dataList" disabled>
          <template #title="{ expanded, disabled, isFirst }">
            <view class="flex justify-between">
              <view class="flex justify-center items-center">
                <text class="text-sm">{{ item.inspName }}</text>
              <view class="flex justify-center items-center" style="max-width: 60%;">
                <text class="text-sm" >{{ item.inspName }}</text>
              </view>

              <view class="flex items-center">
@@ -118,7 +111,13 @@
          </view>
        </wd-collapse-item>
      </wd-collapse>
      <view class="w-full h-[1rpx] bg-base"></view>
      <view class="w-full h-[24rpx]"></view>
      <wd-cell>
        <template #title>
          <text class="text-color-gray">其他</text>
        </template>
      </wd-cell>
      <view class="w-full h-[1px] bg-base"></view>
      <wd-textarea
        label="特记事项"
        label-width="200rpx"
@@ -137,7 +136,13 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore, useAccessStore, useSystemConfigStore } from '@/store'
import { getInspStRecordList, updateInspectSt, updateInspRecordBatch } from '@/service/inspect'
import { isLeader, isOperatorOrRepair } from "@/utils/RoleUtils";
import {
  getInspStRecordList,
  getInspSt,
  updateInspectSt,
  updateInspRecordBatch,
} from '@/service/inspect'
import { useToast, useMessage } from 'wot-design-uni'
import type { CollapseInstance } from 'wot-design-uni/components/wd-collapse/types'
const message = useMessage()
@@ -145,6 +150,7 @@

const collapseRef = ref<CollapseInstance>()
const isAllExpanded = ref(false)
const viewMode = ref<string>('Day')

// 定义接口
interface QueryParams {
@@ -217,11 +223,13 @@
const goBack = () => {
  uni.navigateBack()
}
onNavigationBarButtonTap((e) => {
  if (e.index === 0) {

function handleClickRight() {
  if(isOperatorOrRepair()){
    handleConfirm()
  }
})

}

const toggleCollapse = () => {
  isAllExpanded.value = !isAllExpanded.value
@@ -255,7 +263,7 @@
  updateInspRecordBatch(params)
    .then((res: any) => {
      updateInspSt(resolve)
      toast.success("操作成功")
      toast.success('操作成功')
    })
    .catch((res) => {
      console.error(res)
@@ -291,16 +299,40 @@
  { deep: true },
)
onLoad((options) => {
  inspSt.id = options.id
  inspSt.inspCode = options.inspCode
  inspSt.equName = options.equName
  inspSt.assetNo = options.assetNo
  inspSt.planTimeStr = options.planTimeStr
  inspSt.createTime = options.createTime
  inspSt.specialNote = options?.specialNote
  inspSt.inspUser = userStore?.userInfo?.userId
  // inspSt.id = options.id
  // inspSt.inspCode = options.inspCode
  // inspSt.equName = options.equName
  // inspSt.assetNo = options.assetNo
  // inspSt.planTimeStr = options.planTimeStr
  // inspSt.createTime = options.createTime
  // inspSt.specialNote = options?.specialNote
  // inspSt.inspUser = userStore?.userInfo?.userId
  viewMode.value = options.viewMode
  initData(options.id)
})

function initData(id: any) {
  getInspSt(id)
    .then((res: any) => {
      if (res?.id) {
        const inspCode = `${res?.equId}_${res?.planTime}_${viewMode.value}`
        inspSt.inspCode = inspCode
        Object.assign(inspSt, res)
        reloadData()
      } else {
        uni.showToast({
          title: '数据查询失败，请联系管理员',
          icon: 'none',
        })
      }
    })
    .catch((res) => {
      console.error(res)
    })
}
function reloadData() {
  paging.value.reload()
}
const dataCount = computed(() => dataList.value.length)
const checkCount = computed(() => dataList.value.filter((item) => item.status === '1').length)
const normalNum = computed(() => dataList.value.filter((item) => item.inspResult === '1').length)