|
|
@ -0,0 +1,551 @@ |
|
|
|
<template> |
|
|
|
<ContentContainer class="homepage-customer-wrapper"> |
|
|
|
|
|
|
|
<div ref="topTableRef" |
|
|
|
class="content-table-wrap"> |
|
|
|
<div class="tool_list"> |
|
|
|
<el-form :inline="true" |
|
|
|
class="clearfix search-content"> |
|
|
|
<el-form-item :label="getColumnName('AP_ArticleStockLevel-ArtId')"> |
|
|
|
<el-select v-model="artId" |
|
|
|
style="width: 300px" |
|
|
|
placeholder="请选择" |
|
|
|
filterable |
|
|
|
:loading="artIdLoading" |
|
|
|
@visible-change="setArtList"> |
|
|
|
<el-option v-for="item in artList" |
|
|
|
:key="item['Article-ArtId']" |
|
|
|
:label="item['Article-ArtId'] + '-' + item['Article-Descr1']" |
|
|
|
:value="item['Article-ArtId']" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="getColumnName('PlanOrderVersion-Version')"> |
|
|
|
<el-select v-model="history" |
|
|
|
style="width: 300px" |
|
|
|
placeholder="请选择" |
|
|
|
filterable > |
|
|
|
<el-option v-for="item in historyList" |
|
|
|
:key="item.publishedVersionNr" |
|
|
|
:label="item.publishedVersionNr" |
|
|
|
:value="item.publishedVersionNr" /> |
|
|
|
</el-select> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item :label="getColumnName('Customer-ValidStartDate')"> |
|
|
|
<el-date-picker |
|
|
|
style="width: 100%" |
|
|
|
v-model="datePicker" |
|
|
|
type="daterange" |
|
|
|
start-placeholder="起始日期" |
|
|
|
end-placeholder="截至日期" |
|
|
|
value-format="YYYY-MM-DD" |
|
|
|
/> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item > |
|
|
|
<el-button icon="el-icon-search" |
|
|
|
size="mini" |
|
|
|
class="search-button-style" |
|
|
|
@click="handleQuery">搜索 |
|
|
|
</el-button> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
</div> |
|
|
|
<el-table ref="articleDemand" |
|
|
|
v-loading="articleDemandLoading" |
|
|
|
:cell-class-name="tableCellClassName" |
|
|
|
:data="tableData" |
|
|
|
:height="height" |
|
|
|
:row-class-name="rowClassName" |
|
|
|
border |
|
|
|
class="articleDemand-table" |
|
|
|
highlight-current-row |
|
|
|
size="mini" |
|
|
|
@row-dblclick="rowDblclick"> |
|
|
|
<el-table-column v-for="(item,index) in headers" |
|
|
|
:key="index" |
|
|
|
:label="showTitle(item,index)" |
|
|
|
:prop="item" |
|
|
|
show-overflow-tooltip |
|
|
|
:width="calcWidth(index)"> |
|
|
|
<template #default="scope"> |
|
|
|
<el-input v-if="scope.row['Label'] == editField && scope.row['key'] == editKey && index > keyStartIndex " |
|
|
|
v-model="scope.row[item]" |
|
|
|
:disabled="item.charAt(item.length - 1) == '*'" |
|
|
|
size="mini"></el-input> |
|
|
|
<span v-else-if="scope.row[item] == '预测需求' || scope.row[item] == '订单需求' || scope.row[item] == '独立需求'">{{ scope.row[item] }} |
|
|
|
<div class="add_icon"></div> |
|
|
|
</span> |
|
|
|
<span v-else-if="scope.row[item] == '在制量' || scope.row[item] == '期初库存' || scope.row[item] == '采购量' || scope.row[item] == '委外量' ">{{ scope.row[item] }} |
|
|
|
<div class="subtract_icon"></div> |
|
|
|
</span> |
|
|
|
<span v-else>{{ scope.row[item] }}</span> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
|
|
|
|
</el-table> |
|
|
|
<Pagination v-model:pagination="pagination" |
|
|
|
@change="handleQuery" /> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</ContentContainer> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
import { publishIdentify } from '@/server/productionPlanning/customerForecastDemandReview' |
|
|
|
import { |
|
|
|
insertData, |
|
|
|
saveData, |
|
|
|
getData, |
|
|
|
getArtIdList, |
|
|
|
publishData, |
|
|
|
deleteall, |
|
|
|
syncPurchase, |
|
|
|
} from "@/server/productionPlanning/emergencyOrder"; |
|
|
|
import { getColumnName } from "@/utils/allField.js"; |
|
|
|
|
|
|
|
export default { |
|
|
|
// 设置名称 |
|
|
|
name: "demandPlanning", |
|
|
|
data() { |
|
|
|
return { |
|
|
|
datePicker:"", |
|
|
|
syncDataDisable:false, |
|
|
|
artId: "", |
|
|
|
insertArtDoing:false, |
|
|
|
artIdLoading:false, |
|
|
|
articleDemandLoading: false, |
|
|
|
publicButtonClass: "disable_button", |
|
|
|
editButtonClass: "disable_button", |
|
|
|
height: 0, |
|
|
|
queryParams: {}, |
|
|
|
showPublicDialog: false, |
|
|
|
showModeDialog: false, |
|
|
|
modeType: "", |
|
|
|
editField: "", |
|
|
|
editKey: "", |
|
|
|
selectKey: "", |
|
|
|
promptMessage: "", |
|
|
|
editKeyList: [], |
|
|
|
artList:[], |
|
|
|
pagination: { |
|
|
|
pageNumber: 1, |
|
|
|
pageSize: 24, |
|
|
|
total: 0, |
|
|
|
}, |
|
|
|
headers: [], |
|
|
|
tableData: [], |
|
|
|
mode: "", |
|
|
|
|
|
|
|
keyStartIndex: 6, |
|
|
|
historyList:[], |
|
|
|
selectArticleDemandRow:{}, |
|
|
|
labelList: { |
|
|
|
"AP_ArticleDemandEmergency-ForecastDemandQty": "预测需求", |
|
|
|
"AP_ArticleDemandEmergency-OrderQty": "订单需求", |
|
|
|
"AP_ArticleDemandEmergency-OutSourcingQty": "外购需求", |
|
|
|
"AP_ArticleDemandEmergency-IndependentDemandQty": "独立需求", |
|
|
|
"AP_ArticleDemandEmergency-WipQty": "在制量", |
|
|
|
"AP_ArticleDemandEmergency-OpeningInventory": "期初库存", |
|
|
|
"AP_ArticleDemandEmergency-TargetInventory": "目标库存", |
|
|
|
"AP_ArticleDemandEmergency-MinInventory": "最低库存", |
|
|
|
"AP_ArticleDemandEmergency-NetDemandQty": "净生产量", |
|
|
|
"AP_ArticleDemandEmergency-EndingInventory": "期末库存", |
|
|
|
"AP_ArticleDemandEmergency-ZaituQty":"采购量", |
|
|
|
"AP_ArticleDemandEmergency-WeiwaiQty":"委外量" |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.publishIdentify() |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getCustomerArticleDemand(this.pagination) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.height = this.calculationTableHeight(this.$refs.topTableRef, 125) |
|
|
|
}); |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
calcWidth() { |
|
|
|
return function (index) { |
|
|
|
let width = "100px" |
|
|
|
switch (index) { |
|
|
|
case 0: |
|
|
|
width = "150px" |
|
|
|
break; |
|
|
|
case 2: |
|
|
|
width = "350px" |
|
|
|
break; |
|
|
|
} |
|
|
|
return width |
|
|
|
} |
|
|
|
}, |
|
|
|
showTitle() { |
|
|
|
return function (item, index) { |
|
|
|
if (item == "Label") { |
|
|
|
return "标签"; |
|
|
|
} else { |
|
|
|
if (index < 8) { |
|
|
|
return getColumnName(item); |
|
|
|
} else { |
|
|
|
if (item.charAt(item.length - 1) == "*") { |
|
|
|
return item.substr(0, item.length - 1); |
|
|
|
} else { |
|
|
|
return item; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
handleQuery(){ |
|
|
|
console.log('%cindex.vue line:193 handleQuery', 'color: #007acc;'); |
|
|
|
}, |
|
|
|
publishIdentify() { |
|
|
|
this.loading = true |
|
|
|
publishIdentify().then(({ data = [] }) => { |
|
|
|
// this.formData["version"] = data.version |
|
|
|
// this.message = data.message |
|
|
|
this.historyList = data.publishedVersionLi |
|
|
|
this.loading = false |
|
|
|
}).catch(() => { |
|
|
|
this.loading = false |
|
|
|
}); |
|
|
|
}, |
|
|
|
syncPurchase(){ |
|
|
|
this.syncDataDisable = true |
|
|
|
syncPurchase().then(({ code }) => { |
|
|
|
if (code == 200) { |
|
|
|
this.$message({ |
|
|
|
type: "success", |
|
|
|
message: "同步库存成功" |
|
|
|
}) |
|
|
|
} else { |
|
|
|
this.$message({ |
|
|
|
type: "error", |
|
|
|
message: "同步库存失败" |
|
|
|
}) |
|
|
|
} |
|
|
|
this.syncDataDisable = false |
|
|
|
|
|
|
|
}).catch(() => { |
|
|
|
this.syncDataDisable = false |
|
|
|
|
|
|
|
}) |
|
|
|
}, |
|
|
|
initData(){ |
|
|
|
this.articleDemandLoading = true |
|
|
|
deleteall().then(({ code,msg }) => { |
|
|
|
if(code == 200) { |
|
|
|
this.getCustomerArticleDemand(this.pagination) |
|
|
|
} |
|
|
|
this.articleDemandLoading = false |
|
|
|
}).catch(() => { |
|
|
|
this.articleDemandLoading = false |
|
|
|
}); |
|
|
|
}, |
|
|
|
insertArt(){ |
|
|
|
this.insertArtDoing = true |
|
|
|
insertData({artid:this.artId}).then( ({ code,msg }) => { |
|
|
|
this.insertArtDoing = false |
|
|
|
if(code == 200) { |
|
|
|
this.getCustomerArticleDemand(this.pagination) |
|
|
|
this.$message({ type: "success", message: msg }); |
|
|
|
} |
|
|
|
}).catch( () => { |
|
|
|
this.insertArtDoing = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
getCustomerArticleDemand(queryParams) { |
|
|
|
this.articleDemandLoading = true |
|
|
|
getData(queryParams).then(({ data = [] }) => { |
|
|
|
this.dealArticleDemandData(data); |
|
|
|
this.articleDemandLoading = false |
|
|
|
|
|
|
|
this.pagination.total = data.count |
|
|
|
}).catch(() => { |
|
|
|
this.articleDemandLoading = false |
|
|
|
}); |
|
|
|
}, |
|
|
|
dealArticleDemandData(data) { |
|
|
|
if (!data["SortKeys"]) { |
|
|
|
this.$message({ type: "error", message: "查询的数据为空" }); |
|
|
|
return; |
|
|
|
} |
|
|
|
this.publicButtonClass = "image_button" |
|
|
|
data["SortKeys"].splice(this.keyStartIndex, 0, "Label"); |
|
|
|
data["Item"].forEach((item, index) => { |
|
|
|
item.key = item["AP_ArticleDemandEmergency-ArtId"]; |
|
|
|
item.Label = this.labelList[item["AP_ArticleDemandEmergency-Label"]]; |
|
|
|
if (index % 12 == 0) { |
|
|
|
item.show = true; |
|
|
|
} else { |
|
|
|
item.show = false; |
|
|
|
item["AP_ArticleDemandEmergency-ArtId"] = ""; |
|
|
|
item["AP_ArticleDemandEmergency-Descr1"] = ""; |
|
|
|
item["AP_ArticleDemandEmergency-CustomerId"] = ""; |
|
|
|
item["AP_ArticleDemandEmergency-FGStock"] = ""; |
|
|
|
item["AP_ArticleDemandEmergency-SFGStock"] = ""; |
|
|
|
item["AP_ArticleDemandEmergency-WIPStock"] = ""; |
|
|
|
item["AP_ArticleDemandEmergency-PUCStock"] = ""; |
|
|
|
item["AP_ArticleDemandEmergency-OSCStock"] = ""; |
|
|
|
} |
|
|
|
}); |
|
|
|
this.headers = data["SortKeys"]; |
|
|
|
this.tableData = data["Item"]; |
|
|
|
this.editButtonClass = "disable_button" |
|
|
|
}, |
|
|
|
getPublishedVersion() { |
|
|
|
publishedVersion().then(({ data = "" }) => { |
|
|
|
this.promptMessage = data |
|
|
|
}) |
|
|
|
}, |
|
|
|
handleQuery() { |
|
|
|
this.getPublishedVersion() |
|
|
|
this.getCustomerArticleDemand(this.pagination) |
|
|
|
}, |
|
|
|
|
|
|
|
// 物料列表 |
|
|
|
setArtList() { |
|
|
|
this.artIdLoading = true |
|
|
|
getArtIdList().then(({ data = [] }) => { |
|
|
|
this.artIdLoading = false |
|
|
|
this.artList = data; |
|
|
|
}).catch( () => { |
|
|
|
this.artIdLoading = false |
|
|
|
}) |
|
|
|
}, |
|
|
|
publicData() { |
|
|
|
if(this.publicButtonClass == "disable_button") { |
|
|
|
return false |
|
|
|
} |
|
|
|
this.publicButtonClass = "disable_button" |
|
|
|
this.articleDemandLoading = true |
|
|
|
publishData().then( ({ code,msg }) => { |
|
|
|
this.articleDemandLoading = false |
|
|
|
this.publicButtonClass = "image_button" |
|
|
|
if(code == 200) { |
|
|
|
this.getCustomerArticleDemand(this.pagination) |
|
|
|
this.$message({ type: "success", message: msg }); |
|
|
|
} |
|
|
|
}).catch( () => { |
|
|
|
this.articleDemandLoading = false |
|
|
|
this.publicButtonClass = "image_button" |
|
|
|
}) |
|
|
|
}, |
|
|
|
cancelPublicDialog(opt) { |
|
|
|
this.showPublicDialog = false |
|
|
|
if (opt == "submit") { |
|
|
|
this.handleQuery() |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// 打开模型框 |
|
|
|
openModelDialog(type) { |
|
|
|
this.modeType = type; |
|
|
|
this.showModeDialog = true; |
|
|
|
}, |
|
|
|
// 取消添加 |
|
|
|
cancelAddModel() { |
|
|
|
this.mode = ""; |
|
|
|
this.showModeDialog = false; |
|
|
|
}, |
|
|
|
// 行样式 |
|
|
|
rowClassName({ row }) { |
|
|
|
return row.show ? "show_row" : "hide_row"; |
|
|
|
}, |
|
|
|
// 编辑航 |
|
|
|
editRow(data) { |
|
|
|
if (!this.editKeyList.includes(this.selectKey)) this.editKeyList.push(this.selectKey) |
|
|
|
this.editKey = this.selectKey; |
|
|
|
this.editField = data; |
|
|
|
}, |
|
|
|
getTableDataJson() { |
|
|
|
let maplist = JSON.parse(JSON.stringify(this.tableData)); |
|
|
|
maplist.forEach(item => { |
|
|
|
item["AP_ArticleDemandEmergency-ArtId"] = item.key; |
|
|
|
delete item.index; |
|
|
|
delete item.show; |
|
|
|
delete item.key; |
|
|
|
delete item.Label; |
|
|
|
}); |
|
|
|
return JSON.stringify(maplist); |
|
|
|
}, |
|
|
|
|
|
|
|
getEditTableDataJson() { |
|
|
|
let editMapList = JSON.parse(JSON.stringify(this.tableData)).filter(item => this.editKeyList.includes(item.key)) |
|
|
|
editMapList.forEach(item => { |
|
|
|
item["AP_ArticleDemandEmergency-ArtId"] = item.key; |
|
|
|
delete item.index; |
|
|
|
delete item.show; |
|
|
|
delete item.key; |
|
|
|
delete item.Label; |
|
|
|
}); |
|
|
|
return JSON.stringify(editMapList); |
|
|
|
}, |
|
|
|
// 保存数据 |
|
|
|
saveDemandData() { |
|
|
|
this.editField = ""; |
|
|
|
let queryParams = {}; |
|
|
|
queryParams.artid = this.artId; |
|
|
|
queryParams.maplist = this.getEditTableDataJson(); |
|
|
|
this.articleDemandLoading = true |
|
|
|
saveData(queryParams).then(({ data = [] }) => { |
|
|
|
this.articleDemandLoading = false |
|
|
|
this.handleQuery() |
|
|
|
this.editKeyList = [] |
|
|
|
this.$message({ type: "success", message: "保存成功" }); |
|
|
|
}).catch(() => { |
|
|
|
this.articleDemandLoading = false |
|
|
|
}); |
|
|
|
}, |
|
|
|
// 合并单元格 |
|
|
|
arraySpanMethod({ rowIndex, columnIndex }) { |
|
|
|
if (rowIndex % 11 > 0 && columnIndex < 8) { |
|
|
|
if (rowIndex % 11 == 1 && columnIndex == 0) { |
|
|
|
return [9, 8]; |
|
|
|
} else { |
|
|
|
return [0, 0]; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
// 设置航选中状态 |
|
|
|
setRowStatus(key) { |
|
|
|
this.artId = key |
|
|
|
if (this.selectKey == "") { |
|
|
|
this.selectKey = key |
|
|
|
this.editButtonClass = "image_button" |
|
|
|
} else { |
|
|
|
if (this.selectKey != key) { |
|
|
|
this.selectKey = key |
|
|
|
this.editButtonClass = "image_button" |
|
|
|
} else { |
|
|
|
this.selectKey = "" |
|
|
|
this.editButtonClass = "disable_button" |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
tableCellClassName({ row, column, rowIndex, columnIndex }) { |
|
|
|
row.index = rowIndex; |
|
|
|
column.index = columnIndex; |
|
|
|
}, |
|
|
|
// 双击触发事件 |
|
|
|
rowDblclick(row) { |
|
|
|
if (row.Label == "净生产量") { |
|
|
|
this.selectArticleDemandRow = row |
|
|
|
this.$refs.articleDemand.setCurrentRow(row); |
|
|
|
this.artId = row.artid |
|
|
|
this.setRowStatus(row.key); |
|
|
|
this.tableData.forEach(item => { |
|
|
|
if (item.key == row.key) { |
|
|
|
if (item.Label != "净生产量") { |
|
|
|
item.show = !item.show; |
|
|
|
} |
|
|
|
} else { |
|
|
|
if (item.Label != "净生产量") { |
|
|
|
item.show = false; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
</script> |
|
|
|
<style lang="less" scoped> |
|
|
|
:deep(.el-range-separator) { |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
.homepage-customer-wrapper { |
|
|
|
height: 100%; |
|
|
|
background-color: #F1F1F1; |
|
|
|
.content-table-wrap { |
|
|
|
height: 100%; |
|
|
|
:deep(.show_row) { |
|
|
|
cursor: pointer; |
|
|
|
transform: scale(1) |
|
|
|
} |
|
|
|
:deep(.hide_row) { |
|
|
|
display: none; |
|
|
|
transform: scale(0) |
|
|
|
} |
|
|
|
.tool_list { |
|
|
|
width: 100%; |
|
|
|
height: 50px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
.search { |
|
|
|
width: 100%; |
|
|
|
display: flex; |
|
|
|
.mps-button { |
|
|
|
width: 98px; |
|
|
|
height: 32px; |
|
|
|
box-shadow: 1px 1px 1px 0px #FFFFFF; |
|
|
|
border-radius: 2px; |
|
|
|
border: 1px solid #073A35; |
|
|
|
line-height: 20px; |
|
|
|
.icon-upload { |
|
|
|
width: 18px; |
|
|
|
height: 18px; |
|
|
|
background: url("~@/assets/icon/mps_button_icon.png"); |
|
|
|
float: left; |
|
|
|
margin-left: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.button_list { |
|
|
|
width: 150px; |
|
|
|
height: 30px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
.image_button { |
|
|
|
margin: 3px 5px; |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
box-shadow: 2px 2px 0px 0px #DADADA; |
|
|
|
} |
|
|
|
.disable_button { |
|
|
|
margin: 3px 5px; |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
background: #ccc; |
|
|
|
border-radius: 1px; |
|
|
|
border: 1px solid #ccc; |
|
|
|
} |
|
|
|
.image_button:hover { |
|
|
|
background: #DFDFDF; |
|
|
|
box-shadow: 2px 2px 0px 0px #FFFFFF; |
|
|
|
} |
|
|
|
.button_split { |
|
|
|
width: 1px; |
|
|
|
height: 30px; |
|
|
|
background: #DFDFDF; |
|
|
|
box-shadow: 1px 0px 0px 0px #FFFFFF; |
|
|
|
border-radius: 1px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.articleDemand-table { |
|
|
|
width: 100%; |
|
|
|
border: 0; |
|
|
|
.add_icon { |
|
|
|
margin-top: 3px; |
|
|
|
float: right; |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
background: url("~@/assets/icon/add_icon.png"); |
|
|
|
} |
|
|
|
.subtract_icon { |
|
|
|
margin-top: 3px; |
|
|
|
float: right; |
|
|
|
width: 14px; |
|
|
|
height: 14px; |
|
|
|
background: url("~@/assets/icon/subtract_icon.png"); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |