oms/src/benyun/components/byBill/byBill.vue

<template>
	<div class="bill">
		<div class="bill-left">
			<div class="bill-tab" :style="{width:closeTab?0:'200px'}">
				<div class="bill-title">导航</div>
				<div class="bill-nav" v-if="sourceConfig" :class="{'onBill':showTab == 'source'}" @click="tabChange('source')">
					引单</div>
				<div class="bill-nav" v-if="billConfig" :class="{'onBill':showTab == 'bill'}" @click="tabChange('bill')">单据
				</div>
				<div class="bill-nav" v-if="smtConfig" :class="{'onBill':showTab == 'smt'}" @click="tabChange('smt')">已提交</div>
				<div class="bill-nav" v-if="draftsBoxConfig" :class="{'onBill':showTab == 'draftsBox'}"
					@click="tabChange('draftsBox')">草稿箱</div>
				<div class="bill-nav" v-if="allConfig" :class="{'onBill':showTab == 'all'}" @click="tabChange('all')">综合查询</div>
				<div class="bill-nav" v-if="recycleBinConfig" :class="{'onBill':showTab == 'recycleBin'}"
					@click="tabChange('recycleBin')">回收站</div>
				<div class="bill-nav" v-for="(item,index) of customs" :class="{'onBill':showTab == item.name}"
					@click="tabChange(item.name)" :key="index">{{item.label}}</div>
			</div>
			<div class="close" @click="closeTab = !closeTab">
				<i class="el-icon-back" v-if="!closeTab"></i>
				<i class="el-icon-right" v-if="closeTab"></i>
			</div>
		</div>
		<div class="bill-main">
			<!-- 引单 -->
			<div class="bill-box" v-if="sourceConfig" :class="{'on-show':showTab == 'source'}">
				<el-tabs v-model="activeSource">
					<el-tab-pane v-for="(item,index) of sourceConfig" :key="index" :label="item.title" :name="'source'+index">
						<bill-module :propConfig="item" :ref="'source_'+index" @clickHandle="clickHandle($event,'source_'+index)"
							@search="search($event,'source_'+index)" @resert="resert('source_'+index)"
							@pagination="paginationChange($event,'source_'+index)" @detail="detail($event,'source_'+index)" />
					</el-tab-pane>
				</el-tabs>
			</div>
			<!-- 单据 -->
			<div class="bill-box b-bill" v-if="billConfig" :class="{'on-show':showTab == 'bill'}">
				<div class="bill-cont">
					<div class="bill-tool" v-if="billConfig.tool">
						<by-tool ref="billTool" :propConfig="billConfig.tool" @clickHandle="clickHandle($event,'bill')" />
					</div>
					<div class="form" v-if="billConfig.form">
						<by-form ref="billForm" :propConfig="billConfig.form" @getSupplierModal="getSupplierModal"
							@getbusinessType="getbusinessType" />
					</div>
					<template v-if="billConfig.tableConfig && billConfig.tableConfig.length > 0">
						<div class="bill-table" v-for="(item,index) of billConfig.tableConfig" :key="index">
							<div class="table-title" v-if="item.title">{{ item.title }}</div>
							<div class="table-tool" v-if="item.tool">
								<by-tool :ref="'tableTool_'+index" :propConfig="item.tool"
									@clickHandle="clickHandle($event,'billTable_'+index)" />
							</div>
							<div class="table" v-if="item.table">
								<by-table :propConfig="item.table" :ref="'billTable_'+index" @onChangeRow="onChangeRow" />
							</div>
						</div>
					</template>
				</div>
				<div class="bill-log">
					<div class="log-icon" @click="showLog">
						<i v-if="!drawer" class="el-icon-s-fold"></i>
						<i v-else class="el-icon-s-unfold"></i>
					</div>
				</div>
				<el-drawer class="log-drawer" :size="600" append-to-body title="操作日志" :visible.sync="drawer" direction="rtl">
					<byLog :config="billConfig && billConfig.log" :parentValue="billValue" ref="log" />
				</el-drawer>
			</div>
			<!-- 已提交 -->
			<div class="bill-box" v-if="smtConfig" :class="{'on-show':showTab == 'smt'}">
				<bill-module :propConfig="smtConfig" ref="smt" @clickHandle="clickHandle($event,'smt')"
					@search="search($event,'smt')" @resert="resert('smt')" @pagination="paginationChange($event,'smt')"
					@detail="detail($event,'smt')" />
			</div>
			<!-- 草稿箱 -->
			<div class="bill-box" v-if="draftsBoxConfig" :class="{'on-show':showTab == 'draftsBox'}">
				<bill-module :propConfig="draftsBoxConfig" ref="draftsBox" @clickHandle="clickHandle($event,'draftsBox')"
					@search="search($event,'draftsBox')" @resert="resert('draftsBox')"
					@pagination="paginationChange($event,'draftsBox')" @detail="detail($event,'draftsBox')" />
			</div>
			<!-- 综合查询 -->
			<div class="bill-box" v-if="allConfig" :class="{'on-show':showTab == 'all'}">
				<bill-module :propConfig="allConfig" ref="all" @clickHandle="clickHandle($event,'all')"
					@search="search($event,'all')" @resert="resert('all')" @pagination="paginationChange($event,'all')"
					@detail="detail($event,'all')" />
			</div>
			<!-- 回收站 -->
			<div class="bill-box" v-if="recycleBinConfig" :class="{'on-show':showTab == 'recycleBin'}">
				<bill-module :propConfig="recycleBinConfig" ref="recycleBin" @clickHandle="clickHandle($event,'recycleBin')"
					@search="search($event,'recycleBin')" @resert="resert('recycleBin')"
					@pagination="paginationChange($event,'recycleBin')" @detail="detail($event,'recycleBin')" />
			</div>
			<!-- 插槽 -->
			<div class="bill-box" v-for="(item,index) of customs" :key="index" :class="{'on-show':showTab == item.name}">
				<slot :name='item.name'></slot>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
	/**
 config:{
	attr:{
		activeName:'' //tabs标签值
	},
	source:[ //引单
		{
			title:'', //标题
			search:{}, //表单配置
			tool:{},  //工具栏配置
			table:{} //表格配置
		}
	],
	bill:{ //单据
		form:{}, //表单配置
		tool:{},  //工具栏配置
		log:{}, //日志配置
		tableConfig:[ //表格配置
			{
				title:'',
				tool:{} //表格工具栏
				table:{}
			}
		] 
	},
	smt:{ //已提交
		search:{}, //表单配置
		tool:{},  //工具栏配置
		table:{} //表格配置
	},
	draftsBox:{ //草稿箱
		search:{}, //表单配置
		tool:{},  //工具栏配置
		table:{} //表格配置
	},
	all:{}, //综合查询（配置同上）
	recycleBin:{} //回收站（配置同上）
 }
 */
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import VueViews from '@/benyun/compVue/VueViews'
	import billModule from "./billModule.vue";
	@Component({ components: { billModule } })
	export default class ByBill extends VueViews {
		showTab = "bill"
		closeTab = false;
		billValue = {};
		activeSource = 'source0';
		drawer = false;
		//引单
		get sourceConfig() {
			return this.config?.source ? this.config.source : null;
		}
		//单据配置
		get billConfig() {
			return this.config?.bill ? this.config.bill : null;
		}
		//已提交配置
		get smtConfig() {
			return this.config?.smt ? this.config.smt : null;
		}
		//草稿箱配置
		get draftsBoxConfig() {
			return this.config?.draftsBox ? this.config.draftsBox : null;
		}
		//综合查询配置
		get allConfig() {
			return this.config?.all ? this.config.all : null;
		}
		//回收站配置
		get recycleBinConfig() {
			return this.config?.recycleBin ? this.config.recycleBin : null;
		}
		//自定义插槽
		get customs() {
			return this.config?.customs ? this.config.customs : []
		}

		created() {
			if (this.propConfig) {
				this.setConfig(this.propConfig)
			}
		}
		//日志弹窗
		showLog() {
			if (this.$refs.billForm) {
				this.billValue = (this.$refs.billForm as any).getValue();
				this.drawer = true;
			}
			if (this.$refs.log) {
				(this.$refs.log as any).request();
			}
		}

		setConfigAfter() {
			if (this.attrs.activeName) {
				this.showTab = this.attrs.activeName
			}
		}

		//设置单据内表单和表格配置
		setBillConfig(c : any) {
			if (c) {
				this.config.bill = c;
				this.$nextTick(() => {
					if (c.form) {
						(this.$refs.billForm as any).setConfig(c.form)
					}
					if (this.$refs.billTool) {
						(this.$refs.billTool as any).initTools()
					}

					if (c?.tableConfig?.length > 0) {
						let n = 0;
						for (const item of c.tableConfig) {
							if (this.$refs['tableTool_' + n]) {
								(this.$refs['tableTool_' + n] as any)[0].initTools();
							}
							if (item.table && this.$refs['billTable_' + n]) {
								(this.$refs['billTable_' + n] as any)[0].setConfig(item.table)
							}
							n++;
						}
					}
				})
			}
		}

		//左侧tab切换
		tabChange(t : string) {
			this.showTab = t;
			this.$emit('clickTab', t)
		}

		//工具栏
		/**
		 * 
		 * @param n1 方法
		 * @param n2 表示哪个表格的操作
		 */
		clickHandle(n1 : string, n2 : string) {
			this.$emit(n1, n2)
		}
		search(v : any, n : string) {
			this.$emit('search', {
				type: n,
				value: v
			})
		}

		resert(n : string) {
			this.$emit('resert', {
				type: n
			})
		}

		//设置引单表格数据
		setSourceTableData(n : any, data : Array<any>) {
			const code = 'source_' + n;
			if (this.$refs[code]) {
				(this.$refs[code] as any)[0]?.setTableValue(data)
			}
		}

		//获取引单表格数据
		getSourceTableData(n : any) {
			let d : Array<any> = [];
			const code = 'source_' + n;
			if (this.$refs[code]) {
				d = (this.$refs[code] as any)[0]?.getTableValue()
			}
		}

		//获取引单表格选中数据
		getSourceTableSelectData(n : any) {
			let d : Array<any> = [];
			const code = 'source_' + n;
			if (this.$refs[code]) {
				d = (this.$refs[code] as any)[0]?.getTableValue()
			}
			return d;
		}
		//获取引单搜索数据
		getSourceSearchData(n : any) {
			let d : any = {};
			const code = 'source_' + n;
			if (this.$refs[code]) {
				d = (this.$refs[code] as any)[0]?.getSearchValue()
			}
			return d;
		}
		//设置引单分页
		setSourcePage(n : any, page : any) {
			const code = 'source_' + n;
			if (this.$refs[code]) {
				(this.$refs[code] as any)[0]?.setPage(page)
			}
		}

		//获取表格数据
		getTableData(n : string) {
			let d : Array<any> = [];
			if (this.$refs[n]) {
				d = (this.$refs[n] as any).getTableValue()
			}
			return d;
		}
		//获取表格选中数据
		getTableSelectData(n : string) {
			let d : Array<any> = [];
			if (this.$refs[n]) {
				d = (this.$refs[n] as any).getSelectTable()
			}
			return d;
		}
		//获取搜索数据
		getSearchValue(n : string) {
			let d : any = {};
			if (this.$refs[n]) {
				d = (this.$refs[n] as any).getSearchValue()
			}
			return d;
		}

		//获取单据数据
		getBillFormValue() {
			let v = (this.$refs.billForm as any).getValue();
			return v;
		}

		onChangeRow(row : any) {
			this.$emit('onChangeRow', row);
		}

		//获取单据表格已选数据
		/**
		 * 
		 * @param n 表示第几个单据表格，用下标表示
		 */
		getBillTableSelect(n : any) {
			let d : Array<any> = [];
			const code = 'billTable_' + n;
			if (this.$refs[code]) {
				d = (this.$refs[code] as any)[0].getSelectData();
			}
			return d;
		}

		//获取单据表格数据
		getBillTableData(n : any) {
			let d : Array<any> = [];
			const code = 'billTable_' + n;
			if (this.$refs[code]) {
				d = (this.$refs[code] as any)[0].getValue();
			}
			return d;
		}


		//设置单据表单数据
		setBillFormValue(value : any) {
			if (this.$refs['billForm']) {
				(this.$refs['billForm'] as any).setValue(value)
			}
		}
		//设置单据表格数据
		/**
		 * 
		 * @param value 表格值
		 * @param n 表示第几个表格，一般是下标值
		 */
		setBillTableValue(value : any, n : number) {
			let code = 'billTable_' + n;
			if (this.$refs[code]) {
				(this.$refs[code] as any)[0].setValue(value);
			}
		}
		//设置tab表格数据
		/**
		 * 
		 * @param n 
		 * @param data 
		 */
		setTabTableValue(n : string, data : Array<any>) {
			if (this.$refs[n]) {
				(this.$refs[n] as any).setTableValue(data);
			}
		}

		/**
		 * 
		 * @param n 
		 * @param page 
		 */
		//设置tab表格分页
		setTablePage(n : string, page : any) {
			if (this.$refs[n]) {
				(this.$refs[n] as any).setPage(page);
			}
		}

		/**
		 * 获取表格分页
		 * @param n 
		 */
		getTablePage(n : string) {
			if (this.$refs[n]) {
				return (this.$refs[n] as any).getPage();
			}
		}

		//分页变化
		paginationChange(page : any, n : string) {
			this.$emit('pagination', { page, type: n })
		}

		detail(row : any, n : string) {
			this.$emit('detail', { row, type: n })
		}

		getSupplierModal(e : any) {
			this.$emit('getSupplierModal', e);
		}
		getbusinessType(e : any) {
			this.$emit('getbusinessType', e);
		}
	}
</script>

<style lang="scss" scoped>
	.bill {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		padding: 16px;

		.bill-left {
			position: relative;
			border-right: solid #EEE 1px;
			padding-right: 16px;
			flex-shrink: 0;
			min-height: 780px;

			.bill-tab {
				width: 200px;
				height: 100%;
				transition: all .5s;
				overflow: hidden;
			}

			.bill-title {
				font-size: 16px;
				padding-bottom: 16px;
				width: 200px;
			}

			.bill-nav {
				font-size: 14px;
				height: 30px;
				line-height: 30px;
				width: 200px;
				box-sizing: border-box;
				padding: 0 8px;
				cursor: pointer;
				margin-bottom: 2px;
				border-radius: 5px;
			}

			.onBill {
				background-color: #bde3f7;
			}

			.bill-nav:hover {
				background-color: #bde3f7;
			}

			.close {
				height: 22px;
				width: 22px;
				border-radius: 50%;
				border: solid #EEE 1px;
				position: absolute;
				top: 30px;
				right: -11px;
				background-color: #FFF;
				display: flex;
				justify-content: center;
				align-items: center;
				cursor: pointer;
			}
		}

		.bill-main {
			width: calc(100% - 16px);
			box-sizing: border-box;
			margin-left: 16px;
			position: relative;

			.bill-box {
				width: 100%;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0;
				z-index: -1;
				transition: all .5s;

				.bill-cont {
					width: 100%
				}

				.bill-table {
					padding-bottom: 16px;
					width: 100%;

					.table-title {
						font-size: 14px;
						padding-bottom: 8px;
					}
				}

				.bill-table:last-child {
					padding: 0;
				}

				.bill-tool,
				.table-tool {
					width: 100%;
					padding-bottom: 16px;
				}

				.form {
					margin-bottom: 8px;
				}

				.bill-log {
					width: 30px;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					flex-shrink: 0;
					margin-left: 8px;
					border-left: solid 1px #EEE;

					.log-icon {
						// background-color: #EEE;
						width: 30px;
						height: 40px;
						display: flex;
						justify-content: center;
						align-items: center;
						cursor: pointer;

						.el-icon-notebook {
							font-size: 20px;
						}
					}
				}
			}

			.b-bill {
				display: flex;
				justify-content: space-between;
			}

			.on-show {
				opacity: 1;
				z-index: 1;
			}
		}
	}
</style>

<style lang="scss">
	.log-drawer {
		.el-drawer__body {
			height: calc(100% - 63px);
		}
	}
</style>