water-management-system/frontend/src/views/dispatch-command/CommandCreate.vue

<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title="创建调度指令"
    width="600"
    :close-on-click-modal="false">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="指令标题" prop="commandTitle">
        <el-input v-model="form.commandTitle" placeholder="请输入指令标题" maxlength="200" show-word-limit />
      </el-form-item>

      <el-form-item label="指令类型" prop="commandType">
        <el-select v-model="form.commandType" placeholder="请选择">
          <el-option label="常规" value="normal" />
          <el-option label="应急" value="emergency" />
          <el-option label="维护" value="maintenance" />
          <el-option label="巡检" value="inspection" />
        </el-select>
      </el-form-item>

      <el-form-item label="优先级" prop="priority">
        <el-radio-group v-model="form.priority">
          <el-radio value="low">低</el-radio>
          <el-radio value="normal">普通</el-radio>
          <el-radio value="high">高</el-radio>
          <el-radio value="urgent">紧急</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="来源" prop="source">
        <el-input v-model="form.source" placeholder="手动/系统/报警联动" />
      </el-form-item>

      <el-form-item label="指令内容" prop="commandContent">
        <el-input v-model="form.commandContent" type="textarea" :rows="5"
          placeholder="请输入指令详细内容" maxlength="2000" show-word-limit />
      </el-form-item>

      <el-form-item label="目标类型" prop="targetType">
        <el-select v-model="form.targetType" placeholder="请选择">
          <el-option label="指定人员" value="user" />
          <el-option label="部门" value="dept" />
          <el-option label="角色" value="role" />
        </el-select>
      </el-form-item>

      <el-form-item label="目标人员" prop="targetIds">
        <el-input v-model="form.targetIds" placeholder="目标ID列表，多个用逗号分隔，如: 1,2,3" />
        <div class="form-tip">输入用户ID，多个用逗号分隔</div>
      </el-form-item>

      <el-form-item label="备注">
        <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="备注信息（可选）" />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="$emit('update:visible', false)">取消</el-button>
      <el-button type="primary" :loading="submitting" @click="handleSubmit">
        创建指令
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { createCommand } from '@/api/dispatchCommand'

const props = defineProps<{ visible: boolean }>()
const emit = defineEmits<{
  'update:visible': [value: boolean]
  'created': []
}>()

const formRef = ref<FormInstance>()
const submitting = ref(false)

const defaultForm = () => ({
  commandTitle: '',
  commandType: 'normal',
  priority: 'normal',
  source: '手动',
  commandContent: '',
  targetType: 'user',
  targetIds: '',
  remark: ''
})

const form = reactive(defaultForm())

const rules: FormRules = {
  commandTitle: [{ required: true, message: '请输入指令标题', trigger: 'blur' }],
  commandType: [{ required: true, message: '请选择指令类型', trigger: 'change' }],
  priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
  commandContent: [{ required: true, message: '请输入指令内容', trigger: 'blur' }],
  targetType: [{ required: true, message: '请选择目标类型', trigger: 'change' }],
  targetIds: [{ required: true, message: '请输入目标ID', trigger: 'blur' }]
}

watch(() => props.visible, (val) => {
  if (val) {
    Object.assign(form, defaultForm())
    formRef.value?.resetFields()
  }
})

async function handleSubmit() {
  if (!formRef.value) return
  await formRef.value.validate()

  submitting.value = true
  try {
    // 将 targetIds 转为 JSON 数组格式
    const targetIdsArr = form.targetIds.split(',').map((s: string) => s.trim()).filter(Boolean)
    await createCommand({
      ...form,
      targetIds: JSON.stringify(targetIdsArr.map(Number))
    })
    ElMessage.success('指令创建成功')
    emit('update:visible', false)
    emit('created')
  } catch (e: any) {
    ElMessage.error(e.message || '创建失败')
  } finally {
    submitting.value = false
  }
}
</script>

<style scoped>
.form-tip { font-size: 12px; color: #909399; margin-top: 4px; }
</style>