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">
        <!-- 业务线单选框 -->
        <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. 道路名称（下拉框action-sheet，保留不变） -->
        <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="openCascader(); 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.value?.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 v-if="workOrderForm.expectedFinishDate" @click.stop>
              <up-icon name="close" size="20" @click.stop="clearExpectedFinishDate"></up-icon>
            </view>
            <up-icon name="arrow-right" size="16" v-else></up-icon>
          </template>
        </up-form-item>
        <!-- 重点巡检区域 -->
        <up-form-item label="重点巡检区域" prop="keyInspection" border-bottom required>
          <up-radio-group v-model="workOrderForm.keyInspection" @change="groupChange">
            <up-radio
              :customStyle="{marginBottom: '8px'}"
              v-for="(item, index) in keyInspectionOptions"
              :key="index"
              :label="item.name"
              :name="item.name"
            >
            </up-radio>
          </up-radio-group>
        </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-cascader【对齐参考页面写法】 -->
    <up-cascader
      v-model:show="showCascader"
      v-model="cascaderValue"
      :data="cascaderOptions"
      title="选择问题类型"
      :auto-close="false"
      @confirm="cascaderConfirm"
    ></up-cascader>
    <!-- 完成时间选择器 -->
    <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, getProblemListByType } 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';
import { getDictLabel, getDictValue } from '@/common/utils/dict';
const userStore = useUserStore();
const BUSI_LINE_DICT_TYPE = 'business_line';
const CJK_RE = /[一-龥]/;
const busiLineOptions = ref([]);
const formatBusiLineOptions = () => {
  if (!userStore.userInfo?.user?.busiLine) {
    busiLineOptions.value = [];
    return;
  }
  const rawBusiLines = userStore.userInfo.user.busiLine.split(',');
  busiLineOptions.value = rawBusiLines.map(item => ({
    name: getBusiLineCnByEn(item.trim())
  }));
};
const keyInspectionOptions = reactive([
  { name: '否', disabled: false },
  { name: '是', disabled: false },
]);
const groupChange = (n) => {
  console.log('groupChange', n);
};
const getBusiLineCnByEn = (busiLineEn) => {
  if (!busiLineEn) return '';
  return getDictLabel(BUSI_LINE_DICT_TYPE, busiLineEn) || busiLineEn;
};
const getBusiLineEnByCn = (cnName) => {
  if (!cnName) return '';
  const code = getDictValue(BUSI_LINE_DICT_TYPE, cnName);
  if (code) return code;
  return CJK_RE.test(cnName) ? '' : cnName;
};

// ========== 级联选择器变量（和参考页面对齐） ==========
const showCascader = ref(false);
const cascaderValue = ref([]);
const cascaderOptions = ref([]);

// 打开级联弹窗
const openCascader = () => {
  console.log('312321dasd')
  const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn)
  if (!busiLineEn) {
    uni.showToast({ title: '请先选择业务线', icon: 'none' })
    return
  }
  if (!cascaderOptions.value || cascaderOptions.value.length === 0) {
    uni.showToast({ title: '正在加载问题类型，请稍等', icon: 'none' });
    loadProblemCascader(busiLineEn);
    return;
  }
  cascaderValue.value = [];
  showCascader.value = true;
};

/**
 * 级联【确认回调】，选中后点确定才赋值，和参考页面保持一致
 */
const cascaderConfirm = (selectedArr) => {
  console.log('最终选中值数组：', selectedArr);
  // 递归拼接多级label，用 / 分隔
  const getLabelByValueList = (list, valList) => {
    const labelArr = [];
    let currentList = list;
    for (const val of valList) {
      const target = currentList.find(item => item.value === val);
      if (!target) break;
      labelArr.push(target.label);
      currentList = target.children || [];
    }
    return labelArr.join('/');
  };
  const fullLabel = getLabelByValueList(cascaderOptions.value, selectedArr);
  workOrderForm.orderName = fullLabel;
  workOrderForm.orderCode = selectedArr.at(-1);
  cascaderValue.value = selectedArr;
  workOrderFormRef.value?.validateField('orderName');
};

/**
 * 加载级联树形数据
 */
const loadProblemCascader = async (parentCode) => {
  if (!parentCode) {
    cascaderOptions.value = []
    return
  }
  try {
    uni.showLoading({ title: '加载类型中...' })
    const res = await getProblemListByType({ parentCode })
    uni.hideLoading()
    cascaderOptions.value = res || []
  } catch (err) {
    uni.hideLoading()
    console.error('获取问题类型失败', err)
    uni.showToast({ title: '获取问题类型失败', icon: 'none' })
    cascaderOptions.value = []
  }
}

// 表单Ref
const workOrderFormRef = ref(null)
const problemImgs = useUploadImgs({
  maxCount: 9,
  uploadText: '选择问题照片',
  sizeType: ['compressed'],
  formRef: workOrderFormRef,
  fieldName: 'problemImgs'
})
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 pressingTypeList = ref([])

// ========== 表单数据 ==========
const workOrderForm = reactive({
  busiLineCn: '',
  roadId: 0,
  roadName: '',
  workLocation: '',
  orderName: '',
  orderCode: '',
  pressingType: '',
  pressingTypeName: '',
  problemDesc: '',
  lat: 0,
  lon: 0,
  expectedFinishDate: '',
  keyInspection: '否'
})
// 表单校验规则：prop改成 orderName，对齐参考页面
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' }
  ],
  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]
})

onLoad((options) => {
  formatBusiLineOptions();
  if (busiLineOptions.value.length > 0) {
    workOrderForm.busiLineCn = busiLineOptions.value[0].name;
    const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn)
    loadProblemCascader(busiLineEn)
  }
  console.log(options)
  if (options.isRenew == 1 && options.tempKey) {
    isRenew.value = true;
    const tempKey = options.tempKey;
    try {
      const orderData = uni.getStorageSync(tempKey);
      if (orderData && typeof orderData === 'object') {
        renewOrderData.value = orderData;
        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 {
      uni.removeStorageSync(tempKey);
    }
  }
});
onReady(() => {
  if (workOrderFormRef.value) {
    workOrderFormRef.value.setRules(workOrderFormRules)
  }
  console.log('工单表单规则初始化完成')
})
onShow(() => {
  pressingTypeList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('workorder_pressing_type'))
  console.log('紧急程度列表：', pressingTypeList.value)
})

// 回显工单数据【重点对齐参考页面的递归查找级联路径】
const echoOrderData = async (orderItem) => {
  const busiCode = orderItem.busiLine || '';
  if (busiCode) {
    workOrderForm.busiLineCn = getBusiLineCnByEn(busiCode);
  }
  workOrderForm.roadId = orderItem.roadId || 0;
  workOrderForm.roadName = orderItem.roadName || '';
  workOrderForm.workLocation = orderItem.lonLatAddress || orderItem.roadName || '';
  workOrderForm.orderName = orderItem.orderName || '';
  workOrderForm.orderCode = orderItem.orderCode || '';
  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 = orderItem.expectedFinishDate ? timeFormat(orderItem.expectedFinishDate, 'yyyy-mm-dd hh:MM:ss') : '';
  if (orderItem.keyInspection !== undefined) {
    workOrderForm.keyInspection = orderItem.keyInspection === 1 ? '是' : '否'
  }
  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;
  }

  // ========= 回显核心：加载级联树，递归找到选中路径，赋值 cascaderValue =========
  if (busiCode) {
    await loadProblemCascader(busiCode);
    const targetCode = orderItem.orderCode
    if (targetCode && cascaderOptions.value.length) {
      const findCascaderPath = (list, targetVal, path = []) => {
        for (const node of list) {
          const newPath = [...path, node.value]
          if (node.value === targetVal) {
            return newPath
          }
          if (node.children && node.children.length) {
            const res = findCascaderPath(node.children, targetVal, newPath)
            if (res) return res
          }
        }
        return null
      }
      const selectPath = findCascaderPath(cascaderOptions.value, targetCode)
      if (selectPath) {
        cascaderValue.value = selectPath
      }
    }
  }

  if (orderItem.lat && orderItem.lon) {
    getRoadListByBusiLine();
  }
};

/**
 * 业务线切换：清空道路、问题类型级联数据，重新加载级联树
 */
const handleBusiLineChange = () => {
  // 清空道路
  workOrderForm.roadName = '';
  workOrderForm.roadId = 0;
  roadNameList.value = [];
  // 清空问题类型
  workOrderForm.orderName = ''
  workOrderForm.orderCode = ''
  cascaderValue.value = []
  cascaderOptions.value = []
  const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn)
  loadProblemCascader(busiLineEn)
  if (workOrderForm.workLocation) {
    getRoadListByBusiLine();
  }
};

const getRoadListByBusiLine = async () => {
  if (!workOrderForm.lat || !workOrderForm.lon) {
    return;
  }
  const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn);
  if (!busiLineEn) {
    uni.showToast({ title: '业务线标识异常', icon: 'none' });
    return;
  }
  try {
    uni.showLoading({ title: '获取道路名称中...' });
    const roadRes = await getRoadListByLatLng({
      busiLine: busiLineEn,
      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 }];
  }
};

// 通用action-sheet方法
const handleActionSheetOpen = (type) => {
  if (type === 'roadName' && !workOrderForm.workLocation) {
    uni.showToast({ title: '请先选择工单位置', icon: 'none' })
    return
  }
  const configMap = {
    roadName: {
      title: '请选择道路名称',
      list: roadNameList.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 'pressingType':
      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: () => {
      uni.navigateBack({ delta: 2 });
    }
  });
}
const clearExpectedFinishDate = () => {
  workOrderForm.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()
}

const submitWorkOrder = async () => {
  try {
    await workOrderFormRef.value.validate()
    const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn);
    if (!busiLineEn) {
      uni.showToast({ title: '业务线选择异常，请重新选择', icon: 'none' });
      return;
    }
    const keyInspectionVal = workOrderForm.keyInspection === '是' ? 1 : 0
    const commonSubmitData = {
      roadId: workOrderForm.roadId,
      roadName: workOrderForm.roadName,
      problemsImgs: problemImgs.getSuccessImgUrls(),
      remark: workOrderForm.problemDesc.trim(),
      latLonType: 2,
      lat: workOrderForm.lat,
      lon: workOrderForm.lon,
      lonLatAddress: workOrderForm.workLocation,
      pressingType: workOrderForm.pressingType,
      orderName: workOrderForm.orderName,
      orderCode: workOrderForm.orderCode,
      keyInspection: keyInspectionVal,
      expectedFinishDate: workOrderForm.expectedFinishDate == "" ? "" : new Date(workOrderForm.expectedFinishDate).getTime(),
      sourceId: 1,
      sourceName: workOrderForm.busiLineCn,
      busiLine: busiLineEn
    }
    console.log(commonSubmitData)
    uni.showLoading({ title: '提交中...' })
    let res
    if (isRenew.value) {
      const renewSubmitData = {
        workerDataId: renewOrderData.value.id,
        taskKey: renewOrderData.value.taskKey,
        taskId: renewOrderData.value.taskId,
        operateType: nextStepMap[renewOrderData.value.taskKey]?.operateTypeRenew || '',
        agree: 0,
        reason: workOrderForm.problemDesc.trim(),
        ...commonSubmitData
      }
      res = await universalApproval(renewSubmitData)
    } else {
      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: 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>