github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-12 19:35:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化通用菜单

Browse Source
This commit is contained in:
kuaifan 2025-04-19 01:09:17 +08:00
parent e22de5cba1
commit dda603c7d8
6 changed files with 67 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
resources/assets/js/components/DropdownMenu.vue
View File

@ -4,17 +4,18 @@
trigger="click"
class="general-operation-dropdown"
placement="bottom"
size="small"
:size="size"
:style="styles"
@command="onCommand"
@visible-change="visibleChange">
<div ref="icon" class="general-operation-icon"></div>
<EDropdownMenu ref="dropdownMenu" slot="dropdown" class="general-operation-more-dropdown menu-dropdown">
<li class="general-operation-more-warp small">
<li class="general-operation-more-warp" :class="[size]">
<ul :style="ulStyle">
<EDropdownItem
v-for="(item, key) in list"
:key="key"
:class="item.className"
:command="item.value"
:divided="!!item.divided"
:disabled="(active === item.value && !activeClick) || !!item.disabled">
@ -40,6 +41,7 @@ export default {
list: [], // 数据列表: [{label: '', value: ''}]
active: '', // 当前选中的值
size: 'small', // 下拉框大小
activeClick: false, // 当前选中的值是否可以被点击
onUpdate: null, // 选中后的回调函数
scrollHide: true, // 滚动立即隐藏
@ -82,6 +84,7 @@ export default {
}
this.list = data.list;
this.active = data.active && this.list.find(item => item.value === data.active) ? data.active : '';
this.size = ['small', 'medium', 'large'].includes(data.size) ? data.size : 'small';
this.activeClick = typeof data.activeClick === "boolean" ? data.activeClick : false;
this.onUpdate = typeof data.onUpdate === "function" ? data.onUpdate : null;
this.scrollHide = typeof data.scrollHide === "boolean" ? data.scrollHide : true;

60
resources/assets/js/pages/manage/components/TaskAdd.vue
View File

@ -123,32 +123,6 @@
@on-show-change="visibleUserSelectShowChange"
border/>
</FormItem>
<EDropdown ref="eDropdownRef" class="calculate-dropdown" trigger="click" placement="bottom" @command="dropVisible">
<div class="calculate-content"></div>
<EDropdownMenu slot="dropdown">
<EDropdownItem :command="1">
<div class="task-menu-icon" >
<Icon v-if="addData.visibility_appoint == 1" class="completed" :type="'md-checkmark-circle'"/>
<Icon v-else class="uncomplete" :type="'md-radio-button-off'"/>
{{$L('项目人员')}}
</div>
</EDropdownItem>
<EDropdownItem :command="2">
<div class="task-menu-icon" >
<Icon v-if="addData.visibility_appoint == 2" class="completed" :type="'md-checkmark-circle'"/>
<Icon v-else class="uncomplete" :type="'md-radio-button-off'"/>
{{$L('任务人员')}}
</div>
</EDropdownItem>
<EDropdownItem :command="3">
<div class="task-menu-icon" >
<Icon v-if="addData.visibility_appoint == 3" class="completed" :type="'md-checkmark-circle'"/>
<Icon v-else class="uncomplete" :type="'md-radio-button-off'"/>
{{$L('指定成员')}}
</div>
</EDropdownItem>
</EDropdownMenu>
</EDropdown>
<div class="subtasks">
<div v-if="addData.subtasks.length > 0" class="sublist">
<Row>
@ -575,29 +549,21 @@ export default {
this.$emit("input", !this.value)
},
showCisibleDropdown(e){
let eRect = null
if (e === null) {
eRect = this.$refs.visibilityText?.getBoundingClientRect()
} else {
eRect = e.target.getBoundingClientRect()
showCisibleDropdown(event){
const list = [
{label: '项目人员', value: 1},
{label: '任务人员', value: 2},
{label: '指定成员', value: 3},
];
this.$store.state.menuOperation = {
event,
list,
size: 'large',
active: this.addData.visibility_appoint,
onUpdate: (value) => {
this.dropVisible(value)
}
if (eRect === null) {
return
}
const boxRect = this.$el.getBoundingClientRect()
const refEl = this.$refs.eDropdownRef.$el
refEl.style.top = (eRect.top - boxRect.top) + 'px'
refEl.style.left = (eRect.left - boxRect.left) + 'px'
refEl.style.width = eRect.width + 'px'
refEl.style.height = eRect.height + 'px'
//
if (this.$refs.eDropdownRef.visible) {
this.$refs.eDropdownRef.hide()
}
setTimeout(() => {
this.$refs.eDropdownRef.show()
}, 0)
},
visibleUserSelectShowChange(isShow){

112
resources/assets/js/pages/manage/components/TaskDetail.vue
View File

@ -374,60 +374,6 @@
</EDropdownMenu>
</EDropdown>
</div>
<EDropdown ref="eDropdownRef" class="calculate-dropdown" trigger="click" placement="bottom" @command="dropVisible">
<div class="calculate-content"></div>
<EDropdownMenu slot="dropdown">
<EDropdownItem :command="1">
<div class="task-menu-icon">
<Icon v-if="taskDetail.visibility == 1" class="completed" :type="'md-checkmark-circle'"/>
<Icon v-else class="uncomplete" :type="'md-radio-button-off'"/>
{{$L('项目人员')}}
</div>
</EDropdownItem>
<EDropdownItem :command="2">
<div class="task-menu-icon">
<Icon v-if="taskDetail.visibility == 2" class="completed" :type="'md-checkmark-circle'"/>
<Icon v-else class="uncomplete" :type="'md-radio-button-off'"/>
{{$L('任务人员')}}
</div>
</EDropdownItem>
<EDropdownItem :command="3">
<div class="task-menu-icon">
<Icon v-if="taskDetail.visibility == 3" class="completed" :type="'md-checkmark-circle'"/>
<Icon v-else class="uncomplete" :type="'md-radio-button-off'"/>
{{$L('指定成员')}}
</div>
</EDropdownItem>
</EDropdownMenu>
</EDropdown>
<EDropdown ref="eDeadlineRef" class="calculate-dropdown" trigger="click" placement="bottom" @command="dropDeadline">
<div class="calculate-content"></div>
<EDropdownMenu slot="dropdown">
<EDropdownItem :command="1">
{{$L('任务延期')}}
</EDropdownItem>
<EDropdownItem :command="2">
{{$L('修改时间')}}
</EDropdownItem>
<EDropdownItem :command="3">
{{$L('清除时间')}}
</EDropdownItem>
</EDropdownMenu>
</EDropdown>
<EDropdown ref="eFileRef" class="calculate-dropdown" trigger="click" placement="bottom" @command="dropFile">
<div class="calculate-content"></div>
<EDropdownMenu slot="dropdown">
<EDropdownItem :command="1">
{{$L('查看附件')}}
</EDropdownItem>
<EDropdownItem :command="2">
{{$L('下载附件')}}
</EDropdownItem>
<EDropdownItem :command="3" class="task-calc-warn-text">
{{$L('删除附件')}}
</EDropdownItem>
</EDropdownMenu>
</EDropdown>
</Scrollbar>
<TaskUpload ref="upload" class="upload" @on-select-file="onSelectFile"/>
</div>
@ -1623,7 +1569,9 @@ export default {
case 'visible':
this.visibleForce = true;
this.$nextTick(() => {
this.showCisibleDropdown(null);
this.showCisibleDropdown({
target: this.$refs.visibilityText
});
});
break;
@ -1963,22 +1911,38 @@ export default {
}, 0)
},
showCisibleDropdown(e){
let eRect = null
if (e === null) {
eRect = this.$refs.visibilityText?.getBoundingClientRect()
} else {
eRect = e.target.getBoundingClientRect()
showCisibleDropdown(event){
const list = [
{label: '项目人员', value: 1},
{label: '任务人员', value: 2},
{label: '指定成员', value: 3},
];
this.$store.state.menuOperation = {
event,
list,
size: 'large',
active: this.taskDetail.visibility,
onUpdate: (value) => {
this.dropVisible(value)
}
if (eRect === null) {
return
}
this.showDropdown(this.$refs.eDropdownRef, eRect)
},
showAtDropdown({target}){
showAtDropdown(event){
this.timeOpen = false
this.showDropdown(this.$refs.eDeadlineRef, target.getBoundingClientRect())
const list = [
{label: '任务延期', value: 1},
{label: '修改时间', value: 2},
{label: '清除时间', value: 3},
];
this.$store.state.menuOperation = {
event,
list,
size: 'large',
onUpdate: (value) => {
this.dropDeadline(value)
}
}
},
visibleUserSelectShowChange(isShow){
@ -2064,9 +2028,21 @@ export default {
})
},
showFileDropdown(file, {target}){
showFileDropdown(file, event){
this.operationFile = file
this.showDropdown(this.$refs.eFileRef, target.getBoundingClientRect())
const list = [
{label: '查看附件', value: 1},
{label: '下载附件', value: 2},
{label: '删除附件', value: 3, className: 'task-calc-warn-text'},
];
this.$store.state.menuOperation = {
event,
list,
size: 'large',
onUpdate: (value) => {
this.dropFile(value)
}
}
},
dropFile(command) {

3
resources/assets/sass/pages/components/general-operation.scss vendored
View File

@ -44,6 +44,9 @@
height: 26px;
text-align: right;
margin-left: 6px;
display: flex;
justify-content: flex-end;
align-items: center;
> i {
font-size: 14px;

11
resources/assets/sass/pages/components/task-add.scss vendored
View File

@ -95,17 +95,6 @@
}
.task-add-form,
.task-add-advanced {
.calculate-dropdown {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 0;
height: 0;
z-index: -1;
pointer-events: none;
}
.title {
.ivu-input {
font-weight: 500;

24
resources/assets/sass/pages/components/task-detail.scss vendored
View File

@ -605,30 +605,6 @@
color: $primary-desc-color;
}
}
.calculate-dropdown {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 0;
height: 0;
z-index: -1;
pointer-events: none;
.calculate-content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.calculate-text {
color: $flow-status-start-color;
}
}
}
.upload {
display: none;