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

<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>