20260723173317

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

@@ -1,52 +1,116 @@
 <script setup>
-import { computed } from "vue";
-import { RefreshCw } from "@lucide/vue";
-import MetadataTablePanel from "./MetadataTablePanel.vue";
+import { ref, watch } from "vue";
+import FmsTable from "@/components/fms-table/FmsTable.vue";
+import { createSelectCell, createToggleCell } from "./cellRenderers";
 
-defineProps({ syncing: Boolean });
-defineEmits(["sync"]);
-const fields = defineModel("fields", { type: Array, default: () => [] });
-const columns = computed(() => [
-  { dataIndex: "b_field", title: "字段", width: 150 },
-  { dataIndex: "b_name", title: "默认名称", width: 160, editor: { maxlength: 100 } },
-  { dataIndex: "b_i18n", title: "多语言键", width: 240, editor: { maxlength: 150 } },
-  {
-    dataIndex: "b_field_type",
-    title: "字段类型",
-    width: 130,
-    editor: {
-      type: "select",
-      options: [
-        "string",
-        "text",
-        "number",
-        "date",
-        "datetime",
-        "boolean",
-        "select_id",
-        "select_input",
-      ].map((value) => ({ value, label: value })),
-    },
+const FIELD_TYPES = [
+  { label: "输入框", value: "input" },
+  { label: "文本域", value: "textarea" },
+  { label: "数字", value: "number" },
+  { label: "金额", value: "money" },
+  { label: "日期", value: "date" },
+  { label: "日期时间", value: "datetime" },
+  { label: "开关", value: "switch" },
+  { label: "下拉选择", value: "select" },
+];
+
+const props = defineProps({
+  moduleId: { type: String, required: true },
+  fields: { type: Array, default: () => [] },
+  viewTable: { type: String, default: null },
+  loading: { type: Boolean, default: false },
+});
+
+const emit = defineEmits(["update", "sync"]);
+
+const localFields = ref([]);
+
+watch(
+  () => props.fields,
+  (val) => {
+    localFields.value = val?.map((r) => ({ ...r })) || [];
   },
-  { dataIndex: "b_dict_code", title: "字典编码", width: 150, editor: { maxlength: 100 } },
-  { dataIndex: "b_value", title: "默认值", width: 160, editor: { maxlength: 500 } },
-  { dataIndex: "b_remark", title: "说明", width: 220, editor: { maxlength: 500 } },
-  { dataIndex: "b_canuse", title: "启用", width: 70, align: "center", editor: "checkbox" },
-]);
+  { immediate: true },
+);
+
+function emitUpdate() {
+  emit("update", localFields.value.map((r) => ({ ...r })));
+}
+
+function setField(row, field, value) {
+  row[field] = value === "" ? null : value;
+  emitUpdate();
+}
+
+const columns = [
+  { dataIndex: "b_field", title: "字段名", width: 140 },
+  { dataIndex: "b_name", title: "字段名称", width: 140 },
+  {
+    dataIndex: "b_type",
+    title: "控件类型",
+    width: 130,
+    customCell: createSelectCell({
+      value: "b_type",
+      getOptions: () => FIELD_TYPES,
+      onChange: (row, v) => setField(row, "b_type", v),
+    }),
+  },
+  { dataIndex: "b_default_value", title: "默认值", width: 120 },
+  { dataIndex: "b_i18n", title: "多语言键", width: 140 },
+  {
+    dataIndex: "b_canuse",
+    title: "启用",
+    width: 70,
+    align: "center",
+    customCell: createToggleCell("b_canuse", (row) => setField(row, "b_canuse", row.b_canuse === 1 ? 0 : 1)),
+  },
+];
 </script>
 
 <template>
-  <MetadataTablePanel
-    v-model:rows="fields"
-    title="字段定义"
-    :columns="columns"
-    :can-add="false"
-    :can-delete="false"
-  >
-    <template #actions>
-      <a-button type="primary" :loading="syncing" @click="$emit('sync')">
-        <RefreshCw />从视图同步
-      </a-button>
-    </template>
-  </MetadataTablePanel>
+  <div class="fields-panel">
+    <div class="panel-toolbar">
+      <a-space>
+        <a-button
+          v-if="viewTable"
+          type="primary"
+          @click="emit('sync')"
+        >
+          同步字段 ({{ viewTable }})
+        </a-button>
+      </a-space>
+    </div>
+    <div class="panel-body">
+      <FmsTable :columns="columns" :data-source="localFields" row-key="b_id" />
+    </div>
+  </div>
 </template>
+
+<style scoped lang="scss">
+.fields-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>