center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

fix(仪表板): 修复排序按钮 交互状态不对的问题

Browse Source
This commit is contained in:
dataeaseShu 2024-04-02 17:24:54 +08:00
parent f131903567
commit aa26979b1a
4 changed files with 139 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
core/core-frontend/src/views/common/DeResourceTree.vue
View File

@ -390,6 +390,30 @@ const getDefaultExpandedKeys = () => {
}
}
const sortList = [
{
name: '按创建时间升序',
value: 'time_asc'
},
{
name: '按创建时间降序',
value: 'time_desc',
divided: true
},
{
name: '按照名称升序',
value: 'name_asc'
},
{
name: '按照名称降序',
value: 'name_desc'
}
]
const sortTypeTip = computed(() => {
return sortList.find(ele => ele.value === state.curSortType).name
})
const sortTypeChange = sortType => {
state.resourceTree = treeSort(state.originResourceTree, sortType)
state.curSortType = sortType
@ -488,51 +512,35 @@ defineExpose({
</el-icon>
</template>
</el-input>
<el-dropdown trigger="click">
<el-icon class="insert-filter filter-icon-span">
<Icon
v-show="state.curSortType.includes('asc')"
name="dv-sort-asc"
class="opt-icon"
></Icon>
<Icon
v-show="state.curSortType.includes('desc')"
name="dv-sort-desc"
class="opt-icon"
></Icon>
<el-dropdown @command="sortTypeChange" trigger="click">
<el-icon class="filter-icon-span">
<el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
<Icon
v-if="state.curSortType.includes('asc')"
name="dv-sort-asc"
class="opt-icon"
></Icon>
</el-tooltip>
<el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
<Icon
v-show="state.curSortType.includes('desc')"
name="dv-sort-desc"
class="opt-icon"
></Icon>
</el-tooltip>
</el-icon>
<template #dropdown>
<el-dropdown-menu style="width: 150px">
<el-dropdown-item
class="sort-type-normal"
:class="{ 'sort-type-checked': state.curSortType === 'time_asc' }"
@click="sortTypeChange('time_asc')"
>
<span>按创建时间升序</span>
<el-icon style="margin-left: 4px"><Check /></el-icon>
</el-dropdown-item>
<el-dropdown-item
class="sort-type-normal"
:class="{ 'sort-type-checked': state.curSortType === 'time_desc' }"
@click="sortTypeChange('time_desc')"
>
<span>按创建时间降序</span> <el-icon style="margin-left: 8px"><Check /></el-icon>
</el-dropdown-item>
<el-divider style="margin: 12px 0" />
<el-dropdown-item
class="sort-type-normal"
:class="{ 'sort-type-checked': state.curSortType === 'name_asc' }"
@click="sortTypeChange('name_asc')"
>
<span>按照名称升序</span><el-icon><Check /></el-icon>
</el-dropdown-item>
<el-dropdown-item
class="sort-type-normal"
:class="{ 'sort-type-checked': state.curSortType === 'name_desc' }"
@click="sortTypeChange('name_desc')"
>
<span>按照名称降序</span><el-icon><Check /></el-icon>
</el-dropdown-item>
<el-dropdown-menu style="width: 246px">
<template :key="ele.value" v-for="ele in sortList">
<el-dropdown-item
class="ed-select-dropdown__item"
:class="ele.value === state.curSortType && 'selected'"
:command="ele.value"
>
{{ ele.name }}
</el-dropdown-item>
<li v-if="ele.divided" class="ed-dropdown-menu__item--divided"></li>
</template>
</el-dropdown-menu>
</template>
</el-dropdown>
@ -614,42 +622,27 @@ defineExpose({
<XpackComponent ref="openHandler" jsname="L2NvbXBvbmVudC9lbWJlZGRlZC1pZnJhbWUvT3BlbkhhbmRsZXI=" />
</template>
<style lang="less" scoped>
.insert-filter {
display: inline-block;
font-weight: 400 !important;
font-family: '阿里巴巴普惠体 3.0 55 Regular L3';
line-height: 1;
white-space: nowrap;
cursor: pointer;
color: var(--TextPrimary, #1f2329);
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
transition: 0.1s;
border-radius: 3px;
&:active {
color: #000;
border-color: #3a8ee6;
background-color: red;
outline: 0;
}
&:hover {
background-color: rgba(31, 35, 41, 0.1);
color: #3a8ee6;
}
}
.filter-icon-span {
border: 1px solid #dcdfe6;
border: 1px solid #bbbfc4;
width: 32px;
height: 32px;
border-radius: 4px;
padding: 7px;
color: #1f2329;
padding: 8px;
margin-left: 8px;
font-size: 16px;
cursor: pointer;
.opt-icon:focus {
outline: none !important;
}
&:hover {
background: #f5f6f7;
}
&:active {
background: #eff0f1;
}
}
.resource-tree {
padding: 16px 0 0;
@ -689,7 +682,7 @@ defineExpose({
}
.search-bar {
padding-bottom: 10px;
width: calc(100% - 50px);
width: calc(100% - 40px);
}
}
.title-area {

8
core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
View File

@ -208,13 +208,7 @@ const save = () => {
<span class="open-mobile">开启移动端</span>
<el-switch size="small" v-model="dvInfo.mobileLayout" />
<span class="open-mobile-line"></span>
<el-tooltip
:show-arrow="false"
:offset="9"
effect="dark"
content="切换至PC端布局"
placement="bottom"
>
<el-tooltip :offset="14" effect="dark" content="切换至PC端布局" placement="bottom">
<el-icon @click="handleBack" class="switch-pc">
<Icon name="icon_pc_outlined" />
</el-icon>

76
core/core-frontend/src/views/visualized/data/dataset/index.vue
View File

@ -471,6 +471,10 @@ const sortList = [
}
]
const sortTypeTip = computed(() => {
return sortList.find(ele => ele.value === state.curSortType).name
})
const tablePanes = ref([])
const tablePaneList = computed(() => {
return nodeInfo.weight >= 7 ? [...defaultTab, ...tablePanes.value] : [...defaultTab]
@ -578,17 +582,21 @@ const getMenuList = (val: boolean) => {
</template>
</el-input>
<el-dropdown @command="sortTypeChange" trigger="click">
<el-icon class="insert-filter filter-icon-span">
<Icon
v-show="state.curSortType.includes('asc')"
name="dv-sort-asc"
class="opt-icon"
></Icon>
<Icon
v-show="state.curSortType.includes('desc')"
name="dv-sort-desc"
class="opt-icon"
></Icon>
<el-icon class="filter-icon-span">
<el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
<Icon
v-if="state.curSortType.includes('asc')"
name="dv-sort-asc"
class="opt-icon"
></Icon>
</el-tooltip>
<el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
<Icon
v-show="state.curSortType.includes('desc')"
name="dv-sort-desc"
class="opt-icon"
></Icon>
</el-tooltip>
</el-icon>
<template #dropdown>
<el-dropdown-menu style="width: 246px">
@ -787,42 +795,28 @@ const getMenuList = (val: boolean) => {
<style lang="less" scoped>
@import '@/style/mixin.less';
.insert-filter {
display: inline-block;
font-weight: 400 !important;
font-family: '阿里巴巴普惠体 3.0 55 Regular L3';
line-height: 1;
white-space: nowrap;
cursor: pointer;
color: var(--TextPrimary, #1f2329);
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
transition: 0.1s;
border-radius: 3px;
&:active {
color: #000;
border-color: #3a8ee6;
background-color: red;
outline: 0;
}
&:hover {
background-color: rgba(31, 35, 41, 0.1);
color: #3a8ee6;
}
}
.filter-icon-span {
border: 1px solid #dcdfe6;
border: 1px solid #bbbfc4;
width: 32px;
height: 32px;
border-radius: 4px;
padding: 7px;
color: #1f2329;
padding: 8px;
margin-left: 8px;
font-size: 16px;
cursor: pointer;
.opt-icon:focus {
outline: none !important;
}
&:hover {
background: #f5f6f7;
}
&:active {
background: #eff0f1;
}
}
.dataset-manage {
display: flex;

77
core/core-frontend/src/views/visualized/data/datasource/index.vue
View File

@ -443,6 +443,10 @@ const sortList = [
value: 'name_desc'
}
]
const sortTypeTip = computed(() => {
return sortList.find(ele => ele.value === state.curSortType).name
})
const tableData = shallowRef([])
const tabData = shallowRef([])
const handleNodeClick = data => {
@ -781,17 +785,21 @@ const getMenuList = (val: boolean) => {
</template>
</el-input>
<el-dropdown @command="sortTypeChange" trigger="click">
<el-icon class="insert-filter filter-icon-span">
<Icon
v-show="state.curSortType.includes('asc')"
name="dv-sort-asc"
class="opt-icon"
></Icon>
<Icon
v-show="state.curSortType.includes('desc')"
name="dv-sort-desc"
class="opt-icon"
></Icon>
<el-icon class="filter-icon-span">
<el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
<Icon
v-if="state.curSortType.includes('asc')"
name="dv-sort-asc"
class="opt-icon"
></Icon>
</el-tooltip>
<el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
<Icon
v-show="state.curSortType.includes('desc')"
name="dv-sort-desc"
class="opt-icon"
></Icon>
</el-tooltip>
</el-icon>
<template #dropdown>
<el-dropdown-menu style="width: 246px">
@ -1464,42 +1472,27 @@ const getMenuList = (val: boolean) => {
<style lang="less" scoped>
@import '@/style/mixin.less';
.insert-filter {
display: inline-block;
font-weight: 400 !important;
font-family: '阿里巴巴普惠体 3.0 55 Regular L3';
line-height: 1;
white-space: nowrap;
cursor: pointer;
color: var(--TextPrimary, #1f2329);
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
transition: 0.1s;
border-radius: 3px;
&:active {
color: #000;
border-color: #3a8ee6;
background-color: red;
outline: 0;
}
&:hover {
background-color: rgba(31, 35, 41, 0.1);
color: #3a8ee6;
}
}
.filter-icon-span {
border: 1px solid #dcdfe6;
border: 1px solid #bbbfc4;
width: 32px;
height: 32px;
border-radius: 4px;
padding: 7px;
color: #1f2329;
padding: 8px;
margin-left: 8px;
font-size: 16px;
cursor: pointer;
.opt-icon:focus {
outline: none !important;
}
&:hover {
background: #f5f6f7;
}
&:active {
background: #eff0f1;
}
}
.datasource-manage {
display: flex;