dev-liuqi/pages-sub/daily/quick-order/add-order.vue

<template>
  <view class="page-container">
    <!-- 核心：将所有 up-form-item 包裹在同一个 up-form 内 -->
    <view class="work-order-form-content commonPageLRpadding">
      <up-form label-position="left" :model="workOrderForm" ref="workOrderFormRef" labelWidth="160rpx">
        <up-form-item label="业务线" prop="busiLine" border-bottom required>
          <up-radio-group v-model="busiLineDisplay" placement="row" @change="handleBusiLineChange">
            <up-radio v-for="item in busiLineOptions" :key="item.value" :label="item.label" :name="item.label"
            > </up-radio>
          </up-radio-group>
        </up-form-item>
        <!-- 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" readonly disabled-color="#ffffff" placeholder="请先选择工单位置"
          border="none"></up-input>
          <template #right>
            <up-icon name="arrow-right" size="16"></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.trim="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 width="70" height="70" :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 width="70" height="70" :max-count="3"
                      :sizeType="['compressed']" upload-text="选择完成照片"></up-upload>
        </up-form-item>
        <!-- 处理结果（不必填） -->
        <up-form-item label="处理结果" prop="handleResult" class="mt-20">
          <up-textarea placeholder="请输入处理结果描述（最多200字，选填）" v-model.trim="workOrderForm.handleResult" count
          maxlength="200" rows="4" @blur="() => $refs.workOrderFormRef.validateField('handleResult')"></up-textarea>
        </up-form-item>
      </up-form>
    </view>
    <!-- 底部提交按钮（移除loading和disabled属性） -->
    <view class="fixed-bottom-btn-wrap">
      <up-button type="primary" size="large" 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 lang="ts">
import { getRoadListByLatLng } from '@/api/common'
import { uploadImages } from '@/common/utils/upload';
import { createQuick } from '@/api/quick-order/quick-order'
import { useUserStore } from '@/pinia/user';
export default {
  computed: {
    busiLineOptions() {
      const userStore = useUserStore();
      return userStore.dictList || []
    }
  },
  data() {
    return {
      busiLineDisplay: '', // 单选框展示用，存中文label
      // 问题照片列表
      problemImgsList: [],
      // 完成照片列表
      completeImgsList: [],
      // 弹窗显隐控制
      showRoadName: false,
      showOrderName: false,
      // 下拉列表数据
      roadNameList: [],
      orderNameList: [],
      // 工单表单数据
      workOrderForm: {
        busiLine: '', // 业务线value yl / sz / wy
        roadId: 0,                     // 道路ID
        roadName: '',                  // 道路名称
        workLocation: '',              // 工单位置
        orderName: '',                 // 问题类型
        problemDesc: '',               // 情况描述
        handleResult: '',              // 处理结果描述（不必填）
        lat: 0,                        // 纬度
        lon: 0                         // 经度
      },
      // 表单校验规则
      workOrderFormRules: {
        busiLine: [
          { type: 'string', required: true, message: '请选择业务线', trigger: ['change', 'blur'] }
        ],
        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-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张问题照片'))
            }
          }
        ],
        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张完成照片'))
            }
          }
        ]
      }
    }
  },
  onLoad() {
    // 默认选中第一个业务线
    if (this.busiLineOptions && this.busiLineOptions.length > 0) {
      this.workOrderForm.busiLine = this.busiLineOptions[0].value;
      this.busiLineDisplay = this.busiLineOptions[0].label;
      console.log('默认选中业务线value：', this.workOrderForm.busiLine);
    }
  },
  onReady() {
    // 设置表单校验规则
    this.$refs.workOrderFormRef.setRules(this.workOrderFormRules);
    console.log('工单表单规则初始化完成');
  },
  onShow() {
    this.orderNameList = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('work_name'));
    console.log('问题类型列表：', this.orderNameList);
  },
  methods: {
    // 业务线切换事件
    handleBusiLineChange(selectedLabel) {
      // 根据选中的中文label反向找到value，存入表单
      const selectedItem = this.busiLineOptions.find(item => item.label === selectedLabel)
      if (selectedItem) {
        this.workOrderForm.busiLine = selectedItem.value;
      }
      // 清空道路信息
      this.workOrderForm.roadName = '';
      this.workOrderForm.roadId = 0;
      this.roadNameList = [];
      // 若已选择位置，重新请求对应业务线的道路列表
      if (this.workOrderForm.workLocation) {
        this.getRoadListByBusiLine();
      }
    },
    // 根据选中业务线请求道路列表
    async getRoadListByBusiLine() {
      if (!this.workOrderForm.lat || !this.workOrderForm.lon || !this.workOrderForm.busiLine) {
        return;
      }
      try {
        uni.showLoading({ title: '获取道路名称中...' });
        const roadRes = await getRoadListByLatLng({
          busiLine: this.workOrderForm.busiLine, // 直接传递value
          latitude: this.workOrderForm.lat,
          longitude: this.workOrderForm.lon
        });
        uni.hideLoading();
        if (Array.isArray(roadRes)) {
          this.roadNameList = roadRes.map((item) => ({
            name: item.roadName || '',
            code: item.roadCode || '',
            id: item.roadId || 0
          }));
        } else {
          this.roadNameList = [{ name: '未查询到道路名称', code: '', id: 0 }];
          uni.showToast({ title: '未查询到该位置的道路信息', icon: 'none' });
        }
      } catch (err) {
        uni.hideLoading();
        console.error('获取道路名称失败：', err);
        uni.showToast({ title: '获取道路名称失败，请重试', icon: 'none' });
        this.roadNameList = [{ name: '获取失败，请重新选择位置', code: '', id: 0 }];
      }
    },
    /**
     * 返回上一页
     */
    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) {
        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');
        }
      }
    },
    /**
     * 选择工单位置
     */
    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');
          // 调用封装的方法，自动携带业务线
          await that.getRoadListByBusiLine();
        },
        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');
    },
    /**
     * 隐藏键盘
     */
    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();
        if (!this.workOrderForm.busiLine) {
          uni.showToast({ title: '业务线选择异常，请重新选择', icon: 'none' });
          return;
        }
        // 根据value找到中文label
        const sourceName = this.busiLineOptions.find(item => item.value === this.workOrderForm.busiLine)?.label || '';
        const submitData = {
          roadId: this.workOrderForm.roadId,
          roadName: this.workOrderForm.roadName,
          problemsImgs: this.getImgUrlList(this.problemImgsList),
          endImgs: this.getImgUrlList(this.completeImgsList),
          remark: this.workOrderForm.problemDesc.trim(),
          handleResult: this.workOrderForm.handleResult.trim(),
          latLonType: 2,
          lat: this.workOrderForm.lat,
          lon: this.workOrderForm.lon,
          lonLatAddress: this.workOrderForm.workLocation,
          pressingType: 2,
          orderName: this.workOrderForm.orderName,
          sourceId: 1,
          sourceName: sourceName, // 业务线中文名称
          thirdWorkNo: '',
          busiLine: this.workOrderForm.busiLine // 业务线英文标识（yl/sz/wy）
        };
        // 显示加载中
        uni.showLoading({ title: '提交中...' });
        // 调用提交接口
        const res = await createQuick(submitData);
        uni.hideLoading();
        uni.showToast({
          title: '工单提交成功',
          icon: 'success',
          duration: 1000
        });
        // 延迟跳转
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages-sub/daily/quick-order/index'
          });
        }, 1000);
      } catch (error) {
        // 隐藏加载框
        uni.hideLoading();
        // 区分是表单校验失败还是接口调用失败
        if (!Array.isArray(error)) {
          // 接口调用失败
          console.error('工单提交失败：', error);
          uni.showToast({
            title: '提交失败，请重试',
            icon: 'none',
            duration: 2000
          });
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// 全局页面样式
.page-container {
  min-height: 100vh;
}
// 工单表单内容容器
.work-order-form-content {
  background: #fff;
  margin-bottom: 100rpx;
}
</style>