Merge branch 'pengyouhao_dev'

src/api/tenancyOrder.js

@@ -0,0 +1,91 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+// 获取订单列表
+export function getList(params) {
+  return request({
+    url: '/lease/order/list/page',
+    method: 'post',
+    params
+  })
+}
+
+// 新增
+export function add(data) {
+  return request({
+    url: '/lease/order/add',
+    method: 'post',
+    data
+  })
+}
+
+// 获取订单详情
+export function getDetail(params) {
+  return request({
+    url: '/lease/order/detail',
+    method: 'post',
+    params
+  })
+}
+
+// 获取订单商品
+export function getGoods(params) {
+  return request({
+    url: '/goods/lease/list/page',
+    method: 'post',
+    params
+  })
+}
+
+// 取消订单
+export function cancelOrder(params) {
+  return request({
+    url: '/lease/order/cancel',
+    method: 'post',
+    params
+  })
+}
+
+// 确认订单
+export function confirmOrder(data) {
+  return request({
+    url: '/lease/order/confirm',
+    method: 'post',
+    data
+  })
+}
+
+// 确认回收
+export function confirmRecover(params) {
+  return request({
+    url: '/lease/order/recover',
+    method: 'post',
+    params
+  })
+}
+
+// 确认续期
+export function confirmRelet(params) {
+  return request({
+    url: '/lease/order/renewal',
+    method: 'post',
+    params
+  })
+}
+
+// 报修
+export function confirmRepair(data) {
+  return request({
+    url: '/order/base/save',
+    method: 'post',
+    data
+  })
+}
+
+// 报修
+export function getTypeList(data) {
+  return request({
+    url: '/order/smalltype/list',
+    method: 'post',
+    data
+  })
+}

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/detail.vue

@@ -0,0 +1,878 @@
+<template>
+	<div class="s-page">
+		<el-page-header @back="goBack" :content="title"></el-page-header>
+		<el-divider></el-divider>
+		<el-card class="box-card" v-if="formType != 0">
+			<div class="order-main">
+				<el-row>
+					<el-col :span="24">
+						<div class="order-main-title">
+							<span>订单编号：{{ formData.id }}</span>
+							<span>下单时间：{{ formData.createTime }}</span>
+						</div>
+					</el-col>
+				</el-row>
+				<el-row>
+					<el-col :span="10">
+						<div style="display: flex;">
+							<div>
+								<div class="order-main-status">
+									<span>{{ filterStatus(formData.status) }}</span>
+								</div>
+								<div class="order-main-opt-btn">
+									<el-button v-if="formData.status === 'WAIT'" type="primary" @click="submitOrder()"
+										style="margin-right: 10px">确定租赁</el-button>
+									<el-popconfirm :title="formData.status === 'LEASE'?'订单未到期，是否提前回收?':'确定回收订单吗？'" @confirm="isRecover = true" v-if="formData.status === 'LEASE' || formData.status === 'OVER'">
+										<el-button type="primary" slot="reference"
+											style="margin-right: 10px">确认回收</el-button>
+									</el-popconfirm>
+									<el-popconfirm title="确定取消订单吗？" @confirm="cancelOrder()"
+										v-if="formData.status === 'WAIT'">
+										<el-button slot="reference" type="info" plain
+											style="margin-right: 10px">取消订单</el-button>
+									</el-popconfirm>
+									<el-button v-if="formData.status === 'LEASE'" @click="isRepair = true" type="primary" style="margin-right: 10px">报修</el-button>
+									<el-button v-if="formData.status === 'LEASE' || formData.status === 'OVER'" @click="isRelet = true" type="primary" style="margin-right: 10px">续租</el-button>
+								</div>
+							</div>
+						</div>
+
+					</el-col>
+					<el-col :span="14" style="padding-top: 10px;">
+						<el-steps :active="formData.status == 'WAIT'?1:formData.status == 'LEASE'?2:formData.status == 'OVER'?3:formData.status == 'RECOVER'?4:0" align-center>
+							<el-step title="买家下单" :description="formData.createTime"></el-step>
+							<el-step title="商家确认" :description="formData.confirmTime ? formData.confirmTime : ''"></el-step>
+							<el-step title="租赁中" :description="formData.deliverTime ? formData.deliverTime : ''"></el-step>
+							<el-step title="已到期-待回收" :description="formData.overTime ? formData.overTime : ''"></el-step>
+							<el-step title="已到期-已回收" :description="formData.overTime ? formData.overTime : ''"></el-step>
+						</el-steps>
+					</el-col>
+				</el-row>
+			</div>
+		</el-card>
+		<el-card class="box-card">
+			<div slot="header" class="clearfix">
+				<span>客户信息</span>
+			</div>
+			<div class="mymain-container">
+				<el-form ref="formData" :rules="rules" :model="formData" label-width="110px" size="small"
+					label-position="left">
+					<el-row :gutter="20" justify="start">
+						<el-col :span="8">
+							<el-form-item label="客户姓名" prop="userName" :required="true">
+								<el-input type="text" :disabled="formType!=0 && formData.status != 'WAIT'"
+									v-model="formData.userName" placeholder="请输入"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="8">
+							<el-form-item label="客户联系电话" prop="userMobile" :required="true">
+								<el-input type="text" :disabled="formType!=0 && formData.status != 'WAIT'"
+									v-model="formData.userMobile" placeholder="请输入"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="客户地址" class="is-required">
+								<el-row>
+									<el-col :span="5" style="margin-right: 12px;">
+										<el-input type="text" v-model="formData.province" disabled
+											placeholder="请选择省"></el-input>
+									</el-col>
+									<el-col :span="5" style="margin-right: 12px;">
+										<el-input type="text" v-model="formData.city" disabled
+											placeholder="请选择市"></el-input>
+									</el-col>
+									<el-col :span="5" style="margin-right: 12px;">
+										<el-input type="text" v-model="formData.area" disabled
+											placeholder="请选择区"></el-input>
+									</el-col>
+									<el-col :span="8">
+										<el-input type="text" v-model="formData.street" disabled
+											placeholder="请选择街道"></el-input>
+									</el-col>
+								</el-row>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="" prop="address">
+								<el-row :gutter="20">
+									<el-col :span="22">
+										<el-input type="text" v-model="formData.address"
+											:disabled="formType!=0 && formData.status != 'WAIT'"
+											placeholder="详细地址"></el-input>
+									</el-col>
+									<el-col :span="2">
+										<geographicalPosi :disabled="formType!=0 && formData.status != 'WAIT'"
+											:formData="this.formData" @selectPosi="selectAddress" />
+									</el-col>
+								</el-row>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="备注">
+								<el-input type="textarea" :rows="4" v-model="formData.remark"
+									:disabled="formType!=0 && formData.status != 'WAIT'" placeholder="请输入"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :span="24">
+							<el-form-item label="租赁合同" prop="fileUrl" :rules="formType==0?[]:[{ required: true, message: `请上传租赁合同`, trigger: 'change' }]">
+								<ImageUpload :fileList="formData.fileUrl" :limit="1" :isEdit="formType==0 || formData.status == 'WAIT'" />
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+			</div>
+		</el-card>
+		<el-card class="box-card" v-if="formType == 0">
+			<div slot="header" class="clearfix">
+				<span>商品信息</span>
+			</div>
+			<el-button size="small" v-if="formType==0" type="primary" @click="add()">添加</el-button>
+			<div class="table">
+				<el-form ref="formData1" :model="formData1" label-width="0" size="small" label-position="left">
+					<el-table :data="formData1.dataList" element-loading-text="Loading" border fit highlight-current-rowstripe>
+						<el-table-column prop="categoryName" align="center" label="*商品分类">
+							<template slot-scope="scope">
+								<el-form-item :prop="'dataList.' + scope.$index + '.categoryName'">
+									<el-input type="text" v-model="scope.row.categoryName" disabled
+										placeholder="请选择分类"></el-input>
+								</el-form-item>
+							</template>
+						</el-table-column>
+						<el-table-column label="*商品名称" align="center">
+							<template slot-scope="scope">
+								<el-form-item :prop="'dataList.' + scope.$index + '.goods'"
+									:rules="[{ required: true, message: `请选择商品`, trigger: 'change' }]">
+									<el-select v-model="scope.row.goods" @change="changeGoods($event,scope.row)"
+										value-key="id" :disabled="isEdit != scope.$index || formType == 2"
+										placeholder="请选择" style="width: 100%;">
+										<el-option v-for="item in goodsList" :key="item.id" :label="item.name"
+											:value="item">
+										</el-option>
+									</el-select>
+								</el-form-item>
+							</template>
+						</el-table-column>
+						<el-table-column prop="goodsUnit" align="center" label="单位"></el-table-column>
+						<el-table-column prop="" align="center" label="*数量">
+							<template slot-scope="scope">
+								<el-form-item :prop="'dataList.' + scope.$index + '.qty'"
+									:rules="[{ required: true, message: `请输入数量`, trigger: 'blur' }]">
+									<el-input type="number" v-model="scope.row.qty"
+										:disabled="isEdit != scope.$index || formType == 2"
+										placeholder="请输入"></el-input>
+								</el-form-item>
+							</template>
+						</el-table-column>
+						<el-table-column label="操作" align="right" width="140">
+							<template slot-scope="scope" v-if="formType != 2">
+								<el-button size="mini" type="primary" v-if="scope.$index != isEdit"
+									@click="isEdit = scope.$index">编辑</el-button>
+								<el-button size="mini" type="danger" @click="del(scope.$index)">删除</el-button>
+							</template>
+						</el-table-column>
+					</el-table>
+				</el-form>
+			</div>
+		</el-card>
+		<el-card class="box-card" v-if="formType != 0">
+			<div class="table">
+				<el-form ref="formData3" :model="formData3" label-width="0" size="small" label-position="left">
+					<el-table :data="formData3.dataList" element-loading-text="Loading" border fit highlight-current-row
+						stripe>
+						<el-table-column align="center" label="*商品分类" width="300">
+							<template slot-scope="scope">
+								<div style="display: flex">
+									<div class="image">
+										<img :src="scope.row.categoryUrl" style="height:80px;width: 80px;">
+									</div>
+									<div class="main"
+										style="display: flex;justify-content: center;flex-direction: column;">
+										<span>{{ scope.row.goodsLeaseName }}</span>
+										<span>x{{ scope.row.qty }}</span>
+									</div>
+								</div>
+							</template>
+						</el-table-column>
+						<el-table-column prop="depositPrice" align="center" label="订金"></el-table-column>
+						<el-table-column prop="leasePrice" align="center" label="租价"></el-table-column>
+						<el-table-column prop="qty" align="center" label="数量"></el-table-column>
+						<el-table-column prop="startDate" align="center" label="*起租日期">
+							<template slot-scope="scope">
+								<el-form-item :prop="'dataList.' + scope.$index + '.startDate'" :rules="[{ required: true, message: `请选择日期`, trigger: 'blur' }]">
+									<el-date-picker
+									      v-model="scope.row.startDate"
+									      type="date"
+										  :disabled="formData.status != 'WAIT'"
+										  value-format="yyyy-MM-dd HH:mm:ss"
+									      placeholder="选择日期">
+									</el-date-picker>
+								</el-form-item>
+							</template>
+						</el-table-column>
+						<el-table-column prop="endDate" align="center" label="*到期日期">
+							<template slot-scope="scope">
+								<el-form-item :prop="'dataList.' + scope.$index + '.endDate'" :rules="[{ required: true, message: `请选择日期`, trigger: 'blur' }]">
+									<el-date-picker
+									      v-model="scope.row.endDate"
+									      type="date"
+										  :disabled="formData.status != 'WAIT'"
+										  value-format="yyyy-MM-dd HH:mm:ss"
+									      placeholder="选择日期">
+									</el-date-picker>
+								</el-form-item>
+							</template>
+						</el-table-column>
+						<el-table-column prop="realEndDate" align="center" label="实际到期日期"></el-table-column>
+						<el-table-column prop="depositAmount" align="center" label="*押金">
+							<template slot-scope="scope">
+								<el-form-item :prop="'dataList.' + scope.$index + '.depositAmount'"
+									:rules="[{ required: true, message: `请输入押金`, trigger: 'blur' }]">
+									<el-input type="number" v-model="scope.row.depositAmount" :disabled="formData.status != 'WAIT'"
+										placeholder="请输入"></el-input>
+								</el-form-item>
+							</template>
+						</el-table-column>
+						<el-table-column prop="" align="center" label="*续期单价">
+							<template slot-scope="scope">
+								<el-form-item :prop="'dataList.' + scope.$index + '.renewalPrice'"
+									:rules="[{ required: true, message: `请输入押金`, trigger: 'blur' }]">
+									<el-input type="number" v-model="scope.row.renewalPrice"
+										:disabled="formData.status != 'WAIT'" placeholder="请输入"></el-input>
+								</el-form-item>
+							</template>
+						</el-table-column>
+						<el-table-column prop="leaseAmount" align="center" label="总租金"></el-table-column>
+					</el-table>
+				</el-form>
+			</div>
+		</el-card>
+		<el-card class="box-card" v-if="formType != 0">
+			<div slot="header" class="clearfix">
+				<span>租赁记录</span>
+			</div>
+			<div class="table">
+				<el-table :data="formData.records" element-loading-text="Loading" border fit highlight-current-row
+					stripe>
+					<el-table-column prop="status" label="租赁类型" align="center">
+						<template slot-scope="scope">
+							{{scope.row.orderType == 'FIRST'? '初次租赁':'续租'}}
+						</template>
+					</el-table-column>
+					<el-table-column prop="payValue" label="订金" align="center"></el-table-column>
+					<el-table-column prop="" align="center" label="租赁开始时间">
+						<template slot-scope="scope">
+							{{scope.row.startDate.substring(0,10)}}
+						</template>
+					</el-table-column>
+					<el-table-column prop="" align="center" label="租赁结束时间">
+						<template slot-scope="scope">
+							{{scope.row.endDate.substring(0,10)}}
+						</template>
+					</el-table-column>
+					<el-table-column prop="createBy" align="center" label="操作人"></el-table-column>
+					<el-table-column prop="createTime" align="center" label="操作时间"></el-table-column>
+				</el-table>
+			</div>
+		</el-card>
+		<div class="page-footer">
+			<div class="footer">
+				<el-button v-if="formType == 0" size="small" type="primary" @click="submit()">提交</el-button>
+				<el-button size="small" type="info" @click="goBack">返回</el-button>
+			</div>
+		</div>
+		<el-dialog title="报修" :visible.sync="isRepair" width="30%" :close-on-click-modal="false">
+		  <el-form ref="repairForm" :model="repairForm" label-position="left">
+		    <el-form-item label="上门时间" prop="date" :rules="[{ required: true, message: `请选择上门时间`, trigger: 'blur' }]">
+		      <el-date-picker
+		              v-model="repairForm.date"
+		              type="date"
+						value-format="yyyy-MM-dd"
+		              placeholder="选择日期">
+		      </el-date-picker>
+		    </el-form-item>
+		  </el-form>
+		  <div slot="footer" class="dialog-footer">
+		    <el-button @click="isRepair = false">取 消</el-button>
+		    <el-button type="primary" @click="confirmRepair()">确 定</el-button>
+		  </div>
+		</el-dialog>
+		<el-dialog title="续租" :visible.sync="isRelet" width="30%" :close-on-click-modal="false">
+		  <el-form ref="reletForm" :model="reletForm" label-position="left">
+		    <el-form-item label="实际到期日期" prop="date" :rules="[{ required: true, message: `请选择日期`, trigger: 'blur' }]">
+		      <el-date-picker
+		            v-model="reletForm.date"
+		            type="date"
+					value-format="yyyy-MM-dd"
+		            placeholder="选择日期">
+				</el-date-picker>
+		    </el-form-item>
+		  </el-form>
+		  <div slot="footer" class="dialog-footer">
+		    <el-button @click="isRelet = false">取 消</el-button>
+		    <el-button type="primary" @click="confirmRelet">确 定</el-button>
+		  </div>
+		</el-dialog>
+		<el-dialog title="确定回收" :visible.sync="isRecover" width="30%" :close-on-click-modal="false">
+		  <el-form ref="recoverForm" :model="recoverForm" label-position="left">
+		    <el-form-item label="实际到期日期" prop="date" :rules="[{ required: true, message: `请选择日期`, trigger: 'blur' }]">
+		      <el-date-picker
+		            v-model="recoverForm.date"
+		            type="date"
+					value-format="yyyy-MM-dd"
+		            placeholder="选择日期">
+				</el-date-picker>
+		    </el-form-item>
+		  </el-form>
+		  <div slot="footer" class="dialog-footer">
+		    <el-button @click="isRecover = false">取 消</el-button>
+		    <el-button type="primary" @click="confirmRecover">确 定</el-button>
+		  </div>
+		</el-dialog>
+	</div>
+</template>
+
+<script>
+	import {
+		lbsAmapRegion
+	} from '@/api/common.js'
+	import geographicalPosi from '@/components/geographicalPosi/index.vue'
+	import ImageUpload from '@/components/file-upload'
+	import {
+		getGoods,
+		getDetail,
+		add,confirmOrder,confirmRecover,confirmRelet,confirmRepair,getTypeList
+	} from "@/api/tenancyOrder";
+	export default {
+		components: {
+			geographicalPosi,
+			ImageUpload
+		},
+		props: ['id', 'title', 'formType'],
+		data() {
+			return {
+				formData1: {
+					dataList: [],
+				},
+				formData3: {
+					dataList: []
+				},
+				repairForm: {
+					date: ''
+				},
+				reletForm: {
+					date: ''
+				},
+				recoverForm: {
+					date: ''
+				},
+				goodsList: [],
+				is_submit: true,
+				isRelet: false,
+				isRepair: false,
+				isRecover: false,
+				formData: {
+					userName: '',
+					userMobile: '',
+					remark: '',
+					province: '',
+					provinceId: '',
+					city: '',
+					cityId: '',
+					area: '',
+					areaId: '',
+					street: '',
+					streetId: '',
+					address: '',
+					lat: '',
+					lng: '',
+					records: [],
+					fileUrl: []
+				},
+				provinceList: [],
+				cityList: [],
+				areaList: [],
+				streetList: [],
+				isEdit: 0,
+				timer: '',
+				companyName: JSON.parse(localStorage.getItem('greemall_user')).companyName,
+				rules: {
+					address: [{
+						required: true,
+						message: '请选择客户地址',
+						trigger: 'change'
+					}],
+					userMobile: [{
+							required: true,
+							message: '请输入客户电话',
+							trigger: 'blur'
+						},
+						{
+							required: true,
+							message: '请输入客户电话',
+							trigger: 'change'
+						},
+						{
+							pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/,
+							message: '电话号码格式不正确',
+							trigger: 'blur'
+						}
+					],
+					userName: [{
+							required: true,
+							message: '请输入客户姓名',
+							trigger: 'blur'
+						},
+						{
+							required: true,
+							message: '请输入客户姓名',
+							trigger: 'change'
+						},
+					]
+				},
+				rules1: {
+					price: [{
+						pattern: /^[1-9]\d*(\.\d+)?$|^0\.[1-9]\d*$/,
+						message: '请输入大于0的数字',
+						trigger: 'blur'
+					}],
+				},
+				typeId: ''
+			};
+		},
+		computed: {
+			filterStatus() {
+				return function(type) {
+					let status = {
+						WAIT: '等待商家确认',
+						WAIT_START: '待开始',
+						LEASE: '租赁中',
+						OVER: '已过期-待回收',
+						RECOVER: '已过期-已回收',
+					}
+					return status[type]
+				}
+			}
+		},
+		created() {
+			if (this.id) {
+				this.getDetail()
+			}
+			this.getGoods()
+			this.getTypeList()
+			this.getinitlbslist()
+		},
+		methods: {
+			// 返回
+			goBack() {
+				this.$emit('back');
+			},
+			getDetail() {
+				getDetail({
+					id: this.id
+				}).then(res => {
+					this.formData = {
+						...res.data,
+						address: res.data.userAddress,
+						fileUrl: res.data.fileUrl?[{url: res.data.fileUrl}]:[]
+					}
+					this.formData3.dataList = res.data.items
+				})
+			},
+			getGoods() {
+				getGoods({
+					pageNum: 1,
+					pageSize: -1,
+					status: true
+				}).then(res => {
+					this.goodsList = res.data.records
+				})
+			},
+			changeGoods(e, item) {
+				item.categoryId = e.categoryId
+				item.categoryName = e.categoryName
+				item.categoryUrl = e.categoryUrl
+				item.goodsLeaseName = e.name
+				item.goodsLeaseId = e.id
+				item.goodsUnit = e.unit
+			},
+			add() {
+				this.$refs.formData1.validate((valid, invalidFields, errLabels) => {
+					if (valid) {
+						console.log(111)
+						if (this.formData1.dataList.length != 0) {
+							this.isEdit = 0
+						}
+						this.formData1.dataList.unshift({
+							goods: null,
+							categoryId: '',
+							categoryName: '',
+							categoryUrl: '',
+							qty: '',
+							goodsLeaseName: '',
+							goodsLeaseId: '',
+							goodsUnit: '',
+						})
+					}
+				})
+			},
+			del(index) {
+				if (index <= 1) {
+					this.isEdit == 0
+				} else {
+					this.isEdit -= 1
+				}
+				this.formData1.dataList.splice(index, 1)
+			},
+			submit() {
+				const that = this
+				this.$refs.formData.validate((valid, invalidFields, errLabels) => {
+					if (valid) {
+						if (this.formData1.dataList.length == 0) {
+							return this.$message.warning('请添加商品信息！')
+						} else {
+							this.$refs.formData1.validate((valid, invalidFields, errLabels) => {
+								if (valid) {
+									add({
+										userName: this.formData.userName,
+										userMobile: this.formData.userMobile,
+										fileUrl: this.formData.fileUrl.length > 0 ? this.formData.fileUrl[0].url : '',
+										items: this.formData1.dataList,
+										remark: this.formData.remark,
+										province: this.formData.province,
+										provinceId: this.formData.provinceId,
+										city: this.formData.city,
+										cityId: this.formData.cityId,
+										area: this.formData.area,
+										areaId: this.formData.areaId,
+										street: this.formData.street,
+										streetId: this.formData.streetId,
+										userAddress: this.formData.address,
+										lat: this.formData.lat,
+										lng: this.formData.lng,
+									}).then(res => {
+										if (res.code == 200) {
+											this.$message.success('提交成功！')
+											this.goBack()
+										}
+									})
+								}
+							})
+						}
+					}
+				})
+			},
+			//确定租赁
+			submitOrder(){
+				this.$refs.formData.validate((valid, invalidFields, errLabels) => {
+					if (valid) {
+						this.$refs.formData3.validate((valid, invalidFields, errLabels) => {
+							if (valid) {
+								confirmOrder({
+									userName: this.formData.userName,
+									userMobile: this.formData.userMobile,
+									fileUrl: this.formData.fileUrl.length > 0 ? this.formData.fileUrl[0].url : '',
+									items: this.formData3.dataList,
+									remark: this.formData.remark,
+									province: this.formData.province,
+									provinceId: this.formData.provinceId,
+									city: this.formData.city,
+									cityId: this.formData.cityId,
+									area: this.formData.area,
+									areaId: this.formData.areaId,
+									street: this.formData.street,
+									streetId: this.formData.streetId,
+									userAddress: this.formData.address,
+									lat: this.formData.lat,
+									lng: this.formData.lng,
+									id: this.formData.id
+								}).then(res => {
+									if (res.code == 200) {
+										this.$message.success('提交成功！')
+										this.getDetail()
+									}
+								})
+							}
+						})
+					}
+				})
+			},
+			//取消订单
+			cancelOrder(){
+				cancelOrder({
+					id: this.id
+				}).then(res => {
+					if(res.code == 200){
+						this.$message.success('取消订单成功！')
+						this.getDetail();
+					}
+				})
+			},
+			getTypeList(){
+				getTypeList({
+					pageNum: 1,
+					pageSize: -1
+				}).then(res => {
+					if(res.code == 200){
+						res.data.records.forEach(item=>{
+							if(item.orderType == 'REPAIR'){
+								this.typeId = item.id
+							}
+						})
+					}
+				})
+			},
+			//报修
+			confirmRepair(){
+				let productList = [{
+					mainId: this.formData.items[0].categoryId,
+					mainName: this.formData.items[0].categoryName,
+					num: this.formData.items[0].qty,
+				}]
+				
+				this.$refs.repairForm.validate((valid, invalidFields, errLabels) => {
+					if (valid) {
+						confirmRepair({
+							companyWechatId: this.formData.companyWechatId,
+							appointmentTime: this.repairForm.date + ' 00:00:00',
+							saleOrderId: this.id,
+							orderSmallType: this.typeId,
+							province: this.formData.province,
+							provinceId: this.formData.provinceId,
+							city: this.formData.city,
+							cityId: this.formData.cityId,
+							area: this.formData.area,
+							areaId: this.formData.areaId,
+							street: this.formData.street,
+							streetId: this.formData.streetId,
+							address: this.formData.address,
+							orderProducts: productList,
+							isZl: true
+						}).then(res => {
+							if (res.code == 200) {
+								this.isRepair = false
+								this.$message.success('报修成功！')
+								this.getDetail()
+							}
+						})
+					}
+				})
+			},
+			//确认续租
+			confirmRelet(){
+				this.$refs.reletForm.validate((valid, invalidFields, errLabels) => {
+					if (valid) {
+						confirmRelet({
+							RealEndDate: this.reletForm.date + ' 00:00:00',
+							id: this.id,
+						}).then(res => {
+							if (res.code == 200) {
+								this.isRelet = false
+								this.$message.success('确认续租成功！')
+								this.getDetail()
+							}
+						})
+					}
+				})
+			},
+			//确认回收
+			confirmRecover(){
+				this.$refs.recoverForm.validate((valid, invalidFields, errLabels) => {
+					if (valid) {
+						confirmRecover({
+							RealEndDate: this.recoverForm.date + ' 00:00:00',
+							id: this.id,
+						}).then(res => {
+							if (res.code == 200) {
+								this.isRecover = false
+								this.$message.success('确认回收成功！')
+								this.getDetail()
+							}
+						})
+					}
+				})
+			},
+			getinitlbslist() {
+				// 初始化请求省市区街道下拉选项数据
+				lbsAmapRegion({
+					pid: 0
+				}).then(res => {
+					this.provinceList = res.data
+					// 创建工单时获取ip地址定位赋值
+					if (!this.id && this.$IpAdd.province) {
+						var item = this.provinceList.find(item => item.name === this.$IpAdd.province)
+						if (item) {
+							this.formData.provinceId = item.id
+							this.formData.province = item.name
+						}
+					}
+					if (this.formData.provinceId) {
+						lbsAmapRegion({
+							pid: this.formData.provinceId
+						}).then(res => {
+							this.cityList = res.data
+							// 创建工单时获取ip地址定位赋值
+							if (!this.id && this.$IpAdd.city) {
+								var item2 = this.cityList.find(item => item.name === this.$IpAdd.city)
+								if (item2) {
+									this.formData.cityId = item2.id
+									this.formData.city = item2.name
+								}
+							}
+							if (this.formData.cityId) {
+								lbsAmapRegion({
+									pid: this.formData.cityId
+								}).then(res => {
+									this.areaList = res.data
+								})
+							}
+							if (this.formData.areaId) {
+								lbsAmapRegion({
+									pid: this.formData.areaId
+								}).then(res => {
+									this.streetList = res.data
+								})
+							}
+						})
+					}
+				})
+			},
+			selectAddress(data) {
+				this.formData.lng = data.center[0]
+				this.formData.lat = data.center[1]
+				// 获取定位的省市区街道
+				var {
+					province,
+					city,
+					district,
+					township
+				} = data.data.addressComponent
+				// 获取选中省名称id
+				var {
+					id,
+					name
+				} = this.provinceList.find(item => item.name === province)
+				this.formData.provinceId = id
+				this.formData.province = name
+				// 请求市选项
+				lbsAmapRegion({
+					pid: this.formData.provinceId
+				}).then(res => {
+					// 赋值市选项
+					this.cityList = res.data
+					// 获取选中市名称id
+					var {
+						id,
+						name
+					} = res.data.find(item => item.name === city)
+					this.formData.cityId = id
+					this.formData.city = name
+					// 请求区选项
+					lbsAmapRegion({
+						pid: this.formData.cityId
+					}).then(res => {
+						// 赋值区选项
+						this.areaList = res.data
+						// 获取选中区名称id
+						var {
+							id,
+							name
+						} = res.data.find(item => item.name === district)
+						this.formData.areaId = id
+						this.formData.area = name
+						// 请求街道选项
+						lbsAmapRegion({
+							pid: this.formData.areaId
+						}).then(res => {
+							// 赋值街道选项
+							this.streetList = res.data
+							// 获取选中街道名称id
+							var {
+								id,
+								name
+							} = res.data.find(item => item.name === township)
+							this.formData.streetId = id
+							this.formData.street = name
+							// 赋值GPS详细地址
+							this.formData.address = data.name
+						})
+					})
+				})
+			},
+		}
+	};
+</script>
+
+<style scoped="scoped" lang="scss">
+	.s-page {
+		padding: 20px;
+		background-color: #ffffff;
+	}
+
+	.page-footer {
+		height: 70px;
+	}
+
+	.order-main {
+		.order-main-title {
+			font-size: 14px;
+		}
+
+		.order-main-title span {
+			margin-right: 15px;
+		}
+
+		.order-main-status {
+			padding: 15px 0;
+			font-size: 24px;
+			color: #409EFF;
+		}
+
+		.order-main-opt-btn {
+			padding: 15px 0;
+		}
+	}
+
+	.order-receive-info {
+		margin: 15px 0;
+		padding: 15px;
+		background: #f5f7fa;
+
+		:first-child div span {
+			padding-right: 15px;
+		}
+
+		.el-row {
+			padding-top: 15px;
+		}
+	}
+
+	.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/tenancyOrder/index.vue

@@ -0,0 +1,419 @@
+<template>
+	<div>
+		<div v-if="!isShowDetail" class="app-container">
+			<div class="screen-container">
+				<el-form ref="screenForm" :model="screenForm" label-width="70px" size="small" label-position="left">
+					<el-row :gutter="20">
+						<el-col :xs="24" :sm="12" :lg="6">
+							<el-form-item label="订单号" prop="id">
+								<el-input v-model="screenForm.id" placeholder="请输入订单号"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :lg="6">
+							<el-form-item label="商品名称" prop="goodsName">
+								<el-input v-model="screenForm.goodsName" placeholder="请输入商品名称"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :lg="6">
+							<el-form-item label="会员昵称" prop="userName">
+								<el-input v-model="screenForm.userName" placeholder="请输入会员昵称"></el-input>
+							</el-form-item>
+						</el-col>
+						<el-col :xs="24" :sm="12" :lg="6">
+							<el-form-item label="手机号" prop="userMobile">
+								<el-input v-model="screenForm.userMobile" placeholder="请输入手机号"></el-input>
+							</el-form-item>
+						</el-col>
+
+						<el-col :xs="24" :sm="12" :lg="6">
+							<el-form-item label="创建时间" prop="createDate" style="height: 33px;">
+								<el-date-picker v-model="screenForm.createDate" type="datetimerange"
+									value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
+									end-placeholder="结束日期">
+								</el-date-picker>
+							</el-form-item>
+						</el-col>
+
+						<el-col :xs="24" :sm="12" :lg="6">
+							<el-form-item label="支付时间" prop="payDate" style="height: 33px;">
+								<el-date-picker v-model="screenForm.payDate" type="datetimerange"
+									value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
+									end-placeholder="结束日期">
+								</el-date-picker>
+							</el-form-item>
+						</el-col>
+
+						<el-col :xs="24" :sm="12" :lg="6" class="tr">
+							<el-form-item label="">
+								<el-button size="small" type="primary" @click="submitScreenForm">搜索</el-button>
+								<el-button size="small" @click="resetScreenForm">清空</el-button>
+							</el-form-item>
+						</el-col>
+					</el-row>
+				</el-form>
+			</div>
+
+			<div class="tabs-container order-tabs-container clearfix">
+				<el-tabs v-model="screenForm.status" type="card" @tab-click="changeTabs" class="fl"
+					style="margin-right: 20px">
+					<el-tab-pane label="全部" name="ALL"></el-tab-pane>
+					<el-tab-pane label="待确认" name="WAIT"></el-tab-pane>
+					<el-tab-pane label="待开始" name="WAIT_START"></el-tab-pane>
+					<el-tab-pane label="租凭中" name="LEASE"></el-tab-pane>
+					<el-tab-pane label="已到期-待回收" name="OVER"></el-tab-pane>
+					<el-tab-pane label="已到期-已回收" name="RECOVER"></el-tab-pane>
+					<el-tab-pane label="已取消" name="CANCEL"></el-tab-pane>
+				</el-tabs>
+				<el-button type="primary" @click="isShowDetail = true;formType = 0">新增租赁单</el-button>
+			</div>
+			<div class="order-main-container">
+				<div class="table-top">
+					<el-row style="width:100%">
+						<el-col :span="3">
+							<span class="item product">商品</span>
+						</el-col>
+						<el-col :span="3" style="text-align: right"><span class="item">总租金（元）</span></el-col>
+						<el-col :span="3" style="text-align: center"><span class="item">订金（元）</span></el-col>
+						<el-col :span="7" style="text-align: center"><span class="item">收货信息</span></el-col>
+						<el-col :span="2" style="text-align: center"><span class="item">租金（元）/月</span></el-col>
+						<el-col :span="2" style="text-align: center"><span class="item">订单状态</span></el-col>
+						<el-col :span="4" style="text-align: center"><span class="item">操作</span></el-col>
+					</el-row>
+				</div>
+				<div class="order-item" v-for="order in dataList" :key="order.orderId">
+					<div class="order-top">
+						<span><b>订单号</b>：{{ order.id }}</span>
+						<span><b>下单时间</b>：{{ order.createTime }}</span>
+						<span v-if="order.startDate"><b>起租时间</b>：{{ order.startDate }}</span>
+						<span v-if="order.endDate"><b>结束时间</b>：{{ order.endDate }}</span>
+						<el-tag effect="dark" :type="order.payType=='LINE'?'':'success'">{{order.payType=="LINE"?'线下支付':'微信支付'}}</el-tag>
+						<div class="fr">
+							<el-link type="primary" v-if="$restrict('detail')" :underline="false"
+								 @click="confirmOrder(order.id)">查看详情</el-link>
+							<!-- <el-link type="primary" :underline="false" @click="queryWorkOrder(order.orderId)">订单工单</el-link> -->
+						</div>
+					</div>
+					<div class="order-content">
+						<el-row style="width:100%;">
+							<el-col :span="6" style="height: 100%;">
+								<div class="col-item-pro">
+									<div class="pro-item">
+										<div class="left">
+											<div class="image">
+												<img :src="order.categoryUrl" style="height:80px;width: 80px;">
+											</div>
+											<div class="main" style="justify-content: center;">
+												<span>{{ order.goodsLeaseName }}</span>
+												<span>x{{ order.qty }}</span>
+											</div>
+										</div>
+										<div class="right"
+											style="display: flex;flex-direction: column;justify-content: center;">
+											<span>{{order.totalAmount}}</span>
+											<span>总租金</span>
+										</div>
+									</div>
+								</div>
+							</el-col>
+							<el-col :span="3" style="height: 100%;">
+								<div class="col-item">
+									<div>{{ order.bookAmount }}</div>
+									<span>订金</span>
+								</div>
+							</el-col>
+							<el-col :span="7" style="height: 100%;">
+								<div class="col-item">
+									<div>{{ order.userName }}/{{ order.userMobile }}</div>
+									<div class="ellipsis-2">
+										{{ order.province + order.city + order.area + order.street + order.userAddress}}
+									</div>
+								</div>
+							</el-col>
+							<el-col :span="2" style="height: 100%;">
+								<div class="col-item">
+									<div class="totalprice">￥{{ order.leasePrice }}</div>
+								</div>
+							</el-col>
+							<el-col :span="2" style="height: 100%;">
+								<div class="col-item">
+									<div :style="{'color': filterStatus(order,'color')}">
+										{{ filterStatus(order,'name') }}</div>
+								</div>
+							</el-col>
+							<el-col :span="4" style="height: 100%;">
+								<div class="col-item">
+									<div class="operate">
+										<el-button v-if="order.status === 'WAIT'" @click="confirmOrder(order.id)" type="text" size="small">确定租赁</el-button>
+										<el-button v-if="order.status === 'LEASE' || order.status === 'OVER'" @click="confirmOrder(order.id)" type="text" size="small">确认回收</el-button>
+										<el-popconfirm title="确定取消订单吗？" @confirm="cancelOrder(order.id)"
+											v-if="order.status === 'WAIT'">
+											<el-button slot="reference" type="text" size="small">取消订单</el-button>
+										</el-popconfirm>
+										<el-button v-if="order.status === 'LEASE'" @click="confirmOrder(order.id)" type="text" size="small">报修</el-button>
+									</div>
+								</div>
+							</el-col>
+						</el-row>
+					</div>
+				</div>
+				<div class="no-data" v-if="dataList.length <= 0">暂无订单</div>
+			</div>
+			<div class="pagination clearfix">
+				<div class="fr">
+					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+						:current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10"
+						layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
+					</el-pagination>
+				</div>
+			</div>
+		</div>
+		<detail v-else :id="id" @back="backList" :formType="formType" :title="'租赁订单' + formDialogTitles[formType]">
+		</detail>
+	</div>
+
+</template>
+
+<script>
+	import {
+		getList, cancelOrder
+	} from "@/api/tenancyOrder";
+	import detail from './detail.vue'
+	export default {
+		components: {
+			detail
+		},
+		data() {
+			return {
+				screenForm: { // 筛选表单数据
+					id: '', // 订单号
+					goodsName: '', // 商品名称
+					userName: '', // 会员昵称
+					userMobile: '', // 手机号
+					status: 'ALL', // 状态
+					createDate: '', // 创建时间
+					payDate: '', // 支付时间
+					evaluateStatus: '', // 评价状态
+					sendStatus: '', // 派单异常
+					workerOrderNo: '', // 信息编号
+				},
+				isShowDetail: false,
+				id: '',
+				currentPage: 1, // 当前页码
+				pageSize: 10, // 每页数量
+				listTotal: 0, // 列表总数
+				dataList: [],
+				formDialogTitles: ['新增', '详情'],
+				formType: 0,
+				formVisible: false,
+				typeIndex: '1',
+			}
+		},
+		computed: {
+			filterStatus() {
+				return function(item, type) {
+					if (item.status == 'WAIT') {
+						return {
+							name: '待确定订单',
+							color: '#ff5300'
+						} [type]
+					} else if (item.status == 'WAIT_START') {
+						return {
+							name: '待开始',
+							color: '#64c842'
+						} [type]
+					} else if (item.status == 'LEASE') {
+						return {
+							name: '租赁中',
+							color: '#1281ff'
+						} [type]
+					} else if (item.status == 'OVER') {
+						return {
+							name: '待回收',
+							color: '#9c84fe'
+						} [type]
+					} else if (item.status == 'RECOVER') {
+						return {
+							name: '已回收',
+							color: '#817f7f'
+						} [type]
+					} else if (item.status == 'CANCEL') {
+						return {
+							name: '已取消',
+							color: '#817f7f'
+						} [type]
+					}
+				}
+			}
+		},
+		created() {
+			this.getList();
+		},
+		methods: {
+			backList() {
+				this.id = ''
+				this.isShowDetail = false;
+				this.getList()
+			},
+			changeTabs(tab, event) {
+				this.getList();
+			},
+			// 获取数据列表
+			getList() {
+				// this.listLoading = true;
+
+				let params = {
+					orderId: this.screenForm.id, // 订单号
+					goodsName: this.screenForm.goodsName, // 商品名称
+					userName: this.screenForm.userName, // 会员昵称
+					userMobile: this.screenForm.userMobile, // 手机号
+					status: this.screenForm.status=='ALL'?'':this.screenForm.status, // 状态
+					startDate: this.screenForm.createDate[0] ? this.screenForm.createDate[0] : null, // 创建时间
+					endDate: this.screenForm.createDate[1] ? this.screenForm.createDate[1] : null, // 创建时间
+					startPayDate: this.screenForm.payDate[0] ? this.screenForm.payDate[0] : null, // 支付时间
+					endPayDate: this.screenForm.payDate[1] ? this.screenForm.payDate[1] : null, // 支付时间
+					pageNum: this.currentPage,
+					pageSize: this.pageSize
+				};
+
+				getList(params).then(res => {
+					res.data.records.forEach(item => {
+						item.startDate = item.startDate?.substring(0,10)
+						item.endDate = item.endDate?.substring(0,10)
+						// item.websitName = this.handleText(item.websitName);
+					});
+					this.dataList = res.data.records;
+					this.listTotal = res.data.total;
+					// this.listLoading = false;
+				})
+			},
+			
+			confirmOrder(id){
+				this.id = id
+				this.formType = 1
+				this.isShowDetail = true
+			},
+			
+			cancelOrder(id){
+				cancelOrder({
+					id
+				}).then(res => {
+					if(res.code == 200){
+						this.$message.success('取消订单成功！')
+						this.getList();
+					}
+				})
+			},
+			
+			// 提交筛选表单
+			submitScreenForm() {
+				this.currentPage = 1;
+				this.getList();
+			},
+
+			// 重置筛选表单
+			resetScreenForm() {
+				this.$refs.screenForm.resetFields();
+				this.currentPage = 1;
+				this.getList();
+			},
+
+			// 更改每页数量
+			handleSizeChange(val) {
+				this.pageSize = val;
+				this.currentPage = 1;
+				this.getList();
+			},
+
+			// 更改当前页
+			handleCurrentChange(val) {
+				this.currentPage = val;
+				this.getList();
+			},
+
+			// 获取省市区街道
+			getRegion(level = 0, id = 0) {
+				getRegion({
+					pid: id
+				}).then(res => {
+					if (level === 0) {
+						this.provinceList = res.data;
+					} else if (level === 1) {
+						this.cityList = res.data;
+					} else if (level === 2) {
+						this.areaList = res.data;
+					} else if (level === 3) {
+						this.streetList = res.data;
+					}
+				})
+			},
+
+			// 初始化省市区街道
+			initRegion(level, item, id = 0) {
+				let {
+					province,
+					city,
+					area,
+					street
+				} = item;
+				let nextId = null;
+				getRegion({
+					pid: id
+				}).then(res => {
+					if (level === 0) {
+						this.provinceList = res.data;
+						nextId = this.addressForm.province = this.provinceList[this.$findElem(this.provinceList,
+							'name', province)].id;
+					} else if (level === 1) {
+						this.cityList = res.data;
+						nextId = this.addressForm.city = this.cityList[this.$findElem(this.cityList, 'name', city)]
+							.id;
+					} else if (level === 2) {
+						this.areaList = res.data;
+						nextId = this.addressForm.area = this.areaList[this.$findElem(this.areaList, 'name', area)]
+							.id;
+					} else if (level === 3) {
+						this.streetList = res.data;
+						nextId = this.addressForm.street = this.streetList[this.$findElem(this.streetList, 'name',
+							street)].id;
+					}
+					if (level < 3) {
+						level = level + 1;
+						this.initRegion(level, item, nextId);
+					}
+				})
+			},
+
+			// 保存 修改收货地址 表单
+			save(cancel) {
+				this.$refs.addressForm.validate((valid) => {
+					if (valid) {
+
+					}
+				})
+			},
+
+			// 查看工单
+			toWorkOrderDetail(orderId) {
+				this.$router.push({
+					name: "workOrder_detail",
+					query: {
+						orderId
+					}
+				})
+
+			},
+
+			handleRefreshList() {
+				this.getList();
+				// this.recordSelected = []
+				// this.$refs.pageRef.refreshList()
+			}
+
+		}
+	}
+</script>
+<style scoped lang="scss">
+	.tabs-container {
+		margin-bottom: 10px;
+	}
+</style>

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

@@ -0,0 +1,260 @@
+<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: '',
+				  type: 2,
+			      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: 'serviceProduct'
+				})
+			},
+			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.categoryUrl"
+									:preview-src-list="[scope.row.categoryUrl]" 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 v-if="!scope.row.status" 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>