oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20260725172954

Browse Source
This commit is contained in:
oneao committed 2026-07-25 17:29:54 +08:00
1 parent 1b86e0043a
commit e3c7c6f8da
16 files changed
+714 -796
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/fms/fms-vue/src/views/dashboard/TableDemo.vue
+15 -20
View File
@@ -1,5 +1,5 @@
<script setup>
import { h, ref } from "vue";
import { h, shallowRef } from "vue";
import { message } from "antdv-next";
import { Input, InputNumber, Select } from "antdv-next";
import FmsTable from "@/components/fms-table/FmsTable.vue";
@@ -46,11 +46,11 @@ function buildData() {
return rows;
}
const dataSource = ref(buildData());
const dataSource = shallowRef(buildData());
// 当前编辑行 key；进入编辑时留存快照，取消可还原
const editingKey = ref(null);
const editSnapshot = ref(null);
const editingKey = shallowRef(null);
const editSnapshot = shallowRef(null);
function editConfigFor(c) {
switch (c % 5) {
@@ -63,17 +63,20 @@ function editConfigFor(c) {
}
}
// 单元格渲染：编辑行显示控件，其他行显示纯文本
// 单元格渲染：编辑行显示控件，其他行直接返回文本值（让 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 = (edit.options || []).find((o) => o.value === cellValue);
return h("span", { class: "cell-display" }, opt ? opt.label : (cellValue ?? ""));
const opt = selectOptions.find((o) => o.value === cellValue);
return opt ? opt.label : (cellValue ?? "");
}
return h("span", { class: "cell-display" }, cellValue ?? "");
return cellValue ?? "";
}
// 编辑态：返回编辑组件 VNode
const update = (v) => {
row[dataIndex] = v;
};
@@ -96,7 +99,7 @@ function makeCellEditor(dataIndex, edit) {
return h(Select, {
...common,
value: cellValue,
options: edit.options || [],
options: selectOptions,
"onUpdate:value": update,
});
}
@@ -132,7 +135,7 @@ function buildColumns() {
return cols;
}
const columns = ref(buildColumns());
const columns = shallowRef(buildColumns());
function onRowClick(ev, row) {
if (row.id === editingKey.value) return;
@@ -193,6 +196,7 @@ function rowClassName(row) {
:data-source="dataSource"
row-key="id"
:row-class-name="rowClassName"
show-overflow
@row-click="onRowClick"
/>
</section>
@@ -249,16 +253,7 @@ function rowClassName(row) {
padding: 12px 16px 16px;
}
:deep(.fms-row-editing) {
::deep(.fms-row-editing) {
background: rgba(22, 119, 255, 0.08) !important;
}
:deep(.cell-display) {
display: block;
min-height: 22px;
padding: 0 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
code/fms/fms-vue/src/views/dashboard/index.vue
+15 -20
View File
@@ -1,5 +1,5 @@
<script setup>
import { h, ref } from "vue";
import { h, shallowRef } from "vue";
import { message } from "antdv-next";
import { Input, InputNumber, Select } from "antdv-next";
import FmsTable from "@/components/fms-table/FmsTable.vue";
@@ -47,11 +47,11 @@ function buildData() {
return rows;
}
const dataSource = ref(buildData());
const dataSource = shallowRef(buildData());
// 当前编辑行 key；进入编辑时留存快照，取消可还原
const editingKey = ref(null);
const editSnapshot = ref(null);
const editingKey = shallowRef(null);
const editSnapshot = shallowRef(null);
function editConfigFor(c) {
switch (c % 5) {
@@ -64,17 +64,20 @@ function editConfigFor(c) {
}
}
// 单元格渲染：编辑行显示控件，其他行显示纯文本
// 单元格渲染：编辑行显示控件，其他行直接返回文本值（让 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 = (edit.options || []).find((o) => o.value === cellValue);
return h("span", { class: "cell-display" }, opt ? opt.label : (cellValue ?? ""));
const opt = selectOptions.find((o) => o.value === cellValue);
return opt ? opt.label : (cellValue ?? "");
}
return h("span", { class: "cell-display" }, cellValue ?? "");
return cellValue ?? "";
}
// 编辑态：返回编辑组件 VNode
const update = (v) => {
row[dataIndex] = v;
};
@@ -97,7 +100,7 @@ function makeCellEditor(dataIndex, edit) {
return h(Select, {
...common,
value: cellValue,
options: edit.options || [],
options: selectOptions,
"onUpdate:value": update,
});
}
@@ -133,7 +136,7 @@ function buildColumns() {
return cols;
}
const columns = ref(buildColumns());
const columns = shallowRef(buildColumns());
function onRowClick(ev, row) {
if (row.id === editingKey.value) return;
@@ -195,6 +198,7 @@ function rowClassName(row) {
:data-source="dataSource"
row-key="id"
:row-class-name="rowClassName"
show-overflow
@row-click="onRowClick"
/>
</section>
@@ -252,16 +256,7 @@ function rowClassName(row) {
padding: 12px 16px 16px;
}
:deep(.fms-row-editing) {
::deep(.fms-row-editing) {
background: rgba(22, 119, 255, 0.08) !important;
}
:deep(.cell-display) {
display: block;
min-height: 22px;
padding: 0 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
code/fms/fms-vue/src/views/module-management/components/ModuleEditConfigPanel.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, ref, watch } from "vue";
import { computed, ref, shallowRef, watch } from "vue";
import FmsTable from "@/components/fms-table/FmsTable.vue";
import { createTempId } from "@/utils/tempId";
import FieldGroupManager from "./FieldGroupManager.vue";
@@ -74,7 +74,7 @@ function makeSwitchCol(field, title, width) {
};
}
const columns = [
const columns = shallowRef([
{
dataIndex: "b_field_id",
title: "字段",
@@ -113,7 +113,7 @@ const columns = [
},
],
},
];
]);
</script>
<template>
@@ -126,7 +126,7 @@ const columns = [
</div>
<div class="panel-body">
<FmsTable
:columns="columns"
v-model:columns="columns"
:data-source="localEdit"
row-key="b_id"
:active-row-key="activeKey"
code/fms/fms-vue/src/views/module-management/components/ModuleFieldsPanel.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, watch } from "vue";
import { ref, shallowRef, watch } from "vue";
import FmsTable from "@/components/fms-table/FmsTable.vue";
const FIELD_TYPES = [
@@ -40,7 +40,7 @@ function emitUpdate() {
);
}
const columns = [
const columns = shallowRef([
{ dataIndex: "b_field", title: "字段名", width: 140 },
{ dataIndex: "b_name", title: "字段名称", width: 140 },
{
@@ -62,7 +62,7 @@ const columns = [
align: "center",
editor: { type: "checkbox", onChange: () => emitUpdate() },
},
];
]);
</script>
<template>
@@ -76,7 +76,7 @@ const columns = [
</div>
<div class="panel-body">
<FmsTable
:columns="columns"
v-model:columns="columns"
:data-source="localFields"
row-key="b_id"
:active-row-key="activeKey"
code/fms/fms-vue/src/views/module-management/components/ModuleI18nPanel.vue
+5 -34
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, h, nextTick, ref, watch } from "vue";
import { computed, nextTick, ref, watch } from "vue";
import { message, Modal } from "antdv-next";
import FmsTable from "@/components/fms-table/FmsTable.vue";
import FpsMonitor from "@/components/FpsMonitor.vue";
@@ -174,38 +174,6 @@ const displayedData = computed(() => {
return pivotRows.value.filter((r) => (r.b_key || "").toLowerCase().includes(kw));
});
// 操作列单元格：普通文字「删除」按钮（原生 button，避免每行一个组件实例开销）
const ActionsCell = ({ row }) =>
h(
"button",
{
type: "button",
title: "删除",
onMousedown: (e) => e.stopPropagation(),
style: {
border: "none",
background: "transparent",
cursor: "pointer",
padding: "2px 4px",
color: "#ff4d4f",
fontSize: "12px",
lineHeight: "20px",
},
onClick: (e) => {
e.stopPropagation();
Modal.confirm({
title: "确定删除该记录（含其全部语言）？",
okText: "删除",
okType: "danger",
cancelText: "取消",
onOk: () => deleteRow(row),
});
},
},
"删除",
);
// 动态列：键 + 每种语言一列 + 操作列
const columns = computed(() => {
const cols = [{ dataIndex: "b_key", title: "键", width: 240, editor: { type: "input" } }];
for (const opt of langOptions.value) {
@@ -221,7 +189,10 @@ const columns = computed(() => {
title: "操作",
width: 60,
align: "center",
customCell: ActionsCell,
type: "actions",
actions: [
{ type: "delete", label: "删除", confirm: "确定删除该记录（含其全部语言）？", onClick: (row) => deleteRow(row) },
],
});
return cols;
});
code/fms/fms-vue/src/views/module-management/components/ModuleListConfigPanel.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, ref, watch } from "vue";
import { computed, ref, shallowRef, watch } from "vue";
import FmsTable from "@/components/fms-table/FmsTable.vue";
import { createTempId } from "@/utils/tempId";
import FieldGroupManager from "./FieldGroupManager.vue";
@@ -66,7 +66,7 @@ function deleteRow(record) {
emitUpdate();
}
const columns = [
const columns = shallowRef([
{
dataIndex: "b_field_id",
title: "字段",
@@ -118,7 +118,7 @@ const columns = [
},
],
},
];
]);
</script>
<template>
@@ -131,7 +131,7 @@ const columns = [
</div>
<div class="panel-body">
<FmsTable
:columns="columns"
v-model:columns="columns"
:data-source="localList"
row-key="b_id"
:active-row-key="activeKey"
code/fms/fms-vue/src/views/module-management/components/ModulePowersPanel.vue
+68 -113
View File
@@ -97,6 +97,49 @@ function batchDelete() {
});
}
// ── 编辑状态管理 ──
// 通过 row._editing = { mode: "cell", col: dataIndex } 控制单元格编辑。
// area-selection-change 统一响应鼠标点击和键盘方向键，无需额外 row-click 处理。
// 编辑状态变更后需触发表格重渲染。
function handleEditEnd() {
let hasEditing = false;
localPowers.value.forEach((r) => {
if (r._editing) {
delete r._editing;
hasEditing = true;
}
});
if (hasEditing) localPowers.value = [...localPowers.value];
}
function handleAreaSelectionChange(ranges) {
if (!ranges?.length) {
handleEditEnd();
return;
}
const begin = ranges[0].index.begin;
const row = localPowers.value[begin.row];
const area = tableRef.value?.getSelectedArea();
if (!row || !area) return;
const col = area.cols[begin.col];
if (!col || col.type !== "input") {
handleEditEnd();
return;
}
const rowId = String(row.b_id);
// 目标未变则跳过，避免方向键连续触发全表重渲染
const cur = row._editing;
if (cur && cur.mode === "cell" && cur.col === col.dataIndex && cur.rowId === rowId) return;
localPowers.value.forEach((r) => {
if (r._editing) delete r._editing;
});
row._editing = { mode: "cell", col: col.dataIndex, rowId };
localPowers.value = [...localPowers.value];
}
// ── 快速设置多语言 ──
const i18nModalRef = ref(null);
@@ -153,71 +196,16 @@ const I18nKeyCell = ({ row, cellValue }) =>
],
);
// 启用状态单元格：原生 checkbox + 自定义 CSS 模拟 antdv-next 外观，不创建组件实例
const CanUseCell = ({ row, cellValue }) => {
const checked = cellValue === 1;
return h(
"label",
{
class: "pw-checkbox",
onClick: (e) => e.stopPropagation(),
},
[
h("input", {
type: "checkbox",
checked: checked,
onChange: (e) => {
e.stopPropagation();
row.b_canuse = e.target.checked ? 1 : 0;
emitUpdate();
},
}),
h("span", {
class: ["pw-checkbox-box", checked ? "checked" : null].filter(Boolean).join(" "),
}),
],
);
};
// 操作列单元格：普通文字「删除」按钮（原生 button，避免每行一个组件实例开销）
const ActionsCell = ({ row }) =>
h(
"button",
{
type: "button",
title: "删除",
onMousedown: (e) => e.stopPropagation(),
style: {
border: "none",
background: "transparent",
cursor: "pointer",
padding: "2px 4px",
color: "#ff4d4f",
fontSize: "12px",
lineHeight: "20px",
},
onClick: (e) => {
e.stopPropagation();
Modal.confirm({
title: "确定删除该记录？",
okText: "删除",
okType: "danger",
cancelText: "取消",
onOk: () => deleteRow(row),
});
},
},
"删除",
);
const columns = [
{ dataIndex: "b_code", title: "操作编码", width: 160, editor: { onChange: () => emitUpdate() } },
{ dataIndex: "b_name", title: "操作名称", width: 160, editor: { onChange: () => emitUpdate() } },
const columns = ref([
{ dataIndex: "b_code", title: "操作编码", width: 160, type: "input", onChange: () => emitUpdate(), _onEditEnd: handleEditEnd },
{ dataIndex: "b_name", title: "操作名称", width: 160, type: "input", onChange: () => emitUpdate(), _onEditEnd: handleEditEnd },
{ dataIndex: "b_i18n", title: "多语言键", width: 160, customCell: I18nKeyCell },
{ dataIndex: "b_xh", title: "排序", width: 80, editor: { onChange: () => emitUpdate() } },
{ dataIndex: "b_canuse", title: "启用", width: 70, align: "center", customCell: CanUseCell },
{ dataIndex: "actions", title: "操作", width: 60, align: "center", customCell: ActionsCell },
];
{ dataIndex: "b_xh", title: "排序", width: 80, type: "input", onChange: () => emitUpdate(), _onEditEnd: handleEditEnd },
{ dataIndex: "b_canuse", title: "启用", width: 70, type: "checkbox", onChange: () => emitUpdate() },
{ dataIndex: "actions", title: "操作", width: 60, type: "actions", actions: [
{ type: "delete", label: "删除", confirm: "确定删除该记录？", onClick: (row) => deleteRow(row) },
] },
]);
</script>
<template>
@@ -234,12 +222,14 @@ const columns = [
<FpsMonitor />
<FmsTable
ref="tableRef"
:columns="columns"
v-model:columns="columns"
:data-source="localPowers"
row-key="b_id"
:active-row-key="activeKey"
:row-selection="rowSelection"
:area-selection="true"
@row-click="(_, row) => (activeKey = String(row.b_id))"
@area-selection-change="handleAreaSelectionChange"
/>
</div>
<I18nQuickSetModal ref="i18nModalRef" />
@@ -273,57 +263,22 @@ const columns = [
min-height: 0;
width: 100%;
}
</style>
<!-- 非 scoped 全局样式：customCell 通过 h() 渲染的元素不带 data-v 属性，
scoped 的 :deep() 可能不生效，用全局 style 确保 checkbox 样式注入。
基于 antdv-next Checkbox 源码（checkbox/style/index.js）精确模拟外观。 -->
<style lang="scss">
.pw-checkbox {
display: flex;
align-items: center;
justify-content: center;
// 编辑态 input 样式
:deep(.fms-editable-input) {
width: 100%;
cursor: pointer;
line-height: 1;
margin: 0;
height: 100%;
border: 1px solid #1677ff;
border-radius: 4px;
padding: 0 8px;
font-size: 13px;
outline: none;
box-sizing: border-box;
background: #fff;
input {
position: absolute;
width: 0;
height: 0;
opacity: 0;
margin: 0;
}
.pw-checkbox-box {
display: block;
position: relative;
width: 16px;
height: 16px;
border: 1px solid #d9d9d9;
border-radius: 4px;
background: #fff;
transition: all 0.2s;
box-sizing: border-box;
flex: none;
&.checked {
background: #1677ff;
border-color: #1677ff;
&::after {
content: "";
position: absolute;
left: 5px;
top: 2px;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
&:focus {
border-color: #1677ff;
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
}
}
</style>
code/fms/fms-vue/src/views/module-management/components/ModuleQueryConfigPanel.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, ref, watch } from "vue";
import { computed, ref, shallowRef, watch } from "vue";
import FmsTable from "@/components/fms-table/FmsTable.vue";
import { createTempId } from "@/utils/tempId";
@@ -69,7 +69,7 @@ function deleteRow(record) {
emitUpdate();
}
const columns = [
const columns = shallowRef([
{
dataIndex: "b_field_id",
title: "字段",
@@ -123,7 +123,7 @@ const columns = [
},
],
},
];
]);
</script>
<template>
@@ -135,7 +135,7 @@ const columns = [
</div>
<div class="panel-body">
<FmsTable
:columns="columns"
v-model:columns="columns"
:data-source="localQuery"
row-key="b_id"
:active-row-key="activeKey"
code/fms/fms-vue/src/views/module-management/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, h, ref, watch } from "vue";
import { computed, ref, watch } from "vue";
import { message, Modal } from "antdv-next";
import FmsTree from "@/components/FmsTree.vue";
import { loadDataApi, saveObjectApi, nextIdApi, describeApi } from "@/services/api";
code/fms/fms-vue/src/views/system/i18n-type/index.vue
+4 -4
View File
@@ -1,5 +1,5 @@
<script setup>
import { computed, h, onMounted, ref } from "vue";
import { computed, h, onMounted, ref, shallowRef } from "vue";
import { message, Switch, Button, Popconfirm, Tag } from "antdv-next";
import { Plus } from "@lucide/vue";
import FmsTable from "@/components/fms-table/FmsTable.vue";
@@ -101,7 +101,7 @@ function createActionsCell() {
};
}
const columns = [
const columns = shallowRef([
{ dataIndex: "b_code", title: "简称 / 编码", width: 150 },
{ dataIndex: "b_name", title: "名称", width: 160 },
{
@@ -126,7 +126,7 @@ const columns = [
align: "center",
customCell: createActionsCell(),
},
];
]);
/* ---------- 行内开关即时保存 ---------- */
async function saveRow(row, patch) {
@@ -247,7 +247,7 @@ async function saveForm() {
</div>
<div class="panel-body">
<FmsTable
:columns="columns"
v-model:columns="columns"
:data-source="data"
row-key="b_id"
:loading="loading"