暂存

src/HDrpManagement/prodectFileData/components/add.vue

@@ -7,48 +7,30 @@
         @close="onClose"
     >
       <div>
-        <el-table
-            ref="multipleTable"
-            :data="productsList"
-            tooltip-effect="dark"
-            style="width: 100%"
-            @selection-change="handleSelectionChange"
-           >
-          <el-table-column
-              type="selection"
-              width="55">
-          </el-table-column>
-          <el-table-column
-              label="商品名称"
-              width="260">
-            <template slot-scope="scope">{{ scope.row.itemname }}</template>
-          </el-table-column>
-          <el-table-column
-              label="商品编号"
-              width="260">
-            <template slot-scope="scope">{{ scope.row.itemno }}</template>
-          </el-table-column>
-          <el-table-column
-              label="商品型号"
-              width="260">
-            <template slot-scope="scope">{{ scope.row.model }}</template>
-          </el-table-column>
-          <el-table-column
-              label="商品规格"
-              >
-            <template slot-scope="scope">{{ scope.row.spec }}</template>
-          </el-table-column>
-        </el-table>
-        <div style="margin-top: 20px">
-          <el-button type="primary" @click="onSubmit">确定</el-button>
-          <el-button @click="toggleSelection()">取消选择</el-button>
-        </div>
+        <tablelayout :layout="tablecols" :data="productsList" :custom="true" :checkbox="true" height="calc(100vh - 452px)" @checkboxCallBack="checkboxCallBack">
+          <template v-slot:customcol="scope">
+            <div v-if="scope.column.columnname === 'province'">
+              <span>{{scope.column.data.province}} - {{scope.column.data.city}} - {{scope.column.data.county}}</span>
+            </div>
+            <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
+          </template>
+
+        </tablelayout>
+
+      </div>
+      <div>
+        <p style="margin-top: 2%">已选{{selected}}个商品，共{{total}}个商品</p>
+      </div>
+      <div class="dialog-footer">
+        <el-button size="small" @click="drawer = false" class="normal-btn-width">取消</el-button>
+        <el-button size="small" type="primary" @click="onSubmit"  class="normal-btn-width btn-primary">确定</el-button>
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import tablelayout from '@/components/table/index2'
 export default {
   name: "add",
   props:["plm_technicalinfoid"],
@@ -66,21 +48,31 @@ export default {
       },
       productsList:[],
       multipleSelection: [],
+      tablecols:[],
+      tableHieght:420,
+      selected:0,
+      total:0
     }
   },
+  components:{
+    tablelayout
+  },
   mounted() {
 
+  },
+  created() {
+    this.tablecols = this.tool.tabelCol(this.$route.name).relationProductTable.tablecols
   },
   methods: {
     onShow(){
       this.drawer = true
-      this.queryProducts()
+      this.productsData()
     },
     onClose(){
       this.drawer = false
       this.form.itemid=''
     },
-    async queryProducts(){
+    async productsData(){
       const res = await this.$api.requested({
         "id": 20220923140602,
         "content": {
@@ -91,18 +83,13 @@ export default {
       })
       console.log(res)
       this.productsList = res.data
+      this.total = res.total
     },
-    toggleSelection(rows) {
-      if (rows) {
-        rows.forEach(row => {
-          this.$refs.multipleTable.toggleRowSelection(row);
-        });
-      } else {
-        this.$refs.multipleTable.clearSelection();
-      }
-    },
-    handleSelectionChange(val) {
+    checkboxCallBack(val){
+      console.log(val)
       this.multipleSelection = val;
+      this.selected = val.length
+
     },
     async onSubmit(){
       console.log(this.multipleSelection)

src/HDrpManagement/prodectFileData/components/fileTable.vue

@@ -19,7 +19,7 @@ export default {
   props:["id"],
   data(){
     return {
-      tableHieght:420,
+      tableHieght:220,
       tablecols:[],
       list:[]
     }

src/HDrpManagement/prodectFileData/components/relationDel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="inline-16">
     <el-popconfirm
-        title="确定删除此产品技术资料档案吗？"
+        title="确定删除此商品吗？"
         @confirm="deleteRow()">
       <el-button slot="reference" size="small" type="text">删 除</el-button>
     </el-popconfirm>

src/HDrpManagement/prodectFileData/index.vue

@@ -12,7 +12,7 @@
           <file_del v-if="tool.checkAuth($route.name,'delete')" :data="scope.data" :type="'text'" @deleteSuccess="onSuccess"></file_del>
         </template>
         <template v-slot:bind="scope">
-          <el-button  :type="'text'" @click="$router.push({path:'/relation',query:{id:scope.data.plm_technicalinfoid}})">关联商品</el-button>
+          <el-button  :type="'text'" @click="$router.push({path:'/relation',query:{id:scope.data.plm_technicalinfoid}})" style="font-size: 12px">关联商品</el-button>
         </template>
       </list>
     </div>

src/HDrpManagement/prodectFileData/modules/edit.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="inline-16">
-    <el-button size="small" type="text" @click="onShow">编辑</el-button>
+    <el-button size="small" type="text" @click="onShow">编 辑</el-button>
     <el-dialog
         :visible.sync="drawer"
         width="950px"

src/components/table/index2.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <el-table ref="tables" :row-class-name="tableClassName" v-loading="loading" highlight-current-row :data="data" :header-cell-style="{background:'#EEEEEE',color:'#333'}" size="mini" :height="height" @row-click="rowClick" style="width:100%" @selection-change="handleSelectionChange"  border>
+      <el-table-column
+        type="selection"
+        width="55" @handleSelectionChange="handleSelectionChange" v-if="checkbox">
+      </el-table-column>
+      <el-table-column :show-overflow-tooltip="col.title == '来源' || col.title == '地址' || col.title == '备注'" v-for="col in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :width="col.width">
+        <template slot-scope="scope">
+          <!-- 自定义表格显示内容 -->
+          <slot v-if="custom" name="customcol" :column="{data:scope.row,columnname:col.columnname}"></slot>
+          <!-- 否则就是默认 -->
+          <span v-else>{{scope.row[col.columnname]}}</span>
+          <!-- 操作结构内容 -->
+          <slot v-if="col.columnname === 'operation'" name="opreation" :data="scope.row"></slot>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from "vuex"
+export default {
+  /*
+    layout:表结构数据;
+    data:表渲染数据;
+    custom:是否启用自定义结构;
+    opwidth:操作列宽度
+  */
+  props:['layout','data','custom','height','checkbox'],
+  data () {
+    return {
+      list:[],
+    }
+  },
+  computed:{
+    ...mapGetters({
+      loading:'loading'
+    })
+  },
+  methods:{
+    rowClick (row) {
+      this.$emit('rowClick',row)
+    },
+    tableClassName ({row,rowIndex}) {
+      row.index = rowIndex
+    },
+    handleSelectionChange(val) {
+      this.$emit('checkboxCallBack',val)      
+    },
+    isCheck(row,rowIndex) {
+
+    }
+  },
+  mounted () {
+    // this.listData()
+  }
+}
+
+</script>
+<style>
+</style>