137 lines
3.0 KiB
Vue
137 lines
3.0 KiB
Vue
<template>
|
|
<j-spin :spinning="loading">
|
|
<div class="notify-type-warp" :class="{ disabled: disabled }">
|
|
<div
|
|
:key="item.id"
|
|
v-for="item in options"
|
|
class="notify-type-item"
|
|
:class="{ active: notifyType === item.value }"
|
|
@click="onSelect(item.value)"
|
|
>
|
|
<div class="notify-type-item-image">
|
|
<img :width="106" :src="item.iconUrl" />
|
|
</div>
|
|
<div class="notify-type-item-title">{{item.label}}</div>
|
|
</div>
|
|
</div>
|
|
</j-spin>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { getImage } from '@/utils/comm';
|
|
import notice from '@/api/notice/config';
|
|
|
|
const iconMap = new Map();
|
|
iconMap.set('dingTalk', getImage('/notice/dingtalk.png'));
|
|
iconMap.set('weixin', getImage('/notice/wechat.png'));
|
|
iconMap.set('email', getImage('/notice/email.png'));
|
|
iconMap.set('voice', getImage('/notice/voice.png'));
|
|
iconMap.set('sms', getImage('/notice/sms.png'));
|
|
iconMap.set('webhook', getImage('/notice/webhook.png'));
|
|
|
|
const props = defineProps({
|
|
value: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['update:value', 'change']);
|
|
|
|
const loading = ref<boolean>(false);
|
|
const notifyType = ref('');
|
|
const options = ref<any[]>([]);
|
|
|
|
watch(
|
|
() => props.value,
|
|
(newVal) => {
|
|
notifyType.value = newVal;
|
|
},
|
|
{ deep: true, immediate: true },
|
|
);
|
|
|
|
const onSelect = (val: string) => {
|
|
if (!props.disabled) {
|
|
emit('update:value', val);
|
|
emit('change', val);
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
loading.value = true;
|
|
notice.queryMessageType().then((resp) => {
|
|
if (resp.status === 200) {
|
|
options.value = (resp.result as any[]).map((item) => {
|
|
return {
|
|
label: item.name,
|
|
value: item.id,
|
|
iconUrl: iconMap.get(item.id),
|
|
};
|
|
});
|
|
}
|
|
loading.value = false;
|
|
});
|
|
notifyType.value = props.value;
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.notify-type-warp {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 16px 24px;
|
|
width: 100%;
|
|
|
|
.notify-type-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 172px;
|
|
border: 1px solid #e0e4e8;
|
|
border-radius: 2px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
|
|
.notify-type-item-title {
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.notify-type-item-image {
|
|
width: 106px;
|
|
margin: 16px 33px;
|
|
}
|
|
|
|
&:hover {
|
|
color: @primary-color-hover;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&.active {
|
|
border-color: @primary-color-active;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
&.disabled {
|
|
.notify-type-item {
|
|
cursor: not-allowed;
|
|
|
|
&:hover {
|
|
color: initial;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
&.active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |