ngfrontend/src/views/shop/car-fund-products.vue

<template>
	<div class="app-container">
		<el-table
			:key="tableKey"
			v-loading="listLoading"
			:data="tableData"
			border
			fit
			highlight-current-row
			style="width: 100%;"
			ref="multipleTable"
			@selection-change="handleSelectionChange"
		>
			<el-table-column type="selection" width="70" align="center"></el-table-column>
			<el-table-column :label="$t('shop.productName')" align="center" prop="GOODS_NAME">
				<template slot-scope="{row}">
					<span>{{ row.GOODS_NAME }}</span>
				</template>
			</el-table-column>
			<el-table-column :label="$t('shop.productPicture')" align="center" min-width="70px" prop="GOODS_NAME">
				<template slot-scope="{row}">
					<el-image
						style="width: 70px; height: 70px"
						:src="tool.getArImage(row.COVER, '/files/')"
						:preview-src-list="[tool.getArImage(row.COVER, '/files/')]"
					>
					</el-image>
				</template>
			</el-table-column>
			<el-table-column :label="$t('shop.productPrice')" align="center" prop="SELL_PRICE">
				<template slot-scope="{row}">
					<span>{{ row.SELL_PRICE }}</span>
				</template>
			</el-table-column>
			<el-table-column :label="$t('shop.productBV')" align="center" prop="PRICE_PV">
				<template slot-scope="{row}">
					<span>{{ row.PRICE_PV }}</span>
				</template>
			</el-table-column>
			<el-table-column :label="$t('shop.taxRate')" align="center" prop="TAX_RATE">
				<template slot-scope="{row}">
					<span>{{ row.TAX_RATE / 100  }}</span>
				</template>
			</el-table-column>
			<el-table-column :label="$t('shop.taxAmount')" align="center">
				<template slot-scope="{row}">
					<span>{{ row | taxAmountFilter }}</span>
				</template>
			</el-table-column>
			<el-table-column :label="$t('shop.inventory')" align="center" prop="STORE_NUMS">
				<template slot-scope="{row}">
					<span>{{ row.STORE_NUMS }}</span>
				</template>
			</el-table-column>
			<el-table-column :label="$t('shop.inventory')" min-width="90" align="center">
				<template slot-scope="scope">
					<el-input-number size="mini" v-model="storeNums[scope.$index]" :min="0" :max="Number(scope.row.STORE_NUMS)" @change="(val)=>{handleInputNumber(val, scope.row)}"></el-input-number>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

		<div class="white-box-footer" v-show="display" style="margin-top: 15px;">
			<div class="flex data" style="float: left; display: inline-block; margin-top: 20px;">
				<el-button type="primary" size="small" @click="settlement()" style="float: left;">{{ $t('shop.checkOut') }}</el-button>
			</div>
			<div class="flex data" style="float: right; display: inline-block; line-height: 35px; font-size: 14px; margin-top: 20px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 15px;">
				<div style="margin-right: 2rem; display: inline-block;">{{ $t('shop.productPrice') }}：{{ $t('currency.sign') }} {{ sellPriceSum }}</div>
				<div style="margin-right: 2rem; display: inline-block;">{{ $t('shop.productBV') }}：{{ $t('currency.sign') }} {{ pricePvSum }}</div>
				<div style="display: inline-block;">{{ $t('shop.taxAmount') }}：{{ $t('currency.sign') }} {{ taxSum }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { fetchProductList, fetchProduct } from '@/api/shop'
import waves from '@/directive/waves'
import { parseTime } from '@/utils'
import tool from '@/utils/tool'
import Pagination from '@/components/Pagination'

export default {
	name: 'carFundProducts',
	components: { Pagination },
	directives: { waves },
	filters: {
		priceFilter(price) {
			return tool.formatPrice(price)
		},
		taxAmountFilter(row) {
			return tool.calculateTax(row.SELL_PRICE, row.TAX_RATE)
		},
		statusFilter(status) {
			const statusMap = {
				Unpaid: 'info',
				Paid: 'success',
			}
			return statusMap[status]
		},
	},
	data() {
		return {
			tableKey: 0,
			list: [],
			total: 0,
			tableData: [],
			listLoading: true,
			listQuery: {
				categoryType: 5,
				page: 1,
				limit: 20,
			},
			tool: tool,
			multipleSelection: [],
			sellPriceSum: 0.00,
			pricePvSum: 0.00,
			taxSum: 0.00,
			storeNums: [],
			display: false,
			currentPage: 1,
		}
	},
	created() {
		// 商品列表查询
		this.getList()
	},
	methods: {
		// 商品类别
		getList() {
			this.listLoading = true
			fetchProductList(this.listQuery).then(response => {
				this.list = response.data.list
				this.total = parseInt(response.data.totalCount)

				setTimeout(() => {
					this.listLoading = false
				}, 1.5 * 1000)

				let settingObj = this.list
				for (let i in this.list) {
					this.storeNums[i] = 1
					settingObj[i].chose_num = 0
				}

				this.tableData = Object.values(settingObj)
				let pageList = this.multipleSelection[this.currentPage]
				this.$nextTick(function () {
					for (let i in this.tableData) {
						for( let j in  pageList) {
							if( pageList[j].ID === this.tableData[i].ID ) {
								this.$data.storeNums[i] = pageList[j].chose_num
								this.tableData[i].chose_num = pageList[j].chose_num
								break
							}
						}
					}
				})
			})
		},
		// 选择商品计数
		handleInputNumber(val, row){
			let pageList = this.multipleSelection[this.currentPage]
			let selectStatus = false
			for (let i in pageList) {
				if( pageList[i].ID === row.ID ) {
					pageList[i].chose_num = val
					selectStatus = true
					break
				}
			}

			if (selectStatus) {
				this.multipleSelection[this.currentPage] = pageList
				this.handleSureChange()
			}
		},
		// 统计商品
		handleSureChange() {
			if (this.multipleSelection.length > 0) {
				let accumulatorSellPrice = 0, accumulatorPricePv = 0, accumulatorTax = 0
				this.multipleSelection.forEach(item => {
					item.forEach(accumulator => { accumulatorSellPrice += accumulator.SELL_PRICE * accumulator.chose_num * accumulator.DISCOUNT / 100; })
					item.forEach(accumulator => { accumulatorPricePv += Number(accumulator.PRICE_PV) * Number(accumulator.chose_num) * (Number(accumulator.DISCOUNT) / 100); })
					item.forEach(accumulator => { accumulatorTax += tool.calculateTax(Number(accumulator.SELL_PRICE), Number(accumulator.TAX_RATE), Number(accumulator.chose_num)); })
				})

				this.sellPriceSum = tool.formatPrice(accumulatorSellPrice)
				this.pricePvSum = tool.formatPrice(accumulatorPricePv)
				this.taxSum = tool.formatPrice(accumulatorTax)

				this.display = true
			} else {
				this.sellPriceSum = this.pricePvSum = this.taxSum = 0.00
				this.display = true
			}
		},
		handleSelectionChange(val) {
			let idx = -1, num
			for (let i in this.tableData) {
				for (let v in val) {
					if (val[v].ID === this.tableData[i].ID) {
						idx = i
						num = this.storeNums[idx]
						val[v]["chose_num"] = num
						break
					}
				}
			}
			this.multipleSelection[this.currentPage] = val

			// 计算统计
			this.handleSureChange()
		},
		// 结算商品
		settlement() {

		}
	},
	watch: {
		// 监听多选按钮,判断结算按钮是否可用
		multipleSelection: function (modern) {
			console.log(modern, modern.length)
			this.$data.display = modern.length > 0
		},
	},
}
</script>