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

任超
Showing 8 changed files with 160 additions and 22 deletions
src/components/Loading/index.js
src/components/Loading/src/directive.js
src/components/loading/index.js
src/main.js
src/views/workflow/components/zsyl.vue
src/views/workflow/mixin/index.js
src/views/workflow/workFrame.vue
src/views/ywbl/ywsq/selectBdc.vue
--- a/src/components/Loading/index.js
View file @4f796e7
+++ b/src/components/Loading/index.js
View file @4f796e7
+import directive from './src/directive';
 import service from './src/index';
 export default {
  install (Vue) {
+    Vue.use(directive);
    Vue.prototype.$loading = service;
  },
+  directive,
  service
 };
--- a/src/components/Loading/src/directive.js 0 → 100644
View file @4f796e7
+++ b/src/components/Loading/src/directive.js 0 → 100644
View file @4f796e7
+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;
--- a/src/components/loading/index.js
View file @4f796e7
+++ b/src/components/loading/index.js
View file @4f796e7
+import directive from './src/directive';
 import service from './src/index';
 export default {
  install (Vue) {
+    Vue.use(directive);
    Vue.prototype.$loading = service;
  },
+  directive,
  service
 };
--- a/src/main.js
View file @4f796e7
+++ b/src/main.js
View file @4f796e7
@@ -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
--- a/src/views/workflow/components/zsyl.vue
View file @4f796e7
+++ b/src/views/workflow/components/zsyl.vue
View file @4f796e7
 <template>
-  <div class="from-clues" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
+  <div class="from-clues loadingtext" v-Loading="loading" style="height:720px">
-    element-loading-background="rgba(0, 0, 0, 0.8)" 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
          }
        }
--- a/src/views/workflow/mixin/index.js
View file @4f796e7
+++ b/src/views/workflow/mixin/index.js
View file @4f796e7
@@ -140,23 +140,23 @@ export default {
          break;
        case "B6":
          //根据编号获取对应信息
-          getPrintTemplateByCode({tmpno: 'dysqs'}).then(res => {
+          getPrintTemplateByCode({ tmpno: 'dysqs' }).then(res => {
-            if(res.code == 200){
+            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')); 
+                  let LODOP = getLodop(document.getElementById('LODOP_OB'), document.getElementById('LODOP_EM'));
-                  LODOP.ADD_PRINT_DATA("ProgramData",res.result.tmpcontent); //装载模板
+                  LODOP.ADD_PRINT_DATA("ProgramData", res.result.tmpcontent); //装载模板
                  //todo 调取后端接口获取数据 循环set
-                  for(let key in infoRes.result){
+                  for (let key in infoRes.result) {
-                    LODOP.SET_PRINT_STYLEA(key,"CONTENT",infoRes.result[key]);
+                    LODOP.SET_PRINT_STYLEA(key, "CONTENT", infoRes.result[key]);
                  }
                  LODOP.PREVIEW();
-                }else{
+                } else {
                  this.$message.error(infoRes.message)
                }
              })
-            }else{
+            } else {
              this.$message.error(res.message)
            }
          })
@@ -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,9 +333,9 @@ 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)
        }
      })
--- a/src/views/workflow/workFrame.vue
View file @4f796e7
+++ b/src/views/workflow/workFrame.vue
View file @4f796e7
@@ -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
  },
--- a/src/views/ywbl/ywsq/selectBdc.vue
View file @4f796e7
+++ b/src/views/ywbl/ywsq/selectBdc.vue
View file @4f796e7
 <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;
+        this.title = "申请业务：" + this.sqywInfo?.djywmc ? this.sqywInfo?.djywmc : '';
-        let view = queueDjywmc(this.sqywInfo.djywbm);
+        let view = queueDjywmc(this.sqywInfo?.djywbm);
        this.router = this.loadView(view);
      }
    },