完善系统检索

This commit is contained in:
龙运模 2024-10-19 17:01:57 +08:00
parent 8bcf74eb0d
commit 481dd4af44
4 changed files with 247 additions and 19 deletions

View File

@ -12,7 +12,7 @@ const routes = [
meta: {
code:"",
icon: "sc-icon-Home",
title: "搜索",
title: "系统搜索",
},
},

View File

@ -61,3 +61,77 @@
.searchInput.focused .el-input-group__prepend{
border-color: var(--el-color-primary);
}
.collapseHeaderBack{
width:100%;
background: #F5F7FA;
}
.collapseHeaderNav{
width: calc(100% - 21px);
display: flex;align-items: center;
height: 40px;
.item{
color: #606266;
margin: 0 8px;
}
.seq{flex-basis: 50px;}
}
.collapseHeader{
width: 100%;
display: contents;align-items: center;
.item{
display: block;
margin: 0 8px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: left;
color: #333;
font-weight: initial;
}
.seq{flex-basis: 50px;overflow: hidden;}
}
.collapseMain .el-collapse-item__content{
padding: 0;
}
.collapseMain .collapseBody{
background: #F9FBFD;
padding: 8px 8px 18px 8px;
.title{
font-weight: 600;
}
.stepView{
border-bottom: 1px solid #EAF0F5;
padding: 15px 20%;
}
.orderInfo{
padding: 10px 0;
font-size: 12px;
.el-row{
margin-bottom: 6px;
.name{
width: 65px;
display: inline-block;
text-align: right;
margin-right: 12px;
}
}
}
.componentBox{
.el-table{
background: none;
}
.el-table__inner-wrapper:before{
height: 0;
}
.el-table .el-table__body-wrapper{
background: none;
}
.el-scrollbar__wrap--hidden-default{
background: none;
}
.el-table__empty-block{
width: 100% !important;
background: var(--el-color-white);
}
}
}

View File

@ -25,11 +25,94 @@
</el-input>
</div>
</el-header>
<el-main>
<sc-table :data="rows" :size="size">
<el-table-column type="index" label="序号"></el-table-column>
<el-table-column prop="repair_order_no" label="单号"></el-table-column>
</sc-table>
<el-main v-loading="loading" element-loading-text="加载中...">
<el-scrollbar v-model="activeNames" v-if="rows.length>0">
<div class="collapseHeaderBack">
<div class="collapseHeaderNav">
<div class="item seq">序号</div>
<div class="item" :style="{'width':item.width+'px'}" v-for="(item,index) in orderColumn" :key="index">{{item.label}}</div>
</div>
</div>
<el-collapse class="collapseMain" @change="collapseChange" :accordion="true">
<template v-for="(item,index) in rows" :key="index">
<el-collapse-item :title="item.repair_order_no" :name="item.id">
<template #title>
<div class="collapseHeader">
<div class="item seq">{{index+1}}</div>
<div class="item" :style="{'width':em.width+'px'}" v-for="(em,index) in orderColumn" :key="index">
<!-- <el-tooltip effect="dark" :content="item[em.prop]"></el-tooltip>-->
<span v-if="em.prop == 'business_status'">
<span v-for="(li,ind) in statusList" :key="ind">
<span :style="{color:li.value==1?`var(--el-order-color-1)`:li.value==2?`var(--el-order-color-2)`:li.value==3?`var(--el-order-color-3)`:li.value==4?`var(--el-order-color-4)`:`var(--el-order-color-5)`}"
v-if="li.value == item[em.prop]">{{li.label}}</span>
</span>
</span>
<span v-else>{{item[em.prop]}}</span>
</div>
</div>
</template>
<div class="collapseBody">
<div class="title">工单详情</div>
<div class="stepView">
<el-steps class="orderSteps" :active="item.process_num" align-center>
<el-step :status="item.status" v-for="(item,index) in item.process_engine" :key="index" :title="item.description" />
</el-steps>
</div>
<div class="orderInfo">
<el-row>
<el-col :span="8" :lg="6">
<span class="name">维修单ID:</span><span class="text">{{item.id}}</span>
</el-col>
<el-col :span="8" :lg="6">
<span class="name">维修单号:</span><span class="text">{{item.repair_order_no}}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="8" :lg="6">
<span class="name">是否关机:</span><span class="text">{{item.requires_shutdown}}</span>
</el-col>
<el-col :span="8" :lg="6">
<span class="name">机房城市:</span><span class="text">{{item.city}}</span>
</el-col>
<el-col :span="8" :lg="6">
<span class="name">园区:</span><span class="text">{{item.park_name}}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="8" :lg="6">
<span class="name">机房:</span><span class="text">{{item.data_center_name}}</span>
</el-col>
<el-col :span="8" :lg="6">
<span class="name">机架位:</span><span class="text">{{item.rack_position}}</span>
</el-col>
</el-row>
<el-row>
<el-col :span="8" :lg="6">
<span class="name">整机SN:</span><span class="text">{{item.device_sn}}</span>
</el-col>
<el-col :span="8" :lg="6">
<span class="name">整机厂商:</span><span class="text">{{item.device_manufacturer}}</span>
</el-col>
<el-col :span="8" :lg="6">
<span class="name">整机型号:</span><span class="text">{{item.device_model}}</span>
</el-col>
</el-row>
</div>
<div class="componentBox">
<el-table :data="item.component_info" :size="size" stripe :header-cell-style="{'background': '#1367C1','color':'#fff'}">
<el-table-column type="index" label="序号" align="center"></el-table-column>
<el-table-column prop="component_serial_no" show-overflow-tooltip label="部件SN/Sp" width="160"></el-table-column>
<el-table-column prop="component_manufacturer" show-overflow-tooltip label="部件厂商" width="130"></el-table-column>
<el-table-column prop="component_model" show-overflow-tooltip label="部件型号" width="160"></el-table-column>
<el-table-column prop="component_pn" show-overflow-tooltip label="部件PN/Sp" width="150"></el-table-column>
<el-table-column prop="bd_backup_count" show-overflow-tooltip label="剩余BD数" width="120"></el-table-column>
</el-table>
</div>
</div>
</el-collapse-item>
</template>
</el-collapse>
</el-scrollbar>
</el-main>
</el-container>
</template>
@ -40,40 +123,111 @@ export default {
data(){
return{
size:'small',
keyword:"",
loading:false,
keyword:"Z240919004",
params:{
repair_order_no:{
operator:"like",
value:""
value:"%Z240919004%"
},
component_serial_no:{
operator:"like",
value:""
value:"%Z240919004%"
},
},
column:[
{width:"",prop:"",label:""}
activeNames:[],
orderColumn:[
{label:"工单号",prop:"repair_order_no",width:160},
{label:"客户名称",prop:"customer_name",width:140},
{label:"故障描述",prop:"fault_description",width:200},
{label:"生产日期",prop:"created_at",width:120},
{label:"返厂日期",prop:"warranty_end_date",width:120},
{label:"维修等级",prop:"maintenance_grade",width:120},
{label:"维修分类",prop:"fault_classification",width:120},
{label:"故障类型",prop:"fault_type",width:100},
{label:"维保等级",prop:"maintenance_plan",width:100},
{label:"是否开机",prop:"requires_shutdown",width:90},
{label:"状态",prop:"business_status",width:100},
],
rows:[]
planColumn:[
{label:"工单号",prop:"repair_order_no",width:160},
{label:"外发日期",prop:"repair_order_no",width:160},
{label:"维保商场",prop:"repair_order_no",width:160},
{label:"计划时间",prop:"repair_order_no",width:160},
{label:"完成时间",prop:"repair_order_no",width:160},
{label:"故障类型",prop:"repair_order_no",width:160},
{label:"状态",prop:"repair_order_no",width:160},
],
rows:[],
statusList:[],
component_info:[]
}
},
mounted() {
this.getStatusList();
},
methods:{
async searchClick() {
let params = this.setObj();
this.loading = true;
const res = await this.$API.orders.order.maintenance.search.post(params);
this.loading = false;
if(res.code == 200){
res.data.forEach(item=>{
if(item.process_engine){
let obj = this.processList(item.process_engine);
item.process_engine = obj.processedList;
item.process_num = obj.num;
}
if(item.component_info && item.component_info.length===0){
item.component_info = [
{
component_serial_no:item.component_serial_no,
component_manufacturer:item.component_manufacturer,
component_model:item.component_model,
component_pn:item.component_pn,
bd_backup_count:item.bd_backup_count
}
]
}
})
console.log(res.data,788)
this.rows = res.data;
}
},
setObj(){
for(let i in this.params){
this.params[i].value = this.keyword==""?"":'%'+this.keyword+'%'
this.params[i].value = this.keyword===""?"":'%'+this.keyword+'%'
}
return this.params
},
collapseChange(){
},
async getStatusList() {
const res = await this.$API.orders.order.maintenance.status.post();
if (res.code == 200) {
this.statusList = res.data;
}
},
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;
}
}
}
</script>

View File

@ -166,11 +166,11 @@
</el-row>
<sc-table ref="table" :data="form.component_info" style="width: 100%;" :hidePagination="true" :hideDo="true" :hideEmpty="true" :size="size">
<sc-table-column type="index" label="序号" width="65"></sc-table-column>
<sc-table-column prop="component_serial_no" label="部件SN/Sp"></sc-table-column>
<sc-table-column prop="component_manufacturer" label="部件厂商"></sc-table-column>
<sc-table-column prop="component_model" label="部件型号"></sc-table-column>
<sc-table-column prop="component_pn" label="部件PN/Sp"></sc-table-column>
<sc-table-column prop="bd_backup_count" label="甚于BD数"></sc-table-column>
<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>