19 changed files with 2339 additions and 540 deletions
@ -1,309 +0,0 @@ |
|||
<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> |
|||
<!-- 执行 --> |
|||
<handelFrom |
|||
:formTitle="formTitle" |
|||
:displayDialog.sync="displayDialog.handleFromDialog" |
|||
:CreateFormData="handleFormData" |
|||
:CreateForm="handleForm" |
|||
:Rules="editRules.handleRule" |
|||
:Options="editOptions" |
|||
:detailsTableColumns="handleDetailsTableColumns" |
|||
@FormSubmit="handleFormSubmit" |
|||
></handelFrom> |
|||
<curren-Drawer |
|||
:title="tableColumns" |
|||
:DrawerLoading="Loading.DrawerLoading" |
|||
:drawer="displayDialog.detailsDialog" |
|||
:propsData="propsData" |
|||
:tabsDesTions="tabsDesTions" |
|||
:Butttondata="[]" |
|||
@drawerShut="(val) => (displayDialog.detailsDialog = val)" |
|||
@drawerbutton="drawerbutton" |
|||
@close-value="closeValue" |
|||
:currenButtonData="currenButtonData" |
|||
:tableColumns="detailsTableColumns" |
|||
:totalCount="totalCountDetails" |
|||
:MaxResultCount="MaxResultCountDetails" |
|||
@alterResultCountDetails="alterResultCountDetails" |
|||
@alertoldSkipCountDetails="alertoldSkipCountDetails" |
|||
></curren-Drawer> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getDetailed, handle, accept, Invalid } from "@/api/wms-job" |
|||
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 detailsRules from '@/utils/rules'; |
|||
export default { |
|||
name: "completDumpJob", |
|||
mixins: [ |
|||
tableMixins, |
|||
LoadingMixins, |
|||
drawerMixins, |
|||
TableHeaderMixins, |
|||
mixins, |
|||
], |
|||
computed: { |
|||
editDialog: { |
|||
get: function () { |
|||
return this.displayDialog.newDialog || this.displayDialog.editDialog; |
|||
}, |
|||
}, |
|||
hideButton: function () { |
|||
return function (val) { |
|||
let data = true |
|||
val.forEach(key => { |
|||
if (this.propsData.jobStatus == key) { |
|||
data = false |
|||
} |
|||
}) |
|||
return data |
|||
} |
|||
}, |
|||
}, |
|||
data () { |
|||
return { |
|||
URL: 'wms/store/purchase-return-job', |
|||
//常用按钮数据 |
|||
currenButtonData: [ |
|||
this.defaultFieldSettingBtn(),//字段设置 |
|||
this.defaultFreshBtn(),//刷新 |
|||
this.defaultFilterBtn(),//筛选 |
|||
], |
|||
DrawerButtonData: [ |
|||
{ |
|||
type: 'primary', |
|||
icon: 'el-icon-circle-check', |
|||
label: '承接', |
|||
name: "accept", |
|||
hide: () => { return this.hideButton([1]) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'warning', |
|||
icon: 'el-icon-circle-check', |
|||
label: '执行', |
|||
name: "handle", |
|||
hide: () => { return this.hideButton([2]) }, |
|||
size: 'mini' |
|||
}, |
|||
{ |
|||
type: 'danger', |
|||
icon: 'el-icon-delete-solid', |
|||
label: '作废', |
|||
name: "invalid", |
|||
hide: () => { return this.hideButton([1,2]) }, |
|||
size: 'mini' |
|||
} |
|||
], |
|||
handleDetailsTableColumns: [ |
|||
{ |
|||
label: "箱标签", |
|||
prop: "handledPackingCode", |
|||
}, |
|||
{ label: "物品代码", prop: "itemCode", }, |
|||
{ label: "物品名称", prop: "itemName" }, |
|||
{ type: "objectInput", valueType: Number, rules: detailsRules.numberInput, label: "收货数量", prop: "handledQty", showProp: "qty", }, |
|||
{ label: "包装数量", prop: "stdPackQty", }, |
|||
{ type: "input", rules: detailsRules.detailsRules, label: "实际库位", prop: "handledLocationCode", }, |
|||
{ label: "推荐库位", prop: "recommendLocationCode", }, |
|||
{ label: "包装单位", prop: "stdPackUom", }, |
|||
{ type: "object", label: "收货单位", prop: "handledQty", showProp: "uom", }, |
|||
{ label: "订单号", prop: "poNumber", }, |
|||
{ label: "订单行", prop: "poLine", }, |
|||
{ label: "备注", prop: 'remark', }, |
|||
], |
|||
editOptions: { |
|||
}, |
|||
handleFormData: { |
|||
"id": null, |
|||
"creationTime": null, |
|||
"lastModificationTime": null, |
|||
"remark": null, |
|||
"concurrencyStamp": null, |
|||
"company": null, |
|||
"number": null, |
|||
"upStreamJobNumber": null, |
|||
"arriveNoticeNumber": null, |
|||
"purchaseReceiptNumber": null, |
|||
"asnNumber": null, |
|||
"poNumber": null, |
|||
"supplierCode": null, |
|||
"jobType": 1, |
|||
"jobStatus": 1, |
|||
"priority": 0, |
|||
"priorityIncrement": 0, |
|||
"wlgCode": "123", |
|||
"isAutoComplete": true, |
|||
"details": [], |
|||
"acceptTime": null, |
|||
"completeTime": null |
|||
}, |
|||
childTableData: [ |
|||
{ |
|||
"id": null, |
|||
"creationTime": null, |
|||
"lastModificationTime": null, |
|||
"remark": null, |
|||
"concurrencyStamp": null, |
|||
"masterID": null, |
|||
"packingCode": null, |
|||
"containerCode": null, |
|||
"item": { |
|||
"id": null, |
|||
"name": null, |
|||
"desc1": null, |
|||
"desc2": null |
|||
}, |
|||
"itemCode": null, |
|||
"batch": { |
|||
"supplierBatch": null, |
|||
"produceDate": null |
|||
}, |
|||
"lot": null, |
|||
"stdPack": { |
|||
"packUom": null, |
|||
"packQty": 0 |
|||
}, |
|||
"recommendLocationCode": null, |
|||
"recomendQty": { |
|||
"uom": null, |
|||
"qty": 0 |
|||
}, |
|||
"handledLocationCode": null, |
|||
"handledQty": { |
|||
"uom": null, |
|||
"qty": 0 |
|||
} |
|||
} |
|||
], |
|||
handleForm: [ |
|||
{ type: "input", label: "任务编号", prop: "number", colSpan: 12, disabled: "true" }, |
|||
{ type: "input", label: "到货编号", prop: "arriveNoticeNumber", colSpan: 12, disabled: "true" }, |
|||
{ type: "select", label: "任务类型", prop: "jobType", options: "taskType", colSpan: 12, disabled: "true" }, |
|||
{ type: "select", label: "任务状态", prop: "jobStatus", options: "jobStatus", colSpan: 12, disabled: "true" }, |
|||
{ type: "input", label: "优先级", prop: "priority", colSpan: 12, disabled: "true" }, |
|||
{ type: "input", label: "工作组", prop: "wlgCode", colSpan: 12, disabled: "true" }, |
|||
{ type: "input", label: "订单号", prop: "poNumber", colSpan: 12, }, |
|||
{ type: "dateTime", label: "接收时间", prop: "acceptTime", colSpan: 12, }, |
|||
{ type: "input", label: "备注", prop: "remark", colSpan: 12, }, |
|||
], |
|||
editRules: { |
|||
handleRule: { |
|||
number: [{ required: true, trigger: ["blur", "change"], message: "不可为空" }], |
|||
jobType: [{ required: true, trigger: "blur", message: "不可为空" }], |
|||
poNumber: [{ required: true, trigger: "blur", message: "不可为空" }], |
|||
jobStatus: [{ required: true, trigger: "blur", message: "不可为空" }], |
|||
priority: [{ required: true, trigger: "blur", message: "不可为空" }], |
|||
} |
|||
}, |
|||
}; |
|||
}, |
|||
mounted () { |
|||
this.paging(); |
|||
}, |
|||
methods: { |
|||
// //抽屉常用按钮 |
|||
drawerbutton (val) { |
|||
if (val == 'accept') { |
|||
let data = { |
|||
id: this.propsData.id |
|||
} |
|||
this.Loading.appMainLoading = true |
|||
accept(this.URL, data).then(res => { |
|||
this.$successMsg('已承接任务！') |
|||
this.Loading.appMainLoading = false |
|||
getDetailed(this.propsData.id, this.URL).then(res => { |
|||
this.propsData = res |
|||
// this.displayDialog.detailsDialog = true; |
|||
}) |
|||
this.paging(); |
|||
}).catch(err => { |
|||
this.Loading.appMainLoading = false |
|||
}) |
|||
} else if (val == 'handle') { |
|||
this.Loading.appMainLoading = true |
|||
let propsData = JSON.parse(JSON.stringify(this.propsData)); |
|||
this.$listAssign(this.handleFormData, propsData) |
|||
this.handleFormData.details = [] |
|||
// let data = JSON.parse(JSON.stringify(...this.childTableData)) |
|||
propsData.details.forEach(item => { |
|||
let data = JSON.parse(JSON.stringify(...this.childTableData)) |
|||
this.$listAssign(data, item) |
|||
this.handleFormData.details.push(data) |
|||
// delete item.arriveNumber |
|||
// delete item.supplierPack |
|||
// delete item.convertRate |
|||
}) |
|||
this.Loading.appMainLoading = false |
|||
this.formTitle = "执行" + this.$route.meta.title; |
|||
this.displayDialog.handleFromDialog = true |
|||
}else if(val == 'invalid'){ |
|||
let data = { |
|||
id: this.propsData.id |
|||
} |
|||
this.Loading.appMainLoading = true |
|||
Invalid(this.URL, data).then(res=>{ |
|||
this.displayDialog.detailsDialog = false |
|||
this.$successMsg('已作废任务！') |
|||
this.paging() |
|||
this.Loading.appMainLoading = false |
|||
}).catch(err=>{ |
|||
this.Loading.appMainLoading = false |
|||
}) |
|||
} |
|||
}, |
|||
handleFormSubmit (val) { |
|||
return new Promise((resolve, reject) => { |
|||
let data = { |
|||
id: this.propsData.id |
|||
} |
|||
handle(this.handleFormData, data, this.URL).then(res => { |
|||
this.displayDialog.handleFromDialog = false; |
|||
this.$successMsg('已生成采购退货记录！') |
|||
getDetailed(this.propsData.id, this.URL).then(res => { |
|||
this.propsData = res |
|||
// this.displayDialog.detailsDialog = true; |
|||
}) |
|||
this.paging() |
|||
this.FormRemove(val) |
|||
resolve() |
|||
}).catch(err => { |
|||
reject(); |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "../../../styles/mainbasicData.scss"; |
|||
</style> |
|||
@ -0,0 +1,112 @@ |
|||
<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" |
|||
:tabsDesTions="tabsDesTions" |
|||
:Butttondata="DrawerButtonData" |
|||
@drawerShut="(val) => (displayDialog.detailsDialog = val)" |
|||
@close-value="closeValue" |
|||
@drawerbutton="drawerbutton" |
|||
:tableColumns="detailsTableColumns" |
|||
:totalCount="totalCountDetails" |
|||
:MaxResultCount="MaxResultCountDetails" |
|||
@alterResultCountDetails="alterResultCountDetails" |
|||
@alertoldSkipCountDetails="alertoldSkipCountDetails" |
|||
></curren-Drawer> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { getPageListWip,getOneSupplierInfoByCode } 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 {initPrintAllData} from "@/mixins/printMixin" |
|||
export default { |
|||
name: "completDumpNoteZS", |
|||
mixins: [ |
|||
tableMixins, |
|||
LoadingMixins, |
|||
drawerMixins, |
|||
TableHeaderMixins, |
|||
mixins, |
|||
], |
|||
data () { |
|||
return { |
|||
URL: 'wms/store/transfer-note/get-Injection-list', |
|||
listURL: 'wms/store/transfer-note/get-Injection-list', |
|||
//常用按钮数据 |
|||
currenButtonData: [ |
|||
this.defaultFieldSettingBtn(),//字段设置 |
|||
this.defaultFreshBtn(),//刷新 |
|||
this.defaultFilterBtn(),//筛选 |
|||
], |
|||
DrawerButtonData: [ |
|||
// { |
|||
// type: 'info', |
|||
// icon: 'el-icon-printer', |
|||
// label: '打印', |
|||
// hide: false, |
|||
// name: "print", |
|||
// size: 'mini' |
|||
// }, |
|||
], |
|||
}; |
|||
}, |
|||
mounted () { |
|||
this.paging(); |
|||
}, |
|||
methods: { |
|||
//抽屉常用按钮 |
|||
// drawerbutton (val) { |
|||
// // 打印 |
|||
// if(val == 'print'){ |
|||
// if((this.propsData.supplierCode) && (!this.propsData.supplierShortName)){ |
|||
// getOneSupplierInfoByCode(this.propsData.supplierCode).then(res => { |
|||
// if(res){this.propsData.supplierShortName = res.shortName || res.name} |
|||
// let data = initPrintAllData(this.tableDataDetails,'thd.rdlx','PurReturnReason'); |
|||
// this.Print(data) |
|||
// }).catch(err => { |
|||
// console.log(err) |
|||
// }) |
|||
// }else{ |
|||
// let data = initPrintAllData(this.tableDataDetails,'thd.rdlx','PurReturnReason'); |
|||
// this.Print(data) |
|||
// } |
|||
// } |
|||
// }, |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
@import "../../../styles/mainbasicData.scss"; |
|||
</style> |
|||
@ -0,0 +1,547 @@ |
|||
<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"> |
|||
<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" |
|||
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"> |
|||
<!-- {{scope.$index}} |
|||
{{scope.row}} --> |
|||
<filterSelect |
|||
: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:[],//已选数据 |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.session = JSON.parse(JSON.stringify(this.CreateFormData)) |
|||
if(this.hideFirstActiveCancel){ |
|||
this.editHandle=[ |
|||
{ label: "下一步", type: "primary", name: "determine" }, |
|||
]; |
|||
} |
|||
}, |
|||
methods: { |
|||
// filterSelect点击option事件 |
|||
filterOptionSelectHandle(item,props,val,scope){ |
|||
this.$emit("push", item,props,val,scope); |
|||
}, |
|||
// // filterSelect点击清除事件 |
|||
filterClearHandle(item,scope){ |
|||
this.$emit("clear", item,scope); |
|||
}, |
|||
// 选择操作 |
|||
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) |
|||
console.log(407,this.$refs.bomTree_Ref) |
|||
this.$refs.bomTree_Ref.clearSelection(); |
|||
this.selectData.forEach(item=>{ |
|||
this.$refs.bomTree_Ref.toggleRowSelection(item,true); |
|||
}) |
|||
}else{ |
|||
console.log("全不选",selection) |
|||
this.$refs.bomTree_Ref.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) |
|||
}, |
|||
// //打印托标签 |
|||
// 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> |
|||
@ -0,0 +1,542 @@ |
|||
<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> |
|||
@ -0,0 +1,548 @@ |
|||
<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"> |
|||
<b style="font-size:20px;padding-bottom:10px">父级物料代码：{{ propsData.details[0].itemCode }}</b> |
|||
<el-table |
|||
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" |
|||
width="55"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="partCode" |
|||
label="子物料代码" |
|||
width="auto" |
|||
> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="qty" |
|||
label="数量" |
|||
width="auto"> |
|||
</el-table-column> |
|||
<el-table-column |
|||
prop="rawLocationCode" |
|||
label="目标库位"> |
|||
<template slot-scope="scope"> |
|||
<!-- {{scope.$index}} |
|||
{{scope.row}} --> |
|||
<filterSelect |
|||
:selectModel="scope.row['rawLocationCode']" |
|||
: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="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:[],//已选数据 |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.session = JSON.parse(JSON.stringify(this.CreateFormData)) |
|||
if(this.hideFirstActiveCancel){ |
|||
this.editHandle=[ |
|||
{ label: "下一步", type: "primary", name: "determine" }, |
|||
]; |
|||
} |
|||
}, |
|||
methods: { |
|||
// filterSelect点击option事件 |
|||
filterOptionSelectHandle(item,props,val,scope){ |
|||
console.log(666,item,props,val,scope) |
|||
scope.row.rawLocationCode = val |
|||
scope.row.rawLocationArea = item.areaCode |
|||
scope.row.rawLocationErpCode = item.erpLocationCode |
|||
scope.row.rawLocationGroup = item.locationGroupCode |
|||
scope.row.warehouseCode = item.warehouseCode |
|||
}, |
|||
// // filterSelect点击清除事件 |
|||
filterClearHandle(item,scope){ |
|||
console.log(777,this.CreateFormData.details,scope.$index) |
|||
scope.row.rawLocationCode = null |
|||
}, |
|||
// 选择操作 |
|||
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) |
|||
console.log(407,this.$refs.bomTree_Ref) |
|||
this.$refs.bomTree_Ref.clearSelection(); |
|||
this.selectData.forEach(item=>{ |
|||
this.$refs.bomTree_Ref.toggleRowSelection(item,true); |
|||
}) |
|||
}else{ |
|||
console.log("全不选",selection) |
|||
this.$refs.bomTree_Ref.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) |
|||
}, |
|||
// //打印托标签 |
|||
// 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> |
|||
@ -0,0 +1,142 @@ |
|||
#StepsFormTree { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
padding-bottom: 15px; |
|||
|
|||
::v-deep .el-steps { |
|||
padding-bottom: 15px; |
|||
|
|||
.el-step__main { |
|||
.el-step__title { |
|||
line-height: 24px; |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.page1 { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.page2 { |
|||
// flex: 1; |
|||
// display: flex; |
|||
// flex-direction: column; |
|||
// justify-content: space-between; |
|||
// // padding-bottom: 54px; |
|||
// overflow: hidden; |
|||
// overflow-y: auto; |
|||
height: calc(100% - 95px); |
|||
|
|||
::v-deep .el-form { |
|||
flex: 1; |
|||
display: flex; |
|||
height: 100%; |
|||
.el-row { |
|||
display: none; |
|||
} |
|||
|
|||
.formTable-box { |
|||
flex: 1; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
|
|||
.el-form-item__content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin: 0 !important; |
|||
|
|||
.heder { |
|||
padding: 5px 0; |
|||
text-align: center; |
|||
font-size: 18px; |
|||
|
|||
button{ |
|||
margin: 0 10px; |
|||
} |
|||
} |
|||
|
|||
.el-table { |
|||
flex: 1; |
|||
|
|||
.cell { |
|||
display:flex !important |
|||
} |
|||
|
|||
.childTable { |
|||
display: flex; |
|||
justify-content: space-around; |
|||
|
|||
span { |
|||
cursor: pointer; |
|||
|
|||
&:nth-child(1) { |
|||
color: red; |
|||
} |
|||
|
|||
&:nth-child(2) { |
|||
color: green; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
::v-deep .formButton { |
|||
// position: absolute; |
|||
// bottom: 0; |
|||
// right: 0; |
|||
z-index: 3; |
|||
} |
|||
} |
|||
|
|||
.page3 { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
// padding-bottom: 54px; |
|||
overflow: hidden; |
|||
overflow-y: auto; |
|||
|
|||
::v-deep .el-form { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.el-row { |
|||
flex: 1; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.formTable-box { |
|||
margin-bottom: 0; |
|||
// flex: 1; |
|||
|
|||
.el-form-item__content { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin: 0 !important; |
|||
} |
|||
} |
|||
} |
|||
::v-deep .formButton { |
|||
// position: absolute; |
|||
// bottom: 0; |
|||
// right: 0; |
|||
z-index: 3; |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue