9 changed files with 1077 additions and 313 deletions
@ -0,0 +1,720 @@ |
|||||
|
<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> |
||||
|
<!-- 明细头部按钮 --> |
||||
|
<div |
||||
|
class="currenTabel-drawer-mx-header" |
||||
|
v-if="scope.value == 'mx' && detailHeaderButton" |
||||
|
> |
||||
|
<curren-Button |
||||
|
:Butttondata="detailHeaderButton" |
||||
|
@tableButtonClick="detailHeaderClick" |
||||
|
></curren-Button> |
||||
|
</div> |
||||
|
<!-- 字段设置弹窗 --> |
||||
|
<rowDrop |
||||
|
@radio="rowDrop" |
||||
|
:tableColumns="tableColumns" |
||||
|
:visible="rowDropVisible" |
||||
|
@closeRowDrop="closeRowDrop" |
||||
|
:source="'detail_api'" |
||||
|
:innerMaxHeight="'calc(90vh - 400px)'" |
||||
|
></rowDrop> |
||||
|
<!-- 全面搜索（普通+高级整合） --> |
||||
|
<searchOverall |
||||
|
ref="searchOverallRef" |
||||
|
class="detailFiltersPopPage" |
||||
|
:showSearchOverall="detailFiltersVisible" |
||||
|
@getShowSearchOverall="getShowSearchOverall" |
||||
|
:showMoreSearch="true" |
||||
|
:tableColumns="tableColumns" |
||||
|
@overallSearchFormClick="detailFiltersSearch" |
||||
|
:filterActionOptions="filterActionOptions" |
||||
|
:httpOverallSearchData="detailSearchDataFE" |
||||
|
:disabledAction="true" |
||||
|
:disabledLogic="true" |
||||
|
> |
||||
|
<!-- 插槽预留 --> |
||||
|
<slot name="searchPrimarySlot"></slot> |
||||
|
</searchOverall> |
||||
|
<!-- currenTableDetails 组件 明细中带分页功能 --> |
||||
|
<umyTable |
||||
|
v-if="scope.value == 'mx'" |
||||
|
:isUpdate="isUpdate" |
||||
|
:tableBorder="true" |
||||
|
:tableData="propsData.details" |
||||
|
:propsData="propsData" |
||||
|
:tableColumns="tableColumns" |
||||
|
:selectionTable="selectionTable" |
||||
|
:requiredRules="false" |
||||
|
:setUTableHeight="showDetailColumnsSet ? 300 : 260" |
||||
|
@sortChange="sortChange" |
||||
|
@handleSelectionChange="handleSelectionChange" |
||||
|
@inlineDialog="inlineDialog" |
||||
|
@buttonClick="buttonClick" |
||||
|
:buttonOperationList="buttonOperationList" |
||||
|
@buttonOperationClick="buttonOperationClick" |
||||
|
> |
||||
|
<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-dialog |
||||
|
width="90%" |
||||
|
:modal-append-to-body="false" |
||||
|
:append-to-body="false" |
||||
|
:title="detailInfoTitle" |
||||
|
:visible.sync="displayDialog.detailInfoDialog" |
||||
|
:show-close="true" |
||||
|
> |
||||
|
<div> |
||||
|
<curren-descriptions |
||||
|
v-if="detailInfoTableData" |
||||
|
border |
||||
|
:column="column" |
||||
|
:direction="direction" |
||||
|
:colon="false" |
||||
|
:tabsDesTions="tableColumns" |
||||
|
:propsData="detailInfoTableData" |
||||
|
style="padding-bottom: 20px;" |
||||
|
></curren-descriptions> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</el-drawer> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { getListByItemcode,byItem,byProduct,byComponent,bySupplierCode,byLocation,byLocationCode, |
||||
|
relationByLocationCode,byComponentCJ,purRecNoteCustomInfo,EnumPurchaseReceiptInspect |
||||
|
} from "@/api/wms-api" |
||||
|
import searchOverall from "@/components/searchOverall" |
||||
|
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" |
||||
|
import rowDrop from "@/components/rowDrop/index.vue" |
||||
|
import { getParentNode } from '@/utils' |
||||
|
import * as allUrlOption from '@/utils/baseData/urlOption' |
||||
|
import { LoadingMixins } from "@/mixins/LoadingMixins"; |
||||
|
export default { |
||||
|
name: 'currenTabel-drawer', |
||||
|
components: { |
||||
|
pagination, |
||||
|
currenButton, |
||||
|
currenDescriptions, |
||||
|
currenTabs, |
||||
|
currenTable, |
||||
|
searchOverall, |
||||
|
rowDrop |
||||
|
}, |
||||
|
mixins: [ |
||||
|
LoadingMixins, |
||||
|
], |
||||
|
props: { |
||||
|
// 操作列按钮 |
||||
|
buttonOperationList:{ |
||||
|
type: Array, |
||||
|
default: null, |
||||
|
}, |
||||
|
// 是否显示明细-字段设置 |
||||
|
showDetailColumnsSet:{ |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 是否显示明细-筛选 |
||||
|
showDetailFilters:{ |
||||
|
type: Boolean, |
||||
|
default: true |
||||
|
}, |
||||
|
// 明细-筛选-当前接口中的筛选数据（用于同步全面筛选的数据） |
||||
|
detailSearchDataFE:{ |
||||
|
type: Object, |
||||
|
default: null |
||||
|
}, |
||||
|
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) { |
||||
|
if (Object.keys(this.propsData)) { |
||||
|
this.initDropdownTabsData = [{ |
||||
|
label: "详情", |
||||
|
name: 'xq' |
||||
|
}] |
||||
|
// 明细可以为空数组，前端分页使用 |
||||
|
if(this.propsData.details){ |
||||
|
this.initDropdownTabsData.push({ |
||||
|
label: "明细", |
||||
|
name: 'mx' |
||||
|
}) |
||||
|
} |
||||
|
if(this.propsData.summaryDetails && this.propsData.summaryDetails.length > 0){ |
||||
|
this.initDropdownTabsData.push({ |
||||
|
label: "汇总", |
||||
|
name: 'hz' |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
return this.initDropdownTabsData |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.initDetailHeaderButton() |
||||
|
// 点击外部，字段设置弹窗隐藏 |
||||
|
document.addEventListener('click',(e)=>{ |
||||
|
if(!this.rowDropVisible)return |
||||
|
let _class = "rowDropNotHideItem" |
||||
|
let _hasParent = getParentNode(e.target,_class) |
||||
|
let _current_class = e.target._prevClass || e.target.className |
||||
|
let _hasCurrent = _current_class ? String(_current_class).includes(_class) : false |
||||
|
if(!_hasParent && !_hasCurrent){ |
||||
|
this.closeRowDrop() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
detailHeaderButton:null,//明细-上方按钮 |
||||
|
detailInfoTableData:null,//明细-查看详情弹窗数据 |
||||
|
detailInfoTitle:null,//明细-查看详情弹窗title |
||||
|
// table 重新渲染所需key |
||||
|
isUpdate: false, |
||||
|
// 明细-字段设置是否显示 |
||||
|
rowDropVisible: false, |
||||
|
otherData:[], // 切换tabs页赋值 |
||||
|
zdyTableColumns:[], // 自定义表头 |
||||
|
zdyValue:'', // 自定义展现值 |
||||
|
// firstTabs:'xq', |
||||
|
initDropdownTabsData:[ |
||||
|
{ |
||||
|
label: "详情", |
||||
|
name: 'xq' |
||||
|
}, |
||||
|
{ |
||||
|
label: "明细", |
||||
|
name: 'mx' |
||||
|
}, |
||||
|
{ |
||||
|
label: "汇总", |
||||
|
name: 'hz' |
||||
|
} |
||||
|
], |
||||
|
detailFiltersVisible:false,//筛选显示 |
||||
|
filterActionOptions:[{ |
||||
|
value: '==', |
||||
|
label: '等于' |
||||
|
}, { |
||||
|
value: '!=', |
||||
|
label: '不等于' |
||||
|
}], |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
// 初始化明细-上方按钮 |
||||
|
initDetailHeaderButton(){ |
||||
|
this.detailHeaderButton = [] |
||||
|
if(this.showDetailColumnsSet){this.detailHeaderButton.push(this.defaultFieldSettingBtn())} |
||||
|
if(this.showDetailFilters){this.detailHeaderButton.push(this.defaultFilterBtn())} |
||||
|
}, |
||||
|
detailHeaderClick(val,item){ |
||||
|
// 字段设置 |
||||
|
if(val == 'field'){ |
||||
|
this.columnsSettingHandle() |
||||
|
} |
||||
|
// 筛选 |
||||
|
if(val == 'filter'){ |
||||
|
this.detailFiltersHandle() |
||||
|
} |
||||
|
}, |
||||
|
// 关闭明细-详情弹窗 |
||||
|
closeDetailInfo(val){ |
||||
|
this.displayDialog.detailInfoDialog = val || false |
||||
|
}, |
||||
|
// 明细-操作列事件 |
||||
|
buttonOperationClick(row, item, index){ |
||||
|
// 查看详情 |
||||
|
if(item.name == "info"){ |
||||
|
this.displayDialog.detailInfoDialog = true |
||||
|
this.detailInfoTableData = row |
||||
|
let _name = allUrlOption[this.$route.name].detailInfoName |
||||
|
this.detailInfoTitle = _name ? row[_name] + ' 详情' : '详情' |
||||
|
} |
||||
|
this.$emit('buttonOperationClick',row, item, index) |
||||
|
}, |
||||
|
rowDrop(data,type) { |
||||
|
this.$emit('rowDrop',data,type) |
||||
|
this.isUpdate = !this.isUpdate |
||||
|
}, |
||||
|
// 明细-字段设置 |
||||
|
columnsSettingHandle(){ |
||||
|
this.rowDropVisible = !this.rowDropVisible |
||||
|
}, |
||||
|
// 明细-筛选 |
||||
|
detailFiltersHandle(){ |
||||
|
this.detailFiltersVisible = !this.detailFiltersVisible |
||||
|
}, |
||||
|
// 明细-全面筛选组件内部显示/隐藏更改触发，同步当前的showSearchOverall值 |
||||
|
getShowSearchOverall(val){ |
||||
|
this.detailFiltersVisible = val || false |
||||
|
}, |
||||
|
// 明细-全面筛选所有按钮操作集 |
||||
|
detailFiltersSearch(options){ |
||||
|
this.$emit('detailFiltersSearch', options) |
||||
|
}, |
||||
|
// 明细-关闭字段设置 |
||||
|
closeRowDrop() { |
||||
|
this.rowDropVisible = false |
||||
|
}, |
||||
|
handleCommand (command) { |
||||
|
this.$emit('handleCommand', command) |
||||
|
}, |
||||
|
drawerShut () { |
||||
|
this.closeDetailInfo(false) |
||||
|
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,137 @@ |
|||||
|
.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; |
||||
|
} |
||||
|
|
||||
|
.currenTabel-drawer-mx-header{ |
||||
|
text-align: right; |
||||
|
padding: 0 10px 10px 0; |
||||
|
} |
||||
|
|
||||
|
.detailFiltersPopPage{ |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
left: 0; |
||||
|
height: 240px; |
||||
|
.fullPageCover{ |
||||
|
height: calc(100vh - 300px) !important; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue