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

Merge pull request #2122 from dataease/pr@dev@style_panel_filter_style

Browse Source 
style: 过滤组件弹框样式优化
This commit is contained in:
fit2cloud-chenyw 2022-04-15 15:23:27 +08:00 committed by GitHub
commit a838c90882
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/views/panel/filter/filterDialog.vue
View File

@ -39,7 +39,7 @@
:load="loadTree"
@node-click="handleNodeClick"
>
<div slot-scope="{ node, data }" class="custom-tree-node">
<span slot-scope="{ node, data }" style="display: flex;flex: 1;width: 0%;" class="custom-tree-node">
<span>
<svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
<svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
@ -48,12 +48,14 @@
<svg-icon v-if="data.type === 'union'" icon-class="ds-union" class="ds-icon-union" />
<svg-icon v-if="data.type === 'api'" icon-class="ds-api" class="ds-icon-api" />
</span>
<el-tooltip class="item" effect="dark" placement="top">
<div slot="content">{{ node.label }}</div>
<span class="label-span">{{ node.label }}</span>
</el-tooltip>
<span v-if="data.modelInnerType === 'db' || data.modelInnerType === 'sql'">
<span v-if="data.mode === 0" style="margin-left: 6px"><i class="el-icon-s-operation" /></span>
<span v-if="data.mode === 1" style="margin-left: 6px"><i class="el-icon-alarm-clock" /></span>
</span>
</div>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="node.label">{{ node.label }}</span>
</span>
</el-tree>
<div v-if="showDomType === 'field'">
@ -71,9 +73,15 @@
:key="item.id"
:class="myAttrs && myAttrs.fieldId && myAttrs.fieldId.includes(item.id) ? 'filter-db-row-checked' : 'filter-db-row'"
class="filter-db-row"
style="margin: 5px 0;"
>
<i class="el-icon-s-data" />
<span> {{ item.name }}</span>
<span style="display: flex;flex: 1;">
<span>
<i class="el-icon-s-data" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="item.name">{{ item.name }}</span>
</span>
</div>
</transition-group>
</draggable>
@ -122,8 +130,15 @@
<el-table-column prop="name" :label="$t('commons.name')">
<template v-if="comShowDomType === 'view'" :id="scope.row.id" slot-scope="scope">
<div class="filter-db-row" @click="comShowFieldDatas(scope.row)">
<i class="el-icon-s-data" />
<span> {{ scope.row.name }}</span>
<!-- <i class="el-icon-s-data" />
<span> {{ scope.row.name }}</span> -->
<span style="display: flex;flex: 1;">
<span>
<i class="el-icon-s-data" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="scope.row.name">{{ scope.row.name }}</span>
</span>
</div>
</template>
</el-table-column>
@ -144,9 +159,16 @@
:key="item.id"
:class="myAttrs && myAttrs.fieldId && myAttrs.fieldId.includes(item.id) ? 'filter-db-row-checked' : 'filter-db-row'"
class="filter-db-row"
style="margin: 5px 0;"
>
<i class="el-icon-s-data" />
<span> {{ item.name }}</span>
<span style="display: flex;flex: 1;">
<span>
<i class="el-icon-s-data" />
</span>
<span style="margin-left: 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" :title="item.name">{{ item.name }}</span>
</span>
</div>
</transition-group>
</draggable>

11
frontend/src/views/panel/filter/filterMain/FilterHead.vue
View File

@ -5,7 +5,7 @@
<div class="field-content">
<div class="field-content-right">
<el-row style="display:flex;height: 32px;">
<el-row style="display:inline-flex;height: 32px;width: auto;">
<draggable
v-model="element.options.attrs.dragItems"
group="dimension"
@ -78,7 +78,7 @@ export default {
<style lang="scss" scoped>
.filter-field {
border-radius: 4px;
height: 45px;
height: 40px;
.field-content {
position: relative;
@ -113,14 +113,15 @@ export default {
border-left: none;
color: #9ea6b2;
border: 1px solid var(--TableBorderColor, #E6E6E6);
width: 0%;
width: auto;
max-width: 0%;
position: relative;
display: table-cell;
display: inherit;
vertical-align: middle;
margin: 0px;
padding: 0 0 0 0;
padding: 4px 0 0 0;
height: 100%;
line-height: 100%;
}
}