20260723173317

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

@@ -0,0 +1,163 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import FmsTable from "@/components/fms-table/FmsTable.vue";
+import { createTempId } from "@/utils/tempId";
+import FieldGroupManager from "./FieldGroupManager.vue";
+import { createDeleteCell, createSelectCell, createToggleCell } from "./cellRenderers";
+
+const props = defineProps({
+  moduleId: { type: String, required: true },
+  editConfig: { type: Array, default: () => [] },
+  fields: { type: Array, default: () => [] },
+  groups: { type: Array, default: () => [] },
+  loading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update", "updateGroups"]);
+
+const localEdit = ref([]);
+const groupManagerVisible = ref(false);
+
+watch(
+  () => props.editConfig,
+  (val) => {
+    localEdit.value = val?.map((r) => ({ ...r })) || [];
+  },
+  { immediate: true },
+);
+
+function emitUpdate() {
+  emit("update", localEdit.value.map((r) => ({ ...r })));
+}
+
+function setField(row, field, value) {
+  row[field] = value === undefined || value === null ? null : value;
+  emitUpdate();
+}
+
+const availableFields = computed(() =>
+  (props.fields || [])
+    .filter((f) => f.b_canuse === 1)
+    .map((f) => ({ label: f.b_name || f.b_field, value: String(f.b_id) })),
+);
+
+const groupOptions = computed(() =>
+  (props.groups || [])
+    .filter((g) => g.b_canuse === 1)
+    .map((g) => ({ label: g.b_title || `分组-${g.b_id}`, value: String(g.b_id) })),
+);
+
+function addRow() {
+  localEdit.value.push({
+    b_id: createTempId(),
+    b_module_id: props.moduleId,
+    b_field_id: null,
+    b_required: 0,
+    b_readonly: 0,
+    b_disabled: 0,
+    b_group_id: null,
+    b_xh: localEdit.value.length * 10,
+  });
+  emitUpdate();
+}
+
+function deleteRow(record) {
+  localEdit.value = localEdit.value.filter((r) => r.b_id !== record.b_id);
+  emitUpdate();
+}
+
+function makeSwitchCol(field, title, width) {
+  return {
+    dataIndex: field,
+    title,
+    width: width || 60,
+    align: "center",
+    customCell: createToggleCell(field, (row) => setField(row, field, row[field] === 1 ? 0 : 1)),
+  };
+}
+
+const columns = [
+  {
+    dataIndex: "b_field_id",
+    title: "字段",
+    width: 160,
+    customCell: createSelectCell({
+      value: "b_field_id",
+      getOptions: () => availableFields.value,
+      onChange: (row, v) => setField(row, "b_field_id", v),
+      placeholder: "选择字段",
+    }),
+  },
+  makeSwitchCol("b_required", "必填"),
+  makeSwitchCol("b_readonly", "只读"),
+  makeSwitchCol("b_disabled", "禁用"),
+  {
+    dataIndex: "b_group_id",
+    title: "编辑分组",
+    width: 160,
+    customCell: createSelectCell({
+      value: "b_group_id",
+      getOptions: () => groupOptions.value,
+      onChange: (row, v) => setField(row, "b_group_id", v),
+      placeholder: "选择分组",
+    }),
+  },
+  { dataIndex: "b_xh", title: "排序号", width: 80 },
+  {
+    dataIndex: "actions",
+    title: "操作",
+    width: 60,
+    align: "center",
+    customCell: createDeleteCell((row) => deleteRow(row)),
+  },
+];
+</script>
+
+<template>
+  <div class="edit-config-panel">
+    <div class="panel-toolbar">
+      <a-space>
+        <a-button type="primary" @click="addRow">新增行</a-button>
+        <a-button @click="groupManagerVisible = true">分组管理</a-button>
+      </a-space>
+    </div>
+    <div class="panel-body">
+      <FmsTable :columns="columns" :data-source="localEdit" row-key="b_id" />
+    </div>
+    <FieldGroupManager
+      v-model:visible="groupManagerVisible"
+      :module-id="moduleId"
+      :groups="groups"
+      @update="(v) => emit('updateGroups', v)"
+    />
+  </div>
+</template>
+
+<style scoped lang="scss">
+.edit-config-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>