ow
This commit is contained in:
itcsx committed
1 parent
7f5bf3c68d
commit
816209fc35
37 files changed
+3236
-4515
No files matched your search
@@ -0,0 +1,864 @@
|
||||
<template>
|
||||
<div
|
||||
ref="searchRef"
|
||||
style="margin-left: 4px; padding-top: 4px; margin-right: 12px"
|
||||
>
|
||||
<searchCriteria
|
||||
@submit="onSubmit"
|
||||
@reset="onReset"
|
||||
@handle-change-bind-value="handleChangeBindValue"
|
||||
>
|
||||
<template #control>
|
||||
<slot name="control"></slot>
|
||||
</template>
|
||||
</searchCriteria>
|
||||
<hr />
|
||||
</div>
|
||||
<div ref="settingRef" class="setting">
|
||||
<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-input
|
||||
flex="none"
|
||||
readonly
|
||||
value="视图"
|
||||
class="site-input-split"
|
||||
style="
|
||||
width: 80px;
|
||||
border-radius: 0;
|
||||
border-top-left-radius: 5pt 5pt;
|
||||
border-bottom-left-radius: 5pt 5pt;
|
||||
background-color: rgb(250, 250, 250);
|
||||
pointer-events: none;
|
||||
"
|
||||
/>
|
||||
<a-select
|
||||
style="min-width: 200px"
|
||||
v-model:value="viewOption.Value"
|
||||
@select="onSelectColumn"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="o in viewOption.SelectOptions"
|
||||
:key="o.DisplayName"
|
||||
:value="o.BindValue"
|
||||
>{{ o.DisplayName }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
<a-button
|
||||
type="dashed"
|
||||
:icon="h(SettingTwoTone)"
|
||||
@click.prevent="onViewResult"
|
||||
></a-button>
|
||||
<a-button
|
||||
type="dashed"
|
||||
:icon="h(PrinterTwoTone)"
|
||||
@click.prevent="onPrint"
|
||||
></a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<columnModal
|
||||
:show-modal="showColumnModal"
|
||||
@on-change-columns="onChangeColumns"
|
||||
@handle-close="onHandleClose"
|
||||
@on-change-view-option="onChangeViewOption"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 结果区：卡片列表 ==================== -->
|
||||
<div class="sc-result" style="margin-left: 2px; margin-right: 6px">
|
||||
<!-- 卡片列表 -->
|
||||
<div
|
||||
ref="listRef"
|
||||
class="sc-list"
|
||||
:style="isModal ? undefined : { height: resultH || undefined }"
|
||||
>
|
||||
<a-spin :spinning="loading">
|
||||
<div v-if="datas.length" class="sc-list-inner">
|
||||
<div
|
||||
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)"
|
||||
>
|
||||
<div class="sc-card-head">
|
||||
<span class="sc-check">
|
||||
<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>
|
||||
</div>
|
||||
<div class="sc-card-body">
|
||||
<div
|
||||
v-for="column in getCardColumns(index)"
|
||||
:key="column.dataIndex"
|
||||
class="sc-field"
|
||||
>
|
||||
<span class="sc-field-label"><slot
|
||||
name="headerCell"
|
||||
v-bind="{ title: column.title, column: column }"
|
||||
>{{ column.title }}</slot></span>
|
||||
<span class="sc-field-value"><span
|
||||
class="sc-slot"
|
||||
><slot
|
||||
name="bodyCell"
|
||||
v-bind="{
|
||||
text: record[column.dataIndex],
|
||||
column: column,
|
||||
record: record,
|
||||
index: index,
|
||||
}"
|
||||
></slot></span><span class="sc-fallback">{{
|
||||
formatCell(record, column)
|
||||
}}</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="暂无数据" />
|
||||
</a-spin>
|
||||
</div>
|
||||
|
||||
<!-- 分页：固定在 footer 上方 -->
|
||||
<div
|
||||
ref="paginationRef"
|
||||
class="sc-pagination"
|
||||
:class="{ 'sc-pagination-fixed': !isModal }"
|
||||
:style="!isModal ? { bottom: paginationBottom } : undefined"
|
||||
>
|
||||
<a-pagination
|
||||
size="small"
|
||||
:current="pageCurrent"
|
||||
:page-size="pageSizeCurrent"
|
||||
:total="paginationJ.Total"
|
||||
:show-size-changer="true"
|
||||
:page-size-options="['10', '20', '50', '100']"
|
||||
:show-total="showTotal"
|
||||
@change="onPageChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<slot name="footer" style="padding-left: 4px"></slot>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
watch,
|
||||
inject,
|
||||
computed,
|
||||
onMounted,
|
||||
h,
|
||||
ref,
|
||||
unref,
|
||||
nextTick,
|
||||
onUnmounted,
|
||||
} from "vue";
|
||||
import { usePagination } from "vue-request";
|
||||
import searchCriteria from "@/components/basic/SearchCriteria.vue";
|
||||
import { SearchFilter } from "@/data/auto/searchFilter";
|
||||
import { SearchCriteriaResultData } from "@/data/auto/searchCriteriaResultData";
|
||||
import {
|
||||
SettingTwoTone,
|
||||
PrinterTwoTone,
|
||||
UpOutlined,
|
||||
DownOutlined,
|
||||
} from "@ant-design/icons-vue";
|
||||
import columnModal from "./ColumnModal.vue";
|
||||
import { useWindowSize } from "@vueuse/core";
|
||||
import { bsInfo } from "@/utils/browser";
|
||||
import { enquiryMethodKey } from "@/injections";
|
||||
|
||||
//================props================
|
||||
const props = defineProps({
|
||||
isModal: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
scrollx: {
|
||||
type: Number,
|
||||
default: 1024,
|
||||
},
|
||||
scrolly: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
pagination: {
|
||||
type: SearchCriteriaResultData,
|
||||
default: new SearchCriteriaResultData(),
|
||||
},
|
||||
rowSelectionType: {
|
||||
type: String,
|
||||
default: "radio",
|
||||
},
|
||||
// 卡片标题取值的列(按 dataIndex)，默认取第一个字段列
|
||||
cardTitleKeys: {
|
||||
type: Array as () => string[],
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const isModal = ref(props["isModal"]);
|
||||
|
||||
const paginationJ = ref(props["pagination"]);
|
||||
const rowSelectionType = ref(props["rowSelectionType"]);
|
||||
const tableY = ref(props["scrolly"]);
|
||||
|
||||
const enquiry = inject(enquiryMethodKey, undefined);
|
||||
|
||||
const datas = enquiry?.getDatas()!;
|
||||
|
||||
const viewOption = ref(
|
||||
enquiry
|
||||
? enquiry.getViewOption()
|
||||
: {
|
||||
Value: "default",
|
||||
SelectOptions: [{ BindValue: "default", DisplayName: "默认" }],
|
||||
Columns: [{ BindValue: "default", BindColumn: [] }],
|
||||
},
|
||||
);
|
||||
|
||||
//================inject================
|
||||
const isSM = ref<boolean>(false);
|
||||
const { width, height } = useWindowSize();
|
||||
if (bsInfo.size.sm) {
|
||||
isSM.value = true;
|
||||
} else {
|
||||
isSM.value = false;
|
||||
}
|
||||
|
||||
const resultH = ref("");
|
||||
const showColumnModal = ref<boolean>(false);
|
||||
const selected = ref<any[]>([]);
|
||||
|
||||
const emit = defineEmits([
|
||||
"onReset",
|
||||
"onSubmit",
|
||||
"handleChangeBindValue",
|
||||
"usePagination",
|
||||
"onRowDblclick",
|
||||
"onclick",
|
||||
"onSelectChange",
|
||||
"onViewResult",
|
||||
"onPrint",
|
||||
"updateColumns",
|
||||
]);
|
||||
|
||||
const onViewResult = () => {
|
||||
showColumnModal.value = true;
|
||||
emit("onViewResult");
|
||||
};
|
||||
|
||||
const onHandleClose = () => {
|
||||
showColumnModal.value = false;
|
||||
};
|
||||
|
||||
const onPrint = () => {
|
||||
emit("onPrint", viewOption.value);
|
||||
};
|
||||
|
||||
const searchRef = ref<HTMLElement | null>();
|
||||
const settingRef = ref<HTMLElement | null>();
|
||||
|
||||
//================分页固定：始终贴在 footer 上方================
|
||||
const paginationBottom = ref("64px");
|
||||
const paginationRef = ref<HTMLElement | null>(null);
|
||||
const listRef = ref<HTMLElement | null>(null);
|
||||
const modalBodyEl = ref<HTMLElement | null>(null);
|
||||
|
||||
/** 获取页面级 footer（SearchCard 所在容器内的 .page-footer） */
|
||||
const getPageFooter = (): HTMLElement | null => {
|
||||
const container = searchRef.value?.parentElement ?? document.body;
|
||||
return container.querySelector(".page-footer") as HTMLElement | null;
|
||||
};
|
||||
|
||||
/** 普通页面：按 footer 真实高度算出分页栏的 bottom 偏移 */
|
||||
const computePaginationBottom = () => {
|
||||
if (isModal.value) return;
|
||||
const footerEl = getPageFooter();
|
||||
if (!footerEl) {
|
||||
paginationBottom.value = "64px";
|
||||
return;
|
||||
}
|
||||
// 视口底部 -> footer 顶部的距离(含 footer 高度与其 bottom 偏移) + 间距
|
||||
const offset = window.innerHeight - footerEl.getBoundingClientRect().top;
|
||||
paginationBottom.value = `${Math.max(Math.round(offset) + 6, 0)}px`;
|
||||
};
|
||||
|
||||
/** 普通页面：底部为「分页栏 + 页面 footer」预留的真实高度（列表直接顶到分页栏上沿） */
|
||||
const getFooterReservedHeight = (): number => {
|
||||
const bottom = Number.parseInt(paginationBottom.value, 10);
|
||||
const offset = Number.isFinite(bottom) ? bottom : 64;
|
||||
// 分页栏自身高度（首帧未挂载时按 34 估算）
|
||||
const paginationH = paginationRef.value?.offsetHeight || 34;
|
||||
return offset + paginationH + 6;
|
||||
};
|
||||
|
||||
/** 弹窗模式：给 modal 设定高度，使内容区撑满（内部 flex 生效） */
|
||||
const applyModalHeight = () => {
|
||||
const bodyEl = modalBodyEl.value;
|
||||
if (!bodyEl) return;
|
||||
const modalEl = bodyEl.closest(".ant-modal") as HTMLElement | null;
|
||||
if (!modalEl) return;
|
||||
const h = Math.max(window.innerHeight - 140, 240);
|
||||
modalEl.style.height = `${h}px`;
|
||||
};
|
||||
|
||||
/** 弹窗模式：让 modal body 变成纵向 flex 容器，分页贴底(modal footer 上方) */
|
||||
const setupModalLayout = async () => {
|
||||
if (!isModal.value) return;
|
||||
await nextTick();
|
||||
const bodyEl = searchRef.value?.closest(
|
||||
".ant-modal-body",
|
||||
) as HTMLElement | null;
|
||||
if (!bodyEl) return;
|
||||
modalBodyEl.value = bodyEl;
|
||||
bodyEl.classList.add("sc-modal-body");
|
||||
applyModalHeight();
|
||||
};
|
||||
|
||||
/** 统一重新布局 */
|
||||
const relayout = async () => {
|
||||
// 先定位分页栏 / 弹窗，等 DOM 位置生效后再反推列表高度，避免用到上一帧位置
|
||||
computePaginationBottom();
|
||||
applyModalHeight();
|
||||
await nextTick();
|
||||
computResultTableHeight();
|
||||
};
|
||||
|
||||
// 增加监听窗口宽高变化，窗口缩放自动重算
|
||||
watch([width, height, isModal, tableY], () => {
|
||||
void relayout();
|
||||
});
|
||||
|
||||
const HEIGHT_OFFSETS = {
|
||||
minTableHeight: 120, // 列表最小高度，防止计算结果为负
|
||||
};
|
||||
let resizeObserver: ResizeObserver | null = null;
|
||||
|
||||
/** 列表高度：优先用「列表顶部 → 分页栏顶部」的真实距离，保证滚动条紧贴页码 */
|
||||
const computResultTableHeight = () => {
|
||||
// 弹窗内高度由 flex 撑满，无需计算
|
||||
if (isModal.value) return;
|
||||
|
||||
const listEl = listRef.value;
|
||||
const paginationEl = paginationRef.value;
|
||||
|
||||
let finalY: number;
|
||||
|
||||
if (listEl && paginationEl) {
|
||||
// 两者同为视口坐标，其差值就是真实可用高度（与页面滚动无关）
|
||||
finalY =
|
||||
paginationEl.getBoundingClientRect().top -
|
||||
listEl.getBoundingClientRect().top -
|
||||
6;
|
||||
} else {
|
||||
// 兜底：DOM 尚未就绪时沿用估算方式
|
||||
const viewportH = window.innerHeight;
|
||||
const searchHeight = searchRef.value?.offsetHeight ?? 0;
|
||||
const settingHeight = settingRef.value?.offsetHeight ?? 0;
|
||||
const base = tableY.value > 0 ? tableY.value : settingHeight;
|
||||
finalY = viewportH - searchHeight - base - getFooterReservedHeight();
|
||||
}
|
||||
|
||||
// 最小高度兜底，不能小于minTableHeight
|
||||
finalY = Math.max(finalY, HEIGHT_OFFSETS.minTableHeight);
|
||||
resultH.value = `${finalY}px`; // 直接输出px，不再calc
|
||||
};
|
||||
|
||||
// 重新绑定observer，处理v‑if动态创建的setting DOM
|
||||
const rebindObserver = () => {
|
||||
if (!resizeObserver) return;
|
||||
// 先全部取消
|
||||
resizeObserver.disconnect();
|
||||
if (searchRef.value) resizeObserver.observe(searchRef.value);
|
||||
if (settingRef.value) resizeObserver.observe(settingRef.value);
|
||||
if (paginationRef.value) resizeObserver.observe(paginationRef.value);
|
||||
const footerEl = getPageFooter();
|
||||
if (footerEl) resizeObserver.observe(footerEl);
|
||||
|
||||
void relayout();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
resizeObserver = new ResizeObserver(() => {
|
||||
void relayout();
|
||||
});
|
||||
rebindObserver();
|
||||
void setupModalLayout();
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
if (resizeObserver) {
|
||||
resizeObserver.disconnect();
|
||||
resizeObserver = null;
|
||||
}
|
||||
});
|
||||
|
||||
// ✅监听v‑if条件变化，条件一变，重新绑定观测器
|
||||
watch([isModal, isSM], () => {
|
||||
rebindObserver();
|
||||
void setupModalLayout();
|
||||
});
|
||||
|
||||
watch([width, height, tableY], () => {
|
||||
void relayout();
|
||||
});
|
||||
|
||||
defineOptions({
|
||||
name: "searchCard",
|
||||
});
|
||||
|
||||
const columns = ref(
|
||||
viewOption.value.Columns[0].BindColumn?.filter((x: any) => x.hidden != "Y"),
|
||||
);
|
||||
|
||||
//接收拖动变化
|
||||
const onChangeColumns = (cls: Column[]) => {
|
||||
columns.value = cls?.filter((x) => x.hidden != "Y");
|
||||
};
|
||||
|
||||
const onChangeViewOption = (vop: ViewOption) => {
|
||||
viewOption.value = vop;
|
||||
};
|
||||
|
||||
const onSelectColumn = () => {
|
||||
columns.value = viewOption.value.Columns.filter(
|
||||
(x: any) => x.BindValue == viewOption.value.Value,
|
||||
)[0].BindColumn?.filter((x: any) => x.hidden != "Y") as Column[];
|
||||
};
|
||||
|
||||
const onSubmit = async (filters: SearchFilter[]) => {
|
||||
emit("onSubmit", filters);
|
||||
};
|
||||
|
||||
const handleChangeBindValue = (bindValue: string, value: string) => {
|
||||
emit("handleChangeBindValue", bindValue, value);
|
||||
};
|
||||
|
||||
const onReset = async () => {
|
||||
datas.value = [];
|
||||
selected.value = [];
|
||||
emit("onReset");
|
||||
};
|
||||
|
||||
//================卡片列表数据================
|
||||
// 字段列（排除序号列）
|
||||
const fieldColumns = computed(() =>
|
||||
((columns.value ?? []) as any[]).filter((c: any) => c.dataIndex !== "index"),
|
||||
);
|
||||
|
||||
// 卡片标题使用的列
|
||||
const titleColumns = computed(() => {
|
||||
const keys = props.cardTitleKeys ?? [];
|
||||
if (keys.length) {
|
||||
return keys
|
||||
.map((k) => fieldColumns.value.find((c: any) => c.dataIndex === k))
|
||||
.filter(Boolean) as any[];
|
||||
}
|
||||
return fieldColumns.value.slice(0, 1);
|
||||
});
|
||||
|
||||
// 卡片主体展示的列：完整展示全部字段列（含用于标题的列），保证不丢列
|
||||
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) =>
|
||||
!!expandedSet.value[Number(index)];
|
||||
|
||||
const toggleExpand = (index: number | string) => {
|
||||
const key = Number(index);
|
||||
expandedSet.value = {
|
||||
...expandedSet.value,
|
||||
[key]: !expandedSet.value[key],
|
||||
};
|
||||
};
|
||||
|
||||
// 当前卡片需要渲染的列：折叠时取前 N 项，展开时取全部
|
||||
const getCardColumns = (index: number | string) => {
|
||||
if (!canExpand.value || isExpanded(index)) return allColumns.value;
|
||||
return allColumns.value.slice(0, collapsedCount.value);
|
||||
};
|
||||
|
||||
const noop = () => {};
|
||||
|
||||
// 数据变化（查询/分页/排序）后重置展开状态
|
||||
watch(datas, () => {
|
||||
expandedSet.value = {};
|
||||
});
|
||||
|
||||
const getTitle = (record: any) => {
|
||||
const parts = titleColumns.value
|
||||
.map((c: any) => record?.[c.dataIndex])
|
||||
.filter((v: any) => v !== null && v !== undefined && v !== "");
|
||||
return parts.length ? parts.join(" ") : "-";
|
||||
};
|
||||
|
||||
const formatCell = (record: any, column: any) => {
|
||||
const v = record?.[column.dataIndex];
|
||||
return v === null || v === undefined || v === "" ? "-" : v;
|
||||
};
|
||||
|
||||
const getRowIndex = (index: number | string) =>
|
||||
(pageCurrent.value - 1) * pageSizeCurrent.value + Number(index) + 1;
|
||||
|
||||
//================选择================
|
||||
const isCheckbox = computed(() => unref(rowSelectionType) === "checkbox");
|
||||
|
||||
const isSelected = (record: any) => selected.value.includes(record);
|
||||
|
||||
const emitSelection = () => emit("onSelectChange", selected.value);
|
||||
|
||||
const onCardClick = (event: any, record: any) => {
|
||||
if (unref(rowSelectionType) == "radio") {
|
||||
selected.value = [record];
|
||||
} else {
|
||||
if (selected.value.includes(record)) {
|
||||
selected.value = selected.value.filter((item) => item !== record);
|
||||
} else {
|
||||
selected.value.push(record);
|
||||
}
|
||||
}
|
||||
emit("onclick", event, [record]);
|
||||
emitSelection();
|
||||
};
|
||||
|
||||
const onCardDblclick = (event: any, record: any) => {
|
||||
if (selected.value.includes(record)) {
|
||||
selected.value = selected.value.filter((item) => item !== record);
|
||||
} else {
|
||||
selected.value.push(record);
|
||||
}
|
||||
emit("onRowDblclick", event, record);
|
||||
emitSelection();
|
||||
};
|
||||
|
||||
//================分页================
|
||||
const pageCurrent = ref<number>(paginationJ.value.Page || 1);
|
||||
const pageSizeCurrent = ref<number>(paginationJ.value.Limit || 20);
|
||||
|
||||
watch(
|
||||
() => [paginationJ.value.Page, paginationJ.value.Limit],
|
||||
() => {
|
||||
pageCurrent.value = paginationJ.value.Page || 1;
|
||||
pageSizeCurrent.value = paginationJ.value.Limit || 20;
|
||||
},
|
||||
);
|
||||
|
||||
const showTotal = (total: number) => `共 ${total} 条`;
|
||||
|
||||
const onPageChange = (page: number, pageSize: number) => {
|
||||
pageCurrent.value = page;
|
||||
pageSizeCurrent.value = pageSize;
|
||||
run({ page, pageSize });
|
||||
};
|
||||
|
||||
const queryData = async (params: PagingParams): Promise<any> => {
|
||||
try {
|
||||
emit("usePagination", params);
|
||||
} catch (err) {}
|
||||
|
||||
return datas.value;
|
||||
};
|
||||
|
||||
const { run } = usePagination(queryData, {
|
||||
pagination: {
|
||||
currentKey: "page",
|
||||
pageSizeKey: "pageSize",
|
||||
totalKey: "totalCount",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.search-criteria .ant-select-single .ant-select-selector {
|
||||
border-top-left-radius: 0pt 0pt;
|
||||
border-bottom-left-radius: 0pt 0pt;
|
||||
border-top-right-radius: 5pt 5pt;
|
||||
border-bottom-right-radius: 5pt 5pt;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
.search-criteria .ant-select-multiple .ant-select-selector {
|
||||
border-top-left-radius: 0pt 0pt;
|
||||
border-bottom-left-radius: 0pt 0pt;
|
||||
border-top-right-radius: 5pt 5pt;
|
||||
border-bottom-right-radius: 5pt 5pt;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
.search-criteria .ant-picker {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.setting {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.setting .ant-select-selector {
|
||||
border-radius: 0;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
.setting .ant-btn {
|
||||
padding-top: 4px;
|
||||
padding-bottom: 4px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
z-index: 999;
|
||||
padding-left: 8px;
|
||||
padding-right: 18px;
|
||||
padding-top: 8px;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
bottom: 8px;
|
||||
border-top: 1px solid silver;
|
||||
}
|
||||
|
||||
/* ==================== 结果区：卡片列表 ==================== */
|
||||
.sc-list {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
margin-top: 4px;
|
||||
padding: 2px;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.sc-list-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.sc-card {
|
||||
border: 1px solid #eef0f4;
|
||||
border-radius: 12px;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.sc-card-selected {
|
||||
border-color: #1677ff;
|
||||
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
|
||||
}
|
||||
|
||||
.sc-card-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #eef0f4;
|
||||
border-radius: 12px 12px 0 0;
|
||||
background: #f7f9fc;
|
||||
}
|
||||
|
||||
.sc-check {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: 0 0 auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sc-index {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 22px;
|
||||
height: 22px;
|
||||
padding: 0 6px;
|
||||
border-radius: 11px;
|
||||
background: #e8f1ff;
|
||||
color: #1677ff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sc-title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: #1f2329;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sc-card-body {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 8px 14px;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sc-card-body {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.sc-card-body {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.sc-field {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sc-field-label {
|
||||
flex: 0 0 auto;
|
||||
max-width: 42%;
|
||||
font-size: 12px;
|
||||
color: #8a919f;
|
||||
}
|
||||
|
||||
.sc-field-label::after {
|
||||
content: "：";
|
||||
}
|
||||
|
||||
.sc-field-value {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: 14px;
|
||||
color: #1f2329;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* 自定义插槽有渲染内容时，隐藏默认文本 */
|
||||
.sc-slot:not(:empty) + .sc-fallback {
|
||||
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;
|
||||
}
|
||||
|
||||
.sc-pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 6px 4px;
|
||||
}
|
||||
|
||||
/* 普通页面：分页栏固定在页面 footer 上方（bottom 由内联 style 动态覆盖） */
|
||||
.sc-pagination-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 64px;
|
||||
z-index: 998;
|
||||
padding: 6px 20px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eef0f4;
|
||||
}
|
||||
|
||||
/* 弹窗模式：内容区撑满 modal body，分页贴在 modal footer 上方 */
|
||||
.sc-modal-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.sc-modal-body > * {
|
||||
flex: 0 0 auto;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.sc-modal-body > .sc-result {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sc-modal-body > .sc-result > .sc-list {
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.sc-modal-body > .sc-result > .sc-pagination {
|
||||
flex: 0 0 auto;
|
||||
padding: 6px 0;
|
||||
background: #fff;
|
||||
border-top: 1px solid #eef0f4;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.sc-pagination {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sc-pagination-fixed {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user