<!--
|
* @Description: 组件属性控件
|
-->
|
<template>
|
<div class="properties-content">
|
<div class="properties-body" v-if="formConfig.currentItem">
|
<Empty class="hint-box" v-if="!formConfig.currentItem.key" description="未选择组件" />
|
|
<Form label-align="left" layout="vertical">
|
<!-- 循环遍历渲染组件属性 -->
|
|
<div v-if="formConfig.currentItem && formConfig.currentItem.componentProps">
|
<FormItem v-for="item in inputOptions" :key="item.name" :label="item.label">
|
<!-- 处理数组属性，placeholder -->
|
|
<div v-if="item.children">
|
<template v-for="(child, index) of item.children" :key="index">
|
<component
|
v-if="child.component"
|
v-bind="child.componentProps"
|
v-model:value="formConfig.currentItem.componentProps[item.name][index]"
|
:is="child.component"
|
/>
|
</template>
|
</div>
|
<!-- 如果不是数组，则正常处理属性值 -->
|
<component
|
v-else-if="item.component"
|
class="component-prop"
|
v-bind="item.componentProps"
|
:is="item.component"
|
v-model:value="formConfig.currentItem.componentProps[item.name]"
|
/>
|
</FormItem>
|
<FormItem label="控制属性">
|
<Col v-for="item in controlOptions" :key="item.name">
|
<Checkbox
|
v-if="showControlAttrs(item.includes)"
|
v-bind="item.componentProps"
|
v-model:checked="formConfig.currentItem.componentProps[item.name]"
|
>
|
{{ item.label }}
|
</Checkbox>
|
</Col>
|
</FormItem>
|
</div>
|
<FormItem label="关联字段">
|
<Select
|
mode="multiple"
|
v-model:value="formConfig.currentItem['link']"
|
:options="linkOptions"
|
/>
|
</FormItem>
|
|
<FormItem
|
label="选项"
|
v-if="
|
[
|
'Select',
|
'CheckboxGroup',
|
'RadioGroup',
|
'TreeSelect',
|
'Cascader',
|
'AutoComplete',
|
].includes(formConfig.currentItem.component)
|
"
|
>
|
<FormOptions />
|
</FormItem>
|
|
<FormItem label="栅格" v-if="['Grid'].includes(formConfig.currentItem.component)">
|
<FormOptions />
|
</FormItem>
|
</Form>
|
</div>
|
</div>
|
</template>
|
<script lang="ts">
|
import {
|
Empty,
|
Input,
|
Form,
|
FormItem,
|
Switch,
|
Checkbox,
|
Select,
|
InputNumber,
|
RadioGroup,
|
Col,
|
Row,
|
} from 'ant-design-vue';
|
import RadioButtonGroup from '@/components/Form/src/components/RadioButtonGroup.vue';
|
import { computed, defineComponent, ref, watch } from 'vue';
|
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
import {
|
baseComponentControlAttrs,
|
baseComponentAttrs,
|
baseComponentCommonAttrs,
|
componentPropsFuncs,
|
} from '../../VFormDesign/config/componentPropsConfig';
|
import FormOptions from './FormOptions.vue';
|
import { formItemsForEach, remove } from '../../../utils';
|
import { IBaseFormAttrs } from '../config/formItemPropsConfig';
|
|
export default defineComponent({
|
name: 'ComponentProps',
|
components: {
|
FormOptions,
|
Empty,
|
Input,
|
Form,
|
FormItem,
|
Switch,
|
Checkbox,
|
Select,
|
InputNumber,
|
RadioGroup,
|
RadioButtonGroup,
|
Col,
|
Row,
|
},
|
setup() {
|
// 让compuated属性自动更新
|
|
const allOptions = ref([] as Omit<IBaseFormAttrs, 'tag'>[]);
|
const showControlAttrs = (includes: string[] | undefined) => {
|
if (!includes) return true;
|
return includes.includes(formConfig.value.currentItem!.component);
|
};
|
|
const { formConfig } = useFormDesignState();
|
|
if (formConfig.value.currentItem) {
|
formConfig.value.currentItem.componentProps =
|
formConfig.value.currentItem.componentProps || {};
|
}
|
|
watch(
|
() => formConfig.value.currentItem?.field,
|
(_newValue, oldValue) => {
|
formConfig.value.schemas &&
|
formItemsForEach(formConfig.value.schemas, (item) => {
|
if (item.link) {
|
const index = item.link.findIndex((linkItem) => linkItem === oldValue);
|
index !== -1 && remove(item.link, index);
|
}
|
});
|
},
|
);
|
|
watch(
|
() => formConfig.value.currentItem && formConfig.value.currentItem.component,
|
() => {
|
allOptions.value = [];
|
baseComponentControlAttrs.forEach((item) => {
|
item.category = 'control';
|
if (!item.includes) {
|
// 如果属性没有include，所有的控件都适用
|
|
allOptions.value.push(item);
|
} else if (item.includes.includes(formConfig.value.currentItem!.component)) {
|
// 如果有include，检查是否包含了当前控件类型
|
allOptions.value.push(item);
|
}
|
});
|
|
baseComponentCommonAttrs.forEach((item) => {
|
item.category = 'input';
|
if (item.includes) {
|
if (item.includes.includes(formConfig.value.currentItem!.component)) {
|
allOptions.value.push(item);
|
}
|
} else if (item.exclude) {
|
if (!item.exclude.includes(formConfig.value.currentItem!.component)) {
|
allOptions.value.push(item);
|
}
|
} else {
|
allOptions.value.push(item);
|
}
|
});
|
|
baseComponentAttrs[formConfig.value.currentItem!.component] &&
|
baseComponentAttrs[formConfig.value.currentItem!.component].forEach(async (item) => {
|
if (item.component) {
|
if (['Switch', 'Checkbox', 'Radio'].includes(item.component as string)) {
|
item.category = 'control';
|
allOptions.value.push(item);
|
} else {
|
item.category = 'input';
|
allOptions.value.push(item);
|
}
|
}
|
});
|
},
|
{
|
immediate: true,
|
},
|
);
|
// 控制性的选项
|
const controlOptions = computed(() => {
|
return allOptions.value.filter((item) => {
|
return item.category === 'control';
|
});
|
});
|
|
// 非控制性选择
|
const inputOptions = computed(() => {
|
return allOptions.value.filter((item) => {
|
return item.category === 'input';
|
});
|
});
|
|
watch(
|
() => formConfig.value.currentItem!.componentProps,
|
() => {
|
const func = componentPropsFuncs[formConfig.value.currentItem!.component];
|
if (func) {
|
func(formConfig.value.currentItem!.componentProps, allOptions.value);
|
}
|
},
|
{
|
immediate: true,
|
deep: true,
|
},
|
);
|
const linkOptions = computed(() => {
|
return (
|
formConfig.value.schemas &&
|
formConfig.value.schemas
|
.filter((item) => item.key !== formConfig.value.currentItem!.key)
|
.map(({ label, field }) => ({ label: label + '/' + field, value: field }))
|
);
|
});
|
return {
|
formConfig,
|
showControlAttrs,
|
linkOptions,
|
controlOptions,
|
inputOptions,
|
};
|
},
|
});
|
</script>
|
