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 { 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,68 +67,66 @@ 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>
{value.map((tag, index) => {
if (editInputIndex === index) {
return (
<Input
ref={editInputRef}
key={tag}
size="small"
style={tagInputStyle}
value={editInputValue}
onChange={handleEditInputChange}
onBlur={handleEditInputConfirm}
onPressEnter={handleEditInputConfirm}
/>
);
}
const isLongTag = tag.text.length > 20;
const tagElem = (
<Tag
key={tag.text}
closable
style={{
userSelect: 'none',
display: 'flex',
alignItems: 'center',
<Space size={[0, 8]} wrap style={{ paddingTop: 4, justifyContent: 'flex-start' }}>
{value.map((tag, index) => {
if (editInputIndex === index) {
return (
<Input
ref={editInputRef}
key={tag}
size="small"
style={tagInputStyle}
value={editInputValue}
onChange={handleEditInputChange}
onBlur={handleEditInputConfirm}
onPressEnter={handleEditInputConfirm}
/>
);
}
const isLongTag = tag.text.length > 20;
const tagElem = (
<Tag
key={tag.text}
closable
style={{
userSelect: 'none',
display: 'flex',
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
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();
}}
>
{isLongTag ? `${tag.text.slice(0, 20)}...` : tag.text}
</span>
</Tag>
);
return isLongTag ? (
<Tooltip title={tag.text} key={tag.text}>
{tagElem}
</Tooltip>
) : (
tagElem
);
})}
</Space>
{isLongTag ? `${tag.text.slice(0, 20)}...` : tag.text}
</span>
</Tag>
);
return isLongTag ? (
<Tooltip title={tag.text} key={tag.text}>
{tagElem}
</Tooltip>
) : (
tagElem
);
})}
{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
View file @ a691fa1a
......@@ -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
View file @ a691fa1a
......@@ -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,23 +403,38 @@ const Project = () => {
/>
</div>
<Avatar.Group>
{data?.user_info_list?.map((it, i) => {
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 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 !== '') {
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>
......@@ -460,8 +488,7 @@ const Project = () => {
{...provided.draggableProps}
hoverable
extra={
column?.items?.length === 0 &&
(
column?.items?.length === 0 && (
<Popconfirm
title="是否删除该流程？"
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