OMC/fe.ems.vue3
1
0
Fork 0
Code Issues Releases 3 Activity

style: 角色管理页面排版

Browse Source
This commit is contained in:
TsMask
2024-01-10 16:12:31 +08:00
parent 81f0da4f1b
commit be4739390a
1 changed files with 69 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/views/system/role/index.vue
View File

@@ -110,33 +110,39 @@ let tableColumns: ColumnsType = [
{
title: t('views.system.role.roleId'),
dataIndex: 'roleId',
align: 'center',
align: 'left',
width: 100,
},
{
title: t('views.system.role.roleName'),
dataIndex: 'roleName',
align: 'left',
width: 200,
},
{
title: t('views.system.role.roleKey'),
dataIndex: 'roleKey',
align: 'left',
width: 200,
},
{
title: t('views.system.role.roleSort'),
dataIndex: 'roleSort',
align: 'left',
width: 100,
},
{
title: t('views.system.role.roleStatus'),
dataIndex: 'status',
key: 'status',
align: 'center',
width: 100,
},
{
title: t('views.system.role.createTime'),
dataIndex: 'createTime',
align: 'center',
width: 150,
customRender(opt) {
if (+opt.value <= 0) return '';
return parseDateToStr(+opt.value);
@@ -145,7 +151,7 @@ let tableColumns: ColumnsType = [
{
title: t('common.operate'),
key: 'roleId',
align: 'center',
align: 'left',
},
];
@@ -909,7 +915,7 @@ onMounted(() => {
:size="tableState.size"
:row-class-name="fnTableStriped"
:pagination="tablePagination"
:scroll="{ x: true }"
:scroll="{ x: tableColumns.length * 120 }"
:row-selection="{
type: 'checkbox',
selectedRowKeys: tableState.selectedRowKeys,
@@ -920,13 +926,15 @@ onMounted(() => {
<template v-if="column.key === 'status'">
<a-switch
v-if="
record.roleId !== '1' && hasPermissions(['system:role:edit'])
dict.sysNormalDisable.length > 0 &&
record.roleId !== '1' &&
hasPermissions(['system:role:edit'])
"
v-model:checked="record.status"
checked-value="1"
:checked-children="t('views.system.role.normal')"
:checked-children="dict.sysNormalDisable[0].label"
un-checked-value="0"
:un-checked-children="t('views.system.role.stop')"
:un-checked-children="dict.sysNormalDisable[1].label"
size="small"
@change="fnRecordStatus(record)"
/>
@@ -968,7 +976,7 @@ onMounted(() => {
<template #icon><DeleteOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip v-if="record.roleId !== '1'">
<a-tooltip placement="topRight" v-if="record.roleId !== '1'">
<template #title>{{
t('views.system.role.distribute')
}}</template>
@@ -980,7 +988,7 @@ onMounted(() => {
<template #icon><SecurityScanOutlined /></template>
</a-button>
</a-tooltip>
<a-tooltip v-if="record.roleId !== '1'">
<a-tooltip placement="topRight" v-if="record.roleId !== '1'">
<template #title>{{
t('views.system.role.distributeUser')
}}</template>
@@ -1005,7 +1013,7 @@ onMounted(() => {
:title="modalState.title"
@cancel="fnModalCancel"
>
<a-form layout="horizontal">
<a-form layout="horizontal" :label-col="{ span: 6 }" :label-wrap="true">
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.system.role.roleId')" name="roleId">
@@ -1056,13 +1064,24 @@ onMounted(() => {
</a-form-item>
</a-col>
</a-row>
<a-form-item :label="t('views.system.role.roleMark')" name="remark">
{{ modalState.from.remark }}
<a-form-item
:label="t('views.system.role.roleMark')"
name="remark"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-textarea
v-model:value="modalState.from.remark"
:auto-size="{ minRows: 2, maxRows: 6 }"
:disabled="true"
/>
</a-form-item>
<a-form-item
:label="t('views.system.role.menu')"
name="menuCheckStrictly"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-tree
disabled
@@ -1097,7 +1116,12 @@ onMounted(() => {
@ok="fnModalOk"
@cancel="fnModalCancel"
>
<a-form name="modalStateFromByEdit" layout="horizontal">
<a-form
name="modalStateFromByEdit"
layout="horizontal"
:label-col="{ span: 6 }"
:label-wrap="true"
>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item
@@ -1162,7 +1186,12 @@ onMounted(() => {
</a-col>
</a-row>
<a-form-item :label="t('views.system.role.roleMark')" name="remark">
<a-form-item
:label="t('views.system.role.roleMark')"
name="remark"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-textarea
v-model:value="modalState.from.remark"
:auto-size="{ minRows: 4, maxRows: 6 }"
@@ -1174,6 +1203,8 @@ onMounted(() => {
<a-form-item
:label="t('views.system.role.menu')"
name="menuCheckStrictly"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-space :size="12" align="center">
<a-checkbox
@@ -1228,7 +1259,12 @@ onMounted(() => {
@ok="fnModalOkDataScope"
@cancel="fnModalCancel"
>
<a-form name="modalStateFromByDataScope" layout="horizontal">
<a-form
name="modalStateFromByDataScope"
layout="horizontal"
:label-col="{ span: 6 }"
:label-wrap="true"
>
<a-row :gutter="16">
<a-col :lg="12" :md="12" :xs="24">
<a-form-item :label="t('views.system.role.roleId')" name="roleId">
@@ -1282,11 +1318,25 @@ onMounted(() => {
</a-form-item>
</a-col>
</a-row>
<a-form-item :label="t('views.system.role.roleMark')" name="remark">
{{ modalState.from.remark }}
<a-form-item
:label="t('views.system.role.roleMark')"
name="remark"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-textarea
v-model:value="modalState.from.remark"
:auto-size="{ minRows: 2, maxRows: 6 }"
:disabled="true"
/>
</a-form-item>
<a-form-item :label="t('views.system.role.preScope')" name="dataScope">
<a-form-item
:label="t('views.system.role.preScope')"
name="dataScope"
:label-col="{ span: 3 }"
:label-wrap="true"
>
<a-select
v-model:value="modalState.from.dataScope"
default-value="5"
@@ -1297,6 +1347,8 @@ onMounted(() => {
<a-form-item
:label="t('views.system.role.dataPer')"
name="deptCheckStrictly"
:label-col="{ span: 3 }"
:label-wrap="true"
v-show="modalState.from.dataScope === '2'"
>
<a-space :size="12" align="center">