forked from github/dataease
feat: 字段管理多处优化，初步完成字段公式编辑前端UI
This commit is contained in:
junjie
parent
3c5002443f
commit
35a7da380b
@ -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',
|
||||
|
||||
@ -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: '數據源',
|
||||
|
||||
@ -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: '数据源',
|
||||
|
||||
@ -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>
|
||||
|
||||
337
frontend/src/views/dataset/data/CalcFieldEdit.vue
Normal file
337
frontend/src/views/dataset/data/CalcFieldEdit.vue
Normal file
@ -0,0 +1,337 @@
|
||||
<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>
|
||||
@ -1,23 +1,56 @@
|
||||
<template>
|
||||
<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-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-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">
|
||||
<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" />
|
||||
</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 :data="tableFields.quotaListData" 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"
|
||||
@ -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>
|
||||
<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">
|
||||
<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" />
|
||||
</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,24 @@ 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: 70%!important;
|
||||
min-width: 600px;
|
||||
}
|
||||
.dialog-css>>>.el-dialog__footer{
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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 = []
|
||||
|
||||
Loading…
Reference in New Issue
Block a user