|
|
|
|
@ -1,22 +1,9 @@
|
|
|
|
|
<!-- |
|
|
|
|
* @Description: 组件属性控件 |
|
|
|
|
--> |
|
|
|
|
<script lang="ts"> |
|
|
|
|
import { |
|
|
|
|
Checkbox, |
|
|
|
|
Col, |
|
|
|
|
Empty, |
|
|
|
|
Form, |
|
|
|
|
FormItem, |
|
|
|
|
Input, |
|
|
|
|
InputNumber, |
|
|
|
|
RadioGroup, |
|
|
|
|
Row, |
|
|
|
|
Select, |
|
|
|
|
Switch, |
|
|
|
|
} from 'ant-design-vue' |
|
|
|
|
import RadioButtonGroup from '/@/components/Form/src/components/RadioButtonGroup.vue' |
|
|
|
|
import { computed, defineComponent, ref, watch } from 'vue' |
|
|
|
|
<script lang="ts" setup> |
|
|
|
|
import { Checkbox, Col, Empty, Form, FormItem, Select } from 'ant-design-vue' |
|
|
|
|
import { computed, ref, watch } from 'vue' |
|
|
|
|
import { useFormDesignState } from '../../../hooks/useFormDesignState' |
|
|
|
|
import { |
|
|
|
|
baseComponentAttrs, |
|
|
|
|
@ -28,35 +15,15 @@ import { formItemsForEach, remove } from '../../../utils'
|
|
|
|
|
import type { IBaseFormAttrs } from '../config/formItemPropsConfig' |
|
|
|
|
import FormOptions from './FormOptions.vue' |
|
|
|
|
|
|
|
|
|
export default defineComponent({ |
|
|
|
|
name: 'ComponentProps', |
|
|
|
|
components: { |
|
|
|
|
FormOptions, |
|
|
|
|
Empty, |
|
|
|
|
Input, |
|
|
|
|
Form, |
|
|
|
|
FormItem, |
|
|
|
|
Switch, |
|
|
|
|
Checkbox, |
|
|
|
|
Select, |
|
|
|
|
InputNumber, |
|
|
|
|
RadioGroup, |
|
|
|
|
RadioButtonGroup, |
|
|
|
|
Col, |
|
|
|
|
Row, |
|
|
|
|
}, |
|
|
|
|
setup() { |
|
|
|
|
const { formConfig } = useFormDesignState() |
|
|
|
|
// 让compuated属性自动更新 |
|
|
|
|
|
|
|
|
|
const allOptions = ref([] as Omit<IBaseFormAttrs, 'tag'>[]) |
|
|
|
|
const showControlAttrs = (includes: string[] | undefined) => { |
|
|
|
|
function 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 || {} |
|
|
|
|
@ -159,15 +126,6 @@ export default defineComponent({
|
|
|
|
|
.map(({ label, field }) => ({ label: `${label}/${field}`, value: field })) |
|
|
|
|
) |
|
|
|
|
}) |
|
|
|
|
return { |
|
|
|
|
formConfig, |
|
|
|
|
showControlAttrs, |
|
|
|
|
linkOptions, |
|
|
|
|
controlOptions, |
|
|
|
|
inputOptions, |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
@ -184,27 +142,20 @@ export default defineComponent({
|
|
|
|
|
|
|
|
|
|
<div v-if="item.children"> |
|
|
|
|
<component |
|
|
|
|
v-bind="child.componentProps" |
|
|
|
|
:is="child.component" |
|
|
|
|
v-for="(child, index) of item.children" |
|
|
|
|
:key="index" |
|
|
|
|
v-model:value="formConfig.currentItem.componentProps[item.name][index]" |
|
|
|
|
v-bind="child.componentProps" :is="child.component" v-for="(child, index) of item.children" |
|
|
|
|
:key="index" v-model:value="formConfig.currentItem.componentProps[item.name][index]" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
<!-- 如果不是数组，则正常处理属性值 --> |
|
|
|
|
<component |
|
|
|
|
v-bind="item.componentProps" |
|
|
|
|
:is="item.component" |
|
|
|
|
v-else |
|
|
|
|
v-model:value="formConfig.currentItem.componentProps[item.name]" |
|
|
|
|
class="component-prop" |
|
|
|
|
v-bind="item.componentProps" :is="item.component" v-else |
|
|
|
|
v-model:value="formConfig.currentItem.componentProps[item.name]" class="component-prop" |
|
|
|
|
/> |
|
|
|
|
</FormItem> |
|
|
|
|
<FormItem label="控制属性"> |
|
|
|
|
<Col v-for="item in controlOptions" :key="item.name"> |
|
|
|
|
<Checkbox |
|
|
|
|
v-if="showControlAttrs(item.includes)" |
|
|
|
|
v-bind="item.componentProps" |
|
|
|
|
v-if="showControlAttrs(item.includes)" v-bind="item.componentProps" |
|
|
|
|
v-model:checked="formConfig.currentItem.componentProps[item.name]" |
|
|
|
|
> |
|
|
|
|
{{ item.label }} |
|
|
|
|
@ -213,16 +164,11 @@ export default defineComponent({
|
|
|
|
|
</FormItem> |
|
|
|
|
</div> |
|
|
|
|
<FormItem label="关联字段"> |
|
|
|
|
<Select |
|
|
|
|
v-model:value="formConfig.currentItem.link" |
|
|
|
|
mode="multiple" |
|
|
|
|
:options="linkOptions" |
|
|
|
|
/> |
|
|
|
|
<Select v-model:value="formConfig.currentItem.link" mode="multiple" :options="linkOptions" /> |
|
|
|
|
</FormItem> |
|
|
|
|
|
|
|
|
|
<FormItem |
|
|
|
|
v-if=" |
|
|
|
|
[ |
|
|
|
|
v-if="[ |
|
|
|
|
'Select', |
|
|
|
|
'CheckboxGroup', |
|
|
|
|
'RadioGroup', |
|
|
|
|
@ -230,8 +176,7 @@ export default defineComponent({
|
|
|
|
|
'Cascader', |
|
|
|
|
'AutoComplete', |
|
|
|
|
].includes(formConfig.currentItem.component) |
|
|
|
|
" |
|
|
|
|
label="选项" |
|
|
|
|
" label="选项" |
|
|
|
|
> |
|
|
|
|
<FormOptions /> |
|
|
|
|
</FormItem> |
|
|
|
|
|
xingyu
2 years ago