Compare commits
2 Commits
6f08eda851
...
7386ea2a94
| Author | SHA1 | Date | |
|---|---|---|---|
| 7386ea2a94 | |||
| 92f4189810 |
@ -3,9 +3,9 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="./src/image/票据服务.png" type="image/x-icon">
|
||||
<link rel="icon" href="./src/assets/objectNetwork.png" type="image/x-icon">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>票据管理系统</title>
|
||||
<title>物联网网关系统</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
@ -21,7 +21,7 @@ export interface AuthRecord extends AuthCreateRecord {
|
||||
// 查询所有的权限列表
|
||||
export function queryAuthList(data: any) {
|
||||
return axios({
|
||||
url: '/api/rest/auth', // 路径
|
||||
url: '/api/rest/authority', // 路径
|
||||
method: 'get',
|
||||
params: data, // 参数
|
||||
})
|
||||
@ -29,27 +29,27 @@ export function queryAuthList(data: any) {
|
||||
|
||||
// 切换启用状态
|
||||
export function enabled(id: string) {
|
||||
return axios.patch(`/api/rest/auth/toggle/${id}`);
|
||||
return axios.patch(`/api/rest/authority/toggle/${id}`);
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function remove(id: string) {
|
||||
return axios.delete(`/api/rest/auth/${id}`);
|
||||
return axios.delete(`/api/rest/authority/${id}`);
|
||||
}
|
||||
|
||||
// 添加
|
||||
export function create(data: AuthCreateRecord) {
|
||||
return axios.post(`/api/rest/auth`, data);
|
||||
return axios.post(`/api/rest/authority`, data);
|
||||
}
|
||||
|
||||
// 更新
|
||||
export function update(data: AuthRecord) {
|
||||
return axios.patch(`/api/rest/auth/${data.id}`, data);
|
||||
return axios.patch(`/api/rest/authority/${data.id}`, data);
|
||||
}
|
||||
|
||||
// 获取详情
|
||||
export function getDetail(id: string) {
|
||||
return axios.get<AuthRecord>(`/api/rest/auth/${id}`);
|
||||
return axios.get<AuthRecord>(`/api/rest/authority/${id}`);
|
||||
}
|
||||
|
||||
// export function queryRoles(params?: ListParams<Partial<RoleRecord>>) {
|
||||
|
||||
@ -2,17 +2,13 @@
|
||||
<div class="navbar">
|
||||
<div class="left-side">
|
||||
<a-space>
|
||||
<img style="height: 24px" alt="logo" src="../../image/票据服务.png" />
|
||||
<img style="height: 24px" alt="logo" src="../../assets/objectNetwork.png" />
|
||||
<a-typography-title
|
||||
:style="{ margin: 0, fontSize: '18px' }"
|
||||
:heading="5"
|
||||
@click="
|
||||
{
|
||||
router.push({ name: 'Workplace' });
|
||||
}
|
||||
"
|
||||
@click="$router.push({ name: 'Workplace' })"
|
||||
>
|
||||
{{ $t('ticket.manage.system') }}
|
||||
物联网网关系统
|
||||
</a-typography-title>
|
||||
<icon-menu-fold
|
||||
v-if="!topMenu && appStore.device === 'mobile'"
|
||||
@ -26,21 +22,47 @@
|
||||
</div>
|
||||
<ul class="right-side">
|
||||
<li>
|
||||
<a-tooltip content="消息中心">
|
||||
<a-tooltip content="公告通知">
|
||||
<a-button
|
||||
class="nav-btn"
|
||||
type="outline"
|
||||
:shape="'circle'"
|
||||
@click="$router.push({ name: 'notice' })"
|
||||
@click="$router.push({ name: 'Bulletins' })"
|
||||
>
|
||||
<template #icon>
|
||||
<a-badge :count="9" dot :offset="[2, -2]">
|
||||
<icon-message />
|
||||
</a-badge>
|
||||
<icon-message />
|
||||
</template>
|
||||
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</li>
|
||||
<li>
|
||||
<a-tooltip content="消息通知">
|
||||
<div class="message-box-trigger">
|
||||
<a-badge :count="9" dot>
|
||||
<a-button
|
||||
class="nav-btn"
|
||||
type="outline"
|
||||
:shape="'circle'"
|
||||
@click="setPopoverVisible"
|
||||
>
|
||||
<icon-notification />
|
||||
</a-button>
|
||||
</a-badge>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-popover
|
||||
trigger="click"
|
||||
:arrow-style="{ display: 'none' }"
|
||||
:content-style="{ padding: 0, minWidth: '400px' }"
|
||||
content-class="message-popover"
|
||||
>
|
||||
<div ref="refBtn" class="ref-btn"></div>
|
||||
<template #content>
|
||||
<message-box />
|
||||
</template>
|
||||
</a-popover>
|
||||
</li>
|
||||
<li>
|
||||
<a-tooltip :content="$t('settings.language')">
|
||||
<a-button
|
||||
@ -133,9 +155,6 @@
|
||||
</li>
|
||||
<li>
|
||||
<a-dropdown trigger="click">
|
||||
<a-button style="margin-right: 20px" status="normal">{{
|
||||
userStore.nickName
|
||||
}}</a-button>
|
||||
<a-avatar
|
||||
:size="32"
|
||||
:style="{ marginRight: '8px', cursor: 'pointer' }"
|
||||
@ -145,7 +164,6 @@
|
||||
alt="avatar"
|
||||
:src="'/api/rest/attachment/' + avatar"
|
||||
/>
|
||||
<img v-else :src="userIcon" alt="" />
|
||||
</a-avatar>
|
||||
<template #content>
|
||||
<a-doption>
|
||||
@ -182,6 +200,7 @@ import Menu from '@/components/menu/index.vue';
|
||||
import userIcon from '@/assets/images/user-circle.png';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { clearToken } from '@/utils/auth';
|
||||
import messageBox from '@/components/message-box/index.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const appStore = useAppStore();
|
||||
@ -208,8 +227,16 @@ const isDark = useDark({
|
||||
appStore.toggleTheme(dark);
|
||||
},
|
||||
});
|
||||
const refBtn = ref();
|
||||
const toggleTheme = useToggle(isDark);
|
||||
|
||||
const setPopoverVisible = () => {
|
||||
const event = new MouseEvent('click', {
|
||||
view: window,
|
||||
bubbles: true,
|
||||
cancelable: true,
|
||||
});
|
||||
refBtn.value.dispatchEvent(event);
|
||||
};
|
||||
const handleToggleTheme = () => {
|
||||
toggleTheme();
|
||||
};
|
||||
|
||||
@ -10,26 +10,26 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
import { useUserStore } from '@/store';
|
||||
import { computed } from 'vue';
|
||||
import { useUserStore } from '@/store';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userInfo = computed(() => {
|
||||
return {
|
||||
name: userStore.username,
|
||||
};
|
||||
});
|
||||
const userStore = useUserStore();
|
||||
const userInfo = computed(() => {
|
||||
return {
|
||||
name: userStore.name,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.banner {
|
||||
width: 100%;
|
||||
padding: 20px 20px 0 20px;
|
||||
background-color: var(--color-bg-2);
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.banner {
|
||||
width: 100%;
|
||||
padding: 20px 20px 0 20px;
|
||||
background-color: var(--color-bg-2);
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
:deep(.arco-icon-home) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
:deep(.arco-icon-home) {
|
||||
margin-right: 6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,238 +1,131 @@
|
||||
<template>
|
||||
<div style="width: 100%">
|
||||
<a-grid :cols="24" :row-gap="16" class="panel">
|
||||
<a-grid-item
|
||||
class="panel-col"
|
||||
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
|
||||
>
|
||||
<a-space @click="to('PASS')">
|
||||
<a-avatar :size="54" class="col-avatar">
|
||||
<img
|
||||
alt="avatar"
|
||||
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
|
||||
/>
|
||||
</a-avatar>
|
||||
<a-statistic
|
||||
:title="$t('workplace.pass')"
|
||||
:value="formData.pass || 0"
|
||||
:value-from="0"
|
||||
show-group-separator
|
||||
>
|
||||
<template #suffix>
|
||||
<span class="unit">{{ $t('workplace.pecs') }}</span>
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-space>
|
||||
</a-grid-item>
|
||||
<a-grid-item
|
||||
class="panel-col"
|
||||
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
|
||||
>
|
||||
<a-space @click="to('FAILED')">
|
||||
<a-avatar :size="54" class="col-avatar">
|
||||
<img
|
||||
alt="avatar"
|
||||
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image"
|
||||
/>
|
||||
</a-avatar>
|
||||
<a-statistic
|
||||
:title="$t('workplace.notPass')"
|
||||
:value="formData.notPass || 0"
|
||||
:value-from="0"
|
||||
show-group-separator
|
||||
>
|
||||
<template #suffix>
|
||||
<span class="unit">{{ $t('workplace.pecs') }}</span>
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-space>
|
||||
</a-grid-item>
|
||||
<a-grid-item
|
||||
class="panel-col"
|
||||
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
|
||||
>
|
||||
<a-space @click="to('EXAMINE')">
|
||||
<a-avatar :size="54" class="col-avatar">
|
||||
<img
|
||||
alt="avatar"
|
||||
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image"
|
||||
/>
|
||||
</a-avatar>
|
||||
<a-statistic
|
||||
:title="$t('workplace.notAudit')"
|
||||
:value="formData.notAudit || 0"
|
||||
:value-from="0"
|
||||
show-group-separator
|
||||
>
|
||||
<template #suffix>
|
||||
<span class="unit">{{ $t('workplace.pecs') }}</span>
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-space>
|
||||
</a-grid-item>
|
||||
<a-grid-item
|
||||
v-if="userStore.permissions !== 'auditor'"
|
||||
class="panel-col"
|
||||
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
|
||||
style="border-right: none"
|
||||
>
|
||||
<a-space @click="to('SUBMIT')">
|
||||
<a-avatar :size="54" class="col-avatar">
|
||||
<img
|
||||
alt="avatar"
|
||||
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
|
||||
/>
|
||||
</a-avatar>
|
||||
<a-statistic
|
||||
v-model="formData.notFiled"
|
||||
:title="$t('workplace.notFiled')"
|
||||
:value="formData.notFiled || 0"
|
||||
:value-from="0"
|
||||
show-group-separator
|
||||
>
|
||||
<template #suffix>
|
||||
<span class="unit">{{ $t('workplace.pecs') }}</span>
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-space>
|
||||
</a-grid-item>
|
||||
<a-grid-item :span="24">
|
||||
<a-divider class="panel-border" />
|
||||
</a-grid-item>
|
||||
</a-grid>
|
||||
<a-card :bordered="false">
|
||||
<a-space id="TicketEcharts" style="width: 98%; height: 400px"></a-space>
|
||||
</a-card>
|
||||
</div>
|
||||
<a-grid :cols="24" :row-gap="16" class="panel">
|
||||
<a-grid-item
|
||||
class="panel-col"
|
||||
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
|
||||
>
|
||||
<a-space>
|
||||
<a-avatar :size="54" class="col-avatar">
|
||||
<img
|
||||
alt="avatar"
|
||||
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
|
||||
/>
|
||||
</a-avatar>
|
||||
<a-statistic
|
||||
:title="$t('workplace.onlineContent')"
|
||||
:value="373.5"
|
||||
:precision="1"
|
||||
:value-from="0"
|
||||
animation
|
||||
show-group-separator
|
||||
>
|
||||
<template #suffix>
|
||||
W+ <span class="unit">{{ $t('workplace.pecs') }}</span>
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-space>
|
||||
</a-grid-item>
|
||||
<a-grid-item
|
||||
class="panel-col"
|
||||
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
|
||||
>
|
||||
<a-space>
|
||||
<a-avatar :size="54" class="col-avatar">
|
||||
<img
|
||||
alt="avatar"
|
||||
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image"
|
||||
/>
|
||||
</a-avatar>
|
||||
<a-statistic
|
||||
:title="$t('workplace.putIn')"
|
||||
:value="368"
|
||||
:value-from="0"
|
||||
animation
|
||||
show-group-separator
|
||||
>
|
||||
<template #suffix>
|
||||
<span class="unit">{{ $t('workplace.pecs') }}</span>
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-space>
|
||||
</a-grid-item>
|
||||
<a-grid-item
|
||||
class="panel-col"
|
||||
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
|
||||
>
|
||||
<a-space>
|
||||
<a-avatar :size="54" class="col-avatar">
|
||||
<img
|
||||
alt="avatar"
|
||||
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image"
|
||||
/>
|
||||
</a-avatar>
|
||||
<a-statistic
|
||||
:title="$t('workplace.newDay')"
|
||||
:value="8874"
|
||||
:value-from="0"
|
||||
animation
|
||||
show-group-separator
|
||||
>
|
||||
<template #suffix>
|
||||
<span class="unit">{{ $t('workplace.pecs') }}</span>
|
||||
</template>
|
||||
</a-statistic>
|
||||
</a-space>
|
||||
</a-grid-item>
|
||||
<a-grid-item
|
||||
class="panel-col"
|
||||
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
|
||||
style="border-right: none"
|
||||
>
|
||||
<a-space>
|
||||
<a-avatar :size="54" class="col-avatar">
|
||||
<img
|
||||
alt="avatar"
|
||||
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
|
||||
/>
|
||||
</a-avatar>
|
||||
<a-statistic
|
||||
:title="$t('workplace.newFromYesterday')"
|
||||
:value="2.8"
|
||||
:precision="1"
|
||||
:value-from="0"
|
||||
animation
|
||||
>
|
||||
<template #suffix> % <icon-caret-up class="up-icon" /> </template>
|
||||
</a-statistic>
|
||||
</a-space>
|
||||
</a-grid-item>
|
||||
<a-grid-item :span="24">
|
||||
<a-divider class="panel-border" />
|
||||
</a-grid-item>
|
||||
</a-grid>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useTicketStore, useUserStore } from '@/store';
|
||||
import { onMounted, ref } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import router from '@/router';
|
||||
|
||||
const { t } = useI18n();
|
||||
const ticketStore = useTicketStore();
|
||||
const userStore = useUserStore();
|
||||
const formData = ref({
|
||||
notAudit: undefined,
|
||||
notFiled: undefined,
|
||||
notPass: undefined,
|
||||
pass: undefined,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await ticketStore.getChart();
|
||||
type EChartsOption = echarts.EChartsOption;
|
||||
const chartDom = document.getElementById('TicketEcharts');
|
||||
const myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
title: {
|
||||
text: t('workplace.chart'),
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
data: [
|
||||
t('workplace.pass'),
|
||||
t('workplace.notPass'),
|
||||
t('workplace.notAudit'),
|
||||
],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: res.data.dates,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: t('workplace.pass'),
|
||||
type: 'line',
|
||||
data: res.data.status2Counts,
|
||||
},
|
||||
{
|
||||
name: t('workplace.notPass'),
|
||||
type: 'line',
|
||||
data: res.data.status3Counts,
|
||||
},
|
||||
{
|
||||
name: t('workplace.notAudit'),
|
||||
type: 'line',
|
||||
data: res.data.status1Counts,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
});
|
||||
|
||||
const getHomeData = async (params: {
|
||||
auditorId: number | undefined;
|
||||
userId: number | string | undefined;
|
||||
}) => {
|
||||
if (userStore.permissions === 'admin') {
|
||||
params.userId = '';
|
||||
} else if (userStore.permissions === 'auditor') {
|
||||
params.auditorId = userStore.id;
|
||||
} else if (userStore.permissions === 'user') {
|
||||
params.userId = userStore.id;
|
||||
}
|
||||
|
||||
ticketStore.getHome(params).then((res) => {
|
||||
formData.value = res.data;
|
||||
});
|
||||
};
|
||||
|
||||
const to = (key: string) => {
|
||||
router.push({
|
||||
name: 'TicketManage',
|
||||
query: {
|
||||
status: key,
|
||||
},
|
||||
});
|
||||
};
|
||||
getHomeData({});
|
||||
</script>
|
||||
<script lang="ts" setup></script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.arco-grid.panel {
|
||||
margin-bottom: 0;
|
||||
padding: 16px 20px 0 20px;
|
||||
}
|
||||
.panel-col {
|
||||
padding-left: 43px;
|
||||
border-right: 1px solid rgb(var(--gray-2));
|
||||
}
|
||||
.col-avatar {
|
||||
margin-right: 12px;
|
||||
background-color: var(--color-fill-2);
|
||||
}
|
||||
.up-icon {
|
||||
color: rgb(var(--red-6));
|
||||
}
|
||||
.unit {
|
||||
margin-left: 8px;
|
||||
color: rgb(var(--gray-8));
|
||||
font-size: 12px;
|
||||
}
|
||||
:deep(.panel-border) {
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
.arco-grid.panel {
|
||||
margin-bottom: 0;
|
||||
padding: 16px 20px 0 20px;
|
||||
}
|
||||
.panel-col {
|
||||
padding-left: 43px;
|
||||
border-right: 1px solid rgb(var(--gray-2));
|
||||
}
|
||||
.col-avatar {
|
||||
margin-right: 12px;
|
||||
background-color: var(--color-fill-2);
|
||||
}
|
||||
.up-icon {
|
||||
color: rgb(var(--red-6));
|
||||
}
|
||||
.unit {
|
||||
margin-left: 8px;
|
||||
color: rgb(var(--gray-8));
|
||||
font-size: 12px;
|
||||
}
|
||||
:deep(.panel-border) {
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,105 +1,138 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="left-side">
|
||||
<div class="panel"> <Banner /> <DataPanel /></div>
|
||||
<div class="panel">
|
||||
<Banner />
|
||||
<DataPanel />
|
||||
</div>
|
||||
<a-grid :cols="24" :col-gap="16" :row-gap="16" style="margin-top: 16px">
|
||||
<a-grid-item
|
||||
:span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
|
||||
>
|
||||
</a-grid-item>
|
||||
<a-grid-item
|
||||
:span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }"
|
||||
>
|
||||
</a-grid-item>
|
||||
</a-grid>
|
||||
</div>
|
||||
<div class="right-side">
|
||||
<a-grid :cols="24" :row-gap="16">
|
||||
<a-grid-item :span="24">
|
||||
<div class="panel moduler-wrap">
|
||||
<QuickOperation />
|
||||
<RecentlyVisited />
|
||||
</div>
|
||||
</a-grid-item>
|
||||
<a-grid-item class="panel" :span="24">
|
||||
</a-grid-item>
|
||||
<a-grid-item class="panel" :span="24">
|
||||
<Announcement />
|
||||
</a-grid-item>
|
||||
<a-grid-item class="panel" :span="24">
|
||||
</a-grid-item>
|
||||
</a-grid>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Banner from './components/banner.vue';
|
||||
import DataPanel from './components/data-panel.vue';
|
||||
import Banner from './components/banner.vue';
|
||||
import DataPanel from './components/data-panel.vue';
|
||||
import RecentlyVisited from './components/recently-visited.vue';
|
||||
import QuickOperation from './components/quick-operation.vue';
|
||||
import Announcement from './components/announcement.vue';
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component
|
||||
};
|
||||
export default {
|
||||
name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
background-color: var(--color-fill-2);
|
||||
padding: 16px 20px;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.right-side {
|
||||
width: 280px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background-color: var(--color-bg-2);
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
:deep(.panel-border) {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid rgb(var(--gray-2));
|
||||
}
|
||||
.moduler-wrap {
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-bg-2);
|
||||
:deep(.text) {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: rgb(var(--gray-8));
|
||||
.container {
|
||||
background-color: var(--color-fill-2);
|
||||
padding: 16px 20px;
|
||||
padding-bottom: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
:deep(.wrapper) {
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
.text {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.icon {
|
||||
color: rgb(var(--arcoblue-6));
|
||||
background-color: #e8f3ff;
|
||||
}
|
||||
.text {
|
||||
color: rgb(var(--arcoblue-6));
|
||||
}
|
||||
}
|
||||
.left-side {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:deep(.icon) {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 4px;
|
||||
color: rgb(var(--dark-gray-1));
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
background-color: rgb(var(--gray-1));
|
||||
.right-side {
|
||||
width: 280px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background-color: var(--color-bg-2);
|
||||
border-radius: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
:deep(.panel-border) {
|
||||
margin-bottom: 0;
|
||||
border-bottom: 1px solid rgb(var(--gray-2));
|
||||
}
|
||||
.moduler-wrap {
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-bg-2);
|
||||
:deep(.text) {
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: rgb(var(--gray-8));
|
||||
}
|
||||
|
||||
:deep(.wrapper) {
|
||||
margin-bottom: 8px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:last-child {
|
||||
.text {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.icon {
|
||||
color: rgb(var(--arcoblue-6));
|
||||
background-color: #e8f3ff;
|
||||
}
|
||||
.text {
|
||||
color: rgb(var(--arcoblue-6));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.icon) {
|
||||
display: inline-block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-bottom: 4px;
|
||||
color: rgb(var(--dark-gray-1));
|
||||
line-height: 32px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
background-color: rgb(var(--gray-1));
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// responsive
|
||||
.mobile {
|
||||
.container {
|
||||
display: block;
|
||||
// responsive
|
||||
.mobile {
|
||||
.container {
|
||||
display: block;
|
||||
}
|
||||
.right-side {
|
||||
// display: none;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
.right-side {
|
||||
// display: none;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -62,7 +62,7 @@
|
||||
});
|
||||
const { t } = useI18n();
|
||||
const modalTitle = computed(() => {
|
||||
return props.isCreate ? t('Create Auth Info') : t('Edit Auth Info');
|
||||
return props.isCreate ? '创建权限' : '编辑权限';
|
||||
});
|
||||
const { visible, setVisible } = useVisible(false);
|
||||
const createEditRef = ref<FormInstance>();
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<Breadcrumb :items="['menu.system', '权限管理']" />
|
||||
<Breadcrumb :items="['系统管理', '权限管理']" />
|
||||
<a-card class="general-card" title=" ">
|
||||
<a-row>
|
||||
<a-col :flex="1">
|
||||
@ -21,13 +21,13 @@
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
{{ $t('searchTable.form.search') }}
|
||||
查询
|
||||
</a-button>
|
||||
<a-button @click="reset">
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
{{ $t('searchTable.form.reset') }}
|
||||
重置
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
@ -40,13 +40,13 @@
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :span="12" style="display: flex; align-items: center; justify-content: end">
|
||||
<a-tooltip :content="$t('searchTable.actions.refresh')">
|
||||
<a-tooltip content='刷新'>
|
||||
<div class="action-icon" @click="fetchData">
|
||||
<icon-refresh size="18" />
|
||||
</div>
|
||||
</a-tooltip>
|
||||
<a-dropdown @select="handleSelectDensity">
|
||||
<a-tooltip :content="$t('searchTable.actions.density')">
|
||||
<a-tooltip content='密度'>
|
||||
<div class="action-icon"><icon-line-height size="18" /></div>
|
||||
</a-tooltip>
|
||||
<template #content>
|
||||
@ -56,7 +56,7 @@
|
||||
</a-doption>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<a-tooltip :content="$t('searchTable.actions.columnSetting')">
|
||||
<a-tooltip content='列设置'>
|
||||
<a-popover trigger="click" position="bl" @popup-visible-change="popupVisibleChange">
|
||||
<div class="action-icon"><icon-settings size="18" /></div>
|
||||
<template #content>
|
||||
@ -81,8 +81,26 @@
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<AuthTable :data="renderData" :pagination="pagination" :loading="loading" @pageChange="onPageChange"
|
||||
:columns="(cloneColumns as TableColumnData[])" @search="search" />
|
||||
<a-table row-key="id" :loading="loading" :pagination="false" :columns="(cloneColumns as TableColumnData[])" :data="renderData" :bordered="false"
|
||||
:size="sizeof" style="margin-bottom: 40px" @pageChange="onPageChange">
|
||||
<template #index="{ rowIndex }">
|
||||
{{ rowIndex + 1 }}
|
||||
</template>
|
||||
<template #enabled="{ record }">
|
||||
<a-switch :model-value="record.enabled" :checked-value="true" :unchecked-value="false"
|
||||
@change="enabledStatus(record)" />
|
||||
</template>
|
||||
<template #operations="{ record }">
|
||||
<!-- 编辑 -->
|
||||
<AuthEdit ref="editRef" :prem="record" :is-create="false" @refresh="fetchData" />
|
||||
<a-popconfirm content='确认删除此权限?' type="error" @ok="handleDelete(record)">
|
||||
<a-button type="outline" size="small" status="danger" style="padding: 7px">
|
||||
<template #icon><icon-delete /></template>
|
||||
删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination style="float: right; position: relative; right: 1px; bottom: 25px" :total="pagination.total"
|
||||
show-total show-jumper show-page-size @page-size-change="onSizeChange" @change="onPageChange" />
|
||||
</a-card>
|
||||
@ -90,8 +108,9 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, computed } from 'vue';
|
||||
// import { useI18n } from 'vue-i18n';
|
||||
import { ref, watch, computed, onMounted } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import { useAuthStore } from '@/store';
|
||||
import { AuthRecord } from '@/api/authority';
|
||||
@ -99,9 +118,7 @@ import { Pagination } from '@/types/global';
|
||||
import useTableOption from '@/hooks/table-option';
|
||||
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
|
||||
import AuthEdit from './components/auth-edit.vue';
|
||||
import AuthTable from './components/auth-table.vue';
|
||||
|
||||
// const { t } = useI18n();
|
||||
const {loading, setLoading} = useLoading();
|
||||
const authStore = useAuthStore();
|
||||
const renderData = ref<AuthRecord[]>([]);
|
||||
@ -145,14 +162,6 @@ const columns = computed<TableColumnData[]>(() => [
|
||||
title: "备注",
|
||||
dataIndex: 'remark',
|
||||
},
|
||||
{
|
||||
title: "创建时间",
|
||||
dataIndex: 'createTime',
|
||||
slotName: 'createTime',
|
||||
sortable: {
|
||||
sortDirections: ['ascend', 'descend'],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
dataIndex: 'enabled',
|
||||
@ -175,7 +184,6 @@ const fetchData = async (params: any) => {
|
||||
pagination.total = res.data.total;
|
||||
} catch (err) {
|
||||
// you can report use errorHandler or other
|
||||
console.log(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
@ -188,7 +196,10 @@ const search = () => {
|
||||
...formModel.value,
|
||||
} as unknown as any);
|
||||
};
|
||||
search();
|
||||
|
||||
onMounted(() => {
|
||||
search();
|
||||
})
|
||||
// 分页发生改变
|
||||
const onPageChange = (current: number) => {
|
||||
pagination.page = current;
|
||||
@ -207,6 +218,41 @@ const reset = () => {
|
||||
formModel.value = generateFormModel();
|
||||
};
|
||||
|
||||
// 是否启用
|
||||
const enabledStatus = async (record: any) => {
|
||||
record.enabled = !record.enabled;
|
||||
const res = await authStore.enabledAuth(record.id);
|
||||
if (res.status === 200) {
|
||||
Message.success({
|
||||
content: '修改成功',
|
||||
duration: 3 * 1000,
|
||||
});
|
||||
search();
|
||||
} else {
|
||||
Message.error({
|
||||
content: '修改失败',
|
||||
duration: 3 * 1000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 删除
|
||||
const handleDelete = async (record: AuthRecord) => {
|
||||
const res = await authStore.removeAuth(record.id);
|
||||
if (res.status === 200) {
|
||||
Message.success({
|
||||
content: '删除成功',
|
||||
duration: 5 * 1000,
|
||||
});
|
||||
search();
|
||||
} else {
|
||||
Message.error({
|
||||
content: '删除失败',
|
||||
duration: 3 * 1000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
watch(() => columns.value, deepClone, { deep: true, immediate: true });
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user