index.vue
3.55 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<script lang="ts" setup>
import { BasicForm, useForm } from '/@/components/Form';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { FieldsEnum, schemas, ViewTypeEnum } from './config';
import { DataBoardRecord } from '/@/api/dataBoard/model';
import { Alert, Button, Tooltip } from 'ant-design-vue';
import { ref, unref } from 'vue';
import { nextTick } from 'vue';
import { ModalParamsType } from '/#/utils';
import { useClipboard } from '@vueuse/core';
import { useMessage } from '/@/hooks/web/useMessage';
import { computed } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n';
const props = defineProps<{
shareApi?: (...args: any[]) => Promise<any>;
}>();
const { t } = useI18n();
const loading = ref(false);
const record = ref<DataBoardRecord>({} as unknown as DataBoardRecord);
const link = ref('');
const [register, { closeModal }] = useModalInner(
async (data: ModalParamsType<DataBoardRecord>) => {
const { record: value, href } = data;
record.value = value;
link.value = href;
await nextTick();
setFieldsValue({
[FieldsEnum.IS_SHARE]: value.viewType === ViewTypeEnum.PUBLIC_VIEW,
[FieldsEnum.ACCESS_CREDENTIALS]: value.accessCredentials,
});
}
);
const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
schemas,
showActionButtonGroup: false,
layout: 'inline',
labelWidth: 120,
});
const emit = defineEmits(['register', 'success']);
const handleOpenLink = () => {
window.open(unref(link));
};
const { createMessage } = useMessage();
const handleSubmit = async () => {
try {
loading.value = true;
const value = getFieldsValue();
const { id } = unref(record);
await props?.shareApi?.({ id, ...value });
closeModal();
emit('success');
createMessage.success(t('layout.setting.operatingTitle'));
} finally {
loading.value = false;
}
};
const isPublicState = computed(() => {
return unref(record).viewType === ViewTypeEnum.PUBLIC_VIEW;
});
const { copied, copy } = useClipboard({ legacy: true });
const handleCopy = async () => {
await copy(unref(link));
if (unref(copied)) {
createMessage.success(t('common.copyOk'));
}
};
</script>
<template>
<BasicModal
:title="t('common.shareText')"
@register="register"
@ok="handleSubmit"
:okButtonProps="{ loading }"
>
<Alert class="!mb-4" type="info" :message="t('visual.dataview.shareTitle')" />
<BasicForm @register="registerForm" />
<section>
<div v-if="isPublicState" class="mt-4">
<span> {{ t('visual.dataview.setShare') }} </span>
<Button type="link" class="!px-1" @click="handleOpenLink">
{{ t('common.linkText') }}
</Button>
<span>{{ t('common.accessText') }}:</span>
</div>
<Tooltip v-if="isPublicState" :title="t('common.clickCopyLink')">
<div
class="px-4 py-2 my-2 bg-gray-50 font-semibold tracking-wider text-base cursor-pointer truncate"
@click="handleCopy"
>
<span>{{ link }}</span>
</div>
</Tooltip>
<Alert type="warning">
<template #message>
<span class="font-bold mr-1">{{ t('common.promptText') }}:</span>
<span
>{{ t('visual.dataview.sharePrompt1') }}
<span class="mx-1 font-bold">{{ t('visual.dataview.sharePrompt2') }}</span>
{{ t('visual.dataview.sharePrompt3') }}</span
>
</template>
</Alert>
</section>
</BasicModal>
</template>