style;分屏

@@ -6,66 +6,31 @@
         <el-row>
           <el-col :span="5">
             <el-form-item label="业务来源">
-              <el-select
-                v-model="queryForm.ywly"
-                filterable
-                clearable
-                placeholder="请选择业务来源"
-              >
-                <el-option
-                  v-for="item in ywlys"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
+              <el-select v-model="queryForm.ywly" filterable clearable placeholder="请选择业务来源">
+                <el-option v-for="item in ywlys" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="5">
             <el-form-item label="权利类型">
-              <el-select
-                v-model="queryForm.qllx"
-                filterable
-                clearable
-                placeholder="请选择权利类型"
-              >
-                <el-option
-                  v-for="item in qllxs"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
+              <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
+                <el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="5">
             <el-form-item label="登记类型">
-              <el-select
-                v-model="queryForm.djlx"
-                filterable
-                clearable
-                placeholder="请选择登记类型"
-              >
-                <el-option
-                  v-for="item in djlxs"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value"
-                >
+              <el-select v-model="queryForm.djlx" filterable clearable placeholder="请选择登记类型">
+                <el-option v-for="item in djlxs" :key="item.value" :label="item.label" :value="item.value">
                 </el-option>
               </el-select>
             </el-form-item>
           </el-col>
           <el-col :span="5">
             <el-form-item label="业务号">
-              <el-input
-                placeholder="请输入业务号"
-                v-model="queryForm.ywh"
-                clearable
-                class="width200px"
-              >
+              <el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
               </el-input>
             </el-form-item>
           </el-col>
@@ -80,30 +45,30 @@
       </el-form>
     </div>
     <!-- 表格 -->
-       <!-- 表格 -->
-       <div class="from-clues-content">
-        <lb-table :page-size="pageData.size" heightNumSetting :current-page.sync="pageData.current"
-          :total="pageData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
-          :column="tableData.columns" :data="tableData.data">
-        </lb-table>
-      </div>
+    <!-- 表格 -->
+    <div class="from-clues-content">
+      <lb-table :page-size="pageData.size" :current-page.sync="pageData.current" :total="pageData.total"
+        @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
+        :data="tableData.data">
+      </lb-table>
+    </div>
   </div>
 </template>
 <script>
 import table from "@/utils/mixin/table";
 import { datas, sendThis } from "./dbxdata";
-import {searchTaskToDo} from "@/api/ywbl.js"
+import { searchTaskToDo } from "@/api/ywbl.js"
 export default {
   name: "dbx",
   components: {},
   mixins: [table],
-  mounted() {
+  mounted () {
     sendThis(this);
   },
-  data() {
+  data () {
     return {
-      qllxs:[],
-      djlxs:[],
+      qllxs: [],
+      djlxs: [],
       queryForm: {
         ywly: "",
         qllx: "",
@@ -117,7 +82,7 @@ export default {
       },
 
       ywlys: datas.ywlys(),
-      
+
       tableData: {
         columns: datas.columns(),
         data: [],
@@ -127,8 +92,8 @@ export default {
   created () { },
   methods: {
     // 列表渲染接口
-    fetchData(){
-      searchTaskToDo({...this.queryForm,...this.pageData}).then(res=>{
+    fetchData () {
+      searchTaskToDo({ ...this.queryForm, ...this.pageData }).then(res => {
         if (res.code === 200) {
           let { total, records } = res.result
           this.pageData.total = total;
@@ -136,18 +101,18 @@ export default {
         }
       })
     },
-    queryClick(){
+    queryClick () {
       this.fetchData()
     },
-    handleSort(name, sort) {
+    handleSort (name, sort) {
       console.log(name, sort);
     },
-    openDialog() {
+    openDialog () {
       console.log(999999999999999);
     },
-    ywhClick(bsmSlsq){
+    ywhClick (bsmSlsq) {
       const { href } = this.$router.resolve('/fqsq?bsmSlsq=' + bsmSlsq)
-        window.open(href, '_blank');
+      window.open(href, '_blank');
     },
   },
 };

@@ -2,7 +2,7 @@
   <div class='fqsq'>
     <div class="fqsq-header">
       <ul>
-        <li @click="operation(index)" v-for="(item, index) in headerleftList.slice(0, headerleftList.length - 4)"
+        <li @click="operation(index, item)" v-for="(item, index) in headerleftList.slice(0, headerleftList.length - 4)"
           :key="index">
           <svg-icon :icon-class="item.icon" />
           <span class="iconName">{{ item.name }}</span>
@@ -15,11 +15,18 @@
         </li>
       </ul>
     </div>
-    <el-tabs v-model="activeName">
-      <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
-      </el-tab-pane>
-    </el-tabs>
-    <component :is="editItem" />
+    <div class="tabsList">
+      <p v-show="issplitScreen" class="splitScreen tabsList-title">材料信息</p>
+      <el-tabs v-model="activeName">
+        <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
+        </el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <div class="splitScreen-con">
+      <div class="splitScreen" v-show="issplitScreen"></div>
+      <component :is="editItem" :key="key" />
+    </div>
   </div>
 </template>
 <script>
@@ -29,6 +36,7 @@ export default {
   components: {},
   data () {
     return {
+      key: 0,
       headerleftList: [
         {
           name: '图形定位',
@@ -76,7 +84,7 @@ export default {
         }
       ],
       activeName: '1',
-      tabList: [
+      tabList1: [
         {
           name: '受理申请',
         },
@@ -93,7 +101,9 @@ export default {
           name: '权利信息',
         },
       ],
-      editItem: ''
+      tabList: [],
+      editItem: '',
+      issplitScreen: false
     };
   },
   watch: {
@@ -105,11 +115,23 @@ export default {
       immediate: true
     }
   },
+  created () {
+    this.tabList = [...this.tabList1]
+  },
   methods: {
-    operation (index) {
-      if (index == 3) {
-        window.close()
+    operation (index, item) {
+      if (item.icon == 'fqsq5') {
+        this.key++
+        this.issplitScreen = !this.issplitScreen
+        if (this.issplitScreen) {
+          this.tabList.splice(1, 1)
+        } else {
+          this.tabList = [...this.tabList1]
+        }
       }
+      // if (index == 3) {
+      //   window.close()
+      // }
     },
     loadView (view) {
       return r => require.ensure([], () => r(require(`./components/${view}.vue`)))
@@ -119,10 +141,12 @@ export default {
 </script>
 <style scoped lang='scss'>
 @import "~@/styles/mixin.scss";
-/deep/.svg-icon{
+
+/deep/.svg-icon {
   width: 1.5em;
-    height: 1.5em;
+  height: 1.5em;
 }
+
 /deep/.el-tabs__nav-wrap {
   padding: 5px 0 0 15px;
 }
@@ -130,24 +154,39 @@ export default {
 /deep/.el-tabs__nav-wrap::after {
   height: 1px;
 }
-.iconName{
+
+.iconName {
   line-height: 30px;
 }
+
 .fqsq {
   width: 100%;
   height: 100%;
-  padding: 0 10%;
+  padding: 0 3%;
   box-sizing: border-box;
   background-color: #ffffff;
 
+  .splitScreen-con {
+    display: flex;
+  }
+
+  .splitScreen {
+    min-width: 500px;
+    width: 550px;
+    border-right: 1px solid $borderColor;
+  }
+
   &-header {
     @include flex;
     width: 100%;
-    height: 64px;
+    height: 80px;
     background-color: #10CCB8;
     color: #ffffff;
     justify-content: space-between;
     padding-left: 15px;
+    position: sticky;
+    top: 0;
+    z-index: 100;
 
     ul {
       @include flex;
@@ -160,5 +199,23 @@ export default {
       }
     }
   }
+
+  .tabsList {
+    width: 100%;
+    position: sticky;
+    top: 80px;
+    background-color: #ffffff;
+    z-index: 100;
+    @include flex;
+  }
+
+  .tabsList-title {
+    display: block;
+    line-height: 59px;
+  }
+
+  /deep/.el-tabs {
+    width: 100%;
+  }
 }
 </style>
\ No newline at end of file