|
| 1 | +<!-- |
| 2 | + * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available. |
| 3 | + * |
| 4 | + * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved. |
| 5 | + * |
| 6 | + * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License. |
| 7 | + * You may obtain a copy of the License athttps://opensource.org/licenses/MIT |
| 8 | + * |
| 9 | + * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed |
| 10 | + * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for |
| 11 | + * the specific language governing permissions and limitations under the License. |
| 12 | +--> |
| 13 | + |
| 14 | +<template> |
| 15 | + <BkLoading :loading="getBizSettingLoading || groupNotifyLoading"> |
| 16 | + <SmartAction |
| 17 | + class="ticket-notice" |
| 18 | + :offset-target="getSmartActionOffsetTarget"> |
| 19 | + <BkCard |
| 20 | + :border="false" |
| 21 | + class="mb-32" |
| 22 | + :show-header="false"> |
| 23 | + <DbForm |
| 24 | + class="notice-form" |
| 25 | + :label-width="100"> |
| 26 | + <DbFormItem |
| 27 | + :label="t('通知方式')" |
| 28 | + required> |
| 29 | + <BkTable |
| 30 | + align="center" |
| 31 | + border="full" |
| 32 | + class="notice-table" |
| 33 | + :columns="columns" |
| 34 | + :data="dataList" |
| 35 | + header-align="center" |
| 36 | + :header-cell-class-name="setHeadCellClassName"> |
| 37 | + </BkTable> |
| 38 | + </DbFormItem> |
| 39 | + </DbForm> |
| 40 | + </BkCard> |
| 41 | + <template #action> |
| 42 | + <div> |
| 43 | + <BkButton |
| 44 | + class="w-88" |
| 45 | + :loading="updateSettingLoading" |
| 46 | + theme="primary" |
| 47 | + @click="handleSubmit"> |
| 48 | + {{ t('提交') }} |
| 49 | + </BkButton> |
| 50 | + <BkButton |
| 51 | + class="ml8 w-88" |
| 52 | + :disabled="updateSettingLoading" |
| 53 | + @click="handleReset"> |
| 54 | + {{ t('重置') }} |
| 55 | + </BkButton> |
| 56 | + </div> |
| 57 | + </template> |
| 58 | + </SmartAction> |
| 59 | + </BkLoading> |
| 60 | +</template> |
| 61 | +<script setup lang="tsx"> |
| 62 | + import _ from 'lodash'; |
| 63 | + import { useI18n } from 'vue-i18n'; |
| 64 | + import { useRequest } from 'vue-request'; |
| 65 | +
|
| 66 | + import TicketModel from '@services/model/ticket/ticket'; |
| 67 | + import { getBizSettingList, updateBizSetting } from '@services/source/bizSetting'; |
| 68 | + import { getAlarmGroupNotifyList } from '@services/source/monitorNoticeGroup'; |
| 69 | +
|
| 70 | + import { InputMessageTypes, MessageTypes } from '@common/const' |
| 71 | +
|
| 72 | + import { messageSuccess } from '@utils'; |
| 73 | +
|
| 74 | + interface DataRow { |
| 75 | + status: string; |
| 76 | + statusText: string; |
| 77 | + noticeMember: string[]; |
| 78 | + checkbox: Record<string, boolean>, |
| 79 | + input: Record<string, string>, |
| 80 | + } |
| 81 | +
|
| 82 | + const { t } = useI18n(); |
| 83 | +
|
| 84 | + const dataList = ref<DataRow[]>([]); |
| 85 | +
|
| 86 | + const columns = computed(() => { |
| 87 | + const baseColumns = [ |
| 88 | + { |
| 89 | + label: t('单据状态'), |
| 90 | + field: 'statusText', |
| 91 | + width: 100, |
| 92 | + }, |
| 93 | + { |
| 94 | + label: t('通知对象'), |
| 95 | + field: 'noticeMember', |
| 96 | + width: 200, |
| 97 | + render: ({ data } : { data: DataRow }) => data.noticeMember.join('，') |
| 98 | + }, |
| 99 | + ]; |
| 100 | +
|
| 101 | + const nofityColumns = (alarmGroupNotifyList.value || []).filter((item) => item.is_active).map(item => { |
| 102 | + const isInputType = InputMessageTypes.includes(item.type) |
| 103 | + return { |
| 104 | + field: item.type, |
| 105 | + minWidth: isInputType ? 320 : 120, |
| 106 | + showOverflowTooltip: false, |
| 107 | + renderHead: () => ( |
| 108 | + <div class="message-type-head"> |
| 109 | + <img |
| 110 | + height="20" |
| 111 | + src={`data:image/png;base64,${item.icon}`} |
| 112 | + width="20" /> |
| 113 | + <span |
| 114 | + class="ml-4"> |
| 115 | + { item.label } |
| 116 | + </span> |
| 117 | + </div> |
| 118 | + ), |
| 119 | + render: ({ data } : { data: DataRow }) => { |
| 120 | + if (isInputType) { |
| 121 | + return ( |
| 122 | + <bk-input |
| 123 | + v-model={data.input[item.type]} |
| 124 | + placeholder={t('请输入群ID')}/> |
| 125 | + ) |
| 126 | + } |
| 127 | + return <bk-checkbox v-model={data.checkbox[item.type]}/> |
| 128 | + } |
| 129 | + } |
| 130 | + }); |
| 131 | +
|
| 132 | + return [...baseColumns, ...nofityColumns]; |
| 133 | + }); |
| 134 | +
|
| 135 | + const { loading: getBizSettingLoading, data: bizSetting, run: runGetBizSettingList } = useRequest(getBizSettingList, { |
| 136 | + manual: true, |
| 137 | + }); |
| 138 | +
|
| 139 | + const { loading: groupNotifyLoading, data: alarmGroupNotifyList, run: runGetAlarmGroupNotifyList } = useRequest(getAlarmGroupNotifyList, { |
| 140 | + manual: true, |
| 141 | + }); |
| 142 | +
|
| 143 | + const { loading: updateSettingLoading, run: runUpdateBizSetting } = useRequest(updateBizSetting, { |
| 144 | + manual: true, |
| 145 | + onSuccess: () => { |
| 146 | + messageSuccess(t('保存成功')); |
| 147 | + }, |
| 148 | + }); |
| 149 | +
|
| 150 | + watch([bizSetting, alarmGroupNotifyList], () => { |
| 151 | + if (bizSetting.value && alarmGroupNotifyList.value) { |
| 152 | + const activeTypeMap = alarmGroupNotifyList.value.reduce<{ |
| 153 | + checkbox: Record<string, boolean>, |
| 154 | + input: Record<string, string>, |
| 155 | + }>((prevMap, item) => { |
| 156 | + if (item.is_active) { |
| 157 | + if (InputMessageTypes.includes(item.type)) { |
| 158 | + Object.assign(prevMap.input, { |
| 159 | + [item.type]: '' |
| 160 | + }) |
| 161 | + } else { |
| 162 | + Object.assign(prevMap.checkbox, { |
| 163 | + [item.type]: false |
| 164 | + }) |
| 165 | + } |
| 166 | + } |
| 167 | + return prevMap; |
| 168 | + }, { |
| 169 | + checkbox: {}, |
| 170 | + input: {} |
| 171 | + }) |
| 172 | +
|
| 173 | + const isBizSettingEmpty = _.isEmpty(bizSetting.value) || _.isEmpty(bizSetting.value.NOTIFY_CONFIG) |
| 174 | + const list: DataRow[] = [] |
| 175 | +
|
| 176 | + Object.entries(TicketModel.statusTextMap).forEach(([status, statusText]) => { |
| 177 | + if (![TicketModel.STATUS_RUNNING, TicketModel.STATUS_TIMER].includes(status)) { |
| 178 | + const initSetting = _.cloneDeep(activeTypeMap) |
| 179 | + if (isBizSettingEmpty) { |
| 180 | + [MessageTypes.MAIL, MessageTypes.RTX].forEach(type => { |
| 181 | + if (initSetting.checkbox[type] !== undefined) { |
| 182 | + initSetting.checkbox[type] = true; |
| 183 | + } |
| 184 | + }); |
| 185 | + } else { |
| 186 | + const statusBizSetting = bizSetting.value!.NOTIFY_CONFIG[status] |
| 187 | + Object.keys(initSetting.checkbox).forEach(initSettingKey => { |
| 188 | + initSetting.checkbox[initSettingKey] = statusBizSetting[initSettingKey] || false |
| 189 | + }) |
| 190 | + Object.keys(initSetting.input).forEach(initSettingKey => { |
| 191 | + initSetting.input[initSettingKey] = (statusBizSetting[initSettingKey] || []).join(',') |
| 192 | + }) |
| 193 | + } |
| 194 | +
|
| 195 | + list.push({ |
| 196 | + status, |
| 197 | + statusText, |
| 198 | + noticeMember: status === TicketModel.STATUS_APPROVE ? [t('审批人')] : [t('提单人'), t('协助人')], |
| 199 | + checkbox: initSetting.checkbox, |
| 200 | + input: initSetting.input |
| 201 | + }) |
| 202 | + } |
| 203 | + }) |
| 204 | + dataList.value = list |
| 205 | + } |
| 206 | + }) |
| 207 | +
|
| 208 | + const setHeadCellClassName = ({ columnIndex }: { columnIndex: number }) => columnIndex < 2 ? 'common-head' : '' |
| 209 | +
|
| 210 | + const getSmartActionOffsetTarget = () => document.querySelector('.bk-form-content'); |
| 211 | +
|
| 212 | + const getData = () => { |
| 213 | + runGetBizSettingList({ |
| 214 | + bk_biz_id: window.PROJECT_CONFIG.BIZ_ID, |
| 215 | + key: 'NOTIFY_CONFIG', |
| 216 | + }) |
| 217 | + runGetAlarmGroupNotifyList({ |
| 218 | + bk_biz_id: window.PROJECT_CONFIG.BIZ_ID |
| 219 | + }) |
| 220 | + } |
| 221 | +
|
| 222 | + const handleSubmit = () => { |
| 223 | + runUpdateBizSetting({ |
| 224 | + bk_biz_id: window.PROJECT_CONFIG.BIZ_ID, |
| 225 | + key: 'NOTIFY_CONFIG', |
| 226 | + value: dataList.value.reduce<Record<string, Record<string, boolean | string[]>>>((prevMap, dataItem) => { |
| 227 | + const checkboxMap = Object.entries(dataItem.checkbox).reduce<Record<string, boolean>>((prevMap, [key, value])=> { |
| 228 | + if (value) { |
| 229 | + return Object.assign({}, prevMap, { [key]: value }) |
| 230 | + } |
| 231 | + return prevMap |
| 232 | + }, {}) |
| 233 | + const inputMap = Object.entries(dataItem.input).reduce<Record<string, string[]>>((prevMap, [key, value])=> { |
| 234 | + if (value) { |
| 235 | + return Object.assign({}, prevMap, { [key]: value.split(',') }) |
| 236 | + } |
| 237 | + return prevMap |
| 238 | + }, {}) |
| 239 | + return Object.assign({}, prevMap, { |
| 240 | + [dataItem.status]: { |
| 241 | + ...checkboxMap, |
| 242 | + ...inputMap |
| 243 | + } |
| 244 | + }) |
| 245 | + }, {}) |
| 246 | + }) |
| 247 | + }; |
| 248 | +
|
| 249 | + const handleReset = () => { |
| 250 | + getData() |
| 251 | + }; |
| 252 | +
|
| 253 | + // 初始化查询 |
| 254 | + getData() |
| 255 | +</script> |
| 256 | + |
| 257 | +<style lang="less" scoped> |
| 258 | + .ticket-notice { |
| 259 | + padding: 20px; |
| 260 | +
|
| 261 | + .db-card { |
| 262 | + & ~ .db-card { |
| 263 | + margin: 20px; |
| 264 | + } |
| 265 | + } |
| 266 | +
|
| 267 | + :deep(.notice-form) { |
| 268 | + padding: 24px 0; |
| 269 | +
|
| 270 | + .bk-form-label { |
| 271 | + font-size: 12px; |
| 272 | + } |
| 273 | + } |
| 274 | +
|
| 275 | + :deep(.notice-table) { |
| 276 | + th { |
| 277 | + &.common-head { |
| 278 | + font-weight: bolder; |
| 279 | + } |
| 280 | +
|
| 281 | + .message-type-head { |
| 282 | + display: flex; |
| 283 | + align-items: center; |
| 284 | + } |
| 285 | + } |
| 286 | + } |
| 287 | + } |
| 288 | +</style> |
0 commit comments