20260723173317

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

@@ -1,34 +1,112 @@
 <script setup>
+import { ref, watch } from "vue";
+import FmsTable from "@/components/fms-table/FmsTable.vue";
 import { createTempId } from "@/utils/tempId";
-import MetadataTablePanel from "./MetadataTablePanel.vue";
+import { createDeleteCell, createToggleCell } from "./cellRenderers";
 
-const powers = defineModel("powers", { type: Array, default: () => [] });
-const columns = [
-  { dataIndex: "b_code", title: "操作编码", width: 150, editor: { maxlength: 50 } },
-  { dataIndex: "b_name", title: "默认名称", width: 180, editor: { maxlength: 100 } },
-  { dataIndex: "b_i18n", title: "多语言键", width: 260, editor: { maxlength: 150 } },
-  { dataIndex: "b_xh", title: "顺序", width: 80, editor: { type: "number", min: 0 } },
-  { dataIndex: "b_canuse", title: "启用", width: 70, align: "center", editor: "checkbox" },
-];
+const props = defineProps({
+  moduleId: { type: String, required: true },
+  powers: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false },
+});
 
-function addPower() {
-  powers.value.push({
+const emit = defineEmits(["update"]);
+
+const localPowers = ref([]);
+
+watch(
+  () => props.powers,
+  (val) => {
+    localPowers.value = val?.map((r) => ({ ...r })) || [];
+  },
+  { immediate: true },
+);
+
+function emitUpdate() {
+  emit("update", localPowers.value.map((r) => ({ ...r })));
+}
+
+function addRow() {
+  localPowers.value.push({
     b_id: createTempId(),
+    b_module_id: props.moduleId,
     b_code: "",
-    b_name: "新操作",
+    b_name: "",
     b_i18n: null,
-    b_xh: Math.max(0, ...powers.value.map((item) => Number(item.b_xh) || 0)) + 10,
+    b_xh: localPowers.value.length * 10,
     b_canuse: 1,
   });
+  emitUpdate();
 }
+
+function deleteRow(record) {
+  localPowers.value = localPowers.value.filter((r) => r.b_id !== record.b_id);
+  emitUpdate();
+}
+
+const columns = [
+  { dataIndex: "b_code", title: "操作编码", width: 160 },
+  { dataIndex: "b_name", title: "操作名称", width: 160 },
+  { dataIndex: "b_i18n", title: "多语言键", width: 160 },
+  { dataIndex: "b_xh", title: "排序", width: 80 },
+  {
+    dataIndex: "b_canuse",
+    title: "启用",
+    width: 70,
+    align: "center",
+    customCell: createToggleCell("b_canuse", (row) => {
+      row.b_canuse = row.b_canuse === 1 ? 0 : 1;
+      emitUpdate();
+    }),
+  },
+  {
+    dataIndex: "actions",
+    title: "操作",
+    width: 60,
+    align: "center",
+    customCell: createDeleteCell((row) => deleteRow(row)),
+  },
+];
 </script>
 
 <template>
-  <MetadataTablePanel
-    v-model:rows="powers"
-    title="模块操作权限"
-    add-text="新增操作"
-    :columns="columns"
-    @add="addPower"
-  />
+  <div class="powers-panel">
+    <div class="panel-toolbar">
+      <a-space>
+        <a-button type="primary" @click="addRow">新增权限</a-button>
+      </a-space>
+    </div>
+    <div class="panel-body">
+      <FmsTable :columns="columns" :data-source="localPowers" row-key="b_id" />
+    </div>
+  </div>
 </template>
+
+<style scoped lang="scss">
+.powers-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.panel-toolbar {
+  display: flex;
+  flex: none;
+  gap: 8px;
+  padding: 12px 20px;
+}
+
+.panel-body {
+  flex: 1;
+  min-height: 0;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.panel-body > :deep(.fms-table) {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
+}
+</style>