panxinyu-YUYwp
1 week ago
2 changed files with 376 additions and 0 deletions
@ -0,0 +1,364 @@ |
|||||
|
<template> |
||||
|
<div class="mod-config yzz"> |
||||
|
<!-- 出入库记录 --> |
||||
|
<div class="trans-section"> |
||||
|
<p class="section-title">出入库记录</p> |
||||
|
<el-form :inline="true" label-position="top" style="margin-top: 0px"> |
||||
|
<el-form-item label="工厂编码"> |
||||
|
<el-input v-model="headerSearch.site" style="width: 100px" clearable/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="出入库单号"> |
||||
|
<el-input v-model="headerSearch.transNo" style="width: 160px" clearable/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="出入库类型"> |
||||
|
<el-select v-model="headerSearch.transType" style="width: 160px" clearable placeholder="全部"> |
||||
|
<el-option label="全部" value=""/> |
||||
|
<el-option |
||||
|
v-for="item in transTypeOptions" |
||||
|
:key="item" |
||||
|
:label="item" |
||||
|
:value="item"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="经手人"> |
||||
|
<el-input v-model="headerSearch.receiver" style="width: 120px" clearable/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label=" "> |
||||
|
<el-button type="primary" @click="searchHeader()" :loading="dataListLoading">查询</el-button> |
||||
|
<!-- 导出功能 --> |
||||
|
<!--download-excel |
||||
|
:fields="headerFields()" |
||||
|
type="xls" |
||||
|
:name="headerExportName" |
||||
|
:fetch="createHeaderExportData" |
||||
|
worksheet="导出信息" |
||||
|
class="el-button el-button--primary el-button--medium" |
||||
|
style="margin-left: 8px;"> |
||||
|
导出 |
||||
|
</download-excel--> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<el-table |
||||
|
:data="headerList" |
||||
|
:height="headerHeight" |
||||
|
border |
||||
|
highlight-current-row |
||||
|
@row-click="handleHeaderRowClick" |
||||
|
v-loading="dataListLoading" |
||||
|
style="width: 100%;"> |
||||
|
<el-table-column |
||||
|
v-for="(item,index) in headerColumnList" |
||||
|
:key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
header-align="center" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed==''?false:item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<el-pagination |
||||
|
@size-change="headerSizeChange" |
||||
|
@current-change="headerCurrentChange" |
||||
|
:current-page="headerPageIndex" |
||||
|
:page-sizes="[20, 50, 100]" |
||||
|
:page-size="headerPageSize" |
||||
|
:total="headerTotal" |
||||
|
layout="total, sizes, prev, pager, next, jumper"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 出入库明细 --> |
||||
|
<div class="trans-section" style="margin-top: 10px;"> |
||||
|
<p class="section-title">出入库明细</p> |
||||
|
|
||||
|
<el-table |
||||
|
:data="detailList" |
||||
|
:height="detailHeight" |
||||
|
border |
||||
|
highlight-current-row |
||||
|
v-loading="dataListLoading" |
||||
|
style="width: 100%;"> |
||||
|
<el-table-column |
||||
|
v-for="(item,index) in detailColumnList" |
||||
|
:key="index" |
||||
|
:sortable="item.columnSortable" |
||||
|
:prop="item.columnProp" |
||||
|
header-align="center" |
||||
|
:show-overflow-tooltip="item.showOverflowTooltip" |
||||
|
:align="item.align" |
||||
|
:fixed="item.fixed==''?false:item.fixed" |
||||
|
:min-width="item.columnWidth" |
||||
|
:label="item.columnLabel"> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="!item.columnHidden">{{ scope.row[item.columnProp] }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<el-pagination |
||||
|
@size-change="detailSizeChange" |
||||
|
@current-change="detailCurrentChange" |
||||
|
:current-page="detailPageIndex" |
||||
|
:page-sizes="[20, 50, 100]" |
||||
|
:page-size="detailPageSize" |
||||
|
:total="detailTotal" |
||||
|
layout="total, sizes, prev, pager, next, jumper"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
/** |
||||
|
* 工具出入库记录查询页面 |
||||
|
* 出入库单头(tool_trans_header) + 出入库明细(tool_trans_detail) 两个查询 |
||||
|
*/ |
||||
|
import { |
||||
|
searchToolTransHeaderPage, |
||||
|
searchToolTransDetailPage, |
||||
|
searchToolTransTypeList |
||||
|
} from '@/api/production/tool.js' |
||||
|
|
||||
|
/** 出入库单头列 */ |
||||
|
const HEADER_COLUMN_SPECS = [ |
||||
|
{ prop: 'site', label: '工厂编码', width: 70, align: 'center' }, |
||||
|
{ prop: 'transNo', label: '出入库单号', width: 150, align: 'left', tooltip: true }, |
||||
|
{ prop: 'transDate', label: '出入库日期', width: 110, align: 'center' }, |
||||
|
{ prop: 'transType', label: '出入库类型', width: 130, align: 'left', tooltip: true }, |
||||
|
{ prop: 'receiver', label: '经手人', width: 90, align: 'left' }, |
||||
|
{ prop: 'status', label: '状态', width: 80, align: 'center' }, |
||||
|
{ prop: 'remark', label: '备注', width: 180, align: 'left', tooltip: true } |
||||
|
] |
||||
|
|
||||
|
/** 出入库明细列 */ |
||||
|
const DETAIL_COLUMN_SPECS = [ |
||||
|
//{ prop: 'batchNo', label: '批号', width: 130, align: 'left', tooltip: true }, |
||||
|
{ prop: 'toolInstanceId', label: '工具实例编码', width: 130, align: 'left', tooltip: true }, |
||||
|
{ prop: 'itemNo', label: '行号', width: 70, align: 'center' }, |
||||
|
{ prop: 'wareHouseId', label: '仓库编码', width: 90, align: 'left' }, |
||||
|
{ prop: 'locationId', label: '库位编码', width: 90, align: 'left' }, |
||||
|
{ prop: 'remark', label: '备注', width: 180, align: 'left', tooltip: true } |
||||
|
] |
||||
|
|
||||
|
/** 列配置转为与 cancelSfdcForWareHouse 相同的字段结构 */ |
||||
|
function buildColumnList (specs, tableId, vm) { |
||||
|
return specs.map(spec => ({ |
||||
|
tableId: tableId, |
||||
|
tableName: vm.$route.meta.title, |
||||
|
columnProp: spec.prop, |
||||
|
columnLabel: spec.label, |
||||
|
columnHidden: false, |
||||
|
columnImage: false, |
||||
|
columnSortable: false, |
||||
|
columnWidth: spec.width, |
||||
|
format: null, |
||||
|
functionId: vm.$route.meta.menuId, |
||||
|
sortLv: 0, |
||||
|
status: true, |
||||
|
fixed: '', |
||||
|
serialNumber: null, |
||||
|
columnType: null, |
||||
|
align: spec.align || 'left', |
||||
|
showOverflowTooltip: !!spec.tooltip, |
||||
|
slotKey: '' |
||||
|
})) |
||||
|
} |
||||
|
|
||||
|
export default { |
||||
|
name: 'toolInventoryLog', |
||||
|
data () { |
||||
|
return { |
||||
|
headerHeight: 200, |
||||
|
detailHeight: 200, |
||||
|
dataListLoading: false, |
||||
|
|
||||
|
// 出入库类型下拉选项 |
||||
|
transTypeOptions: [], |
||||
|
|
||||
|
// 出入库单头 |
||||
|
headerSearch: { |
||||
|
site: '', |
||||
|
transNo: '', |
||||
|
transType: '', |
||||
|
receiver: '' |
||||
|
}, |
||||
|
headerList: [], |
||||
|
headerPageIndex: 1, |
||||
|
headerPageSize: 20, |
||||
|
headerTotal: 0, |
||||
|
headerExportName: '工具出入库记录' + this.getStrDate(), |
||||
|
|
||||
|
// 出入库明细（根据上方出入库记录选中行联动加载） |
||||
|
currentHeaderRow: null, |
||||
|
detailList: [], |
||||
|
detailPageIndex: 1, |
||||
|
detailPageSize: 20, |
||||
|
detailTotal: 0, |
||||
|
detailExportName: '工具出入库明细' + this.getStrDate() |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
headerColumnList () { |
||||
|
return buildColumnList(HEADER_COLUMN_SPECS, 'toolTransHeaderList', this) |
||||
|
}, |
||||
|
detailColumnList () { |
||||
|
return buildColumnList(DETAIL_COLUMN_SPECS, 'toolTransDetailList', this) |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.loadTransTypeOptions() |
||||
|
this.$nextTick(() => { |
||||
|
const total = window.innerHeight - 280 |
||||
|
this.headerHeight = Math.floor(total * 0.5) - 30 |
||||
|
this.detailHeight = Math.floor(total * 0.5) - 30 |
||||
|
}) |
||||
|
}, |
||||
|
methods: { |
||||
|
/** 加载出入库类型下拉 */ |
||||
|
loadTransTypeOptions () { |
||||
|
searchToolTransTypeList({}).then(({ data }) => { |
||||
|
if (data && data.code === 0) { |
||||
|
this.transTypeOptions = data.list || [] |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.transTypeOptions = [] |
||||
|
}) |
||||
|
}, |
||||
|
/** 查询出入库单头 */ |
||||
|
searchHeader () { |
||||
|
this.dataListLoading = true |
||||
|
const payload = { |
||||
|
site: this.headerSearch.site ? this.headerSearch.site.trim() : undefined, |
||||
|
transNo: this.headerSearch.transNo ? this.headerSearch.transNo.trim() : undefined, |
||||
|
transType: this.headerSearch.transType ? this.headerSearch.transType.trim() : undefined, |
||||
|
receiver: this.headerSearch.receiver ? this.headerSearch.receiver.trim() : undefined, |
||||
|
page: this.headerPageIndex, |
||||
|
limit: this.headerPageSize |
||||
|
} |
||||
|
searchToolTransHeaderPage(payload).then(({ data }) => { |
||||
|
this.dataListLoading = false |
||||
|
if (data && data.code === 0 && data.page) { |
||||
|
this.headerList = data.page.list || [] |
||||
|
this.headerTotal = data.page.totalCount |
||||
|
} else { |
||||
|
this.headerList = [] |
||||
|
this.headerTotal = 0 |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.dataListLoading = false |
||||
|
this.$message.error('查询失败') |
||||
|
}) |
||||
|
}, |
||||
|
headerSizeChange (val) { |
||||
|
this.headerPageSize = val |
||||
|
this.headerPageIndex = 1 |
||||
|
this.searchHeader() |
||||
|
}, |
||||
|
headerCurrentChange (val) { |
||||
|
this.headerPageIndex = val |
||||
|
this.searchHeader() |
||||
|
}, |
||||
|
|
||||
|
/** 点击上方出入库记录时联动加载出入库明细 */ |
||||
|
handleHeaderRowClick (row) { |
||||
|
this.currentHeaderRow = row |
||||
|
this.detailPageIndex = 1 |
||||
|
this.queryDetail() |
||||
|
}, |
||||
|
/** 根据选中的出入库记录查询明细 */ |
||||
|
queryDetail () { |
||||
|
const row = this.currentHeaderRow |
||||
|
if (!row || !row.transNo) { |
||||
|
this.detailList = [] |
||||
|
this.detailTotal = 0 |
||||
|
return |
||||
|
} |
||||
|
this.dataListLoading = true |
||||
|
const payload = { |
||||
|
site: row.site ? String(row.site).trim() : undefined, |
||||
|
transNo: row.transNo ? String(row.transNo).trim() : undefined, |
||||
|
page: this.detailPageIndex, |
||||
|
limit: this.detailPageSize |
||||
|
} |
||||
|
searchToolTransDetailPage(payload).then(({ data }) => { |
||||
|
this.dataListLoading = false |
||||
|
if (data && data.code === 0 && data.page) { |
||||
|
this.detailList = data.page.list || [] |
||||
|
this.detailTotal = data.page.totalCount |
||||
|
} else { |
||||
|
this.detailList = [] |
||||
|
this.detailTotal = 0 |
||||
|
} |
||||
|
}).catch(() => { |
||||
|
this.dataListLoading = false |
||||
|
this.$message.error('查询失败') |
||||
|
}) |
||||
|
}, |
||||
|
detailSizeChange (val) { |
||||
|
this.detailPageSize = val |
||||
|
this.detailPageIndex = 1 |
||||
|
this.queryDetail() |
||||
|
}, |
||||
|
detailCurrentChange (val) { |
||||
|
this.detailPageIndex = val |
||||
|
this.queryDetail() |
||||
|
}, |
||||
|
|
||||
|
/** 动态导出列 */ |
||||
|
headerFields () { |
||||
|
return this.buildFields(this.headerColumnList) |
||||
|
}, |
||||
|
detailFields () { |
||||
|
return this.buildFields(this.detailColumnList) |
||||
|
}, |
||||
|
buildFields (columnList) { |
||||
|
let json = '{' |
||||
|
columnList.forEach((item, index) => { |
||||
|
json += '"' + item.columnLabel + '"' + ':' + '"' + item.columnProp + '"' + (index === columnList.length - 1 ? '' : ',') |
||||
|
}) |
||||
|
json += '}' |
||||
|
return eval('(' + json + ')') |
||||
|
}, |
||||
|
|
||||
|
/** 导出当前页数据 */ |
||||
|
createHeaderExportData () { |
||||
|
return this.headerList |
||||
|
}, |
||||
|
createDetailExportData () { |
||||
|
return this.detailList |
||||
|
}, |
||||
|
|
||||
|
/** 导出文件名时间戳 */ |
||||
|
getStrDate () { |
||||
|
const dd = new Date() |
||||
|
const Y = dd.getFullYear() |
||||
|
const M = (dd.getMonth() + 1) < 10 ? '0' + (dd.getMonth() + 1) : (dd.getMonth() + 1) |
||||
|
const D = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() |
||||
|
const H = dd.getHours() < 10 ? '0' + dd.getHours() : dd.getHours() |
||||
|
const MM = dd.getMinutes() < 10 ? '0' + dd.getMinutes() : dd.getMinutes() |
||||
|
const S = dd.getSeconds() < 10 ? '0' + dd.getSeconds() : dd.getSeconds() |
||||
|
return Y + '' + M + D + H + MM + S |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.trans-section { |
||||
|
border: 1px solid #e4e7ed; |
||||
|
padding: 10px 10px 6px 10px; |
||||
|
} |
||||
|
.section-title { |
||||
|
margin: 0 0 6px 0; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue