oms/src/views/audit/orderTask/index.vue

<template>
	<div>
		<by-bill :propConfig="config" @search="search" @onSmt="onSmt" ref="bill" @onAdd="onAdd">
			<template v-slot:cus>我是插槽</template>
		</by-bill>
		<div style="clear: both;"></div>
		<div>
			<el-button type="primary" plain @click="setSmtValue">设置已提交数据</el-button><br />
			<el-button type="primary" plain @click="setdraftsBoxValue">设置草稿箱数据</el-button>
		</div>

	</div>
</template>

<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	@Component
	export default class BillDemo extends Vue {
		config : any = {
			bill: {
				tool: {
					tools: {
						add: true,
						edit: true
					}
				},
				form: {
					attr: {
						size: 'small'
					},
					columns: [
						[{
							span: 6,
							label: '创建时间',
							prop: 'created',
							component: 'by-date-picker',
							compConfig: {
								format: 'yyyy-MM-dd HH:mm:ss',
								type: 'datetime'
							}
						}]
					]
				},
				tableTool: {
					tools: {
						add: true
					}
				},
				table: {
					attr: {
						size: 'mini',
						height: 240,
						seq: true,
						align: 'center',
						checkbox: true
					},
					columns: [{
						title: 'id',
						field: 'id',
						width: 50
					},
					{
						title: '姓名',
						field: 'name',
						width: 100
					}, {
						title: '操作',
						action: true,
						plugins: [{
							icon: 'el-icon-edit',
							name: '编辑',
							audit: '',
							event: {
								click: (item : any) => {
									console.log('该行数据：', item)
								}
							}
						}]
					}]
				}
			},
			smt: {
				search: {
					attr: {
						size: 'mini',
						rules: {
							name: [{
								required: true, message: '请输入名称', trigger: 'blur'
							}]
						}
					},
					columns: [
						[{
							span: 6,
							label: '创建时间',
							prop: 'created',
							component: 'by-date-picker',
							compConfig: {
								format: 'yyyy-MM-dd',
								type: 'datetime'
							}
						}]
					]
				},
				tool: {
					tools: {
						smt: true,
						export: true,
						search: true,
						refresh: true
					}
				},
				table: {
					attr: {
						size: 'mini',
						seq: true,
						align: 'center',
						checkbox: true
					},
					columns: [{
						title: 'id',
						field: 'id',
						width: 50
					},
					{
						title: '姓名',
						field: 'name',
						width: 100
					},
					{
						title: '日期',
						field: 'time',
						// width:200
					}]
				}
			},
			draftsBox: {
				search: {
					attr: {
						size: 'mini',
						rules: {
							name: [{
								required: true, message: '请输入名称', trigger: 'blur'
							}]
						}
					},
					columns: [
						[{
							span: 6,
							label: '名称',
							prop: 'name',
							component: 'by-input'
						}]
					]
				},
				tool: {
					tools: {
						smt: true,
						export: true,
						search: true,
						refresh: true
					}
				},
				table: {
					attr: {
						size: 'mini',
						seq: true,
						align: 'center',
						checkbox: true
					},
					columns: [
						{
							title: '姓名',
							field: 'name',
							width: 100
						},
						{
							title: '日期',
							field: 'time',
							// width:200
						}]
				}
			},

		}

		search(parames : any) {
			console.log('搜索回传参数', parames);
		}
		onSmt(n : string) {
			console.log(n + ':工具栏执行操作onSmt')
		}
		onAdd(n : string) {
			console.log(n);
		}
		setSmtValue() {
			let data : Array<any> = [{
				id: 1,
				name: '张三',
				time: '2023-02-02'
			}, {
				id: 2,
				name: '李四',
				time: '2023-02-02'
			}];
			console.log(data);
			(this.$refs.bill as any).setTabTableValue('smt', data);
		}
		setdraftsBoxValue() {
			let data : Array<any> = [{
				name: '王五',
				time: '2023-02-02'
			}, {
				name: '赵六',
				time: '2023-02-02'
			}];
			(this.$refs.bill as any).setTabTableValue('draftsBox', data);
		}
	}
</script>