8 changed files with 1418 additions and 258 deletions
@ -0,0 +1,609 @@ |
|||
<template> |
|||
<div class="InventoryBookDetail_innerPage" v-loading="loading"> |
|||
<!-- 全部展示优化一半 --> |
|||
<!-- 搜索 --> |
|||
<el-form ref="searchForm" :inline="true" :rules="formRule" :model="searchForm" size="small" class="searchHeader"> |
|||
<el-form-item label="ERP储位" prop="erpLocatioCode"> |
|||
<el-input v-model="searchForm.erpLocatioCode" placeholder="请输入ERP储位"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="零件" prop="itemCode"> |
|||
<el-input v-model="searchForm.itemCode" placeholder="请输入零件"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="账期" prop="interfaceCalendar"> |
|||
<el-select |
|||
:loading="calendarLoading" |
|||
@change="calendarChange" |
|||
v-model="searchForm.interfaceCalendar" |
|||
placeholder="请选择账期" |
|||
> |
|||
<el-option |
|||
v-for="item in calendarList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="开始时间" prop="beginDate"> |
|||
<el-date-picker |
|||
@change="timeChange" |
|||
value-format="yyyy-MM-dd" |
|||
v-model="searchForm.beginDate" |
|||
type="date" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="结束时间" prop="endDate"> |
|||
<el-date-picker |
|||
@change="timeChange" |
|||
value-format="yyyy-MM-dd" |
|||
v-model="searchForm.endDate" |
|||
type="date" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="searchHandle">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<!-- table --> |
|||
<div class="tableContent" v-if="tableData"> |
|||
<ul class="tableHeader"> |
|||
<li>{{tableHeader.companyName}}</li> |
|||
<li><span class="tableName">库存流水帐 (料品)</span></li> |
|||
<li class="timeLi"> |
|||
<div class="item">交易年月: {{ getYearMonth(tableHeader.beginDate) }} - {{ getYearMonth(tableHeader.endDate) }}</div> |
|||
<div class="item">制表日期：{{ getNow() }}</div> |
|||
</li> |
|||
</ul> |
|||
<!-- :span-method="verticalMergeCell" --> |
|||
<el-table |
|||
height="calc(100vh - 180px)" |
|||
:data="tableData" |
|||
class="tableEl" |
|||
:row-class-name="tableRowClass" |
|||
> |
|||
<!-- <el-table-column type="index" label="序号"></el-table-column> --> |
|||
<!-- :show-overflow-tooltip="true" --> |
|||
<el-table-column |
|||
v-for="(item,key) in tableTh" |
|||
:prop="item.prop" |
|||
:label="item.label" |
|||
:align="item.prop.toLowerCase().indexOf('qty') >= 0 ? 'right' : 'left'" |
|||
:width="item.width" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.total_erp || scope.row.total_erp2 || scope.row.total_item"> |
|||
<div v-if="scope.row.total_erp2"> |
|||
<span v-if="totalProps[0] == item.prop" style="color: blue;font-weight:bold">库位小计：</span> |
|||
<span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_erp2[item.prop]}}</span> |
|||
</div> |
|||
<div v-if="scope.row.total_erp"> |
|||
<span v-if="totalProps[0] == item.prop" style="color: #ff6000;font-weight:bold">储位小计：</span> |
|||
<span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_erp[item.prop]}}</span> |
|||
</div> |
|||
<div v-if="scope.row.total_item"> |
|||
<span v-if="totalProps[0] == item.prop" style="color: #24b924;font-weight:bold">物料小计：</span> |
|||
<span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_item[item.prop]}}</span> |
|||
</div> |
|||
</div> |
|||
<div v-else> |
|||
<div v-if="item.prop == 'itemCode'"> |
|||
<div>物料代码:<br/>【{{ scope.row.level1[item.prop] }}】</div> |
|||
<br/> |
|||
<div>物料名称:<br/>【{{ scope.row.level1.itemName }}】</div> |
|||
<br/> |
|||
<div>物料描述1:<br/>【{{ scope.row.level1.itemDesc1 }}】</div> |
|||
<br/> |
|||
<div v-if="scope.row.level1.configuration">配置码:<br/>【{{ scope.row.level1.configuration }}】</div> |
|||
</div> |
|||
<div v-else-if="item.prop == 'erpLocatioCode'">{{ scope.row.level2[item.prop] }}</div> |
|||
<div v-else> |
|||
<div v-if="scope.row.level4"> |
|||
<div v-if="item.prop == 'sumInQty'">{{ scope.row.level4.inQty }}</div> |
|||
<div v-else-if="item.prop == 'sumOutQty'">{{ scope.row.level4.outQty }}</div> |
|||
<div v-else-if="item.prop == 'createDateTime'">{{ formatTime(scope.row.level4.createDateTime) }}</div> |
|||
<div v-else-if="item.prop == 'locationCode'">{{ scope.row.level4.locatioCode }}</div> |
|||
<div v-else-if="item.prop == 'interFaceName'">{{getInterFaceName(scope.row.level4)}}</div> |
|||
<div v-else-if="item.prop == 'enumTransType' || item.prop == 'enumTransSubType'">{{ scope.row.level4[item.prop] | trigger(item.option, "label") }}</div> |
|||
<div v-else>{{ scope.row.level4[item.prop] }}</div> |
|||
</div> |
|||
<div v-else>{{ scope.row.level3[item.prop] }}</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getInventoryTransactionSerials,getInterfaceCalendar } from '@/api/wms-api' |
|||
import { formatTimeStampToNorm,formatTimeStrToStr } from '@/utils/formatTime' |
|||
export default { |
|||
name:"InventoryBookDetail_innerPage", |
|||
data(){ |
|||
return{ |
|||
loading:false,//页面加载 |
|||
calendarLoading:false,//账期下拉加载 |
|||
tableData:null,//table数据 |
|||
calendarList:[],//账期下拉列表 |
|||
// 查询字段 |
|||
searchForm:{ |
|||
interfaceCalendar:null, |
|||
erpLocatioCode:null, |
|||
itemCode:null,//VW316C1A028A,UTT06PP5483 |
|||
beginDate: '',//2021-10-01 |
|||
endDate: '',//2023-11-28T23:59:59 |
|||
}, |
|||
// 查询必填项 |
|||
formRule: { |
|||
beginDate: [{ required: true, trigger: ['blur','change'], message: "不可为空" }], |
|||
endDate: [{ required: true, trigger: ['blur','change'], message: "不可为空" }], |
|||
// itemCode: [{ required: true, trigger: "blur", message: "不可为空" }], |
|||
}, |
|||
// table账单表头 |
|||
tableHeader:{ |
|||
beginDate: '', |
|||
endDate: '', |
|||
companyName:localStorage.getItem('companyName') |
|||
}, |
|||
// table标头 |
|||
tableTh:[ |
|||
{label:'物料信息',prop:'itemCode',width:180}, |
|||
{label:'ERP储位',prop:'erpLocatioCode',width:80}, |
|||
{label:'库位代码',prop:'locationCode',width:90}, |
|||
{label:'单号',prop:'number',width:170}, |
|||
{label:'创建时间',prop:'createDateTime',width:160}, |
|||
{label:'业务编号',prop:'docNumber',width:140}, |
|||
{label:'业务主类型',prop:'enumTransType',type:'filter',option:'TransTypeBase'}, |
|||
{label:'业务子类型',prop:'enumTransSubType',type:'filter',option:'transSubType'}, |
|||
{label:'对应接口',prop:'interFaceName',width:220}, |
|||
{label:'期初库存',prop:'firstQty'}, |
|||
{label:'入库',prop:'sumInQty'}, |
|||
{label:'出库',prop:'sumOutQty'}, |
|||
{label:'结存',prop:'nowQty'}, |
|||
{label:'期末库存',prop:'lastQty'}, |
|||
], |
|||
totalProps:['firstQty','lastQty','nowQty','sumInQty','sumOutQty'],// 小结显示的字段 |
|||
indexArray_item: [], //itemCode 存储所有合并的行号 |
|||
indexArray_erp: [], //erpLocatioCode 存储所有合并的行号 |
|||
indexArray_erp2: [], //locationCode 存储所有合并的行号 |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.getInterfaceCalendarList() |
|||
}, |
|||
methods:{ |
|||
// 格式化时间 |
|||
formatTime(data){ |
|||
// return data.slice(0,scope.row.level4.createDateTime.indexOf('T') |
|||
return formatTimeStrToStr(data) |
|||
}, |
|||
// 获取账期下拉 |
|||
getInterfaceCalendarList(){ |
|||
this.calendarLoading = true |
|||
let _data = { |
|||
condition: { |
|||
filters: [] |
|||
}, |
|||
Sorting: "code DESC", |
|||
SkipCount: 0, |
|||
MaxResultCount: 1000 |
|||
} |
|||
getInterfaceCalendar(_data).then(res => { |
|||
this.calendarList=res.items |
|||
this.calendarLoading = false |
|||
}).catch(err => { |
|||
this.calendarLoading = false |
|||
}) |
|||
}, |
|||
// 账期更改 |
|||
calendarChange(id){ |
|||
let _item = this.calendarList.filter(item=>{ |
|||
return item.id == id |
|||
})[0] |
|||
this.searchForm.beginDate = _item.beginTime |
|||
this.searchForm.endDate = _item.endTime |
|||
}, |
|||
// 时间更改 |
|||
timeChange(data){ |
|||
if(data){ |
|||
this.searchForm.interfaceCalendar = "" |
|||
} |
|||
}, |
|||
// 查询事件 |
|||
searchHandle(){ |
|||
this.$refs.searchForm.validate((valid) => { |
|||
if (valid) { |
|||
this.getTableData() |
|||
} else { |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 年月转义 |
|||
getYearMonth(date){ |
|||
return date.replaceAll('-',"").slice(0,8) |
|||
}, |
|||
// 获取当前时间 |
|||
getNow(){ |
|||
return formatTimeStampToNorm(new Date(),'date') |
|||
}, |
|||
// 表格数据转义 |
|||
initTableData(res){ |
|||
let _list = [] |
|||
res.forEach(item1 => { |
|||
// item1.cellLength = 0 |
|||
item1.reportErpLocationSerialDtos.forEach((item2,index2) => { |
|||
item2.reportLocationSerialDtos.forEach((item3,index3)=>{ |
|||
// 如果有第四层 |
|||
if(item3.reportTransactionSerialDtos && item3.reportTransactionSerialDtos.length > 0){ |
|||
item3.reportTransactionSerialDtos.forEach((item4,index4)=>{ |
|||
let _item = { |
|||
level1:item1, |
|||
level2:item2, |
|||
level3:item3, |
|||
level4:item4, |
|||
} |
|||
_list.push(_item) |
|||
// item1.cellLength ++ |
|||
// 如果有第四层添加库位小计 |
|||
if(index4 == item3.reportTransactionSerialDtos.length - 1){ |
|||
_list.push({ |
|||
level1:item1, |
|||
level2:item2, |
|||
level3:item3, |
|||
level4:item4, |
|||
total_erp2:item3 |
|||
}) |
|||
// item1.cellLength ++ |
|||
} |
|||
}) |
|||
}else{ |
|||
let _item = { |
|||
level1:item1, |
|||
level2:item2, |
|||
level3:item3, |
|||
} |
|||
_list.push(_item) |
|||
item1.cellLength ++ |
|||
// 如果没有第四层添加库位小计 |
|||
// if(index3 == item2.reportLocationSerialDtos.length - 1){ |
|||
_list.push({ |
|||
level1:item1, |
|||
level2:item2, |
|||
level3:item3, |
|||
total_erp2:item3 |
|||
}) |
|||
item1.cellLength ++ |
|||
// } |
|||
} |
|||
// 添加储位小计 |
|||
if(index3 == item2.reportLocationSerialDtos.length - 1){ |
|||
_list.push({ |
|||
level1:item1, |
|||
level2:item2, |
|||
// level3:item3, |
|||
level3:{locationCode:null}, |
|||
total_erp:item2, |
|||
}) |
|||
// item1.cellLength ++ |
|||
} |
|||
}) |
|||
// 添加物料小计 |
|||
if(index2 == item1.reportErpLocationSerialDtos.length - 1){ |
|||
_list.push({ |
|||
level1:item1, |
|||
// level2:item2, |
|||
// level3:{locationCode:null}, |
|||
level2:{erpLocatioCode:null}, |
|||
level3:{locationCode:null},//此处为了合并单元格做模拟locationCode处理 |
|||
total_item:item1, |
|||
}) |
|||
// item1.cellLength ++ |
|||
} |
|||
}) |
|||
}); |
|||
return _list |
|||
}, |
|||
// 格式化结束时间(格式：T23:59:59) |
|||
initEndTime(data){ |
|||
let _time = "" |
|||
if(data.indexOf('T') >= 0){ |
|||
_time = data.slice(0,data.indexOf('T')) + 'T23:59:59' |
|||
}else{ |
|||
_time = data + 'T23:59:59' |
|||
} |
|||
return _time |
|||
}, |
|||
// 获取表格数据 |
|||
getTableData(){ |
|||
this.loading = true |
|||
let _itemCodes = this.searchForm.itemCode ? this.searchForm.itemCode.split(',') : [] |
|||
|
|||
getInventoryTransactionSerials( |
|||
`wms/inventory/inventory-transaction/item-serial-list?startDateTime=${this.searchForm.beginDate}&endDateTime=${this.initEndTime(this.searchForm.endDate)}&erpLocationCode=${this.searchForm.erpLocatioCode}`, |
|||
_itemCodes |
|||
).then(res => { |
|||
this.tableData = null |
|||
this.tableHeader.beginDate = this.searchForm.beginDate |
|||
this.tableHeader.endDate = this.searchForm.endDate |
|||
console.log(res) |
|||
this.$nextTick(() => { |
|||
this.tableData = this.initTableData(res) |
|||
// this.getIndexArr() |
|||
this.loading = false |
|||
}) |
|||
}).catch(err => { |
|||
this.loading = false |
|||
}) |
|||
}, |
|||
// 样式class |
|||
tableRowClass(data){ |
|||
if(data.row.total_erp2){ |
|||
return "totalRow" |
|||
} |
|||
if(data.row.total_erp){ |
|||
return "totalRow-red" |
|||
} |
|||
if(data.row.total_item){ |
|||
return "totalRow-green" |
|||
} |
|||
}, |
|||
// 获取合并单元格行 |
|||
getIndexArr(){ |
|||
// 合并 itemCode |
|||
let count_item = 0 |
|||
// console.log(357,this.tableData) |
|||
for (let rowIndex = 0; rowIndex < this.tableData.length; ) { |
|||
this.indexArray_item.push(rowIndex) |
|||
count_item = this.getRows(rowIndex, this.tableData[rowIndex].level1.itemCode,'itemCode','level1') |
|||
rowIndex += count_item |
|||
} |
|||
// console.log(362,this.indexArray_item) |
|||
|
|||
// // 合并 erpLocatioCode |
|||
// let count_erp = 0 |
|||
// for (let rowIndex = 0; rowIndex < this.tableData.length; ) { |
|||
// this.indexArray_erp.push(rowIndex) |
|||
// count_erp = this.getRows(rowIndex, this.tableData[rowIndex].level2.erpLocatioCode,'erpLocatioCode','level2') |
|||
// rowIndex += count_erp |
|||
// } |
|||
|
|||
// // 合并 locationCode |
|||
// let count_erp2 = 0 |
|||
// for (let rowIndex = 0; rowIndex < this.tableData.length; ) { |
|||
// this.indexArray_erp2.push(rowIndex) |
|||
// count_erp2 = this.getRows(rowIndex, this.tableData[rowIndex].level3.locationCode,'locationCode','level3') |
|||
// rowIndex += count_erp2 |
|||
// } |
|||
}, |
|||
// 获取合并单元格行数 |
|||
getRows(rowIndex, name,prop,level) { |
|||
let count = 0 |
|||
for (let i = rowIndex; i < this.tableData.length; i++) { |
|||
if (this.tableData[i][level][prop] == name) { |
|||
count++ |
|||
} else { |
|||
break |
|||
} |
|||
} |
|||
return count |
|||
}, |
|||
// 合并单元格 |
|||
verticalMergeCell({ row, column, rowIndex, columnIndex }) { |
|||
// 合并 itemCode |
|||
if (columnIndex == 0) { |
|||
let rowCount = 0 |
|||
if (this.indexArray_item.includes(rowIndex)) { |
|||
// console.log('length',rowIndex,this.tableData.length) |
|||
// rowCount = this.getRows(rowIndex, row.level1.itemCode, 'itemCode','level1') |
|||
rowCount = row.level1.cellLength |
|||
// console.log(390,rowCount) |
|||
return { |
|||
rowspan: rowCount, |
|||
colspan: 1 |
|||
} |
|||
} else { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0 |
|||
} |
|||
} |
|||
} |
|||
// 合并 erpLocatioCode |
|||
// if (columnIndex == 1) { |
|||
// let rowCount = 0 |
|||
// if (this.indexArray_erp.includes(rowIndex)) { |
|||
// rowCount = this.getRows(rowIndex, this.tableData[rowIndex].level2.erpLocatioCode,'erpLocatioCode','level2') |
|||
// return { |
|||
// rowspan: rowCount, |
|||
// colspan: 1 |
|||
// } |
|||
// } else { |
|||
// return { |
|||
// rowspan: 0, |
|||
// colspan: 0 |
|||
// } |
|||
// } |
|||
// } |
|||
// // 合并 locationCode |
|||
// if (columnIndex == 2) { |
|||
// let rowCount = 0 |
|||
// if (this.indexArray_erp2.includes(rowIndex)) { |
|||
// rowCount = this.getRows(rowIndex, this.tableData[rowIndex].level3.locationCode,'locationCode','level3') |
|||
// return { |
|||
// rowspan: rowCount, |
|||
// colspan: 1 |
|||
// } |
|||
// } else { |
|||
// return { |
|||
// rowspan: 0, |
|||
// colspan: 0 |
|||
// } |
|||
// } |
|||
// } |
|||
}, |
|||
// 转义【对应接口】 |
|||
getInterFaceName(item){ |
|||
let _str = "" |
|||
if (item.enumTransType == 11) { |
|||
_str = '【TYRP】-【采购单】' |
|||
} else if (item.enumTransType == 12) { |
|||
_str = '【TYRP】-【采购退货单】*【EOS】-【退货单】' |
|||
} else if (item.enumTransType == 14 && item.enumTransSubType == 4401) { |
|||
_str = '【TYRP】-【验收单】*【EOS】-【验收单】' |
|||
} else if (item.enumTransType == 14 && item.enumTransSubType == 4401) { |
|||
_str = '【TYRP】-【储位、线边仓调拨单 和 客户储位调拨单】' |
|||
} else if (item.enumTransType == 15 && item.enumTransSubType == 1505) { |
|||
_str = '【TYRP】-【线边仓领料单】*【MES】-【发料单】' |
|||
} else if (item.enumTransType == 15 && item.enumTransSubType == 1501) { |
|||
_str = '【TYRP】-【线边仓领料单】*【MES】-【发料单】' |
|||
} else if (item.enumTransType == 16) { |
|||
_str = '【TYRP】-【线边仓退料单】' |
|||
} else if (item.enumTransType == 31 && item.enumTransSubType == 3102) { |
|||
_str = '【TYRP】-【储位、线边仓调拨单 和 客户储位调拨单】' |
|||
} else if (item.enumTransType == 31 && item.enumTransSubType == 3104) { |
|||
_str = '【TYRP】-【储位、线边仓调拨单 和 客户储位调拨单】' |
|||
} else if (item.enumTransType == 31 && item.enumTransSubType == 3105) { |
|||
_str = '【TYRP】-【储位、线边仓调拨单 和 客户储位调拨单】' |
|||
} else if (item.enumTransType == 21) { |
|||
_str = '【TYRP】-【缴库单】' |
|||
} else if (item.enumTransType == 23 && item.enumTransSubType == 2302) { |
|||
_str = '【TYRP】-【出货单】' |
|||
} else if (item.enumTransType == 23 && item.enumTransSubType == 2303) { |
|||
_str = '【TYRP】-【出货单】' |
|||
} else if (item.enumTransType == 23) { |
|||
_str = '【TYRP】-【非生产领料单】' |
|||
} else if (item.enumTransType == 33 && item.enumTransSubType == 0) { |
|||
_str = '【TYRP】-【非生产退料】' |
|||
} else if (item.enumTransType == 33 && item.enumTransSubType == 3301) { |
|||
_str = '【TYRP】-【回收料入库单】' |
|||
} else if (item.enumTransType == 22) { |
|||
_str = '【TYRP】-【退拆单】' |
|||
} else if (item.enumTransType == 37 && item.enumTransSubType == 0) { |
|||
_str = '【TYRP】-【盘点调整单】' |
|||
} else if (item.enumTransType == 37 && item.enumTransSubType == 3701) { |
|||
_str = '【TYRP】-【线边仓调整单】' |
|||
} else if (item.enumTransType == 38 && item.enumTransSubType == 3302) { |
|||
_str = '【TYRP】-【回收料调整单】' |
|||
} else if (item.enumTransType == 36) { |
|||
_str = '【TYRP】-【报废单、线边仓报废单】' |
|||
} else { |
|||
_str = '' |
|||
} |
|||
return _str |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.InventoryBookDetail_innerPage{ |
|||
background: #fff; |
|||
height: 100%; |
|||
|
|||
.searchHeader{ |
|||
background: #f1f1f1; |
|||
padding: 20px 30px 0; |
|||
border-bottom: 1px solid #dbdbdb; |
|||
|
|||
.el-form-item{ |
|||
margin-right: 25px !important; |
|||
} |
|||
.el-button{ |
|||
background: #205f78 !important; |
|||
border-color: #ddd; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
.el-form-item__label{ |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.el-input__inner{ |
|||
border-radius: 0px !important; |
|||
background: #ddd !important; |
|||
} |
|||
|
|||
.el-input__inner:focus, |
|||
.el-input__inner:hover{ |
|||
border-color: #ddd; |
|||
} |
|||
} |
|||
|
|||
.tableHeader{ |
|||
list-style: none; |
|||
text-align: center; |
|||
height: 80px; |
|||
overflow: hidden; |
|||
margin: 10px 0; |
|||
|
|||
.tableName{ |
|||
letter-spacing: 10px; |
|||
border-bottom: #333 solid 1px; |
|||
padding: 0 15px; |
|||
font-size: 18px; |
|||
} |
|||
|
|||
.timeLi{ |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.item{ |
|||
margin: 0 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tableEl{ |
|||
width: 100%; |
|||
margin: 0px auto; |
|||
// background: transparent !important; |
|||
|
|||
.el-table__cell{ |
|||
vertical-align: initial !important; |
|||
padding: 5px 0 !important; |
|||
background: transparent !important; |
|||
} |
|||
|
|||
tr{ |
|||
background: transparent !important; |
|||
border: none !important; |
|||
} |
|||
|
|||
th.el-table__cell{ |
|||
padding: 0 !important; |
|||
color: #000 !important; |
|||
border: none !important; |
|||
border-bottom: #333 solid 1px !important; |
|||
.cell{ |
|||
vertical-align: bottom !important; |
|||
} |
|||
} |
|||
|
|||
td{ |
|||
border: none !important; |
|||
color: #000 !important; |
|||
} |
|||
|
|||
.totalRow{ |
|||
td{ |
|||
border-top: blue dashed 1px !important; |
|||
} |
|||
} |
|||
|
|||
.totalRow-red{ |
|||
td{ |
|||
border-top: #ff6000 solid 1px !important; |
|||
} |
|||
} |
|||
.totalRow-green{ |
|||
td{ |
|||
border-top: #24b924 solid 1px !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,601 @@ |
|||
<template> |
|||
<div class="InventoryBookDetail_innerPage_old" v-loading="loading"> |
|||
<!-- 修改前 --> |
|||
<!-- 搜索 --> |
|||
<el-form ref="searchForm" :inline="true" :rules="formRule" :model="searchForm" size="small" class="searchHeader"> |
|||
<el-form-item label="ERP储位" prop="erpLocatioCode"> |
|||
<el-input v-model="searchForm.erpLocatioCode" placeholder="请输入ERP储位"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="零件" prop="itemCode"> |
|||
<el-input v-model="searchForm.itemCode" placeholder="请输入零件"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="账期" prop="interfaceCalendar"> |
|||
<el-select |
|||
:loading="calendarLoading" |
|||
@change="calendarChange" |
|||
v-model="searchForm.interfaceCalendar" |
|||
placeholder="请选择账期" |
|||
> |
|||
<el-option |
|||
v-for="item in calendarList" |
|||
:key="item.id" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="开始时间" prop="beginDate"> |
|||
<el-date-picker |
|||
@change="timeChange" |
|||
value-format="yyyy-MM-dd" |
|||
v-model="searchForm.beginDate" |
|||
type="date" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="结束时间" prop="endDate"> |
|||
<el-date-picker |
|||
@change="timeChange" |
|||
value-format="yyyy-MM-dd" |
|||
v-model="searchForm.endDate" |
|||
type="date" |
|||
placeholder="选择日期"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item> |
|||
<el-button type="primary" @click="searchHandle">查询</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<!-- table --> |
|||
<div class="tableContent" v-if="tableData"> |
|||
<ul class="tableHeader"> |
|||
<li>{{tableHeader.companyName}}</li> |
|||
<li><span class="tableName">库存流水帐 (料品)</span></li> |
|||
<li class="timeLi"> |
|||
<div class="item">交易年月: {{ getYearMonth(tableHeader.beginDate) }} - {{ getYearMonth(tableHeader.endDate) }}</div> |
|||
<div class="item">制表日期：{{ getNow() }}</div> |
|||
</li> |
|||
</ul> |
|||
<el-table |
|||
:data="tableData" |
|||
class="tableEl" |
|||
height="calc(100vh - 180px)" |
|||
:span-method="verticalMergeCell" |
|||
:row-class-name="tableRowClass" |
|||
> |
|||
<!-- <el-table-column type="index" label="序号"></el-table-column> --> |
|||
<el-table-column |
|||
v-for="(item,key) in tableTh" |
|||
:prop="item.prop" |
|||
:label="item.label" |
|||
:align="item.prop.toLowerCase().indexOf('qty') >= 0 ? 'right' : 'left'" |
|||
:width="item.width" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<div v-if="scope.row.total_erp || scope.row.total_erp2 || scope.row.total_item"> |
|||
<div v-if="scope.row.total_erp2"> |
|||
<span v-if="totalProps[0] == item.prop" style="color: blue;font-weight:bold">库位小计：</span> |
|||
<span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_erp2[item.prop]}}</span> |
|||
</div> |
|||
<div v-if="scope.row.total_erp"> |
|||
<span v-if="totalProps[0] == item.prop" style="color: #ff6000;font-weight:bold">储位小计：</span> |
|||
<span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_erp[item.prop]}}</span> |
|||
</div> |
|||
<div v-if="scope.row.total_item"> |
|||
<span v-if="totalProps[0] == item.prop" style="color: #24b924;font-weight:bold">物料小计：</span> |
|||
<span v-if="totalProps.indexOf(item.prop) >= 0">{{scope.row.total_item[item.prop]}}</span> |
|||
</div> |
|||
</div> |
|||
<div v-else> |
|||
<div v-if="item.prop == 'itemCode'"> |
|||
<div>物料代码:<br/>【{{ scope.row.level1[item.prop] }}】</div> |
|||
<br/> |
|||
<div>物料名称:<br/>【{{ scope.row.level1.itemName }}】</div> |
|||
<br/> |
|||
<div>物料描述1:<br/>【{{ scope.row.level1.itemDesc1 }}】</div> |
|||
<br/> |
|||
<div v-if="scope.row.level1.configuration">配置码:<br/>【{{ scope.row.level1.configuration }}】</div> |
|||
</div> |
|||
<div v-else-if="item.prop == 'erpLocatioCode'">{{ scope.row.level2[item.prop] }}</div> |
|||
<div v-else> |
|||
<div v-if="scope.row.level4"> |
|||
<div v-if="item.prop == 'sumInQty'">{{ scope.row.level4.inQty }}</div> |
|||
<div v-else-if="item.prop == 'sumOutQty'">{{ scope.row.level4.outQty }}</div> |
|||
<div v-else-if="item.prop == 'createDateTime'">{{ formatTime(scope.row.level4.createDateTime) }}</div> |
|||
<div v-else-if="item.prop == 'locationCode'">{{ scope.row.level4.locatioCode }}</div> |
|||
<div v-else-if="item.prop == 'interFaceName'">{{getInterFaceName(scope.row.level4)}}</div> |
|||
<div v-else-if="item.prop == 'enumTransType' || item.prop == 'enumTransSubType'">{{ scope.row.level4[item.prop] | trigger(item.option, "label") }}</div> |
|||
<div v-else>{{ scope.row.level4[item.prop] }}</div> |
|||
</div> |
|||
<div v-else>{{ scope.row.level3[item.prop] }}</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getInventoryTransactionSerials,getInterfaceCalendar } from '@/api/wms-api' |
|||
import { formatTimeStampToNorm,formatTimeStrToStr } from '@/utils/formatTime' |
|||
|
|||
export default { |
|||
name:"InventoryBookDetail_innerPage_old", |
|||
data(){ |
|||
return{ |
|||
loading:false,//页面加载 |
|||
calendarLoading:false,//账期下拉加载 |
|||
tableData:null,//table数据 |
|||
calendarList:[],//账期下拉列表 |
|||
// 查询字段 |
|||
searchForm:{ |
|||
interfaceCalendar:null, |
|||
erpLocatioCode:null, |
|||
itemCode:null,//VW316C1A028A,UTT06PP5483 |
|||
beginDate: '',//2021-10-01 |
|||
endDate: '',//2023-11-28T23:59:59 |
|||
}, |
|||
// 查询必填项 |
|||
formRule: { |
|||
beginDate: [{ required: true, trigger: ['blur','change'], message: "不可为空" }], |
|||
endDate: [{ required: true, trigger: ['blur','change'], message: "不可为空" }], |
|||
// itemCode: [{ required: true, trigger: "blur", message: "不可为空" }], |
|||
}, |
|||
// table账单表头 |
|||
tableHeader:{ |
|||
beginDate: '', |
|||
endDate: '', |
|||
companyName:localStorage.getItem('companyName') |
|||
}, |
|||
// table标头 |
|||
tableTh:[ |
|||
{label:'物料信息',prop:'itemCode',width:180}, |
|||
{label:'ERP储位',prop:'erpLocatioCode',width:80}, |
|||
{label:'库位代码',prop:'locationCode',width:90}, |
|||
{label:'单号',prop:'number',width:170}, |
|||
{label:'创建时间',prop:'createDateTime',width:160}, |
|||
{label:'业务编号',prop:'docNumber',width:140}, |
|||
{label:'业务主类型',prop:'enumTransType',type:'filter',option:'TransTypeBase'}, |
|||
{label:'业务子类型',prop:'enumTransSubType',type:'filter',option:'transSubType'}, |
|||
{label:'对应接口',prop:'interFaceName',width:220}, |
|||
{label:'期初库存',prop:'firstQty'}, |
|||
{label:'入库',prop:'sumInQty'}, |
|||
{label:'出库',prop:'sumOutQty'}, |
|||
{label:'结存',prop:'nowQty'}, |
|||
{label:'期末库存',prop:'lastQty'}, |
|||
], |
|||
totalProps:['firstQty','lastQty','nowQty','sumInQty','sumOutQty'],// 小结显示的字段 |
|||
indexArray_item: [], //itemCode 存储所有合并的行号 |
|||
indexArray_erp: [], //erpLocatioCode 存储所有合并的行号 |
|||
indexArray_erp2: [], //locationCode 存储所有合并的行号 |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.getInterfaceCalendarList() |
|||
}, |
|||
methods:{ |
|||
// 格式化时间 |
|||
formatTime(data){ |
|||
// return data.slice(0,scope.row.level4.createDateTime.indexOf('T') |
|||
return formatTimeStrToStr(data) |
|||
}, |
|||
// 获取账期下拉 |
|||
getInterfaceCalendarList(){ |
|||
this.calendarLoading = true |
|||
let _data = { |
|||
condition: { |
|||
filters: [] |
|||
}, |
|||
Sorting: "code DESC", |
|||
SkipCount: 0, |
|||
MaxResultCount: 1000 |
|||
} |
|||
getInterfaceCalendar(_data).then(res => { |
|||
this.calendarList=res.items |
|||
this.calendarLoading = false |
|||
}).catch(err => { |
|||
this.calendarLoading = false |
|||
}) |
|||
}, |
|||
// 账期更改 |
|||
calendarChange(id){ |
|||
let _item = this.calendarList.filter(item=>{ |
|||
return item.id == id |
|||
})[0] |
|||
this.searchForm.beginDate = _item.beginTime |
|||
this.searchForm.endDate = _item.endTime |
|||
}, |
|||
// 时间更改 |
|||
timeChange(data){ |
|||
if(data){ |
|||
this.searchForm.interfaceCalendar = "" |
|||
} |
|||
}, |
|||
// 查询事件 |
|||
searchHandle(){ |
|||
this.$refs.searchForm.validate((valid) => { |
|||
if (valid) { |
|||
this.getTableData() |
|||
} else { |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
// 年月转义 |
|||
getYearMonth(date){ |
|||
return date.replaceAll('-',"").slice(0,8) |
|||
}, |
|||
// 获取当前时间 |
|||
getNow(){ |
|||
return formatTimeStampToNorm(new Date(),'date') |
|||
}, |
|||
// 表格数据转义 |
|||
initTableData(res){ |
|||
let _list = [] |
|||
res.forEach(item1 => { |
|||
item1.reportErpLocationSerialDtos.forEach((item2,index2) => { |
|||
item2.reportLocationSerialDtos.forEach((item3,index3)=>{ |
|||
// 如果有第四层 |
|||
if(item3.reportTransactionSerialDtos && item3.reportTransactionSerialDtos.length > 0){ |
|||
item3.reportTransactionSerialDtos.forEach((item4,index4)=>{ |
|||
let _item = { |
|||
level1:item1, |
|||
level2:item2, |
|||
level3:item3, |
|||
level4:item4, |
|||
} |
|||
_list.push(_item) |
|||
// 如果有第四层添加库位小计 |
|||
if(index4 == item3.reportTransactionSerialDtos.length - 1){ |
|||
_list.push({ |
|||
level1:item1, |
|||
level2:item2, |
|||
level3:item3, |
|||
level4:item4, |
|||
total_erp2:item3 |
|||
}) |
|||
} |
|||
}) |
|||
}else{ |
|||
let _item = { |
|||
level1:item1, |
|||
level2:item2, |
|||
level3:item3, |
|||
} |
|||
_list.push(_item) |
|||
// 如果没有第四层添加库位小计 |
|||
// if(index3 == item2.reportLocationSerialDtos.length - 1){ |
|||
_list.push({ |
|||
level1:item1, |
|||
level2:item2, |
|||
level3:item3, |
|||
total_erp2:item3 |
|||
}) |
|||
// } |
|||
} |
|||
// 添加储位小计 |
|||
if(index3 == item2.reportLocationSerialDtos.length - 1){ |
|||
_list.push({ |
|||
level1:item1, |
|||
level2:item2, |
|||
// level3:item3, |
|||
level3:{locationCode:null}, |
|||
total_erp:item2, |
|||
}) |
|||
} |
|||
}) |
|||
// 添加物料小计 |
|||
if(index2 == item1.reportErpLocationSerialDtos.length - 1){ |
|||
_list.push({ |
|||
level1:item1, |
|||
// level2:item2, |
|||
// level3:{locationCode:null}, |
|||
level2:{erpLocatioCode:null}, |
|||
level3:{locationCode:null},//此处为了合并单元格做模拟locationCode处理 |
|||
total_item:item1, |
|||
}) |
|||
} |
|||
}) |
|||
}); |
|||
return _list |
|||
}, |
|||
// 格式化结束时间(格式：T23:59:59) |
|||
initEndTime(data){ |
|||
let _time = "" |
|||
if(data.indexOf('T') >= 0){ |
|||
_time = data.slice(0,data.indexOf('T')) + 'T23:59:59' |
|||
}else{ |
|||
_time = data + 'T23:59:59' |
|||
} |
|||
return _time |
|||
}, |
|||
// 获取表格数据 |
|||
getTableData(){ |
|||
this.loading = true |
|||
let _itemCodes = this.searchForm.itemCode ? this.searchForm.itemCode.split(',') : [] |
|||
// getInventoryTransactionSerials( |
|||
// _itemCodes,{ |
|||
// startDateTime:this.searchForm.beginDate, |
|||
// endDateTime:this.initEndTime(this.searchForm.endDate), |
|||
// erpLocatioCode:this.searchForm.erpLocatioCode, |
|||
// }).then(res => { |
|||
getInventoryTransactionSerials( |
|||
`wms/inventory/inventory-transaction/item-serial-list?startDateTime=${this.searchForm.beginDate}&endDateTime=${this.initEndTime(this.searchForm.endDate)}&erpLocationCode=${this.searchForm.erpLocatioCode}`, |
|||
_itemCodes |
|||
).then(res => { |
|||
this.tableData = null |
|||
this.tableHeader.beginDate = this.searchForm.beginDate |
|||
this.tableHeader.endDate = this.searchForm.endDate |
|||
this.$nextTick(() => { |
|||
this.tableData = this.initTableData(res) |
|||
this.getIndexArr() |
|||
this.loading = false |
|||
}) |
|||
}).catch(err => { |
|||
this.loading = false |
|||
}) |
|||
}, |
|||
// 样式class |
|||
tableRowClass(data){ |
|||
if(data.row.total_erp2){ |
|||
return "totalRow" |
|||
} |
|||
if(data.row.total_erp){ |
|||
return "totalRow-red" |
|||
} |
|||
if(data.row.total_item){ |
|||
return "totalRow-green" |
|||
} |
|||
}, |
|||
// 获取合并单元格行 |
|||
getIndexArr(){ |
|||
// 合并 itemCode |
|||
let count_item = 0 |
|||
for (let rowIndex = 0; rowIndex < this.tableData.length; ) { |
|||
this.indexArray_item.push(rowIndex) |
|||
count_item = this.getRows(rowIndex, this.tableData[rowIndex].level1.itemCode,'itemCode','level1') |
|||
rowIndex += count_item |
|||
} |
|||
|
|||
// 合并 erpLocatioCode |
|||
let count_erp = 0 |
|||
for (let rowIndex = 0; rowIndex < this.tableData.length; ) { |
|||
this.indexArray_erp.push(rowIndex) |
|||
count_erp = this.getRows(rowIndex, this.tableData[rowIndex].level2.erpLocatioCode,'erpLocatioCode','level2') |
|||
rowIndex += count_erp |
|||
} |
|||
|
|||
// 合并 locationCode |
|||
let count_erp2 = 0 |
|||
for (let rowIndex = 0; rowIndex < this.tableData.length; ) { |
|||
this.indexArray_erp2.push(rowIndex) |
|||
count_erp2 = this.getRows(rowIndex, this.tableData[rowIndex].level3.locationCode,'locationCode','level3') |
|||
rowIndex += count_erp2 |
|||
} |
|||
}, |
|||
// 获取合并单元格行数 |
|||
getRows(rowIndex, name,prop,level) { |
|||
let count = 0 |
|||
for (let i = rowIndex; i < this.tableData.length; i++) { |
|||
if (this.tableData[i][level][prop] == name) { |
|||
count++ |
|||
} else { |
|||
break |
|||
} |
|||
} |
|||
return count |
|||
}, |
|||
// 合并单元格 |
|||
verticalMergeCell({ row, column, rowIndex, columnIndex }) { |
|||
// 合并 itemCode |
|||
if (columnIndex == 0) { |
|||
let rowCount = 0 |
|||
if (this.indexArray_item.includes(rowIndex)) { |
|||
rowCount = this.getRows(rowIndex, row.level1.itemCode, 'itemCode','level1') |
|||
return { |
|||
rowspan: rowCount, |
|||
colspan: 1 |
|||
} |
|||
} else { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0 |
|||
} |
|||
} |
|||
} |
|||
// 合并 erpLocatioCode |
|||
if (columnIndex == 1) { |
|||
let rowCount = 0 |
|||
if (this.indexArray_erp.includes(rowIndex)) { |
|||
rowCount = this.getRows(rowIndex, this.tableData[rowIndex].level2.erpLocatioCode,'erpLocatioCode','level2') |
|||
return { |
|||
rowspan: rowCount, |
|||
colspan: 1 |
|||
} |
|||
} else { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0 |
|||
} |
|||
} |
|||
} |
|||
// 合并 locationCode |
|||
if (columnIndex == 2) { |
|||
let rowCount = 0 |
|||
if (this.indexArray_erp2.includes(rowIndex)) { |
|||
rowCount = this.getRows(rowIndex, this.tableData[rowIndex].level3.locationCode,'locationCode','level3') |
|||
return { |
|||
rowspan: rowCount, |
|||
colspan: 1 |
|||
} |
|||
} else { |
|||
return { |
|||
rowspan: 0, |
|||
colspan: 0 |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
// 转义【对应接口】 |
|||
getInterFaceName(item){ |
|||
let _str = "" |
|||
if (item.enumTransType == 11) { |
|||
_str = '【TYRP】-【采购单】' |
|||
} else if (item.enumTransType == 12) { |
|||
_str = '【TYRP】-【采购退货单】*【EOS】-【退货单】' |
|||
} else if (item.enumTransType == 14 && item.enumTransSubType == 4401) { |
|||
_str = '【TYRP】-【验收单】*【EOS】-【验收单】' |
|||
} else if (item.enumTransType == 14 && item.enumTransSubType == 4401) { |
|||
_str = '【TYRP】-【储位、线边仓调拨单 和 客户储位调拨单】' |
|||
} else if (item.enumTransType == 15 && item.enumTransSubType == 1505) { |
|||
_str = '【TYRP】-【线边仓领料单】*【MES】-【发料单】' |
|||
} else if (item.enumTransType == 15 && item.enumTransSubType == 1501) { |
|||
_str = '【TYRP】-【线边仓领料单】*【MES】-【发料单】' |
|||
} else if (item.enumTransType == 16) { |
|||
_str = '【TYRP】-【线边仓退料单】' |
|||
} else if (item.enumTransType == 31 && item.enumTransSubType == 3102) { |
|||
_str = '【TYRP】-【储位、线边仓调拨单 和 客户储位调拨单】' |
|||
} else if (item.enumTransType == 31 && item.enumTransSubType == 3104) { |
|||
_str = '【TYRP】-【储位、线边仓调拨单 和 客户储位调拨单】' |
|||
} else if (item.enumTransType == 31 && item.enumTransSubType == 3105) { |
|||
_str = '【TYRP】-【储位、线边仓调拨单 和 客户储位调拨单】' |
|||
} else if (item.enumTransType == 21) { |
|||
_str = '【TYRP】-【缴库单】' |
|||
} else if (item.enumTransType == 23 && item.enumTransSubType == 2302) { |
|||
_str = '【TYRP】-【出货单】' |
|||
} else if (item.enumTransType == 23 && item.enumTransSubType == 2303) { |
|||
_str = '【TYRP】-【出货单】' |
|||
} else if (item.enumTransType == 23) { |
|||
_str = '【TYRP】-【非生产领料单】' |
|||
} else if (item.enumTransType == 33 && item.enumTransSubType == 0) { |
|||
_str = '【TYRP】-【非生产退料】' |
|||
} else if (item.enumTransType == 33 && item.enumTransSubType == 3301) { |
|||
_str = '【TYRP】-【回收料入库单】' |
|||
} else if (item.enumTransType == 22) { |
|||
_str = '【TYRP】-【退拆单】' |
|||
} else if (item.enumTransType == 37 && item.enumTransSubType == 0) { |
|||
_str = '【TYRP】-【盘点调整单】' |
|||
} else if (item.enumTransType == 37 && item.enumTransSubType == 3701) { |
|||
_str = '【TYRP】-【线边仓调整单】' |
|||
} else if (item.enumTransType == 38 && item.enumTransSubType == 3302) { |
|||
_str = '【TYRP】-【回收料调整单】' |
|||
} else if (item.enumTransType == 36) { |
|||
_str = '【TYRP】-【报废单、线边仓报废单】' |
|||
} else { |
|||
_str = '' |
|||
} |
|||
return _str |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss"> |
|||
.InventoryBookDetail_innerPage_old{ |
|||
background: #fff; |
|||
height: 100%; |
|||
|
|||
.searchHeader{ |
|||
background: #f1f1f1; |
|||
padding: 20px 30px 0; |
|||
border-bottom: 1px solid #dbdbdb; |
|||
|
|||
.el-form-item{ |
|||
margin-right: 25px !important; |
|||
} |
|||
.el-button{ |
|||
background: #205f78 !important; |
|||
border-color: #ddd; |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
.el-form-item__label{ |
|||
font-weight: normal; |
|||
} |
|||
|
|||
.el-input__inner{ |
|||
border-radius: 0px !important; |
|||
background: #ddd !important; |
|||
} |
|||
|
|||
.el-input__inner:focus, |
|||
.el-input__inner:hover{ |
|||
border-color: #ddd; |
|||
} |
|||
} |
|||
|
|||
.tableHeader{ |
|||
list-style: none; |
|||
text-align: center; |
|||
height: 80px; |
|||
overflow: hidden; |
|||
margin: 10px 0; |
|||
|
|||
.tableName{ |
|||
letter-spacing: 10px; |
|||
border-bottom: #333 solid 1px; |
|||
padding: 0 15px; |
|||
font-size: 18px; |
|||
} |
|||
|
|||
.timeLi{ |
|||
display: flex; |
|||
justify-content: center; |
|||
|
|||
.item{ |
|||
margin: 0 10px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.tableEl{ |
|||
width: 100%; |
|||
margin: 0px auto; |
|||
// background: transparent !important; |
|||
|
|||
.el-table__cell{ |
|||
vertical-align: initial !important; |
|||
padding: 5px 0 !important; |
|||
background: transparent !important; |
|||
} |
|||
|
|||
tr{ |
|||
background: transparent !important; |
|||
border: none !important; |
|||
} |
|||
|
|||
th.el-table__cell{ |
|||
padding: 0 !important; |
|||
color: #000 !important; |
|||
border: none !important; |
|||
border-bottom: #333 solid 1px !important; |
|||
.cell{ |
|||
vertical-align: bottom !important; |
|||
} |
|||
} |
|||
|
|||
td{ |
|||
border: none !important; |
|||
color: #000 !important; |
|||
} |
|||
|
|||
.totalRow{ |
|||
td{ |
|||
border-top: blue dashed 1px !important; |
|||
} |
|||
} |
|||
|
|||
.totalRow-red{ |
|||
td{ |
|||
border-top: #ff6000 solid 1px !important; |
|||
} |
|||
} |
|||
.totalRow-green{ |
|||
td{ |
|||
border-top: #24b924 solid 1px !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
@ -0,0 +1,78 @@ |
|||
<template> |
|||
<div> |
|||
<el-table |
|||
:data="tableData1" |
|||
style="width: 100%" |
|||
row-key="id" |
|||
border |
|||
lazy |
|||
:load="load" |
|||
> |
|||
<el-table-column |
|||
prop="date" |
|||
label="日期" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="name" |
|||
label="姓名" |
|||
width="180"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="address" |
|||
label="地址"> |
|||
</el-table-column> |
|||
</el-table> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name:"ceshi", |
|||
data(){ |
|||
return { |
|||
tableData1: [{ |
|||
id: 1, |
|||
date: '2016-05-02', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1518 弄' |
|||
}, { |
|||
id: 2, |
|||
date: '2016-05-04', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1517 弄' |
|||
}, { |
|||
id: 3, |
|||
date: '2016-05-01', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1519 弄', |
|||
hasChildren: true |
|||
}, { |
|||
id: 4, |
|||
date: '2016-05-03', |
|||
name: '王小虎', |
|||
address: '上海市普陀区金沙江路 1516 弄' |
|||
}] |
|||
} |
|||
}, |
|||
methods: { |
|||
load(tree, treeNode, resolve) { |
|||
// setTimeout(() => { |
|||
// resolve([ |
|||
// { |
|||
// id: 31, |
|||
// date: '2016-05-01', |
|||
// name: '王小虎', |
|||
// address: '上海市普陀区金沙江路 1519 弄' |
|||
// }, { |
|||
// id: 32, |
|||
// date: '2016-05-01', |
|||
// name: '王小虎', |
|||
// address: '上海市普陀区金沙江路 1519 弄' |
|||
// } |
|||
// ]) |
|||
// }, 1000) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
Loading…
Reference in new issue