zfire-newmall-admin/src/views/mallManagement/tenancyManagement/tenancyProduct/index.vue

<template>
	<div class="app-container">
		<template v-if="!isShowDetail">
			<div class="tab-container clearfix">
				<div class="tab-list fl">
					<div class="item" :class="screenForm.status === '' ? 'current':''" @click="changeType('')">
						全部({{ (downCount + upCount) || 0 }})</div>
					<div class="item" :class="screenForm.status ? 'current':''" @click="changeType(true)">
						租凭中({{ upCount || 0 }})</div>
					<div class="item" :class="screenForm.status === false ? 'current':''" @click="changeType(false)">
						已下架({{ downCount || 0 }})</div>
				</div>
				<el-button type="primary" size="small" @click="addOrEdit('add')">添加商品</el-button>
			</div>
			
			<div class="screen2-container">
				<el-row :gutter="20">
					<el-col :xs="24" :sm="2" :lg="3" style="opacity: 0;">.</el-col>
			
					<el-col :xs="24" :sm="20" :lg="18">
						<el-form ref="form" :model="screenForm" label-width="80px">
							<div class="search">
								<el-input v-model="screenForm.keyword" placeholder="想快速搜索什么商品呢？输入商品名称，商品id，商品分类都可快速找到"
									class="input-with-select" clearable @change="getListByScreen">
									<el-button slot="append" icon="el-icon-search" @click="getListByScreen"></el-button>
								</el-input>
							</div>
							<div class="screen clearfix">
								<el-row :gutter="20">
									<el-col :xs="12" :sm="12" :lg="4">
										<el-form-item label="商品分类：" label-width="90px">
											<el-cascader v-model="screenForm.classify" :options="classifyList"
												:props="{ label: 'name', value: 'categoryId' }" size="small"
												@change="getListByScreen">
											</el-cascader>
										</el-form-item>
									</el-col>
									<el-col :xs="12" :sm="12" :lg="8">
										<el-form-item label="租凭定金：" label-width="90px">
											<el-input v-model="screenForm.price1" size="small" @change="getListByScreen"
												clearable></el-input>
											<span>至</span>
											<el-input v-model="screenForm.price2" size="small" @change="getListByScreen"
												clearable></el-input>
										</el-form-item>
									</el-col>
									<el-col :xs="12" :sm="12" :lg="8">
										<el-form-item label="租凭价格：" label-width="90px">
											<el-input v-model="screenForm.amount1" size="small" @change="getListByScreen"
												clearable></el-input>
											<span>至</span>
											<el-input v-model="screenForm.amount2" size="small" @change="getListByScreen"
												clearable></el-input>
										</el-form-item>
									</el-col>
								</el-row>
							</div>
						</el-form>
					</el-col>
			
					<el-col :xs="24" :sm="2" :lg="3" style="opacity: 0;">.</el-col>
				</el-row>
			</div>
			
			<div class="mymain-container">
				<div class="table">
					<el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit
						highlight-current-row stripe @selection-change="handleTableSelection">
						<el-table-column align="center" type="selection" width="55" fixed></el-table-column>
						<el-table-column align="center" label="一级分类图片" prop="imgUrl" width="85">
							<template slot-scope="scope">
								<el-image style="width: 60px; height: 60px; display: block;" :src="scope.row.imgUrl"
									:preview-src-list="[scope.row.imgUrl]" fit="cover"></el-image>
							</template>
						</el-table-column>
						<el-table-column align="center" label="商品ID" prop="id" min-width="200"></el-table-column>
						<el-table-column align="center" label="商品名称" prop="name" min-width="200"></el-table-column>
						<el-table-column align="center" label="租凭价格" prop="leasePrice" min-width="200"></el-table-column>
						<el-table-column align="center" label="租凭定金" prop="depositPrice" min-width="200"></el-table-column>
						<el-table-column align="center" label="排序" prop="sort" min-width="110" sortable>
							<template slot-scope="scope">
								<!-- {{ scope.row.sortNum }} -->
								<span style="margin-right: 10px">{{ scope.row.sort }}</span>
								<i class="el-icon-edit pointer" @click="editData('sort', scope.row)"></i>
							</template>
						</el-table-column>
						<el-table-column align="center" label="状态" class-name="status-col">
							<template slot-scope="scope">
								<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center;">
									<el-tag size="small"
										:type="scope.row.status ? 'success':'danger'">{{ scope.row.status ? '上架':'下架' }}</el-tag>
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作" width="280" fixed="right">
							<template slot-scope="scope">
								<el-button v-if="$restrict('edit')" type="primary" size="mini"
									@click="addOrEdit('edit', scope.row.id)">编辑</el-button>
								<el-button v-if="$restrict('copyLink')" type="primary" size="mini" class="tag-read"
									@click="copy(scope.row.id)"
									:data-clipboard-text="scope.row.id">复制链接</el-button>
								<el-popconfirm v-if="$restrict('del')" style="margin-left: 10px;" title="确定删除吗？"
									@confirm="delItem(scope.row.id)">
									<el-button slot="reference" size="mini">删除</el-button>
								</el-popconfirm>
							</template>
						</el-table-column>
					</el-table>
				</div>
			
				<div class="pagination clearfix">
					<div class="fr">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
							layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
						</el-pagination>
					</div>
				</div>
			</div>
		</template>
		<template v-else>
			<detail @back="backList" :title="'租凭产品' + formTypeItems[formType]" :id="id" :formType="formType"></detail>
		</template>
	</div>
</template>

<script>
	import { getList, del, getClassifyList, getGoodsStateCount, getDetail, save } from '@/api/tenancyProduct'
	import Clipboard from 'clipboard'
	import detail from './detail'
	import { EventBus } from '@/utils/eventBus'
	export default {
		components: {detail},
		data() {
			return {
				dataList: null, // 列表数据
				isShowDetail: false,
				listLoading: true, // 列表加载loading
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页数量
				listTotal: 0, // 列表总数
				screenForm: {
					status: '',
					keyword: '',
					classify: '',
					status: '',
					price1: '',
					price2: '',
					amount1: '',
					amount2: '',
				},
				select_status: [ // 筛选字段 - 状态
					{
						label: '上架',
						value: true
					},
					{
						label: '下架',
						value: false
					}
				],
				classifyList: [],
				upCount: 0,
				downCount: 0,
				id: '',
				formType: 0,
				formTypeItems: ['新增','编辑'],
				tableSelection: [],
			}
		},
		created() {
			this.getClassifyList();
			this.getList();
			EventBus.$on("updateGoodsListPage", () => {
				this.getList();
			})
		},
		methods: {
			getClassifyList() {
				let params = {
					name: '',
					status: true
				};
				getClassifyList(params).then(res => {
					res.data.unshift({
						name: '全部',
						categoryId: '',
						children: null,
					});
					this.classifyList = res.data;
				})
			},
			
			backList() {
				this.id = ''
				this.isShowDetail = false;
				this.getListByScreen()
			},
			
			getList() {
				this.listLoading = true;

				let categoryId = '';
				if (this.screenForm.classify) {
					categoryId = this.screenForm.classify[1];
				}

				let params = {
					status: this.screenForm.status,
					keyword: this.screenForm.keyword,
					categoryId: categoryId,
					status: this.screenForm.status,
					startDeposit: this.screenForm.price1,
					endDeposit: this.screenForm.price2,
					startPrice: this.screenForm.amount1,
					endPrice: this.screenForm.amount2,
					pageNum: this.currentPage,
					pageSize: this.pageSize
				};

				getList(params).then(res => {
					this.dataList = res.data.records;
					this.listTotal = res.data.total;
					this.listLoading = false;
				})

				getGoodsStateCount({}).then(res => {
					this.downCount = res.data.downCount;
					this.upCount = res.data.upCount;
				})
			},
			
			async editData(type, item){
				let params = {}
				await getDetail({id: item.id}).then(res => {
				  params = res.data;
				})
				this.$prompt('请输入排序', '编辑', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  inputValue: item.sort,
				  promptObj: {
					  inputType: 'number',
					  inputValidator: function(value) {
					    if(!value && value !== 0) return '请输入排序'
					    if(value*1 < 0) return '排序不能小于0'
					  }
				  }
				}).then(({ value }) => {
				  params[type] = value;
				  save(params).then(res => {
				    this.$successMsg('编辑成功');
				    this.getList();
				  })
				}).catch(() => {});
			},
			
			// 更改每页数量
			handleSizeChange(val) {
				this.pageSize = val;
				this.currentPage = 1;
				this.getList();
			},

			// 更改当前页
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getList();
			},

			// 筛选后重新获取列表
			getListByScreen() {
				this.currentPage = 1;
				this.getList();
			},

			// 切换类型
			changeType(status) {
				this.screenForm.status = status;
				this.getListByScreen();
			},

			// 删除商品
			delItem(id) {
				del([id]).then(res => {
					this.getList();
					this.$successMsg();
				})
			},

			// 添加商品
			addOrEdit(type, id) {
				if(id){
					this.id = id
				}
				this.formType = id?1:0
				this.isShowDetail = true
			},

			copy() {
				const clipboard = new Clipboard('.tag-read');
				// clipboard.on('success', e => {
				//   this.$successMsg('复制成功');
				// })
				clipboard.on('error', e => {
					console.log('该浏览器不支持复制');
					return false;
				})
				this.$successMsg('复制成功');
			},

			// 表格选择列
			handleTableSelection(val) {
				this.tableSelection = val;
			},
		}
	}
</script>

<style scoped lang="scss">
	.tab-container {
		.tab-list {
			.item {
				float: left;
				font-size: 14px;
				margin-right: 20px;
				cursor: pointer;
				line-height: 32px;

				&.current {
					color: #409EFF;
				}
			}
		}
	}

	.screen2-container {
		.search {
			margin-top: 30px;
		}

		.screen {
			margin-top: 20px;

			.el-input {
				width: 40%;
			}

			span {
				width: 20%;
				display: inline-block;
				text-align: center;
				color: #666666;
			}
		}
	}

	.pointer {
		cursor: pointer;
		color: #409EFF;
	}
</style>

<style lang="scss">
	.screen2-container {
		.el-form-item__label {
			line-height: 32px;
		}

		.el-form-item__content {
			line-height: 32px;
		}
	}

	.el-image-viewer__wrapper .el-icon-circle-close {
		color: #ffffff !important;
		font-size: 60px;
	}
</style>