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