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"
      >
        <!-- 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="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>

        <!-- 3. 情况描述（文本域） -->
        <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>

        <!-- 4. 问题照片 -->
        <up-form-item label="问题照片" prop="problemImgs" 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>

        <!-- 派单情况分组 -->
        <view class="dispatch-group">
          <view class="dispatch-title">派单情况</view>
          <!-- 业务线单选框 -->
          <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>

          <!-- 道路名称（下拉框） -->
          <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>

          <!-- 紧急程度选择 -->
          <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>
        </view>

        <!-- 5. 完成时间 -->
        <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="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, nextTick } from 'vue'
import { onReady, onShow, onLoad, onBackPress } from '@dcloudio/uni-app';
import { useUploadImgs } from '@/common/utils/useUploadImgs'
import { getRoadListByLatLng } from '@/api/common'
import {
  daquUniversalApproval, qyUniversalApproval, qyWorkorderCreate,
  dcyUniversalApproval, daquWorkorderCreate, dcyWorkorderCreate
} from '@/api/regional-order-manage/regional-order-manage'
import { timeFormat } from '@/uni_modules/uview-plus'
import { nextStepMap } from '@/common/utils/common'
import { useUserStore } from '@/pinia/user';

// ========== 【常量配置区】- 硬编码集中管理，便于维护 ==========
const CONST = {
  // 字典编码
  DICT_ORDER_NAME: 'work_name',
  DICT_PRESSING_TYPE: 'workorder_pressing_type',
  // 上传配置
  UPLOAD_CONFIG: { maxCount: 3, uploadText: '选择问题照片', sizeType: ['compressed'] },
  // 路由地址
  PAGE_ORDER_LIST: '/pages-sub/problem/regional-order-manage/index',
  // 业务线映射
  BUSI_LINE_MAP: { yl: '园林', sz: '市政', wy: '物业', '园林': 'yl', '市政': 'sz', '物业': 'wy' },
  // 角色标识
  ROLE: { MANAGER: 'regional_manager', INSPECTOR: 'Inspector_global', PATROL: 'patrol_global' }
}

// ========== 【全局实例 & 基础状态】 ==========
const userStore = useUserStore();
const USER_ROLES = userStore.userInfo?.roles || [];
const workOrderFormRef = ref(null);
const showActionSheet = ref(false);
const show = ref(false);
const expectedFinishDate = ref(Date.now());
const isRenew = ref(false);
const renewOrderData = ref(null);

// ========== 【下拉弹窗数据】 ==========
const currentActionSheetData = reactive({ type: '', list: [], title: '' });
const roadNameList = ref([]);
const orderNameList = ref([]);
const pressingTypeList = ref([]);
const busiLineOptions = ref([]);

// ========== 【上传逻辑复用】 ==========
const problemImgs = useUploadImgs({
  ...CONST.UPLOAD_CONFIG,
  formRef: workOrderFormRef,
  fieldName: 'problemImgs'
})
// 图片数组兜底，防止非数组报错
if (!Array.isArray(problemImgs.rawImgList.value)) problemImgs.rawImgList.value = [];

// ========== 【工单表单数据】 ==========
const workOrderForm = reactive({
  busiLineCn: '', roadId: 0, roadName: '', workLocation: '',
  orderName: '', pressingType: '', pressingTypeName: '',
  problemDesc: '', lat: 0, lon: 0, expectedFinishDate: ''
})

// ========== 【表单校验规则】 ==========
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]
})

// ========== 【工具方法封装】- 抽离通用逻辑，消灭重复代码 ==========
/**
 * 业务线中文转英文
 */
const busiLineCnToEn = (cn) => CONST.BUSI_LINE_MAP[cn] || '';
/**
 * 业务线英文转中文
 */
const busiLineEnToCn = (en) => CONST.BUSI_LINE_MAP[en] || '';
/**
 * 统一跳转返回工单列表页
 */
const toOrderListPage = () => uni.reLaunch({ url: CONST.PAGE_ORDER_LIST });
/**
 * 格式化时间戳 - 增加空值兜底
 */
const formatDate = (dateVal, fmt = 'yyyy-mm-dd hh:MM:ss') => dateVal ? timeFormat(dateVal, fmt) : '';
/**
 * 时间转时间戳 - 增加空值兜底
 */
const dateToTimestamp = (dateStr) => dateStr ? new Date(dateStr).getTime() : '';

// ========== 【生命周期】 ==========
onLoad((options) => {
  // 初始化工单线选项
  initBusiLineOptions();
  // 默认选中第一个业务线
  workOrderForm.busiLineCn = busiLineOptions.value[0]?.name || '';
  // 处理重新提交逻辑
  if (options.isRenew == 1 && options.tempKey) handleRenewOptions(options.tempKey);
});

onReady(() => {
  // 修复bug：nextTick确保表单ref一定挂载完成，再设置规则
  nextTick(() => {
    workOrderFormRef.value?.setRules(workOrderFormRules);
  });
});

onShow(() => {
  // 初始化下拉字典数据
  orderNameList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList(CONST.DICT_ORDER_NAME));
  pressingTypeList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList(CONST.DICT_PRESSING_TYPE));
});

// ========== 【核心业务方法】 ==========
/**
 * 初始化工单线选项
 */
const initBusiLineOptions = () => {
  const rawBusiLines = userStore.userInfo?.user?.busiLine?.split(',') || [];
  busiLineOptions.value = rawBusiLines.map(item => ({ name: busiLineEnToCn(item.trim()) }));
};

/**
 * 处理重新提交的参数和数据回显
 */
const handleRenewOptions = async (tempKey) => {
  isRenew.value = true;
  try {
    const orderData = uni.getStorageSync(tempKey);
    if (orderData && typeof orderData === 'object') {
      renewOrderData.value = orderData;
      echoOrderData(orderData);
    } else {
      uni.showToast({ title: '工单数据不存在，无法重新提交', icon: 'none' });
      setTimeout(toOrderListPage, 1000);
    }
  } catch (error) {
    console.error('读取工单数据失败：', error);
    uni.showToast({ title: '数据读取异常，无法重新提交', icon: 'none' });
    setTimeout(toOrderListPage, 1000);
  } finally {
    uni.removeStorageSync(tempKey);
  }
};

/**
 * 工单数据回显
 */
const echoOrderData = (orderItem) => {
  // 基础字段回显
  console.log(orderItem)
  console.log('123')
  workOrderForm.busiLineCn = busiLineEnToCn(orderItem.busiLine);
  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(CONST.DICT_PRESSING_TYPE, orderItem.pressingType) || '';
  workOrderForm.problemDesc = orderItem.remark || '';
  workOrderForm.lat = orderItem.lat || 0;
  workOrderForm.lon = orderItem.lon || 0;
  workOrderForm.expectedFinishDate = orderItem.expectedFinishDate?"":formatDate(orderItem.expectedFinishDate);

  // 图片回显 - 兼容异常格式
  if (Array.isArray(orderItem.problemsImgs) && orderItem.problemsImgs.length) {
    const imgList = orderItem.problemsImgs.map((url, idx) => ({ url, name: `renew_img_${idx}`, status: 'success' }));
    problemImgs.imgList.value = imgList;
    problemImgs.rawImgList.value = imgList;
  }

  // 自动获取道路列表
  if (orderItem.lat && orderItem.lon) getRoadListByBusiLine();
};

/**
 * 业务线切换事件
 */
const handleBusiLineChange = () => {
  workOrderForm.roadName = '';
  workOrderForm.roadId = 0;
  roadNameList.value = [];
  workOrderForm.workLocation && getRoadListByBusiLine();
};

/**
 * 根据坐标+业务线获取道路列表
 */
const getRoadListByBusiLine = async () => {
  if (!workOrderForm.lat || !workOrderForm.lon) return;
  const busiLineEn = busiLineCnToEn(workOrderForm.busiLineCn);
  if (!busiLineEn) return uni.showToast({ title: '业务线选择异常', icon: 'none' });

  try {
    uni.showLoading({ title: '获取道路名称中...' });
    const roadRes = await getRoadListByLatLng({ busiLine: busiLineEn, latitude: workOrderForm.lat, longitude: workOrderForm.lon });
    console.log(roadRes)
    roadNameList.value = Array.isArray(roadRes)
        ? roadRes.map(item => ({ name: item.roadName || '', code: item.roadCode || '', id: item.roadId || 0 }))
        : [{ name: '未查询到道路名称', code: '', id: 0 }];
    console.log(roadNameList)
    !Array.isArray(roadRes) && uni.showToast({ title: '未查询到该位置的道路信息', icon: 'none' });
  } catch (err) {
    console.error('获取道路名称失败：', err);
    roadNameList.value = [{ name: '获取失败，请重新选择位置', code: '', id: 0 }];
    uni.showToast({ title: '获取道路名称失败，请重试', icon: 'none' });
  } finally {
    uni.hideLoading();
  }
};

// ========== 【通用下拉弹窗方法】 ==========
const handleActionSheetOpen = (type) => {
  if (type === 'roadName' && !workOrderForm.workLocation) {
    return uni.showToast({ title: '请先选择工单位置', icon: 'none' });
  }
  const configMap = {
    roadName: { title: '请选择道路名称', list: roadNameList.value },
    orderName: { title: '请选择工单名称', list: orderNameList.value },
    pressingType: { title: '请选择紧急程度', list: pressingTypeList.value }
  };
  Object.assign(currentActionSheetData, configMap[type], { type });
  showActionSheet.value = true;
};

const handleActionSheetClose = () => {
  showActionSheet.value = false;
  Object.assign(currentActionSheetData, { type: '', list: [], title: '' });
};

const handleActionSheetSelect = (e) => {
  const { type } = currentActionSheetData;
  switch (type) {
    case 'roadName':
      workOrderForm.roadName = e.name;
      workOrderForm.roadId = e.code;
      break;
    case 'orderName':
      workOrderForm.orderName = e.name;
      break;
    case 'pressingType':
      workOrderForm.pressingType = e.value;
      workOrderForm.pressingTypeName = e.name;
      break;
  }
  workOrderFormRef.value?.validateField(type === 'roadName' ? 'roadName' : type === 'orderName' ? 'orderName' : 'pressingTypeName');
  handleActionSheetClose();
};

// ========== 【页面交互方法】 ==========
/** 清除希望完成时间 */
const clearExpectedFinishDate = () => workOrderForm.expectedFinishDate = '';
/** 隐藏软键盘 */
const hideKeyboard = () => uni.hideKeyboard();
/** 时间选择确认 */
const expectedFinishDateConfirm = (e) => {
  workOrderForm.expectedFinishDate = formatDate(e.value);
  show.value = false;
};

/** 选择工单位置 */
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', 'roadName']);
      await getRoadListByBusiLine();
    },
    fail: (err) => {
      console.error('选择位置失败：', err);
      const errMsg = err.errMsg.includes('auth deny') ? '请开启位置权限后重试' : '选择位置失败，请重试';
      uni.showToast({ title: errMsg, icon: 'none' });
    }
  })
};
// 新增页返回直接回列表页
onBackPress(() => {
  uni.redirectTo({
    url: '/pages-sub/problem/regional-order-manage/index'
  })
  return true;
})

// ========== 【封装：统一接口调用方法】 ==========
const callApiByRole = async (params, isRenewFlag) => {
  if (isRenewFlag) {
    if (USER_ROLES.includes(CONST.ROLE.MANAGER)) return await daquUniversalApproval(params);
    if (USER_ROLES.includes(CONST.ROLE.INSPECTOR)) return await dcyUniversalApproval(params);
    if (USER_ROLES.includes(CONST.ROLE.PATROL)) return await qyUniversalApproval(params);
  } else {
    if (USER_ROLES.includes(CONST.ROLE.MANAGER)) return await daquWorkorderCreate(params);
    if (USER_ROLES.includes(CONST.ROLE.INSPECTOR)) return await dcyWorkorderCreate(params);
    if (USER_ROLES.includes(CONST.ROLE.PATROL)) return await qyWorkorderCreate(params);
  }
};

// ========== 【核心：提交工单】 ==========
const submitWorkOrder = async () => {
  try {
    // 表单校验
    await workOrderFormRef.value.validate();
    const busiLineEn = busiLineCnToEn(workOrderForm.busiLineCn);
    if (!busiLineEn) return uni.showToast({ title: '业务线选择异常，请重新选择', icon: 'none' });

    // 组装公共提交参数
    const baseParams = {
      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,
      expectedFinishDate: dateToTimestamp(workOrderForm.expectedFinishDate),
      sourceId: 1,
      sourceName: workOrderForm.busiLineCn,
      busiLine: busiLineEn
    };

    uni.showLoading({ title: '提交中...', mask: true });
    // 区分：重新提交 / 新增工单
    const submitParams = isRenew.value
        ? {
          workerDataId: renewOrderData.value.id,
          taskKey: renewOrderData.value.taskKey,
          taskId: renewOrderData.value.taskId,
          operateType: nextStepMap[renewOrderData.value.taskKey]?.operateTypeRenew || '',
          agree: 0,
          reason: workOrderForm.problemDesc.trim(),
          ...baseParams
        }
        : baseParams;

    // 统一调用接口
    await callApiByRole(submitParams, isRenew.value);

    // 提交成功处理
    uni.showToast({ title: isRenew.value ? '重新提交成功' : '工单提交成功', icon: 'success', duration: 1000 });
    setTimeout(toOrderListPage, 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; // 给底部按钮留空间
  background: #fafafa;
}

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

// 派单情况分组样式
.dispatch-group {
  padding-top: 24rpx;
  margin-top: 8rpx;
  border-top: 1px solid #f5f5f5;

  .dispatch-title {
    font-size: 32rpx;
    font-weight: 600;
    color: $u-primary;
    margin-bottom: 20rpx;
    padding-left: 10rpx;
  }
}
</style>