5 changed files with 354 additions and 644 deletions
@ -1,542 +0,0 @@ |
|||||
<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="false" |
|
||||
> |
|
||||
<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"> |
|
||||
<div class="heder"> |
|
||||
<el-button |
|
||||
v-if="addClick" |
|
||||
type="primary" |
|
||||
@click="openAddNew" |
|
||||
icon="el-icon-plus" |
|
||||
size="mini" |
|
||||
>添加一行</el-button> |
|
||||
|
|
||||
<el-button |
|
||||
v-if="importFormButton" |
|
||||
type="success" |
|
||||
icon="el-icon-download" |
|
||||
@click="openImportForm" |
|
||||
size="mini" |
|
||||
>导入</el-button> |
|
||||
</div> |
|
||||
<b style="font-size:20px;padding-bottom:10px">父级物料代码：{{ propsData.details[0].itemCode }}</b> |
|
||||
<currenTable |
|
||||
ref="bomTree_Ref" |
|
||||
:tableData="CreateFormData.details" |
|
||||
:searchOptions="Options" |
|
||||
:tableColumns="detailsTableColumns" |
|
||||
:selectionTable="true" |
|
||||
@push="detailsDataPush(arguments)" |
|
||||
@clear="detailsClear(arguments)" |
|
||||
@tableHandleSelect="tableHandleSelect" |
|
||||
@tableHandleSelectAll="tableHandleSelectAll" |
|
||||
:isDefaultExpandAll="true" |
|
||||
:treeProps="{children: 'children', hasChildren: 'hasChildren'}" |
|
||||
> |
|
||||
<template v-if="showDeleteButton"> |
|
||||
<el-table-column |
|
||||
label="操作" |
|
||||
align="center" |
|
||||
fixed="right" |
|
||||
width="100px" |
|
||||
> |
|
||||
<template slot-scope="scope"> |
|
||||
<div class="childTable" @click="childTable($event, scope)"> |
|
||||
<span>删除</span> |
|
||||
</div> |
|
||||
</template> |
|
||||
</el-table-column> |
|
||||
</template> |
|
||||
</currenTable> |
|
||||
</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="close(1)" |
|
||||
>退出</el-button |
|
||||
> |
|
||||
</template> |
|
||||
</el-result> |
|
||||
</div> |
|
||||
</div> |
|
||||
</el-dialog> |
|
||||
</template> |
|
||||
<script> |
|
||||
import currenForm from "@/components/currenForm" |
|
||||
import currenTable from "@/components/currenTable" |
|
||||
export default { |
|
||||
name: 'StepsFormTree', |
|
||||
components: { |
|
||||
currenForm, |
|
||||
currenTable |
|
||||
}, |
|
||||
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:[],//已选数据 |
|
||||
} |
|
||||
}, |
|
||||
mounted () { |
|
||||
this.session = JSON.parse(JSON.stringify(this.CreateFormData)) |
|
||||
if(this.hideFirstActiveCancel){ |
|
||||
this.editHandle=[ |
|
||||
{ label: "下一步", type: "primary", name: "determine" }, |
|
||||
]; |
|
||||
} |
|
||||
}, |
|
||||
methods: { |
|
||||
// 选择操作 |
|
||||
tableHandleSelect(selection, row){ |
|
||||
this.selectData = selection |
|
||||
const isCheck = selection.length && selection.indexOf(row) !== -1 |
|
||||
if(selection.length <= 0){} |
|
||||
if (isCheck) { |
|
||||
console.log("勾选",selection, row) |
|
||||
}else{ |
|
||||
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].children?.length) { |
|
||||
deepArr.push(root[i]) |
|
||||
} else { |
|
||||
onePathDeep++ |
|
||||
this.getLastFloors(root[i].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.$refs.multipleTable.clearSelection(); |
|
||||
this.selectData.forEach(item=>{ |
|
||||
this.$refs.bomTree_Ref.$refs.multipleTable.toggleRowSelection(item,true); |
|
||||
}) |
|
||||
}else{ |
|
||||
console.log("全不选",selection) |
|
||||
this.$refs.bomTree_Ref.$refs.multipleTable.clearSelection(); |
|
||||
this.selectData = [] |
|
||||
} |
|
||||
}, |
|
||||
//结束退出 |
|
||||
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) |
|
||||
}, |
|
||||
//autoComplete子表 |
|
||||
detailsDataPush (val) { |
|
||||
this.$emit("detailsDataPush", val) |
|
||||
}, |
|
||||
detailsClear(val) { |
|
||||
this.$emit("detailsClear", 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"; |
|
||||
</style> |
|
||||
Loading…
Reference in new issue