101 lines
3.4 KiB
Django/Jinja
101 lines
3.4 KiB
Django/Jinja
<template>
|
|
<el-form
|
|
ref="ruleFormRef"
|
|
:model="newFormInline"
|
|
:rules="formRules"
|
|
label-width="82px"
|
|
>
|
|
<el-row :gutter="30">
|
|
[% for column in columns if column.is_insert or column.is_edit %]
|
|
<re-col :value="24" :xm="24" :sm="24">
|
|
<el-form-item label="[[ column.column_comment ]]" prop="[[ column.python_name ]]">
|
|
[% if column.show_type == "input" %]
|
|
<el-input
|
|
v-model="newFormInline.[[ column.python_name ]]"
|
|
placeholder="请输入[[ column.column_comment ]]~"
|
|
clearable
|
|
/>
|
|
[% elif column.show_type == "textarea" %]
|
|
<el-input
|
|
v-model="newFormInline.[[ column.python_name ]]"
|
|
type="textarea"
|
|
placeholder="请输入[[ column.column_comment ]]~"
|
|
clearable
|
|
/>
|
|
[% elif column.show_type == "select" %]
|
|
<el-select
|
|
v-model="newFormInline.[[ column.python_name ]]"
|
|
placeholder="请选择[[ column.column_comment ]]~"
|
|
filterable
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in options.[[ column.python_name ]]"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value" />
|
|
</el-select>
|
|
[% elif column.show_type == "radio" %]
|
|
<el-radio-group v-model="newFormInline.[[ column.python_name ]]">
|
|
<el-radio
|
|
v-for="item in options.[[ column.python_name ]]"
|
|
:key="item.value"
|
|
:label="item.value"
|
|
>{{ item.label }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
[% elif column.show_type == "checkbox" %]
|
|
<el-checkbox-group v-model="newFormInline.[[ column.python_name ]]">
|
|
<el-checkbox
|
|
v-for="item in options.[[ column.python_name ]]"
|
|
:key="item.value"
|
|
:label="item.value">
|
|
{{ item.label }}
|
|
</el-checkbox>
|
|
</el-checkbox-group>
|
|
[% elif column.show_type == "datetime" %]
|
|
<el-date-picker
|
|
v-model="newFormInline.[[ column.python_name ]]"
|
|
type="datetime"
|
|
placeholder="请选择[[ column.column_comment ]]~"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
value-format="x" />
|
|
[% endif %]
|
|
</el-form-item>
|
|
</re-col>
|
|
[% endfor %]
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { reactive, ref } from "vue";
|
|
import ReCol from "@/components/ReCol";
|
|
import type { FormRules } from "element-plus";
|
|
import { [[ class_name ]]Info } from "types/[[ name ]]";
|
|
interface FormItemProps {
|
|
[% for column in columns if column.is_list %]
|
|
/** [[ column.column_comment ]] */
|
|
[[ column.python_name ]]: [[ column.typescript_type ]];
|
|
[% endfor %]
|
|
}
|
|
interface FormProps {
|
|
formInline: FormItemProps;
|
|
}
|
|
const props = withDefaults(defineProps<FormProps>(), {
|
|
formInline: () => ({
|
|
[% for column in columns if column.is_list %]
|
|
/** [[ column.column_comment ]] */
|
|
[[ column.python_name ]]: "",
|
|
[% endfor %]
|
|
})
|
|
});
|
|
const newFormInline = ref<[[ class_name ]]Info>(props.formInline);
|
|
/** 自定义表单规则校验 */
|
|
const formRules = reactive<FormRules>({
|
|
[% for column in columns if column.is_insert or column.is_edit %]
|
|
[[ column.python_name ]]: [{ required: [[ 'true' if column.is_required else 'false' ]], message: "请输入[[ column.column_comment ]]~", trigger: "blur" }],
|
|
[% endfor %]
|
|
});
|
|
defineExpose({ newFormInline });
|
|
</script>
|