Skip to content

U
utools_web
Commit a691fa1a authored by wuhao's avatar wuhao 🎯
Browse files
Options

asder

parent 6d7189c8
Hide whitespace changes
Inline Side-by-side
Showing with 183 additions and 91 deletions
src/components/DragModal/Tagadder/index.jsx
View file @ a691fa1a
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons'; 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 { useRef } from 'react';
import ColorPicker from './colorpicker'; import ColorPicker from './colorpicker';
...@@ -32,7 +32,7 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max } ...@@ -32,7 +32,7 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max }
setInputValue(e.target.value); setInputValue(e.target.value);
}; };
const handleInputConfirm = () => { const handleInputConfirm = () => {
if (inputValue && value.indexOf(inputValue) === -1) { if (inputValue && value?.map((it) => it.text).indexOf(inputValue) === -1) {
onChange([ onChange([
...value, ...value,
{ {
...@@ -40,6 +40,8 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max } ...@@ -40,6 +40,8 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max }
text: inputValue, text: inputValue,
}, },
]); ]);
} else {
message.warning('已存在的标签名！');
} }
setInputVisible(false); setInputVisible(false);
setInputValue(''); setInputValue('');
...@@ -65,68 +67,66 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max } ...@@ -65,68 +67,66 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max }
borderStyle: 'dashed', borderStyle: 'dashed',
}; };
return ( return (
<Space size={[0, 8]} wrap style={{ paddingTop: 4 }}> <Space size={[0, 8]} wrap style={{ paddingTop: 4, justifyContent: 'flex-start' }}>
<Space size={[0, 8]} wrap> {value.map((tag, index) => {
{value.map((tag, index) => { if (editInputIndex === index) {
if (editInputIndex === index) { return (
return ( <Input
<Input ref={editInputRef}
ref={editInputRef} key={tag}
key={tag} size="small"
size="small" style={tagInputStyle}
style={tagInputStyle} value={editInputValue}
value={editInputValue} onChange={handleEditInputChange}
onChange={handleEditInputChange} onBlur={handleEditInputConfirm}
onBlur={handleEditInputConfirm} onPressEnter={handleEditInputConfirm}
onPressEnter={handleEditInputConfirm} />
/> );
); }
} const isLongTag = tag.text.length > 20;
const isLongTag = tag.text.length > 20; const tagElem = (
const tagElem = ( <Tag
<Tag key={tag.text}
key={tag.text} closable
closable style={{
style={{ userSelect: 'none',
userSelect: 'none', display: 'flex',
display: 'flex', alignItems: 'center',
alignItems: 'center', }}
onClose={() => handleClose(tag.text)}
>
<ColorPicker
color={tag.color}
handleChange={(val) => {
let newval = JSON.parse(JSON.stringify(value));
newval = newval?.map((it, i) => {
if (index === i) {
it.color = val.hex;
}
return it;
});
onChange(newval);
}}
></ColorPicker>
<span
onDoubleClick={(e) => {
setEditInputIndex(index);
setEditInputValue(tag.text);
e.preventDefault();
}} }}
onClose={() => handleClose(tag.text)}
> >
<ColorPicker {isLongTag ? `${tag.text.slice(0, 20)}...` : tag.text}
color={tag.color} </span>
handleChange={(val) => { </Tag>
let newval = JSON.parse(JSON.stringify(value)); );
newval = newval?.map((it, i) => { return isLongTag ? (
if (index === i) { <Tooltip title={tag.text} key={tag.text}>
it.color = val.hex; {tagElem}
} </Tooltip>
return it; ) : (
}); tagElem
onChange(newval); );
}} })}
></ColorPicker>
<span
onDoubleClick={(e) => {
setEditInputIndex(index);
setEditInputValue(tag.text);
e.preventDefault();
}}
>
{isLongTag ? `${tag.text.slice(0, 20)}...` : tag.text}
</span>
</Tag>
);
return isLongTag ? (
<Tooltip title={tag.text} key={tag.text}>
{tagElem}
</Tooltip>
) : (
tagElem
);
})}
</Space>
{inputVisible ? ( {inputVisible ? (
<Input <Input
ref={inputRef} ref={inputRef}
...@@ -141,7 +141,7 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max } ...@@ -141,7 +141,7 @@ const Tagadder = ({ value = [{ color: '#13c2c2', text: '123' }], onChange, max }
) : ( ) : (
value.length < max && ( value.length < max && (
<Tag style={tagPlusStyle} onClick={showInput}> <Tag style={tagPlusStyle} onClick={showInput}>
<PlusOutlined /> New Tag <PlusOutlined /> 新建标签
</Tag> </Tag>
) )
)} )}
......
src/components/DragModal/formdoms.jsx
View file @ a691fa1a
...@@ -390,16 +390,27 @@ const AddMission = ({ refresh, step_id, sort, project_id, defaultValue, userList ...@@ -390,16 +390,27 @@ const AddMission = ({ refresh, step_id, sort, project_id, defaultValue, userList
}; };
})} })}
></ProFormSelect> ></ProFormSelect>
<ProForm.Item
name={'tags'} <ProFormSelect
label={'添加标签'} name="tags"
label="选择标签"
mode="multiple"
colProps={{ colProps={{
span: 18, span: 18,
}} }}
style={{paddingLeft:6}} mode="tags"
> request={async () => {
<Tagadder max={5}/> let res = await getFetch({ url: '/webtool/v1/tag', params: { project_id } });
</ProForm.Item> return res?.data?.map((it, i) => {
return {
label: it?.tag_name,
value: it?.id,
};
});
}}
placeholder="请选择"
rules={[{ required: true, message: '请选择选择标签!' }]}
/>
<ProForm.Item <ProForm.Item
// convertValue={(value) => { // convertValue={(value) => {
...@@ -419,6 +430,60 @@ const AddMission = ({ refresh, step_id, sort, project_id, defaultValue, userList ...@@ -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 AddSteps = ({ refresh, columns, id }) => {
const formRef = useRef(); const formRef = useRef();
return ( return (
...@@ -482,4 +547,4 @@ const AddSteps = ({ refresh, columns, id }) => { ...@@ -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
View file @ a691fa1a
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
PlayCircleFilled, PlayCircleFilled,
PlusOutlined, PlusOutlined,
RedoOutlined, RedoOutlined,
TagOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { history, useLocation } from '@umijs/max'; import { history, useLocation } from '@umijs/max';
import { useRequest } from 'ahooks'; import { useRequest } from 'ahooks';
...@@ -28,7 +29,7 @@ import dayjs from 'dayjs'; ...@@ -28,7 +29,7 @@ import dayjs from 'dayjs';
import _ from 'lodash'; import _ from 'lodash';
import { useState } from 'react'; import { useState } from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; 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 './index.less';
import QuoteList from './QuoteList'; import QuoteList from './QuoteList';
...@@ -322,6 +323,18 @@ const Project = () => { ...@@ -322,6 +323,18 @@ const Project = () => {
}} }}
/> />
)} )}
{modal?.title === '管理标签' && (
<AddTags
project_id={id}
refresh={() => {
run();
setmodal((s) => ({
...s,
open: false,
}));
}}
/>
)}
</Modal> </Modal>
<div <div
className="center bglight" className="center bglight"
...@@ -390,23 +403,38 @@ const Project = () => { ...@@ -390,23 +403,38 @@ const Project = () => {
/> />
</div> </div>
<Avatar.Group> <div className="center" style={{ gap: 12 }}>
{data?.user_info_list?.map((it, i) => { <Button
if (it?.head_url && it?.head_url !== '') { icon={<TagOutlined />}
return ( type="text"
<Tooltip title={it?.user_name} key={i}> ghost
<Avatar src={it?.head_url} /> size="30px"
</Tooltip> onClick={() => {
); setmodal((s) => ({
} else { ...s,
return ( title: '管理标签',
<Tooltip title={it?.user_name} key={i}> open: true,
<Avatar>{it?.user_name?.charAt(0)}</Avatar> }));
</Tooltip> }}
); ></Button>
} <Avatar.Group>
})} {data?.user_info_list?.map((it, i) => {
</Avatar.Group> if (it?.head_url && it?.head_url !== '') {
return (
<Tooltip title={it?.user_name} key={i}>
<Avatar src={it?.head_url} />
</Tooltip>
);
} else {
return (
<Tooltip title={it?.user_name} key={i}>
<Avatar>{it?.user_name?.charAt(0)}</Avatar>
</Tooltip>
);
}
})}
</Avatar.Group>
</div>
</> </>
)} )}
</div> </div>
...@@ -460,8 +488,7 @@ const Project = () => { ...@@ -460,8 +488,7 @@ const Project = () => {
{...provided.draggableProps} {...provided.draggableProps}
hoverable hoverable
extra={ extra={
column?.items?.length === 0 && column?.items?.length === 0 && (
(
<Popconfirm <Popconfirm
title="是否删除该流程？" title="是否删除该流程？"
placement="bottomRight" placement="bottomRight"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment