62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
<template>
|
|
<el-form
|
|
ref="ruleFormRef"
|
|
:model="newFormInline"
|
|
:rules="formRules"
|
|
label-width="82px"
|
|
>
|
|
<el-row :gutter="30">
|
|
<re-col :value="24" :xm="24" :sm="24">
|
|
<el-form-item label="编码" prop="code">
|
|
<el-input
|
|
v-model="newFormInline.code"
|
|
placeholder="请输入编码~"
|
|
clearable
|
|
class="w-full"
|
|
/>
|
|
</el-form-item>
|
|
</re-col>
|
|
<re-col :value="24" :xm="24" :sm="24">
|
|
<el-form-item label="描述" prop="description">
|
|
<el-input
|
|
v-model="newFormInline.description"
|
|
placeholder="请输入编码描述~"
|
|
clearable
|
|
class="w-full"
|
|
/>
|
|
</el-form-item>
|
|
</re-col>
|
|
</el-row>
|
|
</el-form>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive } from "vue";
|
|
import ReCol from "@/components/ReCol";
|
|
import type { FormRules } from "element-plus";
|
|
const ruleFormRef = ref();
|
|
interface PropsInfo {
|
|
code: string;
|
|
description: string;
|
|
}
|
|
|
|
type ProsData = {
|
|
formInline: PropsInfo;
|
|
};
|
|
/** 自定义表单规则校验 */
|
|
const formRules = reactive<FormRules>({
|
|
code: [{ required: true, message: "编码为必填项", trigger: "blur" }],
|
|
description: [
|
|
{ required: true, message: "编码描述为必填项", trigger: "blur" }
|
|
]
|
|
});
|
|
const props = withDefaults(defineProps<ProsData>(), {
|
|
formInline: () => ({
|
|
code: "",
|
|
description: ""
|
|
})
|
|
});
|
|
const newFormInline = ref<PropsInfo>(props.formInline);
|
|
defineExpose({ newFormInline });
|
|
</script>
|