增加租凭管理

src/api/tenancyProduct.js

@@ -0,0 +1,73 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+// 获取列表
+export function getList(params) {
+  return request({
+    url: `/goods/lease/list/page`,
+    method: 'post',
+    params
+  })
+}
+
+//导出
+export function pageExport(data, name) {
+  return postBlob({
+    url: '/goods/lease/list/page/export',
+    data,
+    name
+  })
+}
+
+// 保存
+export function save(data) {
+  return request({
+    url: `/goods/lease/save`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除
+export function del(data) {
+  return request({
+    url: `/goods/lease/del`,
+    method: 'post',
+    data
+  })
+}
+
+// 详情
+export function getDetail(params) {
+  return request({
+    url: `/goods/lease/detail`,
+    method: 'post',
+    params
+  })
+}
+
+// 获取商品状态条数
+export function getGoodsStateCount(params) {
+  return request({
+    url: '/goods/lease/count',
+    method: 'post',
+    params
+  })
+}
+
+// 上下架
+export function updateStatus(params) {
+  return request({
+    url: `/websit/goods/batch/update/status`,
+    method: 'post',
+    params
+  })
+}
+
+// 获取商品分类
+export function getClassifyList(params) {
+  return request({
+    url: '/goods/category/list',
+    method: 'get',
+    params
+  })
+}

src/views/mallManagement/tenancyManagement/tenancyOrder/index.vue

@@ -0,0 +1,8 @@
+<template>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/views/mallManagement/tenancyManagement/tenancyProduct/detail.vue

@@ -0,0 +1,259 @@
+<template>
+	<div class="s-page">
+		<el-page-header @back="goBack" :content="title"></el-page-header>
+		<el-divider></el-divider>
+		<el-card class="box-card">
+			<div style="margin-bottom: 20px;font-weight: bold;">商品信息</div>
+			<div class="mymain-container">
+				<el-form ref="formData" :rules="rules" :model="formData" label-width="90px" size="small" label-position="right">
+					<el-row :gutter="20" justify="start">
+						<el-col :span="24">
+							<el-form-item label="商品名称" prop="name">
+								<el-input type="text" v-model="formData.name" maxlength="40" show-word-limit :disabled="formType==2" placeholder="请输入"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="保修描述" prop="repairRemark">
+								<el-input type="textarea" :rows="3" :disabled="formType==2" v-model="formData.repairRemark" placeholder="请输入"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="商品分类" prop="categoryId">
+								<div class="flex">
+									<el-select v-model="formData.categoryId" placeholder="请选择" style="flex: 1">
+									    <el-option
+									      v-for="item in classifyList"
+									      :key="item.categoryId"
+									      :label="item.name"
+									      :value="item.categoryId">
+									    </el-option>
+									</el-select>
+									<div style="color: #2878ff;margin-left: 20px;cursor: pointer;">
+										<span @click="createdType()">创建分类</span>
+										<span style="margin: 0 10px">|</span>
+										<span @click="getClassifyList()">刷新下</span>
+									</div>
+								</div>
+								
+							</el-form-item>
+						</el-col>
+						<el-col :span="8">
+							<el-form-item label="租凭价格" prop="leasePrice">
+								<div class="flex">
+									<el-input type="number" style="flex: 1" v-model="formData.leasePrice" oninput="if(value<0) value=0" :disabled="formType==2" placeholder="请输入"></el-input>
+									<span>元/月</span>
+								</div>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8">
+							<el-form-item label="划线价格" prop="oldPrice">
+								<div class="flex">
+									<el-input type="number" style="flex: 1" v-model="formData.oldPrice" oninput="if(value<0) value=0" :disabled="formType==2" placeholder="请输入"></el-input>
+									<span>元/月</span>
+								</div>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8">
+							<el-form-item label="定金价格" prop="depositPrice">
+								<div class="flex">
+									<el-input type="number" style="flex: 1" v-model="formData.depositPrice" oninput="if(value<0) value=0" :disabled="formType==2" placeholder="请输入"></el-input>
+									<span>元</span>
+								</div>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8">
+							<el-form-item label="商品状态" prop="status" class="is-required">
+								<el-radio-group v-model="formData.status">
+									<el-radio :disabled="formType==2" :label="true">上架</el-radio>
+									<el-radio :disabled="formType==2" :label="false">下架</el-radio>
+								</el-radio-group>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8">
+							<el-form-item label="单位" prop="unit">
+								<el-input type="text" v-model="formData.unit" :disabled="formType==2" placeholder="请输入"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8">
+							<el-form-item label="商品排序" prop="sort" class="is-required">
+								<el-input type="number" v-model="formData.sort" oninput="if(value<0 || !value) value=0" :disabled="formType==2" placeholder="请输入"></el-input>
+							</el-form-item>
+						</el-col>
+						
+						<el-col :span="24">
+							<el-form-item label="商品详情" prop="content">
+								<quillEditor v-model="formData.content"></quillEditor>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+			</div>
+		</el-card>
+		<div class="page-footer">
+			<div class="footer">
+				<el-button v-if="formType != 2" size="small" type="primary" @click="confirm()">提交</el-button>
+				<el-button size="small" type="info" @click="goBack">返回</el-button>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import { getDetail, getGoodsStateCount, save } from "@/api/tenancyProduct";
+	import { getClassifyList } from '@/api/goods'
+	import request from '@/utils/request'
+	import quillEditor from '@/components/v-quill-editor'
+	export default {
+		components: {quillEditor},
+		props: ['id','title','formType'],
+		data() {
+			return {
+				classifyList: [], // 商品分类列表
+				formData: {
+					name: '',
+					repairRemark: '',
+					categoryId: '',
+					leasePrice: '',
+					oldPrice: '',
+					depositPrice: '',
+					status: true,
+					unit: '',
+					sort: 0,
+					content: ''
+				},
+				isSave: true,
+				rules: {
+					name: [
+						{ required: true, message: '请输入商品名称', trigger: 'blur' },
+					],
+					repairRemark: [
+						{ required: true, message: '请输入保修描述', trigger: 'blur' },
+					],
+					categoryId: [
+						{ required: true, message: '请选择商品分类', trigger: 'change' }
+					],
+					leasePrice: [
+						{ required: true, message: '请输入租凭价格', trigger: 'blur' },
+					],
+					oldPrice: [
+						{ required: true, message: '请输入划线价格', trigger: 'blur' },
+					],
+					depositPrice: [
+						{ required: true, message: '请输入定金价格', trigger: 'blur' },
+					],
+				},
+			};
+		},
+		computed: {
+			
+		},
+		async created() {
+			await this.getClassifyList()
+			if(this.id){
+				this.getDetail()
+			}
+		},
+		methods: {
+			// 返回
+			goBack() {
+				this.$emit('back');
+			},
+			async getDetail(){
+				const that = this
+				this.formData.checkTypeList = []
+				getDetail({id: this.id}).then( async res => {
+					Object.assign(this.formData, res.data)
+				})
+			},
+			// 获取商品分类列表
+			async getClassifyList() {
+			  return new Promise((resolve, reject) => {
+			    let params = {
+			      name: '',
+			      categoryLevel: 1,
+			      status: true
+			    };
+			    getClassifyList(params).then(res => {
+			      this.classifyList = res.data;
+			    }).finally(res => {
+			      resolve();
+			    })
+			  })
+			},
+			changeType(){
+				console.log(this.formData.classify)
+			},
+			createdType(){
+				this.$router.push({
+					name: 'category_manage'
+				})
+			},
+			confirm(){
+				const that = this
+				this.$refs.formData.validate((valid, invalidFields, errLabels) => {
+					if (valid) {
+						this.save()
+					}
+				})
+			},
+			save(){
+				if(!this.isSave){
+					return false
+				}
+				this.isSave = false
+				setTimeout(()=>{
+					this.isSave = true
+				},3000)
+				save({...this.formData}).then(res => {
+					this.$message.success('保存成功!')
+					setTimeout(()=>{
+						this.goBack()
+					},1500)
+				})
+			}
+		}
+	};
+</script>
+
+<style scoped="scoped" lang="scss">
+	.s-page {
+		padding: 20px;
+		background-color: #ffffff;
+	}
+	.page-footer {
+		height: 70px;
+	}
+	.flex{
+		display: flex;
+		align-items: center;
+	}
+	.footer {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		z-index: 1;
+		width: 100%;
+		background: #fff;
+		padding: 15px 40px;
+		box-sizing: border-box;
+		transition: all 0.28s;
+		text-align: right;
+		box-shadow: 0 2px 5px 0 rgb(0 0 0 / 50%), 0 2px 5px 0 rgb(0 0 0 / 10%);
+	
+		&.hideSidebar {
+			margin-left: 54px;
+			width: calc(100vw - 54px);
+		}
+	
+		&.openSidebar {
+			margin-left: 210px;
+			width: calc(100vw - 210px);
+		}
+	
+		.tips {
+			font-size: 12px;
+			color: red;
+			margin-top: 10px;
+		}
+	}
+</style>

src/views/mallManagement/tenancyManagement/tenancyProduct/index.vue

@@ -0,0 +1,379 @@
+<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>