SCADATrainSys/src/components/business/EasyProcess/node/fault_drawer.vue

<template>
  <div>
    <BasicForm>
      <template #templateID="{ model }">
        <el-select-v2
          v-model="model.templateID"
          :options="
            templateList.map((item) => ({
              label: item.templateName,
              value: item.templateID
            }))
          "
          placeholder="请选择操作模板"
          @change="handleTemplateChange"
        />
      </template>
    </BasicForm>
  </div>
</template>
<script setup lang="ts" name="DrawerOperation">
  import { useForm } from '@/components/form'
  import { Process } from '../common/process.type'
  import { ProcessFault, ProcessServer } from '@/api/course.api'

  const props = withDefaults(defineProps<{ node: Process.FaultNode }>(), {})

  const templateList = ref<ProcessFault[]>([])
  const templateSelected = ref<ProcessFault>()

  const [BasicForm, formApi] = useForm({
    labelWidth: '100px',
    schema: [
      { prop: 'role', label: '选择角色', component: 'ApiSelect', componentProps: { api: '/role/list', labelField: 'roleName', valueField: 'roleID' } },
      { prop: 'templateID', label: '操作模', component: 'Input' },
      { prop: 'templateType', label: '操作模板类型', component: 'Input' },
      { prop: 'category', label: '节点分类', component: 'Input' },
      { prop: 'categoryName', label: '分类名称', component: 'Input' },
      { prop: 'subCategory', label: '子分类', component: 'Input' },
      { prop: 'subCategoryName', label: '子分类名称', component: 'Input' },
      {
        prop: 'param1Type',
        label: '参数1类型',
        component: 'Select',
        colSpan: 10,
        componentProps: {
          placeholder: '请选择类型',
          options: [
            { label: '文本', value: 1 },
            { label: '数字', value: 2 },
            { label: '日期', value: 3 }
          ]
        },
        ifShow: () => templateSelected.value?.param1Type != -1
      },
      {
        prop: 'param1Desc',
        label: '',
        labelWidth: '0px',
        component: 'Input',
        componentProps: () => ({ placeholder: templateSelected.value?.param1Desc || '请输入参数' }),
        colSpan: 14,
        ifShow: () => templateSelected.value?.param1Type != -1
      },
      {
        prop: 'param2Type',
        label: '参数2类型',
        component: 'Select',
        componentProps: {
          placeholder: '请选择类型',
          options: [
            { label: '文本', value: 1 },
            { label: '数字', value: 2 },
            { label: '日期', value: 3 }
          ]
        },
        colSpan: 10,
        ifShow: () => templateSelected.value?.param2Type != -1
      },
      {
        prop: 'param2Desc',
        label: '',
        labelWidth: '0px',
        component: 'Input',
        componentProps: () => ({ placeholder: templateSelected.value?.param2Desc || '请输入参数' }),
        colSpan: 14,
        ifShow: () => templateSelected.value?.param2Type != -1
      },
      {
        prop: 'param3Type',
        label: '参数3类型',
        component: 'Select',
        colSpan: 10,
        componentProps: {
          placeholder: '请选择类型',
          options: [
            { label: '文本', value: 1 },
            { label: '数字', value: 2 },
            { label: '日期', value: 3 }
          ]
        },
        ifShow: () => templateSelected.value?.param3Type != -1
      },
      {
        prop: 'param3Desc',
        label: '',
        labelWidth: '0px',
        component: 'Input',
        componentProps: () => ({ placeholder: templateSelected.value?.param3Desc || '请输入参数' }),
        colSpan: 14,
        ifShow: () => templateSelected.value?.param3Type != -1
      },
      {
        prop: 'param4Type',
        label: '参数4类型',
        component: 'Select',
        colSpan: 10,
        componentProps: {
          placeholder: '请选择类型',
          options: [
            { label: '文本', value: 1 },
            { label: '数字', value: 2 },
            { label: '日期', value: 3 }
          ]
        },
        ifShow: () => templateSelected.value?.param4Type != -1
      },
      {
        prop: 'param4Desc',
        label: '',
        labelWidth: '0px',
        component: 'Input',
        componentProps: () => ({ placeholder: templateSelected.value?.param4Desc || '请输入参数' }),
        colSpan: 14,
        ifShow: () => templateSelected.value?.param4Type != -1
      },
      {
        prop: 'param5Type',
        label: '参数5类型',
        component: 'Select',
        colSpan: 10,
        componentProps: {
          placeholder: '请选择类型',
          options: [
            { label: '文本', value: 1 },
            { label: '数字', value: 2 },
            { label: '日期', value: 3 }
          ]
        },
        ifShow: () => templateSelected.value?.param5Type != -1
      },
      {
        prop: 'param5Desc',
        label: '',
        labelWidth: '0px',
        component: 'Input',
        componentProps: () => ({ placeholder: templateSelected.value?.param5Desc || '请输入参数' }),
        colSpan: 14,
        ifShow: () => templateSelected.value?.param5Type != -1
      }
    ]
  })

  const handleTemplateChange = (val: string) => {
    if (val) {
      const template = templateList.value.find((item) => item.templateID == val)
      if (template) {
        templateSelected.value = template
      }
    }
  }

  onMounted(async () => {
    const { data } = await ProcessServer.faultList()
    templateList.value = data || []
    nextTick(() => {
      formApi.setValues(props.node.nodeData || {})
    })
  })

  defineExpose({
    getNodeData: async (callback: (nodeData: Record<string, unknown>) => void) => {
      const data = await formApi.getValues()
      formApi.validate().then((valid) => {
        if (valid) {
          callback(data)
        } else {
          ElMessage.error('请检查节点配置是否完整')
        }
      })
    }
  })
</script>