style:业务申请

 import request from '@/utils/request'
 /* 
-    业务办理-业务申请规则API
+业务办理-获取收藏业务集合
 */
-// 选择单元-根据条件进行列表查询
+export function getCollectBiz () {
+    return request({
+        url: '/ywbl/BusinessApply/getCollectBiz',
+        method: 'post'
+    })
+}
+
+/* 
+业务办理-获取左侧菜单
+*/
+export function getleftMenu () {
+    return request({
+        url: '/ywbl/BusinessApply/getleftMenu',
+        method: 'post'
+    })
+}
+/* 
+业务办理-获取下个节点内容
+*/
+export function getNextNode (bsmSqyw) {
+    return request({
+        url: '/ywbl/BusinessApply/getNextNode?parentid=' + bsmSqyw,
+        method: 'post',
+    })
+}
+
+/* 
+业务办理-选择单元-根据条件进行列表查询
+*/
+// 
 export function getselectBdcdy (data) {
     return request({
         url: '/ywbl/ywsq/selectBdcdy',

@@ -25,7 +25,7 @@
     </div>
     <!-- 表格 -->
     <div class="from-clues-content">
-      <lb-table :page-size="pageData.size" :current-page.sync="pageData.current" :total="tableData.total"
+      <lb-table :page-size="pageData.pageSize" :current-page.sync="pageData.currentPage" :total="tableData.total"
         @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
         :data="tableData.data">
       </lb-table>

@@ -15,12 +15,24 @@
     color: $menuText !important;
   }
 
+  .cactive {
+    border: 1px solid $light-blue !important;
+    color: $light-blue !important;
+  }
+
   .ywsq-left {
-    width: 260px;
+    width: 270px;
     background-color: #fff;
     height: 100%;
     box-sizing: border-box;
     padding: 10px;
+    display: flex;
+    flex-direction: column;
+
+    .item-list {
+      max-height: calc(100vh - 380px);
+      overflow-y: auto;
+    }
 
     p {
       width: 100%;
@@ -81,7 +93,7 @@
   }
 
   .ywsq-right {
-    width: calc(100% - 265px);
+    width: calc(100% - 255px);
     margin-left: 5px;
     height: 100%;
     display: flex;
@@ -107,6 +119,7 @@
 
       li {
         width: 23.5%;
+        height: 50px;
         line-height: 50px;
         border: 1px solid $borderColor;
         border-radius: 5px;
@@ -114,11 +127,36 @@
         padding-left: 10px;
         transition: all 0.3s;
         cursor: pointer;
+        @include flex;
+        justify-content: space-between;
+        margin-left: 20px;
+        cursor: pointer;
+
+        p {
+          @include flex-center;
+        }
 
         &:hover {
           border: 1px solid $light-blue;
           color: $light-blue;
         }
+
+        p:nth-child(1) {
+          flex: 1;
+          width: 100%;
+          padding: 3px;
+        }
+
+        p:nth-child(2) {
+          width: 50px;
+          height: 50px;
+          border-left: 1px solid $borderColor;
+          cursor: pointer;
+        }
+
+        i {
+          font-size: 24px;
+        }
       }
     }
 
@@ -133,6 +171,13 @@
         margin-left: -20px;
         justify-content: space-between;
 
+        &:after {
+          content: "";
+          width: 31%; //与块级的宽度相同
+          display: block;
+          height: 0;
+        }
+
         li {
           width: 31%;
           height: 50px;
@@ -177,10 +222,7 @@
         color: $light-blue;
       }
 
-      .cactive {
-        border: 1px solid $light-blue;
-        color: $light-blue;
-      }
+
     }
 
     .submit-button {

@@ -7,7 +7,7 @@
         <el-collapse-item title="业务申请" name="1">
           <ul class="item-list">
             <li v-for="(obj, key) in list" :key="key" @click="handleList(list, obj)" :class="obj.check ? 'active' : ''">
-              {{ obj.name }}</li>
+              {{ obj.nodename }}</li>
           </ul>
         </el-collapse-item>
       </el-collapse>
@@ -18,19 +18,27 @@
       <div class="right-type el-card box-card is-always-shadow" v-if="n == -1">
         <div class="right-title">登记类型</div>
         <ul class="type-content">
-          <li :class="item.select ? 'active' : ''" @click="handleTypeSelect(item)" v-for="(item, index) in typeList"
-            :key="index">{{ item.name }}</li>
+          <li :class="item.select ? 'cactive' : ''" @click="handleDjlxSelect(item)" v-for="(item, index) in djlxList"
+            :key="index">
+            <p>
+              {{ item.nodename }}
+            </p>
+            <p v-if="item.sffqlc == 1" :class="item.select ? 'active' : ''">
+              <i class="el-icon-star-off" :class="item.select ? 'active' : ''"></i>
+            </p>
+          </li>
         </ul>
       </div>
       <div class="right-situation el-card box-card is-always-shadow">
         <div v-if="n >= 0">
           <div class="right-title">业务列表</div>
           <ul>
-            <li v-for="(item, index) in busList" :key="index">
+            <li v-for="(item, index) in ywList" :key="index" @click="handleYwSelect(item)"
+              :class="item.cselect ? 'cactive' : ''">
               <p>
-                {{ item.name }}
+                {{ item.nodename }}
               </p>
-              <p :class="item.select ? 'active' : ''" @click="handleCollection(item)">
+              <p v-if="item.sffqlc == 1" :class="item.select ? 'active' : ''" @click="handleCollection(item)">
                 <i class="el-icon-star-off" :class="item.select ? 'active' : ''"></i>
               </p>
             </li>
@@ -39,7 +47,7 @@
         <div v-if="n == -1">
           <div class="right-title">登记情形</div>
           <ul class="registration">
-            <li v-for="(item, index) in busList" @click="handleSelect(item)" :class="item.cselect ? 'cactive' : ''"
+            <li v-for="(item, index) in djqxList" @click="handleSelect(item)" :class="item.cselect ? 'cactive' : ''"
               :key="index">
               <p>
                 {{ item.name }}
@@ -52,109 +60,93 @@
         </div>
       </div>
       <div class="submit-button">
-        <el-button type="primary" @click="btnClick()">选择不动产信息</el-button>
+        <el-button type="primary" :disabled="btnDisabled" @click="btnClick()">选择不动产信息</el-button>
       </div>
     </div>
     <choiceDialog v-model="isDialog" />
   </div>
 </template>
 <script>
+import { getCollectBiz, getleftMenu, getNextNode } from "@/api/ywbl"
 import choiceDialog from "./components/selectql.vue"
 export default {
   data () {
     return {
-      n: -1,
+      n: 0,
       activeNames: ['1'],
       leftList: [
         '常办业务', '一并申请', '补申请',
       ],
-      list: [
-        {
-          name: '国有建设用地使用权',
-        },
-        {
-          name: '国有建设用地使用权/房屋所有权',
-        },
-        {
-          name: '宅基地使用权',
-        },
-        {
-          name: '宅基地使用权/房屋所有权',
-        },
-        {
-          name: '集体建设用地使用权',
-        },
-        {
-          name: '集体建设用地使用权/房屋所有权',
-        }
-      ],
-      typeList: [
+      list: [],
+      djlxList: [
         {
           name: '首次登记',
-        },
-        {
-          name: '转移登记',
-        },
-        {
-          name: '变更登记',
-        },
-        {
-          name: '注销登记'
         }
       ],
-      situationList: [
-        {
-          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
-        },
-        {
-          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
-        },
-        {
-          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
-        },
-        {
-          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
-        },
-        {
-          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得'
-        }
-      ],
-      busList: [
-        {
-          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
-          select: false,
-          cselect: false,
-        },
-        {
-          name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
-          select: false,
-          cselect: false,
-        },
+      ywList: [
         {
           name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
           select: false,
           cselect: false,
         }
       ],
+      djqxList: [],
       isDialog: false,
+      btnDisabled: true
     }
   },
   components: {
     choiceDialog
   },
+  created () {
+    this.getDataList()
+  },
   methods: {
+    getDataList () {
+      getCollectBiz().then(res => {
+        let { result } = res
+        this.ywList = result
+        this.ywList.forEach(item => {
+          this.$set(item, 'cselect', false)
+        })
+      })
+      getleftMenu().then(res => {
+        let { result } = res
+        this.list = result
+      })
+    },
     handleleftTitle (index) {
       this.n = index
       this.list.forEach(item => {
         if (item.check) item.check = false
       })
     },
+    // 业务列表选择
+    handleYwSelect (item) {
+      this.ywList.forEach(item => {
+        item.cselect = false
+      })
+      item.cselect = !item.cselect
+      if (item.sffqlc == '1') {
+        this.btnDisabled = false
+      }
+    },
+
     handleList (list, obj) {
       list.forEach(item => {
         if (item.check) item.check = false
       })
       this.n = -1
       this.$set(obj, 'check', true)
+      this.getNextNode(obj.bsmSqyw)
+    },
+    // 获取下个节点类型
+    getNextNode (bsmSqyw) {
+      getNextNode(bsmSqyw).then(res => {
+        let { djqx, djlx } = res.result
+        this.djqxList = djqx
+        this.djlxList = djlx
+      })
     },
     handleCollection (item) {
       item.select = !item.select
@@ -165,8 +157,8 @@ export default {
       })
       item.cselect = !item.cselect
     },
-    handleTypeSelect (item) {
-      this.typeList.forEach(item => {
+    handleDjlxSelect (item) {
+      this.djlxList.forEach(item => {
         if (item.select) item.select = false
       })
       this.$set(item, 'select', true)