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

feat: 视图字段可调整高度

Browse Source
This commit is contained in:
junjun 2022-06-09 17:14:44 +08:00
parent 54c32bdf34
commit 41f8907926
1 changed files with 73 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -84,64 +84,74 @@
@click="changeDs" @click="changeDs"
/> />
</div> </div>
<div class="padding-lr field-height">
<span>{{ $t('chart.dimension') }}</span> <div class="field-split">
<draggable <fu-split-pane top="50%" direction="vertical">
v-if="table && hasDataPermission('use',table.privileges)" <template v-slot:top>
v-model="dimensionData" <div class="padding-lr field-height">
:options="{group:{name: 'drag',pull:'clone'},sort: true}" <span>{{ $t('chart.dimension') }}</span>
animation="300" <draggable
:move="onMove" v-if="table && hasDataPermission('use',table.privileges)"
class="drag-list" v-model="dimensionData"
@add="moveToDimension" :options="{group:{name: 'drag',pull:'clone'},sort: true}"
> animation="300"
<transition-group> :move="onMove"
<span v-for="item in dimensionData" :key="item.id" class="item-dimension" :title="item.name"> class="drag-list"
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" /> @add="moveToDimension"
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" /> >
<svg-icon <transition-group>
v-if="item.deType === 2 || item.deType === 3" <span v-for="item in dimensionData" :key="item.id" class="item-dimension" :title="item.name">
icon-class="field_value" <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
class="field-icon-value" <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
/> <svg-icon
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" /> v-if="item.deType === 2 || item.deType === 3"
{{ item.name }} icon-class="field_value"
</span> class="field-icon-value"
</transition-group> />
</draggable> <svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
</div> {{ item.name }}
<div class="padding-lr field-height"> </span>
<span>{{ $t('chart.quota') }}</span> </transition-group>
<draggable </draggable>
v-if="table && hasDataPermission('use',table.privileges)" </div>
v-model="quotaData" </template>
:options="{group:{name: 'drag',pull:'clone'},sort: true}" <template v-slot:bottom>
animation="300" <div class="padding-lr field-height">
:move="onMove" <span>{{ $t('chart.quota') }}</span>
class="drag-list" <draggable
@add="moveToQuota" v-if="table && hasDataPermission('use',table.privileges)"
> v-model="quotaData"
<transition-group> :options="{group:{name: 'drag',pull:'clone'},sort: true}"
<span animation="300"
v-for="item in quotaData" :move="onMove"
v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))" class="drag-list"
:key="item.id" @add="moveToQuota"
class="item-quota" >
:title="item.name" <transition-group>
> <span
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" /> v-for="item in quotaData"
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" /> v-show="chart.type && (chart.type !== 'table-info' || (chart.type === 'table-info' && item.id !=='count'))"
<svg-icon :key="item.id"
v-if="item.deType === 2 || item.deType === 3" class="item-quota"
icon-class="field_value" :title="item.name"
class="field-icon-value" >
/> <svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" /> <svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<span>{{ item.name }}</span> <svg-icon
</span> v-if="item.deType === 2 || item.deType === 3"
</transition-group> icon-class="field_value"
</draggable> class="field-icon-value"
/>
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
<span>{{ item.name }}</span>
</span>
</transition-group>
</draggable>
</div>
</template>
</fu-split-pane>
</div> </div>
</el-col> </el-col>
<el-col <el-col
@ -2749,7 +2759,7 @@ span {
} }
.field-height { .field-height {
height: calc(50% - 20px); height: 100%;
border-top: 1px solid #E6E6E6; border-top: 1px solid #E6E6E6;
} }
@ -2883,4 +2893,9 @@ span {
font-size: 12px; font-size: 12px;
} }
.field-split{
height: 700px;
// height: calc(100% - 40px);
}
</style> </style>