style;分屏
Showing
3 changed files
with
157 additions
and
124 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> |
| ... | @@ -82,9 +47,9 @@ | ... | @@ -82,9 +47,9 @@ |
| 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> |
| ... | @@ -92,18 +57,18 @@ | ... | @@ -92,18 +57,18 @@ |
| 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: "", |
| ... | @@ -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,16 +101,16 @@ export default { | ... | @@ -136,16 +101,16 @@ 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 | }, | ... | ... |
| 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> |
| ... | @@ -24,7 +25,8 @@ | ... | @@ -24,7 +25,8 @@ |
| 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,7 +76,7 @@ | ... | @@ -71,7 +76,7 @@ |
| 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"> |
| ... | @@ -83,7 +88,8 @@ | ... | @@ -83,7 +88,8 @@ |
| 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,29 +106,29 @@ | ... | @@ -99,29 +106,29 @@ |
| 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> |
| ... | @@ -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,12 +220,13 @@ export default { | ... | @@ -213,12 +220,13 @@ 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; |
| ... | @@ -231,15 +239,18 @@ export default { | ... | @@ -231,15 +239,18 @@ export default { |
| 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 | <div class="tabsList"> | ||
| 19 | <p v-show="issplitScreen" class="splitScreen tabsList-title">材料信息</p> | ||
| 18 | <el-tabs v-model="activeName"> | 20 | <el-tabs v-model="activeName"> |
| 19 | <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index"> | 21 | <el-tab-pane :label="item.name" :name="index + 1 + ''" v-for="(item, index) in tabList" :key="index"> |
| 20 | </el-tab-pane> | 22 | </el-tab-pane> |
| 21 | </el-tabs> | 23 | </el-tabs> |
| 22 | <component :is="editItem" /> | 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 | ... | ... |
-
Please register or sign in to post a comment