<script lang="ts" setup>
|
import type { FormInstance } from 'ant-design-vue';
|
|
import { reactive, ref, toRefs } from 'vue';
|
|
import { ModalClose } from '@jnpf/ui/modal';
|
|
import { $t } from '@vben/locales';
|
|
import { globalShareState } from '@vben-core/shared/global-state';
|
|
import { Modal as AModal } from 'ant-design-vue';
|
|
interface State {
|
dataForm: any;
|
options: any[];
|
visible: boolean;
|
}
|
const emit = defineEmits(['register', 'confirm']);
|
defineExpose({ openModal });
|
const { getSignatureListByIds } = globalShareState.getApi();
|
const formElRef = ref<FormInstance>();
|
const state = reactive<State>({
|
dataForm: {
|
innerValue: '',
|
},
|
options: [],
|
visible: false,
|
});
|
const { dataForm, options, visible } = toRefs(state);
|
|
function openModal(data) {
|
state.visible = true;
|
state.dataForm.innerValue = data.value || '';
|
if (!data.ableIds || data.ableIds.length === 0) return;
|
getSignatureListByIds(data.ableIds).then((res) => {
|
const list = res?.data?.list || [];
|
state.options = list.map((o) => ({ fullName: o.fullName, id: o.icon }));
|
});
|
}
|
function handleCancel() {
|
state.visible = false;
|
}
|
async function handleSubmit() {
|
const values = await formElRef.value?.validate();
|
if (!values) return;
|
emit('confirm', values.innerValue || '');
|
handleCancel();
|
}
|
</script>
|
<template>
|
<AModal v-model:open="visible" :keyboard="false" :mask-closable="false" :width="600" centered class="jnpf-signature-modal" title="选择签章">
|
<template #closeIcon>
|
<ModalClose :can-fullscreen="false" @cancel="handleCancel" />
|
</template>
|
<template #footer>
|
<a-button @click="handleCancel">{{ $t('common.cancelText') }}</a-button>
|
<a-button type="primary" @click="handleSubmit">{{ $t('common.okText') }}</a-button>
|
</template>
|
<div class="sign-main">
|
<a-form ref="formElRef" :colon="false" :label-col="{ style: { width: '80px' } }" :model="dataForm">
|
<a-form-item label="电子签章" name="innerValue">
|
<jnpf-select v-model:value="dataForm.innerValue" :options="options" allow-clear show-search />
|
</a-form-item>
|
</a-form>
|
</div>
|
</AModal>
|
</template>
|
<style lang="scss">
|
.jnpf-signature-modal {
|
.ant-modal-body {
|
padding: 40px 50px !important;
|
}
|
}
|
</style>
|
