style:进度查询

 <template>
   <transition name="fade" mode="out-in" v-if="isShow">
     <div class="ls-mask" v-loading="loading">
-      <div class="ls-mask-window" :style="{'width':width,'height':height}">
+      <div class="ls-mask-window" :style="{ 'width': width, 'height': height }">
         <div class="ls-head">
-          <div class="ls-title" :style="{'text-align':titleStyle}">
-            <svg-icon v-if="iconClass!=''" :icon-class='iconClass' />
-            <b>{{title}}</b>
+          <div class="ls-title" :style="{ 'text-align': titleStyle }">
+            <svg-icon v-if="iconClass != ''" :icon-class='iconClass' />
+            <b>{{ title }}</b>
           </div>
           <svg-icon icon-class='close' class="closeStyle" @click="onCancel" />
         </div>
 
-        <div class="ls-mask-content" ref='contentRef' :style="{'height': contentHeight}">
+        <div class="ls-mask-content" ref='contentRef' :style="{ 'height': contentHeight }">
           <component :is="editItem" ref='childRef' @loading='loadingFn' :key="key" :formData='formData' />
         </div>
         <div class="ls-mask-footer" v-if='btnShow'>
-          <el-button type="primary" @click="onConfirm">{{confirmText}}</el-button>
-          <el-button @click="onCancel">{{cancelText}}</el-button>
+          <el-button type="primary" @click="onConfirm">{{ confirmText }}</el-button>
+          <el-button @click="onCancel">{{ cancelText }}</el-button>
         </div>
       </div>
     </div>
@@ -51,7 +51,8 @@ export default {
     isShow (a, b) {
       this.key++
       this.editItem = this.loadViewFn(this.editItem)
-    },
+      document.body.appendChild(this.$el);
+    }
   },
   mounted () {
     //  计算滚动条高度

@@ -2,34 +2,24 @@
   <div class="from-clues">
     <!-- 表单部分 -->
     <div class="from-clues-header">
-      <el-form :model="queryForm" ref="queryForm" label-width="80px">
+      <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="70px">
         <el-row>
           <el-col :span="5">
             <el-form-item label="查询编号">
-              <el-input
-                placeholder="请输入编号"
-                v-model="queryForm.cxbh"
-                class="width200px"
-                clearable
-              >
+              <el-input placeholder="请输入编号" v-model="queryForm.cxbh" class="width100" clearable @clear="queryClick()">
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="5">
             <el-form-item label="申请人">
-              <el-input
-                placeholder="请输入申请人"
-                v-model="queryForm.sqr"
-                class="width200px"
-                clearable
-              >
+              <el-input placeholder="请输入申请人" v-model="queryForm.sqr" class="width100" @clear="queryClick()" clearable>
               </el-input>
             </el-form-item>
           </el-col>
 
           <el-col :span="14" class="btnColRight">
             <el-form-item>
-              <el-button type="primary" @click="queryClick()">查询</el-button>
+              <el-button type="primary" native-type="submit" @click="queryClick()">查询</el-button>
               <el-button @click="moreQueryClick()">高级查询</el-button>
             </el-form-item>
           </el-col>
@@ -38,17 +28,9 @@
     </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>
@@ -62,13 +44,13 @@ import { getJtfcPage } from "@/api/jtfc";
 export default {
   name: "dydjb",
   mixins: [table],
-  mounted() {
+  mounted () {
     sendThis(this);
   },
   computed: {
     ...mapGetters(["dictData"]),
   },
-  data() {
+  data () {
     return {
       queryForm: {
         cxbh: "",
@@ -83,18 +65,18 @@ export default {
   },
   methods: {
     // 初始化数据
-    fetchData() {
+    fetchData () {
       getJtfcPage({ ...this.queryForm, ...this.pageData }).then((res) => {
         let { records, total } = res.result;
         this.tableData.data = records;
         this.tableData.total = total;
       });
     },
-    handleSort(name, sort) {
+    handleSort (name, sort) {
       console.log(name, sort);
     },
 
-    dydjbClick(scope) {
+    dydjbClick (scope) {
       // var sqcxBsm = scope.row.bsmSqcx; 
       this.$popup({
         title: "打印登记薄",
@@ -105,14 +87,14 @@ export default {
         formData: {
           sqcxdata: scope.row,
         },
-        cancel: function () {}, //取消事件的回调
+        cancel: function () { }, //取消事件的回调
         confirm: function () {
           // that.loadBdcdylist();
         }, //确认事件的回调
       });
     },
 
-    queryClick() {
+    queryClick () {
       this.fetchData();
     },
   },

@@ -2,53 +2,32 @@
   <div class="from-clues">
     <!-- 家庭房产 -->
     <div class="from-clues-header">
-      <el-form :model="queryForm" ref="queryForm" label-width="70px">
+      <el-form :model="queryForm" @submit.native.prevent ref="queryForm" label-width="70px">
         <el-row>
           <el-col :span="5">
             <el-form-item label="查询编号">
-              <el-input
-                placeholder="请输入查询编号"
-                v-model="queryForm.cxbh"
-                clearable
-                class="width200px"
-              >
+              <el-input placeholder="请输入查询编号" @clear="queryClick()" v-model="queryForm.cxbh" clearable class="width100">
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="5">
             <el-form-item label="申请人">
-              <el-input
-                placeholder="请输入申请人"
-                v-model="queryForm.sqr"
-                clearable
-                class="width200px"
-              >
+              <el-input placeholder="请输入申请人" @clear="queryClick()" v-model="queryForm.sqr" clearable class="width100">
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="14" class="btnColRight">
-            <el-button type="primary"  @click="queryClick()"
-              >查询</el-button
-            >
-            <el-button type="primary" @click="handleAdd" 
-              >新增</el-button
-            >
+            <el-button type="primary" native-type="submit" @click="queryClick()">查询</el-button>
+            <el-button type="primary" @click="handleAdd">新增</el-button>
           </el-col>
         </el-row>
       </el-form>
     </div>
     <!-- 表格 -->
     <div class="from-clues-content">
-      <lb-table
-        :page-size="pageData.size"
-        border
-        :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 :current-page.sync="pageData.current" :total="tableData.total"
+        @size-change="handleSizeChange" @p-current-change="handleCurrentChange" :column="tableData.columns"
+        :data="tableData.data">
       </lb-table>
     </div>
     <addjtfc v-model="isDialog" />
@@ -63,10 +42,10 @@ export default {
   name: "jtfc",
   components: { addjtfc },
   mixins: [table],
-  mounted() {
+  mounted () {
     sendThis(this);
   },
-  data() {
+  data () {
     return {
       isDialog: false,
       sqrOption: [],
@@ -84,22 +63,22 @@ export default {
     };
   },
   methods: {
-    queryClick(){
+    queryClick () {
       this.fetchData();
     },
 
     // 初始化数据
-    fetchData() {
+    fetchData () {
       getJtfcPage({ ...this.queryForm, ...this.pageData }).then((res) => {
         let { records, total } = res.result;
         this.tableData.data = records;
         this.tableData.total = total;
       });
     },
-    handleSort(name, sort) {
+    handleSort (name, sort) {
       console.log(name, sort);
     },
-    handleAdd() {
+    handleAdd () {
       this.isDialog = true;
     },
   },

@@ -2,33 +2,23 @@
   <div class="from-clues">
     <!-- 表单部分 -->
     <div class="from-clues-header">
-      <el-form :model="queryForm" ref="queryForm" label-width="80px">
+      <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="70px">
         <el-row>
           <el-col :span="5">
             <el-form-item label="查询编号">
-              <el-input
-                placeholder="请输入编号"
-                v-model="queryForm.cxbh"
-                class="width200px"
-                clearable
-              >
+              <el-input placeholder="请输入编号" @clear="queryClick()" v-model="queryForm.cxbh" class="width100" clearable>
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="5">
             <el-form-item label="申请人">
-              <el-input
-                placeholder="请输入申请人"
-                v-model="queryForm.sqr"
-                class="width200px"
-                clearable
-              >
+              <el-input placeholder="请输入申请人" @clear="queryClick()" v-model="queryForm.sqr" class="width100" clearable>
               </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="14" class="btnColRight">
             <el-form-item>
-              <el-button type="primary" @click="queryClick()">查询</el-button>
+              <el-button type="primary" native-type="submit" @click="queryClick()">查询</el-button>
               <el-button @click="moreQueryClick()">高级查询</el-button>
             </el-form-item>
           </el-col>
@@ -37,17 +27,9 @@
     </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>
@@ -59,10 +41,10 @@ import { getJtfcPage } from "@/api/jtfc";
 export default {
   name: "sqcxjl",
   mixins: [table],
-  mounted() {
+  mounted () {
     sendThis(this);
   },
-  data() {
+  data () {
     return {
       queryForm: {
         cxbh: "",
@@ -76,12 +58,12 @@ export default {
     };
   },
   methods: {
-    queryClick() {
+    queryClick () {
       this.fetchData();
     },
 
     // 初始化数据
-    fetchData() {
+    fetchData () {
 
       getJtfcPage({ ...this.queryForm, ...this.pageData }).then((res) => {
         let { records, total } = res.result;
@@ -89,13 +71,13 @@ export default {
         this.tableData.total = total;
       });
     },
-    handleSort(name, sort) {
+    handleSort (name, sort) {
       console.log(name, sort);
     },
 
     // 查看
-    handleViewClick(scope) {
-      var sqcxBsm = scope.row.bsmSqcx; 
+    handleViewClick (scope) {
+      var sqcxBsm = scope.row.bsmSqcx;
       this.$popup({
         title: "申请查询记录",
         width: "85%",
@@ -105,7 +87,7 @@ export default {
         formData: {
           sqcxBsm: sqcxBsm,
         },
-        cancel: function () {}, //取消事件的回调
+        cancel: function () { }, //取消事件的回调
         confirm: function () {
           // that.loadBdcdylist();
         }, //确认事件的回调
@@ -116,5 +98,4 @@ export default {
 </script>
 <style scoped lang="scss">
 @import "~@/styles/public.scss";
-
 </style>

@@ -2,7 +2,7 @@
   <div class="from-clues">
     <!-- 表单部分 -->
     <div class="from-clues-header">
-      <el-form :model="queryForm" ref="queryForm" label-width="80px">
+      <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="80px">
         <el-row>
           <el-col :span="5">
             <el-form-item label="业务来源">

@@ -2,7 +2,7 @@
   <div class="from-clues">
     <!-- 表单部分 -->
     <div class="from-clues-header">
-      <el-form :model="queryForm" ref="queryForm" label-width="80px">
+      <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="80px">
         <el-row>
           <el-col :span="5">
             <el-form-item label="业务来源">

@@ -2,11 +2,12 @@
   <div class="from-clues">
     <!-- 表单部分 -->
     <div class="from-clues-header">
-      <el-form :model="queryForm" ref="queryForm" label-width="70px">
+      <el-form :model="queryForm" ref="queryForm" @submit.native.prevent label-width="80px">
         <el-row>
           <el-col :span="5">
             <el-form-item label="业务来源">
-              <el-select v-model="queryForm.ywly" filterable clearable placeholder="请选择业务来源">
+              <el-select v-model="queryForm.ywly" class="width100" @change="fetchData()" filterable clearable
+                placeholder="请选择业务来源">
                 <el-option v-for="item in dictData['ywly']" :key="item.dcode" :label="item.dname" :value="item.dcode">
                 </el-option>
               </el-select>
@@ -14,7 +15,8 @@
           </el-col>
           <el-col :span="5">
             <el-form-item label="权利类型">
-              <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
+              <el-select v-model="queryForm.qllx" class="width100" @change="fetchData()" filterable clearable
+                placeholder="请选择权利类型">
                 <el-option v-for="item in dictData['A8']" :key="item.dcode" :label="item.dname" :value="item.dcode">
                 </el-option>
               </el-select>
@@ -22,7 +24,8 @@
           </el-col>
           <el-col :span="5">
             <el-form-item label="登记类型">
-              <el-select v-model="queryForm.djlx" filterable clearable placeholder="请选择登记类型">
+              <el-select v-model="queryForm.djlx" class="width100" @change="fetchData()" filterable clearable
+                placeholder="请选择登记类型">
                 <el-option v-for="item in  dictData['A21']" :key="item.dcode" :label="item.dname" :value="item.dcode">
                 </el-option>
               </el-select>
@@ -30,14 +33,14 @@
           </el-col>
           <el-col :span="5">
             <el-form-item label="业务号">
-              <el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
+              <el-input placeholder="请输入业务号" v-model="queryForm.ywh" @clear="fetchData()" clearable class="width200px">
               </el-input>
             </el-form-item>
           </el-col>
 
           <el-col :span="4" class="btnColRight">
             <el-form-item>
-              <el-button type="primary" @click="queryClick()">查询</el-button>
+              <el-button type="primary" native-type="submit" @click="fetchData()">查询</el-button>
               <el-button @click="moreQueryClick()">高级查询</el-button>
             </el-form-item>
           </el-col>
@@ -46,9 +49,9 @@
     </div>
     <!-- 表格 -->
     <div class="from-clues-content">
-      <lb-table border :page-size="pageData.pageSize" @sort-change="handleSort" :current-page.sync="pageData.currentPage"
-        :total="pageData.total" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
-        :column="tableData.columns" :data="tableData.data">
+      <lb-table border :page-size="pageData.pageSize" @sort-change="handleSort"
+        :current-page.sync="pageData.currentPage" :total="pageData.total" @size-change="handleSizeChange"
+        @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
       </lb-table>
     </div>
   </div>