onbus_crm.git - Gitblit

Sanakey

3 天以前 b5c1614fe473330ceca8b7cff0f1802e19bd5039

提交 \| 用户 \| age
ec4248	1	<template>
S	2	<div class="p-4 flex flex-col">
b5c161	3	<Drawer :destroyOnClose="true" @register="registerDrawer" @success="handleSuccess"/>
abcc94	4	<!-- <div class="mb-4">-->
S	5	<!-- <a-button class="mr-2" @click="reloadTable"> 还原 </a-button>-->
	6	<!-- <a-button class="mr-2" @click="changeLoading"> 开启loading </a-button>-->
	7	<!--<!– <a-button class="mr-2" @click="changeColumns"> 更改Columns </a-button>–>-->
	8	<!-- <a-button class="mr-2" @click="getColumn"> 获取Columns </a-button>-->
	9	<!-- <a-button class="mr-2" @click="getTableData"> 获取表格数据 </a-button>-->
	10	<!-- <a-button class="mr-2" @click="getTableRawData"> 获取接口原始数据 </a-button>-->
	11	<!-- <a-button class="mr-2" @click="setPaginationInfo"> 跳转到第2页 </a-button>-->
	12	<!-- </div>-->
	13	<!-- <div class="mb-4">-->
	14	<!-- <a-button class="mr-2" @click="getSelectRowList"> 获取选中行 </a-button>-->
	15	<!-- <a-button class="mr-2" @click="getSelectRowKeyList"> 获取选中行Key </a-button>-->
	16	<!-- <a-button class="mr-2" @click="setSelectedRowKeyList"> 设置选中行 </a-button>-->
	17	<!-- <a-button class="mr-2" @click="clearSelect"> 清空选中行 </a-button>-->
	18	<!-- <a-button class="mr-2" @click="getPagination"> 获取分页信息 </a-button>-->
	19	<!-- </div>-->
ec4248	20	<BasicTable
S	21	@register="registerTable"
	22	@row-click="handleRowClick"
	23	@edit-end="handleEditEnd"
	24	@edit-cancel="handleEditCancel"
	25	:beforeEditSubmit="beforeEditSubmit"
b5c161	26	:searchInfo="searchInfo"
ec4248	27	>
S	28	<template #bodyCell="{ column, record }">
abcc94	29	<template v-if="column.key === 'tags'">
ec4248	30	<div @click="handleCellClick">
S	31	<span class="mr-1" v-for="tag in record.tags">
	32	<Tag
	33	:key="tag"
	34	:color="tag.color"
	35	>
	36	{{ tag.name }}
	37	</Tag>
	38	</span>
	39
abcc94	40	<!-- <Dropdown-->
S	41	<!-- :dropMenuList="getDropMenuList"-->
	42	<!-- :trigger="['click']"-->
	43	<!-- placement="bottomCenter"-->
	44	<!-- overlayClassName="multiple-tabs__dropdown"-->
	45	<!-- >-->
	46	<!-- <Icon icon="ion:chevron-down"/>-->
	47	<!-- </Dropdown>-->
ec4248	48	</div>
S	49	</template>
	50	<template v-else-if="column.key === 'action'">
	51	<TableAction
abcc94	52	stopButtonPropagation
ec4248	53	:dropDownActions="[
S	54	{
abcc94	55	label: '转为客户',
S	56	onClick: handleConvertToCustomer.bind(null, record),
	57	},
	58	{
	59	label: '写邮件',
	60	onClick: handleWriteEmail.bind(null, record),
	61	},
	62	{
	63	label: '写跟进',
	64	onClick: handleWriteAFollowup.bind(null, record),
	65	},
	66	{
	67	label: '新建日程',
	68	onClick: handleNewSchedule.bind(null, record),
	69	},
	70	{
	71	label: '变更状态',
	72	onClick: handleChangeStatus.bind(null, record),
	73	},
	74	{
	75	label: '合并线索',
	76	onClick: handleMergeClues.bind(null, record),
	77	},
	78	{
	79	label: '重新分配',
	80	onClick: handleReallocate.bind(null, record),
ec4248	81	},
S	82	]"
	83	/>
	84	</template>
	85	</template>
	86	</BasicTable>
	87	</div>
	88	</template>
	89	<script lang="ts" setup>
b5c161	90	import {reactive, ref,} from 'vue';
ec4248	91	import {
S	92	BasicTable,
	93	ColumnChangeParam,
	94	TableAction,
	95	useTable
	96	} from '@/components/Table';
b5c161	97	import {getEditCellColumns} from './tableData';
abcc94	98	import {useMessage} from '@/hooks/web/useMessage';
S	99	import {Tag} from 'ant-design-vue';
b5c161	100	import {cluesListApi} from "@/api/clues/list";
0884a2	101	// import {useModal} from "@/components/Modal";
ec4248	102	import Drawer from "./Drawer.vue";
S	103	import {useDrawer} from "@/components/Drawer";
abcc94	104	import EventBus from "@/utils/eventBus";
ec4248	105	// import Icon from "@/components/Icon/Icon.vue";
S	106	// import {Dropdown, type DropMenu} from "@/components/Dropdown";
0884a2	107	// const [register, { openModal: openModal }] = useModal();
S	108	// const [registerPersonnelModal, { openModal: openPersonnelModal }] = useModal();
b5c161	109
S	110	import {useCluesRowStore} from "@/store/modules/cluesRowData";
	111
abcc94	112	const [registerDrawer, {openDrawer}] = useDrawer();
ec4248	113
abcc94	114	const {createMessage} = useMessage();
ec4248	115
S	116	function handleDelete(record: Recordable) {
	117	console.log('点击了删除', record);
	118	}
abcc94	119
S	120	function handleConvertToCustomer(record: Recordable) {
	121	Logger.log('点击了转为客户', record);
	122	}
	123	function handleWriteEmail(record: Recordable) {
	124	Logger.log('点击了写邮件', record);
	125	}
	126	function handleWriteAFollowup(record: Recordable) {
	127	Logger.log('点击了写跟进', record);
	128	EventBus.emit('openFollowUpModal', record);
	129	}
	130	function handleNewSchedule(record: Recordable) {
	131	Logger.log('点击了新建日程', record);
	132	EventBus.emit('openScheduleModal', record);
	133	}
	134	function handleChangeStatus(record: Recordable) {
	135	Logger.log('点击了变更状态', record);
	136	EventBus.emit('openChangeStatusModal', record);
	137	}
	138	function handleMergeClues(record: Recordable) {
	139	Logger.log('点击了合并线索', record);
	140	}
	141	function handleReallocate(record: Recordable) {
	142	Logger.log('点击了重新分配', record);
	143	EventBus.emit('openReallocateModal', record);
ec4248	144	}
S	145
	146	// const openModal = (value: string) => {
	147	// console.log(`openModal ${value}`);
	148	// };
0884a2	149
ec4248	150
S	151	function handleSuccess() {
abcc94	152	Logger.log('打开drawer成功');
ec4248	153	}
abcc94	154
ec4248	155
S	156	// const getDropMenuList = computed(() => {
	157	// const dropMenuList: DropMenu[] = [
	158	// {
	159	// text: '导入客户',
	160	// event: 'refresh',
	161	// onClick: (e) => {
	162	// console.log('click');
	163	// },
	164	// },
	165	// {
	166	// text: '导入阿里客户',
	167	// event: 'drop',
	168	// onClick: (e) => {
	169	// console.log('click2');
	170	// },
	171	// },
	172	// ];
	173	//
	174	// return dropMenuList;
	175	// });
b5c161	176	const searchInfo = reactive<Recordable>({});
ec4248	177
S	178	function onChange() {
	179	console.log('onChange', arguments);
	180	}
abcc94	181
ec4248	182	const [
S	183	registerTable,
	184	{
	185	setLoading,
	186	setProps,
	187	getColumns,
	188	getDataSource,
	189	getRawDataSource,
	190	reload,
	191	getPaginationRef,
	192	setPagination,
	193	getSelectRows,
	194	getSelectRowKeys,
	195	setSelectedRowKeys,
	196	clearSelectedRowKeys,
	197	},
	198	] = useTable({
	199	canResize: true,
abcc94	200	// title: 'useTable示例',
S	201	// titleHelpMessage: '使用useTable调用表格内方法',
ec4248	202	api: cluesListApi,
b5c161	203	beforeFetch: (params) => {
S	204	Logger.log('beforeFetch', params);
	205	// params.pageNo = params.page;
	206	params.type = 'all';
	207	// params.searchTxt = {
	208	// cluesName: '',
	209	// isRead: 1,
	210	// }
	211	// delete params.page;
	212	// return Promise.resolve(params);
	213	},
	214	fetchSetting: {
	215	pageField: 'pageNo',
	216	},
	217	afterFetch: () => {
	218	const result = getRawDataSource();
	219	Logger.log('afterFetch', result);
	220	// setTimeout(() => {
	221	// setPagination({
	222	// total: 100,
	223	// });
	224	// }, 1000);
	225	return result.data.data;
	226
	227	},
ec4248	228	columns: getEditCellColumns(),
S	229	// defSort: {
	230	// pageNo: 1,
	231	// pageSize: 20,
	232	// field: 'name',
	233	// order: 'ascend',
	234	// },
	235	rowKey: 'id',
	236	showTableSetting: true,
	237	showIndexColumn: false, // 是否显示序号列
	238	useSearchForm: true, // 使用搜索表单
	239	clickToRowSelect: false,
b5c161	240	formConfig: {
S	241	labelWidth: 100,
	242	layout: 'horizontal',
	243	rowProps: {
	244	justify: 'end',
	245	},
	246	showResetButton: false,
	247	showSubmitButton: false,
	248	autoSubmitOnEnter: true,
	249	schemas: [
	250	{
	251	field: `searchTxt.cluesName`,
	252	label: `搜索`,
	253	component: 'Input',
	254	colProps: {
	255	xl: 12,
	256	xxl: 8,
	257	},
	258	// componentProps: {
	259	// onSearch: (value) => {
	260	// console.log(value);
	261	// },
	262	// },
	263	},
	264	],
	265	}, // 搜索表单配置
	266	handleSearchInfoFn(info) {
	267	console.log('handleSearchInfoFn', info);
	268	return info;
	269	},
ec4248	270	tableSetting: {
S	271	// 是否显示刷新按钮
	272	redo: true,
	273	// 是否显示尺寸调整按钮
	274	size: true,
	275	// 是否显示字段调整按钮
	276	setting: true,
	277	// 是否显示全屏按钮
	278	fullScreen: true
	279	},
	280	pagination: {
b5c161	281	total: 0,
ec4248	282	// pageSize: 20,
S	283	pageSizeOptions: ['10', '20', '50', '100'],
	284	defaultPageSize: 20,
	285	// showSizeChanger: true,
	286	},
	287	onChange,
	288	rowSelection: {
	289	type: 'checkbox',
	290	},
	291	onColumnsChange: (data: ColumnChangeParam[]) => {
	292	console.log('ColumnsChanged', data);
	293	},
	294	showSelectionBar: true, // 显示多选状态栏
	295	actionColumn: {
abcc94	296	width: 50,
ec4248	297	title: '操作',
S	298	dataIndex: 'action',
	299	fixed: 'right',
	300	},
	301	});
	302
	303	function changeLoading() {
	304	setLoading(true);
	305	setTimeout(() => {
	306	setLoading(false);
	307	}, 1000);
	308	}
abcc94	309
ec4248	310	// function changeColumns() {
S	311	// setProps({
	312	// columns: getBasicShortColumns(),
	313	// rowSelection: {
	314	// type: 'checkbox',
	315	// },
	316	// showIndexColumn: true,
	317	// });
	318	// }
	319	function reloadTable() {
	320	setProps({
	321	columns: getEditCellColumns(),
	322	rowSelection: {
	323	type: 'checkbox',
	324	},
	325	showIndexColumn: true,
	326	});
	327	reload({
	328	page: 1,
	329	});
	330	}
abcc94	331
ec4248	332	function getColumn() {
S	333	createMessage.info('请在控制台查看！');
	334	console.log(getColumns());
	335	}
	336
	337	function getTableData() {
	338	createMessage.info('请在控制台查看！');
	339	console.log(getDataSource());
	340	}
	341
	342	function getTableRawData() {
	343	createMessage.info('请在控制台查看！');
	344	console.log(getRawDataSource());
	345	}
	346
	347	function getPagination() {
	348	createMessage.info('请在控制台查看！');
	349	console.log(getPaginationRef());
	350	}
	351
	352	function setPaginationInfo() {
	353	setPagination({
	354	current: 2,
	355	});
	356	reload();
	357	}
abcc94	358
ec4248	359	function getSelectRowList() {
S	360	createMessage.info('请在控制台查看！');
	361	console.log(getSelectRows());
	362	}
abcc94	363
ec4248	364	function getSelectRowKeyList() {
S	365	createMessage.info('请在控制台查看！');
	366	console.log(getSelectRowKeys());
	367	}
abcc94	368
ec4248	369	function setSelectedRowKeyList() {
S	370	setSelectedRowKeys(['0', '1', '2']);
	371	}
abcc94	372
ec4248	373	function clearSelect() {
S	374	clearSelectedRowKeys();
	375	}
	376
	377
	378	const canResize = ref(false);
	379	const loading = ref(false);
	380	const striped = ref(true);
	381	const border = ref(true);
	382	const pagination = ref<any>(false);
	383
	384
abcc94	385	function handleEditEnd({record, index, key, value}: Recordable) {
ec4248	386	console.log(record, index, key, value);
S	387	return false;
	388	}
abcc94	389
S	390	async function beforeEditSubmit({record, index, key, value}) {
	391	console.log('单元格数据正在准备提交', {record, index, key, value});
	392	return await feakSave({id: record.id, key, value});
ec4248	393	}
S	394
	395	function handleEditCancel() {
	396	console.log('cancel');
	397	}
abcc94	398
f353bc	399	function handleRowClick(data) {
S	400	Logger.log('handleRowClick', data);
ec4248	401	openDrawer(true, {
b5c161	402	isUpdate: true,
f353bc	403	clue: data
ec4248	404	});
b5c161	405	const cluesRowStore= useCluesRowStore();
S	406	cluesRowStore.setRowData(data);
ec4248	407	}
S	408
	409	function handleCellClick() {
	410	console.log('handleCellClick..');
	411	}
abcc94	412
ec4248	413	// 模拟将指定数据保存
abcc94	414	function feakSave({value, key, id}) {
ec4248	415	createMessage.loading({
S	416	content: `正在模拟保存${key}`,
	417	key: '_save_fake_data',
	418	duration: 0,
	419	});
	420	return new Promise((resolve) => {
	421	setTimeout(() => {
	422	if (value === '') {
	423	createMessage.error({
	424	content: '保存失败：不能为空',
	425	key: '_save_fake_data',
	426	duration: 2,
	427	});
	428	resolve(false);
	429	} else {
	430	createMessage.success({
	431	content: `记录${id}的${key}已保存`,
	432	key: '_save_fake_data',
	433	duration: 2,
	434	});
	435	resolve(true);
	436	}
	437	}, 2000);
	438	});
	439	}
	440	</script>