✨ 前端支持禁用团队、项目，代码库登记支持ssh_url

web/packages/tca-analysis/src/components/delete-modal/index.tsx

@@ -0,0 +1,106 @@
+// Copyright (c) 2021-2022 THL A29 Limited
+//
+// This source code file is made available under MIT License
+// See LICENSE for details
+// ==============================================================================
+
+/**
+ * 确认删除操作弹框
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Input, message, Button } from 'coding-oa-uikit';
+import { t } from '@src/i18n/i18next';
+
+import s from './style.scss';
+
+interface DeleteModalProps {
+  actionType: string;
+  objectType: string;
+  confirmName: string;
+  visible: boolean;
+  addtionInfo?: string;
+  onCancel: () => void;
+  onOk: () => void;
+}
+
+const DeleteModal = ({ actionType, objectType, confirmName, addtionInfo='', visible, onCancel, onOk }: DeleteModalProps) => {
+  const [form] = Form.useForm();
+  const [confirmed, setConfirmed] = useState<boolean>(true);
+
+  useEffect(() => {
+    visible && form.resetFields();
+    visible && setConfirmed(false);
+  }, [visible]);
+
+  /**
+   * 表单提交操作
+   * @param formData 参数
+   */
+  const onSubmitHandle = () => {
+    form.validateFields().then((formData) => {
+      if (formData?.confirm === confirmName) {
+        onOk();
+      } else {
+        message.error(t('验证失败，请重新输入'));
+      }
+    });
+  };
+
+  const checkConfirm = (changedValues: any) => {
+    if (changedValues?.confirm === confirmName) {
+      setConfirmed(true);
+    } else {
+      setConfirmed(false);
+    }
+  };
+
+  return (
+    <Modal
+      title={`${actionType}${objectType}`}
+      visible={visible}
+      onCancel={onCancel}
+      className={s.deleteModal}
+      footer={[
+        <Button
+          key="submit"
+          type="primary"
+          disabled={!confirmed}
+          danger
+          onClick={onSubmitHandle}
+        >
+          {t('确认')}{actionType}
+        </Button>,
+        <Button
+          key="back"
+          className="cancle-btn"
+          onClick={onCancel}
+        >
+          {t('取消')}
+        </Button>,
+      ]}
+    >
+      <p className={s.warningMessage}>
+            {t('您正在')}{actionType}{objectType} <span className={s.confirmText}>{confirmName}</span>{' '}<br/>
+      </p>
+      {addtionInfo && <p className={s.warningMessage}>{addtionInfo}</p>}
+      <p className={s.confirmMessage}>{t(`为确认${actionType}操作，请输入您要${actionType}的`)}{objectType}</p>
+      <Form
+        layout="vertical"
+        form={form}
+        onValuesChange={checkConfirm}
+      >
+        <Form.Item
+          label=''
+          name="confirm"
+          rules={[{ required: true, message: t('必须输入确认信息！') }]}
+          className={s.confirmInput}
+        >
+          <Input placeholder={confirmName} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default DeleteModal;

web/packages/tca-analysis/src/components/delete-modal/style.scss

@@ -0,0 +1,21 @@
+.delete-modal {
+
+  .warning-message {
+    margin-bottom: 20px;
+  }
+
+  .confirm-message {
+    margin-bottom: 8px;
+    font-weight: 600;
+  }
+
+  .confirm-text {
+    background-color: #ebedf1;
+    font-weight: 500;
+    padding: 0 6px;
+  }
+
+  .confirm-input {
+    margin-bottom: 0px;
+  }
+}

web/packages/tca-analysis/src/modules/project-team/overview/index.tsx

@@ -5,14 +5,17 @@
 // ==============================================================================
 
 import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import { Form, Button, Input, message } from 'coding-oa-uikit';
-import { pick } from 'lodash';
+import { pick, get, find } from 'lodash';
+import { useSelector } from 'react-redux';
 
 // 项目内
+import { getProjectListRouter, getProjectOverviewRouter } from '@src/utils/getRoutePath';
 import { t } from '@src/i18n/i18next';
 import { formatDateTime, getUserName } from '@src/utils';
-import { getProjectTeam, putProjectTeam } from '@src/services/common';
+import { getProjectTeam, putProjectTeam, disableProject} from '@src/services/common';
+import DeleteModal from '@src/components/delete-modal';
 
 const layout = {
   labelCol: { span: 6 },
@@ -23,6 +26,14 @@ const Overview = () => {
   const [team, setTeam] = useState<any>({});
   const [edit, setEdit] = useState(false);
   const { org_sid: orgSid, team_name: teamName }: any = useParams();
+  // 判断是否有权限删除团队项目
+  const history: any = useHistory();
+  const APP = useSelector((state: any) => state.APP);
+  const isSuperuser = get(APP, 'user.is_superuser', false); // 当前用户是否是超级管理员
+  const userName = get(APP, 'user.username', null);
+  const isAdmin = !!find(team?.admins, { username: userName });  // 当前用户是否是项目管理员
+  const deletable = isAdmin || isSuperuser;  // 删除权限
+  const [deleteVisible, setDeleteVisible] = useState<boolean>(false);
 
   // 重置
   const onReset = () => {
@@ -39,6 +50,9 @@ const Overview = () => {
       message.success(t('项目信息更新成功'));
       setTeam(response);
       onReset();
+      if (values.name !== teamName) {
+        history.replace(getProjectOverviewRouter(orgSid, values.name));
+      }
     });
   };
 
@@ -55,8 +69,28 @@ const Overview = () => {
     }
   }, [orgSid, teamName]);
 
+  const handleDeleteTeam = () => {
+    disableProject(orgSid, teamName, {status: 2}).then(() => {
+      message.success('项目已禁用');
+      history.push(getProjectListRouter(orgSid));
+    }).finally(() => setDeleteVisible(false));
+  };
+
+  const onDelete = () => {
+    setDeleteVisible(true);
+  };
+
   return (
     <div className="pa-lg">
+      <DeleteModal
+        actionType={t('禁用')}
+        objectType={t('项目')}
+        addtionInfo={t('后续如需恢复项目，请联系平台管理员在管理后台恢复')}
+        confirmName={teamName}
+        visible={deleteVisible}
+        onCancel={() => setDeleteVisible(false)}
+        onOk={handleDeleteTeam}
+      />
       <h3 className="mb-md">{t('项目概览')}</h3>
       <Form
         {...layout}
@@ -65,7 +99,10 @@ const Overview = () => {
         initialValues={team}
         onFinish={values => onFinish(values)}
       >
-        <Form.Item label={t('项目唯一标识')} name="name">
+        <Form.Item
+          label={t('项目唯一标识')}
+          name="name"
+        >
           <span>{team.name}</span>
         </Form.Item>
         <Form.Item
@@ -105,6 +142,9 @@ const Overview = () => {
               {t('编辑')}
             </Button>
           )}
+          {deletable && <Button className="ml-12" htmlType="button" onClick={onDelete} danger type='primary'>
+            {t('禁用项目')}
+          </Button>}
         </div>
       </Form>
     </div>