<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="productionId">
|
<!--<a-input v-model="model.workshopName" placeholder="请输入车间名称"/>-->
|
<a-select v-model="model.productionId" placeholder="请选择车间" @change="handleSelectChange">
|
<a-select-option v-for="item in workshopList" :key="item.id">
|
{{item.productionName}}
|
</a-select-option>
|
</a-select>
|
</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-item label="授权标识">
|
<a-input placeholder="请输入授权标识" v-model="model.perms"/>
|
</a-form-model-item>
|
</a-form-model>
|
</a-spin>
|
</a-modal>
|
</template>
|
|
<script>
|
import signageApi from '@/api/signage'
|
|
export default {
|
name: 'WorkshopModal',
|
components: {},
|
props: {
|
workshopList: {
|
type: Array
|
}
|
},
|
data() {
|
return {
|
title: '操作',
|
visible: false,
|
isEdit: false,
|
model: {},
|
layout: {
|
labelCol: { span: 3 },
|
wrapperCol: { span: 14 }
|
},
|
confirmLoading: false,
|
validatorRules: {
|
workshopName: [{ required: true, message: '请选择车间!' }],
|
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
|
}
|
},
|
handleSelectChange(value) {
|
const workshopItem = this.workshopList.find(item => item.id === value)
|
this.model.workshopName = workshopItem.productionName
|
},
|
handleOk() {
|
const that = this
|
// 触发表单验证
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
console.log('触发')
|
that.confirmLoading = true
|
let obj
|
if (!this.isEdit) {
|
console.log('触发新增')
|
obj = signageApi.addWorkshopApi(this.model)
|
} else {
|
console.log('触发修改')
|
obj = signageApi.editWorkshopApi(this.model)
|
}
|
obj.then((res) => {
|
if (res.success) {
|
that.$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
that.$emit('ok')
|
} else {
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
that.close()
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
handleCancel() {
|
this.close()
|
},
|
close() {
|
this.$refs.form.clearValidate()
|
this.$emit('close')
|
this.visible = false
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.avatar-uploader > .ant-upload {
|
width: 104px;
|
height: 104px;
|
}
|
</style>
|
