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

<script setup>
import ModuleTranslationEditor from "./ModuleTranslationEditor.vue";

const props = defineProps({
  directoryParentOptions: { type: Array, default: () => [] },
  parentOptions: { type: Array, default: () => [] },
});
const emit = defineEmits(["update-module-code"]);
const module = defineModel("module", { type: Object, default: null });
const translations = defineModel("translations", { type: Object, default: () => ({}) });

function updateRoute(value) {
  module.value.b_route = value || null;
  if (!String(value || "").trim()) module.value.b_canmenu = 0;
}
</script>

<template>
  <section v-if="module" class="module-basic-info">
    <a-form v-if="module.b_type === 'directory'" layout="vertical" class="directory-form">
      <div class="directory-grid">
        <a-form-item label="模块编码" required>
          <a-input :value="module.b_code" @update:value="emit('update-module-code', $event)" />
        </a-form-item>
        <a-form-item label="模块名称" required>
          <a-input v-model:value="module.b_name" />
        </a-form-item>
        <a-form-item label="上级模块">
          <a-select
            v-model:value="module.b_parent_id"
            allow-clear
            show-search
            option-filter-prop="label"
            :options="directoryParentOptions.filter((item) => item.value !== module.b_id)"
          />
        </a-form-item>
        <a-form-item label="多语言键">
          <div class="i18n-editor-row">
            <a-input v-model:value="module.b_i18n" />
            <ModuleTranslationEditor
              v-model:translations="translations"
              :i18n-key="module.b_i18n"
              :default-name="module.b_name"
              :disabled="!module.b_i18n?.trim()"
            />
          </div>
        </a-form-item>
        <a-form-item label="显示顺序">
          <a-input-number v-model:value="module.b_xh" :min="0" />
        </a-form-item>
      </div>
    </a-form>

    <a-form v-else layout="vertical" class="basic-form">
      <div class="form-grid">
        <a-form-item label="模块编码" required>
          <a-input :value="module.b_code" @update:value="emit('update-module-code', $event)" />
        </a-form-item>
        <a-form-item label="模块名称" required>
          <a-input v-model:value="module.b_name" />
        </a-form-item>
        <a-form-item label="上级模块">
          <a-select
            v-model:value="module.b_parent_id"
            allow-clear
            show-search
            option-filter-prop="label"
            :options="parentOptions"
          />
        </a-form-item>
        <a-form-item label="页面路由（可选）">
          <a-input
            :value="module.b_route"
            placeholder="留空时作为数据模块使用"
            @update:value="updateRoute"
          />
        </a-form-item>
        <a-form-item label="多语言键">
          <div class="i18n-editor-row">
            <a-input v-model:value="module.b_i18n" />
            <ModuleTranslationEditor
              v-model:translations="translations"
              :i18n-key="module.b_i18n"
              :default-name="module.b_name"
              :disabled="!module.b_i18n?.trim()"
            />
          </div>
        </a-form-item>
        <a-form-item label="查询表或视图">
          <a-input v-model:value="module.b_viewtable" />
        </a-form-item>
        <a-form-item label="保存表">
          <a-input v-model:value="module.b_savetable" />
        </a-form-item>
        <a-form-item label="主键字段">
          <a-input v-model:value="module.b_keyfield" />
        </a-form-item>
        <a-form-item label="排序条件">
          <a-input v-model:value="module.b_orderfield" />
        </a-form-item>
        <a-form-item label="显示顺序">
          <a-input-number v-model:value="module.b_xh" :min="0" />
        </a-form-item>
      </div>
    </a-form>
  </section>
</template>

<style scoped>
.module-basic-info {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-top: 10px 0;
}

.directory-form {
  max-width: 760px;
}

.basic-form {
  max-width: 1040px;
  padding-top: 2px;
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 10px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 10px;
}

.i18n-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.i18n-editor-row :deep(.ant-input) {
  min-width: 0;
  flex: 1 1 auto;
}

:deep(.ant-form-item) {
  margin-bottom: 8px;
}

@media (max-width: 980px) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .directory-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }
}
</style>