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

refactor: ♻️ 更新优化精简fast-crud结构

Browse Source
This commit is contained in:
H0nGzA1
2023-03-30 21:42:45 +08:00
parent b586b46016
commit 96ad956efd
29 changed files with 596 additions and 1132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/views/system/areas/api.ts
View File

@@ -1,8 +1,8 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/area/';
export function GetList(query: PageQuery) {
export function GetList(query: UserPageQuery) {
return request({
url: apiPrefix,
method: 'get',

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

@@ -1,14 +1,10 @@
import * as api from './api';
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
import { request } from '/@/utils/service';
import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
import { dictionary } from '/@/utils/dictionary';
import { successMessage } from '/@/utils/message';
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
@@ -27,8 +23,8 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
* @param row
* @returns {Promise<unknown>}
*/
const loadContentMethod = (tree: any, treeNode: any, resolve: any) => {
api.GetList({ pcode: tree.code }).then((res: any) => {
const loadContentMethod = (tree: any, treeNode: any, resolve: Function) => {
pageRequest({ pcode: tree.code }).then((res: APIResponseData) => {
resolve(res.data);
});
};

14
web/src/views/system/areas/index.vue
View File

@@ -6,18 +6,10 @@
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
// 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 });
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {

8
web/src/views/system/config/api.ts
View File

@@ -1,9 +1,9 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
import XEUtils from 'xe-utils';
export const apiPrefix = '/api/system/system_config/';
export function GetList(query: PageQuery) {
export function GetList(query: UserPageQuery) {
return request({
url: apiPrefix,
method: 'get',
@@ -56,6 +56,6 @@ export function saveContent (data:any) {
return request({
url: apiPrefix + 'save_content/',
method: 'put',
data: data
})
data: data,
});
}

4
web/src/views/system/dept/api.ts
View File

@@ -1,8 +1,8 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/dept/';
export function GetList(query: PageQuery) {
export function GetList(query: UserPageQuery) {
return request({
url: apiPrefix,
method: 'get',

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

@@ -1,16 +1,11 @@
import * as api from './api';
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
import { verifyPhone } from '/@/utils/toolsValidate';
import { request } from '/@/utils/service';
import { dictionary } from '/@/utils/dictionary';
import { successMessage } from '/@/utils/message';
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
const { getFormRef, getFormData } = crudExpose;
const pageRequest = async (query: PageQuery) => {
export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
@@ -84,7 +79,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
type: 'text',
click(context) {
const rowId = context.row.id;
crudExpose.openAdd({ row: { parent: rowId } });
crudExpose!.openAdd({ row: { parent: rowId } });
},
},
},
@@ -205,6 +200,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
{
type: 'email',
message: '请输入正确的邮箱地址',
// @ts-ignore
trigger: ['blur', 'change'],
},
],

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

@@ -37,13 +37,12 @@
</template>
<script lang="ts" setup>
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { ref, onMounted, watch, toRaw } from 'vue';
import { useFs } 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;
@@ -116,24 +115,11 @@ const getData = () => {
});
};
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
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>

22
web/src/views/system/dictionary/crud.tsx
View File

@@ -1,15 +1,11 @@
import * as api from './api';
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
import { dictionary } from '/@/utils/dictionary';
import { nextTick, ref } from 'vue';
import { successMessage } from '/@/utils/message';
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export const createCrudOptions = function ({ crudExpose, subDictRef }: { crudExpose: CrudExpose; subDictRef: any }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
@@ -52,12 +48,12 @@ export const createCrudOptions = function ({ crudExpose, subDictRef }: { crudExp
content: '字典配置',
},
//@ts-ignore
click: (context: any) => {
const { row } = context;
subDictRef.value.drawer = true;
click: (ctx: any) => {
const { row } = ctx;
context!.subDictRef.value.drawer = true;
nextTick(() => {
subDictRef.value.setSearchFormData({ form: { parent: row.id } });
subDictRef.value.doRefresh();
context!.subDictRef.value.setSearchFormData({ form: { parent: row.id } });
context!.subDictRef.value.doRefresh();
});
},
},
@@ -75,7 +71,7 @@ export const createCrudOptions = function ({ crudExpose, subDictRef }: { crudExp
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
let pagination = crudExpose!.crudBinding.value.pagination;
// @ts-ignore
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},

21
web/src/views/system/dictionary/index.vue
View File

@@ -6,24 +6,13 @@
</template>
<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue';
import type { Ref } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { ref, onMounted, defineAsyncComponent } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import subDict from './subDict/index.vue';
//字典配置ref
const subDict = defineAsyncComponent(() => import('./subDict/index.vue'));
const subDictRef = ref();
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose, subDictRef });
// 初始化crud配置
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { subDictRef } });
// 页面打开后获取列表数据
onMounted(() => {

4
web/src/views/system/dictionary/subDict/api.ts
View File

@@ -1,8 +1,8 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/dictionary/';
export function GetList(query: PageQuery) {
export function GetList(query: UserPageQuery) {
return request({
url: apiPrefix,
method: 'get',

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

@@ -1,14 +1,9 @@
import * as api from './api';
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
import { request } from '/@/utils/service';
import { dict, UserPageQuery, AddReq, DelReq, EditReq, CrudOptions, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
import { dictionary } from '/@/utils/dictionary';
import { watch } from 'vue';
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
@@ -60,7 +55,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
let pagination = crudExpose!.crudBinding.value.pagination;
// @ts-ignore
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},

22
web/src/views/system/dictionary/subDict/index.vue
View File

@@ -7,27 +7,17 @@
</template>
<script lang="ts" setup>
import {ref, onMounted, defineProps, computed, watch} from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { ref, onMounted, defineAsyncComponent } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { ElMessageBox } from 'element-plus';
// 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 });
//抽屉是否显示
const drawer = ref(false);
//抽屉关闭确认
const handleClose = (done: () => void) => {
ElMessageBox.confirm('您确定要关闭?', {
confirmButtonText: '确定',
cancelButtonText: '取消',
@@ -40,11 +30,13 @@ const handleClose = (done: () => void) => {
// catch error
});
};
const {setSearchFormData,doRefresh} = crudExpose
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
const { setSearchFormData, doRefresh } = crudExpose;
defineExpose({ drawer, setSearchFormData, doRefresh });
// 页面打开后获取列表数据
onMounted(() => {
// console.log(48,currentRow)
crudExpose.doRefresh();
});
</script>

4
web/src/views/system/fileList/api.ts
View File

@@ -1,8 +1,8 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/file/';
export function GetList(query: PageQuery) {
export function GetList(query: UserPageQuery) {
return request({
url: apiPrefix,
method: 'get',

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

@@ -1,13 +1,8 @@
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;
}
import { UserPageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
@@ -65,8 +60,8 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
let pagination = crudExpose!.crudBinding.value.pagination;
return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
},
},
},

14
web/src/views/system/fileList/index.vue
View File

@@ -6,18 +6,10 @@
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
// 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 });
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {

4
web/src/views/system/log/loginLog/api.ts
View File

@@ -1,8 +1,8 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/login_log/';
export function GetList(query: PageQuery) {
export function GetList(query: UserPageQuery) {
return request({
url: apiPrefix,
method: 'get',

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

@@ -1,13 +1,8 @@
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;
}
import { UserPageQuery, AddReq, DelReq, EditReq, CreateCrudOptionsProps, CreateCrudOptionsRet, dict } from '@fast-crud/fast-crud';
export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
@@ -58,6 +53,12 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose!.crudBinding.value.pagination;
return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
},
},
},
search: {
@@ -237,22 +238,21 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
},
login_type: {
title: '登录类型',
type: 'select',
type: 'dict-select',
search: {
disabled: false,
},
dict: {
dict: dict({
data: [
{ label: '普通登录', value: 1 },
{ label: '微信扫码登录', value: 2 },
],
},
}),
form: {
component: {
placeholder: '请选择登录类型',
},
},
component: { props: { color: 'auto' } }, // 自动染色
},
os: {
title: '操作系统',

14
web/src/views/system/log/loginLog/index.vue
View File

@@ -6,18 +6,10 @@
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
// 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 });
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {

4
web/src/views/system/log/operationLog/api.ts
View File

@@ -1,8 +1,8 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/operation_log/';
export function GetList(query: PageQuery) {
export function GetList(query: UserPageQuery) {
return request({
url: apiPrefix,
method: 'get',

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

@@ -1,13 +1,8 @@
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;
}
import { UserPageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
@@ -61,8 +56,8 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination = crudExpose.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
let pagination = crudExpose!.crudBinding.value.pagination;
return ((pagination!.currentPage ?? 1) - 1) * pagination!.pageSize + index + 1;
},
},
},

14
web/src/views/system/log/operationLog/index.vue
View File

@@ -6,18 +6,10 @@
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
// 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 });
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {

8
web/src/views/system/menu/api.ts
View File

@@ -1,8 +1,8 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/menu/';
export function GetList(query: PageQuery) {
export function GetList(query: UserPageQuery) {
return request({
url: apiPrefix,
method: 'get',
@@ -40,7 +40,7 @@ export function DelObj(obj: DelReq) {
});
}
export function GetAllMenu(query: PageQuery) {
export function GetAllMenu(query: UserPageQuery) {
return request({
url: apiPrefix + 'get_all_menu/',
method: 'get',
@@ -48,7 +48,7 @@ export function GetAllMenu(query: PageQuery) {
});
}
export function lazyLoadMenu(query: PageQuery) {
export function lazyLoadMenu(query: UserPageQuery) {
return request({
url: apiPrefix,
method: 'get',

459
web/src/views/system/menu/crud.tsx
View File

@@ -1,37 +1,8 @@
import * as api from './api';
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
import { dictionary } from '/@/utils/dictionary';
import { eIconPicker, eIcon } from 'e-icon-picker';
import { useCompute } from '@fast-crud/fast-crud';
import { inject, computed } from 'vue';
import { apiPrefix as menuPrefix } from './api';
import XEUtils from 'xe-utils';
import { request } from '/@/utils/service';
const { compute } = useCompute();
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from '@fast-crud/fast-crud';
export const createCrudOptions = function ({ crudExpose, menuButtonRef }: { crudExpose: CrudExpose; menuButtonRef: any }): CreateCrudOptionsTypes {
const hasPermissions: any = inject('$hasPermissions');
//验证路由地址
const validateWebPath = (rule: string, value: string, callback: Function) => {
const isLink = JSON.parse(crudExpose.getFormData().is_link);
let pattern = /^\/.*?/;
if (isLink) {
pattern = /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/g;
} else {
pattern = /^\/.*?/;
}
// console.log('isLink', isLink, 'pattern', pattern, pattern.test(value));
if (!pattern.test(value)) {
callback(new Error('请正确的地址'));
} else {
callback();
}
};
const pageRequest = async (query: PageQuery) => {
export default function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
@@ -41,21 +12,11 @@ export const createCrudOptions = function ({ crudExpose, menuButtonRef }: { crud
const delRequest = async ({ row }: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({ form }: AddReq) => {
return await api.AddObj(form);
};
/**
* 懒加载
* @param row
* @returns {Promise<unknown>}
*/
const loadContentMethod = (tree: any, treeNode: any, resolve: any) => {
api.GetList({ parent: tree.id }).then((res: any) => {
resolve(res.data);
});
};
return {
crudOptions: {
request: {
@@ -64,415 +25,7 @@ export const createCrudOptions = function ({ crudExpose, menuButtonRef }: { crud
editRequest,
delRequest,
},
pagination: {
show: false,
},
table: {
rowKey: 'id',
lazy: true,
load: loadContentMethod,
treeProps: { children: 'children', hasChildren: 'hasChild' },
},
actionbar: {
buttons: {
add: {
show: hasPermissions('menu:Create'),
},
},
},
rowHandle: {
fixed: 'right',
width: 200,
buttons: {
view: {
show: false,
},
edit: {
iconRight: 'Edit',
type: 'text',
},
remove: {
iconRight: 'Delete',
type: 'text',
},
custom: {
text: '按钮配置',
type: 'warning',
tooltip: {
placement: 'top',
content: '按钮配置',
},
show: compute(({ row }: any) => {
if (row.is_catalog) {
return false;
}
return true;
}),
click: (context: any): void => {
const { row } = context;
menuButtonRef.value.drawer = true;
menuButtonRef.value.selectOptions = row;
menuButtonRef.value.initGet();
},
},
addChildren: {
text: '添加子级',
type: 'text',
click(context) {
const rowId = context.row.id;
crudExpose.openAdd({ row: { parent: rowId } });
},
},
},
},
columns: {
_index: {
title: '序号',
form: { show: false },
column: {
type: 'index',
align: 'center',
width: '80px',
columnSetDisabled: true, //禁止在列设置中选择
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination: any = crudExpose.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},
},
},
search: {
title: '关键词',
column: {
show: false,
},
search: {
show: true,
component: {
props: {
clearable: true,
},
placeholder: '请输入关键词',
},
},
form: {
show: false,
component: {
props: {
clearable: true,
},
},
},
},
name: {
title: '菜单名称',
search: {
show: true,
component: {
props: {
clearable: true,
},
},
},
type: 'input',
form: {
rules: [
// 表单校验规则
{ required: true, message: '菜单名称必填项' },
],
component: {
props: {
clearable: true,
},
placeholder: '请输入菜单名称',
},
},
column: {
width: 180,
},
},
icon: {
title: '图标',
form: {
component: {
name: eIconPicker,
vModel: 'modelValue',
},
},
column: {
component: {
name: eIcon,
vModel: 'modelValue',
style: 'font-size:18px',
},
},
},
sort: {
title: '排序',
column: {
width: 60,
},
type: 'number',
form: {
value: 1,
component: {
placeholder: '请输入排序',
},
},
},
is_catalog: {
title: '是否目录',
column: {
width: 100,
},
type: 'dict-switch',
dict: dict({
data: dictionary('button_whether_bool'),
}),
form: {
component: {
placeholder: '请选择是否目录',
},
// valueChange(key, value, form, { getColumn, mode, component, immediate, getComponent }) {
// if (!value) {
// form.web_path = undefined
// form.component = undefined
// form.component_name = undefined
// form.cache = false
// form.is_link = false
// }
// }
},
},
is_link: {
title: '外链接',
type: 'dict-switch',
dict: dict({
data: dictionary('button_whether_bool'),
}),
form: {
value: false,
component: {
/* show(context) {
const { form } = context
return !form.is_catalog
}, */
placeholder: '请选择是否外链接',
},
/* valueChange(key, value, form, { getColumn, mode, component, immediate, getComponent }) {
form.web_path = undefined
form.component = undefined
form.component_name = undefined
if (value) {
getColumn('web_path').title = '外链接地址'
getColumn('web_path').component.placeholder = '请输入外链接地址'
getColumn('web_path').helper = {
render(h) {
return (< el-alert title="外链接地址,请以https|http|ftp|rtsp|mms开头" type="warning" />
)
}
}
} else {
getColumn('web_path').title = '路由地址'
getColumn('web_path').component.placeholder = '请输入路由地址'
getColumn('web_path').helper = {
render(h) {
return (< el-alert title="浏览器中url的地址,请以/开头" type="warning" />
)
}
}
}
} */
},
},
web_path: {
title: '路由地址',
width: 150,
column: {
show: false,
},
form: {
rules: [
{ required: true, message: '请输入正确的路由地址' },
{ validator: validateWebPath, trigger: 'change' },
],
component: {
show(context: any) {
const { form } = context;
return !form.is_catalog;
},
props: {
clearable: true,
},
placeholder: '请输入路由地址',
},
helper: {
render(h) {
return <el-alert title="浏览器中url的地址,请以/开头" type="warning" />;
},
},
},
},
component: {
title: '组件地址',
type: 'dict-select',
show: false,
dict: dict({
getData: () => {
const files: any = import.meta.globEager('@views/**/*.vue');
let result: Array<any> = [];
Object.keys(files).forEach((key: string) => {
result.push({
label: key.replace(/(\.\/|\.vue)/g, ''),
value: key.replace(/(\.\/|\.vue)/g, ''),
});
});
return result;
},
}),
column: {
show: false,
},
form: {
rules: [{ required: true, message: '请选择组件地址' }],
component: {
props: {
clearable: true,
filterable: true, // 可过滤选择项
},
placeholder: '请输入组件地址',
},
helper: {
render(h) {
return <el-alert title="src/views下的文件夹地址" type="warning" />;
},
},
},
},
component_name: {
title: '组件名称',
column: {
width: 140,
},
form: {
rules: [{ required: true, message: '请输入组件名称' }],
component: {
show(context: any) {
const { form } = context;
return !form.is_catalog && !form.is_link;
},
props: {
clearable: true,
},
placeholder: '请输入组件名称',
},
helper: {
render(h) {
return <el-alert title="xx.vue文件中的name" type="warning" />;
},
},
},
},
menuPermission: {
title: '拥有权限',
type: 'dict-select',
form: {
show: false,
component: {
elProps: {
// el-select的配置项，https://element.eleme.cn/#/zh-CN/component/select
filterable: true,
multiple: true,
clearable: true,
},
},
},
column: {
width: 260,
},
},
cache: {
title: '缓存',
column: {
width: 60,
},
search: {
show: true,
},
type: 'dict-switch',
dict: dict({
data: dictionary('button_whether_bool'),
}),
form: {
value: false,
component: {
// show(context) {
// const { form } = context
// return !form.is_catalog
// },
placeholder: '请选择是否缓存',
},
helper: {
render(h) {
return <el-alert title="是否开启页面缓存,需要组件名称和xx.vue页面的name一致" type="warning" />;
},
},
},
},
visible: {
title: '侧边可见',
column: {
width: 100,
},
search: {
show: true,
},
type: 'dict-switch',
dict: dict({
data: dictionary('button_whether_bool'),
}),
form: {
value: true,
component: {
placeholder: '请选择侧边可见',
},
rules: [
// 表单校验规则
{ required: true, message: '侧边可见必填项' },
],
helper: {
render(h) {
return <el-alert title="是否显示在侧边菜单中" type="warning" />;
},
},
},
},
status: {
title: '状态',
sortable: true,
search: {
show: true,
},
column: {
width: 80,
},
type: 'dict-switch',
dict: dict({
data: dictionary('button_status_bool'),
}),
form: {
value: true,
component: {
placeholder: '请选择状态',
},
rules: [
// 表单校验规则
{ required: true, message: '状态必填项' },
],
},
},
},
columns: {},
},
};
};
}

244
web/src/views/system/messageCenter/crud.tsx
View File

@@ -1,20 +1,16 @@
import * as api from "./api";
import {dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions,} from "@fast-crud/fast-crud";
import tableSelector from "/@/components/tableSelector/index.vue"
import {shallowRef, computed, ref} from "vue";
import manyToMany from "/@/components/manyToMany/index.vue"
import * as api from './api';
import { dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions } from '@fast-crud/fast-crud';
import tableSelector from '/@/components/tableSelector/index.vue';
import { shallowRef, computed, ref } from 'vue';
import manyToMany from '/@/components/manyToMany/index.vue';
const {compute} = useCompute()
const { compute } = useCompute();
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export const createCrudOptions = function ({
crudExpose,
tabActivted
}: { crudExpose: CrudExpose, tabActivted: any }): CreateCrudOptionsTypes {
export const createCrudOptions = function ({ crudExpose, tabActivted }: { crudExpose: CrudExpose; tabActivted: any }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
if (tabActivted.value === 'receive') {
return await api.GetSelfReceive(query);
@@ -34,11 +30,11 @@ export const createCrudOptions = function ({
const viewRequest = async ({ row }: { row: any }) => {
return await api.GetObj(row.id);
}
};
const IsReadFunc = computed(() => {
return tabActivted.value === 'receive'
})
return tabActivted.value === 'receive';
});
return {
crudOptions: {
@@ -46,204 +42,218 @@ export const createCrudOptions = function ({
pageRequest,
addRequest,
editRequest,
delRequest
delRequest,
},
rowHandle: {
buttons: {
edit: {
show: false
show: false,
},
view: {
click({ index, row }) {
crudExpose.openView({index,row})
crudExpose.openView({ index, row });
if (tabActivted.value === 'receive') {
viewRequest({row})
crudExpose.doRefresh()
}
}
}
viewRequest({ row });
crudExpose.doRefresh();
}
},
},
},
},
columns: {
id: {
title: 'id',
form: {
show: false,
}
},
},
title: {
title: '标题',
search: {
show: true,
},
type: ["text", "colspan"],
type: ['text', 'colspan'],
form: {
rules: [ // 表单校验规则
rules: [
// 表单校验规则
{
required: true,
message: '必填项'
}
message: '必填项',
},
],
component: {span: 24, placeholder: '请输入标题'}
}
component: { span: 24, placeholder: '请输入标题' },
},
},
is_read: {
title: '是否已读',
type: 'dict-select',
column: {
show: IsReadFunc,
show: IsReadFunc.value,
},
dict: dict({
data: [
{ label: '已读', value: true, color: 'success' },
{label: '未读', value: false, color: 'danger'}
]
{ label: '未读', value: false, color: 'danger' },
],
}),
form: {
show: false
}
show: false,
},
},
target_type: {
title: '目标类型',
type: ['dict-radio', 'colspan'],
width: 120,
dict: dict({
data: [{value: 0, label: '按用户'}, {value: 1, label: '按角色'}, {
data: [
{ value: 0, label: '按用户' },
{ value: 1, label: '按角色' },
{
value: 2,
label: '按部门'
}, {value: 3, label: '通知公告'}]
label: '按部门',
},
{ value: 3, label: '通知公告' },
],
}),
form: {
component: {
optionName: "el-radio-button"
optionName: 'el-radio-button',
},
rules: [
{
required: true,
message: '必选项',
trigger: ['blur', 'change']
}
]
}
// @ts-ignore
trigger: ['blur', 'change'],
},
],
},
},
target_user: {
title: '目标用户',
search: {
disabled: true
disabled: true,
},
width: 130,
form: {
component: {
name: shallowRef(tableSelector),
vModel: "modelValue",
vModel: 'modelValue',
displayLabel: compute(({ row }) => {
if (row) {
return row.user_info;
}
return null
return null;
}),
tableConfig: {
url: '/api/system/user/',
label: 'name',
value: 'id',
isMultiple: true,
columns: [{
columns: [
{
prop: 'name',
label: '用户名称',
width: 120
}, {
width: 120,
},
{
prop: 'phone',
label: '用户电话',
width: 120
}]
}
width: 120,
},
],
},
},
show: compute(({ form }) => {
return form.target_type === 0
return form.target_type === 0;
}),
rules: [ // 表单校验规则
rules: [
// 表单校验规则
{
required: true,
message: '必填项'
}
]
message: '必填项',
},
],
},
column: {
show: false,
component: {
name: shallowRef(manyToMany),
vModel: "modelValue",
vModel: 'modelValue',
bindValue: compute(({ row }) => {
return row.user_info
return row.user_info;
}),
displayLabel: 'name'
}
}
displayLabel: 'name',
},
},
},
target_role: {
title: '目标角色',
search: {
disabled: true
disabled: true,
},
width: 130,
form: {
component: {
name: shallowRef(tableSelector),
vModel: "modelValue",
vModel: 'modelValue',
displayLabel: compute(({ row }) => {
if (row) {
return row.role_info;
}
return null
return null;
}),
tableConfig: {
url: '/api/system/role/',
label: 'name',
value: 'id',
isMultiple: true,
columns: [{
columns: [
{
prop: 'name',
label: '角色名称'
label: '角色名称',
},
{
prop: 'key',
label: '权限标识'
}]
}
label: '权限标识',
},
],
},
},
show: compute(({ form }) => {
return form.target_type === 1
return form.target_type === 1;
}),
rules: [ // 表单校验规则
rules: [
// 表单校验规则
{
required: true,
message: '必填项'
}
]
message: '必填项',
},
],
},
column: {
show: false,
component: {
name: shallowRef(manyToMany),
vModel: "modelValue",
vModel: 'modelValue',
bindValue: compute(({ row }) => {
return row.role_info
return row.role_info;
}),
displayLabel: 'name'
}
}
displayLabel: 'name',
},
},
},
target_dept: {
title: '目标部门',
search: {
disabled: true
disabled: true,
},
width: 130,
type: 'table-selector',
form: {
component: {
name: shallowRef(tableSelector),
vModel: "modelValue",
vModel: 'modelValue',
displayLabel: compute(({ form }) => {
return form.target_dept_name;
}),
@@ -253,79 +263,83 @@ export const createCrudOptions = function ({
value: 'id',
isTree: true,
isMultiple: true,
columns: [{
columns: [
{
prop: 'name',
label: '部门名称'
label: '部门名称',
},
{
prop: 'status_label',
label: '状态'
label: '状态',
},
{
prop: 'parent_name',
label: '父级部门'
}]
}
label: '父级部门',
},
],
},
},
show: compute(({ form }) => {
return form.target_type === 2
return form.target_type === 2;
}),
rules: [ // 表单校验规则
rules: [
// 表单校验规则
{
required: true,
message: '必填项'
}
]
message: '必填项',
},
],
},
column: {
show: false,
component: {
name: shallowRef(manyToMany),
vModel: "modelValue",
vModel: 'modelValue',
bindValue: compute(({ row }) => {
return row.dept_info
return row.dept_info;
}),
displayLabel: 'name'
}
}
displayLabel: 'name',
},
},
},
content: {
title: '内容',
column: {
width: 300,
show: false
show: false,
},
type: ["editor-wang5", "colspan"],
type: ['editor-wang5', 'colspan'],
form: {
rules: [ // 表单校验规则
rules: [
// 表单校验规则
{
required: true,
message: '必填项'
}
message: '必填项',
},
],
component: {
disabled: true,
id: "1", // 当同一个页面有多个editor时，需要配置不同的id
id: '1', // 当同一个页面有多个editor时，需要配置不同的id
editorConfig: {
// 是否只读
readOnly: compute((context) => {
const {mode} = context
const { mode } = context;
if (mode === 'add') {
return false
return false;
}
return true;
}),
},
uploader: {
type: "form",
type: 'form',
buildUrl(res: any) {
return res.url;
}
}
}
}
}
}
}
}
}
},
},
},
},
},
},
},
};
};

0
web/src/views/system/role/curd.tsx → web/src/views/system/role/crud.tsx
View File

6
web/src/views/system/role/index.vue
View File

@@ -12,10 +12,10 @@
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useExpose, useCrud, dict } from '@fast-crud/fast-crud';
import { createCrudOptions } from './curd';
import { createCrudOptions } from './crud';
import RolePermission from '/@/views/system/rolePermission/index.vue';
import * as api from './api'
import _ from "lodash-es";
import * as api from './api';
import _ from 'lodash-es';
const rolePermission = ref();
defineExpose(rolePermission);
// crud组件的ref

4
web/src/views/system/whiteList/api.ts
View File

@@ -1,8 +1,8 @@
import { request } from '/@/utils/service';
import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
export const apiPrefix = '/api/system/api_white_list/';
export function GetList(query: PageQuery) {
export function GetList(query: UserPageQuery) {
return request({
url: apiPrefix,
method: 'get',

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

@@ -1,14 +1,11 @@
import * as api from './api';
import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, compute } from '@fast-crud/fast-crud';
import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
import { request } from '/@/utils/service';
import { dictionary } from '/@/utils/dictionary';
import { successMessage } from '/@/utils/message';
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
const pageRequest = async (query: PageQuery) => {
export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
@@ -68,7 +65,7 @@ export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExp
formatter: (context) => {
//计算序号,你可以自定义计算规则，此处为翻页累加
let index = context.index ?? 1;
let pagination: any = crudExpose.crudBinding.value.pagination;
let pagination: any = crudExpose!.crudBinding.value.pagination;
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
},
},

14
web/src/views/system/whiteList/index.vue
View File

@@ -6,18 +6,10 @@
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
// 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 });
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {