refactor: 审批历史页面修改并添加loading

src/components/hzwlComponents/ApprovalHistory.vue

@@ -1,15 +1,14 @@
 <template>
   <!--流程-审批历史-->
-  <div class="flow-list">
+  <div class="historyTable">
     <el-table
         height="100%"
         ref="selection"
-        :data="data"
+        :data="histortData"
         tooltip-effect="dark"
         style="width: 100%"
         border
         row-key="id"
-        :no-data-text="listNoDataText"
         :header-cell-style="{background: '#f8f8f9', color: '#515a6e'}"
     >
       <el-table-column
@@ -75,24 +74,37 @@
 <script>
 export default {
   name: "ApprovalHistory",
-  props: {
+  data() {
-    data: {
+    return {
-      type: Array,
+      histortData: [],
-      required: true
+      loading: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
     }
   },
-  computed: {
+  props: {
-    listNoDataText () {
+    prcNum: {
-      return this.processType === 1 ? '暂无待办流程' : '暂无已办流程'
+      type: String
+    }
+  },
+  methods: {
+    getHistoryData () {
+      this.$http.get('lawss/activiti/get_list_by_instance', {
+        prcNum: this.prcNum || this.$route.query.prcNum
+      }, {
+        loading: "loading",
+        _this: this
+      }, res => {
+        this.histortData = res
+      }, e => {})
     },
   },
+  mounted () {
+    this.getHistoryData()
+  }
 }
 </script>
 
 <style scoped>
-
+.historyTable {
+  height: 100%;
+}
 </style>

src/pages/processCenter/pages/creatProcess/policyMeetings/step1.vue

@@ -43,9 +43,7 @@
         <div class="block" style="padding-top: 20px;" v-show="active === '2'">
           <PersonInfo ref="roleForm" :roleForm="roleForm" :roleRules="roleRules" :disabled="disabled"></PersonInfo>
         </div>
-        <div class="block" style="padding-top: 20px;" v-show="active === '3'">
+        <ApprovalHistory  v-if="active === '3'"></ApprovalHistory>
-          <ApprovalHistory :data="processData" :loading="processLoading"></ApprovalHistory>
-        </div>
       </el-form>
     </div>
     <ProcessFooter
@@ -184,9 +182,6 @@ export default {
       roleForm,
       roleRules,
       dict: {},
-      // 审批历史
-      processData: [],
-      processLoading: false,
       showProcess: false,
 
       loading: false
@@ -195,7 +190,6 @@ export default {
   created() {
     this.getDicTypeListCode()
     this.getData()
-    this.processTable()
   },
   methods: {
     handleTabs(tab) {
@@ -277,19 +271,6 @@ export default {
         })
       }
     },
-    // 审批历史
-    processTable () {
-      if (this.$route.query.prcNum) {
-        this.$http.get('lawss/activiti/get_list_by_instance', {
-          prcNum: this.$route.query.prcNum
-        }, {
-          loading: 'processLoading',
-          _this: this
-        }, res => {
-          this.$set(this, 'processData', res)
-        }, e => {})
-      }
-    },
     //保存
     handleSave() {
       this.footerLoading = true
@@ -433,6 +414,10 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   height: calc(~'100% - 103px');
-  overflow: auto;
+  //overflow: auto;
+  .label-input-form {
+    overflow-y: auto;
+    min-height: 100%;
+  }
 }
 </style>

src/pages/processCenter/pages/creatProcess/policyMeetings/step2.vue

@@ -39,9 +39,7 @@
           </div>
           <ReceiptDescription v-model="form.commentText" prop="commentText" title="审批意见"></ReceiptDescription>
         </div>
-        <div class="block" style="padding-top: 20px;" v-show="active === '3'">
+        <ApprovalHistory v-if="active === '3'"></ApprovalHistory>
-          <ApprovalHistory :data="processData" :loading="processLoading"></ApprovalHistory>
-        </div>
       </el-form>
     </div>
     <ProcessFooter
@@ -187,10 +185,6 @@ export default {
       roleRules,
       dict: {},
 
-      // 审批历史
-      processData: [],
-      processLoading: false,
-
       // 选人抽屉
       drawerModal: false,
       drawerTitle: '',
@@ -202,7 +196,6 @@ export default {
   created() {
     this.getDicTypeListCode()
     this.getData()
-    this.processTable()
   },
   methods: {
     handleTabs(tab) {
@@ -249,17 +242,6 @@ export default {
         })
       })
     },
-    // 审批历史
-    processTable () {
-      this.$http._getData('lawss/activiti/get_list_by_instance',{
-        prcNum: this.$route.query.prcNum
-      },{
-        loading: 'processLoading',
-        _this: this
-      }).then(res => {
-        this.$set(this, 'processData', res)
-      })
-    },
     handleTransfer() {
       this.drawerModal = true
       this.drawerTitle = '转办处理人'
@@ -393,6 +375,10 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   height: calc(~'100% - 103px');
-  overflow: auto;
+  //overflow: auto;
+  .label-input-form {
+    overflow-y: auto;
+    min-height: 100%;
+  }
 }
 </style>

src/pages/processCenter/pages/creatProcess/policyRegulatoryMaterials/index.vue

@@ -97,9 +97,7 @@
         <div class="block" style="padding-top: 20px;" v-show="active === '2'">
           <PersonInfo ref="roleForm" :roleForm="roleForm" :roleRules="roleRules" :disabled="disabled"></PersonInfo>
         </div>
-        <div class="block" style="padding-top: 20px;" v-show="active === '3'">
+        <ApprovalHistory v-if="active === '3'"></ApprovalHistory>
-          <ApprovalHistory :data="processData" :loading="processLoading"></ApprovalHistory>
-        </div>
       </el-form>
     </div>
     <ProcessFooter
@@ -215,9 +213,6 @@ export default {
       rules,
       roleForm,
       roleRules,
-      // 审批历史
-      processData: [],
-      processLoading: false,
       showProcess: false,
       // 底部按钮
       showProcessFooter: true,
@@ -238,7 +233,6 @@ export default {
     this.getDicTypeListCode()
     this.setAuth()
     this.getData()
-    this.processTable()
   },
   methods: {
     handleTabs (tab) {
@@ -342,19 +336,6 @@ export default {
         })
       }
     },
-    // 审批历史
-    processTable () {
-      if (this.$route.query.prcNum) {
-        this.$http.get('lawss/activiti/get_list_by_instance', {
-          prcNum: this.$route.query.prcNum
-        }, {
-          loading: 'processLoading',
-          _this: this
-        }, res => {
-          this.$set(this, 'processData', res)
-        }, e => {})
-      }
-    },
     //保存
     handleSave() {
       this.footerLoading = true
@@ -562,6 +543,10 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   height: calc(~'100% - 103px');
-  overflow: auto;
+  //overflow: auto;
+  .label-input-form {
+    overflow-y: auto;
+    min-height: 100%;
+  }
 }
 </style>

src/pages/processCenter/pages/creatProcess/policyTopicEnrollment/index.vue

@@ -71,9 +71,7 @@
         <div class="block" style="padding-top: 20px;" v-show="active === '2'">
           <PersonInfo ref="roleForm" :roleForm="roleForm" :roleRules="roleRules" :disabled="disabled"></PersonInfo>
         </div>
-        <div class="block" style="padding-top: 20px;" v-show="active === '3'">
+        <ApprovalHistory v-if="active === '3'"></ApprovalHistory>
-          <ApprovalHistory :data="processData" :loading="processLoading"></ApprovalHistory>
-        </div>
       </el-form>
     </div>
     <ProcessFooter
@@ -314,9 +312,6 @@ export default {
       roleForm,
       roleRules,
       options,
-      // 审批历史
-      processData: [],
-      processLoading: false,
       showProcess: false, // 审批历史
 
       // 福田全公司选人解决方案
@@ -338,7 +333,6 @@ export default {
   created() {
     this.setAuth()
     this.getData()
-    this.processTable()
   },
   methods: {
     handleTabs(tab) {
@@ -497,19 +491,6 @@ export default {
         })
       }
     },
-    // 审批历史
-    processTable () {
-      if (this.$route.query.prcNum) {
-        this.$http.get('lawss/activiti/get_list_by_instance', {
-          prcNum: this.$route.query.prcNum
-        }, {
-          loading: 'processLoading',
-          _this: this
-        }, res => {
-          this.$set(this, 'processData', res)
-        }, e => {})
-      }
-    },
 
     handleTransfer() {
       this.drawerModal = true
@@ -712,6 +693,10 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   height: calc(~'100% - 103px');
-  overflow: auto;
+  //overflow: auto;
+  .label-input-form {
+    overflow-y: auto;
+    min-height: 100%;
+  }
 }
 </style>

src/pages/processCenter/pages/creatProcess/policyTopicParticipation/index.vue

@@ -80,9 +80,7 @@
         <div class="block" style="padding-top: 20px;" v-show="active === '2'">
           <PersonInfo ref="roleForm" :roleForm="roleForm" :roleRules="roleRules" :disabled="disabled"></PersonInfo>
         </div>
-        <div class="block" style="padding-top: 20px;" v-show="active === '3'">
+        <ApprovalHistory v-if="active === '3'"></ApprovalHistory>
-          <ApprovalHistory :data="processData" :loading="processLoading"></ApprovalHistory>
-        </div>
       </el-form>
     </div>
     <ProcessFooter
@@ -218,9 +216,6 @@ export default {
       roleForm,
       roleRules,
       options,
-      // 审批历史
-      processData: [],
-      processLoading: false,
       showProcess: false, // 审批历史
 
       // 福田全公司选人解决方案
@@ -234,7 +229,6 @@ export default {
   created() {
     this.setAuth()
     this.getData()
-    this.processTable()
   },
   methods: {
     handleTabs(tab) {
@@ -376,19 +370,6 @@ export default {
         })
       }
     },
-    // 审批历史
-    processTable () {
-      if (this.$route.query.prcNum) {
-        this.$http.get('lawss/activiti/get_list_by_instance', {
-          prcNum: this.$route.query.prcNum
-        }, {
-          loading: 'processLoading',
-          _this: this
-        }, res => {
-          this.$set(this, 'processData', res)
-        }, e => {})
-      }
-    },
 
     handleTransfer() {
       this.drawerModal = true
@@ -591,6 +572,10 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   height: calc(~'100% - 103px');
-  overflow: auto;
+  //overflow: auto;
+  .label-input-form {
+    overflow-y: auto;
+    min-height: 100%;
+  }
 }
 </style>

src/pages/processCenter/pages/creatProcess/policyWarehousing/step1.vue

@@ -28,9 +28,7 @@
         <div class="block" style="padding-top: 20px;" v-show="active === '2'">
           <PersonInfo ref="roleForm" :roleForm="roleForm" :roleRules="roleRules" :disabled="disabled"></PersonInfo>
         </div>
-        <div class="block" style="padding-top: 20px;" v-show="active === '3'">
+        <ApprovalHistory v-if="active === '3'"></ApprovalHistory>
-          <ApprovalHistory :data="processData" :loading="processLoading"></ApprovalHistory>
-        </div>
       </el-form>
     </div>
     <ProcessFooter
@@ -251,9 +249,6 @@ export default {
       roleRules,
       reloadForm: true, // 重新渲染表单
       // bpnId: this.$route.query.bpnId || '',
-      // 审批历史
-      processData: [],
-      processLoading: false,
       showProcess: false,
 
       loading: false,
@@ -263,7 +258,6 @@ export default {
     this.getDicTypeListCode()
     this.resolveRules()
     this.getData()
-    this.processTable()
   },
   watch: {
     'form.isRelateAccess' () {
@@ -348,19 +342,6 @@ export default {
         })
       }
     },
-    // 审批历史
-    processTable () {
-      if (this.$route.query.prcNum) {
-        this.$http.get('lawss/activiti/get_list_by_instance', {
-          prcNum: this.$route.query.prcNum
-        }, {
-          loading: 'processLoading',
-          _this: this
-        }, res => {
-          this.$set(this, 'processData', res)
-        }, e => {})
-      }
-    },
     // 带入流程
     dragIn (form) {
       this.reloadForm = false
@@ -577,19 +558,10 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   height: calc(~'100% - 103px');
-  overflow: auto;
+  //overflow: auto;
-  //.tableTitle {
+  .label-input-form {
-  //  margin-bottom: 10px;
+    overflow-y: auto;
-  //  height: 30px;
+    min-height: 100%;
-  //  line-height: 30px;
+  }
-  //  position: relative;
-  //  font-size: 13px;
-  //  font-weight: bold;
-  //  .tableButton {
-  //    position: absolute;
-  //    right: 0;
-  //    top: 0;
-  //  }
-  //}
 }
 </style>

src/pages/processCenter/pages/creatProcess/policyWarehousing/step2.vue

@@ -24,9 +24,7 @@
           <RelatesInfo :form="form" :dict="dict" :disabled="disabled"></RelatesInfo>
           <ReceiptDescription v-model="form.commentText" prop="commentText" title="审批意见"></ReceiptDescription>
         </div>
-        <div class="block" style="padding-top: 20px;" v-show="active === '3'">
+        <ApprovalHistory v-if="active === '3'"></ApprovalHistory>
-          <ApprovalHistory :data="processData" :loading="processLoading"></ApprovalHistory>
-        </div>
       </el-form>
     </div>
     <ProcessFooter
@@ -261,9 +259,6 @@ export default {
       taskIds: this.$route.query.taskIds,
       pId: this.$route.query.prcId,
 
-      processData: [], // 审批历史
-      processLoading: false,
-
       // 选人抽屉
       drawerModal: false,
       drawerTitle: '',
@@ -275,7 +270,6 @@ export default {
   created() {
     this.getDicTypeListCode()
     this.getData()
-    this.processTable()
     this.resolveRules()
   },
   watch: {
@@ -309,20 +303,6 @@ export default {
         })
       })
     },
-    // 审批历史
-    processTable () {
-      this.processLoading = true
-      this.$http.get('lawss/activiti/get_list_by_instance', {
-        prcNum: this.$route.query.prcNum
-      }, {
-        loading: 'processLoading',
-        _this: this
-      }, res => {
-        this.$set(this, 'processData', res)
-        // this.processData = res
-        this.processLoading = false
-      }, e => {})
-    },
     resolveRules () {
       this.reloadForm = false
       let rules = {}
@@ -483,19 +463,10 @@ export default {
   flex-direction: column;
   justify-content: space-between;
   height: calc(~'100% - 103px');
-  overflow: auto;
+  //overflow: auto;
-  .tableTitle {
+  .label-input-form {
-    margin-bottom: 10px;
+    overflow-y: auto;
-    height: 30px;
+    min-height: 100%;
-    line-height: 30px;
-    position: relative;
-    font-size: 13px;
-    font-weight: bold;
-    .tableButton {
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
   }
 }
 </style>