realty/virgo.wzfrontend/workark/src/components/work/serve/content/edit.vue

<template>
	<div class="hui-flex hui-dialog">
		<div class="hui-flex-box hui-dialog-content">
			<el-form :model="form" label-position="top">
				<el-form-item label="主标题">
					<el-input type="text" v-model="form.name" placeholder="请输入主标题"></el-input>
				</el-form-item>
				<el-form-item label="副标题">
					<el-input type="text" v-model="form.subtitle" placeholder="请输入副标题"></el-input>
				</el-form-item>
				<el-form-item label="价格(元)">
					<el-input type="text" v-model="form.price" @input="handleInput($event)" placeholder="请输入价格">
					</el-input>
				</el-form-item>
				<el-form-item label="服务介绍" class="hui-textarea">
					<custom-data ref="customData" :list="customList" :option="option"></custom-data>
				</el-form-item>
				<el-form-item label="服务配图" class="hui-textarea">
					<upload ref="rotatingImages" :list="rotatingImages" type="insert" :maxLen="15"></upload>
				</el-form-item>
				<el-form-item label="详情配图" class="hui-textarea">
					<upload ref="detailedImage" :list="detailedImage" type="insert" :maxLen="15"></upload>
				</el-form-item>
			</el-form>
		</div>
		<div class="hui-dialog-submit">
			<el-button size="small" @click="$emit('callback')">取 消</el-button>
			<el-button size="small" type="primary" @click="submit" :loading="loading">保 存</el-button>
		</div>
	</div>
</template>

<script>
	import {
		insertServe,
		updateServe,
		getServeById
	} from '@/api/serve'
	const upload = () => import('@/components/common/upload');
	import customData from '@/components/common/customData'
	export default {
		props: ['isUpdate', 'detailId', 'productLevelId'],
		data() {
			return {
				form: {
					name: '',
					subtitle: '',
					type: 1,
					price: ''
				},
				loading: false,
				rotatingImages: [],
				detailedImage: [],
				customList: [],
				option: [{
					id: 1,
					label: '介绍标题',
					width: '200px',
					value: 'title',
					type: 'text'
				}, {
					id: 2,
					label: '介绍内容',
					value: 'content',
					type: 'text'
				}]
			}
		},
		mounted() {
			if (this.isUpdate) {
				getServeById(this.detailId).then(res => {
					if (res.state) {
						this.form = res.data;
						if (this.form.rotatingImages) this.rotatingImages = JSON.parse(this.form.rotatingImages);
						if (this.form.detailedImage) this.detailedImage = JSON.parse(this.form.detailedImage);
						if (this.form.intro) this.customList = JSON.parse(this.form.intro);
					}
				})
			} else {
				this.form['productLevelId'] = this.productLevelId;
				this.form['organizationId'] = this.$store.getters.organization.id;
			}
		},
		components: {
			upload,
			customData
		},
		methods: {
			handleInput(val) {
				let dat = ("" + val)
					.replace(/[^\d^\.]+/g, "")
					.replace(/^0+(\d)/, "$1")
					.replace(/^\./, "0.")
					.match(/^\d*(\.?\d{0,2})/g)[0] || "";
				this.form.price = dat;
			},
			submit() {
				this.loading = true;
				let postData = JSON.parse(JSON.stringify(this.form));
				postData['rotatingImages'] = JSON.stringify(this.$refs.rotatingImages.fileList);
				postData['detailedImage'] = JSON.stringify(this.$refs.detailedImage.fileList);
				postData['intro'] = JSON.stringify(this.$refs.customData.listData);
				if (this.isUpdate) {
					updateServe(postData).then(this.successFunc)
				} else {
					insertServe(postData).then(this.successFunc)
				}
			},
			successFunc(res) {
				this.loading = false;
				if (res.state) {
					this.$message.success('操作成功');
					this.$emit('callback', 'init');
				}
			}
		}
	}
</script>

<style lang="scss"></style>