<script lang="ts" setup>
|
import { computed, ref, unref, watch } from 'vue';
|
|
import { useGlobSetting } from '@jnpf/hooks';
|
import { createImgPreview } from '@jnpf/ui';
|
|
import { useUserStore } from '@vben/stores';
|
|
import { Form } from 'ant-design-vue';
|
|
import SignatureModal from './SignatureModal.vue';
|
|
defineOptions({ inheritAttrs: false, name: 'JnpfSignature' });
|
const props = defineProps({
|
ableIds: { default: () => [], type: Array },
|
detailed: { default: false, type: Boolean },
|
disabled: { default: false, type: Boolean },
|
signTip: { default: '电子签章', type: String },
|
value: String,
|
});
|
const emit = defineEmits(['update:value', 'change']);
|
const userStore = useUserStore();
|
const globSetting = useGlobSetting();
|
const apiUrl = ref(globSetting.apiURL);
|
const formItemContext = Form.useInjectFormItemContext();
|
const signatureModalRef = ref(null);
|
const innerValue = ref('');
|
|
const getImgUrl = computed<string>(() => {
|
if (!innerValue.value) return '';
|
const url = innerValue.value;
|
const userInfo: any = userStore.getUserInfo || {};
|
const securityKey = userInfo?.securityKey || '';
|
if (!securityKey) return apiUrl.value + url;
|
const realUrl = `${apiUrl.value + url + (url.includes('?') ? '&' : '?')}s=${securityKey}`;
|
return realUrl;
|
});
|
|
watch(
|
() => unref(props.value),
|
(val) => {
|
setValue(val);
|
},
|
{ immediate: true },
|
);
|
|
function setValue(value) {
|
innerValue.value = value;
|
}
|
function openSignModal() {
|
if (props.disabled) return;
|
const signRef = unref(signatureModalRef) as any;
|
const data = { ableIds: props.ableIds, value: innerValue.value };
|
signRef?.openModal(data);
|
}
|
function handleSubmit(value) {
|
innerValue.value = value;
|
emit('update:value', innerValue.value);
|
emit('change', innerValue.value);
|
formItemContext.onFieldChange();
|
}
|
function handlePreview() {
|
if (!innerValue.value) return;
|
createImgPreview({ imageList: [unref(getImgUrl)] });
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-signature">
|
<img v-if="innerValue" :src="getImgUrl" class="sign-img" @click="handlePreview" />
|
<div v-if="!detailed" :class="{ 'disabled-btn': disabled }" class="sign-tip" @click="openSignModal">
|
<i class="icon-ym icon-ym-signature1 sign-icon"></i>
|
<span v-if="!innerValue" class="sign-text">{{ signTip }}</span>
|
</div>
|
<SignatureModal ref="signatureModalRef" @confirm="handleSubmit" />
|
</div>
|
</template>
|
<style lang="scss" scoped>
|
.jnpf-signature {
|
display: flex;
|
align-items: center;
|
|
.disabled-btn {
|
cursor: no-drop !important;
|
}
|
|
.sign-img {
|
width: 40px;
|
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;
|
}
|
}
|
}
|
</style>
|
