|
|
@@ -0,0 +1,239 @@
|
|
|
+<template>
|
|
|
+ <div class="dropdown-data-editor">
|
|
|
+ <a-form layout="vertical" size="small">
|
|
|
+ <a-form-item label="数据源类型">
|
|
|
+ <a-select
|
|
|
+ :value="currentType"
|
|
|
+ style="width: 100%"
|
|
|
+ :options="typeOptions"
|
|
|
+ placeholder="选择类型"
|
|
|
+ @change="onTypeChange"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+
|
|
|
+ <template v-if="currentType === 'commonContent'">
|
|
|
+ <a-form-item label="分类类型 ID (typeId)">
|
|
|
+ <a-input-number
|
|
|
+ :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent)?.typeId"
|
|
|
+ style="width: 100%"
|
|
|
+ :min="1"
|
|
|
+ placeholder="typeId"
|
|
|
+ @update:value="(v: number | undefined) => setCommonContent('typeId', v)"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="ID 键 (idKey)">
|
|
|
+ <a-input
|
|
|
+ :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent)?.idKey"
|
|
|
+ placeholder="可选,默认 id"
|
|
|
+ @change="(e: Event) => setCommonContent('idKey', (e.target as HTMLInputElement)?.value)"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="名称键 (nameKey)">
|
|
|
+ <a-input
|
|
|
+ :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent)?.nameKey"
|
|
|
+ placeholder="可选,默认 title"
|
|
|
+ @change="(e: Event) => setCommonContent('nameKey', (e.target as HTMLInputElement)?.value)"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="其他参数 (otherParams)">
|
|
|
+ <KeyValueEditor
|
|
|
+ :model-value="(modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent)?.otherParams"
|
|
|
+ @update:modelValue="setCommonContentOtherParams"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-else-if="currentType === 'static'">
|
|
|
+ <a-form-item label="静态数据 (data) JSON 数组">
|
|
|
+ <a-input
|
|
|
+ :value="staticDataJson"
|
|
|
+ placeholder='[{"id": 1, "title": "选项1"}]'
|
|
|
+ :rows="4"
|
|
|
+ @change="(e: Event) => setStaticData((e.target as HTMLInputElement)?.value)"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="ID 键 (idKey)">
|
|
|
+ <a-input
|
|
|
+ :value="(modelValue as IHomeCommonCategoryDropdownStaticData)?.idKey"
|
|
|
+ placeholder="可选"
|
|
|
+ @change="(e: Event) => setStatic('idKey', (e.target as HTMLInputElement)?.value)"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="名称键 (nameKey)">
|
|
|
+ <a-input
|
|
|
+ :value="(modelValue as IHomeCommonCategoryDropdownStaticData)?.nameKey"
|
|
|
+ placeholder="可选"
|
|
|
+ @change="(e: Event) => setStatic('nameKey', (e.target as HTMLInputElement)?.value)"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-else-if="currentType === 'request'">
|
|
|
+ <a-form-item label="请求方法 (method)">
|
|
|
+ <a-select
|
|
|
+ :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.method"
|
|
|
+ style="width: 100%"
|
|
|
+ :options="methodOptions"
|
|
|
+ @change="(v: 'OPTIONS' | 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE') => setRequest('method', v)"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="请求 URL (url)">
|
|
|
+ <a-input
|
|
|
+ :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.url"
|
|
|
+ placeholder="https://..."
|
|
|
+ @change="(e: Event) => setRequest('url', (e.target as HTMLInputElement)?.value)"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="查询参数 (querys)">
|
|
|
+ <KeyValueEditor
|
|
|
+ :model-value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.querys"
|
|
|
+ @update:modelValue="setRequestQuerys"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="请求体参数 (params)">
|
|
|
+ <KeyValueEditor
|
|
|
+ :model-value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.params"
|
|
|
+ @update:modelValue="setRequestParams"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="ID 键 (idKey)">
|
|
|
+ <a-input
|
|
|
+ :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.idKey"
|
|
|
+ placeholder="可选"
|
|
|
+ @change="(e: Event) => setRequest('idKey', (e.target as HTMLInputElement)?.value)"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="名称键 (nameKey)">
|
|
|
+ <a-input
|
|
|
+ :value="(modelValue as IHomeCommonCategoryDropdownDynamicDataRequest)?.nameKey"
|
|
|
+ placeholder="可选"
|
|
|
+ @change="(e: Event) => setRequest('nameKey', (e.target as HTMLInputElement)?.value)"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ </template>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { computed } from 'vue';
|
|
|
+import KeyValueEditor from './KeyValueEditor.vue';
|
|
|
+import type {
|
|
|
+ IHomeCommonCategoryDropdownDynamicData,
|
|
|
+ IHomeCommonCategoryDropdownDynamicDataCommonContent,
|
|
|
+ IHomeCommonCategoryDropdownDynamicDataRequest,
|
|
|
+ IHomeCommonCategoryDropdownStaticData,
|
|
|
+} from '@/pages/article/data/data-defines/Dropdown';
|
|
|
+
|
|
|
+const props = defineProps<{
|
|
|
+ modelValue?: IHomeCommonCategoryDropdownDynamicData | null;
|
|
|
+}>();
|
|
|
+
|
|
|
+const emit = defineEmits<{
|
|
|
+ (e: 'update:modelValue', v: IHomeCommonCategoryDropdownDynamicData | undefined): void;
|
|
|
+}>();
|
|
|
+
|
|
|
+const typeOptions = [
|
|
|
+ { value: 'commonContent', label: '通用内容 (commonContent)' },
|
|
|
+ { value: 'static', label: '静态数据 (static)' },
|
|
|
+ { value: 'request', label: '请求 (request)' },
|
|
|
+];
|
|
|
+
|
|
|
+const methodOptions = [
|
|
|
+ { value: 'GET', label: 'GET' },
|
|
|
+ { value: 'POST', label: 'POST' },
|
|
|
+ { value: 'PUT', label: 'PUT' },
|
|
|
+ { value: 'DELETE', label: 'DELETE' },
|
|
|
+ { value: 'HEAD', label: 'HEAD' },
|
|
|
+ { value: 'OPTIONS', label: 'OPTIONS' },
|
|
|
+];
|
|
|
+
|
|
|
+const currentType = computed(() => props.modelValue?.type ?? null);
|
|
|
+
|
|
|
+const staticDataJson = computed(() => {
|
|
|
+ const cur = props.modelValue as IHomeCommonCategoryDropdownStaticData | undefined;
|
|
|
+ if (!cur?.data) return '';
|
|
|
+ try {
|
|
|
+ return Array.isArray(cur.data) ? JSON.stringify(cur.data, null, 2) : '';
|
|
|
+ } catch {
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+function onTypeChange(type: 'commonContent' | 'static' | 'request') {
|
|
|
+ if (type === 'commonContent') {
|
|
|
+ emit('update:modelValue', { type: 'commonContent', typeId: 1 });
|
|
|
+ } else if (type === 'static') {
|
|
|
+ emit('update:modelValue', { type: 'static', data: [] });
|
|
|
+ } else if (type === 'request') {
|
|
|
+ emit('update:modelValue', { type: 'request', method: 'GET', url: '' });
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function setCommonContent(key: 'typeId' | 'idKey' | 'nameKey', value: number | string | undefined) {
|
|
|
+ const cur = props.modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent | undefined;
|
|
|
+ if (!cur || cur.type !== 'commonContent') return;
|
|
|
+ const next = { ...cur, [key]: value };
|
|
|
+ emit('update:modelValue', next);
|
|
|
+}
|
|
|
+
|
|
|
+function setCommonContentOtherParams(otherParams: Record<string, any>) {
|
|
|
+ const cur = props.modelValue as IHomeCommonCategoryDropdownDynamicDataCommonContent | undefined;
|
|
|
+ if (!cur || cur.type !== 'commonContent') return;
|
|
|
+ const value = otherParams && Object.keys(otherParams).length > 0 ? otherParams : undefined;
|
|
|
+ emit('update:modelValue', { ...cur, otherParams: value });
|
|
|
+}
|
|
|
+
|
|
|
+function setStatic(key: 'idKey' | 'nameKey', value: string | undefined) {
|
|
|
+ const cur = props.modelValue as IHomeCommonCategoryDropdownStaticData | undefined;
|
|
|
+ if (!cur || cur.type !== 'static') return;
|
|
|
+ emit('update:modelValue', { ...cur, [key]: value || undefined });
|
|
|
+}
|
|
|
+
|
|
|
+function setStaticData(str: string) {
|
|
|
+ const cur = props.modelValue as IHomeCommonCategoryDropdownStaticData | undefined;
|
|
|
+ if (!cur || cur.type !== 'static') return;
|
|
|
+ let data: Record<string, any>[];
|
|
|
+ try {
|
|
|
+ const parsed = str?.trim() ? JSON.parse(str) : [];
|
|
|
+ data = Array.isArray(parsed) ? parsed : [];
|
|
|
+ } catch {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ emit('update:modelValue', { ...cur, data });
|
|
|
+}
|
|
|
+
|
|
|
+function setRequest(
|
|
|
+ key: 'method' | 'url' | 'idKey' | 'nameKey',
|
|
|
+ value: string | undefined
|
|
|
+) {
|
|
|
+ const cur = props.modelValue as IHomeCommonCategoryDropdownDynamicDataRequest | undefined;
|
|
|
+ if (!cur || cur.type !== 'request') return;
|
|
|
+ const next = { ...cur, [key]: value } as IHomeCommonCategoryDropdownDynamicDataRequest;
|
|
|
+ emit('update:modelValue', next);
|
|
|
+}
|
|
|
+
|
|
|
+function setRequestQuerys(querys: Record<string, any>) {
|
|
|
+ const cur = props.modelValue as IHomeCommonCategoryDropdownDynamicDataRequest | undefined;
|
|
|
+ if (!cur || cur.type !== 'request') return;
|
|
|
+ const value = querys && Object.keys(querys).length > 0 ? querys : undefined;
|
|
|
+ emit('update:modelValue', { ...cur, querys: value });
|
|
|
+}
|
|
|
+
|
|
|
+function setRequestParams(params: Record<string, any>) {
|
|
|
+ const cur = props.modelValue as IHomeCommonCategoryDropdownDynamicDataRequest | undefined;
|
|
|
+ if (!cur || cur.type !== 'request') return;
|
|
|
+ const value = params && Object.keys(params).length > 0 ? params : undefined;
|
|
|
+ emit('update:modelValue', { ...cur, params: value });
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.dropdown-data-editor {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-left: 8px;
|
|
|
+ padding: 8px;
|
|
|
+ background: #fafafa;
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+</style>
|