Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
8aed46f3 by 任超
Options

style;分屏

1 parent 6aa973ce
Inline Side-by-side
Showing 3 changed files with 184 additions and 151 deletions
...@@ -6,66 +6,31 @@ ...@@ -6,66 +6,31 @@
6 <el-row> 6 <el-row>
7 <el-col :span="5"> 7 <el-col :span="5">
8 <el-form-item label="业务来源"> 8 <el-form-item label="业务来源">
9 <el-select 9 <el-select v-model="queryForm.ywly" filterable clearable placeholder="请选择业务来源">
10 v-model="queryForm.ywly" 10 <el-option v-for="item in ywlys" :key="item.value" :label="item.label" :value="item.value">
11 filterable
12 clearable
13 placeholder="请选择业务来源"
14 >
15 <el-option
16 v-for="item in ywlys"
17 :key="item.value"
18 :label="item.label"
19 :value="item.value"
20 >
21 </el-option> 11 </el-option>
22 </el-select> 12 </el-select>
23 </el-form-item> 13 </el-form-item>
24 </el-col> 14 </el-col>
25 <el-col :span="5"> 15 <el-col :span="5">
26 <el-form-item label="权利类型"> 16 <el-form-item label="权利类型">
27 <el-select 17 <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
28 v-model="queryForm.qllx" 18 <el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
29 filterable
30 clearable
31 placeholder="请选择权利类型"
32 >
33 <el-option
34 v-for="item in qllxs"
35 :key="item.value"
36 :label="item.label"
37 :value="item.value"
38 >
39 </el-option> 19 </el-option>
40 </el-select> 20 </el-select>
41 </el-form-item> 21 </el-form-item>
42 </el-col> 22 </el-col>
43 <el-col :span="5"> 23 <el-col :span="5">
44 <el-form-item label="登记类型"> 24 <el-form-item label="登记类型">
45 <el-select 25 <el-select v-model="queryForm.djlx" filterable clearable placeholder="请选择登记类型">
46 v-model="queryForm.djlx" 26 <el-option v-for="item in djlxs" :key="item.value" :label="item.label" :value="item.value">
47 filterable
48 clearable
49 placeholder="请选择登记类型"
50 >
51 <el-option
52 v-for="item in djlxs"
53 :key="item.value"
54 :label="item.label"
55 :value="item.value"
56 >
57 </el-option> 27 </el-option>
58 </el-select> 28 </el-select>
59 </el-form-item> 29 </el-form-item>
60 </el-col> 30 </el-col>
61 <el-col :span="5"> 31 <el-col :span="5">
62 <el-form-item label="业务号"> 32 <el-form-item label="业务号">
63 <el-input 33 <el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
64 placeholder="请输入业务号"
65 v-model="queryForm.ywh"
66 clearable
67 class="width200px"
68 >
69 </el-input> 34 </el-input>
70 </el-form-item> 35 </el-form-item>
71 </el-col> 36 </el-col>
...@@ -80,30 +45,30 @@ ...@@ -80,30 +45,30 @@
80 </el-form> 45 </el-form>
81 </div> 46 </div>
82 <!-- 表格 --> 47 <!-- 表格 -->
83 <!-- 表格 --> 48 <!-- 表格 -->
84 <div class="from-clues-content"> 49 <div class="from-clues-content">
85 <lb-table :page-size="pageData.size" heightNumSetting :current-page.sync="pageData.current" 50 <lb-table :page-size="pageData.size" :current-page.sync="pageData.current" :total="pageData.total"
86 :total="pageData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange" 51 @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
87 :column="tableData.columns" :data="tableData.data"> 52 :data="tableData.data">
88 </lb-table> 53 </lb-table>
89 </div> 54 </div>
90 </div> 55 </div>
91 </template> 56 </template>
92 <script> 57 <script>
93 import table from "@/utils/mixin/table"; 58 import table from "@/utils/mixin/table";
94 import { datas, sendThis } from "./dbxdata"; 59 import { datas, sendThis } from "./dbxdata";
95 import {searchTaskToDo} from "@/api/ywbl.js" 60 import { searchTaskToDo } from "@/api/ywbl.js"
96 export default { 61 export default {
97 name: "dbx", 62 name: "dbx",
98 components: {}, 63 components: {},
99 mixins: [table], 64 mixins: [table],
100 mounted() { 65 mounted () {
101 sendThis(this); 66 sendThis(this);
102 }, 67 },
103 data() { 68 data () {
104 return { 69 return {
105 qllxs:[], 70 qllxs: [],
106 djlxs:[], 71 djlxs: [],
107 queryForm: { 72 queryForm: {
108 ywly: "", 73 ywly: "",
109 qllx: "", 74 qllx: "",
...@@ -117,7 +82,7 @@ export default { ...@@ -117,7 +82,7 @@ export default {
117 }, 82 },
118 83
119 ywlys: datas.ywlys(), 84 ywlys: datas.ywlys(),
120 85
121 tableData: { 86 tableData: {
122 columns: datas.columns(), 87 columns: datas.columns(),
123 data: [], 88 data: [],
...@@ -127,8 +92,8 @@ export default { ...@@ -127,8 +92,8 @@ export default {
127 created () { }, 92 created () { },
128 methods: { 93 methods: {
129 // 列表渲染接口 94 // 列表渲染接口
130 fetchData(){ 95 fetchData () {
131 searchTaskToDo({...this.queryForm,...this.pageData}).then(res=>{ 96 searchTaskToDo({ ...this.queryForm, ...this.pageData }).then(res => {
132 if (res.code === 200) { 97 if (res.code === 200) {
133 let { total, records } = res.result 98 let { total, records } = res.result
134 this.pageData.total = total; 99 this.pageData.total = total;
...@@ -136,18 +101,18 @@ export default { ...@@ -136,18 +101,18 @@ export default {
136 } 101 }
137 }) 102 })
138 }, 103 },
139 queryClick(){ 104 queryClick () {
140 this.fetchData() 105 this.fetchData()
141 }, 106 },
142 handleSort(name, sort) { 107 handleSort (name, sort) {
143 console.log(name, sort); 108 console.log(name, sort);
144 }, 109 },
145 openDialog() { 110 openDialog () {
146 console.log(999999999999999); 111 console.log(999999999999999);
147 }, 112 },
148 ywhClick(bsmSlsq){ 113 ywhClick (bsmSlsq) {
149 const { href } = this.$router.resolve('/fqsq?bsmSlsq=' + bsmSlsq) 114 const { href } = this.$router.resolve('/fqsq?bsmSlsq=' + bsmSlsq)
150 window.open(href, '_blank'); 115 window.open(href, '_blank');
151 }, 116 },
152 }, 117 },
153 }; 118 };
......
1 <template> 1 <template>
2 <div class='slxx'> 2 <div class='slxx'>
3 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="flagTop" :inline="flag" label-width="180px"> 3 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-position="flagTop" :inline="flag"
4 label-width="140px">
4 <div class="slxx_title">受理信息</div> 5 <div class="slxx_title">受理信息</div>
5 <el-row> 6 <el-row>
6 <el-col :span="8"> 7 <el-col :span="8">
7 <el-form-item label="业务号：" prop="ywh"> 8 <el-form-item label="业务号：" prop="ywh">
8 <el-input :class="{'width200px':flag}" v-model="ruleForm.ywh"></el-input> 9 <el-input :class="{ 'width200px': flag }" v-model="ruleForm.ywh"></el-input>
9 </el-form-item> 10 </el-form-item>
10 </el-col> 11 </el-col>
11 <el-col :span="8"> 12 <el-col :span="8">
12 <el-form-item label="受理人员：" prop="slry"> 13 <el-form-item label="受理人员：" prop="slry">
13 <el-input :class="{'width200px':flag}" v-model="ruleForm.slry"></el-input> 14 <el-input :class="{ 'width200px': flag }" v-model="ruleForm.slry"></el-input>
14 </el-form-item> 15 </el-form-item>
15 </el-col> 16 </el-col>
16 <el-col :span="8"> 17 <el-col :span="8">
17 <el-form-item label="使用权结束时间：" prop="slsj"> 18 <el-form-item label="使用权结束时间：" prop="slsj">
18 <el-date-picker :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.slsj" type="datetime" placeholder="选择结束时间" 19 <el-date-picker :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.slsj" type="datetime"
19 value-format="yyyy-MM-dd" > 20 placeholder="选择结束时间" value-format="yyyy-MM-dd">
20 </el-date-picker> 21 </el-date-picker>
21 </el-form-item> 22 </el-form-item>
22 </el-col> 23 </el-col>
23 </el-row> 24 </el-row>
24 <el-row> 25 <el-row>
25 <el-col :span="8"> 26 <el-col :span="8">
26 <el-form-item label="权利类型：" prop="qllx"> 27 <el-form-item label="权利类型：" prop="qllx">
27 <el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.qllx" filterable clearable placeholder="请选择权利类型"> 28 <el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.qllx" filterable clearable
29 placeholder="请选择权利类型">
28 <el-option v-for="item in qllxOption" :key="item.value" :label="item.label" :value="item.value"> 30 <el-option v-for="item in qllxOption" :key="item.value" :label="item.label" :value="item.value">
29 </el-option> 31 </el-option>
30 </el-select> 32 </el-select>
...@@ -32,7 +34,8 @@ ...@@ -32,7 +34,8 @@
32 </el-col> 34 </el-col>
33 <el-col :span="8"> 35 <el-col :span="8">
34 <el-form-item label="登记类型：" prop="djlx"> 36 <el-form-item label="登记类型：" prop="djlx">
35 <el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.djlx" filterable clearable placeholder="请选择登记类型"> 37 <el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.djlx" filterable clearable
38 placeholder="请选择登记类型">
36 <el-option v-for="item in djlxOption" :key="item.value" :label="item.label" :value="item.value"> 39 <el-option v-for="item in djlxOption" :key="item.value" :label="item.label" :value="item.value">
37 </el-option> 40 </el-option>
38 </el-select> 41 </el-select>
...@@ -40,7 +43,8 @@ ...@@ -40,7 +43,8 @@
40 </el-col> 43 </el-col>
41 <el-col :span="8"> 44 <el-col :span="8">
42 <el-form-item label="登记情形：" prop="djqx"> 45 <el-form-item label="登记情形：" prop="djqx">
43 <el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.djqx" filterable clearable placeholder="请选择登记情形"> 46 <el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.djqx" filterable clearable
47 placeholder="请选择登记情形">
44 <el-option v-for="item in djqxOption" :key="item.value" :label="item.label" :value="item.value"> 48 <el-option v-for="item in djqxOption" :key="item.value" :label="item.label" :value="item.value">
45 </el-option> 49 </el-option>
46 </el-select> 50 </el-select>
...@@ -51,17 +55,18 @@ ...@@ -51,17 +55,18 @@
51 <el-row> 55 <el-row>
52 <el-col :span="8"> 56 <el-col :span="8">
53 <el-form-item label="宗地代码：" prop="zddm"> 57 <el-form-item label="宗地代码：" prop="zddm">
54 <el-input :class="{'width200px':flag}" v-model="ruleForm.zddm"></el-input> 58 <el-input :class="{ 'width200px': flag }" v-model="ruleForm.zddm"></el-input>
55 </el-form-item> 59 </el-form-item>
56 </el-col> 60 </el-col>
57 <el-col :span="8"> 61 <el-col :span="8">
58 <el-form-item label="不动产单元号：" prop="bdcdyh"> 62 <el-form-item label="不动产单元号：" prop="bdcdyh">
59 <el-input :class="{'width200px':flag}" v-model="ruleForm.bdcdyh"></el-input> 63 <el-input :class="{ 'width200px': flag }" v-model="ruleForm.bdcdyh"></el-input>
60 </el-form-item> 64 </el-form-item>
61 </el-col> 65 </el-col>
62 <el-col :span="8"> 66 <el-col :span="8">
63 <el-form-item label="权利性质：" prop="qlxz"> 67 <el-form-item label="权利性质：" prop="qlxz">
64 <el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.qlxz" filterable clearable placeholder="请选择登记情形"> 68 <el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.qlxz" filterable clearable
69 placeholder="请选择登记情形">
65 <el-option v-for="item in qlxzOption" :key="item.value" :label="item.label" :value="item.value"> 70 <el-option v-for="item in qlxzOption" :key="item.value" :label="item.label" :value="item.value">
66 </el-option> 71 </el-option>
67 </el-select> 72 </el-select>
...@@ -71,19 +76,20 @@ ...@@ -71,19 +76,20 @@
71 <el-row> 76 <el-row>
72 <el-col :span="8"> 77 <el-col :span="8">
73 <el-form-item label="宗地面积：" prop="zdmj"> 78 <el-form-item label="宗地面积：" prop="zdmj">
74 <el-input :class="{'width200px':flag}" v-model="ruleForm.zdmj"></el-input> 79 <el-input :class="{ 'width200px': flag }" v-model="ruleForm.zdmj"></el-input>
75 </el-form-item> 80 </el-form-item>
76 </el-col> 81 </el-col>
77 <el-col :span="16"> 82 <el-col :span="16">
78 <el-form-item label="坐落：" prop="zl"> 83 <el-form-item label="坐落：" prop="zl">
79 <el-input style="width: 100%" v-model="ruleForm.zl"></el-input> 84 <el-input style="width: 100%" v-model="ruleForm.zl"></el-input>
80 </el-form-item> 85 </el-form-item>
81 </el-col> 86 </el-col>
82 </el-row> 87 </el-row>
83 <el-row> 88 <el-row>
84 <el-col :span="8"> 89 <el-col :span="8">
85 <el-form-item label="土地用途：" prop="tdyt"> 90 <el-form-item label="土地用途：" prop="tdyt">
86 <el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.tdyt" filterable clearable placeholder="请选择登记情形"> 91 <el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.tdyt" filterable clearable
92 placeholder="请选择登记情形">
87 <el-option v-for="item in tdytOption" :key="item.value" :label="item.label" :value="item.value"> 93 <el-option v-for="item in tdytOption" :key="item.value" :label="item.label" :value="item.value">
88 </el-option> 94 </el-option>
89 </el-select> 95 </el-select>
...@@ -91,7 +97,8 @@ ...@@ -91,7 +97,8 @@
91 </el-col> 97 </el-col>
92 <el-col :span="8"> 98 <el-col :span="8">
93 <el-form-item label="权利设定方式：" prop="qlsdfs"> 99 <el-form-item label="权利设定方式：" prop="qlsdfs">
94 <el-select :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.qlsdfs" filterable clearable placeholder="请选择登记情形"> 100 <el-select :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.qlsdfs" filterable clearable
101 placeholder="请选择登记情形">
95 <el-option v-for="item in qlsdfsOption" :key="item.value" :label="item.label" :value="item.value"> 102 <el-option v-for="item in qlsdfsOption" :key="item.value" :label="item.label" :value="item.value">
96 </el-option> 103 </el-option>
97 </el-select> 104 </el-select>
...@@ -99,37 +106,37 @@ ...@@ -99,37 +106,37 @@
99 </el-col> 106 </el-col>
100 <el-col :span="8"> 107 <el-col :span="8">
101 <el-form-item label="取得价格：" prop="qdjg"> 108 <el-form-item label="取得价格：" prop="qdjg">
102 <el-input :class="{'width200px':flag}" v-model="ruleForm.qdjg"></el-input> 109 <el-input :class="{ 'width200px': flag }" v-model="ruleForm.qdjg"></el-input>
103 </el-form-item> 110 </el-form-item>
104 </el-col> 111 </el-col>
105 </el-row> 112 </el-row>
106 <el-row> 113 <el-row>
107 <el-col :span="8"> 114 <el-col :span="8">
108 <el-form-item label="使用权起始时间：" prop="syqqssj"> 115 <el-form-item label="使用权起始时间：" prop="syqqssj">
109 <el-date-picker :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.syqqssj" type="datetime" placeholder="选择起始时间" 116 <el-date-picker :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.syqqssj" type="datetime"
110 value-format="yyyy-MM-dd" > 117 placeholder="选择起始时间" value-format="yyyy-MM-dd">
111 </el-date-picker> 118 </el-date-picker>
112 </el-form-item> 119 </el-form-item>
113 </el-col> 120 </el-col>
114 <el-col :span="8"> 121 <el-col :span="8">
115 <el-form-item label="使用权结束时间：" prop="syqjssj"> 122 <el-form-item label="使用权结束时间：" prop="syqjssj">
116 <el-date-picker :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.syqjssj" type="datetime" placeholder="选择结束时间" 123 <el-date-picker :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.syqjssj" type="datetime"
117 value-format="yyyy-MM-dd" > 124 placeholder="选择结束时间" value-format="yyyy-MM-dd">
118 </el-date-picker> 125 </el-date-picker>
119 </el-form-item> 126 </el-form-item>
120 </el-col> 127 </el-col>
121 <el-col :span="8"> 128 <el-col :span="8">
122 <el-form-item label="使用期限：" prop="syqx"> 129 <el-form-item label="使用期限：" prop="syqx">
123 <el-date-picker :class="[flag?'width200px':'Inputclass']" v-model="ruleForm.syqx" type="datetime" placeholder="选择使用期限" 130 <el-date-picker :class="[flag ? 'width200px' : 'Inputclass']" v-model="ruleForm.syqx" type="datetime"
124 value-format="yyyy-MM-dd" > 131 placeholder="选择使用期限" value-format="yyyy-MM-dd">
125 </el-date-picker> 132 </el-date-picker>
126 </el-form-item> 133 </el-form-item>
127 </el-col> 134 </el-col>
128 </el-row> 135 </el-row>
129 <el-row> 136 <el-row>
130 <el-col> 137 <el-col>
131 <el-form-item label="附记：" prop="fj"> 138 <el-form-item label="附记：" prop="fj">
132 <el-input type="textarea" v-model="ruleForm.fj"></el-input> 139 <el-input type="textarea" v-model="ruleForm.fj"></el-input>
133 </el-form-item> 140 </el-form-item>
134 </el-col> 141 </el-col>
135 </el-row> 142 </el-row>
...@@ -145,7 +152,7 @@ ...@@ -145,7 +152,7 @@
145 </el-form-item> 152 </el-form-item>
146 </el-col> 153 </el-col>
147 <el-col> 154 <el-col>
148 <InformationTable /> 155 <InformationTable />
149 </el-col> 156 </el-col>
150 </el-row> 157 </el-row>
151 <div class="slxx_title">登记原因</div> 158 <div class="slxx_title">登记原因</div>
...@@ -167,42 +174,42 @@ ...@@ -167,42 +174,42 @@
167 </div> 174 </div>
168 </template> 175 </template>
169 <script> 176 <script>
170 let flag = false //控制分屏样式的开关按钮 177 let flag = false //控制分屏样式的开关按钮
171 import InformationTable from './InformationTable' 178 import InformationTable from './InformationTable'
172 export default { 179 export default {
173 /**注册组件*/ 180 /**注册组件*/
174 components: {InformationTable}, 181 components: { InformationTable },
175 data () { 182 data () {
176 return { 183 return {
177 flag:flag, 184 flag: flag,
178 flagTop:flag?'top':'', 185 flagTop: flag ? 'top' : '',
179 qllxOption:[], 186 qllxOption: [],
180 djlxOption:[], 187 djlxOption: [],
181 djqxOption:[], 188 djqxOption: [],
182 qlxzOption:[], 189 qlxzOption: [],
183 tdytOption:[], 190 tdytOption: [],
184 qlsdfsOption:[], 191 qlsdfsOption: [],
185 ruleForm: { 192 ruleForm: {
186 ywh: '', 193 ywh: '',
187 slry:"", 194 slry: "",
188 slsj:"", 195 slsj: "",
189 qllx:"", 196 qllx: "",
190 djlx:"", 197 djlx: "",
191 djqx:"", 198 djqx: "",
192 zddm:"", 199 zddm: "",
193 bdcdyh:"", 200 bdcdyh: "",
194 qlxz:"", 201 qlxz: "",
195 zdmj:"", 202 zdmj: "",
196 zl:"", 203 zl: "",
197 tdyt:"", 204 tdyt: "",
198 qlsdfs:"", 205 qlsdfs: "",
199 qdjg:"", 206 qdjg: "",
200 syqqssj:"", 207 syqqssj: "",
201 syqjssj:"", 208 syqjssj: "",
202 syqx:"", 209 syqx: "",
203 fj:"", 210 fj: "",
204 djyy:"", 211 djyy: "",
205 gyfs:"", 212 gyfs: "",
206 }, 213 },
207 rules: { 214 rules: {
208 // ywh: [ 215 // ywh: [
...@@ -213,33 +220,37 @@ export default { ...@@ -213,33 +220,37 @@ export default {
213 }, 220 },
214 221
215 methods: { 222 methods: {
216 onSubmit(){}, 223 onSubmit () { },
217 }, 224 },
218 } 225 }
219 </script> 226 </script>
220 <style scoped lang='scss'> 227 <style scoped lang='scss'>
221 @import "~@/styles/public.scss"; 228 @import "~@/styles/public.scss";
229
222 .slxx_title { 230 .slxx_title {
223 border-bottom: 1px solid $borderColor; 231 border-bottom: 1px solid $borderColor;
224 padding-left: 10px; 232 padding-left: 10px;
225 padding-bottom: 20px; 233 padding-bottom: 20px;
226 margin-bottom: 15px; 234 margin-bottom: 15px;
227 margin-top: 30px; 235 margin-top: 30px;
228 font-size: 18px; 236 font-size: 18px;
229 font-family: PingFangSC-Medium, PingFang SC; 237 font-family: PingFangSC-Medium, PingFang SC;
230 font-weight: 500; 238 font-weight: 500;
231 color: #4A4A4A; 239 color: #4A4A4A;
232 240
233 } 241 }
234 .btn{ 242
243 .btn {
235 text-align: center; 244 text-align: center;
236 } 245 }
237 .textArea{ 246
238 /deep/.el-textarea__inner{ 247 .textArea {
239 min-height: 90px!important; 248 /deep/.el-textarea__inner {
249 min-height: 90px !important;
240 } 250 }
241 } 251 }
242 .Inputclass{ 252
253 .Inputclass {
243 width: 100%; 254 width: 100%;
244 } 255 }
245 </style> 256 </style>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
2 <div class='fqsq'> 2 <div class='fqsq'>
3 <div class="fqsq-header"> 3 <div class="fqsq-header">
4 <ul> 4 <ul>
5 <li @click="operation(index)" v-for="(item, index) in headerleftList.slice(0, headerleftList.length - 4)" 5 <li @click="operation(index, item)" v-for="(item, index) in headerleftList.slice(0, headerleftList.length - 4)"
6 :key="index"> 6 :key="index">
7 <svg-icon :icon-class="item.icon" /> 7 <svg-icon :icon-class="item.icon" />
8 <span class="iconName">{{ item.name }}</span> 8 <span class="iconName">{{ item.name }}</span>
...@@ -15,11 +15,18 @@ ...@@ -15,11 +15,18 @@
15 </li> 15 </li>
16 </ul> 16 </ul>
17 </div> 17 </div>
18 <el-tabs v-model="activeName"> 18 <div class="tabsList">
19 <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index"> 19 <p v-show="issplitScreen" class="splitScreen tabsList-title">材料信息</p>
20 </el-tab-pane> 20 <el-tabs v-model="activeName">
21 </el-tabs> 21 <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index">
22 <component :is="editItem" /> 22 </el-tab-pane>
23 </el-tabs>
24 </div>
25
26 <div class="splitScreen-con">
27 <div class="splitScreen" v-show="issplitScreen"></div>
28 <component :is="editItem" :key="key" />
29 </div>
23 </div> 30 </div>
24 </template> 31 </template>
25 <script> 32 <script>
...@@ -29,6 +36,7 @@ export default { ...@@ -29,6 +36,7 @@ export default {
29 components: {}, 36 components: {},
30 data () { 37 data () {
31 return { 38 return {
39 key: 0,
32 headerleftList: [ 40 headerleftList: [
33 { 41 {
34 name: '图形定位', 42 name: '图形定位',
...@@ -76,7 +84,7 @@ export default { ...@@ -76,7 +84,7 @@ export default {
76 } 84 }
77 ], 85 ],
78 activeName: '1', 86 activeName: '1',
79 tabList: [ 87 tabList1: [
80 { 88 {
81 name: '受理申请', 89 name: '受理申请',
82 }, 90 },
...@@ -93,7 +101,9 @@ export default { ...@@ -93,7 +101,9 @@ export default {
93 name: '权利信息', 101 name: '权利信息',
94 }, 102 },
95 ], 103 ],
96 editItem: '' 104 tabList: [],
105 editItem: '',
106 issplitScreen: false
97 }; 107 };
98 }, 108 },
99 watch: { 109 watch: {
...@@ -105,11 +115,23 @@ export default { ...@@ -105,11 +115,23 @@ export default {
105 immediate: true 115 immediate: true
106 } 116 }
107 }, 117 },
118 created () {
119 this.tabList = [...this.tabList1]
120 },
108 methods: { 121 methods: {
109 operation (index) { 122 operation (index, item) {
110 if (index == 3) { 123 if (item.icon == 'fqsq5') {
111 window.close() 124 this.key++
125 this.issplitScreen = !this.issplitScreen
126 if (this.issplitScreen) {
127 this.tabList.splice(1, 1)
128 } else {
129 this.tabList = [...this.tabList1]
130 }
112 } 131 }
132 // if (index == 3) {
133 // window.close()
134 // }
113 }, 135 },
114 loadView (view) { 136 loadView (view) {
115 return r => require.ensure([], () => r(require(`./components/${view}.vue`))) 137 return r => require.ensure([], () => r(require(`./components/${view}.vue`)))
...@@ -119,10 +141,12 @@ export default { ...@@ -119,10 +141,12 @@ export default {
119 </script> 141 </script>
120 <style scoped lang='scss'> 142 <style scoped lang='scss'>
121 @import "~@/styles/mixin.scss"; 143 @import "~@/styles/mixin.scss";
122 /deep/.svg-icon{ 144
145 /deep/.svg-icon {
123 width: 1.5em; 146 width: 1.5em;
124 height: 1.5em; 147 height: 1.5em;
125 } 148 }
149
126 /deep/.el-tabs__nav-wrap { 150 /deep/.el-tabs__nav-wrap {
127 padding: 5px 0 0 15px; 151 padding: 5px 0 0 15px;
128 } 152 }
...@@ -130,24 +154,39 @@ export default { ...@@ -130,24 +154,39 @@ export default {
130 /deep/.el-tabs__nav-wrap::after { 154 /deep/.el-tabs__nav-wrap::after {
131 height: 1px; 155 height: 1px;
132 } 156 }
133 .iconName{ 157
158 .iconName {
134 line-height: 30px; 159 line-height: 30px;
135 } 160 }
161
136 .fqsq { 162 .fqsq {
137 width: 100%; 163 width: 100%;
138 height: 100%; 164 height: 100%;
139 padding: 0 10%; 165 padding: 0 3%;
140 box-sizing: border-box; 166 box-sizing: border-box;
141 background-color: #ffffff; 167 background-color: #ffffff;
142 168
169 .splitScreen-con {
170 display: flex;
171 }
172
173 .splitScreen {
174 min-width: 500px;
175 width: 550px;
176 border-right: 1px solid $borderColor;
177 }
178
143 &-header { 179 &-header {
144 @include flex; 180 @include flex;
145 width: 100%; 181 width: 100%;
146 height: 64px; 182 height: 80px;
147 background-color: #10CCB8; 183 background-color: #10CCB8;
148 color: #ffffff; 184 color: #ffffff;
149 justify-content: space-between; 185 justify-content: space-between;
150 padding-left: 15px; 186 padding-left: 15px;
187 position: sticky;
188 top: 0;
189 z-index: 100;
151 190
152 ul { 191 ul {
153 @include flex; 192 @include flex;
...@@ -160,5 +199,23 @@ export default { ...@@ -160,5 +199,23 @@ export default {
160 } 199 }
161 } 200 }
162 } 201 }
202
203 .tabsList {
204 width: 100%;
205 position: sticky;
206 top: 80px;
207 background-color: #ffffff;
208 z-index: 100;
209 @include flex;
210 }
211
212 .tabsList-title {
213 display: block;
214 line-height: 59px;
215 }
216
217 /deep/.el-tabs {
218 width: 100%;
219 }
163 } 220 }
164 </style> 221 </style>
...\ No newline at end of file ...\ No newline at end of file
......