110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
<template>
|
|
<div class="form-container">
|
|
<Form :model="formData" ref="formRef" layout="vertical">
|
|
<FormItem
|
|
v-for="(field, index) in formFields"
|
|
:key="index"
|
|
:label="field.props.label"
|
|
:name="field.props.name"
|
|
:rules="field.props.rules"
|
|
:tooltip="field.props.tip"
|
|
>
|
|
<Input
|
|
allowClear
|
|
v-if="field.type === 'input'"
|
|
v-model:value="formData[field.props.name]"
|
|
:placeholder="field?.props?.placeholder"
|
|
/>
|
|
<TextArea
|
|
v-if="field.type === 'textarea'"
|
|
style="width: 500px; height: 200px"
|
|
v-model:value="formData[field.props.name]"
|
|
:placeholder="field?.props?.placeholder"
|
|
/>
|
|
<ImageUpload
|
|
v-if="field.type == 'upload_image'"
|
|
v-model="formData[field.props.name]"
|
|
:limit="field.props.limit"
|
|
></ImageUpload>
|
|
<FileUpload
|
|
v-if="field.type == 'upload_file'"
|
|
v-model="formData[field.props.name]"
|
|
:limit="field.props.limit"
|
|
></FileUpload>
|
|
<Select
|
|
v-else-if="field.type === 'select'"
|
|
v-model:value="formData[field.props.name]"
|
|
:placeholder="field.placeholder"
|
|
>
|
|
<Option v-for="(option, optIndex) in field.props.options" :key="optIndex" :value="option.value">
|
|
{{ option.label }}
|
|
</Option>
|
|
</Select>
|
|
</FormItem>
|
|
</Form>
|
|
<Button class="submit-btn" type="primary" :disabled="loading" @click="handleSubmit">提交执行</Button>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { defineProps, defineEmits } from 'vue';
|
|
import ImageUpload from '@/components/upload/ImageUpload.vue';
|
|
import FileUpload from '@/components/upload/FileUpload.vue';
|
|
import { Button, Input, Select, Row, Col, Form } from 'ant-design-vue';
|
|
const { TextArea } = Input;
|
|
const { Option } = Select;
|
|
const { Item: FormItem } = Form;
|
|
|
|
const props = defineProps({
|
|
formFields: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
formData: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
loading: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const emit = defineEmits(['submit']);
|
|
const formRef = ref(null);
|
|
const handleSubmit = async () => {
|
|
const errors = await formRef.value.validate();
|
|
if (errors) return;
|
|
console.log(props.formFields, 'props.formFields');
|
|
emit('submit', props.formData);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.form-container {
|
|
:deep(.ant-input),
|
|
:deep(.ant-input:focus),
|
|
:deep(.ant-input-focused) {
|
|
border-radius: 4px;
|
|
border-color: #d7d7d9;
|
|
background-color: #fff;
|
|
height: 35px;
|
|
width: 300px;
|
|
|
|
&:focus,
|
|
&:focus-within {
|
|
background-color: var(--color-bg-2);
|
|
border-color: rgb(var(--primary-6));
|
|
box-shadow: 0 0 0 0 var(--color-primary-light-2);
|
|
}
|
|
}
|
|
|
|
&.ant-textarea-wrapper {
|
|
height: 60px;
|
|
}
|
|
|
|
.submit-btn {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
</style>
|