<template>
|
<a-modal
|
:title="title"
|
:width="800"
|
:visible="visible"
|
:confirmLoading="confirmLoading"
|
@ok="handleOk"
|
@cancel="handleCancel"
|
cancelText="关闭"
|
wrapClassName="ant-modal-cust-warp"
|
style="top:5%;height: 85%;overflow-y: hidden">
|
|
<a-spin :spinning="confirmLoading">
|
<a-form-model ref="form" v-bind="layout" :model="model" :rules="validatorRules">
|
<a-form-model-item label="车间名称" required prop="workshopName">
|
<a-input v-model="model.workshopName" placeholder="请输入车间名称"/>
|
</a-form-model-item>
|
<a-form-model-item label="车间背景图" required prop="backgroundImage">
|
<j-image-upload class="avatar-uploader" text="上传" v-model="model.backgroundImage"></j-image-upload>
|
</a-form-model-item>
|
<a-form-model-item label="设备编号颜色">
|
<a-input type="color" v-model="model.equipmentIdColor"></a-input>
|
</a-form-model-item>
|
</a-form-model>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import api from '@/api/mdc'
|
|
export default {
|
name: 'WorkshopModal',
|
components: {},
|
data() {
|
return {
|
title: '操作',
|
visible: false,
|
isEdit: false,
|
model: {},
|
layout: {
|
labelCol: { span: 3 },
|
wrapperCol: { span: 14 }
|
},
|
confirmLoading: false,
|
validatorRules: {
|
workshopName: [
|
{ required: true, message: '请输入车间名称!' },
|
{ min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
|
],
|
id: [
|
{ required: true, message: '请输入车间编号!' },
|
{ min: 0, max: 64, message: '长度不超过 64 个字符', trigger: 'blur' },
|
{ validator: this.validateRoleCode }
|
],
|
backgroundImage: [
|
{ required: true, message: '请上传车间背景图!' }
|
]
|
}
|
}
|
},
|
created() {
|
//备份model原始值
|
this.modelDefault = JSON.parse(JSON.stringify(this.model))
|
},
|
methods: {
|
add() {
|
this.edit(this.modelDefault)
|
},
|
edit(record) {
|
this.model = Object.assign({}, record)
|
this.visible = true
|
//编辑页面禁止修改角色编码
|
if (this.model.id) {
|
this.isEdit = true
|
} else {
|
this.isEdit = false
|
}
|
},
|
close() {
|
this.$refs.form.clearValidate()
|
this.$emit('close')
|
this.visible = false
|
},
|
handleOk() {
|
const that = this
|
// 触发表单验证
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
console.log('触发')
|
that.confirmLoading = true
|
let obj
|
if (!this.isEdit) {
|
console.log('触发新增')
|
obj = api.addWorkshopApi(this.model)
|
} else {
|
console.log('触发修改')
|
obj = api.editWorkshopApi(this.model)
|
}
|
obj.then((res) => {
|
if (res.success) {
|
that.$message.success(res.message)
|
that.$emit('ok')
|
} else {
|
that.$message.warning(res.message)
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
that.close()
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
validateRoleCode(rule, value, callback) {
|
if (/[\u4E00-\u9FA5]/g.test(value)) {
|
callback('车间编号不可输入汉字!')
|
} else {
|
callback()
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.avatar-uploader > .ant-upload {
|
width: 104px;
|
height: 104px;
|
}
|
</style>
|
