pages-sub/problem/work-order-manage/add-order.vue

<template>
  <view class="u-page">
    <!-- 核心：将所有 up-form-item 包裹在同一个 up-form 内 -->
    <view class="work-order-form-content commonPageLRpadding">
      <up-form
          label-position="left"
          :model="workOrderForm"
          ref="workOrderFormRef"
          labelWidth="160rpx"
      >
        <!-- 1. 工单位置（地图选择） -->
        <up-form-item
            label="工单位置"
            prop="workLocation"
            border-bottom
            required
            @click="chooseWorkLocation(); hideKeyboard()"
        >
          <up-input
              v-model="workOrderForm.workLocation"
              border="none"
              readonly
              suffix-icon="map-fill"
              placeholder="点击选择工单位置"
          ></up-input>
        </up-form-item>
        <!-- 2. 道路名称（下拉框：位置选择后才可点击） -->
        <up-form-item
            label="道路名称"
            prop="roadName"
            border-bottom
            required
            @click="workOrderForm.workLocation ? (showRoadName = true, hideKeyboard()) : uni.showToast({title: '请先选择工单位置', icon: 'none'})"
        >
          <up-input
              v-model="workOrderForm.roadName"
              disabled
              disabled-color="#ffffff"
              placeholder="请先选择工单位置"
              border="none"
              :placeholder-style="workOrderForm.workLocation ? '' : 'color:#999;'"
          ></up-input>
          <template #right>
            <up-icon name="arrow-right" size="16" :color="workOrderForm.workLocation ? '#333' : '#999'"></up-icon>
          </template>
        </up-form-item>
        <!-- 3. 工单名称（下拉框） -->
        <up-form-item
            label="工单名称"
            prop="orderName"
            border-bottom
            required
            @click="showOrderName = true; hideKeyboard()"
        >
          <up-input
              v-model="workOrderForm.orderName"
              disabled
              disabled-color="#ffffff"
              placeholder="请选择工单名称"
              border="none"
          ></up-input>
          <template #right>
            <up-icon name="arrow-right" size="16"></up-icon>
          </template>
        </up-form-item>
        <!-- 新增：紧急程度选择 -->
        <up-form-item
            label="紧急程度"
            prop="pressingType"
            border-bottom
            required
            @click="showPressingType = true; hideKeyboard()"
        >
          <up-input
              v-model="workOrderForm.pressingTypeName"
              disabled
              disabled-color="#ffffff"
              placeholder="请选择紧急程度"
              border="none"
          ></up-input>
          <template #right>
            <up-icon name="arrow-right" size="16"></up-icon>
          </template>
        </up-form-item>
        <!-- 4. 情况描述（文本域） -->
        <up-form-item
            label="情况描述"
            prop="problemDesc"
            required
        >
          <up-textarea
              placeholder="请输入情况描述（最多200字）"
              v-model="workOrderForm.problemDesc"
              count
              maxlength="200"
              rows="4"
              @blur="() => $refs.workOrderFormRef.validateField('problemDesc')"
          ></up-textarea>
        </up-form-item>
        <!-- 问题照片（移除完成照片相关代码） -->
        <up-form-item label="问题照片" prop="problemImgs" required>
          <up-upload
              :file-list="problemImgsList"
              @after-read="(event) => uploadImgs(event, 'problemImgsList')"
              @delete="(event) => deleteImg(event, 'problemImgsList')"
              multiple
              :max-count="3"
              upload-text="选择问题照片"
          ></up-upload>
        </up-form-item>
        <!-- 完成时间 -->
        <up-form-item
            label="完成时间"
            prop="finishTime"
            @click="show=true;hideKeyboard()"
        >
          <up-input
              v-model="workOrderForm.finishTime"
              border="none"
              readonly
              placeholder="点击选择时间"
          >
          </up-input>
          <template #right>
            <up-icon name="arrow-right" size="16"></up-icon>
          </template>
        </up-form-item>
      </up-form>
    </view>
    <!-- 底部提交按钮 -->
    <view class="fixed-bottom-btn-wrap">
      <up-button
          type="primary"
          text="提交工单"
          @click="submitWorkOrder"
      ></up-button>
    </view>
    <!-- 道路名称下拉弹窗 -->
    <up-action-sheet
        :show="showRoadName"
        :actions="roadNameList"
        title="请选择道路名称"
        @close="showRoadName = false"
        @select="handleRoadNameSelect"
    ></up-action-sheet>
    <!-- 工单名称下拉弹窗 -->
    <up-action-sheet
        :show="showOrderName"
        :actions="orderNameList"
        title="请选择工单名称"
        @close="showOrderName = false"
        @select="handleOrderNameSelect"
    ></up-action-sheet>
    <!-- 紧急程度下拉弹窗 -->
    <up-action-sheet
        :show="showPressingType"
        :actions="pressingTypeList"
        title="请选择紧急程度"
        @close="showPressingType = false"
        @select="handlePressingTypeSelect"
    ></up-action-sheet>
    <!-- 完成时间选择器 -->
    <up-datetime-picker
        :show="show"
        v-model="finishTime"
        mode="datetime"
        :min-date="new Date()"
        @cancel="show = false"
        @confirm="finishTimeConfirm"
    ></up-datetime-picker>
  </view>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import type {UniFormRef} from '@/uni_modules/uview-plus/types'
// 定义ref供选项式API使用
const workOrderFormRef = ref<UniFormRef>(null)
</script>
<script lang="ts">
import {getRoadListByLatLng} from '@/api/common'
import {uploadImages} from '@/common/utils/upload';
import {createQuick} from '@/api/quick-order/quick-order'
import { timeFormat } from '@/uni_modules/uview-plus' // 引入时间格式化工具
export default {
  data() {
    return {
      // 问题照片列表
      problemImgsList: [],
      // 弹窗显隐控制
      showRoadName: false,
      showOrderName: false,
      showPressingType: false,
      show: false,
      showBirthday: false, // 生日弹窗控制
      // 下拉列表数据
      roadNameList: [],
      orderNameList: [],
      pressingTypeList: [],
      finishTime:Date.now(),
      // 工单表单数据
      workOrderForm: {
        roadId: 0,                     // 道路ID
        roadName: '',                  // 道路名称
        workLocation: '',              // 工单位置
        orderName: '',                 // 工单名称
        pressingType: 0,               // 紧急程度值（提交接口用）
        pressingTypeName: '',          // 紧急程度名称（显示用）
        problemDesc: '',               // 情况描述
        lat: 0,                        // 纬度
        lon: 0,                        // 经度
        finishTime: '',                // 完成时间
      },
      // 表单校验规则
      workOrderFormRules: {
        workLocation: [
          {type: 'string', required: true, message: '请选择工单位置', trigger: ['change', 'blur']}
        ],
        roadName: [
          {type: 'string', required: true, message: '请选择道路名称', trigger: ['change', 'blur']}
        ],
        orderName: [
          {type: 'string', required: true, message: '请选择工单名称', trigger: ['change', 'blur']}
        ],
        pressingType: [
          {type: 'number', required: true, message: '请选择紧急程度', trigger: ['change']}
        ],
        birthday: [ // 新增：生日校验规则
          {type: 'string', required: true, message: '请选择生日', trigger: ['change']}
        ],
        problemDesc: [
          {type: 'string', required: true, message: '请输入情况描述', trigger: ['change', 'blur']},
          {type: 'string', min: 3, max: 200, message: '情况描述需3-200字', trigger: ['change', 'blur']}
        ],
        problemImgs: [
          {
            required: true,
            message: '请上传问题照片',
            trigger: 'change',
            validator: (rule, value, callback) => {
              const hasSuccessImg = this.problemImgsList.some(item => item.status === 'success')
              hasSuccessImg ? callback() : callback(new Error('请上传至少1张问题照片'))
            }
          }
        ]
      }
    }
  },
  onReady() {
    // 兼容微信小程序，通过setRules设置校验规则
    this.$refs.workOrderFormRef.setRules(this.workOrderFormRules)
    console.log('工单表单规则初始化完成')
  },
  onShow(){
    console.log(uni.$dict.getDictLabel('ai_image_status', 20))
    console.log(uni.$dict.getDictSimpleList('work_name'))
    // 初始化工单名称列表
    this.orderNameList = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('work_name'))
    console.log('工单名称列表：', this.orderNameList)
    // 初始化紧急程度列表
    this.pressingTypeList = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('workorder_pressing_type'))
    console.log('紧急程度列表：', this.pressingTypeList)
  },
  methods: {
    /**
     * 返回上一页
     */
    navigateBack() {
      uni.navigateBack()
    },
    /**
     * 删除图片
     */
    deleteImg(event, type) {
      console.log('删除图片事件：', event, '类型：', type)
      if (type === 'problemImgsList') {
        this.problemImgsList.splice(event.index, 1)
        this.$refs.workOrderFormRef.validateField('problemImgs')
      }
      uni.showToast({title: '图片删除成功', icon: 'success'})
    },
    /**
     * 上传图片
     */
    async uploadImgs(event, type) {
      console.log('上传图片事件：', event, '类型：', type)
      if (type !== 'problemImgsList') return
      const fileList = Array.isArray(event.file) ? event.file : [event.file]
      const targetImgList = this.problemImgsList
      const filePaths = fileList.map(item => item.url)
      const tempItems = fileList.map(item => ({
        ...item,
        status: 'uploading',
        message: '上传中'
      }))
      const startIndex = targetImgList.length
      targetImgList.push(...tempItems)
      try {
        const uploadResultUrls = await uploadImages({
          filePaths: filePaths,
          ignoreError: true
        })
        console.log('上传成功的URL列表：', uploadResultUrls)
        uploadResultUrls.forEach((url, index) => {
          if (targetImgList[startIndex + index]) {
            targetImgList.splice(startIndex + index, 1, {
              ...fileList[index],
              status: 'success',
              message: '',
              url: url
            })
          }
        })
        if (uploadResultUrls.length < fileList.length) {
          const failCount = fileList.length - uploadResultUrls.length
          for (let i = uploadResultUrls.length; i < fileList.length; i++) {
            if (targetImgList[startIndex + i]) {
              targetImgList.splice(startIndex + i, 1, {
                ...fileList[i],
                status: 'failed',
                message: '上传失败'
              })
            }
          }
          uni.showToast({title: `成功上传${uploadResultUrls.length}张，失败${failCount}张`, icon: 'none'})
        } else {
          uni.showToast({title: `成功上传${fileList.length}张图片`, icon: 'success'})
        }
        this.$refs.workOrderFormRef.validateField('problemImgs')
      } catch (err) {
        console.error('图片上传失败：', err)
        for (let i = 0; i < fileList.length; i++) {
          if (targetImgList[startIndex + i]) {
            targetImgList.splice(startIndex + i, 1, {
              ...fileList[i],
              status: 'failed',
              message: '上传失败'
            })
          }
        }
        uni.showToast({title: '图片上传失败，请重试', icon: 'none'})
        this.$refs.workOrderFormRef.validateField('problemImgs')
      }
    },
    /**
     * 选择工单位置
     */
    chooseWorkLocation() {
      let that = this
      uni.chooseLocation({
        success: async (res) => {
          that.workOrderForm.roadName = ''
          that.workOrderForm.roadId = 0
          that.roadNameList = []
          that.workOrderForm.workLocation = res.name
          that.workOrderForm.lat = res.latitude
          that.workOrderForm.lon = res.longitude
          that.$refs.workOrderFormRef.validateField('workLocation')
          that.$refs.workOrderFormRef.validateField('roadName')
          try {
            uni.showLoading({title: '获取道路名称中...'})
            const roadRes = await getRoadListByLatLng({
              companyCode: 'sls',
              latitude: res.latitude,
              longitude: res.longitude
            })
            uni.hideLoading()
            if (Array.isArray(roadRes)) {
              that.roadNameList = roadRes.map((item) => ({
                name: item.roadName || '',
                code: item.roadCode || '',
                id: item.roadId || 0
              }))
            } else {
              that.roadNameList = [{name: '未查询到道路名称', code: '', id: 0}]
              uni.showToast({title: '未查询到该位置的道路信息', icon: 'none'})
            }
          } catch (err) {
            uni.hideLoading()
            console.error('获取道路名称失败：', err)
            uni.showToast({title: '获取道路名称失败，请重试', icon: 'none'})
            that.roadNameList = [{name: '获取失败，请重新选择位置', code: '', id: 0}]
          }
        },
        fail: (err) => {
          console.error('选择位置失败：', err)
          uni.showToast({title: '选择位置失败：' + err.errMsg, icon: 'none'})
        }
      })
    },
    /**
     * 选择道路名称
     */
    handleRoadNameSelect(e) {
      console.log('选择道路名称：', e)
      this.workOrderForm.roadName = e.name
      this.workOrderForm.roadId = e.code
      this.showRoadName = false
      this.$refs.workOrderFormRef.validateField('roadName')
    },
    /**
     * 选择工单名称
     */
    handleOrderNameSelect(e) {
      console.log('选择工单名称：', e)
      this.workOrderForm.orderName = e.name
      this.showOrderName = false
      this.$refs.workOrderFormRef.validateField('orderName')
    },
    /**
     * 选择紧急程度
     */
    handlePressingTypeSelect(e) {
      console.log('选择紧急程度：', e)
      this.workOrderForm.pressingType = Number(e.value)
      this.workOrderForm.pressingTypeName = e.name
      this.showPressingType = false
      this.$refs.workOrderFormRef.validateField('pressingType')
    },
    /**
     * 完成时间确认
     */
    finishTimeConfirm(e) {
      console.log('选择的完成时间：', e)
      this.workOrderForm.finishTime =  timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
      this.show = false;
    },
    /**
     * 隐藏键盘
     */
    hideKeyboard() {
      uni.hideKeyboard()
    },
    /**
     * 提取图片URL数组
     */
    getImgUrlList(imgList) {
      return imgList.filter(item => item.status === 'success').map(item => item.url)
    },
    /**
     * 提交工单
     */
    async submitWorkOrder() {
      try {
        // 先执行表单校验
        await this.$refs.workOrderFormRef.validate()
        const submitData = {
          roadId: this.workOrderForm.roadId,
          roadName: this.workOrderForm.roadName,
          imgs: this.getImgUrlList(this.problemImgsList),
          remark: this.workOrderForm.problemDesc,
          latLonType: 2,
          lat: this.workOrderForm.lat,
          lon: this.workOrderForm.lon,
          lonLatAddress: this.workOrderForm.workLocation,
          pressingType: this.workOrderForm.pressingType,
          orderName: this.workOrderForm.orderName,
          birthday: this.workOrderForm.birthday, // 新增：生日字段提交
          finishTime: this.workOrderForm.finishTime, // 新增：完成时间提交
          sourceId: 1,
          sourceName: '园林',
          thirdWorkNo: '',
          busiLine:'yl'
        }
        // 显示加载中
        uni.showLoading({title: '提交中...'})
        // 调用提交接口
        const res = await createQuick(submitData)
        uni.hideLoading()
        uni.showToast({
          title: '工单提交成功',
          icon: 'success',
          duration: 1000
        })
        // 延迟跳转
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages-sub/daily/quick-order/index'
          })
        }, 1000)
      } catch (error) {
        // 隐藏加载框
        uni.hideLoading()
        // 区分是表单校验失败还是接口调用失败
        if (Array.isArray(error)) {
          // 表单校验失败（无需额外提示，uView会自动提示）
        } else {
          // 接口调用失败
          console.error('工单提交失败：', error)
          uni.showToast({
            title: '提交失败，请重试',
            icon: 'none',
            duration: 2000
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// 全局页面样式
.u-page {
  min-height: 100vh;
}
// 工单表单内容容器
.work-order-form-content {
  background: #fff;
}
// 底部按钮样式
.fixed-bottom-btn-wrap {
  padding: 20rpx;
  background: #fff;
}
</style>