edit-dialog.vue 4.74 KB
<template>
	<el-dialog title="编辑记录" :visible.sync="visible" width="600px" :close-on-click-modal="false">
		<el-form ref="form" :model="form" :rules="rules" label-width="120px">
			<el-form-item label="数量" prop="quantity">
				<el-input-number v-model="form.quantity" :min="1" :precision="0" style="width: 100%" />
			</el-form-item>
			<el-form-item label="送出时间" prop="sendTime" v-if="flowType === 0">
				<el-date-picker
					v-model="form.sendTime"
					type="datetime"
					value-format="yyyy-MM-dd HH:mm:ss"
					format="yyyy-MM-dd HH:mm:ss"
					placeholder="请选择送出时间"
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item label="送回时间" prop="returnTime" v-if="flowType === 1">
				<el-date-picker
					v-model="form.returnTime"
					type="datetime"
					value-format="yyyy-MM-dd HH:mm:ss"
					format="yyyy-MM-dd HH:mm:ss"
					placeholder="请选择送回时间"
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取消</el-button>
			<el-button type="primary" @click="submit" :loading="loading">确定</el-button>
		</div>
	</el-dialog>
</template>

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

export default {
	name: 'EditDialog',
	data() {
		return {
			visible: false,
			loading: false,
			flowType: 0, // 0: 送出, 1: 送回
			form: {
				id: '',
				quantity: 1,
				sendTime: '',
				returnTime: '',
				remark: ''
			},
			rules: {
				quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }]
			}
		}
	},
	methods: {
		// 初始化
		init(row) {
			this.visible = true
			this.flowType = row.flowType || 0
			
			// 格式化时间字段(如果是时间戳,转换为 yyyy-MM-dd HH:mm:ss 格式)
			let sendTime = ''
			let returnTime = ''
			
			if (row.sendTime) {
				if (typeof row.sendTime === 'number' || typeof row.sendTime === 'string') {
					const date = new Date(row.sendTime)
					if (!isNaN(date.getTime())) {
						const year = date.getFullYear()
						const month = String(date.getMonth() + 1).padStart(2, '0')
						const day = String(date.getDate()).padStart(2, '0')
						const hours = String(date.getHours()).padStart(2, '0')
						const minutes = String(date.getMinutes()).padStart(2, '0')
						const seconds = String(date.getSeconds()).padStart(2, '0')
						sendTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
					}
				} else {
					sendTime = row.sendTime
				}
			}
			
			if (row.returnTime) {
				if (typeof row.returnTime === 'number' || typeof row.returnTime === 'string') {
					const date = new Date(row.returnTime)
					if (!isNaN(date.getTime())) {
						const year = date.getFullYear()
						const month = String(date.getMonth() + 1).padStart(2, '0')
						const day = String(date.getDate()).padStart(2, '0')
						const hours = String(date.getHours()).padStart(2, '0')
						const minutes = String(date.getMinutes()).padStart(2, '0')
						const seconds = String(date.getSeconds()).padStart(2, '0')
						returnTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
					}
				} else {
					returnTime = row.returnTime
				}
			}
			
			this.form = {
				id: row.id,
				quantity: row.quantity || 1,
				sendTime: sendTime,
				returnTime: returnTime,
				remark: row.remark || ''
			}
			this.$nextTick(() => {
				if (this.$refs.form) {
					this.$refs.form.clearValidate()
				}
			})
		},
		// 提交
		submit() {
			this.$refs.form.validate(valid => {
				if (!valid) return

				this.loading = true
				
				// 构建提交数据
				const submitData = {
					id: this.form.id,
					quantity: this.form.quantity,
					remark: this.form.remark || ''
				}

				// 根据类型添加时间字段
				if (this.flowType === 0 && this.form.sendTime) {
					// 转换为ISO格式
					submitData.sendTime = new Date(this.form.sendTime).toISOString()
				} else if (this.flowType === 1 && this.form.returnTime) {
					// 转换为ISO格式
					submitData.returnTime = new Date(this.form.returnTime).toISOString()
				}

				request({
					url: '/api/Extend/LqLaundryFlow/Update',
					method: 'POST',
					data: submitData
				}).then(res => {
					this.loading = false
					if (res.code == 200) {
						this.$message.success(res.msg || '更新成功')
						this.visible = false
						this.$emit('refresh')
					} else {
						this.$message.error(res.msg || '更新失败')
					}
				}).catch(() => {
					this.loading = false
				})
			})
		}
	},
	watch: {
		visible(val) {
			if (!val) {
				this.$refs.form && this.$refs.form.resetFields()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.dialog-footer {
	text-align: right;
}
</style>