<template>
|
<div class="p-4 flex flex-col">
|
<Drawer @register="registerDrawer" @success="handleSuccess" />
|
<div><a-button class="mr-2" type="primary" shape="round" @click="openModal1"> 新建日程 </a-button></div>
|
<Modal @register="register" />
|
<div class="mb-4">
|
<a-button class="mr-2" @click="reloadTable"> 还原 </a-button>
|
<a-button class="mr-2" @click="changeLoading"> 开启loading </a-button>
|
<!-- <a-button class="mr-2" @click="changeColumns"> 更改Columns </a-button>-->
|
<a-button class="mr-2" @click="getColumn"> 获取Columns </a-button>
|
<a-button class="mr-2" @click="getTableData"> 获取表格数据 </a-button>
|
<a-button class="mr-2" @click="getTableRawData"> 获取接口原始数据 </a-button>
|
<a-button class="mr-2" @click="setPaginationInfo"> 跳转到第2页 </a-button>
|
</div>
|
<div class="mb-4">
|
<a-button class="mr-2" @click="getSelectRowList"> 获取选中行 </a-button>
|
<a-button class="mr-2" @click="getSelectRowKeyList"> 获取选中行Key </a-button>
|
<a-button class="mr-2" @click="setSelectedRowKeyList"> 设置选中行 </a-button>
|
<a-button class="mr-2" @click="clearSelect"> 清空选中行 </a-button>
|
<a-button class="mr-2" @click="getPagination"> 获取分页信息 </a-button>
|
</div>
|
<BasicTable
|
@register="registerTable"
|
@row-click="handleRowClick"
|
@edit-end="handleEditEnd"
|
@edit-cancel="handleEditCancel"
|
:beforeEditSubmit="beforeEditSubmit"
|
>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'tags'" >
|
<div @click="handleCellClick">
|
<span class="mr-1" v-for="tag in record.tags">
|
<Tag
|
:key="tag"
|
:color="tag.color"
|
>
|
{{ tag.name }}
|
</Tag>
|
</span>
|
|
<!-- <Dropdown-->
|
<!-- :dropMenuList="getDropMenuList"-->
|
<!-- :trigger="['click']"-->
|
<!-- placement="bottomCenter"-->
|
<!-- overlayClassName="multiple-tabs__dropdown"-->
|
<!-- >-->
|
<!-- <Icon icon="ion:chevron-down"/>-->
|
<!-- </Dropdown>-->
|
</div>
|
</template>
|
<template v-else-if="column.key === 'action'">
|
<TableAction
|
:actions="[
|
{
|
label: '删除',
|
icon: 'ic:outline-delete-outline',
|
onClick: handleDelete.bind(null, record),
|
},
|
]"
|
:dropDownActions="[
|
{
|
label: '启用',
|
popConfirm: {
|
title: '是否启用?',
|
confirm: handleOpen.bind(null, record),
|
},
|
},
|
]"
|
/>
|
</template>
|
</template>
|
</BasicTable>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { ref,} from 'vue';
|
import {
|
BasicTable,
|
ColumnChangeParam,
|
TableAction,
|
useTable
|
} from '@/components/Table';
|
import {getEditCellColumns,getFormConfig} from './tableData';
|
import { useMessage } from '@/hooks/web/useMessage';
|
import { Tag } from 'ant-design-vue';
|
import {cluesListApi} from "@/api/clues/table";
|
import {useModal} from "@/components/Modal";
|
import Modal from "@/components/NewSchedule/src/Modal.vue";
|
import Drawer from "./Drawer.vue";
|
import {useDrawer} from "@/components/Drawer";
|
// import Icon from "@/components/Icon/Icon.vue";
|
// import {Dropdown, type DropMenu} from "@/components/Dropdown";
|
const [register, { openModal: openModal }] = useModal();
|
const [registerDrawer, { openDrawer }] = useDrawer();
|
|
const { createMessage } = useMessage();
|
|
function handleDelete(record: Recordable) {
|
console.log('点击了删除', record);
|
}
|
function handleOpen(record: Recordable) {
|
console.log('点击了启用', record);
|
}
|
|
// const openModal = (value: string) => {
|
// console.log(`openModal ${value}`);
|
// };
|
function openModal1() {
|
openModal(true, {
|
// data: 'content2',
|
// info: 'Info',
|
});
|
}
|
|
function handleSuccess() {
|
Logger.log('打开drawer成功')
|
}
|
|
// const getDropMenuList = computed(() => {
|
// const dropMenuList: DropMenu[] = [
|
// {
|
// text: '导入客户',
|
// event: 'refresh',
|
// onClick: (e) => {
|
// console.log('click');
|
// },
|
// },
|
// {
|
// text: '导入阿里客户',
|
// event: 'drop',
|
// onClick: (e) => {
|
// console.log('click2');
|
// },
|
// },
|
// ];
|
//
|
// return dropMenuList;
|
// });
|
|
|
function onChange() {
|
console.log('onChange', arguments);
|
}
|
const [
|
registerTable,
|
{
|
setLoading,
|
setProps,
|
getColumns,
|
getDataSource,
|
getRawDataSource,
|
reload,
|
getPaginationRef,
|
setPagination,
|
getSelectRows,
|
getSelectRowKeys,
|
setSelectedRowKeys,
|
clearSelectedRowKeys,
|
},
|
] = useTable({
|
canResize: true,
|
title: 'useTable示例',
|
titleHelpMessage: '使用useTable调用表格内方法',
|
api: cluesListApi,
|
// beforeFetch: (params) => {
|
// console.log('beforeFetch', params);
|
// params.pageNo = params.page;
|
// // return Promise.resolve(params);
|
// },
|
columns: getEditCellColumns(),
|
// defSort: {
|
// pageNo: 1,
|
// pageSize: 20,
|
// field: 'name',
|
// order: 'ascend',
|
// },
|
rowKey: 'id',
|
showTableSetting: true,
|
showIndexColumn: false, // 是否显示序号列
|
useSearchForm: true, // 使用搜索表单
|
clickToRowSelect: false,
|
formConfig: getFormConfig(), // 搜索表单配置
|
tableSetting: {
|
// 是否显示刷新按钮
|
redo: true,
|
// 是否显示尺寸调整按钮
|
size: true,
|
// 是否显示字段调整按钮
|
setting: true,
|
// 是否显示全屏按钮
|
fullScreen: true
|
},
|
pagination: {
|
// pageSize: 20,
|
pageSizeOptions: ['10', '20', '50', '100'],
|
defaultPageSize: 20,
|
// showSizeChanger: true,
|
},
|
onChange,
|
rowSelection: {
|
type: 'checkbox',
|
},
|
onColumnsChange: (data: ColumnChangeParam[]) => {
|
console.log('ColumnsChanged', data);
|
},
|
showSelectionBar: true, // 显示多选状态栏
|
actionColumn: {
|
width: 120,
|
title: '操作',
|
dataIndex: 'action',
|
fixed: 'right',
|
},
|
});
|
|
function changeLoading() {
|
setLoading(true);
|
setTimeout(() => {
|
setLoading(false);
|
}, 1000);
|
}
|
// function changeColumns() {
|
// setProps({
|
// columns: getBasicShortColumns(),
|
// rowSelection: {
|
// type: 'checkbox',
|
// },
|
// showIndexColumn: true,
|
// });
|
// }
|
function reloadTable() {
|
setProps({
|
columns: getEditCellColumns(),
|
rowSelection: {
|
type: 'checkbox',
|
},
|
showIndexColumn: true,
|
});
|
reload({
|
page: 1,
|
});
|
}
|
function getColumn() {
|
createMessage.info('请在控制台查看!');
|
console.log(getColumns());
|
}
|
|
function getTableData() {
|
createMessage.info('请在控制台查看!');
|
console.log(getDataSource());
|
}
|
|
function getTableRawData() {
|
createMessage.info('请在控制台查看!');
|
console.log(getRawDataSource());
|
}
|
|
function getPagination() {
|
createMessage.info('请在控制台查看!');
|
console.log(getPaginationRef());
|
}
|
|
function setPaginationInfo() {
|
setPagination({
|
current: 2,
|
});
|
reload();
|
}
|
function getSelectRowList() {
|
createMessage.info('请在控制台查看!');
|
console.log(getSelectRows());
|
}
|
function getSelectRowKeyList() {
|
createMessage.info('请在控制台查看!');
|
console.log(getSelectRowKeys());
|
}
|
function setSelectedRowKeyList() {
|
setSelectedRowKeys(['0', '1', '2']);
|
}
|
function clearSelect() {
|
clearSelectedRowKeys();
|
}
|
|
|
const canResize = ref(false);
|
const loading = ref(false);
|
const striped = ref(true);
|
const border = ref(true);
|
const pagination = ref<any>(false);
|
|
|
|
|
function handleEditEnd({ record, index, key, value }: Recordable) {
|
console.log(record, index, key, value);
|
return false;
|
}
|
async function beforeEditSubmit({ record, index, key, value }) {
|
console.log('单元格数据正在准备提交', { record, index, key, value });
|
return await feakSave({ id: record.id, key, value });
|
}
|
|
function handleEditCancel() {
|
console.log('cancel');
|
}
|
function handleRowClick(e) {
|
Logger.log('handleRowClick',e)
|
openDrawer(true, {
|
isUpdate: false,
|
});
|
}
|
|
function handleCellClick() {
|
console.log('handleCellClick..');
|
}
|
// 模拟将指定数据保存
|
function feakSave({ value, key, id }) {
|
createMessage.loading({
|
content: `正在模拟保存${key}`,
|
key: '_save_fake_data',
|
duration: 0,
|
});
|
return new Promise((resolve) => {
|
setTimeout(() => {
|
if (value === '') {
|
createMessage.error({
|
content: '保存失败:不能为空',
|
key: '_save_fake_data',
|
duration: 2,
|
});
|
resolve(false);
|
} else {
|
createMessage.success({
|
content: `记录${id}的${key}已保存`,
|
key: '_save_fake_data',
|
duration: 2,
|
});
|
resolve(true);
|
}
|
}, 2000);
|
});
|
}
|
</script>
|