refactor: 重构权限管理
1.更新字段管理
This commit is contained in:
猿小天
65
web/src/views/system/menu/components/MenuFieldCom/api.ts
Normal file
65
web/src/views/system/menu/components/MenuFieldCom/api.ts
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
import { request } from '/@/utils/service';
|
||||||
|
import { UserPageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
|
||||||
|
import XEUtils from "xe-utils";
|
||||||
|
import {CurrentInfoType} from "/@/views/system/columns/types";
|
||||||
|
|
||||||
|
export const apiPrefix = '/api/system/column/';
|
||||||
|
export function GetList(query: UserPageQuery) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix,
|
||||||
|
method: 'get',
|
||||||
|
params: query,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export function GetObj(id: InfoReq) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix + id,
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AddObj(obj: AddReq) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix,
|
||||||
|
method: 'post',
|
||||||
|
data: obj,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function UpdateObj(obj: EditReq) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix + obj.id + '/',
|
||||||
|
method: 'put',
|
||||||
|
data: obj,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function DelObj(id: DelReq) {
|
||||||
|
return request({
|
||||||
|
url: apiPrefix + id + '/',
|
||||||
|
method: 'delete',
|
||||||
|
data: { id },
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取所有model
|
||||||
|
*/
|
||||||
|
export function getModelList() {
|
||||||
|
return request({
|
||||||
|
url: '/api/system/column/get_models/',
|
||||||
|
method: 'get',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 自动匹配field
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export function automatchColumnsData(data: CurrentInfoType) {
|
||||||
|
return request({
|
||||||
|
url: '/api/system/column/auto_match_fields/',
|
||||||
|
method: 'post',
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
}
|
||||||
228
web/src/views/system/menu/components/MenuFieldCom/crud.tsx
Normal file
228
web/src/views/system/menu/components/MenuFieldCom/crud.tsx
Normal file
@@ -0,0 +1,228 @@
|
|||||||
|
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';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const createCrudOptions = function ({ crudExpose, props,modelDialog,selectOptions,allModelData }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||||
|
const pageRequest = async (query: UserPageQuery) => {
|
||||||
|
// return await api.GetList(query);
|
||||||
|
if (selectOptions.value.id) {
|
||||||
|
return await api.GetList({ menu: selectOptions.value.id } as any);
|
||||||
|
} else {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
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) => {
|
||||||
|
form.menu = selectOptions.value.id;
|
||||||
|
return await api.AddObj(form);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//权限判定
|
||||||
|
const hasPermissions = inject('$hasPermissions');
|
||||||
|
|
||||||
|
return {
|
||||||
|
crudOptions: {
|
||||||
|
request: {
|
||||||
|
pageRequest,
|
||||||
|
addRequest,
|
||||||
|
editRequest,
|
||||||
|
delRequest,
|
||||||
|
},
|
||||||
|
pagination: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
actionbar: {
|
||||||
|
buttons: {
|
||||||
|
auto: {
|
||||||
|
text: '自动匹配',
|
||||||
|
type: 'success',
|
||||||
|
click: () => {
|
||||||
|
return modelDialog.value=true;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
rowHandle: {
|
||||||
|
//固定右侧
|
||||||
|
fixed: 'right',
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
col: { span: 24 },
|
||||||
|
labelWidth: '110px',
|
||||||
|
wrapper: {
|
||||||
|
is: 'el-dialog',
|
||||||
|
width: '600px',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
columns: {
|
||||||
|
_index: {
|
||||||
|
title: '序号',
|
||||||
|
form: { show: false },
|
||||||
|
column: {
|
||||||
|
//type: 'index',
|
||||||
|
align: 'center',
|
||||||
|
width: '70px',
|
||||||
|
columnSetDisabled: true, //禁止在列设置中选择
|
||||||
|
//@ts-ignore
|
||||||
|
formatter: (context) => {
|
||||||
|
//计算序号,你可以自定义计算规则，此处为翻页累加
|
||||||
|
let index = context.index ?? 1;
|
||||||
|
let pagination: any = crudExpose!.crudBinding.value.pagination;
|
||||||
|
return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
model: {
|
||||||
|
title: 'model',
|
||||||
|
type: 'dict-select',
|
||||||
|
dict:dict({
|
||||||
|
url:'/api/system/column/get_models/',
|
||||||
|
label:'title',
|
||||||
|
value:'key'
|
||||||
|
}),
|
||||||
|
form: {
|
||||||
|
rules: [
|
||||||
|
// 表单校验规则
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
component: {
|
||||||
|
span: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
title: '中文名',
|
||||||
|
sortable: 'custom',
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
type: 'text',
|
||||||
|
form: {
|
||||||
|
rules: [
|
||||||
|
// 表单校验规则
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
component: {
|
||||||
|
span: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
field_name: {
|
||||||
|
title: '字段名',
|
||||||
|
type: 'text',
|
||||||
|
search: {
|
||||||
|
show: true,
|
||||||
|
},
|
||||||
|
form: {
|
||||||
|
rules: [
|
||||||
|
// 表单校验规则
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '必填项',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
component: {
|
||||||
|
span: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
// is_create: {
|
||||||
|
// title: '创建时显示',
|
||||||
|
// sortable: 'custom',
|
||||||
|
// search: {
|
||||||
|
// disabled: true,
|
||||||
|
// },
|
||||||
|
// type: 'dict-switch',
|
||||||
|
// dict: dict({
|
||||||
|
// data: [
|
||||||
|
// { value: true, label: '启用' },
|
||||||
|
// { value: false, label: '禁用' },
|
||||||
|
// ],
|
||||||
|
// }),
|
||||||
|
// form: {
|
||||||
|
// value: true,
|
||||||
|
// },
|
||||||
|
// column: {
|
||||||
|
// valueChange(context){
|
||||||
|
// return api.UpdateObj(context.row)
|
||||||
|
// },
|
||||||
|
// component: {
|
||||||
|
// name: 'fs-dict-switch',
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// is_update: {
|
||||||
|
// title: '编辑时显示',
|
||||||
|
// search: {
|
||||||
|
// show: true,
|
||||||
|
// },
|
||||||
|
// type: 'dict-switch',
|
||||||
|
// dict: dict({
|
||||||
|
// data: [
|
||||||
|
// { value: true, label: '启用' },
|
||||||
|
// { value: false, label: '禁用' },
|
||||||
|
// ],
|
||||||
|
// }),
|
||||||
|
// form: {
|
||||||
|
// value: true,
|
||||||
|
// },
|
||||||
|
// column: {
|
||||||
|
// component: {
|
||||||
|
// name: 'fs-dict-switch',
|
||||||
|
// onChange: compute((context) => {
|
||||||
|
// //动态onChange方法测试
|
||||||
|
// return () => {
|
||||||
|
// console.log('onChange', context.row.switch);
|
||||||
|
// };
|
||||||
|
// }),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// is_query: {
|
||||||
|
// title: '列表中显示',
|
||||||
|
// type: 'dict-switch',
|
||||||
|
// dict: dict({
|
||||||
|
// data: [
|
||||||
|
// { value: true, label: '启用' },
|
||||||
|
// { value: false, label: '禁用' },
|
||||||
|
// ],
|
||||||
|
// }),
|
||||||
|
// form: {
|
||||||
|
// value: true,
|
||||||
|
// },
|
||||||
|
// column: {
|
||||||
|
// component: {
|
||||||
|
// name: 'fs-dict-switch',
|
||||||
|
// onChange: compute((context) => {
|
||||||
|
// //动态onChange方法测试
|
||||||
|
// return () => {
|
||||||
|
// console.log('onChange', context.row.switch);
|
||||||
|
// };
|
||||||
|
// }),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
};
|
||||||
110
web/src/views/system/menu/components/MenuFieldCom/index.vue
Normal file
110
web/src/views/system/menu/components/MenuFieldCom/index.vue
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-dialog ref="modelRef" v-model="modelDialog" title="选择model">
|
||||||
|
<div v-show="props.model">
|
||||||
|
<el-tag>已选择:{{ props.model }}</el-tag>
|
||||||
|
</div>
|
||||||
|
<div class="model-card">
|
||||||
|
<div v-for="(item,index) in allModelData" :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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {ref, onMounted, reactive} 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';
|
||||||
|
// 当前选择的菜单信息
|
||||||
|
let selectOptions: any = ref({name: null});
|
||||||
|
|
||||||
|
const props = reactive({
|
||||||
|
model: '',
|
||||||
|
app: '',
|
||||||
|
menu: ''
|
||||||
|
})
|
||||||
|
|
||||||
|
//model弹窗
|
||||||
|
const modelDialog = ref(false)
|
||||||
|
// 获取所有model
|
||||||
|
const allModelData = ref<any[]>([]);
|
||||||
|
const modelCheckIndex = ref(null)
|
||||||
|
const onModelChecked = (row, index) => {
|
||||||
|
modelCheckIndex.value = index
|
||||||
|
props.model = row.key
|
||||||
|
props.app = row.app
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 菜单选中时,加载表格数据
|
||||||
|
* @param record
|
||||||
|
*/
|
||||||
|
const handleRefreshTable = (record: MenuTreeItemType) => {
|
||||||
|
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('请选择角色和模型表！');
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const {crudBinding, crudRef, crudExpose} = 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;
|
||||||
|
|
||||||
|
div {
|
||||||
|
margin: 15px 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user