Merge branch 'master' of http://47.107.53.207:3000/ymy/oms

src/api/other.ts

@@ -1,97 +1,51 @@
 import request from '@/benyun/utils/request'
 
-// 获取树形导航分类
-function treeList(data : any) {
-	return request({
-		url: '/maindata/maindataMaterialCategory/treeList',
-		method: 'GET',
-		params: data
-	})
-}
-
-// 获取物料分页列表
-function page(data : any) {
-	return request({
-		url: '/maindata/maindataMaterial/page',
-		method: 'GET',
-		params:data
-	})
-}
 // 根据分类id查询数据物料数据
 function single(data : any) {
 	return request({
 		url: '/maindata/maindataMaterial/categoryList',
 		method: 'GET',
-		params:data
-	})
-}
-// 新增物料
-function save(data : any) {
-	return request({
-		url: '/maindata/maindataMaterial/save',
-		method: 'POST',
-		data: data
-	})
-}
-// 修改物料
-function update(data : any) {
-	return request({
-		url: '/maindata/maindataMaterial/update',
-		method: 'POST',
-		data: data
-	})
-}
-// 删除数据
-function materialDelete(data : any) {
-	return request({
-		url: '/maindata/maindataMaterial/delete',
-		method: 'POST',
 		params: data
 	})
 }
 
-// 分页查询物料sku
-function maindataMaterialSku(data : any) {
+// 根据物料id查询sku
+function selectByMaterialId(data : any, url : any) {
 	return request({
-		url: '/maindata/maindataMaterialSku/page',
+		url: '/maindata/' + url + '/selectByMaterialId',
 		method: 'GET',
 		params: data
 	})
 }
 // 新增物料sku
-function addSku(data : any) {
+function saveSpuAndSku(data : any, url : any) {
 	return request({
-		url: '/maindata/maindataMaterialSku/save',
+		url: '/maindata/' + url + '/saveSpuAndSku',
 		method: 'POST',
-		params: data
+		data: data
 	})
 }
 // 修改物料sku
-function updateSku(data : any) {
+function updateSpuAndSku(data : any, url : any) {
 	return request({
-		url: '/maindata/maindataMaterialSku/update',
+		url: '/maindata/' + url + '/updateSpuAndSku',
 		method: 'POST',
-		params: data
+		data: data
 	})
 }
 // 删除物料sku
-function deleteSku(data : any) {
+function deleteSpuAndSku(data : any, url : any) {
 	return request({
-		url: '/maindata/maindataMaterialSku/delete',
+		url: '/maindata/' + url + '/deleteSpuAndSku',
 		method: 'POST',
 		params: data
 	})
 }
 
 export default {
-	page,
 	single,
-	save,
-	update,
-	materialDelete,
-	maindataMaterialSku,
-	addSku,
-	updateSku,
-	deleteSku,
-	treeList
+	selectByMaterialId,
+	saveSpuAndSku,
+	updateSpuAndSku,
+	deleteSpuAndSku,
 }

src/benyun/compVue/ModuleViewHandle.ts

@@ -104,10 +104,11 @@ export default class ModuleViewHandle extends VueViews{
   // }
 
   //刷新
-  // onRefresh(){
-  //   (this.$refs[this.tableID] as any).setPage({pageNo:1,total:0})
-  //   this.getList();
-  // }
+  onRefresh(){
+    // (this.$refs[this.tableID] as any).setPage({pageNo:1,total:0})
+    // this.getList();
+		this.$emit('onRefresh')
+  }
 
   //搜索
   searchHandle(){

src/components/Assembly/attributeValue.vue

@@ -0,0 +1,33 @@
+<template>
+	<div>
+		<div v-for="(item,index) in baseInfo" :key="index">
+			<div>
+				{{item.title+'：'}}
+				<span>{{item.list}}</span>
+				<!-- <span v-for="(v) in item.list" :key="v">{{v+','}}</span> -->
+			</div>
+		</div>
+	</div>
+</template>
+<script lang="ts">
+	import { Component, Prop, Vue, Watch, Mixins } from "vue-property-decorator";
+	@Component
+	export default class Material extends Vue {
+		@Prop()
+		propValue : any
+		baseInfo : any = []
+		created() {
+			this.baseInfo = JSON.parse(this.propValue)
+			this.baseInfo.map((v : any) => {
+				let str:any = ''
+				v.list.map((e : any) => {
+					str += e + ','
+				})
+				v.list = str.slice(0, -1)
+			})
+		}
+	}
+</script>
+
+<style>
+</style>

src/components/ForTab/index.vue

@@ -9,9 +9,9 @@
 			<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='item'>
-			<button class="el-button mr15 el-button--primary el-button--small" @click="isAdd=true">添加新规格</button>
-			<button class="el-button el-button--success el-button--small" @click="generateNow">立即生成</button>
+		<div style="margin: 20px 0;" v-if="!isAdd" key="aaa">
+			<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='item2'>
 			<div class="flex-item">
@@ -26,10 +26,10 @@
 					<input type="text" v-model="normsValue" placeholder="请输入规格值" class="el-input__inner">
 				</div>
 			</div>
-			<button @click="doComfirm" class="el-button el-button--primary el-button--small"><span>确定</span></button>
-			<button @click="isAdd=false" class="el-button el-button--danger el-button--small"><span>取消</span></button>
+			<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"><by-table :propConfig="config" ref="table"></by-table></div>
+		<div v-if="isTable"><by-table :propConfig="tableConfig" ref="table"></by-table></div>
 	</div>
 </template>
 
@@ -44,7 +44,7 @@
 		isAdd : any = false
 		isTable : any = false
 		tableData : any = ''
-		config : any = {
+		tableConfig : any = {
 			attr: {
 				size: 'mini',
 				height: 486,
@@ -52,49 +52,124 @@
 			},
 			columns: [
 				{
+					// width:'100px',
+					title: '标题',
+					field: 'skuTitle',
+					component: 'by-input',
+					compConfig:{
+						attr:{
+							size:'mini',
+							placeholder:' '
+						},
+					}
+				},
+				{
+					// width:'100px',
+					title: '副标题',
+					field: 'skuSubtitle',
+					component: 'by-input',
+					compConfig:{
+						attr:{
+							size:'mini',
+							placeholder:' '
+						},
+					}
+				},
+				{
+					width:'100px',
 					title: '价格',
 					field: 'price',
 					component: 'by-input',
-					// compConfig: {
-					// 	attrs: {
-					// 		placeholder: 0
-					// 	}
-					// }
+					compConfig:{
+						attr:{
+							size:'mini',
+							placeholder:' '
+						},
+					}
 				},
 				{
+					width:'100px',
 					title: '库存',
 					field: 'stock',
-					component: 'by-input'
+					component: 'by-input',
+					compConfig:{
+						attr:{
+							size:'mini',
+							placeholder:' '
+						},
+					}
 				},
 				{
+					width:'100px',
 					title: '保质期（天）',
 					field: 'shelfLife',
-					component: 'by-input'
+					component: 'by-input',
+					compConfig:{
+						attr:{
+							size:'mini',
+							placeholder:' '
+						},
+					}
 				},
 				{
+					width:'100px',
 					title: '重量',
 					field: 'weight',
-					component: 'by-input'
+					component: 'by-input',
+					compConfig:{
+						attr:{
+							size:'mini',
+							placeholder:' '
+						},
+					}
 				},
 				{
+					width:'100px',
 					title: '长',
 					field: 'length',
-					component: 'by-input'
+					component: 'by-input',
+					compConfig:{
+						attr:{
+							size:'mini',
+							placeholder:' '
+						},
+					}
 				},
 				{
+					width:'100px',
 					title: '宽',
 					field: 'width',
-					component: 'by-input'
+					component: 'by-input',
+					compConfig:{
+						attr:{
+							size:'mini',
+							placeholder:' '
+						},
+					}
 				},
 				{
+					width:'100px',
 					title: '高',
 					field: 'height',
-					component: 'by-input'
+					component: 'by-input',
+					compConfig:{
+						attr:{
+							size:'mini',
+							placeholder:' '
+						},
+					}
 				},
 				{
+					width:'100px',
 					title: '体积',
 					field: 'volume',
-					component: 'by-input'
+					component: 'by-input',
+					compConfig:{
+						attr:{
+							size:'mini',
+							placeholder:' '
+						},
+					}
 				},
 				{
 					width: '80px',
@@ -113,19 +188,16 @@
 				}
 			]
 		}
-		columns : Array<any> = [
-			{
-				title: '尺寸',
-				field: 'title',
-				list: ['7.5', '5.8', '6.6']
-			},
-			{
-				title: '颜色',
-				field: 'color',
-				list: ['black', 'white', 'red']
-			}
-		]
-
+		
+		get columns(){
+		  return this.config?.columns ? this.config.columns : [];
+		}
+		
+		created(){
+		  if(this.propConfig){
+		    this.setConfig(this.propConfig)
+		  }
+		}
 		showInput(index : any) {
 			let inputValue = (this as any).$refs['getValue_' + index][0].getValue();
 			console.log(this.columns[index]);
@@ -139,7 +211,7 @@
 		generateNow() {
 			this.isTable = true;
 			this.forFun(this.columns[0], 0);
-			let data = (this as any).$lodash.cloneDeep(this.config);
+			let data = (this as any).$lodash.cloneDeep(this.tableConfig);
 			let newColumns = (this as any).$lodash.cloneDeep(this.columns).reverse();
 			// console.log(newColumns);
 			this.tableData.map((v : any, i : any) => {
@@ -147,6 +219,7 @@
 			})
 			newColumns.map((v : any) => {
 				data.columns.unshift({
+					width:'100px',
 					title: v.title,
 					field: v.field
 				})
@@ -216,7 +289,7 @@
 <style lang="scss" scoped>
 	.by-tab {
 		.title {
-			// padding: 10px 0 0;
+			padding: 10px 0 0;
 		}
 
 		.item-tab {

src/views/audit/attribute/index.vue

@@ -6,12 +6,41 @@
 			</module-view>
 		</div>
 		<!-- 新增/编辑弹窗 -->
-		<el-dialog :title="popTitle+'属性'" :visible.sync="dialogFormVisible" width="30%">
+		<el-dialog :title="popTitle+'属性'" :visible.sync="dialogFormVisible" width="50%">
 			<by-form :propConfig="addConfig" ref="addFormId">
 				<template v-slot:status class="clearfix">
 					<el-radio class="fl" style="margin-top: 8px;" v-model="radio" :label="0">正常</el-radio>
 					<el-radio class="fl" style="margin-top: 8px;" v-model="radio" :label="1">禁用</el-radio>
 				</template>
+				<template v-slot:attributeValue="{value}">
+					<div style="margin-bottom: 20px;" v-if="tableConfig.length>0">
+						<div v-for="(item,index) of tableConfig" :key="index">
+							<div class="tab-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>
+					<div style="display: flex;">
+						<div style="margin-right: 20px;">
+							<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 style="margin-right: 20px;">
+							<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>
+				</template>
 			</by-form>
 			<div slot="footer" class="dialog-footer">
 				<el-button @click="dialogFormVisible = false">取 消</el-button>
@@ -25,15 +54,20 @@
 	import api from "@/api/currency";
 	import Assembly from "@/components/Assembly/material.vue";
 	import AssemblyNature from "@/components/Assembly/nature.vue";
-	@Component
+	import AttributeValue from "@/components/Assembly/attributeValue.vue";
+	import ForTab from "@/components/ForTab/index.vue";
+	@Component({ components: { ForTab } })
 	export default class Attribute extends Vue {
 		// 右边
 		baseURL : any = process.env.VUE_APP_BASE_API
+		norms : any = ''
+		normsValue : any = ''
 		timeNum = 0;
 		timer : any = null
 		popTitle : any = ''
 		radio : any = 0
 		dialogFormVisible : boolean = false
+		tableConfig : any = []
 		config : any = {
 			search: {
 				attr: {
@@ -93,7 +127,6 @@
 							}
 						}
 					},
-
 					]
 				]
 			},
@@ -120,7 +153,8 @@
 					isDetail: true,
 				}, {
 					title: '属性值',
-					field: 'attributeValue'
+					field: 'attributeValue',
+					component: AttributeValue,
 				},
 				{
 					width: 100,
@@ -172,14 +206,6 @@
 						prop: 'name',
 						component: 'by-input',
 					},
-					{
-						span: 23,
-						labelWidth: '70px',
-						label: '属性值',
-						slot: true,
-						prop: 'attributeValue',
-						component: 'by-input',
-					},
 					{
 						span: 23,
 						labelWidth: '70px',
@@ -208,6 +234,13 @@
 							}
 						}
 					},
+					{
+						span: 23,
+						labelWidth: '70px',
+						label: '属性值',
+						slot: true,
+						prop: 'attributeValue',
+					},
 				],
 			]
 		}
@@ -216,13 +249,46 @@
 				this.getDataList()
 			}, 300)
 		}
+		// 添加
+		showInput(index : any) {
+			let inputValue = (this as any).$refs['getValue_' + index][0].getValue();
+			// console.log(this.tableConfig[index]);
+			if (this.tableConfig[index].list.indexOf(inputValue) !== -1) return (this as any).$refs['getValue_' + index][0].clearValue();
+			if (inputValue) {
+				this.tableConfig[index].list.push(inputValue);
+			}
+			(this as any).$refs['getValue_' + index][0].clearValue();
+		}
+		// 删除标签
+		handleClose(tag : any, index : any) {
+			// console.log(tag);
+			this.tableConfig[index].list.splice(this.tableConfig[index].list.indexOf(tag), 1);
+		}
+		// 删除数组
+		closeGroup(index : any) {
+			this.tableConfig.splice(index, 1)
+		}
+		// 添加新规格
+		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.tableConfig.push(obj);
+			this.norms = '';
+			this.normsValue = '';
+		}
 		// 确认新增/编辑
 		confirm() {
 			(this as any).$refs.addFormId.validate().then(() => {
+				if (this.tableConfig.length <= 0) return this.$message({ type: 'warning', message: '验证未通过，请添加完整的规格！' })
 				let query = (this as any).$refs.addFormId.getValue();
-				console.log(query);
 				query.status = this.radio;
+				query.attributeValue = JSON.stringify(this.tableConfig)
 				this.dialogFormVisible = false;
+				console.log(query);
 				if (this.popTitle === '新增') {
 					api.saveList(query, 'maindataMaterialAttribute').then((res : any) => {
 						if (res.code === 200) {
@@ -257,7 +323,7 @@
 			}
 			clearInterval(this.timer)
 			let query = (this.$refs.moduleView as any).getQuery();
-			console.log('表单字段 ==> ', query);
+			// console.log('表单字段 ==> ', query);
 			api.pageList(query, 'maindataMaterialAttribute').then((res : any) => {
 				if (res.code === 200) {
 					(this.$refs.moduleView as any).setTableValue(res.data.records);
@@ -282,6 +348,7 @@
 			this.popTitle = '新增'
 			this.dialogFormVisible = true;
 			this.radio = 0
+			this.tableConfig = []
 			setTimeout(() => {
 				if ((this as any).$refs.addFormId) (this as any).$refs.addFormId.setValue({});
 			}, 0)
@@ -291,7 +358,9 @@
 			this.popTitle = '编辑'
 			this.dialogFormVisible = true;
 			this.radio = e.status
+			this.tableConfig = JSON.parse(e.attributeValue)
 			setTimeout(() => {
+				console.log('编辑 ==> ', e);
 				if ((this as any).$refs.addFormId) (this as any).$refs.addFormId.setValue(e);
 			}, 0)
 		}
@@ -374,6 +443,25 @@
 		display: flex;
 		padding: 16px;
 
+
+		.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;

src/views/audit/productManagement/index.vue

@@ -21,18 +21,56 @@
 							</el-input>
 						</template>
 						<template v-slot:radio>
-							<el-radio v-model="radio" :label="1" @input="isSingle=true">单规格</el-radio>
-							<el-radio v-model="radio" :label="2" @input="isSingle=false">多规格</el-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:attribute>
-							<div v-if="isSingle">
-								<el-select v-model="selectValue" clearable placeholder="请选择" style="width: 19.5%;">
+						<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>
-							<div v-if="!isSingle">
-								<ForTab />
+								<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>
@@ -48,6 +86,18 @@
 							<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>
@@ -64,12 +114,12 @@
 	@Component({ components: { ForTab,ImportProduct } })
 	export default class productManagement extends Vue {
 		isShow = 'home'
-		isClick = false
+		isEdit = true
 		isSingle : any = true
 		timeNum = 0;
 		timer : any = null
 		data : any = []
-		radio : any = 1
+		materialSpec : any = 0
 		radioStatus : any = 1
 		ismakeup : any = 1
 		issued : any = 1
@@ -77,6 +127,288 @@
 		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',
@@ -95,9 +427,15 @@
 					name: [{
 						required: true, message: '请输入名称', trigger: 'blur'
 					}],
-					shortName: [{
-						required: true, message: '请输入简称', trigger: 'blur'
-					}]
+					// categoryName: [{
+					// 	required: true, message: '请输入物料分类', trigger: 'blur'
+					// }],
+					// vmCategoryName: [{
+					// 	required: true, message: '请输入虚拟分类', trigger: 'blur'
+					// }],
+					// organizationCategoryName: [{
+					// 	required: true, message: '请输入机构商品分类', trigger: 'blur'
+					// }]
 				}
 			},
 			columns: [
@@ -266,14 +604,14 @@
 					{
 						span: 6,
 						label: '物料分类',
-						prop: 'select',
+						prop: 'categoryName',
 						component: 'select-tree',
 						compConfig: {
 							attr: {
 								label: 'name',
 								clearable: true,
 								retConfig: {
-									// treeName:'name',
+									categoryName: 'name',
 									categoryId: 'id'
 								}
 							},
@@ -285,14 +623,14 @@
 					{
 						span: 6,
 						label: '虚拟分类',
-						prop: 'select',
+						prop: 'vmCategoryName',
 						component: 'select-tree',
 						compConfig: {
 							attr: {
 								label: 'name',
 								clearable: true,
 								retConfig: {
-									// treeName:'name',
+									vmCategoryName: 'name',
 									vmCategoryId: 'id'
 								}
 							},
@@ -304,14 +642,14 @@
 					{
 						span: 6,
 						label: '机构商品分类',
-						prop: 'select',
+						prop: 'organizationCategoryName',
 						component: 'select-tree',
 						compConfig: {
 							attr: {
 								label: 'name',
 								clearable: true,
 								retConfig: {
-									treeName: 'name',
+									organizationCategoryName: 'name',
 									organizationCategoryId: 'id'
 								}
 							},
@@ -321,8 +659,6 @@
 						}
 					}
 				],
-				[
-				],
 				[
 					{
 						span: 30,
@@ -344,7 +680,7 @@
 						span: 30,
 						label: '物料属性',
 						slot: true,
-						prop: 'attribute',
+						prop: 'attributeName',
 					}
 				],
 				[
@@ -371,6 +707,14 @@
 						prop: 'issued',
 					}
 				],
+				[
+					{
+						span: 20,
+						label: '标签',
+						slot: true,
+						prop: 'tags',
+					}
+				],
 			],
 
 		}
@@ -578,12 +922,268 @@
 				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
-					console.log(this.selectList);
 				} else this.failHandle(res)
 			})
 		}
@@ -627,34 +1227,6 @@
 				} else this.failHandle(res)
 			})
 		}
-		// 保存编辑/新增
-		doFormData() {
-			(this as any).$refs.form.validate().then(() => {
-				let data = (this as any).$refs.form.getValue();
-				if (this.isClick) { // 编辑
-					api.updateList(data, 'maindataMaterial').then((res : any) => {
-						if (res.code === 200) {
-							this.isShow = 'home';
-							this.getDataList();
-							this.$message({ type: 'success', message: res.msg })
-						}
-					})
-				} else { // 新增
-					data.description = this.textarea;
-					data.status = this.radioStatus;
-					data.ismakeup = this.ismakeup;
-					data.issued = this.issued;
-					console.log(data);
-					api.saveList(data, 'maindataMaterial').then((res : any) => {
-						if (res.code === 200) {
-							this.isShow = 'home';
-							this.getDataList();
-							this.$message({ type: 'success', message: res.msg })
-						}
-					})
-				}
-			});
-		}
 		// 工具栏方法
 		clickHandle(e : any) {
 			if (e === 'onRefresh') (this.$refs.moduleView as any).resert();
@@ -668,19 +1240,6 @@
 			if (e === 'onReturn') this.isShow = 'home';
 			if (e === 'onSave') this.doFormData();
 		}
-		// 新增
-		onAdd() {
-			if (this.isClick) (this as any).$refs.form.setValue({})
-			this.isShow = 'add';
-			this.isClick = false;
-		}
-		// 编辑
-		getDetail(e : any) {
-			this.isClick = true;
-			this.isShow = 'add';
-			// (this as any).getAttribute();
-			(this as any).$refs.form.setValue(e)
-		}
 		// 工具栏删除
 		doDelete() {
 			let selectData = (this.$refs.moduleView as any).getSelectData()
@@ -697,7 +1256,7 @@
 				type: 'warning',
 				center: true
 			}).then(() => {
-				api.deleteList({ ids: ids }, 'maindataMaterial').then((res : any) => {
+				other.deleteSpuAndSku({ ids: ids }, 'maindataMaterial').then((res : any) => {
 					if (res.code === 200) {
 						this.getDataList();
 						this.$message({
@@ -721,7 +1280,7 @@
 				type: 'warning',
 				center: true
 			}).then(() => {
-				api.deleteList({ ids: item.id }, 'maindataMaterial').then((res : any) => {
+				other.deleteSpuAndSku({ ids: item.id }, 'maindataMaterial').then((res : any) => {
 					if (res.code === 200) {
 						this.getDataList();
 						this.$message({
@@ -769,22 +1328,31 @@
 	}
 </script>
 <style lang="scss" scoped>
-	.fade-leave,
-	.fade-enter-to {
-		opacity: 1;
-	}
-
-	.fade-leave-to,
-	.fade-enter {
-		opacity: 0;
-	}
-
 	.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;

src/views/demo/index.vue

@@ -65,7 +65,7 @@ export default class DemoIndex extends Vue {
   ]
 
   created(){
-    // this.forFun(this.arr[0],0)
+    this.forFun(this.arr[0],0)
   }
 
   forFun(data:any,i:number,v?:any){