选择不动产信息

+<template>
+  <dialogBox title="查询权利信息" @submitForm="submitForm"  @closeDialog="closeDialog" v-model="value">
+    <div class="from-clues">
+      <!-- 表单部分 -->
+      <div class="from-clues-header">
+        <el-form :model="queryForm" ref="queryForm" label-width="100px">
+          <el-row>
+            <el-col :span="5">
+              <el-form-item label="权利类型">
+                <el-select
+                  v-model="queryForm.qllx"
+                  filterable
+                  clearable
+                  placeholder="请选择权利类型"
+                >
+                  <el-option
+                    v-for="item in qllxs"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="不动产单元号">
+                <el-input
+                  placeholder="请输入不动产单元号"
+                  v-model="queryForm.dyh"
+                  clearable
+                  class="width200px"
+                >
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="业务号">
+                <el-input
+                  placeholder="请输入业务号"
+                  v-model="queryForm.ywh"
+                  clearable
+                  class="width200px"
+                >
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="不动产权证号">
+                <el-input
+                  placeholder="请输入不动产权证号"
+                  v-model="queryForm.cqzh"
+                  clearable
+                  class="width200px"
+                >
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4" class="btnCol">
+              <el-form-item>
+                <el-button type="primary" @click="queryClick()">查询</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <!-- 表格 -->
+      <div class="from-clues-content">
+        <lb-table
+          :page-size="pageData.size"
+          :current-page.sync="pageData.current"
+          :total="pageData.total"
+          @selection-change="handleSelectionChange"
+          @size-change="handleSizeChange"
+          @p-current-change="handleCurrentChange"
+          :column="tableData.columns"
+          :data="tableData.data"
+        >
+        </lb-table>
+      </div>
+    </div>
+  </dialogBox>
+</template>
+
+<script>
+import { datas } from "../ywsqdata.js";
+export default {
+  components: {
+  },
+  props: {
+    value: { type: Boolean, default: false },
+  },
+  data () {
+    return {
+      queryForm: {
+        qllx:"",
+        dyh:"",
+        ywh:"",
+        cqzh:"",
+      },
+      qllxs:[],
+      pageData: {
+        current: 1,
+        size: 10,
+        total: 2,
+      },
+      tableData: {
+        columns: datas.columns(),
+        data: [
+          {
+            status:'已查封',
+            qllx:"国有建设用地使用权",
+            zddm:"610100008004GB00001",
+            bdcdyh:"610100008004GB00001W00000000",
+            qlxz:"出让",
+            zdmj:'22384.1700',
+            qlsdfs:'地表',
+            tdyt:"商业、住宅用地",
+            zl:"汉台区汉中路街道办事处汉中路居委会太白路北侧",
+          },
+          {
+            status:'已查封',
+            qllx:"国有建设用地使用权",
+            zddm:"610100008004GB00001",
+            bdcdyh:"610100008004GB00001W00000000",
+            qlxz:"出让",
+            zdmj:'22384.1700',
+            qlsdfs:'地表',
+            tdyt:"商业、住宅用地",
+            zl:"汉台区汉中路街道办事处汉中路居委会太白路北侧",
+          },
+          {
+            status:'已查封',
+            qllx:"国有建设用地使用权",
+            zddm:"610100008004GB00001",
+            bdcdyh:"610100008004GB00001W00000000",
+            qlxz:"出让",
+            zdmj:'22384.1700',
+            qlsdfs:'地表',
+            tdyt:"商业、住宅用地",
+            zl:"汉台区汉中路街道办事处汉中路居委会太白路北侧",
+          },
+        ],
+      },
+    }
+  },
+  methods: {
+  
+    submitForm () {
+      this.$emit('input', false)
+    },
+    closeDialog () {
+      this.$emit('input', false)
+    },
+    handleSelectionChange(){},
+    handleSizeChange(){},
+    handleCurrentChange(){},
+  }
+}
+</script>
+<style scoped lang="scss">
+@import "~@/styles/mixin.scss";
+
+.qtjfjmb-edit-title {
+  padding-bottom: 10px;
+  border-bottom: 1px solid $borderColor;
+  margin-bottom: 10px;
+}
+
+ul {
+  @include flex;
+  border-radius: 5px;
+  overflow: hidden;
+  margin-bottom: 20px;
+
+  .active {
+    background: $light-blue;
+    color: #fff;
+  }
+
+  li {
+    flex: 1;
+    line-height: 36px;
+    @include flex-center;
+    border: 1px solid $borderColor;
+    margin-left: -1px;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    &:hover {
+      @extend .active;
+    }
+  }
+}
+</style>

@@ -32,11 +32,16 @@
             </p>
             </p>
           </li>
           </li>
         </ul>
         </ul>
+        <div class="right-btn">
+          <el-button type="primary" @click="btnClick()">选择不动产信息</el-button>
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
+    <choiceDialog v-model="isDialog" />
+  </div>
 </template>
 </template>
 <script>
 <script>
+  import choiceDialog from "./components/choiceDialog.vue"
 export default {
 export default {
   data () {
   data () {
     return {
     return {
@@ -126,9 +131,13 @@ export default {
           name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
           name: '国有建设用地使用权 || 首次登记+ 以出让方式取得',
           select: false
           select: false
         }
         }
-      ]
+      ],
+      isDialog: false,
     }
     }
   },
   },
+  components: {
+    choiceDialog
+  },
   methods: {
   methods: {
     handleList (list, obj) {
     handleList (list, obj) {
       list.forEach(item => {
       list.forEach(item => {
@@ -144,7 +153,11 @@ export default {
         if (item.select) item.select = false
         if (item.select) item.select = false
       })
       })
       this.$set(item, 'select', true)
       this.$set(item, 'select', true)
-    }
+    },
+    // 选择不动产信息
+    btnClick(){
+      this.isDialog = true
+    },
   }
   }
 }
 }
 </script>
 </script>

+import filter from '@/utils/filter.js'
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+class data extends filter {
+  constructor() {
+    super()
+  }
+  columns () {
+    return [
+      {
+        type: 'selection',
+        label: '全选'
+      },
+      {
+        label: '序号',
+        type: 'index',
+        width: '50'
+      },
+      {
+        prop: "state",
+        label: "状态",
+      },
+      {
+        prop: "qllx",
+        label: "权利类型",
+      },
+      {
+        prop: "zddm",
+        label: "宗地代码",
+      },
+      {
+        prop: "bdcdyh",
+        label: "不动产单元号",
+      },
+      {
+        prop: "qlxz",
+        label: "权利性质",
+      },
+      {
+        prop: "zdmj",
+        label: "宗地面积",
+      },
+      {
+        prop: "qlsdfs",
+        label: "权利设定方式",
+      },
+      {
+        prop: "tdyt",
+        label: "土地用途",
+      },
+      {
+        prop: "zl",
+        label: "坐落",
+      },
+    ]
+  }
+
+
+}
+let datas = new data()
+export {
+  datas,
+}