8 changed files with 2364 additions and 83 deletions
@ -0,0 +1,721 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:title="formTitle" |
||||
|
v-loading="loading" |
||||
|
v-if="displayDialog.newDialog" |
||||
|
:visible="true" |
||||
|
:fullscreen="true" |
||||
|
:append-to-body="false" |
||||
|
:modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
:show-close="true" |
||||
|
@close="close(0)" |
||||
|
> |
||||
|
<div id="StepsFormTree"> |
||||
|
<el-steps |
||||
|
:active="active" |
||||
|
process-status="finish" |
||||
|
finish-status="success" |
||||
|
:align-center="true" |
||||
|
> |
||||
|
<el-step |
||||
|
v-for="(item, index) in stepFilters" |
||||
|
:key="index" |
||||
|
:title="item" |
||||
|
></el-step> |
||||
|
</el-steps> |
||||
|
<curren-Form |
||||
|
v-if="active == 0" |
||||
|
class="page1" |
||||
|
size="medium" |
||||
|
ref="page1" |
||||
|
:searchData="CreateFormData" |
||||
|
:searchForm="CreateForm" |
||||
|
:searchOptions="Options" |
||||
|
:searchHandle="editHandle" |
||||
|
:rules="Rules" |
||||
|
@changeInput="changeInput" |
||||
|
@changeSelect="changeSelect" |
||||
|
@push="DataPush(arguments)" |
||||
|
@submitForm="editFormClick(arguments)" |
||||
|
> |
||||
|
</curren-Form> |
||||
|
<curren-Form |
||||
|
v-if="active === 1" |
||||
|
class="page2" |
||||
|
size="medium" |
||||
|
:searchData="CreateFormData" |
||||
|
:searchHandle="editHandle" |
||||
|
:rules="Rules" |
||||
|
@submitForm="editFormClick(arguments)" |
||||
|
> |
||||
|
<template> |
||||
|
<el-form-item class="formTable-box " prop="details" v-if="active == 1"> |
||||
|
<b style="font-size:20px;padding-bottom:10px">父级物料代码：{{ propsData.details[0].itemCode }}</b> |
||||
|
<el-table |
||||
|
height="85%" |
||||
|
ref="bomTree_Ref" |
||||
|
:data="CreateFormData.details" |
||||
|
style="width: 100%;margin-bottom: 20px;" |
||||
|
row-key="id" |
||||
|
:border="true" |
||||
|
default-expand-all |
||||
|
@select="tableHandleSelect" |
||||
|
@select-all="tableHandleSelectAll" |
||||
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"> |
||||
|
<el-table-column |
||||
|
type="selection" |
||||
|
:selectable="((row,index)=>{return index != 0})" |
||||
|
width="55"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
:prop="detailsTableColumns[0].prop" |
||||
|
:label="detailsTableColumns[0].label" |
||||
|
width="auto" |
||||
|
> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
:prop="detailsTableColumns[1].prop" |
||||
|
:label="detailsTableColumns[1].label" |
||||
|
width="auto"> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
:prop="detailsTableColumns[2].prop" |
||||
|
:label="detailsTableColumns[2].label" |
||||
|
> |
||||
|
<template slot-scope="scope"> |
||||
|
<filterSelect |
||||
|
v-if="scope.$index != 0" |
||||
|
:selectModel="scope.row[detailsTableColumns[2].prop]" |
||||
|
:selectItem="detailsTableColumns[2]" |
||||
|
:tableScope="scope" |
||||
|
@filterOptionSelectHandle="(item,props,val)=>{filterOptionSelectHandle(item,props,val,scope)}" |
||||
|
@filterClearHandle="(item)=>{filterClearHandle(item,scope)}" |
||||
|
></filterSelect> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
</el-form-item> |
||||
|
</template> |
||||
|
</curren-Form> |
||||
|
<div |
||||
|
v-if="active === step.length - 1 && pageStatus === 'success'" |
||||
|
class="page4" |
||||
|
> |
||||
|
<el-result |
||||
|
icon="success" |
||||
|
title="成功提示" |
||||
|
:subTitle="formTitle + '成功'" |
||||
|
> |
||||
|
<template slot="extra"> |
||||
|
<!-- <el-button type="primary" size="medium" @click="tuoFormPrint" |
||||
|
>打印托标签</el-button |
||||
|
> |
||||
|
<el-button type="primary" size="medium" @click="xbqFormPrint" |
||||
|
>打印箱标签</el-button |
||||
|
> --> |
||||
|
<el-button |
||||
|
v-for="item in successHandle" |
||||
|
:key="item.label" |
||||
|
:type="item.type" |
||||
|
size="medium" |
||||
|
@click="item.click()" |
||||
|
>{{ item.label }}</el-button |
||||
|
> |
||||
|
<!-- @click="successClick(item.click())" --> |
||||
|
<el-button type="primary" size="medium" @click="close(1)" |
||||
|
>退出</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-result> |
||||
|
</div> |
||||
|
<div |
||||
|
v-if="active === step.length - 1 && pageStatus === 'error'" |
||||
|
class="page4" |
||||
|
> |
||||
|
<el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'"> |
||||
|
<template slot="extra"> |
||||
|
<el-button type="primary" size="medium" @click="resubmit()" |
||||
|
>重新提交</el-button |
||||
|
> |
||||
|
<el-button type="primary" size="medium" @click="active--" |
||||
|
>上一步</el-button |
||||
|
> |
||||
|
<el-button type="primary" size="medium" @click="close(1)" |
||||
|
>退出</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-result> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script> |
||||
|
import currenForm from "@/components/currenForm" |
||||
|
import currenTable from "@/components/currenTable" |
||||
|
import filterSelect from "@/components/filterSelect" |
||||
|
export default { |
||||
|
name: 'StepsFormTree', |
||||
|
components: { |
||||
|
currenForm, |
||||
|
currenTable, |
||||
|
filterSelect |
||||
|
}, |
||||
|
watch: { |
||||
|
active (val) { |
||||
|
if(val == 0){ |
||||
|
if(this.hideFirstActiveCancel){ |
||||
|
this.editHandle=[ |
||||
|
{ label: "下一步", type: "primary", name: "determine" }, |
||||
|
]; |
||||
|
}else{ |
||||
|
this.editHandle=[ |
||||
|
{ label: "取消", name: "cancel" }, |
||||
|
{ label: "下一步", type: "primary", name: "determine" }, |
||||
|
]; |
||||
|
} |
||||
|
}else if(val == 1){ |
||||
|
this.editHandle=[ |
||||
|
{ label: "上一步", name: "cancel" }, |
||||
|
{ label: "提交", type: "primary", name: "determine" }, |
||||
|
]; |
||||
|
} |
||||
|
}, |
||||
|
stepArray(newVal, oldVal){ |
||||
|
this.step = newVal |
||||
|
} |
||||
|
}, |
||||
|
filters: { |
||||
|
formData (val) { |
||||
|
let data = JSON.parse(JSON.stringify(val)) |
||||
|
val.forEach((key, index) => { |
||||
|
data[index].disabled = "true" |
||||
|
delete data[index].focus |
||||
|
if (key.type == "autocomplete" || key.type == "import") { |
||||
|
data[index].type = "input" |
||||
|
} |
||||
|
}); |
||||
|
return data |
||||
|
}, |
||||
|
formDataDetails (val) { |
||||
|
let data = JSON.parse(JSON.stringify(val)) |
||||
|
val.forEach((key, index) => { |
||||
|
data[index].disabled = true |
||||
|
delete data[index].focus |
||||
|
delete data[index].rules |
||||
|
if (key.type == "autocomplete" || key.type == "import") { |
||||
|
delete data[index].type |
||||
|
} else if (key.type == "objectAutocomplete") { |
||||
|
data[index].type = "object" |
||||
|
} else if (key.prop == "containerCode" && key.type == "input") { |
||||
|
data[index].disabled = false |
||||
|
} else if (key.isChange) { |
||||
|
// 针对第三步预览特殊情况处理 |
||||
|
data[index].disabled = false |
||||
|
} |
||||
|
}); |
||||
|
return data |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
//名称 |
||||
|
formTitle: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
//是否弹窗 |
||||
|
displayDialog: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return { |
||||
|
newDialog: false |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
//主表提交数据 |
||||
|
propsData: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
//主表提交数据 |
||||
|
CreateFormData: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
//主表显示form |
||||
|
CreateForm: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//检验 |
||||
|
Rules: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
//下拉选择 |
||||
|
Options: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
//子表table显示 |
||||
|
detailsTableColumns: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//子表提交数据 |
||||
|
childTableData: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//成功后的操作 |
||||
|
successHandle: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//步骤标题 |
||||
|
stepArray: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return ["总体信息", "明细", "结果"] |
||||
|
} |
||||
|
}, |
||||
|
//添加一行 |
||||
|
addClickButton: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return true |
||||
|
} |
||||
|
}, |
||||
|
//导入按钮 |
||||
|
importFormButton: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
//删除行记录 |
||||
|
isShowDeleteButton: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return true |
||||
|
} |
||||
|
}, |
||||
|
// 隐藏第一步骤的取消按钮 |
||||
|
isHideFirstActiveCancel:{ |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
computed: { |
||||
|
stepFilters () { |
||||
|
let stepFilters = [] |
||||
|
const routeName = this.$route.meta.title |
||||
|
this.step.forEach(key => { |
||||
|
stepFilters.push(routeName.concat(key)) |
||||
|
}) |
||||
|
return stepFilters |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
active: 0, |
||||
|
formReveal: 1, |
||||
|
activeStep: 1, |
||||
|
pageStatus: '', |
||||
|
addClick: this.addClickButton,//添加一行按钮 |
||||
|
importForm:this.importFormButton,//导入按钮 |
||||
|
showDeleteButton: this.isShowDeleteButton,//操作-删除按钮 |
||||
|
hideFirstActiveCancel:this.isHideFirstActiveCancel,// 隐藏第一步骤的取消按钮 |
||||
|
loading: false, |
||||
|
session: null, |
||||
|
step: this.stepArray, |
||||
|
editHandle: [ |
||||
|
{ label: "取消", name: "cancel" }, |
||||
|
{ label: "下一步", type: "primary", name: "determine" }, |
||||
|
], |
||||
|
isAllCheck:false,//是否全选 |
||||
|
selectData:[],//已选数据 |
||||
|
config:{ |
||||
|
id:'id', |
||||
|
parentId:'parentId', |
||||
|
// id:'itemCode', |
||||
|
// parentId:'parentCode', |
||||
|
children:'children' |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.session = JSON.parse(JSON.stringify(this.CreateFormData)) |
||||
|
if(this.hideFirstActiveCancel){ |
||||
|
this.editHandle=[ |
||||
|
{ label: "下一步", type: "primary", name: "determine" }, |
||||
|
]; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 勾选表格数据 |
||||
|
toggleSelection(rows,type){ |
||||
|
rows.forEach(row => { |
||||
|
this.$refs.bomTree_Ref.toggleRowSelection(row,type); |
||||
|
}); |
||||
|
}, |
||||
|
// filterSelect点击option事件 |
||||
|
filterOptionSelectHandle(item,props,val,scope){ |
||||
|
this.$emit("push", item,props,val,scope); |
||||
|
}, |
||||
|
// // filterSelect点击清除事件to |
||||
|
filterClearHandle(item,scope){ |
||||
|
this.$emit("clear", item,scope); |
||||
|
}, |
||||
|
// 递归：获取所有同级 |
||||
|
findAllPeer(row,data){ |
||||
|
let _peerArr = null//同级 |
||||
|
if(!data){data = this.CreateFormData.details} |
||||
|
for(let i = 0;i<data.length;i++){ |
||||
|
console.log(393,data[i][this.config.id],row[this.config.parentId],data[i]) |
||||
|
if(data[i][this.config.id] == row[this.config.parentId]){ |
||||
|
_peerArr = data[i][this.config.children]; |
||||
|
break |
||||
|
} |
||||
|
else{ |
||||
|
if(data[i][this.config.children] && data[i][this.config.children].length > 0){ |
||||
|
const _res = this.findAllPeer(row,data[i][this.config.children]) |
||||
|
if(_res) _peerArr = _res |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
console.log(405,_peerArr,row[this.config.parentId]) |
||||
|
return _peerArr |
||||
|
}, |
||||
|
// 递归：获取所有子集 |
||||
|
findChildren(row,data){ |
||||
|
let _childrenArr = null//子集 |
||||
|
if(!data){data = this.CreateFormData.details} |
||||
|
for(let i = 0;i<data.length;i++){ |
||||
|
if(data[i][this.config.id] == row[this.config.id]){ |
||||
|
_childrenArr = data[i][this.config.children]; |
||||
|
break |
||||
|
} |
||||
|
else{ |
||||
|
if(data[i][this.config.children] && data[i][this.config.children].length > 0){ |
||||
|
const _res = this.findChildren(row,data[i][this.config.children]) |
||||
|
if(_res) _childrenArr = _res |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return _childrenArr |
||||
|
}, |
||||
|
// 【选中】勾选递归：获取同级（同级下的chilred未被选中的） |
||||
|
findPeerForCheckHandle(row,data){ |
||||
|
// debugger |
||||
|
if(!data){data = this.CreateFormData.details} |
||||
|
let _peerArr = null//同级 |
||||
|
for(let i = 0;i<data.length;i++){ |
||||
|
if(data[i][this.config.id] == row[this.config.parentId]){ |
||||
|
// 去除有已选子集的 |
||||
|
_peerArr = [] |
||||
|
data[i][this.config.children].forEach(item=>{ |
||||
|
if(item[this.config.children] && item[this.config.children].length > 0){ |
||||
|
let sonHasCheck = 0 |
||||
|
item[this.config.children].forEach(son=>{ |
||||
|
if(son.isCheck){sonHasCheck ++} |
||||
|
}) |
||||
|
if(sonHasCheck == 0){ |
||||
|
item.isCheck=true |
||||
|
_peerArr.push(item) |
||||
|
} |
||||
|
}else{ |
||||
|
item.isCheck=true |
||||
|
_peerArr.push(item) |
||||
|
} |
||||
|
}) |
||||
|
break |
||||
|
} |
||||
|
else { |
||||
|
if(data[i][this.config.children] && data[i][this.config.children].length > 0){ |
||||
|
const _res = this.findPeerForCheckHandle(row,data[i][this.config.children]) |
||||
|
if(_res) _peerArr = _res |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return _peerArr |
||||
|
}, |
||||
|
// 获取父级 |
||||
|
findParentRow(row,data){ |
||||
|
if(!data){data = this.CreateFormData.details} |
||||
|
let _parentRow = null//父级 |
||||
|
for(let i = 0;i<data.length;i++){ |
||||
|
if(data[i][this.config.id] == row[this.config.parentId]){ |
||||
|
_parentRow = data[i] |
||||
|
break |
||||
|
}else{ |
||||
|
if(data[i][this.config.children] && data[i][this.config.children].length > 0){ |
||||
|
const _res = this.findParentRow(row,data[i][this.config.children]) |
||||
|
if(_res) _parentRow = _res |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
return _parentRow |
||||
|
}, |
||||
|
// 1、选择的时候，同级默认选择，父级的同级（子集未被勾选的）默认选择 |
||||
|
// 2、取消勾选的时候，同级取消选择，父级的同级如果有被勾选，则父级默认选择 |
||||
|
// 3、全选，最底层选中 |
||||
|
// 4、全不选，全不不选择 |
||||
|
// 选择操作 todo:isCheck 有问题 |
||||
|
tableHandleSelect(selection, row){ |
||||
|
this.selectData = selection |
||||
|
const isCheck = selection.length && selection.indexOf(row) !== -1 |
||||
|
if(selection.length <= 0){} |
||||
|
if (isCheck) { |
||||
|
row.isCheck = true |
||||
|
console.log("勾选",selection, row) |
||||
|
console.log(111,this.CreateFormData.details) |
||||
|
let _peerArr = this.findPeerForCheckHandle(row) |
||||
|
let _parentRow = this.findParentRow(row) |
||||
|
let _parentPeerArr = _parentRow ? this.findPeerForCheckHandle(_parentRow) : [] |
||||
|
let _allCheck = [..._peerArr,..._parentPeerArr] |
||||
|
let _childrenArr = this.findChildren(row) |
||||
|
// 勾选时：依次为将同级及父级同级选中，父级清空选中，子集清空 |
||||
|
this.$nextTick(()=>{ |
||||
|
// 1、同级及父级同级选中 |
||||
|
if(_allCheck){ this.toggleSelection(_allCheck,true) } |
||||
|
// 2、父级清空选中 |
||||
|
this.toggleSelection([_parentRow],false) |
||||
|
_parentRow.isCheck = false |
||||
|
// 3、子集清空 |
||||
|
if(_childrenArr){ |
||||
|
this.toggleSelection(_childrenArr,false) |
||||
|
_childrenArr.forEach(item=>{ item.isCheck = false }) |
||||
|
} |
||||
|
}) |
||||
|
}else{ |
||||
|
// 同级取消勾选 |
||||
|
row.isCheck = false |
||||
|
let _peerArr = this.findAllPeer(row)//同级arr |
||||
|
let _parentRow = this.findParentRow(row)//父级row |
||||
|
let _parentPeerArr = _parentRow ? this.findAllPeer(_parentRow) : []//父级同级arr |
||||
|
let _parentPeerSonArr = []//父级同级的子集arr |
||||
|
if(_parentPeerArr){ |
||||
|
_parentPeerArr.forEach(item=>{ |
||||
|
if(this.findChildren(item)){ |
||||
|
_parentPeerSonArr = [..._parentPeerSonArr,...this.findChildren(item)] |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
let _parentPeerShow = 0 |
||||
|
// 判断父级的同级是否有选中 |
||||
|
_parentPeerArr.forEach(item=>{if(item.isCheck){_parentPeerShow ++}}) |
||||
|
console.log("父节点",_parentRow) |
||||
|
console.log("父级同级",_parentPeerArr) |
||||
|
console.log("同级",_peerArr) |
||||
|
// 取消时：依次为同级取消选中，父级选中（如果父级的同级有选中,且不是最外层）,父级的同级的子集取消选中 |
||||
|
this.$nextTick(()=>{ |
||||
|
// 1、同级取消选中 |
||||
|
if(_peerArr){ |
||||
|
this.toggleSelection(_peerArr,false) |
||||
|
_peerArr.forEach(item=>{item.isCheck = false}) |
||||
|
} |
||||
|
// 2、父级选中（如果父级的同级有选中,且不是最外层） |
||||
|
if((_parentPeerShow > 0 || row.parentId == _parentRow.id) && _parentRow.id != _parentRow.parentId){ |
||||
|
this.toggleSelection([_parentRow],true) |
||||
|
_parentRow.isCheck = true |
||||
|
} |
||||
|
// 3、父级的同级的子集取消选中 |
||||
|
if(_parentPeerSonArr){ |
||||
|
this.toggleSelection(_parentPeerSonArr,false) |
||||
|
_parentPeerSonArr.forEach(item=>{item.isCheck = false}) |
||||
|
} |
||||
|
}) |
||||
|
console.log("取消勾选",selection, row) |
||||
|
} |
||||
|
}, |
||||
|
// 获取最底层 |
||||
|
getLastFloors(root, onePathDeep = 1, deepArr = []){ |
||||
|
for (let i = 0; i < root.length; i++) { |
||||
|
if (root[i] == null) return 0 |
||||
|
// 没有children |
||||
|
if (!root[i][this.config.children]?.length) { |
||||
|
deepArr.push(root[i]) |
||||
|
} else { |
||||
|
onePathDeep++ |
||||
|
this.getLastFloors(root[i][this.config.children], onePathDeep, deepArr) |
||||
|
} |
||||
|
} |
||||
|
return deepArr; |
||||
|
}, |
||||
|
// 全选操作 |
||||
|
tableHandleSelectAll(selection){ |
||||
|
this.isAllCheck = !this.isAllCheck |
||||
|
if(this.isAllCheck){ |
||||
|
console.log("全选",selection) |
||||
|
// 获取所有底层 |
||||
|
this.selectData = this.getLastFloors(this.CreateFormData.details) |
||||
|
this.$refs.bomTree_Ref.clearSelection(); |
||||
|
this.selectData.forEach(item=>{ |
||||
|
item.isCheck = true |
||||
|
this.$refs.bomTree_Ref.toggleRowSelection(item,true); |
||||
|
}) |
||||
|
}else{ |
||||
|
console.log("全不选",selection) |
||||
|
this.$refs.bomTree_Ref.clearSelection(); |
||||
|
this.selectData = [] |
||||
|
this.CreateFormData.details.forEach(item=>{item.isCheck = false}) |
||||
|
} |
||||
|
}, |
||||
|
//结束退出 |
||||
|
close (val) { |
||||
|
this.isAllCheck = false |
||||
|
this.selectData = [] |
||||
|
this.active = 0 |
||||
|
// const pageRef = this.Refs[1] |
||||
|
const data = JSON.parse(JSON.stringify(this.session)) |
||||
|
this.$emit('close', data, val) |
||||
|
}, |
||||
|
//autoComplete主表 |
||||
|
DataPush (val) { |
||||
|
this.$emit("DataPush", val) |
||||
|
}, |
||||
|
// //打印托标签 |
||||
|
// tuoFormPrint () { |
||||
|
// this.$emit('tuoFormPrint') |
||||
|
// }, |
||||
|
// //打印箱标签 |
||||
|
// xbqFormPrint () { |
||||
|
// this.$emit('xbqFormPrint') |
||||
|
// }, |
||||
|
successClick (val) { |
||||
|
this.loading = true |
||||
|
val.then(res => { |
||||
|
this.loading = false |
||||
|
}, reason => { |
||||
|
this.loading = false |
||||
|
}).catch(err=>{ |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
editFormClick (val) { |
||||
|
// Moment(this.CreateFormData.arriveTime).format() |
||||
|
// if (val[0] == 0) { |
||||
|
if (val[2].name == "cancel") { |
||||
|
if (this.active == 0) { |
||||
|
// debugger |
||||
|
// this.active = '' |
||||
|
this.close(0) |
||||
|
} else { |
||||
|
// if (this.active == 2) { |
||||
|
// this.active = this.active - this.activeStep |
||||
|
// } else { |
||||
|
this.active-- |
||||
|
// } |
||||
|
} |
||||
|
} else { |
||||
|
val[1].validate((valid) => { |
||||
|
if (valid) { |
||||
|
const parent = this.$parent |
||||
|
if(this.active == 0){ |
||||
|
parent.PalletlFunction(this.active).then(res => { |
||||
|
// 针对特殊环境 跳过步骤 直接到最后完成 |
||||
|
this.active++ |
||||
|
this.loading = false |
||||
|
}, reason => { |
||||
|
this.loading = false |
||||
|
}).catch(err=>{ |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}else{ |
||||
|
parent.PalletlFunction(this.active).then(res => { |
||||
|
// 针对特殊环境 跳过步骤 直接到最后完成 |
||||
|
this.loading = false |
||||
|
parent.stepsSubmit().then(res => { |
||||
|
this.pageStatus = 'success' |
||||
|
this.active++ |
||||
|
this.loading = false |
||||
|
}, reason => { |
||||
|
this.loading = false |
||||
|
if(reason=="return")return |
||||
|
this.pageStatus = 'error' |
||||
|
this.active++ |
||||
|
this.loading = false |
||||
|
}).catch(err=>{ |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, reason => { |
||||
|
this.loading = false |
||||
|
}).catch(err=>{ |
||||
|
this.loading = false |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
this.$errorMsg('请检查表单') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
resubmit(){ |
||||
|
const parent = this.$parent |
||||
|
this.loading = true |
||||
|
parent.stepsSubmit().then(res => { |
||||
|
this.pageStatus = 'success' |
||||
|
this.loading = false |
||||
|
}, reason => { |
||||
|
this.loading = false |
||||
|
if(reason=="return")return |
||||
|
this.pageStatus = 'error' |
||||
|
this.loading = false |
||||
|
}).catch(err=>{ |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
//添加子表 |
||||
|
openAddNew () { |
||||
|
const parent = this.$parent |
||||
|
parent.openAddNew() |
||||
|
}, |
||||
|
// 导入 |
||||
|
openImportForm(){ |
||||
|
const parent = this.$parent |
||||
|
parent.openImportFormHandle() |
||||
|
// this.displayDialog.importDialog = true |
||||
|
}, |
||||
|
childTable (e, val) { |
||||
|
const parent = this.$parent |
||||
|
parent.childTable(e, val) |
||||
|
}, |
||||
|
changeInput(prop,val){ |
||||
|
this.$emit("changeInput", prop, val) |
||||
|
}, |
||||
|
changeSelect(prop,val){ |
||||
|
this.$emit("changeSelect", prop, val) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "./style/index.scss"; |
||||
|
// todo:禁用按钮隐藏，层级加底色 |
||||
|
::v-deep .el-checkbox{ |
||||
|
&.is-disabled{ |
||||
|
.el-checkbox__inner{ |
||||
|
visible:hidden |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,549 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
:title="formTitle" |
||||
|
v-loading="loading" |
||||
|
v-if="displayDialog.newDialog" |
||||
|
:visible="true" |
||||
|
:fullscreen="true" |
||||
|
:append-to-body="false" |
||||
|
:modal="false" |
||||
|
:modal-append-to-body="false" |
||||
|
:show-close="true" |
||||
|
@close="close(0)" |
||||
|
> |
||||
|
<div id="StepsFormTree"> |
||||
|
<el-steps |
||||
|
:active="active" |
||||
|
process-status="finish" |
||||
|
finish-status="success" |
||||
|
:align-center="true" |
||||
|
> |
||||
|
<el-step |
||||
|
v-for="(item, index) in stepFilters" |
||||
|
:key="index" |
||||
|
:title="item" |
||||
|
></el-step> |
||||
|
</el-steps> |
||||
|
<curren-Form |
||||
|
v-if="active == 0" |
||||
|
class="page1" |
||||
|
size="medium" |
||||
|
ref="page1" |
||||
|
:searchData="CreateFormData" |
||||
|
:searchForm="CreateForm" |
||||
|
:searchOptions="Options" |
||||
|
:searchHandle="editHandle" |
||||
|
:rules="Rules" |
||||
|
@changeInput="changeInput" |
||||
|
@changeSelect="changeSelect" |
||||
|
@push="DataPush(arguments)" |
||||
|
@submitForm="editFormClick(arguments)" |
||||
|
> |
||||
|
</curren-Form> |
||||
|
<curren-Form |
||||
|
v-if="active === 1" |
||||
|
class="page2" |
||||
|
size="medium" |
||||
|
:searchData="CreateFormData" |
||||
|
:searchHandle="editHandle" |
||||
|
:rules="Rules" |
||||
|
@submitForm="editFormClick(arguments)" |
||||
|
> |
||||
|
<template> |
||||
|
<el-form-item class="formTable-box " prop="details" v-if="active == 1"> |
||||
|
<b style="font-size:20px;padding-bottom:10px">父级物料代码：{{ propsData.details[0].itemCode }}</b> |
||||
|
<el-tree |
||||
|
:check-strictly="true" |
||||
|
ref="bomTree_Ref" |
||||
|
:size="'normal'" |
||||
|
style="width:800px" |
||||
|
:data="CreateFormData.details" |
||||
|
show-checkbox |
||||
|
node-key="id" |
||||
|
default-expand-all |
||||
|
@check="handleNodeCheck" |
||||
|
:expand-on-click-node="false"> |
||||
|
<div class="custom-tree-node" slot-scope="{ node, data }"> |
||||
|
<div>{{ data.itemCode }}</div> |
||||
|
<div class="right"> |
||||
|
<div class="qty">{{ data.qty }}</div> |
||||
|
<div class="locationCode"> |
||||
|
<filterSelect |
||||
|
:selectModel="data[detailsTableColumns[2].prop]" |
||||
|
:selectItem="detailsTableColumns[2]" |
||||
|
:tableScope="node" |
||||
|
@filterOptionSelectHandle="(item,props,val)=>{filterOptionSelectHandle(item,props,val,data)}" |
||||
|
@filterClearHandle="(item)=>{filterClearHandle(item,data)}" |
||||
|
></filterSelect> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-tree> |
||||
|
</el-form-item> |
||||
|
</template> |
||||
|
</curren-Form> |
||||
|
<div |
||||
|
v-if="active === step.length - 1 && pageStatus === 'success'" |
||||
|
class="page4" |
||||
|
> |
||||
|
<el-result |
||||
|
icon="success" |
||||
|
title="成功提示" |
||||
|
:subTitle="formTitle + '成功'" |
||||
|
> |
||||
|
<template slot="extra"> |
||||
|
<!-- <el-button type="primary" size="medium" @click="tuoFormPrint" |
||||
|
>打印托标签</el-button |
||||
|
> |
||||
|
<el-button type="primary" size="medium" @click="xbqFormPrint" |
||||
|
>打印箱标签</el-button |
||||
|
> --> |
||||
|
<el-button |
||||
|
v-for="item in successHandle" |
||||
|
:key="item.label" |
||||
|
:type="item.type" |
||||
|
size="medium" |
||||
|
@click="item.click()" |
||||
|
>{{ item.label }}</el-button |
||||
|
> |
||||
|
<!-- @click="successClick(item.click())" --> |
||||
|
<el-button type="primary" size="medium" @click="close(1)" |
||||
|
>退出</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-result> |
||||
|
</div> |
||||
|
<div |
||||
|
v-if="active === step.length - 1 && pageStatus === 'error'" |
||||
|
class="page4" |
||||
|
> |
||||
|
<el-result icon="error" title="错误提示" :subTitle="formTitle + '失败'"> |
||||
|
<template slot="extra"> |
||||
|
<el-button type="primary" size="medium" @click="resubmit()" |
||||
|
>重新提交</el-button |
||||
|
> |
||||
|
<el-button type="primary" size="medium" @click="active--" |
||||
|
>上一步</el-button |
||||
|
> |
||||
|
<el-button type="primary" size="medium" @click="close(1)" |
||||
|
>退出</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-result> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
<script> |
||||
|
import currenForm from "@/components/currenForm" |
||||
|
import currenTable from "@/components/currenTable" |
||||
|
import filterSelect from "@/components/filterSelect" |
||||
|
export default { |
||||
|
name: 'StepsFormTree', |
||||
|
components: { |
||||
|
currenForm, |
||||
|
currenTable, |
||||
|
filterSelect |
||||
|
}, |
||||
|
watch: { |
||||
|
active (val) { |
||||
|
if(val == 0){ |
||||
|
if(this.hideFirstActiveCancel){ |
||||
|
this.editHandle=[ |
||||
|
{ label: "下一步", type: "primary", name: "determine" }, |
||||
|
]; |
||||
|
}else{ |
||||
|
this.editHandle=[ |
||||
|
{ label: "取消", name: "cancel" }, |
||||
|
{ label: "下一步", type: "primary", name: "determine" }, |
||||
|
]; |
||||
|
} |
||||
|
}else if(val == 1){ |
||||
|
this.editHandle=[ |
||||
|
{ label: "上一步", name: "cancel" }, |
||||
|
{ label: "提交", type: "primary", name: "determine" }, |
||||
|
]; |
||||
|
} |
||||
|
}, |
||||
|
stepArray(newVal, oldVal){ |
||||
|
this.step = newVal |
||||
|
} |
||||
|
}, |
||||
|
filters: { |
||||
|
formData (val) { |
||||
|
let data = JSON.parse(JSON.stringify(val)) |
||||
|
val.forEach((key, index) => { |
||||
|
data[index].disabled = "true" |
||||
|
delete data[index].focus |
||||
|
if (key.type == "autocomplete" || key.type == "import") { |
||||
|
data[index].type = "input" |
||||
|
} |
||||
|
}); |
||||
|
return data |
||||
|
}, |
||||
|
formDataDetails (val) { |
||||
|
let data = JSON.parse(JSON.stringify(val)) |
||||
|
val.forEach((key, index) => { |
||||
|
data[index].disabled = true |
||||
|
delete data[index].focus |
||||
|
delete data[index].rules |
||||
|
if (key.type == "autocomplete" || key.type == "import") { |
||||
|
delete data[index].type |
||||
|
} else if (key.type == "objectAutocomplete") { |
||||
|
data[index].type = "object" |
||||
|
} else if (key.prop == "containerCode" && key.type == "input") { |
||||
|
data[index].disabled = false |
||||
|
} else if (key.isChange) { |
||||
|
// 针对第三步预览特殊情况处理 |
||||
|
data[index].disabled = false |
||||
|
} |
||||
|
}); |
||||
|
return data |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
//名称 |
||||
|
formTitle: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
//是否弹窗 |
||||
|
displayDialog: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return { |
||||
|
newDialog: false |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
//主表提交数据 |
||||
|
propsData: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
//主表提交数据 |
||||
|
CreateFormData: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
//主表显示form |
||||
|
CreateForm: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//检验 |
||||
|
Rules: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
//下拉选择 |
||||
|
Options: { |
||||
|
type: Object, |
||||
|
default: () => { |
||||
|
return {} |
||||
|
} |
||||
|
}, |
||||
|
//子表table显示 |
||||
|
detailsTableColumns: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//子表提交数据 |
||||
|
childTableData: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//成功后的操作 |
||||
|
successHandle: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return [] |
||||
|
} |
||||
|
}, |
||||
|
//步骤标题 |
||||
|
stepArray: { |
||||
|
type: Array, |
||||
|
default: () => { |
||||
|
return ["总体信息", "明细", "结果"] |
||||
|
} |
||||
|
}, |
||||
|
//添加一行 |
||||
|
addClickButton: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return true |
||||
|
} |
||||
|
}, |
||||
|
//导入按钮 |
||||
|
importFormButton: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
//删除行记录 |
||||
|
isShowDeleteButton: { |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return true |
||||
|
} |
||||
|
}, |
||||
|
// 隐藏第一步骤的取消按钮 |
||||
|
isHideFirstActiveCancel:{ |
||||
|
type: Boolean, |
||||
|
default: () => { |
||||
|
return false |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
computed: { |
||||
|
stepFilters () { |
||||
|
let stepFilters = [] |
||||
|
const routeName = this.$route.meta.title |
||||
|
this.step.forEach(key => { |
||||
|
stepFilters.push(routeName.concat(key)) |
||||
|
}) |
||||
|
return stepFilters |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
active: 0, |
||||
|
formReveal: 1, |
||||
|
activeStep: 1, |
||||
|
pageStatus: '', |
||||
|
addClick: this.addClickButton,//添加一行按钮 |
||||
|
importForm:this.importFormButton,//导入按钮 |
||||
|
showDeleteButton: this.isShowDeleteButton,//操作-删除按钮 |
||||
|
hideFirstActiveCancel:this.isHideFirstActiveCancel,// 隐藏第一步骤的取消按钮 |
||||
|
loading: false, |
||||
|
session: null, |
||||
|
step: this.stepArray, |
||||
|
editHandle: [ |
||||
|
{ label: "取消", name: "cancel" }, |
||||
|
{ label: "下一步", type: "primary", name: "determine" }, |
||||
|
], |
||||
|
isAllCheck:false,//是否全选 |
||||
|
selectData:[],//已选数据 |
||||
|
config:{ |
||||
|
id:'id', |
||||
|
parentId:'parentId', |
||||
|
// id:'itemCode', |
||||
|
// parentId:'parentCode', |
||||
|
children:'children' |
||||
|
}, |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.session = JSON.parse(JSON.stringify(this.CreateFormData)) |
||||
|
if(this.hideFirstActiveCancel){ |
||||
|
this.editHandle=[ |
||||
|
{ label: "下一步", type: "primary", name: "determine" }, |
||||
|
]; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleNodeCheck(data,node){ |
||||
|
console.log(data,node) |
||||
|
}, |
||||
|
// filterSelect点击option事件 |
||||
|
filterOptionSelectHandle(item,props,val,scope){ |
||||
|
this.$emit("push", item,props,val,scope); |
||||
|
}, |
||||
|
// // filterSelect点击清除事件to |
||||
|
filterClearHandle(item,scope){ |
||||
|
this.$emit("clear", item,scope); |
||||
|
}, |
||||
|
|
||||
|
// 获取最底层 |
||||
|
getLastFloors(root, onePathDeep = 1, deepArr = []){ |
||||
|
for (let i = 0; i < root.length; i++) { |
||||
|
if (root[i] == null) return 0 |
||||
|
// 没有children |
||||
|
if (!root[i][this.config.children]?.length) { |
||||
|
deepArr.push(root[i]) |
||||
|
} else { |
||||
|
onePathDeep++ |
||||
|
this.getLastFloors(root[i][this.config.children], onePathDeep, deepArr) |
||||
|
} |
||||
|
} |
||||
|
return deepArr; |
||||
|
}, |
||||
|
|
||||
|
//结束退出 |
||||
|
close (val) { |
||||
|
this.isAllCheck = false |
||||
|
this.selectData = [] |
||||
|
this.active = 0 |
||||
|
// const pageRef = this.Refs[1] |
||||
|
const data = JSON.parse(JSON.stringify(this.session)) |
||||
|
this.$emit('close', data, val) |
||||
|
}, |
||||
|
//autoComplete主表 |
||||
|
DataPush (val) { |
||||
|
this.$emit("DataPush", val) |
||||
|
}, |
||||
|
// //打印托标签 |
||||
|
// tuoFormPrint () { |
||||
|
// this.$emit('tuoFormPrint') |
||||
|
// }, |
||||
|
// //打印箱标签 |
||||
|
// xbqFormPrint () { |
||||
|
// this.$emit('xbqFormPrint') |
||||
|
// }, |
||||
|
getCheckedNodesHandle(){ |
||||
|
return this.$refs.bomTree_Ref.getCheckedNodes() |
||||
|
}, |
||||
|
successClick (val) { |
||||
|
this.loading = true |
||||
|
val.then(res => { |
||||
|
this.loading = false |
||||
|
}, reason => { |
||||
|
this.loading = false |
||||
|
}).catch(err=>{ |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
editFormClick (val) { |
||||
|
// Moment(this.CreateFormData.arriveTime).format() |
||||
|
// if (val[0] == 0) { |
||||
|
if (val[2].name == "cancel") { |
||||
|
if (this.active == 0) { |
||||
|
// debugger |
||||
|
// this.active = '' |
||||
|
this.close(0) |
||||
|
} else { |
||||
|
// if (this.active == 2) { |
||||
|
// this.active = this.active - this.activeStep |
||||
|
// } else { |
||||
|
this.active-- |
||||
|
// } |
||||
|
} |
||||
|
} else { |
||||
|
val[1].validate((valid) => { |
||||
|
if (valid) { |
||||
|
const parent = this.$parent |
||||
|
if(this.active == 0){ |
||||
|
parent.PalletlFunction(this.active).then(res => { |
||||
|
// 针对特殊环境 跳过步骤 直接到最后完成 |
||||
|
this.active++ |
||||
|
this.loading = false |
||||
|
}, reason => { |
||||
|
this.loading = false |
||||
|
}).catch(err=>{ |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}else{ |
||||
|
parent.PalletlFunction(this.active).then(res => { |
||||
|
// 针对特殊环境 跳过步骤 直接到最后完成 |
||||
|
this.loading = false |
||||
|
parent.stepsSubmit().then(res => { |
||||
|
this.pageStatus = 'success' |
||||
|
this.active++ |
||||
|
this.loading = false |
||||
|
}, reason => { |
||||
|
this.loading = false |
||||
|
if(reason=="return")return |
||||
|
this.pageStatus = 'error' |
||||
|
this.active++ |
||||
|
this.loading = false |
||||
|
}).catch(err=>{ |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, reason => { |
||||
|
this.loading = false |
||||
|
}).catch(err=>{ |
||||
|
this.loading = false |
||||
|
}) |
||||
|
} |
||||
|
} else { |
||||
|
this.$errorMsg('请检查表单') |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
resubmit(){ |
||||
|
const parent = this.$parent |
||||
|
this.loading = true |
||||
|
parent.stepsSubmit().then(res => { |
||||
|
this.pageStatus = 'success' |
||||
|
this.loading = false |
||||
|
}, reason => { |
||||
|
this.loading = false |
||||
|
if(reason=="return")return |
||||
|
this.pageStatus = 'error' |
||||
|
this.loading = false |
||||
|
}).catch(err=>{ |
||||
|
this.loading = false |
||||
|
}) |
||||
|
}, |
||||
|
//添加子表 |
||||
|
openAddNew () { |
||||
|
const parent = this.$parent |
||||
|
parent.openAddNew() |
||||
|
}, |
||||
|
// 导入 |
||||
|
openImportForm(){ |
||||
|
const parent = this.$parent |
||||
|
parent.openImportFormHandle() |
||||
|
// this.displayDialog.importDialog = true |
||||
|
}, |
||||
|
childTable (e, val) { |
||||
|
const parent = this.$parent |
||||
|
parent.childTable(e, val) |
||||
|
}, |
||||
|
changeInput(prop,val){ |
||||
|
this.$emit("changeInput", prop, val) |
||||
|
}, |
||||
|
changeSelect(prop,val){ |
||||
|
this.$emit("changeSelect", prop, val) |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "./style/index.scss"; |
||||
|
// todo:禁用按钮隐藏，层级加底色 |
||||
|
::v-deep .el-checkbox{ |
||||
|
&.is-disabled{ |
||||
|
.el-checkbox__inner{ |
||||
|
visible:hidden |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
::v-deep .el-tree-node__content{ |
||||
|
margin-bottom:10px |
||||
|
} |
||||
|
.custom-tree-node { |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
font-size: 14px; |
||||
|
padding-right: 8px; |
||||
|
|
||||
|
.right{ |
||||
|
flex: 1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: flex-end; |
||||
|
font-size: 14px; |
||||
|
padding-right: 8px; |
||||
|
} |
||||
|
.qty{ |
||||
|
padding-right:200px |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,513 @@ |
|||||
|
<template> |
||||
|
<div class="page-box" v-loading="Loading.appMainLoading"> |
||||
|
<tablePagination |
||||
|
:currenButtonData="currenButtonData" |
||||
|
:tableData="tableData" |
||||
|
:tableLoading="Loading.tableLoading" |
||||
|
:tableColumns="tableColumns" |
||||
|
@rowDrop="rowDrop" |
||||
|
:totalCount="totalCount" |
||||
|
:multipleSelection="multipleSelection" |
||||
|
:MaxResultCount="PageListParams.MaxResultCount" |
||||
|
@topbutton="topbutton" |
||||
|
@inlineDialog="inlineDialog" |
||||
|
@sortChange="sortChange" |
||||
|
@alertoldSkipCount="alertoldSkipCount" |
||||
|
@alterResultCount="alterResultCount" |
||||
|
@handleSelectionChange="handleSelectionChange" |
||||
|
:currentPageProps="oldSkipCount" |
||||
|
:quicklySearchOption="quicklySearchOption" |
||||
|
@quicklySearchClick="quicklySearchClick" |
||||
|
@quicklySearchClear="quicklySearchClear" |
||||
|
:primarySearchOption="primarySearchOption" |
||||
|
@overallSearchFormClick="overallSearchFormClick" |
||||
|
:httpOverallSearchData="httpOverallSearchData" |
||||
|
> |
||||
|
</tablePagination> |
||||
|
<curren-Drawer |
||||
|
:title="tableColumns" |
||||
|
:DrawerLoading="Loading.DrawerLoading" |
||||
|
:drawer="displayDialog.detailsDialog" |
||||
|
:propsData="propsData" |
||||
|
:Butttondata="DrawerButtonData" |
||||
|
:tabsDesTions="tabsDesTions" |
||||
|
@drawerShut="(val) => (displayDialog.detailsDialog = val)" |
||||
|
@drawerbutton="drawerbuttonHandle" |
||||
|
@handleCommand="drawerHandle" |
||||
|
@close-value="closeValue" |
||||
|
:tableColumns="detailsTableColumns" |
||||
|
:totalCount="totalCountDetails" |
||||
|
:MaxResultCount="MaxResultCountDetails" |
||||
|
@alterResultCountDetails="alterResultCountDetails" |
||||
|
@alertoldSkipCountDetails="alertoldSkipCountDetails" |
||||
|
:dropdownTabsData="[]" |
||||
|
:firstTabs="firstTabs" |
||||
|
></curren-Drawer> |
||||
|
<!--编辑--> |
||||
|
<StepsFormTree |
||||
|
ref="StepsFormTree_Ref" |
||||
|
:propsData="propsData" |
||||
|
:formTitle="formTitle" |
||||
|
:displayDialog="displayDialog" |
||||
|
:CreateFormData="CreateFormData" |
||||
|
:CreateForm="CreateForm" |
||||
|
:Rules="editRules.cerateRule" |
||||
|
:Options="editOptions" |
||||
|
:detailsTableColumns="AddDetailsTableColumns" |
||||
|
:childTableData="childTableData" |
||||
|
@push="FormTreePush" |
||||
|
@clear="FormTreeClear" |
||||
|
@close="stepsCloseHandle(arguments)" |
||||
|
:isShowDeleteButton="false" |
||||
|
:addClickButton="false" |
||||
|
:successHandle="successHandle" |
||||
|
></StepsFormTree> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { |
||||
|
getDetailed, |
||||
|
getPageList, |
||||
|
getBomByComponentTree, |
||||
|
productRecycleNoteExport, |
||||
|
productionRecycleJobHandle, |
||||
|
// productionRecycleJobComplete |
||||
|
} from "@/api/wms-api"; |
||||
|
import { tableMixins } from "@/mixins/TableMixins" |
||||
|
import { LoadingMixins } from "@/mixins/LoadingMixins" |
||||
|
import { drawerMixins } from "@/mixins/drawerMixins" |
||||
|
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins" |
||||
|
import { mixins } from "@/mixins/mixins" |
||||
|
import { filterSelectMixins } from '@/mixins/filter-Select' |
||||
|
import store from '@/store' |
||||
|
import StepsFormTree from './StepsFormTree' |
||||
|
export default { |
||||
|
name: "customerDismantleJob", |
||||
|
mixins: [ |
||||
|
tableMixins, |
||||
|
LoadingMixins, |
||||
|
drawerMixins, |
||||
|
TableHeaderMixins, |
||||
|
mixins, |
||||
|
filterSelectMixins, |
||||
|
], |
||||
|
computed: { |
||||
|
hideButton: function () { |
||||
|
return function (val) { |
||||
|
let data = true |
||||
|
val.forEach(key => { |
||||
|
if (this.propsData.jobStatus == key) { |
||||
|
data = false |
||||
|
} |
||||
|
}) |
||||
|
return data |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
components:{StepsFormTree}, |
||||
|
data () { |
||||
|
return { |
||||
|
URL: 'wms/store/production-recycle-job', |
||||
|
//常用按钮数据 |
||||
|
currenButtonData: [ |
||||
|
// this.defaultAddBtn(),//新增 |
||||
|
//导出 |
||||
|
this.defaultExportBtn(), |
||||
|
this.defaultFieldSettingBtn(),//字段设置 |
||||
|
this.defaultFreshBtn(),//刷新 |
||||
|
this.defaultFilterBtn(),//筛选 |
||||
|
], |
||||
|
DrawerButtonData: [ |
||||
|
{ |
||||
|
type: 'warning', |
||||
|
label: '执行', |
||||
|
name: "handle", |
||||
|
// 待处理+执行中+部分完成 |
||||
|
hide: () => { return this.hideButton([1,2,4]) }, |
||||
|
size: 'mini' |
||||
|
}, |
||||
|
// { |
||||
|
// type: 'success', |
||||
|
// label: '完成', |
||||
|
// name: "complete", |
||||
|
// // todo:什么状态可以执行，还是数量判断 |
||||
|
// hide: () => { return this.hideButton([1]) }, |
||||
|
// size: 'mini' |
||||
|
// }, |
||||
|
], |
||||
|
//新增 |
||||
|
CreateFormData: { |
||||
|
qty:null, |
||||
|
details:[] |
||||
|
}, |
||||
|
CreateForm: [ |
||||
|
{ type: "inputNumber", label: "数量", prop: "qty",colSpan: 12,min:1}, |
||||
|
], |
||||
|
editRules: { |
||||
|
cerateRule: { |
||||
|
qty: [ |
||||
|
{ required: true, trigger: "blur", message: "不可为空" }, |
||||
|
{ |
||||
|
type: "number", |
||||
|
trigger: ["blur"], |
||||
|
validator: (rule, value, callback) => { |
||||
|
//数量控制 |
||||
|
let _InventoryQty = Number(this.propsData.details[0].qty) - Number(this.propsData.details[0].executedQty) |
||||
|
if(_InventoryQty < value){ |
||||
|
return callback(new Error(`数量不能大于未完成数量${_InventoryQty}`)) |
||||
|
}else{ |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
AddDetailsTableColumns: [ |
||||
|
{ label: "子物料代码", prop: "itemCode",width:"auto",align:'left' }, |
||||
|
{ label: "数量", prop: 'qty',width:"auto" }, |
||||
|
{ type: "filterSelect", label: "目标库位", prop: "locationCode", optionsLabel: "name", optionsValue: "code", |
||||
|
focus: (type,val) => { return this.getFilterList(type, val, "basedata/Location",this.isFilter("type", "5"))}, |
||||
|
// searchButton: (val) => { this.showSerarchPage(val, 'basedata/Location', 'InventoryBalance', '库位选择', this.CreateFormData) }, |
||||
|
width:"auto", |
||||
|
}, |
||||
|
], |
||||
|
childTableData:[{ |
||||
|
itemCode:undefined, |
||||
|
qty:undefined, |
||||
|
locationCode:undefined, |
||||
|
locationArea:undefined, |
||||
|
locationErpCode:undefined, |
||||
|
locationGroup:undefined, |
||||
|
warehouseCode:undefined, |
||||
|
parentId:undefined |
||||
|
}], |
||||
|
successHandle:[ |
||||
|
{ |
||||
|
label:"下载报告", |
||||
|
click:(()=>{ |
||||
|
this.downloadReport() |
||||
|
}) |
||||
|
} |
||||
|
], |
||||
|
bomList:null, |
||||
|
submitRes:null,//提交后结果 |
||||
|
getBomLoading:false,//获取bom列表加载 |
||||
|
}; |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.paging(); |
||||
|
}, |
||||
|
methods: { |
||||
|
FormTreePush(item,props,val,scope){ |
||||
|
console.log(props) |
||||
|
if(props.prop == "locationCode"){ |
||||
|
scope.row.locationCode = val |
||||
|
scope.row.locationArea = item.areaCode |
||||
|
scope.row.locationErpCode = item.erpLocationCode |
||||
|
scope.row.locationGroup = item.locationGroupCode |
||||
|
scope.row.warehouseCode = item.warehouseCode |
||||
|
} |
||||
|
}, |
||||
|
FormTreeClear(item,scope){ |
||||
|
console.log(item) |
||||
|
if(item.prop == "locationCode"){ |
||||
|
scope.row.locationCode = null |
||||
|
} |
||||
|
}, |
||||
|
// bom递归生成树状节点 |
||||
|
buildTree(jsonArr){ |
||||
|
// console.log(220,this.getCycleColor(10,true,'1')) |
||||
|
|
||||
|
// 存放的最终结果树数组 |
||||
|
const result = []; |
||||
|
const id = 'id'; |
||||
|
const parentId = 'parentId'; |
||||
|
const children = 'children'; |
||||
|
const len = jsonArr.length; |
||||
|
|
||||
|
// 遍历得到以id为键名的对象(建立整棵树的索引) |
||||
|
const hash = {}; |
||||
|
jsonArr.forEach(item => { |
||||
|
hash[item[id]] = item; |
||||
|
}); |
||||
|
|
||||
|
for (let j = 0; j < len; j++) { |
||||
|
jsonArr[j].parent = jsonArr[j - 1] |
||||
|
const jsonArrItem = jsonArr[j]; |
||||
|
const hashItem = hash[jsonArrItem[parentId]]; |
||||
|
if (hashItem) { |
||||
|
// 如果当前项还没有children属性，则添加该属性并设置为空数组 |
||||
|
!hashItem[children] && (hashItem[children] = []); |
||||
|
hashItem[children].push(jsonArrItem); |
||||
|
} else { |
||||
|
result.push(jsonArrItem); |
||||
|
} |
||||
|
} |
||||
|
return result; |
||||
|
}, |
||||
|
drawerbuttonHandle(val){ |
||||
|
// 执行 |
||||
|
if (val == "handle") { |
||||
|
this.formTitle = this.$route.meta.title + "执行"; |
||||
|
this.CreateFormData = JSON.parse(JSON.stringify(this.propsData)); |
||||
|
// 默认值 |
||||
|
let _qty = Number(this.propsData.details[0].qty) - Number(this.propsData.details[0].executedQty) |
||||
|
this.$set(this.CreateFormData, "qty", _qty) |
||||
|
this.childTableData = [{ |
||||
|
itemCode:undefined, |
||||
|
qty:undefined, |
||||
|
locationCode:undefined, |
||||
|
locationArea:undefined, |
||||
|
locationErpCode:undefined, |
||||
|
locationGroup:undefined, |
||||
|
warehouseCode:undefined, |
||||
|
parentId:undefined |
||||
|
}] |
||||
|
this.theEvent = "edit" |
||||
|
this.displayDialog.newDialog = true |
||||
|
} |
||||
|
// 完成 |
||||
|
// else if(val == "complete"){ |
||||
|
// // todo:强制完成,更改wsm-api中productionRecycleJobComplete的值 |
||||
|
// this.Loading.appMainLoading = true |
||||
|
// productionRecycleJobComplete(this.propsData.id).then(res => { |
||||
|
// this.Loading.appMainLoading = false |
||||
|
// this.paging() |
||||
|
// this.displayDialog.detailsDialog = false |
||||
|
// }).catch(err => { |
||||
|
// this.Loading.appMainLoading = false |
||||
|
// }) |
||||
|
// } |
||||
|
else{ |
||||
|
this.drawerbutton(val) |
||||
|
} |
||||
|
}, |
||||
|
//过滤查询条件 |
||||
|
isFilter (val, data) { |
||||
|
let filter = [ |
||||
|
{ |
||||
|
logic: "And", |
||||
|
column: val, |
||||
|
action: "==", |
||||
|
value: data |
||||
|
} |
||||
|
] |
||||
|
return filter |
||||
|
}, |
||||
|
// 成功后按钮操作 |
||||
|
downloadReport(){ |
||||
|
// 下载 |
||||
|
let _data = { |
||||
|
maxResultCount: 20, |
||||
|
skipCount: 0, |
||||
|
sorting: "", |
||||
|
route: "wms/store/product-recycle-note/export-product-recycle", |
||||
|
function: "客户退拆记录",//导出文件名称 |
||||
|
condition: { |
||||
|
filters: [ |
||||
|
{ |
||||
|
logic: "And", |
||||
|
column: "number", |
||||
|
action: "==", |
||||
|
value: this.submitRes.remark |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
this.Loading.appMainLoading = true |
||||
|
productRecycleNoteExport(_data) |
||||
|
.then(res=>{ |
||||
|
this.Loading.appMainLoading = false |
||||
|
this.blob(res,'客户退拆记录报告')//导出文件名称 |
||||
|
}) |
||||
|
.catch(err=>{ |
||||
|
this.Loading.appMainLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 检查递归 |
||||
|
checkSelectDG(list){ |
||||
|
for (let i = 0; i < list.length; i++) { |
||||
|
} |
||||
|
}, |
||||
|
// 提交前检查所选数据，同级选择等情况处理 |
||||
|
checkSelectData(){ |
||||
|
// todo:提交时候去掉父级物料代码的信息 |
||||
|
// todo:检查所选数据，同级选择等情况处理 |
||||
|
let _isSelectData = this.$refs.StepsFormTree_Ref.selectData |
||||
|
let _select_ids = [] |
||||
|
_isSelectData.forEach(item=>{_select_ids.push(item.id)}) |
||||
|
if(!_isSelectData || _isSelectData.length <= 0){ |
||||
|
this.$warningMsg("请选择数据") |
||||
|
return |
||||
|
} |
||||
|
console.log(111,_isSelectData) |
||||
|
console.log(222,this.bomList) |
||||
|
console.log(333,_select_ids) |
||||
|
// this.bomList.forEach(item=>{ |
||||
|
// if() |
||||
|
// }) |
||||
|
// this.checkSelectDG(_isSelectData) |
||||
|
return |
||||
|
this.submitHttp() |
||||
|
}, |
||||
|
// 提交请求 |
||||
|
submitHttp(){ |
||||
|
this.bomList.forEach((item,index)=>{ |
||||
|
let _item = { |
||||
|
itemCode: item.component, |
||||
|
qty: _tableList[index].qty, |
||||
|
locationCode: _tableList[index].rawLocationCode, |
||||
|
locationArea: _tableList[index].rawLocationArea, |
||||
|
locationGroup: _tableList[index].rawLocationGroup, |
||||
|
locationErpCode: _tableList[index].rawLocationErpCode, |
||||
|
warehouseCode: _tableList[index].warehouseCode, |
||||
|
} |
||||
|
_data.details[0].materialDetails.push(_item) |
||||
|
}) |
||||
|
this.Loading.appMainLoading = true |
||||
|
this.submitRes = null |
||||
|
productionRecycleJobHandle(_jobInfo.id,_data).then(res => { |
||||
|
this.Loading.appMainLoading = false |
||||
|
this.submitRes = res |
||||
|
resolve(); |
||||
|
}).catch(err => { |
||||
|
this.Loading.appMainLoading = false |
||||
|
reject(); |
||||
|
}) |
||||
|
}, |
||||
|
// 自定义生成颜色方式 |
||||
|
getCycleColor(number,isCreate,alpha = 1,colors,append){ |
||||
|
// let _color_item = { |
||||
|
// r:parseInt(Math.random() * 255), |
||||
|
// g:parseInt(Math.random() * 255), |
||||
|
// b:parseInt(Math.random() * 255) |
||||
|
// } |
||||
|
// let _colors = colors || ['#3ca170','#5470c6', '#91cd77','#ef6567', '#f9c956','#75bedc','#529FDB','#FF8000','#88D36C','#FCC12B', |
||||
|
// '#D38C6C','#AB9DF3','#40C03A','#ED94F5','#6CBED3'] |
||||
|
let _colors = [ |
||||
|
{r:"1",g:"110",b:"244"}, |
||||
|
{r:"60",g:"161",b:"112"}, |
||||
|
{r:"84",g:"112",b:"198"}, |
||||
|
{r:"145",g:"205",b:"119"}, |
||||
|
{r:"239",g:"101",b:"103"}, |
||||
|
{r:"249",g:"201",b:"86"}, |
||||
|
{r:"117",g:"190",b:"220"}, |
||||
|
{r:"82",g:"159",b:"219"}, |
||||
|
{r:"255",g:"128",b:"0"}, |
||||
|
{r:"136",g:"211",b:"108"}, |
||||
|
{r:"252",g:"193",b:"43"}, |
||||
|
{r:"211",g:"140",b:"108"}, |
||||
|
{r:"171",g:"157",b:"243"}, |
||||
|
{r:"64",g:"192",b:"58"}, |
||||
|
{r:"237",g:"148",b:"245"}, |
||||
|
{r:"108",g:"190",b:"211"}, |
||||
|
] |
||||
|
if(colors){_colors = append ? _colors.concat(colors) : colors} |
||||
|
let _all = [] |
||||
|
let _length = number ? Math.ceil(number/_colors.length) : 1 |
||||
|
for(let i = 0;i<_length;i++){ |
||||
|
_all= _all.concat(_colors) |
||||
|
} |
||||
|
if(isCreate){ |
||||
|
let _create = [] |
||||
|
_all.forEach(item=>{ |
||||
|
let _item = `rgba(${item.r},${item.g},${item.b},${alpha})` |
||||
|
_create.push(_item) |
||||
|
}) |
||||
|
_all = _create |
||||
|
} |
||||
|
return _all |
||||
|
}, |
||||
|
stepsSubmit (val) { |
||||
|
// 提交 |
||||
|
return new Promise((resolve, reject) => { |
||||
|
let _tableList = this.CreateFormData.details |
||||
|
let _empty = 0 |
||||
|
console.log(381,_tableList) |
||||
|
_tableList.forEach(item=>{ |
||||
|
if(!item.locationCode || item.locationCode.length <= 0){ |
||||
|
_empty ++ |
||||
|
} |
||||
|
}) |
||||
|
if(_empty > 0){ |
||||
|
this.$errorMsg("目标库位不可为空") |
||||
|
return |
||||
|
} |
||||
|
let _jobInfo = this.propsData |
||||
|
let _itemInfo = this.propsData.details[0] |
||||
|
let _data = JSON.parse(JSON.stringify(_jobInfo)) |
||||
|
_data.details[0].materialDetails = [],//目前规定明细中肯定只有一个子数据 |
||||
|
_data.details[0].qty = Number(this.CreateFormData.qty) |
||||
|
this.checkSelectData() |
||||
|
}); |
||||
|
}, |
||||
|
stepsCloseHandle(data){ |
||||
|
// 关闭详情弹窗 |
||||
|
this.displayDialog.detailsDialog = false |
||||
|
this.stepsClose(data) |
||||
|
}, |
||||
|
PalletlFunction (val) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
if(val == 0){ |
||||
|
this.Loading.appMainLoading = true |
||||
|
// 获取接口生成bom列表 |
||||
|
let _itemInfo = this.propsData.details[0] |
||||
|
getBomByComponentTree(_itemInfo.itemCode) |
||||
|
.then(res=>{ |
||||
|
this.bomList = res |
||||
|
this.Loading.appMainLoading = false |
||||
|
if(res.length > 0){ |
||||
|
let _first = this.propsData.details[0] |
||||
|
this.CreateFormData.details = [] |
||||
|
let _faterLevelId = null//获取最外层在bom中的ID |
||||
|
res.forEach(item=>{ |
||||
|
if(item.product == _first.itemCode){ _faterLevelId = item.remark } |
||||
|
let _item={ |
||||
|
id:item.id, |
||||
|
itemCode:item.component, |
||||
|
parentCode:item.product, |
||||
|
// details的qty是否要乘以主表的qty值 |
||||
|
qty:Number(item.componentQty) * Number(this.CreateFormData.qty), |
||||
|
locationCode:_itemInfo.rawLocationCode, |
||||
|
locationArea:_itemInfo.rawLocationArea, |
||||
|
locationGroup:_itemInfo.rawLocationGroup, |
||||
|
locationErpCode:_itemInfo.rawLocationErpCode, |
||||
|
warehouseCode:_itemInfo.warehouseCode, |
||||
|
parentId:item.remark |
||||
|
} |
||||
|
this.CreateFormData.details.push(_item) |
||||
|
}) |
||||
|
let _tree = [{ |
||||
|
id: _faterLevelId, |
||||
|
itemCode: _first.itemCode, |
||||
|
parentCode: _first.itemCode, |
||||
|
isCheck: false, |
||||
|
children:this.buildTree(JSON.parse(JSON.stringify(this.CreateFormData.details))), |
||||
|
parentId:_faterLevelId |
||||
|
}] |
||||
|
this.CreateFormData.details = _tree |
||||
|
// this.CreateFormData.details = this.buildTree(JSON.parse(JSON.stringify(this.CreateFormData.details))) |
||||
|
resolve(); |
||||
|
}else{ |
||||
|
this.$errorMsg(`并未找到${_itemInfo.itemCode}对应的bom数据`) |
||||
|
reject() |
||||
|
} |
||||
|
}) |
||||
|
.catch(err=>{ |
||||
|
this.Loading.appMainLoading = false |
||||
|
reject() |
||||
|
}) |
||||
|
} |
||||
|
// 提交 |
||||
|
if(val == 1){ |
||||
|
resolve() |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "../../../styles/basicData.scss"; |
||||
|
</style> |
||||
@ -0,0 +1,515 @@ |
|||||
|
<template> |
||||
|
<div class="page-box" v-loading="Loading.appMainLoading"> |
||||
|
<tablePagination |
||||
|
:currenButtonData="currenButtonData" |
||||
|
:tableData="tableData" |
||||
|
:tableLoading="Loading.tableLoading" |
||||
|
:tableColumns="tableColumns" |
||||
|
@rowDrop="rowDrop" |
||||
|
:totalCount="totalCount" |
||||
|
:multipleSelection="multipleSelection" |
||||
|
:MaxResultCount="PageListParams.MaxResultCount" |
||||
|
@topbutton="topbutton" |
||||
|
@inlineDialog="inlineDialog" |
||||
|
@sortChange="sortChange" |
||||
|
@alertoldSkipCount="alertoldSkipCount" |
||||
|
@alterResultCount="alterResultCount" |
||||
|
@handleSelectionChange="handleSelectionChange" |
||||
|
:currentPageProps="oldSkipCount" |
||||
|
:quicklySearchOption="quicklySearchOption" |
||||
|
@quicklySearchClick="quicklySearchClick" |
||||
|
@quicklySearchClear="quicklySearchClear" |
||||
|
:primarySearchOption="primarySearchOption" |
||||
|
@overallSearchFormClick="overallSearchFormClick" |
||||
|
:httpOverallSearchData="httpOverallSearchData" |
||||
|
> |
||||
|
</tablePagination> |
||||
|
<curren-Drawer |
||||
|
:title="tableColumns" |
||||
|
:DrawerLoading="Loading.DrawerLoading" |
||||
|
:drawer="displayDialog.detailsDialog" |
||||
|
:propsData="propsData" |
||||
|
:Butttondata="DrawerButtonData" |
||||
|
:tabsDesTions="tabsDesTions" |
||||
|
@drawerShut="(val) => (displayDialog.detailsDialog = val)" |
||||
|
@drawerbutton="drawerbuttonHandle" |
||||
|
@handleCommand="drawerHandle" |
||||
|
@close-value="closeValue" |
||||
|
:tableColumns="detailsTableColumns" |
||||
|
:totalCount="totalCountDetails" |
||||
|
:MaxResultCount="MaxResultCountDetails" |
||||
|
@alterResultCountDetails="alterResultCountDetails" |
||||
|
@alertoldSkipCountDetails="alertoldSkipCountDetails" |
||||
|
:dropdownTabsData="[]" |
||||
|
:firstTabs="firstTabs" |
||||
|
></curren-Drawer> |
||||
|
<!--编辑--> |
||||
|
<StepsFormTree |
||||
|
ref="StepsFormTree_Ref" |
||||
|
:propsData="propsData" |
||||
|
:formTitle="formTitle" |
||||
|
:displayDialog="displayDialog" |
||||
|
:CreateFormData="CreateFormData" |
||||
|
:CreateForm="CreateForm" |
||||
|
:Rules="editRules.cerateRule" |
||||
|
:Options="editOptions" |
||||
|
:detailsTableColumns="AddDetailsTableColumns" |
||||
|
:childTableData="childTableData" |
||||
|
@push="FormTreePush" |
||||
|
@clear="FormTreeClear" |
||||
|
@close="stepsCloseHandle(arguments)" |
||||
|
:isShowDeleteButton="false" |
||||
|
:addClickButton="false" |
||||
|
:successHandle="successHandle" |
||||
|
></StepsFormTree> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { |
||||
|
getDetailed, |
||||
|
getPageList, |
||||
|
getBomByComponentTree, |
||||
|
productRecycleNoteExport, |
||||
|
productionRecycleJobHandle, |
||||
|
// productionRecycleJobComplete |
||||
|
} from "@/api/wms-api"; |
||||
|
import { tableMixins } from "@/mixins/TableMixins" |
||||
|
import { LoadingMixins } from "@/mixins/LoadingMixins" |
||||
|
import { drawerMixins } from "@/mixins/drawerMixins" |
||||
|
import { TableHeaderMixins } from "@/mixins/TableHeaderMixins" |
||||
|
import { mixins } from "@/mixins/mixins" |
||||
|
import { filterSelectMixins } from '@/mixins/filter-Select' |
||||
|
import store from '@/store' |
||||
|
import StepsFormTree from './StepsFormTree' |
||||
|
export default { |
||||
|
name: "customerDismantleJob", |
||||
|
mixins: [ |
||||
|
tableMixins, |
||||
|
LoadingMixins, |
||||
|
drawerMixins, |
||||
|
TableHeaderMixins, |
||||
|
mixins, |
||||
|
filterSelectMixins, |
||||
|
], |
||||
|
computed: { |
||||
|
hideButton: function () { |
||||
|
return function (val) { |
||||
|
let data = true |
||||
|
val.forEach(key => { |
||||
|
if (this.propsData.jobStatus == key) { |
||||
|
data = false |
||||
|
} |
||||
|
}) |
||||
|
return data |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
components:{StepsFormTree}, |
||||
|
data () { |
||||
|
return { |
||||
|
URL: 'wms/store/production-recycle-job', |
||||
|
//常用按钮数据 |
||||
|
currenButtonData: [ |
||||
|
// this.defaultAddBtn(),//新增 |
||||
|
//导出 |
||||
|
this.defaultExportBtn(), |
||||
|
this.defaultFieldSettingBtn(),//字段设置 |
||||
|
this.defaultFreshBtn(),//刷新 |
||||
|
this.defaultFilterBtn(),//筛选 |
||||
|
], |
||||
|
DrawerButtonData: [ |
||||
|
{ |
||||
|
type: 'warning', |
||||
|
label: '执行', |
||||
|
name: "handle", |
||||
|
// 待处理+执行中+部分完成 |
||||
|
hide: () => { return this.hideButton([1,2,4]) }, |
||||
|
size: 'mini' |
||||
|
}, |
||||
|
// { |
||||
|
// type: 'success', |
||||
|
// label: '完成', |
||||
|
// name: "complete", |
||||
|
// // todo:什么状态可以执行，还是数量判断 |
||||
|
// hide: () => { return this.hideButton([1]) }, |
||||
|
// size: 'mini' |
||||
|
// }, |
||||
|
], |
||||
|
//新增 |
||||
|
CreateFormData: { |
||||
|
qty:null, |
||||
|
details:[] |
||||
|
}, |
||||
|
CreateForm: [ |
||||
|
{ type: "inputNumber", label: "数量", prop: "qty",colSpan: 12,min:1}, |
||||
|
], |
||||
|
editRules: { |
||||
|
cerateRule: { |
||||
|
qty: [ |
||||
|
{ required: true, trigger: "blur", message: "不可为空" }, |
||||
|
{ |
||||
|
type: "number", |
||||
|
trigger: ["blur"], |
||||
|
validator: (rule, value, callback) => { |
||||
|
//数量控制 |
||||
|
let _InventoryQty = Number(this.propsData.details[0].qty) - Number(this.propsData.details[0].executedQty) |
||||
|
if(_InventoryQty < value){ |
||||
|
return callback(new Error(`数量不能大于未完成数量${_InventoryQty}`)) |
||||
|
}else{ |
||||
|
callback() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
AddDetailsTableColumns: [ |
||||
|
{ label: "子物料代码", prop: "itemCode",width:"auto",align:'left' }, |
||||
|
{ label: "数量", prop: 'qty',width:"auto" }, |
||||
|
{ type: "filterSelect", label: "目标库位", prop: "locationCode", optionsLabel: "name", optionsValue: "code", |
||||
|
focus: (type,val) => { return this.getFilterList(type, val, "basedata/Location",this.isFilter("type", "5"))}, |
||||
|
// searchButton: (val) => { this.showSerarchPage(val, 'basedata/Location', 'InventoryBalance', '库位选择', this.CreateFormData) }, |
||||
|
width:"auto",size:"mini" |
||||
|
}, |
||||
|
], |
||||
|
childTableData:[{ |
||||
|
itemCode:undefined, |
||||
|
qty:undefined, |
||||
|
locationCode:undefined, |
||||
|
locationArea:undefined, |
||||
|
locationErpCode:undefined, |
||||
|
locationGroup:undefined, |
||||
|
warehouseCode:undefined, |
||||
|
parentId:undefined |
||||
|
}], |
||||
|
successHandle:[ |
||||
|
{ |
||||
|
label:"下载报告", |
||||
|
click:(()=>{ |
||||
|
this.downloadReport() |
||||
|
}) |
||||
|
} |
||||
|
], |
||||
|
bomList:null, |
||||
|
submitRes:null,//提交后结果 |
||||
|
getBomLoading:false,//获取bom列表加载 |
||||
|
}; |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.paging(); |
||||
|
}, |
||||
|
methods: { |
||||
|
FormTreePush(item,props,val,scope){ |
||||
|
console.log(203,props) |
||||
|
console.log(2034,scope) |
||||
|
if(props.prop == "locationCode"){ |
||||
|
scope.locationCode = val |
||||
|
scope.locationArea = item.areaCode |
||||
|
scope.locationErpCode = item.erpLocationCode |
||||
|
scope.locationGroup = item.locationGroupCode |
||||
|
scope.warehouseCode = item.warehouseCode |
||||
|
} |
||||
|
}, |
||||
|
FormTreeClear(item,scope){ |
||||
|
console.log(item) |
||||
|
if(item.prop == "locationCode"){ |
||||
|
scope.locationCode = null |
||||
|
} |
||||
|
}, |
||||
|
// bom递归生成树状节点 |
||||
|
buildTree(jsonArr){ |
||||
|
// console.log(220,this.getCycleColor(10,true,'1')) |
||||
|
|
||||
|
// 存放的最终结果树数组 |
||||
|
const result = []; |
||||
|
const id = 'id'; |
||||
|
const parentId = 'parentId'; |
||||
|
const children = 'children'; |
||||
|
const len = jsonArr.length; |
||||
|
|
||||
|
// 遍历得到以id为键名的对象(建立整棵树的索引) |
||||
|
const hash = {}; |
||||
|
jsonArr.forEach(item => { |
||||
|
hash[item[id]] = item; |
||||
|
}); |
||||
|
|
||||
|
for (let j = 0; j < len; j++) { |
||||
|
jsonArr[j].parent = jsonArr[j - 1] |
||||
|
const jsonArrItem = jsonArr[j]; |
||||
|
const hashItem = hash[jsonArrItem[parentId]]; |
||||
|
if (hashItem) { |
||||
|
// 如果当前项还没有children属性，则添加该属性并设置为空数组 |
||||
|
!hashItem[children] && (hashItem[children] = []); |
||||
|
hashItem[children].push(jsonArrItem); |
||||
|
} else { |
||||
|
result.push(jsonArrItem); |
||||
|
} |
||||
|
} |
||||
|
return result; |
||||
|
}, |
||||
|
drawerbuttonHandle(val){ |
||||
|
// 执行 |
||||
|
if (val == "handle") { |
||||
|
this.formTitle = this.$route.meta.title + "执行"; |
||||
|
this.CreateFormData = JSON.parse(JSON.stringify(this.propsData)); |
||||
|
// 默认值 |
||||
|
let _qty = Number(this.propsData.details[0].qty) - Number(this.propsData.details[0].executedQty) |
||||
|
this.$set(this.CreateFormData, "qty", _qty) |
||||
|
this.childTableData = [{ |
||||
|
itemCode:undefined, |
||||
|
qty:undefined, |
||||
|
locationCode:undefined, |
||||
|
locationArea:undefined, |
||||
|
locationErpCode:undefined, |
||||
|
locationGroup:undefined, |
||||
|
warehouseCode:undefined, |
||||
|
parentId:undefined |
||||
|
}] |
||||
|
this.theEvent = "edit" |
||||
|
this.displayDialog.newDialog = true |
||||
|
} |
||||
|
// 完成 |
||||
|
// else if(val == "complete"){ |
||||
|
// // todo:强制完成,更改wsm-api中productionRecycleJobComplete的值 |
||||
|
// this.Loading.appMainLoading = true |
||||
|
// productionRecycleJobComplete(this.propsData.id).then(res => { |
||||
|
// this.Loading.appMainLoading = false |
||||
|
// this.paging() |
||||
|
// this.displayDialog.detailsDialog = false |
||||
|
// }).catch(err => { |
||||
|
// this.Loading.appMainLoading = false |
||||
|
// }) |
||||
|
// } |
||||
|
else{ |
||||
|
this.drawerbutton(val) |
||||
|
} |
||||
|
}, |
||||
|
//过滤查询条件 |
||||
|
isFilter (val, data) { |
||||
|
let filter = [ |
||||
|
{ |
||||
|
logic: "And", |
||||
|
column: val, |
||||
|
action: "==", |
||||
|
value: data |
||||
|
} |
||||
|
] |
||||
|
return filter |
||||
|
}, |
||||
|
// 成功后按钮操作 |
||||
|
downloadReport(){ |
||||
|
// 下载 |
||||
|
let _data = { |
||||
|
maxResultCount: 20, |
||||
|
skipCount: 0, |
||||
|
sorting: "", |
||||
|
route: "wms/store/product-recycle-note/export-product-recycle", |
||||
|
function: "客户退拆记录",//导出文件名称 |
||||
|
condition: { |
||||
|
filters: [ |
||||
|
{ |
||||
|
logic: "And", |
||||
|
column: "number", |
||||
|
action: "==", |
||||
|
value: this.submitRes.remark |
||||
|
} |
||||
|
] |
||||
|
} |
||||
|
} |
||||
|
this.Loading.appMainLoading = true |
||||
|
productRecycleNoteExport(_data) |
||||
|
.then(res=>{ |
||||
|
this.Loading.appMainLoading = false |
||||
|
this.blob(res,'客户退拆记录报告')//导出文件名称 |
||||
|
}) |
||||
|
.catch(err=>{ |
||||
|
this.Loading.appMainLoading = false |
||||
|
}) |
||||
|
}, |
||||
|
// 检查递归 |
||||
|
checkSelectDG(list){ |
||||
|
for (let i = 0; i < list.length; i++) { |
||||
|
} |
||||
|
}, |
||||
|
// 提交前检查所选数据，同级选择等情况处理 |
||||
|
checkSelectData(){ |
||||
|
console.log(335,this.$refs.StepsFormTree_Ref.getCheckedNodesHandle()) |
||||
|
// todo:提交时候去掉父级物料代码的信息 |
||||
|
// todo:检查所选数据，同级选择等情况处理 |
||||
|
let _isSelectData = this.$refs.StepsFormTree_Ref.selectData |
||||
|
let _select_ids = [] |
||||
|
_isSelectData.forEach(item=>{_select_ids.push(item.id)}) |
||||
|
if(!_isSelectData || _isSelectData.length <= 0){ |
||||
|
this.$warningMsg("请选择数据") |
||||
|
return |
||||
|
} |
||||
|
console.log(111,_isSelectData) |
||||
|
console.log(222,this.bomList) |
||||
|
console.log(333,_select_ids) |
||||
|
// this.bomList.forEach(item=>{ |
||||
|
// if() |
||||
|
// }) |
||||
|
// this.checkSelectDG(_isSelectData) |
||||
|
return |
||||
|
this.submitHttp() |
||||
|
}, |
||||
|
// 提交请求 |
||||
|
submitHttp(){ |
||||
|
this.bomList.forEach((item,index)=>{ |
||||
|
let _item = { |
||||
|
itemCode: item.component, |
||||
|
qty: _tableList[index].qty, |
||||
|
locationCode: _tableList[index].rawLocationCode, |
||||
|
locationArea: _tableList[index].rawLocationArea, |
||||
|
locationGroup: _tableList[index].rawLocationGroup, |
||||
|
locationErpCode: _tableList[index].rawLocationErpCode, |
||||
|
warehouseCode: _tableList[index].warehouseCode, |
||||
|
} |
||||
|
_data.details[0].materialDetails.push(_item) |
||||
|
}) |
||||
|
this.Loading.appMainLoading = true |
||||
|
this.submitRes = null |
||||
|
productionRecycleJobHandle(_jobInfo.id,_data).then(res => { |
||||
|
this.Loading.appMainLoading = false |
||||
|
this.submitRes = res |
||||
|
resolve(); |
||||
|
}).catch(err => { |
||||
|
this.Loading.appMainLoading = false |
||||
|
reject(); |
||||
|
}) |
||||
|
}, |
||||
|
// 自定义生成颜色方式 |
||||
|
getCycleColor(number,isCreate,alpha = 1,colors,append){ |
||||
|
// let _color_item = { |
||||
|
// r:parseInt(Math.random() * 255), |
||||
|
// g:parseInt(Math.random() * 255), |
||||
|
// b:parseInt(Math.random() * 255) |
||||
|
// } |
||||
|
// let _colors = colors || ['#3ca170','#5470c6', '#91cd77','#ef6567', '#f9c956','#75bedc','#529FDB','#FF8000','#88D36C','#FCC12B', |
||||
|
// '#D38C6C','#AB9DF3','#40C03A','#ED94F5','#6CBED3'] |
||||
|
let _colors = [ |
||||
|
{r:"1",g:"110",b:"244"}, |
||||
|
{r:"60",g:"161",b:"112"}, |
||||
|
{r:"84",g:"112",b:"198"}, |
||||
|
{r:"145",g:"205",b:"119"}, |
||||
|
{r:"239",g:"101",b:"103"}, |
||||
|
{r:"249",g:"201",b:"86"}, |
||||
|
{r:"117",g:"190",b:"220"}, |
||||
|
{r:"82",g:"159",b:"219"}, |
||||
|
{r:"255",g:"128",b:"0"}, |
||||
|
{r:"136",g:"211",b:"108"}, |
||||
|
{r:"252",g:"193",b:"43"}, |
||||
|
{r:"211",g:"140",b:"108"}, |
||||
|
{r:"171",g:"157",b:"243"}, |
||||
|
{r:"64",g:"192",b:"58"}, |
||||
|
{r:"237",g:"148",b:"245"}, |
||||
|
{r:"108",g:"190",b:"211"}, |
||||
|
] |
||||
|
if(colors){_colors = append ? _colors.concat(colors) : colors} |
||||
|
let _all = [] |
||||
|
let _length = number ? Math.ceil(number/_colors.length) : 1 |
||||
|
for(let i = 0;i<_length;i++){ |
||||
|
_all= _all.concat(_colors) |
||||
|
} |
||||
|
if(isCreate){ |
||||
|
let _create = [] |
||||
|
_all.forEach(item=>{ |
||||
|
let _item = `rgba(${item.r},${item.g},${item.b},${alpha})` |
||||
|
_create.push(_item) |
||||
|
}) |
||||
|
_all = _create |
||||
|
} |
||||
|
return _all |
||||
|
}, |
||||
|
stepsSubmit (val) { |
||||
|
// 提交 |
||||
|
return new Promise((resolve, reject) => { |
||||
|
let _tableList = this.CreateFormData.details |
||||
|
let _empty = 0 |
||||
|
console.log(381,_tableList) |
||||
|
_tableList.forEach(item=>{ |
||||
|
if(!item.locationCode || item.locationCode.length <= 0){ |
||||
|
_empty ++ |
||||
|
} |
||||
|
}) |
||||
|
if(_empty > 0){ |
||||
|
this.$errorMsg("目标库位不可为空") |
||||
|
return |
||||
|
} |
||||
|
let _jobInfo = this.propsData |
||||
|
let _itemInfo = this.propsData.details[0] |
||||
|
let _data = JSON.parse(JSON.stringify(_jobInfo)) |
||||
|
_data.details[0].materialDetails = [],//目前规定明细中肯定只有一个子数据 |
||||
|
_data.details[0].qty = Number(this.CreateFormData.qty) |
||||
|
this.checkSelectData() |
||||
|
}); |
||||
|
}, |
||||
|
stepsCloseHandle(data){ |
||||
|
// 关闭详情弹窗 |
||||
|
this.displayDialog.detailsDialog = false |
||||
|
this.stepsClose(data) |
||||
|
}, |
||||
|
PalletlFunction (val) { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
if(val == 0){ |
||||
|
this.Loading.appMainLoading = true |
||||
|
// 获取接口生成bom列表 |
||||
|
let _itemInfo = this.propsData.details[0] |
||||
|
getBomByComponentTree(_itemInfo.itemCode) |
||||
|
.then(res=>{ |
||||
|
this.bomList = res |
||||
|
this.Loading.appMainLoading = false |
||||
|
if(res.length > 0){ |
||||
|
let _first = this.propsData.details[0] |
||||
|
this.CreateFormData.details = [] |
||||
|
let _faterLevelId = null//获取最外层在bom中的ID |
||||
|
res.forEach(item=>{ |
||||
|
if(item.product == _first.itemCode){ _faterLevelId = item.remark } |
||||
|
let _item={ |
||||
|
id:item.id, |
||||
|
itemCode:item.component, |
||||
|
parentCode:item.product, |
||||
|
// details的qty是否要乘以主表的qty值 |
||||
|
qty:Number(item.componentQty) * Number(this.CreateFormData.qty), |
||||
|
locationCode:_itemInfo.rawLocationCode, |
||||
|
locationArea:_itemInfo.rawLocationArea, |
||||
|
locationGroup:_itemInfo.rawLocationGroup, |
||||
|
locationErpCode:_itemInfo.rawLocationErpCode, |
||||
|
warehouseCode:_itemInfo.warehouseCode, |
||||
|
parentId:item.remark |
||||
|
} |
||||
|
this.CreateFormData.details.push(_item) |
||||
|
}) |
||||
|
// let _tree = [{ |
||||
|
// id: _faterLevelId, |
||||
|
// itemCode: _first.itemCode, |
||||
|
// parentCode: _first.itemCode, |
||||
|
// isCheck: false, |
||||
|
// children:this.buildTree(JSON.parse(JSON.stringify(this.CreateFormData.details))), |
||||
|
// parentId:_faterLevelId |
||||
|
// }] |
||||
|
// this.CreateFormData.details = _tree |
||||
|
this.CreateFormData.details = this.buildTree(JSON.parse(JSON.stringify(this.CreateFormData.details))) |
||||
|
resolve(); |
||||
|
}else{ |
||||
|
this.$errorMsg(`并未找到${_itemInfo.itemCode}对应的bom数据`) |
||||
|
reject() |
||||
|
} |
||||
|
}) |
||||
|
.catch(err=>{ |
||||
|
this.Loading.appMainLoading = false |
||||
|
reject() |
||||
|
}) |
||||
|
} |
||||
|
// 提交 |
||||
|
if(val == 1){ |
||||
|
resolve() |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
@import "../../../styles/basicData.scss"; |
||||
|
</style> |
||||
Loading…
Reference in new issue