<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="alterTime">
|
<a-date-picker allow-clear :disabled="disableSubmit" v-model="model.alterTime" format='YYYY-MM-DD'
|
value-format="YYYY-MM-DD"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="变更原因" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="alterReason">
|
<a-select :disabled="disableSubmit" placeholder="请选择变更原因" :triggerChange="true"
|
v-model="model.alterReason">
|
<a-select-option v-for='item in selectList' :key='item.value' :value='item.value'>
|
{{item.label}}
|
</a-select-option>
|
</a-select>
|
</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="locationStatus">
|
<a-input :readOnly="disableSubmit" allow-clear placeholder="请输入设备位置确认"
|
v-model="model.locationStatus"></a-input>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="设备网络确认" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="networkStatus">
|
<a-select :disabled="disableSubmit" placeholder="请选择设备网络确认" :triggerChange="true"
|
v-model="model.networkStatus">
|
<a-select-option value='未恢复'>未恢复</a-select-option>
|
<a-select-option value='已恢复'>已恢复</a-select-option>
|
</a-select>
|
</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" prop="mdcFunctionStatus">
|
<j-switch :disabled="disableSubmit" v-model="model.mdcFunctionStatus"></j-switch>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="MDC模块确认" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mdcModuleStatus">
|
<j-switch :disabled="disableSubmit" v-model="model.mdcModuleStatus"></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" prop="dncFunctionStatus">
|
<j-switch :disabled="disableSubmit" v-model="model.dncFunctionStatus"></j-switch>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="DNC模块确认" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="dncModuleStatus">
|
<j-switch :disabled="disableSubmit" v-model="model.dncModuleStatus"></j-switch>
|
</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.feedbackBy"/>
|
</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.feedbackTime" 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="维护人员" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input allow-clear :readOnly="disableSubmit" placeholder="请输入维护人员" v-model="model.maintenanceBy"/>
|
</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.maintenanceTime" 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="处理过程描述" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input allow-clear :readOnly="disableSubmit" placeholder="请输入处理过程描述" v-model="model.maintenanceRemark"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="处理结果" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<j-switch :disabled="disableSubmit" v-model="model.maintenanceResult"></j-switch>
|
</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 { 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: {},
|
title: '操作',
|
visible: false,
|
model: {},
|
selectList: [
|
{
|
label: '搬迁',
|
value: '搬迁'
|
},
|
{
|
label: '维修',
|
value: '维修'
|
},
|
{
|
label: '大修',
|
value: '大修'
|
},
|
{
|
label: '报废',
|
value: '报废'
|
},
|
{
|
label: '其他',
|
value: '其他'
|
}
|
],
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 15 }
|
},
|
uploadLoading: false,
|
confirmLoading: false,
|
headers: {},
|
url: {
|
add: '/mdc/mdcImplementLedgersSub/add',
|
edit: '/mdc/mdcImplementLedgersSub/edit'
|
}
|
}
|
},
|
methods: {
|
add(implementId) {
|
this.edit({ implementId })
|
},
|
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>
|
