mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-23 05:40:20 +08:00
✨ Introducing new features. 增加部门菜单功能
This commit is contained in:
parent
bd489d6756
commit
e535d9b83a
57
src/api/admin/tenant-menu.ts
Normal file
57
src/api/admin/tenant-menu.ts
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import request from "/@/utils/request"
|
||||||
|
|
||||||
|
export function fetchList(query?: Object) {
|
||||||
|
return request({
|
||||||
|
url: '/admin/tenant-menu/page',
|
||||||
|
method: 'get',
|
||||||
|
params: query
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function addObj (obj: object) {
|
||||||
|
return request({
|
||||||
|
url: '/admin/tenant-menu',
|
||||||
|
method: 'post',
|
||||||
|
data: obj
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getObj(id: string) {
|
||||||
|
return request({
|
||||||
|
url: '/admin/tenant-menu/',
|
||||||
|
method: 'get',
|
||||||
|
params: {
|
||||||
|
id: id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function delObj(id: string) {
|
||||||
|
return request({
|
||||||
|
url: '/admin/tenant-menu/' + id,
|
||||||
|
method: 'delete'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function putObj(obj:Object) {
|
||||||
|
return request({
|
||||||
|
url: '/admin/tenant-menu',
|
||||||
|
method: 'put',
|
||||||
|
data: obj
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function menuList() {
|
||||||
|
return request({
|
||||||
|
url: '/admin/tenant-menu/list',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
export function treemenu(){
|
||||||
|
return request({
|
||||||
|
url: '/admin/tenant-menu/tree/menu',
|
||||||
|
method: 'get'
|
||||||
|
})
|
||||||
|
}
|
@ -1,4 +1,4 @@
|
|||||||
import axios, {AxiosInstance, AxiosRequestConfig, InternalAxiosRequestConfig} from 'axios';
|
import axios, {AxiosInstance, InternalAxiosRequestConfig} from 'axios';
|
||||||
import errorCode from './errorCode'
|
import errorCode from './errorCode'
|
||||||
import {ElMessage, ElMessageBox} from 'element-plus';
|
import {ElMessage, ElMessageBox} from 'element-plus';
|
||||||
import {Session} from '/@/utils/storage';
|
import {Session} from '/@/utils/storage';
|
||||||
|
@ -28,5 +28,7 @@ export default {
|
|||||||
inputcreateTimeTip: 'input createTime',
|
inputcreateTimeTip: 'input createTime',
|
||||||
inputupdateTimeTip: 'input updateTime',
|
inputupdateTimeTip: 'input updateTime',
|
||||||
inputmenuIdTip: 'input menuId',
|
inputmenuIdTip: 'input menuId',
|
||||||
}
|
}, tenantmenu: {
|
||||||
|
name: 'tenantmenu', index: 'index', status: 'status', createTime: 'createTime',
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -28,5 +28,11 @@ export default {
|
|||||||
inputcreateTimeTip: '请输入创建',
|
inputcreateTimeTip: '请输入创建',
|
||||||
inputupdateTimeTip: '请输入更新时间',
|
inputupdateTimeTip: '请输入更新时间',
|
||||||
inputmenuIdTip: '请输入menuId',
|
inputmenuIdTip: '请输入menuId',
|
||||||
|
},
|
||||||
|
tenantmenu: {
|
||||||
|
name: '租户套餐',
|
||||||
|
index: '序号',
|
||||||
|
status: '状态',
|
||||||
|
createTime: '创建',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -29,10 +29,15 @@
|
|||||||
v-auth="'admin_systenant_add'">
|
v-auth="'admin_systenant_add'">
|
||||||
{{ $t('common.exportBtn') }}
|
{{ $t('common.exportBtn') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
<el-button :disabled="multiple" icon="Delete" type="primary" class="ml10"
|
<el-button :disabled="multiple" icon="Delete" type="primary" class="ml10"
|
||||||
v-auth="'admin_systenant_del'" @click="handleDelete(undefined)">
|
v-auth="'admin_systenant_del'" @click="handleDelete(undefined)">
|
||||||
{{ $t('common.delBtn') }}
|
{{ $t('common.delBtn') }}
|
||||||
</el-button>
|
</el-button>
|
||||||
|
|
||||||
|
<el-button type="primary" class="ml10" @click="handleTenantMenu()" v-auth="'admin_systenant_tenantmenu'">
|
||||||
|
{{ $t('tenantmenu.name') }}
|
||||||
|
</el-button>
|
||||||
<right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px"
|
<right-toolbar v-model:showSearch="showSearch" class="ml10" style="float: right;margin-right: 20px"
|
||||||
@queryTable="getDataList"></right-toolbar>
|
@queryTable="getDataList"></right-toolbar>
|
||||||
</div>
|
</div>
|
||||||
@ -80,6 +85,8 @@
|
|||||||
<!-- 导入excel -->
|
<!-- 导入excel -->
|
||||||
<upload-excel ref="excelUploadRef" :title="$t('tenant.importTenantTip')" url="/admin/tenant/import"
|
<upload-excel ref="excelUploadRef" :title="$t('tenant.importTenantTip')" url="/admin/tenant/import"
|
||||||
temp-url="/admin/sys-file/local/file/tenant.xlsx" @refreshDataList="getDataList" />
|
temp-url="/admin/sys-file/local/file/tenant.xlsx" @refreshDataList="getDataList" />
|
||||||
|
|
||||||
|
<tenant-menu ref="TenantMenuRef"></tenant-menu>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -92,11 +99,13 @@ import { useDict } from "/@/hooks/dict";
|
|||||||
|
|
||||||
// 引入组件
|
// 引入组件
|
||||||
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
|
||||||
|
const TenantMenu = defineAsyncComponent(() => import('./tenantMenu/index.vue'))
|
||||||
const { t } = useI18n()
|
const { t } = useI18n()
|
||||||
|
|
||||||
// 定义变量内容
|
// 定义变量内容
|
||||||
const formDialogRef = ref()
|
const formDialogRef = ref()
|
||||||
const excelUploadRef = ref()
|
const excelUploadRef = ref()
|
||||||
|
const TenantMenuRef = ref()
|
||||||
// 搜索变量
|
// 搜索变量
|
||||||
const queryRef = ref()
|
const queryRef = ref()
|
||||||
const showSearch = ref(true)
|
const showSearch = ref(true)
|
||||||
@ -157,4 +166,9 @@ const handleDelete = (row: any) => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleTenantMenu = () => {
|
||||||
|
TenantMenuRef.value.open()
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
175
src/views/admin/tenant/tenantMenu/form.vue
Normal file
175
src/views/admin/tenant/tenantMenu/form.vue
Normal file
@ -0,0 +1,175 @@
|
|||||||
|
<template>
|
||||||
|
<el-dialog :title="form.id ? $t('common.editBtn') : $t('common.addBtn')" v-model="visible"
|
||||||
|
:close-on-click-modal="false" draggable>
|
||||||
|
<el-form ref="dataFormRef" :model="form" :rules="dataRules" size="default" label-width="90px">
|
||||||
|
<el-row :gutter="24">
|
||||||
|
<el-col :span="12" class="mb20">
|
||||||
|
<el-form-item :label="t('tenant.name')" prop="name">
|
||||||
|
<el-input v-model="form.name" :placeholder="t('tenant.inputnameTip')" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" class="mb20">
|
||||||
|
<el-form-item :label="t('tenant.status')" prop="status">
|
||||||
|
<el-radio-group v-model="form.status">
|
||||||
|
<el-radio :label="item.value" border v-for="(item,index) in status_type" :key="index">{{item.label}}</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="24" class="mb20">
|
||||||
|
<el-form-item prop="menuIds">
|
||||||
|
<el-tree show-checkbox ref="menuTreeRef"
|
||||||
|
:check-strictly="false"
|
||||||
|
v-loading="treeLoading"
|
||||||
|
:data="menuData"
|
||||||
|
:props="defaultProps"
|
||||||
|
:default-checked-keys="checkedMenu"
|
||||||
|
node-key="id"
|
||||||
|
highlight-current
|
||||||
|
default-expand-all
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
<template #footer>
|
||||||
|
<span class="dialog-footer">
|
||||||
|
<el-button @click="visible = false" size="default">{{ $t('common.cancelButtonText') }}</el-button>
|
||||||
|
<el-button type="primary" @click="onSubmit" size="default" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="tenant-menu-form">
|
||||||
|
|
||||||
|
|
||||||
|
import {getObj} from "/@/api/admin/tenant-menu";
|
||||||
|
import {useDict} from "/@/hooks/dict";
|
||||||
|
import {useI18n} from "vue-i18n";
|
||||||
|
const { status_type } = useDict('status_type')
|
||||||
|
const { t } = useI18n()
|
||||||
|
import { treemenu, addObj, putObj } from '/@/api/admin/tenant-menu'
|
||||||
|
import {useMessage} from "/@/hooks/message";
|
||||||
|
const emit = defineEmits(['refresh']);
|
||||||
|
|
||||||
|
const dataFormRef = ref();
|
||||||
|
const visible = ref(false)
|
||||||
|
const menuTreeRef = ref()
|
||||||
|
|
||||||
|
const form = reactive({
|
||||||
|
id: '',
|
||||||
|
status: '',
|
||||||
|
name: '',
|
||||||
|
menuIds: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const dataRules = reactive({
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
const menuData = ref<any[]>([])
|
||||||
|
|
||||||
|
const defaultProps = reactive({
|
||||||
|
label: 'name',
|
||||||
|
value: 'id'
|
||||||
|
})
|
||||||
|
|
||||||
|
const checkedMenu = ref<any[]>([])
|
||||||
|
|
||||||
|
// 打开弹窗
|
||||||
|
const openDialog = (id: string) => {
|
||||||
|
visible.value = true
|
||||||
|
form.id = ''
|
||||||
|
|
||||||
|
// 重置表单数据
|
||||||
|
if (dataFormRef.value) {
|
||||||
|
dataFormRef.value.resetFields()
|
||||||
|
}
|
||||||
|
checkedMenu.value = []
|
||||||
|
// 获取Tenant信息
|
||||||
|
if (id) {
|
||||||
|
form.id = id
|
||||||
|
getTenantMenuData(id)
|
||||||
|
}
|
||||||
|
getMenuData()
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const onSubmit = () => {
|
||||||
|
loading.value = true
|
||||||
|
dataFormRef.value.validate((valid: boolean) => {
|
||||||
|
if (!valid) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
form.menuIds = [...menuTreeRef.value.getCheckedKeys(),...menuTreeRef.value.getHalfCheckedKeys()].join(",")
|
||||||
|
if (form.id) {
|
||||||
|
putObj(form).then(() => {
|
||||||
|
useMessage().success(t('common.editSuccessText'))
|
||||||
|
visible.value = false // 关闭弹窗
|
||||||
|
loading.value = false
|
||||||
|
emit('refresh')
|
||||||
|
}).catch((err: any) => {
|
||||||
|
useMessage().error(err.msg)
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
addObj(form).then(() => {
|
||||||
|
useMessage().success(t('common.addSuccessText'))
|
||||||
|
visible.value = false // 关闭弹窗
|
||||||
|
loading.value = false
|
||||||
|
emit('refresh')
|
||||||
|
}).catch((err: any) => {
|
||||||
|
useMessage().error(err.msg)
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const treeLoading = ref(false)
|
||||||
|
const getMenuData = () => {
|
||||||
|
treeLoading.value = true
|
||||||
|
treemenu().then(res =>{
|
||||||
|
menuData.value = res.data
|
||||||
|
if (form.menuIds) {
|
||||||
|
checkedMenu.value = resolveAllEunuchNodeId(menuData.value,form.menuIds.split(','),[])
|
||||||
|
} else {
|
||||||
|
checkedMenu.value = []
|
||||||
|
}
|
||||||
|
treeLoading.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const resolveAllEunuchNodeId = (json: any[], idArr: any[], temp: any[]) => {
|
||||||
|
for (let i = 0; i < json.length; i++) {
|
||||||
|
const item = json[i]
|
||||||
|
// 国际化
|
||||||
|
item.name = t(item.name)
|
||||||
|
// 存在子节点,递归遍历;不存在子节点,将json的id添加到临时数组中
|
||||||
|
if (item.children && item.children.length !== 0) {
|
||||||
|
resolveAllEunuchNodeId(item.children, idArr, temp)
|
||||||
|
} else {
|
||||||
|
temp.push(idArr.filter(id => id === item.id))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return temp
|
||||||
|
}
|
||||||
|
|
||||||
|
const getTenantMenuData = (id: string) => {
|
||||||
|
// 获取部门数据
|
||||||
|
getObj(id).then((res: any) => {
|
||||||
|
Object.assign(form, res.data[0])
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露变量
|
||||||
|
defineExpose({
|
||||||
|
openDialog
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
91
src/views/admin/tenant/tenantMenu/index.vue
Normal file
91
src/views/admin/tenant/tenantMenu/index.vue
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
<template>
|
||||||
|
<el-drawer v-model="visible" title="租户套餐" size="80%">
|
||||||
|
<el-card shadow="hover" class="layout-padding-auto">
|
||||||
|
<el-row>
|
||||||
|
<div class="mb8" style="width: 100%">
|
||||||
|
<el-button icon="folder-add" type="primary" class="ml10" @click="tenantMenuDialogRef.openDialog()"
|
||||||
|
v-auth="'admin_systenantmenu_add'">
|
||||||
|
{{ $t('common.addBtn') }}
|
||||||
|
</el-button>
|
||||||
|
<right-toolbar :search='false' class="ml10" style="float: right;margin-right: 20px"
|
||||||
|
@queryTable="getDataList"></right-toolbar>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</el-row>
|
||||||
|
<el-table :data="state.dataList" v-loading="state.loading" style="width: 100%">
|
||||||
|
<el-table-column type="index" :label="$t('tenantmenu.index')" width="80" />
|
||||||
|
<el-table-column prop="name" :label="$t('tenantmenu.name')" show-overflow-tooltip></el-table-column>
|
||||||
|
<el-table-column :label="$t('tenantmenu.status')" show-overflow-tooltip>
|
||||||
|
<template #default="scope">
|
||||||
|
<dict-tag :options="status_type" :value="scope.row.status"></dict-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createTime" :label="$t('tenantmenu.createTime')"
|
||||||
|
show-overflow-tooltip></el-table-column>
|
||||||
|
<el-table-column :label="$t('common.action')" width="150">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button text type="primary" @click="tenantMenuDialogRef.openDialog(scope.row.id)"
|
||||||
|
v-auth="'admin_systenantmenu_edit'"> {{
|
||||||
|
$t('common.editBtn')
|
||||||
|
}}
|
||||||
|
</el-button>
|
||||||
|
<el-button text type="primary" @click="handleDelete(scope.row)" v-auth="'admin_systenantmenu_del'">
|
||||||
|
{{ $t('common.delBtn') }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination">
|
||||||
|
</pagination>
|
||||||
|
<tenant-menu-dialog ref="tenantMenuDialogRef" @refresh="getDataList"></tenant-menu-dialog>
|
||||||
|
</el-card>
|
||||||
|
</el-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="tenant-menu">
|
||||||
|
import {BasicTableProps, useTable} from "/@/hooks/table";
|
||||||
|
import { fetchList,delObj } from "/@/api/admin/tenant-menu";
|
||||||
|
import {useDict} from "/@/hooks/dict";
|
||||||
|
import {useMessage, useMessageBox} from "/@/hooks/message";
|
||||||
|
import {useI18n} from "vue-i18n";
|
||||||
|
const { t } = useI18n()
|
||||||
|
const TenantMenuDialog = defineAsyncComponent(() => import('./form.vue'))
|
||||||
|
|
||||||
|
const { status_type } = useDict('status_type')
|
||||||
|
const visible = ref(false)
|
||||||
|
const tenantMenuDialogRef = ref()
|
||||||
|
|
||||||
|
const state: BasicTableProps = reactive<BasicTableProps>({
|
||||||
|
pageList: fetchList
|
||||||
|
})
|
||||||
|
const {
|
||||||
|
getDataList,
|
||||||
|
currentChangeHandle,
|
||||||
|
sizeChangeHandle,
|
||||||
|
} = useTable(state)
|
||||||
|
|
||||||
|
const handleDelete = (row: any) => {
|
||||||
|
useMessageBox().confirm(`${t('common.delConfirmText')}:${row.name} ?`).then(() => {
|
||||||
|
// 删除用户的接口
|
||||||
|
delObj(row.id).then(() => {
|
||||||
|
getDataList();
|
||||||
|
useMessage().success(t('common.delSuccessText'))
|
||||||
|
}).catch(err => {
|
||||||
|
useMessage().error(err.msg)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
const open = () => {
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暴露变量
|
||||||
|
defineExpose({
|
||||||
|
open,
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
@ -134,7 +134,7 @@ const state: BasicTableProps = reactive<BasicTableProps>({
|
|||||||
username: '',
|
username: '',
|
||||||
phone: ''
|
phone: ''
|
||||||
},
|
},
|
||||||
pageList: pageList // H
|
pageList: pageList
|
||||||
});
|
});
|
||||||
|
|
||||||
// 部门树使用的数据
|
// 部门树使用的数据
|
||||||
|
Loading…
Reference in New Issue
Block a user