357 lines
13 KiB
Vue
357 lines
13 KiB
Vue
<template>
|
||
<el-container class="mainView">
|
||
<el-scrollbar style="width: 100%">
|
||
<el-main>
|
||
<el-form ref="form" :size="size" :rules="rules" label-width="95px" :model="form">
|
||
<div class="boxMain">
|
||
<div class="title">工单时间</div>
|
||
<div class="boxCom">
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="报修客户" prop="customer">
|
||
<el-select class="input" v-model="form.customer_id" @visible-change="getCustomerSelect('customer')" placeholder="请选择报修客户">
|
||
<el-option v-for="(item,index) in setMap['customer']" :key="index" :value="item.id" :label="item.customer_name"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="标准机型" prop="standard_model">
|
||
<el-input class="input" type="text" v-model="form.standard_model" placeholder="请输入标准机型"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="报修日期">
|
||
<el-date-picker class="input" type="date" value-format="YYYY-MM-DD" placeholder="请选择报修日期"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="PE确认时间" prop="pe_confirmation_time">
|
||
<el-date-picker class="input" v-model="form.pe_confirmation_time" type="date" value-format="YYYY-MM-DD" placeholder="请选择PE确认时间"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="过保时间" prop="warranty_end_date">
|
||
<el-date-picker class="input" v-model="form.warranty_end_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择过保时间"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="SLA截止时间" prop="sla_expiration">
|
||
<el-date-picker class="input" v-model="form.sla_expiration" type="date" value-format="YYYY-MM-DD" placeholder="请选择SLA截止时间" style="width: 100%"></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="boxMain">-->
|
||
<!-- <div class="title">维保单号</div>-->
|
||
<!-- <div class="boxCom">-->
|
||
<!-- <el-row>-->
|
||
<!-- <el-col :span="8" :lg="6">-->
|
||
<!-- <el-form-item label="维修单号" prop="repair_order_no">-->
|
||
<!-- <el-input class="input" type="text" v-model="form.repair_order_no" disabled placeholder="请输入维修单号"></el-input>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- </el-col>-->
|
||
<!-- </el-row>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<div class="boxMain">
|
||
<div class="title">维保工单信息</div>
|
||
<div class="boxCom">
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="维修单等级" prop="maintenance_grade">
|
||
<el-input class="input" v-model="form.maintenance_grade" type="text" placeholder="请输入维修等级"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="维修分类" prop="maintenance_level">
|
||
<el-select class="input" v-model="form.maintenance_level" @visible-change="getSelect('maintenance_level',2)" placeholder="请选择维修分类">
|
||
<el-option v-for="(item,index) in setMap['maintenance_level']" :key="index" :value="item.id" :label="item.item_name"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="故障内容" prop="fault_description">
|
||
<el-input class="input" v-model="form.fault_description" type="text" placeholder="请输入维修单号"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="故障类型" prop="fault_type">
|
||
<el-select class="input" v-model="form.fault_type" @visible-change="getSelect('fault_type',1)" placeholder="请选择故障类型">
|
||
<el-option v-for="(item,index) in setMap['fault_type']" :key="index" :value="item.id" :label="item.item_name"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="维保等级" prop="maintenance_plan">
|
||
<el-input class="input" v-model="form.maintenance_plan" placeholder="维保等级">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="是否关机" prop="requires_shutdown">
|
||
<el-select class="input" v-model="form.requires_shutdown" placeholder="请选择是否关机">
|
||
<el-option label="是" :value="1"></el-option>
|
||
<el-option label="否" :value="0"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="机房城市" prop="city">
|
||
<el-input class="input" v-model="form.city" placeholder="机房城市">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="园区" prop="park_name">
|
||
<el-input class="input" v-model="form.park_name" placeholder="园区">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="机房/IDC" prop="data_center_name">
|
||
<el-input class="input" v-model="form.data_center_name" placeholder="机房/IDC">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="机架位" prop="rack_position">
|
||
<el-input class="input" v-model="form.rack_position" type="text" placeholder="请输入机架位"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="整机SN/Se" prop="device_sn">
|
||
<el-input class="input" v-model="form.device_sn" placeholder="整机SN/Se">
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="整机厂商" prop="device_manufacturer">
|
||
<el-input class="input" v-model="form.device_manufacturer" type="text" placeholder="请输入整机厂商"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<el-form-item label="整机型号" prop="device_model">
|
||
<el-input class="input" v-model="form.device_model" type="text" placeholder="请输入整机型号"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<div class="boxMain boxMainNoBorder">
|
||
<div class="title titleFlex">
|
||
<span class="name">维保部件信息</span>
|
||
<el-button type="primary" plain :size="size" icon="el-icon-Plus" @click="addOrder">添加部件信息</el-button>
|
||
</div>
|
||
<div class="boxCom">
|
||
<el-row>
|
||
<el-col :span="25" :lg="24">
|
||
<el-form-item label="验证ERP库存" prop="is_verify_erp_inventory">
|
||
<el-radio-group v-model="form.is_verify_erp_inventory">
|
||
<el-radio :label="true">是</el-radio>
|
||
<el-radio :label="false">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
<sc-table ref="table" :data="form.component_info" style="width: 100%;" :hidePagination="true" :hideDo="true" :hideEmpty="true" :size="size">
|
||
<sc-table-column prop="component_serial_no" label="部件SN/Sp" :show-overflow-tooltip="true" width="160"></sc-table-column>
|
||
<sc-table-column prop="component_manufacturer" label="部件厂商" :show-overflow-tooltip="true" width="130"></sc-table-column>
|
||
<sc-table-column prop="component_model" label="部件型号" :show-overflow-tooltip="true" width="160"></sc-table-column>
|
||
<sc-table-column prop="component_pn" label="部件PN/Sp" :show-overflow-tooltip="true" width="150"></sc-table-column>
|
||
<sc-table-column prop="bd_backup_count" label="甚于BD数" :show-overflow-tooltip="true" width="120"></sc-table-column>
|
||
<sc-table-column label="操作" fixed="right" width="120">
|
||
<template #default="scope">
|
||
<el-button link type="danger" :size="size" @click="deleteOrder(scope.row,scope.$index)">删除</el-button>
|
||
</template>
|
||
</sc-table-column>
|
||
</sc-table>
|
||
</div>
|
||
</div>
|
||
<div class="btnBox">
|
||
<el-button type="primary" :size="size" @click="save" :loading="isSave">确认保存</el-button>
|
||
</div>
|
||
</el-form>
|
||
</el-main>
|
||
</el-scrollbar>
|
||
</el-container>
|
||
|
||
<info-save-dialog ref="saveDialog" v-if="dialog.save" @success="handleSaveSuccess" @closed="dialog.save=false"></info-save-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import infoSaveDialog from "@/views/order/components/infoSave";
|
||
export default {
|
||
name: "",
|
||
components:{
|
||
infoSaveDialog
|
||
},
|
||
data(){
|
||
return{
|
||
size:"small",
|
||
isSave:false,
|
||
setMap:{
|
||
maintenance_level:[],
|
||
fault_type:[],
|
||
},
|
||
form:{
|
||
customer_id:"", // 客户
|
||
standard_model:"", // 标准机型
|
||
repair_order_no:"",
|
||
maintenance_grade:"", // 维修等级
|
||
maintenance_level: "", // 维修分类
|
||
fault_type: "", // 故障类型
|
||
fault_description: "", // 故障描述
|
||
requires_shutdown: "", // 是否需要关机
|
||
city: "", // 机房城市
|
||
park_name: "", // 园区名称
|
||
data_center_name: "", // 机房/IDC名称
|
||
rack_position: "", // 机架位置
|
||
device_sn: "", // 整机SN
|
||
device_manufacturer: "", // 整机厂商
|
||
device_model: "", // 整机型号
|
||
component_serial_no: "", // 部件序列号
|
||
component_manufacturer: "", // 部件厂商
|
||
component_model: "", // 部件型号
|
||
component_pn: "", // 部件零件PN号
|
||
sla_expiration: "", // SLA到期时间
|
||
bd_backup_count: "", // 剩余BD数
|
||
pe_confirmation_time: "", // PE确认时间
|
||
warranty_end_date: "", // 保修期结束
|
||
maintenance_plan: '', // 维保等级：1-铜牌；常量维护项
|
||
is_verify_erp_inventory:true,
|
||
component_info:[]
|
||
},
|
||
rules:{
|
||
fault_description:[{required:true,trigger:"blur",message:"故障描述不能为空"}],
|
||
fault_type:[{required:true,trigger:"change",message:"故障类型不能为空"}],
|
||
city:[{required:true,trigger:"blur",message:"机房城市不能为空"}],
|
||
device_sn:[{required:true,trigger:"blur",message:"整机SN/Se不能为空"}],
|
||
device_manufacturer:[{required:true,trigger:"blur",message:"整机厂商不能为空"}],
|
||
device_model:[{required:true,trigger:"blur",message:"整机型号不能为空"}],
|
||
sla_expiration:[{required:true,trigger:"change",message:"SLA截止时间不能为空"}],
|
||
bd_backup_count:[{required:true,trigger:"blur",message:"剩余BD数不能为空"}],
|
||
},
|
||
|
||
dialog: {
|
||
save: false,
|
||
},
|
||
}
|
||
},
|
||
mounted() {
|
||
|
||
},
|
||
methods:{
|
||
async getSelect(name,num) {
|
||
const res = await this.$API.orders.order.maintenance.optionList.post({const_type:num});
|
||
if(res.code == 200){
|
||
this.setMap[name] = res.data;
|
||
}
|
||
},
|
||
async getCustomerSelect(name){
|
||
let params = {
|
||
field:"customer_name",
|
||
id:{
|
||
operator:"in",
|
||
value:""
|
||
}
|
||
}
|
||
const res = await this.$API.setup.customer.select.post(params);
|
||
if(res.code == 200){
|
||
this.setMap[name] = res.data;
|
||
}
|
||
},
|
||
addOrder(){
|
||
this.dialog.save = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.saveDialog.open()
|
||
})
|
||
},
|
||
handleSaveSuccess(data,mode){
|
||
if(mode == 'add'){
|
||
this.form.component_info.push(data);
|
||
}
|
||
if(mode == 'edit'){
|
||
if(this.info.component_info.length>0){
|
||
this.info.component_info.forEach((item,index)=>{
|
||
if(index == data.num || (data.id && item.id == data.id)){
|
||
item.num = index;
|
||
item.component_manufacturer = data.component_manufacturer;
|
||
item.component_model = data.component_model;
|
||
item.component_pn = data.component_pn;
|
||
item.component_serial_no = data.component_serial_no;
|
||
}
|
||
})
|
||
}else{
|
||
this.info.component_info.push(data);
|
||
}
|
||
}
|
||
},
|
||
deleteOrder(row,num){
|
||
this.form.component_info.forEach((em,index)=>{
|
||
if(index === num){
|
||
this.form.component_info.splice(index,1);
|
||
}
|
||
});
|
||
},
|
||
|
||
save(){
|
||
this.$refs.form.validate(async (valid) => {
|
||
if (valid) {
|
||
this.isSave = true;
|
||
const res = await this.$API.orders.order.maintenance.add.post(this.form);
|
||
this.isSave = false;
|
||
if(res.code == 200){
|
||
this.$message.success("操作成功");
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.mainView{
|
||
background: var(--el-color-white);
|
||
}
|
||
.boxMain{
|
||
border-bottom: 1px solid #f2f2f2;
|
||
padding: 10px 0 5px 0;
|
||
.title{
|
||
margin-bottom: 10px;
|
||
}
|
||
.titleFlex{
|
||
display: flex;align-items: stretch;justify-content: space-between;
|
||
}
|
||
.boxCom{
|
||
.el-row{
|
||
.el-col{
|
||
padding: 0 10px;
|
||
::v-deep .input{
|
||
width: 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.boxMainNoBorder{
|
||
border-bottom: 0;
|
||
}
|
||
.btnBox{
|
||
margin-top: 15px;
|
||
text-align: left;
|
||
padding: 0 10px;
|
||
}
|
||
</style>
|