<template>
|
<div class="h-full flex flex-col">
|
<div class="grid grid-cols-2 gap-2 h-2/3 flex-0">
|
<div class="h-full overflow-auto">
|
<el-table
|
:data="tableData"
|
row-class-name="cursor-pointer"
|
class="h-full"
|
highlight-current-row
|
@current-change="dockRowChange"
|
>
|
<el-table-column prop="date" label="Date" width="180" />
|
<el-table-column prop="name" label="Name" width="180" />
|
<el-table-column prop="address" label="Address" />
|
</el-table>
|
<!-- <codemirror
|
v-model="dockCode"
|
:style="{ height: '100%' }"
|
:autofocus="true"
|
:indent-with-tab="true"
|
:tab-size="2"
|
:extensions="dockEditorExtensions"
|
@change="log('change', $event)"
|
@focus="log('focus', $event)"
|
@blur="log('blur', $event)"
|
/> -->
|
</div>
|
<div class="h-full overflow-auto">
|
<codemirror
|
class="h-full overflow-auto"
|
v-model="sqlCode"
|
:style="{ height: '100%' }"
|
:autofocus="true"
|
:indent-with-tab="true"
|
:tab-size="2"
|
:extensions="sqlEditorExtensions"
|
@change="log('change', $event)"
|
@focus="log('focus', $event)"
|
@blur="log('blur', $event)"
|
/>
|
</div>
|
</div>
|
<div class="flex-auto overflow-auto mt-3">
|
<codemirror
|
disabled
|
class="h-full overflow-auto"
|
v-model="jsonCode"
|
:style="{ height: '100%' }"
|
:autofocus="true"
|
:indent-with-tab="true"
|
:tab-size="2"
|
:extensions="jsonEditorExtensions"
|
@change="log('change', $event)"
|
@focus="log('focus', $event)"
|
@blur="log('blur', $event)"
|
/>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { json } from '@codemirror/lang-json';
|
import { sql } from '@codemirror/lang-sql';
|
import { xml } from '@codemirror/lang-xml';
|
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
|
import { ref } from 'vue';
|
import { Codemirror } from 'vue-codemirror';
|
import * as codeExample from './testData';
|
import _ from 'lodash';
|
const log = console.log;
|
const jsonCode = ref(codeExample.jsonCode);
|
const dockCode = ref(codeExample.dockCode);
|
const sqlCode = ref(codeExample.sqlCode);
|
const tableData = [
|
{
|
date: '2016-05-03',
|
name: 'Tom',
|
address: 'No. 189, Grove St, Los Angeles',
|
},
|
{
|
date: '2016-05-02',
|
name: 'Tom',
|
address: 'No. 189, Grove St, Los Angeles',
|
},
|
{
|
date: '2016-05-04',
|
name: 'Tom',
|
address: 'No. 189, Grove St, Los Angeles',
|
},
|
{
|
date: '2016-05-01',
|
name: 'Tom',
|
address: 'No. 189, Grove St, Los Angeles',
|
},
|
];
|
const jsonEditorExtensions = [json(), vscodeDark];
|
const sqlEditorExtensions = [sql(), vscodeDark];
|
const dockEditorExtensions = [xml(), vscodeDark];
|
|
const dockRowChange = (row) => {};
|
/** @description 路径分隔符 */
|
const PATH_SEPARATOR = '/';
|
/** @description 1 退出所有循环 -1退出当次循环 0或其他值继续 */
|
const travelObj = (obj, callBack?: (key?: string, value?: any, path?: string) => 1 | -1 | undefined | void | 0, path = '') => {
|
let entry = Object.entries(obj);
|
// if (entry[0] && !entry[0]['isRoot']) {
|
// entry = entry.map((item) => {
|
// item['isRoot'] = true;
|
// item['path'] = '';
|
// return item;
|
// });
|
// }
|
let res = null;
|
|
iterate: for (const item of entry) {
|
const [key, value] = item;
|
const currentPath = path + key;
|
res = callBack?.(key, value, currentPath);
|
switch (res) {
|
case 1:
|
break iterate;
|
case -1:
|
continue iterate;
|
default:
|
break;
|
}
|
if (!value) {
|
continue;
|
}
|
if (_.isObjectLike(value)) {
|
res = travelObj(value, callBack, currentPath);
|
switch (res) {
|
case 1:
|
break iterate;
|
case -1:
|
continue iterate;
|
default:
|
break;
|
}
|
}
|
}
|
return res;
|
};
|
|
const enum AmisDockType {
|
Api,
|
}
|
type AmisDockApi = string;
|
type AmisDockValue = AmisDockApi;
|
type AmisDockConfig = {
|
type: AmisDockType;
|
value: AmisDockValue;
|
};
|
const parseJSONData = (json: string) => {
|
if (!json) return;
|
const obj = JSON.parse(json);
|
const configList: AmisDockConfig[] = [];
|
travelObj(
|
{
|
id: 'u:7d4e7d100425',
|
body: [
|
{
|
id: 'u:3e0a8e524d99',
|
},
|
],
|
},
|
(key, value, path) => {
|
console.log('🚀 ~ key:', key);
|
console.log('🚀 ~ value:', value);
|
console.log('🚀 ~ path:', path);
|
|
// if (key === 'api') {
|
// configList.push({
|
// type: AmisDockType.Api,
|
// value: value.url,
|
// });
|
// }
|
}
|
);
|
};
|
|
parseJSONData(codeExample.jsonCode);
|
</script>
|
