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

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);
const activeKey = ref(null);

watch(
  () => props.editConfig,
  (val) => {
    localEdit.value = val?.map((r) => ({ ...r })) || [];
  },
  { immediate: true },
);

function emitUpdate() {
  emit(
    "update",
    localEdit.value.map((r) => ({ ...r })),
  );
}

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",
    editor: { type: "checkbox", onChange: () => emitUpdate() },
  };
}

const columns = [
  {
    dataIndex: "b_field_id",
    title: "字段",
    width: 160,
    editor: {
      type: "select",
      options: () => availableFields.value,
      onChange: () => emitUpdate(),
    },
  },
  makeSwitchCol("b_required", "必填"),
  makeSwitchCol("b_readonly", "只读"),
  makeSwitchCol("b_disabled", "禁用"),
  {
    dataIndex: "b_group_id",
    title: "编辑分组",
    width: 160,
    editor: {
      type: "select",
      options: () => groupOptions.value,
      onChange: () => emitUpdate(),
    },
  },
  { dataIndex: "b_xh", title: "排序号", width: 80 },
  {
    dataIndex: "actions",
    title: "操作",
    width: 60,
    align: "center",
    actions: [
      {
        type: "danger",
        label: "删除",
        confirm: { title: "确定删除该记录？", okText: "删除" },
        onClick: (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"
        :active-row-key="activeKey"
        @row-click="(ev, row) => (activeKey = row.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 0;
}

.panel-body {
  flex: 1;
  min-height: 0;
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
}

.panel-body > :deep(.fms-table) {
  flex: 1;
  min-height: 0;
  width: 100%;
}
</style>