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

Merge remote-tracking branch 'origin/develop' into develop

Browse Source
This commit is contained in:
1638245306
2024-09-25 23:32:42 +08:00
parent 2c8b51f463 652ad1355a
commit 3f58c1cb7a
69 changed files with 1927 additions and 1478 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
web/src/components/tableSelector/index.vue
View File

@@ -1,203 +1,211 @@
<template>
<el-select popper-class="popperClass" class="tableSelector" :multiple="props.tableConfig.isMultiple"
@remove-tag="removeTag" v-model="data" placeholder="请选择" @visible-change="visibleChange">
<template #empty>
<div class="option">
<el-input style="margin-bottom: 10px" v-model="search" clearable placeholder="请输入关键词" @change="getDict"
@clear="getDict">
<template #append>
<el-button type="primary" icon="Search"/>
</template>
</el-input>
<el-table
ref="tableRef"
:data="tableData"
size="mini"
border
row-key="id"
style="width: 400px"
max-height="200"
height="200"
:highlight-current-row="!props.tableConfig.isMultiple"
@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"
>
<el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" width="55"/>
<el-table-column fixed type="index" label="#" width="50"/>
<el-table-column :prop="item.prop" :label="item.label" :width="item.width"
v-for="(item,index) in props.tableConfig.columns" :key="index"/>
</el-table>
<el-pagination style="margin-top: 10px" background
v-model:current-page="pageConfig.page"
v-model:page-size="pageConfig.limit"
layout="prev, pager, next"
:total="pageConfig.total"
@current-change="handlePageChange"
/>
</div>
</template>
</el-select>
<el-select
popper-class="popperClass"
class="tableSelector"
multiple
@remove-tag="removeTag"
v-model="data"
placeholder="请选择"
@visible-change="visibleChange"
>
<template #empty>
<div class="option">
<el-input style="margin-bottom: 10px" v-model="search" clearable placeholder="请输入关键词" @change="getDict" @clear="getDict">
<template #append>
<el-button type="primary" icon="Search" />
</template>
</el-input>
<el-table
ref="tableRef"
:data="tableData"
size="mini"
border
row-key="id"
:lazy="props.tableConfig.lazy"
:load="props.tableConfig.load"
:tree-props="props.tableConfig.treeProps"
style="width: 400px"
max-height="200"
height="200"
:highlight-current-row="!props.tableConfig.isMultiple"
@selection-change="handleSelectionChange"
@current-change="handleCurrentChange"
>
<el-table-column v-if="props.tableConfig.isMultiple" fixed type="selection" width="55" />
<el-table-column fixed type="index" label="#" width="50" />
<el-table-column
:prop="item.prop"
:label="item.label"
:width="item.width"
v-for="(item, index) in props.tableConfig.columns"
:key="index"
/>
</el-table>
<el-pagination
style="margin-top: 10px"
background
v-model:current-page="pageConfig.page"
v-model:page-size="pageConfig.limit"
layout="prev, pager, next"
:total="pageConfig.total"
@current-change="handlePageChange"
/>
</div>
</template>
</el-select>
</template>
<script setup lang="ts">
import {defineProps, onMounted, reactive, ref, toRaw, watch} from 'vue'
import {dict} from '@fast-crud/fast-crud'
import XEUtils from 'xe-utils'
import {request} from '/@/utils/service'
import { defineProps, reactive, ref, watch } from 'vue';
import XEUtils from 'xe-utils';
import { request } from '/@/utils/service';
const props = defineProps({
modelValue: {},
tableConfig: {
url: null,
label: null, //显示值
value: null, //数据值
isTree: false,
data: [],//默认数据
isMultiple: false, //是否多选
columns: [], //每一项对应的列表项
},
displayLabel: {}
} as any)
const emit = defineEmits(['update:modelValue'])
modelValue: {},
tableConfig: {
url: null,
label: null, //显示值
value: null, //数据值
isTree: false,
lazy: true,
load: () => {},
data: [], //默认数据
isMultiple: false, //是否多选
treeProps: { children: 'children', hasChildren: 'hasChildren' },
columns: [], //每一项对应的列表项
},
displayLabel: {},
} as any);
const emit = defineEmits(['update:modelValue']);
// tableRef
const tableRef = ref()
const tableRef = ref();
// template上使用data
const data = ref()
const data = ref();
// 多选值
const multipleSelection = ref()
watch(multipleSelection, // 监听multipleSelection的变化，
(value) => {
const {tableConfig} = props
//是否多选
if (!tableConfig.isMultiple) {
data.value = value ? value[tableConfig.label] : null
} else {
const result = value ? value.map((item: any) => {
return item[tableConfig.label]
}) : null
data.value = result
}
}, // 当multipleSelection值触发后，同步修改data.value的值
{immediate: true} // 立即触发一次，给data赋值初始值
)
const multipleSelection = ref();
// 搜索值
const search = ref(undefined)
const search = ref(undefined);
//表格数据
const tableData = ref()
const tableData = ref();
// 分页的配置
const pageConfig = reactive({
page: 1,
limit: 10,
total: 0
})
page: 1,
limit: 10,
total: 0,
});
/**
* 表格多选
* @param val:Array
*/
const handleSelectionChange = (val: any) => {
multipleSelection.value = val
const {tableConfig} = props
const result = val.map((item: any) => {
return item[tableConfig.value]
})
emit('update:modelValue', result)
}
multipleSelection.value = val;
const { tableConfig } = props;
const result = val.map((item: any) => {
return item[tableConfig.value];
});
data.value = val.map((item: any) => {
return item[tableConfig.label];
});
emit('update:modelValue', result);
};
/**
* 表格单选
* @param val:Object
*/
const handleCurrentChange = (val: any) => {
multipleSelection.value = val
const {tableConfig} = props
emit('update:modelValue', val[tableConfig.value])
}
const { tableConfig } = props;
if (!tableConfig.isMultiple && val) {
data.value = [val[tableConfig.label]];
emit('update:modelValue', val[tableConfig.value]);
}
};
/**
* 获取字典值
*/
const getDict = async () => {
const url = props.tableConfig.url
const params = {
page: pageConfig.page,
limit: pageConfig.limit,
search: search.value
}
const {data, page, limit, total} = await request({
url:url,
params:params
})
pageConfig.page = page
pageConfig.limit = limit
pageConfig.total = total
if (props.tableConfig.data === undefined || props.tableConfig.data.length === 0) {
if (props.tableConfig.isTree) {
tableData.value = XEUtils.toArrayTree(data, {parentKey: 'parent', key: 'id', children: 'children'})
} else {
tableData.value = data
}
} else {
tableData.value = props.tableConfig.data
}
}
const url = props.tableConfig.url;
const params = {
page: pageConfig.page,
limit: pageConfig.limit,
search: search.value,
};
const { data, page, limit, total } = await request({
url: url,
params: params,
});
pageConfig.page = page;
pageConfig.limit = limit;
pageConfig.total = total;
if (props.tableConfig.data === undefined || props.tableConfig.data.length === 0) {
if (props.tableConfig.isTree) {
tableData.value = XEUtils.toArrayTree(data, { parentKey: 'parent', key: 'id', children: 'children' });
} else {
tableData.value = data;
}
} else {
tableData.value = props.tableConfig.data;
}
};
/**
* 下拉框展开/关闭
* @param bool
*/
const visibleChange = (bool: any) => {
if (bool) {
getDict()
}
}
if (bool) {
getDict();
}
};
/**
* 分页
* @param page
*/
const handlePageChange = (page: any) => {
pageConfig.page = page
getDict()
}
pageConfig.page = page;
getDict();
};
// 监听displayLabel的变化，更新数据
watch(() => {
return props.displayLabel
}, (value) => {
const {tableConfig} = props
const result = value ? value.map((item: any) => {
return item[tableConfig.label]
}) : null
data.value = result
}, {immediate: true})
watch(
() => {
return props.displayLabel;
},
(value) => {
const { tableConfig } = props;
const result = value
? value.map((item: any) => { return item[tableConfig.label];})
: null;
data.value = result;
},
{ immediate: true }
);
</script>
<style scoped>
.option {
height: auto;
line-height: 1;
padding: 5px;
background-color: #fff;
height: auto;
line-height: 1;
padding: 5px;
background-color: #fff;
}
</style>
<style lang="scss">
.popperClass {
height: 320px;
height: 320px;
}
.el-select-dropdown__wrap {
max-height: 310px !important;
max-height: 310px !important;
}
.tableSelector {
.el-icon, .el-tag__close {
display: none;
}
.el-icon,
.el-tag__close {
display: none;
}
}
</style>

2
web/src/i18n/pages/login/zh-cn.ts
View File

@@ -9,7 +9,7 @@ export default {
two4: '友情链接',
},
account: {
accountPlaceholder1: '请输入登录账号',
accountPlaceholder1: '请输入登录账号/邮箱/手机号',
accountPlaceholder2: '请输入登录密码',
accountPlaceholder3: '请输入验证码',
accountBtnText: '登 录',

3
web/src/router/index.ts
View File

@@ -13,6 +13,7 @@ import {initBackEndControlRoutes, setRouters} from '/@/router/backEnd';
import {useFrontendMenuStore} from "/@/stores/frontendMenu";
import {useTagsViewRoutes} from "/@/stores/tagsViewRoutes";
import {toRaw} from "vue";
import {checkVersion} from "/@/utils/upgrade";
/**
* 1、前端控制路由时：isRequestRoutes 为 false，需要写 roles，需要走 setFilterRoute 方法。
@@ -97,6 +98,8 @@ const frameOutRoutes = staticRoutes.map(item => item.path)
// 路由加载前
router.beforeEach(async (to, from, next) => {
// 检查浏览器本地版本与线上版本是否一致，判断是否需要刷新页面进行更新
await checkVersion()
NProgress.configure({showSpinner: false});
if (to.meta.title) NProgress.start();
const token = Session.get('token');

27
web/src/utils/columnPermission.ts
View File

@@ -22,33 +22,18 @@ export const handleColumnPermission = async (func: Function, crudOptions: any,ex
}
}
const columns = crudOptions.columns;
const excludeColumns = ['_index','id', 'create_datetime', 'update_datetime'].concat(excludeColumn)
const excludeColumns = ['checked','_index','id', 'create_datetime', 'update_datetime'].concat(excludeColumn)
for (let col in columns) {
if (excludeColumns.includes(col)) {
continue
}else{
if (columns[col].column) {
columns[col].column.show = false
} else {
columns[col]['column'] = {
show: false
}
}
columns[col].addForm = {
show: false
}
columns[col].editForm = {
show: false
}
}
for (let item of res.data) {
if (excludeColumns.includes(item.field_name)) {
continue
} else if(item.field_name === col) {
columns[col].column.show = item['is_query']
// 如果列表不可见，则禁止在列设置中选择
if(!item['is_query'])columns[col].column.columnSetDisabled = true
// 只有列表不可见，才修改列配置，这样才不影响默认的配置
if(!item['is_query']){
columns[col].column.show = false
columns[col].column.columnSetDisabled = true
}
columns[col].addForm = {
show: item['is_create']
}

4
web/src/utils/loading.ts
View File

@@ -1,5 +1,7 @@
import { nextTick } from 'vue';
import '/@/theme/loading.scss';
import { showUpgrade } from "/@/utils/upgrade";
/**
* 页面全局 Loading
@@ -9,6 +11,8 @@ import '/@/theme/loading.scss';
export const NextLoading = {
// 创建 loading
start: () => {
// 显示升级提示
showUpgrade()
const bodys: Element = document.body;
const div = <HTMLElement>document.createElement('div');
div.setAttribute('class', 'loading-next');

2
web/src/utils/service.ts
View File

@@ -82,7 +82,7 @@ function createService() {
ElMessageBox.alert(dataAxios.msg, '提示', {
confirmButtonText: 'OK',
callback: (action: Action) => {
window.location.reload();
// window.location.reload();
},
});
errorCreate(`${dataAxios.msg}: ${response.config.url}`);

55
web/src/utils/upgrade.ts Normal file
View File

@@ -0,0 +1,55 @@
import axios from "axios";
import * as process from "process";
import {Local, Session} from '/@/utils/storage';
import {ElNotification} from "element-plus";
import fs from "fs";
// 是否显示升级提示信息框
const IS_SHOW_UPGRADE_SESSION_KEY = 'isShowUpgrade';
const VERSION_KEY = 'DVADMIN3_VERSION'
const VERSION_FILE_NAME = 'version-build'
export function showUpgrade () {
const isShowUpgrade = Session.get(IS_SHOW_UPGRADE_SESSION_KEY) ?? false
if (isShowUpgrade) {
Session.remove(IS_SHOW_UPGRADE_SESSION_KEY)
ElNotification({
title: '新版本升级',
message: "检测到系统新版本，正在更新中！不用担心，更新很快的哦！",
type: 'success',
duration: 5000,
});
}
}
// 生产环境前端版本校验，
export async function checkVersion(){
if (process.env.NODE_ENV === 'development') {
// 开发环境无需校验前端版本
return
}
// 获取线上版本号 t为时间戳，防止缓存
await axios.get(`${import.meta.env.VITE_PUBLIC_PATH}${VERSION_FILE_NAME}?t=${new Date().getTime()}`).then(res => {
const {status, data} = res || {}
if (status === 200) {
// 获取当前版本号
const localVersion = Local.get(VERSION_KEY)
// 将当前版本号持久缓存至本地
Local.set(VERSION_KEY, data)
// 当用户本地存在版本号并且和线上版本号不一致时，进行页面刷新操作
if (localVersion && localVersion !== data) {
// 本地缓存版本号和线上版本号不一致，弹出升级提示框
// 此处无法直接使用消息框进行提醒，因为 window.location.reload()会导致消息框消失,将在loading页面判断是否需要显示升级提示框
Session.set(IS_SHOW_UPGRADE_SESSION_KEY, true)
window.location.reload()
}
}
})
}
export function generateVersionFile (){
// 生成版本文件到public目录下version文件中
const version = `${process.env.npm_package_version}.${new Date().getTime()}`;
fs.writeFileSync(`public/${VERSION_FILE_NAME}`, version);
}

46
web/src/views/plugins/dvadmin_form_flow/install-render.js
View File

@@ -1,46 +0,0 @@
import axios from 'axios'
import VFormRender from '@/components/form-render/index.vue'
import ContainerItems from '@/components/form-render/container-item/index'
import {registerIcon} from '@/utils/el-icons'
import 'virtual:svg-icons-register'
import '@/iconfont/iconfont.css'
import { installI18n } from '@/utils/i18n'
import { loadExtension } from '@/extension/extension-loader'
VFormRender.install = function (app) {
installI18n(app)
loadExtension(app)
app.use(ContainerItems)
registerIcon(app)
app.component(VFormRender.name, VFormRender)
}
const components = [
VFormRender
]
const install = (app) => {
installI18n(app)
loadExtension(app)
app.use(ContainerItems)
registerIcon(app)
components.forEach(component => {
app.component(component.name, component)
})
window.axios = axios
}
if (typeof window !== 'undefined' && window.Vue) { /* script<EFBFBD><EFBFBD>ʽ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʱ<EFBFBD><EFBFBD>ֵaxios<EFBFBD><EFBFBD><EFBFBD><EFBFBD> */
//window.axios = axios
}
export default {
install,
VFormRender
}

73
web/src/views/plugins/dvadmin_form_flow/install.js
View File

@@ -1,73 +0,0 @@
import axios from 'axios'
import VFormDesigner from '@/components/form-designer/index.vue'
import VFormRender from '@/components/form-render/index.vue'
import Draggable from '@/../lib/vuedraggable/dist/vuedraggable.umd.js'
import {registerIcon} from '@/utils/el-icons'
import 'virtual:svg-icons-register'
import '@/iconfont/iconfont.css'
import ContainerWidgets from '@/components/form-designer/form-widget/container-widget/index'
import ContainerItems from '@/components/form-render/container-item/index'
import { addDirective } from '@/utils/directive'
import { installI18n } from '@/utils/i18n'
import { loadExtension } from '@/extension/extension-loader'
VFormDesigner.install = function (app) {
addDirective(app)
installI18n(app)
loadExtension(app)
app.use(ContainerWidgets)
app.use(ContainerItems)
registerIcon(app)
app.component('draggable', Draggable)
app.component(VFormDesigner.name, VFormDesigner)
}
VFormRender.install = function (app) {
installI18n(app)
loadExtension(app)
app.use(ContainerItems)
registerIcon(app)
app.component(VFormRender.name, VFormRender)
}
const components = [
VFormDesigner,
VFormRender
]
const install = (app) => {
addDirective(app)
installI18n(app)
loadExtension(app)
app.use(ContainerWidgets)
app.use(ContainerItems)
registerIcon(app)
app.component('draggable', Draggable)
components.forEach(component => {
app.component(component.name, component)
})
window.axios = axios
}
if (typeof window !== 'undefined' && window.Vue) { /* script<EFBFBD><EFBFBD>ʽ<EFBFBD><EFBFBD><EFBFBD><EFBFBD>ʱ<EFBFBD><EFBFBD>ֵaxios<EFBFBD><EFBFBD><EFBFBD><EFBFBD> */
//window.axios = axios
}
export default {
install,
VFormDesigner,
VFormRender
}

29
web/src/views/plugins/dvadmin_form_flow/src/index.ts
View File

@@ -1,29 +0,0 @@
// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
import DVAFormDesigner from './components/DVAFormDesigner.vue'
// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>浽һ<E6B5BD><D2BB><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
const components = [
DVAFormDesigner
]
// <20><><EFBFBD><EFBFBD> install <20><><EFBFBD><EFBFBD>
const install = function (Vue) {
if (install.installed) return
install.installed = true
// <20><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>б<EFBFBD><D0B1><EFBFBD>ע<EFBFBD><D7A2>ȫ<EFBFBD><C8AB><EFBFBD><EFBFBD><EFBFBD><EFBFBD>
components.map(component => {
Vue.component(component.name, component) //component.name <20>˴<EFBFBD>ʹ<EFBFBD>õ<EFBFBD><C3B5><EFBFBD><EFBFBD><EFBFBD>vue<75>ļ<EFBFBD><C4BC>е<EFBFBD> name <20><><EFBFBD><EFBFBD>
})
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// <20><><EFBFBD><EFBFBD><EFBFBD>Ķ<EFBFBD><C4B6><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>߱<EFBFBD>һ<EFBFBD><D2BB> install <20><><EFBFBD><EFBFBD>
install,
// <20><><EFBFBD><EFBFBD><EFBFBD>б<EFBFBD>
...components
}

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

@@ -39,3 +39,9 @@ export function DelObj(id: DelReq) {
data: { id },
});
}
export function GetPermission() {
return request({
url: apiPrefix + 'field_permission/',
method: 'get',
});
}

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

@@ -1,244 +1,202 @@
import * as api from './api';
import {
dict,
UserPageQuery,
AddReq,
DelReq,
EditReq,
compute,
CreateCrudOptionsProps,
CreateCrudOptionsRet
} from '@fast-crud/fast-crud';
import {dictionary} from '/@/utils/dictionary';
import {successMessage} from '/@/utils/message';
import {auth} from "/@/utils/authFunction";
import { dict, UserPageQuery, AddReq, DelReq, EditReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
import { dictionary } from '/@/utils/dictionary';
import { successMessage } from '/@/utils/message';
import { auth } from '/@/utils/authFunction';
import tableSelector from '/@/components/tableSelector/index.vue';
import { shallowRef } from 'vue';
export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({form, row}: EditReq) => {
form.id = row.id;
return await api.UpdateObj(form);
};
const delRequest = async ({row}: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({form}: AddReq) => {
return await api.AddObj(form);
};
export const createCrudOptions = function ({ crudExpose }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async (query: UserPageQuery) => {
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id;
return await api.UpdateObj(form);
};
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: Function) => {
pageRequest({pcode: tree.code}).then((res: APIResponseData) => {
resolve(res.data);
});
};
/**
* 懒加载
* @param row
* @returns {Promise<unknown>}
*/
const loadContentMethod = (tree: any, treeNode: any, resolve: Function) => {
pageRequest({ pcode: tree.code }).then((res: APIResponseData) => {
resolve(res.data);
});
};
return {
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest,
},
actionbar: {
buttons: {
add: {
show: auth('area:Create'),
}
}
},
rowHandle: {
//固定右侧
fixed: 'right',
width: 200,
buttons: {
view: {
show: false,
},
edit: {
iconRight: 'Edit',
type: 'text',
show: auth('area:Update')
},
remove: {
iconRight: 'Delete',
type: 'text',
show: auth('area:Delete')
},
},
},
pagination: {
show: false,
},
table: {
rowKey: 'id',
lazy: true,
load: loadContentMethod,
treeProps: {children: 'children', hasChildren: 'hasChild'},
},
columns: {
_index: {
title: '序号',
form: {show: false},
column: {
type: 'index',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
},
},
// pcode: {
// title: '父级地区',
// show: false,
// search: {
// show: true,
// },
// type: 'dict-tree',
// form: {
// component: {
// showAllLevels: false, // 仅显示最后一级
// props: {
// elProps: {
// clearable: true,
// showAllLevels: false, // 仅显示最后一级
// props: {
// checkStrictly: true, // 可以不需要选到最后一级
// emitPath: false,
// clearable: true,
// },
// },
// },
// },
// },
// },
name: {
title: '名称',
search: {
show: true,
},
treeNode: true,
type: 'input',
column: {
minWidth: 120,
},
form: {
rules: [
// 表单校验规则
{required: true, message: '名称必填项'},
],
component: {
placeholder: '请输入名称',
},
},
},
code: {
title: '地区编码',
search: {
show: true,
},
type: 'input',
column: {
minWidth: 90,
},
form: {
rules: [
// 表单校验规则
{required: true, message: '地区编码必填项'},
],
component: {
placeholder: '请输入地区编码',
},
},
},
pinyin: {
title: '拼音',
search: {
disabled: true,
},
type: 'input',
column: {
minWidth: 120,
},
form: {
rules: [
// 表单校验规则
{required: true, message: '拼音必填项'},
],
component: {
placeholder: '请输入拼音',
},
},
},
level: {
title: '地区层级',
search: {
disabled: true,
},
type: 'input',
column: {
minWidth: 100,
},
form: {
disabled: false,
rules: [
// 表单校验规则
{required: true, message: '拼音必填项'},
],
component: {
placeholder: '请输入拼音',
},
},
},
initials: {
title: '首字母',
column: {
minWidth: 100,
},
form: {
rules: [
// 表单校验规则
{required: true, message: '首字母必填项'},
],
component: {
placeholder: '请输入首字母',
},
},
},
enable: {
title: '是否启用',
search: {
show: true,
},
type: 'dict-radio',
column: {
minWidth: 90,
component: {
name: 'fs-dict-switch',
activeText: '',
inactiveText: '',
style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
onChange: compute((context) => {
return () => {
api.UpdateObj(context.row).then((res: APIResponseData) => {
successMessage(res.msg as string);
});
};
}),
},
},
dict: dict({
data: dictionary('button_status_bool'),
}),
},
},
},
};
return {
crudOptions: {
request: {
pageRequest,
addRequest,
editRequest,
delRequest,
},
actionbar: {
buttons: {
add: {
show: auth('area:Create'),
},
},
},
rowHandle: {
//固定右侧
fixed: 'right',
width: 200,
buttons: {
view: {
show: false,
},
edit: {
iconRight: 'Edit',
type: 'text',
show: auth('area:Update'),
},
remove: {
iconRight: 'Delete',
type: 'text',
show: auth('area:Delete'),
},
},
},
pagination: {
show: false,
},
table: {
rowKey: 'id',
lazy: true,
load: loadContentMethod,
treeProps: { children: 'children', hasChildren: 'hasChild' },
},
columns: {
_index: {
title: '序号',
form: { show: false },
column: {
type: 'index',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
},
},
name: {
title: '名称',
search: {
show: true,
},
treeNode: true,
type: 'input',
column: {
minWidth: 120,
},
form: {
rules: [
// 表单校验规则
{ required: true, message: '名称必填项' },
],
component: {
placeholder: '请输入名称',
},
},
},
pcode: {
title: '父级地区',
search: {
disabled: true,
},
width: 130,
type: 'table-selector',
form: {
component: {
name: shallowRef(tableSelector),
vModel: 'modelValue',
displayLabel: compute(({ row }) => {
if (row) {
return row.pcode_info;
}
return null;
}),
tableConfig: {
url: '/api/system/area/',
label: 'name',
value: 'id',
isTree: true,
isMultiple: false,
lazy: true,
load: loadContentMethod,
treeProps: { children: 'children', hasChildren: 'hasChild' },
columns: [
{
prop: 'name',
label: '地区',
width: 150,
},
{
prop: 'code',
label: '地区编码',
},
],
},
},
},
column: {
show: false,
},
},
code: {
title: '地区编码',
search: {
show: true,
},
type: 'input',
column: {
minWidth: 90,
},
form: {
rules: [
// 表单校验规则
{ required: true, message: '地区编码必填项' },
],
component: {
placeholder: '请输入地区编码',
},
},
},
enable: {
title: '是否启用',
search: {
show: true,
},
type: 'dict-radio',
column: {
minWidth: 90,
component: {
name: 'fs-dict-switch',
activeText: '',
inactiveText: '',
style: '--el-switch-on-color: var(--el-color-primary); --el-switch-off-color: #dcdfe6',
onChange: compute((context) => {
return () => {
api.UpdateObj(context.row).then((res: APIResponseData) => {
successMessage(res.msg as string);
});
};
}),
},
},
dict: dict({
data: dictionary('button_status_bool'),
}),
},
},
},
};
};

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

@@ -5,14 +5,21 @@
</template>
<script lang="ts" setup name="areas">
import { ref, onMounted } from 'vue';
import { onMounted } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { GetPermission } from './api';
import { handleColumnPermission } from '/@/utils/columnPermission';
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
onMounted(async () => {
// 设置列权限
const newOptions = await handleColumnPermission(GetPermission, crudOptions);
//重置crudBinding
resetCrudOptions(newOptions);
// 刷新
crudExpose.doRefresh();
});
</script>

14
web/src/views/system/dept/components/DeptUserCom/api.ts
View File

@@ -5,13 +5,13 @@ type GetListType = PageQuery & { show_all: string };
export const apiPrefix = '/api/system/user/';
export function GetDept(query: PageQuery) {
return request({
url: '/api/system/dept/dept_lazy_tree/',
method: 'get',
params: query,
});
}
// export function GetDept(query: PageQuery) {
// return request({
// url: '/api/system/dept/dept_all/',
// method: 'get',
// params: query,
// });
// }
export function GetList(query: GetListType) {
return request({

15
web/src/views/system/dept/components/DeptUserCom/crud.tsx
View File

@@ -220,7 +220,10 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
label: 'name',
}),
column: {
minWidth: 150, //最小列宽
minWidth: 200, //最小列宽
formatter({value,row,index}){
return row.dept_name_all
}
},
form: {
rules: [
@@ -259,7 +262,11 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
label: 'name',
}),
column: {
minWidth: 100, //最小列宽
minWidth: 200, //最小列宽
formatter({value,row,index}){
const values = row.role_info.map((item:any) => item.name);
return values.join(',')
}
},
form: {
rules: [
@@ -382,6 +389,10 @@ export const createCrudOptions = function ({ crudExpose, context }: CreateCrudOp
form: {
show: false,
},
column:{
width:150,
showOverflowTooltip: true,
}
},
},
},

3
web/src/views/system/dept/components/DeptUserCom/index.vue
View File

@@ -277,7 +277,8 @@ const { resetCrudOptions } = useCrud({
padding: 0 10px;
border-radius: 8px 0 0 8px;
box-sizing: border-box;
background-color: #fff;
color: var(--next-bg-topBarColor);
background-color: var(--el-fill-color-blank);;
}
.dept-user-com-table {
height: calc(100% - 200px);

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

@@ -133,7 +133,7 @@ onMounted(() => {
}
.dept-left {
background-color: #fff;
background-color: var(--el-fill-color-blank);;
border-radius: 0 8px 8px 0;
padding: 10px;
}

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

@@ -39,3 +39,10 @@ export function DelObj(id: DelReq) {
data: { id },
});
}
export function GetPermission() {
return request({
url: apiPrefix + 'field_permission/',
method: 'get',
});
}

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

@@ -5,14 +5,21 @@
</template>
<script lang="ts" setup name="loginLog">
import { ref, onMounted } from 'vue';
import { onMounted } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { GetPermission } from './api';
import { handleColumnPermission } from '/@/utils/columnPermission';
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
onMounted(async () => {
// 设置列权限
const newOptions = await handleColumnPermission(GetPermission, crudOptions);
//重置crudBinding
resetCrudOptions(newOptions);
// 刷新
crudExpose.doRefresh();
});
</script>

7
web/src/views/system/menu/components/MenuButtonCom/api.ts
View File

@@ -48,3 +48,10 @@ export function BatchAdd(obj: AddReq) {
});
}
export function BatchDelete(keys: any) {
return request({
url: apiPrefix + 'multiple_delete/',
method: 'delete',
data: { keys },
});
}

52
web/src/views/system/menu/components/MenuButtonCom/crud.tsx
View File

@@ -4,6 +4,8 @@ import {auth} from '/@/utils/authFunction'
import {request} from '/@/utils/service';
import { successNotification } from '/@/utils/message';
import { ElMessage } from 'element-plus';
import { nextTick, ref } from 'vue';
import XEUtils from 'xe-utils';
//此处为crudOptions配置
export const createCrudOptions = function ({crudExpose, context}: CreateCrudOptionsProps): CreateCrudOptionsRet {
const pageRequest = async () => {
@@ -22,7 +24,42 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
const addRequest = async ({form}: AddReq) => {
return await api.AddObj({...form, ...{menu: context!.selectOptions.value.id}});
};
// 记录选中的行
const selectedRows = ref<any>([]);
const onSelectionChange = (changed: any) => {
const tableData = crudExpose.getTableData();
const unChanged = tableData.filter((row: any) => !changed.includes(row));
// 添加已选择的行
XEUtils.arrayEach(changed, (item: any) => {
const ids = XEUtils.pluck(selectedRows.value, 'id');
if (!ids.includes(item.id)) {
selectedRows.value = XEUtils.union(selectedRows.value, [item]);
}
});
// 剔除未选择的行
XEUtils.arrayEach(unChanged, (unItem: any) => {
selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== unItem.id);
});
};
const toggleRowSelection = () => {
// 多选后，回显默认勾选
const tableRef = crudExpose.getBaseTableRef();
const tableData = crudExpose.getTableData();
const selected = XEUtils.filter(tableData, (item: any) => {
const ids = XEUtils.pluck(selectedRows.value, 'id');
return ids.includes(item.id);
});
nextTick(() => {
XEUtils.arrayEach(selected, (item) => {
tableRef.toggleRowSelection(item, true);
});
});
};
return {
selectedRows,
crudOptions: {
pagination:{
show:false
@@ -84,6 +121,11 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
editRequest,
delRequest,
},
table: {
rowKey: 'id', //设置你的主键id， 默认rowKey=id
onSelectionChange,
onRefreshed: () => toggleRowSelection(),
},
form: {
col: {span: 24},
labelWidth: '100px',
@@ -93,6 +135,16 @@ export const createCrudOptions = function ({crudExpose, context}: CreateCrudOpti
},
},
columns: {
$checked: {
title: '选择',
form: { show: false },
column: {
type: 'selection',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
},
},
_index: {
title: '序号',
form: {show: false},

61
web/src/views/system/menu/components/MenuButtonCom/index.vue
View File

@@ -1,19 +1,72 @@
<template>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
<fs-crud ref="crudRef" v-bind="crudBinding">
<template #pagination-left>
<el-tooltip content="批量删除">
<el-button text type="danger" :disabled="selectedRowsCount === 0" :icon="Delete" circle @click="handleBatchDelete" />
</el-tooltip>
</template>
<template #pagination-right>
<el-popover placement="top" :width="400" trigger="click">
<template #reference>
<el-button text :type="selectedRowsCount > 0 ? 'primary' : ''">已选中{{ selectedRowsCount }}条数据</el-button>
</template>
<el-table :data="selectedRows" size="small">
<el-table-column width="150" property="id" label="id" />
<el-table-column fixed="right" label="操作" min-width="60">
<template #default="scope">
<el-button text type="info" :icon="Close" @click="removeSelectedRows(scope.row)" circle />
</template>
</el-table-column>
</el-table>
</el-popover>
</template>
</fs-crud>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { computed, ref } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { MenuTreeItemType } from '../../types';
import { ElMessage, ElMessageBox } from 'element-plus';
import XEUtils from 'xe-utils';
import { BatchDelete } from './api';
import { Close, Delete } from '@element-plus/icons-vue';
// 当前选择的菜单信息
let selectOptions: any = ref({ name: null });
const { crudRef, crudBinding, crudExpose, context } = useFs({ createCrudOptions, context: { selectOptions } });
const { crudRef, crudBinding, crudExpose, context,selectedRows } = useFs({ createCrudOptions, context: { selectOptions } });
const { doRefresh, setTableData } = crudExpose;
// 选中行的条数
const selectedRowsCount = computed(() => {
return selectedRows.value.length;
});
// 批量删除
const handleBatchDelete = async () => {
await ElMessageBox.confirm(`确定要批量删除这${selectedRows.value.length}条记录吗`, '确认', {
distinguishCancelAndClose: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
closeOnClickModal: false,
});
await BatchDelete(XEUtils.pluck(selectedRows.value, 'id'));
ElMessage.info('删除成功');
selectedRows.value = [];
await crudExpose.doRefresh();
};
// 移除已选中的行
const removeSelectedRows = (row: any) => {
const tableRef = crudExpose.getBaseTableRef();
const tableData = crudExpose.getTableData();
if (XEUtils.pluck(tableData, 'id').includes(row.id)) {
tableRef.toggleRowSelection(row, false);
} else {
selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== row.id);
}
};
const handleRefreshTable = (record: MenuTreeItemType) => {
if (!record.is_catalog && record.id) {
selectOptions.value = record;

7
web/src/views/system/menu/components/MenuFieldCom/api.ts
View File

@@ -42,6 +42,13 @@ export function DelObj(id: DelReq) {
});
}
export function BatchDelete(keys: any) {
return request({
url: apiPrefix + 'multiple_delete/',
method: 'delete',
data: { keys },
});
}
/**
* 获取所有model
*/

51
web/src/views/system/menu/components/MenuFieldCom/crud.tsx
View File

@@ -2,8 +2,9 @@ import * as api from './api';
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 { inject } from 'vue';
import { inject, nextTick, ref } from 'vue';
import {auth} from "/@/utils/authFunction";
import XEUtils from 'xe-utils';
@@ -27,8 +28,41 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec
form.menu = selectOptions.value.id;
return await api.AddObj(form);
};
// 记录选中的行
const selectedRows = ref<any>([]);
const onSelectionChange = (changed: any) => {
const tableData = crudExpose.getTableData();
const unChanged = tableData.filter((row: any) => !changed.includes(row));
// 添加已选择的行
XEUtils.arrayEach(changed, (item: any) => {
const ids = XEUtils.pluck(selectedRows.value, 'id');
if (!ids.includes(item.id)) {
selectedRows.value = XEUtils.union(selectedRows.value, [item]);
}
});
// 剔除未选择的行
XEUtils.arrayEach(unChanged, (unItem: any) => {
selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== unItem.id);
});
};
const toggleRowSelection = () => {
// 多选后，回显默认勾选
const tableRef = crudExpose.getBaseTableRef();
const tableData = crudExpose.getTableData();
const selected = XEUtils.filter(tableData, (item: any) => {
const ids = XEUtils.pluck(selectedRows.value, 'id');
return ids.includes(item.id);
});
nextTick(() => {
XEUtils.arrayEach(selected, (item) => {
tableRef.toggleRowSelection(item, true);
});
});
};
return {
selectedRows,
crudOptions: {
request: {
pageRequest,
@@ -77,7 +111,22 @@ export const createCrudOptions = function ({ crudExpose, props,modelDialog,selec
width: '600px',
},
},
table: {
rowKey: 'id', //设置你的主键id， 默认rowKey=id
onSelectionChange,
onRefreshed: () => toggleRowSelection(),
},
columns: {
$checked: {
title: '选择',
form: { show: false },
column: {
type: 'selection',
align: 'center',
width: '70px',
columnSetDisabled: true, //禁止在列设置中选择
},
},
_index: {
title: '序号',
form: { show: false },

232
web/src/views/system/menu/components/MenuFieldCom/index.vue
View File

@@ -1,137 +1,177 @@
<template>
<div>
<el-dialog ref="modelRef" v-model="modelDialog" title="选择model">
<div v-show="props.model">
<el-tag>已选择:{{ props.model }}</el-tag>
</div>
<!-- 搜索输入框 -->
<el-input
v-model="searchQuery"
placeholder="搜索模型..."
style="margin-bottom: 10px;"
></el-input>
<div class="model-card">
<!--注释编号:django-vue3-admin-index483211: 对请求回来的allModelData进行computed计算，返加搜索框匹配到的内容-->
<div v-for="(item,index) in filteredModelData" :value="item.key" :key="index">
<el-text :type="modelCheckIndex===index?'primary':''" @click="onModelChecked(item,index)">
{{ item.app + '--' + item.title + '(' + item.key + ')' }}
</el-text>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="modelDialog = false">取消</el-button>
<el-button type="primary" @click="handleAutomatch">
确定
</el-button>
</span>
</template>
</el-dialog>
<div style="height: 80vh">
<fs-crud ref="crudRef" v-bind="crudBinding">
</fs-crud>
</div>
</div>
<div>
<el-dialog ref="modelRef" v-model="modelDialog" title="选择model">
<div v-show="props.model">
<el-tag>已选择:{{ props.model }}</el-tag>
</div>
<!-- 搜索输入框 -->
<el-input v-model="searchQuery" placeholder="搜索模型..." style="margin-bottom: 10px"></el-input>
<div class="model-card">
<!--注释编号:django-vue3-admin-index483211: 对请求回来的allModelData进行computed计算，返加搜索框匹配到的内容-->
<div v-for="(item, index) in filteredModelData" :value="item.key" :key="index">
<el-text :type="modelCheckIndex === index ? 'primary' : ''" @click="onModelChecked(item, index)">
{{ item.app + '--' + item.title + '(' + item.key + ')' }}
</el-text>
</div>
</div>
<template #footer>
<span class="dialog-footer">
<el-button @click="modelDialog = false">取消</el-button>
<el-button type="primary" @click="handleAutomatch"> 确定 </el-button>
</span>
</template>
</el-dialog>
<div style="height: 72vh">
<fs-crud ref="crudRef" v-bind="crudBinding">
<template #pagination-left>
<el-tooltip content="批量删除">
<el-button text type="danger" :disabled="selectedRowsCount === 0" :icon="Delete" circle @click="handleBatchDelete" />
</el-tooltip>
</template>
<template #pagination-right>
<el-popover placement="top" :width="400" trigger="click">
<template #reference>
<el-button text :type="selectedRowsCount > 0 ? 'primary' : ''">已选中{{ selectedRowsCount }}条数据</el-button>
</template>
<el-table :data="selectedRows" size="small">
<el-table-column width="150" property="id" label="id" />
<el-table-column fixed="right" label="操作" min-width="60">
<template #default="scope">
<el-button text type="info" :icon="Close" @click="removeSelectedRows(scope.row)" circle />
</template>
</el-table-column>
</el-table>
</el-popover>
</template>
</fs-crud>
</div>
</div>
</template>
<script lang="ts" setup>
import {ref, onMounted, reactive, computed } from 'vue';
import {useFs} from '@fast-crud/fast-crud';
import {createCrudOptions} from './crud';
import {getModelList} from './api'
import {MenuTreeItemType} from "/@/views/system/menu/types";
import {successMessage, successNotification, warningNotification} from '/@/utils/message';
import {automatchColumnsData} from '/@/views/system/columns/components/ColumnsTableCom/api';
import { ref, onMounted, reactive, computed } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { BatchDelete, getModelList } from './api';
import { Close, Delete } from '@element-plus/icons-vue';
import { MenuTreeItemType } from '/@/views/system/menu/types';
import { successMessage, successNotification, warningNotification } from '/@/utils/message';
import { automatchColumnsData } from '/@/views/system/columns/components/ColumnsTableCom/api';
import XEUtils from 'xe-utils';
import { ElMessage, ElMessageBox } from 'element-plus';
// 当前选择的菜单信息
let selectOptions: any = ref({name: null});
let selectOptions: any = ref({ name: null });
const props = reactive({
model: '',
app: '',
menu: ''
})
model: '',
app: '',
menu: '',
});
//model弹窗
const modelDialog = ref(false)
const modelDialog = ref(false);
// 获取所有model
const allModelData = ref<any[]>([]);
const modelCheckIndex = ref(null)
const modelCheckIndex = ref(null);
const onModelChecked = (row, index) => {
modelCheckIndex.value = index
props.model = row.key
props.app = row.app
}
modelCheckIndex.value = index;
props.model = row.key;
props.app = row.app;
};
// 注释编号:django-vue3-admin-index083311:代码开始行
// 功能说明:搭配搜索的处理，返回搜索结果
const searchQuery = ref('');
const filteredModelData = computed(() => {
if (!searchQuery.value) {
return allModelData.value;
}
const query = searchQuery.value.toLowerCase();
return allModelData.value.filter(item =>
item.app.toLowerCase().includes(query) ||
item.title.toLowerCase().includes(query) ||
item.key.toLowerCase().includes(query)
);
});
if (!searchQuery.value) {
return allModelData.value;
}
const query = searchQuery.value.toLowerCase();
return allModelData.value.filter(
(item) => item.app.toLowerCase().includes(query) || item.title.toLowerCase().includes(query) || item.key.toLowerCase().includes(query)
);
});
// 注释编号:django-vue3-admin-index083311:代码结束行
/**
* 菜单选中时,加载表格数据
* @param record
*/
const handleRefreshTable = (record: MenuTreeItemType) => {
if (!record.is_catalog && record.id) {
selectOptions.value = record;
crudExpose.doRefresh();
} else {
//清空表格数据
crudExpose.setTableData([]);
}
if (!record.is_catalog && record.id) {
selectOptions.value = record;
crudExpose.doRefresh();
} else {
//清空表格数据
crudExpose.setTableData([]);
}
};
/**
* 自动匹配列
*/
const handleAutomatch = async () => {
props.menu = selectOptions.value.id
modelDialog.value = false
if (props.menu && props.model) {
const res = await automatchColumnsData(props);
if (res?.code === 2000) {
successNotification('匹配成功');
}
crudExpose.doSearch({form: {menu: props.menu, model: props.model}});
}else {
warningNotification('请选择角色和模型表！');
}
props.menu = selectOptions.value.id;
modelDialog.value = false;
if (props.menu && props.model) {
const res = await automatchColumnsData(props);
if (res?.code === 2000) {
successNotification('匹配成功');
}
crudExpose.doSearch({ form: { menu: props.menu, model: props.model } });
} else {
warningNotification('请选择角色和模型表！');
}
};
const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions, props, modelDialog, selectOptions,allModelData});
onMounted(async () => {
const res = await getModelList();
allModelData.value = res.data;
// 选中行的条数
const selectedRowsCount = computed(() => {
return selectedRows.value.length;
});
defineExpose({selectOptions, handleRefreshTable});
// 批量删除
const handleBatchDelete = async () => {
await ElMessageBox.confirm(`确定要批量删除这${selectedRows.value.length}条记录吗`, '确认', {
distinguishCancelAndClose: true,
confirmButtonText: '确定',
cancelButtonText: '取消',
closeOnClickModal: false,
});
await BatchDelete(XEUtils.pluck(selectedRows.value, 'id'));
ElMessage.info('删除成功');
selectedRows.value = [];
await crudExpose.doRefresh();
};
// 移除已选中的行
const removeSelectedRows = (row: any) => {
const tableRef = crudExpose.getBaseTableRef();
const tableData = crudExpose.getTableData();
if (XEUtils.pluck(tableData, 'id').includes(row.id)) {
tableRef.toggleRowSelection(row, false);
} else {
selectedRows.value = XEUtils.remove(selectedRows.value, (item: any) => item.id !== row.id);
}
};
const { crudBinding, crudRef, crudExpose, selectedRows } = useFs({ createCrudOptions, props, modelDialog, selectOptions, allModelData });
onMounted(async () => {
const res = await getModelList();
allModelData.value = res.data;
});
defineExpose({ selectOptions, handleRefreshTable });
</script>
<style scoped lang="scss">
.model-card {
margin-top: 10px;
height: 30vh;
overflow-y: scroll;
margin-top: 10px;
height: 30vh;
overflow-y: scroll;
div {
margin: 15px 0;
cursor: pointer;
}
div {
margin: 15px 0;
cursor: pointer;
}
}
</style>

113
web/src/views/system/menu/components/MenuFormCom/index.vue
View File

@@ -10,21 +10,12 @@
<el-input v-model="menuFormData.name" placeholder="请输入菜单名称" />
</el-form-item>
<el-form-item label="父级菜单" prop="parent">
<el-tree-select
v-model="menuFormData.parent"
:props="defaultTreeProps"
:data="deptDefaultList"
:cache-data="props.cacheData"
lazy
check-strictly
clearable
:load="handleTreeLoad"
placeholder="请选择父级菜单"
style="width: 100%"
/>
<el-tree-select v-model="menuFormData.parent" :props="defaultTreeProps" :data="deptDefaultList"
:cache-data="props.cacheData" lazy check-strictly clearable :load="handleTreeLoad"
placeholder="请选择父级菜单" style="width: 100%" />
</el-form-item>
<el-form-item label="路由地址" prop="web_path">
<el-form-item label="路由地址" prop="web_path">
<el-input v-model="menuFormData.web_path" placeholder="请输入路由地址，请以/开头" />
</el-form-item>
@@ -35,12 +26,14 @@
<el-row>
<el-col :span="12">
<el-form-item required label="状态">
<el-switch v-model="menuFormData.status" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
<el-switch v-model="menuFormData.status" width="60" inline-prompt active-text="启用"
inactive-text="禁用" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="menuFormData.status" required label="侧边显示">
<el-switch v-model="menuFormData.visible" width="60" inline-prompt active-text="显示" inactive-text="隐藏" />
<el-switch v-model="menuFormData.visible" width="60" inline-prompt active-text="显示"
inactive-text="隐藏" />
</el-form-item>
</el-col>
</el-row>
@@ -48,46 +41,45 @@
<el-row>
<el-col :span="12">
<el-form-item required label="是否目录">
<el-switch v-model="menuFormData.is_catalog" width="60" inline-prompt active-text="是" inactive-text="否" />
<el-switch v-model="menuFormData.is_catalog" width="60" inline-prompt active-text="是"
inactive-text="否" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="!menuFormData.is_catalog" required label="外链接">
<el-switch v-model="menuFormData.is_link" width="60" inline-prompt active-text="是" inactive-text="否" />
<el-switch v-model="menuFormData.is_link" width="60" inline-prompt active-text="是"
inactive-text="否" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item required v-if="!menuFormData.is_catalog" label="是否固定">
<el-switch v-model="menuFormData.is_affix" width="60" inline-prompt active-text="是"
inactive-text="否" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="!menuFormData.is_catalog && menuFormData.is_link" required label="是否内嵌">
<el-switch v-model="menuFormData.is_iframe" width="60" inline-prompt active-text="是"
inactive-text="否" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item required v-if="!menuFormData.is_catalog" label="是否固定">
<el-switch v-model="menuFormData.is_affix" width="60" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item v-if="!menuFormData.is_catalog && menuFormData.is_link" required label="是否内嵌">
<el-switch v-model="menuFormData.is_iframe" width="60" inline-prompt active-text="是" inactive-text="否" />
</el-form-item>
</el-col>
</el-row>
<el-form-item label="备注">
<el-input v-model="menuFormData.description" maxlength="200" show-word-limit type="textarea" placeholder="请输入备注" />
<el-input v-model="menuFormData.description" maxlength="200" show-word-limit type="textarea"
placeholder="请输入备注" />
</el-form-item>
<el-divider></el-divider>
<div style="min-height: 184px">
<el-form-item v-if="!menuFormData.is_catalog && !menuFormData.is_link" label="组件地址" prop="component">
<el-autocomplete
class="w-full"
v-model="menuFormData.component"
:fetch-suggestions="querySearch"
:trigger-on-focus="false"
clearable
:debounce="100"
placeholder="输入组件地址"
/>
<el-autocomplete class="w-full" v-model="menuFormData.component" :fetch-suggestions="querySearch"
:trigger-on-focus="false" clearable :debounce="100" placeholder="输入组件地址" />
</el-form-item>
<el-form-item v-if="!menuFormData.is_catalog && !menuFormData.is_link" label="组件名称" prop="component_name">
<el-form-item v-if="!menuFormData.is_catalog && !menuFormData.is_link" label="组件名称"
prop="component_name">
<el-input v-model="menuFormData.component_name" placeholder="请输入组件名称" />
</el-form-item>
@@ -96,7 +88,8 @@
</el-form-item>
<el-form-item v-if="!menuFormData.is_catalog" label="缓存">
<el-switch v-model="menuFormData.cache" width="60" inline-prompt active-text="启用" inactive-text="禁用" />
<el-switch v-model="menuFormData.cache" width="60" inline-prompt active-text="启用"
inactive-text="禁用" />
</el-form-item>
</div>
@@ -111,6 +104,7 @@
</template>
<script lang="ts" setup>
import XEUtils from 'xe-utils';
import { ref, onMounted, reactive } from 'vue';
import { ElForm, FormRules } from 'element-plus';
import IconSelector from '/@/components/iconSelector/index.vue';
@@ -148,14 +142,14 @@ const validateWebPath = (rule: any, value: string, callback: Function) => {
};
const validateLinkUrl = (rule: any, value: string, callback: Function) => {
let pattern = /^\/.*?/;
let patternUrl = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
const reg = pattern.test(value) || patternUrl.test(value)
if (reg) {
callback();
} else {
callback(new Error('请输入正确的地址'));
}
let pattern = /^\/.*?/;
let patternUrl = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
const reg = pattern.test(value) || patternUrl.test(value)
if (reg) {
callback();
} else {
callback(new Error('请输入正确的地址'));
}
};
const props = withDefaults(defineProps<IProps>(), {
@@ -172,7 +166,7 @@ const rules = reactive<FormRules>({
name: [{ required: true, message: '菜单名称必填', trigger: 'blur' }],
component: [{ required: true, message: '请输入组件地址', trigger: 'blur' }],
component_name: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],
link_url: [{ required: true, message: '请输入外链接地址',validator:validateLinkUrl, trigger: 'blur' }],
link_url: [{ required: true, message: '请输入外链接地址', validator: validateLinkUrl, trigger: 'blur' }],
});
let deptDefaultList = ref<MenuTreeItemType[]>([]);
@@ -189,9 +183,9 @@ let menuFormData = reactive<MenuFormDataType>({
description: '',
is_catalog: false,
is_link: false,
is_iframe: false,
is_affix: false,
link_url:''
is_iframe: false,
is_affix: false,
link_url: ''
});
let menuBtnLoading = ref(false);
@@ -210,9 +204,9 @@ const setMenuFormData = () => {
menuFormData.description = props.initFormData?.description || '';
menuFormData.is_catalog = !!props.initFormData.is_catalog;
menuFormData.is_link = !!props.initFormData.is_link;
menuFormData.is_iframe =!!props.initFormData.is_iframe;
menuFormData.is_affix =!!props.initFormData.is_affix;
menuFormData.link_url =props.initFormData.link_url;
menuFormData.is_iframe = !!props.initFormData.is_iframe;
menuFormData.is_affix = !!props.initFormData.is_affix;
menuFormData.link_url = props.initFormData.link_url;
}
};
@@ -246,7 +240,7 @@ const createFilter = (queryString: string) => {
const handleTreeLoad = (node: Node, resolve: Function) => {
if (node.level !== 0) {
lazyLoadMenu({ parent: node.data.id }).then((res: APIResponseData) => {
resolve(res.data);
resolve(XEUtils.filter(res.data, (i: MenuTreeItemType) => i.is_catalog));
});
}
};
@@ -278,9 +272,14 @@ const handleCancel = (type: string = '') => {
formRef.value?.resetFields();
};
/**
* 初始化
*/
onMounted(async () => {
props.treeData.map((item) => {
deptDefaultList.value.push(item);
if (item.is_catalog) {
deptDefaultList.value.push(item);
}
});
setMenuFormData();
});
@@ -290,6 +289,7 @@ onMounted(async () => {
.menu-form-com {
margin: 10px;
overflow-y: auto;
.menu-form-alert {
color: #fff;
line-height: 24px;
@@ -298,6 +298,7 @@ onMounted(async () => {
border-radius: 4px;
background-color: var(--el-color-primary);
}
.menu-form-btns {
padding-bottom: 10px;
box-sizing: border-box;

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

@@ -16,12 +16,12 @@
<el-col :span="18">
<el-tabs type="border-card">
<el-tab-pane label="按钮权限配置" >
<div style="height: 80vh">
<div style="height: 72vh">
<MenuButtonCom ref="menuButtonRef" />
</div>
</el-tab-pane>
<el-tab-pane label="列权限配置">
<div style="height: 80vh">
<div style="height: 72vh">
<MenuFieldCom ref="menuFieldRef"></MenuFieldCom>
</div>
</el-tab-pane>
@@ -138,7 +138,7 @@ onMounted(() => {
.menu-box {
height: 100%;
padding: 10px;
background-color: #fff;
background-color: var(--el-fill-color-blank);;
box-sizing: border-box;
}

2
web/src/views/system/menu/types.ts
View File

@@ -65,5 +65,5 @@ export interface MenuFormDataType {
is_link: boolean;
is_iframe:boolean;
is_affix:boolean;
link_url: string;
link_url: string|undefined;
}

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

@@ -1,46 +1,38 @@
import * as api from './api';
import {dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions} from '@fast-crud/fast-crud';
import { dict, useCompute, PageQuery, AddReq, DelReq, EditReq, CreateCrudOptionsProps, CreateCrudOptionsRet } from '@fast-crud/fast-crud';
import tableSelector from '/@/components/tableSelector/index.vue';
import {shallowRef, computed, ref, inject} from 'vue';
import { shallowRef, computed } from 'vue';
import manyToMany from '/@/components/manyToMany/index.vue';
import {auth} from '/@/utils/authFunction'
import {createCrudOptions as userCrudOptions } from "/@/views/system/user/crud";
import {request} from '/@/utils/service'
const {compute} = useCompute();
import { auth } from '/@/utils/authFunction';
const { compute } = useCompute();
interface CreateCrudOptionsTypes {
crudOptions: CrudOptions;
}
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
const { tabActivted } = context; //从context中获取tabActivted
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);
}
return await api.GetList(query);
};
const editRequest = async ({form, row}: EditReq) => {
form.id = row.id;
return await api.UpdateObj(form);
};
const delRequest = async ({row}: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({form}: AddReq) => {
return await api.AddObj(form);
};
const pageRequest = async (query: PageQuery) => {
if (tabActivted.value === 'receive') {
return await api.GetSelfReceive(query);
}
return await api.GetList(query);
};
const editRequest = async ({ form, row }: EditReq) => {
form.id = row.id;
return await api.UpdateObj(form);
};
const delRequest = async ({ row }: DelReq) => {
return await api.DelObj(row.id);
};
const addRequest = async ({ form }: AddReq) => {
return await api.AddObj(form);
};
const viewRequest = async ({row}: { row: any }) => {
return await api.GetObj(row.id);
};
const IsReadFunc = computed(() => {
return tabActivted.value === 'receive';
});
const viewRequest = async ({ row }: { row: any }) => {
return await api.GetObj(row.id);
};
const IsReadFunc = computed(() => {
return tabActivted.value === 'receive';
});
return {
crudOptions: {
@@ -50,27 +42,27 @@ export const createCrudOptions = function ({
editRequest,
delRequest,
},
actionbar:{
buttons:{
add:{
show:computed(() =>{
actionbar: {
buttons: {
add: {
show: computed(() => {
return tabActivted.value !== 'receive' && auth('messageCenter:Create');
})
}),
},
}
},
},
rowHandle: {
fixed:'right',
width:150,
fixed: 'right',
width: 150,
buttons: {
edit: {
show: false,
},
view: {
text:"查看",
type:'text',
iconRight:'View',
show:auth("messageCenter:Search"),
text: '查看',
type: 'text',
iconRight: 'View',
show: auth('messageCenter:Search'),
click({ index, row }) {
crudExpose.openView({ index, row });
if (tabActivted.value === 'receive') {
@@ -82,7 +74,7 @@ export const createCrudOptions = function ({
remove: {
iconRight: 'Delete',
type: 'text',
show:auth('messageCenter:Delete')
show: auth('messageCenter:Delete'),
},
},
},
@@ -99,7 +91,7 @@ export const createCrudOptions = function ({
show: true,
},
type: ['text', 'colspan'],
column:{
column: {
minWidth: 120,
},
form: {
@@ -132,7 +124,7 @@ export const createCrudOptions = function ({
target_type: {
title: '目标类型',
type: ['dict-radio', 'colspan'],
column:{
column: {
minWidth: 120,
},
dict: dict({
@@ -285,7 +277,7 @@ export const createCrudOptions = function ({
name: shallowRef(tableSelector),
vModel: 'modelValue',
displayLabel: compute(({ form }) => {
return form.target_dept_name;
return form.dept_info;
}),
tableConfig: {
url: '/api/system/dept/all_dept/',
@@ -297,7 +289,7 @@ export const createCrudOptions = function ({
{
prop: 'name',
label: '部门名称',
width: 150,
width: 150,
},
{
prop: 'status_label',
@@ -349,7 +341,7 @@ export const createCrudOptions = function ({
},
],
component: {
disabled: true,
disabled: false,
id: '1', // 当同一个页面有多个editor时，需要配置不同的id
editorConfig: {
// 是否只读
@@ -373,4 +365,4 @@ export const createCrudOptions = function ({
},
},
};
};
}

56
web/src/views/system/messageCenter/index.vue
View File

@@ -1,43 +1,35 @@
<template>
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding">
<template #header-middle>
<el-tabs v-model="tabActivted" @tab-click="onTabClick">
<el-tab-pane label="我的发布" name="send"></el-tab-pane>
<el-tab-pane label="我的接收" name="receive"></el-tab-pane>
</el-tabs>
</template>
</fs-crud>
</fs-page>
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding">
<template #header-middle>
<el-tabs v-model="tabActivted" @tab-click="onTabClick">
<el-tab-pane label="我的发布" name="send"></el-tab-pane>
<el-tab-pane label="我的接收" name="receive"></el-tab-pane>
</el-tabs>
</template>
</fs-crud>
</fs-page>
</template>
<script lang="ts" setup name="messageCenter">
import {ref, onMounted} from 'vue';
import {useExpose, useCrud} from '@fast-crud/fast-crud';
import {createCrudOptions} from './crud';
// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const {crudExpose} = useExpose({crudRef, crudBinding});
import { ref, onMounted } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import createCrudOptions from './crud';
//tab选择
const tabActivted = ref('send')
const onTabClick= (tab:any)=> {
const { paneName } = tab
tabActivted.value = paneName
crudExpose.doRefresh();
}
// 你的crud配置
const {crudOptions} = createCrudOptions({crudExpose,tabActivted});
const tabActivted = ref('send');
const onTabClick = (tab: any) => {
const { paneName } = tab;
tabActivted.value = paneName;
crudExpose.doRefresh();
};
const context: any = { tabActivted }; //将 tabActivted 通过context传递给crud.tsx
// 初始化crud配置
const {resetCrudOptions} = useCrud({crudExpose, crudOptions});
const { crudRef, crudBinding, crudExpose } = useFs({ createCrudOptions, context });
// 页面打开后获取列表数据
onMounted(() => {
crudExpose.doRefresh();
crudExpose.doRefresh();
});
</script>

2
web/src/views/system/personal/index.vue
View File

@@ -153,7 +153,7 @@
center
>
<el-form-item label="原密码" required prop="oldPassword">
<el-input v-model="userPasswordInfo.oldPassword" placeholder="请输入原始密码" clearable></el-input>
<el-input type="password" v-model="userPasswordInfo.oldPassword" placeholder="请输入原始密码" show-password clearable></el-input>
</el-form-item>
<el-form-item required prop="newPassword" label="新密码">
<el-input type="password" v-model="userPasswordInfo.newPassword" placeholder="请输入新密码" show-password clearable></el-input>

23
web/src/views/system/role/components/PermissionComNew/api.ts
View File

@@ -1,15 +1,17 @@
import { request } from "/@/utils/service";
import XEUtils from "xe-utils";
/**
* 获取角色的授权列表
* @param roleId
* @param query
*/
export function getRolePremission(query:object) {
export function getRolePermission(query:object) {
return request({
url: '/api/system/role_menu_button_permission/get_role_premission/',
url: '/api/system/role_menu_button_permission/get_role_permission/',
method: 'get',
params:query
}).then((res:any)=>{
return XEUtils.toArrayTree(res.data, {key: 'id', parentKey: 'parent',children: 'children',strict: false})
})
}
@@ -26,16 +28,25 @@ export function setRolePremission(roleId:any,data:object) {
})
}
export function getDataPermissionRange() {
export function getDataPermissionRange(query:object) {
return request({
url: '/api/system/role_menu_button_permission/data_scope/',
method: 'get',
params:query
})
}
export function getDataPermissionRangeAll() {
return request({
url: '/api/system/role_menu_button_permission/data_scope/',
method: 'get',
})
}
export function getDataPermissionDept() {
export function getDataPermissionDept(query:object) {
return request({
url: '/api/system/role_menu_button_permission/role_to_dept_all/',
method: 'get'
method: 'get',
params:query
})
}

667
web/src/views/system/role/components/PermissionComNew/index.vue
View File

@@ -1,392 +1,451 @@
<template>
<el-drawer v-model="drawerVisible" title="权限配置" direction="rtl" size="60%" :close-on-click-modal="false"
:before-close="handleDrawerClose" :destroy-on-close="true">
<template #header>
<el-row>
<el-col :span="4">
<div>当前授权角色：
<el-tag>{{ props.roleName }}</el-tag>
</div>
</el-col>
<el-col :span="6">
<div>
<el-button size="small" type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权
</el-button>
</div>
</el-col>
</el-row>
</template>
<div class="permission-com">
<el-tabs>
<el-tab-pane v-for="(item, mIndex) in menuData" :key="mIndex" :label="item.name">
<el-tabs tab-position="left">
<el-tab-pane v-for="(menu, mIndex) in item.menus" :key="mIndex" :label="menu.name" >
<el-checkbox v-model="menu.isCheck">页面显示权限</el-checkbox>
<div class="pc-collapse-main">
<div class="pccm-item">
<div class="menu-form-alert"> 配置操作功能接口权限,配置数据权限点击小齿轮 </div>
<el-checkbox v-for="(btn, bIndex) in menu.btns" :key="bIndex" v-model="btn.isCheck"
:label="btn.value">
<div class="btn-item">
{{ btn.data_range !== null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
<span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(menu, btn.id)">
<el-icon>
<Setting />
</el-icon>
</span>
</div>
</el-checkbox>
</div>
<el-drawer
v-model="drawerVisibleNew"
title="权限配置"
direction="rtl"
size="60%"
:close-on-click-modal="false"
:before-close="handleDrawerClose"
:destroy-on-close="true"
>
<template #header>
<el-row>
<el-col :span="4">
<div>
当前授权角色：
<el-tag>{{ props.roleName }}</el-tag>
</div>
</el-col>
<el-col :span="6">
<div>
<el-button size="small" type="primary" class="pc-save-btn" @click="handleSavePermission">保存菜单授权 </el-button>
</div>
</el-col>
</el-row>
</template>
<div class="permission-com">
<el-row class="menu-el-row" :gutter="20">
<el-col :span="6">
<div class="menu-box menu-left-box">
<el-tree
ref="treeRef"
:data="menuData"
:props="defaultTreeProps"
:default-checked-keys="menuDefaultCheckedKeys"
@check="handleMenuCheck"
@node-click="handleMenuClick"
node-key="id"
check-strictly
highlight-current
show-checkbox
default-expand-all
>
</el-tree>
</div>
</el-col>
<div class="pccm-item" v-if="menu.columns && menu.columns.length > 0">
<div class="menu-form-alert"> 配置数据列字段权限 </div>
<ul class="columns-list">
<li class="columns-head">
<div class="width-txt">
<span>字段</span>
</div>
<div v-for="(head, hIndex) in column.header" :key="hIndex" class="width-check">
<el-checkbox :label="head.value" @change="handleColumnChange($event, menu, head.value)">
<span>{{ head.label }}</span>
</el-checkbox>
</div>
</li>
<el-col :span="18">
<div class="pc-collapse-main" v-if="menuCurrent.btns && menuCurrent.btns.length > 0">
<div class="pccm-item">
<div class="menu-form-alert">配置操作功能接口权限,配置数据权限点击小齿轮</div>
<el-checkbox v-for="(btn, bIndex) in menuCurrent.btns" :key="bIndex" v-model="btn.isCheck" :label="btn.value">
<div class="btn-item">
{{ btn.data_range !== null ? `${btn.name}(${formatDataRange(btn.data_range)})` : btn.name }}
<span v-show="btn.isCheck" @click.stop.prevent="handleSettingClick(menuCurrent, btn)">
<el-icon>
<Setting />
</el-icon>
</span>
</div>
</el-checkbox>
</div>
<li v-for="(c_item, c_index) in menu.columns" :key="c_index" class="columns-item">
<div class="width-txt">{{ c_item.title }}</div>
<div v-for="(col, cIndex) in column.header" :key="cIndex" class="width-check">
<el-checkbox v-model="c_item[col.value]" class="ci-checkout"></el-checkbox>
</div>
</li>
</ul>
</div>
</div>
</el-tab-pane>
</el-tabs>
</el-tab-pane>
</el-tabs>
<div class="pccm-item" v-if="menuCurrent.columns && menuCurrent.columns.length > 0">
<div class="menu-form-alert">配置数据列字段权限</div>
<ul class="columns-list">
<li class="columns-head">
<div class="width-txt">
<span>字段</span>
</div>
<div v-for="(head, hIndex) in column.header" :key="hIndex" class="width-check">
<el-checkbox :label="head.value" @change="handleColumnChange($event, menuCurrent, head.value, head.disabled)">
<span>{{ head.label }}</span>
</el-checkbox>
</div>
</li>
<el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false"
:before-close="handleDialogClose">
<div class="pc-dialog">
<el-select v-model="dataPermission" @change="handlePermissionRangeChange" class="dialog-select"
placeholder="请选择">
<el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-tree-select v-show="dataPermission === 4" node-key="id" v-model="customDataPermission"
:props="defaultTreeProps" :data="deptData" multiple check-strictly :render-after-expand="false"
show-checkbox class="dialog-tree" />
</div>
<template #footer>
<div>
<el-button type="primary" @click="handleDialogConfirm"> 确定</el-button>
<el-button @click="handleDialogClose"> 取消</el-button>
</div>
</template>
</el-dialog>
</div>
</el-drawer>
<li v-for="(c_item, c_index) in menuCurrent.columns" :key="c_index" class="columns-item">
<div class="width-txt">{{ c_item.title }}</div>
<div v-for="(col, cIndex) in column.header" :key="cIndex" class="width-check">
<el-checkbox v-model="c_item[col.value]" class="ci-checkout" :disabled="c_item[col.disabled]"></el-checkbox>
</div>
</li>
</ul>
</div>
</div>
</el-col>
</el-row>
<el-dialog v-model="dialogVisible" title="数据权限配置" width="400px" :close-on-click-modal="false" :before-close="handleDialogClose">
<div class="pc-dialog">
<el-select v-model="dataPermission" @change="handlePermissionRangeChange" class="dialog-select" placeholder="请选择">
<el-option v-for="item in dataPermissionRange" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-tree-select
v-show="dataPermission === 4"
node-key="id"
v-model="customDataPermission"
:props="defaultTreeProps"
:data="deptData"
multiple
check-strictly
:render-after-expand="false"
show-checkbox
class="dialog-tree"
/>
</div>
<template #footer>
<div>
<el-button type="primary" @click="handleDialogConfirm"> 确定</el-button>
<el-button @click="handleDialogClose"> 取消</el-button>
</div>
</template>
</el-dialog>
</div>
</el-drawer>
</template>
<script setup lang="ts">
import { ref, onMounted, defineProps, watch, computed, reactive } from 'vue';
import XEUtils from 'xe-utils';
import { errorNotification } from '/@/utils/message';
import {
getDataPermissionRange,
getDataPermissionDept,
getRolePremission,
setRolePremission,
setBtnDatarange
} from './api';
import { MenuDataType, MenusType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types';
import { ElMessage } from 'element-plus'
import { getDataPermissionRange, getDataPermissionDept, getRolePermission, setRolePremission, setBtnDatarange } from './api';
import { MenuDataType, DataPermissionRangeType, CustomDataPermissionDeptType } from './types';
import { ElMessage, ElTree } from 'element-plus';
const props = defineProps({
roleId: {
type: Number,
default: -1
},
roleName: {
type: String,
default: ''
},
drawerVisible: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:drawerVisible'])
roleId: {
type: Number,
default: -1,
},
roleName: {
type: String,
default: '',
},
drawerVisible: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['update:drawerVisible']);
const drawerVisible = ref(false)
const drawerVisibleNew = ref(false);
watch(
() => props.drawerVisible,
(val) => {
drawerVisible.value = val;
getMenuBtnPermission()
fetchData()
}
() => props.drawerVisible,
(val) => {
drawerVisibleNew .value = val;
getMenuBtnPermission();
getDataPermissionRangeLable();
menuCurrent.value = {};
}
);
const handleDrawerClose = () => {
emit('update:drawerVisible', false);
}
const defaultTreeProps = {
children: 'children',
label: 'name',
value: 'id',
emit('update:drawerVisible', false);
};
let menuData = ref<MenuDataType[]>([]);
let collapseCurrent = ref<number[]>([]);
let menuCurrent = ref<Partial<MenuDataType>>({});
const defaultTreeProps = {
children: 'children',
label: 'name',
value: 'id',
};
let menuData = ref<MenuDataType[]>([]); // 菜单列表数据
let menuDefaultCheckedKeys = ref<number[]>([]); // 默认选中的菜单列表
let menuCurrent = ref<Partial<MenuDataType>>({}); // 当前选中的菜单
let menuBtnCurrent = ref<number>(-1);
let dialogVisible = ref(false);
let dataPermissionRange = ref<DataPermissionRangeType[]>([]);
let dataPermissionRangeLabel = ref<DataPermissionRangeType[]>([]);
const formatDataRange = computed(() => {
return function (datarange: number) {
const findItem = dataPermissionRange.value.find((i) => i.value === datarange);
return findItem?.label || ''
}
})
return function (datarange: number) {
const findItem = dataPermissionRangeLabel.value.find((i) => i.value === datarange);
return findItem?.label || '';
};
});
let deptData = ref<CustomDataPermissionDeptType[]>([]);
let dataPermission = ref();
let customDataPermission = ref([]);
/**
* 菜单复选框选中
* @param node
* @param data
*/
const handleMenuCheck = (node: any, data: any) => {
XEUtils.eachTree(menuData.value, (item) => {
item.isCheck = data.checkedKeys.includes(item.id);
});
};
/**
* 菜单点击
* @param node
* @param data
*/
const handleMenuClick = (selectNode: MenuDataType) => {
menuCurrent.value = selectNode;
};
//获取菜单,按钮,权限
const getMenuBtnPermission = async () => {
const resMenu = await getRolePremission({ role: props.roleId })
menuData.value = resMenu.data
}
const fetchData = async () => {
try {
const resRange = await getDataPermissionRange();
if (resRange?.code === 2000) {
dataPermissionRange.value = resRange.data;
}
} catch {
return;
}
const resMenu = await getRolePermission({ role: props.roleId });
menuData.value = resMenu;
menuDefaultCheckedKeys.value = XEUtils.toTreeArray(resMenu)
.filter((i) => i.isCheck)
.map((i) => i.id);
};
// 获取按钮的数据权限下拉选项
const getDataPermissionRangeLable = async () => {
const resRange = await getDataPermissionRange({ role: props.roleId });
dataPermissionRangeLabel.value = resRange.data;
};
const handleCollapseChange = (val: number) => {
collapseCurrent.value = [val];
/**
* 获取按钮数据权限下拉选项
* @param btnId 按钮id
*/
const fetchData = async (btnId: number) => {
try {
const resRange = await getDataPermissionRange({ menu_button: btnId });
if (resRange?.code === 2000) {
dataPermissionRange.value = resRange.data;
}
} catch {
return;
}
};
/**
* 设置按钮数据权限
* @param record 当前菜单
* @param btnType 按钮类型
*/
const handleSettingClick = (record: MenusType, btnId: number) => {
menuCurrent.value = record;
menuBtnCurrent.value = btnId;
dialogVisible.value = true;
const handleSettingClick = (record: any, btn: MenuDataType['btns'][number]) => {
menuCurrent.value = record;
menuBtnCurrent.value = btn.id;
dialogVisible.value = true;
dataPermission.value = btn.data_range;
handlePermissionRangeChange(btn.data_range);
fetchData(btn.id);
};
const handleColumnChange = (val: boolean, record: MenusType, btnType: string) => {
for (const iterator of record.columns) {
iterator[btnType] = val;
}
/**
* 设置列权限
* @param val 是否选中
* @param record 当前菜单
* @param btnType 按钮类型
* @param disabledType 禁用类型
*/
const handleColumnChange = (val: boolean, record: any, btnType: string, disabledType: string) => {
for (const iterator of record.columns) {
iterator[btnType] = iterator[disabledType] ? iterator[btnType] : val;
}
};
/**
* 数据权限设置
*/
const handlePermissionRangeChange = async (val: number) => {
if (val === 4) {
const res = await getDataPermissionDept();
const data = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false });
deptData.value = data;
}
if (val === 4) {
const res = await getDataPermissionDept({ role: props.roleId, menu_button: menuBtnCurrent.value });
const depts = XEUtils.toArrayTree(res.data, { parentKey: 'parent', strict: false });
deptData.value = depts;
const btnObj = XEUtils.find(menuCurrent.value.btns, (item) => item.id === menuBtnCurrent.value);
customDataPermission.value = btnObj.dept;
}
};
/**
* 数据权限设置确认
*/
const handleDialogConfirm = () => {
if (dataPermission.value !== 0 && !dataPermission.value) {
errorNotification('请选择');
return;
}
//if (dataPermission.value !== 4) {}
for (const item of menuData.value) {
for (const iterator of item.menus) {
if (iterator.id === menuCurrent.value.id) {
for (const btn of iterator.btns) {
if (btn.id === menuBtnCurrent.value) {
const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
btn.data_range = findItem?.value || 0;
if (btn.data_range === 4) {
btn.dept = customDataPermission.value
}
}
}
}
}
}
handleDialogClose();
if (dataPermission.value !== 0 && !dataPermission.value) {
errorNotification('请选择');
return;
}
for (const btn of menuCurrent.value?.btns || []) {
if (btn.id === menuBtnCurrent.value) {
const findItem = dataPermissionRange.value.find((i) => i.value === dataPermission.value);
btn.data_range = findItem?.value || 0;
if (btn.data_range === 4) {
btn.dept = customDataPermission.value;
}
}
}
handleDialogClose();
};
const handleDialogClose = () => {
dialogVisible.value = false;
customDataPermission.value = [];
dataPermission.value = null;
dialogVisible.value = false;
customDataPermission.value = [];
dataPermission.value = null;
};
//保存权限
//保存菜单授权
const handleSavePermission = () => {
setRolePremission(props.roleId, menuData.value).then((res: any) => {
ElMessage({
message: res.msg,
type: 'success',
})
})
}
setRolePremission(props.roleId, XEUtils.toTreeArray(menuData.value)).then((res: any) => {
ElMessage({
message: res.msg,
type: 'success',
});
});
};
const column = reactive({
header: [{ value: 'is_create', label: '新增可见' }, { value: 'is_update', label: '编辑可见' }, {
value: 'is_query',
label: '列表可见'
}]
})
onMounted(() => {
header: [
{ value: 'is_create', label: '新增可见', disabled: 'disabled_create' },
{ value: 'is_update', label: '编辑可见', disabled: 'disabled_update' },
{ value: 'is_query', label: '列表可见', disabled: 'disabled_query' },
],
});
onMounted(() => {});
</script>
<style lang="scss" scoped>
.permission-com {
margin: 15px;
box-sizing: border-box;
margin: 15px;
box-sizing: border-box;
.pc-save-btn {
margin-bottom: 15px;
}
.pc-save-btn {
margin-bottom: 15px;
}
.pc-collapse-title {
line-height: 32px;
text-align: left;
.pc-collapse-title {
line-height: 32px;
text-align: left;
span {
font-size: 16px;
}
}
span {
font-size: 16px;
}
}
.pc-collapse-main {
padding-top: 15px;
box-sizing: border-box;
.pc-collapse-main {
box-sizing: border-box;
.pccm-item {
margin-bottom: 10px;
.pccm-item {
margin-bottom: 10px;
.menu-form-alert {
color: #fff;
line-height: 24px;
padding: 8px 16px;
margin-bottom: 20px;
border-radius: 4px;
background-color: var(--el-color-primary);
}
.menu-form-alert {
color: #fff;
line-height: 24px;
padding: 8px 16px;
margin-bottom: 20px;
border-radius: 4px;
background-color: var(--el-color-primary);
}
.btn-item {
display: flex;
align-items: center;
.btn-item {
display: flex;
align-items: center;
span {
margin-left: 5px;
}
}
span {
margin-left: 5px;
}
}
.columns-list {
.width-txt {
width: 200px;
}
.columns-list {
.width-txt {
width: 200px;
}
.width-check {
width: 100px;
}
.width-check {
width: 100px;
}
.width-icon {
cursor: pointer;
}
.width-icon {
cursor: pointer;
}
.columns-head {
display: flex;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #ebeef5;
box-sizing: border-box;
.columns-head {
display: flex;
align-items: center;
padding: 6px 0;
border-bottom: 1px solid #ebeef5;
box-sizing: border-box;
span {
font-weight: 900;
}
}
span {
font-weight: 900;
}
}
.columns-item {
display: flex;
align-items: center;
padding: 6px 0;
box-sizing: border-box;
.columns-item {
display: flex;
align-items: center;
padding: 6px 0;
box-sizing: border-box;
.ci-checkout {
height: auto !important;
}
}
}
}
}
.ci-checkout {
height: auto !important;
}
}
}
}
}
.pc-dialog {
.dialog-select {
width: 100%;
}
.pc-dialog {
.dialog-select {
width: 100%;
}
.dialog-tree {
width: 100%;
margin-top: 20px;
}
}
.dialog-tree {
width: 100%;
margin-top: 20px;
}
}
}
</style>
<style lang="scss">
.permission-com {
.el-collapse {
border-top: none;
border-bottom: none;
}
.el-collapse {
border-top: none;
border-bottom: none;
}
.el-collapse-item {
margin-bottom: 15px;
}
.el-collapse-item {
margin-bottom: 15px;
}
.el-collapse-item__header {
height: auto;
padding: 15px;
border-radius: 8px;
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
box-sizing: border-box;
background-color: #fafafa;
}
.el-collapse-item__header {
height: auto;
padding: 15px;
border-radius: 8px;
border-top: 1px solid #ebeef5;
border-left: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
box-sizing: border-box;
background-color: #fafafa;
}
.el-collapse-item__header.is-active {
border-radius: 8px 8px 0 0;
background-color: #fafafa;
}
.el-collapse-item__header.is-active {
border-radius: 8px 8px 0 0;
background-color: #fafafa;
}
.el-collapse-item__wrap {
padding: 15px;
border-left: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
border-top: 1px solid #ebeef5;
border-radius: 0 0 8px 8px;
background-color: #fafafa;
box-sizing: border-box;
.el-collapse-item__wrap {
padding: 15px;
border-left: 1px solid #ebeef5;
border-right: 1px solid #ebeef5;
border-top: 1px solid #ebeef5;
border-radius: 0 0 8px 8px;
background-color: #fafafa;
box-sizing: border-box;
.el-collapse-item__content {
padding-bottom: 0;
}
}
.el-collapse-item__content {
padding-bottom: 0;
}
}
}
</style>

43
web/src/views/system/role/components/PermissionComNew/types.ts
View File

@@ -1,36 +1,29 @@
export interface DataPermissionRangeType {
label: string;
value: number;
label: string;
value: number;
}
export interface CustomDataPermissionDeptType {
id: number;
name: string;
patent: number;
children: CustomDataPermissionDeptType[]
id: number;
name: string;
patent: number;
children: CustomDataPermissionDeptType[];
}
export interface CustomDataPermissionMenuType {
id: number;
name: string;
is_catalog: boolean;
menuPermission: { id: number; name: string; value: string }[] | null;
columns: { id: number; name: string; title: string }[] | null;
children: CustomDataPermissionMenuType[]
}
export interface MenusType{
id: string;
name: string;
isCheck: boolean;
radio: string;
btns: { id:number,name: string; value: string; isCheck: boolean; data_range: number; dept:object; name:string }[];
columns: { [key: string]: boolean | string; }[]
id: number;
name: string;
is_catalog: boolean;
menuPermission: { id: number; name: string; value: string }[] | null;
columns: { id: number; name: string; title: string }[] | null;
children: CustomDataPermissionMenuType[];
}
export interface MenuDataType {
id: string;
name: string;
menus:MenusType[];
id: string;
name: string;
isCheck: boolean;
btns: { id: number; name: string; value: string; isCheck: boolean; data_range: number; dept: object }[];
columns: { [key: string]: boolean | string; }[];
children: MenuDataType[];
}

2
web/src/views/system/user/api.ts
View File

@@ -5,7 +5,7 @@ export const apiPrefix = '/api/system/user/';
export function GetDept(query: PageQuery) {
return request({
url: "/api/system/dept/dept_lazy_tree/",
url: "/api/system/dept/all_dept/",
method: 'get',
params: query,
});

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

@@ -218,7 +218,10 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
label: 'name'
}),
column: {
minWidth: 150, //最小列宽
minWidth: 200, //最小列宽
formatter({value,row,index}){
return row.dept_name_all
}
},
form: {
rules: [
@@ -253,7 +256,11 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
label: 'name',
}),
column: {
minWidth: 100, //最小列宽
minWidth: 200, //最小列宽
formatter({value,row,index}){
const values = row.role_info.map((item:any) => item.name);
return values.join(',')
}
},
form: {
rules: [

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

@@ -98,7 +98,6 @@ const getData = () => {
const result = XEUtils.toArrayTree(responseData, {
parentKey: 'parent',
children: 'children',
strict: true,
});
data.value = result;

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

@@ -200,11 +200,9 @@ export const createCrudOptions = function ({crudExpose}: CreateCrudOptionsProps)
component: {
span: 24,
props: {
elProps: {
allowCreate: true,
filterable: true,
clearable: true,
},
allowCreate: true,
filterable: true,
clearable: true,
},
},
itemProps: {