20260726225220

code/fms/fms-vue/src/views/module-management/components/ModulePowersPanel.vue

@@ -3,7 +3,6 @@ import { computed, h, nextTick, ref, watch } from "vue";
 import { message, Modal } from "antdv-next";
 import { Languages } from "@lucide/vue";
 import FmsTable from "@/components/fms-table/FmsTable.vue";
-import FpsMonitor from "@/components/FpsMonitor.vue";
 import { createTempId } from "@/utils/tempId";
 import I18nQuickSetModal from "./I18nQuickSetModal.vue";
 
@@ -23,7 +22,8 @@ const tableRef = ref(null);
 // 多语言键按 power.<模块代码>.<操作编码> 自动生成，无需手动填写。
 watch(
   () => [props.powers, props.moduleCode],
-  ([val]) => {
+  ([val, moduleCode], previous = []) => {
+    if (val === localPowers.value && moduleCode === previous[1]) return;
     localPowers.value = (val || []).map((r) => ({
       ...r,
       b_i18n:
@@ -34,13 +34,11 @@ watch(
 );
 
 function emitUpdate() {
-  emit(
-    "update",
-    localPowers.value.map((r) => ({ ...r })),
-  );
+  emit("update", localPowers.value);
 }
 
 async function addRow() {
+  if (props.loading) return;
   const newId = createTempId();
   localPowers.value.push({
     b_id: newId,
@@ -59,6 +57,7 @@ async function addRow() {
 }
 
 function deleteRow(record) {
+  if (props.loading) return;
   localPowers.value = localPowers.value.filter((r) => r.b_id !== record.b_id);
   // 同步清理选择状态，避免选中项被删后 keys 残留
   const k = String(record.b_id);
@@ -80,6 +79,7 @@ const rowSelection = computed(() => ({
 
 // 批量删除选中行
 function batchDelete() {
+  if (props.loading) return;
   const keys = selectedRowKeys.value;
   if (!keys.length) return;
   Modal.confirm({
@@ -97,47 +97,9 @@ 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];
+// 编辑器已直接更新当前行，这里只向父级同步草稿。
+function onCellChange() {
+  emitUpdate();
 }
 
 // ── 快速设置多语言 ──
@@ -197,14 +159,29 @@ const I18nKeyCell = ({ row, cellValue }) =>
   );
 
 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_code", title: "操作编码", width: 160, editor: { type: "input" } },
+  { dataIndex: "b_name", title: "操作名称", width: 160, editor: { type: "input" } },
   { dataIndex: "b_i18n", title: "多语言键", width: 160, customCell: I18nKeyCell },
-  { 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) },
-  ] },
+  { dataIndex: "b_xh", title: "排序", width: 80, editor: { type: "input" } },
+  {
+    dataIndex: "b_canuse",
+    title: "启用",
+    width: 70,
+    editor: { type: "checkbox" },
+  },
+  {
+    dataIndex: "actions",
+    title: "操作",
+    width: 60,
+    actions: [
+      {
+        type: "delete",
+        label: "删除",
+        confirm: "确定删除该记录？",
+        onClick: (row) => deleteRow(row),
+      },
+    ],
+  },
 ]);
 </script>
 
@@ -212,24 +189,23 @@ const columns = ref([
   <div class="powers-panel">
     <div class="panel-toolbar">
       <a-space>
-        <a-button type="primary" @click="addRow">新增权限</a-button>
-        <a-button danger :disabled="!selectedRowKeys.length" @click="batchDelete">
+        <a-button type="primary" :disabled="loading" @click="addRow">新增权限</a-button>
+        <a-button danger :disabled="loading || !selectedRowKeys.length" @click="batchDelete">
           批量删除{{ selectedRowKeys.length ? `(${selectedRowKeys.length})` : "" }}
         </a-button>
       </a-space>
     </div>
     <div class="panel-body">
-      <FpsMonitor />
       <FmsTable
         ref="tableRef"
         v-model:columns="columns"
         :data-source="localPowers"
+        :editable="!loading"
         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"
+        @change="onCellChange"
       />
     </div>
     <I18nQuickSetModal ref="i18nModalRef" />
@@ -263,22 +239,4 @@ const columns = ref([
   min-height: 0;
   width: 100%;
 }
-
-// 编辑态 input 样式
-:deep(.fms-editable-input) {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #1677ff;
-  border-radius: 4px;
-  padding: 0 8px;
-  font-size: 13px;
-  outline: none;
-  box-sizing: border-box;
-  background: #fff;
-
-  &:focus {
-    border-color: #1677ff;
-    box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
-  }
-}
 </style>