style:业务申请模块重构

任超
Showing 2 changed files with 63 additions and 49 deletions
src/views/ywbl/ywsq/ywsq.scss
src/views/ywbl/ywsq/ywsq.vue
--- a/src/views/ywbl/ywsq/ywsq.scss
View file @088ec5e
+++ b/src/views/ywbl/ywsq/ywsq.scss
View file @088ec5e
@@ -30,7 +30,7 @@
    flex-direction: column;
    .item-list {
-      max-height: calc(100vh - 380px);
+      max-height: calc(100vh - 360px);
      overflow-y: auto;
    }
@@ -146,6 +146,7 @@
          flex: 1;
          width: 100%;
          padding: 3px;
        }
        p:nth-child(2) {
@@ -189,7 +190,7 @@
          cursor: pointer;
          margin-bottom: 15px;
-          p {
+          p:nth-child(2) {
            @include flex-center;
          }
@@ -202,6 +203,9 @@
            flex: 1;
            width: 100%;
            padding: 3px;
+            padding-left: 30px;
+            display: flex;
+            align-items: center;
          }
          p:nth-child(2) {
--- a/src/views/ywbl/ywsq/ywsq.vue
View file @088ec5e
+++ b/src/views/ywbl/ywsq/ywsq.vue
View file @088ec5e
@@ -31,36 +31,20 @@
        </ul>
      </div>
      <div class="right-situation el-card box-card is-always-shadow">
-        <div v-if="n >= 0">
+        <div class="right-title">{{ obj[n] }}</div>
-          <div class="right-title">常办业务列表</div>
+        <ul>
-          <ul>
+          <li v-for="(item, index) in itemList" :key="index" @click="handleSelectYw(item, ywList)"
-            <li v-for="(item, index) in ywList" :key="index" @click="handleSelectYw(item, ywList)"
+            :class="item.cselect ? 'cactive' : ''">
-              :class="item.cselect ? 'cactive' : ''">
+            <p>
-              <p>
+              {{ item.djywmc }}<br>
-                {{ item.djywmc }}<br>
+              {{ item.nodename }}
-                {{ item.nodename }}
+            </p>
-              </p>
-              <p v-if="item.sffqlc == 1" class="active" @click.stop="handleCollection(item)">
+            <p :class="item.userCollect == 1 ? 'active' : ''" @click.stop="handleCollection(item)">
-                <i class="el-icon-star-off active"></i>
+              <i class="el-icon-star-off" :class="item.userCollect == 1 ? 'active' : ''"></i>
-              </p>
+            </p>
-            </li>
+          </li>
-          </ul>
+        </ul>
-        </div>
-        <div v-if="n == -1">
-          <div class="right-title">登记情形</div>
-          <ul class="registration">
-            <li v-for="(item, index) in djqxList" @click="handleSelectYw(item, djqxList)"
-              :class="item.cselect ? 'cactive' : ''" :key="index">
-              <p>
-                {{ item.nodename }}
-              </p>
-              <p :class="item.userCollect == 1 ? 'active' : ''" @click.stop="handleCollection(item)">
-                <i class="el-icon-star-off" :class="item.userCollect == 1 ? 'active' : ''"></i>
-              </p>
-            </li>
-          </ul>
-        </div>
      </div>
      <div class="submit-button">
        <el-button type="primary" :disabled="btnDisabled" @click="bthSelectClick">选择不动产</el-button>
@@ -70,7 +54,6 @@
  </div>
 </template>
 <script>
-import Cookies from 'js-cookie'
 import fqsqDialog from "./slectBdc.vue"
 import { getCollectBiz, getleftMenu, getNextNode, addCollectBiz, deleteCollectBiz } from "@/api/ywbl"
 export default {
@@ -81,10 +64,17 @@ export default {
      leftList: [
        '常办业务', '一并申请', '登记簿补录',
      ],
+      // 左侧列表
      list: [],
      djlxList: [],
+      itemList: [],
      ywList: [],
      djqxList: [],
+      obj: {
+        '0': '常办业务列表',
+        '-1': '登记情形'
+      },
      isDialog: false,
      btnDisabled: true,
      djywbm: '',
@@ -104,12 +94,16 @@ export default {
  },
  methods: {
    getDataList () {
-      getCollectBiz({ 'target': '#ywsq' }).then(res => {
+      getCollectBiz().then(res => {
        let { result } = res
        this.ywList = result
        this.ywList.forEach(item => {
          this.$set(item, 'cselect', false)
+          item.userCollect = 1
        })
+        if (this.n == 0) {
+          this.itemList = this.ywList
+        }
      })
      getleftMenu().then(res => {
        let { result } = res
@@ -118,9 +112,14 @@ export default {
    },
    handleleftTitle (index) {
      this.n = index
+      let obj = {
+        '0': this.ywList
+      }
+      this.itemList = obj[this.n]
      this.list.forEach(item => {
        if (item.check) item.check = false
      })
    },
    // 业务-登记情形选择
    handleSelectYw (item, list) {
@@ -135,7 +134,6 @@ export default {
        this.btnDisabled = false
        this.bsmSqyw = item.bsmSqyw
        this.djywbm = item.djywbm
-        console.log(this.djywbm, 'this.djywbm');
      }
    },
    handleList (list, obj) {
@@ -147,11 +145,11 @@ export default {
      this.$set(obj, 'check', true)
      this.getNextNode(obj.bsmSqyw)
      this.djqxList = []
-      this.djlxList = []
+      this.itemList = []
    },
    // 获取下个节点类型
-    getNextNode (bsmSqyw, type) {
+    getNextNode (bsmSqyw, type = true) {
-      getNextNode(bsmSqyw, { 'target': '#ywsq' }).then(res => {
+      getNextNode(bsmSqyw).then(res => {
        if (res.result.djqx) this.djqxList = res.result.djqx
        if (res.result.djlx) this.djlxList = res.result.djlx
        if (type) {
@@ -162,6 +160,7 @@ export default {
            this.$set(item, 'cselect', false)
          })
        }
+        this.itemList = this.djqxList
      })
    },
    handleCollection (item) {
@@ -178,15 +177,26 @@ export default {
          }
        })
      } else {
-        deleteCollectBiz(item.bsmSqyw).then(res => {
+        this.$confirm('此操作将取消收藏, 是否继续?', '提示', {
-          if (res.code == 200) {
+          confirmButtonText: '确定',
-            item.userCollect = '2'
+          cancelButtonText: '取消',
-            that.$message({
+          type: 'warning'
-              message: '取消收藏成功！',
+        }).then(() => {
-              type: 'success'
+          deleteCollectBiz(item.bsmSqyw).then(res => {
-            })
+            if (res.code == 200) {
-            that.getDataList()
+              item.userCollect = '2'
-          }
+              that.$message({
+                message: '取消收藏成功！',
+                type: 'success'
+              })
+              that.getDataList()
+            }
+          })
+        }).catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消收藏'
+          })
        })
      }
    },
@@ -198,11 +208,11 @@ export default {
    },
    // 登记类型
    handleDjlxSelect (item) {
-      this.btnDisabled = true
      this.djlxList.forEach(item => {
-        if (item.cselect) item.cselect = false
+        item.cselect = false
      })
-      this.$set(item, 'cselect', true)
+      this.btnDisabled = true
+      item.cselect = true
      if (item.sffqlc == '1') {
        this.btnDisabled = false
        this.bsmSqyw = item.bsmSqyw