<script lang="ts" setup>
|
import { reactive, toRefs } from 'vue';
|
|
import { ModalClose } from '@jnpf/ui/modal';
|
|
import { $t } from '@vben/locales';
|
|
import { globalShareState } from '@vben-core/shared/global-state';
|
|
import { CheckOutlined } from '@ant-design/icons-vue';
|
import { Modal as AModal, message } from 'ant-design-vue';
|
|
interface State {
|
activeKey: string;
|
confirmLoading: boolean;
|
loading: boolean;
|
signList: any[];
|
visible: boolean;
|
}
|
|
const emit = defineEmits(['register', 'confirm']);
|
defineExpose({ openModal });
|
const { getSignList } = globalShareState.getApi();
|
const state = reactive<State>({
|
activeKey: '',
|
confirmLoading: false,
|
loading: false,
|
signList: [],
|
visible: false,
|
});
|
const { activeKey, confirmLoading, loading, signList, visible } = toRefs(state);
|
|
function openModal(val) {
|
state.visible = true;
|
state.confirmLoading = false;
|
state.activeKey = '';
|
getList(val);
|
}
|
function getList(defaultVal) {
|
getSignList().then((res) => {
|
state.signList = res.data || [];
|
if (defaultVal && state.signList.some((item) => item.signImg === defaultVal)) state.activeKey = defaultVal;
|
});
|
}
|
function handleCancel() {
|
state.visible = false;
|
}
|
function handleSubmit() {
|
if (!state.activeKey) {
|
message.warning('请选择签名');
|
return;
|
}
|
const item = state.signList.find((o) => o.signImg === state.activeKey);
|
emit('confirm', state.activeKey, item?.id || '');
|
handleCancel();
|
}
|
</script>
|
<template>
|
<AModal v-model:open="visible" :keyboard="false" :mask-closable="false" :width="600" centered class="jnpf-sign-list-modal" title="个人签名">
|
<template #closeIcon>
|
<ModalClose :can-fullscreen="false" @cancel="handleCancel" />
|
</template>
|
<template #footer>
|
<a-button @click="handleCancel">{{ $t('common.cancelText') }}</a-button>
|
<a-button :loading="confirmLoading" type="primary" @click="handleSubmit">{{ $t('common.okText') }}</a-button>
|
</template>
|
<div class="sign-list-main">
|
<a-row :gutter="20" class="sign-list" v-loading="loading">
|
<a-col v-for="(item, i) in signList" :key="i" :span="6" class="sign-item">
|
<div :class="item.signImg === activeKey ? 'sign-item-main active' : 'sign-item-main'" @click="activeKey = item.signImg">
|
<img :src="item.signImg" alt="" class="sign-img" />
|
<div v-if="item.signImg === activeKey" class="icon-checked">
|
<CheckOutlined />
|
</div>
|
</div>
|
</a-col>
|
</a-row>
|
<jnpf-empty v-if="signList.length === 0" />
|
</div>
|
</AModal>
|
</template>
|
<style lang="scss">
|
.dark,
|
.dark[data-theme='custom'],
|
.dark[data-theme='default'] {
|
.jnpf-sign-list-modal .sign-list .sign-item .sign-item-main {
|
background-color: #fff;
|
}
|
}
|
|
.jnpf-sign-list-modal {
|
.ant-modal-body {
|
padding: 20px !important;
|
}
|
|
.sign-list-main {
|
height: 300px;
|
overflow: hidden auto;
|
}
|
|
.sign-list {
|
.sign-item {
|
margin-bottom: 20px;
|
|
.sign-item-main {
|
position: relative;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 80px;
|
overflow: hidden;
|
cursor: pointer;
|
background-color: #fff;
|
border-radius: 6px;
|
|
.icon-checked {
|
position: absolute;
|
right: -1px;
|
bottom: -1px;
|
display: block;
|
width: 16px;
|
height: 16px;
|
border: 16px solid var(--primary-color);
|
border-top: 16px solid transparent !important;
|
border-left: 16px solid transparent !important;
|
border-bottom-right-radius: 6px;
|
|
.anticon-check {
|
position: absolute;
|
top: -1px;
|
left: -1px;
|
font-size: 14px;
|
color: #fff;
|
}
|
}
|
|
&.active {
|
color: var(--primary-color);
|
border: 1px solid var(--primary-color);
|
box-shadow: 0 0 6px rgb(6 58 108 / 26%);
|
}
|
|
&:hover {
|
.add-button {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
height: 100%;
|
background-color: rgb(157 158 159 / 80%);
|
border-radius: 10px;
|
}
|
}
|
|
.add-button {
|
position: absolute;
|
display: none;
|
}
|
|
.add-icon {
|
font-size: 50px;
|
color: var(--text-color-secondary);
|
}
|
|
.sign-img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
