Commit 80aa88de authored by qyx's avatar qyx

Merge remote-tracking branch 'origin/master'

parents 45858b41 fc4b946b
...@@ -123,6 +123,7 @@ aside { ...@@ -123,6 +123,7 @@ aside {
//main-container全局样式 //main-container全局样式
.app-container { .app-container {
display: flex; display: flex;
flex-direction: column; /* 垂直排列 */ flex-direction: column; /* 垂直排列 */
padding: 20px; padding: 20px;
......
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="formSearch"> <div class="contentTab">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> <el-tabs
<el-tab-pane label="日常报销" name="daily"></el-tab-pane> v-model="activeName"
<el-tab-pane label="项目费用" name="projectCost"></el-tab-pane> class="demo-tabs"
<el-tab-pane label="差旅报销" name="travel"></el-tab-pane> @tab-click="handleClick"
<el-tab-pane label="工时审批" name="workHours"></el-tab-pane> >
</el-tabs> <el-tab-pane label="日常报销" name="daily"></el-tab-pane>
<el-tab-pane label="项目费用" name="projectCost"></el-tab-pane>
<el-form :inline="true" :model="formQuery" class="demo-form-inline"> <el-tab-pane label="差旅报销" name="travel"></el-tab-pane>
<el-form-item label="项目名称"> <el-tab-pane label="工时审批" name="workHours"></el-tab-pane>
<el-input </el-tabs>
v-model="formQuery.user" </div>
placeholder="Approved by" <keep-alive>
clearable <component
style="width: 220px" :is="dialogComponents[activeName]"
/> :key="activeName"
</el-form-item> ></component>
<el-form-item label="申请人"> </keep-alive>
<el-select
v-model="formQuery.region"
placeholder="Activity zone"
clearable
style="width: 220px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="formQuery.date"
type="date"
placeholder="Pick a date"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" class="el-button-primary" icon="search"
>搜索</el-button
>
<el-button type="defalut" class="el-button-defalut" icon="Refresh"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="contentTable">
<component
:is="dialogComponents[activeName]"
:key="activeName"
></component>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
import { daily, projectCost, travel, workHours } from '../tab/tabComponent.js' import { daily, projectCost, travel, workHours } from '../tab/tabComponent.js'
...@@ -63,10 +28,16 @@ const dialogComponents = ref({ ...@@ -63,10 +28,16 @@ const dialogComponents = ref({
travel: travel, travel: travel,
workHours: workHours workHours: workHours
}) })
const activeName = ref('daily') const activeName = ref('daily')
const formQuery = reactive({})
const handleClick = value => { const handleClick = value => {
console.log(activeName.value) console.log(activeName.value)
} }
</script> </script>
<style scoped lang="scss"></style> <style scoped lang="scss">
.contentTab {
padding: 20px;
background: #ffffff;
}
</style>
This diff is collapsed.
<script setup></script>
<template> <template>
<div>1</div> <div style="display: flex; flex-direction: column; flex: 1">
<div class="formSearch">
<el-form :inline="true" :model="formQuery" class="demo-form-inline">
<el-form-item label="项目名称">
<el-input
v-model="formQuery.user"
placeholder="Approved by"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item label="申请人">
<el-select
v-model="formQuery.region"
placeholder="Activity zone"
clearable
style="width: 220px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="formQuery.date"
type="date"
placeholder="Pick a date"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="el-button-primary"
icon="search"
>搜索</el-button
>
<el-button
type="defalut"
class="el-button-defalut"
icon="Refresh"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="contentTable">1</div>
</div>
</template> </template>
<script setup>
const formQuery = reactive({})
</script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
<script setup></script> <template>
<div style="display: flex; flex-direction: column; flex: 1">
<template><div>2</div></template> <div class="formSearch">
<el-form :inline="true" :model="formQuery" class="demo-form-inline">
<el-form-item label="项目名称">
<el-input
v-model="formQuery.user"
placeholder="Approved by"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item label="申请人">
<el-select
v-model="formQuery.region"
placeholder="Activity zone"
clearable
style="width: 220px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="formQuery.date"
type="date"
placeholder="Pick a date"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="el-button-primary"
icon="search"
>搜索</el-button
>
<el-button
type="defalut"
class="el-button-defalut"
icon="Refresh"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="contentTable">2</div>
</div>
</template>
<script setup>
const formQuery = reactive({})
</script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
<script setup></script> <template>
<div style="display: flex; flex-direction: column; flex: 1">
<template><div>3</div></template> <div class="formSearch">
<el-form :inline="true" :model="formQuery" class="demo-form-inline">
<el-form-item label="项目名称">
<el-input
v-model="formQuery.user"
placeholder="Approved by"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item label="申请人">
<el-select
v-model="formQuery.region"
placeholder="Activity zone"
clearable
style="width: 220px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="formQuery.date"
type="date"
placeholder="Pick a date"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="el-button-primary"
icon="search"
>搜索</el-button
>
<el-button
type="defalut"
class="el-button-defalut"
icon="Refresh"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="contentTable">3</div>
</div>
</template>
<script setup>
const formQuery = reactive({})
</script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
<script setup></script> <template>
<div style="display: flex; flex-direction: column; flex: 1">
<template><div>4</div></template> <div class="formSearch">
<el-form :inline="true" :model="formQuery" class="demo-form-inline">
<el-form-item label="项目名称">
<el-input
v-model="formQuery.user"
placeholder="Approved by"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item label="申请人">
<el-select
v-model="formQuery.region"
placeholder="Activity zone"
clearable
style="width: 220px"
>
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="申请时间">
<el-date-picker
v-model="formQuery.date"
type="date"
placeholder="Pick a date"
clearable
style="width: 220px"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
class="el-button-primary"
icon="search"
>搜索</el-button
>
<el-button
type="defalut"
class="el-button-defalut"
icon="Refresh"
>重置</el-button
>
</el-form-item>
</el-form>
</div>
<div class="contentTable">4</div>
</div>
</template>
<script setup>
const formQuery = reactive({})
</script>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment