vertoryao/iot-gateway_fontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: vertoryao:6f08eda851fe502699b3910bee6a30013bb58fa2
Branches Tags
vertoryao:master
vertoryao:feature/other
vertoryao:feature/log
vertoryao:feature/device
vertoryao:feature/menu
vertoryao:feature/auth
vertoryao:feature/message
vertoryao:develop
vertoryao:feature/bulletin
vertoryao:feature/authority
...
compare: vertoryao:7386ea2a94d7743c5b344ad70349f45c2b05f8b8
Branches Tags
vertoryao:feature/other
vertoryao:feature/log
vertoryao:feature/device
vertoryao:feature/menu
vertoryao:feature/auth
vertoryao:feature/message
vertoryao:develop
vertoryao:feature/bulletin
vertoryao:feature/authority
vertoryao:master

2 Commits
6f08eda851 ... 7386ea2a94

Author SHA1 Message Date
Kven
7386ea2a94 feat(首页工作台): 新增首页工作台内容 2024-12-26 11:08:15 +08:00
Kven
92f4189810 perf(权限模块): 优化代码，修改bug 
1.修改api路径
2.优化事务代码
3.逐步去除英文展示
 2024-12-26 10:43:27 +08:00
8 changed files with 376 additions and 377 deletions
Show Stats Expand all files Collapse all files

4
index.html
View File

@ -3,9 +3,9 @@
<head> <head>
<meta charset="UTF-8" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>票据管理系统</title> <title>物联网网关系统</title>
</head> </head>
<body> <body>

12
src/api/authority.ts
View File

@ -21,7 +21,7 @@ export interface AuthRecord extends AuthCreateRecord {
// 查询所有的权限列表 // 查询所有的权限列表
export function queryAuthList(data: any) { export function queryAuthList(data: any) {
return axios({ return axios({
url: '/api/rest/auth', // 路径 url: '/api/rest/authority', // 路径
method: 'get', method: 'get',
params: data, // 参数 params: data, // 参数
}) })
@ -29,27 +29,27 @@ export function queryAuthList(data: any) {
// 切换启用状态 // 切换启用状态
export function enabled(id: string) { 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) { export function remove(id: string) {
return axios.delete(`/api/rest/auth/${id}`); return axios.delete(`/api/rest/authority/${id}`);
} }
// 添加 // 添加
export function create(data: AuthCreateRecord) { export function create(data: AuthCreateRecord) {
return axios.post(`/api/rest/auth`, data); return axios.post(`/api/rest/authority`, data);
} }
// 更新 // 更新
export function update(data: AuthRecord) { 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) { 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>>) { // export function queryRoles(params?: ListParams<Partial<RoleRecord>>) {

61
src/components/navbar/index.vue
View File

@ -2,17 +2,13 @@
<div class="navbar"> <div class="navbar">
<div class="left-side"> <div class="left-side">
<a-space> <a-space>
<img style="height: 24px" alt="logo" src="../../image/票据服务.png" /> <img style="height: 24px" alt="logo" src="../../assets/objectNetwork.png" />
<a-typography-title <a-typography-title
:style="{ margin: 0, fontSize: '18px' }" :style="{ margin: 0, fontSize: '18px' }"
:heading="5" :heading="5"
@click=" @click="$router.push({ name: 'Workplace' })"
{
router.push({ name: 'Workplace' });
}
"
> >
{{ $t('ticket.manage.system') }} 物联网网关系统
</a-typography-title> </a-typography-title>
<icon-menu-fold <icon-menu-fold
v-if="!topMenu && appStore.device === 'mobile'" v-if="!topMenu && appStore.device === 'mobile'"
@ -26,21 +22,47 @@
</div> </div>
<ul class="right-side"> <ul class="right-side">
<li> <li>
<a-tooltip content="消息中心"> <a-tooltip content="公告通知">
<a-button <a-button
class="nav-btn" class="nav-btn"
type="outline" type="outline"
:shape="'circle'" :shape="'circle'"
@click="$router.push({ name: 'notice' })" @click="$router.push({ name: 'Bulletins' })"
> >
<template #icon> <template #icon>
<a-badge :count="9" dot :offset="[2, -2]"> <icon-message />
<icon-message />
</a-badge>
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
</li> </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> <li>
<a-tooltip :content="$t('settings.language')"> <a-tooltip :content="$t('settings.language')">
<a-button <a-button
@ -133,9 +155,6 @@
</li> </li>
<li> <li>
<a-dropdown trigger="click"> <a-dropdown trigger="click">
<a-button style="margin-right: 20px" status="normal">{{
userStore.nickName
}}</a-button>
<a-avatar <a-avatar
:size="32" :size="32"
:style="{ marginRight: '8px', cursor: 'pointer' }" :style="{ marginRight: '8px', cursor: 'pointer' }"
@ -145,7 +164,6 @@
alt="avatar" alt="avatar"
:src="'/api/rest/attachment/' + avatar" :src="'/api/rest/attachment/' + avatar"
/> />
<img v-else :src="userIcon" alt="" />
</a-avatar> </a-avatar>
<template #content> <template #content>
<a-doption> <a-doption>
@ -182,6 +200,7 @@ import Menu from '@/components/menu/index.vue';
import userIcon from '@/assets/images/user-circle.png'; import userIcon from '@/assets/images/user-circle.png';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { clearToken } from '@/utils/auth'; import { clearToken } from '@/utils/auth';
import messageBox from '@/components/message-box/index.vue';
const router = useRouter(); const router = useRouter();
const appStore = useAppStore(); const appStore = useAppStore();
@ -208,8 +227,16 @@ const isDark = useDark({
appStore.toggleTheme(dark); appStore.toggleTheme(dark);
}, },
}); });
const refBtn = ref();
const toggleTheme = useToggle(isDark); const toggleTheme = useToggle(isDark);
const setPopoverVisible = () => {
const event = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true,
});
refBtn.value.dispatchEvent(event);
};
const handleToggleTheme = () => { const handleToggleTheme = () => {
toggleTheme(); toggleTheme();
}; };

34
src/views/dashboard/workplace/components/banner.vue
View File

@ -10,26 +10,26 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { computed } from 'vue'; import { computed } from 'vue';
import { useUserStore } from '@/store'; import { useUserStore } from '@/store';
const userStore = useUserStore(); const userStore = useUserStore();
const userInfo = computed(() => { const userInfo = computed(() => {
return { return {
name: userStore.username, name: userStore.name,
}; };
}); });
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.banner { .banner {
width: 100%; width: 100%;
padding: 20px 20px 0 20px; padding: 20px 20px 0 20px;
background-color: var(--color-bg-2); background-color: var(--color-bg-2);
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
:deep(.arco-icon-home) { :deep(.arco-icon-home) {
margin-right: 6px; margin-right: 6px;
} }
</style> </style>

357
src/views/dashboard/workplace/components/data-panel.vue
View File

@ -1,238 +1,131 @@
<template> <template>
<div style="width: 100%"> <a-grid :cols="24" :row-gap="16" class="panel">
<a-grid :cols="24" :row-gap="16" class="panel"> <a-grid-item
<a-grid-item class="panel-col"
class="panel-col" :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }" >
> <a-space>
<a-space @click="to('PASS')"> <a-avatar :size="54" class="col-avatar">
<a-avatar :size="54" class="col-avatar"> <img
<img alt="avatar"
alt="avatar" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image"
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/288b89194e657603ff40db39e8072640.svg~tplv-49unhts6dw-image.image" />
/> </a-avatar>
</a-avatar> <a-statistic
<a-statistic :title="$t('workplace.onlineContent')"
:title="$t('workplace.pass')" :value="373.5"
:value="formData.pass || 0" :precision="1"
:value-from="0" :value-from="0"
show-group-separator animation
> show-group-separator
<template #suffix> >
<span class="unit">{{ $t('workplace.pecs') }}</span> <template #suffix>
</template> W+ <span class="unit">{{ $t('workplace.pecs') }}</span>
</a-statistic> </template>
</a-space> </a-statistic>
</a-grid-item> </a-space>
<a-grid-item </a-grid-item>
class="panel-col" <a-grid-item
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }" 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"> <a-space>
<img <a-avatar :size="54" class="col-avatar">
alt="avatar" <img
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image" alt="avatar"
/> src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/fdc66b07224cdf18843c6076c2587eb5.svg~tplv-49unhts6dw-image.image"
</a-avatar> />
<a-statistic </a-avatar>
:title="$t('workplace.notPass')" <a-statistic
:value="formData.notPass || 0" :title="$t('workplace.putIn')"
:value-from="0" :value="368"
show-group-separator :value-from="0"
> animation
<template #suffix> show-group-separator
<span class="unit">{{ $t('workplace.pecs') }}</span> >
</template> <template #suffix>
</a-statistic> <span class="unit">{{ $t('workplace.pecs') }}</span>
</a-space> </template>
</a-grid-item> </a-statistic>
<a-grid-item </a-space>
class="panel-col" </a-grid-item>
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }" <a-grid-item
> class="panel-col"
<a-space @click="to('EXAMINE')"> :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
<a-avatar :size="54" class="col-avatar"> >
<img <a-space>
alt="avatar" <a-avatar :size="54" class="col-avatar">
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image" <img
/> alt="avatar"
</a-avatar> src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/77d74c9a245adeae1ec7fb5d4539738d.svg~tplv-49unhts6dw-image.image"
<a-statistic />
:title="$t('workplace.notAudit')" </a-avatar>
:value="formData.notAudit || 0" <a-statistic
:value-from="0" :title="$t('workplace.newDay')"
show-group-separator :value="8874"
> :value-from="0"
<template #suffix> animation
<span class="unit">{{ $t('workplace.pecs') }}</span> show-group-separator
</template> >
</a-statistic> <template #suffix>
</a-space> <span class="unit">{{ $t('workplace.pecs') }}</span>
</a-grid-item> </template>
<a-grid-item </a-statistic>
v-if="userStore.permissions !== 'auditor'" </a-space>
class="panel-col" </a-grid-item>
:span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }" <a-grid-item
style="border-right: none" class="panel-col"
> :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 12, xxl: 6 }"
<a-space @click="to('SUBMIT')"> style="border-right: none"
<a-avatar :size="54" class="col-avatar"> >
<img <a-space>
alt="avatar" <a-avatar :size="54" class="col-avatar">
src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image" <img
/> alt="avatar"
</a-avatar> src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/c8b36e26d2b9bb5dbf9b74dd6d7345af.svg~tplv-49unhts6dw-image.image"
<a-statistic />
v-model="formData.notFiled" </a-avatar>
:title="$t('workplace.notFiled')" <a-statistic
:value="formData.notFiled || 0" :title="$t('workplace.newFromYesterday')"
:value-from="0" :value="2.8"
show-group-separator :precision="1"
> :value-from="0"
<template #suffix> animation
<span class="unit">{{ $t('workplace.pecs') }}</span> >
</template> <template #suffix> % <icon-caret-up class="up-icon" /> </template>
</a-statistic> </a-statistic>
</a-space> </a-space>
</a-grid-item> </a-grid-item>
<a-grid-item :span="24"> <a-grid-item :span="24">
<a-divider class="panel-border" /> <a-divider class="panel-border" />
</a-grid-item> </a-grid-item>
</a-grid> </a-grid>
<a-card :bordered="false">
<a-space id="TicketEcharts" style="width: 98%; height: 400px"></a-space>
</a-card>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup></script>
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>
<style lang="less" scoped> <style lang="less" scoped>
.arco-grid.panel { .arco-grid.panel {
margin-bottom: 0; margin-bottom: 0;
padding: 16px 20px 0 20px; padding: 16px 20px 0 20px;
} }
.panel-col { .panel-col {
padding-left: 43px; padding-left: 43px;
border-right: 1px solid rgb(var(--gray-2)); border-right: 1px solid rgb(var(--gray-2));
} }
.col-avatar { .col-avatar {
margin-right: 12px; margin-right: 12px;
background-color: var(--color-fill-2); background-color: var(--color-fill-2);
} }
.up-icon { .up-icon {
color: rgb(var(--red-6)); color: rgb(var(--red-6));
} }
.unit { .unit {
margin-left: 8px; margin-left: 8px;
color: rgb(var(--gray-8)); color: rgb(var(--gray-8));
font-size: 12px; font-size: 12px;
} }
:deep(.panel-border) { :deep(.panel-border) {
margin: 4px 0 0 0; margin: 4px 0 0 0;
} }
</style> </style>

193
src/views/dashboard/workplace/index.vue
View File

@ -1,105 +1,138 @@
<template> <template>
<div class="container"> <div class="container">
<div class="left-side"> <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>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Banner from './components/banner.vue'; import Banner from './components/banner.vue';
import DataPanel from './components/data-panel.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>
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component name: 'Dashboard', // If you want the include property of keep-alive to take effect, you must name the component
}; };
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .container {
background-color: var(--color-fill-2); background-color: var(--color-fill-2);
padding: 16px 20px; padding: 16px 20px;
padding-bottom: 0; padding-bottom: 0;
display: flex; 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));
} }
:deep(.wrapper) { .left-side {
margin-bottom: 8px; flex: 1;
text-align: center; overflow: auto;
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) { .right-side {
display: inline-block; width: 280px;
width: 32px; margin-left: 16px;
height: 32px; }
margin-bottom: 4px;
color: rgb(var(--dark-gray-1)); .panel {
line-height: 32px; background-color: var(--color-bg-2);
font-size: 16px;
text-align: center;
background-color: rgb(var(--gray-1));
border-radius: 4px; 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>
<style lang="less" scoped> <style lang="less" scoped>
// responsive // responsive
.mobile { .mobile {
.container { .container {
display: block; 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> </style>

2
src/views/system/authority/components/auth-edit.vue
View File

@ -62,7 +62,7 @@
}); });
const { t } = useI18n(); const { t } = useI18n();
const modalTitle = computed(() => { const modalTitle = computed(() => {
return props.isCreate ? t('Create Auth Info') : t('Edit Auth Info'); return props.isCreate ? '创建权限' : '编辑权限';
}); });
const { visible, setVisible } = useVisible(false); const { visible, setVisible } = useVisible(false);
const createEditRef = ref<FormInstance>(); const createEditRef = ref<FormInstance>();

90
src/views/system/authority/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <div class="container">
<Breadcrumb :items="['menu.system', '权限管理']" /> <Breadcrumb :items="['系统管理', '权限管理']" />
<a-card class="general-card" title=" "> <a-card class="general-card" title=" ">
<a-row> <a-row>
<a-col :flex="1"> <a-col :flex="1">
@ -21,13 +21,13 @@
<template #icon> <template #icon>
<icon-search /> <icon-search />
</template> </template>
{{ $t('searchTable.form.search') }} 查询
</a-button> </a-button>
<a-button @click="reset"> <a-button @click="reset">
<template #icon> <template #icon>
<icon-refresh /> <icon-refresh />
</template> </template>
{{ $t('searchTable.form.reset') }} 重置
</a-button> </a-button>
</a-space> </a-space>
</a-col> </a-col>
@ -40,13 +40,13 @@
</a-space> </a-space>
</a-col> </a-col>
<a-col :span="12" style="display: flex; align-items: center; justify-content: end"> <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"> <div class="action-icon" @click="fetchData">
<icon-refresh size="18" /> <icon-refresh size="18" />
</div> </div>
</a-tooltip> </a-tooltip>
<a-dropdown @select="handleSelectDensity"> <a-dropdown @select="handleSelectDensity">
<a-tooltip :content="$t('searchTable.actions.density')"> <a-tooltip content='密度'>
<div class="action-icon"><icon-line-height size="18" /></div> <div class="action-icon"><icon-line-height size="18" /></div>
</a-tooltip> </a-tooltip>
<template #content> <template #content>
@ -56,7 +56,7 @@
</a-doption> </a-doption>
</template> </template>
</a-dropdown> </a-dropdown>
<a-tooltip :content="$t('searchTable.actions.columnSetting')"> <a-tooltip content='列设置'>
<a-popover trigger="click" position="bl" @popup-visible-change="popupVisibleChange"> <a-popover trigger="click" position="bl" @popup-visible-change="popupVisibleChange">
<div class="action-icon"><icon-settings size="18" /></div> <div class="action-icon"><icon-settings size="18" /></div>
<template #content> <template #content>
@ -81,8 +81,26 @@
</a-tooltip> </a-tooltip>
</a-col> </a-col>
</a-row> </a-row>
<AuthTable :data="renderData" :pagination="pagination" :loading="loading" @pageChange="onPageChange" <a-table row-key="id" :loading="loading" :pagination="false" :columns="(cloneColumns as TableColumnData[])" :data="renderData" :bordered="false"
:columns="(cloneColumns as TableColumnData[])" @search="search" /> :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" <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" /> show-total show-jumper show-page-size @page-size-change="onSizeChange" @change="onPageChange" />
</a-card> </a-card>
@ -90,8 +108,9 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch, computed } from 'vue'; import { ref, watch, computed, onMounted } from 'vue';
// import { useI18n } from 'vue-i18n'; import dayjs from 'dayjs';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading'; import useLoading from '@/hooks/loading';
import { useAuthStore } from '@/store'; import { useAuthStore } from '@/store';
import { AuthRecord } from '@/api/authority'; import { AuthRecord } from '@/api/authority';
@ -99,9 +118,7 @@ import { Pagination } from '@/types/global';
import useTableOption from '@/hooks/table-option'; import useTableOption from '@/hooks/table-option';
import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'; import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
import AuthEdit from './components/auth-edit.vue'; import AuthEdit from './components/auth-edit.vue';
import AuthTable from './components/auth-table.vue';
// const { t } = useI18n();
const {loading, setLoading} = useLoading(); const {loading, setLoading} = useLoading();
const authStore = useAuthStore(); const authStore = useAuthStore();
const renderData = ref<AuthRecord[]>([]); const renderData = ref<AuthRecord[]>([]);
@ -145,14 +162,6 @@ const columns = computed<TableColumnData[]>(() => [
title: "备注", title: "备注",
dataIndex: 'remark', dataIndex: 'remark',
}, },
{
title: "创建时间",
dataIndex: 'createTime',
slotName: 'createTime',
sortable: {
sortDirections: ['ascend', 'descend'],
},
},
{ {
title: "状态", title: "状态",
dataIndex: 'enabled', dataIndex: 'enabled',
@ -175,7 +184,6 @@ const fetchData = async (params: any) => {
pagination.total = res.data.total; pagination.total = res.data.total;
} catch (err) { } catch (err) {
// you can report use errorHandler or other // you can report use errorHandler or other
console.log(err);
} finally { } finally {
setLoading(false); setLoading(false);
} }
@ -188,7 +196,10 @@ const search = () => {
...formModel.value, ...formModel.value,
} as unknown as any); } as unknown as any);
}; };
search();
onMounted(() => {
search();
})
// 分页发生改变 // 分页发生改变
const onPageChange = (current: number) => { const onPageChange = (current: number) => {
pagination.page = current; pagination.page = current;
@ -207,6 +218,41 @@ const reset = () => {
formModel.value = generateFormModel(); 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 }); watch(() => columns.value, deepClone, { deep: true, immediate: true });
</script> </script>