no message

This commit is contained in:
kuaifan 2021-06-08 19:34:26 +08:00
parent 3eeaa5752a
commit d1b5179838
5 changed files with 106 additions and 68 deletions

View File

@ -29,8 +29,16 @@ Vue.component('TagInput', TagInput)
Vue.component('TableAction', TableAction); Vue.component('TableAction', TableAction);
Vue.component('UserAvatar', UserAvatar); Vue.component('UserAvatar', UserAvatar);
import { Tooltip } from 'element-ui'; import {
Tooltip,
Dropdown,
DropdownMenu,
DropdownItem,
} from 'element-ui';
Vue.component('ETooltip', Tooltip); Vue.component('ETooltip', Tooltip);
Vue.component('EDropdown', Dropdown);
Vue.component('EDropdownMenu', DropdownMenu);
Vue.component('EDropdownItem', DropdownItem);
const originalPush = VueRouter.prototype.push const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) { VueRouter.prototype.push = function push(location) {

View File

@ -72,21 +72,28 @@
<em>({{column.project_task.length}})</em> <em>({{column.project_task.length}})</em>
</div> </div>
<div class="column-head-icon"> <div class="column-head-icon">
<Poptip :ref="'poptip_' + column.id"> <EDropdown trigger="click" @command="dropColumn(column, $event)">
<Icon type="ios-more" /> <Icon type="ios-more" />
<div class="more-content" slot="content"> <EDropdownMenu slot="dropdown" class="project-list-column-more-content">
<ul> <EDropdownItem command="modify">
<li @click="modifyColumn(column)"><Icon type="md-create" />{{$L('修改')}}</li> <div class="item">
<li @click="removeColumn(column)"><Icon type="md-trash" />{{$L('删除')}}</li> <Icon type="md-create" />{{$L('修改')}}
<li class="divided"></li>
<li class="title">{{$L('颜色')}}</li>
<li v-for="(c, k) in colorList" :key="k" @click="saveColumn(column, column.name, c.color)">
<i class="iconfont" :style="{color:c.color}" v-html="c.color == column.color ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
</li>
</ul>
</div> </div>
</Poptip> </EDropdownItem>
<Icon type="md-add" @click="addTopShow(column)" /> <EDropdownItem command="delete">
<div class="item">
<Icon type="md-trash" />{{$L('删除')}}
</div>
</EDropdownItem>
<EDropdownItem divided disabled>{{$L('颜色')}}</EDropdownItem>
<EDropdownItem v-for="(c, k) in colorList" :key="k" :command="c">
<div class="item">
<i class="iconfont" :style="{color:c.color}" v-html="c.color == column.color ? '&#xe61d;' : '&#xe61c;'"></i>{{$L(c.name)}}
</div>
</EDropdownItem>
</EDropdownMenu>
</EDropdown>
<Icon class="last" type="md-add" @click="addTopShow(column)" />
</div> </div>
</div> </div>
<div :ref="'column_' + column.id" class="column-task overlay-y"> <div :ref="'column_' + column.id" class="column-task overlay-y">
@ -111,8 +118,15 @@
@remove="sortUpdate"> @remove="sortUpdate">
<div v-for="item in panelTask(column.project_task)" class="task-item task-draggable"> <div v-for="item in panelTask(column.project_task)" class="task-item task-draggable">
<div :class="['task-head', item.desc ? 'has-desc' : '']"> <div :class="['task-head', item.desc ? 'has-desc' : '']">
<i class="task-choose iconfont">&#xe625;</i>
<div class="task-title"><pre>{{item.name}}</pre></div> <div class="task-title"><pre>{{item.name}}</pre></div>
<EDropdown trigger="click" @command="dropTask(item, $event)">
<Icon type="ios-more" /> <Icon type="ios-more" />
<EDropdownMenu slot="dropdown">
<EDropdownItem command="complete">{{$L('完成')}}</EDropdownItem>
<EDropdownItem command="delete" divided>{{$L('删除')}}</EDropdownItem>
</EDropdownMenu>
</EDropdown>
</div> </div>
<div v-if="item.desc" class="task-desc" v-html="item.desc"></div> <div v-if="item.desc" class="task-desc" v-html="item.desc"></div>
<div v-if="item.task_tag.length > 0" class="task-tags"> <div v-if="item.task_tag.length > 0" class="task-tags">
@ -725,6 +739,18 @@ export default {
}); });
}, },
dropColumn(column, command) {
if (command === 'modify') {
this.modifyColumn(column);
}
else if (command === 'delete') {
this.removeColumn(column);
}
else if (command.name) {
this.saveColumn(column, column.name, command.color)
}
},
modifyColumn(column) { modifyColumn(column) {
$A.modalInput({ $A.modalInput({
value: column.name, value: column.name,
@ -737,7 +763,6 @@ export default {
return true; return true;
} }
}); });
this.$refs['poptip_' + column.id][0].handleClose();
}, },
removeColumn(column) { removeColumn(column) {
@ -768,7 +793,6 @@ export default {
}); });
} }
}); });
this.$refs['poptip_' + column.id][0].handleClose();
}, },
saveColumn(column, name, color) { saveColumn(column, name, color) {
@ -796,7 +820,16 @@ export default {
} }
} }
}); });
this.$refs['poptip_' + column.id][0].handleClose(); },
dropTask(task, command) {
switch (command) {
case 'complete':
break;
case 'delete':
break;
}
}, },
onSetting() { onSetting() {

View File

@ -2,4 +2,14 @@ $--tooltip-fill: #585E6A;
$--tooltip-border-color: #585E6A; $--tooltip-border-color: #585E6A;
$--tooltip-font-size: 14px; $--tooltip-font-size: 14px;
@import "~element-ui/packages/theme-chalk/src/common/transition";
@import "~element-ui/packages/theme-chalk/src/tooltip"; @import "~element-ui/packages/theme-chalk/src/tooltip";
@import "~element-ui/packages/theme-chalk/src/dropdown";
@import "~element-ui/packages/theme-chalk/src/dropdown-menu";
@import "~element-ui/packages/theme-chalk/src/dropdown-item";
.el-dropdown-menu__item {
min-width: 100px;
line-height: 34px;
}

View File

@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: 'iconfont'; /* Project id 2583385 */ font-family: 'iconfont'; /* Project id 2583385 */
src: url('//at.alicdn.com/t/font_2583385_9mlcjsehf5c.woff2?t=1622711688395') format('woff2'), src: url('//at.alicdn.com/t/font_2583385_e77s2y4tokk.woff2?t=1623151884621') format('woff2'),
url('//at.alicdn.com/t/font_2583385_9mlcjsehf5c.woff?t=1622711688395') format('woff'), url('//at.alicdn.com/t/font_2583385_e77s2y4tokk.woff?t=1623151884621') format('woff'),
url('//at.alicdn.com/t/font_2583385_9mlcjsehf5c.ttf?t=1622711688395') format('truetype'); url('//at.alicdn.com/t/font_2583385_e77s2y4tokk.ttf?t=1623151884621') format('truetype');
} }
.iconfont { .iconfont {

View File

@ -228,9 +228,9 @@
.column-head-icon { .column-head-icon {
display: flex; display: flex;
align-items: center; align-items: center;
margin-left: 12px; margin-left: 16px;
.ivu-icon { .ivu-icon {
padding-left: 8px; padding-right: 8px;
font-size: 16px; font-size: 16px;
color: #aaaaaa; color: #aaaaaa;
cursor: pointer; cursor: pointer;
@ -240,51 +240,8 @@
color: #888888; color: #888888;
} }
} }
.ivu-poptip-popper { .last {
color: #515a6e; padding-right: 0;
min-width: 130px;
.ivu-poptip-body {
padding: 0;
}
.more-content {
ul {
margin: 10px 0;
> li {
display: flex;
align-items: center;
cursor: pointer;
list-style: none;
line-height: 30px;
padding: 0 20px;
> i {
font-size: 18px;
margin-right: 8px;
padding: 0;
color: #bbbbbb;
&.ivu-icon {
font-size: 16px;
}
}
&.title,
&.divided {
font-size: 13px;
color: #888888;
cursor: default;
&:hover {
background-color: transparent;
}
}
&.divided {
margin-top: 5px;
height: 6px;
border-top: 1px solid #F4F4F5;
}
&:hover {
background-color: #f1f1f1;
}
}
}
}
} }
} }
&.custom-color { &.custom-color {
@ -339,6 +296,14 @@
.task-head { .task-head {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
.task-choose {
margin-right: 5px;
font-size: 22px;
color: #aaaaaa;
height: 22px;
line-height: 22px;
cursor: pointer;
}
.task-title { .task-title {
flex: 1; flex: 1;
padding-top: 1px; padding-top: 1px;
@ -354,6 +319,10 @@
font-size: 22px; font-size: 22px;
color: #666666; color: #666666;
margin-left: 8px; margin-left: 8px;
cursor: pointer;
&:hover {
color: #555555;
}
} }
&.has-desc { &.has-desc {
.task-title { .task-title {
@ -598,3 +567,21 @@
} }
} }
} }
.project-list-column-more-content {
> li {
min-width: 130px;
.item {
display: flex;
align-items: center;
> i {
font-size: 18px;
margin-right: 8px;
padding: 0;
color: #bbbbbb;
&.ivu-icon {
font-size: 16px;
}
}
}
}
}