qimall/addons/CloudStock/backend/views/goods/index.php

<?php

use common\helpers\ComponentHelper;

$diyPath = dirname(__DIR__) . '/components';
ComponentHelper::loadComponentView('stock-goods-edit', $diyPath);
ComponentHelper::loadComponentView('give-coupon', $diyPath);
?>
<div id="app" v-cloak>
	<el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
		<div slot="header">
			<div>
				<span>商品管理</span>
			</div>
		</div>
		<div class="table-body">
			<div style="margin-bottom: 20px;">
				<el-button type="primary" style="padding: 9px 15px !important;" @click="editClick(0)" size="small">添加商品</el-button>
			</div>

			<el-table
				v-loading="listLoading"
				stripe
				size="small"
				:data="list"
				style="width: 100%"
				class="listTable">
				<el-table-column
					prop="goods_id"
					label="商品ID"
					align="center"
					min-width="80">
				</el-table-column>
				<el-table-column
					label="商品名称"
					min-width="200">
					<template slot-scope="scope">
						<div style="display: flex;align-items: center;">
							<el-image fit="cover" :src="scope.row.cover_pic" style="width: 40px;height: 40px;display: block;margin-right: 5px;"></el-image>
							<div>{{scope.row.goods_name}}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column
					align="center"
					prop="goods_price"
					label="零售价"
					min-width="100">
				</el-table-column>
				<el-table-column
					align="center"
					min-width="220"
					label="代理商拿货价">
					<template slot-scope="scope">

						<el-table
							:data="scope.row.agent_price"
							border
							style="width: 100%">
							<el-table-column
								prop="name"
								label="等级名称"
								align="center">
							</el-table-column>
							<el-table-column
								prop="price"
								label="拿货价(元)"
								align="center">
							</el-table-column>
						</el-table>

					</template>
				</el-table-column>
				<el-table-column
					min-width="220"
					align="center"
					label="平级奖">
					<template slot-scope="scope">
						<el-table
							:data="scope.row.equal_level_list"
							border
							height="360"
							style="width: 100%">
							<el-table-column
								prop="level_name"
								label="等级名称"
								align="center">
							</el-table-column>
							<el-table-column
								prop="config_value"
								label="平级奖(元)"
								align="center"><!-- price -->
							</el-table-column>
						</el-table>
						<!-- <el-tag v-if="scope.row.equal_level_list.length == 0" type="info">暂无数据</el-tag> -->
					</template>
				</el-table-column>
				<el-table-column
					min-width="320"
					align="center"
					label="越级奖励">
					<template slot-scope="scope">
						<!-- <el-tag style="margin: 0 5px 5px 0;" v-for="(item,index) in scope.row.over_level_list" v-if="item.is_use == 1">{{item.name}}：{{item.price}}元</el-tag> -->
						<el-table
							:data="scope.row.over_level_list"
							border
							style="width: 100%">
							<el-table-column
								prop="name"
								label="等级名称"
								align="center">
							</el-table-column>
							<el-table-column
								prop="price"
								label="越一级奖(元)"
								align="center">
							</el-table-column>
							<el-table-column
								prop="price2"
								label="越二级奖(元)"
								align="center">
						</el-table>
					</template>
				</el-table-column>
				<el-table-column
					min-width="220"
					align="center"
					label="补货奖">
					<template slot-scope="scope">
						<el-table
							:data="scope.row.fill_level_list"
							border
							style="width: 100%">
							<el-table-column
								prop="name"
								label="等级名称"
								align="center">
							</el-table-column>
							<el-table-column
								prop="price"
								label="补货奖(元)"
								align="center">
							</el-table-column>
						</el-table>
					</template>
				</el-table-column>

				<el-table-column
					align="center"
					label="是否允许向平台补货"
					min-width="100">
					<template slot-scope="scope">
						<el-switch
							@change="((val)=>{switchFun(val,scope.row.goods_id)})"
							v-model="scope.row.is_allow_fill"
							:active-value="1"
							:inactive-value="0">
						</el-switch>
					</template>

				</el-table-column>

				<el-table-column
					label="操作"
					align="center"
					min-width="150">
					<template slot-scope="scope">
						<el-button circle size="mini" type="text" @click="couponClick(scope.row.goods_id)">
							<el-tooltip class="item" effect="dark" content="补货设置" placement="top">
								<img src="resources/img/mall/coupon.png" alt="">
							</el-tooltip>
						</el-button>
						<el-button circle size="mini" type="text" @click="editClick(scope.row.id)">
							<el-tooltip class="item" effect="dark" content="编辑" placement="top">
								<img src="resources/img/mall/edit.png" alt="">
							</el-tooltip>
						</el-button>
						<el-button circle size="mini" type="text" @click="cloudStockDelete(scope.row, scope.$index)">
							<el-tooltip class="item" effect="dark" content="删除" placement="top">
								<img src="resources/img/mall/del.png" alt="">
							</el-tooltip>
						</el-button>


					</template>
				</el-table-column>
			</el-table>

			<div style="text-align: right;margin: 20px 0;">
				<el-pagination
					@current-change="pagination"
					background
					layout="prev, pager, next"
					:page-count="page_count">
				</el-pagination>
			</div>
		</div>
	</el-card>
	<stock-goods-edit v-model="edit.show" :edit_row="edit" @refresdatafun="getList"></stock-goods-edit>
	<give-coupon :visible="give_coupon.show" :goods_id="give_coupon.goods_id" @cancel="give_coupon.show = false" @save="give_coupon.goods_id = 0"></give-coupon>
</div>
<script>
	const app = new Vue({
		el: '#app',
		data() {
			return {
				edit: {
					show: false,
					id: 0,
				},
				give_coupon: {
					show: false,
					goods_id: 0,
				},
				list: [],
				keyword: '',
				listLoading: false,
				page: 1,
				level: 1,
				pageCount: 0,
				condition_type_list: {
					1: '下线用户数',
					2: '累计佣金',
					3: '已提现佣金'
				},
				price_type_list: {
					1: '%',
					2: '元'
				},
				page_count: 0,

			};
		},
		mounted: function() {
			this.getList();
		},
		methods: {
			couponClick(goods_id) {
				console.log(2342);
				this.give_coupon.show = true;
				this.give_coupon.goods_id = goods_id;
			},
			search() {
				this.page = 1;
				this.getList();
			},
			pagination(currentPage) {
				let self = this;
				self.page = currentPage;
				self.getList();
			},
			getList() {

				//console.log('请求列表前的参数page='+this.page);
				this.listLoading = true;
				request({
					params: {
						r: 'cloud-stock/goods/index', //'plugin/stock/mall/goods/index',
						page: this.page,
						limit: 10
					},
					method: 'get',
				}).then(e => {
					this.listLoading = false;
					//console.log('请求商品列表的结果='+JSON.stringify(e))
					if (e.data.code == 0) {
						let arr = e.data.data.list;
						arr.forEach((item) => {
							item.agent_price = item.agent_price.filter((item2) => {
								return item2.is_use == 1;
							})

							/* item.equal_level_list = item.equal_level_list.filter((item2)=>{
								return item2.is_use == 1;
							}) */

							item.fill_level_list = item.fill_level_list.filter((item2) => {
								return item2.is_use == 1;
							})

							item.over_level_list = item.over_level_list.filter((item2) => {
								return item2.is_use == 1;
							})
							if (item.over_level_list_2) {
								item.over_level_list_2 = item.over_level_list_2.filter((item2) => {
									return item2.is_use == 1;
								})
							}


						})

						this.list = arr;
						//console.log('list=='+JSON.stringify(this.list))
						this.page_count = e.data.data.page_count;
					} else {
						this.$message.error(e.data.msg);
					}
					/* self.list = e.data.data.list;
					self.pageCount = e.data.data.pagination.page_count; */
				}).catch(e => {
					this.listLoading = false;
					console.log(e);
				});
			},

			switchStatus(row) {
				let self = this;
				self.listLoading = true;
				request({
					params: {
						r: 'plugin/stock/mall/level/switch-status',
					},
					method: 'post',
					data: {
						id: row.id,
					}
				}).then(e => {
					self.listLoading = false;
					if (e.data.code === 0) {
						self.$message.success(e.data.msg);
					} else {
						self.$message.error(e.data.msg);
					}
					self.getList();
				}).catch(e => {
					console.log(e);
				});
			},
			editClick(id) {
				if (id) {
					this.edit.id = id;
					this.edit.show = true;
					this.edit.title = "编辑商品"

					if (id == -1) {
						this.edit.title = "添加商品"
					}
				} else {
					this.edit.id = id;
					this.edit.show = true;
					this.edit.title = "添加商品"
				}

			},
			cloudStockDelete(row, index) {
				let self = this;
				self.$confirm('删除该库存商品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.listLoading = true;
					request({
						params: {
							r: 'cloud-stock/goods/delete',
						},
						method: 'post',
						data: {
							id: row.id,
						}
					}).then(e => {
						self.listLoading = false;
						if (e.data.code === 0) {
							self.$message.success(e.data.msg);
							self.list.splice(index, 1);
						} else {
							self.$message.error(e.data.msg);
						}
					}).catch(e => {
						console.log(e);
					});
				}).catch(() => {
					self.$message.info('已取消删除')
				});
			},
			switchFun(e, id) {
				this.listLoading = true;
				request({
					params: {
						r: 'cloud-stock/goods/patch', // 库存商品局部更新plugin/cloud_stock/mall/goods/patch
					},
					method: 'post',
					data: {
						goods_id: id,
						is_allow_fill: e
					}
				}).then(res => {
					this.listLoading = false;
					if (res.data.code === 0) {
						this.$message.success(res.data.msg);
					} else {
						this.$message.error(res.data.msg);
					}

				}).catch(e => {
					this.listLoading = false;
					console.log(e);
				});

			}
		}
	});
</script>

<style>
	.table-body {
		padding: 20px;
		background-color: #fff;
	}

	.input-item {
		display: inline-block;
		width: 250px;
		margin: 0 0 20px;
	}

	.input-item .el-input__inner {
		border-right: 0;
	}

	.input-item .el-input__inner:hover {
		border: 1px solid #dcdfe6;
		border-right: 0;
		outline: 0;
	}

	.input-item .el-input__inner:focus {
		border: 1px solid #dcdfe6;
		border-right: 0;
		outline: 0;
	}

	.input-item .el-input-group__append {
		background-color: #fff;
		border-left: 0;
		width: 10%;
		padding: 0;
	}

	.input-item .el-input-group__append .el-button {
		padding: 0;
	}

	.input-item .el-input-group__append .el-button {
		margin: 0;
	}

	.table-body .el-button {
		padding: 0 !important;
		border: 0;
		margin: 0 5px;
	}


	.el-table thead {
		font-size: 14px;
		color: #333;
	}

	.listTable>.el-table__footer-wrapper,
	.listTable>.el-table__header-wrapper {
		border-bottom: 1.4px solid #D6D6D6;
	}
</style>