修改页面设计
This commit is contained in:
itcsx committed
1 parent
0dd4ec814b
commit
7f5bf3c68d
31 files changed
+3133
-2562
No files matched your search
@@ -356,4 +356,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ant-design-vue Modal 自带两个“焦点哨兵”（0x0、tabindex=0、aria-hidden=true 的 div）：
|
||||
vc-dialog/Content.js 的 sentinelStyle。
|
||||
弹窗显示时 antd 会把焦点移到哨兵上（vc-dialog/Dialog.js -> Content.focus()），
|
||||
而哨兵带 aria-hidden="true"，Chrome 会报：
|
||||
"Blocked aria-hidden on an element because its descendant retained focus"。
|
||||
让它不再可聚焦即可消除该告警，不影响弹窗其它焦点行为。 */
|
||||
.draggable-modal .ant-modal > div[aria-hidden="true"][tabindex="0"] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
<template v-else-if="isAudio(record.OrderKey)">
|
||||
<div class="audio-icon" :class="{ playing: record.IsPlay == 'Y' && record.IsPause != 'Y' }">
|
||||
<cust-icon-font size="54" type="icon-playmp3" style="color: #ff7878" />
|
||||
<cust-icon-font size="40" type="icon-playmp3" style="color: #ff7878" />
|
||||
</div>
|
||||
<div class="file-name" :title="record.OrgFileName">{{ record.OrgFileName }}</div>
|
||||
</template>
|
||||
@@ -87,7 +87,7 @@
|
||||
<FileOutlined style="color: #8c8c8c" />
|
||||
</template>
|
||||
</div>
|
||||
<div :title="record.OrgFileName"><span class="list-name" >{{ record.OrgFileName }}</span></div>
|
||||
<div class="list-name-wrap" :title="record.OrgFileName"><span class="list-name">{{ record.OrgFileName }}</span></div>
|
||||
<div class="list-size">{{ formatSize(record.FileSize) }}</div>
|
||||
<div class="list-date">{{ formatDate(record.CreatedDatetime) }}</div>
|
||||
</div>
|
||||
@@ -241,26 +241,32 @@ const formatDate = (date: any) => {
|
||||
.my-computer-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 16px;
|
||||
display: grid;
|
||||
/* 列宽与小屏保持一致，列数随宽度自由增减 */
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.my-computer-body.list-body {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.file-card-wrapper {
|
||||
width: 120px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 180px;
|
||||
justify-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
@@ -282,18 +288,19 @@ const formatDate = (date: any) => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.folder-icon,
|
||||
.file-icon,
|
||||
.audio-icon {
|
||||
font-size: 56px;
|
||||
font-size: 42px;
|
||||
color: #faad14;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
@@ -320,8 +327,8 @@ const formatDate = (date: any) => {
|
||||
|
||||
.image-thumb,
|
||||
.video-thumb {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@@ -345,7 +352,7 @@ const formatDate = (date: any) => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 36px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
@@ -359,12 +366,25 @@ const formatDate = (date: any) => {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
text-align: center;
|
||||
max-width: 110px;
|
||||
display: inline-block;
|
||||
max-width: min(12ch, 100%); /* 与列表视图保持一致，按字符宽度截断，且不超出卡片 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 大屏时文件名完整显示（换行展示，不截断） */
|
||||
@media (min-width: 1200px) {
|
||||
.file-name {
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -391,14 +411,32 @@ const formatDate = (date: any) => {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.list-name-wrap {
|
||||
flex: 1 0 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-name {
|
||||
display: inline-block;
|
||||
max-width: 14ch; /* 6个字符宽度，ch 按字符计算 */
|
||||
max-width: 12ch; /* 6个字符宽度，ch 按字符计算 */
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 大屏时列表视图文件名完整显示（换行） */
|
||||
@media (min-width: 1200px) {
|
||||
.list-name-wrap .list-name {
|
||||
max-width: none;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
.list-size,
|
||||
.list-date {
|
||||
color: #8c8c8c;
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
}"
|
||||
>
|
||||
<cust-icon-font
|
||||
size="54"
|
||||
size="40"
|
||||
type="icon-playmp3"
|
||||
style="color: #ff7878"
|
||||
/>
|
||||
@@ -295,24 +295,30 @@ const formatDate = (date: any) => {
|
||||
.my-computer-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
gap: 16px;
|
||||
display: grid;
|
||||
/* 列宽与小屏保持一致，列数随宽度自由增减 */
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
align-content: start;
|
||||
gap: 8px;
|
||||
}
|
||||
.my-computer-body.list-body {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
.file-card-wrapper {
|
||||
width: 120px;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: 180px;
|
||||
justify-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
padding: 4px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
position: relative;
|
||||
@@ -352,17 +358,18 @@ const formatDate = (date: any) => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.folder-icon,
|
||||
.file-icon,
|
||||
.audio-icon {
|
||||
font-size: 56px;
|
||||
font-size: 42px;
|
||||
color: #faad14;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.file-icon {
|
||||
color: #8c8c8c;
|
||||
@@ -383,8 +390,8 @@ const formatDate = (date: any) => {
|
||||
}
|
||||
.image-thumb,
|
||||
.video-thumb {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
@@ -406,7 +413,7 @@ const formatDate = (date: any) => {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 36px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
@@ -418,11 +425,23 @@ const formatDate = (date: any) => {
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
text-align: center;
|
||||
max-width: 110px;
|
||||
display: inline-block;
|
||||
max-width: min(14ch, 100%); /* 与列表视图保持一致，按字符宽度截断，且不超出卡片 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 大屏时文件名完整显示（换行展示，不截断） */
|
||||
@media (min-width: 1200px) {
|
||||
.file-name {
|
||||
max-width: 100%;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -447,7 +466,7 @@ const formatDate = (date: any) => {
|
||||
}
|
||||
/* =========列表视图文件名+状态图标容器========= */
|
||||
.list-name-wrap {
|
||||
flex: 1;
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
@@ -458,6 +477,17 @@ const formatDate = (date: any) => {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 大屏时列表视图文件名完整显示（换行） */
|
||||
@media (min-width: 1200px) {
|
||||
.list-name-wrap .list-name {
|
||||
max-width: none;
|
||||
white-space: normal;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
overflow-wrap: anywhere;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
.list-status-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -44,8 +44,8 @@
|
||||
</a-col>
|
||||
<a-col :span="3" v-if="isDirectorySelected">
|
||||
<a-tooltip :title="favorite">
|
||||
<a-button style="width:100px;" class="nav-btn" :icon="h(ShareAltOutlined)"
|
||||
@click="$emit('set-share-folder')">{{ favorite }}</a-button>
|
||||
<a-button class="nav-btn" :icon="h(ShareAltOutlined)"
|
||||
@click="$emit('set-share-folder')"></a-button>
|
||||
</a-tooltip>
|
||||
</a-col>
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination" :scrollx="400"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||
:card-title-keys="[FamilyGroupEntity.FAMILY_NAME, FamilyGroupEntity.FAMILY_LOCAL_NAME]"
|
||||
@on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
|
||||
<template #control>
|
||||
<a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
|
||||
@@ -42,7 +43,7 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
<dragModal v-model:open="showModalRequest" title="请输入申请原因" :fullscreen="width < 640" :mask-closable="false"
|
||||
@ok="handleSelectRequest">
|
||||
<a-row :wrap="false" align="middle">
|
||||
@@ -59,7 +60,7 @@
|
||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { FamilyGroupResultData } from "@/data/auto/familyGroupResultData";
|
||||
|
||||
@@ -60,327 +60,360 @@
|
||||
</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"
|
||||
:readonly="true"
|
||||
v-model:value="data.FamilyGroup.FamilyName"
|
||||
/>
|
||||
</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.FamilyGroup.FamilyLocalName"
|
||||
/>
|
||||
</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-textarea
|
||||
:maxlength="256"
|
||||
:readonly="!isEdit"
|
||||
v-model:value="data.FamilyGroup.Notice"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 16px">
|
||||
<a-col :lg="8" :sm="24">
|
||||
<a-space direction="vertical">
|
||||
<a-switch
|
||||
v-model:checked="data.IsOpen"
|
||||
:disabled="!isEdit"
|
||||
checked-children="公开"
|
||||
un-checked-children="隐私"
|
||||
/>
|
||||
<a-switch
|
||||
v-model:checked="data.IsAdd"
|
||||
:disabled="!isEdit"
|
||||
checked-children="可申请"
|
||||
un-checked-children="不可申请"
|
||||
/>
|
||||
</a-space>
|
||||
</a-col>
|
||||
<a-col :lg="{ span: 8, offset: 2 }" :sm="24"> </a-col>
|
||||
</a-row>
|
||||
<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.FamilyGroup.FamilyLocalName || "未填写群组名称" }}
|
||||
</div>
|
||||
<div class="ft-hero-meta">
|
||||
<span class="ft-chip">
|
||||
编号 {{ data.FamilyGroup.FamilyName || "-" }}
|
||||
</span>
|
||||
<span class="ft-chip" v-if="data.IsOpen">公开</span>
|
||||
<span class="ft-chip" v-if="data.IsAdd">可申请</span>
|
||||
</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.FamilyGroupFolders"
|
||||
:columns="columnFamilyGroupFolders"
|
||||
: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 ===
|
||||
FamilyGroupFolderEntity.FOLDER_LOCAL_NAME && isEdit
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
:maxlength="50"
|
||||
required
|
||||
v-model:value="datas.record.FolderLocalName"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
datas.column.dataIndex ===
|
||||
FamilyGroupFolderEntity.FOLDER_LOCAL_NAME && !isEdit
|
||||
"
|
||||
>
|
||||
{{ datas.record.FolderLocalName }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
datas.column.dataIndex === FamilyGroupFolderEntity.NOTICE &&
|
||||
isEdit
|
||||
"
|
||||
>
|
||||
<a-input
|
||||
:maxlength="500"
|
||||
required
|
||||
v-model:value="datas.record.Notice"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
datas.column.dataIndex === FamilyGroupFolderEntity.NOTICE &&
|
||||
!isEdit
|
||||
"
|
||||
>
|
||||
{{ datas.record.Notice }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
datas.column.dataIndex === 'share' &&
|
||||
!isEdit &&
|
||||
datas.record.IsSharePermission
|
||||
"
|
||||
>
|
||||
<UserAddOutlined
|
||||
:style="{ fontSize: '24px', color: 'green' }"
|
||||
@click="shareFamilyGroupPermission(datas.record.FolderName)"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === 'delete' && isEdit"
|
||||
>
|
||||
<DeleteOutlined
|
||||
:style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="
|
||||
deleteFamilyGroupFolder(
|
||||
datas.record.FolderId,
|
||||
datas.record.FolderName,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit">
|
||||
<PlusSquareTwoTone
|
||||
:style="{ fontSize: '24px', color: '#08c' }"
|
||||
@click="addFamilyGroupFolder"
|
||||
<!-- 群组信息 -->
|
||||
<div class="ft-card">
|
||||
<div class="ft-card-title">群组信息</div>
|
||||
<div class="ft-grid">
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">群组代码</div>
|
||||
<a-input
|
||||
size="large"
|
||||
:maxlength="50"
|
||||
:readonly="true"
|
||||
placeholder="群组代码"
|
||||
v-model:value="data.FamilyGroup.FamilyName"
|
||||
/>
|
||||
</template>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-collapse v-model:activeKey="activeKey">
|
||||
<a-collapse-panel key="2" header="待审核成员名单">
|
||||
<a-table
|
||||
bordered
|
||||
:data-source="data.FamilyGroupRequests"
|
||||
:columns="columnFamilyGroupRequests"
|
||||
: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 ===
|
||||
FamilyGroupManagerDisplayData.USER_LOCAL_NAME
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">
|
||||
群组名称<span class="ft-required">*</span>
|
||||
</div>
|
||||
<a-input
|
||||
size="large"
|
||||
:maxlength="500"
|
||||
required
|
||||
:readonly="!isEdit"
|
||||
placeholder="请输入群组名称"
|
||||
v-model:value="data.FamilyGroup.FamilyLocalName"
|
||||
/>
|
||||
</div>
|
||||
<div class="ft-field ft-field-full">
|
||||
<div class="ft-label">群组描述</div>
|
||||
<a-textarea
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
:maxlength="256"
|
||||
:readonly="!isEdit"
|
||||
placeholder="请输入群组描述"
|
||||
v-model:value="data.FamilyGroup.Notice"
|
||||
/>
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">公开设置</div>
|
||||
<div class="ft-check">
|
||||
<a-switch
|
||||
v-model:checked="data.IsOpen"
|
||||
:disabled="!isEdit"
|
||||
checked-children="公开"
|
||||
un-checked-children="隐私"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">加入申请</div>
|
||||
<div class="ft-check">
|
||||
<a-switch
|
||||
v-model:checked="data.IsAdd"
|
||||
:disabled="!isEdit"
|
||||
checked-children="可申请"
|
||||
un-checked-children="不可申请"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 共享目录 -->
|
||||
<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.FamilyGroupFolders"
|
||||
:key="record.FolderId || 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.FolderLocalName || "未命名目录" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="ft-item-actions">
|
||||
<UserAddOutlined
|
||||
v-if="!isEdit && record.IsSharePermission"
|
||||
class="ft-action"
|
||||
style="color: green"
|
||||
@click="shareFamilyGroupPermission(record.FolderName)"
|
||||
/>
|
||||
<DeleteOutlined
|
||||
v-if="isEdit"
|
||||
class="ft-action ft-action-delete"
|
||||
@click="
|
||||
deleteFamilyGroupFolder(
|
||||
record.FolderId,
|
||||
record.FolderName,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div v-if="isEdit" class="ft-item-field">
|
||||
<span class="ft-item-label">目录名称</span>
|
||||
<a-input
|
||||
size="large"
|
||||
:maxlength="50"
|
||||
required
|
||||
placeholder="请输入目录名称"
|
||||
v-model:value="record.FolderLocalName"
|
||||
/>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">备注</span>
|
||||
<a-input
|
||||
v-if="isEdit"
|
||||
size="large"
|
||||
:maxlength="500"
|
||||
required
|
||||
placeholder="请输入备注"
|
||||
v-model:value="record.Notice"
|
||||
/>
|
||||
<span v-else class="ft-item-text">
|
||||
{{ record.Notice || "-" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
!data.FamilyGroupFolders || !data.FamilyGroupFolders.length
|
||||
"
|
||||
class="ft-empty"
|
||||
>
|
||||
{{ datas.record.UserLocalName }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
datas.column.dataIndex ===
|
||||
FamilyGroupManagerDisplayData.NOTICE
|
||||
暂无共享目录
|
||||
</div>
|
||||
<a-button
|
||||
v-if="isEdit"
|
||||
class="ft-add-btn"
|
||||
type="dashed"
|
||||
block
|
||||
@click="addFamilyGroupFolder"
|
||||
>
|
||||
<PlusSquareTwoTone /> 新增共享目录
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
<!-- 待审核成员名单 -->
|
||||
<div class="ft-card">
|
||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
||||
<a-collapse-panel key="2" header="待审核成员名单">
|
||||
<div class="ft-list">
|
||||
<div
|
||||
v-for="(record, index) in data.FamilyGroupRequests"
|
||||
:key="record.UserName || 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.UserLocalName || record.UserName || "未命名成员"
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="data.IsManager && !isEdit"
|
||||
class="ft-item-actions"
|
||||
>
|
||||
<CheckCircleTwoTone
|
||||
class="ft-action"
|
||||
@click="
|
||||
okFamilyGroupRequest(
|
||||
record.FamilyName,
|
||||
record.UserName,
|
||||
)
|
||||
"
|
||||
/>
|
||||
<CloseCircleOutlined
|
||||
class="ft-action ft-action-delete"
|
||||
@click="
|
||||
rejectFamilyGroupRequest(
|
||||
record.FamilyName,
|
||||
record.UserName,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">申请说明</span>
|
||||
<span class="ft-item-text">{{ record.Notice || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
!data.FamilyGroupRequests ||
|
||||
!data.FamilyGroupRequests.length
|
||||
"
|
||||
class="ft-empty"
|
||||
>
|
||||
{{ datas.record.Notice }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="data.IsManager && datas.column.dataIndex === 'ok' && !isEdit"
|
||||
暂无待审核成员
|
||||
</div>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
|
||||
<!-- 正式成员名单 -->
|
||||
<div class="ft-card">
|
||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
||||
<a-collapse-panel key="3" header="正式成员名单">
|
||||
<div class="ft-list">
|
||||
<div
|
||||
v-for="(record, index) in data.FamilyGroupManagers"
|
||||
:key="record.UserName || index"
|
||||
class="ft-item"
|
||||
>
|
||||
<CheckCircleTwoTone
|
||||
:style="{ fontSize: '24px', color: 'green' }"
|
||||
@click="
|
||||
okFamilyGroupRequest(
|
||||
datas.record.FamilyName,
|
||||
datas.record.UserName,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="data.IsManager && datas.column.dataIndex === 'reject' && !isEdit"
|
||||
>
|
||||
<CloseCircleOutlined
|
||||
:style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="
|
||||
rejectFamilyGroupRequest(
|
||||
datas.record.FamilyName,
|
||||
datas.record.UserName,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit"> </template>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-collapse v-model:activeKey="activeKey">
|
||||
<a-collapse-panel key="3" header="正式成员名单">
|
||||
<a-table
|
||||
bordered
|
||||
:data-source="data.FamilyGroupManagers"
|
||||
:columns="columnFamilyGroupManagers"
|
||||
: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 ===
|
||||
FamilyGroupManagerDisplayData.USER_LOCAL_NAME
|
||||
<div class="ft-item-head">
|
||||
<span class="ft-item-index">{{ index + 1 }}</span>
|
||||
<div class="ft-item-title">
|
||||
<span class="ft-item-name">
|
||||
{{
|
||||
record.UserLocalName || record.UserName || "未命名成员"
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<DeleteOutlined
|
||||
class="ft-action ft-action-delete"
|
||||
@click="
|
||||
deleteFamilyGroupManager(
|
||||
record.FamilyName,
|
||||
record.UserName,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">群组管理员</span>
|
||||
<a-checkbox
|
||||
:disabled="!isEdit"
|
||||
v-model:checked="record.IsManager"
|
||||
>
|
||||
管理员
|
||||
</a-checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
!data.FamilyGroupManagers ||
|
||||
!data.FamilyGroupManagers.length
|
||||
"
|
||||
class="ft-empty"
|
||||
>
|
||||
{{ datas.record.UserLocalName }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
datas.column.dataIndex ===
|
||||
FamilyGroupManagerDisplayData.MANAGER_INDC
|
||||
暂无正式成员
|
||||
</div>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
<!-- 目录权限列表 -->
|
||||
<div class="ft-card" v-if="data.IsManager">
|
||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
||||
<a-collapse-panel key="4" header="目录权限列表">
|
||||
<div class="ft-list">
|
||||
<div
|
||||
v-for="(record, index) in data.FamilyGroupPermissions"
|
||||
:key="
|
||||
(record.FolderName || '') + '-' + (record.UserName || index)
|
||||
"
|
||||
class="ft-item"
|
||||
>
|
||||
<a-checkbox
|
||||
:disabled="!isEdit"
|
||||
v-model:checked="datas.record.IsManager"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === 'delete' && isEdit"
|
||||
>
|
||||
<DeleteOutlined
|
||||
:style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="
|
||||
deleteFamilyGroupManager(
|
||||
datas.record.FamilyName,
|
||||
datas.record.UserName,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit"> </template>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-collapse v-model:activeKey="activeKey">
|
||||
<a-collapse-panel key="4" header="目录权限列表" v-if="data.IsManager">
|
||||
<a-table
|
||||
bordered
|
||||
:data-source="data.FamilyGroupPermissions"
|
||||
:columns="columnFamilyGroupPermissions"
|
||||
: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 ===
|
||||
FamilyGroupPermissionDisplayData.FOLDER_LOCAL_NAME
|
||||
<div class="ft-item-head">
|
||||
<span class="ft-item-index">{{ index + 1 }}</span>
|
||||
<div class="ft-item-title">
|
||||
<span class="ft-item-name">
|
||||
{{
|
||||
record.FolderLocalName ||
|
||||
record.FolderName ||
|
||||
"未命名目录"
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<DeleteOutlined
|
||||
class="ft-action ft-action-delete"
|
||||
@click="
|
||||
deleteFamilyGroupPermission(
|
||||
record.FamilyName,
|
||||
record.FolderName,
|
||||
record.UserName,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">目录名称</span>
|
||||
<span class="ft-item-text">
|
||||
{{ record.FolderLocalName || "-" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">授权成员</span>
|
||||
<span class="ft-item-text">
|
||||
{{ record.UserLocalName || "-" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
!data.FamilyGroupPermissions ||
|
||||
!data.FamilyGroupPermissions.length
|
||||
"
|
||||
class="ft-empty"
|
||||
>
|
||||
{{ datas.record.FolderLocalName }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
datas.column.dataIndex ===
|
||||
FamilyGroupPermissionDisplayData.USER_LOCAL_NAME
|
||||
"
|
||||
>
|
||||
{{ datas.record.UserLocalName }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === 'delete' && isEdit"
|
||||
>
|
||||
<DeleteOutlined
|
||||
:style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="
|
||||
deleteFamilyGroupPermission(
|
||||
datas.record.FamilyName,
|
||||
datas.record.FolderName,
|
||||
datas.record.UserName,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit"> </template>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
暂无目录权限
|
||||
</div>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
<div style="">
|
||||
@@ -453,7 +486,6 @@
|
||||
</div>
|
||||
<dragModal
|
||||
v-model:open="showModal"
|
||||
width="60%"
|
||||
title="群组查询"
|
||||
:mask-closable="false"
|
||||
:fullscreen="width < 640"
|
||||
@@ -466,7 +498,6 @@
|
||||
</dragModal>
|
||||
<dragModal
|
||||
v-model:open="showModalUser"
|
||||
width="60%"
|
||||
title="成员查询"
|
||||
:mask-closable="false"
|
||||
:fullscreen="width < 640"
|
||||
@@ -497,6 +528,7 @@ import {
|
||||
PlusSquareTwoTone,
|
||||
DownSquareTwoTone,
|
||||
UpSquareTwoTone,
|
||||
TeamOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import {
|
||||
PermissionContext,
|
||||
@@ -1025,6 +1057,9 @@ const handleSelectUser = async () => {
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
||||
@import "../../styles/ft-mobile.less";
|
||||
|
||||
.page-container {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
@@ -682,9 +682,19 @@ const onCreate = () => {
|
||||
const onShareFolder = () => {
|
||||
|
||||
if (keys.value.length == 0) return;
|
||||
|
||||
if (
|
||||
keys.value[0].FavoriteIndc == "N" &&
|
||||
keys.value[0].PermissionIndc == "Y"
|
||||
keys.value[0].PermissionIndc == "N"
|
||||
) {
|
||||
notification.info({
|
||||
message: "系统提示：",
|
||||
description: "您还没有权限",
|
||||
placement: "topRight",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (
|
||||
keys.value[0].FavoriteIndc == "N"
|
||||
) {
|
||||
onInsertFamilyFolderFavorite(keys.value[0].FileName);
|
||||
} else {
|
||||
@@ -923,9 +933,9 @@ const findBySearchCriteria = async (c: DmsFileSearchCriteria) => {
|
||||
sound.value?.stop();
|
||||
}
|
||||
} catch (error) {
|
||||
|
||||
|
||||
}
|
||||
finally {
|
||||
finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<search
|
||||
<search-card
|
||||
@on-submit="onSubmit"
|
||||
@on-print="onPrint"
|
||||
@on-reset="onReset"
|
||||
@@ -8,6 +8,10 @@
|
||||
:loading="loading"
|
||||
:pagination="result"
|
||||
:rowSelectionType="selectionType"
|
||||
:card-title-keys="[
|
||||
FamilyPersonEntity.SURNAME,
|
||||
FamilyPersonEntity.GENEALOGY_NAME,
|
||||
]"
|
||||
@on-row-dblclick="onRowDblclick"
|
||||
@on-select-change="onSelectChange"
|
||||
>
|
||||
@@ -68,7 +72,7 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
@@ -83,7 +87,7 @@ import {
|
||||
} from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import {
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,14 +1,17 @@
|
||||
<template>
|
||||
<search
|
||||
<search-card
|
||||
@on-submit="onSubmit"
|
||||
@on-print="onPrint"
|
||||
@on-reset="onReset"
|
||||
@use-pagination="onPagination"
|
||||
:scrollx="400"
|
||||
:is-modal="isModal"
|
||||
:loading="loading"
|
||||
:pagination="result"
|
||||
:rowSelectionType="selectionType"
|
||||
:card-title-keys="[
|
||||
FamilyFolderFavoriteViewEntity.FAMILY_LOCAL_NAME,
|
||||
FamilyFolderFavoriteViewEntity.TOP_FOLDER_LOCAL_NAME,
|
||||
]"
|
||||
@on-select-change="onSelectChange"
|
||||
>
|
||||
<template #control> </template>
|
||||
@@ -49,7 +52,7 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
@@ -64,7 +67,7 @@ import {
|
||||
} from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import {
|
||||
DeleteOutlined,
|
||||
FolderOutlined,
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||
:card-title-keys="[FamilyTreeViewEntity.TREE_NAME, FamilyTreeViewEntity.GENEALOGY_NAME]"
|
||||
@on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
|
||||
<template #control>
|
||||
<a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
|
||||
@@ -34,13 +35,13 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { FamilyTreeResultData } from "@/data/auto/familyTreeResultData";
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination" :scrollx="400"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||
:card-title-keys="[PublishAudioEntity.PUBLISH_NAME, PublishAudioEntity.PUBLISH_LOCAL_NAME]"
|
||||
@on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
|
||||
<template #control>
|
||||
<a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
|
||||
@@ -36,13 +37,13 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { PublishAudioResultData } from "@/data/auto/publishAudioResultData";
|
||||
|
||||
@@ -29,196 +29,171 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="page-main" :style="{ height: resultH }">
|
||||
<a-row :gutter="[16, 8]">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12">
|
||||
<span style="min-width: 60px;width: 60px;">专辑编号:</span>
|
||||
</a-col>
|
||||
<a-col :lg="3" :sm="12" style="min-width: 300px;">
|
||||
<a-input :readonly="true" v-model:value="data.PublishAudio.PublishName" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 8px;">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12">
|
||||
<span style="min-width: 60px;width: 60px;">专辑名称:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="12" style="min-width: 300px;">
|
||||
<a-input :maxlength="50" :readonly="!isEdit"
|
||||
v-model:value="data.PublishAudio.PublishLocalName" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 8px;">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12">
|
||||
<span style="min-width: 60px;width: 60px;">专辑描述:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="12" style="min-width: 300px;">
|
||||
<a-textarea :auto-size="{ minRows: 3, maxRows: 5 }" :maxlength="500" :readonly="!isEdit"
|
||||
v-model:value="data.PublishAudio.Notice" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 8px;">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12">
|
||||
<div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
|
||||
<!-- 顶部信息卡 -->
|
||||
<div class="ft-hero">
|
||||
<div class="ft-hero-icon">
|
||||
<CustomerServiceOutlined />
|
||||
</div>
|
||||
<div class="ft-hero-main">
|
||||
<div class="ft-hero-name">
|
||||
{{ data.PublishAudio.PublishLocalName || "未填写专辑名称" }}
|
||||
</div>
|
||||
<div class="ft-hero-meta">
|
||||
<span class="ft-chip">编号 {{ data.PublishAudio.PublishName || "-" }}</span>
|
||||
<span class="ft-chip" v-if="data.PublishAudio.OpenIndc == 'Y'">公开</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-col>
|
||||
<a-col :lg="3" :sm="12" style="min-width: 300px;">
|
||||
<!-- 专辑信息 -->
|
||||
<div class="ft-card">
|
||||
<div class="ft-card-title">专辑信息</div>
|
||||
<div class="ft-grid">
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">专辑编号</div>
|
||||
<a-input size="large" :readonly="true" placeholder="专辑编号"
|
||||
v-model:value="data.PublishAudio.PublishName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">专辑名称</div>
|
||||
<a-input size="large" :maxlength="50" :readonly="!isEdit" placeholder="请输入专辑名称"
|
||||
v-model:value="data.PublishAudio.PublishLocalName" />
|
||||
</div>
|
||||
<div class="ft-field ft-field-full">
|
||||
<div class="ft-label">专辑描述</div>
|
||||
<a-textarea :auto-size="{ minRows: 3, maxRows: 5 }" :maxlength="500" :readonly="!isEdit"
|
||||
placeholder="请输入专辑描述" v-model:value="data.PublishAudio.Notice" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">公开</div>
|
||||
<div class="ft-check">
|
||||
<Checkbox v-model:value="data.PublishAudio.OpenIndc" true-value="Y" false-value="N"
|
||||
:disabled="!isEdit"><span
|
||||
:style="{ color: (data.PublishAudio.OpenIndc == 'Y' ? 'red' : 'black') }">
|
||||
:disabled="!isEdit">
|
||||
<span :style="{ color: (data.PublishAudio.OpenIndc == 'Y' ? 'red' : 'black') }">
|
||||
对所有人公开?
|
||||
</span>
|
||||
</Checkbox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="3">
|
||||
|
||||
</a-col>
|
||||
<a-col :lg="3" :sm="18" style="min-width: 300px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">默认</div>
|
||||
<div class="ft-check">
|
||||
<Checkbox v-model:value="data.PublishAudio.DefaultIndc" true-value="Y" false-value="N"
|
||||
:disabled="!isEdit">默认音乐厅专辑?
|
||||
</Checkbox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
|
||||
|
||||
</a-divider>
|
||||
<a-collapse v-model:activeKey="activeKey">
|
||||
<a-collapse-panel key="2" header="专辑明细">
|
||||
<a-table bordered :data-source="data.Details" :columns="columnDtls" :pagination="false"
|
||||
:custom-row="customRow" style="margin-left: 0;margin-right: 0;"
|
||||
:scroll="{ x: 360, y: 600 }">
|
||||
<template #bodyCell="datas">
|
||||
<a-card hoverable :style="cardStyle">
|
||||
<template #cover>
|
||||
<img v-if="!isEdit" style="height: 166px;width: 300px;"
|
||||
:src="datas.record.FormattedPic" />
|
||||
<span v-if="!isEdit">
|
||||
{{ datas.record.Title }}
|
||||
{{ datas.record.Author ? (' - ' + datas.record.Author) : '' }}
|
||||
</span>
|
||||
<div v-if="isEdit">
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 2px;">
|
||||
<a-col :offset="1" :lg="3" :sm="3">
|
||||
<span>标题:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18">
|
||||
<a-input v-if="isEdit" :readonly="!isEdit"
|
||||
v-model:value="datas.record.Title" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 2px;">
|
||||
<a-col :offset="1" :lg="3" :sm="3">
|
||||
<span>歌手:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18">
|
||||
<a-input v-if="isEdit" :readonly="!isEdit"
|
||||
v-model:value="datas.record.Author" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 2px;">
|
||||
<a-col :offset="1" :lg="3" :sm="3">
|
||||
<span>封面:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18">
|
||||
<a-input-search v-model:value="datas.record.Pic"
|
||||
@search="onModalSearchPic" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 2px;">
|
||||
<a-col :offset="1" :lg="3" :sm="3">
|
||||
<span>地址:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18">
|
||||
<a-input-search v-model:value="datas.record.Url"
|
||||
@search="onModalSearchUrl" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 2px;">
|
||||
<a-col :offset="1" :lg="3" :sm="3">
|
||||
<span>歌词:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18">
|
||||
<a-input-search v-model:value="datas.record.Lrc"
|
||||
@search="onModalSearchLrc" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 2px;">
|
||||
<a-col :offset="1" :lg="3" :sm="3">
|
||||
<span>备注:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18">
|
||||
<a-input v-model:value="datas.record.Notice" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
:disabled="!isEdit">默认音乐厅专辑?</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 专辑明细 -->
|
||||
<div class="ft-card">
|
||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
||||
<a-collapse-panel key="2" header="专辑明细">
|
||||
<div class="ft-detail-list">
|
||||
<div v-for="(record, index) in data.Details" :key="record.DetailId || index"
|
||||
class="ft-detail" :class="{ 'ft-detail-selected': selected.includes(record) }"
|
||||
@click="customRow(record).onclick($event)"
|
||||
@dblclick="customRow(record).onDblclick($event)">
|
||||
<img v-if="!isEdit" class="ft-detail-cover" :src="record.FormattedPic" />
|
||||
<div class="ft-detail-main">
|
||||
<div v-if="!isEdit" class="ft-detail-title">{{ record.Title || "未命名" }}</div>
|
||||
<div v-if="!isEdit && record.Author" class="ft-detail-sub">{{ record.Author }}</div>
|
||||
<div v-if="isEdit" class="ft-grid">
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">标题</div>
|
||||
<a-input size="large" v-model:value="record.Title" placeholder="请输入标题" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">歌手</div>
|
||||
<a-input size="large" v-model:value="record.Author" placeholder="请输入歌手" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">封面</div>
|
||||
<a-input-search size="large" v-model:value="record.Pic" placeholder="请选择封面文件"
|
||||
@search="onModalSearchPic" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">地址</div>
|
||||
<a-input-search size="large" v-model:value="record.Url" placeholder="请选择音频文件"
|
||||
@search="onModalSearchUrl" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">歌词</div>
|
||||
<a-input-search size="large" v-model:value="record.Lrc" placeholder="请选择歌词文件"
|
||||
@search="onModalSearchLrc" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">备注</div>
|
||||
<a-input size="large" v-model:value="record.Notice" placeholder="请输入备注" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<span v-if="isEdit" @click="upSon(datas.index)">
|
||||
<UpSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }"
|
||||
/>上移
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-detail-actions">
|
||||
<span @click.stop="upSon(index)">
|
||||
<UpSquareTwoTone class="ft-action" />上移
|
||||
</span>
|
||||
<span v-if="isEdit" @click="downSon(datas.index)">
|
||||
<DownSquareTwoTone
|
||||
:style="{ fontSize: '24px', color: '#08c', marginLeft: '20px', marginRight: '20px' }"
|
||||
/>下移
|
||||
<span @click.stop="downSon(index)">
|
||||
<DownSquareTwoTone class="ft-action" />下移
|
||||
</span>
|
||||
<span v-if="isEdit" @click="deleteSon(datas.record.DetailId)" >
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
/>删除
|
||||
<span class="ft-action-danger" @click.stop="deleteSon(record.DetailId)">
|
||||
<DeleteOutlined class="ft-action" />删除
|
||||
</span>
|
||||
</template>
|
||||
</a-card>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!data.Details || !data.Details.length" class="ft-empty">暂无专辑明细</div>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
|
||||
</a-divider>
|
||||
<a-collapse v-model:activeKey="activeKey" v-if="canAmend">
|
||||
<a-collapse-panel key="3" header="公开群组明细">
|
||||
<a-table bordered :data-source="data.FamilyGroups" :columns="columnFamilyGroups"
|
||||
: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 === 'operation' && isEdit">
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deleteFamilyGroup(datas.record.FamilyName)" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === FamilyGroupEntity.FAMILY_NAME && !isEdit">
|
||||
<span style="color: blue;font-size:18px;cursor: pointer;"
|
||||
@click="onViewActorOperation(datas.record.FamilyName)"> {{
|
||||
datas.record.FamilyName
|
||||
}}</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit">
|
||||
<PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addFamilyGroup" />
|
||||
</template>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<!-- 公开群组明细 -->
|
||||
<div class="ft-card" v-if="canAmend">
|
||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
||||
<a-collapse-panel key="3" header="公开群组明细">
|
||||
<div class="ft-list">
|
||||
<div v-for="(record, index) in data.FamilyGroups"
|
||||
:key="record.FamilyName || 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.FamilyName)">
|
||||
{{ record.FamilyName || "未命名群组" }}
|
||||
</span>
|
||||
<span v-else class="ft-item-name">
|
||||
{{ record.FamilyName || "未命名群组" }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<DeleteOutlined class="ft-action ft-action-delete"
|
||||
@click="deleteFamilyGroup(record.FamilyName)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">群组名称</span>
|
||||
<span class="ft-item-text">
|
||||
{{ (record as any).FamilyLocalName || "-" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">群组描述</span>
|
||||
<span class="ft-item-text">
|
||||
{{ (record as any).Notice || "-" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!data.FamilyGroups || !data.FamilyGroups.length" class="ft-empty">
|
||||
暂无公开群组
|
||||
</div>
|
||||
<a-button v-if="isEdit" class="ft-add-btn" type="dashed" block @click="addFamilyGroup">
|
||||
<PlusSquareTwoTone /> 新增公开群组
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
<div style="">
|
||||
@@ -256,16 +231,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dragModal v-model:open="showModal" width="80%" title="作品发布查询" @cancel="handleCance" :mask-closable="false"
|
||||
<dragModal v-model:open="showModal" title="作品发布查询" @cancel="handleCance" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelect">
|
||||
<audioPublishEnquiry ref="enquiry" @on-row-dblclick="handleSelect"></audioPublishEnquiry>
|
||||
</dragModal>
|
||||
<dragModal v-model:open="showModalFamilyGroup" width="60%" title="群组查询" :mask-closable="false"
|
||||
<dragModal v-model:open="showModalFamilyGroup" title="群组查询" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelectFamilyGroup">
|
||||
<familyGroupEnquiry ref="groupEnquiry" @on-row-dblclick="handleSelectFamilyGroup">
|
||||
</familyGroupEnquiry>
|
||||
</dragModal>
|
||||
<dragModal v-model:open="showModalDmsFile" width="60%" title="文件查询" :mask-closable="false"
|
||||
<dragModal v-model:open="showModalDmsFile" title="文件查询" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelectDmsFile">
|
||||
<dmsFileEnquiryModal ref="dmsFileEnquiry" @on-row-dblclick="handleSelectDmsFile">
|
||||
</dmsFileEnquiryModal>
|
||||
@@ -276,7 +251,7 @@
|
||||
import { ref, unref, onBeforeMount, computed, 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, CustomerServiceOutlined } from "@ant-design/icons-vue";
|
||||
import { PermissionContext, usePermissionContext } from "@/hooks/PermissionContext"
|
||||
import dragModal from "@/components/basic/DragModal.vue"
|
||||
import Checkbox from '@/components/basic/check-box/index.vue';
|
||||
@@ -769,6 +744,9 @@ const columnFamilyGroups = ref([
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
||||
@import "../../styles/ft-mobile.less";
|
||||
|
||||
.page-container {
|
||||
margin-right: 0px;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination" :scrollx="400"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||
:card-title-keys="[PublishPhotoEntity.PUBLISH_NAME, PublishPhotoEntity.PUBLISH_LOCAL_NAME]"
|
||||
@on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
|
||||
<template #control>
|
||||
<a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
|
||||
@@ -36,13 +37,13 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { PublishPhotoResultData } from "@/data/auto/publishPhotoResultData";
|
||||
|
||||
@@ -59,66 +59,74 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="page-main" :style="{ height: resultH }">
|
||||
<a-row :gutter="[16, 8]">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12">
|
||||
<span style="min-width: 60px; width: 60px">相册编号:</span>
|
||||
</a-col>
|
||||
<a-col :lg="3" :sm="12" style="min-width: 300px">
|
||||
<a-input
|
||||
:readonly="true"
|
||||
v-model:value="data.PublishPhoto.PublishName"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 8px">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12">
|
||||
<span style="min-width: 60px; width: 60px">相册名称:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="12" style="min-width: 300px">
|
||||
<a-input
|
||||
:maxlength="50"
|
||||
:readonly="!isEdit"
|
||||
v-model:value="data.PublishPhoto.PublishLocalName"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 8px">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12">
|
||||
<span style="min-width: 60px; width: 60px">相册描述:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="12" style="min-width: 300px">
|
||||
<a-textarea
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
:maxlength="500"
|
||||
:readonly="!isEdit"
|
||||
v-model:value="data.PublishPhoto.Notice"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 8px">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12"> </a-col>
|
||||
<a-col :lg="3" :sm="12" style="min-width: 300px">
|
||||
<div
|
||||
class="page-main ft-page"
|
||||
:class="{ 'ft-readonly': !isEdit }"
|
||||
:style="{ height: resultH }"
|
||||
>
|
||||
<!-- 顶部信息卡 -->
|
||||
<div class="ft-hero">
|
||||
<div class="ft-hero-icon">
|
||||
<PictureOutlined />
|
||||
</div>
|
||||
<div class="ft-hero-main">
|
||||
<div class="ft-hero-name">
|
||||
{{ data.PublishPhoto.PublishLocalName || "未填写相册名称" }}
|
||||
</div>
|
||||
<div class="ft-hero-meta">
|
||||
<span class="ft-chip">
|
||||
编号 {{ data.PublishPhoto.PublishName || "-" }}
|
||||
</span>
|
||||
<span class="ft-chip" v-if="data.PublishPhoto.OpenIndc == 'Y'">
|
||||
公开
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 相册信息 -->
|
||||
<div class="ft-card">
|
||||
<div class="ft-card-title">相册信息</div>
|
||||
<div class="ft-grid">
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">相册编号</div>
|
||||
<a-input
|
||||
size="large"
|
||||
:readonly="true"
|
||||
placeholder="相册编号"
|
||||
v-model:value="data.PublishPhoto.PublishName"
|
||||
/>
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">相册名称</div>
|
||||
<a-input
|
||||
size="large"
|
||||
:maxlength="50"
|
||||
:readonly="!isEdit"
|
||||
placeholder="请输入相册名称"
|
||||
v-model:value="data.PublishPhoto.PublishLocalName"
|
||||
/>
|
||||
</div>
|
||||
<div class="ft-field ft-field-full">
|
||||
<div class="ft-label">相册描述</div>
|
||||
<a-textarea
|
||||
:auto-size="{ minRows: 3, maxRows: 5 }"
|
||||
:maxlength="500"
|
||||
:readonly="!isEdit"
|
||||
placeholder="请输入相册描述"
|
||||
v-model:value="data.PublishPhoto.Notice"
|
||||
/>
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">公开</div>
|
||||
<div class="ft-check">
|
||||
<Checkbox
|
||||
v-model:value="data.PublishPhoto.OpenIndc"
|
||||
true-value="Y"
|
||||
false-value="N"
|
||||
:disabled="!isEdit"
|
||||
><span
|
||||
>
|
||||
<span
|
||||
:style="{
|
||||
color:
|
||||
data.PublishPhoto.OpenIndc == 'Y' ? 'red' : 'black',
|
||||
@@ -127,137 +135,136 @@
|
||||
对所有人公开?
|
||||
</span>
|
||||
</Checkbox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="3"> </a-col>
|
||||
<a-col :lg="3" :sm="18" style="min-width: 300px">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">默认</div>
|
||||
<div class="ft-check">
|
||||
<Checkbox
|
||||
v-model:value="data.PublishPhoto.DefaultIndc"
|
||||
true-value="Y"
|
||||
false-value="N"
|
||||
:disabled="!isEdit"
|
||||
>默认相册展览?
|
||||
</Checkbox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider
|
||||
orientation="left"
|
||||
orientation-margin="0px"
|
||||
dashed
|
||||
style="background-color: silver"
|
||||
>
|
||||
</a-divider>
|
||||
<a-collapse v-model:activeKey="activeKey">
|
||||
<a-collapse-panel key="2" header="相册明细">
|
||||
<a-table
|
||||
bordered
|
||||
:data-source="data.Details"
|
||||
:columns="columnDtls"
|
||||
:pagination="false"
|
||||
:scroll="{ x: 360, y: 600 }"
|
||||
>
|
||||
<template #bodyCell="datas">
|
||||
<a-card hoverable style="width: 300px">
|
||||
<template #cover>
|
||||
<a-image
|
||||
style="height: 466px"
|
||||
:src="datas.record.FileName"
|
||||
>默认相册展览?</Checkbox
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 相册明细 -->
|
||||
<div class="ft-card">
|
||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
||||
<a-collapse-panel key="2" header="相册明细">
|
||||
<div class="ft-detail-list">
|
||||
<div
|
||||
v-for="(record, index) in data.Details"
|
||||
:key="record.DetailId || index"
|
||||
class="ft-detail"
|
||||
>
|
||||
<a-image class="ft-detail-cover" :src="record.FileName" />
|
||||
<div class="ft-detail-main">
|
||||
<a-textarea
|
||||
v-if="isEdit"
|
||||
:rows="4"
|
||||
:readonly="!isEdit"
|
||||
placeholder="请输入图片描述"
|
||||
v-model:value="record.Notice"
|
||||
/>
|
||||
</template>
|
||||
<a-card-meta>
|
||||
<template #description>
|
||||
<a-textarea
|
||||
v-if="isEdit"
|
||||
:rows="4"
|
||||
:readonly="!isEdit"
|
||||
v-model:value="datas.record.Notice"
|
||||
/>
|
||||
<span v-if="!isEdit">{{ datas.record.Notice }}</span>
|
||||
</template>
|
||||
</a-card-meta>
|
||||
<template #actions>
|
||||
<span v-if="isEdit" @click="upSon(datas.index)">
|
||||
<UpSquareTwoTone
|
||||
:style="{ fontSize: '24px', color: '#08c' }"
|
||||
/>上移
|
||||
<div v-else class="ft-detail-sub">
|
||||
{{ record.Notice || "无描述" }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-detail-actions">
|
||||
<span @click="upSon(index)">
|
||||
<UpSquareTwoTone class="ft-action" />上移
|
||||
</span>
|
||||
<span v-if="isEdit" @click="downSon(datas.index)">
|
||||
<DownSquareTwoTone
|
||||
:style="{
|
||||
fontSize: '24px',
|
||||
color: '#08c',
|
||||
marginLeft: '20px',
|
||||
marginRight: '20px',
|
||||
}"
|
||||
/>下移
|
||||
<span @click="downSon(index)">
|
||||
<DownSquareTwoTone class="ft-action" />下移
|
||||
</span>
|
||||
<span v-if="isEdit" @click="deleteSon(datas.record.DetailId)">
|
||||
<span
|
||||
class="ft-action-danger"
|
||||
@click="deleteSon(record.DetailId)"
|
||||
>
|
||||
<DeleteOutlined class="ft-action" />删除
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!data.Details || !data.Details.length"
|
||||
class="ft-empty"
|
||||
>
|
||||
暂无相册明细
|
||||
</div>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
|
||||
<!-- 公开群组明细 -->
|
||||
<div class="ft-card" v-if="canAmend">
|
||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
||||
<a-collapse-panel key="3" header="公开群组明细">
|
||||
<div class="ft-list">
|
||||
<div
|
||||
v-for="(record, index) in data.FamilyGroups"
|
||||
:key="record.FamilyName || 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.FamilyName)"
|
||||
>
|
||||
{{ record.FamilyName || "未命名群组" }}
|
||||
</span>
|
||||
<span v-else class="ft-item-name">
|
||||
{{ record.FamilyName || "未命名群组" }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<DeleteOutlined
|
||||
:style="{ fontSize: '24px', color: 'red' }"
|
||||
/>删除
|
||||
</span>
|
||||
</template>
|
||||
</a-card>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-divider
|
||||
orientation="left"
|
||||
orientation-margin="0px"
|
||||
dashed
|
||||
style="background-color: silver"
|
||||
>
|
||||
</a-divider>
|
||||
<a-collapse v-model:activeKey="activeKey" v-if="canAmend">
|
||||
<a-collapse-panel key="3" header="公开群组明细">
|
||||
<a-table
|
||||
bordered
|
||||
:data-source="data.FamilyGroups"
|
||||
:columns="columnFamilyGroups"
|
||||
: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 === 'operation' && isEdit"
|
||||
class="ft-action ft-action-delete"
|
||||
@click="deleteFamilyGroup(record.FamilyName)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">群组名称</span>
|
||||
<span class="ft-item-text">
|
||||
{{ (record as any).FamilyLocalName || "-" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">群组描述</span>
|
||||
<span class="ft-item-text">
|
||||
{{ (record as any).Notice || "-" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!data.FamilyGroups || !data.FamilyGroups.length"
|
||||
class="ft-empty"
|
||||
>
|
||||
<DeleteOutlined
|
||||
:style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deleteFamilyGroup(datas.record.FamilyName)"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
datas.column.dataIndex === FamilyGroupEntity.FAMILY_NAME &&
|
||||
!isEdit
|
||||
"
|
||||
暂无公开群组
|
||||
</div>
|
||||
<a-button
|
||||
v-if="isEdit"
|
||||
class="ft-add-btn"
|
||||
type="dashed"
|
||||
block
|
||||
@click="addFamilyGroup"
|
||||
>
|
||||
<span
|
||||
style="color: blue; font-size: 18px; cursor: pointer"
|
||||
@click="onViewActorOperation(datas.record.FamilyName)"
|
||||
>
|
||||
{{ datas.record.FamilyName }}</span
|
||||
>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit">
|
||||
<PlusSquareTwoTone
|
||||
:style="{ fontSize: '24px', color: '#08c' }"
|
||||
@click="addFamilyGroup"
|
||||
/>
|
||||
</template>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<PlusSquareTwoTone /> 新增公开群组
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
<div style="">
|
||||
@@ -338,7 +345,6 @@
|
||||
</div>
|
||||
<dragModal
|
||||
v-model:open="showModal"
|
||||
width="80%"
|
||||
title="作品发布查询"
|
||||
@cancel="handleCance"
|
||||
:mask-closable="false"
|
||||
@@ -352,7 +358,6 @@
|
||||
</dragModal>
|
||||
<dragModal
|
||||
v-model:open="showModalFamilyGroup"
|
||||
width="60%"
|
||||
title="群组查询"
|
||||
:mask-closable="false"
|
||||
:fullscreen="width < 640"
|
||||
@@ -381,6 +386,7 @@ import {
|
||||
PlusSquareTwoTone,
|
||||
DownSquareTwoTone,
|
||||
UpSquareTwoTone,
|
||||
PictureOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import {
|
||||
PermissionContext,
|
||||
@@ -755,6 +761,9 @@ const columnFamilyGroups = ref([
|
||||
]);
|
||||
</script>
|
||||
<style lang="less">
|
||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
||||
@import "../../styles/ft-mobile.less";
|
||||
|
||||
.page-container {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination" :scrollx="400"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||
:card-title-keys="[PublishVideoEntity.PUBLISH_NAME, PublishVideoEntity.PUBLISH_LOCAL_NAME]"
|
||||
@on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
|
||||
<template #control>
|
||||
<a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
|
||||
@@ -36,13 +37,13 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { PublishVideoResultData } from "@/data/auto/publishVideoResultData";
|
||||
|
||||
@@ -29,152 +29,146 @@
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div class="page-main" :style="{ height: resultH }">
|
||||
<a-row :gutter="[16, 8]">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12">
|
||||
<span style="min-width: 60px;width: 60px;">专辑编号:</span>
|
||||
</a-col>
|
||||
<a-col :lg="3" :sm="12" style="min-width: 300px;">
|
||||
<a-input :readonly="true" v-model:value="data.PublishVideo.PublishName" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 8px;">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12">
|
||||
<span style="min-width: 60px;width: 60px;">专辑名称:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="12" style="min-width: 300px;">
|
||||
<a-input :maxlength="50" :readonly="!isEdit"
|
||||
v-model:value="data.PublishVideo.PublishLocalName" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 8px;">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12">
|
||||
<span style="min-width: 60px;width: 60px;">专辑描述:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="12" style="min-width: 300px;">
|
||||
<a-textarea :auto-size="{ minRows: 3, maxRows: 5 }" :maxlength="500" :readonly="!isEdit"
|
||||
v-model:value="data.PublishVideo.Notice" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 8px;">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="12">
|
||||
<div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
|
||||
<!-- 顶部信息卡 -->
|
||||
<div class="ft-hero">
|
||||
<div class="ft-hero-icon">
|
||||
<VideoCameraOutlined />
|
||||
</div>
|
||||
<div class="ft-hero-main">
|
||||
<div class="ft-hero-name">
|
||||
{{ data.PublishVideo.PublishLocalName || "未填写专辑名称" }}
|
||||
</div>
|
||||
<div class="ft-hero-meta">
|
||||
<span class="ft-chip">编号 {{ data.PublishVideo.PublishName || "-" }}</span>
|
||||
<span class="ft-chip" v-if="data.PublishVideo.OpenIndc == 'Y'">公开</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-col>
|
||||
<a-col :lg="3" :sm="12" style="min-width: 300px;">
|
||||
<!-- 专辑信息 -->
|
||||
<div class="ft-card">
|
||||
<div class="ft-card-title">专辑信息</div>
|
||||
<div class="ft-grid">
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">专辑编号</div>
|
||||
<a-input size="large" :readonly="true" placeholder="专辑编号"
|
||||
v-model:value="data.PublishVideo.PublishName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">专辑名称</div>
|
||||
<a-input size="large" :maxlength="50" :readonly="!isEdit" placeholder="请输入专辑名称"
|
||||
v-model:value="data.PublishVideo.PublishLocalName" />
|
||||
</div>
|
||||
<div class="ft-field ft-field-full">
|
||||
<div class="ft-label">专辑描述</div>
|
||||
<a-textarea :auto-size="{ minRows: 3, maxRows: 5 }" :maxlength="500" :readonly="!isEdit"
|
||||
placeholder="请输入专辑描述" v-model:value="data.PublishVideo.Notice" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">公开</div>
|
||||
<div class="ft-check">
|
||||
<Checkbox v-model:value="data.PublishVideo.OpenIndc" true-value="Y" false-value="N"
|
||||
:disabled="!isEdit"><span
|
||||
:style="{ color: (data.PublishVideo.OpenIndc == 'Y' ? 'red' : 'black') }">
|
||||
:disabled="!isEdit">
|
||||
<span :style="{ color: (data.PublishVideo.OpenIndc == 'Y' ? 'red' : 'black') }">
|
||||
对所有人公开?
|
||||
</span>
|
||||
</Checkbox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="true" align="middle">
|
||||
<a-col :lg="3" :sm="3">
|
||||
|
||||
</a-col>
|
||||
<a-col :lg="3" :sm="18" style="min-width: 300px;">
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">默认</div>
|
||||
<div class="ft-check">
|
||||
<Checkbox v-model:value="data.PublishVideo.DefaultIndc" true-value="Y" false-value="N"
|
||||
:disabled="!isEdit">默认音乐厅专辑?
|
||||
</Checkbox>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
|
||||
|
||||
</a-divider>
|
||||
<a-collapse v-model:activeKey="activeKey">
|
||||
<a-collapse-panel key="2" header="专辑明细">
|
||||
<a-table bordered :data-source="data.Details" :columns="columnDtls" :pagination="false"
|
||||
:custom-row="customRow" style="margin-left: 0;margin-right: 0;"
|
||||
:scroll="{ x: 360, y: 600 }">
|
||||
<template #bodyCell="datas">
|
||||
<a-card hoverable :style="cardStyle">
|
||||
<template #cover>
|
||||
<img v-if="!isEdit" style="height: 166px;width: 300px;"
|
||||
:src="datas.record.FormattedPic" />
|
||||
<span v-if="!isEdit">
|
||||
{{ datas.record.Title }}
|
||||
{{ datas.record.Author ? (' - ' + datas.record.Author) : '' }}
|
||||
</span>
|
||||
<div v-if="isEdit">
|
||||
<a-row :gutter="[16, 8]" style="margin-top: 2px;">
|
||||
<a-col :offset="1" :lg="3" :sm="3">
|
||||
<span>标题:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18">
|
||||
<a-input v-if="isEdit" :readonly="!isEdit"
|
||||
v-model:value="datas.record.Title" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
:disabled="!isEdit">默认音乐厅专辑?</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 专辑明细 -->
|
||||
<div class="ft-card">
|
||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
||||
<a-collapse-panel key="2" header="专辑明细">
|
||||
<div class="ft-detail-list">
|
||||
<div v-for="(record, index) in data.Details" :key="record.DetailId || index"
|
||||
class="ft-detail" :class="{ 'ft-detail-selected': selected.includes(record) }"
|
||||
@click="customRow(record).onclick($event)"
|
||||
@dblclick="customRow(record).onDblclick($event)">
|
||||
<img v-if="!isEdit" class="ft-detail-cover" :src="record.FormattedPic" />
|
||||
<div class="ft-detail-main">
|
||||
<div v-if="!isEdit" class="ft-detail-title">{{ record.Title || "未命名" }}</div>
|
||||
<div v-if="!isEdit && record.Author" class="ft-detail-sub">{{ record.Author }}</div>
|
||||
<div v-if="isEdit" class="ft-field">
|
||||
<div class="ft-label">标题</div>
|
||||
<a-input size="large" v-model:value="record.Title" placeholder="请输入标题" />
|
||||
</div>
|
||||
</template>
|
||||
<template #actions>
|
||||
<span v-if="isEdit" @click="upSon(datas.index)" >
|
||||
<UpSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }"
|
||||
/>上移
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-detail-actions">
|
||||
<span @click.stop="upSon(index)">
|
||||
<UpSquareTwoTone class="ft-action" />上移
|
||||
</span>
|
||||
<span v-if="isEdit" @click="downSon(datas.index)">
|
||||
<DownSquareTwoTone
|
||||
:style="{ fontSize: '24px', color: '#08c', marginLeft: '20px', marginRight: '20px' }"
|
||||
/>下移
|
||||
<span @click.stop="downSon(index)">
|
||||
<DownSquareTwoTone class="ft-action" />下移
|
||||
</span>
|
||||
<span v-if="isEdit" @click="deleteSon(datas.record.DetailId)">
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
/>删除
|
||||
<span class="ft-action-danger" @click.stop="deleteSon(record.DetailId)">
|
||||
<DeleteOutlined class="ft-action" />删除
|
||||
</span>
|
||||
</template>
|
||||
</a-card>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!data.Details || !data.Details.length" class="ft-empty">暂无专辑明细</div>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
|
||||
</a-divider>
|
||||
<a-collapse v-model:activeKey="activeKey" v-if="canAmend">
|
||||
<a-collapse-panel key="3" header="公开群组明细">
|
||||
<a-table bordered :data-source="data.FamilyGroups" :columns="columnFamilyGroups"
|
||||
: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 === 'operation' && isEdit">
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deleteFamilyGroup(datas.record.FamilyName)" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === FamilyGroupEntity.FAMILY_NAME && !isEdit">
|
||||
<span style="color: blue;font-size:18px;cursor: pointer;"
|
||||
@click="onViewActorOperation(datas.record.FamilyName)"> {{
|
||||
datas.record.FamilyName
|
||||
}}</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit">
|
||||
<PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addFamilyGroup" />
|
||||
</template>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
<!-- 公开群组明细 -->
|
||||
<div class="ft-card" v-if="canAmend">
|
||||
<a-collapse v-model:activeKey="activeKey" class="ft-collapse">
|
||||
<a-collapse-panel key="3" header="公开群组明细">
|
||||
<div class="ft-list">
|
||||
<div v-for="(record, index) in data.FamilyGroups"
|
||||
:key="record.FamilyName || 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.FamilyName)">
|
||||
{{ record.FamilyName || "未命名群组" }}
|
||||
</span>
|
||||
<span v-else class="ft-item-name">
|
||||
{{ record.FamilyName || "未命名群组" }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<DeleteOutlined class="ft-action ft-action-delete"
|
||||
@click="deleteFamilyGroup(record.FamilyName)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">群组名称</span>
|
||||
<span class="ft-item-text">
|
||||
{{ (record as any).FamilyLocalName || "-" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">群组描述</span>
|
||||
<span class="ft-item-text">
|
||||
{{ (record as any).Notice || "-" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!data.FamilyGroups || !data.FamilyGroups.length" class="ft-empty">
|
||||
暂无公开群组
|
||||
</div>
|
||||
<a-button v-if="isEdit" class="ft-add-btn" type="dashed" block @click="addFamilyGroup">
|
||||
<PlusSquareTwoTone /> 新增公开群组
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
<div style="">
|
||||
@@ -212,16 +206,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dragModal v-model:open="showModal" width="80%" title="作品发布查询" @cancel="handleCance" :mask-closable="false"
|
||||
<dragModal v-model:open="showModal" title="作品发布查询" @cancel="handleCance" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelect">
|
||||
<videoPublishEnquiry ref="enquiry" @on-row-dblclick="handleSelect"></videoPublishEnquiry>
|
||||
</dragModal>
|
||||
<dragModal v-model:open="showModalFamilyGroup" width="60%" title="群组查询" :mask-closable="false"
|
||||
<dragModal v-model:open="showModalFamilyGroup" title="群组查询" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelectFamilyGroup">
|
||||
<familyGroupEnquiry ref="groupEnquiry" @on-row-dblclick="handleSelectFamilyGroup">
|
||||
</familyGroupEnquiry>
|
||||
</dragModal>
|
||||
<dragModal v-model:open="showModalDmsFile" width="60%" title="文件查询" :mask-closable="false"
|
||||
<dragModal v-model:open="showModalDmsFile" title="文件查询" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelectDmsFile">
|
||||
<dmsFileEnquiryModal ref="dmsFileEnquiry" @on-row-dblclick="handleSelectDmsFile">
|
||||
</dmsFileEnquiryModal>
|
||||
@@ -232,7 +226,7 @@
|
||||
import { ref, unref, onBeforeMount, computed, 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, VideoCameraOutlined } from "@ant-design/icons-vue";
|
||||
import { PermissionContext, usePermissionContext } from "@/hooks/PermissionContext"
|
||||
import dragModal from "@/components/basic/DragModal.vue"
|
||||
import Checkbox from '@/components/basic/check-box/index.vue';
|
||||
@@ -725,6 +719,9 @@ const columnFamilyGroups = ref([
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
||||
@import "../../styles/ft-mobile.less";
|
||||
|
||||
.page-container {
|
||||
margin-right: 0px;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||
:card-title-keys="[SecurityActorEntity.ACTOR_NAME, SecurityActorEntity.ACTOR_LOCAL_NAME]"
|
||||
@on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
|
||||
<template #control>
|
||||
<a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
|
||||
@@ -35,13 +36,13 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { SecurityActorResultData } from "@/data/auto/securityActorResultData";
|
||||
|
||||
@@ -29,97 +29,128 @@
|
||||
</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 required :readonly="!isEdit || data.SecurityActor.ActorName" v-model:value="data.SecurityActor.ActorName" />
|
||||
</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 required :readonly="!isEdit"
|
||||
v-model:value="data.SecurityActor.ActorLocalName" />
|
||||
</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 :readonly="!isEdit" v-model:value="data.SecurityActor.ActorEngName" />
|
||||
</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.SecurityActor.ActorLocalName || "未填写角色名称" }}
|
||||
</div>
|
||||
<div class="ft-hero-meta">
|
||||
<span class="ft-chip">
|
||||
编号 {{ data.SecurityActor.ActorName || "-" }}
|
||||
</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" required placeholder="请输入角色名称"
|
||||
:readonly="!isEdit || !!data.SecurityActor.ActorName"
|
||||
v-model:value="data.SecurityActor.ActorName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">
|
||||
中文名称<span class="ft-required">*</span>
|
||||
</div>
|
||||
<a-input size="large" required placeholder="请输入中文名称" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityActor.ActorLocalName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">英文名称</div>
|
||||
<a-input size="large" placeholder="请输入英文名称" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityActor.ActorEngName" />
|
||||
</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.SecurityActorGroups" :columns="securityGroups"
|
||||
: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.GROUP_NAME && !isEdit">
|
||||
<span style="color: blue;font-size:18px;cursor: pointer;"
|
||||
@click="onViewGroupOperation(datas.record.GroupName)"> {{ datas.record.GroupName
|
||||
}}</span>
|
||||
</template>
|
||||
<template v-else-if="datas.column.dataIndex === 'operation' && isEdit">
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deleteGroup(datas.record.GroupName)" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit">
|
||||
<PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addGroup" />
|
||||
</template>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="用户明细">
|
||||
<a-table bordered :data-source="data.SecurityUserActors" :columns="securityUsers"
|
||||
: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 === SecurityUserDisplayData.USER_NAME && !isEdit">
|
||||
<span style="color: blue;font-size:18px;cursor: pointer;"
|
||||
@click="onViewUserOperation(datas.record.UserName)"> {{ datas.record.UserName
|
||||
}}</span>
|
||||
</template>
|
||||
<template v-else-if="datas.column.dataIndex === 'operation' && isEdit">
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deleteUser(datas.record.UserName)" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit">
|
||||
<PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addUser" />
|
||||
</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.SecurityActorGroups"
|
||||
:key="record.GroupName || 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="onViewGroupOperation(record.GroupName)">
|
||||
{{ record.GroupName || "未命名组别" }}
|
||||
</span>
|
||||
<span v-else class="ft-item-name">
|
||||
{{ record.GroupName || "未命名组别" }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<DeleteOutlined class="ft-action ft-action-delete"
|
||||
@click="deleteGroup(record.GroupName)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">中文名称</span>
|
||||
<span class="ft-item-text">{{ record.GroupLocalName || "-" }}</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="addGroup">
|
||||
<PlusSquareTwoTone /> 新增组别
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="用户明细">
|
||||
<div class="ft-list">
|
||||
<div v-for="(record, index) in data.SecurityUserActors"
|
||||
:key="record.UserName || 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="onViewUserOperation(record.UserName)">
|
||||
{{ record.UserName || "未命名用户" }}
|
||||
</span>
|
||||
<span v-else class="ft-item-name">
|
||||
{{ record.UserName || "未命名用户" }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<DeleteOutlined class="ft-action ft-action-delete"
|
||||
@click="deleteUser(record.UserName)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">中文名称</span>
|
||||
<span class="ft-item-text">{{ record.UserLocalName || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!data.SecurityUserActors || !data.SecurityUserActors.length"
|
||||
class="ft-empty">
|
||||
暂无用户明细
|
||||
</div>
|
||||
<a-button v-if="isEdit" class="ft-add-btn" type="dashed" block @click="addUser">
|
||||
<PlusSquareTwoTone /> 新增用户
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
<div style="">
|
||||
@@ -155,15 +186,15 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dragModal v-model:open="modelOption.isModalActor" width="80%" title="角色查询" :mask-closable="false"
|
||||
<dragModal v-model:open="modelOption.isModalActor" title="角色查询" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelect">
|
||||
<ActorEnquiry ref="enquiry" @on-row-dblclick="handleSelect"></ActorEnquiry>
|
||||
</dragModal>
|
||||
<dragModal v-model:open="modelOption.isModalUser" width="80%" title="用户查询" :mask-closable="false"
|
||||
<dragModal v-model:open="modelOption.isModalUser" title="用户查询" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelectUser">
|
||||
<UserEnquiry ref="userEnquiry" @on-row-dblclick="handleSelectUser"></UserEnquiry>
|
||||
</dragModal>
|
||||
<dragModal v-model:open="modelOption.isModalGroup" width="80%" title="组别查询" :mask-closable="false"
|
||||
<dragModal v-model:open="modelOption.isModalGroup" title="组别查询" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelectGroup">
|
||||
<GroupEnquiry ref="groupEnquiry" @on-row-dblclick="handleSelectGroup"></GroupEnquiry>
|
||||
</dragModal>
|
||||
@@ -173,7 +204,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 UserEnquiry from "./UserEnquiry.vue";
|
||||
@@ -560,6 +591,9 @@ const onViewUserOperation = ((userName: string) => {
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
||||
@import "../../styles/ft-mobile.less";
|
||||
|
||||
.page-container {
|
||||
margin-right: 0px;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||
:card-title-keys="[SecurityFunctionDisplayData.FUNCTION_NAME, SecurityFunctionDisplayData.FUNCTION_LOCAL_NAME]"
|
||||
@on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
|
||||
<template #control>
|
||||
<a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
|
||||
@@ -34,13 +35,13 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { SecurityFunctionResultData } from "@/data/auto/securityFunctionResultData";
|
||||
|
||||
@@ -29,173 +29,154 @@
|
||||
</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 required :readonly="!isEdit || data.SecurityFunction.FunctionName"
|
||||
v-model:value="data.SecurityFunction.FunctionName" />
|
||||
</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 required :readonly="!isEdit"
|
||||
v-model:value="data.SecurityFunction.FunctionLocalName" />
|
||||
</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 :readonly="!isEdit" v-model:value="data.SecurityFunction.FunctionEngName" />
|
||||
</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;">
|
||||
<IconsSelect :disabled="!isEdit" v-model:value="data.SecurityFunction.Icon">
|
||||
</IconsSelect>
|
||||
</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-select v-model:value="data.SecurityFunction.FunctionIndc" :disabled="!isEdit"
|
||||
@change="onFunctionIndcChange" style="width: 100%;min-width:124px;">
|
||||
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{
|
||||
o.DisplayName }}</a-select-option>
|
||||
</a-select>
|
||||
</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-search :disabled="!isEdit" v-model:value="data.SecurityFunction.PermissionName"
|
||||
@search="onModalPermission" />
|
||||
</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 :readonly="!isEdit" v-model:value="data.SecurityFunction.PageUrl"
|
||||
flex="auto" />
|
||||
</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>Api路由:</span>
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18" style="min-width: 300px;">
|
||||
<a-input :readonly="!isEdit" v-model:value="data.SecurityFunction.ApiRoute"
|
||||
flex="auto" />
|
||||
</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 :readonly="!isEdit" v-model:value="data.SecurityFunction.PageName"
|
||||
flex="auto" />
|
||||
</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;">
|
||||
<div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
|
||||
<!-- 顶部信息卡 -->
|
||||
<div class="ft-hero">
|
||||
<div class="ft-hero-icon">
|
||||
<AppstoreOutlined />
|
||||
</div>
|
||||
<div class="ft-hero-main">
|
||||
<div class="ft-hero-name">
|
||||
{{ data.SecurityFunction.FunctionLocalName || "未填写功能名称" }}
|
||||
</div>
|
||||
<div class="ft-hero-meta">
|
||||
<span class="ft-chip">编号 {{ data.SecurityFunction.FunctionName || "-" }}</span>
|
||||
<span v-if="data.SecurityFunction.FunctionIndc == 'Y'" class="ft-chip">菜单项</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-col>
|
||||
<a-col :lg="18" :sm="18" style="min-width: 300px;">
|
||||
<!-- 功能信息 -->
|
||||
<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" required placeholder="请输入功能名称"
|
||||
:readonly="!isEdit || !!data.SecurityFunction.FunctionName"
|
||||
v-model:value="data.SecurityFunction.FunctionName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">中文名称<span class="ft-required">*</span></div>
|
||||
<a-input size="large" required placeholder="请输入中文名称" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityFunction.FunctionLocalName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">英文名称</div>
|
||||
<a-input size="large" placeholder="请输入英文名称" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityFunction.FunctionEngName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">图标</div>
|
||||
<IconsSelect :disabled="!isEdit" v-model:value="data.SecurityFunction.Icon" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">菜单项?</div>
|
||||
<a-select size="large" style="width: 100%" placeholder="请选择"
|
||||
v-model:value="data.SecurityFunction.FunctionIndc" :disabled="!isEdit"
|
||||
@change="onFunctionIndcChange">
|
||||
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{
|
||||
o.DisplayName }}</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">权限名称</div>
|
||||
<a-input-search size="large" placeholder="请输入权限名称" :disabled="!isEdit"
|
||||
v-model:value="data.SecurityFunction.PermissionName" @search="onModalPermission" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">页面路由</div>
|
||||
<a-input size="large" placeholder="请输入页面路由" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityFunction.PageUrl" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">Api路由</div>
|
||||
<a-input size="large" placeholder="请输入Api路由" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityFunction.ApiRoute" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">页面名称</div>
|
||||
<a-input size="large" placeholder="请输入页面名称" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityFunction.PageName" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<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.SecurityFunctionMapParents" :columns="columnParents"
|
||||
: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 === 'operation' && isEdit">
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deleteParent(datas.record.ParentFunctionName)" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra
|
||||
v-if="isEdit && (!data.SecurityFunctionMapParents || data.SecurityFunctionMapParents.length == 0)">
|
||||
<PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addParent" />
|
||||
</template>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="下级菜单">
|
||||
<a-table bordered :data-source="data.SecurityFunctionMapSons" :columns="columnSons"
|
||||
:row-class-name="rowSonClassName" :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 === 'operation' && isEdit">
|
||||
<UpSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }"
|
||||
@click="upSon(datas.index)" />
|
||||
<DownSquareTwoTone
|
||||
:style="{ fontSize: '24px', color: '#08c', marginLeft: '20px', marginRight: '20px' }"
|
||||
@click="downSon(datas.index)" />
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deleteSon(datas.record.SonFunctionName)" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit && data.SecurityFunction.FunctionIndc == 'N'">
|
||||
<PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addSon" />
|
||||
</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.SecurityFunctionMapParents"
|
||||
:key="record.ParentFunctionName || 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.ParentFunctionName || "未命名目录" }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<DeleteOutlined class="ft-action ft-action-delete"
|
||||
@click="deleteParent(record.ParentFunctionName)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">中文名称</span>
|
||||
<span class="ft-item-text">{{ record.ParentFunctionLocalName || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!data.SecurityFunctionMapParents || !data.SecurityFunctionMapParents.length"
|
||||
class="ft-empty">
|
||||
暂无上级目录
|
||||
</div>
|
||||
<a-button class="ft-add-btn" type="dashed" block
|
||||
v-if="isEdit && (!data.SecurityFunctionMapParents || data.SecurityFunctionMapParents.length == 0)"
|
||||
@click="addParent">
|
||||
<PlusSquareTwoTone /> 新增上级目录
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
<a-collapse-panel key="2" header="下级菜单">
|
||||
<div class="ft-list">
|
||||
<div v-for="(record, index) in data.SecurityFunctionMapSons"
|
||||
:key="record.SonFunctionName || index" class="ft-item"
|
||||
:class="{ 'ft-item-selected': index === selectedSonIndex }">
|
||||
<div class="ft-item-head">
|
||||
<span class="ft-item-index">{{ index + 1 }}</span>
|
||||
<div class="ft-item-title">
|
||||
<span class="ft-item-name">
|
||||
{{ record.SonFunctionName || "未命名菜单" }}
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="isEdit" class="ft-item-actions">
|
||||
<UpSquareTwoTone class="ft-action" @click="upSon(index)" />
|
||||
<DownSquareTwoTone class="ft-action" @click="downSon(index)" />
|
||||
<DeleteOutlined class="ft-action ft-action-delete"
|
||||
@click="deleteSon(record.SonFunctionName)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">中文名称</span>
|
||||
<span class="ft-item-text">{{ record.SonFunctionLocalName || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!data.SecurityFunctionMapSons || !data.SecurityFunctionMapSons.length"
|
||||
class="ft-empty">
|
||||
暂无下级菜单
|
||||
</div>
|
||||
<a-button class="ft-add-btn" type="dashed" block
|
||||
v-if="isEdit && data.SecurityFunction.FunctionIndc == 'N'" @click="addSon">
|
||||
<PlusSquareTwoTone /> 新增下级菜单
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
<div style="">
|
||||
@@ -231,11 +212,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dragModal v-model:open="modelOption.isModalFunction" width="80%" title="功能查询" @cancel="handleCance"
|
||||
<dragModal v-model:open="modelOption.isModalFunction" title="功能查询" @cancel="handleCance"
|
||||
:fullscreen="width < 640" :mask-closable="false" @ok="handleSelect">
|
||||
<functionEnquiry ref="enquiry" @on-row-dblclick="handleSelect"></functionEnquiry>
|
||||
</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>
|
||||
@@ -245,7 +226,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, AppstoreOutlined } from "@ant-design/icons-vue";
|
||||
import { PermissionContext, usePermissionContext } from "@/hooks/PermissionContext"
|
||||
import dragModal from "@/components/basic/DragModal.vue"
|
||||
import functionEnquiry from "./FunctionEnquiry.vue";
|
||||
@@ -682,6 +663,9 @@ const handleSelectPermission = (async () => {
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
||||
@import "../../styles/ft-mobile.less";
|
||||
|
||||
.page-container {
|
||||
margin-right: 0px;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:loading="loading" :pagination="result" :rowSelectionType="selectionType" @on-row-dblclick="onRowDblclick"
|
||||
:card-title-keys="[SecurityGeneratorNumberEntity.SYSTEM_ID, SecurityGeneratorNumberEntity.SUBSYSTEM_ID]"
|
||||
@on-select-change="onSelectChange">
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.dataIndex === SecurityGeneratorNumberEntity.REFRESH_PERIOD">
|
||||
@@ -49,7 +50,7 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
<generatorNumber @on-submit="onReload" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
@@ -65,7 +66,7 @@ import {
|
||||
} from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import {
|
||||
DeleteOutlined,
|
||||
EditOutlined,
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||
:card-title-keys="[SecurityGroupEntity.GROUP_NAME, SecurityGroupEntity.GROUP_LOCAL_NAME]"
|
||||
@on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
|
||||
<template #control>
|
||||
<a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
|
||||
@@ -29,13 +30,13 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { SecurityGroupResultData } from "@/data/auto/securityGroupResultData";
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||
:card-title-keys="[SecurityMasterEntity.MASTER_CATEGORY, SecurityMasterEntity.MASTER_CODE_ITEM]"
|
||||
@on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
|
||||
<template #control>
|
||||
<a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
|
||||
@@ -34,13 +35,13 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { SecurityMasterResultData } from "@/data/auto/securityMasterResultData";
|
||||
|
||||
@@ -53,121 +53,79 @@
|
||||
</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.CreatedBy.length > 0"
|
||||
v-model:value="data.MasterCategory" />
|
||||
</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 || data.CreatedBy.length > 0"
|
||||
v-model:value="data.MasterSubcategory" />
|
||||
</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" required :readonly="!isEdit || data.CreatedBy.length > 0"
|
||||
v-model:value="data.MasterCodeItem" />
|
||||
</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-select v-model:value="data.ValidIndc" :disabled="!isEdit"
|
||||
style="width: 100%;min-width:124px;">
|
||||
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{
|
||||
o.DisplayName }}</a-select-option>
|
||||
</a-select>
|
||||
</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="1000" :readonly="!isEdit" v-model:value="data.LocalDescription" />
|
||||
</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="1000" :readonly="!isEdit" v-model:value="data.EngDescription" />
|
||||
</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="1000" :readonly="!isEdit" v-model:value="data.Value" />
|
||||
</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="5" :readonly="!isEdit" v-model:value="data.OrderBy" />
|
||||
</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="3" :sm="6" style="min-width: 80px;">
|
||||
<span>备注:</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row style="margin-top: 8px;">
|
||||
<a-col :lg="24" :sm="24">
|
||||
<a-row :wrap="false" align="middle">
|
||||
<a-col :lg="24" :sm="18" style="min-width: 300px;">
|
||||
<a-textarea :auto-size="{ minRows: 10, maxRows: 15 }" :maxlength="1000"
|
||||
:readonly="!isEdit" v-model:value="data.Remark" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
|
||||
<!-- 顶部信息卡 -->
|
||||
<div class="ft-hero">
|
||||
<div class="ft-hero-icon">
|
||||
<DatabaseOutlined />
|
||||
</div>
|
||||
<div class="ft-hero-main">
|
||||
<div class="ft-hero-name">
|
||||
{{ data.LocalDescription || data.MasterCodeItem || "未填写主档信息" }}
|
||||
</div>
|
||||
<div class="ft-hero-meta">
|
||||
<span class="ft-chip">主类别 {{ data.MasterCategory || "-" }}</span>
|
||||
<span class="ft-chip">辅类别 {{ data.MasterSubcategory || "-" }}</span>
|
||||
<span class="ft-chip">项目 {{ data.MasterCodeItem || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主档信息 -->
|
||||
<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.CreatedBy.length > 0" v-model:value="data.MasterCategory" />
|
||||
</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 || data.CreatedBy.length > 0"
|
||||
v-model:value="data.MasterSubcategory" />
|
||||
</div>
|
||||
<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.CreatedBy.length > 0" v-model:value="data.MasterCodeItem" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">有效?</div>
|
||||
<a-select size="large" style="width: 100%" placeholder="请选择"
|
||||
v-model:value="data.ValidIndc" :disabled="!isEdit">
|
||||
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{
|
||||
o.DisplayName }}</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">中文名称</div>
|
||||
<a-input size="large" :maxlength="1000" placeholder="请输入中文名称" :readonly="!isEdit"
|
||||
v-model:value="data.LocalDescription" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">英文描述</div>
|
||||
<a-input size="large" :maxlength="1000" placeholder="请输入英文描述" :readonly="!isEdit"
|
||||
v-model:value="data.EngDescription" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">值</div>
|
||||
<a-input size="large" :maxlength="1000" placeholder="请输入值" :readonly="!isEdit"
|
||||
v-model:value="data.Value" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">排序</div>
|
||||
<a-input size="large" :maxlength="5" placeholder="请输入排序" :readonly="!isEdit"
|
||||
v-model:value="data.OrderBy" />
|
||||
</div>
|
||||
<div class="ft-field ft-field-full">
|
||||
<div class="ft-label">备注</div>
|
||||
<a-textarea :auto-size="{ minRows: 6, maxRows: 15 }" :maxlength="1000"
|
||||
placeholder="请输入备注" :readonly="!isEdit" v-model:value="data.Remark" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
<div style="">
|
||||
@@ -203,7 +161,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dragModal v-model:open="modelOption.isModalMaster" width="80%" title="主档查询" :mask-closable="false"
|
||||
<dragModal v-model:open="modelOption.isModalMaster" title="主档查询" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelect">
|
||||
<MasterEnquiry ref="enquiry" @on-row-dblclick="handleSelect"></MasterEnquiry>
|
||||
</dragModal>
|
||||
@@ -213,7 +171,7 @@
|
||||
import { ref, unref, onBeforeMount, inject, provide, watch, 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, DatabaseOutlined } from "@ant-design/icons-vue";
|
||||
import { PermissionContext, usePermissionContext } from "@/hooks/PermissionContext"
|
||||
import dragModal from "@/components/basic/DragModal.vue"
|
||||
import MasterEnquiry from "./MasterEnquiry.vue";
|
||||
@@ -442,6 +400,9 @@ const handleSelect = (async () => {
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
||||
@import "../../styles/ft-mobile.less";
|
||||
|
||||
.page-container {
|
||||
margin-right: 0px;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||
:card-title-keys="[SecurityPermissionEntity.PERMISSION_NAME, SecurityPermissionEntity.DESCRIPTION]"
|
||||
@on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
|
||||
<template #control>
|
||||
<a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
|
||||
@@ -29,13 +30,13 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { SecurityPermissionResultData } from "@/data/auto/securityPermissionResultData";
|
||||
|
||||
@@ -29,99 +29,109 @@
|
||||
</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.SecurityPermission.PermissionName"
|
||||
v-model:value="data.SecurityPermission.PermissionName" />
|
||||
</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.SecurityPermission.Description" />
|
||||
</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.SecurityPermission.Dependent" />
|
||||
</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-select v-model:value="data.SecurityPermission.DelegateIndc" :disabled="!isEdit"
|
||||
style="width: 100%;min-width:124px;">
|
||||
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{
|
||||
o.DisplayName }}</a-select-option>
|
||||
</a-select>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
|
||||
<!-- 顶部信息卡 -->
|
||||
<div class="ft-hero">
|
||||
<div class="ft-hero-icon">
|
||||
<SafetyCertificateOutlined />
|
||||
</div>
|
||||
<div class="ft-hero-main">
|
||||
<div class="ft-hero-name">
|
||||
{{ data.SecurityPermission.Description || "未填写权限名称" }}
|
||||
</div>
|
||||
<div class="ft-hero-meta">
|
||||
<span class="ft-chip">编号 {{ data.SecurityPermission.PermissionName || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
|
||||
<!-- 权限信息 -->
|
||||
<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.SecurityPermission.PermissionName"
|
||||
v-model:value="data.SecurityPermission.PermissionName" />
|
||||
</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.SecurityPermission.Description" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">扩展名称</div>
|
||||
<a-input size="large" :maxlength="50" placeholder="请输入扩展名称" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityPermission.Dependent" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">允许代理?</div>
|
||||
<a-select size="large" style="width: 100%" placeholder="请选择"
|
||||
v-model:value="data.SecurityPermission.DelegateIndc" :disabled="!isEdit">
|
||||
<a-select-option v-for="o in yesNoPolicy" :value="o.BindValue">{{
|
||||
o.DisplayName }}</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-divider>
|
||||
<a-collapse v-model:activeKey="activeKey">
|
||||
<a-collapse-panel key="1" header="扩展权限明细">
|
||||
<a-table bordered :data-source="data.SecurityPermissionDependents" :columns="columnDependents"
|
||||
: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 === SecurityPermissionDependentEntity.DEPENDENT_DETAIL_NAME && isEdit">
|
||||
<a-input :maxlength="50" required
|
||||
v-model:value="datas.record.DependentDetailName" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityPermissionDependentEntity.DEPENDENT_DETAIL_NAME && !isEdit">
|
||||
{{ datas.record.DependentDetailName }}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityPermissionDependentEntity.DEPENDENT_DETAIL_DESCRIPTION && isEdit">
|
||||
<a-input :maxlength="500" required
|
||||
v-model:value="datas.record.DependentDetailDescription" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityPermissionDependentEntity.DEPENDENT_DETAIL_DESCRIPTION && !isEdit">
|
||||
{{ datas.record.DependentDetailDescription }}
|
||||
</template>
|
||||
<template v-else-if="datas.column.dataIndex === 'operation' && isEdit">
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deleteDependent(datas.record.DependentDetailName)" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<template #extra v-if="isEdit">
|
||||
<PlusSquareTwoTone :style="{ fontSize: '24px', color: '#08c' }" @click="addDependent" />
|
||||
</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.SecurityPermissionDependents"
|
||||
: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="deleteDependent(record.DependentDetailName)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="ft-item-body">
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">
|
||||
扩展名称<span v-if="isEdit" class="ft-required">*</span>
|
||||
</span>
|
||||
<a-input v-if="isEdit" size="large" :maxlength="50" required
|
||||
placeholder="请输入扩展名称"
|
||||
v-model:value="record.DependentDetailName" />
|
||||
<span v-else class="ft-item-text">
|
||||
{{ record.DependentDetailName || "-" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="ft-item-field">
|
||||
<span class="ft-item-label">
|
||||
中文名称<span v-if="isEdit" class="ft-required">*</span>
|
||||
</span>
|
||||
<a-input v-if="isEdit" size="large" :maxlength="500" required
|
||||
placeholder="请输入中文名称"
|
||||
v-model:value="record.DependentDetailDescription" />
|
||||
<span v-else class="ft-item-text">
|
||||
{{ record.DependentDetailDescription || "-" }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!data.SecurityPermissionDependents || !data.SecurityPermissionDependents.length"
|
||||
class="ft-empty">
|
||||
暂无扩展权限明细
|
||||
</div>
|
||||
<a-button v-if="isEdit" class="ft-add-btn" type="dashed" block
|
||||
@click="addDependent">
|
||||
<PlusSquareTwoTone /> 新增扩展权限
|
||||
</a-button>
|
||||
</div>
|
||||
</a-collapse-panel>
|
||||
</a-collapse>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-footer">
|
||||
<div style="">
|
||||
@@ -157,7 +167,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dragModal v-model:open="modelOption.isModalPermission" width="80%" title="权限查询" :mask-closable="false"
|
||||
<dragModal v-model:open="modelOption.isModalPermission" title="权限查询" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelect">
|
||||
<PermissionEnquiry ref="enquiry" @on-row-dblclick="handleSelect"></PermissionEnquiry>
|
||||
</dragModal>
|
||||
@@ -167,7 +177,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, SafetyCertificateOutlined } from "@ant-design/icons-vue";
|
||||
import { PermissionContext, usePermissionContext } from "@/hooks/PermissionContext"
|
||||
import dragModal from "@/components/basic/DragModal.vue"
|
||||
import PermissionEnquiry from "./PermissionEnquiry.vue";
|
||||
@@ -436,6 +446,9 @@ const handleSelect = (async () => {
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
||||
@import "../../styles/ft-mobile.less";
|
||||
|
||||
.page-container {
|
||||
margin-right: 0px;
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<search @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
<search-card @on-submit="onSubmit" @on-print="onPrint" @on-reset="onReset" @use-pagination="onPagination"
|
||||
:is-modal="isModal" :loading="loading" :pagination="result" :rowSelectionType="selectionType"
|
||||
:card-title-keys="[SecurityUserEntity.USER_NAME, SecurityUserEntity.USER_LOCAL_NAME]"
|
||||
@on-row-dblclick="onRowDblclick" @on-select-change="onSelectChange">
|
||||
<template #control>
|
||||
<a-button type="primary" v-if="canCreate && !isModal" :icon="h(FileAddOutlined)"
|
||||
@@ -35,13 +36,13 @@
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
</search>
|
||||
</search-card>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { reactive, inject, defineComponent, onMounted, ref, unref, provide, h } from "vue";
|
||||
import { BindOption } from "@/data/custom/bindOption";
|
||||
import { SelectOption } from "@/data/auto/selectOption";
|
||||
import search from "@/components/basic/Search.vue";
|
||||
import searchCard from "@/components/basic/SearchCard.vue";
|
||||
import { DeleteOutlined, EditOutlined, FileAddOutlined, FileTextOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import { SecurityUserResultData } from "@/data/auto/securityUserResultData";
|
||||
|
||||
@@ -29,93 +29,95 @@
|
||||
</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 required :readonly="!isEdit || data.SecurityUser.UserName" v-model:value="data.SecurityUser.UserName" />
|
||||
</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 required :readonly="!isEdit" v-model:value="data.SecurityUser.UserLocalName" />
|
||||
</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 :readonly="!isEdit" v-model:value="data.SecurityUser.UserEngName" />
|
||||
</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 :readonly="!isEdit" v-model:value="data.SecurityUser.UserMobile" />
|
||||
</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 :readonly="!isEdit" v-model:value="data.SecurityUser.OrgUserPassword" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
<a-col :lg="{ span: 8, offset: 2 }" :sm="24">
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-divider orientation="left" orientation-margin="0px" dashed style="background-color: silver">
|
||||
<div class="page-main ft-page" :class="{ 'ft-readonly': !isEdit }" :style="{ height: resultH }">
|
||||
<!-- 顶部信息卡 -->
|
||||
<div class="ft-hero">
|
||||
<div class="ft-hero-icon">
|
||||
<UserOutlined />
|
||||
</div>
|
||||
<div class="ft-hero-main">
|
||||
<div class="ft-hero-name">
|
||||
{{ data.SecurityUser.UserLocalName || "未填写用户名称" }}
|
||||
</div>
|
||||
<div class="ft-hero-meta">
|
||||
<span class="ft-chip">账号 {{ data.SecurityUser.UserName || "-" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</a-divider>
|
||||
<a-collapse v-model:activeKey="activeKey">
|
||||
<a-collapse-panel key="1" header="角色明细">
|
||||
<a-table bordered :data-source="data.SecurityUserActors" :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 === 'operation' && isEdit">
|
||||
<DeleteOutlined :style="{ fontSize: '24px', color: 'red' }"
|
||||
@click="deleteActor(datas.record.ActorName)" />
|
||||
</template>
|
||||
<template
|
||||
v-else-if="datas.column.dataIndex === SecurityUserActorViewEntity.ACTOR_NAME && !isEdit">
|
||||
<span style="color: blue;font-size:18px;cursor: pointer;"
|
||||
@click="onViewActorOperation(datas.record.ActorName)"> {{ datas.record.ActorName
|
||||
}}</span>
|
||||
</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">
|
||||
<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" required placeholder="请输入用户名称"
|
||||
:readonly="!isEdit || !!data.SecurityUser.UserName"
|
||||
v-model:value="data.SecurityUser.UserName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">中文名称<span class="ft-required">*</span></div>
|
||||
<a-input size="large" required placeholder="请输入中文名称" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityUser.UserLocalName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">英文名称</div>
|
||||
<a-input size="large" placeholder="请输入英文名称" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityUser.UserEngName" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">手机</div>
|
||||
<a-input size="large" placeholder="请输入手机号码" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityUser.UserMobile" />
|
||||
</div>
|
||||
<div class="ft-field">
|
||||
<div class="ft-label">登录密码</div>
|
||||
<a-input size="large" placeholder="请输入登录密码" :readonly="!isEdit"
|
||||
v-model:value="data.SecurityUser.OrgUserPassword" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 明细 -->
|
||||
<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.SecurityUserActors"
|
||||
: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.SecurityUserActors || !data.SecurityUserActors.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="">
|
||||
@@ -151,11 +153,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dragModal v-model:open="modelOption.isModalUser" width="80%" title="用户查询" :mask-closable="false"
|
||||
<dragModal v-model:open="modelOption.isModalUser" title="用户查询" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelect">
|
||||
<UserEnquiry ref="enquiry" @on-row-dblclick="handleSelect"></UserEnquiry>
|
||||
</dragModal>
|
||||
<dragModal v-model:open="modelOption.isModalActor" width="80%" title="角色查询" :mask-closable="false"
|
||||
<dragModal v-model:open="modelOption.isModalActor" title="角色查询" :mask-closable="false"
|
||||
:fullscreen="width < 640" @ok="handleSelectActor">
|
||||
<ActorEnquiry ref="actorEnquiry" @on-row-dblclick="handleSelectActor"></ActorEnquiry>
|
||||
</dragModal>
|
||||
@@ -165,7 +167,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, UserOutlined } from "@ant-design/icons-vue";
|
||||
import { PermissionContext, usePermissionContext } from "@/hooks/PermissionContext"
|
||||
import dragModal from "@/components/basic/DragModal.vue"
|
||||
import UserEnquiry from "./UserEnquiry.vue";
|
||||
@@ -460,6 +462,9 @@ const onViewActorOperation = ((actorName: string) => {
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
/* 移动端表单样式（与 FamilyTreeOperation 保持一致） */
|
||||
@import "../../styles/ft-mobile.less";
|
||||
|
||||
.page-container {
|
||||
margin-right: 0px;
|
||||
|
||||
|
||||
Reference in new issue
Block a user