github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-11 18:42:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

新增列表模式

Browse Source
This commit is contained in:
kuaifan 2021-06-01 12:13:07 +08:00
parent 6040e7befd
commit 680c436df9
6 changed files with 557 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

497
resources/assets/js/pages/manage/components/project-list.vue
View File

@ -8,9 +8,17 @@
<div class="project-icobox">
<ul class="project-icons">
<li class="project-icon">
<Icon type="ios-search-outline" />
<Icon type="ios-add" />
</li>
<li class="project-icon" @click="$store.commit('toggleProjectChatShow');">
<li class="project-icon">
<Tooltip theme="light" :always="searchText!=''" transfer>
<Icon type="ios-search-outline" />
<div slot="content">
<Input v-model="searchText" placeholder="Search task..." clearable autofocus/>
</div>
</Tooltip>
</li>
<li class="project-icon" :class="{'active':$store.state.projectChatShow}" @click="$store.commit('toggleProjectChatShow')">
<Icon type="ios-chatbubbles-outline" />
<Badge :count="999"></Badge>
</li>
@ -19,18 +27,20 @@
</li>
</ul>
<div class="project-switch">
<div class="project-switch-button">
<div class="project-switch-img active">
<img src="../../../../statics/images/project-panel-blue.svg">
</div>
<div class="project-switch-img">
<img src="../../../../statics/images/project-menu-gray.svg">
</div>
<div class="project-switch-button" @click="$store.commit('toggleProjectListPanel')">
<template v-if="$store.state.projectListPanel">
<div class="project-switch-img active"><img src="../../../../statics/images/project-panel-blue.svg"></div>
<div class="project-switch-img"><img src="../../../../statics/images/project-menu-gray.svg"></div>
</template>
<template v-else>
<div class="project-switch-img"><img src="../../../../statics/images/project-panel-gray.svg"></div>
<div class="project-switch-img active"><img src="../../../../statics/images/project-menu-blue.svg"></div>
</template>
</div>
</div>
</div>
</div>
<div class="project-column">
<div v-if="$store.state.projectListPanel" class="project-column">
<ul>
<li>
<div class="column-head">
@ -246,6 +256,345 @@
</li>
</ul>
</div>
<div v-else class="project-table">
<div class="project-table-head">
<Row class="project-row">
<Col span="12"># Task name</Col>
<Col span="3">Task Column</Col>
<Col span="3">Priority</Col>
<Col span="3">Member</Col>
<Col span="3">Expiration</Col>
</Row>
</div>
<div class="project-table-body">
<Row class="project-row">
<Col span="12" class="row-title">
<i class="iconfont">&#xe689;</i>
<div class="row-h1">My task</div>
<div class="row-num">(5)</div>
</Col>
<Col span="3"></Col>
<Col span="3"></Col>
<Col span="3"></Col>
<Col span="3"></Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon type="md-radio-button-off" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
</Col>
<Col span="3">Next Up</Col>
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon type="md-radio-button-off" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
</Col>
<Col span="3">Next Up</Col>
<Col span="3"><TaskPriority>Unimportance</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon type="md-radio-button-off" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
</Col>
<Col span="3">Next Up</Col>
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon type="md-radio-button-off" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
<div class="item-icon">6<i class="iconfont">&#xe648;</i></div>
</Col>
<Col span="3">Next Up</Col>
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
</div>
<div class="project-table-body">
<Row class="project-row">
<Col span="12" class="row-title">
<i class="iconfont">&#xe689;</i>
<div class="row-h1">Undone</div>
<div class="row-num">(5)</div>
</Col>
<Col span="3"></Col>
<Col span="3"></Col>
<Col span="3"></Col>
<Col span="3"></Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon type="md-radio-button-off" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
</Col>
<Col span="3">Next Up</Col>
<Col span="3"><TaskPriority>Unimportance</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon type="md-radio-button-off" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
</Col>
<Col span="3">Next Up</Col>
<Col span="3"><TaskPriority>Unimportance</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon type="md-radio-button-off" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
</Col>
<Col span="3">Next Up</Col>
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon type="md-radio-button-off" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
</Col>
<Col span="3">Next Up</Col>
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
</div>
<div class="project-table-body">
<Row class="project-row">
<Col span="12" class="row-title">
<i class="iconfont">&#xe689;</i>
<div class="row-h1">Completed</div>
<div class="row-num">(5)</div>
</Col>
<Col span="3"></Col>
<Col span="3"></Col>
<Col span="3"></Col>
<Col span="3"></Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon class="completed" type="md-checkmark-circle" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
</Col>
<Col span="3">Hi Progress</Col>
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon class="completed" type="md-checkmark-circle" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
</Col>
<Col span="3">Hi Progress</Col>
<Col span="3"><TaskPriority>Unimportance</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon class="completed" type="md-checkmark-circle" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
</Col>
<Col span="3">Hi Progress</Col>
<Col span="3"><TaskPriority>Important</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
<Row class="project-row">
<Col span="12" class="row-item">
<Icon class="completed" type="md-checkmark-circle" />
<div class="item-title">Maxxis Tyres</div>
<div class="item-icon">5<Icon type="ios-link-outline" /></div>
<div class="item-icon">5<Icon type="ios-chatbubbles-outline" /></div>
</Col>
<Col span="3">Next Up</Col>
<Col span="3"><TaskPriority>Unimportance</TaskPriority></Col>
<Col span="3" class="row-member">
<ul>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li class="online">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
<li>
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
</li>
</ul>
</Col>
<Col span="3">6 June, 2021</Col>
</Row>
</div>
</div>
</div>
</template>
@ -297,6 +646,9 @@
background-color: #F2F3F5;
.ivu-icon {
font-size: 20px;
width: 36px;
height: 36px;
line-height: 36px;
}
.ivu-badge {
position: absolute;
@ -304,6 +656,10 @@
left: 20px;
transform: scale(0.8);
}
&.active {
color: #ffffff;
background-color: #2d8cf0;
}
}
&.project-avatar {
.ivu-avatar {
@ -449,10 +805,11 @@
width: 0;
display: flex;
align-items: center;
margin-right: 12px;
overflow: auto;
margin-right: 24px;
> li {
list-style: none;
margin-left: -5px;
margin-left: -6px;
&:first-child {
margin-left: 0;
}
@ -515,20 +872,132 @@
}
}
}
.project-table {
height: 100%;
overflow-y: auto;
.project-row {
background-color: #ffffff;
border-bottom: 1px solid #F4F4F5;
> div {
display: flex;
align-items: center;
padding: 8px 12px;
border-right: 1px solid #F4F4F5;
&:first-child {
padding-left: 32px;
}
&:last-child {
border-right: 0;
}
}
}
.project-table-head,
.project-table-body {
margin: 0 32px 12px;
border-radius: 5px;
border: 1px solid #F4F4F5;
border-bottom: 0;
overflow: hidden;
}
.project-table-head {
.project-row {
> div {
color: #888888;
font-size: 13px;
font-weight: 500;
}
}
}
.project-table-body {
&:hover {
box-shadow: 0 0 10px #e6ecfa;
}
.project-row {
> div {
padding: 10px 12px;
&.row-title {
font-size: 14px;
font-weight: 500;
color: #333333;
padding-left: 14px;
.iconfont {
font-size: 12px;
}
.row-h1 {
padding-left: 18px;
}
.row-num {
color: #999999;
padding-left: 6px;
}
}
&.row-item {
padding-left: 20px;
.ivu-icon {
font-size: 16px;
color: #dddddd;
&.completed {
color: #87d068;
}
}
.item-title {
padding: 0 22px 0 10px;
}
.item-icon {
font-size: 12px;
margin-right: 6px;
color: #777777;
.ivu-icon,
.iconfont {
margin-left: 1px;
font-size: 14px;
color: #666666;
}
.iconfont {
color: #999999;
}
}
}
&.row-member {
> ul {
display: flex;
align-items: center;
overflow: auto;
margin-left: -4px;
> li {
list-style: none;
margin-left: -6px;
&:first-child {
margin-left: 0;
}
.ivu-avatar {
width: 28px;
height: 28px;
border: 2px solid #ffffff;
}
}
}
}
}
}
}
}
}
}
</style>
<script>
import TaskPriority from "./task-priority";
export default {
name: "ProjectList",
components: {TaskPriority},
data() {
return {
searchText: '',
}
},
mounted() {
},
}
}
</script>

48
resources/assets/js/pages/manage/components/task-priority.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div class="task-priority" :style="myStyle"><slot/></div>
</template>
<style lang="scss" scoped>
:global {
.task-priority {
display: inline-block;
padding: 0 6px;
border-radius: 3px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
</style>
<script>
export default {
name: "TaskPriority",
props: {
color: {
default: '#ffffff'
},
background: {
default: '#7DBEEA'
},
backgroundColor: {
default: '#7DBEEA'
},
},
data() {
return {
}
},
computed: {
myStyle() {
const {color, background, backgroundColor} = this;
return {
color: color,
backgroundColor: backgroundColor || background,
}
}
},
}
</script>

6
resources/assets/js/store/mutations.js vendored
View File

@ -3,6 +3,12 @@ export default {
state.projectChatShow = !state.projectChatShow
state.setStorage('projectChatShow', state.projectChatShow);
},
toggleProjectListPanel(state) {
state.projectListPanel = !state.projectListPanel
state.setStorage('projectListPanel', state.projectListPanel);
},
setUserInfo(state, info) {
const userInfo = state._cloneJSON(info);
userInfo.userid = state._runNum(userInfo.userid);

4
resources/assets/js/store/state.js vendored
View File

@ -159,12 +159,16 @@ const stateCommon = {
};
const projectChatShow = stateCommon.getStorageBoolean('projectChatShow', true);
const projectListPanel = stateCommon.getStorageBoolean('projectListPanel', true);
const userInfo = stateCommon.getStorageJson('userInfo');
const userToken = userInfo.token;
userInfo.userid = stateCommon._runNum(userInfo.userid);
export default Object.assign(stateCommon, {
projectChatShow,
projectListPanel,
userInfo,
userToken,
})

1
resources/assets/sass/app.scss vendored
View File

@ -1,2 +1,3 @@
@import "iconfont";
@import "loading";
@import "main";

15
resources/assets/sass/iconfont.scss vendored Normal file
View File

@ -0,0 +1,15 @@
@font-face {
font-family: 'iconfont'; /* Project id 2583385 */
src: url('//at.alicdn.com/t/font_2583385_eusvc29tdm5.woff2?t=1622518656789') format('woff2'),
url('//at.alicdn.com/t/font_2583385_eusvc29tdm5.woff?t=1622518656789') format('woff'),
url('//at.alicdn.com/t/font_2583385_eusvc29tdm5.ttf?t=1622518656789') format('truetype');
}
.iconfont {
font-family: "iconfont", "serif" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}