oms/src/views/audit/productManagement/components/importProduct.vue

<template>
  <vxe-modal v-model="value" id="importProduct" width="70%" height="80%" @show="show" show-zoom resize transfer v-loading="load">
    <template #title>
      <span>关联商品</span>
    </template>
    <template #default>
      <div class="i-box">
        <div class="table" id="t1">
          <by-table :propConfig="config" ref="table"></by-table>
        </div>
        <!-- <div class="icon">
          <i class="el-icon-right" style="font-size: 30px;"></i>
        </div>
        <div class="table t2">
          <by-table :propConfig="config2" ref="table2"></by-table>
        </div> -->
      </div>
      <product-modal ref="product" @confirm="confirmProduct" />
    </template>
  </vxe-modal>

</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { maindataMaterialRelevancy,materialrelevancy } from '@/api/omsOrder'
import ProductModal from "@/components/skuModal/productModal.vue";
@Component({components:{ProductModal}})
export default class ImportProduct extends Vue {
  value = false;
  load = false;
  syncProduct:Array<any>=[];
  currentRow:any=null;
  config:any={
    attr:{
      size:'mini',
      align:'center'
    },
    columns:[{
      title:'商品编码',
      field:'goodsSkuId'
    },{
      title:'商品名称',
      field:'goodsName'
    },{
      title:'操作',
      action:true,
      width:170,
      plugins:[{
        name:'关联商品',
        audit:'',
        event:{
          show:(row:any) => {
            return row.isSync != 1
          },
          click:(item:any) => {
            (this.$refs.product as any).setShow(true);
            this.setCurrentRow(item);
          }
        }
      },{
        name:'直接注册',
        audit:'',
        event:{
          show:(row:any) => {
            return row.isSync != 1
          },
          click:(item:any) => {
            this.$message('尚未开发！');
            console.log('该行数据：',item)
          }
        }
      }]
    }]
  }
  config2:any={
    attr:{
      size:'mini',
      align:'center'
    },
    columns:[{
      title:'名称',
      field:'name'
    }]
  }

  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){
    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>

<style lang="scss" scoped>
.i-box{
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 100%;
  .table{
    width: 100%;
    height: 100%;
    overflow: auto;
    box-shadow: 0 0 10px rgba(86,86,86,.1);
    // 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{
    width: 8%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>