minnan/src/pages/editor/editors/CommonListPropsEditor.vue

<template>
  <div class="common-list-props-editor">
    <a-form :labelCol="{ span: 6 }" size="small">
      <a-form-item label="显示 Tab">
        <a-checkbox v-model:checked="props.props.showTab" :indeterminate="props.props.showTab === undefined" />
      </a-form-item>
      <a-form-item label="显示搜索">
        <a-checkbox v-model:checked="props.props.showSearch" :indeterminate="props.props.showSearch === undefined" />
      </a-form-item>
      <a-form-item label="显示总数">
        <a-checkbox v-model:checked="props.props.showTotal" :indeterminate="props.props.showTotal === undefined" />
      </a-form-item>
      <a-form-item label="列表项类型">
        <ItemTypeEditor v-model="props.props.itemType" />
      </a-form-item>
      <a-form-item label="详情页">
        <LinkPathEditor v-model="(props.props.detailsPage as string)" :noParams="true" />
      </a-form-item>
    </a-form>

    <a-collapse v-model:activeKey="activeKeys" class="props-collapse">
      <a-collapse-panel key="tabs" header="子页面 (tabs) 树型结构">
        <div v-for="(tab, i) in tabItems" :key="tabKey(tab, i)" class="nested-item tab-item">
          <a-collapse>
            <a-collapse-panel :key="i" :header="tabHeader(tab)">
              <a-form :labelCol="{ span: 4 }" size="small">
                <a-form-item label="文本">
                  <a-input v-model:value="tab.text" />
                </a-form-item>
                <a-form-item label="类型">
                  <a-select
                    v-model:value="tab.type"
                    style="width: 100%"
                    :options="tabTypeOptions"
                  />
                </a-form-item>
                <a-form-item label="TAB宽度">
                  <a-input-number
                    v-model:value="tab.width"
                    style="width: 100%"
                  />
                </a-form-item>
                <a-form-item label="列表详情页">
                  <LinkPathEditor v-model="tab.detailsPage" />
                </a-form-item>
                <a-form-item label="显示">
                  <a-checkbox
                    v-model:checked="tab.visible" 
                    :indeterminate="tab.visible === undefined"
                  >
                    (仅在TAB组件可见时有效)
                  </a-checkbox>
                </a-form-item>
                <template v-if="tab.type === 'list'">
                  <a-form-item label="数据接口">
                    <DynamicDataEditor v-model="tab.data" />
                  </a-form-item>
                  <a-form-item label="下拉选择定义">
                    <DropdownDefinesEditor v-model="tab.dropdownDefines" />
                  </a-form-item>
                  <a-form-item label="数据处理显示">
                    <DataSolveEditor v-model="tab.dataSolve" />
                  </a-form-item>
                </template>
                <template v-else-if="tab.type === 'jump'">
                  <a-form-item label="跳转URL">
                    <a-input v-model:value="tab.url" />
                  </a-form-item>
                  <a-form-item label="跳转参数">
                    <KeyValueEditor
                      v-model="tab.params"
                      :forceOneLevel="true"
                    />
                  </a-form-item>
                </template>
                <template v-else-if="tab.type === 'nestCategory'">
                  <a-form-item label="子栏目">
                    <NestCategoryEditor :categorys="tab.categorys" />
                  </a-form-item>
                </template>
                <a-popconfirm
                  title="确认删除吗？"
                  @confirm="removeTab(i)"
                >
                  <a-button type="link" danger size="small">删除 Tab</a-button>
                </a-popconfirm>
              </a-form>
            </a-collapse-panel>
          </a-collapse>
        </div>
        <a-button type="dashed" block size="small" @click="addTab">+ 添加 Tab</a-button>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import type { IHomeCommonCategoryListDefine, IHomeCommonCategoryListTabItemDefine } from '../../article/data/CommonCategoryDefine';
import KeyValueEditor from '../components/KeyValueEditor.vue';
import DynamicDataEditor from '../components/DynamicDataEditor.vue';
import LinkPathEditor from '../components/LinkPathEditor.vue';
import DataSolveEditor from '../components/DataSolveEditor.vue';
import NestCategoryEditor from '../subpart/NestCategoryEditor.vue';
import ItemTypeEditor from '../components/ItemTypeEditor.vue';
import DropdownDefinesEditor from '../components/DropdownDefinesEditor.vue';

type TabItem = IHomeCommonCategoryListTabItemDefine;

const props = defineProps<{
  props: IHomeCommonCategoryListDefine['props'];
}>();
const emit = defineEmits<{
  (e: 'update', p: IHomeCommonCategoryListDefine['props']): void;
}>();

const activeKeys = ref<string[]>(['tabs']);
const tabTypeOptions = [
  { value: 'list', label: '通用列表' },
  { value: 'jump', label: '跳转页面' },
  { value: 'nestCategory', label: '子栏目' },
];
const tabItems = computed(() => (props.props?.tabs || []) as TabItem[]);

function tabKey(tab: TabItem, i: number) {
  return `${i}-${tab.text}-${tab.type}`;
}
function tabHeader(tab: TabItem) {
  const t = tab.type || '?';
  const text = tab.text || '';
  return `${text || 'Tab'} (${t})`;
}
function addTab() {
  props.props!.tabs = props.props!.tabs || [];
  (props.props!.tabs as TabItem[]).push({ text: '新 Tab', type: 'list' });
}
function removeTab(i: number) {
  props.props!.tabs?.splice(i, 1);
}
</script>

<style scoped>
.common-list-props-editor {
  font-size: 12px;
}
.props-collapse {
  margin-top: 8px;
}
.nested-item {
  margin-bottom: 12px;
  padding: 8px;
  background: #fafafa;
  border-radius: 4px;
}
.tab-item :deep(.ant-collapse) {
  border: none;
  background: transparent;
}
.sub-nested {
  margin-bottom: 6px;
}
</style>