oms/src/views/audit/saleOrder/components/byBill/billModule.vue

<template>
	<div class="bill-module-box">
		<div class="bill-module-form" v-if="searchConfig" v-show="!hideSearch">
			<by-form :propConfig="searchConfig" ref="search" />
			<div class="search-btn">
				<el-button type="primary" size="mini" icon="el-icon-search" @click="search">搜索</el-button>
				<el-button size="mini" icon="el-icon-refresh" @click="resert">重置</el-button>
			</div>
		</div>
		<div class="bill-tool" v-if="toolConfig">
			<by-tool :propConfig="toolConfig" ref="tool" @clickHandle="clickHandle" />
		</div>
		<div class="table" v-if="tableConfig">
			<by-table :propConfig="tableConfig" ref="table" v-on="$listeners" />
		</div>
	</div>
</template>

<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	@Component
	export default class BillModule extends Vue {
		config : any = {}
		hideSearch = false

		@Prop()
		propConfig : any

		get searchConfig() {
			return this.config?.search ? this.config.search : null
		}

		get toolConfig() {
			return this.config?.tool ? this.config.tool : null
		}

		get tableConfig() {
			return this.config?.table ? this.config.table : null
		}

		created() {
			if (this.propConfig) {
				this.setConfig(this.propConfig)
			}
		}

		setConfig(c : any) {
			this.config = c ? c : {}
		}

		getConfig() {
			return (this as any).$lodash.cloneDeep(this.config)
		}
		//工具栏按钮点击操作
		clickHandle(n : string) {
			if (n == 'toggleSearch') {
				this.hideSearch = !this.hideSearch
			} else {
				this.$emit('clickHandle', n)
			}
		}

		//获取搜索值
		getSearchValue() {
			let value : any = {}
			if (this.$refs.search) {
				value = (this.$refs.search as any).getValue()
			}
			return value
		}
		//获取表格数据
		getTableValue() {
			let data : Array<any> = [];
			if (this.$refs.table) {
				data = (this.$refs.table as any).getValue();
			}
			return data;
		}
		//获取已选中表格数据
		getSelectTable() {
			let data : Array<any> = [];
			if (this.$refs.table) {
				data = (this.$refs.table as any).getSelectData();
			}
			return data;
		}
		//清除搜索条件
		clearSearch() {
			(this.$refs.search as any).clearValue();
		}
		search() {
			this.$emit('search', this.getSearchValue());
		}
		resert() {
			if (this.$refs.search) {
				(this.$refs.search as any).setValue({})
			}
			this.$emit('resert');
		}
		//设置表格数据
		setTableValue(data : Array<any>) {
			if (this.$refs.table) {
				(this.$refs.table as any).setValue(data)
			}
		}
		setPage(page : any) {
			if (this.$refs.table) {
				(this.$refs.table as any).setPage(page)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bill-module-box {
		width: 100%;

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

		.bill-module-form {
			padding-bottom: 8px;

			.search-btn {
				width: 100%;
				display: flex;
				justify-content: flex-end;
			}
		}

	}
</style>