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

feat: ✨ 所有菜单页面样式优化~

Browse Source
This commit is contained in:
H0nGzA1
2023-03-30 16:43:57 +08:00
parent cd60b3d9be
commit 6917786864
12 changed files with 565 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/src/views/system/areas/crud.tsx
View File

@@ -40,6 +40,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
editRequest,
delRequest,
},
rowHandle: {
//固定右侧
fixed: 'right',
width: 200,
buttons: {
view: {
show: false,
},
edit: {
iconRight: 'Edit',
type: 'text',
},
remove: {
iconRight: 'Delete',
type: 'text',
},
},
},
pagination: {
show: false,
},

16
web/src/views/system/dept/crud.tsx
View File

@@ -64,11 +64,23 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
},
rowHandle: {
fiexd: 'right',
width: 310,
fixed: 'right',
width: 200,
buttons: {
view: {
show: false,
},
edit: {
iconRight: 'Edit',
type: 'text',
},
remove: {
iconRight: 'Delete',
type: 'text',
},
addChildren: {
text: '添加子级',
type: 'warning',
type: 'text',
click(context) {
const rowId = context.row.id;
crudExpose.openAdd({ row: { parent: rowId } });

129
web/src/views/system/dept/index.vue
View File

@@ -1,13 +1,126 @@
<template>
<fs-page>
<el-row class="mx-2">
<el-col :span="4" class="p-1">
<el-card :body-style="{ height: '100%' }">
<p class="font-mono font-black text-center text-xl pb-5">
部门列表
<el-tooltip effect="dark" :content="content" placement="right">
<el-icon> <QuestionFilled /> </el-icon>
</el-tooltip>
</p>
<el-input v-model="filterText" :placeholder="placeholder" />
<el-tree
ref="treeRef"
class="font-mono font-bold leading-6 text-7xl"
:data="data"
:props="treeProps"
:filter-node-method="filterNode"
:load="loadNode"
lazy
icon="ArrowRightBold"
:indent="12"
>
<template #default="{ node, data }">
<span class="text-center font-black text-xl">{{ node.label }}</span>
</template>
</el-tree>
</el-card>
</el-col>
<el-col :span="20" class="p-1">
<el-card :body-style="{ height: '100%' }">
<fs-crud 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 { useExpose, useCrud } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import * as api from './api';
import { ElTree } from 'element-plus';
import { ref, onMounted, watch, toRaw, defineAsyncComponent } from 'vue';
import XEUtils from 'xe-utils';
import { errorMessage, successMessage } from '../../../utils/message';
interface Tree {
id: number;
name: string;
status: boolean;
children?: Tree[];
}
interface APIResponseData {
code?: number;
data: [];
msg?: string;
}
// 引入组件
const placeholder = ref('请输入部门名称');
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
const treeProps = {
children: 'children',
label: 'name',
icon: 'icon',
isLeaf: (data: Tree[], node: Node) => {
// @ts-ignore
if (node.data.hasChild) {
return false;
} else {
return true;
}
},
};
watch(filterText, (val) => {
treeRef.value!.filter(val);
});
const filterNode = (value: string, data: Tree) => {
if (!value) return true;
return toRaw(data).name.indexOf(value) !== -1;
};
// 懒加载
const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
// @ts-ignore
if (node.level !== 0) {
// @ts-ignore
api.GetList({ parent: node.data.id }).then((res: APIResponseData) => {
resolve(res.data);
console.log(res.data);
});
}
};
let data = ref([]);
const content = `
1.部门数据支持懒加载;
`;
const getData = () => {
api.GetList({}).then((ret: APIResponseData) => {
const responseData = ret.data;
const result = XEUtils.toArrayTree(responseData, {
parentKey: 'parent',
children: 'children',
strict: true,
});
data.value = result;
});
};
// 页面打开后获取列表数据
onMounted(() => {
getData();
});
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
@@ -24,3 +137,17 @@ onMounted(() => {
crudExpose.doRefresh();
});
</script>
<style lang="scss" scoped>
.el-row {
height: 100%;
.el-col {
height: 100%;
}
}
.el-card {
height: 100%;
}
</style>

25
web/src/views/system/dictionary/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 { dictionary } from '/@/utils/dictionary';
import {nextTick, ref} from 'vue';
import { nextTick, ref } from 'vue';
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
@@ -30,25 +30,34 @@ export const createCrudOptions = function ({ crudExpose, subDictRef }: { crudExp
delRequest,
},
rowHandle: {
width: 360,
width: 200,
buttons: {
view: {
show: false,
},
edit: {
iconRight: 'Edit',
type: 'text',
},
remove: {
iconRight: 'Delete',
type: 'text',
},
custom: {
text: '字典配置',
type: 'success',
type: 'text',
tooltip: {
placement: 'top',
content: '字典配置',
},
//@ts-ignore
click: (context: any) => {
const {row} = context
const { row } = context;
subDictRef.value.drawer = true;
nextTick(()=>{
nextTick(() => {
subDictRef.value.setSearchFormData({ form: { parent: row.id } });
subDictRef.value.doRefresh();
})
});
},
},
},

20
web/src/views/system/dictionary/subDict/crud.tsx
View File

@@ -2,7 +2,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 {watch} from "vue";
import { watch } from 'vue';
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
@@ -30,6 +30,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
editRequest,
delRequest,
},
rowHandle: {
//固定右侧
fixed: 'right',
width: 200,
buttons: {
view: {
show: false,
},
edit: {
iconRight: 'Edit',
type: 'text',
},
remove: {
iconRight: 'Delete',
type: 'text',
},
},
},
columns: {
_index: {
title: '序号',

18
web/src/views/system/fileList/crud.tsx
View File

@@ -35,6 +35,24 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
editRequest,
delRequest,
},
rowHandle: {
//固定右侧
fixed: 'right',
width: 200,
buttons: {
view: {
show: false,
},
edit: {
iconRight: 'Edit',
type: 'text',
},
remove: {
iconRight: 'Delete',
type: 'text',
},
},
},
columns: {
_index: {
title: '序号',

4
web/src/views/system/log/loginLog/crud.tsx
View File

@@ -36,7 +36,11 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
},
},
rowHandle: {
width: 100,
buttons: {
view: {
type: 'text',
},
edit: {
show: false,
},

4
web/src/views/system/log/operationLog/crud.tsx
View File

@@ -36,7 +36,11 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
},
},
rowHandle: {
width: 100,
buttons: {
view: {
type: 'text',
},
edit: {
show: false,
},

96
web/src/views/system/role/curd.tsx
View File

@@ -1,13 +1,12 @@
import {CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose} from '@fast-crud/fast-crud';
import { CrudOptions, AddReq, DelReq, EditReq, dict, CrudExpose } from '@fast-crud/fast-crud';
import _ from 'lodash-es';
import * as api from "./api";
import * as api from './api';
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
//此处为crudOptions配置
export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExpose: CrudExpose,rolePermission:any}): CreateCrudOptionsTypes {
export const createCrudOptions = function ({ crudExpose, rolePermission }: { crudExpose: CrudExpose; rolePermission: any }): CreateCrudOptionsTypes {
const pageRequest = async (query: any) => {
return await api.GetList(query);
};
@@ -32,28 +31,39 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
},
rowHandle: {
//固定右侧
fixed: "right",
width:310,
fixed: 'right',
width: 200,
buttons: {
custom: {
text: "权限配置",
type:'warning',
tooltip: {
placement: "top",
content: "删除"
view: {
show: false,
},
click: (context:any):void => {
const {row} = context
edit: {
iconRight: 'Edit',
type: 'text',
},
remove: {
iconRight: 'Delete',
type: 'text',
},
custom: {
text: '权限配置',
type: 'text',
tooltip: {
placement: 'top',
content: '删除',
},
click: (context: any): void => {
const { row } = context;
// eslint-disable-next-line no-mixed-spaces-and-tabs
rolePermission.value.drawer=true
rolePermission.value.editedRoleInfo = row
rolePermission.value.initGet()
}
}
rolePermission.value.drawer = true;
rolePermission.value.editedRoleInfo = row;
rolePermission.value.initGet();
},
},
},
},
form: {
col: {span: 24},
col: { span: 24 },
labelWidth: '100px',
wrapper: {
is: 'el-dialog',
@@ -63,7 +73,7 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
columns: {
_index: {
title: '序号',
form: {show: false},
form: { show: false },
column: {
//type: 'index',
align: 'center',
@@ -81,20 +91,20 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
id: {
title: 'ID',
type: 'text',
column: {show: false},
search: {show: false},
form: {show: false},
column: { show: false },
search: { show: false },
form: { show: false },
},
name: {
title: '角色名称',
type: 'text',
search: {show: true},
search: { show: true },
column: {
minWidth: 120,
sortable: "custom",
sortable: 'custom',
},
form: {
rules: [{required: true, message: '角色名称必填'}],
rules: [{ required: true, message: '角色名称必填' }],
component: {
placeholder: '输入角色名称搜索',
},
@@ -103,32 +113,32 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
key: {
title: '权限标识',
type: 'text',
search: {show: false},
search: { show: false },
column: {
width: 120,
sortable: "custom",
sortable: 'custom',
},
form: {
rules: [{required: true, message: '权限标识必填'}],
rules: [{ required: true, message: '权限标识必填' }],
placeholder: '输入权限标识',
},
},
sort: {
title: '排序',
search: {show: false},
search: { show: false },
type: 'number',
column: {
width: 90,
sortable: "custom",
sortable: 'custom',
},
form: {
rules: [{required: true, message: '排序必填'}],
rules: [{ required: true, message: '排序必填' }],
value: 1,
},
},
admin: {
title: '是否管理员',
search: {show: false},
search: { show: false },
type: 'dict-radio',
dict: dict({
data: [
@@ -146,16 +156,16 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
}),
column: {
width: 130,
sortable: "custom",
sortable: 'custom',
},
form: {
rules: [{required: true, message: '是否管理员必填'}],
rules: [{ required: true, message: '是否管理员必填' }],
value: false,
},
},
status: {
title: '状态',
search: {show: true},
search: { show: true },
type: 'dict-radio',
dict: dict({
data: [
@@ -173,20 +183,20 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
}),
column: {
width: 90,
sortable: "custom",
sortable: 'custom',
},
form: {
rules: [{required: true, message: '状态必填'}],
rules: [{ required: true, message: '状态必填' }],
value: true,
},
},
update_datetime: {
title: '更新时间',
type: 'text',
search: {show: false},
search: { show: false },
column: {
width: 170,
sortable: "custom",
sortable: 'custom',
},
form: {
show: false,
@@ -198,9 +208,9 @@ export const createCrudOptions = function ({crudExpose,rolePermission}: {crudExp
create_datetime: {
title: '创建时间',
type: 'text',
search: {show: false},
search: { show: false },
column: {
sortable: "custom",
sortable: 'custom',
width: 170,
},
form: {

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

@@ -31,7 +31,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
rowHandle: {
//固定右侧
fixed: 'right',
width: 200,
width: 140,
buttons: {
view: {
show: false,

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

@@ -3,14 +3,33 @@
<el-row class="mx-2">
<el-col :span="4" class="p-1">
<el-card :body-style="{ height: '100%' }">
<p class="font-mono font-black text-center text-xl pb-5">
用户列表
<el-tooltip effect="dark" :content="content" placement="right">
<el-icon> <QuestionFilled /> </el-icon>
</el-tooltip>
</p>
<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-tree
ref="treeRef"
class="font-mono font-bold leading-6 text-7xl"
:data="data"
:props="treeProps"
:filter-node-method="filterNode"
:load="loadNode"
lazy
icon="ArrowRightBold"
:indent="12"
>
<template #default="{ node, data }">
<span class="text-center font-black text-xl">{{ node.label }}</span>
</template>
</el-tree>
</el-card>
</el-col>
<el-col :span="20" :offset="0" class="p-1">
<el-col :span="20" class="p-1">
<el-card :body-style="{ height: '100%' }">
<fs-crud class="h-full w-full" ref="crudRef" v-bind="crudBinding"> </fs-crud>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</el-card>
</el-col>
</el-row>
@@ -18,38 +37,44 @@
</template>
<script lang="ts" setup>
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 * as api from './api';
import { ElTree } from 'element-plus';
import { ref, onMounted, watch, toRaw, defineAsyncComponent } from 'vue';
import XEUtils from 'xe-utils';
const menuButtonRef = ref();
defineExpose(menuButtonRef);
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose, menuButtonRef });
// 初始化crud配置
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
import { errorMessage, successMessage } from '../../../utils/message';
interface Tree {
id: number;
label: string;
name: string;
status: boolean;
children?: Tree[];
}
const placeholder = ref('请输入用户');
interface APIResponseData {
code?: number;
data: [];
msg?: string;
}
// 引入组件
const placeholder = ref('请输入用户名称');
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();
const defaultProps = {
const treeProps = {
children: 'children',
label: 'name',
icon: 'icon',
isLeaf: (data: Tree[], node: Node) => {
// @ts-ignore
if (node.data.hasChild) {
return false;
} else {
return true;
}
},
};
watch(filterText, (val) => {
@@ -58,22 +83,32 @@ watch(filterText, (val) => {
const filterNode = (value: string, data: Tree) => {
if (!value) return true;
return data.label.includes(value);
return toRaw(data).name.indexOf(value) !== -1;
};
// 懒加载
const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
// @ts-ignore
if (node.level !== 0) {
// @ts-ignore
api.GetList({ parent: node.data.id }).then((res: APIResponseData) => {
resolve(res.data);
console.log(res.data);
});
}
};
let data = ref([]);
interface APIResponseData {
code?: number;
data: [];
msg?: string;
}
const content = `
1.用户数据支持懒加载;
`;
const getData = () => {
api.GetList({}).then((ret: APIResponseData) => {
const responseData = ret.data;
const result = XEUtils.toArrayTree(responseData, {
parentKey: 'parent_id',
parentKey: 'parent',
children: 'children',
strict: true,
});
@@ -83,9 +118,24 @@ const getData = () => {
// 页面打开后获取列表数据
onMounted(() => {
crudExpose.doRefresh();
getData();
});
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose });
// 初始化crud配置
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
// 页面打开后获取列表数据
onMounted(() => {
crudExpose.doRefresh();
});
</script>
<style lang="scss" scoped>

32
web/src/views/system/whiteList/crud.tsx
View File

@@ -28,8 +28,26 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
editRequest,
delRequest,
},
rowHandle: {
//固定右侧
fixed: 'right',
width: 200,
buttons: {
view: {
show: false,
},
edit: {
iconRight: 'Edit',
type: 'text',
},
remove: {
iconRight: 'Delete',
type: 'text',
},
},
},
form: {
col: {span: 24},
col: { span: 24 },
labelWidth: '110px',
wrapper: {
is: 'el-dialog',
@@ -78,7 +96,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
},
method: {
title: '请求方式',
sortable: "custom",
sortable: 'custom',
search: {
disabled: false,
},
@@ -104,7 +122,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
{
label: 'PATCH',
value: 4,
}
},
],
}),
form: {
@@ -125,7 +143,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
},
url: {
title: '接口地址',
sortable: "custom",
sortable: 'custom',
search: {
disabled: true,
},
@@ -167,11 +185,11 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
class: { yxtInput: true },
},
helper: {
position: "label",
position: 'label',
tooltip: {
placement: "top-start"
placement: 'top-start',
},
text: "请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/"
text: '请正确填写，以免请求时被拦截。匹配单例使用正则,例如:/api/xx/.*?/',
},
},
},