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>