Commit ccdfb96d authored by xioln's avatar xioln

TAB切换组件

parent 47cf50cc
......@@ -9,7 +9,7 @@ export default {
title: '搜索参数配置',
width: 1,
component: {
defaultValue: '{"layKey":"JobResponseInExpermentQuery","typeName":"JobResponseInExperment"}',
defaultValue: '{"typeName":"JobResponseInExperment","layKey":"JobResponseInExpermentQuery"}',
name: 'el-input',
type: 'textarea',
rows: '4'
......@@ -20,7 +20,7 @@ export default {
title: 'TAB参数配置',
width: 1,
component: {
defaultValue: '[{"id":1,"name":"不合格品","typeName":"JobResponseInTest","layKey":"unqualified_Table"},{"id":2,"name":"试验","typeName":"JobResponseInExperment","layKey":"unqualified_Table"}]',
defaultValue: '[{"name":"不合格品","typeName":"JobResponseInTest","layKey":"unqualified_Table"},{"name":"试验","typeName":"JobResponseInExperment","layKey":"unqualified_Table"}]',
name: 'el-input',
type: 'textarea',
rows: '4'
......
/**
* @Description: TAB切换
* @Description: TAB切换
* @author xioln
* @date 2023-10-25
* @FilePath: applications/dee-mes/src/privateComponents/components/UnqualifiedSearch/index.vue
*/
<template>
<div class="unqualifie-search">
<dee-as-com
ref="deeSearch"
:lay-config="serchOptions"
@searchEvent="searchEvent"
/>
<dee-tab
ref="deetab"
class="dee-tab"
:tabs="tabOptions"
@tabClick="tabClick"
>
<div v-for="(item, index) in tabOptions" :key="index" :slot="item.id">
<dee-as-com
:ref="item.id"
:lay-config="{
typeName: item.typeName,
layKey: item.layKey
}"
/>
</div>
</dee-tab>
<dee-as-com ref="deeSearch" :lay-config="serchOptions" @searchEvent="searchEvent" />
<el-tabs ref="tabRef" v-model="activeTab" class="dee-tab" type="card" @tab-click="tabClick">
<el-tab-pane v-for="(tab, index) in tabOptions" :key="index" :label="tab.name" :name="index.toString()">
<dee-as-com :ref="'tab' + index" :lay-config="getLayConfig(tab)" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
......@@ -49,7 +34,8 @@ export default {
serchOptions: {},
tabOptions: [],
searchItems: [],
currTab: null
activeTab: '0',
tableRef: null
}
},
computed: {},
......@@ -72,20 +58,48 @@ export default {
created() {
// 初始化数据
},
mounted() {
// 初始化数据
},
methods: {
getLayConfig(item) {
// 根据 item 的属性创建 lay-config 对象
return {
typeName: item.typeName,
layKey: item.layKey
}
},
searchEvent(v) {
this.searchItems = v.items
this.searchFun()
},
tabClick(val) {
this.currTab = val.name
this.tableRef = val.$children[0]
this.searchFun()
},
searchFun() {
this.$refs[this.currTab][0].$refs.asCom.getData(this.searchItems)
if (this.tableRef) {
this.tableRef.$refs.asCom.getData(this.searchItems)
} else {
this.$refs.tab0[0].$refs.asCom.getData(this.searchItems)
}
}
}
}
</script>
<style lang='scss'>
.unqualifie-search {
height: 100%;
.dee-tab {
height: 100%;
}
.is-active {
background-color: #f2f2f2;
}
.dee-table {
height: 60vh !important;
}
}
</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