You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

554 lines
18 KiB

2 years ago
<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"
2 years ago
: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"
></pagination>
<!-- 新增汇总 表头 区分明细表头使用 summaryTableColumns -->
<umyTable
v-if="scope.value == 'hz'"
:tableBorder="true"
2 years ago
:tableData="propsData.summaryDetails"
:tableColumns="summaryTableColumns.length == 0 ? tableColumns : summaryTableColumns"
2 years ago
:selectionTable="selectionTable"
:requiredRules="false"
@sortChange="sortChange"
@handleSelectionChange="handleSelectionChange"
@inlineDialog="inlineDialog"
@buttonClick="buttonClick"
:setUTableHeight="210"
2 years ago
>
<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"
2 years ago
: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:待优化-->
2 years ago
<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
},
// 详情展现列数,默认为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
})
}
// 基础数据管理-物品清单维护-物品清单信息-详情-子物品层级
2 years ago
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
}
}
}
})
},
// 递归 物品子级层级
2 years ago
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>