feat(frontend): 单据管理迭代_6 TencentBlueKing#7190

hLinx · Dec 4, 2024 · 6d41365 · 6d41365
1 parent 1688abc
commit 6d41365
Show file tree

Hide file tree

Showing 10 changed files with 149 additions and 38 deletions.
diff --git a/dbm-ui/frontend/src/services/http/lib/request.ts b/dbm-ui/frontend/src/services/http/lib/request.ts
@@ -48,18 +48,11 @@ if (axios.interceptors.response.handlers.length < 1) {
 const { CancelToken } = axios;
 const CSRF_TOKEN_KEY = 'dbm_csrftoken';
 
-const csrfHashCode = (key: string) => {
-  let hashCode = 5381;
-  for (let i = 0; i < key.length; i++) {
-    hashCode += (hashCode << 5) + key.charCodeAt(i);
-  }
-  return hashCode & 0x7fffffff;
-};
 const CSRFToken = Cookie.get(CSRF_TOKEN_KEY);
 
 axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 if (CSRFToken !== undefined) {
-  axios.defaults.headers.common['X-CSRFToken'] = csrfHashCode(CSRFToken);
+  axios.defaults.headers.common['X-CSRFToken'] = CSRFToken;
 } else {
   console.warn('Can not find csrftoken in document.cookie');
 }

diff --git a/dbm-ui/frontend/src/services/source/ticketFlow.ts b/dbm-ui/frontend/src/services/source/ticketFlow.ts
@@ -31,16 +31,16 @@ export function revokeTicket(params: { ticket_ids: number[] }) {
   return http.post(`${path}/revoke_ticket/`, params);
 }
 
-// 单据流程重试
-export function retryFlow(params: { id: number; flow_id: number }) {
-  return http.post(`${path}/${params.id}/retry_flow/`, { flow_id: params.flow_id });
-}
-
 // 单据流程终止
 export function revokeFlow(params: { id: number; flow_id: number }) {
   return http.post(`${path}/${params.id}/revoke_flow/`, { flow_id: params.flow_id });
 }
 
+// 单据流程重试
+export function retryFlow(params: { id: number; flow_id: number }) {
+  return http.post(`${path}/${params.id}/retry_flow/`, { flow_id: params.flow_id });
+}
+
 export function processTodo(params: { id: number; todo_id: number; action: string; params: Record<string, any> }) {
   const realParams = { ...params } as { id?: number };
   delete realParams.id;

diff --git a/dbm-ui/frontend/src/views/ticket-center/common/action-confirm/ProcessFailedTerminate.vue b/dbm-ui/frontend/src/views/ticket-center/common/action-confirm/ProcessFailedTerminate.vue
@@ -0,0 +1,96 @@
+<template>
+  <DbPopconfirm
+    :confirm-handler="handleTerminate"
+    placement="bottom"
+    :title="t('单据终止确认')"
+    trigger="click"
+    :width="400">
+    <slot />
+    <template #content>
+      <div style="font-size: 12px; color: #63656e">
+        <div>
+          {{ t('操作：') }}
+          <BkTag
+            class="mr-4"
+            theme="danger"
+            type="stroke">
+            {{ t('终止单据') }}
+          </BkTag>
+          <span>{{ t('终止后，单据将作废处理') }}</span>
+        </div>
+        <BkForm
+          ref="terminateForm"
+          class="mt-14"
+          form-type="vertical"
+          :model="terminateFormMode">
+          <BkFormItem
+            :label="t('备注')"
+            property="remark"
+            required>
+            <BkInput
+              v-model="terminateFormMode.remark"
+              :maxlength="100"
+              :rows="3"
+              type="textarea" />
+          </BkFormItem>
+        </BkForm>
+      </div>
+    </template>
+  </DbPopconfirm>
+</template>
+<script setup lang="ts">
+  import { ref, useTemplateRef } from 'vue';
+  import { useI18n } from 'vue-i18n';
+
+  import FlowMode from '@services/model/ticket/flow';
+  import TicketModel from '@services/model/ticket/ticket';
+  import { revokeFlow, revokeTicket } from '@services/source/ticketFlow';
+
+  import { useEventBus } from '@hooks';
+
+  import { messageSuccess } from '@utils';
+
+  interface Props {
+    data: TicketModel;
+    flowData?: FlowMode;
+  }
+
+  const props = defineProps<Props>();
+
+  const { t } = useI18n();
+  const eventBus = useEventBus();
+
+  const terminateForm = useTemplateRef('terminateForm');
+
+  const terminateFormMode = reactive({
+    remark: '',
+  });
+  const isSubmitting = ref(false);
+
+  const handleTerminate = () => {
+    isSubmitting.value = true;
+    return terminateForm
+      .value!.validate()
+      .then(() => {
+        if (props.data) {
+          return revokeTicket({
+            ticket_ids: [props.data.id],
+          });
+        }
+        if (props.flowData) {
+          return revokeFlow({
+            id: props.data.id,
+            flow_id: props.flowData.id,
+          });
+        }
+        return Promise.reject();
+      })
+      .then(() => {
+        messageSuccess(t('操作成功'));
+        eventBus.emit('refreshTicketStatus');
+      })
+      .finally(() => {
+        isSubmitting.value = false;
+      });
+  };
+</script>
diff --git a/dbm-ui/frontend/src/views/ticket-center/common/action-confirm/ProcessResourceReplenish.vue b/dbm-ui/frontend/src/views/ticket-center/common/action-confirm/ProcessResourceReplenish.vue
@@ -13,7 +13,7 @@
           class="mr-4"
           theme="success"
           type="stroke">
-          {{ t('确认执行') }}
+          {{ t('重试') }}
         </BkTag>
         <span>{{ t('重试后，单据将再次尝试申请资源') }}</span>
       </div>
@@ -53,6 +53,9 @@
           return batchProcessTicket({
             action: 'APPROVE',
             ticket_ids: [props.data.id],
+            params: {
+              remark: '确认补货',
+            },
           });
         }
         if (props.todoData) {
@@ -61,6 +64,9 @@
             operations: [
               {
                 todo_id: props.todoData.id,
+                params: {
+                  remark: '确认补货',
+                },
               },
             ],
           });

diff --git a/...ommon/ticket-detail/components/flow-info/components/flow-type-inner-flow/StatusFailed.vue b/...ommon/ticket-detail/components/flow-info/components/flow-type-inner-flow/StatusFailed.vue
@@ -31,13 +31,15 @@
             {{ t('失败重试') }}
           </BkButton>
         </ProcessRetry>
-        <ProcessTerminate :data="ticketDetail">
+        <ProcessFailedTerminate
+          :data="ticketDetail"
+          :flow-data="data">
           <BkButton
             class="ml-8 w-88"
             theme="danger">
             {{ t('终止') }}
           </BkButton>
-        </ProcessTerminate>
+        </ProcessFailedTerminate>
       </div>
     </template>
   </StatusFailed>
@@ -52,8 +54,8 @@
 
   import CostTimer from '@components/cost-timer/CostTimer.vue';
 
+  import ProcessFailedTerminate from '@views/ticket-center/common/action-confirm/ProcessFailedTerminate.vue';
   import ProcessRetry from '@views/ticket-center/common/action-confirm/ProcessRetry.vue';
-  import ProcessTerminate from '@views/ticket-center/common/action-confirm/ProcessTerminate.vue';
 
   import { utcTimeToSeconds } from '@utils';
 

diff --git a/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/CardMode.vue b/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/CardMode.vue
@@ -58,7 +58,7 @@
 
   const router = useRouter();
 
-  const { list: statusList, defaultStatus } = useStatusList();
+  const { list: statusList, defaultStatus: ticketStatus } = useStatusList();
 
   const { value: datePickerValue, shortcutsRange } = useDatePicker();
   const { value: searachSelectValue, searchSelectData } = useSearchSelect({
@@ -67,7 +67,7 @@
 
   const dataTableRef = useTemplateRef('list');
 
-  const ticketStatus = ref(defaultStatus.value);
+  // const ticketStatus = ref(defaultStatus.value);
 
   const ticektStatusName = computed(() => statusList.value.find((item) => item.id === ticketStatus.value)?.name);
 
@@ -79,7 +79,7 @@
       status: ticketStatus.value,
     });
 
-  watch(ticketStatus, () => {
+  const { pause: pauseTicketStatus, resume: resumeTicketStatus } = watch(ticketStatus, () => {
     dataTableRef.value!.fetchData();
     router.replace({
       params: {
@@ -89,7 +89,12 @@
   });
 
   onActivated(() => {
-    ticketStatus.value = defaultStatus.value;
+    // ticketStatus.value = defaultStatus.value;
+    resumeTicketStatus();
+  });
+
+  onDeactivated(() => {
+    pauseTicketStatus();
   });
 </script>
 <style lang="less">

diff --git a/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue b/dbm-ui/frontend/src/views/ticket-center/self-todo/components/list/components/TableMode.vue
@@ -95,7 +95,7 @@
   const { t } = useI18n();
   const currentInstance = getCurrentInstance();
 
-  const { list: statusList, defaultStatus } = useStatusList();
+  const { list: statusList, defaultStatus: ticketStatus } = useStatusList();
 
   const { getSearchParams, removeSearchParam } = useUrlSearch();
   const { splitScreen: stretchLayoutSplitScreen } = useStretchLayout();
@@ -117,7 +117,7 @@
     });
 
   const dataTableRef = useTemplateRef('dataTable');
-  const ticketStatus = ref(defaultStatus.value);
+  // const ticketStatus = ref(defaultStatus.value);
   const selectTicketIdList = shallowRef<TicketModel[]>([]);
   const isShowBatchOperation = ref(false);
   const selectTicketId = ref(0);
@@ -128,7 +128,7 @@
     ),
   );
 
-  watch(ticketStatus, () => {
+  const { pause: pauseTicketStatus, resume: resumeTicketStatus } = watch(ticketStatus, () => {
     dataTableRef.value!.fetchData();
     dataTableRef.value!.resetSelection();
     router.replace({
@@ -148,12 +148,14 @@
   };
 
   onActivated(() => {
-    ticketStatus.value = defaultStatus.value;
+    // ticketStatus.value = defaultStatus.value;
     selectTicketId.value = Number(route.query.selectId);
     removeSearchParam('selectId');
+    resumeTicketStatus();
   });
 
   onDeactivated(() => {
+    pauseTicketStatus();
     setTimeout(() => {
       if (currentInstance!.isUnmounted) {
         return;

diff --git a/.../views/ticket-center/self-todo/components/list/components/components/row-action/Index.vue b/.../views/ticket-center/self-todo/components/list/components/components/row-action/Index.vue
@@ -8,13 +8,13 @@
 
   import StatusApprove from './StatusApprove.vue';
   import StatusFailed from './StatusFailed.vue';
+  import StatusInnerTodo from './StatusInnerTodo.vue';
   import StatusResourceReplenish from './StatusResourceReplenish.vue';
-  import StatusRunning from './StatusRunning.vue';
   import StatusTodo from './StatusTodo.vue';
 
   interface Props {
     ticketStatus: string;
-    data: TicketModel<unknown>;
+    data: TicketModel;
   }
 
   const props = defineProps<Props>();
@@ -24,7 +24,7 @@
     [TicketModel.STATUS_APPROVE]: StatusApprove,
     [TicketModel.STATUS_RESOURCE_REPLENISH]: StatusResourceReplenish,
     [TicketModel.STATUS_FAILED]: StatusFailed,
-    [TicketModel.STATUS_RUNNING]: StatusRunning,
+    [TicketModel.STATUS_INNER_TODO]: StatusInnerTodo,
   };
 
   const renderCom = comMap[props.ticketStatus];

diff --git a/...s/components/row-action/StatusRunning.vue → ...components/row-action/StatusInnerTodo.vue b/...s/components/row-action/StatusRunning.vue → ...components/row-action/StatusInnerTodo.vue
diff --git a/...ntend/src/views/ticket-center/self-todo/components/list/components/hooks/useStatusList.ts b/...ntend/src/views/ticket-center/self-todo/components/list/components/hooks/useStatusList.ts
@@ -1,13 +1,13 @@
 import _ from 'lodash';
-import { computed, watchEffect } from 'vue';
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
 
 import TicketModel from '@services/model/ticket/ticket';
 
 import { useTicketCount } from '@hooks';
 
-export default () => {
+const create = () => {
   const { t } = useI18n();
   const { data: ticketCount } = useTicketCount();
 
@@ -43,17 +43,24 @@ export default () => {
     },
   ]);
 
-  watchEffect(() => {
-    const routeParamsStatus = String(route.params.status);
-    if (routeParamsStatus && _.find(list.value, (item) => item.id === routeParamsStatus)) {
-      defaultStatus.value = routeParamsStatus;
-    } else {
-      defaultStatus.value = _.find(list.value, (item) => item.count > 0)?.id ?? TicketModel.STATUS_APPROVE;
-    }
-  });
+  const routeParamsStatus = String(route.params.status);
+  if (routeParamsStatus && _.find(list.value, (item) => item.id === routeParamsStatus)) {
+    defaultStatus.value = routeParamsStatus;
+  } else {
+    defaultStatus.value = _.find(list.value, (item) => item.count > 0)?.id ?? TicketModel.STATUS_APPROVE;
+  }
 
   return {
     list,
     defaultStatus,
   };
 };
+
+let context: ReturnType<typeof create> | undefined;
+export default () => {
+  if (!context) {
+    context = create();
+  }
+
+  return context;
+};