251 lines
8.0 KiB
Vue
251 lines
8.0 KiB
Vue
<template>
|
||
<el-container>
|
||
<el-main class="orderMain" v-loading="loading" element-loading-text="加载中...">
|
||
<el-scrollbar>
|
||
<div class="cardBox">
|
||
<div class="headerView">
|
||
<div class="title">工单时间</div>
|
||
<div class="status">
|
||
<span class="name">当前状态：</span>
|
||
<span class="text">
|
||
<span v-for="(item,ind) in statusList" :key="ind">
|
||
<span :style="{color:item.value==1?`var(--el-order-color-1)`:item.value==2?`var(--el-order-color-2)`:item.value==3?`var(--el-order-color-3)`:item.value==4?`var(--el-order-color-4)`:`var(--el-order-color-5)`}"
|
||
v-if="item.value == info.business_status">{{item.label}}</span>
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="cardBody">
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label">创建时间：</span>
|
||
<span class="text">{{info.created_at}}</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label">PE确认时间：</span>
|
||
<span class="text">{{info.pe_confirmation_time}}</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label">过保时间：</span>
|
||
<span class="text">{{info.warranty_end_date}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<div class="cardBox footerCard">
|
||
<div class="cardItem">
|
||
<div class="title">流程进度</div>
|
||
<div class="cardBody">
|
||
<el-steps class="orderSteps" :active="info.process_num" align-center>
|
||
<el-step :status="item.status" v-for="(item,index) in info.process_engine" :key="index" :title="item.description" />
|
||
</el-steps>
|
||
</div>
|
||
</div>
|
||
<div class="cardItem">
|
||
<div class="title">维保单号</div>
|
||
<div class="cardBody">
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label">维修单号：</span>
|
||
<span class="text">{{info.repair_order_no}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<div class="cardItem">
|
||
<div class="title">维保工单信息</div>
|
||
<div class="cardBody">
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label">维修等级：</span>
|
||
<span class="text">{{info.maintenance_plan}}</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label">维修分类：</span>
|
||
<span class="text">{{info.maintenance_level}}</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="12">
|
||
<span class="label">故障内容：</span>
|
||
<span class="text">{{info.fault_description}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label">故障类型：</span>
|
||
<span class="text">{{info.fault_type}}</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label">维保等级：</span>
|
||
<span class="text">{{info.maintenance_plan}}</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label">是否关机：</span>
|
||
<span class="text">{{info.requires_shutdown}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">机房城市：</span>
|
||
<span class="text">{{info.city}}</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">园区：</span>
|
||
<span class="text">{{info.park_name}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">机房：</span>
|
||
<span class="text">{{info.data_center_name}}</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">机架位：</span>
|
||
<span class="text">{{info.rack_position}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">整机SN：</span>
|
||
<span class="text">{{info.device_sn}}</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">整机厂商：</span>
|
||
<span class="text">{{info.device_manufacturer}}</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">整机型号：</span>
|
||
<span class="text">{{info.device_model}}</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<div class="cardItem">
|
||
<div class="title">部件信息</div>
|
||
<div class="cardBody">
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">部件SN/Sp：</span>
|
||
<span class="text">
|
||
<el-input :size="size" v-model="info.component_serial_no" placeholder="部件SN/Sp"></el-input>
|
||
</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">部件厂商：</span>
|
||
<span class="text">
|
||
<el-input :size="size" v-model="info.component_manufacturer" placeholder="部件厂商"></el-input>
|
||
</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">部件型号：</span>
|
||
<span class="text">
|
||
<el-input :size="size" v-model="info.component_model" placeholder="部件型号"></el-input>
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">部件PN/Sp：</span>
|
||
<span class="text">
|
||
<el-input :size="size" v-model="info.component_pn" placeholder="部件PN/Sp"></el-input>
|
||
</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">SLA截止时间：</span>
|
||
<span class="text">
|
||
<el-input :size="size" v-model="info.sla_expiration" placeholder="SLA截止时间"></el-input>
|
||
</span>
|
||
</el-col>
|
||
<el-col :span="8" :lg="6">
|
||
<span class="label labelText">剩余BD数：</span>
|
||
<span class="text">
|
||
<el-input :size="size" v-model="info.bd_backup_count" placeholder="剩余BD数"></el-input>
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<div class="btnView">
|
||
<el-button type="primary" :size="size" @click="save" :loading="saveLoading">确认提交</el-button>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</el-main>
|
||
</el-container>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "submit-order",
|
||
data(){
|
||
return{
|
||
size:"small",
|
||
loading:false,
|
||
saveLoading:false,
|
||
params:{
|
||
order_id:Number(this.$route.query.id)
|
||
},
|
||
info:{},
|
||
statusList:[]
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getData();
|
||
this.getStatusList();
|
||
},
|
||
methods:{
|
||
async getData() {
|
||
this.loading = true;
|
||
const res = await this.$API.orders.order.maintenance.info.post(this.params);
|
||
if(res.code == 200){
|
||
if(res.data.process_engine){
|
||
let obj = this.processList(res.data.process_engine);
|
||
res.data.process_engine = obj.processedList;
|
||
res.data.process_num = obj.num;
|
||
}
|
||
this.info = res.data;
|
||
}
|
||
this.loading = false;
|
||
},
|
||
processList(list) {
|
||
let obj = {
|
||
num:0,
|
||
processedList:this.$TOOL.objCopy(list)
|
||
}
|
||
let foundNodeTrue = false;
|
||
for (let i = 0; i < obj.processedList.length; i++) {
|
||
if (obj.processedList[i].node === true) {
|
||
foundNodeTrue = true;
|
||
obj.processedList[i].status = 'finish';
|
||
obj.num = i;
|
||
} else if (!foundNodeTrue) {
|
||
obj.processedList[i].status = 'success';
|
||
}
|
||
if (foundNodeTrue && obj.processedList[i].node !== true) break;
|
||
}
|
||
return obj;
|
||
},
|
||
async save() {
|
||
const params = {order_ids: [this.params.order_id]};
|
||
this.saveLoading = true;
|
||
const res = await this.$API.orders.order.maintenance.submit.post(params);
|
||
if (res.code == 200) {
|
||
await this.getData();
|
||
}
|
||
this.saveLoading = false;
|
||
},
|
||
async getStatusList() {
|
||
const res = await this.$API.orders.order.maintenance.status.post();
|
||
if (res.code == 200) {
|
||
this.statusList = res.data;
|
||
}
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.btnView{
|
||
text-align: left;
|
||
}
|
||
</style>
|