style:业务申请

-<!--
- * @Description: 
- * @Autor: renchao
- * @LastEditTime: 2023-05-31 17:35:03
--->
 <template>
-  <canvas id="mxcad">
-  </canvas>
+  <div class="ywsq" id="ywsq">
+    <div class="ywsq-left">
+      <p v-for="(item, index) in sqywlxList" @click="sqywlxClick(item)" :key="index"
+        :class="{ 'active': selectType == item.type }">{{ item.name }}</p>
+      <el-collapse disabled v-model="activeNames">
+        <el-collapse-item title="业务申请" name="1">
+          <ul class="item-list">
+            <li v-for="(item, index) in sqywQllxList" :key="index" @click="qllxClick(index)"
+              :class="item.check ? 'active' : ''">
+              {{ item.nodename }}</li>
+          </ul>
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+    <div class="ywsq-right">
+      <!-- 常办业务 -->
+      <div v-show="selectType == 'collect'" class="right-situation el-card">
+        <div class="right-title">常办业务列表</div>
+        <ul>
+          <li :class="item.selected ? 'cactive' : ''" v-for="(item, index) in collectList" :key="index"
+            @dblclick="dblclick(collectList, index, item)" @click="selectSqywClick(collectList, index)">
+            <p v-if="item.nodetype == 'djqx'">{{ item.djywmc }}<br>{{ item.nodename }}</p>
+            <dt v-else>{{ item.djywmc }}</dt>
+            <p class="active" @click.stop="handleCollection(item)">
+              <i class="el-icon-star-off"></i>
+            </p>
+          </li>
+        </ul>
+      </div>
+      <!-- 一并申请 -->
+      <div v-if="selectType == 'together'" class="right-title">一并申请</div>
+      <!-- 登记簿补录 -->
+      <div v-if="selectType == 'amend'" class="right-title">登记簿补录</div>
+      <!-- 业务申请 -->
+      <template v-if="selectType == 'apply'">
+        <div class="right-type el-card box-card is-always-shadow">
+          <div class="right-title">登记类型</div>
+          <ul class="type-content">
+            <li :class="item.selected ? 'cactive' : ''" @dblclick="item.sffqlc == 1 && dblclick(djlxList, index, item)"
+              @click="selectSqywClick(djlxList, index)" v-for="(item, index) in djlxList" :key="index">
+              <p>
+                {{ item.nodename }}
+              </p>
+              <p v-if="item.sffqlc == 1" :class="item.userCollect == 1 ? 'active' : ''"
+                @click.stop="handleCollection(item)">
+                <i class="el-icon-star-off"></i>
+              </p>
+            </li>
+          </ul>
+        </div>
+        <div class="right-situation el-card box-card is-always-shadow">
+          <div class="right-title">登记情形</div>
+          <ul>
+            <li :class="item.selected ? 'cactive' : ''" v-for="(item, index) in djqxList" :key="index"
+              @dblclick="dblclick(djqxList, index, item)" @click="selectSqywClick(djqxList, index)">
+              <dt>{{ item.nodename }}</dt>
+              <p :class="item.userCollect == 1 ? 'active' : ''" @click.stop="handleCollection(item)">
+                <i class="el-icon-star-off"></i>
+              </p>
+            </li>
+          </ul>
+        </div>
+      </template>
+      <div class="submit-button">
+        <el-button type="primary" :disabled="btnDisabled" @click="dialogClick">选择不动产</el-button>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-  import Mx from "mxdraw"
+  import { getCollectBiz, getleftMenu, getNextNode, addCollectBiz, deleteCollectBiz } from "@/api/ywbl"
   export default {
-    mounted () {
-      Mx.loadCoreCode().then(() => {
-        // Mx.MxFun.setMxServer("ws://localhost:5090") // 开启socket通信 可编辑图纸
-        // 创建控件对象
-        Mx.MxFun.createMxObject({
-          canvasId: "mxcad", // canvas元素的id
-          cadFile: "./buf/$hhhh#Layout1#.dwg.mxb1.wgh", // http方式(预览): 加载public/demo文件夹下转换后的图纸
-          // cadFile: "test2.dwg", //  socket通信方式请直接提供图纸名称 如：text.dwg
-          callback: (mxDraw, {
-            canvas,
-            canvasParent
-          }) => {
-            // 可以拿到canvas元素和它的父级元素
-            console.log(canvas, canvasParent)
-            console.log(mxDraw)
-            // 拿到图层数据
-            mxDraw.addEvent('uiSetLayerData', (listLayer) => {
-              console.log(listLayer)
+    data () {
+      return {
+        //申请业务类型集合
+        sqywlxList: [
+          { name: "常办业务", type: "collect" },
+          { name: "一并申请", type: "together" },
+          { name: "登记簿补录", type: "amend" }
+        ],
+        //类型默认选择常办业务
+        selectType: "collect",
+        //堆叠框选中第一个
+        activeNames: ['1'],
+        //收藏业务集合
+        collectList: [],
+        //申请权利类型集合  
+        sqywQllxList: [],
+        //登记类型集合  
+        djlxList: [],
+        //申请权利类型集合  
+        djqxList: [],
+        //选中业务的参数  
+        selectParam: {},
+        //选择按钮显示或隐藏
+        btnDisabled: true,
+      }
+    },
+    created () {
+      this.getDataList();
+    },
+    methods: {
+      getDataList () {
+        //获取收藏信息集合
+        getCollectBiz().then(res => {
+          this.collectList = res.result;
+          this.collectList.forEach(item => {
+            this.$set(item, 'selected', false);
+          });
+        });
+        //获取申请权利信息集合
+        getleftMenu().then(res => {
+          this.sqywQllxList = res.result;
+        })
+      },
+      //申请业务类型菜单事件
+      sqywlxClick (item) {
+        this.btnDisabled = true;
+        this.selectType = item.type;
+        this.sqywQllxList.forEach(item => {
+          if (item.check) item.check = false;
+        })
+      },
+      //权利类型菜单事件
+      qllxClick (index) {
+        this.btnDisabled = true;
+        this.sqywQllxList.forEach(item => {
+          if (item.check) item.check = false;
+        })
+        this.sqywQllxList[index].check = true;
+        this.selectType = "apply";
+        this.djlxList = [];
+        this.djqxList = [];
+        this.getNextNode(this.sqywQllxList[index].bsmSqyw);
+      },
+      //选择申请业务事件
+      selectSqywClick (data, index) {
+        data.forEach(item => {
+          item.selected = false;
+        });
+        data[index].selected = true;
+        if (data[index].sffqlc == "1") {
+          this.selectParam = data[index];
+          this.btnDisabled = false;
+        } else {
+          this.btnDisabled = true;
+          this.getNextNode(data[index].bsmSqyw);
+        }
+      },
+      //获取下个节点类型数据
+      getNextNode (bsmSqyw) {
+        getNextNode(bsmSqyw).then(res => {
+          if (res.result.djqx) {
+            this.djqxList = res.result.djqx;
+            this.djqxList.forEach(item => {
+              this.$set(item, 'selected', false);
+            });
+          }
+          if (res.result.djlx) {
+            this.djlxList = res.result.djlx;
+            this.djlxList.forEach(item => {
+              this.$set(item, 'selected', false);
+            });
+          }
+        })
+      },
+      //双击事件
+      dblclick (data, index, item) {
+        localStorage.setItem('ywbl', JSON.stringify(item));
+        this.selectSqywClick(data, index);
+        this.dialogClick();
+      },
+      //打开弹框内容
+      dialogClick () {
+        this.openDialog();
+      },
+      //收藏操作
+      handleCollection (item) {
+        let that = this
+        if (item.userCollect == '2') {
+          addCollectBiz(item.bsmSqyw).then(res => {
+            if (res.code == 200) {
+              item.userCollect = '1'
+              that.$message({
+                message: '收藏成功！',
+                type: 'success'
+              })
+              that.getDataList()
+            }
+          })
+        } else {
+          this.$confirm('此操作将取消收藏, 是否继续?', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            deleteCollectBiz(item.bsmSqyw).then(res => {
+              if (res.code == 200) {
+                item.userCollect = '2'
+                that.$message({
+                  message: '取消收藏成功！',
+                  type: 'success'
+                })
+                that.getDataList()
+              }
             })
-          },
-          isNewFile: true // 是否新建文件
+          })
+        }
+      },
+      handleSelect (item) {
+        this.busList.forEach(item => {
+          item.cselect = false
         })
-      })
+        item.cselect = !item.cselect
+      },
+      // 登记类型
+      handleDjlxSelect (item) {
+        this.djlxList.forEach(item => {
+          item.cselect = false
+        })
+        this.btnDisabled = true
+        item.cselect = true;
+        this.djqxObj = item;
+        if (item.sffqlc == '1') {
+          this.btnDisabled = false
+          this.bsmSqyw = item.bsmSqyw
+          this.djywbm = item.djywbm;
+        } else {
+          this.getNextNode(item.bsmSqyw, false)
+        }
+        this.djqxList = []
+      },
+      handleDjqxItem (item) {
+        this.djlxList.forEach(item => {
+          item.cselect = false
+        })
+        if (item.sffqlc == 1) {
+          this.djywbm = item.djywbm
+          this.bsmSqyw = item.bsmSqyw
+          item.cselect = true
+          this.openDialog()
+          this.btnDisabled = true
+        }
+      },
+      handleSelectItem (item, list) {
+        this.handleSelectYw(item, list)
+        this.openDialog()
+      },
+      // 选择不动产信息
+      bthSelectClick () {
+        this.openDialog()
+      },
+      openDialog () {
+        let title = "申请业务：" + this.selectParam?.djywmc ? this.selectParam?.djywmc : '';
+        this.$popupDialog(title, "ywbl/ywsq/selectBdc", { 'sqywInfo': this.selectParam }, "80%")
+      },
+      loadView (view) {
+        return r => require.ensure([], () => r(require(`./components/${view}/${view}.vue`)))
+      }
     }
   }
 </script>
 <style scoped lang='scss'>
-  #cad-container {
-    width: 100%;
-    height: 100%;
+  @import "~@/styles/mixin.scss";
+  @import "./ywsq.scss";
+
+  /deep/.el-collapse-item__content {
+    padding-bottom: 0;
+  }
+
+  /deep/.el-collapse-item__wrap {
+    border-bottom: none;
   }
 </style>
\ No newline at end of file