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

feat: keepAlive功能

Browse Source
This commit is contained in:
H0nGzA1
2023-05-17 23:34:41 +08:00
parent adc522c180
commit 60035767ad
15 changed files with 352 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/utils/menu.ts
View File

@@ -18,7 +18,7 @@ export const handleMenu = (menuData: Array<any>) => {
roles: ['admin'], roles: ['admin'],
icon: item.icon icon: item.icon
} }
item.name = item.component_name
return item return item
} }
menuData.forEach((val) => { menuData.forEach((val) => {
@@ -45,5 +45,6 @@ export const handleMenu = (menuData: Array<any>) => {
}, },
...data ...data
] ]
console.log(menu)
return menu return menu
} }

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

@@ -4,7 +4,7 @@
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="areas">
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { useFs } from '@fast-crud/fast-crud'; import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud'; import { createCrudOptions } from './crud';

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

@@ -39,7 +39,7 @@
</el-card> </el-card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="config">
import { Edit, FolderAdd } from '@element-plus/icons-vue'; import { Edit, FolderAdd } from '@element-plus/icons-vue';
import * as api from './api'; import * as api from './api';
import addTabs from './components/addTabs.vue'; import addTabs from './components/addTabs.vue';

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

@@ -98,7 +98,7 @@
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="dept">
import {Splitpanes, Pane} from 'splitpanes'; import {Splitpanes, Pane} from 'splitpanes';
import 'splitpanes/dist/splitpanes.css'; import 'splitpanes/dist/splitpanes.css';
import * as api from './api'; import * as api from './api';

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

@@ -5,7 +5,7 @@
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="dictionary">
import { ref, onMounted, defineAsyncComponent } from 'vue'; import { ref, onMounted, defineAsyncComponent } from 'vue';
import { useFs } from '@fast-crud/fast-crud'; import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud'; import { createCrudOptions } from './crud';

18
web/src/views/system/fileList/in1dex1.vue
View File

@@ -1,18 +0,0 @@
<template>
<fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
</fs-page>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions });
// 页面打开后获取列表数据
onMounted(() => {
crudExpose.doRefresh();
});
</script>

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

@@ -79,7 +79,7 @@
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="fileList">
import {DelObj, GetList} from "./api"; import {DelObj, GetList} from "./api";
import {ref, onMounted,reactive} from "vue"; import {ref, onMounted,reactive} from "vue";
import {getBaseURL} from "/@/utils/baseUrl"; import {getBaseURL} from "/@/utils/baseUrl";

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

@@ -4,7 +4,7 @@
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="loginLog">
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { useFs } from '@fast-crud/fast-crud'; import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud'; import { createCrudOptions } from './crud';

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

@@ -1,18 +1,19 @@
<template> <template>
<fs-page> <fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud> <fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="operationLog">
import { ref, onMounted } from 'vue'; import {ref, onMounted} from 'vue';
import { useFs } from '@fast-crud/fast-crud'; import {useFs} from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud'; import {createCrudOptions} from './crud';
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions }); const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions});
// 页面打开后获取列表数据 // 页面打开后获取列表数据
onMounted(() => { onMounted(() => {
crudExpose.doRefresh(); crudExpose.doRefresh();
}); });
</script> </script>

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

@@ -1,7 +1,7 @@
<template> <template>
<fs-page> <fs-page>
<splitpanes> <splitpanes>
<pane max-size="20" min-size="16" > <pane max-size="20" min-size="16">
<el-card :body-style="{ height: '100%' }"> <el-card :body-style="{ height: '100%' }">
<p class="font-mono font-black text-center text-xl pb-5"> <p class="font-mono font-black text-center text-xl pb-5">
菜单列表 菜单列表
@@ -29,7 +29,7 @@
</el-tree> </el-tree>
</el-card> </el-card>
</pane> </pane>
<pane min-size="30" > <pane min-size="30">
<el-card :body-style="{ height: '100%' }"> <el-card :body-style="{ height: '100%' }">
<el-form ref="formRef" :rules="rules" :model="form" label-width="80px" <el-form ref="formRef" :rules="rules" :model="form" label-width="80px"
label-position="right"> label-position="right">
@@ -96,13 +96,13 @@
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="menu">
import {Splitpanes, Pane} from 'splitpanes'; import {Splitpanes, Pane} from 'splitpanes';
import 'splitpanes/dist/splitpanes.css'; import 'splitpanes/dist/splitpanes.css';
import * as api from './api'; import * as api from './api';
import * as menuButoonApi from './components/menuButton/api'; import * as menuButoonApi from './components/menuButton/api';
import {ElForm, ElTree, FormRules, ElMessageBox} from 'element-plus'; import {ElForm, ElTree, FormRules, ElMessageBox} from 'element-plus';
import {ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef} from 'vue'; import {ref, onMounted, watch, reactive, toRaw, defineAsyncComponent, nextTick, shallowRef, onActivated} from 'vue';
import XEUtils from 'xe-utils'; import XEUtils from 'xe-utils';
import {errorMessage, successMessage} from '../../../utils/message'; import {errorMessage, successMessage} from '../../../utils/message';
@@ -370,6 +370,9 @@ const drawerClose = () => {
onMounted(() => { onMounted(() => {
getData(); getData();
}); });
onActivated(() => {
console.log('keep-alive成功')
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

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

@@ -12,7 +12,7 @@
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="messageCenter">
import {ref, onMounted} from 'vue'; import {ref, onMounted} from 'vue';
import {useExpose, useCrud} from '@fast-crud/fast-crud'; import {useExpose, useCrud} from '@fast-crud/fast-crud';
import {createCrudOptions} from './crud'; import {createCrudOptions} from './crud';

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

@@ -9,7 +9,7 @@
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="role">
import { ref, onMounted } from 'vue'; import { ref, onMounted } from 'vue';
import { useExpose, useCrud, dict } from '@fast-crud/fast-crud'; import { useExpose, useCrud, dict } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud'; import { createCrudOptions } from './crud';

623
web/src/views/system/rolePermission/index.vue
View File

@@ -1,154 +1,159 @@
<template> <template>
<el-drawer <el-drawer
size="70%" size="70%"
v-model="drawer" v-model="drawer"
direction="rtl" direction="rtl"
destroy-on-close destroy-on-close
:before-close="handleClose" :before-close="handleClose"
> >
<template #header> <template #header>
<div>
<el-tag size="large" type="primary">当前角色:{{ editedRoleInfo.name }}</el-tag>
</div>
</template>
<div style="padding: 1em">
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
<el-card header="菜单页面授权">
<template #header>
<div class="card-header">
<el-tooltip effect="dark" content="点击菜单项,可对菜单下的按钮/接口授权" placement="right">
<div>
<span>菜单页面</span>
<el-icon>
<QuestionFilled/>
</el-icon>
</div>
</el-tooltip>
<el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
</div>
</template>
<el-tree :data="menuData"
ref="menuTree"
show-checkbox
node-key="id"
highlight-current
:expand-on-click-node="false"
:check-on-click-node="true"
:props="defaultProps"
@node-click="menuNodeClick"
/>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18">
<!-- <el-alert title="对页面菜单下按钮授权" description="新增或删除对菜单下的按钮/接口授权" type="warning" />-->
<el-card v-if="isBtnPermissionShow">
<template #header>
<div class="card-header">
<el-tooltip effect="dark" content="新增或删除对菜单下的按钮/接口授权" placement="right">
<div>
<span>按钮/接口授权</span>
<el-icon>
<QuestionFilled/>
</el-icon>
</div>
</el-tooltip>
</div>
</template>
<div> <div>
<el-divider content-position="left">{{ editedMenuInfo.name }}</el-divider> <el-tag size="large" type="primary">当前角色:{{ editedRoleInfo.name }}</el-tag>
<el-button type="primary" size="small" style="margin-bottom: 0.5em" @click="createBtnPermission">新增
</el-button>
<el-table size="small" :data="buttonPermissionData" border style="width: 100%">
<el-table-column prop="menu_button" label="权限名称" width="100">
<template #default="scope">
<div>{{ formatMenuBtn(scope.row.menu_button) }}</div>
</template>
</el-table-column>
<el-table-column prop="data_range" label="权限范围" width="140">
<template #default="scope">
<div>{{ formatDataRange(scope.row.data_range) }}</div>
</template>
</el-table-column>
<el-table-column prop="dept" label="权限涉及部门"/>
<el-table-column fixed="right" label="操作" width="120">
<template #default="scope">
<el-button type="danger" size="small" @click="onDeleteBtn(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div> </div>
</template>
<div style="padding: 1em">
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
<el-card header="菜单页面授权">
<template #header>
<div class="card-header">
<el-tooltip effect="dark" content="点击菜单项,可对菜单下的按钮/接口授权"
placement="right">
<div>
<span>菜单页面</span>
<el-icon>
<QuestionFilled/>
</el-icon>
</div>
</el-tooltip>
<el-button size="mini" type="primary" @click="onSaveAuth">保存菜单授权</el-button>
</div>
</template>
<el-tree :data="menuData"
ref="menuTree"
show-checkbox
node-key="id"
highlight-current
:expand-on-click-node="false"
:check-on-click-node="true"
:props="defaultProps"
@node-click="menuNodeClick"
/>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18">
<!-- <el-alert title="对页面菜单下按钮授权" description="新增或删除对菜单下的按钮/接口授权" type="warning" />-->
<el-card v-if="isBtnPermissionShow">
<template #header>
<div class="card-header">
<el-tooltip effect="dark" content="新增或删除对菜单下的按钮/接口授权" placement="right">
<div>
<span>按钮/接口授权</span>
<el-icon>
<QuestionFilled/>
</el-icon>
</div>
</el-tooltip>
</div>
</template>
<div>
<el-divider content-position="left">{{ editedMenuInfo.name }}</el-divider>
<el-button type="primary" size="small" style="margin-bottom: 0.5em"
@click="createBtnPermission">新增
</el-button>
<el-table size="small" :data="buttonPermissionData" border style="width: 100%">
<el-table-column prop="menu_button" label="权限名称" width="100">
<template #default="scope">
<div>{{ formatMenuBtn(scope.row.menu_button) }}</div>
</template>
</el-table-column>
<el-table-column prop="data_range" label="权限范围" width="140">
<template #default="scope">
<div>{{ formatDataRange(scope.row.data_range) }}</div>
</template>
</el-table-column>
<el-table-column prop="dept" label="权限涉及部门"/>
<el-table-column fixed="right" label="操作" width="120">
<template #default="scope">
<el-button type="danger" size="small" @click="onDeleteBtn(scope)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!-- <el-divider content-position="left">字段授权</el-divider>--> <!-- <el-divider content-position="left">字段授权</el-divider>-->
<!-- <el-table size="small" :data="crudPermissionData" border style="width: 100%">--> <!-- <el-table size="small" :data="crudPermissionData" border style="width: 100%">-->
<!-- <el-table-column prop="field" label="字段"></el-table-column>--> <!-- <el-table-column prop="field" label="字段"></el-table-column>-->
<!-- <el-table-column prop="table" label="列表显示">--> <!-- <el-table-column prop="table" label="列表显示">-->
<!-- <template #default="scope">--> <!-- <template #default="scope">-->
<!-- <div>--> <!-- <div>-->
<!-- <el-switch size="mini" v-model="scope.row.table"/>--> <!-- <el-switch size="mini" v-model="scope.row.table"/>-->
<!-- </div>--> <!-- </div>-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column prop="view" label="表单查看">--> <!-- <el-table-column prop="view" label="表单查看">-->
<!-- <template #default="scope">--> <!-- <template #default="scope">-->
<!-- <div>--> <!-- <div>-->
<!-- <el-switch size="mini" v-model="scope.row.view"/>--> <!-- <el-switch size="mini" v-model="scope.row.view"/>-->
<!-- </div>--> <!-- </div>-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- <el-table-column prop="edit" label="表单编辑">--> <!-- <el-table-column prop="edit" label="表单编辑">-->
<!-- <template #default="scope">--> <!-- <template #default="scope">-->
<!-- <div>--> <!-- <div>-->
<!-- <el-switch size="mini" v-model="scope.row.edit"/>--> <!-- <el-switch size="mini" v-model="scope.row.edit"/>-->
<!-- </div>--> <!-- </div>-->
<!-- </template>--> <!-- </template>-->
<!-- </el-table-column>--> <!-- </el-table-column>-->
<!-- </el-table>--> <!-- </el-table>-->
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
<el-dialog v-model="dialogFormVisible" width="400px" title="配置按钮权限"> <el-dialog v-model="dialogFormVisible" width="400px" title="配置按钮权限">
<el-form ref="buttonFormRef" :model="buttonForm" :rules="buttonRules" label-width="120px"> <el-form ref="buttonFormRef" :model="buttonForm" :rules="buttonRules" label-width="120px">
<el-form-item label="按钮" prop="menu_button"> <el-form-item label="按钮" prop="menu_button">
<el-select v-model="buttonForm.menu_button" placeholder="请选择按钮" @change="onChangeButton"> <el-select v-model="buttonForm.menu_button" placeholder="请选择按钮" @change="onChangeButton">
<el-option v-for="(item,index) in buttonOptions" :key="index" :label="item.name" :value="item.id"/> <el-option v-for="(item,index) in buttonOptions" :key="index" :label="item.name"
</el-select> :value="item.id"/>
</el-form-item> </el-select>
<el-form-item label="权限范围" prop="data_range"> </el-form-item>
<el-select v-model="buttonForm.data_range" placeholder="请选择按钮"> <el-form-item label="权限范围" prop="data_range">
<el-option v-for="(item,index) in dataScopeOptions" :key="index" :label="item.label" :value="item.value"/> <el-select v-model="buttonForm.data_range" placeholder="请选择按钮">
</el-select> <el-option v-for="(item,index) in dataScopeOptions" :key="index" :label="item.label"
</el-form-item> :value="item.value"/>
<el-form-item label="数据部门" prop="dept" v-show="buttonForm.data_range === 4"> </el-select>
<div class="dept-tree"> </el-form-item>
<el-tree <el-form-item label="数据部门" prop="dept" v-show="buttonForm.data_range === 4">
:data="deptOptions" <div class="dept-tree">
show-checkbox <el-tree
default-expand-all :data="deptOptions"
:default-checked-keys="deptCheckedKeys" show-checkbox
ref="deptTree" default-expand-all
node-key="id" :default-checked-keys="deptCheckedKeys"
:check-strictly="true" ref="deptTree"
:props="{ label: 'name' }" node-key="id"
></el-tree> :check-strictly="true"
</div> :props="{ label: 'name' }"
</el-form-item> ></el-tree>
</el-form> </div>
<template #footer> </el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer"> <span class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button> <el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="onSaveButtonForm"> <el-button type="primary" @click="onSaveButtonForm">
确定 确定
</el-button> </el-button>
</span> </span>
</template> </template>
</el-dialog> </el-dialog>
</div> </div>
</el-drawer> </el-drawer>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="rolePermission">
import {ref, defineExpose, reactive, toRefs} from 'vue' import {ref, defineExpose, reactive, toRefs} from 'vue'
import {ElMessageBox} from 'element-plus' import {ElMessageBox} from 'element-plus'
import * as api from './api' import * as api from './api'
@@ -162,40 +167,40 @@ const editedRoleInfo = ref({})
//抽屉关闭确认 //抽屉关闭确认
const handleClose = (done: () => void) => { const handleClose = (done: () => void) => {
ElMessageBox.confirm('您确定要关闭?', { ElMessageBox.confirm('您确定要关闭?', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
}) })
.then(() => { .then(() => {
done() done()
}) })
.catch(() => { .catch(() => {
// catch error // catch error
}) })
} }
/*****菜单的配置项***/ /*****菜单的配置项***/
const defaultProps = { const defaultProps = {
children: 'children', children: 'children',
label: 'name', label: 'name',
isLeaf: 'hasChild' isLeaf: 'hasChild'
} }
interface Tree { interface Tree {
name: string name: string
children?: Tree[], children?: Tree[],
id: number id: number
} }
let menuData = ref<Tree>() let menuData = ref<Tree>()
//获取菜单 //获取菜单
const getMenuData = () => { const getMenuData = () => {
api.GetMenu({}).then((res: any) => { api.GetMenu({}).then((res: any) => {
const {data} = res const {data} = res
const list = XEUtils.toArrayTree(data, {parentKey: "parent", strict: true}) const list = XEUtils.toArrayTree(data, {parentKey: "parent", strict: true})
menuData.value = list menuData.value = list
}) })
} }
let isBtnPermissionShow = ref(false) let isBtnPermissionShow = ref(false)
@@ -203,19 +208,19 @@ let buttonOptions = ref<[]>()
let editedMenuInfo = ref() let editedMenuInfo = ref()
//菜单节点点击事件 //菜单节点点击事件
const menuNodeClick = (node: any, obj: any) => { const menuNodeClick = (node: any, obj: any) => {
isBtnPermissionShow.value = !node.is_catalog isBtnPermissionShow.value = !node.is_catalog
if (!node.is_catalog) { if (!node.is_catalog) {
buttonOptions.value = [] buttonOptions.value = []
editedMenuInfo.value = node editedMenuInfo.value = node
api.GetMenuButton({menu: node.id}).then((res: any) => { api.GetMenuButton({menu: node.id}).then((res: any) => {
const {data} = res const {data} = res
buttonOptions.value = data buttonOptions.value = data
}) })
api.getObj({menu: node.id, role: editedRoleInfo.value.id}).then((res: any) => { api.getObj({menu: node.id, role: editedRoleInfo.value.id}).then((res: any) => {
const {data} = res const {data} = res
buttonPermissionData.value = data buttonPermissionData.value = data
}) })
} }
} }
const menuTree = ref() const menuTree = ref()
@@ -231,173 +236,173 @@ const deptOptions = ref()
const deptCheckedKeys = [] const deptCheckedKeys = []
//按钮表单 //按钮表单
const buttonForm = reactive({ const buttonForm = reactive({
menu_button: null, menu_button: null,
role: null, role: null,
menu: null, menu: null,
data_range: null, data_range: null,
dept: [] dept: []
}) })
//按钮表格数据 //按钮表格数据
let buttonPermissionData = ref([]) let buttonPermissionData = ref([])
//按钮表单验证 //按钮表单验证
const buttonRules = reactive<FormRules>({ const buttonRules = reactive<FormRules>({
menu_button: [ menu_button: [
{required: true, message: '必填项'} {required: true, message: '必填项'}
], ],
data_range: [ data_range: [
{required: true, message: '必填项'} {required: true, message: '必填项'}
] ]
}) })
//新增按钮 //新增按钮
const buttonFormRef = ref<FormInstance>() const buttonFormRef = ref<FormInstance>()
const createBtnPermission = () => { const createBtnPermission = () => {
dialogFormVisible.value = true dialogFormVisible.value = true
buttonForm.menu_button = null buttonForm.menu_button = null
buttonForm.menu = null buttonForm.menu = null
buttonForm.role = null buttonForm.role = null
buttonForm.data_range = null buttonForm.data_range = null
buttonForm.dept = [] buttonForm.dept = []
} }
//权限范围数据 //权限范围数据
const dataScopeOptions = ref<[]>() const dataScopeOptions = ref<[]>()
//按钮值变化事件 //按钮值变化事件
const onChangeButton = (val: any) => { const onChangeButton = (val: any) => {
dataScopeOptions.value = [] dataScopeOptions.value = []
//获取权限值范围 //获取权限值范围
api.GetDataScope({menu_button: val}).then((res: any) => { api.GetDataScope({menu_button: val}).then((res: any) => {
dataScopeOptions.value = res.data dataScopeOptions.value = res.data
}) })
//获取权限部门值 //获取权限部门值
api.GetDataScopeDept({menu_button: val}).then((res: any) => { api.GetDataScopeDept({menu_button: val}).then((res: any) => {
deptOptions.value = XEUtils.toArrayTree(res.data, {parentKey: 'parent', strict: false}) deptOptions.value = XEUtils.toArrayTree(res.data, {parentKey: 'parent', strict: false})
}) })
} }
//过滤按钮名称 //过滤按钮名称
const formatMenuBtn = (val: any) => { const formatMenuBtn = (val: any) => {
let obj: any = buttonOptions.value?.find((item: any) => { let obj: any = buttonOptions.value?.find((item: any) => {
return item.id === val return item.id === val
}) })
return obj ? obj.name : null return obj ? obj.name : null
} }
//过滤权限范围 //过滤权限范围
const formatDataRange = (val: any) => { const formatDataRange = (val: any) => {
let obj: any = [ let obj: any = [
{ {
"value": 0, "value": 0,
"label": '仅本人数据权限' "label": '仅本人数据权限'
}, },
{ {
"value": 1, "value": 1,
"label": '本部门及以下数据权限' "label": '本部门及以下数据权限'
}, },
{ {
"value": 2, "value": 2,
"label": '本部门数据权限' "label": '本部门数据权限'
}, },
{ {
"value": 3, "value": 3,
"label": '全部数据权限' "label": '全部数据权限'
}, },
{ {
"value": 4, "value": 4,
"label": '自定义数据权限' "label": '自定义数据权限'
} }
].find((item: any) => { ].find((item: any) => {
return item.value === val return item.value === val
}) })
return obj ? obj.label : null return obj ? obj.label : null
} }
//保存按钮表单 //保存按钮表单
const onSaveButtonForm = async () => { const onSaveButtonForm = async () => {
const {id: roleId} = editedRoleInfo.value const {id: roleId} = editedRoleInfo.value
const {id: menuId} = editedMenuInfo.value const {id: menuId} = editedMenuInfo.value
const form: any = Object.assign({}, buttonForm) const form: any = Object.assign({}, buttonForm)
form.role = roleId form.role = roleId
form.menu = menuId form.menu = menuId
//选中的部门 //选中的部门
const checkedList = deptTree.value.getCheckedKeys() const checkedList = deptTree.value.getCheckedKeys()
form.dept = checkedList form.dept = checkedList
if (!buttonFormRef.value) return if (!buttonFormRef.value) return
await buttonFormRef.value.validate((valid, fields) => { await buttonFormRef.value.validate((valid, fields) => {
if (valid) { if (valid) {
api.CreatePermission(form).then((res: any) => { api.CreatePermission(form).then((res: any) => {
const {data} = res const {data} = res
buttonPermissionData.value.push(data) buttonPermissionData.value.push(data)
dialogFormVisible.value = false dialogFormVisible.value = false
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: res.msg, message: res.msg,
}) })
}) })
} else { } else {
ElMessage({ ElMessage({
type: 'error', type: 'error',
title: '提交错误', title: '提交错误',
message: 'F12控制台看详情', message: 'F12控制台看详情',
}) })
console.log('提交错误', fields) console.log('提交错误', fields)
} }
}) })
} }
//删除按钮权限 //删除按钮权限
const onDeleteBtn = (scope: any) => { const onDeleteBtn = (scope: any) => {
const {row, $index} = scope const {row, $index} = scope
ElMessageBox.confirm( ElMessageBox.confirm(
'您是否要删除数据?', '您是否要删除数据?',
'温馨提示', '温馨提示',
{ {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning', type: 'warning',
} }
).then(() => { ).then(() => {
api.DeletePermission({id: row.id}).then((res:any) => { api.DeletePermission({id: row.id}).then((res: any) => {
buttonPermissionData.value.splice($index, 1) buttonPermissionData.value.splice($index, 1)
ElMessage({ ElMessage({
type: 'success', type: 'success',
message: res.msg, message: res.msg,
}) })
}) })
}) })
.catch(() => { .catch(() => {
ElMessage({ ElMessage({
type: 'info', type: 'info',
message: '取消删除', message: '取消删除',
})
}) })
})
} }
/***按钮授权的弹窗****/ /***按钮授权的弹窗****/
//初始化数据 //初始化数据
const initGet = () => { const initGet = () => {
getMenuData() getMenuData()
} }
/** /**
* 保存授权 * 保存授权
*/ */
const onSaveAuth = () => { const onSaveAuth = () => {
//选中的菜单 //选中的菜单
const checkedList = menuTree.value.getCheckedKeys() const checkedList = menuTree.value.getCheckedKeys()
//半选中的菜单 //半选中的菜单
const halfCheckedList = menuTree.value.getHalfCheckedKeys() const halfCheckedList = menuTree.value.getHalfCheckedKeys()
//合并的菜单数据 //合并的菜单数据
const menuIdList = [...checkedList, ...halfCheckedList] const menuIdList = [...checkedList, ...halfCheckedList]
// console.log(menuIdList) // console.log(menuIdList)
const {id: roleId} = editedRoleInfo.value const {id: roleId} = editedRoleInfo.value
const data = { const data = {
role: roleId, role: roleId,
menu: menuIdList menu: menuIdList
} }
api.SaveMenuPermission(data).then((res: any) => { api.SaveMenuPermission(data).then((res: any) => {
ElMessage({ ElMessage({
message: res.msg, message: res.msg,
type: 'success', type: 'success',
})
}) })
})
} }
@@ -406,22 +411,22 @@ defineExpose({drawer, editedRoleInfo, initGet})
<style scoped> <style scoped>
.card-header { .card-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.dept-tree::-webkit-scrollbar { .dept-tree::-webkit-scrollbar {
display: none; /* Chrome Safari */ display: none; /* Chrome Safari */
} }
.dept-tree { .dept-tree {
height: 160px; height: 160px;
overflow-y: scroll; overflow-y: scroll;
scrollbar-width: none; /* firefox */ scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */ -ms-overflow-style: none; /* IE 10+ */
border: 1px solid #e1e1e1; border: 1px solid #e1e1e1;
width: 16em; width: 16em;
border-radius: 2px; border-radius: 2px;
} }
</style> </style>

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

@@ -42,7 +42,7 @@
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="user">
import { useExpose, useCrud } from '@fast-crud/fast-crud'; import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud'; import { createCrudOptions } from './crud';
import * as api from './api'; import * as api from './api';

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

@@ -1,18 +1,18 @@
<template> <template>
<fs-page> <fs-page>
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud> <fs-crud ref="crudRef" v-bind="crudBinding"></fs-crud>
</fs-page> </fs-page>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup name="whiteList">
import { ref, onMounted } from 'vue'; import {ref, onMounted} from 'vue';
import { useFs } from '@fast-crud/fast-crud'; import {useFs} from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud'; import {createCrudOptions} from './crud';
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions }); const {crudBinding, crudRef, crudExpose} = useFs({createCrudOptions});
// 页面打开后获取列表数据 // 页面打开后获取列表数据
onMounted(() => { onMounted(() => {
crudExpose.doRefresh(); crudExpose.doRefresh();
}); });
</script> </script>