打印登记薄表单开发

+<template>
+  <div>
+    <el-form :model="ruleForm" label-width="120px">
+      <el-row>
+        <el-col :span="6">
+          <el-form-item label="查询时间：">
+            <!-- <el-input disabled v-model="ruleForm.cxlx"></el-input> -->
+            {{ ruleForm.cxsj }}
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="不动产单元号：">
+            {{ ruleForm.bdcdyh }}
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <table class="table1">
+            <tr>
+              <td>1</td>
+              <td>2</td>
+              <td>3</td>
+              <td>4</td>
+              <td>5</td>
+              <td>6</td>
+              <td>7</td>
+              <td>8</td>
+              <td>9</td>
+              <td>10</td>
+              <td>11</td>
+
+            </tr>
+          </table>
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+  
+  <script>
+import { getJtfcInfo } from "@/api/sqcxjl";
+
+export default {
+  components: {},
+  props: ["formData"],
+
+  created() {
+    var sqcxdata = this.formData.sqcxdata;
+    this.ruleForm = sqcxdata;
+  },
+
+  data() {
+    return {
+      ruleForm: {
+        cxsj: "",
+        bdcdyh: "",
+      },
+    };
+  },
+
+  mounted() {},
+
+  methods: {},
+};
+</script>
+  <style scoped lang="scss">
+@import "~@/styles/mixin.scss";
+
+.table1 {
+  border-spacing: 0; 
+  border-collapse: collapse;
+  width: 100%;
+  
+}
+
+.table1 td {
+  border: 1px solid #acbed1;
+  height: 30px;
+}
+</style>
+  
\ No newline at end of file

@@ -5,39 +5,31 @@
       <el-form :model="queryForm" ref="queryForm" label-width="80px">
         <el-row>
           <el-col :span="5">
-            <el-form-item label="业务来源">
-              <el-select v-model="queryForm.ywly" class="width100" filterable clearable placeholder="请选择业务来源">
-                <el-option v-for="item in dictData['ywly']" :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-select v-model="queryForm.qllx" filterable class="width100" clearable placeholder="请选择权利类型">
-                <el-option v-for="item in dictData['A8']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-                </el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="5">
-            <el-form-item label="登记类型">
-              <el-select v-model="queryForm.djlx" filterable class="width100" clearable placeholder="请选择登记类型">
-                <el-option v-for="item in dictData['A21']" :key="item.dcode" :label="item.dname" :value="item.dcode">
-                </el-option>
-              </el-select>
+            <el-form-item label="查询编号">
+              <el-input
+                placeholder="请输入编号"
+                v-model="queryForm.cxbh"
+                class="width200px"
+                clearable
+              >
+              </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-form-item label="申请人">
+              <el-input
+                placeholder="请输入申请人"
+                v-model="queryForm.sqr"
+                class="width200px"
+                clearable
+              >
               </el-input>
             </el-form-item>
           </el-col>
 
-          <el-col :span="4" class="btnColRight">
+          <el-col :span="14" class="btnColRight">
             <el-form-item>
-              <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
+              <el-button type="primary" @click="queryClick()">查询</el-button>
               <el-button @click="moreQueryClick()">高级查询</el-button>
             </el-form-item>
           </el-col>
@@ -46,59 +38,82 @@
     </div>
     <!-- 表格 -->
     <div class="from-clues-content">
-      <lb-table :page-size="pageData.size" border @sort-change="handleSort" :current-page.sync="pageData.current"
-        :total="tableData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
-        :column="tableData.columns" :data="tableData.data">
+      <lb-table
+        :page-size="pageData.size"
+        border
+        @sort-change="handleSort"
+        :current-page.sync="pageData.current"
+        :total="tableData.total"
+        @size-change="handleSizeChange"
+        @p-current-change="handleCurrentChange"
+        :column="tableData.columns"
+        :data="tableData.data"
+      >
       </lb-table>
     </div>
   </div>
 </template>
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters } from "vuex";
 import table from "@/utils/mixin/table";
 import { datas, sendThis } from "./dydjbdata";
+import { getJtfcPage } from "@/api/jtfc";
+
 export default {
   name: "dydjb",
   mixins: [table],
-  mounted () {
+  mounted() {
     sendThis(this);
   },
   computed: {
-    ...mapGetters(['dictData']),
+    ...mapGetters(["dictData"]),
   },
-  data () {
+  data() {
     return {
       queryForm: {
-        ywly: "",
-        qllx: "",
-        djlx: "",
+        cxbh: "",
+        sqr: "",
         ywh: "",
       },
       tableData: {
-        total: 0,
         columns: datas.columns(),
-        data: [
-          {
-            cxlx: "家庭房产",
-            cxbh: "20200409146",
-            cxsj: "2016-10-02 10:00:00",
-            slry: "张三",
-            sqr: "张三",
-            yqlrgx: "不动产权利人",
-            qlr: "绿地开发商",
-          },
-        ],
+        data: [],
       },
     };
   },
   methods: {
     // 初始化数据
-    fetchData () { },
-    handleSort (name, sort) {
+    fetchData() {
+      getJtfcPage({ ...this.queryForm, ...this.pageData }).then((res) => {
+        let { records, total } = res.result;
+        this.tableData.data = records;
+        this.tableData.total = total;
+      });
+    },
+    handleSort(name, sort) {
       console.log(name, sort);
     },
-    openDialog () {
-      console.log(999999999999999);
+
+    dydjbClick(scope) {
+      // var sqcxBsm = scope.row.bsmSqcx; 
+      this.$popup({
+        title: "打印登记薄",
+        width: "85%",
+        btnShow: true,
+        editItem: "sqcx/dydjb/components/dydjbInfo", // 弹窗内容
+        height: "700px",
+        formData: {
+          sqcxdata: scope.row,
+        },
+        cancel: function () {}, //取消事件的回调
+        confirm: function () {
+          // that.loadBdcdylist();
+        }, //确认事件的回调
+      });
+    },
+
+    queryClick() {
+      this.fetchData();
     },
   },
 };

@@ -16,8 +16,15 @@ class data extends filter {
         width: '50'
       },
       {
-        prop: "cxlx",
         label: "查询类型",
+        render: (h, scope) => {
+          switch (scope.row.cxlx) {
+            case '1':
+              return <div>家庭房产</div>
+            case '2':
+              return <div>登记簿</div>
+          }
+        }
       },
       {
         prop: "cxbh",
@@ -28,33 +35,41 @@ class data extends filter {
         label: "查询时间",
       },
       {
-        prop: "slry",
+        prop: "cxr",
         label: "受理人员",
       },
       {
-        prop: "sqr",
+        prop: "sqrxm",
         label: "申请人",
       },
       {
-        prop: "yqlrgx",
         label: "与权利人的关系",
+        render: (h, scope) => {
+          switch (scope.row.ycyrgx) {
+            case '1':
+              return <div>权利人</div>
+            case '2':
+              return <div>产权利害关系人</div>
+            case '3':
+              return <div>委托人</div>
+          }
+        }
       },
       {
-        prop: "qlr",
+        prop: "qlrxm",
         label: "权利人",
       },
-    ]
+      {
+        label: "操作",
+        render: (h, scope) => {
+          return <el-button type="text" icon='el-icon-view' onClick={() => { vm.dydjbClick(scope) }}>打印登记薄</el-button>
         }
+      },
 
-  ywlys(){
-    return[
-      { value: 1, label: "办事大厅" },
-      { value: 2, label: "微信小程序" },
-      { value: 3, label: "法院端" },
-      { value: 4, label: "银行端" },
     ]
   }
 
+
 }
 let datas = new data()
 export {

 <template>
-  <div class="jtfccx-edit">
+  <div >
     <el-form :model="ruleForm" label-width="120px">
       <el-row>
         <el-col :span="24" style="margin-bottom: 15px">

@@ -26,12 +26,6 @@
               </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="14" class="btnColRight">
             <el-form-item>
               <el-button type="primary" @click="queryClick()">查询</el-button>
@@ -88,7 +82,7 @@ export default {
 
     // 初始化数据
     fetchData() {
-      debugger;
+
       getJtfcPage({ ...this.queryForm, ...this.pageData }).then((res) => {
         let { records, total } = res.result;
         this.tableData.data = records;
@@ -98,8 +92,9 @@ export default {
     handleSort(name, sort) {
       console.log(name, sort);
     },
+
     // 查看
-    handleView(scope) {
+    handleViewClick(scope) {
       var sqcxBsm = scope.row.bsmSqcx; 
       this.$popup({
         title: "申请查询记录",

@@ -64,9 +64,9 @@ class data extends filter {
         label: "查询用途",
       },
       {
-        label: "查询编号",
+        label: "操作",
         render: (h, scope) => {
-          return <el-button type="text" icon='el-icon-view' onClick={() => { vm.handleView(scope) }}>查看</el-button>
+          return <el-button type="text" icon='el-icon-view' onClick={() => { vm.handleViewClick(scope) }}>查看</el-button>
         }
       },
     ]