<template> <div class="product-search"> <dee-tab :tabs="tabs" @tabClick="tabClick"> <div :slot="1" class="tab-cotnent"> <div class="sub-title">查询</div> <dee-search-box type-name="DxAbstractChangeIssue" v-bind="configDetails['DxAbstractChangeIssue']['form']" @searchEvent="searchEvent" /> </div> <div :slot="2" class="tab-cotnent"> <div class="sub-title">查询</div> <dee-search-box type-name="DxChangeRequest" v-bind="configDetails['DxChangeRequest']['form']" @searchEvent="searchEvent" /> </div> <div :slot="3" class="tab-cotnent"> <div class="sub-title">查询</div> <dee-search-box type-name="DxChangeNotice" v-bind="configDetails['DxChangeNotice']['form']" @searchEvent="searchEvent" /> </div> </dee-tab> </div> </template> <script> export default { name: 'Search', components: {}, props: { typeName: { type: String, default: '' }, configDetails: { type: Object, default: () => { return {} } } }, data() { return { formData: [ { form: { number: '', project: '', name: '', state: '' }, formData: [ { name: '', data: [ { key: 'project', title: '项目', component: { name: 'el-input', size: 'medium' } }, { key: 'number', title: '编号', component: { name: 'el-input', size: 'medium' } }, { key: 'name', title: '名称', component: { name: 'el-input', size: 'medium' } }, { key: 'state', title: '状态', component: { name: 'el-input', size: 'medium' } } ] } ], rules: { project: [ { required: false, message: '请输入查询条件', trigger: 'blur' } ] }, formButtons: [ { 'text': '查询', 'type': 'submit', 'component': { 'type': 'primary', 'size': 'small' } } ] }, { form: { number: '', project: '', name: '', state: '' }, formData: [ { name: '', data: [ { key: 'project', title: '项目', component: { name: 'el-input', size: 'medium' } }, { key: 'number', title: '编号', component: { name: 'el-input', size: 'medium' } }, { key: 'name', title: '名称', component: { name: 'el-input', size: 'medium' } }, { key: 'state', title: '状态', component: { name: 'el-input', size: 'medium' } } ] } ], rules: { project: [ { required: false, message: '请输入查询条件', trigger: 'blur' } ] }, formButtons: [ { 'text': '查询', 'type': 'submit', 'component': { 'type': 'primary', 'size': 'small' } } ] }, { form: { number: '', project: '', name: '', state: '' }, formData: [ { name: '', data: [ { key: 'project', title: '项目', component: { name: 'el-input', size: 'medium' } }, { key: 'number', title: '编号', component: { name: 'el-input', size: 'medium' } }, { key: 'name', title: '名称', component: { name: 'el-input', size: 'medium' } }, { key: 'state', title: '状态', component: { name: 'el-input', size: 'medium' } } ] } ], rules: { project: [ { required: false, message: '请输入查询条件', trigger: 'blur' } ] }, formButtons: [ { 'text': '查询', 'type': 'submit', 'component': { 'type': 'primary', 'size': 'small' } } ] } ], tabs: [ { id: '1', name: 'PR', icon: '/icons/icon_tab_PR_normal1.png' }, { id: '2', name: 'ECR', icon: '/icons/icon_tab_ECR_normal1.png' }, { id: '3', name: 'ECN', icon: '/icons/icon_tab_ECN_normal1.png' } ] } }, created() { }, methods: { searchEvent(item) { this.$emit('search', item) }, tabClick(val) { this.$emit('switchTabs', val.name) } } } </script> <style lang="scss"> .product-search { .dee-panel .el-tabs .el-tabs__content { overflow-x: hidden; } .el-tabs__nav { width: 100%; } .tab-cotnent{ padding: 10px; box-sizing: border-box; } .el-tabs__nav-scroll{ border-left: none; } .el-tabs__content { height: calc(100% - 68px) !important; } .el-tabs__item{ width: 33%; background-color: #ffffff; height: auto; font-weight: bold; border-left: 0; border-right: 0; border-top: 0; span { display: flex; flex-direction: column; align-items: center; .imgStyle { margin: 0; width: 36px; height: 36px; } } } .is-active:after { position: absolute; border-top: 4px solid transparent; border-left: 4px solid transparent; border-bottom: 4px solid #3281DE; border-right: 4px solid transparent; content: " "; display: block; bottom: 0; left: 50%; transform: translateX(-50%); } .el-tabs__item.is-active { border-bottom: 2px solid #3281DE ; background-color: #f3f3f3; } } </style>