JCSS / jcss-miniprogram

<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>

        <!-- 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="completeImgs" required class="mt-20">
          <up-upload
              :file-list="completeImgsList"
              @after-read="(event) => uploadImgs(event, 'completeImgsList')"
              @delete="(event) => deleteImg(event, 'completeImgsList')"
              multiple
              :max-count="3"
              :sizeType="['compressed']"
              upload-text="选择完成照片"
          ></up-upload>
        </up-form-item>

        <!-- 处理结果（不必填） -->
        <up-form-item label="处理结果" prop="handleResultDesc" class="mt-20">
          <up-textarea
              placeholder="请输入处理结果描述（最多200字，选填）"
              v-model="workOrderForm.handleResultDesc"
              count
              maxlength="200"
              rows="4"
              @blur="() => $refs.workOrderFormRef.validateField('handleResultDesc')"
          ></up-textarea>
        </up-form-item>

      </up-form>
    </view>
    <!-- 底部提交按钮（移除loading和disabled属性） -->
    <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>
  </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 {toast} from '@/uni_modules/uview-plus'

export default {
  data() {
    return {
      // 问题照片列表
      problemImgsList: [],
      // 完成照片列表
      completeImgsList: [],
      // 弹窗显隐控制
      showRoadName: false,
      showOrderName: false,
      // 下拉列表数据
      roadNameList: [],
      orderNameList: [
        {name: '绿地卫生', code: 'ORDER001'},
        {name: '设施维修', code: 'ORDER002'},
        {name: '垃圾清理', code: 'ORDER003'}
      ],
      // 工单表单数据
      workOrderForm: {
        roadId: 0,                     // 道路ID
        roadName: '',                  // 道路名称
        workLocation: '',              // 工单位置
        orderName: '',                 // 工单名称
        problemDesc: '',               // 情况描述
        handleResultDesc: '',          // 处理结果描述（不必填）
        lat: 0,                        // 纬度
        lon: 0                         // 经度
      },
      // 表单校验规则
      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']}
        ],
        problemDesc: [
          {type: 'string', required: true, message: '请输入情况描述', trigger: ['change', 'blur']},
          {type: 'string', min: 3, max: 200, message: '情况描述需3-150字', 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张问题照片'))
            }
          }
        ],
        completeImgs: [
          {
            required: true,
            message: '请上传完成照片',
            trigger: 'change',
            validator: (rule, value, callback) => {
              // 自定义校验规则：检查是否有成功上传的图片
              const hasSuccessImg = this.completeImgsList.some(item => item.status === 'success')
              hasSuccessImg ? callback() : callback(new Error('请上传至少1张完成照片'))
            }
          }
        ],

      }
    }
  },
  onReady() {
    // 兼容微信小程序，通过setRules设置校验规则
    this.$refs.workOrderFormRef.setRules(this.workOrderFormRules)
    console.log('工单表单规则初始化完成')
  },
  methods: {
    /**
     * 返回上一页
     */
    navigateBack() {
      uni.navigateBack()
    },
    /**
     * 删除图片
     */
    deleteImg(event, type) {
      console.log('删除图片事件：', event, '类型：', type)
      if (type === 'problemImgsList') {
        this.problemImgsList.splice(event.index, 1)
      } else if (type === 'completeImgsList') {
        this.completeImgsList.splice(event.index, 1)
      }
      // 删除图片后重新校验图片字段
      if (type === 'problemImgsList') {
        this.$refs.workOrderFormRef.validateField('problemImgs')
      } else if (type === 'completeImgsList') {
        this.$refs.workOrderFormRef.validateField('completeImgs')
      }
      uni.showToast({title: '图片删除成功', icon: 'success'})
    },
    /**
     * 上传图片
     */
    async uploadImgs(event, type) {
      console.log('上传图片事件：', event, '类型：', type)
      const fileList = Array.isArray(event.file) ? event.file : [event.file]
      const targetImgList = type === 'problemImgsList' ? this.problemImgsList : this.completeImgsList

      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'})
        }

        // 上传完成后重新校验图片字段
        if (type === 'problemImgsList') {
          this.$refs.workOrderFormRef.validateField('problemImgs')
        } else if (type === 'completeImgsList') {
          this.$refs.workOrderFormRef.validateField('completeImgs')
        }
      } 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'})

        // 上传失败后重新校验图片字段
        if (type === 'problemImgsList') {
          this.$refs.workOrderFormRef.validateField('problemImgs')
        } else if (type === 'completeImgsList') {
          this.$refs.workOrderFormRef.validateField('completeImgs')
        }
      }
    },
    /**
     * 选择工单位置（移除isSubmitting判断）
     */
    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) {
      this.workOrderForm.orderName = e.name
      this.showOrderName = false
      this.$refs.workOrderFormRef.validateField('orderName')
    },
    /**
     * 隐藏键盘
     */
    hideKeyboard() {
      uni.hideKeyboard()
    },
    /**
     * 提取图片URL数组
     */
    getImgUrlList(imgList) {
      return imgList.filter(item => item.status === 'success').map(item => item.url)
    },
    /**
     * 提交工单（添加成功跳转逻辑）
     */
    /**
     * 提交工单（添加成功跳转逻辑）
     */
    async submitWorkOrder() {
      try {
        // 先执行表单校验（改用async/await写法，更易维护）
        await this.$refs.workOrderFormRef.validate()

        const submitData = {
          roadId: this.workOrderForm.roadId,
          roadName: this.workOrderForm.roadName,
          imgs: this.getImgUrlList(this.problemImgsList),
          longRangeImgList: this.getImgUrlList(this.completeImgsList),
          remark: this.workOrderForm.problemDesc,
          handleResultDesc: this.workOrderForm.handleResultDesc,
          latLonType: 2,
          lat: this.workOrderForm.lat,
          lon: this.workOrderForm.lon,
          lonLatAddress: this.workOrderForm.workLocation,
          pressingType: 2,
          orderName: this.workOrderForm.orderName,
          sourceId: 1,
          sourceName: '园林',
          thirdWorkNo: ''
        }

        // 显示加载中
        uni.showLoading({title: '提交中...'})

        // 调用提交接口（await需要async函数支持）
        const res = await createQuick(submitData)

        uni.hideLoading()
        uni.showToast({
          title: '工单提交成功',
          icon: 'success',
          duration: 1500
        })

        // 延迟跳转（等待提示框显示完成）
        setTimeout(() => {
          uni.redirectTo({
            url: '/pages-sub/daily/quick-order/index'
          })
        }, 1500)
      } catch (error) {
        // 隐藏加载框
        uni.hideLoading()

        // 区分是表单校验失败还是接口调用失败
        if (Array.isArray(error)) {
          // 表单校验失败
          // uni.showToast({
          //   title: '表单填写不完整，请检查',
          //   icon: 'none',
          //   duration: 2000
          // })
        } 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;
}


</style>