<!--
|
* @Description: 右侧属性面板控件 表单属性面板
|
-->
|
<template>
|
<div class="properties-content">
|
<Form class="properties-body" label-align="left" layout="vertical">
|
<!-- <e-upload v-model="fileList"></e-upload>-->
|
|
<FormItem label="表单布局">
|
<RadioGroup button-style="solid" v-model:value="formConfig.layout">
|
<RadioButton value="horizontal">水平</RadioButton>
|
<RadioButton value="vertical" :disabled="formConfig.labelLayout === 'Grid'">
|
垂直
|
</RadioButton>
|
<RadioButton value="inline" :disabled="formConfig.labelLayout === 'Grid'">
|
行内
|
</RadioButton>
|
</RadioGroup>
|
</FormItem>
|
|
<!-- <Row> -->
|
<FormItem label="标签布局">
|
<RadioGroup
|
buttonStyle="solid"
|
v-model:value="formConfig.labelLayout"
|
@change="lableLayoutChange"
|
>
|
<RadioButton value="flex">固定</RadioButton>
|
<RadioButton value="Grid" :disabled="formConfig.layout !== 'horizontal'">
|
栅格
|
</RadioButton>
|
</RadioGroup>
|
</FormItem>
|
<!-- </Row> -->
|
<FormItem label="标签宽度（px）" v-show="formConfig.labelLayout === 'flex'">
|
<InputNumber
|
:style="{ width: '100%' }"
|
v-model:value="formConfig.labelWidth"
|
:min="0"
|
:step="1"
|
/>
|
</FormItem>
|
<div v-if="formConfig.labelLayout === 'Grid'">
|
<FormItem label="labelCol">
|
<Slider v-model:value="sliderSpan" :max="24" />
|
</FormItem>
|
<FormItem label="wrapperCol">
|
<Slider v-model:value="sliderSpan" :max="24" />
|
</FormItem>
|
|
<FormItem label="标签对齐">
|
<RadioGroup button-style="solid" v-model:value="formConfig.labelAlign">
|
<RadioButton value="left">靠左</RadioButton>
|
<RadioButton value="right">靠右</RadioButton>
|
</RadioGroup>
|
</FormItem>
|
|
<FormItem label="控件大小">
|
<RadioGroup button-style="solid" v-model:value="formConfig.size">
|
<RadioButton value="default">默认</RadioButton>
|
<RadioButton value="small">小</RadioButton>
|
<RadioButton value="large">大</RadioButton>
|
</RadioGroup>
|
</FormItem>
|
</div>
|
<FormItem label="表单属性">
|
<Col
|
><Checkbox v-model:checked="formConfig.colon" v-if="formConfig.layout == 'horizontal'"
|
>label后面显示冒号</Checkbox
|
></Col
|
>
|
<Col><Checkbox v-model:checked="formConfig.disabled">禁用</Checkbox></Col>
|
<Col><Checkbox v-model:checked="formConfig.hideRequiredMark">隐藏必选标记</Checkbox></Col>
|
</FormItem>
|
</Form>
|
</div>
|
</template>
|
<script lang="ts" setup name="FormProps">
|
import { computed } from 'vue';
|
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
import {
|
InputNumber,
|
Slider,
|
Checkbox,
|
Col,
|
RadioChangeEvent,
|
Form,
|
FormItem,
|
} from 'ant-design-vue';
|
|
const { formConfig } = useFormDesignState();
|
|
formConfig.value = formConfig.value || {
|
labelCol: { span: 24 },
|
wrapperCol: { span: 24 },
|
};
|
|
const lableLayoutChange = (e: RadioChangeEvent) => {
|
if (e.target.value === 'Grid') {
|
formConfig.value.layout = 'horizontal';
|
}
|
};
|
|
const sliderSpan = computed(() => {
|
if (formConfig.value.labelLayout) {
|
return Number(formConfig.value.labelCol!.span);
|
}
|
return 0;
|
});
|
</script>
|
