Fix/fix group editmodal

clients/portal/modules/access-control/index.tsx

@@ -10,6 +10,7 @@ import GlobalHeader from '@portal/global-header';
 
 import RoleManagement from './role-management';
 import DepartmentsEmployees from './departments-employees';
+import ProjectGroup from './project-group';
 
 import './index.scss';
 
@@ -28,6 +29,13 @@ const MENU = [
     url: '/access-control/role-management',
     authority: 'accessControl/role/read',
   },
+  {
+    id: 'project-group',
+    icon: 'donut_small',
+    name: '项目组管理',
+    url: '/access-control/project-group',
+    authority: 'accessControl',
+  },
 ];
 
 export default function Index(): JSX.Element {
@@ -66,6 +74,7 @@ export default function Index(): JSX.Element {
             <Route exact path="/access-control" component={DepartmentsEmployees} />
             <Route path="/access-control/departments-employees" component={DepartmentsEmployees} />
             <Route path="/access-control/role-management" component={RoleManagement} />
+            <Route path="/access-control/project-group" component={ProjectGroup} />
             <Route component={() => <NotFoundError url='/access-control' classnames='main-content'/>}/>
           </Switch>
         </div>

clients/portal/modules/apps-management/project-group/api.ts → clients/portal/modules/access-control/project-group/api.ts

@@ -30,6 +30,10 @@ export type Project = {
   id: string,
   name: string;
   description?: string;
+  serialNumber?: string;
+  startAt?: number;
+  endAt?: number;
+  status?: string;
 }
 
 export function fetchProjectList(
@@ -38,10 +42,14 @@ export function fetchProjectList(
   return httpClient('/api/v1/form/project/m/list', params);
 }
 
-export async function createProject(data: {name: string, description: string}): Promise<{id: string}> {
+export async function createProject(data: Omit<Project, 'id'>): Promise<{id: string}> {
   return await httpClient('/api/v1/form/project/m/create', data);
 }
 
+export async function editProject(data: Project): Promise<void> {
+  return await httpClient('/api/v1/form/project/m/update', data);
+}
+
 export function associatePerson(
   params: AssociateParams,
 ): Promise<{ list: Project[], total: number; }> {

clients/portal/modules/apps-management/project-group/edit-project-modal.tsx → clients/portal/modules/access-control/project-group/edit-project-modal.tsx

@@ -1,14 +1,15 @@
 import React, { useEffect, useMemo } from 'react';
-import { Input, Form } from 'antd';
+import { Input, Form, DatePicker } from 'antd';
 import { observer } from 'mobx-react';
+import zhCN from 'antd/lib/date-picker/locale/zh_CN';
+import moment from 'moment';
 
-import toast from '@lib/toast';
 import Modal from '@c/modal';
 import Loading from '@c/loading';
 
 import store from './store';
 import ButtonField from './button-field';
-import { DISABLE_SPECIAL_SYMBOL_REG } from '../pages/entry/app-list/app-edit/created-edit-app';
+import { DISABLE_SPECIAL_SYMBOL_REG } from '../../apps-management/pages/entry/app-list/app-edit/created-edit-app';
 import { Project, ProjectWithPerson } from './api';
 
 type Props = {
@@ -53,8 +54,7 @@ function EditProjectModal({ modalType, project, onCancel }: Props): JSX.Element
   }, [user]);
 
   async function handleSubmit(): Promise<void> {
-    const { name, member, description } = form.getFieldsValue();
-
+    const { name, member, description, startAt, status, endAt, serialNumber } = form.getFieldsValue();
     const deletes: any[] = user.filter((item: { id: string; }) => {
       return !member.find((m: ProjectWithPerson) => m.id === item.id);
     }).map(({ id }: UserOrDept) => {
@@ -65,21 +65,26 @@ function EditProjectModal({ modalType, project, onCancel }: Props): JSX.Element
     }).map(({ id, ownerName }: EmployeeOrDepartmentOfRole) => {
       return { userID: id, userName: ownerName };
     });
-
+    const projectInfo = {
+      name,
+      description,
+      serialNumber,
+      status,
+      startAt: startAt?.valueOf(),
+      endAt: endAt?.valueOf(),
+    };
     if (modalType === 'create') {
-      store.createProject({ name, description }, { add: adds, removes: deletes }).then(() => {
+      store.createProject(projectInfo, { add: adds, removes: deletes }).then(() => {
         onCancel();
       });
       return;
     }
 
-    store.associatePerson( {
-      projectID: store?.curProject?.id || '',
-      projectName: name,
-      add: adds, removes: deletes }).then(() => {
-      toast.success('项目修改成功');
-      onCancel();
-    });
+    if (project && modalType === 'modify') {
+      store.editProject({ ...project, ...projectInfo }, { add: adds, removes: deletes }).then(() => {
+        onCancel();
+      });
+    }
   }
 
   return (
@@ -113,8 +118,12 @@ function EditProjectModal({ modalType, project, onCancel }: Props): JSX.Element
             form={form}
             initialValues={{
               name: project?.name || '',
-              description: project?.description || '',
+              serialNumber: project?.serialNumber || '',
+              status: project?.status || '',
               member: user as EmployeeOrDepartmentOfRole[],
+              description: project?.description || '',
+              startAt: project?.startAt ? moment(project?.startAt) : null,
+              endAt: project?.endAt ? moment(project?.startAt) : undefined,
             }}
           >
             <Form.Item
@@ -123,7 +132,7 @@ function EditProjectModal({ modalType, project, onCancel }: Props): JSX.Element
               rules={[
                 {
                   required: true,
-                  message: '请输入应用名称',
+                  message: '请输入项目名称',
                 },
                 {
                   pattern: /^((?!(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])).)*$/,
@@ -147,7 +156,27 @@ function EditProjectModal({ modalType, project, onCancel }: Props): JSX.Element
                 },
               ]}
             >
-              <Input placeholder="请输入项目名称" disabled= {isEdit}/>
+              <Input placeholder="请输入项目名称"/>
+            </Form.Item>
+            <Form.Item
+              name="serialNumber"
+              label='项目编号'
+              rules={[
+                {
+                  required: true,
+                  message: '请输入项目编码',
+                },
+                {
+                  max: 30,
+                  message: '项目编码不超过 30 字符，请修改！',
+                },
+                {
+                  pattern: /^[a-zA-Z]+([_]?[a-zA-Z0-9])*$/,
+                  message: '必须以字母开头,由字母、数字、单下划线组成',
+                },
+              ]}
+            >
+              <Input placeholder="请输入项目编号"/>
             </Form.Item>
             <Form.Item
               name="member"
@@ -158,12 +187,21 @@ function EditProjectModal({ modalType, project, onCancel }: Props): JSX.Element
             >
               <ButtonField value={user as EmployeeOrDepartmentOfRole[]}/>
             </Form.Item>
+            <Form.Item name="status" label='状态'>
+              <Input placeholder="请输入项目状态"/>
+            </Form.Item>
+            <Form.Item name='startAt' label="开始日期">
+              <DatePicker />
+            </Form.Item>
+            <Form.Item name='endAt' label="结束日期">
+              <DatePicker locale={zhCN}/>
+            </Form.Item>
             <Form.Item
               name="description"
               label="描述"
               rules={[{ max: 100, message: '输入超过 100 字符' }]}
             >
-              <TextArea placeholder="选填(不超过 100 字符)" disabled= {isEdit}/>
+              <TextArea placeholder="选填(不超过 100 字符)"/>
             </Form.Item>
           </Form>
         )}

clients/portal/modules/apps-management/project-group/store.ts → clients/portal/modules/access-control/project-group/store.ts

@@ -12,6 +12,7 @@ import {
   getAssociatePerson,
   ProjectWithPerson,
   deleteProject,
+  editProject,
 } from './api';
 
 class ProjectGroupStore {
@@ -68,18 +69,18 @@ class ProjectGroupStore {
 
   @action
   createProject = (
-    projectInfo: {name: string, description: string},
+    projectInfo: Omit<Project, 'id'>,
     person: Omit<AssociateParams, 'projectID'|'projectName'>,
   ): Promise<void> => {
     return createProject(projectInfo) .then(({ id }) => {
-      const { name, description } = projectInfo;
+      const { name } = projectInfo;
       this.associatePerson({
         projectID: id,
         projectName: name,
         ...person,
       }).then(() => {
         toast.success('项目创建成功');
-        this.projectList = [{ id, name, description }, ...this.projectList];
+        this.projectList = [{ id, ...projectInfo }, ...this.projectList];
       });
     }).catch((err) => {
       toast.error('项目保存失败: ', err.message);
@@ -88,9 +89,7 @@ class ProjectGroupStore {
 
   @action
   associatePerson = (params: AssociateParams): Promise<void> => {
-    return associatePerson(params) .then(() => {
-      // this.projectList = [params, ...this.projectList];
-      // this.currentFunc = { ..._createFuncParams, ...res, state: 'True' };
+    return associatePerson(params).then(() => {
     }).catch((err) => {
       toast.error('绑定: ', err.message);
     });
@@ -121,6 +120,33 @@ class ProjectGroupStore {
       toast.error('项目删除成功');
     });
   };
+
+  @action
+  editProject = (
+    projectInfo: Project,
+    person: Omit<AssociateParams, 'projectID' | 'projectName'>,
+  ): Promise<void> => {
+    return editProject(projectInfo) .then(() => {
+      const { name, id } = projectInfo;
+      this.associatePerson({
+        projectID: id,
+        projectName: name,
+        ...person,
+      }).then(() => {
+        this.projectList = this.projectList.map((project) => {
+          if (project.id === projectInfo.id) {
+            this.curProject = { ...project, ...projectInfo };
+            return { ...project, ...projectInfo };
+          }
+
+          return project;
+        });
+        toast.success('修改成功！');
+      });
+    }).catch((err) => {
+      toast.error('项目修改失败: ', err.message);
+    });
+  };
 }
 
 export default new ProjectGroupStore();

clients/portal/modules/apps-management/index.tsx

@@ -10,7 +10,6 @@ const OptionSet = React.lazy(() => import('../option-set'));
 const AppList = React.lazy(() => import('./pages/entry/app-list'));
 const AppTemplates = React.lazy(() => import('./pages/entry/app-templates'));
 const PageTemplates = React.lazy(() => import('./page-templates'));
-const ProjectGroup = React.lazy(() => import('./project-group'));
 
 const MENU = [
   {
@@ -41,13 +40,6 @@ const MENU = [
     url: '/apps/page-templates',
     authority: 'application/read',
   },
-  {
-    id: 'project-group',
-    icon: 'donut_small',
-    name: '项目组管理',
-    url: '/apps/project-group',
-    authority: 'application/read',
-  },
 ];
 
 function AppManagerEntry(): JSX.Element {
@@ -78,7 +70,6 @@ function AppManagerEntry(): JSX.Element {
           <Route path="/apps/option-set" component={OptionSet} />
           <Route path="/apps/app-templates" component={AppTemplates} />
           <Route path="/apps/page-templates" component={PageTemplates} />
-          <Route path="/apps/project-group" component={ProjectGroup} />
           <Route component={NotFoundError}/>
         </Switch>
       </div>