oms/src/views/audit/orderTask/components/productModal.vue

<template>
	<vxe-modal v-model="value" id="productDialogModal" :width="width?width+'px':'90%'" @show="show"
		:height="height?height+'px':'90%'" show-zoom resize transfer show-footer
		@confirm="confirm">
		<template #title>
			<span>选择商品</span>
		</template>
		<template #default>
			<module-view :propConfig="config" ref="view" @pagination="getList" @search="getList" @resert="getList"
				@clickHandle="clickHandle" />
		</template>
	</vxe-modal>
</template>

<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	@Component
	export default class ProductModal extends Vue {
		value = false
		time : any;
		timeNum = 0;
		data : Array<any> = []

		@Prop()
		width ?: number

		@Prop()
		height ?: number

		@Prop()
		mulit ?: boolean

		config : any = {
			search: {
				attr: {
					size: 'mini'
				},
				columns: [
					[{
						span: 6,
						label: '标题',
						prop: 'skuTitle',
						component: 'by-input',
						compConfig: {
							attr: {
								clearable: true,
								placeholder: '请输入名称'
							}
						}
					}]
				]
			},
			tool: {
				tools: {
					search: true,
					refresh: true
				}
			},
			table: {
				attr: {
					size: 'mini',
					seq: true,
					align: 'left',
					checkbox:true,
					triggerRowCheck: 'row',
					calculateH:'100%'
				},
				columns:
					[
						{
							title: '标题',
							field: 'skuTitle',
							width: 250
						},
						{
							title: '副标题',
							field: 'skuSubtitle',
							width: 250
						},
						{
							width: 250,
							title: '财务编号',
							field: 'financialCode',
						},
						{
							title: '规格',
							field: 'materialSpec',
							width: 250
						},
						{
							title: '单位',
							field: 'unit',
							width: 250
						},
						{
							title: '单价',
							field: 'price',
							width: 250
						},
					]
			},
		}
		brandData : Array<any> = []

		getBrandData() {
			return this.brandData;
		}

		clickHandle(n : string) {
			if (n == 'onRefresh') {
				this.getList()
			}
		}

		setShow(v : boolean) {
			this.value = v;
		}

		mounted() { }

		//确定
		confirm() {
			let data : Array<any> = this.getSelectdata();
			this.$emit('confirm', data);
			this.value = false;
		}
		//获取已选中表格数据
		getSelectdata() {
			let data : Array<any> = [];
			if (this.$refs.view) {
				data = (this.$refs.view as any).getSelectData()
			}
			return data;
		}
		//显示弹窗
		show() {
			if (this.data.length == 0) {
				this.time = setInterval(() => {
					this.getList()
				}, 500)
			}
			if (this.$refs.view) {
				(this.$refs.view as any).clearCheckboxRow();
			}
		}
		getList() {
			if (!this.$refs.view) {
				if (this.timeNum > 5) {
					clearInterval(this.time)
				}
				this.timeNum++;
				return
			}
			clearInterval(this.time)
			let query : any = (this.$refs.view as any).getQuery();
			query.isLikeSearch = '1';
			(this as any).$request({
				url: '/maindata/maindataMaterialSku/page',
				method: 'get',
				params: query
			}).then((res : any) => {
				if (res.data.records) {
					(this.$refs.view as any).setTableValue(res.data.records);
					this.data = res.data.records;
					let page = {
						pageNo: res.data.current, //当前页
						pageSize: res.data.size, //每页条数
						total: res.data.total //总条数
					};
					(this.$refs.view as any).setPage(page)
				}
			})
		}
	}
</script>
<style lang="scss" scoped>

</style>