JCSS / jcss-miniprogram

<template>
  <view class="page-container">
    <view class="work-order-form-content commonPageLRpadding">
      <up-form
          label-position="left"
          :model="workOrderForm"
          ref="workOrderFormRef"
          labelWidth="200rpx"
      >
        <!-- 业务线单选框：移入form内，作为第一个表单项（核心调整） -->
        <up-form-item
            label="业务线"
            prop="busiLineCn"
            border-bottom
            required
        >
            <up-radio-group
                v-model="workOrderForm.busiLineCn"
                placement="row"
                @change="handleBusiLineChange"
            >
              <up-radio

                  v-for="item in busiLineOptions"
                  :key="item.name"
                  :label="item.name"
                  :name="item.name"
              ></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="handleActionSheetOpen('roadName'); hideKeyboard()"
        >
          <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="handleActionSheetOpen('orderName'); 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="pressingTypeName"
            border-bottom
            required
            @click="handleActionSheetOpen('pressingType'); 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.trim="workOrderForm.problemDesc"
              count
              maxlength="200"
              rows="4"
              @blur="() => workOrderFormRef.validateField('problemDesc')"
          ></up-textarea>
        </up-form-item>

        <!-- 问题照片（核心修复：绑定纯数组） -->
        <up-form-item label="问题照片" prop="problemImgs" border-bottom required>
          <up-upload
              :file-list="problemImgs.imgList.value||[]"
              @after-read="problemImgs.uploadImgs"
              @delete="problemImgs.deleteImg"
              multiple
              :width="70"
              :height="70"
              :max-count="problemImgs.uploadConfig.maxCount"
              :upload-text="problemImgs.uploadConfig.uploadText"
              :size-type="problemImgs.uploadConfig.sizeType"
          ></up-upload>
        </up-form-item>

        <!-- 完成时间 -->
        <up-form-item
            label="希望完成时间"
            prop="expectedFinishDate"
            @click="show=true;hideKeyboard()"
        >
          <up-input
              v-model="workOrderForm.expectedFinishDate"
              border="none"
              readonly
              placeholder="点击选择时间"
          ></up-input>
          <template #right>
            <!-- 核心修复：用view包裹图标，添加双重@click.stop -->
            <view v-if="workOrderForm.expectedFinishDate" @click.stop>
              <up-icon
                  name="close"
                  size="16"
                  @click.stop="clearExpectedFinishDate"
              ></up-icon>
            </view>
            <up-icon name="arrow-right" size="16" v-else></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="showActionSheet"
        :actions="currentActionSheetData.list"
        :title="currentActionSheetData.title"
        @close="handleActionSheetClose"
        @select="handleActionSheetSelect"
    ></up-action-sheet>

    <!-- 完成时间选择器 -->
    <up-datetime-picker
        :show="show"
        v-model="expectedFinishDate"
        mode="datetime"
        :min-date="new Date()"
        @cancel="show = false"
        @confirm="expectedFinishDateConfirm"
    ></up-datetime-picker>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onReady, onShow, onLoad } from '@dcloudio/uni-app';
import { useUploadImgs } from '@/common/utils/useUploadImgs'
import { getRoadListByLatLng } from '@/api/common'
import { universalApproval, workorderCreate } from '@/api/work-order-manage/work-order-manage'
import { timeFormat } from '@/uni_modules/uview-plus'
import { nextStepMap } from '@/common/utils/common'
import { useUserStore } from '@/pinia/user';

// ========== 状态管理 ==========
const userStore = useUserStore();

// ========== 业务线相关状态（核心改造：已整合到workOrderForm中，删除冗余selectedBusiLine） ==========
// 业务线映射表（键：英文标识，值：中文名称；新增反向映射：中文->英文）
const busiLineMap = ref({
  'yl': '园林',
  'sz': '市政',
  'wy': '物业',
  // 反向映射：用于通过中文名称（workOrderForm.busiLineCn）获取对应的英文标识
  '园林': 'yl',
  '市政': 'sz',
  '物业': 'wy'
});

// 业务线选项列表（仅保留name字段=中文名称，适配单选框配置）
const busiLineOptions = ref([]);
// 格式化业务线选项（兼容1个/2个/3个的情况，生成中文名称列表）
const formatBusiLineOptions = () => {
  if (!userStore.userInfo?.user?.busiLine) {
    busiLineOptions.value = [];
    return;
  }
  const rawBusiLines = userStore.userInfo.user.busiLine.split(','); // 拆分字符串为数组 ["yl", "sz", "wy"]
  console.log(rawBusiLines)
  // 核心改造：仅生成name字段（值为中文名称），适配单选框:label="item.name"
  busiLineOptions.value = rawBusiLines.map(item => ({
    name: busiLineMap.value[item.trim()] // name=中文名称（园林/市政/物业）
  }));
  console.log(busiLineOptions.value)
};

// ========== 工具方法：通过中文名称获取对应的英文标识 ==========
const getBusiLineEnByCn = (cnName) => {
  return busiLineMap.value[cnName] || '';
};

// ========== 表单Ref ==========
const workOrderFormRef = ref(null)

// ========== 公共上传逻辑复用 ==========
const problemImgs = useUploadImgs({
  maxCount: 3,
  uploadText: '选择问题照片',
  sizeType: ['compressed'],
  formRef: workOrderFormRef,
  fieldName: 'problemImgs'
})

// 无需再手动初始化普通数组，直接使用 ref 响应式数据
if (!Array.isArray(problemImgs.rawImgList.value)) {
  problemImgs.rawImgList.value = [];
}

// ========== 页面状态 ==========
// 通用弹窗控制
const showActionSheet = ref(false)
// 当前弹窗配置
const currentActionSheetData = reactive({
  type: '',
  list: [],
  title: ''
})
// 完成时间选择器控制
const show = ref(false)
const expectedFinishDate = ref(Date.now())

// ========== 重新提交相关状态（核心：本地存储读取） ==========
const isRenew = ref(false); // 是否为重新提交状态
const renewOrderData = ref(null); // 重新提交的原有工单数据

// ========== 下拉列表数据 ==========
const roadNameList = ref([])
const orderNameList = ref([])
const pressingTypeList = ref([])

// ========== 工单表单数据（核心调整：新增busiLineCn字段，绑定业务线） ==========
const workOrderForm = reactive({
  busiLineCn: '', // 新增：业务线中文名称（用于form绑定、校验、回显）
  roadId: 0,                     // 原有字段
  roadName: '',                  // 原有字段
  workLocation: '',              // 原有字段
  orderName: '',                 // 原有字段
  pressingType: '',              // 原有字段
  pressingTypeName: '',          // 原有字段
  problemDesc: '',               // 原有字段
  lat: 0,                        // 原有字段
  lon: 0,                        // 原有字段
  expectedFinishDate: '',        // 原有字段
})

// ========== 表单校验规则（核心调整：新增busiLineCn校验规则） ==========
const workOrderFormRules = reactive({
  busiLineCn: [ // 新增：业务线必选校验
    { 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'] }
  ],
  pressingTypeName: [
    { 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: [problemImgs.imgValidateRule] // 复用上传校验规则
})

// ========== 生命周期 ==========
// 页面加载：读取本地存储的工单数据（适配workOrderForm.busiLineCn）
onLoad((options) => {
  // 初始化业务线选项
  formatBusiLineOptions();
  // 默认选中第一个业务线（赋值给workOrderForm.busiLineCn，核心调整）
  if (busiLineOptions.value.length > 0) {
    workOrderForm.busiLineCn = busiLineOptions.value[0].name;
  }

  // 判断是否为重新提交状态
  console.log(options)
  if (options.isRenew == 1 && options.tempKey) {
    isRenew.value = true;
    const tempKey = options.tempKey;

    // 1. 从本地同步存储中读取完整工单数据
    try {
      const orderData = uni.getStorageSync(tempKey);
      if (orderData && typeof orderData === 'object') {
        renewOrderData.value = orderData;

        console.log('123213')
        console.log(orderData)
        // 2. 回显工单数据到表单
        echoOrderData(renewOrderData.value);
      } else {
        uni.showToast({ title: '工单数据不存在，无法重新提交', icon: 'none' });
        // 跳转回列表页
        setTimeout(() => uni.navigateBack(), 1000);
        return;
      }
    } catch (error) {
      console.error('读取工单数据失败：', error);
      uni.showToast({ title: '数据读取异常，无法重新提交', icon: 'none' });
      setTimeout(() => uni.navigateBack(), 1000);
      return;
    } finally {
      // 3. 关键：用完即删，避免本地冗余存储和数据泄露
      uni.removeStorageSync(tempKey);
    }
  }
});

onReady(() => {
  // 设置表单校验规则
  if (workOrderFormRef.value) {
    workOrderFormRef.value.setRules(workOrderFormRules)
  }
  console.log('工单表单规则初始化完成')
})

onShow(() => {
  console.log(uni.$dict.getDictLabel('ai_image_status', 20))
  console.log(uni.$dict.getDictSimpleList('work_name'))

  // 初始化工单名称列表
  orderNameList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('work_name'))
  console.log('工单名称列表：', orderNameList.value)

  // 初始化紧急程度列表
  pressingTypeList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('workorder_pressing_type'))
  console.log('紧急程度列表：', pressingTypeList.value)
})

// ========== 核心方法：工单数据回显（适配workOrderForm.busiLineCn） ==========
const echoOrderData = (orderItem) => {
  // 1. 回显业务线：将工单的英文busiLine转为中文名称，赋值给workOrderForm.busiLineCn（核心调整）
  if (orderItem.busiLine) {
    workOrderForm.busiLineCn = busiLineMap.value[orderItem.busiLine]; // 英文->中文（如wy->物业）
  }

  // 2. 原有基础表单字段回显
  workOrderForm.roadId = orderItem.roadId || 0;
  workOrderForm.roadName = orderItem.roadName || '';
  workOrderForm.workLocation = orderItem.lonLatAddress || orderItem.roadName || '';
  workOrderForm.orderName = orderItem.orderName || '';
  workOrderForm.pressingType = orderItem.pressingType || '';
  workOrderForm.pressingTypeName = uni.$dict.getDictLabel('workorder_pressing_type', orderItem.pressingType) || '';
  workOrderForm.problemDesc = orderItem.remark || '';
  workOrderForm.lat = orderItem.lat || 0;
  workOrderForm.lon = orderItem.lon || 0;
  workOrderForm.expectedFinishDate =  timeFormat(orderItem.expectedFinishDate, 'yyyy-mm-dd hh:MM:ss')  || timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss');

  // 3. 上传图片回显（兼容useUploadImgs格式）
  if (orderItem.problemsImgs && Array.isArray(orderItem.problemsImgs) && orderItem.problemsImgs.length > 0) {
    const imgList = orderItem.problemsImgs.map((imgUrl, index) => ({
      url: imgUrl,
      name: `renew_img_${index}`,
      status: 'success' // 标记为已上传状态
    }));
    problemImgs.imgList.value = imgList;
    problemImgs.rawImgList.value = imgList;
  }

  // 4. 自动获取道路列表（修改：传递当前选中的业务线英文标识）
  if (orderItem.lat && orderItem.lon) {
    getRoadListByBusiLine(); // 改用封装后的方法，自动携带选中的业务线
  }
};

// ========== 业务线相关方法（适配workOrderForm.busiLineCn） ==========
/**
 * 业务线切换事件：清空道路信息 + 重新请求道路列表
 */
const handleBusiLineChange = () => {
  // 1. 清空已渲染的道路名称和表单字段
  workOrderForm.roadName = '';
  workOrderForm.roadId = 0;
  // 2. 清空道路名称列表数据
  roadNameList.value = [];
  // 3. 若已选择工单位置，重新请求对应业务线的道路列表
  if (workOrderForm.workLocation) {
    getRoadListByBusiLine();
  }
};

/**
 * 封装：根据当前选中业务线（中文）获取英文标识，再请求道路列表
 */
const getRoadListByBusiLine = async () => {
  if (!workOrderForm.lat || !workOrderForm.lon) {
    return;
  }
  // 核心：从workOrderForm.busiLineCn获取中文名称，转为英文标识（核心调整）
  const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn);
  if (!busiLineEn) {
    uni.showToast({ title: '业务线标识异常', icon: 'none' });
    return;
  }

  try {
    uni.showLoading({ title: '获取道路名称中...' });
    const roadRes = await getRoadListByLatLng({
      busiLine: busiLineEn, // 传递英文标识（yl/sz/wy），接口正常使用
      // companyCode: 'sls', // 传递英文标识（yl/sz/wy），接口正常使用
      latitude: workOrderForm.lat,
      longitude: workOrderForm.lon
    });
    uni.hideLoading();
    if (Array.isArray(roadRes)) {
      roadNameList.value = roadRes.map((item) => ({
        name: item.roadName || '',
        code: item.roadCode || '',
        id: item.roadId || 0
      }));
    } else {
      roadNameList.value = [{ name: '未查询到道路名称', code: '', id: 0 }];
      uni.showToast({ title: '未查询到该位置的道路信息', icon: 'none' });
    }
  } catch (err) {
    uni.hideLoading();
    console.error('获取道路名称失败：', err);
    uni.showToast({ title: '获取道路名称失败，请重试', icon: 'none' });
    roadNameList.value = [{ name: '获取失败，请重新选择位置', code: '', id: 0 }];
  }
};

// ========== 通用弹窗方法 ==========
/**
 * 打开通用下拉弹窗
 */
const handleActionSheetOpen = (type) => {
  // 道路名称需先校验工单位置是否选择
  if (type === 'roadName' && !workOrderForm.workLocation) {
    uni.showToast({ title: '请先选择工单位置', icon: 'none' })
    return
  }

  // 配置当前弹窗参数
  const configMap = {
    roadName: {
      title: '请选择道路名称',
      list: roadNameList.value
    },
    orderName: {
      title: '请选择工单名称',
      list: orderNameList.value
    },
    pressingType: {
      title: '请选择紧急程度',
      list: pressingTypeList.value
    }
  }

  currentActionSheetData.type = type
  currentActionSheetData.title = configMap[type].title
  currentActionSheetData.list = configMap[type].list
  showActionSheet.value = true
}

/**
 * 关闭通用下拉弹窗
 */
const handleActionSheetClose = () => {
  showActionSheet.value = false
  // 重置当前弹窗配置
  currentActionSheetData.type = ''
  currentActionSheetData.list = []
  currentActionSheetData.title = ''
}

/**
 * 通用下拉弹窗选择事件
 */
const handleActionSheetSelect = (e) => {
  const { type } = currentActionSheetData
  // 根据类型处理不同的选择逻辑
  switch (type) {
    case 'roadName':
      workOrderForm.roadName = e.name
      workOrderForm.roadId = e.code
      workOrderFormRef.value?.validateField('roadName')
      break
    case 'orderName':
      workOrderForm.orderName = e.name
      workOrderFormRef.value?.validateField('orderName')
      break
    case 'pressingType':
      console.log(e)
      workOrderForm.pressingType = e.value
      workOrderForm.pressingTypeName = e.name
      workOrderFormRef.value?.validateField('pressingTypeName')
      break
  }
  // 关闭弹窗
  showActionSheet.value = false
}

/**
 * 返回上一页
 */
const navigateBack = () => {
  uni.reLaunch({
    url: '/pages-sub/problem/work-order-manage/index', // 列表页路径
    fail: () => {
      // 兜底：若 reLaunch 失败，返回2层（跳过提交页）
      uni.navigateBack({ delta: 2 });
    }
  });
}

// 新增：清除希望完成时间的方法
const clearExpectedFinishDate = ()=> {
  workOrderForm.expectedFinishDate = ''
  // 清除后触发一次字段校验，确保校验状态更新
  // this.$refs.inspectFormRef.validateField('expectedFinishDate')
}

/**
 * 选择工单位置
 */
const chooseWorkLocation = () => {
  uni.chooseLocation({
    success: async (res) => {
      workOrderForm.roadName = ''
      workOrderForm.roadId = 0
      roadNameList.value = []

      workOrderForm.workLocation = res.name
      workOrderForm.lat = res.latitude
      workOrderForm.lon = res.longitude

      workOrderFormRef.value?.validateField('workLocation')
      workOrderFormRef.value?.validateField('roadName')

      // 改用封装后的方法，自动携带选中的业务线英文标识
      await getRoadListByBusiLine();
    },
    fail: (err) => {
      console.error('选择位置失败：', err)
      uni.showToast({ title: '选择位置失败：' + err.errMsg, icon: 'none' })
    }
  })
}

/**
 * 完成时间确认
 */
const expectedFinishDateConfirm = (e) => {
  console.log('选择的完成时间：', e)
  workOrderForm.expectedFinishDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
  show.value = false
}

/**
 * 隐藏键盘
 */
const hideKeyboard = () => {
  uni.hideKeyboard()
}

/**
 * 提交工单（区分新增/重新提交，接口隔离：从workOrderForm.busiLineCn取值）
 */
const submitWorkOrder = async () => {
  try {
    // 先执行表单校验（包含业务线校验）
    await workOrderFormRef.value.validate()

    // 核心：从workOrderForm.busiLineCn获取中文名称，转为英文标识（核心调整）
    const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn);
    if (!busiLineEn) {
      uni.showToast({ title: '业务线选择异常，请重新选择', icon: 'none' });
      return;
    }

    // 构建公共提交数据
    const commonSubmitData = {
      roadId: workOrderForm.roadId,
      roadName: workOrderForm.roadName,
      problemsImgs: problemImgs.getSuccessImgUrls(), // 复用上传逻辑的URL获取方法
      remark: workOrderForm.problemDesc.trim(),
      latLonType: 2,
      lat: workOrderForm.lat,
      lon: workOrderForm.lon,
      lonLatAddress: workOrderForm.workLocation,
      pressingType: workOrderForm.pressingType,
      orderName: workOrderForm.orderName,
      expectedFinishDate: new Date(workOrderForm.expectedFinishDate).getTime(),
      sourceId: 1,
      sourceName: workOrderForm.busiLineCn, // 从form字段获取业务线中文名称
      busiLine: busiLineEn // 传递英文标识（yl/sz/wy），接口正常使用
    }

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

    // 核心：根据状态区分接口调用
    if (isRenew.value) {
      // 重新提交：调用 universalApproval 接口
      const renewSubmitData = {
        // 原有工单必要参数
        workerDataId: renewOrderData.value.id,
        taskKey: renewOrderData.value.taskKey,
        taskId: renewOrderData.value.taskId,
        operateType: nextStepMap[renewOrderData.value.taskKey]?.operateTypeRenew || '',
        agree: 0,
        reason: '重新提交工单',
        // 新编辑的工单数据
        ...commonSubmitData
      }
      res = await universalApproval(renewSubmitData)
    } else {
      // 新增工单：调用原有 workorderCreate 接口（不影响原有功能）
      res = await workorderCreate(commonSubmitData)
    }

    uni.hideLoading()
    uni.showToast({
      title: isRenew.value ? '重新提交成功' : '工单提交成功',
      icon: 'success',
      duration: 1000
    })

    // 延迟跳转回列表页
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages-sub/problem/work-order-manage/index'
      })
    }, 1000)
  } catch (error) {
    // 隐藏加载框
    uni.hideLoading()

    // 区分是表单校验失败还是接口调用失败
    if (!Array.isArray(error)) {
      // 接口调用失败
      console.error(isRenew.value ? '工单重新提交失败：' : '工单提交失败：', error)
      uni.showToast({
        title: isRenew.value ? error.msg : error.msg,
        icon: 'none',
        duration: 2000
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 全局页面样式
.page-container {
  min-height: 100vh;
  padding-bottom: 100rpx; // 给底部按钮留空间
}


// 工单表单内容容器
.work-order-form-content {
  background: #fff;
}

</style>