web-base-admin/src/views/wholeNetwork/productManage/components/UpdateDialog.vue

137 lines
3.3 KiB
Vue

<template>
<div>
<el-dialog
:title="title"
:visible.sync="dialogVisible"
width="600px"
@close="handleClose"
>
<el-form ref="formRef" :rules="rules" :model="form" label-width="100px">
<el-form-item required label="仓储编号" prop="wmsCode">
<el-input v-model="form.wmsCode" />
</el-form-item>
<el-form-item style="margin-top: 10px;" required label="产品名称" prop="productName">
<el-input v-model="form.productName" />
</el-form-item>
<el-form-item style="margin-top: 10px;" required label="封面图" prop="cover">
<ImageUpload v-model="form.cover" />
</el-form-item>
<el-form-item style="margin-top: 10px;" label="备注" prop="remark">
<el-input v-model="form.remark" :maxlength="200" show-word-limit type="textarea" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleClose">
取消
</el-button>
<el-button type="primary" @click="handleSubmit">
确定
</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { addProductInfo, updateProductInfo } from '@/api/wholeNetwork/productManage'
import ImageUpload from '@/components/ImageUpload'
export default {
name: 'UpdateDialog',
components: {
ImageUpload
},
props: {
visible: {
type: Boolean,
default: false
},
isEdit: {
type: Boolean,
default: false
},
productInfo: {
type: Object,
default: () => ({})
}
},
data() {
return {
form: {
wmsCode: '',
productName: '',
cover: '',
remark: ''
},
rules: {
wmsCode: [
{ required: true, message: '请输入仓储编号', trigger: 'blur' }
],
productName: [
{ required: true, message: '请输入产品名称', trigger: 'blur' }
],
cover: [
{ required: true, message: '请上传封面图', trigger: 'blur' }
]
}
}
},
computed: {
title() {
return this.isEdit ? '编辑' : '添加'
},
dialogVisible: {
get() {
return this.visible
},
set(value) {
this.$emit('update:visible', value)
}
}
},
created() {
if (this.isEdit) {
this.form = {
...this.productInfo
}
console.log(this.form)
}
},
methods: {
handleClose() {
this.dialogVisible = false
},
handleSubmit() {
this.$refs.formRef.validate((valid) => {
if (valid) {
if (this.isEdit) {
updateProductInfo(this.form).then((res) => {
if (res.code === 200) {
this.$message.success('修改成功')
this.dialogVisible = false
this.$emit('success')
}
})
} else {
const params = {
...this.form,
inventory: ''
}
addProductInfo(params).then((res) => {
if (res.code === 200) {
this.$message.success('添加成功')
this.dialogVisible = false
this.$emit('success')
}
})
}
}
})
}
}
}
</script>
<style>
</style>