24 changed files with 1325 additions and 203 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; |
||||
|
} |
||||
@ -0,0 +1,89 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<el-dialog |
||||
|
title="导出" |
||||
|
:visible.sync="show" |
||||
|
:append-to-body="true" |
||||
|
:modal-append-to-body="false" |
||||
|
width="800px" |
||||
|
:show-close="true" |
||||
|
@close="close" |
||||
|
> |
||||
|
<div class="formItem"> |
||||
|
<span class="title">是否显示明细：</span> |
||||
|
<el-radio-group v-model="form.isDetail" > |
||||
|
<el-radio :label="true">是</el-radio> |
||||
|
<el-radio :label="false">否</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
<div class="formItem"> |
||||
|
<span class="title">是否冗余主表数据：</span> |
||||
|
<el-radio-group v-model="form.isRedundance" > |
||||
|
<el-radio :label="true">是</el-radio> |
||||
|
<el-radio :label="false">否</el-radio> |
||||
|
</el-radio-group> |
||||
|
</div> |
||||
|
<span slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="submit('page')">本页导出</el-button> |
||||
|
<el-button |
||||
|
:spinner="'el-icon-loading'" |
||||
|
type="primary" |
||||
|
@click="submit('all')" |
||||
|
>全部导出</el-button> |
||||
|
</span> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'exportDrop', |
||||
|
props: { |
||||
|
// 导出是【否冗余主表数据】配置 |
||||
|
isDetail:{ |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
// 导出是【显示明细】配置 |
||||
|
isRedundance:{ |
||||
|
type: Boolean, |
||||
|
default: true, |
||||
|
}, |
||||
|
}, |
||||
|
data () { |
||||
|
return { |
||||
|
show:true, |
||||
|
form:{ |
||||
|
isDetail:null, |
||||
|
isRedundance:null, |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
mounted () { |
||||
|
this.form={ |
||||
|
isDetail:this.isDetail, |
||||
|
isRedundance:this.isRedundance, |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
close() { |
||||
|
this.show = false |
||||
|
this.$emit("closeDialog") |
||||
|
}, |
||||
|
submit(type){ |
||||
|
this.$emit("exportDropSubmit",type,this.form) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.formItem{ |
||||
|
padding-bottom: 15px; |
||||
|
display: flex; |
||||
|
.title{ |
||||
|
width: 180px; |
||||
|
text-align: right; |
||||
|
padding-right: 10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue