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

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

@@ -6,79 +6,95 @@
:model="formData" :model="formData"
:rules="formRules" :rules="formRules"
> >
<template v-for="item in formItems" :key="item.prop"> <el-row :gutter="20">
<el-form-item v-show="!item.hidden" :label="item.label" :prop="item.prop"> <template v-for="item in formItems" :key="item.prop">
<!-- Label --> <el-col v-show="!item.hidden" v-bind="item.col">
<template #label v-if="item.tips"> <el-form-item :label="item.label" :prop="item.prop">
<span> <!-- Label -->
{{ item.label }} <template #label v-if="item.tips">
<el-tooltip <span>
placement="bottom" {{ item.label }}
effect="light" <el-tooltip
:content="item.tips" placement="bottom"
:raw-content="true" effect="light"
> :content="item.tips"
<el-icon style="vertical-align: -0.15em" size="16"> :raw-content="true"
<QuestionFilled /> >
</el-icon> <el-icon style="vertical-align: -0.15em" size="16">
</el-tooltip> <QuestionFilled />
</span> </el-icon>
</template> </el-tooltip>
<!-- Input 输入框 --> </span>
<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-option v-bind="option" />
</template> </template>
</el-select> <!-- Input 输入框 -->
</template> <template v-if="item.type === 'input' || item.type === undefined">
<!-- Radio 单选框 --> <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
<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 v-bind="option" />
</template> </template>
</el-radio-group> <!-- Select 选择器 -->
</template> <template v-else-if="item.type === 'select'">
<!-- Checkbox 多选框 --> <el-select v-model="formData[item.prop]" v-bind="item.attrs">
<template v-else-if="item.type === 'checkbox'"> <template v-for="option in item.options" :key="option.value">
<el-checkbox-group v-model="formData[item.prop]" v-bind="item.attrs"> <el-option v-bind="option" />
<template v-for="option in item.options" :key="option.value"> </template>
<el-checkbox v-bind="option" /> </el-select>
</template> </template>
</el-checkbox-group> <!-- Radio 单选框 -->
</template> <template v-else-if="item.type === 'radio'">
<!-- Input Number 数字输入框 --> <el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
<template v-else-if="item.type === 'input-number'"> <template v-for="option in item.options" :key="option.value">
<el-input-number v-model="formData[item.prop]" v-bind="item.attrs" /> <el-radio v-bind="option" />
</template> </template>
<!-- TreeSelect 树形选择 --> </el-radio-group>
<template v-else-if="item.type === 'tree-select'"> </template>
<el-tree-select v-model="formData[item.prop]" v-bind="item.attrs" /> <!-- Checkbox 多选框 -->
</template> <template v-else-if="item.type === 'checkbox'">
<!-- DatePicker 日期选择器 --> <el-checkbox-group
<template v-else-if="item.type === 'date-picker'"> v-model="formData[item.prop]"
<el-date-picker v-model="formData[item.prop]" v-bind="item.attrs" /> v-bind="item.attrs"
</template> >
<!-- Text 文本 --> <template v-for="option in item.options" :key="option.value">
<template v-else-if="item.type === 'text'"> <el-checkbox v-bind="option" />
<el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text> </template>
</template> </el-checkbox-group>
<!-- 自定义 --> </template>
<template v-else-if="item.type === 'custom'"> <!-- Input Number 数字输入框 -->
<slot <template v-else-if="item.type === 'input-number'">
:name="item.slotName ?? item.prop" <el-input-number
:prop="item.prop" v-model="formData[item.prop]"
:formData="formData" v-bind="item.attrs"
:attrs="item.attrs" />
></slot> </template>
</template> <!-- TreeSelect 树形选择 -->
</el-form-item> <template v-else-if="item.type === 'tree-select'">
</template> <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"
/>
</template>
<!-- Text 文本 -->
<template v-else-if="item.type === 'text'">
<el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text>
</template>
<!-- 自定义 -->
<template v-else-if="item.type === 'custom'">
<slot
:name="item.slotName ?? item.prop"
:prop="item.prop"
:formData="formData"
:attrs="item.attrs"
></slot>
</template>
</el-form-item>
</el-col>
</template>
</el-row>
</el-form> </el-form>
</template> </template>

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

@@ -15,96 +15,111 @@
:model="formData" :model="formData"
:rules="formRules" :rules="formRules"
> >
<template v-for="item in formItems" :key="item.prop"> <el-row :gutter="20">
<el-form-item <template v-for="item in formItems" :key="item.prop">
v-show="!item.hidden" <el-col v-show="!item.hidden" v-bind="item.col">
:label="item.label" <el-form-item :label="item.label" :prop="item.prop">
:prop="item.prop" <!-- Label -->
> <template #label v-if="item.tips">
<!-- Label --> <span>
<template #label v-if="item.tips"> {{ item.label }}
<span> <el-tooltip
{{ item.label }} placement="bottom"
<el-tooltip effect="light"
placement="bottom" :content="item.tips"
effect="light" :raw-content="true"
:content="item.tips" >
:raw-content="true" <el-icon style="vertical-align: -0.15em" size="16">
<QuestionFilled />
</el-icon>
</el-tooltip>
</span>
</template>
<!-- Input 输入框 -->
<template
v-if="item.type === 'input' || item.type === undefined"
> >
<el-icon style="vertical-align: -0.15em" size="16"> <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
<QuestionFilled />
</el-icon>
</el-tooltip>
</span>
</template>
<!-- Input 输入框 -->
<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-option v-bind="option" />
</template> </template>
</el-select> <!-- Select 选择器 -->
</template> <template v-else-if="item.type === 'select'">
<!-- Radio 单选框 --> <el-select v-model="formData[item.prop]" v-bind="item.attrs">
<template v-else-if="item.type === 'radio'"> <template
<el-radio-group v-model="formData[item.prop]" v-bind="item.attrs"> v-for="option in item.options"
<template v-for="option in item.options" :key="option.value"> :key="option.value"
<el-radio v-bind="option" /> >
<el-option v-bind="option" />
</template>
</el-select>
</template> </template>
</el-radio-group> <!-- Radio 单选框 -->
</template> <template v-else-if="item.type === 'radio'">
<!-- Checkbox 多选框 --> <el-radio-group
<template v-else-if="item.type === 'checkbox'"> v-model="formData[item.prop]"
<el-checkbox-group v-bind="item.attrs"
v-model="formData[item.prop]" >
v-bind="item.attrs" <template
> v-for="option in item.options"
<template v-for="option in item.options" :key="option.value"> :key="option.value"
<el-checkbox v-bind="option" /> >
<el-radio v-bind="option" />
</template>
</el-radio-group>
</template> </template>
</el-checkbox-group> <!-- Checkbox 多选框 -->
</template> <template v-else-if="item.type === 'checkbox'">
<!-- Input Number 数字输入框 --> <el-checkbox-group
<template v-else-if="item.type === 'input-number'"> v-model="formData[item.prop]"
<el-input-number v-bind="item.attrs"
v-model="formData[item.prop]" >
v-bind="item.attrs" <template
/> v-for="option in item.options"
</template> :key="option.value"
<!-- TreeSelect 树形选择 --> >
<template v-else-if="item.type === 'tree-select'"> <el-checkbox v-bind="option" />
<el-tree-select </template>
v-model="formData[item.prop]" </el-checkbox-group>
v-bind="item.attrs" </template>
/> <!-- Input Number 数字输入框 -->
</template> <template v-else-if="item.type === 'input-number'">
<!-- DatePicker 日期选择器 --> <el-input-number
<template v-else-if="item.type === 'date-picker'"> v-model="formData[item.prop]"
<el-date-picker v-bind="item.attrs"
v-model="formData[item.prop]" />
v-bind="item.attrs" </template>
/> <!-- TreeSelect 树形选择 -->
</template> <template v-else-if="item.type === 'tree-select'">
<!-- Text 文本 --> <el-tree-select
<template v-else-if="item.type === 'text'"> v-model="formData[item.prop]"
<el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text> v-bind="item.attrs"
</template> />
<!-- 自定义 --> </template>
<template v-else-if="item.type === 'custom'"> <!-- DatePicker 日期选择器 -->
<slot <template v-else-if="item.type === 'date-picker'">
:name="item.slotName ?? item.prop" <el-date-picker
:prop="item.prop" v-model="formData[item.prop]"
:formData="formData" v-bind="item.attrs"
:attrs="item.attrs" />
> </template>
</slot> <!-- Text 文本 -->
</template> <template v-else-if="item.type === 'text'">
</el-form-item> <el-text v-bind="item.attrs">
</template> {{ formData[item.prop] }}
</el-text>
</template>
<!-- 自定义 -->
<template v-else-if="item.type === 'custom'">
<slot
:name="item.slotName ?? item.prop"
:prop="item.prop"
:formData="formData"
:attrs="item.attrs"
></slot>
</template>
</el-form-item>
</el-col>
</template>
</el-row>
</el-form> </el-form>
<!-- 弹窗底部操作按钮 --> <!-- 弹窗底部操作按钮 -->
<template #footer> <template #footer>
@@ -137,99 +152,117 @@
:model="formData" :model="formData"
:rules="formRules" :rules="formRules"
> >
<template v-for="item in formItems" :key="item.prop"> <el-row :gutter="20">
<el-form-item <template v-for="item in formItems" :key="item.prop">
v-show="!item.hidden" <el-col v-show="!item.hidden" v-bind="item.col">
:label="item.label" <el-form-item :label="item.label" :prop="item.prop">
:prop="item.prop" <!-- Label -->
> <template #label v-if="item.tips">
<!-- Label --> <span>
<template #label v-if="item.tips"> {{ item.label }}
<span> <el-tooltip
{{ item.label }} placement="bottom"
<el-tooltip effect="light"
placement="bottom" :content="item.tips"
effect="light" :raw-content="true"
:content="item.tips" >
:raw-content="true" <el-icon style="vertical-align: -0.15em" size="16">
<QuestionFilled />
</el-icon>
</el-tooltip>
</span>
</template>
<!-- Input 输入框 -->
<template
v-if="item.type === 'input' || item.type === undefined"
> >
<el-icon style="vertical-align: -0.15em" size="16"> <el-input
<QuestionFilled /> v-model="formData[item.prop]"
</el-icon> v-bind="item.attrs"
</el-tooltip> />
</span>
</template>
<!-- Input 输入框 -->
<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-option v-bind="option" />
</template> </template>
</el-select> <!-- Select 选择器 -->
</template> <template v-else-if="item.type === 'select'">
<!-- Radio 单选框 --> <el-select
<template v-else-if="item.type === 'radio'"> v-model="formData[item.prop]"
<el-radio-group v-bind="item.attrs"
v-model="formData[item.prop]" >
v-bind="item.attrs" <template
> v-for="option in item.options"
<template v-for="option in item.options" :key="option.value"> :key="option.value"
<el-radio v-bind="option" /> >
<el-option v-bind="option" />
</template>
</el-select>
</template> </template>
</el-radio-group> <!-- Radio 单选框 -->
</template> <template v-else-if="item.type === 'radio'">
<!-- Checkbox 多选框 --> <el-radio-group
<template v-else-if="item.type === 'checkbox'"> v-model="formData[item.prop]"
<el-checkbox-group v-bind="item.attrs"
v-model="formData[item.prop]" >
v-bind="item.attrs" <template
> v-for="option in item.options"
<template v-for="option in item.options" :key="option.value"> :key="option.value"
<el-checkbox v-bind="option" /> >
<el-radio v-bind="option" />
</template>
</el-radio-group>
</template> </template>
</el-checkbox-group> <!-- Checkbox 多选框 -->
</template> <template v-else-if="item.type === 'checkbox'">
<!-- Input Number 数字输入框 --> <el-checkbox-group
<template v-else-if="item.type === 'input-number'"> v-model="formData[item.prop]"
<el-input-number v-bind="item.attrs"
v-model="formData[item.prop]" >
v-bind="item.attrs" <template
/> v-for="option in item.options"
</template> :key="option.value"
<!-- TreeSelect 树形选择 --> >
<template v-else-if="item.type === 'tree-select'"> <el-checkbox v-bind="option" />
<el-tree-select </template>
v-model="formData[item.prop]" </el-checkbox-group>
v-bind="item.attrs" </template>
/> <!-- Input Number 数字输入框 -->
</template> <template v-else-if="item.type === 'input-number'">
<!-- DatePicker 日期选择器 --> <el-input-number
<template v-else-if="item.type === 'date-picker'"> v-model="formData[item.prop]"
<el-date-picker v-bind="item.attrs"
v-model="formData[item.prop]" />
v-bind="item.attrs" </template>
/> <!-- TreeSelect 树形选择 -->
</template> <template v-else-if="item.type === 'tree-select'">
<!-- Text 文本 --> <el-tree-select
<template v-else-if="item.type === 'text'"> v-model="formData[item.prop]"
<el-text v-bind="item.attrs">{{ formData[item.prop] }}</el-text> v-bind="item.attrs"
</template> />
<!-- 自定义 --> </template>
<template v-else-if="item.type === 'custom'"> <!-- DatePicker 日期选择器 -->
<slot <template v-else-if="item.type === 'date-picker'">
:name="item.slotName ?? item.prop" <el-date-picker
:prop="item.prop" v-model="formData[item.prop]"
:formData="formData" v-bind="item.attrs"
:attrs="item.attrs" />
> </template>
</slot> <!-- Text 文本 -->
</template> <template v-else-if="item.type === 'text'">
</el-form-item> <el-text v-bind="item.attrs">
</template> {{ formData[item.prop] }}
</el-text>
</template>
<!-- 自定义 -->
<template v-else-if="item.type === 'custom'">
<slot
:name="item.slotName ?? item.prop"
:prop="item.prop"
:formData="formData"
:attrs="item.attrs"
></slot>
</template>
</el-form-item>
</el-col>
</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;
// 计算属性函数 // 计算属性函数