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

<template>
	<div class="my-container">
		<div class="bill-main" v-show="isShow==='home'" key="index">
			<module-view :propConfig="config" ref="moduleView" @pagination="getDataList" @search="getDataList"
				@resert="onRefresh" @detail="openEdit" @onRefresh="onRefresh">
			</module-view>
		</div>
		<!-- 新增/编辑弹窗 -->
		<div class="detail" v-show="isShow==='detail'" key="index2">
			<by-tool :propConfig="toolConfig" @clickHandle="insideTools" />
			<div class="box-shadow" style="height: 100%;">
				<by-table :propConfig="skuConfig" @onChangeRow="getInputValue" ref="addFormId"></by-table>
			</div>
		</div>
		<StoreRecord ref="StoreRecord" />
	</div>
</template>
<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import api from "@/api/currency";
	import ForTab from "@/components/ForTab/index.vue";
	import wmsStatus from "./components/wmsStatus.vue"
	import StoreRecord from "./components/storeRecord.vue";
	@Component({ components: { ForTab,StoreRecord } })
	export default class Sku extends Vue {
		// 右边
		isShow : any = 'home'
		timeNum = 0;
		calculateCount = 0;
		baseInfo : any = ''
		timer : any = null
		toolConfig = {
			tools: {
				return: true,
				save: true,
			},
			customTools: [
				{
					name: '同步WMS', icon: 'el-icon-top', audit: [''], event: {
						click: () => {
							(this as any).syncSystem2()
						}
					}
				}
			]
		}
		skuConfig : any = {
			attr: {
				size: 'mini',
				align: 'left',
				editRules: {
					skuTitle: [
						{ required: true, message: '请输入标题'}
					],
					skuCode: [
						{ required: true, message: '请输入物料编码'}
					],
					barCode: [
						{ required: true, message: '请输入69码-商品条码'}
					]
				}
			},
			columns: [
				{
					width: '200px',
					title: '标题（必填项）',
					field: 'skuTitle',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}

				},
				{
					width: '200px',
					title: '副标题',
					field: 'skuSubtitle',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}

				},
				{
					width: '140px',
					title: '物料编码（必填项）',
					field: 'skuCode',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}

				},
				{
					width: '110px',
					title: '69码-商品条码（必填项）',
					field: 'barCode',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '140px',
					title: '财务编号',
					field: 'financialCode',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '90px',
					title: '价格',
					field: 'price',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "number",
							defaultValue: 0,
							min: 0
						},
					}
				},
				{
					width: '90px',
					title: '单位',
					field: 'unit',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
						},
					}
				},
				{
					width: '90px',
					title: '单位编码',
					field: 'unitCode',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
						},
					}
				},
				{
					width: '110px',
					title: '保质期（天）',
					field: 'shelfLife',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "integer",
							min: 0
						},
					}
				},
				{
					width: '90px',
					title: '重量/g',
					field: 'weight',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "number",
							min: 0
						},
					}
				},
				{
					width: '90px',
					title: '长/cm',
					field: 'length',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "number",
							min: 0
						},
					}
				},
				{
					width: '90px',
					title: '宽/cm',
					field: 'width',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "number",
							min: 0
						},
					}
				},
				{
					width: '90px',
					title: '高/cm',
					field: 'height',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "number",
							min: 0
						},
					}
				},
				{
					// width: '90px',
					title: '体积/cm³',
					width:90,
					field: 'volume',
				},
			]
		}
		config : any = {
			search: {
				attr: {
					size: 'mini',
				},
				columns: [
					[
						{
							span: 6,
							label: '物料编码',
							prop: 'skuCode',
							component: 'by-input',
							labelWidth: '70px',
							compConfig: {
								attr: {
									placeholder: '请输入物料编码',
									clearable: true
								}
							}
						},
						{
							span: 6,
							label: '69码-商品条码',
							prop: 'barCode',
							labelWidth: '130px',
							component: 'by-input',
							compConfig: {
								attr: {
									placeholder: '69码-商品条码',
									clearable: true
								}
							}
						},
						{
							span: 6,
							label: '财务编号',
							prop: 'accountingCode',
							component: 'by-input',
							compConfig: {
								attr: {
									placeholder: '请输入财务编号',
									clearable: true
								}
							}
						},
						{
							span: 6,
							label: '商品名称',
							prop: 'skuTitle',
							component: 'by-input',
							compConfig: {
								attr: {
									placeholder: '请输入商品名称',
									clearable: true
								}
							}
						}
					],
				]
			},
			tool: {
				tools: {
					search: true,
					refresh: true,
				},
				customTools: [
					{
						name: '同步WMS', icon: 'el-icon-top', audit: [''], event: {
							click: () => {
								(this as any).syncSystem()
							}
						}
					},
					{
						name: '商品监控', icon: 'el-icon-document', event: {
							click: () => {
								let data = (this.$refs.moduleView as any).getSelectData();
								if(data.length !== 1) {
									this.$message('请选择一条SKU商品！')
									return
								}
								(this.$refs.StoreRecord as any).setShow(true);
								(this.$refs.StoreRecord as any).setData(data[0]);
							}
						}
					}
				]
			},
			table: {
				attr: {
					size: 'mini',
					align: 'left',
					height: '620',
					checkbox: true,
					triggerRowCheck:'row'
				},
				columns: [
					{
						width: '200px',
						title: '标题',
						field: 'skuTitle',
						isDetail: true,
						fixed: 'left'
					},
					{
						width: '200px',
						title: '副标题',
						field: 'skuSubtitle',
					},
					{
						width: '140px',
						title: '物料编码',
						field: 'skuCode',
					},
					{
						width: '140px',
						title: '69码-商品条码',
						field: 'barCode',
					},
					{
						width: '140px',
						title: '财务编号',
						field: 'financialCode',
					},
					{
						width: '200px',
						title: '商品名称',
						field: 'extData',
					},
					{
						width: '80px',
						title: '是否已同步WMS',
						field: 'isSynchronousWMS',
						component: wmsStatus,
					},
					{
						width: '80px',
						title: '价格',
						field: 'price',
					},
					{
						width: '80px',
						title: '单位',
						field: 'unit',
					},
					{
						width: '80px',
						title: '单位编码',
						field: 'unitCode',
					},
					{
						width: '100px',
						title: '保质期（天）',
						field: 'shelfLife',
					},
					{
						width: '80px',
						title: '重量/g',
						field: 'weight',
					},
					{
						width: '80px',
						title: '长/cm',
						field: 'length',
					},
					{
						width: '80px',
						title: '宽/cm',
						field: 'width',
					},
					{
						width: '80px',
						title: '高/cm',
						field: 'height',
					},
					{
						width: '90px',
						title: '体积/cm³',
						field: 'volume',
					},
					{
						width: 70,
						title: '操作',
						action: true,
						plugins: [{
							icon: 'el-icon-edit',
							name: '编辑',
							audit: '',
							event: {
								click: (item : any) => {
									(this as any).openEdit(item)
								}
							}
						}]
					},
				]
			},
		}
		mounted() {
			this.timer = setInterval(() => {
				this.getDataList();
				this.initTable();
			}, 300)
		}
		// 计算高度
		initTable() {
			if (!this.$refs.moduleView) {
				this.calculateCount++;
				if (this.calculateCount > 5) return;
				setTimeout(() => {
					this.initTable()
				}, 500)
				return
			}
			let tableId : any = (this as any).$refs.moduleView.tableID;
			this.config.table.attr.height = window.innerHeight - 320;
			(this as any).$refs.moduleView.$refs[tableId].recalculate();
		}
		// 同步财务系统
		syncSystem() {
			let selectData = (this as any).$refs.moduleView.getSelectData();
			if (selectData.length > 0) {
				// if (selectData.length > 1) return this.$message.warning('只能同步一条数据');
				// if (selectData[0].financialCode) return this.$message.warning('此数据已同步WMS');
				this.$confirm('确定同步WMS吗', '注意', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					center: true
				}).then(() => {
					let ids = '';
					selectData.map((v : any) => {
						ids += v.id + ','
					})
					ids = ids.slice(0, ids.length - 1);
					let loading = this.$loading({ target: '.main-container' });
					api.WMSPushProducts({ ids: ids }).then((res : any) => {
						if (res.code === 200) {
							this.$message.success('同步WMS成功');
							loading.close();
							this.getDataList();
						} else loading.close();
					}).catch(() => loading.close());
				}).catch(() => this.$message.info('已取消同步WMS'));
			} else this.$message.warning('请选择同步数据');
		}
		syncSystem2() {
			this.$confirm('确定同步WMS吗', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			}).then(() => {
				let loading = this.$loading({ target: '.main-container' });
				api.WMSPushProducts({ ids: this.baseInfo.id }).then((res : any) => {
					if (res.code === 200) {
						this.$message.success('同步WMS成功');
						loading.close();
						this.getDataList();
					} else loading.close();
				}).catch(() => loading.close());
			}).catch(() => this.$message.info('已取消同步WMS'));
		}
		// 保存
		doFormData() {
			let data : any = (this as any).$refs.addFormId.getValue();
			(this.$refs.addFormId as any).validate();
			if (!data[0].skuTitle) return this.$message.warning('物料标题不能为空');
			if (!data[0].skuCode) return this.$message.warning('物料编码不能为空');
			if (!data[0].barCode) return this.$message.warning('物料属性的69码-商品条码需必填');
			if (!/^\d{1,32}$/.test(data[0].barCode)){
				return this.$message.warning('69码-商品条码为数字，最大32位');
			}
			if (!/^[a-zA-Z0-9]+$/.test(data[0].skuCode)){
				return this.$message.warning('物料编码只能是字母和数字');
			}
			api.updateList(data[0], 'maindataMaterialSku').then((res : any) => {
				if (res.code === 200) {
					this.$message.success('编辑成功');
					this.isShow = 'home';
					this.getDataList();
				} else this.$message.error(res.msg);
			}).catch(() => {});
		}
		// 获取列表数据
		getDataList() {
			if (!this.$refs.moduleView) {
				if (this.timeNum > 5) {
					clearInterval(this.timer)
				}
				this.timeNum++;
				return
			}
			clearInterval(this.timer)
			let query = (this.$refs.moduleView as any).getQuery();
			// console.log('表单字段 ==> ', query);
			this.getPageList(query)
		}
		getPageList(query : any) {
			let loading = this.$loading({ target: '.main-container' });
			api.pageList(query, 'maindataMaterialSku').then((res : any) => {
				loading.close();
				if (res.code === 200) {
					res.data.records.map((v : any, i : any) => {
						if(v.volume&&v.weight!='0.00'&&v.weight!=0&&v.weight!='0'){
							v.weight = parseFloat(v.weight).toFixed(2)
						}
						if(v.volume&&v.volume!='0.00'&&v.volume!=0&&v.volume!='0'){
							v.volume = parseFloat(v.volume).toFixed(2)
						}
					});
					(this.$refs.moduleView as any).setTableValue(res.data.records);
					let page = {
						pageNo: res.data.current, //当前页
						pageSize: res.data.size, //每页条数
						total: res.data.total //总条数
					};
					(this.$refs.moduleView as any).setPage(page);
				} else this.$message.error(res.msg);
			}).catch(() => loading.close());
		}
		// 打开编辑
		openEdit(e : any) {
			let loading = this.$loading({ target: '.main-container' });
			api.single({ id: e.id }, 'maindataMaterialSku').then((res : any) => {
				if (res.code === 200) {
					this.baseInfo = res.data;
					this.isShow = 'detail';
					loading.close();
					if(res.data.volume&&res.data.volume!='0.00'&&res.data.volume!=0&&res.data.volume!='0'){
						res.data.volume = parseFloat(res.data.volume).toFixed(2)
					}
					setTimeout(() => { (this as any).$refs.addFormId.setValue([res.data]) }, 0);
				} else loading.close();
			}).catch(() => loading.close());
		}
		// 监听表格数据
		getInputValue(e : any) {
			// console.log('监听表格 ==> ', e);
			if (e.length && e.width && e.height) {
				e.volume = (e.length * e.width * e.height).toFixed(2);
			}
		}
		// 内页工具栏方法
		insideTools(e : any) {
			if (e === 'onReturn') this.isShow = 'home';
			if (e === 'onSave') this.doFormData();
		}
		// 刷新/重置
		onRefresh() {
			(this as any).$refs.moduleView.clearSearch();
			this.getDataList();
		}
	}
</script>
<style lang="scss" scoped>
	.my-container {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		padding: 16px;
		height: 100%;

		.bill-left {
			position: relative;
			border-right: solid #EEE 1px;
			flex-shrink: 0;

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

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

		.bill-main {
			width: 100%;
			box-sizing: border-box;
			position: relative;
			height: 100%;
			overflow-y: hidden;
		}

		.detail {
			width: 100%;
			padding: 16px;

			.box-shadow {
				box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
				padding: 20px;
				border-radius: 4px;
				border: 1px solid #e6ebf5;
				background-color: #fff;
				overflow: hidden;
				color: #303133;
				-webkit-transition: .3s;
				transition: .3s;
				margin-top: 20px;
			}
		}
	}
</style>