86 lines
2.6 KiB
Vue
86 lines
2.6 KiB
Vue
<template>
|
|
<el-container>
|
|
<el-header class="serveTitle">维保期限信息查询</el-header>
|
|
<el-main class="serveMain">
|
|
<div class="searchMain searchMainNoTop">
|
|
<div class="searchItem">
|
|
<el-input class="textInput" type="text" v-model="keyword" clearable placeholder="请输入序列号"></el-input>
|
|
</div>
|
|
<div class="searchItem searchBtn">
|
|
<el-button type="primary" icon="el-icon-search" @click="upSearch">查询</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="mainTable">
|
|
<scTable class="serveTable" ref="table" :apiObj="list.apiObj" :column="list.column" :params="params" :size="size" hideDo>
|
|
<el-table-column type="index" label="序号"></el-table-column>
|
|
<template v-for="(item,index) in list.column" :key="index">
|
|
<el-table-column :label="item.label" :prop="item.prop" :width="item.width" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<span v-if="item.prop === 'business_status'">
|
|
<span v-for="(em,index) in setMap.statusList" :key="index">
|
|
<span :style="{color:em.value==1?`var(--el-order-color-1)`:em.value==2?`var(--el-order-color-2)`:em.value==3?`var(--el-order-color-3)`:em.value==4?`var(--el-order-color-4)`:`var(--el-order-color-100)`}" v-if="em.value === scope.row[item.prop]">{{em.label}}</span>
|
|
</span>
|
|
</span>
|
|
<span v-else>{{scope.row[item.prop]}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
</template>
|
|
</scTable>
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "",
|
|
data(){
|
|
return{
|
|
size:'small',
|
|
setMap:{
|
|
statusList:[]
|
|
},
|
|
list:{
|
|
apiObj: {},
|
|
column:[
|
|
{label:'序列号',prop:'serial_number',width:160,hide: false},
|
|
{label:'工单号',prop:'repair_order_no',width:200,hide: false},
|
|
{label:'业务状态',prop:'business_status',width:120,hide: false},
|
|
{label:'维保到期日期',prop:'warranty_end_date',hide: false},
|
|
],
|
|
},
|
|
keyword:"",
|
|
params:{
|
|
serial_number:{
|
|
operator:"like",
|
|
value:""
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getStatusList();
|
|
},
|
|
methods:{
|
|
upSearch(){
|
|
for(let i in this.params){
|
|
this.params[i].value = this.keyword===""?"":"%"+this.keyword+"%";
|
|
}
|
|
this.list.apiObj = this.$API.customer.periodQuery;
|
|
this.$refs.table.upData(this.params);
|
|
},
|
|
async getStatusList() {
|
|
const res = await this.$API.customer.periodQueryStatusList.post();
|
|
if(res.code === 200){
|
|
this.setMap.statusList = res.data;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.searchMainNoTop{margin: 0 auto 20px auto;}
|
|
.textInput{width: 480px;}
|
|
</style>
|