购物车调整

src/SDrpManagement/shopCart/modules/list.vue

@@ -12,92 +12,60 @@
     </div>
   </div>
   <div class="produtMag-panel">
-    <el-table
-      ref="multipleTable"
-      :data="tableData"
-      style="width: 100%;"
-      height="calc(100vh - 325px)"
-      :header-cell-style="{height:'50px',color:'#768093',fontWeight:'400'}"
-      :cell-style="{height:'50px',color:'#768093',fontWeight:'400'}"
-      @selection-change="selectionChange">
-      <el-table-column
-        type="selection"
-        width="55"
-        align="center">
-      </el-table-column>
-      <el-table-column
-        v-if="params.content.istool == 0"
-        prop="tradefield_shoppingcart"
-        label="品牌/领域"
-        width="250">
-        <template slot-scope="scope">
-          <el-tag size="mini" type="primary" effect="dark">{{scope.row.brandname}}</el-tag>&nbsp;
-          <el-tag size="mini" type="primary" effect="dark">{{scope.row.tradefield_shoppingcart}}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="itemname"
-        label="产品名称"
-        width="150">
-      </el-table-column>
-      <el-table-column
-        prop="itemno"
-        label="产品编号"
-        width="150">
-      </el-table-column>
-      <el-table-column
-          label="型号">
-        <template slot-scope="scope">
-          <p><span>{{scope.row.model.length >10?scope.row.model.substring(0,9) + '...':scope.row.model}}</span></p>
-        </template>
-      </el-table-column>
-      <el-table-column
-          label="规格">
-        <template slot-scope="scope">
-          <p><span>{{scope.row.spec.length >10?scope.row.spec.substring(0,9) + '...':scope.row.spec}}</span></p>
-        </template>
-      </el-table-column>
-<!--      <el-table-column
-        label="型号/规格">
-        <template slot-scope="scope">
-          <p><span>{{scope.row.model}}</span>&nbsp;/&nbsp;<span>{{scope.row.spec}}</span></p>
-        </template>
-      </el-table-column>-->
-      <el-table-column
-        prop="oldprice"
-        label="单价"
-        width="90">
-        <template slot-scope="scope">
-          <p style="color:red;font-weight:500">¥&nbsp;{{tool.formatAmount(scope.row.oldprice,2)}}</p>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="数量"
-        width="150">
-        <template slot-scope="scope">
-        <el-input-number size="mini" v-model="scope.row.qty" :min="scope.row.orderminqty" @change="changeQty(scope.$index,scope.row)" :step="scope.row.orderaddqty" label="输入数量"></el-input-number>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="计量单位"
-        width="80">
-        <template slot-scope="scope">
-          <el-tag>{{ scope.row.unitname }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="金额"
-        width="80">
-        <template slot-scope="scope">
-          <p style="color:red;font-weight:500">¥&nbsp;{{tool.formatAmount(scope.row.oldprice * scope.row.qty,2)}}</p>
-        </template>
-      </el-table-column>
-      <el-table-column width="90" label="操作">
-        <template slot-scope="scope">
-          <slot name="del" :data="scope.row"></slot>
-        </template>
-      </el-table-column>
-    </el-table>
+    <tableMainLayout v-show="params.content.istool == '0'" :layout="tableColsProduct" :data="tableData" height="calc(100vh - 325px)" fixedName="operation" :width="true" :custom="true" :isCheck="true" @checkboxCallBack="selectionChange">
+      <template v-slot:customcol="scope">
+        <div v-if="scope.column.columnname === 'adefieldShoppingcart'">
+          <el-tag size="mini" type="primary" effect="dark">{{scope.column.data.brandname}}</el-tag>&nbsp;
+          <el-tag size="mini" type="primary" effect="dark">{{scope.column.data.tradefield_shoppingcart}}</el-tag>
+        </div>
+        <div v-else-if="scope.column.columnname === 'model'">
+          <p><span>{{scope.column.data.model.length >10?scope.column.data.model.substring(0,9) + '...':scope.column.data.model}}</span></p>
+        </div>
+        <div v-else-if="scope.column.columnname === 'spec'">
+          <p><span>{{scope.column.data.spec.length >10?scope.column.data.spec.substring(0,9) + '...':scope.column.data.spec}}</span></p>
+        </div>
+        <div v-else-if="scope.column.columnname === 'oldprice'">
+          <span><small>¥</small>{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
+        </div>
+        <div v-else-if="scope.column.columnname === 'qty'">
+          <el-input-number size="mini" v-model="scope.column.data.qty" :min="scope.column.data.orderminqty" @change="changeQty(scope.column.data.$index,scope.column.data)" :step="scope.column.data.orderaddqty" label="输入数量"></el-input-number>
+        </div>
+        <div v-else-if="scope.column.columnname === 'amount'">
+          <p style="color:red;font-weight:500">¥&nbsp;{{tool.formatAmount(scope.column.data.oldprice * scope.column.data.qty,2)}}</p>
+        </div>
+        <p v-else>{{scope.column.data[scope.column.columnname] || scope.column.columnname === 'operation'?scope.column.data[scope.column.columnname]:'--'}}</p>
+      </template>
+      <template v-slot:opreation="scope">
+        <slot name="del" :data="scope.data"></slot>
+      </template>
+    </tableMainLayout>
+    <tableMainLayout v-show="params.content.istool == '1'" :layout="tableColsTool" :data="tableData" height="calc(100vh - 325px)" fixedName="operation" :width="true" :custom="true" :isCheck="true" @checkboxCallBack="selectionChange">
+      <template v-slot:customcol="scope">
+        <div v-if="scope.column.columnname === 'adefieldShoppingcart'">
+          <el-tag size="mini" type="primary" effect="dark">{{scope.column.data.brandname}}</el-tag>&nbsp;
+          <el-tag size="mini" type="primary" effect="dark">{{scope.column.data.tradefield_shoppingcart}}</el-tag>
+        </div>
+        <div v-else-if="scope.column.columnname === 'model'">
+          <p><span>{{scope.column.data.model.length >10?scope.column.data.model.substring(0,9) + '...':scope.column.data.model}}</span></p>
+        </div>
+        <div v-else-if="scope.column.columnname === 'spec'">
+          <p><span>{{scope.column.data.spec.length >10?scope.column.data.spec.substring(0,9) + '...':scope.column.data.spec}}</span></p>
+        </div>
+        <div v-else-if="scope.column.columnname === 'oldprice'">
+          <span><small>¥</small>{{tool.formatAmount(scope.column.data[scope.column.columnname],2)}}</span>
+        </div>
+        <div v-else-if="scope.column.columnname === 'qty'">
+          <el-input-number size="mini" v-model="scope.column.data.qty" :min="scope.column.data.orderminqty" @change="changeQty(scope.column.data.$index,scope.column.data)" :step="scope.column.data.orderaddqty" label="输入数量"></el-input-number>
+        </div>
+        <div v-else-if="scope.column.columnname === 'amount'">
+          <p style="color:red;font-weight:500">¥&nbsp;{{tool.formatAmount(scope.column.data.oldprice * scope.column.data.qty,2)}}</p>
+        </div>
+        <p v-else>{{scope.column.data[scope.column.columnname] || scope.column.columnname === 'operation'?scope.column.data[scope.column.columnname]:'--'}}</p>
+      </template>
+      <template v-slot:opreation="scope">
+        <slot name="del" :data="scope.data"></slot>
+      </template>
+    </tableMainLayout>
     <div style="margin-top:16px;text-align:right">
       <el-pagination
         background
@@ -136,7 +104,10 @@ export default {
       tableData: [],
       total:0,
       currentPage:0,
-      layout:[]
+      layout:[],
+      tableCols:[],
+      tableColsProduct:[],
+      tableColsTool:[]
     }
   },
   components:{
@@ -183,6 +154,11 @@ export default {
     },
     onRadioChange () {
       this.params.content.pageNumber = 1
+      if (this.params.content.istool == 0){
+        this.tableCols = this.tool.tabelCol(this.$route.name).productsTable.tablecols
+      }else {
+        this.tableCols = this.tool.tabelCol(this.$route.name).toolsTable.tablecols
+      }
       this.listData()
       this.$emit('onRadioChange',this.params.content.istool)
     },
@@ -227,6 +203,9 @@ export default {
   mounted () {
     this.listData()
     this.layout = this.tool.tabelCol(this.$route.name).exportTable.tablecols
+    this.tableCols = this.tool.tabelCol(this.$route.name).productsTable.tablecols
+    this.tableColsProduct = this.tool.tabelCol(this.$route.name).productsTable.tablecols
+    this.tableColsTool = this.tool.tabelCol(this.$route.name).toolsTable.tablecols
   }
 }
 

src/template/tableMainLayout/index.vue

@@ -5,12 +5,13 @@
         <el-empty :image="require('../../../assets/empty.svg')" :image-size="250">
         </el-empty>
       </div> -->
-<!--      <el-table-column
+      <el-table-column
           type="selection"
+          v-if="isCheck === true"
           width="45"
           align="center"
           @handleSelectionChange="handleSelectionChange">
-      </el-table-column>-->
+      </el-table-column>
       <el-table-column show-overflow-tooltip v-for="(col) in layout" :key="col.tablecolid" :prop="col.columnname" :label="col.title" :width="col.width ? col.width : 0" :min-width="col.width === 0 ? 150 : col.width" :fixed="fixedName ? fixedName.indexOf(col.columnname)!= -1?redirect ? redirect : 'right' :false : false">
         <template slot-scope="scope">
 
@@ -50,7 +51,7 @@ export default {
     custom:是否启用自定义结构;
     opwidth:操作列宽度
   */
-  props:['data','tableName','custom','layout','fixRightData','fixLeftData','height','fixedName','redirect'],
+  props:['data','tableName','custom','layout','fixRightData','fixLeftData','height','fixedName','redirect','isCheck'],
   data () {
     return {
       list:[],