<template>
|
<ywDialog
|
v-model="dialogIsShow"
|
:title="dialogTitle"
|
width="50%"
|
@dlgClosed="closeDialog"
|
:showHeaderIcon="false"
|
:showFooter="false"
|
>
|
<div style="height: 600px" class="relative">
|
<codemirror
|
class="overflow-auto"
|
style="height: 600px"
|
:modelValue="item.sql"
|
:autofocus="true"
|
:indent-with-tab="true"
|
:tab-size="2"
|
:extensions="sqlEditorExtensions"
|
|
/>
|
<i
|
@click="copyInfo(item.sql)"
|
class="ywifont ywicon-copy text-blue-400 !text-[25px] cursor-pointer absolute bottom-10 right-10"
|
></i>
|
</div>
|
</ywDialog>
|
</template>
|
|
<script setup lang="ts">
|
import ywDialog from '/@/components/dialog/yw-dialog.vue';
|
|
import { sql } from '@codemirror/lang-sql';
|
import { vscodeDark } from '@uiw/codemirror-theme-vscode';
|
import { computed } from 'vue';
|
import { Codemirror } from 'vue-codemirror';
|
import commonFunction from '/@/utils/commonFunction';
|
import { ElMessage } from 'element-plus';
|
|
const sqlEditorExtensions = [sql(), vscodeDark];
|
const dialogIsShow = defineModel({
|
type: Boolean,
|
});
|
const closeDialog = () => {
|
dialogIsShow.value = false;
|
};
|
const dialogTitle = computed(() => {
|
return props.item?.id;
|
});
|
const props = defineProps(['item']);
|
|
const { copyText } = commonFunction();
|
|
const copyInfo = async (sql) => {
|
copyText(sql);
|
};
|
</script>
|
<style scoped lang="scss"></style>
|
