style:国有房屋变更+抵押变更一并申请

+<!--
+ * @Description:
+ * @Autor: renchao
+ * @LastEditTime: 2023-09-07 09:51:38
+-->
+<template>
+  <div class="from-clues">
+    <!-- 表单部分 -->
+    <div class="from-clues-header">
+      <el-form :model="queryForm" ref="queryForm" label-width="100px">
+        <el-row>
+          <el-col :span="6">
+            <el-form-item label="不动产权证号">
+              <el-input placeholder="请输入不动产权证号" v-model="queryForm.bdcqzh" clearable class="width100">
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="不动产单元号">
+              <el-input placeholder="请输入不动产单元号" maxlength="28" v-model="queryForm.bdcdyh" clearable class="width100">
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="坐落" label-width="60px">
+              <el-input placeholder="请输入坐落" v-model.trim="queryForm.zl" clearable class="width100">
+              </el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4" class="btnColRight">
+            <el-form-item>
+              <el-button type="primary" @click="handleSearch">查询</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+    <!-- 表格 -->
+    <div class="from-clues-content loadingtext">
+      国有房屋变更信息
+      <el-table
+        :data="tableData.data"
+        height="210"
+        border
+        :cell-style="{ textAlign: 'center' }"
+        :header-cell-style="{textAlign: 'center'}"
+        @row-click="clickChange"
+        style="width: 100%">
+        <el-table-column
+          label="选择"
+          width="50">
+          <template slot-scope="scope">
+            <el-radio v-model="radioVal"
+              @click.native.stop.prevent="getCurrentRow(scope.row)"
+
+              :label="scope.row.bdcdyh">{{''}}</el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="序号"
+          type="index"
+          width="50"
+          align="center">
+          <template scope="scope">
+            {{ scope.$index + (pageData.currentPage - 1) * pageData.pageSize + 1 }}
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          label="状态"
+          width="100">
+          <template slot-scope="scope">
+            <a style='color:#3498db;' v-show="scope.row.djblzt==1">正在办理</a>
+            <span v-show="scope.row.zjgcdyzt==1">,在建工程抵押</span>
+            <span v-show="scope.row.ycfzt==1">,已预查封</span>
+            <span v-show="scope.row.ycfzt==1">,已预查封</span>
+            <span v-show="scope.row.cfzt==1">,已查封</span>
+            <span v-show="scope.row.diyizt==1">,已地役</span>
+            <span v-show="scope.row.yyzt==1">,异议中</span>
+            <span v-show="scope.row.xzzt==1">,已限制</span>
+            <span v-show="scope.row.ygmmzt==1">,已预告买卖</span>
+            <span v-show="scope.row.ygdyzt==1">,已预告抵押</span>
+            <span v-show="scope.row.dyzt==1">,已抵押</span>
+          </template>
+        </el-table-column>
+        <el-table-column
+          width="100"
+          label="权利类型">
+          <template slot-scope="scope">
+            <el-tooltip effect="dark" :content="scope.row.qllxmc" placement="top" popper-class="tooltip-width ">
+              <span class="ellipsis-table"> {{scope.row.qllxmc}}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column
+          property="bdcdyh"
+          label="不动产单元号"
+          width="150">
+        </el-table-column>
+        <el-table-column
+          width="150"
+          label="不动产权证号">
+          <template slot-scope="scope">
+            <el-tooltip effect="dark" :content="scope.row.bdcqzh" placement="top" popper-class="tooltip-width">
+              <span class="ellipsis-table"> {{scope.row.bdcqzh}}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column
+          property="gyqk"
+          label="共有情况">
+        </el-table-column>
+        <el-table-column
+          width="100"
+          label="权利人">
+          <template slot-scope="scope">
+            <el-tooltip effect="dark" :content="scope.row.qlrmc" placement="top" popper-class="tooltip-width">
+              <span class="ellipsis-table"> {{scope.row.qlrmc}}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column
+          width="100"
+          label="证件号">
+          <template slot-scope="scope">
+            <el-tooltip effect="dark" :content="scope.row.qlrzjhm" placement="top" popper-class="tooltip-width">
+              <span class="ellipsis-table"> {{scope.row.qlrzjhm}}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column
+          property="qlxzmc"
+          label="权利性质">
+        </el-table-column>
+        <el-table-column
+          property="qlytmc"
+          label="用途">
+        </el-table-column>
+        <el-table-column
+          property="qlmjmc"
+          label="面积">
+        </el-table-column>
+        <el-table-column
+          width="150"
+          label="坐落">
+          <template slot-scope="scope">
+            <el-tooltip effect="dark" :content="scope.row.zl" placement="top" popper-class="tooltip-width">
+              <span class="ellipsis-table"> {{scope.row.zl}}</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="操作"
+          width="80">
+          <template slot-scope="scope">
+            <el-button type="text" icon="el-icon-edit-outline" @click="openBook(scope.row)">登记薄</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination background layout="prev, pager, next,total" :total="tableData.total"
+        @current-change="handleCurrentChange"></el-pagination>
+    </div>
+    <div class="from-clues-content loadingtext">
+      抵押变更信息
+      <lb-table ref="table" :pagination="false" :calcHeight="500" :column="tableData.columns"
+        :data="tableData.dataList">
+      </lb-table>
+    </div>
+    <div class="submit_button">
+      <el-button @click="$popupCacel">取消</el-button>
+      <el-button type="primary" plain @click="submitForm" :loading="loading">发起申请</el-button>
+    </div>
+  </div>
+</template>
+<script>
+  //首次登记
+  import jump from "./mixin/jump";
+  import store from '@/store/index.js'
+  import table from "@/utils/mixin/table";
+  import { ywPopupDialog } from "@/utils/popup.js";
+  import { datas, sendThis } from "../javascript/selectFwbjDybgSplitMerge.js";
+  import { defaultParameters } from "../javascript/publicDefaultPar.js";
+  import { selectFwsyq } from "@/api/ywsq.js";
+  import { startBusinessFlow } from "@/api/workFlow.js";
+  export default {
+    mixins: [table, jump],
+    props: {
+      isJump: { type: Boolean, default: false },
+      sqywInfo: { type: Object, default: () => { } },
+    },
+    data () {
+      return {
+        loading: false,
+        queryForm: defaultParameters.defaultParameters(),
+        // 表格数据
+        tableData: {
+          columns: datas.columns(),
+          data: [],
+          total: 0,
+          dataList: []
+        },
+        bdcdysz: [],
+        radioVal: ""
+      }
+    },
+    mounted () {
+      sendThis(this)
+    },
+    methods: {
+      clickChange (row) {
+        this.getCurrentRow(row)
+      },
+      /**
+       * @description: 单选事件
+       * @author: renchao
+       */
+      getCurrentRow (row) {
+        this.radioVal = row.bdcdyh;
+        this.bdcdysz = [row]
+        selectFwsyq({ bdcdyh: this.radioVal, currentPage: 1, pageSize: 10, sqywbm: this.sqywInfo.djywbm }).then((res) => {
+          if (res.code === 200) {
+            this.tableData.dataList = res.result.records
+            this.bdcdysz = [this.bdcdysz[0], ...this.tableData.dataList]
+          }
+          console.log(this.bdcdysz, 'this.bdcdysz');
+        })
+      },
+      /**
+       * @description: queryClick
+       * @author: renchao
+       */
+      queryClick () {
+        this.$startLoading();
+        this.queryForm.sqywbm = this.sqywInfo.djywbm;
+        selectFwsyq({ ...this.queryForm, ...this.pageData }).then((res) => {
+          this.$endLoading();
+          if (res.code === 200) {
+            let { total, records } = res.result;
+            this.tableData.total = total;
+            this.tableData.data = records;
+          }
+        })
+      },
+      handleCurrentChange (val) {
+        this.pageData.currentPage = val
+        this.queryClick()
+      },
+      /**
+       * @description: submitForm
+       * @author: renchao
+       */
+      submitForm () {
+        this.loading = true
+        startBusinessFlow({
+          bsmSqyw: this.sqywInfo.bsmSqyw,
+          bdcdysz: this.bdcdysz,
+        }).then((res) => {
+          this.loading = false
+          if (res.code == 200) {
+            this.$message({
+              showClose: true,
+              message: "发起申请成功",
+              type: "success",
+            });
+            if (!this.isJump) {
+              this.jump(res.result, this.sqywInfo.djywbm);
+            } else {
+              store.dispatch('user/refreshPage', true);
+            }
+            this.$popupCacel()
+          } else {
+            if (res.result && res.result.length > 0) {
+              ywPopupDialog("申请错误明细", "components/ywdialog", { result: res.result }, '36%', true)
+            } else {
+              ywPopupDialog("申请错误明细", "components/ywdialog", { message: res.message }, '36%', true)
+            }
+          }
+        }).catch(() => {
+          this.loading = false
+        })
+      },
+      /**
+       * @description: openBook
+       * @param {*} row
+       * @author: renchao
+       */
+      openBook (row) {
+        var param = {
+          bdcdyid: row.bdcdyid,
+          qllx: row.qllx,
+          bdcdyh: row.bdcdyh,
+          bsmQlxx: row.bsmQlxx,
+        };
+        this.$popup("登记簿详情", "registerBook/djbFrame", {
+          formData: param
+        })
+      }
+    }
+  }
+</script>
+<style scoped lang="scss">
+  @import "~@/styles/mixin.scss";
+  @import "~@/styles/public.scss";
+  /deep/.el-radio__label {
+    display: none;
+  }
+  /deep/.el-table .cell {
+    line-height: 20px;
+  }
+</style>

@@ -68,6 +68,7 @@
     },
     data () {
       return {
+        loading: false,
         queryForm: defaultParameters.defaultParameters(),
         tableData: {
           total: 0,
@@ -106,10 +107,12 @@
           this.$message.error("请至少选择一条数据");
           return;
         }
+        this.loading = true
         startTogetherFlow({
           bsmSqyw: this.sqywInfo.bsmSqyw,
           bdcdysz: this.bdcdysz,
         }).then((res) => {
+          this.loading = false
           if (res.code == 200) {
             this.$message({
               showClose: true,

@@ -32,7 +32,7 @@
       <div v-if="selectType == 'together'" class="right-situation el-card">
         <div class="right-title">一并申请</div>
         <ul>
-          <li :class="item.selected ? 'cactive' : ''" v-for="(item, index) in djqxList" :key="index"
+          <li :class="item.selected ? 'cactive' : ''" v-for="(item, index) in djqxList" :tag="item.selected" :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)">
@@ -189,7 +189,7 @@
        */
       selectSqywClick (data, index) {
         data.forEach(item => {
-          item.selected = false;
+          this.$set(item, "selected", false)
         });
         data[index].selected = true;
         if (data[index].sffqlc == "1") {

+/*
+ * @Description:
+ * @Autor: renchao
+ * @LastEditTime: 2023-09-07 09:50:26
+ */
+import filter from '@/utils/filter.js'
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+class data extends filter {
+  constructor() {
+    super()
+  }
+  columns () {
+    return [
+      {
+        label: '序号',
+        type: 'index',
+        width: '50',
+        render: (h, scope) => {
+          return (
+            <div>
+              {(vm.pageData.currentPage - 1) * vm.pageData.pageSize + scope.$index + 1}
+            </div>
+          )
+        }
+      },
+      {
+        prop: "status",
+        label: "状态",
+        minWidth: '120',
+        render: (h, scope) => {
+          return (
+            <div>
+              <a style='color:#3498db;' v-show={scope.row.djblzt == 1}>{this.yWstatus(scope.row)}</a>
+              <span v-show={scope.row.djblzt != 1}>{this.yWstatus(scope.row)}</span>
+            </div>
+          )
+        }
+      },
+      {
+        label: "不动产证明号",
+        width: '150',
+        render: (h, scope) => {
+          return (
+            <el-tooltip effect="dark" content={scope.row.bdcqzh} placement="top" popper-class="tooltip-width">
+              <span class="ellipsis-table"> {scope.row.bdcqzh}</span>
+            </el-tooltip>
+          )
+        }
+      },
+      {
+        prop: "bdcdyh",
+        label: "不动产单元号",
+        minWidth: '150'
+      },
+      {
+        prop: "dyfs",
+        label: "抵押方式",
+        render: (h, scope) => {
+          switch (scope.row.dyfs) {
+            case '1':
+              return <span>一般抵押</span>
+            case '2':
+              return <span>最高额抵押</span>
+          }
+        }
+      },
+      {
+        label: "抵押权人",
+        minWidth: '130',
+        render: (h, scope) => {
+          return (
+            <el-tooltip effect="dark" content={scope.row.qlrmc} placement="top" popper-class="tooltip-width ">
+              <span class="ellipsis-table"> {scope.row.qlrmc}</span>
+            </el-tooltip>
+          )
+        }
+      },
+      {
+        label: "抵押权人证件号",
+        minWidth: '130',
+        render: (h, scope) => {
+          return (
+            <el-tooltip effect="dark" content={scope.row.qlrzjhm} placement="top" popper-class="tooltip-width ">
+              <span class="ellipsis-table"> {scope.row.qlrzjhm}</span>
+            </el-tooltip>
+          )
+        }
+      },
+      {
+        prop: "ywrmc",
+        label: "抵押人",
+      },
+      {
+        label: "抵押人证件号",
+        minWidth: '130',
+        render: (h, scope) => {
+          return (
+            <el-tooltip effect="dark" content={scope.row.ywrzjhm} placement="top" popper-class="tooltip-width ">
+              <span class="ellipsis-table"> {scope.row.ywrzjhm}</span>
+            </el-tooltip>
+          )
+        }
+      },
+      {
+        prop: "dyje",
+        label: "抵押金额(万元)",
+      },
+      {
+        prop: "dymj",
+        label: "抵押面积",
+      },
+      {
+        prop: "dyqx",
+        label: "债务履行期限",
+      },
+      {
+        label: "坐落",
+        minWidth: '130',
+        render: (h, scope) => {
+          return (
+            <el-tooltip effect="dark" content={scope.row.zl} placement="top" popper-class="tooltip-width ">
+              <span class="ellipsis-table"> {scope.row.zl}</span>
+            </el-tooltip>
+          )
+        }
+      },
+      {
+        label: '操作',
+        width: '100',
+        render: (h, scope) => {
+          return (
+            <div>
+              <el-button type="text" icon="el-icon-edit-outline" onClick={() => { vm.openDialog(scope.row) }}>登记薄</el-button>
+            </div>
+          )
+        }
+      }
+    ]
+  }
+}
+let datas = new data()
+export {
+  datas,
+  sendThis
+}

 /*
  * @Description:
  * @Autor: renchao
- * @LastEditTime: 2023-08-29 13:09:45
+ * @LastEditTime: 2023-09-06 17:03:59
  */
 import filter from '@/utils/filter.js'
 let vm = null
@@ -130,21 +130,12 @@ class datatwo extends filter {
       },
       {
         label: "状态",
+        width: '130',
         render: (h, scope) => {
           return (
             <div>
-              {/* <a v-on:click="doSomething"></a> */}
-              <a style='color:#3498db;' v-show={scope.row.djblzt == 1} >正在办理</a>
-              <span v-show={scope.row.zjgcdyzt == 1}>,在建工程抵押</span>
-              <span v-show={scope.row.ycfzt == 1}>,已预查封</span>
-              <span v-show={scope.row.ycfzt == 1}>,已预查封</span>
-              <span v-show={scope.row.cfzt == 1}>,已查封</span>
-              <span v-show={scope.row.diyizt == 1}>,已地役</span>
-              <span v-show={scope.row.yyzt == 1}>,异议中</span>
-              <span v-show={scope.row.xzzt == 1}>,已限制</span>
-              <span v-show={scope.row.ygmmzt == 1}>,已预告买卖</span>
-              <span v-show={scope.row.ygdyzt == 1}>,已预告抵押</span>
-              <span v-show={scope.row.dyzt == 1}>,已抵押</span>
+              <a style='color:#3498db;' v-show={scope.row.djblzt == 1}>{this.yWstatus(scope.row)}</a>
+              <span v-show={scope.row.djblzt != 1}>{this.yWstatus(scope.row)}</span>
             </div>
           )
         }

-export function queueDjywmc(djywbm, djqxbm) {
+export function queueDjywmc (djywbm, djqxbm) {
     console.log(djywbm, 'djywbm');
     if (djqxbm == "A0320099" || djqxbm == "A0330099") {
         return "selectJsydsyqSplitMerge";
@@ -99,8 +99,9 @@ export function queueDjywmc(djywbm, djqxbm) {
         case "C04371": //一并国有房屋转移
             vm = "selectFwsyq";
             break;
-        case "C04372": //一并国有房屋变更        
-            vm = "selectYbgybg";
+        case "C04372": //一并国有房屋变更
+            // vm = "selectYbgybg";
+            vm = "selectFwbjDybgSplitMerge"
             break;
         case "A11100"://林地使用权首次
             vm = "selectLqsc";