yuto-water-h5/src/views/inspectionProblem/management.vue

<script setup lang="ts">
/**
 * 问题工单管理页
 *
 * 支持工单表单编辑和流程分派。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()
const route = useRoute()

const orderId = (route.params.detail || route.query.id) as string

/** 表单数据 */
const formData = ref({
  title: '',
  facility: '',
  severity: 'medium',
  address: '',
  description: '',
  assignee: '',
})

/** 设施选项 */
const facilityOptions = [
  { text: '供水管网', value: '供水管网' },
  { text: '阀门井', value: '阀门井' },
  { text: '水表', value: '水表' },
  { text: '消防栓', value: '消防栓' },
  { text: '泵站', value: '泵站' },
]

/** 严重程度选项 */
const severityOptions = [
  { text: '低', value: 'low' },
  { text: '中', value: 'medium' },
  { text: '高', value: 'high' },
  { text: '紧急', value: 'critical' },
]

/** 设施选择器状态 */
const showFacilityPicker = ref(false)

/** 严重程度选择器状态 */
const showSeverityPicker = ref(false)

/** 责任人选择器状态 */
const showAssigneePicker = ref(false)

/** 可选责任人 */
const assigneeOptions = [
  { text: '李工', value: '李工' },
  { text: '王工', value: '王工' },
  { text: '赵工', value: '赵工' },
  { text: '孙工', value: '孙工' },
]

/** 确认设施选择 */
function onConfirmFacility({ selectedOptions }: any) {
  formData.value.facility = selectedOptions[0]?.text || ''
  showFacilityPicker.value = false
}

/** 确认严重程度 */
function onConfirmSeverity({ selectedOptions }: any) {
  formData.value.severity = selectedOptions[0]?.value || 'medium'
  showSeverityPicker.value = false
}

/** 确认责任人 */
function onConfirmAssignee({ selectedOptions }: any) {
  formData.value.assignee = selectedOptions[0]?.text || ''
  showAssigneePicker.value = false
}

/** 提交表单 */
function onSubmit() {
  if (!formData.value.title) {
    showToast('请输入工单标题')
    return
  }
  if (!formData.value.address) {
    showToast('请输入问题地址')
    return
  }
  showToast('工单提交成功')
  router.back()
}
</script>

<template>
  <div class="management-page">
    <van-nav-bar title="工单管理" left-text="返回" left-arrow fixed placeholder @click-left="router.back()" />

    <van-form @submit="onSubmit" class="form-wrapper">
      <van-cell-group title="工单信息" class="form-group">
        <!-- 工单标题 -->
        <van-field
          v-model="formData.title"
          name="title"
          label="工单标题"
          placeholder="请输入工单标题"
          :rules="[{ required: true, message: '请输入工单标题' }]"
        />

        <!-- 设施类型 -->
        <van-field
          v-model="formData.facility"
          is-link
          readonly
          name="facility"
          label="设施类型"
          placeholder="请选择设施类型"
          @click="showFacilityPicker = true"
        />
        <van-popup v-model:show="showFacilityPicker" round position="bottom">
          <van-picker
            :columns="facilityOptions"
            @confirm="onConfirmFacility"
            @cancel="showFacilityPicker = false"
          />
        </van-popup>

        <!-- 严重程度 -->
        <van-field
          :model-value="severityOptions.find(o => o.value === formData.severity)?.text || '请选择'"
          is-link
          readonly
          name="severity"
          label="严重程度"
          @click="showSeverityPicker = true"
        />
        <van-popup v-model:show="showSeverityPicker" round position="bottom">
          <van-picker
            :columns="severityOptions"
            @confirm="onConfirmSeverity"
            @cancel="showSeverityPicker = false"
          />
        </van-popup>

        <!-- 问题地址 -->
        <van-field
          v-model="formData.address"
          name="address"
          label="问题地址"
          placeholder="请输入问题地址"
          :rules="[{ required: true, message: '请输入问题地址' }]"
        />

        <!-- 问题描述 -->
        <van-field
          v-model="formData.description"
          name="description"
          label="问题描述"
          type="textarea"
          rows="3"
          autosize
          placeholder="请输入问题描述"
          maxlength="500"
          show-word-limit
        />
      </van-cell-group>

      <van-cell-group title="流程分派" class="form-group">
        <!-- 责任人 -->
        <van-field
          v-model="formData.assignee"
          is-link
          readonly
          name="assignee"
          label="责任人"
          placeholder="请选择责任人"
          @click="showAssigneePicker = true"
        />
        <van-popup v-model:show="showAssigneePicker" round position="bottom">
          <van-picker
            :columns="assigneeOptions"
            @confirm="onConfirmAssignee"
            @cancel="showAssigneePicker = false"
          />
        </van-popup>
      </van-cell-group>

      <!-- 提交按钮 -->
      <div class="submit-area">
        <van-button round block type="primary" native-type="submit">
          提交工单
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style lang="scss" scoped>
.management-page {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding-bottom: 24px;

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.form-wrapper {
  margin-top: 0;
}

.form-group {
  margin-top: 8px;
}

.submit-area {
  padding: 24px 16px;
}
</style>