1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| <!--
| * @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 v-else label-align="left" layout="vertical">
| <div v-for="item of baseItemColumnProps" :key="item.name">
| <FormItem :label="item.label" v-if="showProps(item.exclude)">
| <component
| v-if="formConfig.currentItem.colProps && item.component"
| class="component-props"
| v-bind="item.componentProps"
| :is="item.component"
| v-model:value="formConfig.currentItem.colProps[item.name]"
| />
| </FormItem>
| </div>
| </Form>
| </div>
| </div>
| </template>
| <script lang="ts">
| import { defineComponent } from 'vue';
| import { baseItemColumnProps } from '../config/formItemPropsConfig';
|
| import { Empty, Input, Form, FormItem, Switch, Checkbox, Select, Slider } from 'ant-design-vue';
| import RuleProps from './RuleProps.vue';
| import { useFormDesignState } from '../../../hooks/useFormDesignState';
| import { isArray } from 'lodash-es';
|
| export default defineComponent({
| name: 'FormItemProps',
| components: {
| RuleProps,
| Empty,
| Input,
| Form,
| FormItem,
| Switch,
| Checkbox,
| Select,
| Slider,
| },
| // props: {} as PropsOptions,
|
| setup() {
| const { formConfig } = useFormDesignState();
| const showProps = (exclude: string[] | undefined) => {
| if (!exclude) {
| return true;
| }
|
| return isArray(exclude) ? !exclude.includes(formConfig.value.currentItem!.component) : true;
| };
| return {
| baseItemColumnProps,
| formConfig,
| showProps,
| };
| },
| });
| </script>
|
|
