<script lang="ts" setup>
|
import { nextTick, reactive, ref, toRefs, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { createPortal, getInfo, updatePortal } from '#/api/onlineDev/portal';
|
import logoImg from '#/assets/images/jnpf.png';
|
import { $t } from '#/locales';
|
import ReleaseModal from '#/views/onlineDev/visualPortal/components/ReleaseModal.vue';
|
|
import PortalDesigner from './components/PortalDesigner.vue';
|
|
interface State {
|
dataForm: any;
|
btnLoading: boolean;
|
saveBtnLoading: boolean;
|
showType: string;
|
formData: any;
|
loading: boolean;
|
isReload: boolean;
|
}
|
const emit = defineEmits(['register', 'reload']);
|
const state = reactive<State>({
|
dataForm: {},
|
btnLoading: false,
|
saveBtnLoading: false,
|
showType: 'pc',
|
formData: null,
|
loading: true,
|
isReload: false,
|
});
|
const { dataForm, formData, btnLoading, saveBtnLoading, showType, loading } = toRefs(state);
|
const portalDesigner = ref();
|
const { createMessage } = useMessage();
|
const [registerModal, { closeModal, changeLoading }] = useModalInner(init);
|
const [registerReleaseModal, { openModal: openReleaseModal }] = useModal();
|
|
function init(data) {
|
state.isReload = false;
|
state.dataForm = data;
|
state.showType = 'pc';
|
state.formData = null;
|
if (state.dataForm.id) initData();
|
}
|
function initData() {
|
changeLoading(true);
|
state.loading = true;
|
getInfo(state.dataForm.id)
|
.then((res) => {
|
state.dataForm = res.data;
|
state.formData = res.data.formData ? JSON.parse(res.data.formData) : null;
|
nextTick(() => {
|
changeLoading(false);
|
state.loading = false;
|
});
|
})
|
.catch(() => {
|
changeLoading(false);
|
state.loading = false;
|
});
|
}
|
function handleSubmit(type?) {
|
(unref(portalDesigner) as any)
|
.getData()
|
.then((res) => {
|
state.formData = res.formData;
|
const query = {
|
...state.dataForm,
|
formData: JSON.stringify(state.formData),
|
};
|
type == 1 ? (state.btnLoading = true) : (state.saveBtnLoading = true);
|
const formMethod = state.dataForm.id ? updatePortal : createPortal;
|
formMethod(query)
|
.then((res) => {
|
state.saveBtnLoading = false;
|
state.btnLoading = false;
|
state.isReload = true;
|
if (type === 1) {
|
nextTick(() => openReleaseModal(true, state.dataForm));
|
} else {
|
createMessage.success(res.msg);
|
}
|
})
|
.catch(() => {
|
state.saveBtnLoading = false;
|
state.btnLoading = false;
|
});
|
})
|
.catch((error) => {
|
error?.message && createMessage.warning(error.message);
|
});
|
}
|
function handleCancel() {
|
closeModal();
|
if (state.isReload) emit('reload');
|
}
|
function onReleaseConfirm() {
|
state.isReload = true;
|
initData();
|
}
|
</script>
|
<template>
|
<BasicModal
|
v-bind="$attrs"
|
@register="registerModal"
|
default-fullscreen
|
:footer="null"
|
:closable="false"
|
:keyboard="false"
|
class="jnpf-basic-portal jnpf-full-modal full-modal designer-modal">
|
<template #title>
|
<div class="jnpf-full-modal-header">
|
<div class="header-title">
|
<img :src="logoImg" class="header-logo" />
|
<span class="header-dot"></span>
|
<a-tooltip :title="dataForm.fullName">
|
<p class="header-txt">{{ dataForm.fullName }}</p>
|
</a-tooltip>
|
</div>
|
<div class="jnpf-device-switch">
|
<div class="jnpf-device-switch-item" :class="{ 'jnpf-device-switch-item--active': showType === 'pc' }" @click="state.showType = 'pc'">
|
<a-tooltip title="PC">
|
<i class="icon-ym icon-ym-pc"></i>
|
</a-tooltip>
|
</div>
|
<div class="jnpf-device-switch-item" :class="{ 'jnpf-device-switch-item--active': showType === 'app' }" @click="state.showType = 'app'">
|
<a-tooltip title="APP">
|
<i class="icon-ym icon-ym-mobile"></i>
|
</a-tooltip>
|
</div>
|
</div>
|
<a-space class="options" :size="10">
|
<a-button shape="round" type="primary" @click="handleSubmit(1)" :loading="btnLoading" :disabled="saveBtnLoading">保存并发布</a-button>
|
<a-button shape="round" type="primary" @click="handleSubmit()" :loading="saveBtnLoading" :disabled="btnLoading">{{ $t('common.saveText') }}</a-button>
|
<a-button shape="round" @click="handleCancel()">{{ $t('common.closeText') }}</a-button>
|
</a-space>
|
</div>
|
</template>
|
<PortalDesigner ref="portalDesigner" :conf="formData" :show-type="showType" v-if="!loading" />
|
</BasicModal>
|
<ReleaseModal @register="registerReleaseModal" @reload="onReleaseConfirm" />
|
</template>
|
<style lang="scss">
|
@use '../style/index.scss' as *;
|
</style>
|
