itcsx/Docker
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ow

Browse Source
This commit is contained in:
itcsx committed 2026-09-16 15:02:36 +08:00
1 parent 57201f2860
commit 554a5a4a2c
19 files changed
+1150 -931
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

WebVue/src/components/basic/MyComputerFamily.vue
+25 -19
View File
@@ -37,19 +37,22 @@
@click.stop="toggleSelect(record)"
/>
</div>
<!-- 状态角标：右上角 -->
<!-- 状态角标：右上角（加锁/开锁仅目录有意义，文件不显示锁图标） -->
<div class="file-status-badge">
<LockOutlined
v-if="record.PermissionIndc === 'N'"
class="badge-lock"
/>
<template v-if="record.PermissionIndc === 'Y'">
<UnlockOutlined class="badge-unlock" />
<ShareAltOutlined
v-if="record.FavoriteIndc === 'Y'"
class="badge-share"
<template v-if="record.IsDirectoryIndc == 'Y'">
<LockOutlined
v-if="record.PermissionIndc === 'N'"
class="badge-lock"
/>
<UnlockOutlined
v-else-if="record.PermissionIndc === 'Y'"
class="badge-unlock"
/>
</template>
<ShareAltOutlined
v-if="record.PermissionIndc === 'Y' && record.FavoriteIndc === 'Y'"
class="badge-share"
/>
</div>
<div class="file-content">
<template v-if="record.IsDirectoryIndc == 'Y'">
@@ -150,17 +153,20 @@
record.OrgFileName
}}</span>
<span class="list-status-icon">
<LockOutlined
v-if="record.PermissionIndc === 'N'"
class="icon-lock"
/>
<template v-if="record.PermissionIndc === 'Y'">
<UnlockOutlined class="icon-unlock" />
<ShareAltOutlined
v-if="record.FavoriteIndc === 'Y'"
class="icon-share"
<template v-if="record.IsDirectoryIndc == 'Y'">
<LockOutlined
v-if="record.PermissionIndc === 'N'"
class="icon-lock"
/>
<UnlockOutlined
v-else-if="record.PermissionIndc === 'Y'"
class="icon-unlock"
/>
</template>
<ShareAltOutlined
v-if="record.PermissionIndc === 'Y' && record.FavoriteIndc === 'Y'"
class="icon-share"
/>
</span>
</div>
<div class="list-size">{{ formatSize(record.FileSize) }}</div>
WebVue/src/components/basic/SearchCard.vue
+87 -69
View File
@@ -18,18 +18,12 @@
<a-row :wrap="false">
<!-- 大屏用 4 列占位把操作区推到右侧；中小屏占位列隐藏，内容列占满整行再靠右 -->
<a-col :xs="0" :sm="0" :md="0" :lg="4"></a-col>
<a-col
style="display: flex; justify-content: flex-end; flex-wrap: wrap"
:xs="24"
:sm="24"
:md="24"
:lg="20"
>
<a-col class="sc-toolbar" :xs="24" :sm="24" :md="24" :lg="20">
<a-input
flex="none"
readonly
value="视图"
class="site-input-split"
class="site-input-split sc-view-label"
style="
width: 80px;
border-radius: 0;
@@ -40,7 +34,7 @@
"
/>
<a-select
style="min-width: 200px"
class="sc-view-select"
v-model:value="viewOption.Value"
@select="onSelectColumn"
>
@@ -52,11 +46,13 @@
>
</a-select>
<a-button
class="sc-toolbar-btn"
type="dashed"
:icon="h(SettingTwoTone)"
@click.prevent="onViewResult"
></a-button>
<a-button
class="sc-toolbar-btn"
type="dashed"
:icon="h(PrinterTwoTone)"
@click.prevent="onPrint"
@@ -85,21 +81,33 @@
v-for="(record, index) in datas"
:key="index"
class="sc-card"
:class="{ 'sc-card-selected': isSelected(record) }"
@click="onCardClick($event, record)"
@dblclick="onCardDblclick($event, record)"
:class="{
'sc-card-selected': isSelected(record),
'sc-card-collapsed': !isExpanded(index),
}"
>
<div class="sc-card-head">
<span class="sc-check">
<div
class="sc-card-head"
@click="onCardHeadClick($event, record, index)"
@dblclick="onCardDblclick($event, record)"
>
<span class="sc-check" @click.stop="onCardClick($event, record)">
<a-checkbox v-if="isCheckbox" :checked="isSelected(record)" />
<a-radio v-else :checked="isSelected(record)" />
</span>
<span class="sc-index">{{ getRowIndex(index) }}</span>
<span class="sc-title">{{ getTitle(record) }}</span>
<span class="sc-title"><slot
name="cardTitle"
v-bind="{ record: record, index: index }"
>{{ getTitle(record) }}</slot></span>
<RightOutlined
class="sc-arrow"
:class="{ 'sc-arrow-open': isExpanded(index) }"
/>
</div>
<div class="sc-card-body">
<div v-show="isExpanded(index)" class="sc-card-body">
<div
v-for="column in getCardColumns(index)"
v-for="column in allColumns"
:key="column.dataIndex"
class="sc-field"
>
@@ -122,21 +130,6 @@
}}</span></span>
</div>
</div>
<div v-if="canExpand" class="sc-card-more">
<a
class="sc-more-btn"
@click.stop="toggleExpand(index)"
@dblclick.stop="noop"
>
<span>{{
isExpanded(index)
? "收起"
: `展开全部（共 ${allColumns.length} 项）`
}}</span>
<UpOutlined v-if="isExpanded(index)" />
<DownOutlined v-else />
</a>
</div>
</div>
</div>
<a-empty v-else class="sc-empty" description="暂无数据" />
@@ -183,8 +176,7 @@ import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
import {
SettingTwoTone,
PrinterTwoTone,
UpOutlined,
DownOutlined,
RightOutlined,
} from "@ant-design/icons-vue";
import columnModal from "./ColumnModal.vue";
import { useWindowSize } from "@vueuse/core";
@@ -488,15 +480,7 @@ const titleColumns = computed(() => {
// 卡片主体展示的列：完整展示全部字段列（含用于标题的列），保证不丢列
const allColumns = computed(() => fieldColumns.value);
// 折叠时展示的字段数量（手机端精简为 3 项，桌面端尽量全展示）
const collapsedCount = computed(() => (isSM.value ? 3 : 9));
// 是否需要"展开/收起"
const canExpand = computed(
() => allColumns.value.length > collapsedCount.value,
);
// 展开状态（按列表序号记录）
// 展开状态（按列表序号记录）：默认全部收起，只显示标题行
const expandedSet = ref<Record<number, boolean>>({});
const isExpanded = (index: number | string) =>
@@ -510,14 +494,11 @@ const toggleExpand = (index: number | string) => {
};
};
// 当前卡片需要渲染的列：折叠时取前 N 项，展开时取全部
const getCardColumns = (index: number | string) => {
if (!canExpand.value || isExpanded(index)) return allColumns.value;
return allColumns.value.slice(0, collapsedCount.value);
// 点击标题行：仅切换字段明细的展开/收起，不改选中状态
const onCardHeadClick = (event: any, record: any, index: number | string) => {
toggleExpand(index);
};
const noop = () => {};
// 数据变化（查询/分页/排序）后重置展开状态
watch(datas, () => {
expandedSet.value = {};
@@ -644,6 +625,28 @@ const { run } = usePagination(queryData, {
border-radius: 0;
}
/* 视图工具条：强制单行，下拉框自适应剩余宽度，按钮不被挤到下一行 */
.setting .sc-toolbar {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
min-width: 0;
}
.setting .sc-toolbar .sc-view-label,
.setting .sc-toolbar .sc-view-select,
.setting .sc-toolbar .sc-toolbar-btn {
flex: 0 0 auto;
}
/* 下拉框吃掉中间的剩余宽度，窄屏也不会把按钮顶下去 */
.setting .sc-toolbar .sc-view-select {
flex: 1 1 auto;
width: auto;
min-width: 120px;
}
.page-footer {
z-index: 999;
padding-left: 8px;
@@ -695,13 +698,40 @@ const { run } = usePagination(queryData, {
border-bottom: 1px solid #eef0f4;
border-radius: 12px 12px 0 0;
background: #f7f9fc;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
/* 标题再长也不外溢，多余部分由标题自身省略 */
overflow: hidden;
}
/* 收起时：标题行独占整卡，隐藏与明细区的分割线 */
.sc-card-collapsed .sc-card-head {
border-bottom-color: transparent;
border-radius: 12px;
}
/* 右侧展开箭头：展开后顺时针旋转 90 度 */
.sc-arrow {
flex: 0 0 auto;
margin-left: 2px;
color: #98a1b0;
font-size: 12px;
transition:
transform 0.18s ease,
color 0.18s ease;
}
.sc-arrow-open {
transform: rotate(90deg);
color: #1677ff;
}
/* 勾选框单独可点：用于精确勾选/取消，不会带开合明细 */
.sc-check {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
pointer-events: none;
cursor: pointer;
}
.sc-index {
@@ -720,8 +750,10 @@ const { run } = usePagination(queryData, {
}
.sc-title {
display: block;
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
overflow: hidden;
font-size: 15px;
font-weight: 600;
@@ -730,6 +762,11 @@ const { run } = usePagination(queryData, {
text-overflow: ellipsis;
}
/* 标题内的自定义内容（如图标 + 路径）：整段按行内文本参与省略号截断 */
.sc-title .anticon {
vertical-align: -0.125em;
}
.sc-card-body {
display: grid;
grid-template-columns: minmax(0, 1fr);
@@ -780,25 +817,6 @@ const { run } = usePagination(queryData, {
display: none;
}
.sc-card-more {
padding: 0 12px 8px 12px;
text-align: right;
line-height: 1.4;
}
.sc-more-btn {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 12px;
color: #1677ff;
user-select: none;
}
.sc-more-btn:hover {
color: #4096ff;
}
.sc-empty {
padding: 40px 0;
}