sadjv3_admin/src/views/bl/commission/jjr/jjrConfig.vue

<template>
		<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="220px">
			<el-row>
				<el-col style="background: #ff00001f;line-height: 40px;padding-left: 10px;margin-bottom: 10px;">
					<span>经纪人的佣金应该由该笔订单服务技师和该技师绑定的上级代理承担</span>
				</el-col>
				<el-col>
					<el-form-item label="启用经纪人功能" prop="isOpen">
						<el-radio-group v-model="dataForm.isOpen">
							<el-radio :label="1">开启</el-radio>
							<el-radio :label="0">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="经纪人申请入口" prop="isApply">
						<el-radio-group v-model="dataForm.isApply">
							<el-radio :label="1">开启</el-radio>
							<el-radio :label="0">关闭</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
<!--				<el-col>-->
<!--					<el-form-item label="经纪人返佣" prop="type">-->
<!--						<el-radio-group v-model="dataForm.type">-->
<!--							<el-radio :label="1">固定返佣</el-radio>-->
<!--							<el-radio :label="2">浮动比例提成</el-radio>-->
<!--						</el-radio-group>-->
<!--					</el-form-item>-->
<!--				</el-col>-->
				<el-col>
					<el-form-item label="经纪人返佣比例(%)" prop="rate" v-if="dataForm.type == 1">
						<el-input-number v-model="dataForm.rate" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="技师承担(%)" prop="artificerRate">
						<el-input-number v-model="dataForm.artificerRate" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="技师所属代理承担(%)" prop="agentRate">
						<el-input-number v-model="dataForm.agentRate" controls-position="right" :precision="2" :min="0" :step="1"/>
					</el-form-item>
				</el-col>
				<el-col>
					<el-form-item label="邀请技师推广海报背景图" prop="artificerImage">
						<div style="width: 148px;height: 148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
							<el-upload
								class="avatar-uploader"
								v-model="dataForm.artificerImage"
								:action="uploadUrl"
								:show-file-list="false"
								:on-success="handleArtificerImageSuccess"
								:on-progress="onArtificerImageProgress"
							>
								<img
									v-if="dataForm.artificerImage != ''"
									:src="dataForm.artificerImage"
									class="avatar"
									style="border-radius: 6px; width: 148px; height: 148px"
								/>
								<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
							</el-upload>
						</div>
					</el-form-item>
				</el-col>
				<el-col>
					<el-button type="primary" @click="dataFormSubmit()">提交</el-button>
				</el-col>
			</el-row>
		</el-form>
</template>

<script>
let defReqRule = (message = '不能为空') => { return { required: true, message, trigger: 'blur' } };
import {serverPaths} from '@/utils/enumData'
export default {
	data() {
		return {
			uploadUrl: serverPaths.uploadUrl,
			tableDataLoading: false,
			openValue: 1,
			closeValue: 0,
			dataForm: {
				id: 1,
				isOpen: 1,
				isApply: 1,
				type: 1,
				rate: "",
				artificerRate: "",
				agentRate: "",
				artificerImage: "",
			},
			dataRule: {
				isOpen: [ defReqRule('请选择是否启用') ],
				isApply: [ defReqRule('请选择经纪人申请入口') ],
				type: [ defReqRule('请选择经纪人返佣') ],
				artificerRate: [ defReqRule('请输入技师承担') ],
				agentRate: [ defReqRule('请代理商承担') ],
				artificerImage: [ defReqRule('请上传邀请技师推广海报背景图') ],
			},
		}
	},
	methods: {
		handleSelect() {
			this.$nextTick(() => {
				this.$refs['dataForm'].resetFields()
				if (this.dataForm.id) {
					this.$http({
						url: this.$http.adornUrl("commission/jjrConfig/info"),
						method: 'get',
						params: this.$http.adornParams({
							id: this.dataForm.id,
						}),
					}).then(({ data }) => {
						if (data && data.code === 0) {
							if(data.data!=null){
								this.dataForm = data.data
							}
						}
					})
				} else {
					//重置表单
					Object.keys(this.dataForm).forEach(x => {
						this.dataForm[x] = '';
					})
				}
			})
		},
		// 表单提交
		dataFormSubmit() {
			this.$refs['dataForm'].validate((valid) => {
				if (valid) {
					if(this.dataForm.type == 1){
						if(this.dataForm.rate == ''){
							this.$notify({
								title: "提示",
								duration: 1800,
								message: "请填写经纪人分佣比例",
								type: "warning",
							});
							return;
						}
					}
					let saveData = Object.assign({}, this.dataForm);
					this.$http({
						url: this.$http.adornUrl("commission/jjrConfig/save"),
						method: 'post',
						params: this.$http.adornParams(saveData)
					}).then(({data}) => {
						if (data && data.code === 0) {
							this.$message({
								message: '操作成功',
								type: 'success',
								duration: 1500,
								onClose: () => {
									this.handleSelect();
								}
							})
						} else {
							this.$message.error(data.msg)
						}
					})
				}
			})
		},
		handleArtificerImageSuccess(file) {
			this.dataForm.artificerImage = file.data;
		},
		onArtificerImageProgress(event, file, fileList) {
			this.dataForm.artificerImage = parseInt(event.percent);
		},
	},
	mounted() {
		this.handleSelect();
	},
}
</script>