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

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

@@ -1,13 +1,32 @@
<template>
<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>
</template>
<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 { createCrudOptions } from './crud';
import MenuButton from './components/menuButton/index.vue';
import XEUtils from 'xe-utils';
const menuButtonRef = ref();
defineExpose(menuButtonRef);
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
@@ -15,12 +34,70 @@ const crudBinding = ref();
// 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose });
const { crudOptions } = createCrudOptions({ crudExpose, menuButtonRef });
// 初始化crud配置
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(() => {
crudExpose.doRefresh();
getData();
});
</script>
<style lang="scss" scoped>
.el-row {
height: 100%;
.el-col {
height: 100%;
}
}
.el-card {
height: 100%;
}
</style>