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

Merge pull request #858 from dataease/pr@dev@feat_de_tabs

Browse Source 
feat: 替换tabs图标
This commit is contained in:
fit2cloud-chenyw 2021-09-23 15:43:38 +08:00 committed by GitHub
commit c86156bd5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 424 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
View File

@ -24,6 +24,7 @@
:out-style="config.style"
:style="getComponentStyleDefault(config.style)"
:prop-value="config.propValue"
:is-edit="false"
:element="config"
:search-count="searchCount"
/>

4
frontend/src/components/canvas/components/Editor/SettingMenu.vue
View File

@ -12,6 +12,7 @@
<el-dropdown-item icon="el-icon-arrow-up" @click.native="upComponent">{{ $t('panel.upComponent') }}</el-dropdown-item>
<el-dropdown-item icon="el-icon-arrow-down" @click.native="downComponent">{{ $t('panel.downComponent') }}</el-dropdown-item>
<el-dropdown-item v-if="'view'===curComponent.type" icon="el-icon-link" @click.native="linkageSetting">{{ $t('panel.linkage_setting') }}</el-dropdown-item>
<el-dropdown-item v-if="'de-tabs'===curComponent.type" icon="el-icon-link" @click.native="addTab">新增Tab</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
@ -137,6 +138,9 @@ export default {
getViewLinkageGather(requestInfo).then(rsp => {
this.$store.commit('setLinkageInfo', rsp.data)
})
},
addTab() {
bus.$emit('add-new-tab')
}
}
}

2
frontend/src/components/canvas/components/Editor/index.vue
View File

@ -638,9 +638,9 @@ export default {
showViewDetails(index) {
this.$refs.wrapperChild[index].openChartDetailsDialog()
},
resizeView(index, item) {
if (item.type === 'view') {
// console.log('view:resizeView')
this.$refs.wrapperChild[index].chartResize()
}
},

32
frontend/src/components/canvas/custom-component/component-list.js
View File

@ -27,6 +27,14 @@ export const assistList = [
label: '矩形',
icon: 'iconfont icon-juxing',
defaultClass: 'text-filter'
},
{
id: '10006',
component: 'de-tabs',
type: 'de-tabs',
label: '选项卡',
icon: 'iconfont icon-tabs',
defaultClass: 'text-filter'
}
]
@ -142,6 +150,30 @@ const list = [
borderRadius: ''
}
},
{
id: '10006',
component: 'de-tabs',
label: '选项卡',
propValue: '',
icon: 'tabs',
type: 'de-tabs',
style: {
width: 200,
height: 200,
borderStyle: 'solid',
borderWidth: 1,
borderColor: '#000000',
backgroundColor: '#ffffff',
borderRadius: 0
},
options: {
tabList: [{
title: 'Tab1',
name: '1',
content: null
}]
}
},
{
id: '20001',
component: 'picture-add',

269
frontend/src/components/widget/DeWidget/DeTabs.vue Normal file
View File

@ -0,0 +1,269 @@
<template>
<div class="de-tabs-div">
<el-tabs v-model="activeTabName" type="card" class="de-tabs">
<el-tab-pane
v-for="(item, index) in tabList"
:key="item.name+index"
:lazy="true"
:name="item.name"
>
<span slot="label">
<span>{{ item.title }}</span>
<el-dropdown v-if="isEdit" slot="label" class="de-tab-drop" trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
<!-- <span>{{ item.title }}</span> -->
<i v-if="isEdit" class="de-tab-i el-icon-arrow-down el-icon--right" />
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :command="beforeHandleCommond('editTitle', item)">
编辑标题
</el-dropdown-item>
<el-dropdown-item :command="beforeHandleCommond('selectView', item)">
选择视图
</el-dropdown-item>
<el-dropdown-item v-if="tabList.length > 1" :command="beforeHandleCommond('deleteCur', item)">
删除
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</span>
<div class="de-tab-content">
<user-view v-if="item.content" :ref="item.name" :element="item.content" :out-style="outStyle" />
</div>
</el-tab-pane>
</el-tabs>
<el-dialog
title="编辑标题"
:append-to-body="true"
:visible.sync="dialogVisible"
width="30%"
center
>
<el-input
v-model="textarea"
type="textarea"
:rows="2"
placeholder="请输入内容"
/>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="sureCurTitle">确 定</el-button>
</span>
</el-dialog>
<el-dialog
title="选择视图"
:append-to-body="true"
:visible.sync="viewDialogVisible"
width="20%"
height="400px"
center
>
<div style="width: 100%;min-height: 250px; max-height: 400px;">
<view-select ref="viewSelect" :select-model="true" />
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="viewDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="sureViewSelector">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import ViewSelect from '@/views/panel/ViewSelect'
import { uuid } from 'vue-uuid'
import bus from '@/utils/bus'
import componentList from '@/components/canvas/custom-component/component-list'
export default {
name: 'DeTabls',
components: { ViewSelect },
props: {
element: {
type: Object,
default: null
},
isEdit: {
type: Boolean,
default: true
},
outStyle: {
type: Object,
required: false,
default: function() {
return {}
}
}
},
data() {
return {
activeTabName: null,
tabIndex: 1,
// isEdit: true,
dialogVisible: false,
textarea: '',
curItem: null,
viewDialogVisible: false,
tabList: []
}
},
created() {
bus.$on('add-new-tab', this.addNewTab)
this.tabList = this.element.options && this.element.options.tabList
this.activeTabName = this.tabList[0].name
},
methods: {
beforeHandleCommond(item, param) {
return {
'command': item,
'param': param
}
},
handleCommand(command) {
switch (command.command) {
case 'editTitle':
this.editCurTitle(command.param)
break
case 'deleteCur':
this.deleteCur(command.param)
break
case 'selectView':
this.selectView(command.param)
break
}
},
selectView(param) {
this.activeTabName = param.name
this.curItem = param
this.viewDialogVisible = true
},
sureViewSelector() {
const nodes = this.$refs.viewSelect.getCurrentSelected()
const node = nodes[0]
let component
const newComponentId = uuid.v1()
const componentInfo = {
type: 'view',
id: node.id
}
componentList.forEach(componentTemp => {
if (componentTemp.type === 'view') {
component = JSON.parse(JSON.stringify(componentTemp))
const propValue = {
id: newComponentId,
viewId: componentInfo.id
}
component.propValue = propValue
component.filters = []
component.linkageFilters = []
}
})
component.id = newComponentId
component.style.width = '100%'
component.style.height = '100%'
this.curItem.content = component
this.curItem.name = newComponentId
this.viewDialogVisible = false
this.activeTabName = newComponentId
this.styleChange()
// this.setComponentInfo()
},
setComponentInfo() {
console.log('aaa')
},
editCurTitle(param) {
this.activeTabName = param.name
this.curItem = param
this.textarea = param.title
this.dialogVisible = true
},
sureCurTitle() {
this.curItem.title = this.textarea
this.dialogVisible = false
this.styleChange()
},
deleteCur(param) {
this.curItem = param
let len = this.element.options.tabList.length
while (len--) {
if (this.element.options.tabList[len].name === param.name) {
this.element.options.tabList.splice(len, 1)
this.tabList = this.element.options.tabList
const activIndex = (len - 1 + this.element.options.tabList.length) % this.element.options.tabList.length
this.activeTabName = this.element.options.tabList[activIndex].name
}
}
this.styleChange()
},
addNewTab() {
const curName = uuid.v1()
const tab = {
title: 'NewTab',
name: curName,
content: null
}
this.element.options.tabList.push(tab)
this.tabList = this.element.options.tabList
this.styleChange()
},
styleChange() {
this.$store.state.styleChangeTimes++
},
chartResize() {
// this.$refs[this.activeTabName]
}
}
}
</script>
<style lang="scss" scoped>
.de-tabs-div {
height: 100%;
}
.de-tabs {
height: 100%;
>>>div.el-tabs__content {
height: calc(100% - 55px);
.el-tab-pane {
height: 100%;
}
}
}
.de-tab-i {
transition: 0.3s;
opacity: 0;
transform: translateY(100%);
}
.de-tab-drop:hover .de-tab-i {
opacity: 1;
transform: translateY(0);
}
.de-tab-content {
width: 100%;
height: 100%;
}
</style>

34
frontend/src/styles/deicon/demo.css
View File

@ -215,35 +215,35 @@
margin: 1em 0;
}
.markdown >p,
.markdown >blockquote,
.markdown >.highlight,
.markdown >ol,
.markdown >ul {
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul >li {
.markdown ul>li {
list-style: circle;
}
.markdown >ul li,
.markdown blockquote ul >li {
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown >ul li p,
.markdown >ol li p {
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol >li {
.markdown ol>li {
list-style: decimal;
}
.markdown >ol li,
.markdown blockquote ol >li {
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
@ -260,7 +260,7 @@
font-weight: 600;
}
.markdown >table {
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
@ -269,14 +269,14 @@
margin-bottom: 24px;
}
.markdown >table th {
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown >table th,
.markdown >table td {
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;

52
frontend/src/styles/deicon/demo_index.html
View File

@ -54,6 +54,18 @@
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe62a;</span>
<div class="name">44.tabs</div>
<div class="code-name">&amp;#xe62a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe619;</span>
<div class="name">洗浴</div>
<div class="code-name">&amp;#xe619;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe973;</span>
<div class="name">线性图标-取消下钻</div>
@ -360,9 +372,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1628652979833') format('woff2'),
url('iconfont.woff?t=1628652979833') format('woff'),
url('iconfont.ttf?t=1628652979833') format('truetype');
src: url('iconfont.woff2?t=1632382166116') format('woff2'),
url('iconfont.woff?t=1632382166116') format('woff'),
url('iconfont.ttf?t=1632382166116') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@ -388,6 +400,24 @@
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-tabs"></span>
<div class="name">
44.tabs
</div>
<div class="code-name">.icon-tabs
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-xiyu"></span>
<div class="name">
洗浴
</div>
<div class="code-name">.icon-xiyu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-quxiaoshangzuan"></span>
<div class="name">
@ -847,6 +877,22 @@
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tabs"></use>
</svg>
<div class="name">44.tabs</div>
<div class="code-name">#icon-tabs</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-xiyu"></use>
</svg>
<div class="name">洗浴</div>
<div class="code-name">#icon-xiyu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-quxiaoshangzuan"></use>

14
frontend/src/styles/deicon/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 2459092 */
src: url('iconfont.woff2?t=1628652979833') format('woff2'),
url('iconfont.woff?t=1628652979833') format('woff'),
url('iconfont.ttf?t=1628652979833') format('truetype');
src: url('iconfont.woff2?t=1632382166116') format('woff2'),
url('iconfont.woff?t=1632382166116') format('woff'),
url('iconfont.ttf?t=1632382166116') format('truetype');
}
.iconfont {
@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-tabs:before {
content: "\e62a";
}
.icon-xiyu:before {
content: "\e619";
}
.icon-quxiaoshangzuan:before {
content: "\e973";
}

2
frontend/src/styles/deicon/iconfont.js
View File

File diff suppressed because one or more lines are too long

14
frontend/src/styles/deicon/iconfont.json
View File

@ -5,6 +5,20 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "15196968",
"name": "44.tabs",
"font_class": "tabs",
"unicode": "e62a",
"unicode_decimal": 58922
},
{
"icon_id": "23570269",
"name": "洗浴",
"font_class": "xiyu",
"unicode": "e619",
"unicode_decimal": 58905
},
{
"icon_id": "23496077",
"name": "线性图标-取消下钻",

BIN
frontend/src/styles/deicon/iconfont.ttf
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff
View File

Binary file not shown.

BIN
frontend/src/styles/deicon/iconfont.woff2
View File

Binary file not shown.

2
frontend/src/views/panel/AssistComponent/index.vue
View File

@ -62,7 +62,7 @@ import generateID from '@/components/canvas/utils/generateID'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'FilterGroup',
name: 'AssisComponent',
data() {
return {
assistList,

26
frontend/src/views/panel/ViewSelect/index.vue
View File

@ -2,7 +2,7 @@
<el-col v-loading="loading">
<el-row style="margin-top: 5px">
<el-row style="margin-left: 5px;margin-right: 5px">
<el-col :span="16">
<el-col :span="selectModel ? 23 : 16">
<el-input
v-model="templateFilterText"
:placeholder="$t('panel.filter_keywords')"
@ -11,7 +11,7 @@
prefix-icon="el-icon-search"
/>
</el-col>
<el-col :span="7">
<el-col v-if="!selectModel" :span="7">
<el-button type="primary" size="mini" style="float: right" @click="newChart">新建 </el-button>
</el-col>
@ -20,6 +20,7 @@
<el-tree
ref="templateTree"
:default-expanded-keys="defaultExpandedKeys"
:show-checkbox="selectModel"
:data="data"
node-key="id"
:props="defaultProps"
@ -31,7 +32,11 @@
:highlight-current="true"
@node-drag-start="handleDragStart"
@node-click="nodeClick"
@check="checkChanged"
@node-drag-end="dragEnd"
>
<span slot-scope="{ node, data }" class="custom-tree-node">
<span>
@ -67,6 +72,12 @@ import componentList from '@/components/canvas/custom-component/component-list'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'ViewSelect',
props: {
selectModel: {
type: Boolean,
default: false
}
},
data() {
return {
templateFilterText: '',
@ -134,6 +145,17 @@ export default {
newChart() {
this.$emit('newChart')
},
checkChanged(node, status) {
this.$refs.templateTree.setCheckedNodes([])
if (status.checkedKeys && status.checkedKeys.length > 0) {
this.$refs.templateTree.setCheckedNodes([node])
}
},
getCurrentSelected() {
const nodes = this.$refs.templateTree.getCheckedNodes(true, false)
return nodes
},
viewComponentInfo() {
let component
// 用户视图设置 复制一个模板