136 lines
3.3 KiB
Vue
136 lines
3.3 KiB
Vue
<template>
|
|
<div>
|
|
<BasicTable class="w-4/4 xl:w-5/5" @register="registerTable" :searchInfo="searchInfo">
|
|
<template #toolbar>
|
|
<!-- <a-button type="primary" @click="handleAdd">新增</a-button> -->
|
|
</template>
|
|
<template #bodyCell="{ column, record }">
|
|
<template v-if="column.key === 'tifPath'">
|
|
<div @click="copyToClipboard(record.tifPath)">{{record.tifPath}}</div>
|
|
</template>
|
|
<template v-if="column.key === 'action'">
|
|
<TableAction
|
|
:actions="[
|
|
{
|
|
label: '查看',
|
|
onClick: () => {
|
|
handleView(record);
|
|
},
|
|
},
|
|
]"
|
|
/>
|
|
</template>
|
|
</template>
|
|
</BasicTable>
|
|
<a-modal
|
|
class="categories-modal"
|
|
v-model:open="openModal"
|
|
:title="modalData.title"
|
|
:afterClose="clearModal"
|
|
>
|
|
<UseModal
|
|
ref="modalForm"
|
|
:modalData="modalData"
|
|
@closeModal="closeModal"
|
|
@submit="submit"
|
|
/>
|
|
</a-modal>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref, reactive } from 'vue';
|
|
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
|
// 子组件
|
|
import UseModal from './modal/index.vue';
|
|
import { Modal, message } from 'ant-design-vue';
|
|
// ts
|
|
import { searchFormSchema, achievementColumns } from './index.data';
|
|
// api
|
|
import { loadTifTableListData } from '@/api/achievement/index';
|
|
import { useMessage } from '@/hooks/web/useMessage';
|
|
const { createMessage } = useMessage();
|
|
|
|
const modalForm = ref();
|
|
let openModal = ref(false);
|
|
const modalData = reactive({
|
|
title: '',
|
|
data: {},
|
|
type: '',
|
|
});
|
|
|
|
// 表格
|
|
const searchInfo = reactive<Recordable>({});
|
|
const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
|
|
api: loadTifTableListData,
|
|
columns: achievementColumns,
|
|
rowKey: 'id',
|
|
formConfig: {
|
|
labelWidth: 120,
|
|
schemas: searchFormSchema,
|
|
},
|
|
// 序号列
|
|
showIndexColumn: true,
|
|
striped: false,
|
|
useSearchForm: true,
|
|
showTableSetting: true,
|
|
bordered: true,
|
|
actionColumn: {
|
|
width: 100,
|
|
title: '操作',
|
|
dataIndex: 'action',
|
|
},
|
|
handleSearchInfoFn(info) {
|
|
return info;
|
|
},
|
|
});
|
|
const closeModal = () => {
|
|
openModal.value = false;
|
|
};
|
|
const clearModal = () => {
|
|
modalForm.value.clearModalData();
|
|
};
|
|
// 新增-打开窗口
|
|
function handleAdd() {
|
|
modalData.title = "新增"
|
|
openModal.value = true;
|
|
}
|
|
// 查看-打开窗口
|
|
function handleView(record) {
|
|
modalData.data = record;
|
|
modalData.title = "详情"
|
|
openModal.value = true;
|
|
}
|
|
// 编辑-打开窗口
|
|
function handleEdit(record) {
|
|
modalData.data = record;
|
|
modalData.title = "编辑";
|
|
openModal.value = true;
|
|
}
|
|
|
|
// 新增、编辑、删除-提交后刷新
|
|
function submit() {
|
|
clearSelectedRowKeys();
|
|
reload();
|
|
}
|
|
// 复制到剪贴板
|
|
const copyToClipboard = async (record) => {
|
|
try {
|
|
await navigator.clipboard.writeText(record);
|
|
createMessage.success('文本已复制到剪贴板');
|
|
} catch (err) {
|
|
createMessage.error('无法复制文本');
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.categories-modal {
|
|
.ant-modal-footer > button {
|
|
display: none;
|
|
}
|
|
.ant-modal-footer {
|
|
margin-top: 0px;
|
|
border-top: 0px;
|
|
}
|
|
}
|
|
</style>
|