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

<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>