<script lang="ts" setup>
|
import { reactive, ref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { MonacoEditor } from '@jnpf/ui';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
interface State {
|
jsonStr: string;
|
}
|
|
const emit = defineEmits(['register', 'confirm']);
|
const state = reactive<State>({
|
jsonStr: '',
|
});
|
const { createMessage } = useMessage();
|
const [registerModal, { closeModal }] = useModalInner(init);
|
const editorRef = ref(null);
|
function init() {
|
state.jsonStr = '';
|
}
|
async function handleSubmit() {
|
if (!state.jsonStr) return createMessage.warning('请输入JSON数据格式');
|
const jsonStr = state.jsonStr.replaceAll(/("\w+":)(?=[},])/g, '$1null');
|
try {
|
const data = JSON.parse(jsonStr);
|
if (!Array.isArray(data)) throw new Error('error');
|
emit('confirm', data);
|
closeModal();
|
} catch {
|
createMessage.warning('JSON数据格式错误');
|
}
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="JSON数据格式" show-ok-btn @ok="handleSubmit">
|
<a-form layout="vertical">
|
<div class="json-demo">
|
<pre>
|
// 示例
|
[
|
{
|
"id":"fullName",
|
"fullName":"名称"
|
}
|
]
|
</pre>
|
</div>
|
<a-form-item label="请输入JSON数据格式生成接口字段">
|
<div class="formCodeEditor">
|
<MonacoEditor class="h-full" ref="editorRef" v-model="state.jsonStr" language="json" />
|
</div>
|
</a-form-item>
|
</a-form>
|
</BasicModal>
|
</template>
|
<style lang="scss" scoped>
|
.formCodeEditor {
|
width: 100%;
|
height: 260px;
|
padding: 0;
|
margin: 0 0 20px;
|
overflow: hidden;
|
border: 1px solid var(--border-color-base);
|
}
|
|
.json-demo {
|
width: 100%;
|
padding-top: 10px;
|
color: #909399;
|
background: var(--component-background);
|
border-radius: 4px;
|
|
pre {
|
margin-left: -55px;
|
font-size: 12px;
|
}
|
}
|
</style>
|
