forked from github/dataease
feat(数据集): 关联数据集
This commit is contained in:
junjie
parent
4848185ba5
commit
79349604fe
@ -1159,7 +1159,8 @@ export default {
|
||||
edit_union: 'Edit Union Dataset',
|
||||
union: 'Union',
|
||||
edit_union_relation: 'Edit Union Relation',
|
||||
add_union_relation: 'Add Union Relation'
|
||||
add_union_relation: 'Add Union Relation',
|
||||
field_select: 'Select Field'
|
||||
},
|
||||
datasource: {
|
||||
datasource: 'Data Source',
|
||||
|
||||
@ -1160,7 +1160,8 @@ export default {
|
||||
edit_union: '編輯關聯數據集',
|
||||
union: '關聯',
|
||||
edit_union_relation: '編輯關聯關系',
|
||||
add_union_relation: '新建關聯關系'
|
||||
add_union_relation: '新建關聯關系',
|
||||
field_select: '字段選擇'
|
||||
},
|
||||
datasource: {
|
||||
datasource: '數據源',
|
||||
|
||||
@ -1162,7 +1162,8 @@ export default {
|
||||
edit_union: '编辑关联数据集',
|
||||
union: '关联',
|
||||
edit_union_relation: '编辑关联关系',
|
||||
add_union_relation: '新建关联关系'
|
||||
add_union_relation: '新建关联关系',
|
||||
field_select: '字段选择'
|
||||
},
|
||||
datasource: {
|
||||
datasource: '数据源',
|
||||
|
||||
@ -50,7 +50,7 @@
|
||||
</div>
|
||||
|
||||
<!--选择数据集-->
|
||||
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close>
|
||||
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="360px" class="dialog-css" destroy-on-close>
|
||||
<dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" />
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
|
||||
@ -59,7 +59,7 @@
|
||||
</el-dialog>
|
||||
|
||||
<!--编辑关联关系-->
|
||||
<el-dialog v-dialogDrag :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="50%" class="dialog-css" destroy-on-close>
|
||||
<el-dialog v-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css">
|
||||
<union-edit :union-param="unionParam" />
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
</div>
|
||||
|
||||
<!--选择数据集-->
|
||||
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="30%" class="dialog-css" destroy-on-close>
|
||||
<el-dialog v-dialogDrag :title="$t('chart.select_dataset')" :visible="selectDsDialog" :show-close="false" width="360px" class="dialog-css" destroy-on-close>
|
||||
<dataset-group-selector-tree :fix-height="true" show-mode="union" :custom-type="customType" @getTable="firstDs" />
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeSelectDs()">{{ $t('dataset.cancel') }}</el-button>
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
<template>
|
||||
<div v-if="unionParam.type" style="height:400px;">
|
||||
<div v-if="unionParam.type" style="height:600px;">
|
||||
<div class="field-style">
|
||||
<div class="fields">
|
||||
<p>{{ unionParam.parent.currentDs.name }}</p>
|
||||
<div style="height: 150px;width: 100%;overflow-y: auto">
|
||||
<p v-for="item in parentField" :key="item.id">
|
||||
{{ item.name }}
|
||||
</p>
|
||||
</div>
|
||||
<union-field-list :field-list="parentField" :union-param="unionParam" />
|
||||
</div>
|
||||
<div class="fields">
|
||||
<p>{{ unionParam.node.currentDs.name }}</p>
|
||||
<union-field-list :field-list="nodeField" :union-param="unionParam" />
|
||||
</div>
|
||||
</div>
|
||||
<el-divider />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { post } from '@/api/dataset/dataset'
|
||||
import UnionFieldList from '@/views/dataset/add/union/UnionFieldList'
|
||||
|
||||
export default {
|
||||
name: 'UnionEdit',
|
||||
components: { UnionFieldList },
|
||||
props: {
|
||||
unionParam: {
|
||||
type: Object,
|
||||
@ -59,17 +59,21 @@ export default {
|
||||
|
||||
<style scoped>
|
||||
.field-style{
|
||||
height: 180px;
|
||||
height: 300px;
|
||||
}
|
||||
.fields{
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box; /* Firefox */
|
||||
-webkit-box-sizing: border-box; /* Safari */
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
width: 50%;
|
||||
float: left;
|
||||
padding: 0 4px;
|
||||
padding: 0 6px;
|
||||
}
|
||||
p{
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
margin: 6px 0!important;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 12px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
170
frontend/src/views/dataset/add/union/UnionFieldList.vue
Normal file
170
frontend/src/views/dataset/add/union/UnionFieldList.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="field-block-style">
|
||||
<div class="field-block-option">
|
||||
<span class="option-field">{{ $t('dataset.field_select') }}({{ checkedFields.length }}/{{ fieldList.length }})</span>
|
||||
<el-input
|
||||
v-model="search"
|
||||
size="mini"
|
||||
:placeholder="$t('dataset.search')"
|
||||
prefix-icon="el-icon-search"
|
||||
clearable
|
||||
class="option-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="field-block-head">
|
||||
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" class="check-style" @change="handleCheckAllChange"> </el-checkbox>
|
||||
<span class="label-style">
|
||||
<span class="field-origin-style">{{ $t('dataset.field_origin_name') }}</span>
|
||||
<span class="field-style">{{ $t('dataset.field_name') }}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="field-block-body">
|
||||
<el-checkbox-group v-model="checkedFields" @change="handleCheckedCitiesChange">
|
||||
<div v-for="field in fieldSearchList" :key="field.id" class="field-item-style">
|
||||
<el-checkbox :label="field.id" class="check-style"> </el-checkbox>
|
||||
<span class="label-style">
|
||||
<span class="field-origin-style" :title="field.originName">
|
||||
<span>
|
||||
<svg-icon v-if="field.deType === 0" icon-class="field_text" class="field-icon-text" />
|
||||
<svg-icon v-if="field.deType === 1" icon-class="field_time" class="field-icon-time" />
|
||||
<svg-icon v-if="field.deType === 2 || field.deType === 3" icon-class="field_value" class="field-icon-value" />
|
||||
<svg-icon v-if="field.deType === 5" icon-class="field_location" class="field-icon-location" />
|
||||
</span>
|
||||
<span class="origin-style">
|
||||
{{ field.originName }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="field-style" :title="field.name">{{ field.name }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'UnionFieldList',
|
||||
props: {
|
||||
fieldList: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
unionParam: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkAll: false,
|
||||
isIndeterminate: false,
|
||||
checkedFields: [],
|
||||
search: '',
|
||||
fieldSearchList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
fieldList: function() {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
|
||||
this.init()
|
||||
},
|
||||
search: function(val) {
|
||||
if (val && val !== '') {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList)).filter(ele => ele.originName.toLocaleLowerCase().includes(val.toLocaleLowerCase()))
|
||||
} else {
|
||||
this.fieldSearchList = JSON.parse(JSON.stringify(this.fieldList))
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.checkedFields = this.unionParam.parent.currentDsField
|
||||
this.handleCheckedCitiesChange(this.checkedFields)
|
||||
},
|
||||
handleCheckAllChange(val) {
|
||||
this.checkedFields = val ? this.fieldList.map(ele => ele.id) : []
|
||||
this.isIndeterminate = false
|
||||
},
|
||||
handleCheckedCitiesChange(value) {
|
||||
const checkedCount = value.length
|
||||
this.checkAll = checkedCount === this.fieldList.length
|
||||
this.isIndeterminate = checkedCount > 0 && checkedCount < this.fieldList.length
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span{
|
||||
font-size: 12px;
|
||||
}
|
||||
.field-block-style{
|
||||
height: 300px;
|
||||
width: 100%;
|
||||
}
|
||||
.field-block-head{
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.field-block-body{
|
||||
height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.field-origin-style{
|
||||
width: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.field-style{
|
||||
margin-left: 10px;
|
||||
width: 100px;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: pre;
|
||||
}
|
||||
.label-style{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.field-item-style{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top:1px solid #dcdfe6;
|
||||
padding: 0 0 0 10px;
|
||||
}
|
||||
.check-style{
|
||||
width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.origin-style{
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
.field-block-option{
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.option-field{
|
||||
color: #C0C4CC;
|
||||
}
|
||||
.option-input{
|
||||
width: 120px;
|
||||
}
|
||||
</style>
|
||||
@ -32,7 +32,7 @@
|
||||
</div>
|
||||
|
||||
<!--编辑关联关系-->
|
||||
<el-dialog v-dialogDrag :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="50%" class="dialog-css" destroy-on-close>
|
||||
<el-dialog v-if="editUnion" v-dialogDrag top="5vh" :title="unionParam.type === 'add' ? $t('dataset.add_union_relation') : $t('dataset.edit_union_relation')" :visible="editUnion" :show-close="false" width="600px" class="dialog-css" destroy-on-close>
|
||||
<union-edit :union-param="unionParam" />
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="closeEditUnion()">{{ $t('dataset.cancel') }}</el-button>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user