<template> <dee-dialog v-if="visible" title="工时查看" :dialog-visible.sync="visible" width="90%" custom-class="mobile-dialog" > <section class="statistical-summary-working-hours-com"> <Search :active-name="activeName" @init="searchData" /> <dee-tools :tools="tools" mode="normal" :collapse="false" /> <el-tabs v-model="activeName" type="card" @tab-click="tabClick"> <el-tab-pane label="生产工时" name="product"> <ProductionTable ref="productTable" /> </el-tab-pane> <el-tab-pane label="临时工时" name="temp"> <TemporaryTable ref="tempTable" /> </el-tab-pane> </el-tabs> </section> </dee-dialog> </template> <script> import ProductionTable from './components/productionTable' import TemporaryTable from './components/temporaryTable' import Search from './components/Search' export default { name: 'StatisticalSummaryWorkingHours', components: { ProductionTable, TemporaryTable, Search }, data() { return { activeName: 'product', visible: false, // 工具栏 tools: [{ name: '确认', icon: '/icons/check.png ', handler: { click: () => this.confirmHandle() } }], initForm: {} } }, methods: { // 打开弹出框 open() { this.visible = true }, handleClose() { this.visible = false }, searchData(form) { this.initForm = form this.tableInit(this.initForm) }, tabClick() { this.tableInit(this.initForm) }, tableInit(form) { if (this.activeName === 'product') { this.$refs.productTable.init(form, 1) } else { this.$refs.tempTable.init(form, 1) } }, confirmHandle(section) { if (this.activeName === 'product') { this.$refs.productTable.confirmHandle() } else { this.$refs.tempTable.confirmHandle() } } } } </script> <style lang="scss"> .statistical-summary-working-hours-com{ .dee-tools{ float: right; position: relative; top: 10px; z-index: 99999; } } </style>