feat: 权限管理
This commit is contained in:
easy
parent
7f321213a8
commit
e41f19ca69
|
|
@ -1,8 +0,0 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 设备数量
|
||||
export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
|
||||
// 产品数量
|
||||
export const getProductCount_api = (data) => server.post(`/device-product/_count`, data);
|
||||
// 查询产品列表
|
||||
export const getProductList_api = (data) => server.get(`/device/product/_query/no-paging?paging=false`, data);
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 当前登录用户权限信息
|
||||
export const getMe_api = () => server.get(`/authorize/me`);
|
||||
// 设置登录用户选择的页面
|
||||
export const setView_api = (data:object) => server.patch(`/user/settings/view/user`, data);
|
||||
// 当前登录用户选择的页面
|
||||
export const getView_api = () => server.get(`/user/settings/view/user`);
|
||||
|
||||
// 设备数量
|
||||
export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
|
||||
// 产品数量
|
||||
export const getProductCount_api = (data:object) => server.post(`/device-product/_count`, data);
|
||||
// 查询产品列表
|
||||
export const getProductList_api = (data:object) => server.get(`/device/product/_query/no-paging?paging=false`, data);
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 获取权限列表
|
||||
export const getPermission_api = (data:object) => server.post(`/permission/_query/`,data);
|
||||
// 修改权限信息
|
||||
export const editPermission_api = (data:object) => server.patch(`/permission`,data);
|
||||
|
|
@ -109,6 +109,10 @@ export default [
|
|||
path:'/system/Role/detail/:id',
|
||||
component: ()=>import('@/views/system/Role/Detail/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/system/Permission',
|
||||
component: ()=>import('@/views/system/Permission/index.vue')
|
||||
},
|
||||
// 初始化
|
||||
{
|
||||
path: '/init-home',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import moment from "moment";
|
||||
import { LocalStore } from "./comm";
|
||||
import { TOKEN_KEY } from "./variable";
|
||||
import {SystemConst} from './consts';
|
||||
|
||||
/**
|
||||
* 把数据下载成JSON
|
||||
|
|
@ -53,3 +54,5 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
|
|||
formElement.submit();
|
||||
document.body.removeChild(formElement);
|
||||
};
|
||||
// 是否不是community版本
|
||||
export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
|
||||
|
|
@ -7,37 +7,47 @@
|
|||
<a-col
|
||||
:span="8"
|
||||
class="select-item"
|
||||
:class="{ selected: selectId === '1' }"
|
||||
@click="selectId = '1'"
|
||||
:class="{ selected: selectValue === 'device' }"
|
||||
@click="selectValue = 'device'"
|
||||
>
|
||||
<img src="/images/home/device.png" alt="" />
|
||||
</a-col>
|
||||
<a-col
|
||||
:span="8"
|
||||
class="select-item"
|
||||
:class="{ selected: selectId === '2' }"
|
||||
@click="selectId = '2'"
|
||||
:class="{ selected: selectValue === 'ops' }"
|
||||
@click="selectValue = 'ops'"
|
||||
>
|
||||
<img src="/images/home/ops.png" alt="" />
|
||||
</a-col>
|
||||
<a-col
|
||||
:span="8"
|
||||
class="select-item"
|
||||
:class="{ selected: selectId === '3' }"
|
||||
@click="selectId = '3'"
|
||||
:class="{ selected: selectValue === 'comprehensive' }"
|
||||
@click="selectValue = 'comprehensive'"
|
||||
>
|
||||
<img src="/images/home/comprehensive.png" alt="" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-button type="primary" class="btn" @click="confirm">确定</a-button>
|
||||
<a-button type="primary" class="btn" @click="confirm"
|
||||
>确定</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const selectId = ref('1');
|
||||
import { setView_api } from '@/api/home';
|
||||
|
||||
const confirm = ()=>{}
|
||||
const emits = defineEmits(['refresh']);
|
||||
const selectValue = ref('device');
|
||||
|
||||
const confirm = () => {
|
||||
setView_api({
|
||||
name: 'view',
|
||||
content: selectValue.value,
|
||||
}).then(() => emits('refresh'));
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<div class="container">
|
||||
<div class="header"></div>
|
||||
<div class="left"></div>
|
||||
<div class="content iot-home-container">
|
||||
<!-- <InitHome /> -->
|
||||
<!-- <DeviceHome /> -->
|
||||
<!-- <DevOpsHome /> -->
|
||||
<ComprehensiveHome />
|
||||
<div class="content iot-home-container" v-loading="loading">
|
||||
<InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
|
||||
<DeviceHome v-else-if="currentView === 'device'" />
|
||||
<DevOpsHome v-else-if="currentView === 'ops'" />
|
||||
<ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -17,6 +17,39 @@ import DeviceHome from './components/DeviceHome/index.vue';
|
|||
import DevOpsHome from './components/DevOpsHome/index.vue';
|
||||
import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
|
||||
|
||||
import { isNoCommunity } from '@/utils/utils';
|
||||
import { getMe_api, getView_api } from '@/api/home';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const currentView = ref<string>('');
|
||||
const loading = ref<boolean>(true);
|
||||
|
||||
// 获取选择的视图
|
||||
const setCurrentView = () => {
|
||||
getView_api().then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
if (resp.result) currentView.value = resp.result?.content;
|
||||
else if (resp.result.username === 'admin') {
|
||||
currentView.value = 'comprehensive';
|
||||
} else currentView.value = 'init';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (isNoCommunity) {
|
||||
// 判断是否是api用户 是则跳转 否则获取选中的视图
|
||||
getMe_api().then((resp: any) => {
|
||||
if (resp && resp.status === 200) {
|
||||
const isApiUser = resp.result.dimensions.find(
|
||||
(item: any) =>
|
||||
item.type === 'api-client' || item.type.id === 'api-client',
|
||||
);
|
||||
|
||||
isApiUser ? router.push('/system/api') : setCurrentView();
|
||||
}
|
||||
});
|
||||
}else setCurrentView()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,234 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model:visible="dialog.visible"
|
||||
:title="dialog.title"
|
||||
width="1000px"
|
||||
@ok="dialog.handleOk"
|
||||
class="edit-dialog-container"
|
||||
>
|
||||
<a-form ref="formRef" :model="form.data" layout="vertical">
|
||||
<a-form-item
|
||||
name="id"
|
||||
:rules="[{ required: true, message: '请输入标识' }]"
|
||||
class="question-item"
|
||||
>
|
||||
<template #label>
|
||||
<span>标识</span>
|
||||
<span class="required-icon">*</span>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>标识ID需与代码中的标识ID一致</span>
|
||||
</template>
|
||||
<question-circle-outlined style="color: #00000073" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.data.id"
|
||||
placeholder="请输入标识(ID)"
|
||||
:maxlength="64"
|
||||
:disabled="dialog.title === '编辑'"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
name="name"
|
||||
label="名称"
|
||||
:rules="[{ required: true, message: '请输入名称' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="form.data.name"
|
||||
placeholder="请输入名称"
|
||||
:maxlength="64"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<a-table
|
||||
:columns="table.columns"
|
||||
:data-source="actionTableData"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'index'">
|
||||
{{
|
||||
`#${
|
||||
(pager.current - 1) * pager.pageSize + (index + 1)
|
||||
}.`
|
||||
}}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="column.key !== 'index' && column.key !== 'act'"
|
||||
>
|
||||
<a-input v-model:value="record[column.key]" />
|
||||
</template>
|
||||
<template v-else-if="column.key === 'act'">
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="table.clickRemove(index)"
|
||||
>
|
||||
<delete-outlined />
|
||||
</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="pager">
|
||||
<a-pagination
|
||||
v-model:current="pager.current"
|
||||
:page-size="pager.pageSize"
|
||||
:total="pager.total"
|
||||
/>
|
||||
<a-select v-model:value="pager.current" style="width: 60px">
|
||||
<a-select-option v-for="(val,i) in pageArr" :value="i + 1">{{
|
||||
i + 1
|
||||
}}</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
|
||||
<a-button type="dashed" style="width: 100%" @click="table.clickAdd">
|
||||
<plus-outlined /> 添加
|
||||
</a-button>
|
||||
|
||||
<template #footer>
|
||||
<a-button key="back" @click="dialog.visible = false">取消</a-button>
|
||||
<a-button
|
||||
key="submit"
|
||||
type="primary"
|
||||
:loading="form.loading"
|
||||
@click="dialog.handleOk"
|
||||
>确定</a-button
|
||||
>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FormInstance, message } from 'ant-design-vue';
|
||||
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
|
||||
|
||||
const defaultAction = [
|
||||
{ action: 'query', name: '查询', describe: '查询' },
|
||||
{ action: 'save', name: '保存', describe: '保存' },
|
||||
{ action: 'delete', name: '删除', describe: '删除' },
|
||||
];
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
title: '',
|
||||
visible: false,
|
||||
handleOk: () => {
|
||||
formRef.value?.validate().then(() => console.log('success'));
|
||||
},
|
||||
// 控制弹窗的打开与关闭
|
||||
changeVisible: (status: boolean, defaultForm: any = {}) => {
|
||||
form.data = { name: '', description: '', ...defaultForm };
|
||||
dialog.title = defaultForm.id ? '编辑' : '新增';
|
||||
table.data = defaultForm.id ? defaultForm.actions : [...defaultAction];
|
||||
pager.total = table.data.length;
|
||||
pager.current = 1;
|
||||
dialog.visible = status;
|
||||
},
|
||||
});
|
||||
// 表单相关
|
||||
const formRef = ref<FormInstance>();
|
||||
const form = reactive({
|
||||
loading: false,
|
||||
data: {
|
||||
name: '',
|
||||
id: '',
|
||||
},
|
||||
});
|
||||
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '-',
|
||||
dataIndex: 'index',
|
||||
key: 'index',
|
||||
},
|
||||
{
|
||||
title: '操作类型',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'describe',
|
||||
key: 'describe',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'act',
|
||||
key: 'act',
|
||||
},
|
||||
],
|
||||
data: <any>[],
|
||||
clickRemove: (index: number) => {
|
||||
pager.total -= 1;
|
||||
table.data.splice(index, 1);
|
||||
|
||||
// 当删除的刚好为本页的最后一项时，返回到上一页
|
||||
if (pager.current > 1 && pager.total % pager.pageSize === 0)
|
||||
pager.current -= 1;
|
||||
},
|
||||
clickAdd: () => {
|
||||
table.data.push({});
|
||||
pager.total += 1;
|
||||
|
||||
// 当添加的项需要新加一页才能显示时，跳转到最后一页
|
||||
if (pager.total % pager.pageSize === 1) {
|
||||
pager.current = Math.ceil(pager.total / pager.pageSize);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const pager = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
const pageArr = computed(() => {
|
||||
const maxPageNum = Math.ceil(pager.total / pager.pageSize);
|
||||
return new Array(maxPageNum).fill(1);
|
||||
});
|
||||
const actionTableData = computed(() => {
|
||||
const startIndex = (pager.current - 1) * pager.pageSize;
|
||||
const endIndex = Math.min(
|
||||
pager.current * pager.pageSize,
|
||||
table.data.length,
|
||||
);
|
||||
console.log(startIndex, endIndex);
|
||||
|
||||
return table.data.slice(startIndex, endIndex);
|
||||
});
|
||||
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.edit-dialog-container {
|
||||
.question-item {
|
||||
:deep(.ant-form-item-required) {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
.required-icon {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
margin-left: 2px;
|
||||
color: #ff4d4f;
|
||||
font-size: 14px;
|
||||
font-family: SimSun, sans-serif;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<span class="status-label-container">
|
||||
<i
|
||||
class="circle"
|
||||
:style="{ background: props.statusValue ? '#52c41a' : '#ff4d4f' }"
|
||||
></i>
|
||||
<span>{{ props.statusValue ? '启用' : '禁用' }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
statusValue: number;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.status-label-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.circle {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<template>
|
||||
<div class="permission-container">
|
||||
<Search :columns="query.columns" />
|
||||
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:request="getPermission_api"
|
||||
model="TABLE"
|
||||
:params="query.params"
|
||||
:defaultParams="{ sorts: [{ name: 'id', order: 'asc' }] }"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button type="primary" @click="table.openDialog(undefined)"
|
||||
><plus-outlined />新增</a-button
|
||||
>
|
||||
</template>
|
||||
<template #status="slotProps">
|
||||
<StatusLabel :status-value="slotProps.status" />
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip>
|
||||
<template #title>编辑</template>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="table.openDialog(slotProps)"
|
||||
>
|
||||
<edit-outlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<a-popconfirm
|
||||
:title="`确定要${
|
||||
slotProps.status ? '禁用' : '启用'
|
||||
}吗？`"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="table.changeStatus(slotProps)"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.status ? '禁用' : '启用'
|
||||
}}</template>
|
||||
<a-button style="padding: 0" type="link">
|
||||
<stop-outlined v-if="slotProps.status" />
|
||||
<play-circle-outlined v-else />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
|
||||
<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"
|
||||
:disabled="slotProps.status"
|
||||
>
|
||||
<delete-outlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
|
||||
<div class="dialogs">
|
||||
<EditDialog ref="editDialogRef" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import EditDialog from './components/EditDialog.vue';
|
||||
import StatusLabel from './components/StatusLabel.vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
StopOutlined,
|
||||
PlayCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { getPermission_api, editPermission_api } from '@/api/system/permission';
|
||||
|
||||
const editDialogRef = ref(); // 新增弹窗实例
|
||||
const tableRef = ref<Record<string, any>>({}); // 表格实例
|
||||
|
||||
// 筛选
|
||||
const query = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '标识',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
ellipsis: true,
|
||||
fixed: 'left',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
rename: 'status',
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
label: '启用',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
params: {},
|
||||
});
|
||||
|
||||
// 表格
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '标识',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
openDialog: (row: object | undefined = {}) => {
|
||||
editDialogRef.value.openDialog(true, row);
|
||||
},
|
||||
changeStatus: (row: any) => {
|
||||
const params = {
|
||||
...row,
|
||||
status: row.status ? 0 : 1,
|
||||
};
|
||||
editPermission_api(params).then(() => {
|
||||
message.success('操作成功');
|
||||
tableRef.value.reload();
|
||||
});
|
||||
},
|
||||
clickDel: (row: any) => {
|
||||
// delRole_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>
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="details-container">
|
||||
{{ route.params.id }}
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="权限分配"><Permiss /></a-tab-pane>
|
||||
<a-tab-pane key="2" tab="用户管理"><User /></a-tab-pane>
|
||||
|
|
|
|||
|
|
@ -44,10 +44,7 @@
|
|||
<script setup lang="ts">
|
||||
import { FormInstance, message } from 'ant-design-vue';
|
||||
import { saveRole_api } from '@/api/system/role';
|
||||
const router = useRouter()
|
||||
const props = defineProps({
|
||||
open: Number,
|
||||
});
|
||||
const router = useRouter();
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
|
|
@ -59,10 +56,15 @@ const dialog = reactive({
|
|||
if (resp.status === 200) {
|
||||
message.success('操作成功');
|
||||
dialog.visible = false;
|
||||
router.push(`/system/Role/detail/${resp.result.id}`)
|
||||
router.push(`/system/Role/detail/${resp.result.id}`);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 控制弹窗的打开与关闭
|
||||
changeVisible: (status: boolean, defaultForm: object={}) => {
|
||||
dialog.visible = status;
|
||||
form.data = { name: '', description: '', ...defaultForm };
|
||||
},
|
||||
});
|
||||
// 表单相关
|
||||
const formRef = ref<FormInstance>();
|
||||
|
|
@ -74,18 +76,12 @@ const form = reactive({
|
|||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
() => {
|
||||
// 重置表单
|
||||
form.data = {
|
||||
name: '',
|
||||
description: '',
|
||||
};
|
||||
formRef.value?.resetFields();
|
||||
dialog.visible = true;
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
</JTable>
|
||||
|
||||
<div class="dialogs">
|
||||
<AddDialog :open="dialog.openAdd" />
|
||||
<AddDialog ref="addDialogRef" />
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
|
@ -59,8 +59,8 @@ import {
|
|||
import AddDialog from './components/AddDialog.vue';
|
||||
import { getRoleList_api, delRole_api } from '@/api/system/role';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const router = useRouter()
|
||||
const addDialogRef = ref(); // 新增弹窗实例
|
||||
const router = useRouter();
|
||||
// 筛选
|
||||
const query = reactive({
|
||||
columns: [
|
||||
|
|
@ -122,24 +122,21 @@ const table = reactive({
|
|||
],
|
||||
tableData: [],
|
||||
clickAdd: () => {
|
||||
dialog.openAdd += 1;
|
||||
addDialogRef.value.openDialog(true, {})
|
||||
},
|
||||
clickDel: (row: any) => {
|
||||
delRole_api(row.id).then((resp:any)=>{
|
||||
if(resp.status === 200){
|
||||
tableRef.value?.reload()
|
||||
message.success('操作成功!')
|
||||
delRole_api(row.id).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
tableRef.value?.reload();
|
||||
message.success('操作成功!');
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
clickEdit: (row: any) => {
|
||||
router.push(`/system/Role/detail/${row.id}`)
|
||||
router.push(`/system/Role/detail/${row.id}`);
|
||||
},
|
||||
});
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
openAdd: 0,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue