diff --git a/code/fms/fms-vue/src/views/system/module-management/components/ModuleFieldsPanel.vue b/code/fms/fms-vue/src/views/system/module-management/components/ModuleFieldsPanel.vue index 83fbc8e7..4a20366f 100644 --- a/code/fms/fms-vue/src/views/system/module-management/components/ModuleFieldsPanel.vue +++ b/code/fms/fms-vue/src/views/system/module-management/components/ModuleFieldsPanel.vue @@ -2,21 +2,45 @@ /** * 字段定义面板(s_field):可编辑表格维护模块字段。 * i18n 键按 field.{moduleCode}.{fieldName} 自动同步。 + * 表单/列表/查询三列为「参与开关」:在一行内表达该字段参与了哪些界面, + * 开关即改即生效(生成/隐藏默认配置行);布局细节仍在对应设计器调整。 + * 语义见 fieldParticipation.js(沿用 fieldAreaDefaults 的行内开关约定)。 */ import { ref, shallowRef, watch } from 'vue' import FmsTable from '@/components/fms-table/FmsTable.vue' import { buildModuleItemI18nKey, syncModuleItemI18nKeys } from '@/utils/i18n' import I18nQuickSetModal from './I18nQuickSetModal.vue' import { createI18nKeyCell } from './I18nKeyCell' +import { createParticipationCell } from './ParticipationCell' +import { + isFormOn, + isListOn, + isQueryOn, + toggleForm, + toggleList, + toggleQuery, +} from '../fieldParticipation' const props = defineProps({ moduleId: { type: String, required: true }, moduleCode: { type: String, default: '' }, fields: { type: Array, default: () => [] }, + /** 参与开关所需的三个配置草稿(由 index.vue 传入,切换后事件回写) */ + editConfig: { type: Array, default: () => [] }, + listConfig: { type: Array, default: () => [] }, + queryConfig: { type: Array, default: () => [] }, + /** 模块类型:表单参与列仅 data 模块展示(查询模块无表单设计) */ + moduleType: { type: String, default: null }, loading: { type: Boolean, default: false }, }) -const emit = defineEmits(['update', 'i18nSaved']) +const emit = defineEmits([ + 'update', + 'i18nSaved', + 'updateEditConfig', + 'updateListConfig', + 'updateQueryConfig', +]) const FIELD_TYPES = [ { label: '输入框', value: 'input' }, @@ -74,37 +98,83 @@ function openI18n(row) { const I18nKeyCell = createI18nKeyCell({ onOpen: openI18n }) -const columns = shallowRef([ - { dataIndex: 'b_field', title: '字段名', width: 150 }, - { dataIndex: 'b_name', title: '字段名称', width: 140, editor: { type: 'input' } }, - { - dataIndex: 'b_type', - title: '控件类型', - width: 130, - editor: { type: 'select', options: FIELD_TYPES }, +/* ---------- 参与开关(表单/列表/查询) ---------- */ +/* 字段行 → 配置行:字段定义行的 b_id 与配置行的 b_field_id 对应; + 字段本身未启用时开关禁用(停用字段运行时不显示,参与无意义) */ + +function onToggleForm(field) { + if (props.loading) return + emit('updateEditConfig', toggleForm(props.editConfig, field, props.moduleId)) +} + +function onToggleList(field) { + if (props.loading) return + emit('updateListConfig', toggleList(props.listConfig, field, props.moduleId)) +} + +function onToggleQuery(field) { + if (props.loading) return + emit('updateQueryConfig', toggleQuery(props.queryConfig, field, props.moduleId)) +} + +const FormCell = createParticipationCell({ isOn: (f) => isFormOn(props.editConfig, f), onToggle: onToggleForm, title: '参与表单' }) +const ListCell = createParticipationCell({ isOn: (f) => isListOn(props.listConfig, f), onToggle: onToggleList, title: '参与列表显示' }) +const QueryCell = createParticipationCell({ isOn: (f) => isQueryOn(props.queryConfig, f), onToggle: onToggleQuery, title: '作为查询条件' }) + +const columns = shallowRef(buildColumns()) + +// 列宽拖拽结果随 v-model 写回 columns,仅在模块类型变化时重建 +watch( + () => props.moduleType, + () => { + columns.value = buildColumns() }, - { - dataIndex: 'b_dbtype', - title: '数据库类型', - width: 130, - editor: { type: 'select', options: DB_TYPES }, - }, - { - dataIndex: 'b_length', - title: '长度', - width: 80, - editor: { type: 'input', inputType: 'number' }, - }, - { dataIndex: 'b_default_value', title: '默认值', width: 120, editor: { type: 'input' } }, - { dataIndex: 'b_i18n', title: '多语言键', width: 220, customCell: I18nKeyCell }, - { - dataIndex: 'b_canuse', - title: '启用', - width: 70, - align: 'center', - editor: { type: 'checkbox' }, - }, -]) +) + +function buildColumns() { + const baseColumns = [ + { dataIndex: 'b_field', title: '字段名', width: 150 }, + { dataIndex: 'b_name', title: '字段名称', width: 140, editor: { type: 'input' } }, + { + dataIndex: 'b_type', + title: '控件类型', + width: 130, + editor: { type: 'select', options: FIELD_TYPES }, + }, + { + dataIndex: 'b_dbtype', + title: '数据库类型', + width: 130, + editor: { type: 'select', options: DB_TYPES }, + }, + { + dataIndex: 'b_length', + title: '长度', + width: 80, + editor: { type: 'input', inputType: 'number' }, + }, + { dataIndex: 'b_default_value', title: '默认值', width: 120, editor: { type: 'input' } }, + { dataIndex: 'b_i18n', title: '多语言键', width: 220, customCell: I18nKeyCell }, + ] + // 表单参与列仅数据模块展示(查询模块无表单设计) + const participationColumns = [ + ...(props.moduleType === 'data' + ? [{ dataIndex: '__form', title: '表单', width: 64, align: 'center', customCell: FormCell }] + : []), + { dataIndex: '__list', title: '列表', width: 64, align: 'center', customCell: ListCell }, + { dataIndex: '__query', title: '查询', width: 64, align: 'center', customCell: QueryCell }, + ] + const tailColumns = [ + { + dataIndex: 'b_canuse', + title: '启用', + width: 70, + align: 'center', + editor: { type: 'checkbox' }, + }, + ] + return [...baseColumns, ...participationColumns, ...tailColumns] +}