数据研发-业务域：创建组合业务域

src/views/dataGovernance/businessDomain/components/combination.vue

@@ -0,0 +1,242 @@
+<template>
+  <div>
+    <MForm ref="form" :items="formItems" v-model="formValues">
+      <template #name_en>
+        <v-btn color="primary" class="ml-3" :loading="translateLoading" @click="getTranslate">翻译</v-btn>
+      </template>
+      <template #tag>
+        <div class="mb-6" style="border: 1px dashed #666; padding: 10px; border-radius: 5px; width: 100%;">
+          <v-chip-group
+            v-if="tagItems.length"
+            v-model="formValues.tag"
+            multiple
+            column
+            active-class="primary--text"
+          >
+            <v-chip v-for="tag in tagItems" :key="tag.id" filter :value="tag">
+              {{ tag.name_zh }}
+            </v-chip>
+          </v-chip-group>
+          <div v-else class="text-center" style="color: #999; padding: 10px;">暂无可选标签</div>
+        </div>
+      </template>
+    </MForm>
+
+    <v-row>
+      <v-col cols="6">
+        <MCard title="候选元数据">
+          <table-list
+            ref="candidateTable"
+            :loading="candidate.loading"
+            :headers="candidate.headers"
+            :items="candidate.items"
+            :total="candidate.total"
+            height="400px"
+            :select-item="true"
+            fixed-header
+            :page-info="candidate.pageInfo"
+            :is-tools="false"
+            :show-select="true"
+            :disable-sort="true"
+            @pageHandleChange="pageHandleChange"
+            @selected="handleCandidateSelected"
+          >
+          </table-list>
+        </MCard>
+      </v-col>
+      <v-col cols="6">
+        <MCard title="选中元数据">
+          <table-list
+            :loading="false"
+            :headers="candidate.headers"
+            :items="candidate.selected"
+            :is-tools="false"
+            :disable-sort="true"
+            height="490px"
+            fixed-header
+            :show-page="false"
+            :show-select="false"
+          >
+          </table-list>
+        </MCard>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api/dataGovernance'
+import { getDatasourceList } from '@/api/dataOrigin'
+import { metadata } from '@/utils/dataGovernance'
+import { getTranslate } from '@/api'
+
+import MForm from '@/components/MForm'
+import MCard from '@/components/MCard'
+import TableList from '@/components/List/table'
+export default {
+  name: 'combinationPage',
+  components: { MForm, MCard, TableList },
+  data () {
+    return {
+      translateLoading: false,
+      formValues: {
+        name_zh: null,
+        name_en: null,
+        type: null,
+        category: null,
+        tag: null,
+        describe: null,
+        data_source: null
+      },
+      pageInfo: {
+        size: 999,
+        current: 1
+      },
+      tagItems: [],
+      dataSourceItems: [],
+      candidate: {
+        total: 0,
+        loading: false,
+        pageInfo: {
+          size: 10,
+          current: 1
+        },
+        items: [],
+        selected: [],
+        headers: [
+          { text: '中文名称', value: 'name_zh' },
+          { text: '英文名称', value: 'name_en' },
+          { text: '数据类型', value: 'data_type' }
+        ]
+      }
+    }
+  },
+  computed: {
+    formItems () {
+      return [
+        {
+          type: 'text',
+          key: 'name_zh',
+          label: '请输入名称 *',
+          rules: [v => !!v || '请输入名称']
+        },
+        {
+          type: 'text',
+          key: 'name_en',
+          label: '请输入英文名称 *',
+          rules: [v => !!v || '请输入名称'],
+          slotName: 'name_en'
+        },
+        {
+          type: 'autocomplete',
+          key: 'data_source',
+          label: '请选择数据源',
+          col: 6,
+          noAttach: true,
+          itemText: 'name_zh',
+          itemValue: 'id',
+          items: this.dataSourceItems
+        },
+        {
+          type: 'autocomplete',
+          key: 'category',
+          label: '请选择分类',
+          col: 6,
+          items: metadata
+        },
+        {
+          type: 'text',
+          key: 'type',
+          col: 6,
+          label: '请输入类型'
+        },
+        {
+          type: 'text',
+          key: 'describe',
+          col: 6,
+          label: '请输入描述'
+        },
+        {
+          slotName: 'tag',
+          key: 'tag',
+          value: [],
+          slotTitle: '请选择标签',
+          slotTitleStyle: 'color: rgba(0, 0, 0, 0.6); padding: 5px'
+        }
+      ]
+    }
+  },
+  created () {
+    this.init()
+  },
+  methods: {
+    async init () {
+      try {
+        const { data } = await api.getLabelList({
+          ...this.pageInfo,
+          category_filter: 'DataOps'
+        })
+        this.tagItems = data.records
+        const { data: dataSource } = await getDatasourceList({})
+        this.dataSourceItems = dataSource.data_source
+        // 获取候选元数据列表
+        this.getCandidate()
+      } catch (error) {
+        this.$snackbar.error(error)
+      }
+    },
+    // 获取候选元数据列表
+    async getCandidate () {
+      this.candidate.loading = true
+      try {
+        const { data } = await api.getMetaDataList({
+          ...this.candidate.pageInfo
+        })
+        this.candidate.items = data.records || []
+        this.candidate.total = data.total || 0
+      } catch (error) {
+        this.$snackbar.error(error)
+      } finally {
+        this.candidate.loading = false
+      }
+    },
+    pageHandleChange (index) {
+      this.candidate.pageInfo.current = index
+      this.getCandidate()
+    },
+    // 处理候选列表选中
+    handleCandidateSelected (selectedItems) {
+      this.candidate.selected = selectedItems
+    },
+    async getTranslate () {
+      if (!this.formValues.name_zh) {
+        this.$snackbar.error('请输入名称')
+        return
+      }
+      this.translateLoading = true
+      try {
+        const { data } = await getTranslate({
+          node_name: this.formValues.name_zh
+        })
+        this.formValues.name_en = data.translated
+      } catch (error) {
+        this.$snackbar.error(error)
+      } finally {
+        this.translateLoading = false
+      }
+    },
+    getValue () {
+      const valid = this.$refs.form.validate()
+      if (!valid) {
+        this.$snackbar.warning('请将表单内容填写完整!')
+        return
+      }
+      return {
+        ...this.formValues,
+        status: true,
+        id_list: this.candidate.selected.map(item => item.id)
+      }
+    }
+  }
+}
+</script>

src/views/dataGovernance/businessDomain/index.vue

@@ -30,6 +30,10 @@
           <v-icon left>mdi-plus</v-icon>
           新增业务域
         </v-btn>
+        <v-btn class="elevation-5 buttons" color="primary" rounded @click="showCombination = true">
+          <v-icon left>mdi-plus</v-icon>
+          组合业务域
+        </v-btn>
       </template>
       <template #actions="{ item }">
         <v-btn
@@ -56,6 +60,17 @@
     <edit-dialog :visible.sync="show" :title="title" :footer="false" :fullscreen="true">
       <edit v-if="show" v-loading="submitLoading" ref="form" :item-data="itemData" @close="handleClose"></edit>
     </edit-dialog>
+
+    <edit-dialog
+      :visible.sync="showCombination"
+      title="新增组合业务域"
+      :footer="true"
+      widthType="1"
+      @close="showCombination = false"
+      @submit="handleCombinationSubmit"
+    >
+      <CombinationForm v-if="showCombination" ref="combinationFormRef"></CombinationForm>
+    </edit-dialog>
   </div>
 </template>
 
@@ -64,11 +79,12 @@ import FilterList from '../components/Filter'
 import TableList from '@/components/List/table'
 import EditDialog from '@/components/Dialog'
 import Edit from './components/edit'
+import CombinationForm from './components/combination'
 
 import { api } from '@/api/dataGovernance'
 export default {
   name: 'businessDomain',
-  components: { FilterList, TableList, EditDialog, Edit },
+  components: { FilterList, TableList, EditDialog, Edit, CombinationForm },
   data () {
     return {
       submitLoading: false,
@@ -93,7 +109,8 @@ export default {
       },
       query: {},
       orders: [],
-      itemData: {}
+      itemData: {},
+      showCombination: false
     }
   },
   computed: {
@@ -181,6 +198,20 @@ export default {
     pageHandleChange (index) {
       this.pageInfo.current = index
       this.init()
+    },
+    // 组合业务域提交
+    async handleCombinationSubmit () {
+      const form = this.$refs.combinationFormRef.getValue()
+      if (!form) return this.$snackbar.warning('请将表单内容填写完整!')
+      if (!form.id_list.length) return this.$snackbar.warning('请选择要组合的元数据项!')
+      try {
+        await api.combinationCreateBusinessDomain(form)
+        this.$snackbar.success('组合业务域创建成功')
+        this.showCombination = false
+        this.init()
+      } catch (error) {
+        this.$snackbar.error(error)
+      }
     }
   }
 }