17 changed files with 848 additions and 71 deletions
@ -0,0 +1,559 @@ |
|||
<template> |
|||
<el-drawer |
|||
v-loading="DrawerLoading" |
|||
v-if="drawer" |
|||
:visible="true" |
|||
:close-on-press-escape="false" |
|||
:wrapperClosable="false" |
|||
:with-header="false" |
|||
:modal="false" |
|||
size="100%" |
|||
> |
|||
<div class="drawer-heder"> |
|||
<div class="heder-left"> |
|||
<!-- <div class="heder-img"> |
|||
<img |
|||
src="@/assets/img/drawerHeader.png" |
|||
alt="" |
|||
style="width: 100%; height: 100%" |
|||
/> |
|||
</div> --> |
|||
<div class="header-text"> |
|||
<span>{{ propsData[title[0].prop] }}</span> |
|||
<span>{{ title[0].label }}</span> |
|||
</div> |
|||
</div> |
|||
<div class="heder-right"> |
|||
<curren-Button |
|||
:Butttondata="Butttondata" |
|||
@tableButtonClick="tableButtonClick" |
|||
> |
|||
<template> |
|||
<el-dropdown |
|||
trigger="click" |
|||
@command="handleCommand" |
|||
v-if="JSON.stringify(dropdownData) != '{}'" |
|||
> |
|||
<el-button size="mini" icon="el-icon-more"></el-button> |
|||
<el-dropdown-menu slot="dropdown"> |
|||
<el-dropdown-item |
|||
v-for="(item, index) in dropdownData" |
|||
:key="index" |
|||
:command="item.command" |
|||
>{{ item.label }}</el-dropdown-item |
|||
> |
|||
</el-dropdown-menu> |
|||
</el-dropdown> |
|||
</template> |
|||
</curren-Button> |
|||
</div> |
|||
</div> |
|||
<div class="drawer-main"> |
|||
<curren-tabs |
|||
:tabsData="dropdownTabs" |
|||
:activeName="firstTabs" |
|||
type="border-card" |
|||
@handleClick="handleClick" |
|||
> |
|||
<template slot-scope="scope"> |
|||
<curren-descriptions |
|||
border |
|||
v-if="scope.value == 'xq'" |
|||
:column="column" |
|||
:direction="direction" |
|||
:colon="false" |
|||
:tabsDesTions="tabsDesTions" |
|||
:propsData="propsData" |
|||
> |
|||
</curren-descriptions> |
|||
<!-- currenTableDetails 组件 明细中带分页功能 --> |
|||
<umyTable |
|||
v-if="scope.value == 'mx'" |
|||
:tableBorder="true" |
|||
:tableData="propsData.details" |
|||
:propsData="propsData" |
|||
:tableColumns="tableColumns" |
|||
:selectionTable="selectionTable" |
|||
:requiredRules="false" |
|||
:setUTableHeight="260" |
|||
@sortChange="sortChange" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
@inlineDialog="inlineDialog" |
|||
@buttonClick="buttonClick" |
|||
> |
|||
<template> |
|||
<slot></slot> |
|||
</template> |
|||
</umyTable> |
|||
<!-- 明细页码 --> |
|||
<pagination |
|||
v-if="scope.value == 'mx'" |
|||
:totalCount="totalCount" |
|||
:pagesizeProps="MaxResultCount" |
|||
@SizeChange="alterResultCountDetails" |
|||
@CurrentChange="alertoldSkipCountDetails" |
|||
:currentPageProps="currentPage" |
|||
></pagination> |
|||
<!-- 新增汇总 表头 区分明细表头使用 summaryTableColumns --> |
|||
<umyTable |
|||
v-if="scope.value == 'hz'" |
|||
:tableBorder="true" |
|||
:tableData="propsData.summaryDetails" |
|||
:tableColumns="summaryTableColumns.length == 0 ? tableColumns : summaryTableColumns" |
|||
:selectionTable="selectionTable" |
|||
:requiredRules="false" |
|||
@sortChange="sortChange" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
@inlineDialog="inlineDialog" |
|||
@buttonClick="buttonClick" |
|||
:setUTableHeight="210" |
|||
> |
|||
<template> |
|||
<slot></slot> |
|||
</template> |
|||
</umyTable> |
|||
<!-- 自定义扩展 --> |
|||
<umyTable |
|||
v-if=" |
|||
scope.value == zdyValue && |
|||
scope.value != 'xq' && |
|||
scope.value != 'mx' && |
|||
scope.value != 'hz' && |
|||
scope.value != 'zwlcj' |
|||
" |
|||
:tableBorder="true" |
|||
:tableLoading="tableLoading" |
|||
:tableData="otherData" |
|||
:tableColumns="zdyTableColumns" |
|||
:selectionTable="selectionTable" |
|||
:requiredRules="false" |
|||
@sortChange="sortChange" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
@inlineDialog="inlineDialog" |
|||
@buttonClick="buttonClick" |
|||
:setUTableHeight="210" |
|||
> |
|||
<template> |
|||
<slot></slot> |
|||
</template> |
|||
</umyTable> |
|||
<!-- 自定义扩展（tree）的形式 目前使用位置：物品清单信息-子物品层级 todo:待优化--> |
|||
<currenTable |
|||
v-if=" |
|||
scope.value == zdyValue && |
|||
scope.value == 'zwlcj' |
|||
" |
|||
:tableLoading="tableLoading" |
|||
:tableData="otherData" |
|||
:tableColumns="zdyTableColumns" |
|||
:selectionTable="selectionTable" |
|||
:requiredRules="false" |
|||
@sortChange="sortChange" |
|||
@handleSelectionChange="handleSelectionChange" |
|||
@inlineDialog="inlineDialog" |
|||
:treeProps="{children: 'children', hasChildren: 'hasChildren'}" |
|||
@buttonClick="buttonClick" |
|||
> |
|||
<template> |
|||
<slot></slot> |
|||
</template> |
|||
</currenTable> |
|||
</template> |
|||
</curren-tabs> |
|||
</div> |
|||
<div class="drawer-Shut" @click="drawerShut"> |
|||
<el-button type="danger" size="mini">关闭</el-button> |
|||
</div> |
|||
</el-drawer> |
|||
</template> |
|||
<script> |
|||
import { getListByItemcode,byItem,byProduct,byComponent,bySupplierCode,byLocation,byLocationCode, |
|||
relationByLocationCode,byComponentCJ,purRecNoteCustomInfo,EnumPurchaseReceiptInspect |
|||
} from "@/api/wms-api" |
|||
import currenButton from "@/components/currenButton" |
|||
import currenDescriptions from "@/components/currenDescriptions" |
|||
import currenTabs from "@/components/currenTabs" |
|||
import currenTable from "@/components/currenTable" |
|||
import pagination from "@/components/Pagination" |
|||
export default { |
|||
name: 'currenTabel-drawer', |
|||
components: { |
|||
pagination, |
|||
currenButton, |
|||
currenDescriptions, |
|||
currenTabs, |
|||
currenTable, |
|||
}, |
|||
props: { |
|||
title: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
DrawerLoading: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
drawer: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
dropdownData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
propsData: { |
|||
type: Object, |
|||
default: () => { |
|||
return {} |
|||
} |
|||
}, |
|||
tabsDesTions: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
dropdownTabsData: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
tableLoading: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
tableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
summaryTableColumns: { |
|||
type: Array, |
|||
default: () => { |
|||
return [] |
|||
} |
|||
}, |
|||
Butttondata: { |
|||
type: Array, |
|||
default: () => { |
|||
return [{ |
|||
type: 'warning', |
|||
icon: 'el-icon-edit', |
|||
label: '编辑', |
|||
name: 'edit', |
|||
size: 'mini' |
|||
}] |
|||
} |
|||
}, |
|||
selectionTable: { |
|||
type: Boolean, |
|||
default: false |
|||
}, |
|||
MaxResultCount: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
totalCount: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
currentPage: { |
|||
type: Number, |
|||
default: 0 |
|||
}, |
|||
// 详情展现列数，默认为2列展现 |
|||
column: { |
|||
type: Number, |
|||
default: 2 |
|||
}, |
|||
// 详情展示方式，默认水平分布 |
|||
direction: { |
|||
type: String, |
|||
default: 'horizontal' |
|||
}, |
|||
// 详情tabs排序默认 |
|||
firstTabs: { |
|||
type: String, |
|||
default: 'xq' |
|||
} |
|||
|
|||
}, |
|||
computed: { |
|||
dropdownTabs () { |
|||
// 带有特殊扩展tabs页的 |
|||
if (this.dropdownTabsData.length !== 0) { |
|||
return this.dropdownTabsData |
|||
} else { |
|||
// 正常普通 详情，明细，汇总 |
|||
if (Object.keys(this.propsData).length != 0) { |
|||
this.initDropdownTabsData = [{ |
|||
label: "详情", |
|||
name: 'xq' |
|||
}, |
|||
{ |
|||
label: "明细", |
|||
name: 'mx' |
|||
}, |
|||
{ |
|||
label: "汇总", |
|||
name: 'hz' |
|||
}] |
|||
if (this.propsData.details == undefined || !this.propsData.details.length) { |
|||
this.initDropdownTabsData = [{ |
|||
label: "详情", |
|||
name: 'xq' |
|||
}] |
|||
return this.initDropdownTabsData |
|||
} |
|||
if (this.propsData.summaryDetails == undefined || !this.propsData.summaryDetails.length ) { |
|||
this.initDropdownTabsData = [{ |
|||
label: "详情", |
|||
name: 'xq' |
|||
}, |
|||
{ |
|||
label: "明细", |
|||
name: 'mx' |
|||
}] |
|||
return this.initDropdownTabsData |
|||
} |
|||
} |
|||
return this.initDropdownTabsData |
|||
} |
|||
}, |
|||
}, |
|||
mounted () { |
|||
}, |
|||
data () { |
|||
return { |
|||
otherData:[], // 切换tabs页赋值 |
|||
zdyTableColumns:[], // 自定义表头 |
|||
zdyValue:'', // 自定义展现值 |
|||
// firstTabs:'xq', |
|||
initDropdownTabsData:[ |
|||
{ |
|||
label: "详情", |
|||
name: 'xq' |
|||
}, |
|||
{ |
|||
label: "明细", |
|||
name: 'mx' |
|||
}, |
|||
{ |
|||
label: "汇总", |
|||
name: 'hz' |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
methods: { |
|||
|
|||
handleCommand (command) { |
|||
this.$emit('handleCommand', command) |
|||
}, |
|||
drawerShut () { |
|||
this.$emit('drawerShut', false) |
|||
}, |
|||
tableButtonClick (val) { |
|||
this.$emit('drawerbutton', val) |
|||
}, |
|||
//排序 |
|||
sortChange (data) { |
|||
this.$emit('sortChange', data) |
|||
}, |
|||
//点击selection框 |
|||
handleSelectionChange (val) { |
|||
this.$emit("handleSelectionChange", val) |
|||
}, |
|||
//点击name提交emit打开编辑页面 |
|||
inlineDialog (row) { |
|||
this.$emit("inlineDialog", row) |
|||
}, |
|||
//接收分页组件emit改变每页最大页数 |
|||
alterResultCountDetails (val) { |
|||
this.$emit('alterResultCountDetails', val) |
|||
}, |
|||
//接收分页组件emit改变当前页 |
|||
alertoldSkipCountDetails (val) { |
|||
this.$emit('alertoldSkipCountDetails', val) |
|||
}, |
|||
buttonClick(row) { |
|||
this.$emit("buttonClick", row); |
|||
}, |
|||
// tabs 切换页 |
|||
handleClick (val) { |
|||
this.$emit("currenTabsChange", val);//父级获取当前的tab内容 |
|||
this.zdyValue = val.name |
|||
this.dropdownTabsData.forEach( item => { |
|||
if (item.name == val.name) { |
|||
let parent = this.$parent |
|||
parent.tableLoading = true |
|||
// 详情 明细 汇总 |
|||
parent.firstTabs = val.name |
|||
if (val.name == 'xq' || val.name == 'mx' || val.name == 'hz') { |
|||
this.zdyTableColumns = [] |
|||
this.otherData = [] |
|||
parent.tableLoading = false |
|||
} else { |
|||
this.zdyTableColumns = [] |
|||
this.otherData = [] |
|||
// this.firstTabs = val.name |
|||
// 其他自定义tab页 |
|||
if (item.functionName == 'getListByItemcode') { |
|||
let params = { |
|||
itemCode: this.propsData.code |
|||
} |
|||
getListByItemcode(params, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'byItem') { |
|||
byItem(this.propsData.code, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'byProduct') { |
|||
byProduct({product:this.propsData.product}, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'byComponent') { |
|||
byComponent({component:this.propsData.component}, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} |
|||
// 基础数据管理-物品清单维护-物品清单信息-详情-子物品层级 |
|||
else if (item.functionName == 'byComponentCJ') { |
|||
this.otherData = [] |
|||
byComponentCJ({component:this.propsData.component}, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
this.recursion(this.otherData) |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'bySupplierCode') { |
|||
bySupplierCode({supplierCode:this.propsData.code}, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'byLocation') { |
|||
byLocation(this.propsData.code==null?this.propsData.locationCode:this.propsData.code, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
this.o |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} else if (item.functionName == 'byLocationCode') { |
|||
byLocationCode({locationCode: this.propsData.code}, item.url).then(res => { |
|||
let itemData = [] |
|||
itemData.push(res) |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = itemData |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} |
|||
// 基础数据管理-库位信息-详情-库位零件关系 |
|||
else if (item.functionName == 'relationByLocationCode') { |
|||
relationByLocationCode({locationCode: this.propsData.code}, item.url).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.tableLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.tableLoading = false |
|||
}) |
|||
} |
|||
// 采购收货记录-合格品收货明细, 不合格品收货明细, 收货缺料明细 |
|||
else if(item.functionName == "purRecNoteCustomInfo"){ |
|||
parent.Loading.DrawerLoading = true |
|||
purRecNoteCustomInfo( item.url,this.propsData.id).then(res => { |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = res |
|||
parent.Loading.DrawerLoading = false |
|||
}).catch(err => { |
|||
console.log(err) |
|||
parent.Loading.DrawerLoading = false |
|||
}) |
|||
} |
|||
// 客户退拆记录-详情页TAB-回冲记录 |
|||
else if(item.functionName == "customerDismantleBackFlushNote"){ |
|||
let zdyTableColumnsJSON = JSON.parse(JSON.stringify(this.$isTableColumns[item.tableColumns])); |
|||
delete zdyTableColumnsJSON[0].type |
|||
this.zdyTableColumns = zdyTableColumnsJSON |
|||
this.otherData = this.propsData.noteAndBackFlushDetails |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
}, |
|||
// 递归 物品子级层级 |
|||
recursion(val){ |
|||
val.forEach(item => { |
|||
if(item.componentDTOs) { |
|||
item.children = item.componentDTOs |
|||
this.recursion(item.componentDTOs) |
|||
} |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
// el-drawer |
|||
@import "./style/index.scss"; |
|||
</style> |
|||
@ -0,0 +1,122 @@ |
|||
.el-drawer__wrapper { |
|||
z-index: 10 !important; |
|||
position: absolute; |
|||
left: 32%; |
|||
overflow: visible; |
|||
// height:calc(100% - 28px); |
|||
// top: 14px; |
|||
// right:14px |
|||
|
|||
::v-deep .el-drawer { |
|||
height: 100%; |
|||
overflow: visible; |
|||
box-shadow: 0 8px 10px -5px rgb(0 0 0 / 15%), 0 16px 24px 2px rgb(0 0 0 / 9%), 0 6px 30px 5px rgb(0 0 0 / 7%); |
|||
|
|||
.el-drawer__body { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.drawer-heder { |
|||
display: flex; |
|||
padding: 15px 10px; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.heder-left { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.heder-img { |
|||
width: 40px; |
|||
height: 40px; |
|||
margin-right: 10px; |
|||
} |
|||
|
|||
.header-text { |
|||
padding:0 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-between; |
|||
|
|||
span:nth-child(1) { |
|||
color: #333; |
|||
font-size: 22px; |
|||
} |
|||
|
|||
span:nth-child(2) { |
|||
color: #999; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.Descriptions { |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.drawer-main { |
|||
// padding-top: 20px; |
|||
flex: 1; |
|||
overflow: hidden; |
|||
// background-color: #efefef; |
|||
padding: 10px 20px 20px 30px; |
|||
border-top: solid 5px #f6f6f6; |
|||
|
|||
.el-tabs { |
|||
height: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.el-tabs__header{ |
|||
// padding-bottom: 5px ; |
|||
.el-tabs__nav{ |
|||
z-index: auto !important; |
|||
} |
|||
} |
|||
|
|||
.el-tabs__content { |
|||
flex: 1; |
|||
|
|||
.el-tab-pane { |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow-y: auto; |
|||
} |
|||
|
|||
.el-descriptions-item__label { |
|||
padding-right: 40px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.drawer-Shut { |
|||
width: 35px; |
|||
height: 100px; |
|||
position: absolute; |
|||
top: 200px; |
|||
left: -35px; |
|||
|
|||
.el-button { |
|||
width: 100%; |
|||
height: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
::v-deep span { |
|||
font-size: 12px; |
|||
letter-spacing: 10px; |
|||
writing-mode: tb-rl; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
::v-deep .el-tabs__nav-wrap::after{ |
|||
content: unset !important; |
|||
} |
|||
Loading…
Reference in new issue