Skip to content

bdc / bdcdj-web

Go to a project
Toggle navigation
Toggle navigation pinning
6dfabc15 by 任超
Options

style:业务申请

1 parent 1843d138
Inline Side-by-side
Showing 4 changed files with 141 additions and 78 deletions
1 import request from '@/utils/request' 1 import request from '@/utils/request'
2 /* 2 /*
3 业务办理-业务申请规则API 3 业务办理-获取收藏业务集合
4 */ 4 */
5 // 选择单元-根据条件进行列表查询 5 export function getCollectBiz () {
6 return request({
7 url: '/ywbl/BusinessApply/getCollectBiz',
8 method: 'post'
9 })
10 }
11
12 /*
13 业务办理-获取左侧菜单
14 */
15 export function getleftMenu () {
16 return request({
17 url: '/ywbl/BusinessApply/getleftMenu',
18 method: 'post'
19 })
20 }
21 /*
22 业务办理-获取下个节点内容
23 */
24 export function getNextNode (bsmSqyw) {
25 return request({
26 url: '/ywbl/BusinessApply/getNextNode?parentid=' + bsmSqyw,
27 method: 'post',
28 })
29 }
30
31 /*
32 业务办理-选择单元-根据条件进行列表查询
33 */
34 //
6 export function getselectBdcdy (data) { 35 export function getselectBdcdy (data) {
7 return request({ 36 return request({
8 url: '/ywbl/ywsq/selectBdcdy', 37 url: '/ywbl/ywsq/selectBdcdy',
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 </div> 25 </div>
26 <!-- 表格 --> 26 <!-- 表格 -->
27 <div class="from-clues-content"> 27 <div class="from-clues-content">
28 <lb-table :page-size="pageData.size" :current-page.sync="pageData.current" :total="tableData.total" 28 <lb-table :page-size="pageData.pageSize" :current-page.sync="pageData.currentPage" :total="tableData.total"
29 @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns" 29 @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
30 :data="tableData.data"> 30 :data="tableData.data">
31 </lb-table> 31 </lb-table>
......
...@@ -15,12 +15,24 @@ ...@@ -15,12 +15,24 @@
15 color: $menuText !important; 15 color: $menuText !important;
16 } 16 }
17 17
18 .cactive {
19 border: 1px solid $light-blue !important;
20 color: $light-blue !important;
21 }
22
18 .ywsq-left { 23 .ywsq-left {
19 width: 260px; 24 width: 270px;
20 background-color: #fff; 25 background-color: #fff;
21 height: 100%; 26 height: 100%;
22 box-sizing: border-box; 27 box-sizing: border-box;
23 padding: 10px; 28 padding: 10px;
29 display: flex;
30 flex-direction: column;
31
32 .item-list {
33 max-height: calc(100vh - 380px);
34 overflow-y: auto;
35 }
24 36
25 p { 37 p {
26 width: 100%; 38 width: 100%;
...@@ -81,7 +93,7 @@ ...@@ -81,7 +93,7 @@
81 } 93 }
82 94
83 .ywsq-right { 95 .ywsq-right {
84 width: calc(100% - 265px); 96 width: calc(100% - 255px);
85 margin-left: 5px; 97 margin-left: 5px;
86 height: 100%; 98 height: 100%;
87 display: flex; 99 display: flex;
...@@ -107,6 +119,7 @@ ...@@ -107,6 +119,7 @@
107 119
108 li { 120 li {
109 width: 23.5%; 121 width: 23.5%;
122 height: 50px;
110 line-height: 50px; 123 line-height: 50px;
111 border: 1px solid $borderColor; 124 border: 1px solid $borderColor;
112 border-radius: 5px; 125 border-radius: 5px;
...@@ -114,11 +127,36 @@ ...@@ -114,11 +127,36 @@
114 padding-left: 10px; 127 padding-left: 10px;
115 transition: all 0.3s; 128 transition: all 0.3s;
116 cursor: pointer; 129 cursor: pointer;
130 @include flex;
131 justify-content: space-between;
132 margin-left: 20px;
133 cursor: pointer;
134
135 p {
136 @include flex-center;
137 }
117 138
118 &:hover { 139 &:hover {
119 border: 1px solid $light-blue; 140 border: 1px solid $light-blue;
120 color: $light-blue; 141 color: $light-blue;
121 } 142 }
143
144 p:nth-child(1) {
145 flex: 1;
146 width: 100%;
147 padding: 3px;
148 }
149
150 p:nth-child(2) {
151 width: 50px;
152 height: 50px;
153 border-left: 1px solid $borderColor;
154 cursor: pointer;
155 }
156
157 i {
158 font-size: 24px;
159 }
122 } 160 }
123 } 161 }
124 162
...@@ -133,6 +171,13 @@ ...@@ -133,6 +171,13 @@
133 margin-left: -20px; 171 margin-left: -20px;
134 justify-content: space-between; 172 justify-content: space-between;
135 173
174 &:after {
175 content: "";
176 width: 31%; //与块级的宽度相同
177 display: block;
178 height: 0;
179 }
180
136 li { 181 li {
137 width: 31%; 182 width: 31%;
138 height: 50px; 183 height: 50px;
...@@ -177,10 +222,7 @@ ...@@ -177,10 +222,7 @@
177 color: $light-blue; 222 color: $light-blue;
178 } 223 }
179 224
180 .cactive { 225
181 border: 1px solid $light-blue;
182 color: $light-blue;
183 }
184 } 226 }
185 227
186 .submit-button { 228 .submit-button {
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
7 <el-collapse-item title="业务申请" name="1"> 7 <el-collapse-item title="业务申请" name="1">
8 <ul class="item-list"> 8 <ul class="item-list">
9 <li v-for="(obj, key) in list" :key="key" @click="handleList(list, obj)" :class="obj.check ? 'active' : ''"> 9 <li v-for="(obj, key) in list" :key="key" @click="handleList(list, obj)" :class="obj.check ? 'active' : ''">
10 {{ obj.name }}</li> 10 {{ obj.nodename }}</li>
11 </ul> 11 </ul>
12 </el-collapse-item> 12 </el-collapse-item>
13 </el-collapse> 13 </el-collapse>
...@@ -18,19 +18,27 @@ ...@@ -18,19 +18,27 @@
18 <div class="right-type el-card box-card is-always-shadow" v-if="n == -1"> 18 <div class="right-type el-card box-card is-always-shadow" v-if="n == -1">
19 <div class="right-title">登记类型</div> 19 <div class="right-title">登记类型</div>
20 <ul class="type-content"> 20 <ul class="type-content">
21 <li :class="item.select ? 'active' : ''" @click="handleTypeSelect(item)" v-for="(item, index) in typeList" 21 <li :class="item.select ? 'cactive' : ''" @click="handleDjlxSelect(item)" v-for="(item, index) in djlxList"
22 :key="index">{{ item.name }}</li> 22 :key="index">
23 <p>
24 {{ item.nodename }}
25 </p>
26 <p v-if="item.sffqlc == 1" :class="item.select ? 'active' : ''">
27 <i class="el-icon-star-off" :class="item.select ? 'active' : ''"></i>
28 </p>
29 </li>
23 </ul> 30 </ul>
24 </div> 31 </div>
25 <div class="right-situation el-card box-card is-always-shadow"> 32 <div class="right-situation el-card box-card is-always-shadow">
26 <div v-if="n >= 0"> 33 <div v-if="n >= 0">
27 <div class="right-title">业务列表</div> 34 <div class="right-title">业务列表</div>
28 <ul> 35 <ul>
29 <li v-for="(item, index) in busList" :key="index"> 36 <li v-for="(item, index) in ywList" :key="index" @click="handleYwSelect(item)"
37 :class="item.cselect ? 'cactive' : ''">
30 <p> 38 <p>
31 {{ item.name }} 39 {{ item.nodename }}
32 </p> 40 </p>
33 <p :class="item.select ? 'active' : ''" @click="handleCollection(item)"> 41 <p v-if="item.sffqlc == 1" :class="item.select ? 'active' : ''" @click="handleCollection(item)">
34 <i class="el-icon-star-off" :class="item.select ? 'active' : ''"></i> 42 <i class="el-icon-star-off" :class="item.select ? 'active' : ''"></i>
35 </p> 43 </p>
36 </li> 44 </li>
...@@ -39,7 +47,7 @@ ...@@ -39,7 +47,7 @@
39 <div v-if="n == -1"> 47 <div v-if="n == -1">
40 <div class="right-title">登记情形</div> 48 <div class="right-title">登记情形</div>
41 <ul class="registration"> 49 <ul class="registration">
42 <li v-for="(item, index) in busList" @click="handleSelect(item)" :class="item.cselect ? 'cactive' : ''" 50 <li v-for="(item, index) in djqxList" @click="handleSelect(item)" :class="item.cselect ? 'cactive' : ''"
43 :key="index"> 51 :key="index">
44 <p> 52 <p>
45 {{ item.name }} 53 {{ item.name }}
...@@ -52,109 +60,93 @@ ...@@ -52,109 +60,93 @@
52 </div> 60 </div>
53 </div> 61 </div>
54 <div class="submit-button"> 62 <div class="submit-button">
55 <el-button type="primary" @click="btnClick()">选择不动产信息</el-button> 63 <el-button type="primary" :disabled="btnDisabled" @click="btnClick()">选择不动产信息</el-button>
56 </div> 64 </div>
57 </div> 65 </div>
58 <choiceDialog v-model="isDialog" /> 66 <choiceDialog v-model="isDialog" />
59 </div> 67 </div>
60 </template> 68 </template>
61 <script> 69 <script>
70 import { getCollectBiz, getleftMenu, getNextNode } from "@/api/ywbl"
62 import choiceDialog from "./components/selectql.vue" 71 import choiceDialog from "./components/selectql.vue"
63 export default { 72 export default {
64 data () { 73 data () {
65 return { 74 return {
66 n: -1, 75 n: 0,
67 activeNames: ['1'], 76 activeNames: ['1'],
68 leftList: [ 77 leftList: [
69 '常办业务', '一并申请', '补申请', 78 '常办业务', '一并申请', '补申请',
70 ], 79 ],
71 list: [ 80 list: [],
72 { 81 djlxList: [
73 name: '国有建设用地使用权',
74 },
75 {
76 name: '国有建设用地使用权/房屋所有权',
77 },
78 {
79 name: '宅基地使用权',
80 },
81 {
82 name: '宅基地使用权/房屋所有权',
83 },
84 {
85 name: '集体建设用地使用权',
86 },
87 {
88 name: '集体建设用地使用权/房屋所有权',
89 }
90 ],
91 typeList: [
92 { 82 {
93 name: '首次登记', 83 name: '首次登记',
94 },
95 {
96 name: '转移登记',
97 },
98 {
99 name: '变更登记',
100 },
101 {
102 name: '注销登记'
103 }
104 ],
105 situationList: [
106 {
107 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
108 },
109 {
110 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
111 },
112 {
113 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
114 },
115 {
116 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
117 },
118 {
119 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
120 } 84 }
121 ], 85 ],
122 busList: [ 86 ywList: [
123 {
124 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
125 select: false,
126 cselect: false,
127 },
128 {
129 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
130 select: false,
131 cselect: false,
132 },
133 { 87 {
134 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得', 88 name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
135 select: false, 89 select: false,
136 cselect: false, 90 cselect: false,
137 } 91 }
138 ], 92 ],
93 djqxList: [],
139 isDialog: false, 94 isDialog: false,
95 btnDisabled: true
140 } 96 }
141 }, 97 },
142 components: { 98 components: {
143 choiceDialog 99 choiceDialog
144 }, 100 },
101 created () {
102 this.getDataList()
103 },
145 methods: { 104 methods: {
105 getDataList () {
106 getCollectBiz().then(res => {
107 let { result } = res
108 this.ywList = result
109 this.ywList.forEach(item => {
110 this.$set(item, 'cselect', false)
111 })
112 })
113 getleftMenu().then(res => {
114 let { result } = res
115 this.list = result
116 })
117 },
146 handleleftTitle (index) { 118 handleleftTitle (index) {
147 this.n = index 119 this.n = index
148 this.list.forEach(item => { 120 this.list.forEach(item => {
149 if (item.check) item.check = false 121 if (item.check) item.check = false
150 }) 122 })
151 }, 123 },
124 // 业务列表选择
125 handleYwSelect (item) {
126 this.ywList.forEach(item => {
127 item.cselect = false
128 })
129 item.cselect = !item.cselect
130 if (item.sffqlc == '1') {
131 this.btnDisabled = false
132 }
133 },
134
152 handleList (list, obj) { 135 handleList (list, obj) {
153 list.forEach(item => { 136 list.forEach(item => {
154 if (item.check) item.check = false 137 if (item.check) item.check = false
155 }) 138 })
156 this.n = -1 139 this.n = -1
157 this.$set(obj, 'check', true) 140 this.$set(obj, 'check', true)
141 this.getNextNode(obj.bsmSqyw)
142 },
143 // 获取下个节点类型
144 getNextNode (bsmSqyw) {
145 getNextNode(bsmSqyw).then(res => {
146 let { djqx, djlx } = res.result
147 this.djqxList = djqx
148 this.djlxList = djlx
149 })
158 }, 150 },
159 handleCollection (item) { 151 handleCollection (item) {
160 item.select = !item.select 152 item.select = !item.select
...@@ -165,8 +157,8 @@ export default { ...@@ -165,8 +157,8 @@ export default {
165 }) 157 })
166 item.cselect = !item.cselect 158 item.cselect = !item.cselect
167 }, 159 },
168 handleTypeSelect (item) { 160 handleDjlxSelect (item) {
169 this.typeList.forEach(item => { 161 this.djlxList.forEach(item => {
170 if (item.select) item.select = false 162 if (item.select) item.select = false
171 }) 163 })
172 this.$set(item, 'select', true) 164 this.$set(item, 'select', true)
......