修改页面设计
This commit is contained in:
itcsx committed
1 parent
0dd4ec814b
commit
7f5bf3c68d
31 files changed
+3133
-2562
No files matched your search
@@ -29,156 +29,211 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="page-main" :style="{ height: resultH }">
|
||||
<a-row :gutter="[16, 8]">
|
||||
<a-col :lg="8" :sm="24">
|
||||
<a-row :wrap="false" align="middle">
|
||||
<a-col :lg="6" :sm="6" style="min-width: 80px;">
|
||||
<span>组别名称:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18" style="min-width: 300px;">
|
||||
<a-input :maxlength="50" required :readonly="!isEdit || data.SecurityGroup.GroupName"
|
||||
v-model:value="data.SecurityGroup.GroupName" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :lg="{ span: 8, offset: 2 }" :sm="24">
|
||||
<a-row :wrap="false" align="middle">
|
||||
<a-col :lg="6" :sm="6" style="min-width: 80px;">
|
||||
<span>中文名称:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18" style="min-width: 300px;">
|
||||
<a-input :maxlength="500" required :readonly="!isEdit"
|
||||
v-model:value="data.SecurityGroup.GroupLocalName" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 8px;">
|
||||
<a-col :lg="8" :sm="24">
|
||||
<a-row :wrap="false" align="middle">
|
||||
<a-col :lg="6" :sm="6" style="min-width: 80px;">
|
||||
<span>英文名称:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18" style="min-width: 300px;">
|
||||
<a-input :maxlength="50" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityGroup.GroupEngName" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :lg="{ span: 8, offset: 2 }" :sm="24">
|
||||
<div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
|
||||
<!-- 顶部信息卡 -->
|
||||
<div class="ft-hero">
|
||||
<div class="ft-hero-icon">
|
||||
<TeamOutlined />
|
||||
</div>
|
||||
<div class="ft-hero-main">
|
||||
<div class="ft-hero-name">
|
||||
{{ data.SecurityGroup.GroupLocalName || "未填写组别名称" }}
|
||||
</div>
|
||||
<div class="ft-hero-meta">
|
||||
<span class="ft-chip">编号 {{ data.SecurityGroup.GroupName || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!-- 组别信息 -->
|
||||
<div class="ft-card">
|
||||
<div class="ft-card-title">组别信息</div>
|
||||
<div class="ft-grid">
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">组别名称<span class="ft-required">*</span></div>
|
||||
<a-input size="large" :maxlength="50" required placeholder="请输入组别名称"
|
||||
:readonly="!isEdit || !!data.SecurityGroup.GroupName"
|
||||
v-model:value="data.SecurityGroup.GroupName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">中文名称<span class="ft-required">*</span></div>
|
||||
<a-input size="large" :maxlength="500" required placeholder="请输入中文名称"
|
||||
:readonly="!isEdit" v-model:value="data.SecurityGroup.GroupLocalName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">英文名称</div>
|
||||
<a-input size="large" :maxlength="50" placeholder="请输入英文名称" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityGroup.GroupEngName" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
|
||||
|
||||
</a-divider>
|
||||
<a-collapse v-model:activeKey="activeKey">
|
||||
<a-collapse-panel key="1" header="权限明细">
|
||||
<a-table bordered :data-source="data.SecurityGroupPermissionViews" :columns="columnPermissions"
|
||||
:pagination="false" :scroll="{ x: 520, y: 600 }">
|
||||
<template #bodyCell="datas">
|
||||
<template v-if="datas.column.dataIndex === 'index'">
|
||||
<span>{{ datas.index + 1 }}</span>
|
||||
</template>
|
||||
<template v-if="datas.column.dataIndex === SecurityGroupPermissionViewEntity.DEPENDENT">
|
||||
<span v-if="isEdit" style="color: blue;font-size:18px;cursor: pointer;"
|
||||
@click="addPermissionDependent(datas.record.Dependent)">{{
|
||||
datas.record.Dependent
|
||||
}}</span>
|
||||
<span v-else style="color: #000;font-size:20px;">{{
|
||||
datas.record.Dependent
|
||||
}}</span>
|
||||
</template>
|
||||
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityGroupPermissionViewDisplayData.IS_VIEW">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="datas.record.IsView" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityGroupPermissionViewDisplayData.IS_CREATE">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="datas.record.IsCreate" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityGroupPermissionViewDisplayData.IS_AMEND">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="datas.record.IsAmend" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityGroupPermissionViewDisplayData.IS_DELETE">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="datas.record.IsDelete" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityGroupPermissionViewDisplayData.PERMISSION_NAME && !isEdit">
|
||||
<span style="color: blue;font-size:18px;cursor: pointer;"
|
||||
@click="onViewPermissionOperation(datas.record.PermissionName)"> {{
|
||||
datas.record.PermissionName
|
||||
}}</span>
|
||||
</template>
|
||||
<template v-else-if="datas.column.dataIndex === 'operation' && isEdit">
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deletePermission(datas.record.PermissionName)" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit">
|
||||
<PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addPermission" />
|
||||
</template>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="扩展权限明细">
|
||||
<a-table bordered :data-source="data.SecurityGroupPermissionDependentViews"
|
||||
:columns="columnPermissionDependents" :pagination="false" :scroll="{ x: 520, y: 600 }">
|
||||
<template #bodyCell="datas">
|
||||
<template v-if="datas.column.dataIndex === 'index'">
|
||||
<span>{{ datas.index + 1 }}</span>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityGroupPermissionViewDisplayData.IS_VIEW">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="datas.record.IsView" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityGroupPermissionViewDisplayData.IS_CREATE">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="datas.record.IsCreate" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityGroupPermissionViewDisplayData.IS_AMEND">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="datas.record.IsAmend" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityGroupPermissionViewDisplayData.IS_DELETE">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="datas.record.IsDelete" />
|
||||
</template>
|
||||
<template v-else-if="datas.column.dataIndex === 'operation' && isEdit">
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deletePermissionDependent(datas.record.DependentDetailName)" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="3" header="组别内的角色群">
|
||||
<a-table bordered :data-source="data.SecurityActorGroups" :columns="columnActors"
|
||||
:pagination="false" :scroll="{ x: 520, y: 600 }">
|
||||
<template #bodyCell="datas">
|
||||
<template v-if="datas.column.dataIndex === 'index'">
|
||||
<span>{{ datas.index + 1 }}</span>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityActorGroupViewEntity.ACTOR_NAME && !isEdit">
|
||||
<span style="color: blue;font-size:18px;cursor: pointer;"
|
||||
@click="onViewActorOperation(datas.record.ActorName)"> {{ datas.record.ActorName
|
||||
}}</span>
|
||||
</template>
|
||||
<template v-else-if="datas.column.dataIndex === 'operation' && isEdit">
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deleteActor(datas.record.ActorName)" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit">
|
||||
<PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addActor" />
|
||||
</template>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<!-- 明细 -->
|
||||
<div class="ft-card">
|
||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
||||
<a-collapse-panel key="1" header="权限明细">
|
||||
<div class="ft-list">
|
||||
<div v-for="(record, index) in data.SecurityGroupPermissionViews"
|
||||
:key="record.PermissionName || index" class="ft-item">
|
||||
<div class="ft-item-head">
|
||||
<span class="ft-item-index">{{ index + 1 }}</span>
|
||||
<div class="ft-item-title">
|
||||
<span v-if="!isEdit" class="ft-item-name ft-item-link"
|
||||
@click="onViewPermissionOperation(record.PermissionName)">
|
||||
{{ record.PermissionName || "未命名权限" }}
|
||||
</span>
|
||||
<span v-else class="ft-item-name">
|
||||
{{ record.PermissionName || "未命名权限" }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<DeleteOutlined class="ft-action ft-action-delete"
|
||||
@click="deletePermission(record.PermissionName)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">中文名称</span>
|
||||
<span class="ft-item-text">{{ record.PermissionDescription || "-" }}</span>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">扩展名称</span>
|
||||
<span v-if="isEdit" class="ft-item-text ft-item-link"
|
||||
@click="addPermissionDependent(record.Dependent)">
|
||||
{{ record.Dependent || "-" }}
|
||||
</span>
|
||||
<span v-else class="ft-item-text">{{ record.Dependent || "-" }}</span>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">查看</span>
|
||||
<div class="ft-check">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="record.IsView" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">新增</span>
|
||||
<div class="ft-check">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="record.IsCreate" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">修改</span>
|
||||
<div class="ft-check">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="record.IsAmend" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">删除</span>
|
||||
<div class="ft-check">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="record.IsDelete" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!data.SecurityGroupPermissionViews || !data.SecurityGroupPermissionViews.length"
|
||||
class="ft-empty">
|
||||
暂无权限明细
|
||||
</div>
|
||||
<a-button v-if="isEdit" class="ft-add-btn" type="dashed" block @click="addPermission">
|
||||
<PlusSquareTwoTone /> 新增权限
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="扩展权限明细">
|
||||
<div class="ft-list">
|
||||
<div v-for="(record, index) in data.SecurityGroupPermissionDependentViews"
|
||||
:key="record.DependentDetailName || index" class="ft-item">
|
||||
<div class="ft-item-head">
|
||||
<span class="ft-item-index">{{ index + 1 }}</span>
|
||||
<div class="ft-item-title">
|
||||
<span class="ft-item-name">
|
||||
{{ record.DependentDetailName || "未命名扩展权限" }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<DeleteOutlined class="ft-action ft-action-delete"
|
||||
@click="deletePermissionDependent(record.DependentDetailName)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">扩展名称</span>
|
||||
<span class="ft-item-text">{{ record.Dependent || "-" }}</span>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">扩展子项目中文</span>
|
||||
<span class="ft-item-text">{{ record.DependentDetailDescription || "-" }}</span>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">查看</span>
|
||||
<div class="ft-check">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="record.IsView" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">新增</span>
|
||||
<div class="ft-check">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="record.IsCreate" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">修改</span>
|
||||
<div class="ft-check">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="record.IsAmend" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">删除</span>
|
||||
<div class="ft-check">
|
||||
<a-checkbox :disabled="!isEdit" v-model:checked="record.IsDelete" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!data.SecurityGroupPermissionDependentViews || !data.SecurityGroupPermissionDependentViews.length"
|
||||
class="ft-empty">
|
||||
暂无扩展权限明细
|
||||
</div>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="3" header="组别内的角色群">
|
||||
<div class="ft-list">
|
||||
<div v-for="(record, index) in data.SecurityActorGroups"
|
||||
:key="record.ActorName || index" class="ft-item">
|
||||
<div class="ft-item-head">
|
||||
<span class="ft-item-index">{{ index + 1 }}</span>
|
||||
<div class="ft-item-title">
|
||||
<span v-if="!isEdit" class="ft-item-name ft-item-link"
|
||||
@click="onViewActorOperation(record.ActorName)">
|
||||
{{ record.ActorName || "未命名角色" }}
|
||||
</span>
|
||||
<span v-else class="ft-item-name">
|
||||
{{ record.ActorName || "未命名角色" }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<DeleteOutlined class="ft-action ft-action-delete"
|
||||
@click="deleteActor(record.ActorName)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">角色中文名称</span>
|
||||
<span class="ft-item-text">{{ record.ActorLocalName || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!data.SecurityActorGroups || !data.SecurityActorGroups.length"
|
||||
class="ft-empty">
|
||||
暂无角色群
|
||||
</div>
|
||||
<a-button v-if="isEdit" class="ft-add-btn" type="dashed" block @click="addActor">
|
||||
<PlusSquareTwoTone /> 新增角色
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
<div style="">
|
||||
@@ -214,22 +269,22 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dragModal v-model:open="modelOption.isModalGroup" width="80%" title="组别查询" @cancel="handleCance"
|
||||
<dragModal v-model:open="modelOption.isModalGroup" title="组别查询" @cancel="handleCance"
|
||||
:fullscreen="width < 640" :mask-closable="false" @ok="handleSelect">
|
||||
<GroupEnquiry ref="enquiry" @on-row-dblclick="handleSelect"></GroupEnquiry>
|
||||
</dragModal>
|
||||
<dragModal v-model:open="modelOption.isModalPermission" width="80%" title="权限查询" @cancel="handleCance"
|
||||
<dragModal v-model:open="modelOption.isModalPermission" title="权限查询" @cancel="handleCance"
|
||||
:fullscreen="width < 640" :mask-closable="false" @ok="handleSelectPermission">
|
||||
<PermissionEnquiry ref="permissionEnquiry" @on-row-dblclick="handleSelectPermission"></PermissionEnquiry>
|
||||
</dragModal>
|
||||
<dragModal v-model:open="modelOption.isModalPermissionDependent" width="80%" title="扩展权限查询"
|
||||
<dragModal v-model:open="modelOption.isModalPermissionDependent" title="扩展权限查询"
|
||||
:fullscreen="width < 640" @cancel="handleCance" :mask-closable="false"
|
||||
@ok="handleSelectPermissionDependent">
|
||||
<PermissionDependentModal ref="permissionDependentEnquiry"
|
||||
@on-row-dblclick="handleSelectPermissionDependent">
|
||||
</PermissionDependentModal>
|
||||
</dragModal>
|
||||
<dragModal v-model:open="modelOption.isModalActor" width="80%" title="角色查询" @cancel="handleCance"
|
||||
<dragModal v-model:open="modelOption.isModalActor" title="角色查询" @cancel="handleCance"
|
||||
:fullscreen="width < 640" :mask-closable="false" @ok="handleSelectActor">
|
||||
<ActorEnquiry ref="actorEnquiry" @on-row-dblclick="handleSelectActor"></ActorEnquiry>
|
||||
</dragModal>
|
||||
@@ -239,7 +294,7 @@
|
||||
import { ref, unref, onBeforeMount, inject, provide, h, onMounted } from "vue";
|
||||
import { notification } from "ant-design-vue";
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { DeleteOutlined, EditOutlined, ClearOutlined, FileSearchOutlined, FileAddOutlined, UndoOutlined, SaveOutlined, PlusSquareTwoTone, DownSquareTwoTone, UpSquareTwoTone } from "@ant-design/icons-vue";
|
||||
import { DeleteOutlined, EditOutlined, ClearOutlined, FileSearchOutlined, FileAddOutlined, UndoOutlined, SaveOutlined, PlusSquareTwoTone, DownSquareTwoTone, UpSquareTwoTone, TeamOutlined } from "@ant-design/icons-vue";
|
||||
import { PermissionContext, usePermissionContext } from "@/hooks/PermissionContext"
|
||||
import dragModal from "@/components/basic/DragModal.vue"
|
||||
import GroupEnquiry from "./GroupEnquiry.vue";
|
||||
@@ -817,6 +872,9 @@ const onViewPermissionOperation = ((permissionName: string) => {
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
||||
@import "../../styles/ft-mobile.less";
|
||||
|
||||
.page-container {
|
||||
margin-right: 0px;
|
||||
|
||||
|
||||
Reference in new issue
Block a user