<script lang="ts" setup>
|
import { computed, ref, unref, watch } from 'vue';
|
|
import { createImgPreview } from '@jnpf/ui';
|
|
import { usePreferences } from '@vben/preferences';
|
|
import { Form } from 'ant-design-vue';
|
|
import { signProps } from './props';
|
import SignListModal from './SignListModal.vue';
|
import SignModal from './SignModal.vue';
|
|
defineOptions({ inheritAttrs: false, name: 'JnpfSign' });
|
const props = defineProps(signProps);
|
const emit = defineEmits(['update:value', 'change']);
|
const formItemContext = Form.useInjectFormItemContext();
|
const signModalRef = ref(null);
|
const signListModalRef = ref(null);
|
const innerValue = ref('');
|
|
const { isDark } = usePreferences();
|
const getClass = computed(() => [
|
'jnpf-sign',
|
{
|
[`jnpf-sign--dark`]: unref(isDark),
|
},
|
]);
|
|
watch(
|
() => unref(props.value),
|
(val) => {
|
setValue(val);
|
},
|
{ immediate: true },
|
);
|
|
function setValue(value) {
|
innerValue.value = value;
|
}
|
function openSignModal() {
|
if (props.disabled) return;
|
const signRef = unref(signModalRef) as any;
|
signRef?.openModal();
|
}
|
function openSignListModal() {
|
if (props.disabled) return;
|
const signListRef = unref(signListModalRef) as any;
|
signListRef?.openModal(innerValue.value);
|
}
|
function handleSubmit(value) {
|
innerValue.value = value;
|
emit('update:value', innerValue.value);
|
emit('change', innerValue.value);
|
formItemContext.onFieldChange();
|
}
|
function handlePreview() {
|
if (!innerValue.value) return;
|
const imageList = [innerValue.value];
|
createImgPreview({ imageList });
|
}
|
</script>
|
|
<template>
|
<div :class="getClass">
|
<img v-if="innerValue" :src="innerValue" class="sign-img" @click="handlePreview" />
|
<template v-if="!detailed">
|
<a-dropdown v-if="isInvoke && !disabled" trigger="click">
|
<div :class="{ 'disabled-btn': disabled }" class="sign-tip">
|
<i class="icon-ym icon-ym-signature sign-icon"></i>
|
<span v-if="!innerValue" class="sign-text">{{ signTip }}</span>
|
</div>
|
<template #overlay>
|
<a-menu>
|
<a-menu-item @click="openSignModal">手写签名</a-menu-item>
|
<a-menu-item @click="openSignListModal">调用签名</a-menu-item>
|
</a-menu>
|
</template>
|
</a-dropdown>
|
<div v-else :class="{ 'disabled-btn': disabled }" class="sign-tip" @click="openSignModal">
|
<i class="icon-ym icon-ym-signature sign-icon"></i>
|
<span v-if="!innerValue" class="sign-text">{{ signTip }}</span>
|
</div>
|
</template>
|
<SignModal ref="signModalRef" :is-default="isDefault" :submit-on-confirm="submitOnConfirm" @confirm="handleSubmit" />
|
<SignListModal ref="signListModalRef" @confirm="handleSubmit" />
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.jnpf-sign {
|
display: flex;
|
align-items: center;
|
|
.disabled-btn {
|
cursor: no-drop !important;
|
}
|
|
.sign-img {
|
width: 80px;
|
height: 40px;
|
cursor: pointer;
|
object-fit: contain;
|
}
|
|
.sign-tip {
|
display: flex;
|
align-items: center;
|
height: 40px;
|
font-size: 14px;
|
color: var(--primary-color);
|
cursor: pointer;
|
|
.sign-icon {
|
font-size: 28px;
|
}
|
}
|
|
&--dark {
|
.sign-img {
|
background: #fff;
|
}
|
}
|
}
|
</style>
|
