|
|
@@ -22,22 +22,7 @@
|
|
|
</a-form>
|
|
|
|
|
|
<a-collapse v-model:activeKey="activeKeys" class="props-collapse">
|
|
|
- <a-collapse-panel key="dataSolve" header="数据解决方法 (dataSolve)">
|
|
|
- <a-select
|
|
|
- v-model:value="props.props.dataSolve"
|
|
|
- mode="multiple"
|
|
|
- style="width: 100%"
|
|
|
- :options="dataSolveOptions"
|
|
|
- placeholder="选择"
|
|
|
-
|
|
|
- />
|
|
|
- </a-collapse-panel>
|
|
|
-
|
|
|
- <a-collapse-panel key="data" header="数据 (data)">
|
|
|
- <DynamicDataEditor v-model="props.props.data" />
|
|
|
- </a-collapse-panel>
|
|
|
-
|
|
|
- <a-collapse-panel key="tabs" header="选项卡 (tabs) 树型结构">
|
|
|
+ <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)">
|
|
|
@@ -52,13 +37,44 @@
|
|
|
: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-switch
|
|
|
:checked="tab.visible !== false"
|
|
|
@change="tab.visible = $event"
|
|
|
/>
|
|
|
</a-form-item>
|
|
|
- <template v-if="tab.type === 'nestCategory'">
|
|
|
+ <template v-if="tab.type === 'list'">
|
|
|
+ <a-form-item label="数据接口">
|
|
|
+ <DynamicDataEditor v-model="tab.data" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="下拉选择定义">
|
|
|
+ <!--TODO:下拉选择定义控制 -->
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="数据处理显示">
|
|
|
+ <!--TODO:数据处理显示 -->
|
|
|
+ </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="子分类 (categorys)">
|
|
|
|
|
|
<!--TODO: 使用子分类组件-->
|
|
|
@@ -83,7 +99,9 @@
|
|
|
<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';
|
|
|
|
|
|
type TabItem = IHomeCommonCategoryListTabItemDefine;
|
|
|
|
|
|
@@ -101,12 +119,6 @@ const tabTypeOptions = [
|
|
|
{ value: 'nestCategory', label: '子分类' },
|
|
|
];
|
|
|
const tabItems = computed(() => (props.props?.tabs || []) as TabItem[]);
|
|
|
-const dataSolveOptions = [
|
|
|
- { value: 'none', label: '无' },
|
|
|
- { value: 'ich', label: '显示传承人相关数据' },
|
|
|
- { value: 'common', label: '显示通用数据(来源,栏目名称)' },
|
|
|
- { value: 'date', label: '显示日期' },
|
|
|
-];
|
|
|
|
|
|
function tabKey(tab: TabItem, i: number) {
|
|
|
return `${i}-${tab.text}-${tab.type}`;
|
|
|
@@ -116,8 +128,6 @@ function tabHeader(tab: TabItem) {
|
|
|
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: 'nestCategory', categorys: [] });
|