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

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

data-room-ui/packages/DataSetManagement/src/CustomEditForm.vue

@@ -150,6 +150,21 @@
                 </el-form-item>
               </el-col>
             </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>
           <div
             v-if="isEdit"
@@ -734,6 +749,7 @@
 </template>
 
 <script>
+import LabelSelect from 'packages/DataSetLabelManagement/src/LabelSelect.vue'
 import {
   nameCheckRepeat,
   datasetAdd,
@@ -748,33 +764,14 @@ import 'codemirror/mode/sql/sql.js'
 import 'codemirror/theme/nord.css'
 import 'codemirror/lib/codemirror.css'
 import _ from 'lodash'
+import { datasetMixins } from 'packages/js/mixins/datasetMixin'
 export default {
   name: 'CustomEditForm',
   components: {
-    codemirror
-  },
-  props: {
-    isEdit: {
-      type: Boolean,
-      default: false
-    },
-    datasetId: {
-      type: String,
-      default: null
-    },
-    datasetName: {
-      type: String,
-      default: ''
-    },
-    typeId: {
-      type: String,
-      default: ''
-    },
-    appCode: {
-      type: String,
-      default: ''
-    }
+    codemirror,
+    LabelSelect
   },
+  mixins: [datasetMixins],
   data () {
     const validateName = (rule, value, callback) => {
       nameCheckRepeat({
@@ -796,6 +793,7 @@ export default {
         typeId: '',
         datasetType: 'custom',
         remark: '',
+        labelIds: [],
         // 以下为config配置
         sourceId: '',
         sqlProcess: 'select ',
@@ -826,30 +824,10 @@ export default {
       },
       sourceList: [],
       activeName: 'data',
-      dataPreviewList: [],
-      structurePreviewList: [],
-      structurePreviewListCopy: [],
       msg: '',
       exception: '',
-      typeSelect: [
-        { value: 'String' },
-        { value: 'Integer' },
-        { value: 'Double' },
-        { value: 'Long' },
-        { value: 'Date' }
-      ],
-      typeName: '',
-      categoryData: [],
       passTest: false, // 通过测试
-      current: 1,
-      size: 10,
-      totalCount: 0,
-      fieldDescVisible: false,
-      fieldsetVisible: false,
       paramsVisible: false,
-      tableLoading: false,
-      saveLoading: false,
-      saveText: '',
       tableNameList: [],
       paramsListCopy: [],
       isTest: false // 是否执行测试
@@ -990,46 +968,6 @@ export default {
       }
       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 表单名称
@@ -1117,6 +1055,7 @@ export default {
           sourceId: this.dataForm.sourceId,
           moduleCode: this.appCode,
           editable: this.appCode ? 1 : 0,
+          labelIds: this.dataForm.labelIds,
           config: {
             className: 'com.gccloud.dataset.entity.config.CustomDataSetConfig',
             sourceId: this.dataForm.sourceId,
@@ -1262,56 +1201,6 @@ export default {
         this.passTest = 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')
     }
   }
 }

data-room-ui/packages/DataSetManagement/src/JsonEditForm.vue

@@ -125,6 +125,19 @@
                   />
                 </el-form-item>
               </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-form>
           <div class="card-border">
@@ -323,39 +336,20 @@
 </template>
 
 <script>
+import LabelSelect from 'packages/DataSetLabelManagement/src/LabelSelect.vue'
 import vueJsonEditor from 'vue-json-editor'
 import vueJsonViewer from 'vue-json-viewer'
 import { getCategoryTree, datasetAdd, datasetUpdate, getDataset, nameCheckRepeat } from 'packages/js/utils/datasetConfigService'
 import _ from 'lodash'
-
+import { datasetMixins } from 'packages/js/mixins/datasetMixin'
 export default {
   name: 'JsonEditForm',
   components: {
     vueJsonEditor,
-    vueJsonViewer
-  },
-  props: {
-    isEdit: {
-      type: Boolean,
-      default: false
-    },
-    datasetId: {
-      type: String,
-      default: null
-    },
-    datasetName: {
-      type: String,
-      default: ''
-    },
-    typeId: {
-      type: String,
-      default: ''
-    },
-    appCode: {
-      type: String,
-      default: ''
-    }
+    vueJsonViewer,
+    LabelSelect
   },
+  mixins: [datasetMixins],
   data () {
     const validateName = (rule, value, callback) => {
       nameCheckRepeat({
@@ -377,6 +371,7 @@ export default {
         typeId: '',
         datasetType: 'json',
         remark: '',
+        labelIds: [],
         // 以下为config配置
         json: '',
         fieldDesc: {},
@@ -388,16 +383,7 @@ export default {
           { validator: validateName, trigger: 'blur' }
         ]
       },
-      typeName: '',
-      categoryData: [],
-      structurePreviewList: [],
-      structurePreviewListCopy: [],
-      dataPreviewList: [],
-      fieldsetVisible: false,
-      fieldDescVisible: false,
       passTest: false, // 通过测试
-      saveLoading: false,
-      saveText: ''
     }
   },
   mounted () {
@@ -488,6 +474,7 @@ export default {
           remark: this.dataForm.remark,
           moduleCode: this.appCode,
           editable: this.appCode ? 1 : 0,
+          labelIds: this.dataForm.labelIds,
           config: {
             className: 'com.gccloud.dataset.entity.config.JsonDataSetConfig',
             json: JSON.stringify(this.dataForm.json),
@@ -524,13 +511,6 @@ export default {
       this.save('form')
       this.fieldDescVisible = false
     },
-    /**
-     * 进入字段描述编辑弹窗
-     */
-    fieldDescEdit () {
-      this.fieldDescVisible = false
-      this.fieldsetVisible = true
-    },
     /**
      * 跳过字段描述编辑直接保存
      */
@@ -542,13 +522,6 @@ export default {
       this.save('form', true)
       this.fieldDescVisible = false
     },
-    /**
-     * 取消字段描述编辑
-     */
-    cancelField () {
-      this.structurePreviewListCopy = _.cloneDeep(this.structurePreviewList)
-      this.fieldsetVisible = false
-    },
     /**
      * 保存字段描述编辑
      */
@@ -681,52 +654,6 @@ export default {
         fieldDesc[field.fieldName] = field.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')
     }
   }
 }

data-room-ui/packages/DataSetManagement/src/OriginalEditForm.vue

@@ -251,6 +251,19 @@
                   />
                 </el-form-item>
               </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-form>
         </el-col>
@@ -468,6 +481,7 @@
 </template>
 
 <script>
+import LabelSelect from 'packages/DataSetLabelManagement/src/LabelSelect.vue'
 import {
   getCategoryTree,
   nameCheckRepeat,
@@ -476,30 +490,13 @@ import {
 } from 'packages/js/utils/datasetConfigService'
 import { datasourceList, getSourceTable, getSourceView, getTableFieldList } from 'packages/js/utils/dataSourceService'
 import _ from 'lodash'
+import { datasetMixins } from 'packages/js/mixins/datasetMixin'
 export default {
   name: 'OriginalEditForm',
-  props: {
-    isEdit: {
-      type: Boolean,
-      default: false
-    },
-    datasetId: {
-      type: String,
-      default: null
-    },
-    datasetName: {
-      type: String,
-      default: ''
-    },
-    typeId: {
-      type: String,
-      default: ''
-    },
-    appCode: {
-      type: String,
-      default: ''
-    }
+  components: {
+    LabelSelect
   },
+  mixins: [datasetMixins],
   data () {
     const validateName = (rule, value, callback) => {
       nameCheckRepeat({
@@ -521,6 +518,7 @@ export default {
         typeId: '',
         datasetType: 'original',
         remark: '',
+        labelIds: [],
         // 以下为config信息
         sourceId: '',
         repeatStatus: 1,
@@ -544,9 +542,6 @@ export default {
           { required: true, message: '请选择是否去重', trigger: 'blur' }
         ]
       },
-      typeName: '',
-      // 分组分类树
-      categoryData: [],
       // 数据源列表
       sourceList: [],
       // 表列表
@@ -557,21 +552,7 @@ export default {
       fieldList: [],
       isSelectAll: false,
       activeName: 'data',
-      // 预览数据
-      dataPreviewList: [],
-      // 字段结构
-      structurePreviewList: [],
-      // 字段结构副本
-      structurePreviewListCopy: [],
-      tableLoading: false,
-      fieldDescVisible: false,
-      fieldsetVisible: false,
-      saveLoading: false,
-      saveText: '',
-      totalCount: 0,
       currentCount: 0,
-      current: 1,
-      size: 10
     }
   },
   watch: {
@@ -696,46 +677,6 @@ export default {
       sql += ` FROM ${this.dataForm.tableName}`
       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 表单名称
@@ -774,6 +715,7 @@ export default {
           remark: this.dataForm.remark,
           datasetType: 'original',
           sourceId: this.dataForm.sourceId,
+          labelIds: this.dataForm.labelIds,
           config: {
             className: 'com.gccloud.dataset.entity.config.OriginalDataSetConfig',
             sourceId: this.dataForm.sourceId,
@@ -955,45 +897,6 @@ export default {
         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) {
       this.size = value
@@ -1004,9 +907,6 @@ export default {
     currentChangeHandle (value) {
       this.current = value
       this.getData()
-    },
-    openNewWindow (url) {
-      window.open(url, '_blank')
     }
   }
 }

data-room-ui/packages/DataSetManagement/src/ScriptEditForm.vue

@@ -125,6 +125,19 @@
                   />
                 </el-form-item>
               </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-form>
           <div
@@ -517,6 +530,7 @@
 </template>
 
 <script>
+import LabelSelect from 'packages/DataSetLabelManagement/src/LabelSelect.vue'
 import {
   nameCheckRepeat,
   getCategoryTree,
@@ -526,37 +540,17 @@ import {
 } from 'packages/js/utils/datasetConfigService'
 import { codemirror } from 'vue-codemirror'
 import 'codemirror/mode/groovy/groovy'
-
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/theme/nord.css'
 import _ from 'lodash'
+import { datasetMixins } from 'packages/js/mixins/datasetMixin'
 export default {
   name: 'ScriptEditForm',
   components: {
-    codemirror
-  },
-  props: {
-    isEdit: {
-      type: Boolean,
-      default: false
-    },
-    datasetId: {
-      type: String,
-      default: null
-    },
-    datasetName: {
-      type: String,
-      default: ''
-    },
-    typeId: {
-      type: String,
-      default: ''
-    },
-    appCode: {
-      type: String,
-      default: ''
-    }
+    codemirror,
+    LabelSelect
   },
+  mixins: [datasetMixins],
   data () {
     const validateName = (rule, value, callback) => {
       nameCheckRepeat({
@@ -578,6 +572,7 @@ export default {
         typeId: '',
         datasetType: 'script',
         remark: '',
+        labelIds: [],
         // 以下为config配置
         script: '',
         paramsList: [],
@@ -600,24 +595,7 @@ export default {
           completeSingle: true
         }
       },
-      dataPreviewList: [],
-      structurePreviewList: [],
-      structurePreviewListCopy: [],
-      typeSelect: [
-        { value: 'String' },
-        { value: 'Integer' },
-        { value: 'Double' },
-        { value: 'Long' },
-        { value: 'Date' }
-      ],
-      typeName: '',
-      categoryData: [],
-      fieldDescVisible: false,
-      fieldsetVisible: false,
       paramsVisible: false,
-      tableLoading: false,
-      saveLoading: false,
-      saveText: '',
       paramsListCopy: [],
       isSet: false, // 参数是否配置状态
       passTest: false,
@@ -729,6 +707,7 @@ export default {
           sourceId: this.dataForm.sourceId,
           moduleCode: this.appCode,
           editable: this.appCode ? 1 : 0,
+          labelIds: this.dataForm.labelIds,
           config: {
             className: 'com.gccloud.dataset.entity.config.GroovyDataSetConfig',
             script: this.dataForm.script,
@@ -795,46 +774,6 @@ export default {
         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,
         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')
     }
   }
 }

data-room-ui/packages/DataSetManagement/src/StoredProcedureEditForm.vue

@@ -150,6 +150,21 @@
                 </el-form-item>
               </el-col>
             </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>
           <div
             v-if="isEdit"
@@ -555,6 +570,7 @@
 </template>
 
 <script>
+import LabelSelect from 'packages/DataSetLabelManagement/src/LabelSelect.vue'
 import {
   nameCheckRepeat,
   datasetAdd,
@@ -574,7 +590,8 @@ import { datasetMixins } from 'packages/js/mixins/datasetMixin'
 export default {
   name: 'StoredProcedureEditForm',
   components: {
-    codemirror
+    codemirror,
+    LabelSelect
   },
   mixins: [datasetMixins],
   data () {
@@ -598,6 +615,7 @@ export default {
         typeId: '',
         datasetType: 'storedProcedure',
         remark: '',
+        labelIds: [],
         // 以下为config配置
         sourceId: '',
         sqlProcess: 'call ',
@@ -825,6 +843,7 @@ export default {
           sourceId: this.dataForm.sourceId,
           moduleCode: this.appCode,
           editable: this.appCode ? 1 : 0,
+          labelIds: this.dataForm.labelIds,
           config: {
             className: 'com.gccloud.dataset.entity.config.StoredProcedureDataSetConfig',
             sourceId: this.dataForm.sourceId,