meixioacomponent 1.1.49 → 2.0.2

package/packages/components/base/baseDialog/index.vue

@@ -1,90 +1,88 @@
 <template>
   <div v-if="isShow" class="dialog-wrap">
-    <el-dialog
-      ref="dialog"
-      :append-to-body="appendToBody"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      :destroy-on-close="destroyOnClose"
-      :modal="modal"
-      :modal-append-to-body="appendToBody"
-      :show-close="false"
-      :top="`0px`"
-      :visible.sync="centerDialogVisible"
-      :width="width"
-    >
-      <base-wait
-        :duration="0"
-        :show-overlay="true"
-        :wait="status === 'wait'"
-        :wait-text="waitText"
-      >
-        <div slot="waitContent" class="dialog__content">
-          <div ref="dialogTitleWrap" class="dialog-title-wrap">
-            <span>{{ title }}</span>
-            <div class="title-handle-wrap">
-              <base-icon
-                v-if="isCache"
-                :color="`d`"
-                :event="true"
-                :iconClass="`element`"
-                :name="`el-icon-minus`"
-                :size="`d`"
-                @iconClick="handleCache"
-              ></base-icon>
-
-              <base-icon
-                v-if="onDrag"
-                ref="dragIcon"
-                :color="`d`"
-                :event="true"
-                :iconClass="`element`"
-                :name="`el-icon-rank`"
-                :size="`d`"
-              ></base-icon>
-
-              <base-icon
-                v-if="hasCloseIcon"
-                :color="`d`"
-                :event="true"
-                :name="`meixicomponenticon-close`"
-                :size="`d`"
-                @iconClick="onHandleClose"
-              ></base-icon>
-
-              <slot name="dialog-title-right-plugin"></slot>
+
+    <t-dialog
+        ref="dialog"
+        :footer="false"
+        :header="false"
+        :closeBtn="false"
+        :attach="attach" :showOverlay="modal" :closeOnOverlayClick="false" :closeOnEscKeydown="false"
+        :top="top"
+        :destroy-on-close="destroyOnClose"
+        :width="width" :visible.sync="centerDialogVisible">
+
+      <template #body>
+
+        <base-wait
+            :duration="0"
+            :show-overlay="true"
+            :wait="status === 'wait'"
+            :wait-text="waitText"
+        >
+          <div slot="waitContent" class="dialog__content">
+            <div ref="dialogTitleWrap" class="dialog-title-wrap">
+              <span>{{ title }}</span>
+              <div class="title-handle-wrap">
+
+                <t-button shape="square" variant="outline" v-if="isCache" @click="handleCache">
+                  <template #icon>
+                    <remove-icon
+                    ></remove-icon>
+                  </template>
+                </t-button>
+
+                <drag-move-icon
+                    v-if="onDrag"
+                    ref="dragIcon"
+                ></drag-move-icon>
+
+                <t-button shape="square" variant="outline" v-if="hasCloseIcon" @click="onHandleClose">
+                  <template #icon>
+                    <close-icon
+                    ></close-icon>
+                  </template>
+                </t-button>
+
+
+                <slot name="dialog-title-right-plugin"></slot>
+              </div>
             </div>
-          </div>
-          <div v-show="status !== 'loading'">
-            <base-list
-              ref="baseListRef"
-              :noresize="false"
-              :style="dialogContentStyle"
-              class="dialog-content-wrap"
-            >
-              <slot name="dialog-content"></slot>
-            </base-list>
-
-            <div class="dialog__footer__wrap">
-              <slot name="dialog-footer"></slot>
+            <div v-show="status !== 'loading'">
+              <base-list
+                  ref="baseListRef"
+                  :noresize="false"
+                  :style="dialogContentStyle"
+                  class="dialog-content-wrap"
+              >
+                <slot name="dialog-content"></slot>
+              </base-list>
+
+              <div class="dialog__footer__wrap">
+                <slot name="dialog-footer"></slot>
+              </div>
             </div>
           </div>
-        </div>
-        <div v-if="status === 'loading'" slot="waitContent">
-          <dialog-skeleton></dialog-skeleton>
-        </div>
-      </base-wait>
-    </el-dialog>
+          <div v-if="status === 'loading'" slot="waitContent">
+            <dialog-skeleton></dialog-skeleton>
+          </div>
+        </base-wait>
+      </template>
+
+
+    </t-dialog>
+
+
   </div>
 </template>
 
 <script>
-import UseDrag from "../../../config/use/useDrag";
 import DialogSkeleton from "./dialogSkeleton";
+import UseDrag from "../../../config/use/useDrag";
+import {CloseIcon, DragMoveIcon, RemoveIcon} from "tdesign-icons-vue"
 
 export default {
   name: "baseDialog",
-  components: { DialogSkeleton },
+  components: {DialogSkeleton, RemoveIcon, CloseIcon, DragMoveIcon},
   data() {
     return {
       isShow: true,
@@ -94,9 +92,10 @@ export default {
     };
   },
 
-  mounted() {},
+  mounted() {
+  },
   beforeDestroy() {
-    const { isCache } = this.$props;
+    const {isCache} = this.$props;
     if (isCache) {
       this.$store.dispatch("dialogCacheStore/closeCache", this);
     }
@@ -132,7 +131,7 @@ export default {
     // 是否关闭后销毁dom
     isDestroy: {
       type: Boolean,
-      default: false,
+      default: true,
     },
     // 关闭前的回调方法
     beforeClose: {
@@ -196,24 +195,35 @@ export default {
       };
     },
     destroyOnClose() {
-      const { isDestroy, isCache } = this.$props;
+      const {isDestroy, isCache} = this.$props;
       if (isCache) {
         return false;
       }
       return isDestroy;
     },
-  },
-  methods: {
-    init() {
-      let target = this.$refs.dialog.$el.childNodes[0];
 
-      let left =
-        (document.documentElement.clientWidth - target.clientWidth) / 2;
+    attach() {
+      if (this.$props.appendToBody) {
+        return () => {
+          return document.body;
+        }
+      }
+      return ''
+    }
 
-      target.style.cssText += `top:${parseInt(
-        this.$props.top
-      )}px;left:${left}px;margin:0px !important`;
 
+  },
+  methods: {
+    init() {
+      // let target = this.$refs.dialog.$el.childNodes[0];
+      //
+      // let left =
+      //     (document.documentElement.clientWidth - target.clientWidth) / 2;
+      //
+      // target.style.cssText += `top:${parseInt(
+      //     this.$props.top
+      // )}px;left:${left}px;margin:0px !important`;
+      //
       this.$nextTick(() => {
         if (this.$props.onDrag) {
           let iconEl = this.$refs.dragIcon.$el;
@@ -232,7 +242,8 @@ export default {
         this.useDrag = new UseDrag({
           target: target,
           handle: target.childNodes[0],
-          onDragEnd: () => {},
+          onDragEnd: () => {
+          },
         });
         this.$nextTick(() => {
           this.useDrag.startDrag(e);
@@ -256,7 +267,7 @@ export default {
       });
     },
     closeDialog() {
-      const { isDestroy } = this.$props;
+      const {isDestroy} = this.$props;
       this.onUnListen();
       if (isDestroy) {
         this.isShow = false;
@@ -268,7 +279,7 @@ export default {
       }
     },
     onHandleClose() {
-      const { beforeClose, closeNotice } = this.$props;
+      const {beforeClose, closeNotice} = this.$props;
       if (beforeClose) {
         //  先执行传入的方法  this.closeDialog  再手动执行关闭的方法
         this.beforeClose(this.closeDialog);
@@ -288,21 +299,39 @@ export default {
         this.closeDialog();
         return;
       }
-      this.$confirm(`${this.noticeText}`, "提示", {
-        type: "warning",
-        cancelButtonText: "取消",
-        confirmButtonText: "确定",
-      })
-        .then((res) => {
+      // this.$confirm(`${this.noticeText}`, "提示", {
+      //   type: "warning",
+      //   cancelButtonText: "取消",
+      //   confirmButtonText: "确定",
+      // })
+      //     .then((res) => {
+      //       this.closeDialog();
+      //     })
+      //     .catch(() => {
+      //     });
+
+      const confirmDia = this.$dialog.confirm({
+        header: '关闭对话框',
+        body: `${this.noticeText}`,
+        confirmBtn: '确定',
+        cancelBtn: '取消',
+        onConfirm: ({e}) => {
+          confirmDia.destroy();
           this.closeDialog();
-        })
-        .catch(() => {});
+        },
+        onClose: ({e, trigger}) => {
+          confirmDia.destroy();
+        },
+      });
+
+
     },
     onUnListen() {
       try {
         let iconEl = this.$refs.dragIcon.$el;
         iconEl.removeEventListener("mousedown", this.startDrag);
-      } catch (error) {}
+      } catch (error) {
+      }
     },
   },
 };
@@ -318,9 +347,9 @@ export default {
   position: relative;
 
 
-/deep/.el-scrollbar__view{
-  height: 100%;
-}
+  /deep/ .el-scrollbar__view {
+    height: 100%;
+  }
 }
 
 .dialog-content-wrap {

package/packages/components/base/baseDialogTable/dialogTable.vue

@@ -1,3 +1,4 @@
+<!--废弃-->
 <template>
   <base-dialog
       ref="dialog"

package/packages/components/base/baseDrawer/index.vue

@@ -1,58 +1,59 @@
 <template>
-  <el-drawer
-      ref="drawer"
-      :append-to-body="true"
-      :before-close="beforeClose"
-      :close-on-press-escape="closeOnPressEscape"
-      :destroy-on-close="destroyOnClose"
-      :direction="direction"
-      :modal="false"
-      :modal-append-to-body="true"
-      :size="drawerSize"
-      :visible.sync="open"
-      :withHeader="false"
-      :wrapperClosable="wrapperClosable"
-      @close="close"
-      @closed="drawerClosed"
-      @opened="opened"
+
+  <t-drawer ref="drawer"
+            :attach="attach"
+            :placement="placement"
+            :destroy-on-close="destroyOnClose"
+            :visible.sync="open"
+            :showOverlay="false"
+            :size="drawerSize.toString()"
+            :header="false"
+            :footer="false"
+            @close="close"
+            :close-on-esc-keydown="closeOnPressEscape"
+            :close-on-overlay-click="wrapperClosable"
   >
-    <!-- 插槽插入你需要渲染的内容 -->
-    <div v-clickOutside="closeDrawerByOutside" class="drawer-content-wrap">
-      <div v-if="handleShow" :style="handleStyle" class="drawer-handle-wrap">
-        <div class="drawer-handle-content">
-          <el-button
-              v-if="showCloseButton"
-              class="drawer-close-button"
-              icon="el-icon-close"
-              type="primary"
-              @click="hiddenDrawer"
-          ></el-button>
-          <div ref="handleResize" class="drawer-handle-resize"></div>
+    <template #body>
+      <!-- 插槽插入你需要渲染的内容 -->
+      <div v-clickOutside="closeDrawerByOutside" class="drawer-content-wrap">
+        <div v-if="handleShow" :style="handleStyle" class="drawer-handle-wrap">
+          <div class="drawer-handle-content">
+
+            <base-button type="primary" size="small" shape="square" variant="base" @click="hiddenDrawer"
+                         style="margin-top: 100px;width: 44px;height: 44px">
+              <template #icon>
+                <close-icon></close-icon>
+              </template>
+            </base-button>
+
+            <div ref="handleResize" class="drawer-handle-resize"></div>
+          </div>
+        </div>
+        <div class="drawer-container-wrap" :style="containerStyle">
+          <div v-if="header" class="drawer-content-title">
+            {{ title }}
+          </div>
+          <!--成功的状态-->
+          <base-list
+              v-if="status !== 'error'"
+              v-show="status === 'success'"
+              :style="contentStyle"
+              class="drawer-content"
+          >
+            <slot name="drawer-content"></slot>
+          </base-list>
+          <!--骨架屏-->
+          <drawer-skeleton v-if="status === 'loading'"></drawer-skeleton>
+          <!--错误状态-->
+          <drawer-error
+              :style="contentStyle"
+              v-if="status === 'error'"
+              :default-text="defaultText"
+          ></drawer-error>
         </div>
       </div>
-
-      <div v-if="header" class="drawer-content-title">
-        {{ title }}
-      </div>
-      <!--成功的状态-->
-      <base-list
-          v-if="status !== 'error'"
-          v-show="status === 'success'"
-          :noresize="false"
-          :style="contentStyle"
-          class="drawer-content"
-      >
-        <slot name="drawer-content"></slot>
-      </base-list>
-      <!--骨架屏-->
-      <drawer-skeleton v-if="status === 'loading'"></drawer-skeleton>
-      <!--错误状态-->
-      <drawer-error
-          v-if="status === 'error'"
-          :default-text="defaultText"
-      ></drawer-error>
-    </div>
-  </el-drawer>
+    </template>
+  </t-drawer>
 </template>
 
 <script>
@@ -62,6 +63,7 @@ import DrawerSkeleton from "./drawerSkeleton";
 import drawerController from "./drawerController";
 //
 import UseResize from "../../../config/use/UseResize";
+import {CloseIcon} from "tdesign-icons-vue"
 
 export default {
   name: "baseDrawer",
@@ -69,34 +71,16 @@ export default {
     return {
       open: false,
       useResize: null,
-      drawerSize: null,
-
-      ignoreList: [
-        "el-image-viewer__wrapper",
-        "guide-content-wrap",
-        "base-guide-overlay",
-        "el-drawer__wrapper",
-        "el-message-box__wrapper",
-        "v-modal",
-        "el-dialog__wrapper",
-        "el-drawer__container",
-        "el-message",
-      ],
-
+      ignoreList: [],
       showCloseButton: false
     };
   },
   created() {
-    this.drawerSize = this.$props.size;
-
     this.setCloseButton(this.$props.useCloseButton);
-
-
   },
-
   mounted() {
   },
-  components: {DrawerError, DrawerSkeleton, baseList},
+  components: {DrawerError, DrawerSkeleton, baseList, CloseIcon},
   props: {
     resize: {
       type: Boolean,
@@ -216,16 +200,20 @@ export default {
 
     hiddenDrawer() {
       if (this.isExis()) {
-        this.$refs.drawer.closeDrawer();
+        if (this.$props.beforeClose) {
+          this.$props.beforeClose(this.closeDrawerAfter);
+        } else {
+          this.$refs.drawer.closeDrawer();
+        }
       }
     },
 
-    closeDrawerByOutside(event) {
-      // if (drawerController.drawerIds.length === 1) {
-      //   this.hiddenDrawer();
-      //   return;
-      // }
+    closeDrawerAfter() {
+      this.$refs.drawer.closeDrawer();
+    },
 
+    closeDrawerByOutside(event) {
+      if (!this.$props.wrapperClosable) return;
       //   只需处理活跃的抽屉
       if (this._uid === drawerController.activityId) {
         let res = this.deepClass(event.target);
@@ -312,6 +300,30 @@ export default {
 
   },
   computed: {
+    drawerSize() {
+      if (this.handleShow) {
+        return this.$props.size + 44
+      }
+      return this.$props.size;
+    },
+    containerStyle() {
+      return {
+        width: `${this.handleShow ? "calc(100% - 44px)" : '100%'}`
+      }
+    },
+    placement() {
+      let direction = this.$props.direction;
+      switch (direction) {
+        case 'rtl':
+          return 'right';
+        case 'ltr':
+          return 'left'
+        default:
+          return 'right'
+      }
+    },
+
+
     handleShow() {
       let direction = this.$props.direction;
       return direction === "rtl" || direction === "ltr";
@@ -319,7 +331,7 @@ export default {
 
     contentStyle() {
       if (this.$props.header) {
-        return {height: `calc(100% - 44px)`};
+        return {height: `calc(100% - 40px)`};
       } else {
         return {height: `calc(100%)`};
       }
@@ -329,18 +341,30 @@ export default {
       if (direction === "rtl") {
         return {
           width: "44px",
-          left: `calc(100% - 44px - ${this.drawerSize}px)`,
         };
       } else if (direction === "ltr") {
         return {
           width: "44px",
-          left: `calc(${this.drawerSize}px)`,
         };
       }
     },
 
-
+    attach() {
+      if (this.$props.appendToBody) {
+        return () => {
+          return document.body;
+        }
+      }
+      return ''
+    }
   },
+  watch: {
+    open(newVal) {
+      if (newVal) {
+        this.opened();
+      }
+    }
+  }
 };
 </script>
 
@@ -349,7 +373,10 @@ export default {
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  position: relative;
+  display: flex;
+  align-items: flex-start;
+  flex-flow: row nowrap;
+  justify-content: flex-start;
   box-sizing: border-box;
 
   .drawer-content-title {
@@ -368,6 +395,16 @@ export default {
     line-height: calc(var(--font-size-xl) + 8);
   }
 
+  .drawer-container-wrap {
+    width: 100%;
+    height: 100%;
+    padding: var(--td-comp-paddingTB-l) var(--td-comp-paddingLR-l);
+    box-sizing: border-box;
+    box-shadow: var(--shadow-fixed);
+    background: var(--bg-white);
+
+  }
+
   .drawer-content {
     width: 100%;
     overflow-y: auto;
@@ -376,27 +413,15 @@ export default {
 }
 
 .drawer-handle-wrap {
-  top: 0;
+  width: 0;
   height: 100%;
-  position: fixed;
-  background: transparent;
-  justify-content: center;
+
 
   .drawer-handle-content {
     width: 100%;
     height: 100%;
     position: relative;
 
-    .drawer-close-button {
-      right: 0;
-      top: 100px;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      flex-flow: row;
-      position: absolute;
-      justify-content: center;
-    }
 
     .drawer-handle-resize {
       top: 0;