cancel-dialog.vue 1.9 KB
<template>
	<el-dialog title="作废记录" :visible.sync="visible" width="500px" :close-on-click-modal="false">
		<el-form ref="form" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="作废原因" prop="remark">
				<el-input v-model="form.remark" type="textarea" :rows="4" placeholder="请输入作废原因" maxlength="500" show-word-limit />
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取消</el-button>
			<el-button type="danger" @click="submit" :loading="loading">确定作废</el-button>
		</div>
	</el-dialog>
</template>

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

export default {
	name: 'CancelDialog',
	data() {
		return {
			visible: false,
			loading: false,
			form: {
				id: '',
				remark: ''
			},
			rules: {
				remark: [{ required: true, message: '请输入作废原因', trigger: 'blur' }]
			}
		}
	},
	methods: {
		// 初始化
		init(row) {
			this.visible = true
			this.form = {
				id: row.id,
				remark: ''
			}
			this.$nextTick(() => {
				if (this.$refs.form) {
					this.$refs.form.clearValidate()
				}
			})
		},
		// 提交
		submit() {
			this.$refs.form.validate(valid => {
				if (!valid) return

				this.loading = true
				request({
					url: '/api/Extend/LqLaundryFlow/Cancel',
					method: 'POST',
					data: {
						id: this.form.id,
						remark: this.form.remark
					}
				}).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>