feat:自定义动画加载指令的完成

+import directive from './src/directive';
 import service from './src/index';
 
 export default {
   install (Vue) {
+    Vue.use(directive);
     Vue.prototype.$loading = service;
   },
+  directive,
   service
 };

+import Vue from 'vue';
+import Loading from './loading.vue';
+import { addClass, removeClass, getStyle } from 'element-ui/src/utils/dom';
+import { PopupManager } from 'element-ui/src/utils/popup';
+import afterLeave from 'element-ui/src/utils/after-leave';
+const Mask = Vue.extend(Loading);
+
+const loadingDirective = {};
+loadingDirective.install = Vue => {
+  if (Vue.prototype.$isServer) return;
+  const toggleLoading = (el, binding) => {
+    if (binding.value) {
+      Vue.nextTick(() => {
+        if (binding.modifiers.fullscreen) {
+          el.originalPosition = getStyle(document.body, 'position');
+          el.originalOverflow = getStyle(document.body, 'overflow');
+          el.maskStyle.zIndex = PopupManager.nextZIndex();
+
+          addClass(el.mask, 'is-fullscreen');
+          insertDom(document.body, el, binding);
+        } else {
+          removeClass(el.mask, 'is-fullscreen');
+
+          if (binding.modifiers.body) {
+            el.originalPosition = getStyle(document.body, 'position');
+
+            ['top', 'left'].forEach(property => {
+              const scroll = property === 'top' ? 'scrollTop' : 'scrollLeft';
+              el.maskStyle[property] = el.getBoundingClientRect()[property] +
+                document.body[scroll] +
+                document.documentElement[scroll] -
+                parseInt(getStyle(document.body, `margin-${property}`), 10) +
+                'px';
+            });
+            ['height', 'width'].forEach(property => {
+              el.maskStyle[property] = el.getBoundingClientRect()[property] + 'px';
+            });
+
+            insertDom(document.body, el, binding);
+          } else {
+            el.originalPosition = getStyle(el, 'position');
+            insertDom(el, el, binding);
+          }
+        }
+      });
+    } else {
+      afterLeave(el.instance, _ => {
+        if (!el.instance.hiding) return;
+        el.domVisible = false;
+        const target = binding.modifiers.fullscreen || binding.modifiers.body
+          ? document.body
+          : el;
+        removeClass(target, 'el-loading-parent--relative');
+        removeClass(target, 'el-loading-parent--hidden');
+        el.instance.hiding = false;
+      }, 300, true);
+      el.instance.visible = false;
+      el.instance.hiding = true;
+    }
+  };
+  const insertDom = (parent, el, binding) => {
+    if (!el.domVisible && getStyle(el, 'display') !== 'none' && getStyle(el, 'visibility') !== 'hidden') {
+      Object.keys(el.maskStyle).forEach(property => {
+        el.mask.style[property] = el.maskStyle[property];
+      });
+
+      if (el.originalPosition !== 'absolute' && el.originalPosition !== 'fixed' && el.originalPosition !== 'sticky') {
+        addClass(parent, 'el-loading-parent--relative');
+      }
+      if (binding.modifiers.fullscreen && binding.modifiers.lock) {
+        addClass(parent, 'el-loading-parent--hidden');
+      }
+      el.domVisible = true;
+
+      parent.appendChild(el.mask);
+      Vue.nextTick(() => {
+        if (el.instance.hiding) {
+          el.instance.$emit('after-leave');
+        } else {
+          el.instance.visible = true;
+        }
+      });
+      el.domInserted = true;
+    } else if (el.domVisible && el.instance.hiding === true) {
+      el.instance.visible = true;
+      el.instance.hiding = false;
+    }
+  };
+
+  Vue.directive('Loading', {
+    bind: function (el, binding, vnode) {
+      const textExr = el.getAttribute('element-loading-text');
+      const spinnerExr = el.getAttribute('element-loading-spinner');
+      const backgroundExr = el.getAttribute('element-loading-background');
+      const customClassExr = el.getAttribute('element-loading-custom-class');
+      const vm = vnode.context;
+      const mask = new Mask({
+        el: document.createElement('div'),
+        data: {
+          text: vm && vm[textExr] || textExr,
+          spinner: vm && vm[spinnerExr] || spinnerExr,
+          background: vm && vm[backgroundExr] || backgroundExr,
+          customClass: vm && vm[customClassExr] || customClassExr,
+          fullscreen: !!binding.modifiers.fullscreen
+        }
+      });
+      el.instance = mask;
+      el.mask = mask.$el;
+      el.maskStyle = {};
+
+      binding.value && toggleLoading(el, binding);
+    },
+
+    update: function (el, binding) {
+      el.instance.setText(el.getAttribute('element-loading-text'));
+      if (binding.oldValue !== binding.value) {
+        toggleLoading(el, binding);
+      }
+    },
+
+    unbind: function (el, binding) {
+      if (el.domInserted) {
+        el.mask &&
+          el.mask.parentNode &&
+          el.mask.parentNode.removeChild(el.mask);
+        toggleLoading(el, { value: false, modifiers: binding.modifiers });
+      }
+      el.instance && el.instance.$destroy();
+    }
+  });
+};
+
+export default loadingDirective;

+import directive from './src/directive';
 import service from './src/index';
 
 export default {
   install (Vue) {
+    Vue.use(directive);
     Vue.prototype.$loading = service;
   },
+  directive,
   service
 };

@@ -6,9 +6,10 @@ import '@/styles/element-variables.scss'
 import '@/styles/index.scss'
 import Base from '@/components/Base/base' // 全局组件引入
 import mixin from '@/utils/mixin/theme.js'
+import Loading from '@/components/Loading/index.js';
 import { startLoadingAddCount, endLoadingSubCount } from './utils/requestLoading'
 Vue.mixin(mixin);
-
+Vue.use(Loading.directive);
 import rules from './utils/rule.js'
 // 全局方法挂载
 Vue.prototype.$rules = rules

 <template>
-  <div class="from-clues" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
-    element-loading-background="rgba(0, 0, 0, 0.8)" style="height:720px">
+  <div class="from-clues loadingtext" v-Loading="loading" style="height:720px">
     <!-- 表单部分 -->
     <el-tabs v-model="activeName" @tab-click="handleClick" v-if="headTabBdcqz.length > 1">
       <el-tab-pane :label="item.qlr + '(' + item.bdcqzh + ')'" :name="item.bsmBdcqz"
@@ -76,7 +75,7 @@ export default {
             this.bdcqz = res.result[0]
             this.headTabBdcqz = res.result
             this.getBdcqzPreview();
-          }else{
+          } else {
             this.loading = false
           }
         }

@@ -128,7 +128,7 @@ export default {
           break;
         case "B3": //材料导入
           document.getElementById("cldr").click();
-          break;  
+          break;
         case "B4":
           popupDialog("登记簿详情", "registerBook/djbFrame", this.currentSelectProps, '80%')
           break;
@@ -140,27 +140,27 @@ export default {
           break;
         case "B6":
           //根据编号获取对应信息
-          getPrintTemplateByCode({tmpno: 'dysqs'}).then(res => {
-            if(res.code == 200){
+          getPrintTemplateByCode({ tmpno: 'dysqs' }).then(res => {
+            if (res.code == 200) {
               getPrintApplicationInfo(this.currentSelectProps).then(infoRes => {
-                if(infoRes.code == 200){
+                if (infoRes.code == 200) {
                   //打开模板设计
-                  let LODOP=getLodop(document.getElementById('LODOP_OB'),document.getElementById('LODOP_EM')); 
-                  LODOP.ADD_PRINT_DATA("ProgramData",res.result.tmpcontent); //装载模板
+                  let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
+                  LODOP.ADD_PRINT_DATA("ProgramData", res.result.tmpcontent); //装载模板
                   //todo 调取后端接口获取数据 循环set
-                  for(let key in infoRes.result){
-                    LODOP.SET_PRINT_STYLEA(key,"CONTENT",infoRes.result[key]);
+                  for (let key in infoRes.result) {
+                    LODOP.SET_PRINT_STYLEA(key, "CONTENT", infoRes.result[key]);
                   }
-                  LODOP.PREVIEW();  
-                }else{
+                  LODOP.PREVIEW();
+                } else {
                   this.$message.error(infoRes.message)
                 }
-              })  
-            }else{
+              })
+            } else {
               this.$message.error(res.message)
             }
           })
-          break;  
+          break;
         case "B7":
           this.$popup("证书领取", "workflow/components/zslq", {
             formData: { bsmSlsq: this.$route.query.bsmSlsq }
@@ -168,9 +168,9 @@ export default {
           break;
         case "back": //退回按钮
           popupDialog("退回", "workflow/components/th", {
-              bsmSlsq: this.bsmSlsq,
-              bestepid: this.bestepid
-            }, '800px')
+            bsmSlsq: this.bsmSlsq,
+            bestepid: this.bestepid
+          }, '800px')
           break;
         case "transfer": //转件按钮
           getNextLinkInfo({
@@ -279,7 +279,6 @@ export default {
         message: "此环节为流程最后环节，转出后流程将结束",
         showCancelButton: true,
         beforeClose: (action, instance, done) => {
-          console.log(action, 'actionaction');
           if (action === "confirm") {
             instance.confirmButtonLoading = true;
             instance.confirmButtonText = "执行中...";
@@ -334,16 +333,16 @@ export default {
       formdata.append("bsmSldy", this.currentSelectProps.bsmSldy);
       formdata.append("bsmSlsq", this.bsmSlsq);
       uploadUndo(formdata).then(res => {
-        if(res.code == 200){
+        if (res.code == 200) {
           this.$message.success("导入成功");
-        }else{
+        } else {
           this.$message.error(res.message)
         }
       })
-    }, 
+    },
     // 上传
     beforeUpload (file) {
       return true;
-    },  
+    },
   }
 }

@@ -76,7 +76,7 @@
       :on-change="handleChange" :before-upload="beforeUpload">
       <el-button id="cldr" icon="el-icon-upload" type="primary" v-show="false">上传</el-button>
     </el-upload>
-    <fqsqDialog v-model="isDialog" :djywbm="$route.query.sqywbm" :isJump="true" @updateDialog="updateDialog" />
+    <selectBdc v-model="isDialog" :djywbm="$route.query.sqywbm" :isJump="true" @updateDialog="updateDialog" />
   </div>
 </template>
 <style scoped lang='scss'>
@@ -91,10 +91,10 @@ import { getForm } from './flowform'
 import NoticeBar from '@/components/NoticeBar/index'
 import { deleteFlow, unClaimTask } from "@/api/ywbl.js";
 import ProcessViewer from './components/processViewer.vue'
-import fqsqDialog from "@/views/ywbl/ywsq/selectBdc.vue";
+import selectBdc from "@/views/ywbl/ywsq/selectBdc.vue";
 export default {
   components: {
-    fqsqDialog,
+    selectBdc,
     NoticeBar,
     ProcessViewer
   },

 <template>
-  <dialogBox :title="title" width="85%" @closeDialog="closeDialog" v-model="value" :isButton="false">
+  <dialogBox :title="title" width="85%" @closeDialog="closeDialog" v-model="value" isMain :isButton="false">
     <component :is="router" :sqywInfo="sqywInfo" @closeDialog="closeDialog" @updateDialog="updateDialog" />
   </dialogBox>
 </template>
@@ -19,8 +19,8 @@ export default {
   watch: {
     value (val) {
       if (val) {
-        this.title = "申请业务：" + this.sqywInfo.djywmc;
-        let view = queueDjywmc(this.sqywInfo.djywbm);
+        this.title = "申请业务：" + this.sqywInfo?.djywmc ? this.sqywInfo?.djywmc : '';
+        let view = queueDjywmc(this.sqywInfo?.djywbm);
         this.router = this.loadView(view);
       }
     },