{{define "inboundInfoModal"}} {{template "component/inboundInfo"}} <a-modal id="inbound-info-modal" v-model="infoModal.visible" title='{{ i18n "pages.inbounds.details"}}' @ok="infoModal.ok" :closable="true" :mask-closable="true" ok-text='{{ i18n "pages.inbounds.copyLink"}}' cancel-text='{{ i18n "close" }}' :ok-button-props="infoModal.okBtnPros"> <inbound-info :db-inbound="dbInbound" :inbound="inbound"></inbound-info> </a-modal> <script> const infoModal = { visible: false, inbound: new Inbound(), dbInbound: new DBInbound(), clipboard: null, okBtnPros: { attrs: { id: "inbound-info-modal-ok-btn", style: "", }, }, show(dbInbound) { this.inbound = dbInbound.toInbound(); this.dbInbound = new DBInbound(dbInbound); this.visible = true; if (dbInbound.hasLink()) { this.okBtnPros.attrs.style = ""; } else { this.okBtnPros.attrs.style = "display: none"; } if (this.clipboard == null) { infoModalApp.$nextTick(() => { this.clipboard = new ClipboardJS(`#${this.okBtnPros.attrs.id}`, { text: () => this.dbInbound.genLink(), }); this.clipboard.on('success', () => app.$message.success('{{ i18n "copySuccess" }}')); }); } }, close() { infoModal.visible = false; }, }; const infoModalApp = new Vue({ delimiters: ['[[', ']]'], el: '#inbound-info-modal', data: { infoModal, get dbInbound() { return this.infoModal.dbInbound; }, get inbound() { return this.infoModal.inbound; } }, }); </script> {{end}}