102 lines
2.4 KiB
Vue
102 lines
2.4 KiB
Vue
<template>
|
|
<div>
|
|
<BasicTable @register="servicesTable">
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'url'">
|
|
<span class="content-full">{{ record.url }}</span>
|
|
</template>
|
|
<template v-if="column.key === 'action'">
|
|
<TableAction
|
|
:actions="[
|
|
{
|
|
label: '复制',
|
|
onClick: () => {
|
|
copyToClipboard(record);
|
|
},
|
|
},
|
|
]"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, defineProps, watch } from 'vue';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
|
import { servicesColumns } from './clound.data';
|
|
|
|
const { createMessage } = useMessage();
|
|
const props = defineProps(['chooseRow']);
|
|
// const chooseRowId = ref(props.chooseRowId);
|
|
|
|
const services = ref([]);
|
|
|
|
// watch(
|
|
// () => chooseRowId.value,
|
|
// () => {
|
|
// let data: any = [];
|
|
// data.push(props.chooseRow);
|
|
// services.value = data;
|
|
// },
|
|
// {
|
|
// immediate: true,
|
|
// deep: true,
|
|
// },
|
|
// );
|
|
|
|
// 服务表格
|
|
const [servicesTable, { setTableData, reload }] = useTable({
|
|
dataSource: services,
|
|
columns: servicesColumns,
|
|
canResize: true,
|
|
useSearchForm: false,
|
|
showTableSetting: false,
|
|
pagination: true,
|
|
bordered: true,
|
|
showIndexColumn: false,
|
|
autoCreateKey: false,
|
|
});
|
|
|
|
// 复制到剪贴板
|
|
const copyToClipboard = async (record) => {
|
|
try {
|
|
await navigator.clipboard.writeText(record.url);
|
|
createMessage.success('文本已复制到剪贴板');
|
|
} catch (err) {
|
|
createMessage.error('无法复制文本');
|
|
}
|
|
};
|
|
|
|
// 设置表格值
|
|
function setServerUrl(chooseRow) {
|
|
let data: any = [];
|
|
if (chooseRow.serverUrl) {
|
|
data.push({ url: chooseRow.serverUrl });
|
|
}
|
|
if (chooseRow.pbfUrl) {
|
|
data.push({ url: chooseRow.pbfUrl });
|
|
}
|
|
services.value = data;
|
|
setTableData(services.value);
|
|
}
|
|
|
|
defineExpose({
|
|
setServerUrl,
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
::v-deep .ant-table-body {
|
|
height: 635px !important;
|
|
}
|
|
|
|
.content-full {
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
overflow-wrap: break-word;
|
|
max-width: 100%;
|
|
display: block;
|
|
}
|
|
</style>
|