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

refactor(CURD): ♻️ 优化和修改使用示例

Browse Source
This commit is contained in:
cshaptx4869
2024-08-13 14:47:09 +08:00
parent 24c1fb26a0
commit 0964c71b2e
6 changed files with 55 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/CURD/PageContent.vue
View File

@@ -245,7 +245,7 @@
</template>
<!-- 格式化为百分比 -->
<template v-else-if="col.templet === 'percent'">
<template v-if="col.prop"> {{ scope.row[col.prop] }}% </template>
<template v-if="col.prop">{{ scope.row[col.prop] }}%</template>
</template>
<!-- 显示图标 -->
<template v-else-if="col.templet === 'icon'">
@@ -448,7 +448,8 @@
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
将文件拖到此处，或<em>点击上传</em>
<span>将文件拖到此处，或</span>
<em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">

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

@@ -149,7 +149,7 @@ prepareFuncs.forEach((func) => func());
// 获取表单数据
function getFormData(key?: string) {
return key === undefined ? formData : formData[key] ?? undefined;
return key === undefined ? formData : (formData[key] ?? undefined);
}
// 设置表单值

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

@@ -133,7 +133,7 @@
<template #footer>
<div>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleCloseModal">取 消</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
</template>
</el-drawer>
@@ -285,7 +285,7 @@
<template #footer>
<div style="padding-right: var(--el-dialog-padding-primary)">
<el-button type="primary" @click="handleSubmit">确 定</el-button>
<el-button @click="handleCloseModal">取 消</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
</template>
</el-dialog>
@@ -399,15 +399,19 @@ const handleSubmit = useThrottleFn(() => {
}
ElMessage.success(msg);
emit("submitClick");
handleCloseModal();
handleClose();
});
}
});
}, 3000);
// 隐藏弹窗
function handleClose() {
modalVisible.value = false;
}
// 关闭弹窗
function handleCloseModal() {
modalVisible.value = false;
formRef.value?.resetFields();
nextTick(() => {
formRef.value?.clearValidate();

45
src/views/demo/curd/config/add.ts
View File

@@ -1,6 +1,4 @@
import DeptAPI from "@/api/dept";
import RoleAPI from "@/api/role";
import UserAPI, { UserForm } from "@/api/user";
import UserAPI, { type UserForm } from "@/api/user";
import type { IModalConfig } from "@/components/CURD/types";
const modalConfig: IModalConfig<UserForm> = {
@@ -26,6 +24,10 @@ const modalConfig: IModalConfig<UserForm> = {
attrs: {
placeholder: "请输入用户名",
},
col: {
xs: 24,
sm: 12,
},
},
{
label: "用户昵称",
@@ -35,6 +37,10 @@ const modalConfig: IModalConfig<UserForm> = {
attrs: {
placeholder: "请输入用户昵称",
},
col: {
xs: 24,
sm: 12,
},
},
{
label: "所属部门",
@@ -48,14 +54,12 @@ const modalConfig: IModalConfig<UserForm> = {
"check-strictly": true,
"render-after-expand": false,
},
async initFn(formItem) {
formItem.attrs.data = await DeptAPI.getOptions();
},
},
{
type: "custom",
label: "性别",
prop: "gender",
initialValue: 1,
},
{
label: "角色",
@@ -67,9 +71,7 @@ const modalConfig: IModalConfig<UserForm> = {
multiple: true,
},
options: [],
async initFn(formItem) {
this.options = await RoleAPI.getOptions();
},
initialValue: [],
},
{
type: "input",
@@ -103,29 +105,18 @@ const modalConfig: IModalConfig<UserForm> = {
maxlength: 50,
},
},
// {
// label: "状态",
// prop: "status",
// type: "radio",
// options: [
// { label: "正常", value: 1 },
// { label: "禁用", value: 0 },
// ],
// initialValue: 1,
// },
{
label: "状态",
prop: "status",
type: "switch",
attrs: {
activeText: "正常",
inactiveText: "禁用",
activeValue: 1,
inactiveValue: 0,
},
type: "radio",
options: [
{ label: "正常", value: 1 },
{ label: "禁用", value: 0 },
],
initialValue: 1,
},
],
};
export default modalConfig;
// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
export default reactive(modalConfig);

29
src/views/demo/curd/config/edit.ts
View File

@@ -1,7 +1,4 @@
import DeptAPI from "@/api/dept";
import RoleAPI from "@/api/role";
import UserAPI from "@/api/user";
import type { UserForm } from "@/api/user";
import UserAPI, { type UserForm } from "@/api/user";
import type { IModalConfig } from "@/components/CURD/types";
import { DeviceEnum } from "@/enums/DeviceEnum";
import { useAppStore } from "@/store";
@@ -11,7 +8,7 @@ const modalConfig: IModalConfig<UserForm> = {
component: "drawer",
drawer: {
title: "修改用户",
size: useAppStore().device === DeviceEnum.MOBILE ? "90%" : 600,
size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
},
pk: "id",
formAction: function (data) {
@@ -52,14 +49,12 @@ const modalConfig: IModalConfig<UserForm> = {
"check-strictly": true,
"render-after-expand": false,
},
async initFn(formItem) {
formItem.attrs.data = await DeptAPI.getOptions();
},
},
{
type: "custom",
label: "性别",
prop: "gender",
initialValue: 1,
},
{
label: "角色",
@@ -71,9 +66,7 @@ const modalConfig: IModalConfig<UserForm> = {
multiple: true,
},
options: [],
async initFn(formItem) {
this.options = await RoleAPI.getOptions();
},
initialValue: [],
},
{
type: "input",
@@ -107,18 +100,8 @@ const modalConfig: IModalConfig<UserForm> = {
maxlength: 50,
},
},
// {
// label: "状态",
// prop: "status",
// type: "radio",
// options: [
// { label: "正常", value: 1 },
// { label: "禁用", value: 0 },
// ],
// initialValue: 1,
// },
{
label: "状态123",
label: "状态",
prop: "status",
type: "switch",
attrs: {
@@ -131,4 +114,4 @@ const modalConfig: IModalConfig<UserForm> = {
],
};
export default modalConfig;
export default reactive(modalConfig);

22
src/views/demo/curd/index.vue
View File

@@ -41,7 +41,7 @@
</el-tag>
</template>
<template #mobile="scope">
<el-text> {{ scope.row[scope.prop] }} </el-text>
<el-text>{{ scope.row[scope.prop] }}</el-text>
<copy-button
v-if="scope.row[scope.prop]"
:text="scope.row[scope.prop]"
@@ -90,6 +90,8 @@
<script setup lang="ts">
import UserAPI from "@/api/user";
import DeptAPI from "@/api/dept";
import RoleAPI from "@/api/role";
import type { IObject, IOperatData } from "@/components/CURD/types";
import usePage from "@/components/CURD/usePage";
import addModalConfig from "./config/add";
@@ -105,18 +107,32 @@ const {
editModalRef,
handleQueryClick,
handleResetClick,
handleAddClick,
// handleAddClick,
// handleEditClick,
handleSubmitClick,
handleExportClick,
handleSearchClick,
handleFilterChange,
} = usePage();
// 新增
async function handleAddClick() {
addModalRef.value?.setModalVisible();
// 加载部门下拉数据源
addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
// 加载角色下拉数据源
addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
}
// 编辑
async function handleEditClick(row: IObject) {
editModalRef.value?.setModalVisible();
// 加载部门下拉数据源
editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
// 加载角色下拉数据源
editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
// 根据id获取数据进行填充
const data = await UserAPI.getFormData(row.id);
editModalRef.value?.setModalVisible(data);
editModalRef.value?.setFormData(data);
}
// 其他工具栏
function handleToolbarClick(name: string) {