222

schangxiang@126.com

2025-05-06 38b161e4d52362081bfe78fb5b51fbf384db7ce2

 HIAWms/web/src/components/BaseDialog/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,145 @@
<template>
  <el-dialog
    :class="className"
    width="525px"
    v-bind="attrs"
    :show-close="false"
    @close="() => onClose(false)"
    @open="onOpen"
  >
    <div
      :style="`
      height: ${currentHeight};
      overflow: ${attrs.height ? 'auto' : 'initial'};
      padding-right: 20px;
      `"
    >
      <slot></slot>
    </div>

    <template #header>
      <div class="cs-dialog-content">
        <p>{{ _t(attrs.title) }}</p>
        <Icon
          style="cursor: pointer"
          :width="16"
          :height="16"
          icon="X"
          @click="onClose"
        />
      </div>
    </template>
    <template #footer v-if="!attrs.isHideFooter">
      <div class="cs-dialog-footer">
        <slot name="footer" v-if="footer"></slot>
        <template v-else>
          <slot name="custom-btn"></slot>
          <el-button
            @click="onClose"
            type="info"
            plain
            class="dialog-btn cs-base-btn"
            >{{ _t('取消') }}</el-button
          >
          <el-button
            v-if="!attrs.hideSubmit"
            :disabled="attrs.submitDisabled"
            @click="onConfirm"
            type="primary"
            class="cs-base-btn"
            >{{ _t('确认') }}</el-button
          >
        </template>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { useAttrs, computed, useSlots } from 'vue'
import { _t } from '@/libs/Language/Language'
import Icon from '../Icon/Icon'
const footer = !!useSlots().footer
const emit = defineEmits(['close', 'confirm', 'open'])
const attrs = useAttrs()
const props = defineProps<{ [key: string]: any }>()
const className = computed(() => {
  if (attrs.class) {
    return `without-cs-dialog ${attrs.class}`
  }
  return 'without-cs-dialog'
})

// å…³é—­å¼¹çª—都会调这个方法，有些时候点击confirm的时候不能同时触发close的，加个参数，用于区分是点击按钮关闭的事件还是close事件
const onClose = (isClose = true) => emit('close', isClose)

const onConfirm = () => emit('confirm')

const onOpen = () => emit('open')

const currentHeight = computed(() => {
  return attrs.height || 'auto'
})
</script>
<style lang="scss">
.without-cs-dialog {
  box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
  border-radius: 6px 6px 6px 6px;
  padding-top: 10px;

  header.cs-dialog__header {
    padding: 0;
    padding-bottom: 0;
    margin-right: 0;
  }
  .cs-dialog__body {
    padding: 10px 20px;
    padding-right: 0;
    padding-bottom: 0;
  }

  .cs-dialog-content {
    width: 100%;
    height: 42px;
    border-radius: 6px 6px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px 0;
    /* padding-top: 36px; */

    p {
      /* width: 72px; */
      /* height: 18px; */
      margin: 0;
      font-size: 18px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: bold;
      color: #464e54;
    }
  }
  .cs-dialog__footer {
    padding: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .cs-dialog-footer {
    padding: 0 18px;
    padding-bottom: 10px;

    .cs-base-btn {
      width: 98px;
      height: 26px;
    }
    .dialog-btn {
      background: #efeded;
      color: #666666;
    }
  }
}
.without-cs-dialog.is-fullscreen {
  overflow: hidden;
  .cs-dialog__body {
    height: calc(100% - 80px);
  }
}
</style>