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

<template>
	<div class="my-container">
		<transition name="el-zoom-in-center">
			<div class="bill-main" key="index">
				<module-view :propConfig="config" v-show="isShow==='home'" ref="moduleView" @pagination="getDataList"
					@search="getDataList" @resert="onRefresh" @detail="openEdit" @onRefresh="onRefresh">
				</module-view>
			</div>
		</transition>
		<!-- 新增/编辑弹窗 -->
		<transition name="el-zoom-in-center">
			<div class="detil" v-show="isShow==='add'" key="index2">
				<by-tool :propConfig="toolConfig" @clickHandle="insideTools" ref="byTool" />
				<div class="box-shadow">
					<by-table :propConfig="skuConfig" ref="addFormId"></by-table>
				</div>
			</div>
		</transition>
	</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";
	@Component({ components: { ForTab } })
	export default class Attribute extends Vue {
		// 右边
		isShow : any = 'home'
		timeNum = 0;
		calculateCount = 0;
		timer : any = null
		toolConfig = {
			tools: {
				return: true,
				save: true,
			},
			customTools: [
				// {
				// 	name: '同步到财务系统', icon: 'el-icon-top', audit: [''], event: {
				// 		click: () => {
				// 			(this as any).syncSystem()
				// 		}
				// 	}
				// },
			]
		}
		skuConfig : any = {
			attr: {
				size: 'mini',
				align: 'left',
			},
			columns: [
				{
					width: '150px',
					title: '标题',
					field: 'skuTitle',

				},
				{
					width: '120px',
					title: '副标题',
					field: 'skuSubtitle',

				},
				{
					width: '140px',
					title: '物料编码',
					field: 'skuCode',

				},
				{
					width: '140px',
					title: '财务编号',
					field: 'financialCode',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '90px',
					title: '价格',
					field: 'price',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "number",
							defaultValue: 0
						},
					}
				},
				{
					width: '90px',
					title: '单位',
					field: 'unit',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
						},
					}
				},
				{
					width: '90px',
					title: '单位编码',
					field: 'unitCode',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
						},
					}
				},
				{
					width: '110px',
					title: '保质期（天）',
					field: 'shelfLife',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "integer",
						},
					}
				},
				{
					width: '90px',
					title: '重量/g',
					field: 'weight',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "number",
						},
					}
				},
				{
					width: '90px',
					title: '长/cm',
					field: 'length',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "number",
						},
					}
				},
				{
					width: '90px',
					title: '宽/cm',
					field: 'width',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "number",
						},
					}
				},
				{
					width: '90px',
					title: '高/cm',
					field: 'height',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' ',
							type: "number",
						},
					}
				},
				{
					width: '90px',
					title: '体积/cm³',
					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: '财务编号',
							prop: 'financialCode',
							component: 'by-input',
							compConfig: {
								attr: {
									placeholder: '请输入财务编号',
									clearable: true
								}
							}
						},
					],
				]
			},
			tool: {
				tools: {
					search: true,
					refresh: true,
				},
				// customTools: [
				// 	{
				// 		name: '同步到财务系统', icon: 'el-icon-top', audit: [''], event: {
				// 			click: () => {
				// 				(this as any).syncSystem()
				// 			}
				// 		}
				// 	},
				// ]
			},
			table: {
				attr: {
					size: 'mini',
					align: 'left',
					height: '620'
				},
				columns: [
					{
						width: '200px',
						title: '标题',
						field: 'skuTitle',
						isDetail: true
					},
					{
						width: '200px',
						title: '副标题',
						field: 'skuSubtitle',
					},
					{
						width: '140px',
						title: '物料编码',
						field: 'skuCode',
					},
					{
						width: '140px',
						title: '财务编号',
						field: 'financialCode',
					},
					{
						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 - 300;
			(this as any).$refs.moduleView.$refs[tableId].recalculate();
		}

		// 保存
		doFormData() {
			let data : any = (this as any).$refs.addFormId.getValue()
			if (!data[0].financialCode) 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);
			})
		}
		// 获取列表数据
		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) {
					(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) => {
				loading.close();
				if (res.code === 200) {
					this.isShow = 'add';
					setTimeout(() => { (this as any).$refs.addFormId.setValue([res.data]) }, 0);
				} else loading.close();
			}).catch(() => loading.close());
		}
		// 内页工具栏方法
		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;
		height: 100%;

		.bill-left {
			position: relative;
			border-right: solid #EEE 1px;
			padding-right: 16px;
			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: calc(100% - 16px);
			box-sizing: border-box;
			margin-left: 16px;
			position: relative;
		}

		.detil {
			width: 100%;

			.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;
			}
		}

		@media screen and (min-width: 1700px) {
			.bill-main {
				min-width: 1450px;
			}
		}
	}
</style>