realty/virgo.wzfrontend/console/src/components/work/crm/agent/edit.vue

<template>
	<div class="hui-flex hui-dialog">
		<div class="hui-flex-box hui-dialog-content">
			<el-form ref="agentForm" label-position="top" :model="agentForm">
				<el-form-item label="经纪人姓名" prop="name" :rules="[{required: true, message: '请输入经纪人姓名'}]">
					<el-input type="text" v-model="agentForm.name" placeholder="请输入经纪人姓名"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="phone" :rules="agentRulers.phone">
					<el-input type="text" v-model="agentForm.phone" placeholder="请输入联系电话"></el-input>
				</el-form-item>
				<el-form-item label="主营商圈" prop="primaryArea">
					<el-input type="text" v-model="agentForm.primaryArea" placeholder="请输入主营商圈"></el-input>
				</el-form-item>
				<el-form-item label="备注" class="hui-textarea">
					<el-input type="textarea" v-model="agentForm.remark" placeholder="请输入备注" resize="none">
					</el-input>
				</el-form-item>
				<el-form-item label="经纪人名片" class="hui-textarea">
					<upload ref="upload" :list="responsibility" type="insert"></upload>
				</el-form-item>
			</el-form>
		</div>
		<div class="hui-dialog-submit">
			<el-button size="medium" @click="$emit('callback')">取 消</el-button>
			<el-button size="medium" type="primary" @click="submit" :loading="loading">保 存</el-button>
		</div>
	</div>
</template>

<script>
	import {
		insertAgent,
		getAgentDetailById,
		updateAgent
	} from '@/httpApi/crm'
	import upload from '@/components/common/upload'
	export default {
		props: ['isUpdate', 'detailId'],
		data() {
			return {
				agentForm: {
					name: '',
					phone: '',
					primaryArea: '',
					remark: '',
					businessCard: ''
				},
				agentRulers: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, {
						validator: (rule, value, callback) => {
							if (!/^1[123456789]\d{9}$/.test(value)) {
								callback(new Error("请输入正确的手机号"));
							} else {
								callback()
							}
						},
						trigger: 'blur'
					}],
				},
				responsibility: [],
				loading: false
			}
		},
		created() {
			if (this.isUpdate) {
				getAgentDetailById(this.detailId).then(res => {
					if (res.state) {
						this.agentForm = res.data;
						if (this.agentForm.businessCard) this.responsibility = JSON.parse(this.agentForm
							.businessCard);
					}
				})
			} else {
				this.agentForm['organizationId'] = this.$store.getters.organization.id;
				this.agentForm['projectId'] = this.$store.getters.project.id;
			}
		},
		components: {
			upload
		},
		methods: {
			submit() {
				this.loading = true;
				this.$refs.agentForm.validate((valid) => {
					if (valid) {
						let postData = JSON.parse(JSON.stringify(this.agentForm));
						postData['businessCard'] = JSON.stringify(this.$refs.upload.fileList);
						if (this.isUpdate) {
							updateAgent(postData).then(this.successFunc);
						} else {
							insertAgent(postData).then(this.successFunc);
						}
					} else {
						this.loading = false;
						return false;
					}
				});
			},
			successFunc(res) {
				this.loading = false;
				if (res.state) {
					this.$message.success('操作成功');
					this.$emit('callback', 'init');
				}
			}
		}
	}
</script>

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