|
@@ -1,20 +1,21 @@
|
|
<template>
|
|
<template>
|
|
- <vxe-modal v-model="value" id="importProduct" width="70%" height="80%" show-zoom resize transfer v-loading="load">
|
|
|
|
|
|
+ <vxe-modal v-model="value" id="importProduct" width="70%" height="80%" @show="show" show-zoom resize transfer v-loading="load">
|
|
<template #title>
|
|
<template #title>
|
|
<span>商品关联</span>
|
|
<span>商品关联</span>
|
|
</template>
|
|
</template>
|
|
<template #default>
|
|
<template #default>
|
|
<div class="i-box">
|
|
<div class="i-box">
|
|
- <div class="table">
|
|
|
|
|
|
+ <div class="table" id="t1">
|
|
<by-table :propConfig="config" ref="table"></by-table>
|
|
<by-table :propConfig="config" ref="table"></by-table>
|
|
</div>
|
|
</div>
|
|
- <div class="icon">
|
|
|
|
|
|
+ <!-- <div class="icon">
|
|
<i class="el-icon-right" style="font-size: 30px;"></i>
|
|
<i class="el-icon-right" style="font-size: 30px;"></i>
|
|
</div>
|
|
</div>
|
|
- <div class="table">
|
|
|
|
- <by-table :propConfig="config2" ref="table"></by-table>
|
|
|
|
- </div>
|
|
|
|
|
|
+ <div class="table t2">
|
|
|
|
+ <by-table :propConfig="config2" ref="table2"></by-table>
|
|
|
|
+ </div> -->
|
|
</div>
|
|
</div>
|
|
|
|
+ <product-modal ref="product" @confirm="confirmProduct" />
|
|
</template>
|
|
</template>
|
|
</vxe-modal>
|
|
</vxe-modal>
|
|
|
|
|
|
@@ -22,44 +23,57 @@
|
|
|
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
|
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
|
|
-@Component
|
|
|
|
|
|
+import { maindataMaterialRelevancy,materialrelevancy } from '@/api/omsOrder'
|
|
|
|
+import ProductModal from "./productModal.vue";
|
|
|
|
+@Component({components:{ProductModal}})
|
|
export default class ImportProduct extends Vue {
|
|
export default class ImportProduct extends Vue {
|
|
value = false;
|
|
value = false;
|
|
load = false;
|
|
load = false;
|
|
- config={
|
|
|
|
|
|
+ syncProduct:Array<any>=[];
|
|
|
|
+ currentRow:any=null;
|
|
|
|
+ config:any={
|
|
attr:{
|
|
attr:{
|
|
size:'mini',
|
|
size:'mini',
|
|
align:'center'
|
|
align:'center'
|
|
},
|
|
},
|
|
columns:[{
|
|
columns:[{
|
|
- title:'名称',
|
|
|
|
- field:'name'
|
|
|
|
|
|
+ title:'商品编码',
|
|
|
|
+ field:'goodsSkuId'
|
|
|
|
+ },{
|
|
|
|
+ title:'商品名称',
|
|
|
|
+ field:'goodsName'
|
|
},{
|
|
},{
|
|
title:'操作',
|
|
title:'操作',
|
|
action:true,
|
|
action:true,
|
|
width:170,
|
|
width:170,
|
|
plugins:[{
|
|
plugins:[{
|
|
- icon:'el-icon-setting',
|
|
|
|
- name:'同步商品',
|
|
|
|
|
|
+ name:'商品关联',
|
|
audit:'',
|
|
audit:'',
|
|
event:{
|
|
event:{
|
|
|
|
+ show:(row:any) => {
|
|
|
|
+ return row.isSync != 1
|
|
|
|
+ },
|
|
click:(item:any) => {
|
|
click:(item:any) => {
|
|
- console.log('该行数据:',item)
|
|
|
|
|
|
+ (this.$refs.product as any).setShow(true);
|
|
|
|
+ this.setCurrentRow(item);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},{
|
|
},{
|
|
- icon:'el-icon-setting',
|
|
|
|
name:'直接注册',
|
|
name:'直接注册',
|
|
audit:'',
|
|
audit:'',
|
|
event:{
|
|
event:{
|
|
|
|
+ show:(row:any) => {
|
|
|
|
+ return row.isSync != 1
|
|
|
|
+ },
|
|
click:(item:any) => {
|
|
click:(item:any) => {
|
|
|
|
+ this.$message('尚未开发!');
|
|
console.log('该行数据:',item)
|
|
console.log('该行数据:',item)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}]
|
|
}]
|
|
}]
|
|
}]
|
|
}
|
|
}
|
|
- config2={
|
|
|
|
|
|
+ config2:any={
|
|
attr:{
|
|
attr:{
|
|
size:'mini',
|
|
size:'mini',
|
|
align:'center'
|
|
align:'center'
|
|
@@ -69,11 +83,69 @@ export default class ImportProduct extends Vue {
|
|
field:'name'
|
|
field:'name'
|
|
}]
|
|
}]
|
|
}
|
|
}
|
|
- show(){}
|
|
|
|
|
|
+
|
|
|
|
+ mounted(){
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+ setCurrentRow(row:any){
|
|
|
|
+ this.currentRow = row;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ show(){
|
|
|
|
+ const h = document.getElementById('t1')?.offsetHeight;
|
|
|
|
+ if(h){
|
|
|
|
+ this.config.attr.height = h - 48;
|
|
|
|
+ this.config2.attr.height = h - 48;
|
|
|
|
+ }
|
|
|
|
+ this.getSyncData()
|
|
|
|
+ }
|
|
|
|
|
|
setShow(v:boolean){
|
|
setShow(v:boolean){
|
|
this.value = v;
|
|
this.value = v;
|
|
}
|
|
}
|
|
|
|
+
|
|
|
|
+ getSyncData(){
|
|
|
|
+ let page = (this.$refs.table as any).getPage();
|
|
|
|
+ let data:any={
|
|
|
|
+ pageNo:page.pageNo,
|
|
|
|
+ pageSize:page.pageSize
|
|
|
|
+ }
|
|
|
|
+ this.load = true;
|
|
|
|
+ maindataMaterialRelevancy(data).then((res:any) => {
|
|
|
|
+ this.load = false;
|
|
|
|
+ if(this.$refs.table){
|
|
|
|
+ (this.$refs.table as any).setValue(res.data.records);
|
|
|
|
+ page.pageNo = res.data.current;
|
|
|
|
+ page.total = res.data.total;
|
|
|
|
+ (this.$refs.table as any).setPage(page);
|
|
|
|
+ }
|
|
|
|
+ }).catch((err:any) => {
|
|
|
|
+ this.load = false;
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ confirmProduct(data:Array<any>){
|
|
|
|
+ if(data.length == 0){
|
|
|
|
+ this.$message('请选择商品!');
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ let value:any={
|
|
|
|
+ lid:this.currentRow.id,
|
|
|
|
+ mskuid:data[0].id
|
|
|
|
+ }
|
|
|
|
+ this.load = true;
|
|
|
|
+ materialrelevancy(value).then((res:any) => {
|
|
|
|
+ this.load = false;
|
|
|
|
+ this.$message({
|
|
|
|
+ message:'商品关联成功!',
|
|
|
|
+ type:'success'
|
|
|
|
+ })
|
|
|
|
+ this.getSyncData();
|
|
|
|
+ }).catch((err:any) => {
|
|
|
|
+ this.load = false;
|
|
|
|
+ this.$message.error('商品关联失败!')
|
|
|
|
+ })
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -84,12 +156,20 @@ export default class ImportProduct extends Vue {
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
height: 100%;
|
|
height: 100%;
|
|
.table{
|
|
.table{
|
|
- width: 46%;
|
|
|
|
|
|
+ width: 100%;
|
|
height: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
overflow: auto;
|
|
- box-shadow: 0 0 10px rgba(0,0,0,.1);
|
|
|
|
|
|
+ box-shadow: 0 0 10px rgba(86,86,86,.1);
|
|
// background-color: aliceblue;
|
|
// background-color: aliceblue;
|
|
}
|
|
}
|
|
|
|
+ .t1{
|
|
|
|
+ width: 52%;
|
|
|
|
+ // box-shadow: 5px -5px 5px rgba(127,127,127,.1);
|
|
|
|
+ }
|
|
|
|
+ .t2{
|
|
|
|
+ width: 40%;
|
|
|
|
+ // box-shadow: -5px -5px 5px rgba(127,127,127,.1);
|
|
|
|
+ }
|
|
.icon{
|
|
.icon{
|
|
width: 8%;
|
|
width: 8%;
|
|
height: 100%;
|
|
height: 100%;
|