feat(maint): 添加工单图片上传功能

baoshiwei

2025-06-10 0f63c9e381eeefa2f7aceb7ed8d043ddd165afd5

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

@@ -25,7 +25,7 @@
        safeAreaInsetTop
      >
        <template #right>
          <text v-if="isOperatorOrRepair()" class="text-white">提交</text>
          <text v-if="maintSt.status === '0'" class="text-white">提交</text>
        </template>
      </wd-navbar>
      <wd-cell>
@@ -48,26 +48,32 @@
            </view>
          </view>
        </template>
        <view class="flex h-[140rpx]" items-center>
        <view class="flex" items-center>
          <image class="slot-img text-center" src="/static/images/camera.png" />
          <view class="flex-1">
            <view class="text-color-gray text-sm mt-1 flex">
              <text class="mr-3">工单总数: {{ maintSt.orderCount }}</text>
              |
              <text class="mx-3">已完成: {{ maintSt.wcCount }}</text>
            </view>
            <view class="text-color-gray text-sm mt-2 flex">
              <text class="mr-3">待保养: {{ maintSt.dbyCount }}</text>
              <text class="mx-3">已完成: {{ maintSt.dyzCount }}</text>
              |
              <text class="mx-3">保养中: {{ maintSt.byCount }}</text>
              |
              <text class="ml-3">待验证: {{ maintSt.dyzCount }}</text>
              <text class="mx-3">待保养: {{ maintSt.dbyCount }}</text>
            </view>
<!--            <view class="text-color-gray text-sm mt-2 flex">-->
<!--              <text class="mr-3">待保养: {{ maintSt.dbyCount }}</text>-->
<!--              |-->
<!--              <text class="mx-3">保养中: {{ maintSt.byCount }}</text>-->
<!--&lt;!&ndash;              |&ndash;&gt;-->
<!--&lt;!&ndash;              <text class="ml-3">待验证: {{ maintSt.dyzCount }}</text>&ndash;&gt;-->
<!--            </view>-->
            <view class="text-color-gray text-sm mt-2 flex">
              <text>状态：</text>
              <template v-if="maintSt.status === '1'">
                <wd-icon class="icon-color-success" name="check-outline" size="34rpx"></wd-icon>
                <text class="ml-1">已完成</text>
              </template>
              <template v-else-if="maintSt.status === '2'">
                <wd-icon class="icon-color-warning" name="check-outline" size="34rpx"></wd-icon>
                <text class="ml-1">已确认</text>
              </template>
              <template v-else>
                <wd-icon class="icon-color-base" name="detection" size="40rpx"></wd-icon>
@@ -136,6 +142,9 @@

        <!-- 正文区域 -->
        <view v-else class="mt-2">
          <wd-upload v-model:file-list="item.fileList" :action="VITE_UPLOAD_BASEURL" @success="handleUploadSuccess" >
            <wd-button>上传图片</wd-button>
          </wd-upload>
          <!-- 保养说明区域 -->
          <view v-if="item.maintFun === '1'" class="mt-2">
            <wd-input
@@ -205,11 +214,16 @@
        placeholder="请输入特记事项"
        clearable
      />
      <!-- 新增确认完成按钮 -->
      <view class="flex justify-around mt-4">
        <wd-button type="primary" block size="large" v-if="maintSt.status === '0'" @click="handleClickRight">提交</wd-button>
        <wd-button type="success" block size="large" v-if="isLeader() && maintSt.status === '1'" @click="handleComplete">确认完成</wd-button>
      </view>
    </view>
    <!-- 新增提交按钮 -->
    <view class="flex justify-center mt-4">
      <wd-button type="primary" block size="large" @click="handleClickRight">提交</wd-button>
    </view>
<!--    <view class="flex justify-center mt-4">-->
<!--      <wd-button type="primary" block size="large" @click="handleClickRight">提交</wd-button>-->
<!--    </view>-->
  </z-paging>

  <!-- 备件选择弹出层 -->
@@ -250,7 +264,8 @@
import { formatDate } from '@/utils/DateUtils'
import { useUserStore } from "@/store";
import { getSpareList } from '@/service/spare'

import { getEnvBaseUploadUrl } from "@/utils";
const VITE_UPLOAD_BASEURL = `${getEnvBaseUploadUrl()}`
const message = useMessage()
const toast = useToast()
const userStore = useUserStore()
@@ -291,10 +306,19 @@
  }
  getMaintStOrderList(params)
    .then((res: any) => {
      // 将每一项的picture转换为fileList数组
      res.rows.forEach((item: any) => {
        item.fileList = item.picture?.split(',').map((url: string) => {
          return {
            url: url,
          }
        })
      })
      // 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
      paging.value.completeByTotal(res.rows, res.total)
    })
    .catch((res) => {
      console.error(res)
      // 如果请求失败写paging.value.complete(false)，会自动展示错误页面
      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
@@ -340,7 +364,7 @@
}

function loadSpareParts(value?: string) {
  getSpareList({ name: value }).then((res: any) => {
  getSpareList({ name: value, pageNum: 1, pageSize: 10 }).then((res: any) => {
    sparePartsList.value = res.rows

  })
@@ -372,6 +396,7 @@
function confirmSpareSelection() {
  closeSparePopup()
}


function addOtherSparePart() {
  dataList.value[selectedPartIndex.value].spareParts.push({
@@ -474,6 +499,15 @@
    return false
  }

  // 将submitList中每一项的fileList转换为以逗号分割的字符串
  submitList.forEach((item) => {

    console.log('item.fileList', item.fileList)
    const map = item.fileList?.map((file) => file.url)
    console.log('map', map)
    item.picture = map?.join(',')
  })


  const data: any = Object.assign(
    {},
@@ -498,7 +532,8 @@
          .then((res: any) => {
            resolve(true)
            if (res?.code === 200) {
              reloadData()
              uni.$emit('maint-st-refresh')
              goBack()
              toastSucces()
            }
          })
@@ -604,6 +639,47 @@
    });
}

/**
 * 确认完成按钮点击事件
 */
function handleComplete() {
  if (!isLeader()) {
    toast.info('无权限操作');
    return;
  }
  const now = new Date();
  const data: any = Object.assign(
    {},
    {
      id: maintSt.id,
      status: '2',
      verifyUser: userStore?.userInfo?.userId ,
      verifyTime: `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
    },
  )
  updateMaintSt(data)
    .then((res: any) => {
      if (res?.code === 200) {
        uni.$emit('maint-st-refresh')
        goBack()
        toastSucces()
      }
    })
    .catch((res) => {
      console.error(res)
    })
}
function handleUploadSuccess({ file, fileList }) {
  console.log('handleUploadSuccess', file)
  // 判断 file.response是不是 对象，不是对象将json字符串转换为对象
  if (typeof file.response === 'string') {
    file.response = JSON.parse(file.response)
    console.log('file.response', file.response)
    file.ossId = file.response.data.ossId
    file.url = file.response.data.url
  }
}

// 新增方法：获取状态文本
function getStatusText(maintFun: string): string {
  switch (maintFun) {