|
@@ -0,0 +1,250 @@
|
|
|
+<template>
|
|
|
+<div class="container normal-panel">
|
|
|
+ <div class="normal-margin">
|
|
|
+ <!-- <slot name="operation"></slot> -->
|
|
|
+ <div class="flex-align-center">
|
|
|
+ <el-radio-group class="inline-16" size="small" v-model="params.content.istool" @change="onRadioChange">
|
|
|
+ <el-radio-button :label="0">产品</el-radio-button>
|
|
|
+ <el-radio-button :label="1">工具</el-radio-button>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-input style="width:300px" size="small" v-model="params.content.where.condition" placeholder="产品名称,编号" @keyup.enter.native="listData(params.content.pageNumber = 1)" @clear="listData(params.content.pageNumber = 1)" clearable></el-input>
|
|
|
+ <ExportBtn v-if="tool.checkAuth($route.name,'export')" :tablecols="layout" :param="params" :total="total" excelTitle="购物车"></ExportBtn>
|
|
|
+ </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>
|
|
|
+ <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> / <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">¥ {{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">¥ {{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>
|
|
|
+ <div style="margin-top:16px;text-align:right">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ small
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="params.content.pageSize"
|
|
|
+ layout="total, prev, pager, next, jumper"
|
|
|
+ :total="total">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import previewImage from '@/components/previewImage/index'
|
|
|
+import ExportBtn from './exportBtn'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data () {
|
|
|
+ return {
|
|
|
+ params:{
|
|
|
+ "id": 20220924095302,
|
|
|
+ "content": {
|
|
|
+ "pageNumber": 1,
|
|
|
+ "pageSize": 9999,
|
|
|
+ "istool":0,
|
|
|
+ "where": {
|
|
|
+ "condition": ''
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tableSelectData:[],
|
|
|
+ tableData: [],
|
|
|
+ total:0,
|
|
|
+ currentPage:0,
|
|
|
+ layout:[]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ previewImage,
|
|
|
+ ExportBtn
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ async listData () {
|
|
|
+ const res = await this.$api.requested(this.params)
|
|
|
+ this.tableData = res.data
|
|
|
+ this.total = res.total
|
|
|
+ this.currentPage = res.pageNumber
|
|
|
+ console.log(res.data);
|
|
|
+
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ // console.log(`每页 ${val} 条`);
|
|
|
+ this.params.content.pageSize = val
|
|
|
+ this.listData()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ // console.log(`当前页: ${val}`);
|
|
|
+ this.params.content.pageNumber = val
|
|
|
+ this.listData()
|
|
|
+ },
|
|
|
+ selectionChange (val) {
|
|
|
+ this.tableSelectData = val
|
|
|
+ if (this.params.content.istool == 0) {
|
|
|
+ let _isbrandSame = this.tableSelectData.some(item=>item.sa_brandid !== this.tableSelectData[0].sa_brandid)
|
|
|
+
|
|
|
+ if (_isbrandSame) return this.$message({message:"当前存在不同品牌产品请检查",type:'error'})
|
|
|
+
|
|
|
+ let _isFieldSame = this.tableSelectData.some(item=>item.tradefield_shoppingcart !== this.tableSelectData[0].tradefield_shoppingcart)
|
|
|
+
|
|
|
+ if (_isFieldSame) return this.$message({message:"当前存在不同领域产品请检查",type:'error'})
|
|
|
+
|
|
|
+ this.$emit('selection',val)
|
|
|
+ } else {
|
|
|
+ this.$emit('selection',val)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ clearSelection () {
|
|
|
+ this.$refs.multipleTable.clearSelection();
|
|
|
+ },
|
|
|
+ onRadioChange () {
|
|
|
+ this.params.content.pageNumber = 1
|
|
|
+ this.listData()
|
|
|
+ this.$emit('onRadioChange',this.params.content.istool)
|
|
|
+ },
|
|
|
+ async changeQty (index,row) {
|
|
|
+ if (row.qty < row.orderminqty){
|
|
|
+ row.qty = row.orderminqty
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id": 20220924104302,
|
|
|
+ "content": {
|
|
|
+ "sa_shoppingcartid": row.sa_shoppingcartid,
|
|
|
+ "qty": row.qty //数量
|
|
|
+ },
|
|
|
+ })
|
|
|
+ this.$emit('qtyChange')
|
|
|
+ }else {
|
|
|
+ if ((row.qty - row.orderminqty)/row.orderaddqty > 0){
|
|
|
+ let k = Math.ceil((row.qty - row.orderminqty)/row.orderaddqty)
|
|
|
+ row.qty = k * row.orderaddqty + row.orderminqty
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id": 20220924104302,
|
|
|
+ "content": {
|
|
|
+ "sa_shoppingcartid": row.sa_shoppingcartid,
|
|
|
+ "qty": row.qty //数量
|
|
|
+ },
|
|
|
+ })
|
|
|
+ this.$set(this.tableData,index,row)
|
|
|
+ this.$emit('qtyChange')
|
|
|
+ }else {
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ "id": 20220924104302,
|
|
|
+ "content": {
|
|
|
+ "sa_shoppingcartid": row.sa_shoppingcartid,
|
|
|
+ "qty": row.qty //数量
|
|
|
+ },
|
|
|
+ })
|
|
|
+ this.$emit('qtyChange')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+ this.listData()
|
|
|
+ this.layout = this.tool.tabelCol(this.$route.name).exportTable.tablecols
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+</style>
|
|
|
+<style scoped>
|
|
|
+.produtMag-panel{
|
|
|
+ /* margin: 30px; */
|
|
|
+ padding:0 10px 10px 10px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius:5px;
|
|
|
+ overflow: hidden;
|
|
|
+ border:1px solid rgb(0 0 0 / 5%)
|
|
|
+ /* box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
|
|
|
+ transform: translate3d(0,-2px,0); */
|
|
|
+}
|
|
|
+.image {
|
|
|
+ width:40px;height:40px;margin:0px auto;
|
|
|
+}
|
|
|
+</style>
|