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

Merge pull request #156 from cshaptx4869/patch-102

Browse Source 
feat(PageModal): ✨ 表单项增加col配置参数
This commit is contained in:
Ray Hao
2024-07-12 10:33:53 +08:00
committed by GitHub
parent e79c1ff25d 6f87463f10
commit bdb5d75df6
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" :model="formData"
:rules="formRules" :rules="formRules"
> >
<el-row :gutter="20">
<template v-for="item in formItems" :key="item.prop"> <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 --> <!-- Label -->
<template #label v-if="item.tips"> <template #label v-if="item.tips">
<span> <span>
@@ -46,7 +48,10 @@
</template> </template>
<!-- Checkbox 多选框 --> <!-- Checkbox 多选框 -->
<template v-else-if="item.type === '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"> <template v-for="option in item.options" :key="option.value">
<el-checkbox v-bind="option" /> <el-checkbox v-bind="option" />
</template> </template>
@@ -54,15 +59,24 @@
</template> </template>
<!-- Input Number 数字输入框 --> <!-- Input Number 数字输入框 -->
<template v-else-if="item.type === '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> </template>
<!-- TreeSelect 树形选择 --> <!-- TreeSelect 树形选择 -->
<template v-else-if="item.type === 'tree-select'"> <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> </template>
<!-- DatePicker 日期选择器 --> <!-- DatePicker 日期选择器 -->
<template v-else-if="item.type === 'date-picker'"> <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> </template>
<!-- Text 文本 --> <!-- Text 文本 -->
<template v-else-if="item.type === 'text'"> <template v-else-if="item.type === 'text'">
@@ -78,7 +92,9 @@
></slot> ></slot>
</template> </template>
</el-form-item> </el-form-item>
</el-col>
</template> </template>
</el-row>
</el-form> </el-form>
</template> </template>

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

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

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

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