asder

src/components/DragModal/Tagadder/index.jsx

 import { useEffect, useState } from 'react';
 
 import { PlusOutlined } from '@ant-design/icons';
-import { Input, Space, Tag, theme, Tooltip } from 'antd';
+import { Input, message, Space, Tag, theme, Tooltip } from 'antd';
 import { useRef } from 'react';
 import ColorPicker from './colorpicker';
 
@@ -32,7 +32,7 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max }
     setInputValue(e.target.value);
   };
   const handleInputConfirm = () => {
-    if (inputValue && value.indexOf(inputValue) === -1) {
+    if (inputValue && value?.map((it) => it.text).indexOf(inputValue) === -1) {
       onChange([
         ...value,
         {
@@ -40,6 +40,8 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max }
           text: inputValue,
         },
       ]);
+    } else {
+      message.warning('已存在的标签名！');
     }
     setInputVisible(false);
     setInputValue('');
@@ -65,8 +67,7 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max }
     borderStyle: 'dashed',
   };
   return (
-    <Space size={[0, 8]} wrap style={{ paddingTop: 4 }}>
-      <Space size={[0, 8]} wrap>
+    <Space size={[0, 8]} wrap style={{ paddingTop: 4, justifyContent: 'flex-start' }}>
       {value.map((tag, index) => {
         if (editInputIndex === index) {
           return (
@@ -126,7 +127,6 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max }
           tagElem
         );
       })}
-      </Space>
       {inputVisible ? (
         <Input
           ref={inputRef}
@@ -141,7 +141,7 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max }
       ) : (
         value.length < max && (
           <Tag style={tagPlusStyle} onClick={showInput}>
-            <PlusOutlined /> New Tag
+            <PlusOutlined /> 新建标签
           </Tag>
         )
       )}

src/components/DragModal/formdoms.jsx

@@ -390,16 +390,27 @@ const AddMission = ({ refresh, step_id, sort, project_id, defaultValue, userList
           };
         })}
       ></ProFormSelect>
-      <ProForm.Item
-        name={'tags'}
-        label={'添加标签'}
+
+      <ProFormSelect
+        name="tags"
+        label="选择标签"
+        mode="multiple"
         colProps={{
           span: 18,
         }}
-        style={{paddingLeft:6}}
-      >
-        <Tagadder max={5}/>
-      </ProForm.Item>
+        mode="tags"
+        request={async () => {
+          let res = await getFetch({ url: '/webtool/v1/tag', params: { project_id } });
+          return res?.data?.map((it, i) => {
+            return {
+              label: it?.tag_name,
+              value: it?.id,
+            };
+          });
+        }}
+        placeholder="请选择"
+        rules={[{ required: true, message: '请选择选择标签!' }]}
+      />
 
       <ProForm.Item
         // convertValue={(value) => {
@@ -419,6 +430,60 @@ const AddMission = ({ refresh, step_id, sort, project_id, defaultValue, userList
   );
 };
 
+const AddTags = ({ refresh, step_id, sort, project_id, defaultValue, userList, enddate }) => {
+  return (
+    <ProForm
+      initialValues={defaultValue}
+      layout={'vertical'}
+      style={{ marginTop: 24 }}
+      grid={true}
+      colProps={{
+        span: 24,
+      }}
+      submitter={{
+        render: false,
+      }}
+      onValuesChange={(changedvalue, allvalue) => {
+        const params = {
+          tags: changedvalue.tags?.map((it, i) => ({
+            ...it,
+            project_id,
+            tag_name: it?.text,
+          })),
+        };
+
+        doFetch({ url: '/webtool/v1/mutitag', params: { ...params } }).then((res) => {
+          console.log('====================================');
+          console.log(res);
+          console.log('====================================');
+        });
+      }}
+      request={async () => {
+        let alldata = await getFetch({ url: '/webtool/v1/tag', params: { project_id } });
+        return {
+          tags: alldata?.data
+            ? alldata?.data?.map((it) => ({
+                ...it,
+                text: it.tag_name,
+              }))
+            : [],
+        };
+      }}
+    >
+      <ProForm.Item
+        name={'tags'}
+        label={'添加标签'}
+        colProps={{
+          span: 24,
+        }}
+        style={{ paddingLeft: 6 }}
+      >
+        <Tagadder max={50} />
+      </ProForm.Item>
+    </ProForm>
+  );
+};
+
 const AddSteps = ({ refresh, columns, id }) => {
   const formRef = useRef();
   return (
@@ -482,4 +547,4 @@ const AddSteps = ({ refresh, columns, id }) => {
   );
 };
 
-export { Add, Join, AddPro, AddMission, AddSteps };
+export { Add, Join, AddPro, AddMission, AddTags, AddSteps };

src/pages/project/index.jsx

@@ -9,6 +9,7 @@ import {
   PlayCircleFilled,
   PlusOutlined,
   RedoOutlined,
+  TagOutlined,
 } from '@ant-design/icons';
 import { history, useLocation } from '@umijs/max';
 import { useRequest } from 'ahooks';
@@ -28,7 +29,7 @@ import dayjs from 'dayjs';
 import _ from 'lodash';
 import { useState } from 'react';
 import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
-import { AddSteps } from '../../components/DragModal/formdoms';
+import { AddSteps, AddTags } from '../../components/DragModal/formdoms';
 import './index.less';
 import QuoteList from './QuoteList';
 
@@ -322,6 +323,18 @@ const Project = () => {
             }}
           />
         )}
+        {modal?.title === '管理标签' && (
+          <AddTags
+            project_id={id}
+            refresh={() => {
+              run();
+              setmodal((s) => ({
+                ...s,
+                open: false,
+              }));
+            }}
+          />
+        )}
       </Modal>
       <div
         className="center bglight"
@@ -390,6 +403,20 @@ const Project = () => {
               />
             </div>
 
+            <div className="center" style={{ gap: 12 }}>
+              <Button
+                icon={<TagOutlined />}
+                type="text"
+                ghost
+                size="30px"
+                onClick={() => {
+                  setmodal((s) => ({
+                    ...s,
+                    title: '管理标签',
+                    open: true,
+                  }));
+                }}
+              ></Button>
               <Avatar.Group>
                 {data?.user_info_list?.map((it, i) => {
                   if (it?.head_url && it?.head_url !== '') {
@@ -407,6 +434,7 @@ const Project = () => {
                   }
                 })}
               </Avatar.Group>
+            </div>
           </>
         )}
       </div>
@@ -460,8 +488,7 @@ const Project = () => {
                         {...provided.draggableProps}
                         hoverable
                         extra={
-                          column?.items?.length === 0 &&
-                          (
+                          column?.items?.length === 0 && (
                             <Popconfirm
                               title="是否删除该流程？"
                               placement="bottomRight"