Showing
1 changed file
with
77 additions
and
16 deletions
1 | 1 | <script lang="ts" setup> |
2 | 2 | import { onMounted } from 'vue'; |
3 | - import { BasicModal, useModal } from '/@/components/Modal'; | |
4 | - import { Spin } from 'ant-design-vue'; | |
3 | + import { Spin, Modal, Button, Input, Row, Col } from 'ant-design-vue'; | |
5 | 4 | import { ref } from 'vue'; |
6 | 5 | import { useRoute } from 'vue-router'; |
7 | 6 | import { checkShareAccessToken, sharePageLogin, getShareContent } from '/@/api/sys/share'; |
... | ... | @@ -16,7 +15,9 @@ |
16 | 15 | const contentData = ref<any>(); |
17 | 16 | const canLoadComponent = ref(false); |
18 | 17 | |
19 | - const [register, { openModal }] = useModal(); | |
18 | + const modelVisable = ref(false); | |
19 | + | |
20 | + // const [register, { openModal }] = useModal(); | |
20 | 21 | |
21 | 22 | const [registerForm, { getFieldsValue }] = useForm({ |
22 | 23 | schemas: [ |
... | ... | @@ -24,11 +25,15 @@ |
24 | 25 | field: FieldsEnum.ACCESS_CREDENTIALS, |
25 | 26 | component: 'Input', |
26 | 27 | label: '访问令牌', |
28 | + slot: 'tokenInput', | |
29 | + componentProps: { | |
30 | + placeholder: '请输入访问令牌', | |
31 | + }, | |
27 | 32 | }, |
28 | 33 | ], |
29 | 34 | showActionButtonGroup: false, |
30 | - layout: 'inline', | |
31 | - labelWidth: 100, | |
35 | + layout: 'vertical', | |
36 | + baseColProps: { span: 24 }, | |
32 | 37 | }); |
33 | 38 | |
34 | 39 | const userStore = useUserStore(); |
... | ... | @@ -45,7 +50,7 @@ |
45 | 50 | loading.value = true; |
46 | 51 | const { viewType, id } = params as Partial<ShareRouteParams>; |
47 | 52 | const { data } = await checkShareAccessToken(viewType!, id!); |
48 | - data ? openModal(data) : await getContentData(); | |
53 | + data ? (modelVisable.value = true) : await getContentData(); | |
49 | 54 | }; |
50 | 55 | |
51 | 56 | const getContentLoading = ref(false); |
... | ... | @@ -59,7 +64,8 @@ |
59 | 64 | contentData.value = result; |
60 | 65 | loading.value = false; |
61 | 66 | canLoadComponent.value = true; |
62 | - openModal(false); | |
67 | + // openModal(false); | |
68 | + modelVisable.value = false; | |
63 | 69 | } catch (error) { |
64 | 70 | } finally { |
65 | 71 | getContentLoading.value = false; |
... | ... | @@ -77,15 +83,64 @@ |
77 | 83 | </script> |
78 | 84 | |
79 | 85 | <template> |
80 | - <BasicModal | |
81 | - @register="register" | |
82 | - title="公开" | |
83 | - @ok="handleSubmit" | |
84 | - :showCancelBtn="false" | |
85 | - :okButtonProps="{ loading: getContentLoading }" | |
86 | + <Modal | |
87 | + v-model:visible="modelVisable" | |
88 | + centered | |
89 | + :title="null" | |
90 | + :close-icon="null" | |
91 | + width="350px" | |
92 | + :footer="null" | |
93 | + wrapClassName="share-page-token-modal" | |
86 | 94 | > |
87 | - <BasicForm @register="registerForm" /> | |
88 | - </BasicModal> | |
95 | + <section class="w-full h-full flex flex-col p-8 justify-center items-center"> | |
96 | + <BasicForm @register="registerForm" class="w-full" @keyup.enter="handleSubmit"> | |
97 | + <template #tokenInput="{ field, model }"> | |
98 | + <Input.Group> | |
99 | + <Row> | |
100 | + <Col :span="18"> | |
101 | + <Input v-model:value="model[field]" placeholder="请输入访问令牌" /> | |
102 | + </Col> | |
103 | + <Col :span="6"> | |
104 | + <Button | |
105 | + class="w-full !flex justify-center items-center" | |
106 | + :loading="getContentLoading" | |
107 | + type="primary" | |
108 | + @click="handleSubmit" | |
109 | + > | |
110 | + <svg | |
111 | + t="1682068997810" | |
112 | + class="icon" | |
113 | + viewBox="0 0 1024 1024" | |
114 | + version="1.1" | |
115 | + xmlns="http://www.w3.org/2000/svg" | |
116 | + p-id="79416" | |
117 | + width="24" | |
118 | + height="24" | |
119 | + > | |
120 | + <path | |
121 | + d="M512 928H128c-19.2 0-32-12.8-32-32V128c0-19.2 12.8-32 32-32h384c19.2 0 32 12.8 32 32s-12.8 32-32 32H160v704h352c19.2 0 32 12.8 32 32s-12.8 32-32 32z" | |
122 | + fill="#fff" | |
123 | + p-id="79417" | |
124 | + /> | |
125 | + <path | |
126 | + d="M534.4 736c-9.6 0-16-3.2-22.4-9.6l-192-192c-12.8-12.8-12.8-32 0-44.8l192-192c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L387.2 512l169.6 169.6c12.8 12.8 12.8 32 0 44.8-6.4 6.4-16 9.6-22.4 9.6z" | |
127 | + fill="#fff" | |
128 | + p-id="79418" | |
129 | + /> | |
130 | + <path | |
131 | + d="M896 544H342.4c-19.2 0-32-12.8-32-32s12.8-32 32-32H896c19.2 0 32 12.8 32 32s-12.8 32-32 32z" | |
132 | + fill="#fff" | |
133 | + p-id="79419" | |
134 | + /> | |
135 | + </svg> | |
136 | + </Button> | |
137 | + </Col> | |
138 | + </Row> | |
139 | + </Input.Group> | |
140 | + </template> | |
141 | + </BasicForm> | |
142 | + </section> | |
143 | + </Modal> | |
89 | 144 | <Spin |
90 | 145 | :spinning="loading" |
91 | 146 | tip="正在加载中..." |
... | ... | @@ -96,4 +151,10 @@ |
96 | 151 | </Spin> |
97 | 152 | </template> |
98 | 153 | |
99 | -<style lang="less" scoped></style> | |
154 | +<style lang="less"> | |
155 | + .share-page-token-modal { | |
156 | + .ant-modal-close { | |
157 | + display: none; | |
158 | + } | |
159 | + } | |
160 | +</style> | ... | ... |