Skip to content

Commit 9a93922

Browse files
LinkanDawangLinkanDawang
committed
feat: 示例页面新增/修改等功能
1 parent 4367781 commit 9a93922

File tree

6 files changed

+279
-6
lines changed

6 files changed

+279
-6
lines changed

‎src/api/tableExample.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,22 @@ export const getRoleColumns = () => {
4040
return http.request<postArrayResult>("options", "/api/roles/", {});
4141
};
4242

43+
/** 创建角色 */
44+
export const createRole = (data?: object) => {
45+
// return http.request<Result>("get", apiUrl("rbac/menus/"));
46+
return http.request<postResult>("post", `api/roles/`, {
47+
data
48+
});
49+
};
50+
4351
/** 修改角色 */
4452
export const updateRole = (id: number, data?: object) => {
4553
// return http.request<Result>("get", apiUrl("rbac/menus/"));
4654
return http.request<postResult>("patch", `api/roles/${id}/`, {
4755
data
4856
});
4957
};
58+
59+
export const deleteRole = (id: number) => {
60+
return http.request<postResult>("delete", `api/roles/${id}/`, {});
61+
}

‎src/views/table-custom/form/index.vue‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<script setup lang="ts">
2+
import { ref } from "vue";
3+
import ReCol from "@/components/ReCol";
4+
import { formRules } from "../utils/rule";
5+
import { FormProps } from "../utils/types";
6+
7+
const props = withDefaults(defineProps<FormProps>(), {
8+
title: "新增",
9+
formInline: () => ({
10+
name: "",
11+
code: "",
12+
status: 50,
13+
is_super_role: false,
14+
member: [],
15+
remark: ""
16+
})
17+
});
18+
19+
const statusOptions = [
20+
{
21+
value: 50,
22+
label: "生效中"
23+
},
24+
{
25+
value: 100,
26+
label: "已失效"
27+
}
28+
];
29+
const roleOptions = [
30+
{
31+
value: true,
32+
label: "是"
33+
},
34+
{
35+
value: false,
36+
label: "否"
37+
}
38+
];
39+
const ruleFormRef = ref();
40+
const newFormInline = ref(props.formInline);
41+
42+
function getRef() {
43+
return ruleFormRef.value;
44+
}
45+
46+
defineExpose({ getRef });
47+
</script>
48+
49+
<template>
50+
<el-form
51+
ref="ruleFormRef"
52+
:model="newFormInline"
53+
:rules="formRules"
54+
label-width="82px"
55+
>
56+
<el-row :gutter="30">
57+
<re-col :value="12" :xs="24" :sm="24">
58+
<el-form-item label="名称" prop="name">
59+
<el-input
60+
v-model="newFormInline.name"
61+
clearable
62+
placeholder="请输入角色名称"
63+
/>
64+
</el-form-item>
65+
</re-col>
66+
<re-col :value="12" :xs="24" :sm="24">
67+
<el-form-item label="部门编号" prop="code">
68+
<el-input
69+
v-model="newFormInline.code"
70+
clearable
71+
placeholder="请输入角色编号"
72+
/>
73+
</el-form-item>
74+
</re-col>
75+
76+
<re-col :value="12" :xs="24" :sm="24">
77+
<el-form-item label="状态">
78+
<el-select
79+
v-model="newFormInline.status"
80+
placeholder="请选择状态"
81+
class="w-full"
82+
clearable
83+
>
84+
<el-option
85+
v-for="(item, index) in statusOptions"
86+
:key="index"
87+
:label="item.label"
88+
:value="item.value"
89+
/>
90+
</el-select>
91+
</el-form-item>
92+
</re-col>
93+
94+
<re-col :value="12" :xs="24" :sm="24">
95+
<el-form-item label="SuperRole">
96+
<el-select
97+
v-model="newFormInline.is_super_role"
98+
placeholder="请选择"
99+
class="w-full"
100+
clearable
101+
>
102+
<el-option
103+
v-for="(item, index) in roleOptions"
104+
:key="index"
105+
:label="item.label"
106+
:value="item.value"
107+
/>
108+
</el-select>
109+
</el-form-item>
110+
</re-col>
111+
112+
<re-col>
113+
<el-form-item label="备注">
114+
<el-input
115+
v-model="newFormInline.remark"
116+
placeholder="请输入备注信息"
117+
type="textarea"
118+
/>
119+
</el-form-item>
120+
</re-col>
121+
</el-row>
122+
</el-form>
123+
</template>

‎src/views/table-custom/hook.tsx‎

Lines changed: 62 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
import { ref } from "vue";
1+
import { h, ref } from "vue";
22

3-
import { getRoleList, updateRole } from "@/api/tableExample";
3+
import { createRole, getRoleList, updateRole } from "@/api/tableExample";
44
// import { useUserStoreHook } from "@/store/modules/user";
55
import { onStatusChange, usePublicHooks } from "@/utils/common";
66
import { useTableBase } from "@/utils/tableHook";
7+
import type { FormItemProps } from "./utils/types";
8+
import { addDialog } from "@/components/ReDialog/index";
9+
import { deviceDetection } from "@pureadmin/utils";
10+
import editForm from "./form/index.vue";
11+
import { message } from "@/utils/message";
712

813
export function useTable() {
914
const switchLoadMap = ref({});
@@ -47,6 +52,59 @@ export function useTable() {
4752
}
4853
];
4954

55+
const formRef = ref();
56+
const ruleFormRef = ref();
57+
function openDialog(title = "新增", row?: FormItemProps) {
58+
addDialog({
59+
title: `${title}角色`,
60+
props: {
61+
title,
62+
formInline: {
63+
name: row?.name ?? "",
64+
code: row?.code ?? "",
65+
status: row?.status,
66+
is_super_role: row?.is_super_role,
67+
member: row?.member ?? [],
68+
remark: row?.remark ?? ""
69+
}
70+
},
71+
width: "46%",
72+
draggable: true,
73+
fullscreen: deviceDetection(),
74+
fullscreenIcon: true,
75+
closeOnClickModal: false,
76+
contentRenderer: () => h(editForm, { ref: formRef, title, formInline: null }),
77+
beforeSure: (done, { options }) => {
78+
const FormRef = formRef.value.getRef();
79+
const curData = options.props.formInline as FormItemProps;
80+
function chores() {
81+
message(`您${title}了名称为${curData.name}的这条数据`, {
82+
type: "success"
83+
});
84+
done(); // 关闭弹框
85+
onSearch(); // 刷新表格数据
86+
}
87+
FormRef.validate(valid => {
88+
if (valid) {
89+
console.log("curData", curData);
90+
// 表单规则校验通过
91+
if (title === "新增") {
92+
// 实际开发先调用新增接口，再进行下面操作
93+
createRole(curData).then(() => {
94+
chores();
95+
})
96+
} else {
97+
// 实际开发先调用修改接口，再进行下面操作
98+
updateRole(row.id, curData).then(() => {
99+
chores();
100+
})
101+
}
102+
}
103+
});
104+
}
105+
});
106+
}
107+
50108
const {
51109
tableLoading,
52110
tableColumns,
@@ -63,6 +121,7 @@ export function useTable() {
63121
tableColumns,
64122
dataList,
65123
tablePagination,
66-
onSearch
124+
onSearch,
125+
openDialog
67126
};
68127
}

‎src/views/table-custom/index.vue‎

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import { CusTable } from "@/components/CusTable";
44
import { CusTableBar } from "@/components/CusTableBar";
55
// import { PaginationProps } from "@pureadmin/table";
66
import { useTable } from "./hook";
7-
import { getRoleColumns } from "@/api/tableExample";
7+
import { getRoleColumns, deleteRole } from "@/api/tableExample";
8+
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
9+
import AddFill from "~icons/ri/add-circle-line";
10+
import Delete from "~icons/ep/delete";
11+
import EditPen from "~icons/ep/edit-pen";
812
913
defineOptions({
1014
name: "TableCustom"
@@ -18,17 +22,39 @@ defineOptions({
1822
// background: true
1923
// });
2024
21-
const { tableLoading, tableColumns, dataList, tablePagination, onSearch } = useTable();
25+
const {
26+
tableLoading,
27+
tableColumns,
28+
dataList,
29+
tablePagination,
30+
onSearch,
31+
openDialog
32+
} = useTable();
33+
34+
const deleteData = (rowId: number) => {
35+
deleteRole(rowId).then((res) => {
36+
onSearch()
37+
})
38+
}
2239
</script>
2340

2441
<template>
2542
<div class="main">
2643
<Suspense>
2744
<CusTableBar
28-
title=""
45+
title="Role信息"
2946
:columnsApi="getRoleColumns"
3047
:columns="tableColumns"
3148
>
49+
<template #buttons>
50+
<el-button
51+
type="primary"
52+
:icon="useRenderIcon(AddFill)"
53+
@click="openDialog()"
54+
>
55+
新增角色
56+
</el-button>
57+
</template>
3258
<template v-slot="{ size, dynamicColumns, tableConf }">
3359
<CusTable
3460
v-bind="tableConf"
@@ -52,6 +78,34 @@ const { tableLoading, tableColumns, dataList, tablePagination, onSearch } = useT
5278
user.username
5379
}}</el-tag>
5480
</template>
81+
<template #operation="{ row }">
82+
<el-button
83+
class="reset-margin"
84+
link
85+
type="primary"
86+
:size="size"
87+
:icon="useRenderIcon(EditPen)"
88+
@click="openDialog('修改', row)"
89+
>
90+
修改
91+
</el-button>
92+
<el-popconfirm
93+
:title="`是否确认删除编号为${row.code}的这条数据`"
94+
@confirm="deleteData(row.id)"
95+
>
96+
<template #reference>
97+
<el-button
98+
class="reset-margin"
99+
link
100+
type="primary"
101+
:size="size"
102+
:icon="useRenderIcon(Delete)"
103+
>
104+
删除
105+
</el-button>
106+
</template>
107+
</el-popconfirm>
108+
</template>
55109
</CusTable>
56110
</template>
57111
</CusTableBar>

‎src/views/table-custom/utils/rule.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { reactive } from "vue";
2+
import type { FormRules } from "element-plus";
3+
4+
/** 自定义表单规则校验 */
5+
export const formRules = reactive(<FormRules>{
6+
name: [{ required: true, message: "名称为必填项", trigger: "blur" }],
7+
code: [{ required: true, message: "编号为必填项", trigger: "blur" }],
8+
});

‎src/views/table-custom/utils/types.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
interface FormItemProps {
2+
id?: number;
3+
/** 用于判断是`新增`还是`修改` */
4+
name: string;
5+
code: string;
6+
status: number;
7+
is_super_role: boolean;
8+
member: Array<number>;
9+
remark: string;
10+
}
11+
12+
interface FormProps {
13+
title: string;
14+
formInline: FormItemProps;
15+
}
16+
17+
export type { FormItemProps, FormProps };

0 commit comments

Comments
 (0)