<script lang="ts" setup>
|
import { reactive } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { MonacoEditor } from '@jnpf/ui';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { batchCreate as batchCreateColumn } from '#/api/system/columnAuthorize';
|
import { batchCreate as batchCreateForm } from '#/api/system/formAuthorize';
|
|
interface State {
|
columnJson: string;
|
dataForm: any;
|
type: string;
|
}
|
|
const emit = defineEmits(['register', 'reload']);
|
const state = reactive<State>({
|
columnJson: '',
|
dataForm: {
|
moduleId: '',
|
columnJson: '',
|
},
|
type: 'form',
|
});
|
const { createMessage } = useMessage();
|
const [registerModal, { closeModal, changeOkLoading }] = useModalInner(init);
|
|
function init(data) {
|
state.columnJson = '';
|
state.dataForm.columnJson = '';
|
state.dataForm.moduleId = data.menuId;
|
state.type = data.type || 'form';
|
}
|
async function handleSubmit() {
|
if (!state.columnJson) return createMessage.warning('请输入字段JSON');
|
const columnJson = state.columnJson.replaceAll(/("\w+":)(?=[},])/g, '$1null');
|
try {
|
state.dataForm[state.type == 'form' ? 'formJson' : 'columnJson'] = JSON.parse(columnJson);
|
changeOkLoading(true);
|
const method = state.type == 'form' ? batchCreateForm : batchCreateColumn;
|
method(state.dataForm)
|
.then((res) => {
|
createMessage.success(res.msg);
|
changeOkLoading(false);
|
closeModal();
|
emit('reload');
|
})
|
.catch(() => {
|
changeOkLoading(false);
|
});
|
} catch {
|
createMessage.warning('请输入正确字段JSON，不要带注释代码');
|
}
|
}
|
</script>
|
<template>
|
<BasicModal v-bind="$attrs" @register="registerModal" title="批量新增" show-ok-btn @ok="handleSubmit">
|
<a-form layout="vertical">
|
<div class="json-demo">
|
<pre>
|
// 示例
|
[
|
{
|
"fullName":"名称",
|
"enCode":"fullName",
|
"bindTable":"table1", //数据库表名
|
"fieldRule":1, //字段规则 0:主表规则 1:副表规则 2:子表规则
|
"childTableKey":"tableField107" //关联字段,fieldRule为子表规则才需要输入
|
}
|
]
|
</pre>
|
</div>
|
<a-form-item label="字段Json" name="columnJson">
|
<div class="formCodeEditor">
|
<MonacoEditor class="h-full" v-model="state.columnJson" 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>
|
