antissoft / lvqianmeiye_ERP

<template>
	<el-dialog 
		:title="dialogTitle" 
		:visible.sync="dialogVisible" 
		width="800px" 
		:close-on-click-modal="false"
		:before-close="handleClose"
		class="target-dialog"
	>
		<div class="dialog-header">
			<div class="store-info">
				<i class="el-icon-office-building"></i>
				<span class="store-name">{{ formData.dm }}</span>
				<el-tag size="small" type="primary">{{ formData.mdbm }}</el-tag>
			</div>
		</div>
		<el-form :model="formData" :rules="formRules" ref="form" label-width="120px" class="edit-form">
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="固定-生命线" prop="xsyj">
						<el-input 
							v-model="formData.xsyj" 
							placeholder="请输入固定-生命线目标"
							type="number"
							step="0.01"
						>
							<template slot="append">元</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="固定-消耗业绩" prop="xhyj">
						<el-input 
							v-model="formData.xhyj" 
							placeholder="请输入固定-消耗业绩目标"
							type="number"
							step="0.01"
						>
							<template slot="append">元</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="固定-项目数" prop="xms">
						<el-input 
							v-model="formData.xms" 
							placeholder="请输入固定-项目数目标"
							type="number"
						>
							<template slot="append">个</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="固定-人头" prop="rc">
						<el-input 
							v-model="formData.rc" 
							placeholder="请输入固定-人头目标"
							type="number"
						>
							<template slot="append">次</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="12">
					<el-form-item label="阶段一人头" prop="rt1">
						<el-input 
							v-model="formData.rt1" 
							placeholder="请输入阶段一人头目标"
							type="number"
						>
							<template slot="append">人</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="阶段二人头" prop="rt2">
						<el-input 
							v-model="formData.rt2" 
							placeholder="请输入阶段二人头目标"
							type="number"
						>
							<template slot="append">人</template>
						</el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="handleClose" :disabled="saveLoading">取消</el-button>
			<el-button type="primary" @click="saveData" :loading="saveLoading">
				<i class="el-icon-check"></i> 保存
			</el-button>
		</div>
	</el-dialog>
</template>

<script>
import request from '@/utils/request'

export default {
	name: 'TargetSettingDialog',
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		storeData: {
			type: Object,
			default: () => ({})
		}
	},
	data() {
		return {
			dialogVisible: false,
			saveLoading: false,
			formData: {
				id: '',
				mdbm: '',
				dm: '',
				xsyj: '',
				xhyj: '',
				xms: '',
				rc: '',
				rt1: '',
				rt2: ''
			},
			formRules: {
				xsyj: [{ required: false, message: '请输入固定-生命线目标', trigger: 'blur' }],
				xhyj: [{ required: false, message: '请输入固定-消耗业绩目标', trigger: 'blur' }],
				xms: [{ required: false, message: '请输入固定-项目数目标', trigger: 'blur' }],
				rc: [{ required: false, message: '请输入固定-人头目标', trigger: 'blur' }],
				rt1: [{ required: false, message: '请输入阶段一人头目标', trigger: 'blur' }],
				rt2: [{ required: false, message: '请输入阶段二人头目标', trigger: 'blur' }]
			}
		}
	},
	computed: {
		dialogTitle() {
			return '设置门店目标'
		}
	},
	watch: {
		visible: {
			handler(newVal) {
				this.dialogVisible = newVal
				if (newVal && this.storeData.id) {
					this.initForm()
				}
			},
			immediate: true
		},
		dialogVisible(newVal) {
			this.$emit('update:visible', newVal)
		}
	},
	methods: {
		// 初始化表单数据
		initForm() {
			this.formData = {
				id: this.storeData.id || '',
				mdbm: this.storeData.mdbm || '',
				dm: this.storeData.dm || '',
				xsyj: this.storeData.xsyj || '',
				xhyj: this.storeData.xhyj || '',
				xms: this.storeData.xms || '',
				rc: this.storeData.rc || '',
				rt1: this.storeData.rt1 || '',
				rt2: this.storeData.rt2 || ''
			}
		},

		// 保存数据
		saveData() {
			this.$refs.form.validate((valid) => {
				if (valid) {
					this.saveLoading = true
					
					// 准备目标字段更新数据
					const updateData = {
						xsyj: this.formData.xsyj ? parseFloat(this.formData.xsyj) : null,
						xhyj: this.formData.xhyj ? parseFloat(this.formData.xhyj) : null,
						xms: this.formData.xms ? parseInt(this.formData.xms) : null,
						rc: this.formData.rc ? parseInt(this.formData.rc) : null,
						rt1: this.formData.rt1 ? parseInt(this.formData.rt1) : null,
						rt2: this.formData.rt2 ? parseInt(this.formData.rt2) : null
					}
					
					// 调用专门的目标更新接口
					request({
						url: `/api/Extend/LqMdxx/${this.formData.id}/targets`,
						method: 'PUT',
						data: updateData
					}).then(res => {
						this.$message.success('保存成功')
						this.handleClose()
						this.$emit('refresh')
					}).catch(() => {
						this.$message.error('保存失败')
					}).finally(() => {
						this.saveLoading = false
					})
				}
			})
		},

		// 关闭弹窗
		handleClose() {
			if (this.saveLoading) {
				this.$message.warning('正在保存中，请稍候...')
				return
			}
			this.dialogVisible = false
			this.$refs.form && this.$refs.form.resetFields()
		}
	}
}
</script>

<style lang="scss" scoped>
// 弹窗样式
.target-dialog {
	.dialog-header {
		padding: 16px 0;
		border-bottom: 1px solid #EBEEF5;
		margin-bottom: 20px;

		.store-info {
			display: flex;
			align-items: center;
			gap: 12px;

			i {
				font-size: 20px;
				color: #409EFF;
			}

			.store-name {
				font-size: 16px;
				font-weight: 600;
				color: #303133;
			}
		}
	}

	.edit-form {
		.el-form-item {
			margin-bottom: 20px;
		}
	}
}

// 响应式设计
@media (max-width: 768px) {
	.target-dialog {
		.el-dialog {
			width: 95% !important;
			margin: 0 auto;
		}
	}
}
</style>