30 changed files with 544 additions and 392 deletions
@ -0,0 +1,34 @@ |
|||
import type { FormField } from "@/components/data-form/DataFormTypes.ts"; |
|||
|
|||
interface PropertyFieldSetter extends FormField { |
|||
} |
|||
|
|||
interface PropertyFlattenSetter { |
|||
/** label宽度 */ |
|||
labelWidth?: string | number; |
|||
/** 表单字段大小 */ |
|||
size?: "" | "small" | "default" | "large"; |
|||
/** 设置器集合 */ |
|||
fields: Array<PropertyFieldSetter>; |
|||
} |
|||
|
|||
interface PropertySetterGroup extends PropertyFlattenSetter { |
|||
/** 分组标题 */ |
|||
title: string; |
|||
/** 是否展开状态(默认为true) */ |
|||
expand?: boolean; |
|||
} |
|||
|
|||
interface PropertySetter { |
|||
/** 最上面平铺的设置器 */ |
|||
flatten?: PropertyFlattenSetter; |
|||
/** 设置器分组集合 */ |
|||
groups?: Array<PropertySetterGroup>; |
|||
} |
|||
|
|||
export type { |
|||
PropertyFieldSetter, |
|||
PropertyFlattenSetter, |
|||
PropertySetterGroup, |
|||
PropertySetter, |
|||
} |
|||
@ -0,0 +1,112 @@ |
|||
<script setup lang="ts"> |
|||
import { computed, reactive } from "vue"; |
|||
import { ElCollapse, ElCollapseItem } from "element-plus"; |
|||
import DataForm from "@/components/data-form/DataForm.vue"; |
|||
import type { PropertyFlattenSetter, PropertySetterGroup } from "@/core/base/PropertyTypes.ts"; |
|||
import type { DataFormProps } from "@/components/data-form/DataFormTypes.ts"; |
|||
import { defDataFormProps } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
defineOptions({ |
|||
name: 'PropertyPanel', |
|||
}); |
|||
|
|||
// 定义 Props 类型 |
|||
interface PropertyPanelProps { |
|||
/** 待编辑数据 */ |
|||
data?: any; |
|||
/** 默认的DataFormProps */ |
|||
defDataFormProps?: DataFormProps; |
|||
/** 最上面平铺的设置器 */ |
|||
flatten?: PropertyFlattenSetter; |
|||
/** 设置器分组集合 */ |
|||
groups?: Array<PropertySetterGroup>; |
|||
} |
|||
|
|||
// 读取组件 props 属性 |
|||
const props = withDefaults(defineProps<PropertyPanelProps>(), {}); |
|||
|
|||
// 定义 State 类型 |
|||
interface PropertyPanelState { |
|||
expandGroups: Array<string>; |
|||
} |
|||
|
|||
// state 属性 |
|||
const state = reactive<PropertyPanelState>({ |
|||
expandGroups: [], |
|||
}); |
|||
|
|||
// 定义 Data 类型 |
|||
interface PropertyPanelData { |
|||
} |
|||
|
|||
// 内部数据 |
|||
const data: PropertyPanelData = {}; |
|||
const flattenFormProps = computed(() => getDefFormProps(props.flatten)); |
|||
|
|||
function getDefFormProps(setter?: PropertyFlattenSetter) { |
|||
const formProps: DataFormProps = { |
|||
...defDataFormProps, |
|||
...props.defDataFormProps, |
|||
}; |
|||
fillFormProps(setter); |
|||
return formProps; |
|||
} |
|||
|
|||
function fillFormProps(formProps: DataFormProps, setter?: PropertyFlattenSetter) { |
|||
if (!setter) return; |
|||
if (setter.size) formProps.size = setter.size; |
|||
if (setter.labelWidth) formProps.labelWidth = setter.labelWidth; |
|||
} |
|||
|
|||
function getCollapseItemId(group: PropertySetterGroup, idx: number) { |
|||
return `_${idx}_${group.title}`; |
|||
} |
|||
|
|||
interface PropertyPanelExpose { |
|||
state: PropertyPanelState; |
|||
data: PropertyPanelData; |
|||
} |
|||
|
|||
const expose: PropertyPanelExpose = { |
|||
state, |
|||
data, |
|||
}; |
|||
// 定义组件公开内容 |
|||
defineExpose(expose); |
|||
|
|||
export type { |
|||
PropertyPanelProps, |
|||
PropertyPanelState, |
|||
} |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="property-panel"> |
|||
<DataForm |
|||
v-if="props.flatten" |
|||
class="property-panel-form" |
|||
v-bind="flattenFormProps" |
|||
:data="props.data" |
|||
:formFields="props.flatten.fields" |
|||
/> |
|||
<ElCollapse v-if="props.groups" v-model="state.expandGroups"> |
|||
<ElCollapseItem |
|||
v-for="(group, idx) in props.groups" |
|||
:name="getCollapseItemId(group, idx)" |
|||
:title="group.title" |
|||
> |
|||
<DataForm |
|||
v-if="group" |
|||
class="property-panel-form" |
|||
v-bind="getDefFormProps(group)" |
|||
:data="props.data" |
|||
:formFields="props.flatten.fields" |
|||
/> |
|||
</ElCollapseItem> |
|||
</ElCollapse> |
|||
</div> |
|||
</template> |
|||
|
|||
<style scoped> |
|||
|
|||
</style> |
|||
@ -0,0 +1,58 @@ |
|||
import type { DataFormProps } from "@/components/data-form/DataFormTypes.ts"; |
|||
import type { PropertyFieldSetter } from "@/core/base/PropertyTypes.ts"; |
|||
|
|||
const defDataFormProps: DataFormProps = { |
|||
columnCount: 1, |
|||
layout: "onlyLabelFixed", |
|||
labelWidth: "100px", |
|||
size: "small", |
|||
}; |
|||
|
|||
const basicFieldsSetter: Array<PropertyFieldSetter> = [ |
|||
{ |
|||
dataPath: 'id', label: '唯一ID', input: 'Input', |
|||
inputProps: { |
|||
readonly: true, |
|||
}, |
|||
}, |
|||
{ |
|||
dataPath: 'name', label: '名称', input: 'Input', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'visible', label: '可见', input: 'Checkbox', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.selectable', label: '可选中', input: 'Checkbox', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.protected', label: '受保护', input: 'Checkbox', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.label', label: '标签', input: 'Input', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.color', label: '颜色', input: 'ColorPicker', |
|||
inputProps: {}, |
|||
}, |
|||
// {
|
|||
// dataPath: 'tf', input: 'TransformEditor',
|
|||
// inputProps: {
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// dataPath: 'dt', input: 'InOutCenterEditor',
|
|||
// inputProps: {
|
|||
// },
|
|||
// },
|
|||
]; |
|||
|
|||
|
|||
export { |
|||
defDataFormProps, |
|||
basicFieldsSetter, |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
interface PropertyPanelProps { |
|||
|
|||
} |
|||
|
|||
export type { |
|||
PropertyPanelProps, |
|||
} |
|||
@ -1,14 +0,0 @@ |
|||
import type { IMeta } from '@/core/base/IMeta.ts' |
|||
|
|||
export default [ |
|||
{ field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' }, |
|||
{ field: 'name', editor: 'TextInput', label: '名称', category: 'basic' }, |
|||
{ field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' }, |
|||
{ editor: 'TransformEditor', category: 'basic' }, |
|||
{ field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' }, |
|||
{ editor: '-', category: 'basic' }, |
|||
{ field: 'tf', editor: 'InOutCenterEditor', category: 'basic' }, |
|||
{ field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' }, |
|||
{ field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' }, |
|||
{ field: 'visible', editor: 'Switch', label: '可见', category: 'basic' } |
|||
] as IMeta |
|||
@ -0,0 +1,12 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
@ -1,15 +0,0 @@ |
|||
import type { IMeta } from '@/core/base/IMeta.ts' |
|||
|
|||
const MeasureMeta: IMeta = [ |
|||
{ field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' }, |
|||
{ field: 'name', editor: 'TextInput', label: '名称', category: 'basic' }, |
|||
{ field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' }, |
|||
{ editor: 'TransformEditor', category: 'basic' }, |
|||
{ field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' }, |
|||
{ editor: '-', category: 'basic' }, |
|||
{ field: 'tf', editor: 'InOutCenterEditor', category: 'basic' }, |
|||
{ field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' }, |
|||
{ field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' }, |
|||
{ field: 'visible', editor: 'Switch', label: '可见', category: 'basic' } |
|||
] |
|||
export default MeasureMeta |
|||
@ -0,0 +1,12 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
@ -1,49 +0,0 @@ |
|||
import type { IMeta } from '@/core/base/IMeta.ts' |
|||
|
|||
export default [ |
|||
{ field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' }, |
|||
{ field: 'name', editor: 'TextInput', label: '名称', category: 'basic' }, |
|||
{ field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' }, |
|||
{ editor: 'TransformEditor', category: 'basic' }, |
|||
{ field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' }, |
|||
{ editor: '-', category: 'basic' }, |
|||
|
|||
{ field: 'dt.palletWidth', editor: 'NumberInput', label: '托盘深度', category: 'basic' }, |
|||
{ field: 'dt.palletDepth', editor: 'NumberInput', label: '托盘深度', category: 'basic' }, |
|||
/** |
|||
* dt.bays 5列3层货架示例 |
|||
* { |
|||
* dt: { |
|||
* rackDepth: 1.1, // 货架深度
|
|||
* levelCount: 3, // 总层数
|
|||
* bayCount: 5, // 总列数
|
|||
* hideFloor: false, // 隐藏底板
|
|||
* extendColumns: true, // 扩展挡板
|
|||
* columnSpacing: 1, // 支脚跨越
|
|||
* bays: [ // 每列的配置
|
|||
* { |
|||
* bayWidth: 1.6, // 列的宽度
|
|||
* levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
|
|||
* }, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* ] |
|||
* } |
|||
* } |
|||
* |
|||
* |
|||
* |
|||
* |
|||
* |
|||
* |
|||
* |
|||
*/ |
|||
|
|||
|
|||
{ field: 'tf', editor: 'InOutCenterEditor', category: 'basic' }, |
|||
{ field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' }, |
|||
{ field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' }, |
|||
{ field: 'visible', editor: 'Switch', label: '可见', category: 'basic' } |
|||
] as IMeta |
|||
@ -0,0 +1,20 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
{ |
|||
dataPath: 'dt.palletWidth', label: '托盘宽度', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.palletDepth', label: '托盘深度', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
@ -0,0 +1,20 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
{ |
|||
dataPath: 'dt.palletWidth', label: '托盘宽度', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.palletDepth', label: '托盘深度', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
@ -1,55 +0,0 @@ |
|||
import type { IMeta } from '@/core/base/IMeta.ts' |
|||
|
|||
export default [ |
|||
{ field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' }, |
|||
{ field: 'name', editor: 'TextInput', label: '名称', category: 'basic' }, |
|||
{ field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' }, |
|||
{ editor: 'TransformEditor', category: 'basic' }, |
|||
{ field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' }, |
|||
{ editor: '-', category: 'basic' }, |
|||
|
|||
|
|||
{ field: 'dt.rackDepth', editor: 'NumberInput', label: '货架深度', category: 'basic' }, |
|||
{ field: 'dt.levelCount', editor: 'NumberInput', label: '总层数', category: 'basic' }, |
|||
{ field: 'dt.bayCount', editor: 'NumberInput', label: '总列数', category: 'basic' }, |
|||
{ field: 'dt.hideFloor', editor: 'NumberInput', label: '隐藏底板', category: 'basic' }, |
|||
{ field: 'dt.extendColumns', editor: 'NumberInput', label: '扩展挡板', category: 'basic' }, |
|||
{ field: 'dt.columnSpacing', editor: 'NumberInput', label: '支脚跨越', category: 'basic' }, |
|||
{ field: 'dt.bays', editor: 'BayEditor', category: 'basic' }, |
|||
/** |
|||
* dt.bays 5列3层货架示例 |
|||
* { |
|||
* dt: { |
|||
* rackDepth: 1.1, // 货架深度
|
|||
* levelCount: 3, // 总层数
|
|||
* bayCount: 5, // 总列数
|
|||
* hideFloor: false, // 隐藏底板
|
|||
* extendColumns: true, // 扩展挡板
|
|||
* columnSpacing: 1, // 支脚跨越
|
|||
* bays: [ // 每列的配置
|
|||
* { |
|||
* bayWidth: 1.6, // 列的宽度
|
|||
* levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
|
|||
* }, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* ] |
|||
* } |
|||
* } |
|||
* |
|||
* |
|||
* |
|||
* |
|||
* |
|||
* |
|||
* |
|||
*/ |
|||
|
|||
|
|||
{ field: 'tf', editor: 'InOutCenterEditor', category: 'basic' }, |
|||
{ field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' }, |
|||
{ field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' }, |
|||
{ field: 'visible', editor: 'Switch', label: '可见', category: 'basic' } |
|||
] as IMeta |
|||
@ -0,0 +1,64 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
{ |
|||
dataPath: 'dt.rackDepth', label: '货架深度', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.levelCount', label: '总层数', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.bayCount', label: '总列数', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.hideFloor', label: '隐藏底板', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.extendColumns', label: '扩展挡板', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
{ |
|||
dataPath: 'dt.columnSpacing', label: '支脚跨越', input: 'InputNumber', |
|||
inputProps: {}, |
|||
}, |
|||
// {
|
|||
// dataPath: 'dt.bays', input: 'BayEditor',
|
|||
// inputProps: {
|
|||
// },
|
|||
// },
|
|||
/** |
|||
* dt.bays 5列3层货架示例 |
|||
* { |
|||
* dt: { |
|||
* rackDepth: 1.1, // 货架深度
|
|||
* levelCount: 3, // 总层数
|
|||
* bayCount: 5, // 总列数
|
|||
* hideFloor: false, // 隐藏底板
|
|||
* extendColumns: true, // 扩展挡板
|
|||
* columnSpacing: 1, // 支脚跨越
|
|||
* bays: [ // 每列的配置
|
|||
* { |
|||
* bayWidth: 1.6, // 列的宽度
|
|||
* levelHeight: [ 1.4, 1.4, 1.4 ] // 每层的高度
|
|||
* }, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* {bayWidth: 1.6, levelHeight: [ 1.4, 1.4, 1.4 ]}, |
|||
* ] |
|||
* } |
|||
* } |
|||
*/ |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
@ -1,14 +0,0 @@ |
|||
import type { IMeta } from '@/core/base/IMeta.ts' |
|||
|
|||
export default [ |
|||
{ field: 'uuid', editor: 'UUID', label: 'uuid', readonly: true, category: 'basic' }, |
|||
{ field: 'name', editor: 'TextInput', label: '名称', category: 'basic' }, |
|||
{ field: 'dt.label', editor: 'TextInput', label: '标签', category: 'basic' }, |
|||
{ editor: 'TransformEditor', category: 'basic' }, |
|||
{ field: 'dt.color', editor: 'Color', label: '颜色', category: 'basic' }, |
|||
{ editor: '-', category: 'basic' }, |
|||
{ field: 'tf', editor: 'InOutCenterEditor', category: 'basic' }, |
|||
{ field: 'dt.selectable', editor: 'Switch', label: '可选中', category: 'basic' }, |
|||
{ field: 'dt.protected', editor: 'Switch', label: '受保护', category: 'basic' }, |
|||
{ field: 'visible', editor: 'Switch', label: '可见', category: 'basic' } |
|||
] as IMeta |
|||
@ -0,0 +1,12 @@ |
|||
import type { PropertySetter } from "@/core/base/PropertyTypes.ts"; |
|||
import { basicFieldsSetter } from "@/editor/widgets/property/PropertyPanelConstant.ts"; |
|||
|
|||
const propertySetter: PropertySetter = { |
|||
flatten: { |
|||
fields: [ |
|||
...basicFieldsSetter, |
|||
], |
|||
}, |
|||
}; |
|||
|
|||
export default propertySetter; |
|||
Loading…
Reference in new issue