<script lang="ts" setup>
|
import { nextTick, ref, unref, watch } from 'vue';
|
|
import { ModalClose } from '@jnpf/ui/modal';
|
|
import { $t } from '@vben/locales';
|
import { useUserStore } from '@vben/stores';
|
|
import { globalShareState } from '@vben-core/shared/global-state';
|
|
import { Modal as AModal, message } from 'ant-design-vue';
|
|
import vueEsign from './eSign.vue';
|
|
const props = defineProps({
|
isDefault: { default: 0, type: Number },
|
lineWidth: { default: 3, type: Number },
|
submitOnConfirm: { default: false, type: Boolean },
|
});
|
const emit = defineEmits(['register', 'confirm']);
|
defineExpose({ openModal });
|
const { createSign } = globalShareState.getApi();
|
const hasDrew = ref(false);
|
const esignRef = ref(null);
|
const visible = ref(false);
|
const confirmLoading = ref(false);
|
const userStore = useUserStore();
|
|
watch(
|
() => (getESign() as unknown as Recordable)?.hasDrew,
|
(val) => {
|
hasDrew.value = val;
|
},
|
);
|
|
function openModal() {
|
visible.value = true;
|
confirmLoading.value = false;
|
nextTick(() => {
|
handleReset();
|
});
|
}
|
function handleCancel() {
|
visible.value = false;
|
}
|
function getESign() {
|
const esign = unref(esignRef);
|
if (!esign) return null;
|
return esign;
|
}
|
function handleReset() {
|
hasDrew.value = false;
|
(getESign() as unknown as Recordable).reset();
|
}
|
function handleSubmit() {
|
(getESign() as unknown as Recordable)
|
.generate()
|
.then((res) => {
|
if (!props.submitOnConfirm) {
|
emit('confirm', res);
|
visible.value = false;
|
return;
|
}
|
confirmLoading.value = true;
|
const query = {
|
isDefault: props.isDefault,
|
signImg: res,
|
};
|
createSign(query)
|
.then((res) => {
|
if (props.isDefault == 0) {
|
message.success(res.msg);
|
}
|
if (props.isDefault == 1 || (props.isDefault == 0 && !userStore.getUserInfo?.signImg)) {
|
userStore.setUserInfo({ signImg: query.signImg });
|
}
|
confirmLoading.value = false;
|
visible.value = false;
|
emit('confirm', query.signImg);
|
})
|
.catch(() => {
|
confirmLoading.value = false;
|
});
|
})
|
.catch(() => {
|
message.warning($t('component.jnpf.sign.signPlaceholder'));
|
});
|
}
|
</script>
|
<template>
|
<AModal
|
v-model:open="visible"
|
:keyboard="false"
|
:mask-closable="false"
|
:title="$t('component.jnpf.sign.signPlaceholder')"
|
:width="600"
|
centered
|
class="jnpf-sign-modal">
|
<template #closeIcon>
|
<ModalClose :can-fullscreen="false" @cancel="handleCancel" />
|
</template>
|
<template #footer>
|
<a-button @click="handleReset">{{ $t('common.cleanText') }}</a-button>
|
<a-button :loading="confirmLoading" type="primary" @click="handleSubmit">{{ $t('common.okText') }}</a-button>
|
</template>
|
<div class="sign-main">
|
<vue-esign ref="esignRef" :height="300" :line-width="lineWidth" :width="580" />
|
<div v-show="!hasDrew" class="tip">{{ $t('component.jnpf.sign.operateTip') }}</div>
|
</div>
|
</AModal>
|
</template>
|
<style lang="scss">
|
.dark,
|
.dark[data-theme='custom'],
|
.dark[data-theme='default'] {
|
.jnpf-sign-modal {
|
.sign-main {
|
background-color: #fff;
|
}
|
}
|
}
|
|
.jnpf-sign-modal {
|
.ant-modal-body {
|
padding: 10px !important;
|
}
|
|
.sign-main {
|
position: relative;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
height: 300px;
|
overflow: hidden;
|
background-color: var(--app-content-background);
|
border: 1px solid var(--border-color-base1);
|
|
.tip {
|
position: absolute;
|
top: 0;
|
right: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 300px;
|
font-size: 16px;
|
color: var(--text-color-secondary);
|
text-align: center;
|
pointer-events: none;
|
}
|
}
|
}
|
</style>
|
