20260809223428
This commit is contained in:
oneao committed
1 parent
d72ca4193d
commit
c4891538a7
466 files changed
+21000
-3339
No files matched your search
@@ -1,316 +0,0 @@
|
||||
<script setup>
|
||||
import { h, ref, shallowRef } from "vue";
|
||||
import { message } from "antdv-next";
|
||||
import { Input, InputNumber, Select } from "antdv-next";
|
||||
import FmsSelect from "@/components/FmsSelect.vue";
|
||||
import FmsTable from "@/components/fms-table/FmsTable.vue";
|
||||
|
||||
const COLUMN_COUNT = 20;
|
||||
const ROW_COUNT = 4000;
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ label: "启用", value: 1 },
|
||||
{ label: "禁用", value: 0 },
|
||||
];
|
||||
|
||||
function randInt(min, max) {
|
||||
return Math.floor(Math.random() * (max - min + 1)) + min;
|
||||
}
|
||||
function randText(len) {
|
||||
const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
||||
let s = "";
|
||||
for (let i = 0; i < len; i++) s += chars[randInt(0, chars.length - 1)];
|
||||
return s;
|
||||
}
|
||||
function generateValue(c, i) {
|
||||
switch (c % 5) {
|
||||
case 0:
|
||||
return randText(randInt(4, 10));
|
||||
case 1:
|
||||
return randInt(0, 99999);
|
||||
case 2:
|
||||
return STATUS_OPTIONS[randInt(0, 1)].value;
|
||||
case 3:
|
||||
return `名称-${i}-${c}`;
|
||||
default:
|
||||
return `${randInt(1000, 9999)}-${randText(4)}`;
|
||||
}
|
||||
}
|
||||
|
||||
function buildData() {
|
||||
const rows = [];
|
||||
for (let i = 0; i < ROW_COUNT; i++) {
|
||||
const row = { id: `R${i}` };
|
||||
for (let c = 1; c <= COLUMN_COUNT; c++) row[`col${c}`] = generateValue(c, i);
|
||||
rows.push(row);
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
const dataSource = shallowRef(buildData());
|
||||
const selectedLocale = ref("");
|
||||
const selectedLocaleLabel = ref("");
|
||||
const selectedLocaleRecord = shallowRef(null);
|
||||
|
||||
// 当前编辑行 key；进入编辑时留存快照，取消可还原
|
||||
const editingKey = shallowRef(null);
|
||||
const editSnapshot = shallowRef(null);
|
||||
|
||||
function editConfigFor(c) {
|
||||
switch (c % 5) {
|
||||
case 1:
|
||||
return { type: "number" };
|
||||
case 2:
|
||||
return { type: "select", options: STATUS_OPTIONS };
|
||||
default:
|
||||
return { type: "text", maxlength: 64 };
|
||||
}
|
||||
}
|
||||
|
||||
// 单元格渲染：编辑行显示控件，其他行直接返回文本值（让 stk-table 用原生 textContent 渲染，零 VNode 开销）
|
||||
function makeCellEditor(dataIndex, edit) {
|
||||
const selectOptions = edit.options || [];
|
||||
return (props) => {
|
||||
const { row, cellValue } = props;
|
||||
if (row.id !== editingKey.value) {
|
||||
// 非编辑态：直接返回文本字符串，不创建 VNode 包装
|
||||
if (edit.type === "select") {
|
||||
const opt = selectOptions.find((o) => o.value === cellValue);
|
||||
return opt ? opt.label : (cellValue ?? "");
|
||||
}
|
||||
return cellValue ?? "";
|
||||
}
|
||||
// 编辑态：返回编辑组件 VNode
|
||||
const update = (v) => {
|
||||
row[dataIndex] = v;
|
||||
};
|
||||
const common = {
|
||||
size: "small",
|
||||
style: { width: "100%" },
|
||||
onClick: (e) => e.stopPropagation(),
|
||||
};
|
||||
if (edit.type === "number") {
|
||||
return h(InputNumber, {
|
||||
...common,
|
||||
value: cellValue,
|
||||
min: edit.min,
|
||||
max: edit.max,
|
||||
precision: edit.precision,
|
||||
"onUpdate:value": update,
|
||||
});
|
||||
}
|
||||
if (edit.type === "select") {
|
||||
return h(Select, {
|
||||
...common,
|
||||
value: cellValue,
|
||||
options: selectOptions,
|
||||
"onUpdate:value": update,
|
||||
});
|
||||
}
|
||||
return h(Input, {
|
||||
...common,
|
||||
value: cellValue,
|
||||
maxlength: edit.maxlength,
|
||||
"onUpdate:value": update,
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
function buildColumns() {
|
||||
const cols = [
|
||||
{
|
||||
dataIndex: "id",
|
||||
title: "编码",
|
||||
width: 120,
|
||||
fixed: "left",
|
||||
customCell: makeCellEditor("id", { type: "text", maxlength: 32 }),
|
||||
},
|
||||
];
|
||||
for (let c = 1; c <= COLUMN_COUNT; c++) {
|
||||
const edit = editConfigFor(c);
|
||||
cols.push({
|
||||
dataIndex: `col${c}`,
|
||||
title: `列 ${c}`,
|
||||
width: 140,
|
||||
sorter: edit.type === "number" ? true : undefined,
|
||||
customCell: makeCellEditor(`col${c}`, edit),
|
||||
});
|
||||
}
|
||||
return cols;
|
||||
}
|
||||
|
||||
const columns = shallowRef(buildColumns());
|
||||
|
||||
function onRowClick(ev, row) {
|
||||
if (row.id === editingKey.value) return;
|
||||
editingKey.value = row.id;
|
||||
editSnapshot.value = JSON.parse(JSON.stringify(row));
|
||||
}
|
||||
|
||||
function saveEdit() {
|
||||
if (editingKey.value == null) return;
|
||||
editingKey.value = null;
|
||||
editSnapshot.value = null;
|
||||
message.success("已保存当前行修改");
|
||||
}
|
||||
|
||||
function cancelEdit() {
|
||||
if (editingKey.value != null && editSnapshot.value) {
|
||||
const idx = dataSource.value.findIndex((r) => r.id === editingKey.value);
|
||||
if (idx >= 0) dataSource.value[idx] = editSnapshot.value;
|
||||
}
|
||||
editingKey.value = null;
|
||||
editSnapshot.value = null;
|
||||
message.info("已取消编辑");
|
||||
}
|
||||
|
||||
function regenerate() {
|
||||
editingKey.value = null;
|
||||
editSnapshot.value = null;
|
||||
dataSource.value = buildData();
|
||||
message.success("已重新生成随机数据");
|
||||
}
|
||||
|
||||
function rowClassName(row) {
|
||||
return row.id === editingKey.value ? "fms-row-editing" : "";
|
||||
}
|
||||
|
||||
function onLocaleChange(record) {
|
||||
selectedLocaleRecord.value = record;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="table-demo">
|
||||
<header class="table-demo__toolbar">
|
||||
<div class="table-demo__title">
|
||||
<strong>大数据表格 Demo</strong>
|
||||
<span class="table-demo__meta">
|
||||
共 {{ dataSource.length }} 行 · {{ columns.length }} 列 ·
|
||||
<template v-if="editingKey">正在编辑：{{ editingKey }}</template>
|
||||
<template v-else>点击任意行进入编辑</template>
|
||||
</span>
|
||||
</div>
|
||||
<div class="table-demo__actions">
|
||||
<a-button :disabled="editingKey == null" type="primary" @click="saveEdit">保存</a-button>
|
||||
<a-button :disabled="editingKey == null" @click="cancelEdit">取消</a-button>
|
||||
<a-button @click="regenerate">重新生成</a-button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="select-demo">
|
||||
<div class="select-demo__field">
|
||||
<label class="select-demo__label">FmsSelect 远程选择</label>
|
||||
<FmsSelect
|
||||
v-model="selectedLocale"
|
||||
v-model:label="selectedLocaleLabel"
|
||||
view-name="b_i18n_type"
|
||||
label-key="b_name"
|
||||
value-key="b_code"
|
||||
order-by="b_code ASC"
|
||||
:page-size="10"
|
||||
@change="onLocaleChange"
|
||||
/>
|
||||
</div>
|
||||
<div class="select-demo__value">
|
||||
<span>当前值：{{ selectedLocale || "-" }}</span>
|
||||
<span>显示文本：{{ selectedLocaleLabel || "-" }}</span>
|
||||
<span>记录编码：{{ selectedLocaleRecord?.b_code || "-" }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="table-demo__body">
|
||||
<FmsTable
|
||||
v-model:columns="columns"
|
||||
:data-source="dataSource"
|
||||
row-key="id"
|
||||
:row-class-name="rowClassName"
|
||||
show-overflow
|
||||
@row-click="onRowClick"
|
||||
/>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.table-demo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
color: var(--fms-text);
|
||||
}
|
||||
|
||||
.table-demo__toolbar {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--fms-border);
|
||||
}
|
||||
|
||||
.table-demo__title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.table-demo__title strong {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.table-demo__meta {
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.table-demo__actions {
|
||||
display: flex;
|
||||
flex: none;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.table-demo__body {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: 12px 16px 16px;
|
||||
}
|
||||
|
||||
.select-demo {
|
||||
display: flex;
|
||||
flex: none;
|
||||
align-items: flex-end;
|
||||
gap: 16px;
|
||||
padding: 12px 16px 0;
|
||||
}
|
||||
|
||||
.select-demo__field {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.select-demo__label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.select-demo__value {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
gap: 16px;
|
||||
color: var(--fms-text-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
:deep(.fms-row-editing) {
|
||||
background: rgba(22, 119, 255, 0.08) !important;
|
||||
}
|
||||
</style>
|
||||
@@ -1,284 +1,8 @@
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { Upload, Cloud, HardDrive } from "@lucide/vue";
|
||||
import { initFileConfig, upload } from "@/services/fileService";
|
||||
import { post } from "@/services/http";
|
||||
import FmsFileModal from "@/components/fms-file/FmsFileModal.vue";
|
||||
|
||||
const storageType = ref(null);
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
storageType.value = await initFileConfig();
|
||||
} catch {
|
||||
storageType.value = "unknown";
|
||||
}
|
||||
});
|
||||
|
||||
/* ───── 本地上传 ───── */
|
||||
const localFiles = ref([]);
|
||||
const localUploading = ref(false);
|
||||
const localResult = ref(null);
|
||||
|
||||
function onLocalFileChange(e) {
|
||||
localFiles.value = Array.from(e.target.files || []);
|
||||
localResult.value = null;
|
||||
}
|
||||
|
||||
async function testLocalUpload() {
|
||||
if (!localFiles.value.length) return;
|
||||
localUploading.value = true;
|
||||
localResult.value = null;
|
||||
try {
|
||||
const list = await upload({
|
||||
files: localFiles.value,
|
||||
father: "demo",
|
||||
moduleId: "1",
|
||||
});
|
||||
localResult.value = { ok: true, data: list, count: list.length };
|
||||
} catch (e) {
|
||||
localResult.value = { ok: false, error: e.message || String(e) };
|
||||
} finally {
|
||||
localUploading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/* ───── OSS 凭证 ───── */
|
||||
const ossLoading = ref(false);
|
||||
const ossResult = ref(null);
|
||||
|
||||
async function testOssCredential() {
|
||||
ossLoading.value = true;
|
||||
ossResult.value = null;
|
||||
try {
|
||||
const res = await post("/file/upload-credential");
|
||||
ossResult.value = { ok: true, data: res.data };
|
||||
} catch (e) {
|
||||
ossResult.value = { ok: false, error: e.message || String(e) };
|
||||
} finally {
|
||||
ossLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function fmtJson(obj) {
|
||||
return JSON.stringify(obj, null, 2);
|
||||
}
|
||||
|
||||
/* ───── 附件管理 (Modal) ───── */
|
||||
const demoOpen = ref(false);
|
||||
const demoModuleCode = ref("b_port");
|
||||
const demoFather = ref("demo_doc_001");
|
||||
|
||||
function openFmsFileDemo() {
|
||||
demoOpen.value = true;
|
||||
}
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="dh">
|
||||
<!-- 原有：文件接口测试 -->
|
||||
<header class="dh-head">
|
||||
<h1>文件接口测试</h1>
|
||||
<a-tag :color="storageType === 'local' ? 'green' : storageType === 'aliyun-oss' ? 'orange' : 'default'">
|
||||
<template #icon><HardDrive :size="12" /></template>
|
||||
{{ storageType || '加载中...' }}
|
||||
</a-tag>
|
||||
</header>
|
||||
|
||||
<div class="dh-cards">
|
||||
<!-- 本地上传 -->
|
||||
<div class="dh-card">
|
||||
<div class="dh-card__title">
|
||||
<Upload :size="14" />
|
||||
本地上传 <code>POST /file/upload</code>
|
||||
</div>
|
||||
<div class="dh-card__body">
|
||||
<input type="file" class="dh-file" multiple @change="onLocalFileChange" />
|
||||
<div v-if="localFiles.length" class="dh-filelist">
|
||||
<span v-for="f in localFiles" :key="f.name" class="dh-filelist__item">{{ f.name }}</span>
|
||||
</div>
|
||||
<a-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="localUploading"
|
||||
:disabled="!localFiles.length"
|
||||
@click="testLocalUpload"
|
||||
>
|
||||
上传 {{ localFiles.length ? `(${localFiles.length} 个文件)` : '' }}
|
||||
</a-button>
|
||||
<div v-if="localResult" class="dh-result" :class="localResult.ok ? 'dh-result--ok' : 'dh-result--err'">
|
||||
<pre>{{ localResult.ok ? fmtJson(localResult.data) : localResult.error }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- OSS 凭证 -->
|
||||
<div class="dh-card">
|
||||
<div class="dh-card__title">
|
||||
<Cloud :size="14" />
|
||||
OSS 凭证 <code>POST /file/upload-credential</code>
|
||||
</div>
|
||||
<div class="dh-card__body">
|
||||
<a-button
|
||||
size="small"
|
||||
:loading="ossLoading"
|
||||
@click="testOssCredential"
|
||||
>
|
||||
获取凭证
|
||||
</a-button>
|
||||
<div v-if="ossResult" class="dh-result" :class="ossResult.ok ? 'dh-result--ok' : 'dh-result--err'">
|
||||
<pre>{{ ossResult.ok ? fmtJson(ossResult.data) : ossResult.error }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 附件管理演示入口 -->
|
||||
<div class="dh-demo-entry">
|
||||
<a-button type="primary" size="large" @click="openFmsFileDemo">
|
||||
附件管理
|
||||
</a-button>
|
||||
</div>
|
||||
|
||||
<!-- FmsFileModal 声明式调用 -->
|
||||
<FmsFileModal
|
||||
v-model:open="demoOpen"
|
||||
:module-code="demoModuleCode"
|
||||
:father="demoFather"
|
||||
/>
|
||||
</main>
|
||||
<div class="flex h-full items-center justify-center">
|
||||
<h1 class="text-2xl font-bold text-muted-foreground">Dashboard</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.dh {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 16px;
|
||||
color: #1f2329;
|
||||
}
|
||||
|
||||
.dh-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.dh-cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dh-card {
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
&__title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
|
||||
svg { color: #1677ff; flex: none; }
|
||||
|
||||
code {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #1677ff;
|
||||
background: #e6f4ff;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&__body {
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.dh-file {
|
||||
font-size: 13px;
|
||||
color: #646a73;
|
||||
|
||||
&::file-selector-button {
|
||||
font-size: 12px;
|
||||
padding: 3px 12px;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
background: #fafafa;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.dh-filelist {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
|
||||
&__item {
|
||||
font-size: 11px;
|
||||
padding: 2px 8px;
|
||||
background: #f0f2f5;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 3px;
|
||||
color: #646a73;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.dh-result {
|
||||
font-size: 12px;
|
||||
line-height: 1.7;
|
||||
padding: 10px 12px;
|
||||
border-radius: 4px;
|
||||
max-height: 220px;
|
||||
overflow: auto;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
font-family: "SF Mono", Consolas, monospace;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&--ok {
|
||||
background: #f6ffed;
|
||||
border: 1px solid #b7eb8f;
|
||||
color: #389e0d;
|
||||
}
|
||||
|
||||
&--err {
|
||||
background: #fff1f0;
|
||||
border: 1px solid #ffa39e;
|
||||
color: #cf1322;
|
||||
}
|
||||
}
|
||||
|
||||
/* ───── 附件管理演示入口 ───── */
|
||||
.dh-demo-entry {
|
||||
margin-top: 28px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user