集成vue3版本弹出框拖拽功能draggable

Vol.Vue3版本/src/components/basic/ViewGrid/ViewGrid.vue

@@ -65,7 +65,13 @@
                   <div class="step-text">备 注： {{ item.remark || '-' }}</div>
                 </div>
               </div>
-              <div :style="{'margin-top':workFlowSteps.length?'20px':'-17px'}" class="audit-content" v-show="auditParam.showAction">
+              <div
+                :style="{
+                  'margin-top': workFlowSteps.length ? '20px' : '-17px'
+                }"
+                class="audit-content"
+                v-show="auditParam.showAction"
+              >
                 <div style="margin-bottom:10px;">
                   审批：
                   <el-radio-group
@@ -92,9 +98,9 @@
               </div>
             </div>
           </el-tab-pane>
-          <el-tab-pane  v-if="workFlowSteps.length" label="审批记录">
-          <audit-his :table-data="auditParam.auditHis"></audit-his>
-           </el-tab-pane>
+          <el-tab-pane v-if="workFlowSteps.length" label="审批记录">
+            <audit-his :table-data="auditParam.auditHis"></audit-his>
+          </el-tab-pane>
         </el-tabs>
       </template>
       <template #footer>
@@ -260,6 +266,8 @@
           :title="boxOptions.title"
           :width="boxOptions.width"
           :height="boxOptions.height"
+          :modal="boxOptions.modal"
+          :draggable="boxOptions.draggable"
           :padding="0"
           :on-model-close="onGridModelClose"
         >
@@ -491,7 +499,7 @@ var vueParam = {
       import('./ViewGridCustomColumn.vue')
     ),
     'vol-header': defineAsyncComponent(() => import('./../VolHeader.vue')),
-        'audit-his': defineAsyncComponent(() => import('./AuditHis.vue'))
+    'audit-his': defineAsyncComponent(() => import('./AuditHis.vue'))
   },
   props: {},
   setup(props) {
@@ -607,7 +615,7 @@ var vueParam = {
         reason: '', //审核原因
         height: 500,
         showViewButton: true,
-        auditHis:[],
+        auditHis: [],
         showAction: false, //是否显示审批操作(当前节点为用户审批时显示)
         //审核选项(可自行再添加)
         data: [
@@ -638,7 +646,9 @@ var vueParam = {
         labelWidth: 100,
         height: 0,
         width: 0,
-        summary: false //弹出框明细table是否显示合计
+        summary: false, //弹出框明细table是否显示合计
+        draggable: false, //2022.09.12弹出框拖动功能
+        modal: true //2022.09.12弹出框背景遮罩层
       }, //saveClose新建或编辑成功后是否关闭弹出框//弹出框的标签宽度labelWidth
       editor: {
         uploadImgUrl: '', //上传路径

Vol.Vue3版本/src/components/basic/VolBox.vue

@@ -6,9 +6,11 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :width="width"
+    :draggable="draggable"
+    :modal="modal"
     :before-close="handleClose"
   >
-    <template #title> <i :class="icon"></i> {{ title }} </template>
+    <template #header> <i :class="icon"></i> {{ title }} </template>
     <div class="dia-content" :style="{ height: contentHeight + 'px' }">
       <el-scrollbar style="flex: 1">
         <!-- 是否开启懒加载2020.12.06 -->
@@ -17,7 +19,7 @@
           class="srcoll-content"
           :style="{ padding: padding + 'px' }"
         >
-              <slot name="content"></slot>
+          <slot name="content"></slot>
           <slot></slot>
         </div>
       </el-scrollbar>
@@ -36,7 +38,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, watch, watchEffect } from "vue";
+import { defineComponent, ref, watch, watchEffect } from 'vue';
 
 export default defineComponent({
   props: {
@@ -44,47 +46,48 @@ export default defineComponent({
     lazy: {
       //是否开启懒加载2020.12.06
       type: Boolean,
-      default: false,
+      default: false
     },
     icon: {
       type: String,
-      default: "el-icon-warning-outline",
+      default: 'el-icon-warning-outline'
     },
     title: {
       type: String,
-      default: "基本信息",
+      default: '基本信息'
     },
     height: {
       type: Number,
-      default: 200,
+      default: 200
     },
     width: {
       type: Number,
-      default: 650,
+      default: 650
     },
     padding: {
       type: Number,
-      default: 16,
+      default: 16
     },
-    hideMask: {
+    modal: {  //是否需要遮罩层
       type: Boolean,
-      default: false,
+      default: true
     },
-    draggable: {
+    draggable: {  //启用可拖拽功能	
       type: Boolean,
-      default: false,
+      default: false
     },
     mask: {
       type: Boolean,
-      default: true,
+      default: true
     },
     onModelClose: {
       //2021.07.11增加弹出框关闭事件
       type: Function,
       default: (iconClick) => {
         return true;
-      },
-    },
+      }
+    }
+
   },
   setup(props, context) {
     const clientHeight = document.body.clientHeight;
@@ -100,16 +103,16 @@ export default defineComponent({
       let result = props.onModelClose(!!iconClose);
       if (result === false) return;
       vmodel.value = false;
-      context.emit("update:modelValue", false);
+      context.emit('update:modelValue', false);
       done && done();
     };
     const calcHeight = (val) => {
       if (props.height > clientHeight) {
-        contentHeight.value = clientHeight-56;
-        return clientHeight / -2 + "px";
+        contentHeight.value = clientHeight - 56;
+        return clientHeight / -2 + 'px';
       }
-      contentHeight.value=val||props.height;
-      return (props.height + 56) / -2 + "px";
+      contentHeight.value = val || props.height;
+      return (props.height + 56) / -2 + 'px';
     };
 
     top.value = calcHeight();
@@ -134,7 +137,7 @@ export default defineComponent({
       calcHeight,
       contentHeight
     };
-  },
+  }
 });
 </script>
 

开发版dev/Vue.NetCore/Vol.Vue3版本/src/components/basic/ViewGrid/ViewGrid.vue

@@ -65,7 +65,13 @@
                   <div class="step-text">备 注： {{ item.remark || '-' }}</div>
                 </div>
               </div>
-              <div :style="{'margin-top':workFlowSteps.length?'20px':'-17px'}" class="audit-content" v-show="auditParam.showAction">
+              <div
+                :style="{
+                  'margin-top': workFlowSteps.length ? '20px' : '-17px'
+                }"
+                class="audit-content"
+                v-show="auditParam.showAction"
+              >
                 <div style="margin-bottom:10px;">
                   审批：
                   <el-radio-group
@@ -92,9 +98,9 @@
               </div>
             </div>
           </el-tab-pane>
-          <el-tab-pane  v-if="workFlowSteps.length" label="审批记录">
-          <audit-his :table-data="auditParam.auditHis"></audit-his>
-           </el-tab-pane>
+          <el-tab-pane v-if="workFlowSteps.length" label="审批记录">
+            <audit-his :table-data="auditParam.auditHis"></audit-his>
+          </el-tab-pane>
         </el-tabs>
       </template>
       <template #footer>
@@ -260,6 +266,8 @@
           :title="boxOptions.title"
           :width="boxOptions.width"
           :height="boxOptions.height"
+          :modal="boxOptions.modal"
+          :draggable="boxOptions.draggable"
           :padding="0"
           :on-model-close="onGridModelClose"
         >
@@ -491,7 +499,7 @@ var vueParam = {
       import('./ViewGridCustomColumn.vue')
     ),
     'vol-header': defineAsyncComponent(() => import('./../VolHeader.vue')),
-        'audit-his': defineAsyncComponent(() => import('./AuditHis.vue'))
+    'audit-his': defineAsyncComponent(() => import('./AuditHis.vue'))
   },
   props: {},
   setup(props) {
@@ -607,7 +615,7 @@ var vueParam = {
         reason: '', //审核原因
         height: 500,
         showViewButton: true,
-        auditHis:[],
+        auditHis: [],
         showAction: false, //是否显示审批操作(当前节点为用户审批时显示)
         //审核选项(可自行再添加)
         data: [
@@ -638,7 +646,9 @@ var vueParam = {
         labelWidth: 100,
         height: 0,
         width: 0,
-        summary: false //弹出框明细table是否显示合计
+        summary: false, //弹出框明细table是否显示合计
+        draggable: false, //2022.09.12弹出框拖动功能
+        modal: true //2022.09.12弹出框背景遮罩层
       }, //saveClose新建或编辑成功后是否关闭弹出框//弹出框的标签宽度labelWidth
       editor: {
         uploadImgUrl: '', //上传路径

开发版dev/Vue.NetCore/Vol.Vue3版本/src/components/basic/VolBox.vue

@@ -6,9 +6,11 @@
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :width="width"
+    :draggable="draggable"
+    :modal="modal"
     :before-close="handleClose"
   >
-    <template #title> <i :class="icon"></i> {{ title }} </template>
+    <template #header> <i :class="icon"></i> {{ title }} </template>
     <div class="dia-content" :style="{ height: contentHeight + 'px' }">
       <el-scrollbar style="flex: 1">
         <!-- 是否开启懒加载2020.12.06 -->
@@ -17,7 +19,7 @@
           class="srcoll-content"
           :style="{ padding: padding + 'px' }"
         >
-              <slot name="content"></slot>
+          <slot name="content"></slot>
           <slot></slot>
         </div>
       </el-scrollbar>
@@ -36,7 +38,7 @@
 </template>
 
 <script>
-import { defineComponent, ref, watch, watchEffect } from "vue";
+import { defineComponent, ref, watch, watchEffect } from 'vue';
 
 export default defineComponent({
   props: {
@@ -44,47 +46,48 @@ export default defineComponent({
     lazy: {
       //是否开启懒加载2020.12.06
       type: Boolean,
-      default: false,
+      default: false
     },
     icon: {
       type: String,
-      default: "el-icon-warning-outline",
+      default: 'el-icon-warning-outline'
     },
     title: {
       type: String,
-      default: "基本信息",
+      default: '基本信息'
     },
     height: {
       type: Number,
-      default: 200,
+      default: 200
     },
     width: {
       type: Number,
-      default: 650,
+      default: 650
     },
     padding: {
       type: Number,
-      default: 16,
+      default: 16
     },
-    hideMask: {
+    modal: {  //是否需要遮罩层
       type: Boolean,
-      default: false,
+      default: true
     },
-    draggable: {
+    draggable: {  //启用可拖拽功能	
       type: Boolean,
-      default: false,
+      default: false
     },
     mask: {
       type: Boolean,
-      default: true,
+      default: true
     },
     onModelClose: {
       //2021.07.11增加弹出框关闭事件
       type: Function,
       default: (iconClick) => {
         return true;
-      },
-    },
+      }
+    }
+
   },
   setup(props, context) {
     const clientHeight = document.body.clientHeight;
@@ -100,16 +103,16 @@ export default defineComponent({
       let result = props.onModelClose(!!iconClose);
       if (result === false) return;
       vmodel.value = false;
-      context.emit("update:modelValue", false);
+      context.emit('update:modelValue', false);
       done && done();
     };
     const calcHeight = (val) => {
       if (props.height > clientHeight) {
-        contentHeight.value = clientHeight-56;
-        return clientHeight / -2 + "px";
+        contentHeight.value = clientHeight - 56;
+        return clientHeight / -2 + 'px';
       }
-      contentHeight.value=val||props.height;
-      return (props.height + 56) / -2 + "px";
+      contentHeight.value = val || props.height;
+      return (props.height + 56) / -2 + 'px';
     };
 
     top.value = calcHeight();
@@ -134,7 +137,7 @@ export default defineComponent({
       calcHeight,
       contentHeight
     };
-  },
+  }
 });
 </script>