<script lang="ts" setup>
|
import { nextTick, onMounted, ref, unref, watch } from 'vue';
|
|
import { useMessage } from '@jnpf/hooks';
|
import { ESign, SignListModal } from '@jnpf/ui';
|
import { buildUUID } from '@jnpf/utils';
|
|
import { useUserStore } from '@vben/stores';
|
|
import { Form } from 'ant-design-vue';
|
|
import { $t } from '#/locales';
|
|
defineProps({
|
lineWidth: { type: Number, default: 3 },
|
isDefault: { type: Number, default: 0 },
|
submitOnConfirm: { type: Boolean, default: false },
|
value: { type: String, default: '' },
|
});
|
const emit = defineEmits(['register', 'update:value', 'change', 'useSignNextChange']);
|
defineExpose({ openModal });
|
const hasDrew = ref(false);
|
const signImg = ref('');
|
const eSignRef = ref(null);
|
const useSignNext = ref(false);
|
const signListModalRef = ref(null);
|
const confirmLoading = ref(false);
|
const formItemContext = Form.useInjectFormItemContext();
|
const { createMessage } = useMessage();
|
const userStore = useUserStore();
|
const userInfo: any = userStore.getUserInfo;
|
|
watch(
|
() => (getESign() as unknown as Recordable)?.hasDrew,
|
(val) => {
|
hasDrew.value = val;
|
},
|
);
|
|
function openModal() {
|
confirmLoading.value = false;
|
nextTick(() => {
|
handleReset();
|
});
|
}
|
function getESign() {
|
const eSign = unref(eSignRef);
|
if (!eSign) return null;
|
return eSign;
|
}
|
function handleReset() {
|
signImg.value = '';
|
emit('update:value', '');
|
emit('change', '', '');
|
nextTick(() => {
|
hasDrew.value = false;
|
(getESign() as unknown as Recordable)?.reset();
|
});
|
}
|
function openSignListModal() {
|
const signListRef = unref(signListModalRef) as any;
|
signListRef?.openModal(signImg.value);
|
}
|
function onConfirm(value, signId) {
|
signImg.value = value;
|
emit('update:value', value);
|
emit('change', value, signId);
|
formItemContext.onFieldChange();
|
}
|
function onDrawEnd() {
|
(getESign() as unknown as Recordable)
|
.generate()
|
.then((res) => {
|
emit('update:value', res);
|
emit('change', res, buildUUID());
|
})
|
.catch(() => {
|
createMessage.warning($t('component.jnpf.sign.signPlaceholder'));
|
});
|
}
|
function onUseSignNextChange() {
|
emit('useSignNextChange', useSignNext.value);
|
}
|
|
onMounted(() => {
|
signImg.value = userInfo.signImg;
|
emit('update:value', signImg.value);
|
emit('change', signImg.value, userInfo.signId);
|
nextTick(() => {
|
if (!signImg.value) handleReset();
|
});
|
});
|
</script>
|
<template>
|
<div class="approval-sign-main">
|
<div class="sign-main">
|
<template v-if="!signImg">
|
<ESign ref="eSignRef" :height="300" :width="580" :line-width="lineWidth" @draw-end="onDrawEnd" />
|
<div class="tip" v-show="!hasDrew">{{ $t('component.jnpf.sign.operateTip') }}</div>
|
</template>
|
<img class="sign-img" :src="signImg" v-else />
|
</div>
|
<div class="sign-btn">
|
<a-checkbox class="left-btn" v-model:checked="useSignNext" @change="onUseSignNextChange">下次继续使用此签名</a-checkbox>
|
<div class="right-btn">
|
<a-button type="link" @click="handleReset">清除签名</a-button>
|
<a-button type="link" @click="openSignListModal">调用签名</a-button>
|
</div>
|
</div>
|
</div>
|
<SignListModal ref="signListModalRef" @confirm="onConfirm" />
|
</template>
|
<style lang="scss">
|
.approval-sign-main {
|
width: 500px;
|
background-color: var(--app-content-background);
|
border: 1px solid var(--border-color-base1);
|
|
.sign-main {
|
position: relative;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
height: 300px;
|
overflow: hidden;
|
|
.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;
|
}
|
}
|
|
.sign-img {
|
width: 100%;
|
height: 100%;
|
object-fit: contain;
|
}
|
|
.sign-btn {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 54px;
|
margin: 0 10px;
|
border-top: 1px solid var(--border-color-base);
|
|
.ant-btn {
|
padding: 4px 5px;
|
}
|
}
|
}
|
</style>
|
