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="客服">
					<el-cascader v-model="customerId" :options="options" :props="{
						value:'id',
						label:'name',
						children:'children'
					}"></el-cascader>
				</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-item label="合同样本" class="hui-textarea">
					<upload ref="contract" :list="contract" type="insert" accept=".pdf" text="上传合同" :maxLen="1">
					</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'
	import {
		getPartList
	} from '@/api/organization'
	import {
		findParentIds
	} from '@/uitls'
	const upload = () => import('@/components/common/upload');
	const customData = () => import('@/components/common/customData');
	export default {
		props: ['isUpdate', 'detailId', 'productLevelId'],
		data() {
			return {
				form: {
					name: '',
					subtitle: '',
					type: 1,
					price: ''
				},
				loading: false,
				rotatingImages: [],
				detailedImage: [],
				customList: [],
				contract: [],
				option: [{
					id: 1,
					label: '介绍标题',
					width: '200px',
					value: 'title',
					type: 'text'
				}, {
					id: 2,
					label: '介绍内容',
					value: 'content',
					type: 'text'
				}],
				customerId: [],
				options: []
			}
		},
		mounted() {
			getPartList(this.$store.getters.organization.id, this.$store.getters.project.id).then(res => {
				if (res.state) {
					this.options = res.data;
					this.returnChildren(this.options);
					if (this.form.customerId && this.options.length > 0) this.customerId = findParentIds(this
						.options, -this.form.customerId);
				}
			})
			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.contract) this.contract = JSON.parse(this.form.contract);
						if (this.form.intro) this.customList = JSON.parse(this.form.intro);
						if (this.form.customerId && this.options.length > 0) this.customerId = findParentIds(this
							.options, -this.form.customerId);
					}
				})
			} 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['contract'] = JSON.stringify(this.$refs.contract.fileList);
				postData['intro'] = JSON.stringify(this.$refs.customData.listData);
				if (this.customerId.length > 0) postData['customerId'] = -this.customerId[this.customerId.length - 1];
				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');
				}
			},
			returnChildren(data) {
				data.forEach(item => {
					if (item.users) {
						let obj = item.users.map(res => {
							return {
								id: -res.id,
								name: res.name
							};
						})
						item.children = item.children.concat(obj);
					}
					if (item.children && item.children.length === 0) item.children = null;
					if (item.children && item.children.length > 0) this.returnChildren(item.children);
				});
			},
		}
	}
</script>

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