colin
5 months ago
19 changed files with 771 additions and 73 deletions
@ -0,0 +1,32 @@ |
|||||
|
<!-- components/FeatureGroup.vue --> |
||||
|
<script setup lang="ts"> |
||||
|
import type { FeatureDto, FeatureGroupDto } from '../../types/features'; |
||||
|
import type { TreeNode } from './tree'; |
||||
|
|
||||
|
import { Card } from 'ant-design-vue'; |
||||
|
|
||||
|
import FeatureTreeNode from './FeatureTreeNode.vue'; |
||||
|
|
||||
|
defineProps<{ |
||||
|
baseIndentSize?: number; |
||||
|
group: FeatureGroupDto & { _treeRoots?: TreeNode[] }; |
||||
|
groupIndex: number; |
||||
|
}>(); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(event: 'change', feature: FeatureDto, groupIndex: number): void; |
||||
|
}>(); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<Card :bordered="false" :title="group.displayName"> |
||||
|
<div v-for="root in group._treeRoots" :key="root.feature.name"> |
||||
|
<FeatureTreeNode |
||||
|
:node="root" |
||||
|
:group-index="groupIndex" |
||||
|
:base-indent-size="baseIndentSize" |
||||
|
@change="(feature, idx) => emit('change', feature, idx)" |
||||
|
/> |
||||
|
</div> |
||||
|
</Card> |
||||
|
</template> |
||||
@ -0,0 +1,133 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import type { Validator } from '@abp/core'; |
||||
|
|
||||
|
import type { FeatureDto } from '../../types/features'; |
||||
|
|
||||
|
import { computed } from 'vue'; |
||||
|
|
||||
|
import { useValidation } from '@abp/core'; |
||||
|
import { Checkbox, Form, Input, InputNumber, Select } from 'ant-design-vue'; |
||||
|
|
||||
|
const props = defineProps<{ |
||||
|
feature: FeatureDto; |
||||
|
featureIndex: number; |
||||
|
groupIndex: number; |
||||
|
}>(); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(event: 'change', feature: FeatureDto, groupIndex: number): void; |
||||
|
}>(); |
||||
|
|
||||
|
const FormItem = Form.Item; |
||||
|
|
||||
|
const { |
||||
|
fieldMustBeetWeen, |
||||
|
fieldMustBeStringWithMinimumLengthAndMaximumLength, |
||||
|
fieldRequired, |
||||
|
} = useValidation(); |
||||
|
|
||||
|
function createRules(field: string, validator: Validator) { |
||||
|
const featureRules: any[] = []; |
||||
|
if (validator?.properties) { |
||||
|
switch (validator.name) { |
||||
|
case 'NUMERIC': { |
||||
|
featureRules.push( |
||||
|
...fieldMustBeetWeen({ |
||||
|
end: Number(validator.properties.MaxValue), |
||||
|
name: field, |
||||
|
start: Number(validator.properties.MinValue), |
||||
|
trigger: 'change', |
||||
|
}), |
||||
|
); |
||||
|
break; |
||||
|
} |
||||
|
case 'STRING': { |
||||
|
if (validator.properties.AllowNull?.toLowerCase() === 'true') { |
||||
|
featureRules.push( |
||||
|
...fieldRequired({ |
||||
|
name: field, |
||||
|
trigger: 'blur', |
||||
|
}), |
||||
|
); |
||||
|
} |
||||
|
featureRules.push( |
||||
|
...fieldMustBeStringWithMinimumLengthAndMaximumLength({ |
||||
|
maximum: Number(validator.properties.MaxLength), |
||||
|
minimum: Number(validator.properties.MinLength), |
||||
|
name: field, |
||||
|
trigger: 'blur', |
||||
|
}), |
||||
|
); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return featureRules; |
||||
|
} |
||||
|
|
||||
|
function handleChange() { |
||||
|
emit('change', props.feature, props.groupIndex); |
||||
|
} |
||||
|
|
||||
|
const isCheckbox = computed( |
||||
|
() => |
||||
|
props.feature.valueType?.name === 'ToggleStringValueType' && |
||||
|
props.feature.valueType?.validator?.name === 'BOOLEAN', |
||||
|
); |
||||
|
|
||||
|
const isFreeText = computed( |
||||
|
() => props.feature.valueType?.name === 'FreeTextStringValueType', |
||||
|
); |
||||
|
|
||||
|
const isNumeric = computed( |
||||
|
() => props.feature.valueType?.validator?.name === 'NUMERIC', |
||||
|
); |
||||
|
|
||||
|
const isSelection = computed( |
||||
|
() => props.feature.valueType?.name === 'SelectionStringValueType', |
||||
|
); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<FormItem |
||||
|
v-if="feature.valueType !== null" |
||||
|
:name="['groups', groupIndex, 'features', featureIndex, 'value']" |
||||
|
:label="feature.displayName" |
||||
|
:extra="feature.description" |
||||
|
:rules="createRules(feature.displayName, feature.valueType.validator)" |
||||
|
> |
||||
|
<!-- 复选框类型 --> |
||||
|
<Checkbox |
||||
|
v-if="isCheckbox" |
||||
|
v-model:checked="feature.value" |
||||
|
@change="handleChange" |
||||
|
> |
||||
|
{{ feature.displayName }} |
||||
|
</Checkbox> |
||||
|
|
||||
|
<!-- 文本/数字类型 --> |
||||
|
<div v-else-if="isFreeText"> |
||||
|
<InputNumber |
||||
|
v-if="isNumeric" |
||||
|
style="width: 100%" |
||||
|
v-model:value="feature.value" |
||||
|
@change="handleChange" |
||||
|
/> |
||||
|
<Input |
||||
|
v-else |
||||
|
v-model:value="feature.value" |
||||
|
autocomplete="off" |
||||
|
@change="handleChange" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 选择类型 --> |
||||
|
<Select |
||||
|
v-else-if="isSelection" |
||||
|
v-model:value="feature.value" |
||||
|
:options="feature.valueType.itemSource?.items" |
||||
|
:field-names="{ label: 'displayName', value: 'value' }" |
||||
|
@change="handleChange" |
||||
|
/> |
||||
|
</FormItem> |
||||
|
</template> |
||||
@ -0,0 +1,47 @@ |
|||||
|
<!-- components/FeatureTreeNode.vue --> |
||||
|
<script setup lang="ts"> |
||||
|
import type { FeatureDto } from '../../types/features'; |
||||
|
import type { TreeNode } from './tree'; |
||||
|
|
||||
|
import { computed } from 'vue'; |
||||
|
|
||||
|
import FeatureInput from './FeatureInput.vue'; |
||||
|
import { getIndentStyle } from './useFeatureTree'; |
||||
|
|
||||
|
const props = defineProps<{ |
||||
|
baseIndentSize?: number; |
||||
|
groupIndex: number; |
||||
|
node: TreeNode; |
||||
|
}>(); |
||||
|
|
||||
|
const emit = defineEmits<{ |
||||
|
(event: 'change', feature: FeatureDto, groupIndex: number): void; |
||||
|
}>(); |
||||
|
|
||||
|
const indentSize = computed(() => props.baseIndentSize || 8); |
||||
|
const indentStyle = computed(() => |
||||
|
getIndentStyle(props.node.level, indentSize.value), |
||||
|
); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<div v-if="node.visible"> |
||||
|
<div :style="{ marginLeft: indentStyle }"> |
||||
|
<FeatureInput |
||||
|
:feature="node.feature" |
||||
|
:group-index="groupIndex" |
||||
|
:feature-index="0" |
||||
|
@change="(feature, idx) => emit('change', feature, idx)" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<template v-for="child in node.children" :key="child.feature.name"> |
||||
|
<FeatureTreeNode |
||||
|
:node="child" |
||||
|
:group-index="groupIndex" |
||||
|
:base-indent-size="baseIndentSize" |
||||
|
@change="(feature, idx) => emit('change', feature, idx)" |
||||
|
/> |
||||
|
</template> |
||||
|
</div> |
||||
|
</template> |
||||
@ -0,0 +1,188 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import type { FormInstance } from 'ant-design-vue/es/form/Form'; |
||||
|
|
||||
|
import type { FeatureGroupDto, UpdateFeaturesDto } from '../../types/features'; |
||||
|
|
||||
|
import { computed, ref, toValue, useTemplateRef } from 'vue'; |
||||
|
|
||||
|
import { useVbenModal } from '@vben/common-ui'; |
||||
|
import { $t } from '@vben/locales'; |
||||
|
|
||||
|
import { Form, message, Tabs } from 'ant-design-vue'; |
||||
|
|
||||
|
import { useFeaturesApi } from '../../api/useFeaturesApi'; |
||||
|
import FeatureGroup from './FeatureGroup.vue'; |
||||
|
import { |
||||
|
buildFeatureTree, |
||||
|
onFeatureValueChange, |
||||
|
processAllFeatures, |
||||
|
updateVisibility, |
||||
|
} from './useFeatureTree'; |
||||
|
|
||||
|
const TabPane = Tabs.TabPane; |
||||
|
|
||||
|
interface ModalState { |
||||
|
displayName?: string; |
||||
|
providerKey?: string; |
||||
|
providerName: string; |
||||
|
readonly?: boolean; |
||||
|
} |
||||
|
|
||||
|
interface FormModel { |
||||
|
groups: FeatureGroupDto[]; |
||||
|
} |
||||
|
|
||||
|
const activeTabKey = ref(''); |
||||
|
const modelState = ref<ModalState>(); |
||||
|
const formModel = ref<FormModel>({ groups: [] }); |
||||
|
const form = useTemplateRef<FormInstance>('form'); |
||||
|
|
||||
|
const getModalTitle = computed(() => { |
||||
|
if (modelState.value?.displayName) { |
||||
|
return `${$t('AbpFeatureManagement.Features')} - ${modelState.value.displayName}`; |
||||
|
} |
||||
|
return $t('AbpFeatureManagement.Features'); |
||||
|
}); |
||||
|
|
||||
|
const { getApi, updateApi } = useFeaturesApi(); |
||||
|
|
||||
|
const [Modal, modalApi] = useVbenModal({ |
||||
|
centered: true, |
||||
|
class: 'w-1/2', |
||||
|
async onConfirm() { |
||||
|
await form.value?.validate(); |
||||
|
await onSubmit(); |
||||
|
}, |
||||
|
async onOpenChange(isOpen) { |
||||
|
if (isOpen) { |
||||
|
formModel.value = { groups: [] }; |
||||
|
await onGet(); |
||||
|
if (formModel.value?.groups.length > 0) { |
||||
|
activeTabKey.value = formModel.value.groups[0]?.name!; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
}); |
||||
|
|
||||
|
function mapFeatures(groups: FeatureGroupDto[]): FeatureGroupDto[] { |
||||
|
groups.forEach((group) => { |
||||
|
// 构建树形结构 |
||||
|
const treeRoots = buildFeatureTree(group.features); |
||||
|
|
||||
|
// 存储树形结构到 group 中供模板使用 |
||||
|
(group as any)._treeRoots = treeRoots; |
||||
|
(group as any)._allFeatures = [...group.features]; |
||||
|
|
||||
|
// 初始化可见性 |
||||
|
treeRoots.forEach((root) => updateVisibility(root, true)); |
||||
|
|
||||
|
// 处理特性值类型转换 |
||||
|
processAllFeatures(treeRoots); |
||||
|
}); |
||||
|
return groups; |
||||
|
} |
||||
|
|
||||
|
function getFeatureInput(groups: FeatureGroupDto[]): UpdateFeaturesDto { |
||||
|
const input: UpdateFeaturesDto = { |
||||
|
features: [], |
||||
|
}; |
||||
|
groups.forEach((g) => { |
||||
|
const features = (g as any)._allFeatures || g.features; |
||||
|
features.forEach((f: any) => { |
||||
|
if (f.value !== null && f.value !== undefined && f.value !== '') { |
||||
|
input.features.push({ |
||||
|
name: f.name, |
||||
|
value: String(f.value), |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
return input; |
||||
|
} |
||||
|
|
||||
|
async function onGet() { |
||||
|
try { |
||||
|
modalApi.setState({ loading: true }); |
||||
|
const state = modalApi.getData<ModalState>(); |
||||
|
const { groups } = await getApi({ |
||||
|
providerKey: state.providerKey, |
||||
|
providerName: state.providerName, |
||||
|
}); |
||||
|
formModel.value = { |
||||
|
groups: mapFeatures(groups), |
||||
|
}; |
||||
|
modelState.value = state; |
||||
|
} finally { |
||||
|
modalApi.setState({ loading: false }); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function handleFeatureChange(feature: any, groupIndex: number) { |
||||
|
const group = formModel.value.groups[groupIndex]; |
||||
|
const treeRoots = (group as any)._treeRoots; |
||||
|
if (treeRoots) { |
||||
|
onFeatureValueChange(feature, treeRoots); |
||||
|
// 强制更新视图 |
||||
|
formModel.value = { ...formModel.value }; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
async function onSubmit() { |
||||
|
try { |
||||
|
modalApi.setState({ submitting: true }); |
||||
|
const model = toValue(formModel); |
||||
|
const state = modalApi.getData<ModalState>(); |
||||
|
const input = getFeatureInput(model.groups); |
||||
|
await updateApi( |
||||
|
{ |
||||
|
providerKey: state.providerKey, |
||||
|
providerName: state.providerName, |
||||
|
}, |
||||
|
input, |
||||
|
); |
||||
|
message.success($t('AbpUi.SavedSuccessfully')); |
||||
|
await onGet(); |
||||
|
} finally { |
||||
|
modalApi.setState({ submitting: false }); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<Modal :title="getModalTitle"> |
||||
|
<Form :model="formModel" ref="form"> |
||||
|
<Tabs tab-position="left" type="card" v-model:active-key="activeTabKey"> |
||||
|
<TabPane |
||||
|
v-for="(group, gi) in formModel.groups" |
||||
|
:key="group.name" |
||||
|
:tab="group.displayName" |
||||
|
> |
||||
|
<FeatureGroup |
||||
|
:group="group" |
||||
|
:group-index="gi" |
||||
|
:base-indent-size="8" |
||||
|
@change="handleFeatureChange" |
||||
|
/> |
||||
|
</TabPane> |
||||
|
</Tabs> |
||||
|
</Form> |
||||
|
</Modal> |
||||
|
</template> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
:deep(.ant-tabs) { |
||||
|
height: 34rem; |
||||
|
|
||||
|
.ant-tabs-nav { |
||||
|
width: 14rem; |
||||
|
} |
||||
|
|
||||
|
.ant-tabs-content-holder { |
||||
|
overflow: hidden auto !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
:deep(.ant-form-item) { |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,9 @@ |
|||||
|
import type { FeatureDto } from '../../types/features'; |
||||
|
|
||||
|
export interface TreeNode { |
||||
|
children: TreeNode[]; |
||||
|
feature: FeatureDto; |
||||
|
level: number; |
||||
|
parent?: TreeNode; |
||||
|
visible: boolean; |
||||
|
} |
||||
@ -0,0 +1,167 @@ |
|||||
|
import type { FeatureDto } from '../../types/features'; |
||||
|
import type { TreeNode } from './tree'; |
||||
|
|
||||
|
import { $t } from '@vben/locales'; |
||||
|
|
||||
|
/** |
||||
|
* 将扁平的特性列表转换为树形结构 |
||||
|
*/ |
||||
|
export function buildFeatureTree(features: FeatureDto[]): TreeNode[] { |
||||
|
const nodeMap = new Map<string, TreeNode>(); |
||||
|
const roots: TreeNode[] = []; |
||||
|
|
||||
|
// 创建所有节点
|
||||
|
features.forEach((feature) => { |
||||
|
const node: TreeNode = { |
||||
|
feature, |
||||
|
children: [], |
||||
|
level: 0, |
||||
|
visible: true, |
||||
|
}; |
||||
|
nodeMap.set(feature.name, node); |
||||
|
}); |
||||
|
|
||||
|
// 建立父子关系
|
||||
|
features.forEach((feature) => { |
||||
|
const node = nodeMap.get(feature.name); |
||||
|
if (node && feature.parentName && nodeMap.has(feature.parentName)) { |
||||
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
|
const parent = nodeMap.get(feature.parentName)!; |
||||
|
parent.children.push(node); |
||||
|
node.parent = parent; |
||||
|
node.level = parent.level + 1; |
||||
|
} else if (node && !feature.parentName) { |
||||
|
roots.push(node); |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
// 对子节点进行排序
|
||||
|
const sortChildren = (nodes: TreeNode[]) => { |
||||
|
nodes.forEach((node) => { |
||||
|
if (node.children.length > 0) { |
||||
|
node.children.sort((a, b) => |
||||
|
a.feature.displayName.localeCompare(b.feature.displayName), |
||||
|
); |
||||
|
sortChildren(node.children); |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
sortChildren(roots); |
||||
|
|
||||
|
return roots; |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 更新节点的可见性（基于父级状态） |
||||
|
*/ |
||||
|
export function updateVisibility( |
||||
|
node: TreeNode, |
||||
|
parentVisible: boolean = true, |
||||
|
): void { |
||||
|
node.visible = parentVisible; |
||||
|
|
||||
|
if (isCheckboxFeature(node.feature)) { |
||||
|
const isChecked = Boolean(node.feature.value); |
||||
|
node.children.forEach((child) => { |
||||
|
updateVisibility(child, parentVisible && isChecked); |
||||
|
}); |
||||
|
} else { |
||||
|
node.children.forEach((child) => { |
||||
|
updateVisibility(child, parentVisible); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 检查是否为复选框类型的特性 |
||||
|
*/ |
||||
|
export function isCheckboxFeature(feature: FeatureDto): boolean { |
||||
|
return ( |
||||
|
feature.valueType?.name === 'ToggleStringValueType' && |
||||
|
feature.valueType?.validator?.name === 'BOOLEAN' |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 当特性值改变时，更新其子节点的可见性 |
||||
|
*/ |
||||
|
export function onFeatureValueChange( |
||||
|
feature: FeatureDto, |
||||
|
treeNodes: TreeNode[], |
||||
|
): void { |
||||
|
const findNode = (nodes: TreeNode[]): null | TreeNode => { |
||||
|
for (const node of nodes) { |
||||
|
if (node.feature.name === feature.name) { |
||||
|
return node; |
||||
|
} |
||||
|
const found = findNode(node.children); |
||||
|
if (found) return found; |
||||
|
} |
||||
|
return null; |
||||
|
}; |
||||
|
|
||||
|
const node = findNode(treeNodes); |
||||
|
if (node && isCheckboxFeature(node.feature)) { |
||||
|
updateVisibility(node, true); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 处理特性值类型转换 |
||||
|
*/ |
||||
|
export function processFeatureValue(feature: FeatureDto): void { |
||||
|
if (feature.valueType?.name === 'SelectionStringValueType') { |
||||
|
const valueType = feature.valueType as any; |
||||
|
if (valueType.itemSource?.items) { |
||||
|
valueType.itemSource.items.forEach((valueItem: any) => { |
||||
|
if (valueItem.displayText?.resourceName === 'Fixed') { |
||||
|
valueItem.displayName = valueItem.displayText.name; |
||||
|
} else if ( |
||||
|
valueItem.displayText?.resourceName && |
||||
|
valueItem.displayText?.name |
||||
|
) { |
||||
|
valueItem.displayName = $t( |
||||
|
`${valueItem.displayText.resourceName}.${valueItem.displayText.name}`, |
||||
|
); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} else { |
||||
|
switch (feature.valueType?.validator?.name) { |
||||
|
case 'BOOLEAN': { |
||||
|
feature.value = String(feature.value).toLocaleLowerCase() === 'true'; |
||||
|
break; |
||||
|
} |
||||
|
case 'NUMERIC': { |
||||
|
if ( |
||||
|
feature.value !== null && |
||||
|
feature.value !== undefined && |
||||
|
feature.value !== '' |
||||
|
) { |
||||
|
feature.value = Number(feature.value); |
||||
|
} |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 递归处理所有特性值 |
||||
|
*/ |
||||
|
export function processAllFeatures(treeNodes: TreeNode[]): void { |
||||
|
const traverse = (nodes: TreeNode[]) => { |
||||
|
nodes.forEach((node) => { |
||||
|
processFeatureValue(node.feature); |
||||
|
traverse(node.children); |
||||
|
}); |
||||
|
}; |
||||
|
traverse(treeNodes); |
||||
|
} |
||||
|
|
||||
|
/** |
||||
|
* 获取缩进样式 |
||||
|
*/ |
||||
|
export function getIndentStyle(level: number, indentSize: number = 8): string { |
||||
|
return `${level * indentSize}px`; |
||||
|
} |
||||
Loading…
Reference in new issue