onbus_crm.git - Gitblit

bowen

2023-10-12 f87e07840217af1bb059200eba04100e44c5d783

提交 \| 用户 \| age
0b6110	1	<template>
V	2	<div class="p-4">
fe2bcf	3	<BasicTable @register="registerTable" @edit-change="onEditChange">
de7279	4	<template #bodyCell="{ column, record }">
W	5	<template v-if="column.key === 'action'">
f87e07	6	<TableAction :actions="createActions(record)" />
de7279	7	</template>
0b6110	8	</template>
V	9	</BasicTable>
	10	</div>
	11	</template>
	12	<script lang="ts">
	13	import { defineComponent, ref } from 'vue';
	14	import {
	15	BasicTable,
	16	useTable,
	17	TableAction,
	18	BasicColumn,
	19	ActionItem,
	20	EditRecordRow,
	21	} from '/@/components/Table';
9c2f3f	22	import { optionsListApi } from '/@/api/demo/select';
0b6110	23
V	24	import { demoListApi } from '/@/api/demo/table';
52af1d	25	import { treeOptionsListApi } from '/@/api/demo/tree';
ee7c31	26	import { cloneDeep } from 'lodash-es';
无	27	import { useMessage } from '/@/hooks/web/useMessage';
535bdd	28
0b6110	29	const columns: BasicColumn[] = [
V	30	{
9c2f3f	31	title: '输入框',
f7a1b0	32	dataIndex: 'name-group',
9c2f3f	33	editRow: true,
f7a1b0	34	children: [
C	35	{
	36	title: '输入框',
	37	dataIndex: 'name',
	38	editRow: true,
	39	editComponentProps: {
	40	prefix: '$',
	41	},
	42	width: 150,
	43	},
	44	{
	45	title: '默认输入状态',
	46	dataIndex: 'name7',
	47	editRow: true,
	48	width: 150,
	49	},
	50	{
	51	title: '输入框校验',
	52	dataIndex: 'name1',
	53	editRow: true,
	54	align: 'left',
	55	// 默认必填校验
	56	editRule: true,
	57	width: 150,
	58	},
	59	{
	60	title: '输入框函数校验',
	61	dataIndex: 'name2',
	62	editRow: true,
	63	align: 'right',
	64	editRule: async (text) => {
	65	if (text === '2') {
	66	return '不能输入该值';
	67	}
	68	return '';
	69	},
	70	},
	71	{
	72	title: '数字输入框',
	73	dataIndex: 'id',
	74	editRow: true,
	75	editRule: true,
	76	editComponent: 'InputNumber',
	77	width: 150,
	78	},
	79	],
9c2f3f	80	},
V	81	{
	82	title: '下拉框',
	83	dataIndex: 'name3',
	84	editRow: true,
	85	editComponent: 'Select',
	86	editComponentProps: {
	87	options: [
	88	{
	89	label: 'Option1',
	90	value: '1',
	91	},
	92	{
	93	label: 'Option2',
	94	value: '2',
	95	},
d81db8	96	{
无	97	label: 'Option3',
	98	value: '3',
	99	},
9c2f3f	100	],
V	101	},
	102	width: 200,
	103	},
	104	{
	105	title: '远程下拉',
	106	dataIndex: 'name4',
	107	editRow: true,
	108	editComponent: 'ApiSelect',
	109	editComponentProps: {
	110	api: optionsListApi,
d81db8	111	resultField: 'list',
无	112	labelField: 'name',
	113	valueField: 'id',
535bdd	114	},
52af1d	115	width: 200,
无	116	},
	117	{
	118	title: '远程下拉树',
4bb506	119	dataIndex: 'name8',
52af1d	120	editRow: true,
无	121	editComponent: 'ApiTreeSelect',
	122	editRule: false,
	123	editComponentProps: {
	124	api: treeOptionsListApi,
	125	resultField: 'list',
9c2f3f	126	},
V	127	width: 200,
	128	},
	129	{
93006c	130	title: '日期选择',
N	131	dataIndex: 'date',
	132	editRow: true,
	133	editComponent: 'DatePicker',
	134	editComponentProps: {
	135	valueFormat: 'YYYY-MM-DD',
	136	format: 'YYYY-MM-DD',
	137	},
8eaf57	138	width: 150,
93006c	139	},
N	140	{
	141	title: '时间选择',
	142	dataIndex: 'time',
	143	editRow: true,
	144	editComponent: 'TimePicker',
	145	editComponentProps: {
	146	valueFormat: 'HH:mm',
	147	format: 'HH:mm',
	148	},
8eaf57	149	width: 100,
93006c	150	},
N	151	{
9c2f3f	152	title: '勾选框',
V	153	dataIndex: 'name5',
	154	editRow: true,
	155
	156	editComponent: 'Checkbox',
	157	editValueMap: (value) => {
	158	return value ? '是' : '否';
	159	},
8eaf57	160	width: 100,
9c2f3f	161	},
V	162	{
	163	title: '开关',
	164	dataIndex: 'name6',
	165	editRow: true,
	166	editComponent: 'Switch',
	167	editValueMap: (value) => {
	168	return value ? '开' : '关';
	169	},
8eaf57	170	width: 100,
0b6110	171	},
e08a15	172	{
W	173	title: '单选框',
	174	dataIndex: 'radio1',
	175	editRow: true,
	176	editComponent: 'RadioGroup',
	177	editComponentProps: {
	178	options: [
	179	{
	180	label: '选项1',
	181	value: '1',
	182	},
	183	{
	184	label: '选项2',
	185	value: '2',
	186	},
	187	],
	188	},
	189	width: 200,
	190	},
	191	{
	192	title: '单选按钮框',
	193	dataIndex: 'radio2',
	194	editRow: true,
	195	editComponent: 'RadioButtonGroup',
	196	editComponentProps: {
	197	options: [
	198	{
	199	label: '选项1',
	200	value: '1',
	201	},
	202	{
	203	label: '选项2',
	204	value: '2',
	205	},
	206	],
	207	},
	208	width: 200,
	209	},
	210	{
	211	title: '远程单选框',
	212	dataIndex: 'radio3',
	213	editRow: true,
	214	editComponent: 'ApiRadioGroup',
	215	editComponentProps: {
	216	api: optionsListApi,
	217	resultField: 'list',
	218	labelField: 'name',
	219	valueField: 'id',
	220	},
	221	width: 200,
	222	},
0b6110	223	];
V	224	export default defineComponent({
9edc28	225	components: { BasicTable, TableAction },
0b6110	226	setup() {
ee7c31	227	const { createMessage: msg } = useMessage();
0b6110	228	const currentEditKeyRef = ref('');
V	229	const [registerTable] = useTable({
	230	title: '可编辑行示例',
fe2bcf	231	titleHelpMessage: [
无	232	'本例中修改[数字输入框]这一列时，同一行的[远程下拉]列的当前编辑数据也会同步发生改变',
	233	],
0b6110	234	api: demoListApi,
V	235	columns: columns,
	236	showIndexColumn: false,
a07ab6	237	showTableSetting: true,
无	238	tableSetting: { fullScreen: true },
0b6110	239	actionColumn: {
V	240	width: 160,
	241	title: 'Action',
	242	dataIndex: 'action',
de7279	243	// slots: { customRender: 'action' },
0b6110	244	},
V	245	});
	246
	247	function handleEdit(record: EditRecordRow) {
	248	currentEditKeyRef.value = record.key;
9c2f3f	249	record.onEdit?.(true);
0b6110	250	}
V	251
	252	function handleCancel(record: EditRecordRow) {
	253	currentEditKeyRef.value = '';
1d0ec3	254	record.onEdit?.(false, false);
0b6110	255	}
V	256
9c2f3f	257	async function handleSave(record: EditRecordRow) {
ee7c31	258	// 校验
无	259	msg.loading({ content: '正在保存...', duration: 0, key: 'saving' });
	260	const valid = await record.onValid?.();
	261	if (valid) {
	262	try {
	263	const data = cloneDeep(record.editValueRefs);
	264	console.log(data);
	265	//TODO 此处将数据提交给服务器保存
	266	// ...
	267	// 保存之后提交编辑状态
	268	const pass = await record.onEdit?.(false, true);
	269	if (pass) {
	270	currentEditKeyRef.value = '';
	271	}
	272	msg.success({ content: '数据已保存', key: 'saving' });
	273	} catch (error) {
	274	msg.error({ content: '保存失败', key: 'saving' });
	275	}
	276	} else {
	277	msg.error({ content: '请填写正确的数据', key: 'saving' });
9c2f3f	278	}
0b6110	279	}
V	280
f87e07	281	function createActions(record: EditRecordRow): ActionItem[] {
0b6110	282	if (!record.editable) {
V	283	return [
	284	{
	285	label: '编辑',
	286	disabled: currentEditKeyRef.value ? currentEditKeyRef.value !== record.key : false,
	287	onClick: handleEdit.bind(null, record),
	288	},
	289	];
	290	}
	291	return [
	292	{
	293	label: '保存',
f87e07	294	onClick: handleSave.bind(null, record),
0b6110	295	},
V	296	{
	297	label: '取消',
	298	popConfirm: {
	299	title: '是否取消编辑',
f87e07	300	confirm: handleCancel.bind(null, record),
0b6110	301	},
V	302	},
	303	];
	304	}
	305
fe2bcf	306	function onEditChange({ column, value, record }) {
无	307	// 本例
	308	if (column.dataIndex === 'id') {
	309	record.editValueRefs.name4.value = `${value}`;
	310	}
	311	console.log(column, value, record);
	312	}
	313
0b6110	314	return {
V	315	registerTable,
	316	handleEdit,
	317	createActions,
fe2bcf	318	onEditChange,
0b6110	319	};
V	320	},
	321	});
	322	</script>