|
@@ -1,33 +1,50 @@
|
|
|
<template>
|
|
|
<!-- 测点操作表单 -->
|
|
|
- <BasicForm
|
|
|
- :model="site"
|
|
|
- :schemas="schemas"
|
|
|
- :label-col="{ span: 8 }"
|
|
|
- :wrapper-col="{ span: 16 }"
|
|
|
- label-align="right"
|
|
|
- :showActionButtonGroup="false"
|
|
|
- >
|
|
|
- <template #create-btn="{ model }">
|
|
|
- <Button type="primary" :rounded="true" @click="createSite(model)">新建测点</Button>
|
|
|
- </template>
|
|
|
- <template #copy-btn="{ model }">
|
|
|
- <Button type="primary" :rounded="true" @click="copySite(model)">复制测点</Button>
|
|
|
- </template>
|
|
|
- <template #edit-btn="{ model }">
|
|
|
- <Button type="primary" :rounded="true" @click="editSite(model)">编辑测点</Button>
|
|
|
- </template>
|
|
|
- </BasicForm>
|
|
|
+ <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 } from '@/api/sys/model/monitorModel';
|
|
|
+ import {
|
|
|
+ MonitorSiteTreeNode,
|
|
|
+ MonitorSiteOperationParams,
|
|
|
+ SaveMonitorSiteParams,
|
|
|
+ } from '@/api/sys/model/monitorModel';
|
|
|
import { defineProps } from 'vue';
|
|
|
- import { BasicForm, FormSchema } from '@/components/Form/index';
|
|
|
+ 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<{ submit: [value: MonitorSiteOperationParams] }>();
|
|
|
+ const emit = defineEmits<{
|
|
|
+ save: [value: SaveMonitorSiteParams];
|
|
|
+ message: [value: MonitorSiteOperationParams];
|
|
|
+ }>();
|
|
|
|
|
|
// 生成输入类表单项的帮助函数
|
|
|
function generateInputSchema({
|
|
@@ -72,16 +89,51 @@
|
|
|
};
|
|
|
}
|
|
|
|
|
|
+ // 生成选择框类表单项的帮助函数
|
|
|
+ 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 }),
|
|
|
- generateInputSchema({ field: 'sensorType', 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' }),
|
|
|
- generateInputSchema({ field: 'srouce', label: '系统来源', required: true }),
|
|
|
+ generateSelectSchema({ field: 'srouce', label: '系统来源', dict: SystemSourceDict }),
|
|
|
generateInputSchema({ field: 'data_type', label: '数据类型', required: true }),
|
|
|
generateInputSchema({ field: 'nuit', label: '单位', required: true }),
|
|
|
generateInputSchema({ field: 'distance', label: '巷道距离' }),
|
|
@@ -94,38 +146,40 @@
|
|
|
generateInputSchema({ field: 'z', label: 'Z', span: 3 }),
|
|
|
];
|
|
|
|
|
|
+ // 后续操作表单必要的函数
|
|
|
+ const [register, { validate }] = useForm();
|
|
|
+
|
|
|
// 提交创建测点所需的数据
|
|
|
- function createSite(model: MonitorSiteOperationParams) {
|
|
|
- emit('submit', {
|
|
|
- clickType: 'newPoin', // 点击类型 新建测点
|
|
|
- sensorType: model.sensorType, // 水 0502、瓦斯0001、顶板1401等 多级菜单
|
|
|
- sensorStatus: model.sensorStatus, // 状态
|
|
|
- id: model.id, // 测点ID
|
|
|
- from: 'tank',
|
|
|
+ function createSite() {
|
|
|
+ validate().then((v) => {
|
|
|
+ emit('save', v as SaveMonitorSiteParams);
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
// 提交复制测点所需的数据
|
|
|
- function copySite(model: MonitorSiteOperationParams) {
|
|
|
- emit('submit', {
|
|
|
- clickType: 'copyPoint', // 点击类型 新建测点
|
|
|
- sensorType: model.sensorType, // 水 0502、瓦斯0001、顶板1401等 多级菜单
|
|
|
- sensorStatus: model.sensorStatus, // 状态
|
|
|
- id: model.id, // 测点ID
|
|
|
- from: 'tank',
|
|
|
+ function copySite() {
|
|
|
+ validate().then((v) => {
|
|
|
+ emit('save', v as SaveMonitorSiteParams);
|
|
|
});
|
|
|
}
|
|
|
+
|
|
|
// 提交编辑测点所需的数据
|
|
|
- function editSite(model: MonitorSiteOperationParams) {
|
|
|
- emit('submit', {
|
|
|
- clickType: 'modifyPoint', // 点击类型 新建测点
|
|
|
- sensorType: model.sensorType, // 水 0502、瓦斯0001、顶板1401等 多级菜单
|
|
|
- sensorStatus: model.sensorStatus, // 状态
|
|
|
- id: model.id, // 测点ID
|
|
|
+ function editSite() {
|
|
|
+ validate().then((v) => {
|
|
|
+ emit('save', v as SaveMonitorSiteParams);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 定位测点
|
|
|
+ function targetSite() {
|
|
|
+ emit('message', {
|
|
|
+ clickType: 'pickPiont', // 拾取坐标
|
|
|
from: 'tank',
|
|
|
});
|
|
|
}
|
|
|
|
|
|
defineExpose({
|
|
|
schemas,
|
|
|
+ register,
|
|
|
});
|
|
|
</script>
|