style;分屏

任超
Showing 3 changed files with 100 additions and 78 deletions
src/views/ywbl/dbx/dbx.vue
src/views/ywbl/fqsq/components/slxx.vue
src/views/ywbl/fqsq/fqsq.vue
--- a/src/views/ywbl/dbx/dbx.vue
View file @8aed46f
+++ b/src/views/ywbl/dbx/dbx.vue
View file @8aed46f
@@ -6,66 +6,31 @@
        <el-row>
          <el-col :span="5">
            <el-form-item label="业务来源">
-              <el-select
+              <el-select v-model="queryForm.ywly" filterable clearable placeholder="请选择业务来源">
-                v-model="queryForm.ywly"
+                <el-option v-for="item in ywlys" :key="item.value" :label="item.label" :value="item.value">
-                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
+              <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
-                v-model="queryForm.qllx"
+                <el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
-                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
+              <el-select v-model="queryForm.djlx" filterable clearable placeholder="请选择登记类型">
-                v-model="queryForm.djlx"
+                <el-option v-for="item in djlxs" :key="item.value" :label="item.label" :value="item.value">
-                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
+              <el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
-                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">
+    <div class="from-clues-content">
-        <lb-table :page-size="pageData.size" heightNumSetting :current-page.sync="pageData.current"
+      <lb-table :page-size="pageData.size" :current-page.sync="pageData.current" :total="pageData.total"
-          :total="pageData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
+        @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
-          :column="tableData.columns" :data="tableData.data">
+        :data="tableData.data">
-        </lb-table>
+      </lb-table>
-      </div>
+    </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:[],
+      qllxs: [],
-      djlxs:[],
+      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(){
+    fetchData () {
-      searchTaskToDo({...this.queryForm,...this.pageData}).then(res=>{
+      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');
    },
  },
 };
--- a/src/views/ywbl/fqsq/components/slxx.vue
View file @8aed46f
+++ b/src/views/ywbl/fqsq/components/slxx.vue
View file @8aed46f
--- a/src/views/ywbl/fqsq/fqsq.vue
View file @8aed46f
+++ b/src/views/ywbl/fqsq/fqsq.vue
View file @8aed46f
@@ -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">
+    <div class="tabsList">
-      <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
+      <p v-show="issplitScreen" class="splitScreen tabsList-title">材料信息</p>
-      </el-tab-pane>
+      <el-tabs v-model="activeName">
-    </el-tabs>
+        <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
-    <component :is="editItem" />
+        </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) {
+    operation (index, item) {
-      if (index == 3) {
+      if (item.icon == 'fqsq5') {
-        window.close()
+        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