feat: 数据集编辑页面引入标签选择器;编辑页面使用mixins,提取重复的部分

数据集编辑页面引入标签选择器;编辑页面使用mixins,提取重复的部分
main
hong.yang 2 years ago
parent 66bca49873
commit 827a1edca3

@ -150,6 +150,21 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item
label="关联标签"
prop="labelIds"
>
<label-select
:dataset-id="datasetId"
:id-list="dataForm.labelIds"
@commit="(ids) =>{dataForm.labelIds = ids}"
>
</label-select>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<div <div
v-if="isEdit" v-if="isEdit"
@ -734,6 +749,7 @@
</template> </template>
<script> <script>
import LabelSelect from 'packages/DataSetLabelManagement/src/LabelSelect.vue'
import { import {
nameCheckRepeat, nameCheckRepeat,
datasetAdd, datasetAdd,
@ -748,33 +764,14 @@ import 'codemirror/mode/sql/sql.js'
import 'codemirror/theme/nord.css' import 'codemirror/theme/nord.css'
import 'codemirror/lib/codemirror.css' import 'codemirror/lib/codemirror.css'
import _ from 'lodash' import _ from 'lodash'
import { datasetMixins } from 'packages/js/mixins/datasetMixin'
export default { export default {
name: 'CustomEditForm', name: 'CustomEditForm',
components: { components: {
codemirror codemirror,
}, LabelSelect
props: {
isEdit: {
type: Boolean,
default: false
},
datasetId: {
type: String,
default: null
},
datasetName: {
type: String,
default: ''
},
typeId: {
type: String,
default: ''
},
appCode: {
type: String,
default: ''
}
}, },
mixins: [datasetMixins],
data () { data () {
const validateName = (rule, value, callback) => { const validateName = (rule, value, callback) => {
nameCheckRepeat({ nameCheckRepeat({
@ -796,6 +793,7 @@ export default {
typeId: '', typeId: '',
datasetType: 'custom', datasetType: 'custom',
remark: '', remark: '',
labelIds: [],
// config // config
sourceId: '', sourceId: '',
sqlProcess: 'select ', sqlProcess: 'select ',
@ -826,30 +824,10 @@ export default {
}, },
sourceList: [], sourceList: [],
activeName: 'data', activeName: 'data',
dataPreviewList: [],
structurePreviewList: [],
structurePreviewListCopy: [],
msg: '', msg: '',
exception: '', exception: '',
typeSelect: [
{ value: 'String' },
{ value: 'Integer' },
{ value: 'Double' },
{ value: 'Long' },
{ value: 'Date' }
],
typeName: '',
categoryData: [],
passTest: false, // passTest: false, //
current: 1,
size: 10,
totalCount: 0,
fieldDescVisible: false,
fieldsetVisible: false,
paramsVisible: false, paramsVisible: false,
tableLoading: false,
saveLoading: false,
saveText: '',
tableNameList: [], tableNameList: [],
paramsListCopy: [], paramsListCopy: [],
isTest: false // isTest: false //
@ -990,46 +968,6 @@ export default {
} }
this.paramsVisible = false this.paramsVisible = false
}, },
/**
* 使用字段名填充字段描述
*/
fieldDescFill () {
this.structurePreviewList.forEach(field => {
if (field.fieldDesc === '' || !field.hasOwnProperty('fieldDesc')) {
field.fieldDesc = field.fieldName
}
})
this.save('form')
this.fieldDescVisible = false
},
/**
* 打开字段描述编辑弹窗
*/
fieldDescEdit () {
this.fieldDescVisible = false
this.fieldsetVisible = true
},
/**
* 跳过字段描述编辑直接保存
*/
toSave () {
this.save('form', true)
this.fieldDescVisible = false
},
/**
* 取消编辑字段
*/
cancelField () {
this.structurePreviewListCopy = _.cloneDeep(this.structurePreviewList)
this.fieldsetVisible = false
},
/**
* 保存字段设置
*/
setField () {
this.structurePreviewList = _.cloneDeep(this.structurePreviewListCopy)
this.fieldsetVisible = false
},
/** /**
* 保存 * 保存
* @param formName 表单名称 * @param formName 表单名称
@ -1117,6 +1055,7 @@ export default {
sourceId: this.dataForm.sourceId, sourceId: this.dataForm.sourceId,
moduleCode: this.appCode, moduleCode: this.appCode,
editable: this.appCode ? 1 : 0, editable: this.appCode ? 1 : 0,
labelIds: this.dataForm.labelIds,
config: { config: {
className: 'com.gccloud.dataset.entity.config.CustomDataSetConfig', className: 'com.gccloud.dataset.entity.config.CustomDataSetConfig',
sourceId: this.dataForm.sourceId, sourceId: this.dataForm.sourceId,
@ -1262,56 +1201,6 @@ export default {
this.passTest = false this.passTest = false
this.saveLoading = false this.saveLoading = false
}) })
},
/**
* 清空分类选择
*/
clearType () {
this.typeName = ''
this.dataForm.typeId = ''
},
/**
* 分类展开高亮
* @param $event
*/
setCurrentNode ($event) {
if ($event) {
const key = this.dataForm.typeId || null
this.$refs.categorySelectTree.setCurrentKey(key)
}
},
/**
* 分类选择
* @param value
*/
selectParentCategory (value) {
this.dataForm.typeId = value.id
this.typeName = value.name
this.$refs.selectParentName.blur()
},
goBack () {
this.$emit('back')
},
//
sizeChangeHandle (value) {
this.size = value
this.current = 1
this.datasetTest(false)
},
//
currentChangeHandle (value) {
this.current = value
this.datasetTest(false)
},
//
renderHeader (h, { column, index }) {
const labelLong = column.label.length // label
const size = 14 // 使
column.minWidth = labelLong * size < 120 ? 120 : labelLong * size // label
return h('span', { class: 'cell-content', style: { width: '100%' } }, [column.label])
},
openNewWindow (url) {
window.open(url, '_blank')
} }
} }
} }

@ -125,6 +125,19 @@
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12">
<el-form-item
label="关联标签"
prop="labelIds"
>
<label-select
:dataset-id="datasetId"
:id-list="dataForm.labelIds"
@commit="(ids) =>{dataForm.labelIds = ids}"
>
</label-select>
</el-form-item>
</el-col>
</el-row> </el-row>
</el-form> </el-form>
<div class="card-border"> <div class="card-border">
@ -323,39 +336,20 @@
</template> </template>
<script> <script>
import LabelSelect from 'packages/DataSetLabelManagement/src/LabelSelect.vue'
import vueJsonEditor from 'vue-json-editor' import vueJsonEditor from 'vue-json-editor'
import vueJsonViewer from 'vue-json-viewer' import vueJsonViewer from 'vue-json-viewer'
import { getCategoryTree, datasetAdd, datasetUpdate, getDataset, nameCheckRepeat } from 'packages/js/utils/datasetConfigService' import { getCategoryTree, datasetAdd, datasetUpdate, getDataset, nameCheckRepeat } from 'packages/js/utils/datasetConfigService'
import _ from 'lodash' import _ from 'lodash'
import { datasetMixins } from 'packages/js/mixins/datasetMixin'
export default { export default {
name: 'JsonEditForm', name: 'JsonEditForm',
components: { components: {
vueJsonEditor, vueJsonEditor,
vueJsonViewer vueJsonViewer,
}, LabelSelect
props: {
isEdit: {
type: Boolean,
default: false
},
datasetId: {
type: String,
default: null
},
datasetName: {
type: String,
default: ''
},
typeId: {
type: String,
default: ''
},
appCode: {
type: String,
default: ''
}
}, },
mixins: [datasetMixins],
data () { data () {
const validateName = (rule, value, callback) => { const validateName = (rule, value, callback) => {
nameCheckRepeat({ nameCheckRepeat({
@ -377,6 +371,7 @@ export default {
typeId: '', typeId: '',
datasetType: 'json', datasetType: 'json',
remark: '', remark: '',
labelIds: [],
// config // config
json: '', json: '',
fieldDesc: {}, fieldDesc: {},
@ -388,16 +383,7 @@ export default {
{ validator: validateName, trigger: 'blur' } { validator: validateName, trigger: 'blur' }
] ]
}, },
typeName: '',
categoryData: [],
structurePreviewList: [],
structurePreviewListCopy: [],
dataPreviewList: [],
fieldsetVisible: false,
fieldDescVisible: false,
passTest: false, // passTest: false, //
saveLoading: false,
saveText: ''
} }
}, },
mounted () { mounted () {
@ -488,6 +474,7 @@ export default {
remark: this.dataForm.remark, remark: this.dataForm.remark,
moduleCode: this.appCode, moduleCode: this.appCode,
editable: this.appCode ? 1 : 0, editable: this.appCode ? 1 : 0,
labelIds: this.dataForm.labelIds,
config: { config: {
className: 'com.gccloud.dataset.entity.config.JsonDataSetConfig', className: 'com.gccloud.dataset.entity.config.JsonDataSetConfig',
json: JSON.stringify(this.dataForm.json), json: JSON.stringify(this.dataForm.json),
@ -524,13 +511,6 @@ export default {
this.save('form') this.save('form')
this.fieldDescVisible = false this.fieldDescVisible = false
}, },
/**
* 进入字段描述编辑弹窗
*/
fieldDescEdit () {
this.fieldDescVisible = false
this.fieldsetVisible = true
},
/** /**
* 跳过字段描述编辑直接保存 * 跳过字段描述编辑直接保存
*/ */
@ -542,13 +522,6 @@ export default {
this.save('form', true) this.save('form', true)
this.fieldDescVisible = false this.fieldDescVisible = false
}, },
/**
* 取消字段描述编辑
*/
cancelField () {
this.structurePreviewListCopy = _.cloneDeep(this.structurePreviewList)
this.fieldsetVisible = false
},
/** /**
* 保存字段描述编辑 * 保存字段描述编辑
*/ */
@ -681,52 +654,6 @@ export default {
fieldDesc[field.fieldName] = field.fieldDesc fieldDesc[field.fieldName] = field.fieldDesc
}) })
this.dataForm.fieldDesc = fieldDesc this.dataForm.fieldDesc = fieldDesc
},
/**
* 回到数据集列表页面
*/
goBack () {
this.$emit('back')
},
/**
* 表头添加提示
* @param h
* @param column
* @param index
* @returns {*}
*/
renderHeader (h, { column, index }) {
const labelLong = column.label.length // label
const size = 14 // 使
column.minWidth = labelLong * size < 120 ? 120 : labelLong * size // label
return h('span', { class: 'cell-content', style: { width: '100%' } }, [column.label])
},
/**
* 清空分类
*/
clearType () {
this.typeName = ''
this.dataForm.typeId = ''
},
/**
* 分类展开高亮
*/
setCurrentNode ($event) {
if ($event) {
const key = this.dataForm.typeId || null
this.$refs.categorySelectTree.setCurrentKey(key)
}
},
/**
* 分类选择
*/
selectParentCategory (value) {
this.dataForm.typeId = value.id
this.typeName = value.name
this.$refs.selectParentName.blur()
},
openNewWindow (url) {
window.open(url, '_blank')
} }
} }
} }

@ -251,6 +251,19 @@
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12">
<el-form-item
label="关联标签"
prop="labelIds"
>
<label-select
:dataset-id="datasetId"
:id-list="dataForm.labelIds"
@commit="(ids) =>{dataForm.labelIds = ids}"
>
</label-select>
</el-form-item>
</el-col>
</el-row> </el-row>
</el-form> </el-form>
</el-col> </el-col>
@ -468,6 +481,7 @@
</template> </template>
<script> <script>
import LabelSelect from 'packages/DataSetLabelManagement/src/LabelSelect.vue'
import { import {
getCategoryTree, getCategoryTree,
nameCheckRepeat, nameCheckRepeat,
@ -476,30 +490,13 @@ import {
} from 'packages/js/utils/datasetConfigService' } from 'packages/js/utils/datasetConfigService'
import { datasourceList, getSourceTable, getSourceView, getTableFieldList } from 'packages/js/utils/dataSourceService' import { datasourceList, getSourceTable, getSourceView, getTableFieldList } from 'packages/js/utils/dataSourceService'
import _ from 'lodash' import _ from 'lodash'
import { datasetMixins } from 'packages/js/mixins/datasetMixin'
export default { export default {
name: 'OriginalEditForm', name: 'OriginalEditForm',
props: { components: {
isEdit: { LabelSelect
type: Boolean,
default: false
},
datasetId: {
type: String,
default: null
},
datasetName: {
type: String,
default: ''
},
typeId: {
type: String,
default: ''
},
appCode: {
type: String,
default: ''
}
}, },
mixins: [datasetMixins],
data () { data () {
const validateName = (rule, value, callback) => { const validateName = (rule, value, callback) => {
nameCheckRepeat({ nameCheckRepeat({
@ -521,6 +518,7 @@ export default {
typeId: '', typeId: '',
datasetType: 'original', datasetType: 'original',
remark: '', remark: '',
labelIds: [],
// config // config
sourceId: '', sourceId: '',
repeatStatus: 1, repeatStatus: 1,
@ -544,9 +542,6 @@ export default {
{ required: true, message: '请选择是否去重', trigger: 'blur' } { required: true, message: '请选择是否去重', trigger: 'blur' }
] ]
}, },
typeName: '',
//
categoryData: [],
// //
sourceList: [], sourceList: [],
// //
@ -557,21 +552,7 @@ export default {
fieldList: [], fieldList: [],
isSelectAll: false, isSelectAll: false,
activeName: 'data', activeName: 'data',
//
dataPreviewList: [],
//
structurePreviewList: [],
//
structurePreviewListCopy: [],
tableLoading: false,
fieldDescVisible: false,
fieldsetVisible: false,
saveLoading: false,
saveText: '',
totalCount: 0,
currentCount: 0, currentCount: 0,
current: 1,
size: 10
} }
}, },
watch: { watch: {
@ -696,46 +677,6 @@ export default {
sql += ` FROM ${this.dataForm.tableName}` sql += ` FROM ${this.dataForm.tableName}`
return sql return sql
}, },
/**
* 取消字段描述编辑
*/
cancelField () {
this.structurePreviewListCopy = _.cloneDeep(this.structurePreviewList)
this.fieldsetVisible = false
},
/**
* 保存字段描述编辑
*/
setField () {
this.structurePreviewList = _.cloneDeep(this.structurePreviewListCopy)
this.fieldsetVisible = false
},
/**
* 使用字段名作为字段描述
*/
fieldDescFill () {
this.structurePreviewList.forEach(item => {
if (item.fieldDesc === '') {
item.fieldDesc = item.fieldName
}
})
this.save('form')
this.fieldDescVisible = false
},
/**
* 进入字段描述编辑弹窗
*/
fieldDescEdit () {
this.fieldDescVisible = false
this.fieldsetVisible = true
},
/**
* 跳过字段描述编辑直接保存
*/
toSave () {
this.save('form', true)
this.fieldDescVisible = false
},
/** /**
* 保存数据集 * 保存数据集
* @param formName 表单名称 * @param formName 表单名称
@ -774,6 +715,7 @@ export default {
remark: this.dataForm.remark, remark: this.dataForm.remark,
datasetType: 'original', datasetType: 'original',
sourceId: this.dataForm.sourceId, sourceId: this.dataForm.sourceId,
labelIds: this.dataForm.labelIds,
config: { config: {
className: 'com.gccloud.dataset.entity.config.OriginalDataSetConfig', className: 'com.gccloud.dataset.entity.config.OriginalDataSetConfig',
sourceId: this.dataForm.sourceId, sourceId: this.dataForm.sourceId,
@ -955,45 +897,6 @@ export default {
this.tableLoading = false this.tableLoading = false
}) })
}, },
/**
* 表头添加提示
*/
renderHeader (h, { column, index }) {
const labelLong = column.label.length // label
const size = 14 // 使
column.minWidth = labelLong * size < 120 ? 120 : labelLong * size // label
return h('span', { class: 'cell-content', style: { width: '100%' } }, [column.label])
},
/**
* 回到数据集列表页面
*/
goBack () {
this.$emit('back')
},
/**
* 清空分类
*/
clearType () {
this.typeName = ''
this.dataForm.typeId = ''
},
/**
* 分类展开高亮
*/
setCurrentNode ($event) {
if ($event) {
const key = this.dataForm.typeId || null
this.$refs.categorySelectTree.setCurrentKey(key)
}
},
/**
* 分类选择
*/
selectParentCategory (value) {
this.dataForm.typeId = value.id
this.typeName = value.name
this.$refs.selectParentName.blur()
},
// //
sizeChangeHandle (value) { sizeChangeHandle (value) {
this.size = value this.size = value
@ -1004,9 +907,6 @@ export default {
currentChangeHandle (value) { currentChangeHandle (value) {
this.current = value this.current = value
this.getData() this.getData()
},
openNewWindow (url) {
window.open(url, '_blank')
} }
} }
} }

@ -125,6 +125,19 @@
/> />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12">
<el-form-item
label="关联标签"
prop="labelIds"
>
<label-select
:dataset-id="datasetId"
:id-list="dataForm.labelIds"
@commit="(ids) =>{dataForm.labelIds = ids}"
>
</label-select>
</el-form-item>
</el-col>
</el-row> </el-row>
</el-form> </el-form>
<div <div
@ -517,6 +530,7 @@
</template> </template>
<script> <script>
import LabelSelect from 'packages/DataSetLabelManagement/src/LabelSelect.vue'
import { import {
nameCheckRepeat, nameCheckRepeat,
getCategoryTree, getCategoryTree,
@ -526,37 +540,17 @@ import {
} from 'packages/js/utils/datasetConfigService' } from 'packages/js/utils/datasetConfigService'
import { codemirror } from 'vue-codemirror' import { codemirror } from 'vue-codemirror'
import 'codemirror/mode/groovy/groovy' import 'codemirror/mode/groovy/groovy'
import 'codemirror/lib/codemirror.css' import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/nord.css' import 'codemirror/theme/nord.css'
import _ from 'lodash' import _ from 'lodash'
import { datasetMixins } from 'packages/js/mixins/datasetMixin'
export default { export default {
name: 'ScriptEditForm', name: 'ScriptEditForm',
components: { components: {
codemirror codemirror,
}, LabelSelect
props: {
isEdit: {
type: Boolean,
default: false
},
datasetId: {
type: String,
default: null
},
datasetName: {
type: String,
default: ''
},
typeId: {
type: String,
default: ''
},
appCode: {
type: String,
default: ''
}
}, },
mixins: [datasetMixins],
data () { data () {
const validateName = (rule, value, callback) => { const validateName = (rule, value, callback) => {
nameCheckRepeat({ nameCheckRepeat({
@ -578,6 +572,7 @@ export default {
typeId: '', typeId: '',
datasetType: 'script', datasetType: 'script',
remark: '', remark: '',
labelIds: [],
// config // config
script: '', script: '',
paramsList: [], paramsList: [],
@ -600,24 +595,7 @@ export default {
completeSingle: true completeSingle: true
} }
}, },
dataPreviewList: [],
structurePreviewList: [],
structurePreviewListCopy: [],
typeSelect: [
{ value: 'String' },
{ value: 'Integer' },
{ value: 'Double' },
{ value: 'Long' },
{ value: 'Date' }
],
typeName: '',
categoryData: [],
fieldDescVisible: false,
fieldsetVisible: false,
paramsVisible: false, paramsVisible: false,
tableLoading: false,
saveLoading: false,
saveText: '',
paramsListCopy: [], paramsListCopy: [],
isSet: false, // isSet: false, //
passTest: false, passTest: false,
@ -729,6 +707,7 @@ export default {
sourceId: this.dataForm.sourceId, sourceId: this.dataForm.sourceId,
moduleCode: this.appCode, moduleCode: this.appCode,
editable: this.appCode ? 1 : 0, editable: this.appCode ? 1 : 0,
labelIds: this.dataForm.labelIds,
config: { config: {
className: 'com.gccloud.dataset.entity.config.GroovyDataSetConfig', className: 'com.gccloud.dataset.entity.config.GroovyDataSetConfig',
script: this.dataForm.script, script: this.dataForm.script,
@ -795,46 +774,6 @@ export default {
this.scriptExecute() this.scriptExecute()
} }
}, },
/**
* 使用字段名填充字段描述
*/
fieldDescFill () {
this.structurePreviewList.forEach(field => {
if (field.fieldDesc === '' || !field.hasOwnProperty('fieldDesc')) {
field.fieldDesc = field.fieldName
}
})
this.save('form')
this.fieldDescVisible = false
},
/**
* 打开字段描述编辑弹窗
*/
fieldDescEdit () {
this.fieldDescVisible = false
this.fieldsetVisible = true
},
/**
* 跳过字段描述编辑直接保存
*/
toSave () {
this.save('form', true)
this.fieldDescVisible = false
},
/**
* 取消编辑字段
*/
cancelField () {
this.structurePreviewListCopy = _.cloneDeep(this.structurePreviewList)
this.fieldsetVisible = false
},
/**
* 保存字段设置
*/
setField () {
this.structurePreviewList = _.cloneDeep(this.structurePreviewListCopy)
this.fieldsetVisible = false
},
/** /**
* 字段描述构建及同步 * 字段描述构建及同步
*/ */
@ -905,36 +844,6 @@ export default {
require: 0, require: 0,
remark: '' remark: ''
}) })
},
//
clearType () {
this.typeName = ''
this.dataForm.typeId = ''
},
//
setCurrentNode ($event) {
if ($event) {
const key = this.dataForm.typeId || null
this.$refs.categorySelectTree.setCurrentKey(key)
}
},
//
selectParentCategory (value) {
this.dataForm.typeId = value.id
this.typeName = value.name
this.$refs.selectParentName.blur()
},
goBack () {
this.$emit('back')
},
renderHeader (h, { column, index }) {
const labelLong = column.label.length // label
const size = 14 // 使
column.minWidth = labelLong * size < 120 ? 120 : labelLong * size // label
return h('span', { class: 'cell-content', style: { width: '100%' } }, [column.label])
},
openNewWindow (url) {
window.open(url, '_blank')
} }
} }
} }

@ -150,6 +150,21 @@
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-row> </el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item
label="关联标签"
prop="labelIds"
>
<label-select
:dataset-id="datasetId"
:id-list="dataForm.labelIds"
@commit="(ids) =>{dataForm.labelIds = ids}"
>
</label-select>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<div <div
v-if="isEdit" v-if="isEdit"
@ -555,6 +570,7 @@
</template> </template>
<script> <script>
import LabelSelect from 'packages/DataSetLabelManagement/src/LabelSelect.vue'
import { import {
nameCheckRepeat, nameCheckRepeat,
datasetAdd, datasetAdd,
@ -574,7 +590,8 @@ import { datasetMixins } from 'packages/js/mixins/datasetMixin'
export default { export default {
name: 'StoredProcedureEditForm', name: 'StoredProcedureEditForm',
components: { components: {
codemirror codemirror,
LabelSelect
}, },
mixins: [datasetMixins], mixins: [datasetMixins],
data () { data () {
@ -598,6 +615,7 @@ export default {
typeId: '', typeId: '',
datasetType: 'storedProcedure', datasetType: 'storedProcedure',
remark: '', remark: '',
labelIds: [],
// config // config
sourceId: '', sourceId: '',
sqlProcess: 'call ', sqlProcess: 'call ',
@ -825,6 +843,7 @@ export default {
sourceId: this.dataForm.sourceId, sourceId: this.dataForm.sourceId,
moduleCode: this.appCode, moduleCode: this.appCode,
editable: this.appCode ? 1 : 0, editable: this.appCode ? 1 : 0,
labelIds: this.dataForm.labelIds,
config: { config: {
className: 'com.gccloud.dataset.entity.config.StoredProcedureDataSetConfig', className: 'com.gccloud.dataset.entity.config.StoredProcedureDataSetConfig',
sourceId: this.dataForm.sourceId, sourceId: this.dataForm.sourceId,

Loading…
Cancel
Save