22

schangxiang@126.com

2025-04-29 3fdd40af6a7c4ca1b9c833fd7fbe17a9bcc9258f

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import {
  defineComponent,
  SetupContext,
  computed,
  useSlots,
  Fragment,
} from 'vue'
import { _t } from '@/libs/Language/Language'
import Icon from '../Icon/Icon'
import './BaseDialog.scss'
 
export default defineComponent({
  emits: ['close', 'confirm', 'open'],
  props: [],
  setup(props, { emit, attrs, slots }: SetupContext) {
    const footer = !!useSlots().footer
    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'
    })
    return () => {
      return (
        <el-dialog
          class={className.value}
          width="525px"
          v-bind="attrs"
          show-close={false}
          onClose={() => onClose(false)}
          onOpen={onOpen}
          v-slots={{
            header: () => (
              <div class="cs-dialog-content">
                <p>{_t(attrs.title)}</p>
                {!attrs.hideClose ? (
                  <Icon
                    style="cursor: pointer"
                    width={16}
                    height={16}
                    icon="X"
                    onClick={onClose}
                  />
                ) : null}
              </div>
            ),
            footer: () =>
              attrs.isHideFooter ? null : (
                <div class="cs-dialog-footer">
                  {footer ? (
                    // <slot name="footer"></slot>
                    slots?.footer?.()
                  ) : (
                    <Fragment>
                      {slots?.customBtn?.()}
                      {/* <slot name="custom-btn"></slot> */}
                      <el-button
                        onClick={onClose}
                        type="info"
                        plain
                        class="dialog-btn cs-base-btn"
                      >
                        {_t('取消')}
                      </el-button>
                      {!attrs.hideSubmit ? (
                        <el-button
                          v-if=""
                          disabled={attrs.submitDisabled}
                          onClick={onConfirm}
                          type="primary"
                          class="cs-base-btn"
                        >
                          {_t('确认')}
                        </el-button>
                      ) : null}
                    </Fragment>
                  )}
                </div>
              ),
          }}
        >
          <div
            style={`
              height: ${currentHeight};
              overflow: ${attrs.height ? 'auto' : 'initial'};
              padding-right: 20px;
              `}
          >
            {slots?.default?.()}
          </div>
        </el-dialog>
      )
    }
  },
})