0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update: 角色管理组件更换、弹窗逻辑优化

This commit is contained in:
easy 2023-03-06 16:35:59 +08:00
parent 787c85b399
commit 3039c20e2f
7 changed files with 338 additions and 372 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/views/system/Role/Detail/Permiss/index.vue
View File

@ -1,42 +1,42 @@
<template> <template>
<div class="role-permiss-container"> <div class="role-permiss-container">
<a-card> <section class="card">
<h5>基本信息</h5> <h5>基本信息</h5>
<a-form ref="formRef" class="basic-form" :model="form.data" layout="vertical"> <j-form ref="formRef" class="basic-form" :model="form.data" layout="vertical">
<a-form-item <j-form-item
name="name" name="name"
label="名称" label="名称"
:rules="[{ required: true, message: '请输入名称' }]" :rules="[{ required: true, message: '请输入名称' }]"
> >
<a-input <j-input
v-model:value="form.data.name" v-model:value="form.data.name"
placeholder="请输入角色名称" placeholder="请输入角色名称"
:maxlength="64" :maxlength="64"
/> />
</a-form-item> </j-form-item>
<a-form-item name="name" label="说明"> <j-form-item name="name" label="说明">
<a-textarea <j-textarea
v-model:value="form.data.description" v-model:value="form.data.description"
placeholder="请输入说明" placeholder="请输入说明"
:maxlength="200" :maxlength="200"
show-count show-count
/> />
</a-form-item> </j-form-item>
</a-form> </j-form>
</a-card> </section>
<a-card> <section class="card">
<h5>权限分配</h5> <h5>权限分配</h5>
<PermissTree v-model:select-items="form.menus" /> <PermissTree v-model:select-items="form.menus" />
<a-button <j-button
type="primary" type="primary"
:disabled="form.loading" :disabled="form.loading"
@click="form.clickSave" @click="form.clickSave"
style="margin-top: 24px;" style="margin-top: 24px;"
>保存</a-button >保存</j-button
> >
</a-card> </section>
</div> </div>
</template> </template>
@ -86,8 +86,10 @@ form.getForm();
<style lang="less" scoped> <style lang="less" scoped>
.role-permiss-container { .role-permiss-container {
.ant-card { .card {
margin-bottom: 24px; margin-bottom: 24px;
background-color: #fff;
padding: 24px;
h5 { h5 {
position: relative; position: relative;

253
src/views/system/Role/Detail/User/index.vue
View File

@ -1,134 +1,149 @@
<template> <template>
<a-card class="role-user-container"> <div class="role-user-container">
<Search :columns="query.columns" /> <j-advanced-search
:columns="columns"
@search="(params:any)=>queryParams = {...params}"
/>
<j-pro-table <j-pro-table
ref="tableRef" ref="tableRef"
:columns="table.columns" :columns="columns"
:request="getUserByRole_api" :request="table.getList"
model="TABLE" model="TABLE"
:defaultParams="query.params" :params="queryParams"
:rowSelection="{ :rowSelection="{
selectedRowKeys: table._selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: table.onSelectChange, onChange: (keys:string[])=>selectedRowKeys = keys,
}" }"
@cancelSelect="table.cancelSelect" @cancelSelect="selectedRowKeys = []"
size="small"
> >
<template #headerTitle> <template #headerTitle>
<a-button type="primary" @click="table.clickAdd" <j-button type="primary" @click="dialogVisible = true">
><plus-outlined />新增</a-button <AIcon type="PlusOutlined" />新增
> </j-button>
</template>
<template #status="slotProps">
<BadgeStatus
:status="slotProps.status"
:text="slotProps.status ? '正常' : '禁用'"
:statusNames="{
1: 'success',
0: 'error',
}"
></BadgeStatus>
</template> </template>
<template #action="slotProps"> <template #action="slotProps">
<a-space :size="16"> <j-space :size="16">
<a-popconfirm <PermissionButton
title="确认解绑" type="link"
ok-text="确定" :tooltip="{ title: '解绑' }"
cancel-text="取消" :pop-confirm="{
@confirm="table.clickUnBind(slotProps)" title: `确认解绑`,
onConfirm: () => table.unbind([slotProps.id]),
}"
> >
<a-tooltip> <AIcon type="DisconnectOutlined" />
<template #title>解绑</template> </PermissionButton>
<a-button style="padding: 0" type="link"> </j-space>
<disconnect-outlined />
</a-button>
</a-tooltip>
</a-popconfirm>
</a-space>
</template> </template>
</j-pro-table> </j-pro-table>
<div class="dialogs"> <AddUserDialog
<AddUserDialog :open="dialog.openAdd" @refresh="table.refresh" /> v-if="dialogVisible"
</div> v-model:visible="dialogVisible"
</a-card> :role-id="roleId"
@refresh="table.refresh"
/>
</div>
</template> </template>
<script setup lang="ts" name="RoleUser"> <script setup lang="ts" name="RoleUser">
import { PlusOutlined, DisconnectOutlined } from '@ant-design/icons-vue'; import PermissionButton from '@/components/PermissionButton/index.vue';
import AddUserDialog from '../components/AddUserDialog.vue'; import AddUserDialog from '../components/AddUserDialog.vue';
import { getUserByRole_api, unbindUser_api } from '@/api/system/role'; import { getUserByRole_api, unbindUser_api } from '@/api/system/role';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import userType from './index';
const route = useRoute(); const roleId = useRoute().params.id as string;
const roleId = route.params.id as string;
const query = reactive<userType.queryType>({ const columns = [
columns: [ {
{ title: '姓名',
title: '姓名', dataIndex: 'name',
dataIndex: 'name', key: 'name',
key: 'name', search: {
type: 'string',
}, },
{
title: '用户名',
dataIndex: 'username',
key: 'username',
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
},
],
params: {
terms: [
{
terms: [
{
column: 'id$in-dimension$role',
value: route.params.id,
},
],
},
],
}, },
}); {
title: '用户名',
dataIndex: 'username',
key: 'username',
search: {
type: 'string',
},
},
{
title: '创建时间',
dataIndex: 'createTime',
key: 'createTime',
search: {
type: 'date',
},
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
search: {
type: 'select',
options: [
{
label: '正常',
value: 1,
},
{
label: '禁用',
value: 0,
},
],
},
scopedSlots: true,
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
width: '200px',
scopedSlots: true,
},
];
const queryParams = ref({});
const tableRef = ref<Record<string, any>>({}); const tableRef = ref<Record<string, any>>({});
const table = reactive<userType.tableType>({ const selectedRowKeys = ref<string[]>([]);
columns: [ const table = {
{ getList: (oParams: any) => {
title: '姓名', const params = {
dataIndex: 'name', ...oParams,
key: 'name', terms: [
}, {
{ terms: [
title: '用户名', {
dataIndex: 'username', column: 'id$in-dimension$role',
key: 'username', value: roleId,
}, },
{ ],
title: '创建时间', },
dataIndex: 'createTime', ],
key: 'createTime', };
}, if (oParams.terms[0])
{ params.terms.unshift({
title: '状态', terms: oParams.terms[0].terms,
dataIndex: 'status', });
key: 'status', return getUserByRole_api(params);
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
scopedSlots: true,
},
],
tableData: [],
// 点击打开新增弹窗
clickAdd: () => {
dialog.openAdd += 1;
},
// 点击解绑
clickUnBind: (row: any) => {
table.unbind([row.id]);
}, },
// 批量解绑 // 批量解绑
unbind: (ids: string[] = []) => { unbind: (ids: string[] = []) => {
@ -143,20 +158,24 @@ const table = reactive<userType.tableType>({
refresh: () => { refresh: () => {
tableRef.value.reload(); tableRef.value.reload();
}, },
// 多选 };
_selectedRowKeys: [] as string[],
onSelectChange: (keys: string[]) => {
table._selectedRowKeys = [...keys];
},
cancelSelect: () => {
table._selectedRowKeys = [];
},
});
// 弹窗相关 // 弹窗相关
const dialog = reactive({ const dialogVisible = ref(false);
openAdd: 0,
});
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped>
.role-user-container {
background-color: #fff;
:deep(.ant-table-tbody) {
.ant-table-cell {
.ant-space-item {
.ant-btn-link {
padding: 0;
}
}
}
}
}
</style>

148
src/views/system/Role/Detail/components/AddUserDialog.vue
View File

@ -1,123 +1,99 @@
<template> <template>
<a-modal <j-modal
v-model:visible="dialog.visible" visible
title="新增" title="新增"
width="1000px" width="1000px"
@ok="dialog.handleOk" @ok="confirm"
@cancel="emits('update:visible', false)"
> >
<Search :columns="query.columns" type="simple" /> <j-advanced-search
:columns="columns"
type="simple"
@search="(params:any)=>queryParams = {...params}"
/>
<j-pro-table <j-pro-table
ref="tableRef" ref="tableRef"
:columns="table.columns" :columns="columns"
:request="getUserByRole_api" :request="getUserList"
model="TABLE" model="TABLE"
:params="query.params" :params="queryParams"
:rowSelection="{ :rowSelection="{
selectedRowKeys: table._selectedRowKeys, selectedRowKeys: selectedRowKeys,
onChange: table.onSelectChange, onChange: (keys:string[])=>selectedRowKeys = keys,
}" }"
@cancelSelect="table.cancelSelect" @cancelSelect="selectedRowKeys = []"
> >
</j-pro-table> </j-pro-table>
</j-modal>
<template #footer>
<a-button key="back" @click="dialog.visible = false">取消</a-button>
<a-button key="submit" type="primary" @click="dialog.handleOk"
>确定</a-button
>
</template>
</a-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getUserByRole_api, bindUser_api } from '@/api/system/role'; import { getUserByRole_api, bindUser_api } from '@/api/system/role';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
const route = useRoute();
const emits = defineEmits(['refresh']); const emits = defineEmits(['refresh', 'update:visible']);
const props = defineProps({ const props = defineProps<{
open: Number, visible: boolean;
}); roleId: string
}>();
const query = reactive({ const columns = [
columns: [ {
{ title: '姓名',
title: '姓名', dataIndex: 'name',
dataIndex: 'name', key: 'name',
key: 'name', search: {
type: 'string',
}, },
{ },
title: '用户名', {
dataIndex: 'username', title: '用户名',
key: 'username', dataIndex: 'username',
key: 'username',
search: {
type: 'string',
}, },
], },
params: { ];
const queryParams = ref({});
const selectedRowKeys = ref<string[]>([]);
const getUserList = (oParams: any) => {
const params = {
...oParams,
sorts: [{ name: 'createTime', order: 'desc' }], sorts: [{ name: 'createTime', order: 'desc' }],
terms: [ terms: [
{ {
terms: [ terms: [
{ {
column: 'id$in-dimension$role$not', column: 'id$in-dimension$role$not',
value: route.params.id, value: props.roleId,
}, },
], ],
}, },
], ],
}, };
}); if (oParams.terms[0])
const tableRef = ref<Record<string, any>>({}); params.terms.unshift({
const table = reactive({ terms: oParams.terms[0].terms,
_selectedRowKeys: [] as string[], });
columns: [ return getUserByRole_api(params);
{ };
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '用户名',
dataIndex: 'username',
key: 'username',
},
],
tableData: [],
onSelectChange: (keys: string[]) => {
table._selectedRowKeys = [...keys];
},
cancelSelect: () => {
table._selectedRowKeys = [];
},
});
// 弹窗相关 const confirm = () => {
const dialog = reactive({ if (selectedRowKeys.value.length < 1) {
visible: false, message.error('请至少选择一项');
handleOk: () => { } else {
if (table._selectedRowKeys.length < 1) { bindUser_api(props.roleId, selectedRowKeys.value).then(
message.error('请至少选择一项'); (resp) => {
} else {
bindUser_api(
route.params.id as string,
table._selectedRowKeys,
).then((resp) => {
if (resp.status === 200) { if (resp.status === 200) {
message.success('操作成功'); message.success('操作成功');
emits('refresh'); emits('refresh');
dialog.visible = false; emits('update:visible', false);
} }
}); },
} );
}, }
}); };
watch(
() => props.open,
() => {
dialog.visible = true;
},
);
</script> </script>
<style scoped></style>

56
src/views/system/Role/Detail/components/PermissTree.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="permiss-tree-container"> <div class="permiss-tree-container">
<a-table <j-table
:columns="columns" :columns="columns"
:data-source="tableData" :data-source="tableData"
:pagination="false" :pagination="false"
@ -10,28 +10,28 @@
<!-- 表头 --> <!-- 表头 -->
<template #headerCell="{ column }"> <template #headerCell="{ column }">
<div v-if="column.key === 'menu'"> <div v-if="column.key === 'menu'">
<a-checkbox <j-checkbox
v-model:checked="selectedAll" v-model:checked="selectedAll"
:indeterminate="indeterminate" :indeterminate="indeterminate"
@change="selectAllChange" @change="selectAllChange"
>菜单权限</a-checkbox >菜单权限</j-checkbox
> >
</div> </div>
<div v-else-if="column.key === 'data'"> <div v-else-if="column.key === 'data'">
<span style="">数据权限</span> <span style="">数据权限</span>
<a-tooltip> <j-tooltip>
<template #title <template #title
>勾选任意数据权限均能看到自己创建的数据权限</template >勾选任意数据权限均能看到自己创建的数据权限</template
> >
<question-circle-outlined /> <AIcon type="QuestionCircleOutlined" />
</a-tooltip> </j-tooltip>
<a-checkbox <j-checkbox
v-model:checked="bulkShow" v-model:checked="bulkShow"
@change="bulkValue = ''" @change="bulkValue = ''"
style="margin-left: 10px" style="margin-left: 10px"
>批量设置</a-checkbox >批量设置</j-checkbox
> >
<a-select <j-select
v-show="bulkShow" v-show="bulkShow"
v-model:value="bulkValue" v-model:value="bulkValue"
:size="'middle'" :size="'middle'"
@ -39,7 +39,7 @@
:options="bulkOptions" :options="bulkOptions"
@change="bulkChange" @change="bulkChange"
placeholder="请选择" placeholder="请选择"
></a-select> ></j-select>
</div> </div>
<div v-else> <div v-else>
<span>{{ column.title }}</span> <span>{{ column.title }}</span>
@ -48,21 +48,21 @@
<!-- 表格内容 --> <!-- 表格内容 -->
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<div v-if="column.key === 'menu'"> <div v-if="column.key === 'menu'">
<a-checkbox <j-checkbox
v-model:checked="record.granted" v-model:checked="record.granted"
:indeterminate="record.indeterminate" :indeterminate="record.indeterminate"
@change="menuChange(record, true)" @change="menuChange(record, true)"
>{{ record.name }}</a-checkbox >{{ record.name }}</j-checkbox
> >
</div> </div>
<div v-else-if="column.key === 'action'"> <div v-else-if="column.key === 'action'">
<div v-if="record.buttons && record.buttons.length > 0"> <div v-if="record.buttons && record.buttons.length > 0">
<a-checkbox <j-checkbox
v-for="button in record.buttons" v-for="button in record.buttons"
v-model:checked="button.granted" v-model:checked="button.granted"
@change="actionChange(record)" @change="actionChange(record)"
>{{ button.name }}</a-checkbox >{{ button.name }}</j-checkbox
> >
</div> </div>
</div> </div>
@ -72,13 +72,16 @@
不支持数据权限配置，默认可查看全部数据 不支持数据权限配置，默认可查看全部数据
</span> </span>
<div v-else-if="record.accessSupport.value === 'support'"> <div v-else-if="record.accessSupport.value === 'support'">
<a-radio-group v-model:value="record.selectAccesses"> <j-radio-group
<a-radio v-model:value="record.selectAccesses"
@change="resetBulk"
>
<j-radio
:value="asset.supportId" :value="asset.supportId"
v-for="asset in record.assetAccesses" v-for="asset in record.assetAccesses"
>{{ asset.name }}</a-radio >{{ asset.name }}</j-radio
> >
</a-radio-group> </j-radio-group>
</div> </div>
<span <span
v-else-if=" v-else-if="
@ -89,12 +92,11 @@
> >
</div> </div>
</template> </template>
</a-table> </j-table>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { cloneDeep } from 'lodash-es'; import { cloneDeep } from 'lodash-es';
import { getPrimissTree_api } from '@/api/system/role'; import { getPrimissTree_api } from '@/api/system/role';
@ -167,6 +169,12 @@ const bulkChange = () => {
} }
}); });
}; };
// 重置批量设置
const resetBulk = () => {
bulkValue.value = '';
bulkShow.value = false;
};
// ------------下面为表格内容部分------------------ // ------------下面为表格内容部分------------------
const flatTableData: tableItemType[] = []; // 表格数据的扁平化版本--浅克隆 方便进行对表格数据进行操作 const flatTableData: tableItemType[] = []; // 表格数据的扁平化版本--浅克隆 方便进行对表格数据进行操作
@ -273,6 +281,9 @@ function menuChange(
} }
} }
// 取消批量设置
resetBulk();
// 改变头部节点状态 // 改变头部节点状态
const selectList = flatTableData.filter((item) => item.granted); // 第一列选中的项 const selectList = flatTableData.filter((item) => item.granted); // 第一列选中的项
if (selectList.length === flatTableData.length) { if (selectList.length === flatTableData.length) {
@ -390,8 +401,3 @@ type tableItemType = {
assetAccesses?: any[]; assetAccesses?: any[];
}; };
</script> </script>
<style lang="less" scoped>
.permiss-tree-container {
}
</style>

9
src/views/system/Role/Detail/index.vue
View File

@ -1,10 +1,10 @@
<template> <template>
<page-container> <page-container>
<div class="details-container"> <div class="details-container">
<a-tabs v-model:activeKey="activeKey"> <j-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="权限分配"><Permiss /></a-tab-pane> <j-tab-pane key="1" tab="权限分配"><Permiss /></j-tab-pane>
<a-tab-pane key="2" tab="用户管理"><User /></a-tab-pane> <j-tab-pane key="2" tab="用户管理"><User /></j-tab-pane>
</a-tabs> </j-tabs>
</div> </div>
</page-container> </page-container>
</template> </template>
@ -12,7 +12,6 @@
<script setup lang="ts" name="Detail"> <script setup lang="ts" name="Detail">
import Permiss from './Permiss/index.vue'; import Permiss from './Permiss/index.vue';
import User from './User/index.vue'; import User from './User/index.vue';
const route = useRoute();
const activeKey = ref('1'); const activeKey = ref('1');
</script> </script>

90
src/views/system/Role/components/AddDialog.vue
View File

@ -1,18 +1,20 @@
<template> <template>
<a-modal <a-modal
v-model:visible="dialog.visible" visible
title="新增" title="新增"
width="670px" width="670px"
@ok="dialog.handleOk" @cancel="emits('update:visible', false)"
@ok="confirm"
:confirm-loading="loading"
> >
<a-form ref="formRef" :model="form.data" layout="vertical"> <a-form ref="formRef" :model="form" layout="vertical">
<a-form-item <a-form-item
name="name" name="name"
label="名称" label="名称"
:rules="[{ required: true, message: '请输入名称' }]" :rules="[{ required: true, message: '请输入名称' }]"
> >
<a-input <a-input
v-model:value="form.data.name" v-model:value="form.name"
placeholder="请输入角色名称" placeholder="请输入角色名称"
allow-clear allow-clear
:maxlength="64" :maxlength="64"
@ -20,72 +22,52 @@
</a-form-item> </a-form-item>
<a-form-item name="name" label="说明"> <a-form-item name="name" label="说明">
<a-textarea <a-textarea
v-model:value="form.data.description" v-model:value="form.description"
placeholder="请输入说明" placeholder="请输入说明"
allow-clear allow-clear
:maxlength="200" :maxlength="200"
/> />
</a-form-item> </a-form-item>
</a-form> </a-form>
<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> </a-modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { FormInstance, message } from 'ant-design-vue'; import { FormInstance, message } from 'ant-design-vue';
import { saveRole_api } from '@/api/system/role'; import { saveRole_api } from '@/api/system/role';
const router = useRouter(); import { useMenuStore } from '@/store/menu';
const route = useRoute(); const route = useRoute();
const { jumpPage } = useMenuStore();
const emits = defineEmits(['update:visible']);
const props = defineProps<{
visible: boolean;
}>();
// 弹窗相关 // 弹窗相关
const dialog = reactive({ const loading = ref(false);
visible: false, const form = ref<any>({});
handleOk: () => {
formRef.value
?.validate()
.then(() => saveRole_api(form.data))
.then((resp) => {
if (resp.status === 200) {
message.success('操作成功');
dialog.visible = false;
if (route.query.save) {
// @ts-ignore
window?.onSaveSuccess && window.onSaveSuccess(resp.result.id);
window.close();
} else 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>(); const formRef = ref<FormInstance>();
const form = reactive({
loading: false,
data: {
name: '',
description: '',
},
});
// 将打开弹窗的操作暴露给父组件 const confirm = () => {
defineExpose({ loading.value = true;
openDialog: dialog.changeVisible, formRef.value
}); ?.validate()
.then(() => saveRole_api(form.value))
.then((resp) => {
if (resp.status === 200) {
message.success('操作成功');
emits('update:visible', false);
if (route.query.save) {
// @ts-ignore
window?.onSaveSuccess(resp.result.id);
window.close();
} else jumpPage(`system/Role/detail`, { id: resp.result.id });
}
})
.finally(() => (loading.value = false));
};
// 表单相关
</script> </script>
<style scoped></style> <style scoped></style>

122
src/views/system/Role/index.vue
View File

@ -1,20 +1,23 @@
<template> <template>
<page-container> <page-container>
<a-card class="role-container"> <a-card class="role-container">
<Search :columns="query.columns" /> <j-advanced-search
:columns="columns"
@search="(params:any)=>queryParams = params"
/>
<j-pro-table <j-pro-table
ref="tableRef" ref="tableRef"
:columns="table.columns" :columns="columns"
:request="getRoleList_api" :request="getRoleList_api"
model="TABLE" model="TABLE"
:params="query.params" :params="queryParams"
> >
<template #headerTitle> <template #headerTitle>
<PermissionButton <PermissionButton
type="primary" type="primary"
:uhasPermission="`${permission}:add`" :uhasPermission="`${permission}:add`"
@click="table.clickAdd" @click="dialogVisible = true"
> >
<AIcon type="PlusOutlined" />新增 <AIcon type="PlusOutlined" />新增
</PermissionButton> </PermissionButton>
@ -47,9 +50,7 @@
</template> </template>
</j-pro-table> </j-pro-table>
<div class="dialogs"> <AddDialog v-if="dialogVisible" v-model:visible="dialogVisible" />
<AddDialog ref="addDialogRef" />
</div>
</a-card> </a-card>
</page-container> </page-container>
</template> </template>
@ -59,73 +60,56 @@ import PermissionButton from '@/components/PermissionButton/index.vue';
import AddDialog from './components/AddDialog.vue'; import AddDialog from './components/AddDialog.vue';
import { getRoleList_api, delRole_api } from '@/api/system/role'; import { getRoleList_api, delRole_api } from '@/api/system/role';
import { message } from 'ant-design-vue'; import { message } from 'ant-design-vue';
import { useMenuStore } from '@/store/menu';
const permission = 'system/Role'; const permission = 'system/Role';
const { jumpPage } = useMenuStore();
const addDialogRef = ref(); // 新增弹窗实例 const addDialogRef = ref(); // 新增弹窗实例
const router = useRouter(); const isSave = !!useRoute().query.save;
const route = useRoute();
// 筛选 const columns = [
const query = reactive({ {
columns: [ title: '标识',
{ dataIndex: 'id',
title: '标识', key: 'id',
dataIndex: 'id', ellipsis: true,
key: 'id', fixed: 'left',
ellipsis: true, search: {
fixed: 'left', type: 'string',
}, },
{ },
title: '名称', {
dataIndex: 'name', title: '名称',
key: 'name', dataIndex: 'name',
ellipsis: true, key: 'name',
ellipsis: true,
search: {
type: 'string',
}, },
{ },
title: '描述', {
key: 'description', title: '描述',
ellipsis: true, key: 'description',
dataIndex: 'description', ellipsis: true,
filters: true, dataIndex: 'description',
onFilter: true, search: {
type: 'string',
}, },
{ },
title: '操作', {
valueType: 'option', title: '操作',
width: 200, dataIndex: 'action',
fixed: 'right', key: 'action',
}, width: 200,
], fixed: 'right',
params: {}, scopedSlots: true,
}); },
];
const queryParams = ref({});
// 表格 // 表格
const tableRef = ref<Record<string, any>>({}); const tableRef = ref<Record<string, any>>({});
const table = reactive({ const table = {
columns: [
{
title: '标识',
dataIndex: 'id',
key: 'id',
},
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
{
title: '说明',
dataIndex: 'description',
key: 'description',
},
{
title: '操作',
dataIndex: 'action',
key: 'action',
scopedSlots: true,
},
],
tableData: [],
clickAdd: () => { clickAdd: () => {
addDialogRef.value.openDialog(true, {}); addDialogRef.value.openDialog(true, {});
}, },
@ -137,13 +121,11 @@ const table = reactive({
} }
}); });
}, },
clickEdit: (row: any) => { clickEdit: ({ id }: { id: string }) => {
router.push(`/system/Role/detail/${row.id}`); jumpPage(`system/Role/Detail`, { id });
}, },
}); };
nextTick(() => { const dialogVisible = ref(isSave);
route.query.save && table.clickAdd();
});
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>