商品同步

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

@@ -0,0 +1,101 @@
+<template>
+  <vxe-modal v-model="value" id="importProduct" width="70%" height="80%" show-zoom resize transfer v-loading="load">
+    <template #title>
+      <span>商品同步</span>
+    </template>
+    <template #default>
+      <div class="i-box">
+        <div class="table">
+          <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">
+          <by-table :propConfig="config2" ref="table"></by-table>
+        </div>
+      </div>
+    </template>
+  </vxe-modal>
+
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+@Component
+export default class ImportProduct extends Vue {
+  value = false;
+  load = false;
+  config={
+    attr:{
+      size:'mini',
+      align:'center'
+    },
+    columns:[{
+      title:'名称',
+      field:'name'
+    },{
+      title:'操作',
+      action:true,
+      width:170,
+      plugins:[{
+        icon:'el-icon-setting',
+        name:'同步商品',
+        audit:'',
+        event:{
+          click:(item:any) => {
+            console.log('该行数据：',item)
+          }
+        }
+      },{
+        icon:'el-icon-setting',
+        name:'直接注册',
+        audit:'',
+        event:{
+          click:(item:any) => {
+            console.log('该行数据：',item)
+          }
+        }
+      }]
+    }]
+  }
+  config2={
+    attr:{
+      size:'mini',
+      align:'center'
+    },
+    columns:[{
+      title:'名称',
+      field:'name'
+    }]
+  }
+  show(){}
+
+  setShow(v:boolean){
+    this.value = v;
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.i-box{
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  .table{
+    width: 46%;
+    height: 100%;
+    overflow: auto;
+    box-shadow: 0 0 10px rgba(0,0,0,.1);
+    // background-color: aliceblue;
+  }
+  .icon{
+    width: 8%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+</style>

src/views/audit/productManagement/index.vue

@@ -52,6 +52,7 @@
 				</div>
 			</div>
 		</transition-group>
+		<import-product ref="importProduct" />
 	</div>
 </template>
 <script lang="ts">
@@ -59,7 +60,8 @@
 	import api from '@/api/currency'
 	import other from '@/api/other'
 	import ForTab from "@/components/ForTab/index.vue";
-	@Component({ components: { ForTab } })
+	import ImportProduct from "./components/importProduct.vue";
+	@Component({ components: { ForTab,ImportProduct } })
 	export default class productManagement extends Vue {
 		isShow = 'home'
 		isClick = false
@@ -490,7 +492,16 @@
 					delete: true,
 					search: true,
 					refresh: true
-				}
+				},
+				customTools:[
+					{
+						name: '商品同步', icon: 'el-icon-setting', event:{
+							click:()=>{
+								(this.$refs.importProduct as any).setShow(true);
+							}
+						}
+					}
+				]
 			},
 			table: {
 				attr: {