Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
100011797
commit
24514e2b7a
|
|
@ -1,3 +1,13 @@
|
|||
import server from '@/utils/request'
|
||||
import server from '@/utils/request';
|
||||
|
||||
export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tree', data)
|
||||
// 获取当前用户可访问菜单
|
||||
export const getMenuTree_api = (data: object) => server.post(`/menu/_all/tree`, data);
|
||||
|
||||
export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tree', data)
|
||||
|
||||
|
||||
|
||||
// 获取资产类型
|
||||
export const getAssetsType_api = () => server.get(`/asset/types`);
|
||||
// 获取菜单详情
|
||||
export const getMenuDetail_api = (id:string) => server.get(`/menu/${id}`);
|
||||
|
|
|
|||
|
|
@ -117,6 +117,14 @@ export default [
|
|||
path:'/system/Permission',
|
||||
component: ()=>import('@/views/system/Permission/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/system/Menu',
|
||||
component: ()=>import('@/views/system/Menu/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/system/Menu/detail/:id',
|
||||
component: ()=>import('@/views/system/Menu/Detail/index.vue')
|
||||
},
|
||||
// 初始化
|
||||
{
|
||||
path: '/init-home',
|
||||
|
|
|
|||
|
|
@ -76,30 +76,3 @@ export function getSlotVNode<T>(slots: Slots, props: Record<string, unknown>, pr
|
|||
}
|
||||
return (props[prop] || slots[prop]?.()) as T;
|
||||
}
|
||||
|
||||
/**
|
||||
* 时间转换为'2022-01-02 14:03:05'
|
||||
* @param date 时间对象
|
||||
* @returns
|
||||
*/
|
||||
export const dateFormat = (dateSouce:any):string|Error => {
|
||||
let date = null
|
||||
try {
|
||||
date = new Date(dateSouce)
|
||||
} catch (error) {
|
||||
return new Error('请传入日期格式数据')
|
||||
}
|
||||
let year = date.getFullYear();
|
||||
let month: number | string = date.getMonth() + 1;
|
||||
let day: number | string = date.getDate();
|
||||
let hour: number | string = date.getHours();
|
||||
let minutes: number | string = date.getMinutes();
|
||||
let seconds: number | string = date.getSeconds();
|
||||
month = (month < 10) ? '0' + month : month;
|
||||
day = (day < 10) ? '0' + day : day;
|
||||
hour = (hour < 10) ? '0' + hour : hour;
|
||||
minutes = (minutes < 10) ? '0' + minutes : minutes;
|
||||
seconds = (seconds < 10) ? '0' + seconds : seconds;
|
||||
return year + "-" + month + "-" + day
|
||||
+ " " + hour + ":" + minutes + ":" + seconds;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,9 @@
|
|||
}"
|
||||
>
|
||||
<template #modifyTime="slotProps">
|
||||
<span>{{ dateFormat(slotProps.modifyTime) }}</span>
|
||||
<span>{{
|
||||
moment(slotProps.modifyTime).format('HHHH-MM-DD HH:mm:ss')
|
||||
}}</span>
|
||||
</template>
|
||||
<template #state="slotProps">
|
||||
<StatusLabel
|
||||
|
|
@ -46,8 +48,8 @@ import StatusLabel from '../StatusLabel.vue';
|
|||
|
||||
import { ComponentInternalInstance } from 'vue';
|
||||
import { getDeviceList_api } from '@/api/home';
|
||||
import { dateFormat } from '@/utils/comm';
|
||||
import { message } from 'ant-design-vue';
|
||||
import moment from 'moment';
|
||||
|
||||
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
||||
const emits = defineEmits(['confirm']);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,333 @@
|
|||
<template>
|
||||
<div class="basic-info-container">
|
||||
<a-card>
|
||||
<h3>基本信息</h3>
|
||||
<a-form :model="form.data" class="basic-form">
|
||||
<div class="row" style="display: flex">
|
||||
<a-form-item
|
||||
label="菜单图标"
|
||||
name="icon"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请上传图标',
|
||||
},
|
||||
]"
|
||||
style="flex: 0 0 186px"
|
||||
>
|
||||
<div class="icon-upload has-icon" v-if="form.data.icon">
|
||||
<svg aria-hidden="true">
|
||||
<use :xlinkHref="`#${form.data.icon}`" />
|
||||
</svg>
|
||||
<span class="mark">点击修改</span>
|
||||
</div>
|
||||
|
||||
<div v-else class="icon-upload no-icon">
|
||||
<span>
|
||||
<plus-outlined style="font-size: 30px" />
|
||||
<p>点击选择图标</p>
|
||||
</span>
|
||||
</div>
|
||||
</a-form-item>
|
||||
<a-row :gutter="24" style="flex: 1 1 auto">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入名称' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input v-model:value="form.data.name" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="编码"
|
||||
name="code"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入编码' },
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input v-model:value="form.data.code" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="页面地址"
|
||||
name="url"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入页面地址',
|
||||
},
|
||||
{ max: 128, message: '最多可输入128字符' },
|
||||
]"
|
||||
>
|
||||
<a-input v-model:value="form.data.url" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="排序"
|
||||
name="sortIndex"
|
||||
:rules="[
|
||||
{
|
||||
pattern: /^[0-9]*[1-9][0-9]*$/,
|
||||
message: '请输入大于0的整数',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input v-model:value="form.data.sortIndex" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
|
||||
<a-form-item label="说明" name="describe">
|
||||
<a-textarea
|
||||
v-model:value="form.data.describe"
|
||||
:rows="4"
|
||||
placeholder="请输入说明"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-card>
|
||||
<a-card>
|
||||
<h3>权限配置</h3>
|
||||
<a-form :model="form.data" class="basic-form permiss-form">
|
||||
<a-form-item name="accessSupport" required>
|
||||
<template #label>
|
||||
<span style="margin-right: 3px">数据权限控制</span>
|
||||
<a-tooltip title="此菜单页面数据所对应的资产类型">
|
||||
<question-circle-outlined
|
||||
class="img-style"
|
||||
style="color: #a6a6a6"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-radio-group
|
||||
v-model:value="form.data.accessSupport"
|
||||
name="radioGroup"
|
||||
>
|
||||
<a-radio value="unsupported">不支持</a-radio>
|
||||
<a-radio value="support">支持</a-radio>
|
||||
<a-radio value="indirect">
|
||||
<span style="margin-right: 3px">间接控制</span>
|
||||
<a-tooltip
|
||||
title="此菜单内的数据基于其他菜单的数据权限控制"
|
||||
>
|
||||
<question-circle-filled class="img-style" />
|
||||
</a-tooltip>
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
|
||||
<a-form-item
|
||||
name="assetType"
|
||||
v-if="form.data.accessSupport === 'support'"
|
||||
:rules="[{ required: true, message: '请选择资产类型' }]"
|
||||
style="margin-top: 24px; margin-bottom: 0"
|
||||
>
|
||||
<a-select
|
||||
v-model:value="form.data.assetType"
|
||||
style="width: 500px"
|
||||
placeholder="请选择资产类型"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="item in form.assetsType"
|
||||
:value="item.value"
|
||||
>{{ item.label }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
name="indirectMenus"
|
||||
v-if="form.data.accessSupport === 'indirect'"
|
||||
:rules="[{ required: true, message: '请选择关联菜单' }]"
|
||||
style="margin-top: 24px; margin-bottom: 0"
|
||||
>
|
||||
<a-tree-select
|
||||
v-model:value="form.data.indirectMenus"
|
||||
style="width: 400px"
|
||||
:dropdown-style="{
|
||||
maxHeight: '400px',
|
||||
overflow: 'auto',
|
||||
}"
|
||||
placeholder="请选择关联菜单"
|
||||
multiple
|
||||
show-search
|
||||
tree-default-expand-all
|
||||
:tree-data="form.treeData"
|
||||
>
|
||||
<template #title="{ value: val, title }">
|
||||
<b
|
||||
v-if="val === 'parent 1-1'"
|
||||
style="color: #08c"
|
||||
>{{ val }}</b
|
||||
>
|
||||
<template v-else>{{ title }}</template>
|
||||
</template>
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
</a-form-item>
|
||||
<a-form-item label="权限">
|
||||
<a-input
|
||||
v-model:value="form.data.permissions"
|
||||
style="width: 300px"
|
||||
allowClear
|
||||
placeholder="请输入权限名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<a-button type="primary" @click="clickSave">保存</a-button>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
PlusOutlined,
|
||||
QuestionCircleFilled,
|
||||
QuestionCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import {
|
||||
getMenuTree_api,
|
||||
getAssetsType_api,
|
||||
getMenuDetail_api,
|
||||
} from '@/api/system/menu';
|
||||
import { exportPermission_api } from '@/api/system/permission';
|
||||
|
||||
const route = useRoute();
|
||||
const routeParams = {
|
||||
id: route.params.id === ':id' ? '' : (route.params.id as string),
|
||||
...route.query,
|
||||
url: route.query.basePath,
|
||||
};
|
||||
|
||||
const form = reactive({
|
||||
data: {
|
||||
name: '',
|
||||
code: '',
|
||||
sortIndex: '',
|
||||
icon: '',
|
||||
describe: '',
|
||||
permissions: '',
|
||||
accessSupport: '',
|
||||
assetType: undefined,
|
||||
indirectMenus: [],
|
||||
...routeParams,
|
||||
} as formType,
|
||||
|
||||
treeData: [], // 关联菜单
|
||||
assetsType: [] as assetType[], // 资产类型
|
||||
premissonList: [], // 权限列表
|
||||
|
||||
init: () => {
|
||||
// 获取菜单详情
|
||||
routeParams.id &&
|
||||
getMenuDetail_api(routeParams.id).then((resp) => {
|
||||
console.log('菜单详情', resp);
|
||||
});
|
||||
// 获取权限列表
|
||||
// exportPermission_api()
|
||||
// 获取关联菜单
|
||||
getMenuTree_api({ paging: false }).then((resp) => {
|
||||
console.log('关联菜单', resp);
|
||||
});
|
||||
// 获取资产类型
|
||||
getAssetsType_api().then((resp:any) => {
|
||||
form.assetsType = resp.result.map((item:any)=>({label:item.name,value:item.id}))
|
||||
});
|
||||
},
|
||||
});
|
||||
form.init();
|
||||
const clickSave = () => {};
|
||||
|
||||
type formType = {
|
||||
name: string;
|
||||
code: string;
|
||||
url: string;
|
||||
sortIndex: string;
|
||||
icon: string;
|
||||
permissions: string;
|
||||
describe: string;
|
||||
accessSupport: string;
|
||||
assetType: string | undefined;
|
||||
indirectMenus: any[];
|
||||
};
|
||||
|
||||
type assetType = {
|
||||
label: string;
|
||||
value: string;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.basic-info-container {
|
||||
.ant-card {
|
||||
margin-bottom: 24px;
|
||||
|
||||
h3 {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding: 4px 0 4px 12px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 5px px;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: calc(100% - 10px);
|
||||
background-color: #1d39c4;
|
||||
border-radius: 2px;
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
|
||||
.basic-form {
|
||||
.ant-form-item {
|
||||
display: block;
|
||||
:deep(.ant-form-item-label) {
|
||||
overflow: inherit;
|
||||
.img-style {
|
||||
cursor: help;
|
||||
}
|
||||
label::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
:deep(.ant-form-item-control-input-content) {
|
||||
.icon-upload {
|
||||
width: 160px;
|
||||
height: 150px;
|
||||
border: 1px dashed #d9d9d9;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: 0.5s;
|
||||
&:hover {
|
||||
border-color: #415ed1;
|
||||
}
|
||||
}
|
||||
.has-icon {
|
||||
}
|
||||
.no-icon {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<template>
|
||||
<div class="button-mange-container">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
const route = useRoute();
|
||||
const routeParams = {
|
||||
id: route.params.id === ':id' ? '' : route.params.id,
|
||||
...route.query,
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div class="menu-detail-container">
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="basic" tab="基本信息"> <BasicInfo /> </a-tab-pane>
|
||||
<a-tab-pane key="button" tab="按钮管理">
|
||||
<ButtonMange />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import BasicInfo from './BasicInfo.vue';
|
||||
import ButtonMange from './ButtonMange.vue';
|
||||
const activeKey = ref('basic');
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.menu-detail-container {
|
||||
.ant-tabs-tabpane {
|
||||
background-color: #f0f2f5;
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
<template>
|
||||
<div class="menu-container">
|
||||
<Search :columns="query.columns" @search="query.search" />
|
||||
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:request="table.getList"
|
||||
model="TABLE"
|
||||
:params="query.params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button
|
||||
type="primary"
|
||||
@click="table.toDetails({})"
|
||||
style="margin-right: 10px"
|
||||
><plus-outlined />新增</a-button
|
||||
>
|
||||
<a-button>菜单实例</a-button>
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
{{ slotProps.createTime }}
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip>
|
||||
<template #title>查看</template>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="table.toDetails(slotProps)"
|
||||
>
|
||||
<edit-outlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
<a-tooltip>
|
||||
<template #title>新增子菜单</template>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="table.toDetails(slotProps)"
|
||||
>
|
||||
<edit-outlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<a-popconfirm
|
||||
title="是否删除该菜单"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="table.clickDel(slotProps)"
|
||||
:disabled="slotProps.status"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>删除</template>
|
||||
<a-button style="padding: 0" type="link">
|
||||
<delete-outlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getMenuTree_api } from '@/api/system/menu';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 筛选
|
||||
const query = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '编码',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
ellipsis: true,
|
||||
fixed: 'left',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '页面地址',
|
||||
dataIndex: 'url',
|
||||
key: 'url',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortIndex',
|
||||
key: 'sortIndex',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'number',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'date',
|
||||
},
|
||||
},
|
||||
],
|
||||
params: {
|
||||
terms: [],
|
||||
},
|
||||
search: (params: any) => {
|
||||
query.params = params;
|
||||
},
|
||||
});
|
||||
|
||||
const tableRef = ref<Record<string, any>>({}); // 表格实例
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '编码',
|
||||
dataIndex: 'code',
|
||||
key: 'code',
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: 220,
|
||||
},
|
||||
{
|
||||
title: '页面地址',
|
||||
dataIndex: 'url',
|
||||
key: 'url',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortIndex',
|
||||
key: 'sortIndex',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'describe',
|
||||
key: 'describe',
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: '创建时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
scopedSlots: true,
|
||||
width: 180,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
scopedSlots: true,
|
||||
width: 140,
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
total: 0,
|
||||
getList: async (_params: any) => {
|
||||
//过滤非集成的菜单
|
||||
const item = {
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
column: 'owner',
|
||||
termType: 'eq',
|
||||
value: 'iot',
|
||||
},
|
||||
{
|
||||
column: 'owner',
|
||||
termType: 'isnull',
|
||||
value: '1',
|
||||
type: 'or',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
const params = {
|
||||
..._params,
|
||||
terms:
|
||||
_params.terms && _params.length !== 0
|
||||
? [...query.params.terms, item]
|
||||
: [item],
|
||||
sorts: [{ name: 'sortIndex', order: 'asc' }],
|
||||
paging: false,
|
||||
};
|
||||
const resp: any = await getMenuTree_api(params);
|
||||
const lastItem = resp.result[resp.result.length - 1];
|
||||
table.total == lastItem ? lastItem.sortIndex + 1 : 1;
|
||||
return {
|
||||
code: resp.message,
|
||||
result: {
|
||||
data: resp.result,
|
||||
pageIndex: 0,
|
||||
pageSize: 0,
|
||||
total: 0,
|
||||
},
|
||||
status: resp.status,
|
||||
};
|
||||
},
|
||||
// 跳转至详情页
|
||||
toDetails: (row: any) => {
|
||||
router.push(
|
||||
`/system/Menu/detail/${row.id || ':id'}?pid=${
|
||||
row.pid || ''
|
||||
}&basePath=${row.basePath || ''}&sortIndex=${table.total + 1}`,
|
||||
);
|
||||
},
|
||||
// 删除
|
||||
clickDel: (row: any) => {
|
||||
// delPermission_api(row.id).then((resp: any) => {
|
||||
// if (resp.status === 200) {
|
||||
// tableRef.value?.reload();
|
||||
// message.success('操作成功!');
|
||||
// }
|
||||
// });
|
||||
},
|
||||
// 刷新列表
|
||||
refresh: () => {
|
||||
tableRef.value.reload();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
Loading…
Reference in New Issue