Compare commits

..

4 Commits

3 changed files with 23 additions and 20 deletions

View File

@ -21,7 +21,7 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
{{ $t('common.columnSetting') }} {{ $t('common.columnSetting') }}
</NButton> </NButton>
</template> </template>
<VueDraggable v-model="columns" :animation="150" filter=".none_draggable"> <VueDraggable v-model="columns" :animation="150" filter=".none_draggable" class="table-column-setting-list">
<div v-for="item in columns" :key="item.key" class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"> <div v-for="item in columns" :key="item.key" class="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)">
<SvgIcon local-icon="drag" class="mr-8px h-full cursor-move text-icon"/> <SvgIcon local-icon="drag" class="mr-8px h-full cursor-move text-icon"/>
<NCheckbox v-model:checked="item.checked" class="none_draggable flex-1"> <NCheckbox v-model:checked="item.checked" class="none_draggable flex-1">
@ -35,4 +35,15 @@ const columns = defineModel<NaiveUI.TableColumnCheck[]>('columns', {
</NPopover> </NPopover>
</template> </template>
<style scoped></style> <style scoped lang="scss">
.table-column-setting-list {
max-height: 60vh;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.table-column-setting-list::-webkit-scrollbar {
display: none;
}
</style>

View File

@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, useAttrs } from 'vue'; import { computed, useAttrs } from 'vue';
import type { TagProps } from 'naive-ui'; import type { TagProps } from 'naive-ui';
import { jsonClone } from '@sa/utils';
import { useDict } from '@/hooks/business/dict'; import { useDict } from '@/hooks/business/dict';
import { isNotNull } from '@/utils/common'; import { isNotNull } from '@/utils/common';
import { $t } from '@/locales'; import { $t } from '@/locales';
@ -28,7 +29,7 @@ const { transformDictData } = useDict(props.dictCode, props.immediate);
const dictTagData = computed<Api.System.DictData[]>(() => { const dictTagData = computed<Api.System.DictData[]>(() => {
if (props.dictData) { if (props.dictData) {
const dictData = props.dictData; const dictData = jsonClone(props.dictData);
if (dictData.dictLabel?.startsWith(`dict.${dictData.dictType}.`)) { if (dictData.dictLabel?.startsWith(`dict.${dictData.dictType}.`)) {
dictData.dictLabel = $t(dictData.dictLabel as App.I18n.I18nKey); dictData.dictLabel = $t(dictData.dictLabel as App.I18n.I18nKey);
} }

View File

@ -2,6 +2,7 @@
import { computed } from 'vue'; import { computed } from 'vue';
import hljs from 'highlight.js/lib/core'; import hljs from 'highlight.js/lib/core';
import json from 'highlight.js/lib/languages/json'; import json from 'highlight.js/lib/languages/json';
import { twMerge } from 'tailwind-merge';
hljs.registerLanguage('json', json); hljs.registerLanguage('json', json);
@ -10,15 +11,19 @@ defineOptions({
}); });
interface Props { interface Props {
class?: string;
code?: string; code?: string;
showLineNumbers?: boolean; showLineNumbers?: boolean;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
class: '',
code: '', code: '',
showLineNumbers: false showLineNumbers: false
}); });
const DEFAULT_CLASS = 'max-h-500px';
/** 格式化JSON数据 */ /** 格式化JSON数据 */
const jsonData = computed<string>(() => { const jsonData = computed<string>(() => {
if (!props.code) return ''; if (!props.code) return '';
@ -33,9 +38,9 @@ const jsonData = computed<string>(() => {
</script> </script>
<template> <template>
<div class="json-preview"> <NScrollbar :class="twMerge(DEFAULT_CLASS, props.class)">
<NCode :code="jsonData" :hljs="hljs" language="json" :show-line-numbers="showLineNumbers" /> <NCode :code="jsonData" :hljs="hljs" language="json" :show-line-numbers="showLineNumbers" :word-wrap="true" />
</div> </NScrollbar>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -44,18 +49,4 @@ html[class='dark'] {
background-color: #7c7777; background-color: #7c7777;
} }
} }
.json-preview {
width: 100%;
max-height: 500px;
overflow-y: auto;
@include scrollbar();
.empty-data {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
color: #999;
font-size: 14px;
}
}
</style> </style>