feat(frontend): 支持配置业务级单据协助人 #8126

dbm-ui/frontend/lib/bk-icon/demo.html

@@ -117,6 +117,10 @@ <h2 class="page-title">
     </div>
     <section class="tab-content single-color active" data-type="singleColor">
       <ul class="icon-list">
+        <li class="icon-item" title="tags">
+          <span class="icon bk-dbm-icon db-icon-tags"></span>
+          <p class="icon-text">tags</p>
+        </li>
         <li class="icon-item" title="check-circle-fill">
           <span class="icon bk-dbm-icon db-icon-check-circle-fill"></span>
           <p class="icon-text">check-circle-fill</p>
@@ -273,6 +277,10 @@ <h2 class="page-title">
           <span class="icon bk-dbm-icon db-icon-qiyeweixin"></span>
           <p class="icon-text">qiyeweixin</p>
         </li>
+        <li class="icon-item" title="lianxi">
+          <span class="icon bk-dbm-icon db-icon-lianxi"></span>
+          <p class="icon-text">lianxi</p>
+        </li>
         <li class="icon-item" title="sql">
           <span class="icon bk-dbm-icon db-icon-sql"></span>
           <p class="icon-text">sql</p>
@@ -749,6 +757,10 @@ <h2 class="page-title">
           <span class="icon bk-dbm-icon db-icon-backup-2"></span>
           <p class="icon-text">backup-2</p>
         </li>
+        <li class="icon-item" title="loading-tubiao">
+          <span class="icon bk-dbm-icon db-icon-loading-tubiao"></span>
+          <p class="icon-text">loading-tubiao</p>
+        </li>
         <li class="icon-item" title="host-select">
           <span class="icon bk-dbm-icon db-icon-host-select"></span>
           <p class="icon-text">host-select</p>
@@ -829,6 +841,10 @@ <h2 class="page-title">
           <span class="icon bk-dbm-icon db-icon-dirty-host"></span>
           <p class="icon-text">dirty-host</p>
         </li>
+        <li class="icon-item" title="tag-3">
+          <span class="icon bk-dbm-icon db-icon-tag-3"></span>
+          <p class="icon-text">tag-3</p>
+        </li>
         <li class="icon-item" title="saoba">
           <span class="icon bk-dbm-icon db-icon-saoba"></span>
           <p class="icon-text">saoba</p>
@@ -990,6 +1006,12 @@ <h3 class="describe-title">如何使用</h3>
     </section>
     <section class="tab-content multiple-color"  data-type="multipleColor">
       <ul class="icon-list">
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-tags"></use>
+          </svg>
+          <p class="icon-text">tags</p>
+        </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
             <use xlink:href="#db-icon-check-circle-fill"></use>
@@ -1224,6 +1246,12 @@ <h3 class="describe-title">如何使用</h3>
           </svg>
           <p class="icon-text">qiyeweixin</p>
         </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-lianxi"></use>
+          </svg>
+          <p class="icon-text">lianxi</p>
+        </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
             <use xlink:href="#db-icon-sql"></use>
@@ -1938,6 +1966,12 @@ <h3 class="describe-title">如何使用</h3>
           </svg>
           <p class="icon-text">backup-2</p>
         </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-loading-tubiao"></use>
+          </svg>
+          <p class="icon-text">loading-tubiao</p>
+        </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
             <use xlink:href="#db-icon-host-select"></use>
@@ -2058,6 +2092,12 @@ <h3 class="describe-title">如何使用</h3>
           </svg>
           <p class="icon-text">dirty-host</p>
         </li>
+        <li class="colorful-icon">
+          <svg class="icon svg-icon">
+            <use xlink:href="#db-icon-tag-3"></use>
+          </svg>
+          <p class="icon-text">tag-3</p>
+        </li>
         <li class="colorful-icon">
           <svg class="icon svg-icon">
             <use xlink:href="#db-icon-saoba"></use>

dbm-ui/frontend/lib/bk-icon/style.css

@@ -23,6 +23,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
   -moz-osx-font-smoothing: grayscale;
 }
 
+.db-icon-tags:before {
+	content: "\e206";
+}
 .db-icon-check-circle-fill:before {
 	content: "\e1a7";
 }
@@ -140,6 +143,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .db-icon-qiyeweixin:before {
 	content: "\e1d9";
 }
+.db-icon-lianxi:before {
+	content: "\e209";
+}
 .db-icon-sql:before {
 	content: "\e1cb";
 }
@@ -497,6 +503,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .db-icon-backup-2:before {
 	content: "\e1af";
 }
+.db-icon-loading-tubiao:before {
+	content: "\e208";
+}
 .db-icon-host-select:before {
 	content: "\e1b0";
 }
@@ -557,6 +566,9 @@ url("fonts/iconcool.eot?#iefix") format("embedded-opentype");
 .db-icon-dirty-host:before {
 	content: "\e1ca";
 }
+.db-icon-tag-3:before {
+	content: "\e207";
+}
 .db-icon-saoba:before {
 	content: "\e1f4";
 }

dbm-ui/frontend/src/layout/Index.vue

@@ -143,6 +143,7 @@
       'DBMonitorAlarmGroup',
       'StaffManage',
       'TicketFlowSetting',
+      'TicketCooperationSetting',
     ],
     [menuEnum.resourceManage]: ['ResourceSpec', 'resourceManage', 'resourcePoolDirtyMachines'],
     [menuEnum.platformManage]: [

dbm-ui/frontend/src/layout/components/ConfigManage.vue

@@ -62,6 +62,18 @@
               {{ t('单据免审批设置') }}
             </span>
           </BkMenuItem>
+          <BkMenuItem
+            key="TicketCooperationSetting"
+            v-db-console="'bizConfigManage.ticketCooperationSetting'">
+            <template #icon>
+              <DbIcon type="lianxi" />
+            </template>
+            <span
+              v-overflow-tips.right
+              class="text-overflow">
+              {{ t('单据协作设置') }}
+            </span>
+          </BkMenuItem>
         </BkMenuGroup>
         <BkMenuGroup :name="t('设置')">
           <BkMenuItem

dbm-ui/frontend/src/locales/zh-cn.json

@@ -3668,5 +3668,11 @@
   "请选择Module": "请选择Module",
   "安装 Module任务提交成功": "安装 Module任务提交成功",
   "仅允许同一管控区域的集群一起安装module": "仅允许同一管控区域的集群一起安装module",
+  "单据协作设置": "单据协作设置",
+  "开启后，您指定的协作人将能够协助处理单据执行、继续任务等事项，同时也会收到单据通知": "开启后，您指定的协作人将能够协助处理单据执行、继续任务等事项，同时也会收到单据通知",
+  "单据协助": "单据协助",
+  "默认协作人": "默认协作人",
+  "冷/热节点": "冷/热节点",
+  "冷_热节点规格": "冷_热节点规格",
   "这行勿动！新增翻译请在上一行添加！": ""
 }

dbm-ui/frontend/src/router/index.ts

@@ -32,6 +32,7 @@ import getServiceApplyRoutes from '@views/service-apply/routes';
 import getStaffManageRoutes from '@views/staff-manage/routes';
 import getTaskHistoryRoutes from '@views/task-history/routes';
 import getTemporaryPasswordModify from '@views/temporary-paassword-modify/routes';
+import getTicketCooperationSettingRoutes from '@views/ticket-cooperation-setting/routes';
 import getTicketFlowSettingBizRoutes from '@views/ticket-flow-setting-biz/routes';
 import getTicketFlowSettingGlobalRoutes from '@views/ticket-flow-setting-global/routes';
 import getTicketManageRoutes from '@views/ticket-manage/routes';
@@ -126,6 +127,7 @@ export default () => {
         ...getTicketManageRoutes(),
         ...getTemporaryPasswordModify(),
         ...getTicketFlowSettingBizRoutes(),
+        ...getTicketCooperationSettingRoutes(),
         ...getTicketFlowSettingGlobalRoutes(),
       ],
     },

dbm-ui/frontend/src/services/model/function-controller/functionController.ts

@@ -82,6 +82,7 @@ export default class FunctionController {
   'bizConfigManage.dbConfigure': ControllerItem<string>;
   'bizConfigManage.StaffManage': ControllerItem<string>;
   'bizConfigManage.ticketFlowSetting': ControllerItem<string>;
+  'bizConfigManage.ticketCooperationSetting': ControllerItem<string>;
   databaseManage: ControllerItem<string>;
   'databaseManage.missionManage': ControllerItem<string>;
   'databaseManage.whitelistManage': ControllerItem<string>;

dbm-ui/frontend/src/views/ticket-cooperation-setting/Index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="ticket-cooperation-setting">
+    <DbCard
+      mode="collapse"
+      :title="t('单据协助')">
+      <BkForm
+        ref="formRef"
+        :model="formModel">
+        <BkFormItem :label="t('单据协助')">
+          <BkSwitcher
+            v-model="isCooperationOpen"
+            class="mr-8"
+            theme="primary" />
+          {{ t('开启后，您指定的协作人将能够协助处理单据执行、继续任务等事项，同时也会收到单据通知') }}
+        </BkFormItem>
+        <BkFormItem
+          v-if="isCooperationOpen"
+          :label="t('默认协作人')"
+          property="members"
+          required>
+          <MemberSelector v-model="formModel.members" />
+        </BkFormItem>
+      </BkForm>
+    </DbCard>
+    <BkButton
+      class="submit-btn"
+      :loading="isUpdating"
+      theme="primary"
+      @click="handleSubmit">
+      {{ t('保存') }}
+    </BkButton>
+  </div>
+</template>
+
+<script setup lang="tsx">
+  import { useI18n } from 'vue-i18n';
+  import { useRequest } from 'vue-request';
+
+  import { getBizSettingList, updateBizSetting } from '@services/source/bizSetting';
+
+  import { useGlobalBizs } from '@stores';
+
+  import MemberSelector from '@components/db-member-selector/index.vue';
+
+  import { messageSuccess } from '@utils';
+
+  const { t } = useI18n();
+
+  const formRef = useTemplateRef('formRef');
+  const globalBizsStore = useGlobalBizs();
+
+  const isCooperationOpen = ref(false);
+
+  const formModel = reactive({
+    members: [],
+  });
+
+  // 是否开启单据协助
+  useRequest(getBizSettingList, {
+    onSuccess: (data) => {
+      isCooperationOpen.value = data.BIZ_ASSISTANCE_SWITCH;
+    },
+    defaultParams: [
+      {
+        bk_biz_id: globalBizsStore.currentBizId,
+        key: 'BIZ_ASSISTANCE_SWITCH',
+      },
+    ],
+  });
+
+  // 获取默认协作人
+  useRequest(getBizSettingList, {
+    onSuccess: (data) => {
+      formModel.members = data.BIZ_ASSISTANCE_VARS || [];
+    },
+    defaultParams: [
+      {
+        bk_biz_id: globalBizsStore.currentBizId,
+        key: 'BIZ_ASSISTANCE_VARS',
+      },
+    ],
+  });
+
+  const { runAsync: runUpdate, loading: isUpdating } = useRequest(updateBizSetting, {
+    manual: true,
+    onSuccess: () => {
+      messageSuccess(t('保存成功'));
+    },
+  });
+
+  const handleSubmit = async () => {
+    if (isCooperationOpen.value) {
+      await formRef.value!.validate();
+    }
+    Promise.all([
+      runUpdate({
+        bk_biz_id: globalBizsStore.currentBizId,
+        key: 'BIZ_ASSISTANCE_SWITCH',
+        value: isCooperationOpen.value,
+      }),
+      runUpdate({
+        bk_biz_id: globalBizsStore.currentBizId,
+        key: 'BIZ_ASSISTANCE_VARS',
+        value: formModel.members,
+      }),
+    ]);
+  };
+</script>
+
+<style scoped lang="less">
+  .ticket-cooperation-setting {
+    .submit-btn {
+      width: 88px;
+      margin-top: 16px;
+    }
+  }
+</style>

dbm-ui/frontend/src/views/ticket-cooperation-setting/routes.ts

@@ -0,0 +1,30 @@
+/*
+ * TencentBlueKing is pleased to support the open source community by making 蓝鲸智云-DB管理系统(BlueKing-BK-DBM) available.
+ *
+ * Copyright (C) 2017-2023 THL A29 Limited, a Tencent company. All rights reserved.
+ *
+ * Licensed under the MIT License (the "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed
+ * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for
+ * the specific language governing permissions and limitations under the License.
+ */
+import { checkDbConsole } from '@utils';
+
+import { t } from '@locales/index';
+
+const routes = [
+  {
+    name: 'TicketCooperationSetting',
+    path: 'ticket-cooperation-setting',
+    meta: {
+      navName: t('单据免审批设置'),
+    },
+    component: () => import('@views/ticket-cooperation-setting/Index.vue'),
+  },
+];
+
+export default function getRoutes() {
+  return checkDbConsole('bizConfigManage.ticketCooperationSetting') ? routes : [];
+}

dbm-ui/frontend/src/views/tickets/common/components/flow-content/Index.vue

@@ -40,13 +40,6 @@
       :data="item"
       href-target="_blank" />
   </template>
-  <!-- 人工确认 -->
-  <template v-else-if="content.status === 'PENDING' && content.flow_type === 'PAUSE'">
-    <I18nT keypath="等待C确认是否执行T">
-      <span>{{ ticketData.creator === 'system' ? content.details.operators?.join(' , ') : ticketData.creator }}</span>
-      <span>{{ manualNexFlowDisaply }}</span>
-    </I18nT>
-  </template>
   <template v-else-if="isPause && isTodos === false">
     <div
       v-for="(todosItem, index) in content.todos"
@@ -255,7 +248,6 @@
   interface Props {
     ticketData: TicketModel<unknown>;
     content: FlowItem;
-    flows?: FlowItem[];
     isTodos?: boolean;
   }
 
@@ -274,16 +266,6 @@
     retryLoading: false,
   });
 
-  const manualNexFlowDisaply = computed(() => {
-    if (props.flows.length > 0) {
-      const manualIndex = props.flows.findIndex((item) => item.flow_type === 'PAUSE');
-      if (manualIndex > -1) {
-        return props.flows[manualIndex + 1].flow_type_display;
-      }
-    }
-    return '';
-  });
-
   const isPause = computed(() => {
     const { content } = props;
     return content.status === 'RUNNING' && content.flow_type === 'PAUSE';