<!--
|
* @Description: 表单项属性，控件属性面板
|
-->
|
<template>
|
<div class="properties-content">
|
<div class="properties-body" v-if="formConfig.currentItem?.itemProps">
|
<Empty class="hint-box" v-if="!formConfig.currentItem.key" description="未选择控件" />
|
<Form v-else label-align="left" layout="vertical">
|
<div v-for="item of baseFormItemProps" :key="item.name">
|
<FormItem :label="item.label" v-if="showProps(item.exclude)">
|
<component
|
v-if="item.component"
|
class="component-props"
|
v-bind="item.componentProps"
|
:is="item.component"
|
v-model:value="formConfig.currentItem[item.name]"
|
/>
|
</FormItem>
|
</div>
|
<div v-for="item of advanceFormItemProps" :key="item.name">
|
<FormItem :label="item.label" v-if="showProps(item.exclude)">
|
<component
|
v-if="item.component"
|
class="component-props"
|
v-bind="item.componentProps"
|
:is="item.component"
|
v-model:value="formConfig.currentItem.itemProps[item.name]"
|
/>
|
</FormItem> </div
|
><div v-for="item of advanceFormItemColProps" :key="item.name">
|
<FormItem :label="item.label" v-if="showProps(item.exclude)">
|
<component
|
v-if="item.component"
|
class="component-props"
|
v-bind="item.componentProps"
|
:is="item.component"
|
v-model:value="formConfig.currentItem.itemProps[item.name]['span']"
|
/>
|
</FormItem>
|
</div>
|
<FormItem label="控制属性" v-if="controlPropsList.length">
|
<Col v-for="item of controlPropsList" :key="item.name">
|
<Checkbox v-model:checked="formConfig.currentItem.itemProps[item.name]">
|
{{ item.label }}
|
</Checkbox>
|
</Col>
|
</FormItem>
|
<FormItem label="是否必选" v-if="!['Grid'].includes(formConfig.currentItem.component)">
|
<Switch v-model:checked="formConfig.currentItem.itemProps['required']" />
|
<Input
|
v-if="formConfig.currentItem.itemProps['required']"
|
v-model:value="formConfig.currentItem.itemProps['message']"
|
placeholder="请输入必选提示"
|
/>
|
</FormItem>
|
<FormItem
|
v-if="!['Grid'].includes(formConfig.currentItem.component)"
|
label="校验规则"
|
:class="{ 'form-rule-props': !!formConfig.currentItem.itemProps['rules'] }"
|
>
|
<RuleProps />
|
</FormItem>
|
</Form>
|
</div>
|
</div>
|
</template>
|
<script lang="ts" setup name="FormItemProps">
|
import { computed, watch } from 'vue';
|
import {
|
baseFormItemControlAttrs,
|
baseFormItemProps,
|
advanceFormItemProps,
|
advanceFormItemColProps,
|
} from '../../VFormDesign/config/formItemPropsConfig';
|
|
import { Empty, Input, Form, FormItem, Switch, Checkbox, Col } from 'ant-design-vue';
|
import RuleProps from './RuleProps.vue';
|
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
import { isArray } from 'lodash-es';
|
|
const { formConfig } = useFormDesignState();
|
|
watch(
|
() => formConfig.value,
|
() => {
|
if (formConfig.value.currentItem) {
|
formConfig.value.currentItem.itemProps = formConfig.value.currentItem.itemProps || {};
|
formConfig.value.currentItem.itemProps.labelCol =
|
formConfig.value.currentItem.itemProps.labelCol || {};
|
formConfig.value.currentItem.itemProps.wrapperCol =
|
formConfig.value.currentItem.itemProps.wrapperCol || {};
|
}
|
},
|
{ deep: true, immediate: true },
|
);
|
const showProps = (exclude: string[] | undefined) => {
|
if (!exclude) {
|
return true;
|
}
|
return isArray(exclude) ? !exclude.includes(formConfig.value.currentItem!.component) : true;
|
};
|
|
const controlPropsList = computed(() => {
|
return baseFormItemControlAttrs.filter((item) => {
|
return showProps(item.exclude);
|
});
|
});
|
</script>
|
