<template>
|
<a-modal
|
:title="title"
|
:maskClosable="disableSubmit"
|
:width="drawerWidth"
|
@cancel="visible=false"
|
:visible="visible"
|
:footer="null"
|
style="height: 100%;overflow: auto;padding-bottom: 53px;">
|
|
<template slot="title">
|
<div style="width: 100%;">
|
<span>{{ title }}</span>
|
<span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
|
<a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
|
</span>
|
</div>
|
|
</template>
|
|
<a-spin :spinning="confirmLoading">
|
<a-form-model ref="form" :form="form" :model="model" :rules="validatorRules">
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="公司" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="companyName">
|
<a-input :readOnly="disableSubmit" allow-clear placeholder="请输入公司名称"
|
v-model="model.companyName"></a-input>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="车间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="productionName">
|
<a-input :readOnly="disableSubmit" allow-clear placeholder="请输入车间名称" v-model="model.productionName"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="工段" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="sectionName">
|
<a-input :readOnly="disableSubmit" allow-clear placeholder="请输入工段名称"
|
v-model="model.sectionName"></a-input>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="设备编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentId">
|
<a-input :readOnly="disableSubmit" allow-clear placeholder="请输入设备编号"
|
v-model="model.equipmentId"></a-input>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentName">
|
<a-input :readOnly="disableSubmit" allow-clear placeholder="请输入设备名称" v-model="model.equipmentName"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="设备型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentModel">
|
<a-input :readOnly="disableSubmit" allow-clear placeholder="请输入设备型号"
|
v-model="model.equipmentModel"></a-input>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="设备系统类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input :readOnly="disableSubmit" allow-clear placeholder="请输入设备系统类型"
|
v-model="model.controlSystem"/>
|
</a-form-model-item>
|
</a-col>
|
|
<a-col :span="12">
|
<a-form-model-item label="设备责任人" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input allow-clear :readOnly="disableSubmit" placeholder="请输入设备责任人"
|
v-model="model.responsible"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="设备安放位置" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input allow-clear :readOnly="disableSubmit" placeholder="请输入设备安放位置" v-model="model.equipmentPosition"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="设备安放时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-date-picker allow-clear :disabled="disableSubmit" v-model="model.placementTime" format='YYYY-MM-DD'
|
value-format="YYYY-MM-DD"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="MDC安装情况" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<j-switch :disabled="disableSubmit" v-model="model.isMdcInstall"></j-switch>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="MDC硬件安装情况" :labelCol="{xs: { span: 24 },sm: { span: 10 }}"
|
:wrapperCol="{xs: { span: 24 },sm: { span: 14 }}">
|
<j-switch :disabled="disableSubmit" v-model="model.isMdcHardwareInstall"></j-switch>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="MDC安装时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-date-picker allow-clear :disabled="disableSubmit" v-model="model.mdcInstallTime" format='YYYY-MM-DD'
|
value-format="YYYY-MM-DD"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="DNC安装情况" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<j-switch :disabled="disableSubmit" v-model="model.isDncInstall"></j-switch>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="DNC硬件安装情况" :labelCol="{xs: { span: 24 },sm: { span: 10 }}"
|
:wrapperCol="{xs: { span: 24 },sm: { span: 14 }}">
|
<j-switch :disabled="disableSubmit" v-model="model.isDncHardwareInstall"></j-switch>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="DNC安装时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-date-picker allow-clear :disabled="disableSubmit" v-model="model.dncInstallTime" format='YYYY-MM-DD'
|
value-format="YYYY-MM-DD"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</a-spin>
|
|
<div class="drawer-bottom-button" v-if="!disableSubmit">
|
<a-popconfirm title="确定放弃操作？" @confirm="close" okText="确定" cancelText="取消">
|
<a-button style="margin-right: .8rem">取消</a-button>
|
</a-popconfirm>
|
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
|
</div>
|
</a-modal>
|
|
</template>
|
|
<script>
|
import pick from 'lodash.pick'
|
import { getAction, postAction } from '@/api/manage'
|
|
export default {
|
name: 'MdcImplementLedgersModal',
|
components: {},
|
data() {
|
return {
|
modalWidth: 800,
|
drawerWidth: 700,
|
modalToggleFlag: true,
|
disableSubmit: true,
|
form: this.$form.createForm(this),
|
validatorRules: {
|
// equipmentId:
|
// [
|
// {
|
// required: true, message: '请选择设备编号!'
|
// }
|
// ],
|
// equipmentName:
|
// [
|
// {
|
// required: true, message: '请输入设备名称!'
|
// }
|
// ],
|
// equipmentModel:
|
// [
|
// {
|
// required: true, message: '请输入设备型号!'
|
// }
|
// ]
|
},
|
title: '操作',
|
visible: false,
|
model: {},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 15 }
|
},
|
uploadLoading: false,
|
confirmLoading: false,
|
headers: {},
|
url: {
|
add: '/mdc/mdcImplementLedgers/add',
|
edit: '/mdc/mdcImplementLedgers/edit'
|
}
|
}
|
},
|
methods: {
|
add() {
|
this.edit({})
|
},
|
edit(record) {
|
let that = this
|
that.visible = true
|
//根据屏幕宽度自适应抽屉宽度
|
this.resetScreenSize()
|
that.model = Object.assign({}, record)
|
},
|
//窗口最大化切换
|
toggleScreen() {
|
if (this.modalToggleFlag) {
|
this.modalWidth = window.innerWidth
|
} else {
|
this.modalWidth = 800
|
}
|
this.modalToggleFlag = !this.modalToggleFlag
|
},
|
// 根据屏幕变化,设置抽屉尺寸
|
resetScreenSize() {
|
let screenWidth = document.body.clientWidth
|
if (screenWidth < 500) {
|
this.drawerWidth = screenWidth
|
} else {
|
this.drawerWidth = 700
|
}
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
this.disableSubmit = false
|
},
|
handleSubmit() {
|
const that = this
|
// 触发表单验证
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
that.confirmLoading = true
|
let url
|
if (!this.model.id) {
|
url = that.url.add
|
} else {
|
url = that.url.edit
|
}
|
console.log('model', that.model)
|
postAction(url, that.model).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
|
}
|
})
|
},
|
/**
|
* 编辑或查看详情数据时清除抽屉表单验证
|
*/
|
removeValidate() {
|
this.$refs.form.clearValidate()
|
}
|
}
|
|
}
|
</script>
|
|
<style scoped>
|
.avatar-uploader > .ant-upload {
|
width: 104px;
|
height: 104px;
|
}
|
|
.ant-upload-select-picture-card i {
|
font-size: 49px;
|
color: #999;
|
}
|
|
.ant-upload-select-picture-card .ant-upload-text {
|
margin-top: 8px;
|
color: #666;
|
}
|
|
.ant-table-tbody .ant-table-row td {
|
padding-top: 10px;
|
padding-bottom: 10px;
|
}
|
|
.drawer-bottom-button {
|
position: absolute;
|
bottom: -8px;
|
width: 100%;
|
border-top: 1px solid #e8e8e8;
|
padding: 10px 16px;
|
text-align: right;
|
left: 0;
|
background: #fff;
|
border-radius: 0 0 2px 2px;
|
}
|
</style>
|
