style: lint格式化文件
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@ -1,298 +1,277 @@
|
||||
<template>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
|
||||
<template #title>
|
||||
<div class="step-form-form">
|
||||
<a href="https://fcdma.gdyditc.com/" target="_blank">
|
||||
<DesignLogo />
|
||||
</a>
|
||||
<span>•</span>
|
||||
<span>{{ t('表单生成代码配置') }}</span>
|
||||
<a-steps :current="current">
|
||||
<a-step :title="t('基本信息')" />
|
||||
<a-step :title="t('界面设计')" />
|
||||
<a-step :title="t('代码预览')" />
|
||||
<a-step :title="t('菜单设置')" />
|
||||
</a-steps>
|
||||
<div class="btn-box">
|
||||
<a-button type="primary" @click="handleStepPrev" v-show="current !== 0">{{
|
||||
t('上一步')
|
||||
}}</a-button>
|
||||
<a-button type="primary" @click="handleStepNext" v-show="current < 3">{{
|
||||
t('下一步')
|
||||
}}</a-button>
|
||||
<a-button type="primary" @click="handleSave" v-show="current === 3">{{
|
||||
t('保存')
|
||||
}}</a-button>
|
||||
<a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
|
||||
<template #title>
|
||||
<div class="step-form-form">
|
||||
<a href="https://fcdma.gdyditc.com/" target="_blank">
|
||||
<DesignLogo />
|
||||
</a>
|
||||
<span>•</span>
|
||||
<span>{{ t('表单生成代码配置') }}</span>
|
||||
<a-steps :current="current">
|
||||
<a-step :title="t('基本信息')" />
|
||||
<a-step :title="t('界面设计')" />
|
||||
<a-step :title="t('代码预览')" />
|
||||
<a-step :title="t('菜单设置')" />
|
||||
</a-steps>
|
||||
<div class="btn-box">
|
||||
<a-button type="primary" @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
|
||||
<a-button type="primary" @click="handleStepNext" v-show="current < 3">{{ t('下一步') }}</a-button>
|
||||
<a-button type="primary" @click="handleSave" v-show="current === 3">{{ t('保存') }}</a-button>
|
||||
<a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-container">
|
||||
<StructureConfigStep ref="structureConfigStepRef" v-show="current === 0" :isFormGenerator="true" />
|
||||
<ViewDesignStep ref="viewDesignStepRef" v-show="current === 1" :isFormGenerator="true" />
|
||||
<PreviewCodeStep ref="previewCodeStepRef" v-show="current === 2" :isFormGenerator="true" />
|
||||
<MenuConfigStep ref="menuConfigStepRef" v-show="current === 3" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-container">
|
||||
<StructureConfigStep
|
||||
ref="structureConfigStepRef"
|
||||
v-show="current === 0"
|
||||
:isFormGenerator="true"
|
||||
/>
|
||||
<ViewDesignStep ref="viewDesignStepRef" v-show="current === 1" :isFormGenerator="true" />
|
||||
<PreviewCodeStep ref="previewCodeStepRef" v-show="current === 2" :isFormGenerator="true" />
|
||||
<MenuConfigStep ref="menuConfigStepRef" v-show="current === 3" />
|
||||
</div>
|
||||
</BasicModal>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, provide, watch, Ref } from 'vue';
|
||||
import PreviewCodeStep from '/@/views/generator/dev/components/PreviewCodeStep.vue';
|
||||
import {
|
||||
StructureConfigStep,
|
||||
ViewDesignStep,
|
||||
MenuConfigStep,
|
||||
} from '/@/components/CreateCodeStep';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { GeneratorModel } from '/@/api/system/generator/model';
|
||||
import { FormProps } from '/@/components/Form';
|
||||
import { buildOption } from '/@/utils/helper/designHelper';
|
||||
import { buildCode } from '/@/utils/helper/generatorHelper';
|
||||
import { CustomFormConfig, GeneratorConfig } from '/@/model/generator/generatorConfig';
|
||||
import { TableInfo } from '/@/components/Designer';
|
||||
import { getFormTemplate } from '/@/api/form/design';
|
||||
import { dataFirstGeneratorCode } from '/@/api/system/generator';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { FormTypeEnum } from '/@/enums/formtypeEnum';
|
||||
import * as antd from '/@/components/Designer/src/types';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
|
||||
const { t } = useI18n();
|
||||
const userStore = useUserStore();
|
||||
const current = ref(0);
|
||||
import { ref, reactive, provide, watch, Ref } from 'vue';
|
||||
import PreviewCodeStep from '/@/views/generator/dev/components/PreviewCodeStep.vue';
|
||||
import { StructureConfigStep, ViewDesignStep, MenuConfigStep } from '/@/components/CreateCodeStep';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { GeneratorModel } from '/@/api/system/generator/model';
|
||||
import { FormProps } from '/@/components/Form';
|
||||
import { buildOption } from '/@/utils/helper/designHelper';
|
||||
import { buildCode } from '/@/utils/helper/generatorHelper';
|
||||
import { CustomFormConfig, GeneratorConfig } from '/@/model/generator/generatorConfig';
|
||||
import { TableInfo } from '/@/components/Designer';
|
||||
import { getFormTemplate } from '/@/api/form/design';
|
||||
import { dataFirstGeneratorCode } from '/@/api/system/generator';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { FormTypeEnum } from '/@/enums/formtypeEnum';
|
||||
import * as antd from '/@/components/Designer/src/types';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
|
||||
const { t } = useI18n();
|
||||
const userStore = useUserStore();
|
||||
const current = ref(0);
|
||||
|
||||
const structureConfigStepRef = ref();
|
||||
const viewDesignStepRef = ref();
|
||||
const previewCodeStepRef = ref();
|
||||
const menuConfigStepRef = ref();
|
||||
const structureConfigStepRef = ref();
|
||||
const viewDesignStepRef = ref();
|
||||
const previewCodeStepRef = ref();
|
||||
const menuConfigStepRef = ref();
|
||||
|
||||
const tableInfo = ref<TableInfo[]>([]);
|
||||
const widgetForm = JSON.parse(JSON.stringify(antd.widgetForm));
|
||||
const tableInfo = ref<TableInfo[]>([]);
|
||||
const widgetForm = JSON.parse(JSON.stringify(antd.widgetForm));
|
||||
|
||||
const emits = defineEmits(['success', 'register', 'close']);
|
||||
const isGetInfo = ref<boolean>(false);
|
||||
const emits = defineEmits(['success', 'register', 'close']);
|
||||
const isGetInfo = ref<boolean>(false);
|
||||
|
||||
// const templateInfo = inject('getTemplateInfo');
|
||||
// const templateInfo = inject('getTemplateInfo');
|
||||
|
||||
let generatorConfig = reactive<GeneratorConfig>({
|
||||
databaseId: '', //数据库id
|
||||
tableConfigs: [],
|
||||
tableStructureConfigs: [],
|
||||
formJson: {},
|
||||
formEventConfig: {},
|
||||
listConfig: {
|
||||
isLeftMenu: false,
|
||||
queryConfigs: [],
|
||||
leftMenuConfig: {
|
||||
datasourceType: 'static',
|
||||
listFieldName: undefined,
|
||||
apiConfig: {},
|
||||
dictionaryItemId: undefined,
|
||||
menuName: '',
|
||||
parentIcon: '',
|
||||
childIcon: '',
|
||||
staticData: [],
|
||||
},
|
||||
columnConfigs: [],
|
||||
buttonConfigs: [],
|
||||
defaultOrder: true,
|
||||
isPage: true,
|
||||
},
|
||||
menuConfig: {},
|
||||
outputConfig: {
|
||||
creator: userStore.getUserInfo.name,
|
||||
isMenu: true,
|
||||
},
|
||||
});
|
||||
let customFormConfig = reactive<CustomFormConfig>({
|
||||
name: '',
|
||||
category: '',
|
||||
formDesignType: 0,
|
||||
formType: FormTypeEnum.CUSTOM_FORM,
|
||||
formJson: generatorConfig,
|
||||
remark: '',
|
||||
});
|
||||
|
||||
provide<GeneratorConfig>('generatorConfig', generatorConfig);
|
||||
provide<CustomFormConfig>('customFormConfig', customFormConfig);
|
||||
provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
|
||||
provide('widgetForm', widgetForm);
|
||||
provide<Ref<number>>('current', current); //当前步骤
|
||||
watch(
|
||||
() => generatorConfig,
|
||||
() => {
|
||||
console.log(generatorConfig, 'generatorConfig:>>watch');
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => customFormConfig,
|
||||
() => {
|
||||
console.log(customFormConfig, 'customFormConfig:>>watch');
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
defaultFullscreen: true,
|
||||
destroyOnClose: true,
|
||||
draggable: false,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
footer: null,
|
||||
closable: false,
|
||||
let generatorConfig = reactive<GeneratorConfig>({
|
||||
databaseId: '', //数据库id
|
||||
tableConfigs: [],
|
||||
tableStructureConfigs: [],
|
||||
formJson: {},
|
||||
formEventConfig: {},
|
||||
listConfig: {
|
||||
isLeftMenu: false,
|
||||
queryConfigs: [],
|
||||
leftMenuConfig: {
|
||||
datasourceType: 'static',
|
||||
listFieldName: undefined,
|
||||
apiConfig: {},
|
||||
dictionaryItemId: undefined,
|
||||
menuName: '',
|
||||
parentIcon: '',
|
||||
childIcon: '',
|
||||
staticData: []
|
||||
},
|
||||
columnConfigs: [],
|
||||
buttonConfigs: [],
|
||||
defaultOrder: true,
|
||||
isPage: true
|
||||
},
|
||||
menuConfig: {},
|
||||
outputConfig: {
|
||||
creator: userStore.getUserInfo.name,
|
||||
isMenu: true
|
||||
}
|
||||
});
|
||||
let customFormConfig = reactive<CustomFormConfig>({
|
||||
name: '',
|
||||
category: '',
|
||||
formDesignType: 0,
|
||||
formType: FormTypeEnum.CUSTOM_FORM,
|
||||
formJson: generatorConfig,
|
||||
remark: ''
|
||||
});
|
||||
const res = await getFormTemplate(data.formId);
|
||||
const formJson = JSON.parse(res.formJson);
|
||||
generatorConfig.databaseId = formJson.databaseId;
|
||||
generatorConfig.formJson = formJson.formJson;
|
||||
generatorConfig.tableConfigs = formJson.tableConfigs;
|
||||
generatorConfig.tableStructureConfigs = formJson.tableStructureConfigs;
|
||||
generatorConfig.formEventConfig = formJson.formEventConfig;
|
||||
generatorConfig.outputConfig.dataAuthList = formJson.dataAuthList;
|
||||
generatorConfig.outputConfig.type =res.formDesignType
|
||||
generatorConfig.outputConfig.isDataAuth = formJson.isDataAuth;
|
||||
isGetInfo.value = true;
|
||||
});
|
||||
|
||||
function handleClose() {
|
||||
closeModal();
|
||||
emits('close');
|
||||
}
|
||||
//上一步
|
||||
function handleStepPrev() {
|
||||
current.value--;
|
||||
}
|
||||
//下一步
|
||||
async function handleStepNext() {
|
||||
const isOk = await stepValidate[current.value]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
current.value++;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const isOk = await stepValidate[3]();
|
||||
if (
|
||||
generatorConfig.formJson?.hiddenComponent &&
|
||||
generatorConfig.formJson?.hiddenComponent.length
|
||||
) {
|
||||
generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
|
||||
}
|
||||
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
const data = generatorConfig as GeneratorModel;
|
||||
data.frontCode = buildCode(
|
||||
generatorConfig,
|
||||
tableInfo.value,
|
||||
buildOption(generatorConfig.formJson) as FormProps,
|
||||
provide<GeneratorConfig>('generatorConfig', generatorConfig);
|
||||
provide<CustomFormConfig>('customFormConfig', customFormConfig);
|
||||
provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
|
||||
provide('widgetForm', widgetForm);
|
||||
provide<Ref<number>>('current', current); //当前步骤
|
||||
watch(
|
||||
() => generatorConfig,
|
||||
() => {
|
||||
console.log(generatorConfig, 'generatorConfig:>>watch');
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
await dataFirstGeneratorCode(data);
|
||||
closeModal();
|
||||
emits('success');
|
||||
emits('close');
|
||||
}
|
||||
|
||||
const stepValidate = {
|
||||
//数据表配置 验证
|
||||
0: () => structureConfigStepRef.value.validateStep(),
|
||||
1: () => viewDesignStepRef.value.validateStep(),
|
||||
2: () => previewCodeStepRef.value.validateStep(),
|
||||
3: () => menuConfigStepRef.value.validateStep(),
|
||||
};
|
||||
watch(
|
||||
() => customFormConfig,
|
||||
() => {
|
||||
console.log(customFormConfig, 'customFormConfig:>>watch');
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
defaultFullscreen: true,
|
||||
destroyOnClose: true,
|
||||
draggable: false,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
footer: null,
|
||||
closable: false
|
||||
});
|
||||
const res = await getFormTemplate(data.formId);
|
||||
const formJson = JSON.parse(res.formJson);
|
||||
generatorConfig.databaseId = formJson.databaseId;
|
||||
generatorConfig.formJson = formJson.formJson;
|
||||
generatorConfig.tableConfigs = formJson.tableConfigs;
|
||||
generatorConfig.tableStructureConfigs = formJson.tableStructureConfigs;
|
||||
generatorConfig.formEventConfig = formJson.formEventConfig;
|
||||
generatorConfig.outputConfig.dataAuthList = formJson.dataAuthList;
|
||||
generatorConfig.outputConfig.type = res.formDesignType;
|
||||
generatorConfig.outputConfig.isDataAuth = formJson.isDataAuth;
|
||||
isGetInfo.value = true;
|
||||
});
|
||||
|
||||
function handleClose() {
|
||||
closeModal();
|
||||
emits('close');
|
||||
}
|
||||
//上一步
|
||||
function handleStepPrev() {
|
||||
current.value--;
|
||||
}
|
||||
//下一步
|
||||
async function handleStepNext() {
|
||||
const isOk = await stepValidate[current.value]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
current.value++;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const isOk = await stepValidate[3]();
|
||||
if (generatorConfig.formJson?.hiddenComponent && generatorConfig.formJson?.hiddenComponent.length) {
|
||||
generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
|
||||
}
|
||||
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
const data = generatorConfig as GeneratorModel;
|
||||
data.frontCode = buildCode(generatorConfig, tableInfo.value, buildOption(generatorConfig.formJson) as FormProps);
|
||||
await dataFirstGeneratorCode(data);
|
||||
closeModal();
|
||||
emits('success');
|
||||
emits('close');
|
||||
}
|
||||
|
||||
const stepValidate = {
|
||||
//数据表配置 验证
|
||||
0: () => structureConfigStepRef.value.validateStep(),
|
||||
1: () => viewDesignStepRef.value.validateStep(),
|
||||
2: () => previewCodeStepRef.value.validateStep(),
|
||||
3: () => menuConfigStepRef.value.validateStep()
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotationReverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotationReverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
border: 2px solid #fff;
|
||||
outline: 2px dashed #1890ff !important;
|
||||
line-height: 30px;
|
||||
animation: rotation 4s linear infinite;
|
||||
|
||||
.ant-steps-icon {
|
||||
display: inline-block;
|
||||
animation: rotationReverse 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
border: 2px solid #fff;
|
||||
outline: 2px dashed #1890ff !important;
|
||||
line-height: 30px;
|
||||
animation: rotation 4s linear infinite;
|
||||
|
||||
.ant-steps-icon {
|
||||
display: inline-block;
|
||||
animation: rotationReverse 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-form-content {
|
||||
padding: 24px;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
.step-form-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
margin-left: -16px;
|
||||
.step-form-content {
|
||||
padding: 24px;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: 0 20px 0 -5px;
|
||||
white-space: nowrap;
|
||||
.step-form-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: 0 20px 0 -5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.ant-steps) {
|
||||
width: calc(100% - 750px);
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-container) {
|
||||
padding: 2px 0 2px 2px;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps) {
|
||||
width: calc(100% - 750px);
|
||||
.step-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-container) {
|
||||
padding: 2px 0 2px 2px;
|
||||
.step1 {
|
||||
padding: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.step1 {
|
||||
padding: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,112 +1,97 @@
|
||||
// 自定义表单
|
||||
<template>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs">
|
||||
<GroupCard :growCardList="items" />
|
||||
<DataFirstModal
|
||||
v-if="state.isShowDataFirst"
|
||||
@register="registerDataFirst"
|
||||
@success="handleSuccess"
|
||||
@close="handleClose('isShowDataFirst')"
|
||||
/>
|
||||
<CodeFirstModal
|
||||
v-if="state.isShowCodeFirst"
|
||||
@register="registerCodeFirst"
|
||||
@success="handleSuccess"
|
||||
@close="handleClose('isShowCodeFirst')"
|
||||
/>
|
||||
<SimpleTemplateModal
|
||||
v-if="state.isShowSimpleTemplate"
|
||||
@register="registerSimpleTemplate"
|
||||
@success="handleSuccess"
|
||||
@close="handleClose('isShowSimpleTemplate')"
|
||||
/>
|
||||
</BasicModal>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs">
|
||||
<GroupCard :growCardList="items" />
|
||||
<DataFirstModal v-if="state.isShowDataFirst" @register="registerDataFirst" @success="handleSuccess" @close="handleClose('isShowDataFirst')" />
|
||||
<CodeFirstModal v-if="state.isShowCodeFirst" @register="registerCodeFirst" @success="handleSuccess" @close="handleClose('isShowCodeFirst')" />
|
||||
<SimpleTemplateModal v-if="state.isShowSimpleTemplate" @register="registerSimpleTemplate" @success="handleSuccess" @close="handleClose('isShowSimpleTemplate')" />
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue';
|
||||
import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
|
||||
import GroupCard from '/@/views/generator/dev/components/GroupCard.vue';
|
||||
import DataFirstModal from './components/DataFirstModal.vue';
|
||||
import CodeFirstModal from './components/CodeFirstModal.vue';
|
||||
import SimpleTemplateModal from './components/SimpleTemplateModal.vue';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import interfaceFirstPng from '/@/assets/images/design/interfaceFirst.png';
|
||||
import dataFirst from '/@/assets/images/design/dataFirst.png';
|
||||
import simpleTemplate from '/@/assets/images/design/simpleTemplate.png';
|
||||
import quickDevelop from '/@/assets/images/design/quickDevelop.png';
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const [registerDataFirst, { openModal: openDataFirstModal }] = useModal();
|
||||
const [registerCodeFirst, { openModal: openCodeFirstModal }] = useModal();
|
||||
const [registerSimpleTemplate, { openModal: openSimpleTemplateModal }] = useModal();
|
||||
import { reactive } from 'vue';
|
||||
import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
|
||||
import GroupCard from '/@/views/generator/dev/components/GroupCard.vue';
|
||||
import DataFirstModal from './components/DataFirstModal.vue';
|
||||
import CodeFirstModal from './components/CodeFirstModal.vue';
|
||||
import SimpleTemplateModal from './components/SimpleTemplateModal.vue';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useRouter } from 'vue-router';
|
||||
import interfaceFirstPng from '/@/assets/images/design/interfaceFirst.png';
|
||||
import dataFirst from '/@/assets/images/design/dataFirst.png';
|
||||
import simpleTemplate from '/@/assets/images/design/simpleTemplate.png';
|
||||
import quickDevelop from '/@/assets/images/design/quickDevelop.png';
|
||||
const router = useRouter();
|
||||
const { t } = useI18n();
|
||||
const [registerDataFirst, { openModal: openDataFirstModal }] = useModal();
|
||||
const [registerCodeFirst, { openModal: openCodeFirstModal }] = useModal();
|
||||
const [registerSimpleTemplate, { openModal: openSimpleTemplateModal }] = useModal();
|
||||
|
||||
const emits = defineEmits(['success', 'register']);
|
||||
const emits = defineEmits(['success', 'register']);
|
||||
|
||||
const items = [
|
||||
{
|
||||
name: t('界面优先'),
|
||||
content: t('以界面为基础设计并生成单表或多表的基础功能'),
|
||||
btnName: t('设计功能'),
|
||||
image: interfaceFirstPng,
|
||||
func: () => {
|
||||
openCodeFirstModal(true, { undoAble: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
name: t('数据优先'),
|
||||
content: t('以数据为基础设置生成单表或多表的基础功能'),
|
||||
btnName: t('设计功能'),
|
||||
image: dataFirst,
|
||||
func: () => {
|
||||
openDataFirstModal(true, { undoAble: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
name: t('简易模板'),
|
||||
content: t('通过简单操作生成不需要考虑数据库的基础功能'),
|
||||
btnName: t('设计功能'),
|
||||
image: simpleTemplate,
|
||||
func: () => {
|
||||
openSimpleTemplateModal(true, { undoAble: true });
|
||||
},
|
||||
},
|
||||
{
|
||||
name: t('快速生成代码'),
|
||||
content: t('根据数据表结构自动快速生成功能代码'),
|
||||
btnName: t('设计功能'),
|
||||
image: quickDevelop,
|
||||
func: () => {
|
||||
router.push({ path: '/dataconfig/database' });
|
||||
},
|
||||
},
|
||||
];
|
||||
const items = [
|
||||
{
|
||||
name: t('界面优先'),
|
||||
content: t('以界面为基础设计并生成单表或多表的基础功能'),
|
||||
btnName: t('设计功能'),
|
||||
image: interfaceFirstPng,
|
||||
func: () => {
|
||||
openCodeFirstModal(true, { undoAble: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
name: t('数据优先'),
|
||||
content: t('以数据为基础设置生成单表或多表的基础功能'),
|
||||
btnName: t('设计功能'),
|
||||
image: dataFirst,
|
||||
func: () => {
|
||||
openDataFirstModal(true, { undoAble: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
name: t('简易模板'),
|
||||
content: t('通过简单操作生成不需要考虑数据库的基础功能'),
|
||||
btnName: t('设计功能'),
|
||||
image: simpleTemplate,
|
||||
func: () => {
|
||||
openSimpleTemplateModal(true, { undoAble: true });
|
||||
}
|
||||
},
|
||||
{
|
||||
name: t('快速生成代码'),
|
||||
content: t('根据数据表结构自动快速生成功能代码'),
|
||||
btnName: t('设计功能'),
|
||||
image: quickDevelop,
|
||||
func: () => {
|
||||
router.push({ path: '/dataconfig/database' });
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
canFullscreen: false,
|
||||
defaultFullscreen: true,
|
||||
draggable: false,
|
||||
title: data.title,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
canFullscreen: false,
|
||||
defaultFullscreen: true,
|
||||
draggable: false,
|
||||
title: data.title,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false
|
||||
});
|
||||
});
|
||||
});
|
||||
const state = reactive({
|
||||
isShowDataFirst: true,
|
||||
isShowCodeFirst: true,
|
||||
isShowSimpleTemplate: true,
|
||||
});
|
||||
const handleClose = (modal) => {
|
||||
state[modal] = !state[modal];
|
||||
setTimeout(() => {
|
||||
state[modal] = !state[modal];
|
||||
}, 100);
|
||||
};
|
||||
const state = reactive({
|
||||
isShowDataFirst: true,
|
||||
isShowCodeFirst: true,
|
||||
isShowSimpleTemplate: true
|
||||
});
|
||||
const handleClose = (modal) => {
|
||||
state[modal] = !state[modal];
|
||||
setTimeout(() => {
|
||||
state[modal] = !state[modal];
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const handleSuccess = () => {
|
||||
emits('success');
|
||||
closeModal();
|
||||
};
|
||||
const handleSuccess = () => {
|
||||
emits('success');
|
||||
closeModal();
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -1,128 +1,120 @@
|
||||
<template>
|
||||
<BasicModal @register="registerCategoryModal" v-bind="$attrs">
|
||||
<BasicTable @register="registerTable">
|
||||
<template #action="{ record }">
|
||||
<a-button type="link" v-if="record.activityFlag === 1" @click="handlePreview(record.id)"
|
||||
>{{ t('预览') }}
|
||||
</a-button>
|
||||
<div v-else class="flex justify-around">
|
||||
<a-button type="link" @click="handlePreview(record.id)">{{ t('预览') }} </a-button>
|
||||
<a-popconfirm
|
||||
:title="t('确认要将当前表单更新到此历史版本吗？')"
|
||||
:ok-text="t('确定')"
|
||||
:cancel-text="t('取消')"
|
||||
@confirm="handleVersion(record)"
|
||||
>
|
||||
<a-button type="link">{{ t('更新到此版本') }} </a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</BasicModal>
|
||||
<PreviewModal @register="registerPreviewModal" />
|
||||
<BasicModal @register="registerCategoryModal" v-bind="$attrs">
|
||||
<BasicTable @register="registerTable">
|
||||
<template #action="{ record }">
|
||||
<a-button type="link" v-if="record.activityFlag === 1" @click="handlePreview(record.id)">{{ t('预览') }} </a-button>
|
||||
<div v-else class="flex justify-around">
|
||||
<a-button type="link" @click="handlePreview(record.id)">{{ t('预览') }} </a-button>
|
||||
<a-popconfirm :title="t('确认要将当前表单更新到此历史版本吗？')" :ok-text="t('确定')" :cancel-text="t('取消')" @confirm="handleVersion(record)">
|
||||
<a-button type="link">{{ t('更新到此版本') }} </a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</BasicModal>
|
||||
<PreviewModal @register="registerPreviewModal" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
|
||||
import PreviewModal from './PreviewModal.vue';
|
||||
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
||||
import { getFormHistoryInfo, setFormHistoryVersion } from '/@/api/form/design';
|
||||
import { getFormHistory } from '/@/api/form/design';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
dataIndex: 'activityFlag',
|
||||
title: t('状态'),
|
||||
customRender: ({ record }) =>
|
||||
`${record.activityFlag === 1 ? t('当前版本') : t('非当前版本')}`, //1-当前版本 0-非当前版本
|
||||
},
|
||||
{
|
||||
dataIndex: 'version',
|
||||
title: t('版本'),
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'createUserName',
|
||||
title: t('创建人'),
|
||||
},
|
||||
{
|
||||
dataIndex: 'createDate',
|
||||
title: t('创建时间'),
|
||||
},
|
||||
];
|
||||
import { ref } from 'vue';
|
||||
import { BasicModal, useModal, useModalInner } from '/@/components/Modal';
|
||||
import PreviewModal from './PreviewModal.vue';
|
||||
import { BasicTable, useTable, BasicColumn } from '/@/components/Table';
|
||||
import { getFormHistoryInfo, setFormHistoryVersion } from '/@/api/form/design';
|
||||
import { getFormHistory } from '/@/api/form/design';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
dataIndex: 'activityFlag',
|
||||
title: t('状态'),
|
||||
customRender: ({ record }) => `${record.activityFlag === 1 ? t('当前版本') : t('非当前版本')}` //1-当前版本 0-非当前版本
|
||||
},
|
||||
{
|
||||
dataIndex: 'version',
|
||||
title: t('版本')
|
||||
},
|
||||
|
||||
const formId = ref<string>('');
|
||||
const { notification } = useMessage();
|
||||
{
|
||||
dataIndex: 'createUserName',
|
||||
title: t('创建人')
|
||||
},
|
||||
{
|
||||
dataIndex: 'createDate',
|
||||
title: t('创建时间')
|
||||
}
|
||||
];
|
||||
|
||||
const [registerPreviewModal, { openModal }] = useModal();
|
||||
const formId = ref<string>('');
|
||||
const { notification } = useMessage();
|
||||
|
||||
const [registerCategoryModal, { setModalProps }] = useModalInner(async (data) => {
|
||||
formId.value = data.formId;
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
draggable: false,
|
||||
title: data.title,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
destroyOnClose: true,
|
||||
width: 800,
|
||||
});
|
||||
});
|
||||
const [registerTable, { reload }] = useTable({
|
||||
api: getFormHistory,
|
||||
beforeFetch: () => {
|
||||
return formId.value;
|
||||
},
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
showTableSetting: false,
|
||||
bordered: true,
|
||||
maxHeight: 200,
|
||||
actionColumn: {
|
||||
width: 180,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
});
|
||||
const [registerPreviewModal, { openModal }] = useModal();
|
||||
|
||||
const handlePreview = async (id) => {
|
||||
if (!id) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: t('请先选择要预览的数据项'),
|
||||
}); //提示消息
|
||||
return;
|
||||
}
|
||||
const templateJson = await getFormHistoryInfo(id);
|
||||
openModal(true, { title: t('预览'), formJson: templateJson.formJson });
|
||||
};
|
||||
|
||||
const handleVersion = (data) => {
|
||||
setFormHistoryVersion({ formId: data.formId, id: data.id }).then((res) => {
|
||||
if (res) {
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('更新版本成功'),
|
||||
const [registerCategoryModal, { setModalProps }] = useModalInner(async (data) => {
|
||||
formId.value = data.formId;
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
draggable: false,
|
||||
title: data.title,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
destroyOnClose: true,
|
||||
width: 800
|
||||
});
|
||||
reload();
|
||||
} else {
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: t('更新版本失败'),
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
const [registerTable, { reload }] = useTable({
|
||||
api: getFormHistory,
|
||||
beforeFetch: () => {
|
||||
return formId.value;
|
||||
},
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
showTableSetting: false,
|
||||
bordered: true,
|
||||
maxHeight: 200,
|
||||
actionColumn: {
|
||||
width: 180,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
}
|
||||
});
|
||||
|
||||
const handlePreview = async (id) => {
|
||||
if (!id) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: t('请先选择要预览的数据项')
|
||||
}); //提示消息
|
||||
return;
|
||||
}
|
||||
const templateJson = await getFormHistoryInfo(id);
|
||||
openModal(true, { title: t('预览'), formJson: templateJson.formJson });
|
||||
};
|
||||
|
||||
const handleVersion = (data) => {
|
||||
setFormHistoryVersion({ formId: data.formId, id: data.id }).then((res) => {
|
||||
if (res) {
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('更新版本成功')
|
||||
});
|
||||
reload();
|
||||
} else {
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: t('更新版本失败')
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.vben-basic-table-header__toolbar) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
:deep(.vben-basic-table-header__toolbar) {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
:deep(.current-row) td {
|
||||
background: #e6f2ff !important;
|
||||
}
|
||||
:deep(.current-row) td {
|
||||
background: #e6f2ff !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,44 +1,39 @@
|
||||
<template>
|
||||
<div>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" title="预览">
|
||||
<SimpleForm
|
||||
ref="formRef"
|
||||
:key="show"
|
||||
:formProps="state.formProps"
|
||||
:formModel="state.formModel"
|
||||
/>
|
||||
</BasicModal>
|
||||
</div>
|
||||
<div>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" title="预览">
|
||||
<SimpleForm ref="formRef" :key="show" :formProps="state.formProps" :formModel="state.formModel" />
|
||||
</BasicModal>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref, provide } from 'vue';
|
||||
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { buildOption } from '/@/utils/helper/designHelper';
|
||||
import { reactive, ref, provide } from 'vue';
|
||||
import SimpleForm from '/@/components/SimpleForm/src/SimpleForm.vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { buildOption } from '/@/utils/helper/designHelper';
|
||||
|
||||
const state = reactive({
|
||||
formProps: {},
|
||||
formModel: {},
|
||||
});
|
||||
provide<boolean>('isCustomForm', true);
|
||||
const show = ref(1);
|
||||
const formRef = ref();
|
||||
|
||||
const [registerModal, { setModalProps }] = useModalInner(async (data) => {
|
||||
state.formProps = buildOption(JSON.parse(data.formJson).formJson, false);
|
||||
show.value += 1;
|
||||
|
||||
await formRef.value.setDefaultValue();
|
||||
formRef.value.resetFields();
|
||||
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
draggable: false,
|
||||
title: data.title,
|
||||
destroyOnClose: true,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
width: 800,
|
||||
const state = reactive({
|
||||
formProps: {},
|
||||
formModel: {}
|
||||
});
|
||||
provide<boolean>('isCustomForm', true);
|
||||
const show = ref(1);
|
||||
const formRef = ref();
|
||||
|
||||
const [registerModal, { setModalProps }] = useModalInner(async (data) => {
|
||||
state.formProps = buildOption(JSON.parse(data.formJson).formJson, false);
|
||||
show.value += 1;
|
||||
|
||||
await formRef.value.setDefaultValue();
|
||||
formRef.value.resetFields();
|
||||
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
draggable: false,
|
||||
title: data.title,
|
||||
destroyOnClose: true,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
width: 800
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,371 +1,346 @@
|
||||
<template>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
|
||||
<template #title>
|
||||
<div class="step-form-form">
|
||||
<a href="https://fcdma.gdyditc.com/" target="_blank">
|
||||
<DesignLogo />
|
||||
</a>
|
||||
<span>•</span>
|
||||
<span>{{ t('表单设计') }} - {{ t('界面优先') }}</span>
|
||||
<a-steps :current="current" size="mini">
|
||||
<a-step :title="t('基础信息')" />
|
||||
<a-step :title="t('表单设计')" />
|
||||
<a-step :title="t('表单事件')" />
|
||||
<a-step :title="t('完整配置')" />
|
||||
<a-step :title="t('结构配置')" />
|
||||
</a-steps>
|
||||
<div class="btn-box">
|
||||
<a-button @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
|
||||
<a-button type="primary" @click="handleStepNext" v-show="current < 4">
|
||||
{{ t('下一步') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleSave" v-show="current === 4">
|
||||
{{ t('保存') }}
|
||||
</a-button>
|
||||
<a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
|
||||
<template #title>
|
||||
<div class="step-form-form">
|
||||
<a href="https://fcdma.gdyditc.com/" target="_blank">
|
||||
<DesignLogo />
|
||||
</a>
|
||||
<span>•</span>
|
||||
<span>{{ t('表单设计') }} - {{ t('界面优先') }}</span>
|
||||
<a-steps :current="current" size="mini">
|
||||
<a-step :title="t('基础信息')" />
|
||||
<a-step :title="t('表单设计')" />
|
||||
<a-step :title="t('表单事件')" />
|
||||
<a-step :title="t('完整配置')" />
|
||||
<a-step :title="t('结构配置')" />
|
||||
</a-steps>
|
||||
<div class="btn-box">
|
||||
<a-button @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
|
||||
<a-button type="primary" @click="handleStepNext" v-show="current < 4">
|
||||
{{ t('下一步') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleSave" v-show="current === 4">
|
||||
{{ t('保存') }}
|
||||
</a-button>
|
||||
<a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-container">
|
||||
<BasicConfigStep ref="basicConfigStepRef" v-show="current === 0" />
|
||||
<FormDesignStep ref="formDesignStepRef" v-show="current === 1" />
|
||||
<FormEventStep ref="formEventStepRef" v-show="current === 2" />
|
||||
<EntireConfigStep ref="entireConfigStepRef" v-show="current === 3" />
|
||||
<StructureConfigStep ref="structureConfigStepRef" v-show="current === 4" :isUpdate="isUpdate" :beforeTableNames="beforeTableNames" @validate-table="handleSave" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-container">
|
||||
<BasicConfigStep ref="basicConfigStepRef" v-show="current === 0" />
|
||||
<FormDesignStep ref="formDesignStepRef" v-show="current === 1" />
|
||||
<FormEventStep ref="formEventStepRef" v-show="current === 2" />
|
||||
<EntireConfigStep ref="entireConfigStepRef" v-show="current === 3"/>
|
||||
<StructureConfigStep
|
||||
ref="structureConfigStepRef"
|
||||
v-show="current === 4"
|
||||
:isUpdate="isUpdate"
|
||||
:beforeTableNames="beforeTableNames"
|
||||
@validate-table="handleSave"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</BasicModal>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, provide, inject, Ref, toRaw, watch } from 'vue';
|
||||
import { FormDesignStep, FormEventStep, StructureConfigStep,EntireConfigStep} from '/@/components/CreateCodeStep';
|
||||
import BasicConfigStep from '../BasicConfigStep.vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import {
|
||||
CustomFormConfig,
|
||||
CustomFormJson,
|
||||
GeneratorConfig,
|
||||
} from '/@/model/generator/generatorConfig';
|
||||
import { TableInfo } from '/@/components/Designer';
|
||||
import {
|
||||
addCodeFirstFormTemplate,
|
||||
updateCodeFirstFormTemplate,
|
||||
getFormTemplate,
|
||||
} from '/@/api/form/design';
|
||||
import { noHaveTableAndField } from '/@/components/Designer';
|
||||
import * as antd from '/@/components/Designer/src/types';
|
||||
import { FormTypeEnum } from '/@/enums/formtypeEnum';
|
||||
import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
|
||||
import { random } from 'lodash-es';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { FormJson } from '/@/model/generator/codeGenerator';
|
||||
import { FormEventColumnConfig } from '/@/model/generator/formEventConfig';
|
||||
import { changeCompsApiConfig, changeEventApiConfig, getMainTable } from '/@/utils/event/design';
|
||||
import {ListConfig} from "/@/model/generator/listConfig";
|
||||
import { ref, reactive, provide, inject, Ref, toRaw, watch } from 'vue';
|
||||
import { FormDesignStep, FormEventStep, StructureConfigStep, EntireConfigStep } from '/@/components/CreateCodeStep';
|
||||
import BasicConfigStep from '../BasicConfigStep.vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { CustomFormConfig, CustomFormJson, GeneratorConfig } from '/@/model/generator/generatorConfig';
|
||||
import { TableInfo } from '/@/components/Designer';
|
||||
import { addCodeFirstFormTemplate, updateCodeFirstFormTemplate, getFormTemplate } from '/@/api/form/design';
|
||||
import { noHaveTableAndField } from '/@/components/Designer';
|
||||
import * as antd from '/@/components/Designer/src/types';
|
||||
import { FormTypeEnum } from '/@/enums/formtypeEnum';
|
||||
import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
|
||||
import { random } from 'lodash-es';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { FormJson } from '/@/model/generator/codeGenerator';
|
||||
import { FormEventColumnConfig } from '/@/model/generator/formEventConfig';
|
||||
import { changeCompsApiConfig, changeEventApiConfig, getMainTable } from '/@/utils/event/design';
|
||||
import { ListConfig } from '/@/model/generator/listConfig';
|
||||
|
||||
const { t } = useI18n();
|
||||
const current = ref(0);
|
||||
const { t } = useI18n();
|
||||
const current = ref(0);
|
||||
|
||||
const basicConfigStepRef = ref();
|
||||
const formDesignStepRef = ref();
|
||||
const formEventStepRef = ref();
|
||||
const entireConfigStepRef = ref();
|
||||
const structureConfigStepRef = ref();
|
||||
const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm))); //FormDesignStep -> designer和StructureConfigStep页面使用
|
||||
const isUpdate = ref<boolean>(false);
|
||||
const tableInfo = ref<TableInfo[]>([]);
|
||||
const formId = ref<string>('');
|
||||
const beforeTableNames = ref<string[]>([]);
|
||||
const mainTableName = ref('table_' + random(10000, 99999));
|
||||
|
||||
let generatorConfig = reactive<CustomFormJson>({
|
||||
databaseId: '', //数据库id
|
||||
formJson: {} as FormJson,
|
||||
tableStructureConfigs: [],
|
||||
formEventConfig: {} as FormEventColumnConfig,
|
||||
isDataAuth: false,
|
||||
dataAuthList: [],
|
||||
});
|
||||
const basicConfigStepRef = ref();
|
||||
const formDesignStepRef = ref();
|
||||
const formEventStepRef = ref();
|
||||
const entireConfigStepRef = ref();
|
||||
const structureConfigStepRef = ref();
|
||||
const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm))); //FormDesignStep -> designer和StructureConfigStep页面使用
|
||||
const isUpdate = ref<boolean>(false);
|
||||
const tableInfo = ref<TableInfo[]>([]);
|
||||
const formId = ref<string>('');
|
||||
const beforeTableNames = ref<string[]>([]);
|
||||
const mainTableName = ref('table_' + random(10000, 99999));
|
||||
|
||||
let customFormConfig = reactive<CustomFormConfig>({
|
||||
name: '',
|
||||
category: '',
|
||||
formDesignType: 1,
|
||||
formType:'',
|
||||
formJson: generatorConfig,
|
||||
remark: '',
|
||||
isChange: false,
|
||||
});
|
||||
|
||||
provide<GeneratorConfig>('generatorConfig', generatorConfig as GeneratorConfig);
|
||||
provide<CustomFormConfig>('customFormConfig', customFormConfig);
|
||||
provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
|
||||
provide<Ref<number>>('current', current); //当前步骤
|
||||
provide<string>('designType', 'code');
|
||||
provide('widgetForm', widgetForm);
|
||||
provide<Ref<string>>('mainTableName', mainTableName);
|
||||
provide<boolean>('isCustomForm', true); //是自定义表单
|
||||
provide<Ref<boolean>>('isFieldUpper', ref(false));
|
||||
|
||||
watch(
|
||||
() => generatorConfig,
|
||||
(val) => {
|
||||
customFormConfig.formJson = val;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
const emits = defineEmits(['success', 'register', 'close']);
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
isUpdate.value = !!data.isUpdate;
|
||||
formId.value = data.id;
|
||||
customFormConfig.isChange = isUpdate.value;
|
||||
if (formId.value) {
|
||||
getFormTemplateInfo();
|
||||
}
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
canFullscreen: false,
|
||||
defaultFullscreen: true,
|
||||
destroyOnClose: true,
|
||||
draggable: false,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
footer: null,
|
||||
closable: false,
|
||||
let generatorConfig = reactive<CustomFormJson>({
|
||||
databaseId: '', //数据库id
|
||||
formJson: {} as FormJson,
|
||||
tableStructureConfigs: [],
|
||||
formEventConfig: {} as FormEventColumnConfig,
|
||||
isDataAuth: false,
|
||||
dataAuthList: []
|
||||
});
|
||||
});
|
||||
|
||||
async function getFormTemplateInfo() {
|
||||
const data = await getFormTemplate(formId.value);
|
||||
customFormConfig.name = data.name;
|
||||
customFormConfig.category = data.category;
|
||||
customFormConfig.formDesignType = data.formDesignType;
|
||||
customFormConfig.formJson = JSON.parse(data.formJson);
|
||||
customFormConfig.listConfig = JSON.parse(data.listConfig)||{} as ListConfig;
|
||||
customFormConfig.renderConfig =data.renderConfig;
|
||||
customFormConfig.remark = data.remark;
|
||||
let customFormConfig = reactive<CustomFormConfig>({
|
||||
name: '',
|
||||
category: '',
|
||||
formDesignType: 1,
|
||||
formType: '',
|
||||
formJson: generatorConfig,
|
||||
remark: '',
|
||||
isChange: false
|
||||
});
|
||||
|
||||
const { formJson,listConfig,renderConfig } = customFormConfig;
|
||||
provide<GeneratorConfig>('generatorConfig', generatorConfig as GeneratorConfig);
|
||||
provide<CustomFormConfig>('customFormConfig', customFormConfig);
|
||||
provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
|
||||
provide<Ref<number>>('current', current); //当前步骤
|
||||
provide<string>('designType', 'code');
|
||||
provide('widgetForm', widgetForm);
|
||||
provide<Ref<string>>('mainTableName', mainTableName);
|
||||
provide<boolean>('isCustomForm', true); //是自定义表单
|
||||
provide<Ref<boolean>>('isFieldUpper', ref(false));
|
||||
|
||||
generatorConfig.databaseId = formJson.databaseId;
|
||||
generatorConfig.isDataAuth = formJson.isDataAuth;
|
||||
generatorConfig.dataAuthList = formJson.dataAuthList;
|
||||
generatorConfig.tableStructureConfigs = formJson.tableStructureConfigs;
|
||||
generatorConfig.formJson = formJson.formJson;
|
||||
generatorConfig.listConfig = listConfig;
|
||||
generatorConfig.renderConfig = renderConfig;
|
||||
generatorConfig.formEventConfig = formJson.formEventConfig!;
|
||||
generatorConfig.formJson.list = generatorConfig.formJson.list.filter(
|
||||
(x) => x.type !== 'hiddenComponent',
|
||||
watch(
|
||||
() => generatorConfig,
|
||||
(val) => {
|
||||
customFormConfig.formJson = val;
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
const emits = defineEmits(['success', 'register', 'close']);
|
||||
|
||||
getMainTableFirst(generatorConfig.formJson.list);
|
||||
widgetForm.value = generatorConfig.formJson;
|
||||
|
||||
basicConfigStepRef.value.setFieldsValue({
|
||||
name: customFormConfig?.name,
|
||||
category: customFormConfig?.category,
|
||||
remark: customFormConfig?.remark,
|
||||
databaseId: generatorConfig.databaseId,
|
||||
isDataAuth: generatorConfig.isDataAuth,
|
||||
dataAuthList: generatorConfig.dataAuthList,
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
isUpdate.value = !!data.isUpdate;
|
||||
formId.value = data.id;
|
||||
customFormConfig.isChange = isUpdate.value;
|
||||
if (formId.value) {
|
||||
getFormTemplateInfo();
|
||||
}
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
canFullscreen: false,
|
||||
defaultFullscreen: true,
|
||||
destroyOnClose: true,
|
||||
draggable: false,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
footer: null,
|
||||
closable: false
|
||||
});
|
||||
});
|
||||
|
||||
beforeTableNames.value = generatorConfig.tableStructureConfigs!.map((x) => x.tableName);
|
||||
}
|
||||
async function getFormTemplateInfo() {
|
||||
const data = await getFormTemplate(formId.value);
|
||||
customFormConfig.name = data.name;
|
||||
customFormConfig.category = data.category;
|
||||
customFormConfig.formDesignType = data.formDesignType;
|
||||
customFormConfig.formJson = JSON.parse(data.formJson);
|
||||
customFormConfig.listConfig = JSON.parse(data.listConfig) || ({} as ListConfig);
|
||||
customFormConfig.renderConfig = data.renderConfig;
|
||||
customFormConfig.remark = data.remark;
|
||||
|
||||
function getMainTableFirst(list) {
|
||||
list.some((x) => {
|
||||
if (['tab', 'grid', 'card'].includes(x.type)) {
|
||||
for (const child of x.layout!) {
|
||||
return getMainTableFirst(child.list);
|
||||
}
|
||||
} else if (x.type === 'table-layout') {
|
||||
for (const child of x.layout!) {
|
||||
for (const el of child.list!) {
|
||||
return getMainTableFirst(el.children);
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
x.type !== 'form' &&
|
||||
x.type !== 'one-for-one' &&
|
||||
!noHaveTableAndField.includes(x.type)
|
||||
) {
|
||||
mainTableName.value = x.bindTable;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
const { formJson, listConfig, renderConfig } = customFormConfig;
|
||||
|
||||
function handleClose() {
|
||||
closeModal();
|
||||
emits('close');
|
||||
}
|
||||
generatorConfig.databaseId = formJson.databaseId;
|
||||
generatorConfig.isDataAuth = formJson.isDataAuth;
|
||||
generatorConfig.dataAuthList = formJson.dataAuthList;
|
||||
generatorConfig.tableStructureConfigs = formJson.tableStructureConfigs;
|
||||
generatorConfig.formJson = formJson.formJson;
|
||||
generatorConfig.listConfig = listConfig;
|
||||
generatorConfig.renderConfig = renderConfig;
|
||||
generatorConfig.formEventConfig = formJson.formEventConfig!;
|
||||
generatorConfig.formJson.list = generatorConfig.formJson.list.filter((x) => x.type !== 'hiddenComponent');
|
||||
|
||||
//上一步
|
||||
async function handleStepPrev() {
|
||||
current.value--;
|
||||
if(current.value==1){
|
||||
getMainTableFirst(generatorConfig.formJson.list);
|
||||
widgetForm.value = generatorConfig.formJson;
|
||||
}
|
||||
}
|
||||
//下一步
|
||||
async function handleStepNext() {
|
||||
if (current.value === 2) {
|
||||
entireConfigStepRef.value.initStep();
|
||||
current.value++;
|
||||
return;
|
||||
}
|
||||
|
||||
const isOk = await stepValidate[current.value]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
current.value++;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const isOk = await stepValidate[4]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
basicConfigStepRef.value.setFieldsValue({
|
||||
name: customFormConfig?.name,
|
||||
category: customFormConfig?.category,
|
||||
remark: customFormConfig?.remark,
|
||||
databaseId: generatorConfig.databaseId,
|
||||
isDataAuth: generatorConfig.isDataAuth,
|
||||
dataAuthList: generatorConfig.dataAuthList
|
||||
});
|
||||
|
||||
beforeTableNames.value = generatorConfig.tableStructureConfigs!.map((x) => x.tableName);
|
||||
}
|
||||
|
||||
let tableFieldConfigs = getMainTable(generatorConfig.tableStructureConfigs);
|
||||
changeCompsApiConfig(generatorConfig!.formJson.list, 'code', tableFieldConfigs);
|
||||
changeEventApiConfig(generatorConfig!.formEventConfig, 'code', tableFieldConfigs);
|
||||
|
||||
if (
|
||||
generatorConfig.formJson?.hiddenComponent &&
|
||||
generatorConfig.formJson?.hiddenComponent.length
|
||||
) {
|
||||
generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
|
||||
function getMainTableFirst(list) {
|
||||
list.some((x) => {
|
||||
if (['tab', 'grid', 'card'].includes(x.type)) {
|
||||
for (const child of x.layout!) {
|
||||
return getMainTableFirst(child.list);
|
||||
}
|
||||
} else if (x.type === 'table-layout') {
|
||||
for (const child of x.layout!) {
|
||||
for (const el of child.list!) {
|
||||
return getMainTableFirst(el.children);
|
||||
}
|
||||
}
|
||||
} else if (x.type !== 'form' && x.type !== 'one-for-one' && !noHaveTableAndField.includes(x.type)) {
|
||||
mainTableName.value = x.bindTable;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (isUpdate.value) {
|
||||
handleEditSuccess();
|
||||
} else {
|
||||
await addCodeFirstFormTemplate(toRaw(customFormConfig));
|
||||
closeModal();
|
||||
emits('success');
|
||||
emits('close');
|
||||
|
||||
function handleClose() {
|
||||
closeModal();
|
||||
emits('close');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleEditSuccess() {
|
||||
await updateCodeFirstFormTemplate({ id: formId.value, ...toRaw(customFormConfig) });
|
||||
closeModal();
|
||||
emits('success');
|
||||
emits('close');
|
||||
}
|
||||
//上一步
|
||||
async function handleStepPrev() {
|
||||
current.value--;
|
||||
if (current.value == 1) {
|
||||
widgetForm.value = generatorConfig.formJson;
|
||||
}
|
||||
}
|
||||
//下一步
|
||||
async function handleStepNext() {
|
||||
if (current.value === 2) {
|
||||
entireConfigStepRef.value.initStep();
|
||||
current.value++;
|
||||
return;
|
||||
}
|
||||
|
||||
const stepValidate = {
|
||||
//数据表配置 验证
|
||||
0: () => basicConfigStepRef.value.validateStep(),
|
||||
1: () => formDesignStepRef.value.validateStep(),
|
||||
2: () => formEventStepRef.value.validateStep(),
|
||||
3: () => entireConfigStepRef.value.validateStep(),
|
||||
4: () => structureConfigStepRef.value.validateStep(),
|
||||
|
||||
};
|
||||
const isOk = await stepValidate[current.value]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
current.value++;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const isOk = await stepValidate[4]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
|
||||
let tableFieldConfigs = getMainTable(generatorConfig.tableStructureConfigs);
|
||||
changeCompsApiConfig(generatorConfig!.formJson.list, 'code', tableFieldConfigs);
|
||||
changeEventApiConfig(generatorConfig!.formEventConfig, 'code', tableFieldConfigs);
|
||||
|
||||
if (generatorConfig.formJson?.hiddenComponent && generatorConfig.formJson?.hiddenComponent.length) {
|
||||
generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
|
||||
}
|
||||
if (isUpdate.value) {
|
||||
handleEditSuccess();
|
||||
} else {
|
||||
await addCodeFirstFormTemplate(toRaw(customFormConfig));
|
||||
closeModal();
|
||||
emits('success');
|
||||
emits('close');
|
||||
}
|
||||
}
|
||||
|
||||
async function handleEditSuccess() {
|
||||
await updateCodeFirstFormTemplate({ id: formId.value, ...toRaw(customFormConfig) });
|
||||
closeModal();
|
||||
emits('success');
|
||||
emits('close');
|
||||
}
|
||||
|
||||
const stepValidate = {
|
||||
//数据表配置 验证
|
||||
0: () => basicConfigStepRef.value.validateStep(),
|
||||
1: () => formDesignStepRef.value.validateStep(),
|
||||
2: () => formEventStepRef.value.validateStep(),
|
||||
3: () => entireConfigStepRef.value.validateStep(),
|
||||
4: () => structureConfigStepRef.value.validateStep()
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotationReverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotationReverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
border: 2px solid #fff;
|
||||
line-height: 30px;
|
||||
animation: rotation 4s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border: 2px dashed #1890ff;
|
||||
content: '';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.ant-steps-icon {
|
||||
display: inline-block;
|
||||
animation: rotationReverse 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
border: 2px solid #fff;
|
||||
line-height: 30px;
|
||||
animation: rotation 4s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border: 2px dashed #1890ff;
|
||||
content: '';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.ant-steps-icon {
|
||||
display: inline-block;
|
||||
animation: rotationReverse 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-form-content {
|
||||
padding: 24px;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
.step-form-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
margin-left: -16px;
|
||||
.step-form-content {
|
||||
padding: 24px;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: 0 20px 0 -5px;
|
||||
white-space: nowrap;
|
||||
.step-form-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: 0 20px 0 -5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.ant-steps) {
|
||||
width: calc(100% - 750px);
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-container) {
|
||||
padding: 3px 0 3px 3px;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps) {
|
||||
width: calc(100% - 750px);
|
||||
.step-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-container) {
|
||||
padding: 3px 0 3px 3px;
|
||||
.step1 {
|
||||
padding: 0 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.step1 {
|
||||
padding: 0 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,317 +1,301 @@
|
||||
<template>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
|
||||
<template #title>
|
||||
<div class="step-form-form">
|
||||
<a href="https://fcdma.gdyditc.com/" target="_blank">
|
||||
<DesignLogo />
|
||||
</a>
|
||||
<span>•</span>
|
||||
<span>{{ t('表单设计') }} - {{ t('数据优先') }}</span>
|
||||
<a-steps :current="current">
|
||||
<a-step :title="t('基础信息')" />
|
||||
<a-step :title="t('表单设计')" />
|
||||
<a-step :title="t('表单事件')" />
|
||||
<a-step :title="t('完整配置')" />
|
||||
</a-steps>
|
||||
<div class="btn-box">
|
||||
<ajax-error-icon />
|
||||
<a-button type="primary" @click="handleStepPrev" v-show="current !== 0">{{
|
||||
t('上一步')
|
||||
}}</a-button>
|
||||
<a-button type="primary" @click="handleStepNext" v-show="current < 3">{{
|
||||
t('下一步')
|
||||
}}</a-button>
|
||||
<a-button type="primary" @click="handleSave" v-show="current === 3">{{
|
||||
t('保存')
|
||||
}}</a-button>
|
||||
<a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
|
||||
<template #title>
|
||||
<div class="step-form-form">
|
||||
<a href="https://fcdma.gdyditc.com/" target="_blank">
|
||||
<DesignLogo />
|
||||
</a>
|
||||
<span>•</span>
|
||||
<span>{{ t('表单设计') }} - {{ t('数据优先') }}</span>
|
||||
<a-steps :current="current">
|
||||
<a-step :title="t('基础信息')" />
|
||||
<a-step :title="t('表单设计')" />
|
||||
<a-step :title="t('表单事件')" />
|
||||
<a-step :title="t('完整配置')" />
|
||||
</a-steps>
|
||||
<div class="btn-box">
|
||||
<ajax-error-icon />
|
||||
<a-button type="primary" @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
|
||||
<a-button type="primary" @click="handleStepNext" v-show="current < 3">{{ t('下一步') }}</a-button>
|
||||
<a-button type="primary" @click="handleSave" v-show="current === 3">{{ t('保存') }}</a-button>
|
||||
<a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-container">
|
||||
<BasicConfigStep ref="basicConfigStepRef" v-show="current === 0" />
|
||||
<FormDesignStep ref="formDesignStepRef" v-show="current === 1" />
|
||||
<FormEventStep ref="formEventStepRef" v-show="current === 2" />
|
||||
<EntireConfigStep ref="entireConfigStepRef" v-show="current === 3" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-container">
|
||||
<BasicConfigStep ref="basicConfigStepRef" v-show="current === 0" />
|
||||
<FormDesignStep ref="formDesignStepRef" v-show="current === 1" />
|
||||
<FormEventStep ref="formEventStepRef" v-show="current === 2" />
|
||||
<EntireConfigStep ref="entireConfigStepRef" v-show="current === 3"/>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, provide, watch, Ref, toRaw, onUnmounted } from 'vue';
|
||||
import BasicConfigStep from '../BasicConfigStep.vue';
|
||||
import { FormDesignStep, FormEventStep,EntireConfigStep } from '/@/components/CreateCodeStep';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { CustomFormConfig, GeneratorConfig } from '/@/model/generator/generatorConfig';
|
||||
import { TableInfo } from '/@/components/Designer';
|
||||
import AjaxErrorIcon from '/@/components/SecondDev/AjaxErrorIcon.vue';
|
||||
import {
|
||||
addDataFirstFormTemplate,
|
||||
updateDataFirstFormTemplate,
|
||||
getFormTemplate,
|
||||
} from '/@/api/form/design';
|
||||
import { FormTypeEnum } from '/@/enums/formtypeEnum';
|
||||
import * as antd from '/@/components/Designer/src/types';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
|
||||
import useGlobalFlag from '/@/hooks/core/useGlobalFlag';
|
||||
import {ListConfig} from "/@/model/generator/listConfig";
|
||||
import { ref, reactive, provide, watch, Ref, toRaw, onUnmounted } from 'vue';
|
||||
import BasicConfigStep from '../BasicConfigStep.vue';
|
||||
import { FormDesignStep, FormEventStep, EntireConfigStep } from '/@/components/CreateCodeStep';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { CustomFormConfig, GeneratorConfig } from '/@/model/generator/generatorConfig';
|
||||
import { TableInfo } from '/@/components/Designer';
|
||||
import AjaxErrorIcon from '/@/components/SecondDev/AjaxErrorIcon.vue';
|
||||
import { addDataFirstFormTemplate, updateDataFirstFormTemplate, getFormTemplate } from '/@/api/form/design';
|
||||
import { FormTypeEnum } from '/@/enums/formtypeEnum';
|
||||
import * as antd from '/@/components/Designer/src/types';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
|
||||
import useGlobalFlag from '/@/hooks/core/useGlobalFlag';
|
||||
import { ListConfig } from '/@/model/generator/listConfig';
|
||||
|
||||
const { t } = useI18n();
|
||||
const current = ref(0);
|
||||
const { t } = useI18n();
|
||||
const current = ref(0);
|
||||
|
||||
const basicConfigStepRef = ref();
|
||||
const formDesignStepRef = ref();
|
||||
const formEventStepRef = ref();
|
||||
const entireConfigStepRef = ref();
|
||||
const basicConfigStepRef = ref();
|
||||
const formDesignStepRef = ref();
|
||||
const formEventStepRef = ref();
|
||||
const entireConfigStepRef = ref();
|
||||
|
||||
const tableInfo = ref<TableInfo[]>([]);
|
||||
const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm)));
|
||||
const isUpdate = ref<boolean>(false);
|
||||
const formId = ref<string>('');
|
||||
const emits = defineEmits(['success', 'register', 'close']);
|
||||
const globalFlag = useGlobalFlag();
|
||||
const { isEditorOpen } = globalFlag;
|
||||
|
||||
watch(current, () => {
|
||||
isEditorOpen.value = current.value === 1;
|
||||
});
|
||||
const tableInfo = ref<TableInfo[]>([]);
|
||||
const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm)));
|
||||
const isUpdate = ref<boolean>(false);
|
||||
const formId = ref<string>('');
|
||||
const emits = defineEmits(['success', 'register', 'close']);
|
||||
const globalFlag = useGlobalFlag();
|
||||
const { isEditorOpen } = globalFlag;
|
||||
|
||||
onUnmounted(() => {
|
||||
isEditorOpen.value = false;
|
||||
});
|
||||
|
||||
let generatorConfig = reactive<GeneratorConfig>({
|
||||
databaseId: '', //数据库id
|
||||
tableConfigs: [],
|
||||
formJson: {},
|
||||
formEventConfig: {},
|
||||
isDataAuth: false,
|
||||
dataAuthList: [],
|
||||
});
|
||||
let customFormConfig = reactive<CustomFormConfig>({
|
||||
name: '',
|
||||
category: '',
|
||||
formDesignType: 0,
|
||||
formType: '',
|
||||
formJson: generatorConfig,
|
||||
remark: '',
|
||||
});
|
||||
|
||||
provide<GeneratorConfig>('generatorConfig', generatorConfig);
|
||||
provide<CustomFormConfig>('customFormConfig', customFormConfig);
|
||||
provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
|
||||
provide<string>('designType', 'data');
|
||||
provide('widgetForm', widgetForm);
|
||||
provide<Ref<number>>('current', current); //当前步骤
|
||||
provide<boolean>('isCustomForm', true); //是自定义表单
|
||||
|
||||
watch(
|
||||
() => generatorConfig,
|
||||
(val) => {
|
||||
customFormConfig.formJson = val;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
|
||||
isUpdate.value = !!data.isUpdate;
|
||||
formId.value = data.id;
|
||||
if (formId.value) getFormTemplateInfo();
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
canFullscreen: false,
|
||||
defaultFullscreen: true,
|
||||
destroyOnClose: true,
|
||||
draggable: false,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
footer: null,
|
||||
closable: false,
|
||||
watch(current, () => {
|
||||
isEditorOpen.value = current.value === 1;
|
||||
});
|
||||
});
|
||||
|
||||
async function getFormTemplateInfo() {
|
||||
const data = await getFormTemplate(formId.value);
|
||||
customFormConfig.name = data.name;
|
||||
customFormConfig.category = data.category;
|
||||
customFormConfig.formDesignType = data.formDesignType;
|
||||
customFormConfig.formJson = JSON.parse(data.formJson);
|
||||
customFormConfig.listConfig = JSON.parse(data.listConfig)||{} as ListConfig;
|
||||
customFormConfig.renderConfig =data.renderConfig;
|
||||
customFormConfig.remark = data.remark;
|
||||
onUnmounted(() => {
|
||||
isEditorOpen.value = false;
|
||||
});
|
||||
|
||||
const { formJson,listConfig,renderConfig } = customFormConfig;
|
||||
let generatorConfig = reactive<GeneratorConfig>({
|
||||
databaseId: '', //数据库id
|
||||
tableConfigs: [],
|
||||
formJson: {},
|
||||
formEventConfig: {},
|
||||
isDataAuth: false,
|
||||
dataAuthList: []
|
||||
});
|
||||
let customFormConfig = reactive<CustomFormConfig>({
|
||||
name: '',
|
||||
category: '',
|
||||
formDesignType: 0,
|
||||
formType: '',
|
||||
formJson: generatorConfig,
|
||||
remark: ''
|
||||
});
|
||||
|
||||
generatorConfig.databaseId = formJson.databaseId;
|
||||
generatorConfig.isDataAuth = formJson.isDataAuth;
|
||||
generatorConfig.dataAuthList = formJson.dataAuthList;
|
||||
generatorConfig.tableConfigs = formJson.tableConfigs;
|
||||
generatorConfig.formJson = formJson.formJson;
|
||||
generatorConfig.listConfig = listConfig;
|
||||
generatorConfig.renderConfig = renderConfig;
|
||||
generatorConfig.formEventConfig = formJson.formEventConfig!;
|
||||
generatorConfig.formJson.list = generatorConfig.formJson.list.filter(
|
||||
(x) => x.type !== 'hiddenComponent',
|
||||
provide<GeneratorConfig>('generatorConfig', generatorConfig);
|
||||
provide<CustomFormConfig>('customFormConfig', customFormConfig);
|
||||
provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
|
||||
provide<string>('designType', 'data');
|
||||
provide('widgetForm', widgetForm);
|
||||
provide<Ref<number>>('current', current); //当前步骤
|
||||
provide<boolean>('isCustomForm', true); //是自定义表单
|
||||
|
||||
watch(
|
||||
() => generatorConfig,
|
||||
(val) => {
|
||||
customFormConfig.formJson = val;
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
widgetForm.value = generatorConfig.formJson;
|
||||
basicConfigStepRef.value.setFieldsValue({
|
||||
name: customFormConfig?.name,
|
||||
category: customFormConfig?.category,
|
||||
remark: customFormConfig?.remark,
|
||||
databaseId: generatorConfig.databaseId,
|
||||
isDataAuth: generatorConfig.isDataAuth,
|
||||
dataAuthList: generatorConfig.dataAuthList,
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner((data) => {
|
||||
isUpdate.value = !!data.isUpdate;
|
||||
formId.value = data.id;
|
||||
if (formId.value) getFormTemplateInfo();
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
canFullscreen: false,
|
||||
defaultFullscreen: true,
|
||||
destroyOnClose: true,
|
||||
draggable: false,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
footer: null,
|
||||
closable: false
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
closeModal();
|
||||
emits('close');
|
||||
}
|
||||
async function getFormTemplateInfo() {
|
||||
const data = await getFormTemplate(formId.value);
|
||||
customFormConfig.name = data.name;
|
||||
customFormConfig.category = data.category;
|
||||
customFormConfig.formDesignType = data.formDesignType;
|
||||
customFormConfig.formJson = JSON.parse(data.formJson);
|
||||
customFormConfig.listConfig = JSON.parse(data.listConfig) || ({} as ListConfig);
|
||||
customFormConfig.renderConfig = data.renderConfig;
|
||||
customFormConfig.remark = data.remark;
|
||||
|
||||
//上一步
|
||||
function handleStepPrev() {
|
||||
current.value--;
|
||||
if(current.value==1){
|
||||
const { formJson, listConfig, renderConfig } = customFormConfig;
|
||||
|
||||
generatorConfig.databaseId = formJson.databaseId;
|
||||
generatorConfig.isDataAuth = formJson.isDataAuth;
|
||||
generatorConfig.dataAuthList = formJson.dataAuthList;
|
||||
generatorConfig.tableConfigs = formJson.tableConfigs;
|
||||
generatorConfig.formJson = formJson.formJson;
|
||||
generatorConfig.listConfig = listConfig;
|
||||
generatorConfig.renderConfig = renderConfig;
|
||||
generatorConfig.formEventConfig = formJson.formEventConfig!;
|
||||
generatorConfig.formJson.list = generatorConfig.formJson.list.filter((x) => x.type !== 'hiddenComponent');
|
||||
widgetForm.value = generatorConfig.formJson;
|
||||
}
|
||||
}
|
||||
//下一步
|
||||
async function handleStepNext() {
|
||||
const isOk = await stepValidate[current.value]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
current.value++;
|
||||
|
||||
if(current.value === 3){
|
||||
entireConfigStepRef.value.initStep();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function handleSave() {
|
||||
const isOk = await stepValidate[3]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
if (
|
||||
generatorConfig.formJson?.hiddenComponent &&
|
||||
generatorConfig.formJson?.hiddenComponent.length
|
||||
) {
|
||||
generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
|
||||
}
|
||||
if (isUpdate.value) {
|
||||
await updateDataFirstFormTemplate({ id: formId.value, ...toRaw(customFormConfig) });
|
||||
} else {
|
||||
await addDataFirstFormTemplate(toRaw(customFormConfig));
|
||||
basicConfigStepRef.value.setFieldsValue({
|
||||
name: customFormConfig?.name,
|
||||
category: customFormConfig?.category,
|
||||
remark: customFormConfig?.remark,
|
||||
databaseId: generatorConfig.databaseId,
|
||||
isDataAuth: generatorConfig.isDataAuth,
|
||||
dataAuthList: generatorConfig.dataAuthList
|
||||
});
|
||||
}
|
||||
|
||||
closeModal();
|
||||
emits('close');
|
||||
emits('success');
|
||||
}
|
||||
function handleClose() {
|
||||
closeModal();
|
||||
emits('close');
|
||||
}
|
||||
|
||||
const stepValidate = {
|
||||
//数据表配置 验证
|
||||
0: () => basicConfigStepRef.value.validateStep(),
|
||||
1: () => formDesignStepRef.value.validateStep(),
|
||||
2: () => formEventStepRef.value.validateStep(),
|
||||
3: () => entireConfigStepRef.value.validateStep(),
|
||||
};
|
||||
//上一步
|
||||
function handleStepPrev() {
|
||||
current.value--;
|
||||
if (current.value == 1) {
|
||||
widgetForm.value = generatorConfig.formJson;
|
||||
}
|
||||
}
|
||||
//下一步
|
||||
async function handleStepNext() {
|
||||
const isOk = await stepValidate[current.value]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
current.value++;
|
||||
|
||||
if (current.value === 3) {
|
||||
entireConfigStepRef.value.initStep();
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const isOk = await stepValidate[3]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
if (generatorConfig.formJson?.hiddenComponent && generatorConfig.formJson?.hiddenComponent.length) {
|
||||
generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
|
||||
}
|
||||
if (isUpdate.value) {
|
||||
await updateDataFirstFormTemplate({ id: formId.value, ...toRaw(customFormConfig) });
|
||||
} else {
|
||||
await addDataFirstFormTemplate(toRaw(customFormConfig));
|
||||
}
|
||||
|
||||
closeModal();
|
||||
emits('close');
|
||||
emits('success');
|
||||
}
|
||||
|
||||
const stepValidate = {
|
||||
//数据表配置 验证
|
||||
0: () => basicConfigStepRef.value.validateStep(),
|
||||
1: () => formDesignStepRef.value.validateStep(),
|
||||
2: () => formEventStepRef.value.validateStep(),
|
||||
3: () => entireConfigStepRef.value.validateStep()
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotationReverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotationReverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
border: 2px solid #fff;
|
||||
line-height: 30px;
|
||||
animation: rotation 4s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border: 2px dashed #1890ff;
|
||||
content: '';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.ant-steps-icon {
|
||||
display: inline-block;
|
||||
animation: rotationReverse 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
border: 2px solid #fff;
|
||||
line-height: 30px;
|
||||
animation: rotation 4s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border: 2px dashed #1890ff;
|
||||
content: '';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.ant-steps-icon {
|
||||
display: inline-block;
|
||||
animation: rotationReverse 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-form-content {
|
||||
padding: 24px;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
.step-form-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
margin-left: -16px;
|
||||
.step-form-content {
|
||||
padding: 24px;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: 0 20px 0 -5px;
|
||||
white-space: nowrap;
|
||||
.step-form-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: 0 20px 0 -5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.ant-steps) {
|
||||
width: calc(100% - 750px);
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-container) {
|
||||
padding: 3px 0 3px 3px;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps) {
|
||||
width: calc(100% - 750px);
|
||||
.step-container {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-container) {
|
||||
padding: 3px 0 3px 3px;
|
||||
.step1 {
|
||||
padding: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-container {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.step1 {
|
||||
padding: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,411 +1,396 @@
|
||||
<template>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
|
||||
<template #title>
|
||||
<div class="step-form-form">
|
||||
<a href="https://fcdma.gdyditc.com/" target="_blank">
|
||||
<DesignLogo />
|
||||
</a>
|
||||
<span>•</span>
|
||||
<span>{{ t('表单设计') }} - {{ t('简易模板') }}</span>
|
||||
<a-steps :current="current" size="mini">
|
||||
<a-step :title="t('基础信息')" />
|
||||
<a-step :title="t('表单设计')" />
|
||||
<a-step :title="t('表单事件')" />
|
||||
<a-step :title="t('完整配置')" />
|
||||
</a-steps>
|
||||
<div class="btn-box">
|
||||
<a-button @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
|
||||
<a-button type="primary" @click="handleStepNext" v-show="current < 3">
|
||||
{{ t('下一步') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleSave" v-show="current === 3">
|
||||
{{ t('保存') }}
|
||||
</a-button>
|
||||
<a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
|
||||
<BasicModal @register="registerModal" v-bind="$attrs" wrapClassName="form-modal">
|
||||
<template #title>
|
||||
<div class="step-form-form">
|
||||
<a href="https://fcdma.gdyditc.com/" target="_blank">
|
||||
<DesignLogo />
|
||||
</a>
|
||||
<span>•</span>
|
||||
<span>{{ t('表单设计') }} - {{ t('简易模板') }}</span>
|
||||
<a-steps :current="current" size="mini">
|
||||
<a-step :title="t('基础信息')" />
|
||||
<a-step :title="t('表单设计')" />
|
||||
<a-step :title="t('表单事件')" />
|
||||
<a-step :title="t('完整配置')" />
|
||||
</a-steps>
|
||||
<div class="btn-box">
|
||||
<a-button @click="handleStepPrev" v-show="current !== 0">{{ t('上一步') }}</a-button>
|
||||
<a-button type="primary" @click="handleStepNext" v-show="current < 3">
|
||||
{{ t('下一步') }}
|
||||
</a-button>
|
||||
<a-button type="primary" @click="handleSave" v-show="current === 3">
|
||||
{{ t('保存') }}
|
||||
</a-button>
|
||||
<a-button type="primary" danger @click="handleClose">{{ t('关闭') }}</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-container">
|
||||
<BasicConfigStep ref="basicConfigStepRef" v-show="current === 0" />
|
||||
<FormDesignStep ref="formDesignStepRef" v-show="current === 1" />
|
||||
<FormEventStep ref="formEventStepRef" v-show="current === 2" />
|
||||
<EntireConfigStep ref="entireConfigStepRef" v-show="current === 3" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="step-container">
|
||||
<BasicConfigStep ref="basicConfigStepRef" v-show="current === 0" />
|
||||
<FormDesignStep ref="formDesignStepRef" v-show="current === 1" />
|
||||
<FormEventStep ref="formEventStepRef" v-show="current === 2" />
|
||||
<EntireConfigStep ref="entireConfigStepRef" v-show="current === 3"/>
|
||||
</div>
|
||||
</BasicModal>
|
||||
<TableNameModal @register="registerTableName" @success="handleEditSuccess" />
|
||||
</BasicModal>
|
||||
<TableNameModal @register="registerTableName" @success="handleEditSuccess" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive, provide, Ref, toRaw, watch, onMounted } from 'vue';
|
||||
import { FormDesignStep, FormEventStep,EntireConfigStep,TableNameModal } from '/@/components/CreateCodeStep';
|
||||
import BasicConfigStep from '../BasicConfigStep.vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { GeneratorConfig, CustomFormConfig } from '/@/model/generator/generatorConfig';
|
||||
import { TableInfo, upperFieldDb } from '/@/components/Designer';
|
||||
import { validateTableName, getMasterInfo } from '/@/api/system/generator';
|
||||
import {
|
||||
addCodeFirstFormTemplate,
|
||||
updateCodeFirstFormTemplate,
|
||||
getFormTemplate,
|
||||
} from '/@/api/form/design';
|
||||
import { FormTypeEnum } from '/@/enums/formtypeEnum';
|
||||
import * as antd from '/@/components/Designer/src/types';
|
||||
import { random } from 'lodash-es';
|
||||
import { noHaveTableAndField } from '/@/components/Designer';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
|
||||
import {ListConfig} from "/@/model/generator/listConfig";
|
||||
import { ref, reactive, provide, Ref, toRaw, watch, onMounted } from 'vue';
|
||||
import { FormDesignStep, FormEventStep, EntireConfigStep, TableNameModal } from '/@/components/CreateCodeStep';
|
||||
import BasicConfigStep from '../BasicConfigStep.vue';
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { GeneratorConfig, CustomFormConfig } from '/@/model/generator/generatorConfig';
|
||||
import { TableInfo, upperFieldDb } from '/@/components/Designer';
|
||||
import { validateTableName, getMasterInfo } from '/@/api/system/generator';
|
||||
import { addCodeFirstFormTemplate, updateCodeFirstFormTemplate, getFormTemplate } from '/@/api/form/design';
|
||||
import { FormTypeEnum } from '/@/enums/formtypeEnum';
|
||||
import * as antd from '/@/components/Designer/src/types';
|
||||
import { random } from 'lodash-es';
|
||||
import { noHaveTableAndField } from '/@/components/Designer';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import DesignLogo from '/@/components/ModalPanel/src/DesignLogo.vue';
|
||||
import { ListConfig } from '/@/model/generator/listConfig';
|
||||
|
||||
const { t } = useI18n();
|
||||
const current = ref(0);
|
||||
const { t } = useI18n();
|
||||
const current = ref(0);
|
||||
|
||||
const basicConfigStepRef = ref();
|
||||
const formDesignStepRef = ref();
|
||||
const formEventStepRef = ref();
|
||||
const entireConfigStepRef = ref();
|
||||
const basicConfigStepRef = ref();
|
||||
const formDesignStepRef = ref();
|
||||
const formEventStepRef = ref();
|
||||
const entireConfigStepRef = ref();
|
||||
|
||||
const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm))); //FormDesignStep -> designer和StructureConfigStep页面使用
|
||||
const mainTableName = ref('table_' + random(10000, 99999));
|
||||
const widgetForm = ref(JSON.parse(JSON.stringify(antd.widgetForm))); //FormDesignStep -> designer和StructureConfigStep页面使用
|
||||
const mainTableName = ref('table_' + random(10000, 99999));
|
||||
|
||||
const tableInfo = ref<TableInfo[]>([]);
|
||||
const isUpdate = ref<boolean>(false);
|
||||
const formId = ref<string>('');
|
||||
const beforeTableNames = ref<string[]>([]);
|
||||
const isFieldUpper = ref<boolean>(false);
|
||||
|
||||
let generatorConfig = reactive<GeneratorConfig>({
|
||||
databaseId: 'master',
|
||||
formJson: {},
|
||||
tableStructureConfigs: [],
|
||||
formEventConfig: {},
|
||||
isDataAuth: false,
|
||||
dataAuthList: [],
|
||||
});
|
||||
const tableInfo = ref<TableInfo[]>([]);
|
||||
const isUpdate = ref<boolean>(false);
|
||||
const formId = ref<string>('');
|
||||
const beforeTableNames = ref<string[]>([]);
|
||||
const isFieldUpper = ref<boolean>(false);
|
||||
|
||||
let customFormConfig = reactive<CustomFormConfig>({
|
||||
name: '',
|
||||
category: '',
|
||||
formDesignType: 2,
|
||||
formType:'',
|
||||
formJson: generatorConfig,
|
||||
remark: '',
|
||||
isChange: false,
|
||||
});
|
||||
|
||||
const [registerTableName, { openModal }] = useModal();
|
||||
|
||||
provide<GeneratorConfig>('generatorConfig', generatorConfig);
|
||||
provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
|
||||
provide<CustomFormConfig>('customFormConfig', customFormConfig);
|
||||
provide<Ref<number>>('current', current); //当前步骤
|
||||
provide<string>('designType', 'template');
|
||||
provide('widgetForm', widgetForm);
|
||||
provide<Ref<string>>('mainTableName', mainTableName);
|
||||
provide<boolean>('isCustomForm', true); //是自定义表单
|
||||
provide<Ref<boolean>>('isFieldUpper', isFieldUpper);
|
||||
|
||||
watch(
|
||||
() => generatorConfig,
|
||||
(val) => {
|
||||
customFormConfig.formJson = val;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
},
|
||||
);
|
||||
const emits = defineEmits(['success', 'register', 'close']);
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await getMasterInfo();
|
||||
isFieldUpper.value = upperFieldDb.includes(res?.dbType || '');
|
||||
mainTableName.value = isFieldUpper.value
|
||||
? mainTableName.value.toUpperCase()
|
||||
: mainTableName.value;
|
||||
});
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
isUpdate.value = !!data.isUpdate;
|
||||
formId.value = data.id;
|
||||
customFormConfig.isChange = isUpdate.value;
|
||||
if (formId.value) {
|
||||
getFormTemplateInfo();
|
||||
}
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
canFullscreen: false,
|
||||
defaultFullscreen: true,
|
||||
destroyOnClose: true,
|
||||
draggable: false,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
footer: null,
|
||||
closable: false,
|
||||
let generatorConfig = reactive<GeneratorConfig>({
|
||||
databaseId: 'master',
|
||||
formJson: {},
|
||||
tableStructureConfigs: [],
|
||||
formEventConfig: {},
|
||||
isDataAuth: false,
|
||||
dataAuthList: []
|
||||
});
|
||||
});
|
||||
|
||||
async function getFormTemplateInfo() {
|
||||
const data = await getFormTemplate(formId.value);
|
||||
customFormConfig.name = data.name;
|
||||
customFormConfig.category = data.category;
|
||||
customFormConfig.formDesignType = data.formDesignType;
|
||||
customFormConfig.formJson = JSON.parse(data.formJson);
|
||||
customFormConfig.listConfig = JSON.parse(data.listConfig)||{} as ListConfig;
|
||||
customFormConfig.renderConfig =data.renderConfig;
|
||||
customFormConfig.remark = data.remark;
|
||||
let customFormConfig = reactive<CustomFormConfig>({
|
||||
name: '',
|
||||
category: '',
|
||||
formDesignType: 2,
|
||||
formType: '',
|
||||
formJson: generatorConfig,
|
||||
remark: '',
|
||||
isChange: false
|
||||
});
|
||||
|
||||
const { formJson,listConfig,renderConfig } = customFormConfig;
|
||||
const [registerTableName, { openModal }] = useModal();
|
||||
|
||||
generatorConfig.databaseId = formJson.databaseId;
|
||||
generatorConfig.isDataAuth = formJson.isDataAuth;
|
||||
generatorConfig.dataAuthList = formJson.dataAuthList;
|
||||
generatorConfig.tableStructureConfigs = formJson.tableStructureConfigs;
|
||||
generatorConfig.formJson = formJson.formJson;
|
||||
generatorConfig.listConfig = listConfig;
|
||||
generatorConfig.renderConfig = renderConfig;
|
||||
generatorConfig.formEventConfig = formJson.formEventConfig!;
|
||||
generatorConfig.formJson.list = generatorConfig.formJson.list.filter(
|
||||
(x) => x.type !== 'hiddenComponent',
|
||||
provide<GeneratorConfig>('generatorConfig', generatorConfig);
|
||||
provide<Ref<TableInfo[]>>('tableInfo', tableInfo);
|
||||
provide<CustomFormConfig>('customFormConfig', customFormConfig);
|
||||
provide<Ref<number>>('current', current); //当前步骤
|
||||
provide<string>('designType', 'template');
|
||||
provide('widgetForm', widgetForm);
|
||||
provide<Ref<string>>('mainTableName', mainTableName);
|
||||
provide<boolean>('isCustomForm', true); //是自定义表单
|
||||
provide<Ref<boolean>>('isFieldUpper', isFieldUpper);
|
||||
|
||||
watch(
|
||||
() => generatorConfig,
|
||||
(val) => {
|
||||
customFormConfig.formJson = val;
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
);
|
||||
beforeTableNames.value = generatorConfig.tableStructureConfigs?.map((x) => x.tableName) || [];
|
||||
getMainTableFirst(generatorConfig.formJson.list);
|
||||
const emits = defineEmits(['success', 'register', 'close']);
|
||||
|
||||
widgetForm.value = generatorConfig.formJson;
|
||||
|
||||
basicConfigStepRef.value.setFieldsValue({
|
||||
name: customFormConfig?.name,
|
||||
category: customFormConfig?.category,
|
||||
remark: customFormConfig?.remark,
|
||||
databaseId: generatorConfig.databaseId,
|
||||
isDataAuth: generatorConfig.isDataAuth,
|
||||
dataAuthList: generatorConfig.dataAuthList,
|
||||
onMounted(async () => {
|
||||
const res = await getMasterInfo();
|
||||
isFieldUpper.value = upperFieldDb.includes(res?.dbType || '');
|
||||
mainTableName.value = isFieldUpper.value ? mainTableName.value.toUpperCase() : mainTableName.value;
|
||||
});
|
||||
}
|
||||
|
||||
function getMainTableFirst(list) {
|
||||
list.some((x) => {
|
||||
if (['tab', 'grid', 'card'].includes(x.type)) {
|
||||
for (const child of x.layout!) {
|
||||
return getMainTableFirst(child.list);
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
|
||||
isUpdate.value = !!data.isUpdate;
|
||||
formId.value = data.id;
|
||||
customFormConfig.isChange = isUpdate.value;
|
||||
if (formId.value) {
|
||||
getFormTemplateInfo();
|
||||
}
|
||||
} else if (x.type === 'table-layout') {
|
||||
for (const child of x.layout!) {
|
||||
for (const el of child.list!) {
|
||||
return getMainTableFirst(el.children);
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
x.type !== 'form' &&
|
||||
x.type !== 'one-for-one' &&
|
||||
!noHaveTableAndField.includes(x.type)
|
||||
) {
|
||||
mainTableName.value = x.bindTable;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
closeModal();
|
||||
emits('close');
|
||||
}
|
||||
|
||||
//上一步
|
||||
function handleStepPrev() {
|
||||
current.value--;
|
||||
if(current.value==1){
|
||||
widgetForm.value = generatorConfig.formJson;
|
||||
}
|
||||
}
|
||||
//下一步
|
||||
async function handleStepNext() {
|
||||
const isOk = await stepValidate[current.value]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
current.value++;
|
||||
|
||||
if(current.value === 3){
|
||||
entireConfigStepRef.value.initStep();
|
||||
}
|
||||
}
|
||||
async function handleSave() {
|
||||
const isOk = await stepValidate[3]();
|
||||
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
const tableNames: string[] = generatorConfig.tableStructureConfigs!.map((x) => x.tableName);
|
||||
|
||||
const testTableNames = tableNames.filter((x) => {
|
||||
return !beforeTableNames.value.includes(x);
|
||||
});
|
||||
|
||||
if (!isUpdate.value || (isUpdate.value && testTableNames.length)) {
|
||||
const names = isUpdate.value ? testTableNames.toString() : tableNames.toString();
|
||||
validateName(names);
|
||||
} else {
|
||||
submitTemplate();
|
||||
}
|
||||
}
|
||||
|
||||
const validateName = (tableNames) => {
|
||||
const params = {
|
||||
id: 'master',
|
||||
tableNames,
|
||||
};
|
||||
validateTableName(params, 'none')
|
||||
.then(() => {
|
||||
submitTemplate();
|
||||
})
|
||||
.catch((err) => {
|
||||
if (!err) return;
|
||||
const info = err.message.split('[')[1];
|
||||
const existTableName = info.substring(0, info.length - 1).split(',');
|
||||
const newTableName: string[] = [];
|
||||
generatorConfig?.tableStructureConfigs!.map((table) => {
|
||||
const tableName = 'table_' + random(10000, 99999);
|
||||
if (existTableName.includes(table.tableName)) {
|
||||
table.tableName = tableName;
|
||||
}
|
||||
newTableName.push(tableName);
|
||||
generatorConfig.formJson.list.map((component) => {
|
||||
editTableName(component, existTableName, tableName);
|
||||
});
|
||||
setModalProps({
|
||||
confirmLoading: false,
|
||||
canFullscreen: false,
|
||||
defaultFullscreen: true,
|
||||
destroyOnClose: true,
|
||||
draggable: false,
|
||||
showOkBtn: false,
|
||||
showCancelBtn: false,
|
||||
footer: null,
|
||||
closable: false
|
||||
});
|
||||
validateName(newTableName.toString());
|
||||
});
|
||||
};
|
||||
const editTableName = (component, existTableName, tableName) => {
|
||||
if (existTableName.includes(component.bindTable)) {
|
||||
component.bindTable = tableName;
|
||||
if (component.children || component.layout || component.list) {
|
||||
editTableName(component.children, existTableName, tableName);
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const submitTemplate = async () => {
|
||||
if (
|
||||
generatorConfig.formJson?.hiddenComponent &&
|
||||
generatorConfig.formJson?.hiddenComponent.length
|
||||
) {
|
||||
generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
|
||||
}
|
||||
if (isUpdate.value) {
|
||||
openModal();
|
||||
} else {
|
||||
await addCodeFirstFormTemplate(toRaw(customFormConfig));
|
||||
closeModal();
|
||||
emits('success');
|
||||
emits('close');
|
||||
}
|
||||
};
|
||||
async function getFormTemplateInfo() {
|
||||
const data = await getFormTemplate(formId.value);
|
||||
customFormConfig.name = data.name;
|
||||
customFormConfig.category = data.category;
|
||||
customFormConfig.formDesignType = data.formDesignType;
|
||||
customFormConfig.formJson = JSON.parse(data.formJson);
|
||||
customFormConfig.listConfig = JSON.parse(data.listConfig) || ({} as ListConfig);
|
||||
customFormConfig.renderConfig = data.renderConfig;
|
||||
customFormConfig.remark = data.remark;
|
||||
|
||||
async function handleEditSuccess() {
|
||||
await updateCodeFirstFormTemplate({ id: formId.value, ...toRaw(customFormConfig) });
|
||||
closeModal();
|
||||
emits('success');
|
||||
emits('close');
|
||||
}
|
||||
const { formJson, listConfig, renderConfig } = customFormConfig;
|
||||
|
||||
const stepValidate = {
|
||||
//数据表配置 验证
|
||||
0: () => basicConfigStepRef.value.validateStep(),
|
||||
1: () => formDesignStepRef.value.validateStep(),
|
||||
2: () => formEventStepRef.value.validateStep(),
|
||||
3: () => entireConfigStepRef.value.validateStep(),
|
||||
};
|
||||
generatorConfig.databaseId = formJson.databaseId;
|
||||
generatorConfig.isDataAuth = formJson.isDataAuth;
|
||||
generatorConfig.dataAuthList = formJson.dataAuthList;
|
||||
generatorConfig.tableStructureConfigs = formJson.tableStructureConfigs;
|
||||
generatorConfig.formJson = formJson.formJson;
|
||||
generatorConfig.listConfig = listConfig;
|
||||
generatorConfig.renderConfig = renderConfig;
|
||||
generatorConfig.formEventConfig = formJson.formEventConfig!;
|
||||
generatorConfig.formJson.list = generatorConfig.formJson.list.filter((x) => x.type !== 'hiddenComponent');
|
||||
beforeTableNames.value = generatorConfig.tableStructureConfigs?.map((x) => x.tableName) || [];
|
||||
getMainTableFirst(generatorConfig.formJson.list);
|
||||
|
||||
widgetForm.value = generatorConfig.formJson;
|
||||
|
||||
basicConfigStepRef.value.setFieldsValue({
|
||||
name: customFormConfig?.name,
|
||||
category: customFormConfig?.category,
|
||||
remark: customFormConfig?.remark,
|
||||
databaseId: generatorConfig.databaseId,
|
||||
isDataAuth: generatorConfig.isDataAuth,
|
||||
dataAuthList: generatorConfig.dataAuthList
|
||||
});
|
||||
}
|
||||
|
||||
function getMainTableFirst(list) {
|
||||
list.some((x) => {
|
||||
if (['tab', 'grid', 'card'].includes(x.type)) {
|
||||
for (const child of x.layout!) {
|
||||
return getMainTableFirst(child.list);
|
||||
}
|
||||
} else if (x.type === 'table-layout') {
|
||||
for (const child of x.layout!) {
|
||||
for (const el of child.list!) {
|
||||
return getMainTableFirst(el.children);
|
||||
}
|
||||
}
|
||||
} else if (x.type !== 'form' && x.type !== 'one-for-one' && !noHaveTableAndField.includes(x.type)) {
|
||||
mainTableName.value = x.bindTable;
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
closeModal();
|
||||
emits('close');
|
||||
}
|
||||
|
||||
//上一步
|
||||
function handleStepPrev() {
|
||||
current.value--;
|
||||
if (current.value == 1) {
|
||||
widgetForm.value = generatorConfig.formJson;
|
||||
}
|
||||
}
|
||||
//下一步
|
||||
async function handleStepNext() {
|
||||
const isOk = await stepValidate[current.value]();
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
current.value++;
|
||||
|
||||
if (current.value === 3) {
|
||||
entireConfigStepRef.value.initStep();
|
||||
}
|
||||
}
|
||||
async function handleSave() {
|
||||
const isOk = await stepValidate[3]();
|
||||
|
||||
if (!isOk) {
|
||||
return;
|
||||
}
|
||||
const tableNames: string[] = generatorConfig.tableStructureConfigs!.map((x) => x.tableName);
|
||||
|
||||
const testTableNames = tableNames.filter((x) => {
|
||||
return !beforeTableNames.value.includes(x);
|
||||
});
|
||||
|
||||
if (!isUpdate.value || (isUpdate.value && testTableNames.length)) {
|
||||
const names = isUpdate.value ? testTableNames.toString() : tableNames.toString();
|
||||
validateName(names);
|
||||
} else {
|
||||
submitTemplate();
|
||||
}
|
||||
}
|
||||
|
||||
const validateName = (tableNames) => {
|
||||
const params = {
|
||||
id: 'master',
|
||||
tableNames
|
||||
};
|
||||
validateTableName(params, 'none')
|
||||
.then(() => {
|
||||
submitTemplate();
|
||||
})
|
||||
.catch((err) => {
|
||||
if (!err) return;
|
||||
const info = err.message.split('[')[1];
|
||||
const existTableName = info.substring(0, info.length - 1).split(',');
|
||||
const newTableName: string[] = [];
|
||||
generatorConfig?.tableStructureConfigs!.map((table) => {
|
||||
const tableName = 'table_' + random(10000, 99999);
|
||||
if (existTableName.includes(table.tableName)) {
|
||||
table.tableName = tableName;
|
||||
}
|
||||
newTableName.push(tableName);
|
||||
generatorConfig.formJson.list.map((component) => {
|
||||
editTableName(component, existTableName, tableName);
|
||||
});
|
||||
});
|
||||
validateName(newTableName.toString());
|
||||
});
|
||||
};
|
||||
const editTableName = (component, existTableName, tableName) => {
|
||||
if (existTableName.includes(component.bindTable)) {
|
||||
component.bindTable = tableName;
|
||||
if (component.children || component.layout || component.list) {
|
||||
editTableName(component.children, existTableName, tableName);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const submitTemplate = async () => {
|
||||
if (generatorConfig.formJson?.hiddenComponent && generatorConfig.formJson?.hiddenComponent.length) {
|
||||
generatorConfig.formJson.list.push(...generatorConfig.formJson.hiddenComponent);
|
||||
}
|
||||
if (isUpdate.value) {
|
||||
openModal();
|
||||
} else {
|
||||
await addCodeFirstFormTemplate(toRaw(customFormConfig));
|
||||
closeModal();
|
||||
emits('success');
|
||||
emits('close');
|
||||
}
|
||||
};
|
||||
|
||||
async function handleEditSuccess() {
|
||||
await updateCodeFirstFormTemplate({ id: formId.value, ...toRaw(customFormConfig) });
|
||||
closeModal();
|
||||
emits('success');
|
||||
emits('close');
|
||||
}
|
||||
|
||||
const stepValidate = {
|
||||
//数据表配置 验证
|
||||
0: () => basicConfigStepRef.value.validateStep(),
|
||||
1: () => formDesignStepRef.value.validateStep(),
|
||||
2: () => formEventStepRef.value.validateStep(),
|
||||
3: () => entireConfigStepRef.value.validateStep()
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
@keyframes rotation {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotationReverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes rotationReverse {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
border: 2px solid #fff;
|
||||
line-height: 30px;
|
||||
animation: rotation 4s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border: 2px dashed #1890ff;
|
||||
content: '';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.ant-steps-icon {
|
||||
display: inline-block;
|
||||
animation: rotationReverse 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-process) {
|
||||
.ant-steps-item-icon {
|
||||
border: 2px solid #fff;
|
||||
line-height: 30px;
|
||||
animation: rotation 4s linear infinite;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
border: 2px dashed #1890ff;
|
||||
content: '';
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.ant-steps-icon {
|
||||
display: inline-block;
|
||||
animation: rotationReverse 4s linear infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-form-content {
|
||||
padding: 24px;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
.step-form-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
margin-left: -16px;
|
||||
.step-form-content {
|
||||
padding: 24px;
|
||||
background-color: @component-background;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: 0 20px 0 -5px;
|
||||
white-space: nowrap;
|
||||
.step-form-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-weight: 400;
|
||||
|
||||
a {
|
||||
margin-left: -16px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
margin: 0 20px 0 -5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:deep(.ant-steps) {
|
||||
width: calc(100% - 750px);
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-container) {
|
||||
padding: 3px 0 3px 3px;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.ant-steps) {
|
||||
width: calc(100% - 750px);
|
||||
.step-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:deep(.ant-steps-item-container) {
|
||||
padding: 3px 0 3px 3px;
|
||||
.step1 {
|
||||
padding: 0 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
:deep(.ant-btn) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.step-container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.step1 {
|
||||
padding: 0 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,150 +1,129 @@
|
||||
<template>
|
||||
<PageWrapper dense contentFullHeight fixed-height contentClass="flex">
|
||||
<a-tabs v-model:activeKey="activeKey" class="custom-tab white">
|
||||
<a-tab-pane key="1" tab="零代码表单">
|
||||
<ZeroCodeTypeTabPane ref="zeroCodeTypeTabPaneRef" :dicId="dicId"/>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="生成器表单">
|
||||
<GeneratorTypeTabPane ref="generatorTypeTabPaneRef"/>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
<PageWrapper dense contentFullHeight fixed-height contentClass="flex">
|
||||
<a-tabs v-model:activeKey="activeKey" class="custom-tab white">
|
||||
<a-tab-pane key="1" tab="零代码表单">
|
||||
<ZeroCodeTypeTabPane ref="zeroCodeTypeTabPaneRef" :dicId="dicId" />
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="生成器表单">
|
||||
<GeneratorTypeTabPane ref="generatorTypeTabPaneRef" />
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
||||
<DesignModal @register="registerDesignModal" @success="reload" />
|
||||
<HistoryModal @register="registerHistoryModal" />
|
||||
<CategoryModal title="表单" :dicId="dicId" @register="registerCategoryModal" @success="fetch" />
|
||||
<PreviewModal @register="registerPreviewModal" />
|
||||
<DataFirstModal
|
||||
v-if="state.isShowDataFirst"
|
||||
@register="registerDataFirst"
|
||||
@success="handleSuccess"
|
||||
@close="handleClose('isShowDataFirst')"
|
||||
/>
|
||||
<CodeFirstModal
|
||||
v-if="state.isShowCodeFirst"
|
||||
@register="registerCodeFirst"
|
||||
@success="handleSuccess"
|
||||
@close="handleClose('isShowCodeFirst')"
|
||||
/>
|
||||
<SimpleTemplateModal
|
||||
v-if="state.isShowSimpleTemplate"
|
||||
@register="registerSimpleTemplate"
|
||||
@success="handleSuccess"
|
||||
@close="handleClose('isShowSimpleTemplate')"
|
||||
/>
|
||||
<CodeGeneratorModal
|
||||
v-if="state.isShowCodeGenerator"
|
||||
@register="registerCodeGenerator"
|
||||
@close="handleClose('isShowCodeGenerator')"
|
||||
/>
|
||||
</PageWrapper>
|
||||
<DesignModal @register="registerDesignModal" @success="reload" />
|
||||
<HistoryModal @register="registerHistoryModal" />
|
||||
<CategoryModal title="表单" :dicId="dicId" @register="registerCategoryModal" @success="fetch" />
|
||||
<PreviewModal @register="registerPreviewModal" />
|
||||
<DataFirstModal v-if="state.isShowDataFirst" @register="registerDataFirst" @success="handleSuccess" @close="handleClose('isShowDataFirst')" />
|
||||
<CodeFirstModal v-if="state.isShowCodeFirst" @register="registerCodeFirst" @success="handleSuccess" @close="handleClose('isShowCodeFirst')" />
|
||||
<SimpleTemplateModal v-if="state.isShowSimpleTemplate" @register="registerSimpleTemplate" @success="handleSuccess" @close="handleClose('isShowSimpleTemplate')" />
|
||||
<CodeGeneratorModal v-if="state.isShowCodeGenerator" @register="registerCodeGenerator" @close="handleClose('isShowCodeGenerator')" />
|
||||
</PageWrapper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { h, onMounted, ref, createVNode, reactive, computed,provide } from 'vue';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import DesignModal from './components/DesignModal.vue';
|
||||
import HistoryModal from './components/HistoryModal.vue';
|
||||
import { CategoryModal } from '/@/components/CategoryModal';
|
||||
import PreviewModal from './components/PreviewModal.vue';
|
||||
import DataFirstModal from './components/components/DataFirstModal.vue';
|
||||
import CodeFirstModal from './components/components/CodeFirstModal.vue';
|
||||
import SimpleTemplateModal from './components/components/SimpleTemplateModal.vue';
|
||||
import CodeGeneratorModal from './components/CodeGeneratorModal.vue';
|
||||
import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import ZeroCodeTypeTabPane from './tabpanes/ZeroCodeTypeTabPane.vue';
|
||||
import GeneratorTypeTabPane from './tabpanes/GeneratorTypeTabPane.vue';
|
||||
|
||||
const { t } = useI18n();
|
||||
import { h, onMounted, ref, createVNode, reactive, computed, provide } from 'vue';
|
||||
import { PageWrapper } from '/@/components/Page';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useModal } from '/@/components/Modal';
|
||||
import DesignModal from './components/DesignModal.vue';
|
||||
import HistoryModal from './components/HistoryModal.vue';
|
||||
import { CategoryModal } from '/@/components/CategoryModal';
|
||||
import PreviewModal from './components/PreviewModal.vue';
|
||||
import DataFirstModal from './components/components/DataFirstModal.vue';
|
||||
import CodeFirstModal from './components/components/CodeFirstModal.vue';
|
||||
import SimpleTemplateModal from './components/components/SimpleTemplateModal.vue';
|
||||
import CodeGeneratorModal from './components/CodeGeneratorModal.vue';
|
||||
import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import ZeroCodeTypeTabPane from './tabpanes/ZeroCodeTypeTabPane.vue';
|
||||
import GeneratorTypeTabPane from './tabpanes/GeneratorTypeTabPane.vue';
|
||||
|
||||
const dicId = '1419276800524424444';
|
||||
const activeKey = ref('1');
|
||||
const zeroCodeTypeTabPaneRef=ref();
|
||||
const generatorTypeTabPaneRef=ref();
|
||||
const state = reactive({
|
||||
isShowDataFirst: true,
|
||||
isShowCodeFirst: true,
|
||||
isShowSimpleTemplate: true,
|
||||
isShowCodeGenerator: true,
|
||||
});
|
||||
|
||||
const { notification } = useMessage();
|
||||
const formType=ref();
|
||||
const { t } = useI18n();
|
||||
|
||||
const [registerDesignModal, { openModal: openDesignModal }] = useModal();
|
||||
const [registerHistoryModal, { openModal: openHistoryModal }] = useModal();
|
||||
const [registerCategoryModal, { openModal: openCategoryModal }] = useModal();
|
||||
const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
|
||||
const [registerDataFirst, { openModal: openDataFirstModal }] = useModal();
|
||||
const [registerCodeFirst, { openModal: openCodeFirstModal }] = useModal();
|
||||
const [registerSimpleTemplate, { openModal: openSimpleTemplateModal }] = useModal();
|
||||
const [registerCodeGenerator, { openModal: openCodeGeneratorModal }] = useModal();
|
||||
const dicId = '1419276800524424444';
|
||||
const activeKey = ref('1');
|
||||
const zeroCodeTypeTabPaneRef = ref();
|
||||
const generatorTypeTabPaneRef = ref();
|
||||
const state = reactive({
|
||||
isShowDataFirst: true,
|
||||
isShowCodeFirst: true,
|
||||
isShowSimpleTemplate: true,
|
||||
isShowCodeGenerator: true
|
||||
});
|
||||
|
||||
provide('openDesignModal', openDesignModal);
|
||||
provide('openHistoryModal', openHistoryModal);
|
||||
provide('openCategoryModal', openCategoryModal);
|
||||
provide('openPreviewModal', openPreviewModal);
|
||||
provide('openDataFirstModal', openDataFirstModal);
|
||||
provide('openCodeFirstModal', openCodeFirstModal);
|
||||
provide('openSimpleTemplateModal', openSimpleTemplateModal);
|
||||
provide('openCodeGeneratorModal', openCodeGeneratorModal);
|
||||
const { notification } = useMessage();
|
||||
const formType = ref();
|
||||
|
||||
provide<number>('formType', formType);
|
||||
provide('noticeInfo', noticeInfo);
|
||||
const [registerDesignModal, { openModal: openDesignModal }] = useModal();
|
||||
const [registerHistoryModal, { openModal: openHistoryModal }] = useModal();
|
||||
const [registerCategoryModal, { openModal: openCategoryModal }] = useModal();
|
||||
const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
|
||||
const [registerDataFirst, { openModal: openDataFirstModal }] = useModal();
|
||||
const [registerCodeFirst, { openModal: openCodeFirstModal }] = useModal();
|
||||
const [registerSimpleTemplate, { openModal: openSimpleTemplateModal }] = useModal();
|
||||
const [registerCodeGenerator, { openModal: openCodeGeneratorModal }] = useModal();
|
||||
|
||||
function handleSuccess() {
|
||||
if(activeKey.value=='1'){
|
||||
zeroCodeTypeTabPaneRef.value.reload();
|
||||
}else if(activeKey.value=='2'){
|
||||
generatorTypeTabPaneRef.value.reload();
|
||||
}
|
||||
provide('openDesignModal', openDesignModal);
|
||||
provide('openHistoryModal', openHistoryModal);
|
||||
provide('openCategoryModal', openCategoryModal);
|
||||
provide('openPreviewModal', openPreviewModal);
|
||||
provide('openDataFirstModal', openDataFirstModal);
|
||||
provide('openCodeFirstModal', openCodeFirstModal);
|
||||
provide('openSimpleTemplateModal', openSimpleTemplateModal);
|
||||
provide('openCodeGeneratorModal', openCodeGeneratorModal);
|
||||
|
||||
}
|
||||
provide<number>('formType', formType);
|
||||
provide('noticeInfo', noticeInfo);
|
||||
|
||||
function handleClose(modal) {
|
||||
state[modal] = !state[modal];
|
||||
setTimeout(() => {
|
||||
state[modal] = !state[modal];
|
||||
}, 100);
|
||||
}
|
||||
function handleSuccess() {
|
||||
if (activeKey.value == '1') {
|
||||
zeroCodeTypeTabPaneRef.value.reload();
|
||||
} else if (activeKey.value == '2') {
|
||||
generatorTypeTabPaneRef.value.reload();
|
||||
}
|
||||
}
|
||||
|
||||
function noticeInfo(info: string) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: t(`请先选择要{notice}的数据项`, { notice: info }),
|
||||
}); //提示消息
|
||||
}
|
||||
function handleClose(modal) {
|
||||
state[modal] = !state[modal];
|
||||
setTimeout(() => {
|
||||
state[modal] = !state[modal];
|
||||
}, 100);
|
||||
}
|
||||
|
||||
function noticeInfo(info: string) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: t(`请先选择要{notice}的数据项`, { notice: info })
|
||||
}); //提示消息
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.toolbar-defined {
|
||||
:deep(.ant-btn) {
|
||||
margin-left: 8px;
|
||||
.toolbar-defined {
|
||||
:deep(.ant-btn) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.custom-tab.white){
|
||||
background-color:white!important;
|
||||
}
|
||||
:deep(.ant-tabs-nav){
|
||||
padding:0px 10px!important;
|
||||
}
|
||||
:deep(.custom-tab.white) {
|
||||
background-color: white !important;
|
||||
}
|
||||
:deep(.ant-tabs-nav) {
|
||||
padding: 0px 10px !important;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-content){
|
||||
height: 100%;
|
||||
}
|
||||
:deep(.ant-tabs-content) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// :deep(.ant-col-15) {
|
||||
// flex: 0 0 calc(100% - 185px);
|
||||
// max-width: initial;
|
||||
// }
|
||||
// :deep(.ant-col-15) {
|
||||
// flex: 0 0 calc(100% - 185px);
|
||||
// max-width: initial;
|
||||
// }
|
||||
|
||||
// :deep(.ant-table-wrapper .ant-table-title) {
|
||||
// padding-bottom: 0 !important;
|
||||
// }
|
||||
// :deep(.ant-table-wrapper .ant-table-title) {
|
||||
// padding-bottom: 0 !important;
|
||||
// }
|
||||
|
||||
// :deep(.ant-table-container) {
|
||||
// height: calc(100% - 110px);
|
||||
// }
|
||||
// :deep(.ant-table-container) {
|
||||
// height: calc(100% - 110px);
|
||||
// }
|
||||
</style>
|
||||
|
||||
@ -1,160 +1,142 @@
|
||||
<template>
|
||||
<div style="display:flex;background-color:white;height: 100%">
|
||||
<div
|
||||
class="w-1/3 xl:w-1/4 overflow-hidden bg-white h-full"
|
||||
:style="{ 'border-right': '1px solid #e5e7eb' }"
|
||||
>
|
||||
<BasicTree
|
||||
:title="t('生成器类型')"
|
||||
:clickRowToExpand="true"
|
||||
:treeData="treeData"
|
||||
:fieldNames="{ key: 'id', title: 'name' }"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
<div style="display: flex; background-color: white; height: 100%">
|
||||
<div class="w-1/3 xl:w-1/4 overflow-hidden bg-white h-full" :style="{ 'border-right': '1px solid #e5e7eb' }">
|
||||
<BasicTree :title="t('生成器类型')" :clickRowToExpand="true" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" />
|
||||
</div>
|
||||
<BasicTable @register="registerTable" class="w-2/3 xl:w-3/4">
|
||||
<template #toolbar>
|
||||
<div class="toolbar-defined">
|
||||
<a-button @click="previewForm" v-auth="'form-design:previewForm'">{{
|
||||
t('预览表单')
|
||||
}}</a-button>
|
||||
<a-button @click="queryHistory">{{ t('历史记录') }}</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
auth: 'form-design:edit',
|
||||
onClick: handleEdit.bind(null, record,0),
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #toolbar>
|
||||
<div class="toolbar-defined">
|
||||
<a-button @click="previewForm" v-auth="'form-design:previewForm'">{{ t('预览表单') }}</a-button>
|
||||
<a-button @click="queryHistory">{{ t('历史记录') }}</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
auth: 'form-design:edit',
|
||||
onClick: handleEdit.bind(null, record, 0)
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, onMounted, ref, createVNode, reactive, computed,provide,inject } from 'vue';
|
||||
import { h, onMounted, ref, createVNode, reactive, computed, provide, inject } from 'vue';
|
||||
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
|
||||
import {
|
||||
getFormTemplatePage,
|
||||
deleteFormTemplate,
|
||||
updateFormTemplateStatus,
|
||||
getFormTemplate,
|
||||
} from '/@/api/form/design';
|
||||
import { getFormTemplatePage, deleteFormTemplate, updateFormTemplateStatus, getFormTemplate } from '/@/api/form/design';
|
||||
import { FormTypeEnum } from '/@/enums/formtypeEnum';
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
|
||||
|
||||
const { notification } = useMessage();
|
||||
const { t } = useI18n();
|
||||
|
||||
|
||||
const treeData = ref<TreeItem[]>([
|
||||
{ "id":'0',name:'数据优先模板'},
|
||||
{ "id":'1',name:'界面优先模板'},
|
||||
{ "id":'2',name:'简易模板'}
|
||||
{ id: '0', name: '数据优先模板' },
|
||||
{ id: '1', name: '界面优先模板' },
|
||||
{ id: '2', name: '简易模板' }
|
||||
]);
|
||||
|
||||
|
||||
const selectId = ref('');
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
|
||||
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'keyword',
|
||||
label: t('关键字'),
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: t('请输入关键字'),
|
||||
},
|
||||
},
|
||||
field: 'keyword',
|
||||
label: t('关键字'),
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: t('请输入关键字')
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: t('名称'),
|
||||
align: 'left',
|
||||
dataIndex: 'name',
|
||||
title: t('名称'),
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
dataIndex: 'formDesignType',
|
||||
title: t('模板类型'),
|
||||
width: 120,
|
||||
align: 'left',
|
||||
customRender: ({ record }) => {
|
||||
if(record.formDesignType==0){
|
||||
return "数据优先模板";
|
||||
}else if(record.formDesignType==1){
|
||||
return "界面优先模板";
|
||||
}else if(record.formDesignType==2){
|
||||
return "简易模板";
|
||||
}else{
|
||||
return '';
|
||||
dataIndex: 'formDesignType',
|
||||
title: t('模板类型'),
|
||||
width: 120,
|
||||
align: 'left',
|
||||
customRender: ({ record }) => {
|
||||
if (record.formDesignType == 0) {
|
||||
return '数据优先模板';
|
||||
} else if (record.formDesignType == 1) {
|
||||
return '界面优先模板';
|
||||
} else if (record.formDesignType == 2) {
|
||||
return '简易模板';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
dataIndex: 'createUserName',
|
||||
title: t('创建人'),
|
||||
align: 'left',
|
||||
dataIndex: 'createUserName',
|
||||
title: t('创建人'),
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
dataIndex: 'createDate',
|
||||
title: t('创建时间'),
|
||||
align: 'left',
|
||||
dataIndex: 'createDate',
|
||||
title: t('创建时间'),
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
dataIndex: 'remark',
|
||||
align: 'left',
|
||||
title: t('备注'),
|
||||
},
|
||||
dataIndex: 'remark',
|
||||
align: 'left',
|
||||
title: t('备注')
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const formConfig = {
|
||||
rowProps: {
|
||||
gutter: 16,
|
||||
gutter: 16
|
||||
},
|
||||
schemas: searchFormSchema,
|
||||
fieldMapToTime: [],
|
||||
showResetButton: false,
|
||||
showResetButton: false
|
||||
};
|
||||
|
||||
const [registerTable, { reload:reload, setSelectedRowKeys:setSelectedRowKeys}] = useTable({
|
||||
|
||||
const [registerTable, { reload: reload, setSelectedRowKeys: setSelectedRowKeys }] = useTable({
|
||||
api: getFormTemplatePage,
|
||||
rowKey: 'id',
|
||||
title: '表单列表',
|
||||
columns:columns,
|
||||
columns: columns,
|
||||
formConfig,
|
||||
beforeFetch: (params) => {
|
||||
//发送请求默认新增 左边树结构所选id
|
||||
return { ...params, category: selectId.value, type: FormTypeEnum.SYSTEM_FORM };
|
||||
//发送请求默认新增 左边树结构所选id
|
||||
return { ...params, category: selectId.value, type: FormTypeEnum.SYSTEM_FORM };
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
width: 80,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
},
|
||||
rowSelection: {
|
||||
onChange: onSelectChange,
|
||||
onChange: onSelectChange
|
||||
},
|
||||
customRow,
|
||||
tableSetting: {
|
||||
size: false,
|
||||
setting: false,
|
||||
},
|
||||
size: false,
|
||||
setting: false
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const formId = computed(() => {
|
||||
return selectedKeys.value && selectedKeys.value.length
|
||||
? selectedKeys.value[selectedKeys.value.length - 1]
|
||||
: '';
|
||||
return selectedKeys.value && selectedKeys.value.length ? selectedKeys.value[selectedKeys.value.length - 1] : '';
|
||||
});
|
||||
|
||||
const openDesignModal = inject('openDesignModal');
|
||||
@ -169,87 +151,83 @@
|
||||
const noticeInfo = inject('noticeInfo');
|
||||
|
||||
function onSelectChange(rowKeys: string[]) {
|
||||
selectedKeys.value = rowKeys;
|
||||
setSelectedRowKeys(selectedKeys.value);
|
||||
selectedKeys.value = rowKeys;
|
||||
setSelectedRowKeys(selectedKeys.value);
|
||||
}
|
||||
|
||||
function customRow(record: Recordable) {
|
||||
return {
|
||||
onClick: () => {
|
||||
let selectedRowKeys = [...selectedKeys.value];
|
||||
if (selectedRowKeys.indexOf(record.id) >= 0) {
|
||||
let index = selectedRowKeys.indexOf(record.id);
|
||||
selectedRowKeys.splice(index, 1);
|
||||
} else {
|
||||
selectedRowKeys.push(record.id);
|
||||
}
|
||||
selectedKeys.value = selectedRowKeys;
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
},
|
||||
};
|
||||
return {
|
||||
onClick: () => {
|
||||
let selectedRowKeys = [...selectedKeys.value];
|
||||
if (selectedRowKeys.indexOf(record.id) >= 0) {
|
||||
let index = selectedRowKeys.indexOf(record.id);
|
||||
selectedRowKeys.splice(index, 1);
|
||||
} else {
|
||||
selectedRowKeys.push(record.id);
|
||||
}
|
||||
selectedKeys.value = selectedRowKeys;
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable,fType:number) {
|
||||
formType.value=fType;
|
||||
switch (record.formDesignType) {
|
||||
case 0:
|
||||
openDataFirstModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
openCodeFirstModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
openSimpleTemplateModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: '该表单缺少模板类型',
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable, fType: number) {
|
||||
formType.value = fType;
|
||||
switch (record.formDesignType) {
|
||||
case 0:
|
||||
openDataFirstModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
openCodeFirstModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
openSimpleTemplateModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true
|
||||
});
|
||||
break;
|
||||
default:
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: '该表单缺少模板类型'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handleSelect(selectIds) {
|
||||
selectId.value = selectIds[0];
|
||||
reload({ searchInfo: { category: selectIds[0] } });
|
||||
selectId.value = selectIds[0];
|
||||
reload({ searchInfo: { category: selectIds[0] } });
|
||||
}
|
||||
|
||||
|
||||
async function previewForm() {
|
||||
if (!formId.value) {
|
||||
noticeInfo('预览');
|
||||
return;
|
||||
}
|
||||
const templateJson = await getFormTemplate(formId.value);
|
||||
openPreviewModal(true, { title: t('预览'), formJson: templateJson.formJson });
|
||||
if (!formId.value) {
|
||||
noticeInfo('预览');
|
||||
return;
|
||||
}
|
||||
const templateJson = await getFormTemplate(formId.value);
|
||||
openPreviewModal(true, { title: t('预览'), formJson: templateJson.formJson });
|
||||
}
|
||||
|
||||
|
||||
async function queryHistory() {
|
||||
if (!formId.value) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: t(`请先选中一行后再查看当前表单历史记录！`),
|
||||
});
|
||||
return;
|
||||
}
|
||||
openHistoryModal(true, { title: t('历史记录'), formId: formId.value });
|
||||
if (!formId.value) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: t(`请先选中一行后再查看当前表单历史记录！`)
|
||||
});
|
||||
return;
|
||||
}
|
||||
openHistoryModal(true, { title: t('历史记录'), formId: formId.value });
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
reload
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
@ -1,69 +1,47 @@
|
||||
<template>
|
||||
<div style="display:flex;background-color:white;height: 100%">
|
||||
<div
|
||||
class="w-1/3 xl:w-1/4 overflow-hidden bg-white h-full"
|
||||
:style="{ 'border-right': '1px solid #e5e7eb' }"
|
||||
>
|
||||
<BasicTree
|
||||
:title="t('表单分类')"
|
||||
:clickRowToExpand="true"
|
||||
:treeData="treeData"
|
||||
:fieldNames="{ key: 'id', title: 'name' }"
|
||||
@select="handleSelect"
|
||||
/>
|
||||
<div style="display: flex; background-color: white; height: 100%">
|
||||
<div class="w-1/3 xl:w-1/4 overflow-hidden bg-white h-full" :style="{ 'border-right': '1px solid #e5e7eb' }">
|
||||
<BasicTree :title="t('表单分类')" :clickRowToExpand="true" :treeData="treeData" :fieldNames="{ key: 'id', title: 'name' }" @select="handleSelect" />
|
||||
</div>
|
||||
<BasicTable @register="registerTable" class="w-2/3 xl:w-3/4">
|
||||
<template #toolbar>
|
||||
<div class="toolbar-defined">
|
||||
<a-button type="primary" @click="handleCreate" v-auth="'form-design:add'">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t('新增') }}
|
||||
</a-button>
|
||||
<a-button @click="handleDelete" v-auth="'form-design:batchDelete'">{{
|
||||
t('批量删除')
|
||||
}}</a-button>
|
||||
<a-button @click="previewForm" v-auth="'form-design:previewForm'">{{
|
||||
t('预览表单')
|
||||
}}</a-button>
|
||||
<a-button @click="queryHistory">{{ t('历史记录') }}</a-button>
|
||||
<a-button @click="handleCategory" v-auth="'form-design:classifyMGT'">{{
|
||||
t('分类管理')
|
||||
}}</a-button>
|
||||
<a-button @click="handleCodeGenerator" v-auth="'form-design:generatedCode'">{{
|
||||
t('生成代码')
|
||||
}}</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
auth: 'form-design:edit',
|
||||
onClick: handleEdit.bind(null, record,1),
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
auth: 'form-design:delete',
|
||||
color: 'error',
|
||||
onClick: handleDelete.bind(null, record),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
<template #toolbar>
|
||||
<div class="toolbar-defined">
|
||||
<a-button type="primary" @click="handleCreate" v-auth="'form-design:add'">
|
||||
<template #icon><PlusOutlined /></template>
|
||||
{{ t('新增') }}
|
||||
</a-button>
|
||||
<a-button @click="handleDelete" v-auth="'form-design:batchDelete'">{{ t('批量删除') }}</a-button>
|
||||
<a-button @click="previewForm" v-auth="'form-design:previewForm'">{{ t('预览表单') }}</a-button>
|
||||
<a-button @click="queryHistory">{{ t('历史记录') }}</a-button>
|
||||
<a-button @click="handleCategory" v-auth="'form-design:classifyMGT'">{{ t('分类管理') }}</a-button>
|
||||
<a-button @click="handleCodeGenerator" v-auth="'form-design:generatedCode'">{{ t('生成代码') }}</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<template #action="{ record }">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
icon: 'clarity:note-edit-line',
|
||||
auth: 'form-design:edit',
|
||||
onClick: handleEdit.bind(null, record, 1)
|
||||
},
|
||||
{
|
||||
icon: 'ant-design:delete-outlined',
|
||||
auth: 'form-design:delete',
|
||||
color: 'error',
|
||||
onClick: handleDelete.bind(null, record)
|
||||
}
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { h, onMounted, ref, createVNode, reactive, computed,provide,inject } from 'vue';
|
||||
import { h, onMounted, ref, createVNode, reactive, computed, provide, inject } from 'vue';
|
||||
import { BasicTable, useTable, TableAction, FormSchema, BasicColumn } from '/@/components/Table';
|
||||
import {
|
||||
getFormTemplatePage,
|
||||
deleteFormTemplate,
|
||||
updateFormTemplateStatus,
|
||||
getFormTemplate,
|
||||
} from '/@/api/form/design';
|
||||
import { getFormTemplatePage, deleteFormTemplate, updateFormTemplateStatus, getFormTemplate } from '/@/api/form/design';
|
||||
import { BasicTree, TreeItem } from '/@/components/Tree';
|
||||
import { FormTypeEnum } from '/@/enums/formtypeEnum';
|
||||
import { useMessage } from '/@/hooks/web/useMessage';
|
||||
@ -71,136 +49,131 @@
|
||||
import { Switch, Modal } from 'ant-design-vue';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
dicId:String
|
||||
})
|
||||
|
||||
|
||||
dicId: String
|
||||
});
|
||||
|
||||
const { notification } = useMessage();
|
||||
const { t } = useI18n();
|
||||
|
||||
|
||||
const treeData = ref<TreeItem[]>([]);
|
||||
const selectId = ref('');
|
||||
const selectedKeys = ref<string[]>([]);
|
||||
|
||||
|
||||
const searchFormSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'keyword',
|
||||
label: t('关键字'),
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: t('请输入关键字'),
|
||||
},
|
||||
},
|
||||
{
|
||||
field: 'keyword',
|
||||
label: t('关键字'),
|
||||
component: 'Input',
|
||||
componentProps: {
|
||||
placeholder: t('请输入关键字')
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const columns: BasicColumn[] = [
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: t('名称'),
|
||||
align: 'left',
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'categoryName',
|
||||
title: t('分类'),
|
||||
align: 'left',
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'enabledMark',
|
||||
title: t('状态'),
|
||||
width: 120,
|
||||
align: 'left',
|
||||
customRender: ({ record }) => {
|
||||
if (!Reflect.has(record, 'pendingStatus')) {
|
||||
record.pendingStatus = false;
|
||||
}
|
||||
return h(Switch, {
|
||||
checked: record.enabledMark === 1,
|
||||
checkedChildren: t('已启用'),
|
||||
unCheckedChildren: t('已禁用'),
|
||||
loading: record.pendingStatus,
|
||||
onChange(checked: boolean) {
|
||||
record.pendingStatus = true;
|
||||
const newStatus = checked ? 1 : 0;
|
||||
const { createMessage } = useMessage();
|
||||
updateFormTemplateStatus(record.id, newStatus)
|
||||
.then(() => {
|
||||
record.enabledMark = newStatus;
|
||||
createMessage.success(t('已成功修改状态'));
|
||||
})
|
||||
.catch(() => {
|
||||
createMessage.error(t('修改状态失败'));
|
||||
})
|
||||
.finally(() => {
|
||||
record.pendingStatus = false;
|
||||
});
|
||||
},
|
||||
});
|
||||
{
|
||||
dataIndex: 'name',
|
||||
title: t('名称'),
|
||||
align: 'left'
|
||||
},
|
||||
},
|
||||
{
|
||||
dataIndex: 'createUserName',
|
||||
title: t('创建人'),
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
dataIndex: 'createDate',
|
||||
title: t('创建时间'),
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
dataIndex: 'remark',
|
||||
align: 'left',
|
||||
title: t('备注'),
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'categoryName',
|
||||
title: t('分类'),
|
||||
align: 'left'
|
||||
},
|
||||
|
||||
{
|
||||
dataIndex: 'enabledMark',
|
||||
title: t('状态'),
|
||||
width: 120,
|
||||
align: 'left',
|
||||
customRender: ({ record }) => {
|
||||
if (!Reflect.has(record, 'pendingStatus')) {
|
||||
record.pendingStatus = false;
|
||||
}
|
||||
return h(Switch, {
|
||||
checked: record.enabledMark === 1,
|
||||
checkedChildren: t('已启用'),
|
||||
unCheckedChildren: t('已禁用'),
|
||||
loading: record.pendingStatus,
|
||||
onChange(checked: boolean) {
|
||||
record.pendingStatus = true;
|
||||
const newStatus = checked ? 1 : 0;
|
||||
const { createMessage } = useMessage();
|
||||
updateFormTemplateStatus(record.id, newStatus)
|
||||
.then(() => {
|
||||
record.enabledMark = newStatus;
|
||||
createMessage.success(t('已成功修改状态'));
|
||||
})
|
||||
.catch(() => {
|
||||
createMessage.error(t('修改状态失败'));
|
||||
})
|
||||
.finally(() => {
|
||||
record.pendingStatus = false;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: 'createUserName',
|
||||
title: t('创建人'),
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
dataIndex: 'createDate',
|
||||
title: t('创建时间'),
|
||||
align: 'left'
|
||||
},
|
||||
{
|
||||
dataIndex: 'remark',
|
||||
align: 'left',
|
||||
title: t('备注')
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const formConfig = {
|
||||
rowProps: {
|
||||
gutter: 16,
|
||||
},
|
||||
schemas: searchFormSchema,
|
||||
fieldMapToTime: [],
|
||||
showResetButton: false,
|
||||
rowProps: {
|
||||
gutter: 16
|
||||
},
|
||||
schemas: searchFormSchema,
|
||||
fieldMapToTime: [],
|
||||
showResetButton: false
|
||||
};
|
||||
|
||||
|
||||
const [registerTable, { reload, setSelectedRowKeys }] = useTable({
|
||||
api: getFormTemplatePage,
|
||||
rowKey: 'id',
|
||||
title: '表单列表',
|
||||
columns,
|
||||
formConfig,
|
||||
beforeFetch: (params) => {
|
||||
//发送请求默认新增 左边树结构所选id
|
||||
return { ...params, category: selectId.value, type: FormTypeEnum.CUSTOM_FORM };
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' },
|
||||
},
|
||||
rowSelection: {
|
||||
onChange: onSelectChange,
|
||||
},
|
||||
customRow,
|
||||
tableSetting: {
|
||||
size: false,
|
||||
setting: false,
|
||||
},
|
||||
api: getFormTemplatePage,
|
||||
rowKey: 'id',
|
||||
title: '表单列表',
|
||||
columns,
|
||||
formConfig,
|
||||
beforeFetch: (params) => {
|
||||
//发送请求默认新增 左边树结构所选id
|
||||
return { ...params, category: selectId.value, type: FormTypeEnum.CUSTOM_FORM };
|
||||
},
|
||||
useSearchForm: true,
|
||||
showTableSetting: true,
|
||||
striped: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: t('操作'),
|
||||
dataIndex: 'action',
|
||||
slots: { customRender: 'action' }
|
||||
},
|
||||
rowSelection: {
|
||||
onChange: onSelectChange
|
||||
},
|
||||
customRow,
|
||||
tableSetting: {
|
||||
size: false,
|
||||
setting: false
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const formId = computed(() => {
|
||||
return selectedKeys.value && selectedKeys.value.length
|
||||
? selectedKeys.value[selectedKeys.value.length - 1]
|
||||
: '';
|
||||
return selectedKeys.value && selectedKeys.value.length ? selectedKeys.value[selectedKeys.value.length - 1] : '';
|
||||
});
|
||||
|
||||
const openDesignModal = inject('openDesignModal');
|
||||
@ -213,92 +186,91 @@
|
||||
const openCodeGeneratorModal = inject('openCodeGeneratorModal');
|
||||
const formType = inject('formType');
|
||||
const noticeInfo = inject('noticeInfo');
|
||||
|
||||
|
||||
function onSelectChange(rowKeys: string[]) {
|
||||
selectedKeys.value = rowKeys;
|
||||
setSelectedRowKeys(selectedKeys.value);
|
||||
selectedKeys.value = rowKeys;
|
||||
setSelectedRowKeys(selectedKeys.value);
|
||||
}
|
||||
|
||||
|
||||
function customRow(record: Recordable) {
|
||||
return {
|
||||
onClick: () => {
|
||||
let selectedRowKeys = [...selectedKeys.value];
|
||||
if (selectedRowKeys.indexOf(record.id) >= 0) {
|
||||
let index = selectedRowKeys.indexOf(record.id);
|
||||
selectedRowKeys.splice(index, 1);
|
||||
} else {
|
||||
selectedRowKeys.push(record.id);
|
||||
}
|
||||
selectedKeys.value = selectedRowKeys;
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
},
|
||||
};
|
||||
return {
|
||||
onClick: () => {
|
||||
let selectedRowKeys = [...selectedKeys.value];
|
||||
if (selectedRowKeys.indexOf(record.id) >= 0) {
|
||||
let index = selectedRowKeys.indexOf(record.id);
|
||||
selectedRowKeys.splice(index, 1);
|
||||
} else {
|
||||
selectedRowKeys.push(record.id);
|
||||
}
|
||||
selectedKeys.value = selectedRowKeys;
|
||||
setSelectedRowKeys(selectedRowKeys);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function handleCreate() {
|
||||
openDesignModal(true, {
|
||||
title: t('添加表单'),
|
||||
});
|
||||
openDesignModal(true, {
|
||||
title: t('添加表单')
|
||||
});
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable,fType:number) {
|
||||
formType.value=fType;
|
||||
switch (record.formDesignType) {
|
||||
case 0:
|
||||
openDataFirstModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
openCodeFirstModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
openSimpleTemplateModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: '该表单缺少模板类型',
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function handleEdit(record: Recordable, fType: number) {
|
||||
formType.value = fType;
|
||||
switch (record.formDesignType) {
|
||||
case 0:
|
||||
openDataFirstModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true
|
||||
});
|
||||
break;
|
||||
case 1:
|
||||
openCodeFirstModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true
|
||||
});
|
||||
break;
|
||||
case 2:
|
||||
openSimpleTemplateModal(true, {
|
||||
id: record.id,
|
||||
isUpdate: true
|
||||
});
|
||||
break;
|
||||
default:
|
||||
notification.error({
|
||||
message: t('提示'),
|
||||
description: '该表单缺少模板类型'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function handleDelete(record: Recordable = {}) {
|
||||
const ids = record.id ? [record.id] : selectedKeys.value;
|
||||
if (!ids.length) {
|
||||
noticeInfo('删除');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: t('提示'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: t('确定要删除所选项吗？'),
|
||||
onOk() {
|
||||
deleteFormTemplate(ids).then(() => {
|
||||
reload();
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('删除成功'),
|
||||
});
|
||||
});
|
||||
},
|
||||
onCancel() {},
|
||||
okText: t('确认'),
|
||||
cancelText: t('取消'),
|
||||
});
|
||||
const ids = record.id ? [record.id] : selectedKeys.value;
|
||||
if (!ids.length) {
|
||||
noticeInfo('删除');
|
||||
return;
|
||||
}
|
||||
Modal.confirm({
|
||||
title: t('提示'),
|
||||
icon: createVNode(ExclamationCircleOutlined),
|
||||
content: t('确定要删除所选项吗？'),
|
||||
onOk() {
|
||||
deleteFormTemplate(ids).then(() => {
|
||||
reload();
|
||||
notification.success({
|
||||
message: t('提示'),
|
||||
description: t('删除成功')
|
||||
});
|
||||
});
|
||||
},
|
||||
onCancel() {},
|
||||
okText: t('确认'),
|
||||
cancelText: t('取消')
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function handleSelect(selectIds) {
|
||||
selectId.value = selectIds[0];
|
||||
reload({ searchInfo: { category: selectIds[0] } });
|
||||
selectId.value = selectIds[0];
|
||||
reload({ searchInfo: { category: selectIds[0] } });
|
||||
}
|
||||
|
||||
function handleCodeGenerator() {
|
||||
@ -308,39 +280,37 @@
|
||||
}
|
||||
openCodeGeneratorModal(true, { formId: formId.value });
|
||||
}
|
||||
|
||||
|
||||
async function previewForm() {
|
||||
if (!formId.value) {
|
||||
noticeInfo('预览');
|
||||
return;
|
||||
}
|
||||
const templateJson = await getFormTemplate(formId.value);
|
||||
openPreviewModal(true, { title: t('预览'), formJson: templateJson.formJson });
|
||||
if (!formId.value) {
|
||||
noticeInfo('预览');
|
||||
return;
|
||||
}
|
||||
const templateJson = await getFormTemplate(formId.value);
|
||||
openPreviewModal(true, { title: t('预览'), formJson: templateJson.formJson });
|
||||
}
|
||||
|
||||
|
||||
async function queryHistory() {
|
||||
if (!formId.value) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: t(`请先选中一行后再查看当前表单历史记录！`),
|
||||
});
|
||||
return;
|
||||
}
|
||||
openHistoryModal(true, { title: t('历史记录'), formId: formId.value });
|
||||
if (!formId.value) {
|
||||
notification.warning({
|
||||
message: t('提示'),
|
||||
description: t(`请先选中一行后再查看当前表单历史记录！`)
|
||||
});
|
||||
return;
|
||||
}
|
||||
openHistoryModal(true, { title: t('历史记录'), formId: formId.value });
|
||||
}
|
||||
|
||||
async function fetch() {
|
||||
treeData.value = (await getDicDetailList({
|
||||
itemId: props.dicId,
|
||||
})) as unknown as TreeItem[];
|
||||
treeData.value = (await getDicDetailList({
|
||||
itemId: props.dicId
|
||||
})) as unknown as TreeItem[];
|
||||
}
|
||||
|
||||
function handleCategory() {
|
||||
openCategoryModal(true, { title: t('表单分类管理') });
|
||||
}
|
||||
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
@ -350,7 +320,4 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
|
||||
</style>
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user