补充提交

JLHWEB/src/components/LjDialog/index-new.vue

@@ -0,0 +1,198 @@
+<template>
+  <el-dialog
+    v-model="drawer"
+    class="lj-dialog"
+    :class="[globalStore.assemblySize, ifoverflow ? 'lj-dialog-overflow' : '']"
+    v-bind="{ ...drawerDefineProp, ...$attrs }"
+    @closed="closed"
+  >
+    <template #header>
+      <slot name="header">
+        <div class="flx-1">
+          <span class="text-h5-b">{{ title }}</span>
+        </div>
+      </slot>
+    </template>
+    <template #default>
+      <template v-if="Object.keys(dlStyle).length">
+        <div :style="dlStyle">
+          <slot />
+        </div>
+      </template>
+      <template v-else>
+        <slot />
+      </template>
+    </template>
+    <template #footer v-if="slots.footer || confirmed">
+      <slot name="footer" v-if="slots.footer"></slot>
+      <template v-if="confirmed">
+        <el-button type="primary" @click="confirmClick">确定</el-button>
+        <el-button @click="hide">取消</el-button>
+      </template>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="LjDialog">
+import { ref, useSlots, computed, reactive, toRefs } from "vue";
+import { useGlobalStore } from "@/stores/modules/global";
+
+// 接收父组件参数并设置默认值
+interface LjDialogProps {
+  // /**
+  //  * @description 遮罩的自定义类名
+  //  */
+  // modalClass?: string;
+  // // /**
+  // //  * @description 布局参数
+  // //  */
+  // // layout?: any;
+  title?: string;
+  closed?: () => void;
+  confirmed?: () => void;
+  height?: string | number;
+  show?: boolean; // moadl开关
+  /**
+   * @description 是否超出隐藏
+   */
+  ifoverflow?: boolean;
+}
+const props = withDefaults(defineProps<LjDialogProps>(), {
+  ifoverflow: false
+});
+const globalStore = useGlobalStore();
+
+/**
+ * @description 高度样式
+ */
+const dlStyle = computed(() => {
+  let style: any = {};
+  if (!props.height) return style;
+  if (typeof props.height == "number") {
+    style.height = `${props.height}px`;
+  } else {
+    if (props?.height.indexOf("%") > -1 || props.height?.indexOf("px") > -1 || props.height?.indexOf("vh") > -1) {
+      style.height = props.height;
+    } else {
+      style.height = `${props.height}px`;
+    }
+  }
+  return style;
+});
+/**
+ * @description 抽屉默认属性
+ */
+const drawerDefineProp = {
+  draggable: true,
+  overflow: true,
+  destroyOnClose: true
+};
+
+const state = reactive({
+  drawer: props.show
+});
+const { drawer } = toRefs(state);
+
+// const drawer = ref(false);
+const slots = useSlots();
+function showFunc() {
+  drawer.value = true;
+}
+function hide() {
+  drawer.value = false;
+}
+function confirmClick() {
+  props.confirmed && props.confirmed();
+  hide();
+  // ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
+  //   .then(() => {
+  //     drawer.value = false;
+  //   })
+  //   .catch(() => {
+  //     // catch error
+  //   });
+}
+
+defineExpose({ show: showFunc, hide });
+</script>
+
+<style lang="scss">
+.lj-dialog {
+  border-radius: $br-md;
+  &.is-fullscreen {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+  .el-dialog__body {
+    flex: 1;
+    padding: $space-b2 $space-b3 $space-b3 $space-b3;
+  }
+  &.lj-dialog-overflow {
+    overflow: hidden;
+    .el-dialog__body {
+      overflow: hidden;
+    }
+  }
+  .el-dialog__headerbtn {
+    top: 0;
+  }
+  &.small {
+    .el-dialog__header {
+      padding: 12px 20px;
+    }
+    .el-dialog__headerbtn {
+      width: 44px;
+      height: 44px;
+    }
+    .el-dialog__body {
+      padding: $space-b2 $space-b3 $space-b2 $space-b3;
+    }
+  }
+  &.is-selector {
+    .el-dialog__header {
+      padding: 12px $space-b2;
+      color: $color-black;
+      background: $color-primary-100;
+      height: 15px;
+    }
+    .el-dialog__headerbtn {
+      width: 44px;
+      height: 44px;
+      .el-icon {
+        position: relative;
+        z-index: 1;
+        font-size: 20px;
+        color: $color-black;
+      }
+    }
+    .el-dialog__body {
+      padding: 0;
+      padding-bottom: $space-b1;
+    }
+    .longjoe-fold-layout-main {
+      .table-search {
+        padding: 0 $space-b2 0 $space-b1;
+        box-shadow: unset;
+      }
+      .table-main {
+        padding: 0 $space-b2 0 $space-b1;
+        margin-top: 0;
+      }
+    }
+
+    // .filter {
+    //   padding: 0 $space-b1 $space-b1 $space-b2;
+    // }
+    .lj-header-menu {
+      margin-bottom: $space-b2;
+      box-shadow: $shadow-0-down;
+    }
+  }
+  &.find-dialog {
+    .el-dialog__header {
+      padding: 0 20px;
+    }
+  }
+}
+</style>