admin/django-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: ♻️ 用户管理重构

Browse Source
This commit is contained in:
H0nGzA1
2023-03-24 18:45:58 +08:00
parent 0e3fac37e9
commit 24861fda42
2 changed files with 377 additions and 292 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
web/src/views/system/user/crud.tsx
View File

@@ -1,7 +1,7 @@
import * as api from "./api"; import * as api from './api';
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, } from "@fast-crud/fast-crud"; import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
import { request } from "/@/utils/service"; import { request } from '/@/utils/service';
import { dictionary } from "/@/utils/dictionary"; import { dictionary } from '/@/utils/dictionary';
interface CreateCrudOptionsTypes { interface CreateCrudOptionsTypes {
crudOptions: CrudOptions; crudOptions: CrudOptions;
} }
@@ -26,22 +26,25 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
pageRequest, pageRequest,
addRequest, addRequest,
editRequest, editRequest,
delRequest delRequest,
}, },
rowHandle: { rowHandle: {
//固定右侧 //固定右侧
fixed: "right", fixed: 'right',
width: 310, width: 300,
buttons: { buttons: {
orderExample: { view: {
show:false, show: false,
text: "重置密码", },
click: () => { edit: {
//console.log("reset password") iconRight: 'Edit',
} type: 'text',
} },
remove: {
iconRight: 'Delete',
type: 'text',
},
}, },
}, },
columns: { columns: {
_index: { _index: {
@@ -62,37 +65,39 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
minWidth: 100, minWidth: 100,
type: 'input', type: 'input',
form: { form: {
rules: [ // 表单校验规则 rules: [
// 表单校验规则
{ {
required: true, required: true,
message: '账号必填项' message: '账号必填项',
} },
], ],
component: { component: {
placeholder: '请输入账号' placeholder: '请输入账号',
},
}, },
}
}, },
password: { password: {
title: '密码', title: '密码',
type: 'input', type: 'input',
column: { column: {
show: false show: false,
}, },
editForm: { editForm: {
show: false show: false,
}, },
form: { form: {
rules: [ // 表单校验规则 rules: [
// 表单校验规则
{ {
required: true, required: true,
message: '密码必填项' message: '密码必填项',
} },
], ],
component: { component: {
span: 12, span: 12,
showPassword: true, showPassword: true,
placeholder: '请输入密码' placeholder: '请输入密码',
}, },
// value: vm.systemConfig('base.default_password'), // value: vm.systemConfig('base.default_password'),
}, },
@@ -109,22 +114,23 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
}, },
type: 'input', type: 'input',
form: { form: {
rules: [ // 表单校验规则 rules: [
// 表单校验规则
{ {
required: true, required: true,
message: '姓名必填项' message: '姓名必填项',
} },
], ],
component: { component: {
span: 12, span: 12,
placeholder: '请输入姓名' placeholder: '请输入姓名',
},
}, },
}
}, },
dept: { dept: {
title: '部门', title: '部门',
search: { search: {
disabled: true disabled: true,
}, },
type: 'dict-tree', type: 'dict-tree',
dict: dict({ dict: dict({
@@ -136,33 +142,34 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
return request({ return request({
url: url, url: url,
}).then((ret: any) => { }).then((ret: any) => {
return ret.data return ret.data;
}) });
} },
}), }),
form: { form: {
rules: [ // 表单校验规则 rules: [
// 表单校验规则
{ {
required: true, required: true,
message: '必填项' message: '必填项',
} },
], ],
component: { component: {
filterable: true, filterable: true,
placeholder: '请选择', placeholder: '请选择',
props: { props: {
props: { props: {
value: "id", value: 'id',
label: "name", label: 'name',
} },
} },
}, },
}, },
}, },
role: { role: {
title: '角色', title: '角色',
search: { search: {
disabled: true disabled: true,
}, },
type: 'dict-select', type: 'dict-select',
dict: dict({ dict: dict({
@@ -175,26 +182,27 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
url: url, url: url,
params: { params: {
page: 1, page: 1,
limit: 10 limit: 10,
} },
}).then((ret: any) => { }).then((ret: any) => {
return ret.data return ret.data;
}) });
} },
}), }),
form: { form: {
rules: [ // 表单校验规则 rules: [
// 表单校验规则
{ {
required: true, required: true,
message: '必填项' message: '必填项',
} },
], ],
component: { component: {
multiple: true, multiple: true,
filterable: true, filterable: true,
placeholder: '请选择角色' placeholder: '请选择角色',
},
}, },
}
}, },
mobile: { mobile: {
title: '手机号码', title: '手机号码',
@@ -207,49 +215,49 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
{ {
max: 20, max: 20,
message: '请输入正确的手机号码', message: '请输入正确的手机号码',
trigger: 'blur' trigger: 'blur',
}, },
{ {
pattern: /^1[3-9]\d{9}$/, pattern: /^1[3-9]\d{9}$/,
message: '请输入正确的手机号码' message: '请输入正确的手机号码',
} },
], ],
component: { component: {
placeholder: '请输入手机号码' placeholder: '请输入手机号码',
} },
} },
}, },
email: { email: {
title: '邮箱', title: '邮箱',
column:{ column: {
width:260 width: 260,
}, },
form: { form: {
rules: [ rules: [
{ {
type: 'email', type: 'email',
message: '请输入正确的邮箱地址', message: '请输入正确的邮箱地址',
trigger: ['blur', 'change'] trigger: ['blur', 'change'],
} },
], ],
component: { component: {
placeholder: '请输入邮箱' placeholder: '请输入邮箱',
} },
} },
}, },
gender: { gender: {
title: '性别', title: '性别',
type: 'dict-radio', type: 'dict-radio',
dict: dict({ dict: dict({
data: dictionary('gender') data: dictionary('gender'),
}), }),
form: { form: {
value: 1, value: 1,
component: { component: {
span: 12 span: 12,
}
}, },
component: { props: { color: 'auto' } } // 自动染色 },
component: { props: { color: 'auto' } }, // 自动染色
}, },
user_type: { user_type: {
title: '用户类型', title: '用户类型',
@@ -258,15 +266,15 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
}, },
type: 'dict-select', type: 'dict-select',
dict: dict({ dict: dict({
data: dictionary('user_type') data: dictionary('user_type'),
}), }),
form: { form: {
show: false, show: false,
value: 0, value: 0,
component: { component: {
span: 12 span: 12,
} },
} },
}, },
is_active: { is_active: {
title: '状态', title: '状态',
@@ -275,23 +283,23 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
}, },
type: 'dict-radio', type: 'dict-radio',
dict: dict({ dict: dict({
data: dictionary('button_status_bool') data: dictionary('button_status_bool'),
}), }),
form: { form: {
value: true, value: true,
component: { component: {
span: 12 span: 12,
} },
} },
}, },
avatar: { avatar: {
title: '头像', title: '头像',
type: 'avatar-cropper', type: 'avatar-cropper',
form:{ form: {
show:false show: false,
} },
} },
} },
} },
}; };
} };

83
web/src/views/system/user/index.vue
View File

@@ -1,13 +1,32 @@
<template> <template>
<fs-page> <fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud> <el-row>
<el-col :span="4">
<el-card :body-style="{ height: '100%' }">
<el-input v-model="filterText" :placeholder="placeholder" />
<el-tree ref="treeRef" class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" />
</el-card>
</el-col>
<el-col :span="20" :offset="0">
<el-card :body-style="{ height: '100%' }">
<fs-crud class="h-full w-full" ref="crudRef" v-bind="crudBinding"> </fs-crud>
</el-card>
</el-col>
</el-row>
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted } from 'vue'; import * as api from './api';
import { ElTree } from 'element-plus';
import { ref, onMounted, computed, watch } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud'; import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud'; import { createCrudOptions } from './crud';
import MenuButton from './components/menuButton/index.vue';
import XEUtils from 'xe-utils';
const menuButtonRef = ref();
defineExpose(menuButtonRef);
// crud组件的ref // crud组件的ref
const crudRef = ref(); const crudRef = ref();
// crud 配置的ref // crud 配置的ref
@@ -15,12 +34,70 @@ const crudBinding = ref();
// 暴露的方法 // 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding }); const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置 // 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose }); const { crudOptions } = createCrudOptions({ crudExpose, menuButtonRef });
// 初始化crud配置 // 初始化crud配置
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions }); const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
interface Tree {
id: number;
label: string;
children?: Tree[];
}
const placeholder = ref('请输入用户');
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
const defaultProps = {
children: 'children',
label: 'name',
};
watch(filterText, (val) => {
treeRef.value!.filter(val);
});
const filterNode = (value: string, data: Tree) => {
if (!value) return true;
return data.label.includes(value);
};
let data = ref([]);
interface APIResponseData {
code?: number;
data: [];
msg?: string;
}
const getData = () => {
api.GetList({}).then((ret: APIResponseData) => {
const responseData = ret.data;
const result = XEUtils.toArrayTree(responseData, {
parentKey: 'parent_id',
children: 'children',
strict: true,
});
data.value = result;
});
};
// 页面打开后获取列表数据 // 页面打开后获取列表数据
onMounted(() => { onMounted(() => {
crudExpose.doRefresh(); crudExpose.doRefresh();
getData();
}); });
</script> </script>
<style lang="scss" scoped>
.el-row {
height: 100%;
.el-col {
height: 100%;
}
}
.el-card {
height: 100%;
}
</style>