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="190rpx"
      >
        <!-- 1. 工单编号（从URL获取展示） -->
        <up-form-item
            label="工单编号"
            border-bottom
        >
          <up-input
              v-model="workOrderForm.orderNo"
              border="none"
              readonly
              placeholder="暂无工单编号"
          ></up-input>
        </up-form-item>

        <!-- 2. 养护员选择（必选，下拉框） -->
        <up-form-item
            label="养护员"
            prop="assigneeName"
            border-bottom
            required
            @click="handleActionSheetOpen('assignee'); hideKeyboard()"
        >
          <up-input
              v-model="workOrderForm.assigneeName"
              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="reason"
        >
          <up-textarea
              placeholder="请输入处理意见（可选，最多200字）"
              v-model.trim="workOrderForm.reason"
              count
              maxlength="200"
              rows="4"
          ></up-textarea>
        </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>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad, onReady, onShow } from '@dcloudio/uni-app';
import { getYlWorkersPage, universalApproval } from '@/api/work-order-manage/work-order-manage'
import { nextStepMap } from '@/common/utils/common'
import { useUserStore } from '@/pinia/user';
const userStore = useUserStore();
// ========== 表单Ref ==========
const workOrderFormRef = ref(null)
// ========== 页面状态 ==========
const showActionSheet = ref(false)
const currentActionSheetData = reactive({
  type: '',
  list: [],
  title: ''
})
// ========== 下拉列表数据 ==========
const assigneeList = ref([]) // 养护员列表
// ========== 工单表单数据（仅保留所需字段） ==========
const workOrderForm = reactive({
  taskId:'',
  orderNo: '',        // 工单编号（对应接口参数id）
  assigneeId: '',     // 养护员ID（对应接口参数nextAssignee）
  assigneeName: '',   // 养护员名称（显示用）
  reason: ''          // 处理意见（对应接口参数reason）
})
// ========== 表单校验规则（仅保留养护员必选校验） ==========
const workOrderFormRules = reactive({
  assigneeName: [
    {type: 'string', required: true, message: '请选择养护员', trigger: ['change']}
  ],
  reason: [
    {type: 'string', max: 200, message: '处理意见最多200字', trigger: ['change', 'blur']}
  ]
})
// ========== 生命周期 ==========
// onLoad - 获取URL中的工单编号
onLoad((options) => {
  // 从URL参数中获取工单编号（参数名orderNo可根据实际修改）
  if (options && options.orderNo) {
    workOrderForm.orderNo = options.orderNo
    workOrderForm.taskId = options.taskId

  }
  console.log('从URL获取工单编号：', workOrderForm.orderNo)
})
onReady(() => {
  // 设置表单校验规则
  if (workOrderFormRef.value) {
    workOrderFormRef.value.setRules(workOrderFormRules)
  }
})
onShow(() => {
  // 加载养护员列表
  loadAssigneeList()
})
// ========== 加载养护员列表 ==========
const loadAssigneeList = async () => {
  try {
    uni.showLoading({title: '获取养护员中...'})
    // 调用getYlWorkersPage接口（可根据接口要求传递参数，此处默认空对象）
    console.log(userStore.userInfo.user.busiLine)
    let queryData = {
      // roleCode:userStore.userInfo.roles,
      roleCode: 'yl_worker',
      busiLine: 'yl',
      // busiLine: userStore.userInfo.user.busiLine,
      pageNo: 1,
      pageSize: 100
    }
    const res = await getYlWorkersPage(queryData)
    uni.hideLoading()
    if (res.list.length > 0) {
      assigneeList.value = res.list.map(item => ({
        name: item.nickname,
        value: item.id,
        id: item.id
      }))
      console.log(currentActionSheetData.list)
    } else {
      uni.showToast({title: '所在班组暂无养护员,请先配置养护员', icon: 'none'})
    }
    console.log(currentActionSheetData.list)
  } catch (err) {
    uni.hideLoading()
    console.error('获取养护员列表失败：', err)
    uni.showToast({title: '获取养护员失败，请重试', icon: 'none'})
    assigneeList.value = []
  }
}
// ========== 方法定义 ==========
/**
 * 打开养护员下拉弹窗
 */
const handleActionSheetOpen = (type) => {
  // 判断养护员列表是否为空
  if (type === 'assignee' && assigneeList.value.length === 0) {
    uni.showToast({title: '暂无养护员数据可选', icon: 'none'})
    return
  }
  // 配置弹窗参数
  const configMap = {
    assignee: {
      title: '请选择养护员',
      list: assigneeList.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
  if (type === 'assignee') {
    workOrderForm.assigneeName = e.name
    workOrderForm.assigneeId = e.value // 绑定养护员ID
    workOrderFormRef.value?.validateField('assigneeName')
  }
  showActionSheet.value = false
}
/**
 * 隐藏键盘
 */
const hideKeyboard = () => {
  uni.hideKeyboard()
}
/**
 * 提交数据（使用ylTeamLeaderAssignWOrder接口，传递指定参数）
 */
const submitWorkOrder = async () => {
  try {
    // 1. 表单校验（先校验养护员必选项）
    await workOrderFormRef.value.validate()
    // 2. 校验工单编号是否存在（避免无工单编号提交）
    if (!workOrderForm.orderNo) {
      uni.showToast({title: '工单编号不能为空', icon: 'none'})
      return
    }
    // 3. 构造接口所需参数
    const submitData = {
      operateType: nextStepMap['ylTeamLeader'].operateTypePass,
      taskKey:'ylTeamLeader',
      agree:0,
      taskId: workOrderForm.taskId,        // 工单编码（对应接口参数id）
      reason: workOrderForm.reason.trim(), // 处理建议（对应接口参数reason）
      nextAssignee: workOrderForm.assigneeId // 养护员ID（对应接口参数nextAssignee）
    }
    console.log('提交参数：', submitData)
    // 4. 显示加载提示
    uni.showLoading({title: '提交中...'})
    // 5. 调用指定接口 ylTeamLeaderAssignWOrder
    const res = await universalApproval(submitData)
    // 6. 隐藏加载提示并给出成功反馈
    uni.hideLoading()
    uni.showToast({
      title: '提交成功',
      icon: 'success',
      duration: 1000
    })
    // 7. 提交成功后返回上一页
    setTimeout(() => {
      uni.navigateTo({
        url: `/pages-sub/problem/work-order-manage/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 {

}

// 表单内容容器
.work-order-form-content {
  background: #fff;
  margin-top: 10rpx;
}


</style>