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

<template>
	<div class="my-container">
		<transition-group name="fade" style="position: relative;width: 100%;display: flex;">
			<div class="bill-left" v-show="isShow==='home'" key="item">
				<div class="bill-tab">
					<div class="title">导航</div>
					<el-tree :data="data" :props="props" @node-click="handleNodeClick"></el-tree>
				</div>
			</div>
			<div class="bill-main" v-show="isShow==='home'" key="item2">
				<module-view :propConfig="config" ref="moduleView" @pagination="getDataList" @search="getDataList"
					@resert="getDataList" @clickHandle="clickHandle" @detail="getDetail" />
			</div>
			<!-- 新增 -->
			<div class="detil" v-show="isShow==='add'" key="item3">
				<by-tool :propConfig="toolConfig" @clickHandle="insideTools" />
				<div class="box-shadow">
					<by-form :propConfig="formConfig" ref="form">
						<template v-slot:description>
							<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea">
							</el-input>
						</template>
						<template v-slot:radio>
							<el-radio v-model="materialSpec" :label="0" @input="changeSingle">单规格</el-radio>
							<el-radio v-model="materialSpec" :label="1" @input="changeSingle">多规格</el-radio>
						</template>
						<template v-slot:attributeName>
							<div v-if="isSingle" key="item4">
								<by-table :propConfig="singleTable" ref="singeTable"></by-table>
							</div>
							<div v-if="!isSingle" key="item5">
								<el-select v-model="selectValue" clearable placeholder="请选择" style="width: 19.5%;"
									@input="getSelectValue">
									<el-option v-for="item in selectList" :key="item.value" :label="item.name" :value="item.id">
									</el-option>
								</el-select>
								<div class="by-tab" v-if="isTab" key="item6">


									<div v-for="(item,index) of columns" :key="index">
										<div class="title">{{item.title}} <i class="el-icon-circle-close" @click="closeGroup(index)"></i>
										</div>
										<el-tag class="item-tab" :disable-transitions="true" :key="i" v-for="(tag,i) of item.list" closable
											@close="handleClose(tag,index)">
											{{tag}}
										</el-tag>
										<by-input class="input-new-tag" :ref="'getValue_'+index"></by-input>
										<el-button class="button-new-tag" @click="showInput(index)">添加</el-button>
									</div>


									<div style="margin: 20px 0;" v-if="!isAdd" key="item7">
										<div class="el-button mr15 el-button--primary el-button--small" @click="isAdd=true">添加新规格</div>
										<div @click="generateNow" class="el-button el-button--success el-button--small">立即生成</div>
									</div>
									<div style="display: flex;margin: 20px 0;" v-else key='item8'>
										<div class="flex-item">
											<label>规格：</label>
											<div class="el-input el-input--small" style="width: 250px;">
												<input type="text" v-model="norms" placeholder="请输入规格" class="el-input__inner">
											</div>
										</div>
										<div class="flex-item">
											<label>规格值：</label>
											<div class="el-input el-input--small" style="width: 250px;">
												<input type="text" v-model="normsValue" placeholder="请输入规格值" class="el-input__inner">
											</div>
										</div>
										<div @click="doComfirm" class="el-button el-button--primary el-button--small">确定</div>
										<div @click="isAdd=false" class="el-button el-button--danger el-button--small">取消</div>
									</div>
									<div v-if="isTable" key="item9"><by-table :propConfig="tableConfig" ref="table"></by-table></div>
								</div>
							</div>
						</template>
						<template v-slot:status>
							<el-radio v-model="radioStatus" :label="1">启用</el-radio>
							<el-radio v-model="radioStatus" :label="2">备用</el-radio>
							<el-radio v-model="radioStatus" :label="3">禁用</el-radio>
						</template>
						<template v-slot:ismakeup>
							<el-radio v-model="ismakeup" :label="1">是</el-radio>
							<el-radio v-model="ismakeup" :label="2">否</el-radio>
						</template>
						<template v-slot:issued>
							<el-radio v-model="issued" :label="1">是</el-radio>
							<el-radio v-model="issued" :label="2">否</el-radio>
						</template>
						<template v-slot:tags>
							<!-- <div v-for="(item,index) of tabList" :key="index">
								<div class="title">{{item.title}} <i class="el-icon-circle-close" @click="closeGroup(index)"></i>
								</div>
								<el-tag class="item-tab" :disable-transitions="true" :key="i" v-for="(tag,i) of item.list" closable
									@close="handleClose(tag,index)">
									{{tag}}
								</el-tag>
								<by-input class="input-new-tag" :ref="'getValue_'+index"></by-input>
								<el-button class="button-new-tag" @click="showInput(index)">添加</el-button>
							</div> -->
						</template>
					</by-form>
				</div>
			</div>
		</transition-group>
	</div>
</template>
<script lang="ts">
	import { Component, Prop, Vue, Watch } from "vue-property-decorator";
	import api from '@/api/currency'
	import other from '@/api/other'
	import ForTab from "@/components/ForTab/index.vue";
	@Component({ components: { ForTab } })
	export default class productManagement extends Vue {
		isShow = 'home'
		isEdit = true
		isSingle : any = true
		timeNum = 0;
		timer : any = null
		data : any = []
		materialSpec : any = 0
		radioStatus : any = 1
		ismakeup : any = 1
		issued : any = 1
		textarea : any = ''
		categoryId : any = ''
		selectList = []
		selectValue = ''
		tabList = []
		// tab
		columns : any = []
		inputValue : any = ''
		norms : any = ''
		normsValue : any = ''
		isAdd : any = false
		isTab : any = false
		isTable : any = false
		skuRuleList : any = ''
		tableList : any = ''
		attributeId : any = ''
		// tab
		singleTable : any = {
			attr: {
				size: 'mini',
				height: 78,
				align: 'center',
			},
			columns: [
				// {
				// 	title: '标题',
				// 	field: 'skuTitle',
				// 	component: 'by-input',
				// 	compConfig: {
				// 		attr: {
				// 			size: 'mini',
				// 			placeholder: ' '
				// 		},
				// 	}
				// },
				// {
				// 	title: '副标题',
				// 	field: 'skuSubtitle',
				// 	component: 'by-input',
				// 	compConfig: {
				// 		attr: {
				// 			size: 'mini',
				// 			placeholder: ' '
				// 		},
				// 	}
				// },
				{
					// width: '100px',
					title: '价格',
					field: 'price',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					// width: '100px',
					title: '库存',
					field: 'stock',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					// width: '100px',
					title: '保质期（天）',
					field: 'shelfLife',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					// width: '100px',
					title: '重量',
					field: 'weight',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					// width: '100px',
					title: '长',
					field: 'length',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					// width: '100px',
					title: '宽',
					field: 'width',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					// width: '100px',
					title: '高',
					field: 'height',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					// width: '100px',
					title: '体积',
					field: 'volume',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
			]
		}
		tableConfig : any = {
			attr: {
				size: 'mini',
				height: 486,
				align: 'center',
			},
			columns: [
				{
					title: '标题',
					field: 'skuTitle',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					title: '副标题',
					field: 'skuSubtitle',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '100px',
					title: '价格',
					field: 'price',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '100px',
					title: '库存',
					field: 'stock',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '100px',
					title: '保质期（天）',
					field: 'shelfLife',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '100px',
					title: '重量',
					field: 'weight',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '100px',
					title: '长',
					field: 'length',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '100px',
					title: '宽',
					field: 'width',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '100px',
					title: '高',
					field: 'height',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '100px',
					title: '体积',
					field: 'volume',
					component: 'by-input',
					compConfig: {
						attr: {
							size: 'mini',
							placeholder: ' '
						},
					}
				},
				{
					width: '80px',
					title: '操作',
					action: true,
					plugins: [{
						icon: 'el-icon-delete',
						name: '删除',
						audit: '',
						event: {
							click: (item : any) => {
								(this as any).doDeleteTable(item)
							}
						}
					}]
				}
			]
		}
		props = {
			label: 'name',
			value: 'id',
			children: 'children'
		}
		toolConfig = {
			tools: {
				return: true,
				save: true,
			}
		}
		formConfig = {
			attr: {
				size: 'small',
				rules: {
					name: [{
						required: true, message: '请输入名称', trigger: 'blur'
					}],
					// categoryName: [{
					// 	required: true, message: '请输入物料分类', trigger: 'blur'
					// }],
					// vmCategoryName: [{
					// 	required: true, message: '请输入虚拟分类', trigger: 'blur'
					// }],
					// organizationCategoryName: [{
					// 	required: true, message: '请输入机构商品分类', trigger: 'blur'
					// }]
				}
			},
			columns: [
				[
					{
						span: 6,
						label: '名称',
						prop: 'name',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入名称',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '简称',
						prop: 'shortName',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入简称',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '财务编号',
						prop: 'accountingCode',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入财务编号',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '国际码',
						prop: 'nsCode',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入国际码',
								clearable: true
							}
						}
					},
				],
				[
					{
						span: 6,
						label: '基本售价',
						prop: 'basePrice',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入基本售价',
								clearable: true
							}
						}
					}, {
						span: 6,
						label: '市场价格',
						prop: 'markPrice',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入市场价格',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '价格',
						prop: 'price',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入价格(成交、成本价)',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '单位',
						prop: 'unit',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入单位',
								clearable: true
							}
						}
					},
				],
				[
					{
						span: 6,
						label: '重量',
						prop: 'weight',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入重量',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '保质期(天)',
						prop: 'shelfLife',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入保质期(天)',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '库存',
						prop: 'stock',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入库存',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '安全库存',
						prop: 'warningStock',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入安全库存',
								clearable: true
							}
						}
					}
				],
				[
					{
						span: 6,
						label: '货号',
						prop: 'itemNumber',
						component: 'by-input',
						compConfig: {
							attr: {
								placeholder: '请输入货号',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '物料分类',
						prop: 'categoryName',
						component: 'select-tree',
						compConfig: {
							attr: {
								label: 'name',
								clearable: true,
								retConfig: {
									categoryName: 'name',
									categoryId: 'id'
								}
							},
							request: {
								url: '/maindata/maindataMaterialCategory/treeList'
							}
						}
					},
					{
						span: 6,
						label: '虚拟分类',
						prop: 'vmCategoryName',
						component: 'select-tree',
						compConfig: {
							attr: {
								label: 'name',
								clearable: true,
								retConfig: {
									vmCategoryName: 'name',
									vmCategoryId: 'id'
								}
							},
							request: {
								url: '/maindata/maindataMaterialVmcategory/treeList'
							}
						}
					},
					{
						span: 6,
						label: '机构商品分类',
						prop: 'organizationCategoryName',
						component: 'select-tree',
						compConfig: {
							attr: {
								label: 'name',
								clearable: true,
								retConfig: {
									organizationCategoryName: 'name',
									organizationCategoryId: 'id'
								}
							},
							request: {
								url: '/maindata/maindataMaterialOrganizationCategory/treeList'
							}
						}
					}
				],
				[
					{
						span: 30,
						label: '描述',
						slot: true,
						prop: 'description',
					}
				],
				[
					{
						span: 20,
						label: '商品规格',
						slot: true,
						prop: 'radio',
					}
				],
				[
					{
						span: 30,
						label: '物料属性',
						slot: true,
						prop: 'attributeName',
					}
				],
				[
					{
						span: 20,
						label: '物料状态',
						slot: true,
						prop: 'status',
					}
				],
				// [
				// 	{
				// 		span: 20,
				// 		label: '是否组合商品',
				// 		slot: true,
				// 		prop: 'ismakeup',
				// 	}
				// ],
				[
					{
						span: 20,
						label: '是否公布',
						slot: true,
						prop: 'issued',
					}
				],
				[
					{
						span: 20,
						label: '标签',
						slot: true,
						prop: 'tags',
					}
				],
			],

		}
		config : any = {
			search: {
				attr: {
					size: 'mini'
				},
				columns: [
					[{
						span: 6,
						label: '名称',
						prop: 'name',
						component: 'by-input',
						labelWidth: '70px',
						compConfig: {
							attr: {
								placeholder: '请输入名称',
								clearable: true
							}
						},
					}, {
						span: 6,
						label: '简称',
						prop: 'shortName',
						component: 'by-input',
						labelWidth: '70px',
						compConfig: {
							attr: {
								placeholder: '请输入简称',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '财务编号',
						prop: 'accountingCode',
						component: 'by-input',
						labelWidth: '70px',
						compConfig: {
							attr: {
								placeholder: '请输入财务编号',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '国际码',
						prop: 'nsCode',
						component: 'by-input',
						labelWidth: '70px',
						compConfig: {
							attr: {
								placeholder: '请输入国际码',
								clearable: true
							}
						}
					},
					],
					[{
						span: 6,
						label: '基本售价',
						prop: 'basePrice',
						component: 'by-input',
						labelWidth: '70px',
						compConfig: {
							attr: {
								placeholder: '请输入基本售价',
								clearable: true
							}
						},
					}, {
						span: 6,
						label: '价格',
						prop: 'price',
						component: 'by-input',
						labelWidth: '70px',
						compConfig: {
							attr: {
								placeholder: '请输入价格(成交、成本价)',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '保质期',
						prop: 'shelfLife',
						component: 'by-input',
						labelWidth: '70px',
						compConfig: {
							attr: {
								placeholder: '请输入保质期',
								clearable: true
							}
						}
					},
					{
						span: 6,
						label: '库存',
						prop: 'stock',
						component: 'by-input',
						labelWidth: '70px',
						compConfig: {
							attr: {
								placeholder: '请输入库存',
								clearable: true
							}
						}
					},
					]
				]
			},
			tool: {
				tools: {
					add: true,
					delete: true,
					search: true,
					refresh: true
				}
			},
			table: {
				attr: {
					size: 'mini',
					seq: true,
					align: 'center',
					checkbox: true,
					height: 560,
				},
				columns: [{
					width: 250,
					title: '名称',
					field: 'name',
					isDetail: true,
				}, {
					title: '简称',
					field: 'shortName'
				}, {
					width: 120,
					title: '财务编号',
					field: 'accountingCode'
				}, {
					width: 120,
					title: '国际码',
					field: 'nsCode'
				}, {
					title: '基本售价',
					field: 'basePrice'
				}, {
					title: '市场价格', // （市场价格统一售价）
					field: 'markPrice'
				},
				{
					title: '价格', // 价格(成交、成本价)
					field: 'price'
				}, {
					title: '单位',
					field: 'unit'
				}, {
					title: '重量',
					field: 'weight'
				}, {
					title: '保质期', // 保质期（天）
					field: 'shelfLife'
				}, {
					title: '库存',
					field: 'stock'
				}, {
					width: 120,
					title: '操作',
					action: true,
					plugins: [{
						icon: 'el-icon-edit',
						name: '编辑',
						audit: '',
						event: {
							click: (item : any) => {
								(this as any).getDetail(item)
							}
						}
					}, {
						name: '删除',
						event: {
							click: (item : any) => (this as any).doDelete2(item)
						}
					}]
				}]
			},
		}
		mounted() {
			this.getTreeList()
			this.getAttribute()
			this.timer = setInterval(() => {
				this.getDataList()
			}, 500)
		}
		// 保存编辑/新增
		doFormData() {
			(this as any).$refs.form.validate().then(() => {
				let query = (this as any).$refs.form.getValue();
				// console.log('物料信息 ==> ',query);
				query.materialSpec = this.materialSpec; // 商品规格
				query.attributeList = JSON.stringify(this.columns) // 物料属性
				query.attributeId = this.attributeId // 物料属性ID
				query.status = this.radioStatus; // 物料状态
				// query.ismakeup = this.ismakeup; // 商品组合
				query.issued = this.issued; // 是否公布
				query.description = this.textarea; // 备注
				let data : any = {}
				// 多规格
				if (this.materialSpec === 1) {
					if (this.tableList.length <= 0) return (this as any).$message({ type: 'warning', message: '请点击生成规格！' });
					data = { maindataMaterial: query, maindataMaterialSkus: (this as any).$refs.table.getValue() }
					let newArray : any = []
					let materialSpecList : any = []
					// console.log('表格数据 ==> ', this.tableList);
					this.tableList.map((v : any) => {
						for (let kyes in v) {
							if (kyes.indexOf('_field_name') != -1) {
								let key = kyes.split('_field_name')[0]
								newArray.push({ [key]: v[kyes] })
							}
						}
					})
					// console.log(newArray);
					for (var i = 0; i < newArray.length; i += 2) {
						materialSpecList.push(newArray.slice(i, i + 2));
					}
					// console.log('materialSpecList ==> ', materialSpecList);
					data.maindataMaterialSkus.map((v : any, i : any) => {
						v.materialSpec = JSON.stringify(materialSpecList[i])
					})
				} else { // 单规格
					data = { maindataMaterial: query, maindataMaterialSkus: (this.$refs.singeTable as any).getValue() }
					data.maindataMaterialSkus[0].isDeleted = 0;
					data.maindataMaterial.attributeList = ""
				}
				console.log('data ==> ', data);

				if (this.isEdit) { // 编辑
					other.updateSpuAndSku(data, 'maindataMaterial').then((res : any) => {
						if (res.code === 200) {
							this.isShow = 'home';
							this.getDataList();
							this.$message({ type: 'success', message: res.msg })
						}
					})
				} else { // 新增
					other.saveSpuAndSku(data, 'maindataMaterial').then((res : any) => {
						if (res.code === 200) {
							this.isShow = 'home';
							this.getDataList();
							this.$message({ type: 'success', message: res.msg })
						}
					})
				}

			});
		}
		// 新增
		onAdd() {
			this.isShow = 'add';
			this.materialSpec = 0; // 单规格
			this.isSingle = true; // 显示单规格表格
			this.isEdit = false
			setTimeout(() => {
				(this as any).$refs.form.clearValue(); // 设置表单数据
				(this as any).$refs.singeTable.setValue([{}]) // 设置单表格数据
			}, 0)
		}
		// 编辑
		getDetail(e : any) {
			console.log('编辑 ==> ', e);
			let loading = this.$loading({ target: '.my-container' })
			api.single({ id: e.categoryId }, 'maindataMaterialCategory').then((res : any) => {
				if (res.code === 200) e.categoryName = res.data.name
			}).then(() => {
				api.single({ id: e.vmCategoryId }, 'maindataMaterialVmcategory').then((res : any) => {
					if (res.code === 200) e.vmCategoryName = res.data.name
				}).then(() => {
					api.single({ id: e.organizationCategoryId }, 'maindataMaterialOrganizationCategory').then((res : any) => {
						if (res.code === 200) e.organizationCategoryName = res.data.name
					}).then(() => {
						if (e.attributeId) {
							api.single({ id: e.attributeId }, 'maindataMaterialAttribute').then((res : any) => {
								if (res.code === 200) {
									if (res.data) this.selectValue = res.data.name
								}
							})
						}
						this.isEdit = true;
						this.isShow = 'add';
						this.materialSpec = e.materialSpec
						this.isSingle = e.materialSpec === 0 ? true : false;
						this.isTab = true;
						if (e.attributeList) this.columns = JSON.parse(e.attributeList);
						other.selectByMaterialId({ id: e.id }, 'maindataMaterialSku').then((res : any) => {
							if (res.code === 200) {
								if (this.isSingle) {
									(this as any).$refs.singeTable.setValue(res.data)
								} else {
									this.isTable = true;
									this.forFun(this.columns[0], 0) // 生成sku
									let tableConfig = (this as any).$lodash.cloneDeep(this.tableConfig);
									// let skuRuleList = (this as any).$lodash.cloneDeep(this.skuRuleList);
									this.tableList = (this as any).$lodash.cloneDeep(this.skuRuleList);
									let newColumns = (this as any).$lodash.cloneDeep(this.columns).reverse();
									res.data.map((v : any, i : any) => {
										v = Object.assign(v, this.tableList[i])
										v.dataIndex = i
									})
									newColumns.map((v : any) => {
										tableConfig.columns.unshift({
											width: '100px',
											title: v.title,
											field: v.field,
										})
									});
									this.tabList = (this as any).$lodash.cloneDeep(res.data);
									console.log('表格配置 ==> ', tableConfig);
									console.log('表格数据 ==> ', this.tabList);
									setTimeout(() => {
										(this as any).$refs.table.setTableConfig(tableConfig); // 设置表格配置
										(this as any).$refs.table.setValue(this.tabList) // 设置表格数据
									}, 300)
								}
							}
							(this as any).$refs.form.setValue(e)
							loading.close()
						})
					})
				})
			})
		}
		showInput(index : any) {
			let inputValue = (this as any).$refs['getValue_' + index][0].getValue();
			console.log(this.columns[index]);
			if (this.columns[index].list.indexOf(inputValue) !== -1) return (this as any).$refs['getValue_' + index][0].clearValue();
			if (inputValue) {
				this.columns[index].list.push(inputValue);
			}
			(this as any).$refs['getValue_' + index][0].clearValue();
		}
		// 立即生成
		generateNow() {
			this.isTable = true;
			this.forFun(this.columns[0], 0) // 生成sku
			let data = (this as any).$lodash.cloneDeep(this.tableConfig);
			this.tableList = (this as any).$lodash.cloneDeep(this.skuRuleList);
			let newColumns = (this as any).$lodash.cloneDeep(this.columns).reverse();
			this.tableList.map((v : any, i : any) => {
				v.dataIndex = i
				v.isDeleted = 0
			})
			newColumns.map((v : any) => {
				data.columns.unshift({
					width: '100px',
					title: v.title,
					field: v.field,
				})
			});
			console.log('表格数据 ==> ', this.tableList);
			console.log('表格配置 ==> ', data);
			setTimeout(() => {
				(this as any).$refs.table.setValue(this.tableList); // 设置表格数据
				(this as any).$refs.table.setTableConfig(data); // 设置表格配置
			}, 0)
		}
		// 切换商品规格
		changeSingle() {
			if (this.isSingle) {
				this.isSingle = false
			} else {
				this.isSingle = true;
				setTimeout(() => {
					(this as any).$refs.singeTable.setValue([{}]) // 设置单表格数据
				}, 0)
			}
		}
		// 添加sku规格
		doComfirm() {
			if (!this.normsValue || !this.norms) return (this as any).$message({ type: "warning", message: '请添加完整的规格！' })
			let obj : any = {
				title: this.norms,
				field: this.norms + '_field_name',
				list: [this.normsValue]
			}
			this.columns.push(obj);
			this.norms = '';
			this.normsValue = '';
			this.isAdd = false;
		}
		// 排序生成
		forFun(data : any, i : number, v ?: any) {
			if (data.list) {
				let d : Array<any> = [];
				// data.list = data.list.reverse()
				data.list.forEach((item : any) => {
					if (i == 0) { // 第一次循环
						let obj : any = {}
						obj[data.field] = item
						d.push(obj);
					} else {
						// v = v.reverse()
						v.forEach((ele : any) => {
							let obj : any = {};
							obj = (this as any).$lodash.clone(ele);
							obj[data.field] = item
							d.push(obj);
						});
					}
				});
				i++
				if (this.columns[i]) {
					this.forFun(this.columns[i], i, d);
				}
				else {
					this.skuRuleList = d;
				}
			}
		}
		// 删除表格数据
		doDeleteTable(item : any) {
			console.log((this as any).tableList);
			// this.tableList.splice(item.dataIndex, 1);
			// this.tableList.map((v : any, i : any) => {
			// 	v.dataIndex = i
			// });
			// (this as any).$refs.table.setValue(this.tableList); // 设置表格数据
		}
		// 删除标签
		handleClose(tag : any, index : any) {
			// console.log(tag);
			this.columns[index].list.splice(this.columns[index].list.indexOf(tag), 1);
		}
		// 删除数组
		closeGroup(index : any) {
			this.columns.splice(index, 1)
		}

		// 更换物料属性数据
		getSelectValue(e : any) {
			api.single({ id: e }, 'maindataMaterialAttribute').then((res : any) => {
				if (res.code === 200) {
					this.columns = JSON.parse(res.data.attributeValue);
					this.tableList = []
					this.attributeId = e
					this.isTab = true;
					this.isTable = false;
					// console.log(this.columns);
				}
			})
		}
		// 获取物料属性
		getAttribute() {
			api.pageList({}, 'maindataMaterialAttribute').then((res : any) => {
				if (res.code === 200) {
					this.selectList = res.data.records
				} else this.failHandle(res)
			})
		}
		// 获取树型导航数据
		getTreeList() {
			api.treeList('maindataMaterialCategory').then((res : any) => {
				// console.log(res.data[0]);
				if (res.code === 200) {
					this.data = res.data;
				} else this.failHandle(res)
			})
		}
		// 获取列表数据
		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();
			query.categoryId = this.categoryId;
			let newData : any = {}
			for (let key in query) {
				if (query[key].toString()) {
					newData[key] = query[key]
				}
			}
			// console.log('表单字段 ==> ', newData);
			api.pageList(newData, 'maindataMaterial').then((res : any) => {
				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.failHandle(res)
			})
		}
		// 工具栏方法
		clickHandle(e : any) {
			if (e === 'onRefresh') (this.$refs.moduleView as any).resert();
			if (e === 'onAdd') this.onAdd();
			if (e === 'onDelete') this.doDelete();
			if (e === 'onExport') this.onExport();
		}
		// 内页工具栏方法
		insideTools(e : any) {
			console.log(e);
			if (e === 'onReturn') this.isShow = 'home';
			if (e === 'onSave') this.doFormData();
		}
		// 工具栏删除
		doDelete() {
			let selectData = (this.$refs.moduleView as any).getSelectData()
			let ids = '';
			if (selectData.length > 0) {
				selectData.map((v : any) => {
					ids += v.id + ','
				})
			} else return this.$message({ type: 'warning', message: '请选择删除数据' })
			ids = ids.slice(0, ids.length - 1);
			this.$confirm('确定删除吗,此操作不能撤销！', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			}).then(() => {
				other.deleteSpuAndSku({ ids: ids }, 'maindataMaterial').then((res : any) => {
					if (res.code === 200) {
						this.getDataList();
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					} else this.failHandle(res)
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
		// 操作删除
		doDelete2(item : any) {
			this.$confirm('确定删除吗,此操作不能撤销！', '注意', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				center: true
			}).then(() => {
				other.deleteSpuAndSku({ ids: item.id }, 'maindataMaterial').then((res : any) => {
					if (res.code === 200) {
						this.getDataList();
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					} else this.failHandle(res)
				})
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		}
		// 导航切换
		handleNodeClick(e : any) {
			this.categoryId = e.id
			other.single({ categoryId: e.id }).then((res : any) => {
				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)
				}
			})
		}
		//导出
		onExport() {
			let urlArr = '/maindata/maindataMaterial';
			let query = (this.$refs.moduleView as any).getQuery();
			(this as any).$download(urlArr + '/export', {
				...query
			}, urlArr[urlArr.length - 1] + `_${new Date().getTime()}.xlsx`)
		}
		// 运行错误
		failHandle(err : any) {
			let msg = err.msg ? err.msg : '运行错误！';
			this.$message.error(msg)
		}

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

		.by-tab {
			.title {
				padding: 10px 0 0;
			}

			.item-tab {
				margin-right: 16px;
			}

			.input-new-tag {
				width: 130px;
			}


			.flex-item {
				margin-right: 20px;
			}
		}

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

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

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

			.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-tool,
				.table-tool {
					width: 100%;
					padding-bottom: 16px;
				}

				.form {
					margin-bottom: 8px;
				}
			}

			.on-show {
				opacity: 1;
				z-index: 1;
			}
		}

		.detil {
			width: 100%;
			padding: 20px;

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