<template>
|
<div class="p-4 flex flex-col">
|
<Drawer :destroyOnClose="true" @register="registerDrawer" @success="handleSuccess"/>
|
<!-- <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"
|
:searchInfo="searchInfo"
|
>
|
<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
|
stopButtonPropagation
|
:dropDownActions="[
|
{
|
label: '转为客户',
|
onClick: handleConvertToCustomer.bind(null, record),
|
},
|
{
|
label: '写邮件',
|
onClick: handleWriteEmail.bind(null, record),
|
},
|
{
|
label: '写跟进',
|
onClick: handleWriteAFollowup.bind(null, record),
|
},
|
{
|
label: '新建日程',
|
onClick: handleNewSchedule.bind(null, record),
|
},
|
{
|
label: '变更状态',
|
onClick: handleChangeStatus.bind(null, record),
|
},
|
{
|
label: '合并线索',
|
onClick: handleMergeClues.bind(null, record),
|
},
|
{
|
label: '重新分配',
|
onClick: handleReallocate.bind(null, record),
|
},
|
]"
|
/>
|
</template>
|
</template>
|
</BasicTable>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import {reactive, ref,} from 'vue';
|
import {
|
BasicTable,
|
ColumnChangeParam,
|
TableAction,
|
useTable
|
} from '@/components/Table';
|
import {getEditCellColumns} from './tableData';
|
import {useMessage} from '@/hooks/web/useMessage';
|
import {Tag} from 'ant-design-vue';
|
import {cluesListApi} from "@/api/clues/list";
|
// import {useModal} from "@/components/Modal";
|
import Drawer from "./Drawer.vue";
|
import {useDrawer} from "@/components/Drawer";
|
import EventBus from "@/utils/eventBus";
|
// import Icon from "@/components/Icon/Icon.vue";
|
// import {Dropdown, type DropMenu} from "@/components/Dropdown";
|
// const [register, { openModal: openModal }] = useModal();
|
// const [registerPersonnelModal, { openModal: openPersonnelModal }] = useModal();
|
|
import {useCluesRowStore} from "@/store/modules/cluesRowData";
|
|
const [registerDrawer, {openDrawer}] = useDrawer();
|
|
const {createMessage} = useMessage();
|
|
function handleDelete(record: Recordable) {
|
console.log('点击了删除', record);
|
}
|
|
function handleConvertToCustomer(record: Recordable) {
|
Logger.log('点击了转为客户', record);
|
}
|
function handleWriteEmail(record: Recordable) {
|
Logger.log('点击了写邮件', record);
|
}
|
function handleWriteAFollowup(record: Recordable) {
|
Logger.log('点击了写跟进', record);
|
EventBus.emit('openFollowUpModal', record);
|
}
|
function handleNewSchedule(record: Recordable) {
|
Logger.log('点击了新建日程', record);
|
EventBus.emit('openScheduleModal', record);
|
}
|
function handleChangeStatus(record: Recordable) {
|
Logger.log('点击了变更状态', record);
|
EventBus.emit('openChangeStatusModal', record);
|
}
|
function handleMergeClues(record: Recordable) {
|
Logger.log('点击了合并线索', record);
|
}
|
function handleReallocate(record: Recordable) {
|
Logger.log('点击了重新分配', record);
|
EventBus.emit('openReallocateModal', record);
|
}
|
|
// const openModal = (value: string) => {
|
// console.log(`openModal ${value}`);
|
// };
|
|
|
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;
|
// });
|
const searchInfo = reactive<Recordable>({});
|
|
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) => {
|
Logger.log('beforeFetch', params);
|
// params.pageNo = params.page;
|
params.type = 'all';
|
// params.searchTxt = {
|
// cluesName: '',
|
// isRead: 1,
|
// }
|
// delete params.page;
|
// return Promise.resolve(params);
|
},
|
fetchSetting: {
|
pageField: 'pageNo',
|
},
|
afterFetch: () => {
|
const result = getRawDataSource();
|
Logger.log('afterFetch', result);
|
// setTimeout(() => {
|
// setPagination({
|
// total: 100,
|
// });
|
// }, 1000);
|
return result.data.data;
|
|
},
|
columns: getEditCellColumns(),
|
// defSort: {
|
// pageNo: 1,
|
// pageSize: 20,
|
// field: 'name',
|
// order: 'ascend',
|
// },
|
rowKey: 'id',
|
showTableSetting: true,
|
showIndexColumn: false, // 是否显示序号列
|
useSearchForm: true, // 使用搜索表单
|
clickToRowSelect: false,
|
formConfig: {
|
labelWidth: 100,
|
layout: 'horizontal',
|
rowProps: {
|
justify: 'end',
|
},
|
showResetButton: false,
|
showSubmitButton: false,
|
autoSubmitOnEnter: true,
|
schemas: [
|
{
|
field: `searchTxt.cluesName`,
|
label: `搜索`,
|
component: 'Input',
|
colProps: {
|
xl: 12,
|
xxl: 8,
|
},
|
// componentProps: {
|
// onSearch: (value) => {
|
// console.log(value);
|
// },
|
// },
|
},
|
],
|
}, // 搜索表单配置
|
handleSearchInfoFn(info) {
|
console.log('handleSearchInfoFn', info);
|
return info;
|
},
|
tableSetting: {
|
// 是否显示刷新按钮
|
redo: true,
|
// 是否显示尺寸调整按钮
|
size: true,
|
// 是否显示字段调整按钮
|
setting: true,
|
// 是否显示全屏按钮
|
fullScreen: true
|
},
|
pagination: {
|
total: 0,
|
// 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: 50,
|
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(data) {
|
Logger.log('handleRowClick', data);
|
openDrawer(true, {
|
isUpdate: true,
|
clue: data
|
});
|
const cluesRowStore= useCluesRowStore();
|
cluesRowStore.setRowData(data);
|
}
|
|
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>
|
