tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(PageModal): ✨ 表单项增加col配置参数

Browse Source
This commit is contained in:
cshaptx4869
2024-07-12 10:15:52 +08:00
parent cb44f47bcd
commit 6f87463f10
3 changed files with 297 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/CURD/PageForm.vue
View File

@@ -6,8 +6,10 @@
:model="formData"
:rules="formRules"
>
<el-row :gutter="20">
<template v-for="item in formItems" :key="item.prop">
<el-form-item v-show="!item.hidden" :label="item.label" :prop="item.prop">
<el-col v-show="!item.hidden" v-bind="item.col">
<el-form-item :label="item.label" :prop="item.prop">
<!-- Label -->
<template #label v-if="item.tips">
<span>
@@ -46,7 +48,10 @@
</template>
<!-- Checkbox 多选框 -->
<template v-else-if="item.type === 'checkbox'">
<el-checkbox-group v-model="formData[item.prop]" v-bind="item.attrs">
<el-checkbox-group
v-model="formData[item.prop]"
v-bind="item.attrs"
>
<template v-for="option in item.options" :key="option.value">
<el-checkbox v-bind="option" />
</template>
@@ -54,15 +59,24 @@
</template>
<!-- Input Number 数字输入框 -->
<template v-else-if="item.type === 'input-number'">
<el-input-number v-model="formData[item.prop]" v-bind="item.attrs" />
<el-input-number
v-model="formData[item.prop]"
v-bind="item.attrs"
/>
</template>
<!-- TreeSelect 树形选择 -->
<template v-else-if="item.type === 'tree-select'">
<el-tree-select v-model="formData[item.prop]" v-bind="item.attrs" />
<el-tree-select
v-model="formData[item.prop]"
v-bind="item.attrs"
/>
</template>
<!-- DatePicker 日期选择器 -->
<template v-else-if="item.type === 'date-picker'">
<el-date-picker v-model="formData[item.prop]" v-bind="item.attrs" />
<el-date-picker
v-model="formData[item.prop]"
v-bind="item.attrs"
/>
</template>
<!-- Text 文本 -->
<template v-else-if="item.type === 'text'">
@@ -78,7 +92,9 @@
></slot>
</template>
</el-form-item>
</el-col>
</template>
</el-row>
</el-form>
</template>

87
src/components/CURD/PageModal.vue
View File

@@ -15,12 +15,10 @@
:model="formData"
:rules="formRules"
>
<el-row :gutter="20">
<template v-for="item in formItems" :key="item.prop">
<el-form-item
v-show="!item.hidden"
:label="item.label"
:prop="item.prop"
>
<el-col v-show="!item.hidden" v-bind="item.col">
<el-form-item :label="item.label" :prop="item.prop">
<!-- Label -->
<template #label v-if="item.tips">
<span>
@@ -38,21 +36,32 @@
</span>
</template>
<!-- Input 输入框 -->
<template v-if="item.type === 'input' || item.type === undefined">
<template
v-if="item.type === 'input' || item.type === undefined"
>
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
</template>
<!-- Select 选择器 -->
<template v-else-if="item.type === 'select'">
<el-select v-model="formData[item.prop]" v-bind="item.attrs">
<template v-for="option in item.options" :key="option.value">
<template
v-for="option in item.options"
:key="option.value"
>
<el-option v-bind="option" />
</template>
</el-select>
</template>
<!-- Radio 单选框 -->
<template v-else-if="item.type === 'radio'">
<el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
<template v-for="option in item.options" :key="option.value">
<el-radio-group
v-model="formData[item.prop]"
v-bind="item.attrs"
>
<template
v-for="option in item.options"
:key="option.value"
>
<el-radio v-bind="option" />
</template>
</el-radio-group>
@@ -63,7 +72,10 @@
v-model="formData[item.prop]"
v-bind="item.attrs"
>
<template v-for="option in item.options" :key="option.value">
<template
v-for="option in item.options"
:key="option.value"
>
<el-checkbox v-bind="option" />
</template>
</el-checkbox-group>
@@ -91,7 +103,9 @@
</template>
<!-- Text 文本 -->
<template v-else-if="item.type === 'text'">
<el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
<el-text v-bind="item.attrs">
{{ formData[item.prop] }}
</el-text>
</template>
<!-- 自定义 -->
<template v-else-if="item.type === 'custom'">
@@ -100,11 +114,12 @@
:prop="item.prop"
:formData="formData"
:attrs="item.attrs"
>
</slot>
></slot>
</template>
</el-form-item>
</el-col>
</template>
</el-row>
</el-form>
<!-- 弹窗底部操作按钮 -->
<template #footer>
@@ -137,12 +152,10 @@
:model="formData"
:rules="formRules"
>
<el-row :gutter="20">
<template v-for="item in formItems" :key="item.prop">
<el-form-item
v-show="!item.hidden"
:label="item.label"
:prop="item.prop"
>
<el-col v-show="!item.hidden" v-bind="item.col">
<el-form-item :label="item.label" :prop="item.prop">
<!-- Label -->
<template #label v-if="item.tips">
<span>
@@ -160,13 +173,24 @@
</span>
</template>
<!-- Input 输入框 -->
<template v-if="item.type === 'input' || item.type === undefined">
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
<template
v-if="item.type === 'input' || item.type === undefined"
>
<el-input
v-model="formData[item.prop]"
v-bind="item.attrs"
/>
</template>
<!-- Select 选择器 -->
<template v-else-if="item.type === 'select'">
<el-select v-model="formData[item.prop]" v-bind="item.attrs">
<template v-for="option in item.options" :key="option.value">
<el-select
v-model="formData[item.prop]"
v-bind="item.attrs"
>
<template
v-for="option in item.options"
:key="option.value"
>
<el-option v-bind="option" />
</template>
</el-select>
@@ -177,7 +201,10 @@
v-model="formData[item.prop]"
v-bind="item.attrs"
>
<template v-for="option in item.options" :key="option.value">
<template
v-for="option in item.options"
:key="option.value"
>
<el-radio v-bind="option" />
</template>
</el-radio-group>
@@ -188,7 +215,10 @@
v-model="formData[item.prop]"
v-bind="item.attrs"
>
<template v-for="option in item.options" :key="option.value">
<template
v-for="option in item.options"
:key="option.value"
>
<el-checkbox v-bind="option" />
</template>
</el-checkbox-group>
@@ -216,7 +246,9 @@
</template>
<!-- Text 文本 -->
<template v-else-if="item.type === 'text'">
<el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
<el-text v-bind="item.attrs">
{{ formData[item.prop] }}
</el-text>
</template>
<!-- 自定义 -->
<template v-else-if="item.type === 'custom'">
@@ -225,11 +257,12 @@
:prop="item.prop"
:formData="formData"
:attrs="item.attrs"
>
</slot>
></slot>
</template>
</el-form-item>
</el-col>
</template>
</el-row>
</el-form>
</el-scrollbar>
<!-- 弹窗底部操作按钮 -->

3
src/components/CURD/types.ts
View File

@@ -5,6 +5,7 @@ import type {
FormProps,
PaginationProps,
TableProps,
ColProps,
} from "element-plus";
import PageContent from "./PageContent.vue";
import PageForm from "./PageForm.vue";
@@ -248,6 +249,8 @@ export type IFormItems<T = any> = Array<{
initialValue?: any;
// 是否隐藏
hidden?: boolean;
// layout组件Col属性
col?: Partial<ColProps>;
// 监听函数
watch?: (newValue: any, oldValue: any, data: T, items: IObject[]) => void;
// 计算属性函数