Skip to content

D
dataease
提交 a680a181 authored 作者: taojinlong's avatar taojinlong
浏览文件
操作

Merge branch 'dev' of github.com:dataease/dataease into dev

上级 6678a9b5 9fb8c031
显示空白字符变更
内嵌 并排
正在显示 包含 597 行增加 和 80 行删除
frontend/src/lang/en.js
浏览文件 @ a680a181
......@@ -976,7 +976,16 @@ export default {
right_join: 'RIGHT JOIN',
inner_join: 'INNER JOIN',
full_join: 'FULL JOIN',
can_not_union_diff_datasource: 'Union dataset must have same data source'
can_not_union_diff_datasource: 'Union dataset must have same data source',
operator: 'Operator',
d_q_trans: 'Dimension/Quota Transform',
add_calc_field: 'Create calc field',
input_name: 'Please input name',
field_exp: 'Field Expression',
data_type: 'Data Type',
click_ref_field: 'Click Quote Field',
click_ref_function: 'Click Quote Function',
field_manage: 'Field Manage'
},
datasource: {
datasource: 'Data Source',
......
frontend/src/lang/tw.js
浏览文件 @ a680a181
......@@ -976,7 +976,16 @@ export default {
right_join: '右連接',
inner_join: '內連接',
full_join: '全連接',
can_not_union_diff_datasource: '被關聯數據集必須與當前數據集的數據源一致'
can_not_union_diff_datasource: '被關聯數據集必須與當前數據集的數據源一致',
operator: '操作',
d_q_trans: '維度/指標轉換',
add_calc_field: '新建计算字段',
input_name: '請輸入名稱',
field_exp: '字段表達式',
data_type: '數據類型',
click_ref_field: '點擊引用字段',
click_ref_function: '點擊引用函數',
field_manage: '字段管理'
},
datasource: {
datasource: '數據源',
......
frontend/src/lang/zh.js
浏览文件 @ a680a181
......@@ -976,7 +976,16 @@ export default {
right_join: '右连接',
inner_join: '内连接',
full_join: '全连接',
can_not_union_diff_datasource: '被关联数据集必须与当前数据集的数据源一致'
can_not_union_diff_datasource: '被关联数据集必须与当前数据集的数据源一致',
operator: '操作',
d_q_trans: '维度/指标转换',
add_calc_field: '新建计算字段',
input_name: '请输入名称',
field_exp: '字段表达式',
data_type: '数据类型',
click_ref_field: '点击引用字段',
click_ref_function: '点击引用函数',
field_manage: '字段管理'
},
datasource: {
datasource: '数据源',
......
frontend/src/views/chart/view/ChartEdit.vue
浏览文件 @ a680a181
......@@ -514,7 +514,7 @@
:destroy-on-close="true"
:fullscreen="true"
>
<field-edit :param="{table:table}" @switchComponent="closeEditDsField" />
<field-edit :param="table" @switchComponent="closeEditDsField" />
</el-dialog>
</el-row>
</template>
......
frontend/src/views/dataset/data/CalcFieldEdit.vue 0 → 100644
浏览文件 @ a680a181
<template>
<el-row>
<el-form ref="form" :model="fieldForm" size="mini" class="row-style">
<el-form-item>
<span style="width: 60px;font-size: 12px">{{ $t('dataset.field_name') }}</span>
<el-input v-model="fieldForm.name" size="mini" :placeholder="$t('dataset.input_name')" />
</el-form-item>
</el-form>
<el-row style="height: 420px;">
<el-col :span="14" style="height: 100%">
<el-row>
<el-row>
<span>{{ $t('dataset.field_exp') }}</span>
<codemirror
ref="myCm"
v-model="fieldExp"
class="codemirror"
:options="cmOption"
@ready="onCmReady"
@focus="onCmFocus"
@input="onCmCodeChange"
/>
</el-row>
<el-row style="margin-top: 10px;">
<el-form ref="form" :model="fieldForm" size="mini" class="row-style">
<el-form-item>
<span style="width: 80px;font-size: 12px">{{ $t('dataset.data_type') }}</span>
<el-radio-group v-model="fieldForm.groupType" size="mini">
<el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
<el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item>
<span style="width: 80px;font-size: 12px">{{ $t('dataset.field_type') }}</span>
<el-select v-model="fieldForm.deType" size="mini">
<el-option
v-for="item in fields"
:key="item.value"
:label="item.label"
:value="item.value"
>
<span style="float: left">
<svg-icon v-if="item.value === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.value === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.value === 2 || item.value === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.value === 5" icon-class="field_location" class="field-icon-location" />
</span>
<span style="float: left; color: #8492a6; font-size: 12px">{{ item.label }}</span>
</el-option>
</el-select>
</el-form-item>
</el-form>
</el-row>
</el-row>
</el-col>
<el-col :span="10" style="height: 100%;border-left: 1px solid #E6E6E6;">
<el-col :span="12" style="height: 100%">
<span>{{ $t('dataset.click_ref_field') }}</span>
<div class="padding-lr field-height">
<span>{{ $t('chart.dimension') }}</span>
<draggable
v-model="tableFields.dimensionList"
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
animation="300"
class="drag-list"
:disabled="true"
>
<transition-group>
<span v-for="item in tableFields.dimensionList" :key="item.id" class="item-dimension" :title="item.name" @click="insertParamToCodeMirror(item.id)">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" class="field-icon-value" />
<svg-icon v-if="item.deType === 5" icon-class="field_location" class="field-icon-location" />
{{ item.name }}
</span>
</transition-group>
</draggable>
</div>
<div class="padding-lr field-height">
<span>{{ $t('chart.quota') }}</span>
<draggable
v-model="tableFields.quotaList"
:options="{group:{name: 'drag',pull:'clone'},sort: true}"
animation="300"
class="drag-list"
:disabled="true"
>
<transition-group>
<span v-for="item in tableFields.quotaList" :key="item.id" class="item-quota" :title="item.name" @click="insertParamToCodeMirror(item.id)">
<svg-icon v-if="item.deType === 0" icon-class="field_text" class="field-icon-text" />
<svg-icon v-if="item.deType === 1" icon-class="field_time" class="field-icon-time" />
<svg-icon v-if="item.deType === 2 || item.deType === 3" icon-class="field_value" 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>
</el-col>
<el-col :span="12" style="height: 100%">
<span>{{ $t('dataset.click_ref_function') }}</span>
<el-row class="padding-lr function-height">
<span v-for="(item,index) in functions" :key="index" class="function-style" @click="insertParamToCodeMirror(item.name)">{{ item.name }}</span>
</el-row>
</el-col>
</el-col>
</el-row>
</el-row>
</template>
<script>
import draggable from 'vuedraggable'
import { codemirror } from 'vue-codemirror'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/solarized.css'
import 'codemirror/mode/sql/sql.js'
// require active-line.js
import 'codemirror/addon/selection/active-line.js'
// closebrackets
import 'codemirror/addon/edit/closebrackets.js'
// keyMap
import 'codemirror/mode/clike/clike.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/comment/comment.js'
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
import 'codemirror/addon/search/searchcursor.js'
import 'codemirror/addon/search/search.js'
import 'codemirror/keymap/emacs.js'
// 引入代码自动提示插件
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/show-hint'
export default {
name: 'CalcFieldEdit',
components: { codemirror, draggable },
props: {
param: {
type: Object,
required: true
},
tableFields: {
type: Object,
required: true
}
},
data() {
return {
fieldForm: {
name: '',
groupType: 'd',
deType: 0
},
fieldExp: '',
cmOption: {
tabSize: 2,
styleActiveLine: true,
lineNumbers: true,
line: true,
mode: 'text/x-sql',
theme: 'solarized',
hintOptions: { // 自定义提示选项
completeSingle: false // 当匹配只有一项的时候是否自动补全
}
},
fields: [
{ label: this.$t('dataset.text'), value: 0 },
{ label: this.$t('dataset.time'), value: 1 },
{ label: this.$t('dataset.value'), value: 2 },
{ label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3 },
{ label: this.$t('dataset.location'), value: 5 }
],
functions: [
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' },
{ name: 'ABS(n)' }
]
}
},
computed: {
codemirror() {
return this.$refs.myCm.codemirror
}
},
mounted() {
this.$refs.myCm.codemirror.on('keypress', () => {
this.$refs.myCm.codemirror.showHint()
})
},
methods: {
onCmReady(cm) {
this.codemirror.setSize('-webkit-fill-available', 'auto')
},
onCmFocus(cm) {
// console.log('the editor is focus!', cm)
},
onCmCodeChange(newCode) {
// console.log(newCode)
this.fieldExp = newCode
},
insertParamToCodeMirror(param) {
const pos1 = this.$refs.myCm.codemirror.getCursor()
const pos2 = {}
pos2.line = pos1.line
pos2.ch = pos1.ch
this.$refs.myCm.codemirror.replaceRange(param, pos2)
}
}
}
</script>
<style scoped>
.row-style>>>.el-form-item__label{
font-size: 12px;
}
.row-style>>>.el-form-item--mini.el-form-item{
margin-bottom: 10px;
}
.row-style>>>.el-form-item__content{
display: flex;
flex-direction: row;
width: 100%;
}
.codemirror {
height: 300px;
overflow-y: auto;
font-size: 12px;
}
.codemirror >>> .CodeMirror-scroll {
height: 300px;
overflow-y: auto;
font-size: 12px;
}
.padding-lr {
padding: 0 6px;
}
.field-height{
height: calc(50% - 20px);
}
.drag-list {
height: calc(100% - 26px);
overflow:auto;
}
.item-dimension {
padding: 2px 10px;
margin: 2px 2px 0 2px;
border: solid 1px #eee;
text-align: left;
color: #606266;
/*background-color: rgba(35,46,64,.05);*/
background-color: white;
display: block;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.item-dimension + .item-dimension {
margin-top: 2px;
}
.item-dimension:hover {
color: #1890ff;
background: #e8f4ff;
border-color: #a3d3ff;
cursor: pointer;
}
.item-quota {
padding: 2px 10px;
margin: 2px 2px 0 2px;
border: solid 1px #eee;
text-align: left;
color: #606266;
/*background-color: rgba(35,46,64,.05);*/
background-color: white;
display: block;
word-break: break-all;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.item-quota + .item-quota {
margin-top: 2px;
}
.item-quota:hover {
color: #67c23a;
background: #f0f9eb;
border-color: #b2d3a3;
cursor: pointer;
}
span{
font-size: 12px;
}
.function-style{
color: #0a7be0;
display: block;
padding: 2px 4px;
cursor: pointer;
margin: 4px 0;
}
.function-height{
height: calc(100% - 20px);
overflow: auto;
}
</style>
frontend/src/views/dataset/data/FieldEdit.vue
浏览文件 @ a680a181
<template>
<el-row :style="{height: maxHeight,overflow:'auto'}">
<!-- <el-row style="height: 26px;">-->
<!-- <span style="line-height: 26px;">-->
<!-- {{ $t('dataset.field_edit') }}-->
<!-- <span>{{ param.name }}</span>-->
<!-- </span>-->
<!-- <el-row style="float: right">-->
<!-- <el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>-->
<!-- <el-button type="primary" size="mini" @click="saveEdit">{{ $t('dataset.confirm') }}</el-button>-->
<!-- </el-row>-->
<!-- </el-row>-->
<!-- <el-divider />-->
<el-row>
<el-row style="height: 26px;">
<span style="line-height: 26px;">
{{ $t('dataset.field_edit') }}
<span>{{ param.table.name }}</span>
</span>
<el-row style="float: right">
<el-button size="mini" @click="closeEdit">{{ $t('dataset.cancel') }}</el-button>
<el-button type="primary" size="mini" @click="saveEdit">{{ $t('dataset.confirm') }}</el-button>
</el-row>
<el-form :inline="true">
<el-form-item class="form-item">
<el-button v-if="hasDataPermission('manage',param.privileges)" size="mini" @click="addCalcField">{{ $t('dataset.add_calc_field') }}</el-button>
</el-form-item>
<el-form-item class="form-item" style="float: right;">
<el-input
v-model="searchField"
size="mini"
:placeholder="$t('dataset.search')"
prefix-icon="el-icon-search"
clearable
/>
</el-form-item>
</el-form>
</el-row>
<el-divider />
<el-collapse v-model="fieldActiveNames" class="style-collapse">
<el-collapse-item name="d" :title="$t('chart.dimension')">
<el-table :data="tableFields.dimensionList" size="mini">
<el-table :data="tableFields.dimensionListData" size="mini">
<el-table-column property="checked" :label="$t('dataset.field_check')" width="60">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" :disabled="!hasDataPermission('manage',param.privileges)" @change="saveEdit" />
</template>
</el-table-column>
<el-table-column property="name" :label="$t('dataset.field_name')" width="180">
<template slot-scope="scope">
<el-input v-model="scope.row.name" size="mini" :disabled="!hasDataPermission('manage',param.privileges)" @blur="saveEdit" @keyup.enter.native="saveEdit" />
</template>
</el-table-column>
<el-table-column v-if="!(param.mode === 0 && param.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
<template slot-scope="scope">
<span :title="scope.row.originName" class="field-class" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
<span style="font-size: 12px;">{{ scope.row.originName }}</span>
</span>
</template>
</el-table-column>
<el-table-column property="deType" :label="$t('dataset.field_type')" width="140">
<template slot-scope="scope">
<el-select v-model="scope.row.deType" size="mini" style="display: inline-block;width: 26px;">
<el-select v-model="scope.row.deType" size="mini" style="display: inline-block;width: 26px;" :disabled="!hasDataPermission('manage',param.privileges)" @change="saveEdit">
<el-option
v-for="item in fields"
:key="item.value"
......@@ -77,41 +110,49 @@
</span>
</template>
</el-table-column>
<el-table-column property="name" :label="$t('dataset.field_name')" width="180">
<!-- <el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">-->
<!-- <template slot-scope="scope">-->
<!-- <el-radio-group v-model="scope.row.groupType" size="mini">-->
<!-- <el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>-->
<!-- <el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column property="groupType" :label="$t('dataset.d_q_trans')" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.name" size="mini" />
<el-button icon="el-icon-sort" size="mini" circle :disabled="!hasDataPermission('manage',param.privileges)" @click="dqTrans(scope.row,'d')" />
</template>
</el-table-column>
<el-table-column v-if="!(param.table.mode === 0 && param.table.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
<el-table-column property="" :label="$t('dataset.operator')">
<template slot-scope="scope">
<span :title="scope.row.originName" class="field-class" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
<span style="font-size: 12px;">{{ scope.row.originName }}</span>
</span>
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
<el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">
</el-table>
</el-collapse-item>
<el-collapse-item name="q" :title="$t('chart.quota')">
<el-table :data="tableFields.quotaListData" size="mini">
<el-table-column property="checked" :label="$t('dataset.field_check')" width="60">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.groupType" size="mini">
<el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
<el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
</el-radio-group>
<el-checkbox v-model="scope.row.checked" :disabled="!hasDataPermission('manage',param.privileges)" @change="saveEdit" />
</template>
</el-table-column>
<el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
<el-table-column property="name" :label="$t('dataset.field_name')" width="180">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" />
<el-input v-model="scope.row.name" size="mini" :disabled="!hasDataPermission('manage',param.privileges)" @blur="saveEdit" @keyup.enter.native="saveEdit" />
</template>
</el-table-column>
<el-table-column v-if="!(param.mode === 0 && param.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
<template slot-scope="scope">
<span :title="scope.row.originName" class="field-class" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
<span style="font-size: 12px;">{{ scope.row.originName }}</span>
</span>
</template>
</el-table-column>
<!--下面这一列占位-->
<el-table-column property="" />
</el-table>
</el-collapse-item>
<el-collapse-item name="q" :title="$t('chart.quota')">
<el-table :data="tableFields.quotaList" size="mini">
<el-table-column property="deType" :label="$t('dataset.field_type')" width="140">
<template slot-scope="scope">
<el-select v-model="scope.row.deType" size="mini" style="display: inline-block;width: 26px;">
<el-select v-model="scope.row.deType" size="mini" style="display: inline-block;width: 26px;" :disabled="!hasDataPermission('manage',param.privileges)" @change="saveEdit">
<el-option
v-for="item in fields"
:key="item.value"
......@@ -171,43 +212,51 @@
</span>
</template>
</el-table-column>
<el-table-column property="name" :label="$t('dataset.field_name')" width="180">
<!-- <el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">-->
<!-- <template slot-scope="scope">-->
<!-- <el-radio-group v-model="scope.row.groupType" size="mini">-->
<!-- <el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>-->
<!-- <el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>-->
<!-- </el-radio-group>-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column property="groupType" :label="$t('dataset.d_q_trans')" width="120">
<template slot-scope="scope">
<el-input v-model="scope.row.name" size="mini" />
<el-button icon="el-icon-sort" size="mini" circle :disabled="!hasDataPermission('manage',param.privileges)" @click="dqTrans(scope.row,'q')" />
</template>
</el-table-column>
<el-table-column v-if="!(param.table.mode === 0 && param.table.type === 'custom')" property="originName" :label="$t('dataset.field_origin_name')" width="100">
<el-table-column property="" :label="$t('dataset.operator')">
<template slot-scope="scope">
<span :title="scope.row.originName" class="field-class" style="width: 100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
<span style="font-size: 12px;">{{ scope.row.originName }}</span>
</span>
</template>
</el-table-column>
<el-table-column property="groupType" :label="$t('dataset.field_group_type')" width="180">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.groupType" size="mini">
<el-radio-button label="d">{{ $t('chart.dimension') }}</el-radio-button>
<el-radio-button label="q">{{ $t('chart.quota') }}</el-radio-button>
</el-radio-group>
</template>
</el-table-column>
<el-table-column property="checked" :label="$t('dataset.field_check')" width="80">
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked" />
<el-button type="text" size="small">编辑</el-button>
</template>
</el-table-column>
<!--下面这一列占位-->
<el-table-column property="" />
</el-table>
</el-collapse-item>
</el-collapse>
<el-dialog
v-dialogDrag
:visible="editCalcField"
:show-close="false"
class="dialog-css"
:destroy-on-close="true"
:title="$t('dataset.add_calc_field')"
>
<calc-field-edit :param="param" :table-fields="tableFields" />
<div slot="footer" class="dialog-footer">
<el-button size="mini" @click="closeCalcField">{{ $t('chart.cancel') }}</el-button>
<el-button type="primary" size="mini">{{ $t('chart.confirm') }}</el-button>
</div>
</el-dialog>
</el-row>
</template>
<script>
import { batchEdit, fieldListDQ } from '@/api/dataset/dataset'
import CalcFieldEdit from './CalcFieldEdit'
export default {
name: 'FieldEdit',
components: { CalcFieldEdit },
props: {
param: {
type: Object,
......@@ -219,7 +268,9 @@ export default {
maxHeight: 'auto',
tableFields: {
dimensionList: [],
quotaList: []
quotaList: [],
dimensionListData: [],
quotaListData: []
},
fields: [
{ label: this.$t('dataset.text'), value: 0 },
......@@ -228,11 +279,18 @@ export default {
{ label: this.$t('dataset.value') + '(' + this.$t('dataset.float') + ')', value: 3 },
{ label: this.$t('dataset.location'), value: 5 }
],
fieldActiveNames: ['d', 'q']
fieldActiveNames: ['d', 'q'],
searchField: '',
editCalcField: false
}
},
watch: {
'param': function() {
this.initField()
},
searchField(val) {
this.filterField(val)
}
},
mounted() {
window.onresize = () => {
......@@ -250,20 +308,51 @@ export default {
}, 10)
},
initField() {
fieldListDQ(this.param.table.id).then(response => {
fieldListDQ(this.param.id).then(response => {
this.tableFields = response.data
this.tableFields.dimensionListData = JSON.parse(JSON.stringify(this.tableFields.dimensionList))
this.tableFields.quotaListData = JSON.parse(JSON.stringify(this.tableFields.quotaList))
this.filterField(this.searchField)
})
},
saveEdit() {
// console.log(this.tableFields)
const list = this.tableFields.dimensionList.concat(this.tableFields.quotaList)
const list = this.tableFields.dimensionListData.concat(this.tableFields.quotaListData)
batchEdit(list).then(response => {
this.closeEdit()
// this.closeEdit()
this.initField()
})
},
closeEdit() {
this.$emit('switchComponent', { name: 'ViewTable', param: this.param.table })
this.$emit('switchComponent', { name: 'ViewTable', param: this.param })
},
dqTrans(item, val) {
if (val === 'd') {
item.groupType = 'q'
} else if (val === 'q') {
item.groupType = 'd'
}
this.saveEdit()
},
addCalcField() {
this.editCalcField = true
},
closeCalcField() {
this.editCalcField = false
},
filterField(val) {
if (val && val !== '') {
this.tableFields.dimensionListData = JSON.parse(JSON.stringify(this.tableFields.dimensionListData.filter(ele => { return ele.name.includes(val) })))
this.tableFields.quotaListData = JSON.parse(JSON.stringify(this.tableFields.quotaList.filter(ele => { return ele.name.includes(val) })))
} else {
this.tableFields.dimensionListData = JSON.parse(JSON.stringify(this.tableFields.dimensionList))
this.tableFields.quotaListData = JSON.parse(JSON.stringify(this.tableFields.quotaList))
}
}
}
}
......@@ -299,4 +388,23 @@ export default {
.style-collapse{
border-top: 0 solid #e6ebf5!important;
}
.form-item {
margin-bottom: 6px;
}
.dialog-css>>>.el-dialog__title {
font-size: 14px;
}
.dialog-css >>> .el-dialog__header {
padding: 20px 20px 0;
}
.dialog-css >>> .el-dialog__body {
padding: 10px 20px 20px;
}
.dialog-css>>>.el-dialog{
width: 800px!important;
}
.dialog-css>>>.el-dialog__footer{
border-top: 1px solid #eee;
}
</style>
frontend/src/views/dataset/data/ViewTable.vue
浏览文件 @ a680a181
......@@ -34,9 +34,9 @@
<el-button v-if="table.type ==='sql'" size="mini" @click="editSql">
{{ $t('dataset.edit_sql') }}
</el-button>
<el-button size="mini" @click="edit">
{{ $t('dataset.edit_field') }}
</el-button>
<!-- <el-button size="mini" @click="edit">-->
<!-- {{ $t('dataset.edit_field') }}-->
<!-- </el-button>-->
<!-- <el-button size="mini" type="primary" @click="createChart">-->
<!-- {{$t('dataset.create_view')}}-->
<!-- </el-button>-->
......@@ -44,10 +44,13 @@
</el-row>
<el-divider />
<el-tabs v-model="tabActive">
<el-tabs v-model="tabActive" @tab-click="initTable(param.id)">
<el-tab-pane :label="$t('dataset.data_preview')" name="dataPreview">
<tab-data-preview :param="param" :table="table" :fields="fields" :data="data" :page="page" :form="tableViewRowForm" @reSearch="reSearch" />
</el-tab-pane>
<el-tab-pane :label="$t('dataset.field_manage')" name="fieldEdit">
<field-edit :param="param" />
</el-tab-pane>
<el-tab-pane v-if="table.type !== 'custom'" :label="$t('dataset.join_view')" name="joinView">
<union-view :param="param" :table="table" />
</el-tab-pane>
......@@ -64,10 +67,11 @@ import TabDataPreview from './TabDataPreview'
import UpdateInfo from './UpdateInfo'
import DatasetChartDetail from '../common/DatasetChartDetail'
import UnionView from './UnionView'
import FieldEdit from './FieldEdit'
export default {
name: 'ViewTable',
components: { UnionView, DatasetChartDetail, UpdateInfo, TabDataPreview },
components: { FieldEdit, UnionView, DatasetChartDetail, UpdateInfo, TabDataPreview },
props: {
param: {
type: Object,
......@@ -101,6 +105,7 @@ export default {
},
watch: {
'param': function() {
this.tabActive = 'dataPreview'
this.initTable(this.param.id)
}
},
......@@ -112,7 +117,6 @@ export default {
},
methods: {
initTable(id) {
this.tabActive = 'dataPreview'
this.tableViewRowForm.row = 1000
if (id !== null) {
this.fields = []
......
frontend/src/views/panel/edit/index.vue
浏览文件 @ a680a181
......@@ -543,8 +543,10 @@ export default {
this.$forceUpdate()
},
editDialog() {
if (this.curComponent && this.curComponent.serviceName) {
const serviceName = this.curComponent.serviceName
this.currentWidget = ApplicationContext.getService(serviceName)
}
this.currentFilterCom = this.curComponent
this.openFilterDialog()
},
......
frontend/src/views/panel/filter/filterDialog.vue
浏览文件 @ a680a181
......@@ -3,7 +3,7 @@
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]" class="de-dialog-container">
<de-aside-container :show-drag-bar="false" class="ms-aside-container">
<el-tabs v-model="activeName" class="filter-dialog-tabs">
<el-tab-pane :lazy="true" class="de-tab" :label="$t('panel.select_by_table')" name="dataset">
<el-tab-pane class="de-tab" :label="$t('panel.select_by_table')" name="dataset">
<div class="component-header filter-common">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="bread in dataSetBreads" :key="bread.label">
......@@ -56,7 +56,7 @@
@start="start1"
>
<transition-group>
<div v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))" :key="item.id" class="filter-db-row">
<div v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))" :key="item.id" :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'" class="filter-db-row">
<i class="el-icon-s-data" />
<span> {{ item.name }}</span>
</div>
......@@ -67,7 +67,7 @@
</el-col>
</div>
</el-tab-pane>
<el-tab-pane :lazy="true" class="de-tab" :label="$t('panel.select_by_module')" name="assembly">
<el-tab-pane class="de-tab" :label="$t('panel.select_by_module')" name="assembly">
<div class="component-header filter-common">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="bread in componentSetBreads" :key="bread.label">
......@@ -125,7 +125,7 @@
@start="start1"
>
<transition-group>
<div v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))" :key="item.id" class="filter-db-row">
<div v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))" :key="item.id" :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'" class="filter-db-row">
<i class="el-icon-s-data" />
<span> {{ item.name }}</span>
</div>
......@@ -318,7 +318,8 @@ export default {
timer: null,
expandedArray: [],
viewKeyWord: '',
titlePopovervisible: false
titlePopovervisible: false,
fieldsParent: null
}
},
computed: {
......@@ -344,15 +345,20 @@ export default {
this.componentInfo.options.attrs.datas = this.widget.optionDatas(res.data)
this.componentInfo.options.attrs.fieldId = fieldId
this.componentInfo.options.attrs.dragItems = values
this.componentInfo.options.attrs.activeName = this.activeName
this.componentInfo.options.attrs.fieldsParent = this.fieldsParent
this.$emit('re-fresh-component', this.componentInfo)
})
} else {
this.componentInfo.options.attrs.fieldId = fieldId
this.componentInfo.options.attrs.dragItems = values
this.componentInfo.options.attrs.activeName = this.activeName
this.componentInfo.options.attrs.fieldsParent = this.fieldsParent
this.$emit('re-fresh-component', this.componentInfo)
}
} else if (this.componentInfo && this.componentInfo.options.attrs.fieldId) {
this.componentInfo.options.attrs.fieldId = null
this.componentInfo.options.attrs.activeName = null
this.$emit('re-fresh-component', this.componentInfo)
}
},
......@@ -377,10 +383,23 @@ export default {
if (this.componentInfo && this.componentInfo.options.attrs.dragItems) {
this.selectField = this.componentInfo.options.attrs.dragItems
}
this.initWithField()
this.loadViews()
},
methods: {
initWithField() {
if (this.componentInfo && this.componentInfo.options.attrs.activeName) {
this.activeName = this.componentInfo.options.attrs.activeName
if (this.componentInfo.options.attrs.fieldsParent) {
this.fieldsParent = this.componentInfo.options.attrs.fieldsParent
this.$nextTick(() => {
this.activeName === 'dataset' && this.showFieldDatas(this.fieldsParent)
this.activeName !== 'dataset' && this.comShowFieldDatas(this.fieldsParent)
})
}
}
},
getTreeData(val) {
if (val) {
this.isTreeSearch = true
......@@ -559,6 +578,7 @@ export default {
this.showDomType = 'field'
this.setTailLink(row)
this.addTail(row)
this.fieldsParent = row
this.loadField(row.id)
},
comShowFieldDatas(row) {
......@@ -566,6 +586,7 @@ export default {
this.comShowDomType = 'field'
this.comSetTailLink(row)
this.comAddTail(row)
this.fieldsParent = row
this.comLoadField(row.tableId)
},
onMove(e, originalEvent) {
......@@ -760,15 +781,33 @@ export default {
color: #409EFF;
}
.filter-db-row {
:hover {
cursor: pointer;
}
i {
color: #409EFF;
color: #3685f2;
}
// background-color: #3685f2;
// color: #fff;
}
.filter-db-row:hover {
background-color: #f5f7fa !important;
cursor: pointer;
}
.filter-db-row-checked:hover {
background-color: #f5f7fa !important;
color: inherit;
cursor: pointer;
i {
background-color: inherit;
color: #3685f2;
}
}
.filter-db-row-checked {
background-color: #3685f2 !important;
color: #fff;
i {
background-color: #3685f2;
color: #fff;
}
}
.draggable-group {
display: inline-block;
width: 100%;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论