<script lang="ts" setup>
|
import { computed, reactive, ref, toRefs, unref } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { BasicModal, useModalInner } from '@jnpf/ui/modal';
|
|
import { InfoCircleFilled } from '@ant-design/icons-vue';
|
|
import { copyVersion, delVersion, getVersionInfo, getVersionList, saveVersion } from '#/api/system/printDev';
|
import logoImg from '#/assets/images/jnpf.png';
|
import { $t } from '#/locales';
|
|
import PrintDesign from './PrintDesign/index.vue';
|
|
interface State {
|
dataForm: any;
|
btnLoading: boolean;
|
saveBtnLoading: boolean;
|
loading: boolean;
|
isReload: boolean;
|
versionVisible: boolean;
|
versionList: any[];
|
currentVersion: any;
|
key: number;
|
}
|
const emit = defineEmits(['register', 'reload']);
|
const state = reactive<State>({
|
dataForm: {},
|
btnLoading: false,
|
saveBtnLoading: false,
|
loading: true,
|
isReload: false,
|
versionVisible: false,
|
versionList: [],
|
currentVersion: {},
|
key: 0,
|
});
|
const { dataForm, btnLoading, saveBtnLoading, loading, versionVisible, versionList, currentVersion } = toRefs(state);
|
const printDesign = ref();
|
const { createMessage } = useMessage();
|
const [registerModal, { closeModal, changeLoading }] = useModalInner(init);
|
|
const getBindValue = computed(() => ({
|
conf: state.dataForm.printTemplate,
|
dataSetList: state.dataForm.dataSetList || [],
|
convertConfig: state.dataForm.convertConfig ? JSON.parse(state.dataForm.convertConfig) : [],
|
globalConfig: state.dataForm.globalConfig,
|
versionState: state.currentVersion?.state,
|
key: state.key,
|
fullName: state.dataForm.fullName,
|
}));
|
|
function init(data) {
|
state.isReload = false;
|
state.dataForm.printTemplate = '';
|
state.dataForm.id = data.id || '';
|
state.dataForm.fullName = data.fullName || '';
|
state.loading = true;
|
changeLoading(true);
|
initData();
|
}
|
function initData(update = true) {
|
getVersionList(state.dataForm.id)
|
.then((res) => {
|
state.versionList = res.data || [];
|
if (!update) return;
|
state.currentVersion = state.versionList[0] || {};
|
initPrintData();
|
})
|
.catch(() => {
|
state.loading = false;
|
changeLoading(false);
|
});
|
}
|
function initPrintData() {
|
if (!state.currentVersion.id) return;
|
changeLoading(true);
|
getVersionInfo(state.currentVersion.id)
|
.then((res) => {
|
state.dataForm = { ...state.dataForm, ...res.data };
|
state.loading = false;
|
changeLoading(false);
|
state.key = Date.now();
|
})
|
.catch(() => {
|
state.loading = false;
|
changeLoading(false);
|
});
|
}
|
function getVersionColor(state) {
|
return state == 0 ? 'rgba(247,171,51,0.9)' : state == 1 ? 'rgba(75, 222, 0, 0.9)' : 'rgba(152,158,178,0.9)';
|
}
|
function getVersionState(state) {
|
return state == 0 ? '设计中' : state == 1 ? '启用中' : '已归档';
|
}
|
function handleAddVersion() {
|
copyVersion(state.currentVersion.id).then((res) => {
|
const currentId = res.data;
|
getVersionList(state.dataForm.id).then((res) => {
|
state.versionList = res.data || [];
|
if (currentId) {
|
const list = state.versionList.filter((o) => o.id == currentId);
|
state.currentVersion = list.length ? list[0] : state.versionList[0];
|
}
|
initPrintData();
|
});
|
});
|
}
|
function handleChangeVersion(item) {
|
if (state.currentVersion.id == item.id) return;
|
state.versionVisible = false;
|
state.currentVersion = item;
|
initPrintData();
|
}
|
function handleDelVersion(id) {
|
delVersion(id).then((res) => {
|
createMessage.success(res.msg);
|
initData(state.currentVersion.id === id);
|
});
|
}
|
function handleSubmit(type = 0) {
|
(unref(printDesign) as any)
|
.getData()
|
.then((res) => {
|
const query = {
|
...state.dataForm,
|
dataSetList: res.dataSetList,
|
convertConfig: res.convertConfig ? JSON.stringify(res.convertConfig) : '',
|
globalConfig: res.globalConfig ? JSON.stringify(res.globalConfig) : '',
|
printTemplate: res?.printTplPanels || '',
|
type,
|
};
|
type == 1 ? (state.btnLoading = true) : (state.saveBtnLoading = true);
|
saveVersion(query)
|
.then((res) => {
|
createMessage.success(res.msg);
|
state.saveBtnLoading = false;
|
state.btnLoading = false;
|
state.isReload = true;
|
if (!type) return;
|
state.currentVersion.state = 1;
|
initData(false);
|
})
|
.catch(() => {
|
state.saveBtnLoading = false;
|
state.btnLoading = false;
|
});
|
})
|
.catch((error) => {
|
error?.message && createMessage.warning(error.message);
|
});
|
}
|
function handleCancel() {
|
closeModal();
|
if (state.isReload) emit('reload');
|
}
|
</script>
|
<template>
|
<BasicModal
|
v-bind="$attrs"
|
@register="registerModal"
|
default-fullscreen
|
:footer="null"
|
:closable="false"
|
:keyboard="false"
|
class="jnpf-full-modal full-modal designer-modal jnpf-basic-print-designer">
|
<template #title>
|
<div class="jnpf-full-modal-header">
|
<div class="header-title !w-auto">
|
<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>
|
<a-popover
|
v-model:open="versionVisible"
|
trigger="click"
|
placement="bottom"
|
overlay-class-name="jnpf-version-popover"
|
arrow-point-at-center
|
destroy-tooltip-on-hide
|
v-if="currentVersion?.id">
|
<template #content>
|
<div class="w-[250px]">
|
<div class="version-list">
|
<div v-for="item in versionList" class="version-item" @click="handleChangeVersion(item)" :key="item.id">
|
<span class="version-badge" :style="{ background: getVersionColor(item.state) }"></span>
|
<span class="version-name">{{ item.fullName }}</span>
|
<span class="version-state" :style="{ background: getVersionColor(item.state) }">{{ getVersionState(item.state) }}</span>
|
<div class="version-delete">
|
<i class="icon-ym icon-ym-app-delete" @click.stop="handleDelVersion(item.id)" v-if="!item.state && versionList.length > 1"></i>
|
</div>
|
</div>
|
</div>
|
<div class="add-btn" @click="handleAddVersion">
|
<a-button type="link" pre-icon="icon-ym icon-ym-btn-add">新增打印版本</a-button>
|
</div>
|
</div>
|
</template>
|
<a-button type="text" class="current-version">
|
<span class="version-badge" :style="{ background: getVersionColor(currentVersion.state) }"></span>{{ currentVersion?.fullName }}
|
<i class="icon-ym icon-ym-unfold font ml-[5px] text-[10px]"></i>
|
</a-button>
|
</a-popover>
|
<div class="version-tip" v-if="currentVersion?.state != 0">
|
<InfoCircleFilled class="icon" />
|
{{ currentVersion?.state == 1 ? '启用中' : '已归档' }}的版本不可修改，请
|
<a-button type="link" class="px-[2px]" @click="handleAddVersion">添加新版本</a-button>
|
</div>
|
</div>
|
<a-space class="options" :size="10">
|
<a-button shape="round" type="primary" @click="handleSubmit(1)" v-if="currentVersion?.state !== 1" :loading="btnLoading" :disabled="saveBtnLoading">
|
{{ currentVersion?.state == 2 ? '启用' : '发布' }}
|
</a-button>
|
<a-button shape="round" type="primary" @click="handleSubmit()" :loading="saveBtnLoading" :disabled="btnLoading" v-if="!currentVersion?.state">
|
{{ $t('common.saveText') }}
|
</a-button>
|
<a-button shape="round" @click="handleCancel()">{{ $t('common.closeText') }}</a-button>
|
</a-space>
|
</div>
|
</template>
|
<PrintDesign ref="printDesign" v-bind="getBindValue" v-if="!loading" />
|
</BasicModal>
|
</template>
|
