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> | ... | ... |