feat: 页面

wupengfei

2025-09-25 25f7a02df424eb4b8f12534d9a94484abb3bcfb4

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
107
108
<template>
  <ProDialog title="配置" v-model="visible" @close="onDialogClose" destroy-on-close draggable>
    <FieldRadio
      v-model="form.enterpriseConfigureType"
      :value-enum="EnterpriseConfigureTypeText"
      buttonStyle
      style="margin-bottom: 22px"
    />
    <el-tabs v-model="form.enterpriseConfigureType" class="configure-dialog-tabs">
      <el-tab-pane lazy :name="EnterpriseConfigureType.Bank">
        <BankConfigureView :id="form.id" ref="bankConfigureViewRef" />
      </el-tab-pane>
      <el-tab-pane lazy :name="EnterpriseConfigureType.AliPay">
        <AliPayConfigureView :id="form.id" ref="aliPayConfigureViewRef" />
      </el-tab-pane>
      <el-tab-pane lazy :name="EnterpriseConfigureType.Wechat">
        <WechatConfigureView :id="form.id" ref="wechatConfigureViewRef" />
      </el-tab-pane>
      <el-tab-pane lazy :name="EnterpriseConfigureType.Electronic">
        <ElectronicConfigureView :id="form.id" ref="electronicConfigureViewRef" />
      </el-tab-pane>
      <el-tab-pane lazy :name="EnterpriseConfigureType.ShortMessage">
        <ShortMessageConfigureView :id="form.id" ref="shortMessageConfigureViewRef" />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emit('onCancel')">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </template>
  </ProDialog>
</template>
 
<script setup lang="ts">
import { ProDialog, FieldRadio } from '@bole-core/components';
import { EnterpriseConfigureType, EnterpriseConfigureTypeText } from '@/constants';
import BankConfigureView from './BankConfigureView.vue';
import AliPayConfigureView from './AliPayConfigureView.vue';
import ElectronicConfigureView from './ElectronicConfigureView.vue';
import ShortMessageConfigureView from './ShortMessageConfigureView.vue';
import WechatConfigureView from './WechatConfigureView.vue';
 
defineOptions({
  name: 'ConfigureDialog',
});
 
type Form = {
  enterpriseConfigureType: EnterpriseConfigureType;
  id: string;
};
 
const form = defineModel<Form>('form');
const visible = defineModel({ type: Boolean });
 
const emit = defineEmits<{
  (e: 'onConfirm'): void;
  (e: 'onCancel'): void;
}>();
 
const bankConfigureViewRef =
  useTemplateRef<InstanceType<typeof BankConfigureView>>('bankConfigureViewRef');
const aliPayConfigureViewRef =
  useTemplateRef<InstanceType<typeof AliPayConfigureView>>('aliPayConfigureViewRef');
const electronicConfigureViewRef = useTemplateRef<InstanceType<typeof ElectronicConfigureView>>(
  'electronicConfigureViewRef'
);
const shortMessageConfigureViewRef = useTemplateRef<InstanceType<typeof ShortMessageConfigureView>>(
  'shortMessageConfigureViewRef'
);
 
const wechatConfigureViewRef =
  useTemplateRef<InstanceType<typeof WechatConfigureView>>('wechatConfigureViewRef');
 
function onDialogClose() {
  // if (!dialogForm.value) return;
  // dialogForm.value.resetFields();
}
 
async function handleConfirm() {
  let res: any;
  if (form.value.enterpriseConfigureType === EnterpriseConfigureType.Bank) {
    res = await bankConfigureViewRef.value?.onConfirm();
  } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.AliPay) {
    res = await aliPayConfigureViewRef.value?.onConfirm?.();
  } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.Electronic) {
    res = await electronicConfigureViewRef.value?.onConfirm?.();
  } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.ShortMessage) {
    res = await shortMessageConfigureViewRef.value?.onConfirm?.();
  } else if (form.value.enterpriseConfigureType === EnterpriseConfigureType.Wechat) {
    res = await wechatConfigureViewRef.value?.onConfirm?.();
  }
  if (res) {
    emit('onConfirm');
  }
}
</script>
<style lang="scss" scoped>
@use '@/style/common.scss' as *;
 
.configure-dialog-tabs {
  :deep() {
    .el-tabs__header {
      display: none;
    }
  }
}
</style>