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

<script setup>
import { computed, ref, shallowRef, watch } from "vue";
import FmsTable from "@/components/fms-table/FmsTable.vue";
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: () => [] },
  referencedGroupIds: { type: Array, default: () => [] },
  loading: { type: Boolean, default: false },
});

const emit = defineEmits(["update", "groupsSaved"]);

const localEdit = ref([]);
const groupManagerVisible = ref(false);
const activeKey = ref(null);

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

function emitUpdate() {
  emit("update", localEdit.value);
}

function onRowOrderChange(rows) {
  localEdit.value = rows.map((row, index) => ({
    ...row,
    b_xh: (index + 1) * 10,
  }));
  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 deleteRow(record) {
  if (props.loading) return;
  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" },
  };
}

const columns = shallowRef([
  {
    dataIndex: "b_field_id",
    title: "字段",
    width: 160,
    editor: {
      type: "select",
      options: () => availableFields.value,
    },
  },
  makeSwitchCol("b_required", "必填"),
  makeSwitchCol("b_readonly", "只读"),
  makeSwitchCol("b_disabled", "禁用"),
  {
    dataIndex: "b_group_id",
    title: "编辑分组",
    width: 160,
    editor: {
      type: "select",
      options: () => groupOptions.value,
    },
  },
  { 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 :disabled="loading" @click="groupManagerVisible = true">分组管理</a-button>
      </a-space>
    </div>
    <div class="panel-body">
      <FmsTable
        v-model:columns="columns"
        :data-source="localEdit"
        :editable="!loading"
        :row-draggable="!loading"
        row-key="b_id"
        :active-row-key="activeKey"
        @row-click="(_, row) => (activeKey = String(row.b_id))"
        @change="emitUpdate"
        @row-order-change="onRowOrderChange"
      />
    </div>
    <FieldGroupManager
      v-model:visible="groupManagerVisible"
      :module-id="moduleId"
      :groups="groups"
      :referenced-group-ids="referencedGroupIds"
      @saved="(groups, idMapping) => emit('groupsSaved', groups, idMapping)"
    />
  </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>