vent-forewarn-micro/src/views/vent/monitor/site/components/siteForm.vue

<template>
  <!-- 测点操作表单 -->
  <div>
    <BasicForm
      :model="site"
      :schemas="schemas"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
      label-align="right"
      :showActionButtonGroup="false"
      @register="register"
    >
      <template #create-btn>
        <Button type="primary" :rounded="true" @click="createSite">新建测点</Button>
      </template>
      <template #copy-btn>
        <Button type="primary" :rounded="true" @click="copySite">复制测点</Button>
      </template>
      <template #edit-btn>
        <Button type="primary" :rounded="true" @click="editSite">编辑测点</Button>
      </template>
    </BasicForm>
    <Button type="primary" shape="circle" @click="targetSite">
      <template #icon>
        <Icon icon="mdi:target" />
      </template>
    </Button>
  </div>
</template>
<script setup lang="ts">
  import {
    MonitorSiteTreeNode,
    MonitorSiteOperationParams,
    SaveMonitorSiteParams,
  } from '@/api/sys/model/monitorModel';
  import { defineProps } from 'vue';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { Button } from 'ant-design-vue';
  import { SensorDict, SystemSourceDict } from '../const';
  import Icon from '@/components/Icon/Icon.vue';

  // props & emits
  defineProps<{ site?: MonitorSiteTreeNode }>();
  const emit = defineEmits<{
    save: [value: SaveMonitorSiteParams];
    message: [value: MonitorSiteOperationParams];
  }>();

  // 生成输入类表单项的帮助函数
  function generateInputSchema({
    field,
    label,
    span = 5,
    placeholder,
    required = false,
  }: {
    field: string;
    label: string;
    span?: number;
    placeholder?: string;
    required?: boolean;
  }): FormSchema {
    return {
      component: 'Input',
      field,
      label,
      rules: [{ required }],
      colProps: {
        span,
      },
      componentProps: {
        placeholder: placeholder || `请输入${label}`,
      },
    };
  }

  // 生成按钮类表单项的帮助函数，具体的按钮写在BasicForm对应的slot下
  function generateButtonSchema({ slot }: { slot: string }): FormSchema {
    return {
      field: slot,
      slot,
      component: 'Render',
      colProps: {
        span: 1,
      },
      componentProps: {
        size: 'small',
      },
    };
  }

  // 生成选择框类表单项的帮助函数
  function generateSelectSchema({
    field,
    label,
    span = 5,
    placeholder,
    required = true,
    dict,
  }: {
    field: string;
    label: string;
    span?: number;
    placeholder?: string;
    required?: boolean;
    dict: Record<string, unknown>;
  }): FormSchema {
    return {
      component: 'Select',
      field,
      label,
      rules: [{ required }],
      colProps: {
        span,
      },
      componentProps: {
        placeholder: placeholder || `请输入${label}`,
        options: Object.keys(dict).reduce<{ value: string; label: unknown }[]>((result, key) => {
          result.push({ value: key, label: dict[key] });

          return result;
        }, []),
      },
    };
  }

  // 表单配置项
  const schemas: FormSchema[] = [
    generateButtonSchema({ slot: 'create-btn' }),
    generateInputSchema({ field: 'id', label: '测点编号', required: true }),
    generateSelectSchema({ field: 'sensorType', label: '测点类型', dict: SensorDict }),
    generateInputSchema({ field: 'sensorStatus', label: '测点使用状态', required: true }),
    generateInputSchema({ field: 'pos', label: '所属位置', required: true }),
    generateInputSchema({ field: 'x', label: 'X', required: true, span: 3 }),
    generateButtonSchema({ slot: 'copy-btn' }),
    generateSelectSchema({ field: 'srouce', label: '系统来源', dict: SystemSourceDict }),
    generateInputSchema({ field: 'data_type', label: '数据类型', required: true }),
    generateInputSchema({ field: 'nuit', label: '单位', required: true }),
    generateInputSchema({ field: 'distance', label: '巷道距离' }),
    generateInputSchema({ field: 'y', label: 'Y', required: true, span: 3 }),
    generateButtonSchema({ slot: 'edit-btn' }),
    generateInputSchema({ field: 'max_messure', label: '高量程' }),
    generateInputSchema({ field: 'min_messure', label: '低量程' }),
    generateInputSchema({ field: 'warn_limit', label: '报警上限', required: true }),
    generateInputSchema({ field: 'warn_deadline', label: '报警下限', required: true }),
    generateInputSchema({ field: 'z', label: 'Z', span: 3 }),
  ];

  // 后续操作表单必要的函数
  const [register, { validate }] = useForm();

  // 提交创建测点所需的数据
  function createSite() {
    validate().then((v) => {
      emit('save', v as SaveMonitorSiteParams);
    });
  }

  // 提交复制测点所需的数据
  function copySite() {
    validate().then((v) => {
      emit('save', v as SaveMonitorSiteParams);
    });
  }

  // 提交编辑测点所需的数据
  function editSite() {
    validate().then((v) => {
      emit('save', v as SaveMonitorSiteParams);
    });
  }

  // 定位测点
  function targetSite() {
    emit('message', {
      clickType: 'pickPiont', // 拾取坐标
      from: 'tank',
    });
  }

  defineExpose({
    schemas,
    register,
  });
</script>