数据审核操作调整

src/views/dataReview/components/details.vue

@@ -0,0 +1,228 @@
+<template>
+  <div style="height: calc(100% - 48px);">
+    <v-tabs v-model="activeIndex" background-color="#f7f8fa">
+      <v-tab>审核详情</v-tab>
+      <v-tab v-if="info.record_type === 'change'">影响关系图谱</v-tab>
+    </v-tabs>
+    <v-tabs-items v-model="activeIndex" style="flex: 1">
+      <v-tab-item>
+        <div class="mt-3">
+          <v-row>
+            <v-col cols="12">
+              <m-card title="基本信息" style="min-height: 260px;">
+                <div class="snapshot-wrapper mt-3">
+                  <ul class="snapshot-labels">
+                    <li>状态：</li>
+                    <li>记录类型：</li>
+                    <li>创建时间：</li>
+                    <li>更新时间：</li>
+                    <li>备注：</li>
+                  </ul>
+                  <ul class="snapshot-values">
+                    <li>
+                      <v-chip small :color="info.status === 'pending' ? 'primary' : info.status === 'resolved' ? 'success' : 'warning'">
+                        {{ info.status === 'pending' ? '待处理' : info.status === 'resolved' ? '已处理' : '已忽略' }}
+                      </v-chip>
+                    </li>
+                    <li>{{ info.record_type === 'redundancy' ? '疑似冗余' : '疑似变动' || '-' }}</li>
+                    <li>{{ formatDate(info.created_at) || '-' }}</li>
+                    <li>{{ formatDate(info.updated_at) || '-' }}</li>
+                    <li>
+                      <v-text-field
+                        v-if="info?.status === 'pending'"
+                        v-model="notes"
+                        label=""
+                        filled
+                        clearable
+                        dense
+                        hide-details
+                        placeholder="请输入备注信息"
+                        @input="handleNotesChange"
+                      />
+                      <span v-else>{{ info.notes || '-' }}</span>
+                    </li>
+                  </ul>
+                </div>
+              </m-card>
+            </v-col>
+          </v-row>
+        </div>
+        <v-row>
+          <v-col cols="6">
+            <m-card title="新解析元数据信息">
+              <div class="snapshot-wrapper mt-3">
+                <ul class="snapshot-labels">
+                  <li>中文名称：</li>
+                  <li>英文名称：</li>
+                  <li>数据类型：</li>
+                  <li>数据标签：</li>
+                </ul>
+                <ul class="snapshot-values">
+                  <li>{{ newMetaSnapshot.name_zh || '-' }}</li>
+                  <li>{{ newMetaSnapshot.name_en || '-' }}</li>
+                  <li>{{ newMetaSnapshot.data_type || '-' }}</li>
+                  <li>
+                    <span v-if="Array.isArray(newMetaSnapshot.tags) && newMetaSnapshot.tags.length">
+                      {{ newMetaSnapshot.tags.map(tag => tag.name_zh).join(', ') }}
+                    </span>
+                    <span v-else>-</span>
+                  </li>
+                </ul>
+              </div>
+              <div class="text-end" v-if="info.status === 'pending'">
+                <v-tooltip top>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-btn
+                      color="primary"
+                      outlined
+                      @click="handleAction('alias', 'new_meta')"
+                      v-bind="attrs"
+                      v-on="on"
+                    >
+                      设为主元数据
+                    </v-btn>
+                  </template>
+                  <span>设为主元数据，候选元数据则作为别名</span>
+                </v-tooltip>
+              </div>
+            </m-card>
+          </v-col>
+
+          <v-col cols="6">
+            <m-card title="候选元数据信息">
+              <div class="snapshot-wrapper mt-3">
+                <ul class="snapshot-labels">
+                  <li>中文名称：</li>
+                  <li>英文名称：</li>
+                  <li>数据类型：</li>
+                  <li>数据标签：</li>
+                </ul>
+                <ul class="snapshot-values">
+                  <li>{{ candidate.name_zh || '-' }}</li>
+                  <li>{{ candidate.name_en || '-' }}</li>
+                  <li>{{ candidate.data_type || '-' }}</li>
+                  <li>
+                    <span v-if="Array.isArray(candidate.tags) && candidate.tags.length">
+                      {{ candidate.tags.map(tag => tag.name_zh).join(', ') }}
+                    </span>
+                    <span v-else>-</span>
+                  </li>
+                </ul>
+              </div>
+              <div class="text-end" v-if="info.status === 'pending'">
+                <v-tooltip top>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-btn
+                      color="primary"
+                      outlined
+                      @click="handleAction('alias', 'candidate')"
+                      v-bind="attrs"
+                      v-on="on"
+                    >
+                      设为主元数据
+                    </v-btn>
+                  </template>
+                  <span>设为主元数据，新解析的元数据则作为别名</span>
+                </v-tooltip>
+              </div>
+            </m-card>
+          </v-col>
+        </v-row>
+      </v-tab-item>
+      <v-tab-item v-if="info.record_type === 'change'">
+        <m-card style="height: calc(100% - 12px);" no-title class="d-flex flex-column mt-3" bodyStyle="flex: 1">
+          <Graph :graphData="info.impact_graph"></Graph>
+        </m-card>
+      </v-tab-item>
+    </v-tabs-items>
+  </div>
+</template>
+
+<script>
+import MCard from '@/components/MCard'
+import Graph from './graph.vue'
+import { formatDate } from '@/utils/date'
+
+export default {
+  name: 'detailsComponent',
+  components: {
+    MCard,
+    Graph
+  },
+  props: {
+    info: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      activeIndex: 0,
+      notes: this.info.notes || null
+    }
+  },
+  computed: {
+    newMetaSnapshot () {
+      if (!this.info || !this.info.new_meta) {
+        return {}
+      }
+      return this.info.new_meta
+    },
+    candidate () {
+      if (!this.info) {
+        return {}
+      }
+      return this.info.record_type === 'redundancy' ? this.info.candidates[0]?.snapshot : this.info.old_meta?.snapshot || {}
+    }
+  },
+  methods: {
+    formatDate (date) {
+      return formatDate(date)
+    },
+    handleNotesChange () {
+      this.$emit('notesChange', this.notes)
+    },
+    handleAction (action, type) {
+      this.$emit('action', action, type)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  ::v-deep .v-window {
+  height: 100%;
+}
+::v-deep .v-window__container, .v-window-item {
+  height: 100%;
+}
+.snapshot-wrapper {
+  display: flex;
+  align-items: flex-start;
+}
+
+.snapshot-labels,
+.snapshot-values {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+.snapshot-labels {
+  text-align: right;
+  margin-right: 12px;
+  color: #403b3b;
+}
+
+.snapshot-values {
+  flex: 1;
+  word-break: break-all;
+}
+
+.snapshot-labels li,
+.snapshot-values li {
+  margin: 6px 0;
+}
+</style>

src/views/dataReview/index.vue

@@ -18,7 +18,7 @@
         {{ item.record_type === 'redundancy' ? '疑似冗余' : '疑似变动' }}
       </template>
       <template #status="{ item }">
-        <v-chip small :color="item.status === 'pending' ? 'warning' : item.status === 'resolved' ? 'success' : ''">
+        <v-chip small :color="item.status === 'pending' ? 'primary' : item.status === 'resolved' ? 'success' : 'warning'">
           {{ item.status === 'pending' ? '待处理' : item.status === 'resolved' ? '已处理' : '已忽略' }}
         </v-chip>
       </template>
@@ -26,50 +26,24 @@
         {{ formatDate(item.created_at) }}
       </template>
       <template #actions="{ item }">
-        <v-btn color="success" text class="mr-2" @click="handleAction(item)">详情</v-btn>
-        <v-btn v-if="item.status === 'pending'" color="primary" text @click="handleAction(item)">处理</v-btn>
+        <v-btn color="primary" text @click="handleAction(item)">详情</v-btn>
       </template>
     </m-table>
 
     <edit-dialog :visible.sync="show" title="数据审核详情" fullscreen :footer="false">
-      <!-- 疑似冗余 -->
-      <redundancy-component
-        v-if="info?.record_type === 'redundancy'"
-        :info="info"
-        @selectCandidateMeta="val => candidateMetaId = val"
-        @notesChange="val => notes = val"
-      />
-      <!-- 疑似变动 -->
-      <change-component
-        v-if="info?.record_type === 'change'"
+      <DetailsComponent
         :info="info"
+        @action="handleSubmit"
         @notesChange="val => notes = val"
       />
       <template v-if="info?.status === 'pending'" #footer>
         <v-divider></v-divider>
           <v-card-actions>
             <v-spacer></v-spacer>
-            <v-btn v-if="info?.record_type === 'redundancy'" text color="pink" class="mr-2" @click="handleSubmit(info, 'alias')">设为别名</v-btn>
-            <v-btn v-if="info?.record_type === 'redundancy'" text color="primary" class="mr-2" @click="handleSubmit(info, 'create_new')">创建新元数据</v-btn>
-            <v-btn v-if="info?.record_type === 'change'" text color="success" class="mr-2" @click="handleSubmit(info, 'accept_change')">接受变动</v-btn>
-            <v-btn v-if="info?.record_type === 'change'" text color="error" class="mr-2" @click="handleSubmit(info, 'reject_change')">拒绝变动</v-btn>
-            <v-btn text color="warning" @click="handleSubmit(info, 'ignore')">忽略</v-btn>
+            <v-btn outlined color="warning" @click="handleSubmit('ignore')">忽略</v-btn>
           </v-card-actions>
       </template>
     </edit-dialog>
-
-    <!-- 创建新元数据 -->
-    <edit-dialog :visible.sync="createNew.show" title="创建新元数据" @submit="handleCreateNew">
-      <v-text-field
-        v-model="createNew.name_zh"
-        label="中文名称"
-        outlined
-        clearable
-        dense
-        hide-details
-        placeholder="请输入元数据中文名称"
-      />
-    </edit-dialog>
   </div>
 </template>
 
@@ -77,9 +51,8 @@
 import MFilter from '@/components/Filter'
 import MTable from '@/components/List/table.vue'
 import EditDialog from '@/components/Dialog'
-import RedundancyComponent from './components/redundancy.vue'
-import ChangeComponent from './components/change.vue'
-import { dataReviewList, dataReviewDetail, dataReviewResolve } from '@/api/dataDeduplication'
+import DetailsComponent from './components/details.vue'
+import { dataReviewList, dataReviewDetail, dataReviewResolve } from '@/api/dataReview'
 import { api } from '@/api/dataGovernance'
 import { formatDate } from '@/utils/date'
 export default {
@@ -88,8 +61,7 @@ export default {
     MFilter,
     MTable,
     EditDialog,
-    RedundancyComponent,
-    ChangeComponent
+    DetailsComponent
   },
   data () {
     return {
@@ -121,7 +93,7 @@ export default {
           },
           {
             type: 'autocomplete',
-            value: 'pending',
+            value: null,
             label: '状态',
             key: 'status',
             items: [{ label: '待处理', value: 'pending' }, { label: '已处理', value: 'resolved' }, { label: '已忽略', value: 'ignored' }]
@@ -130,7 +102,7 @@ export default {
       },
       queryData: {
         keyword: null,
-        status: 'pending',
+        status: null,
         business_domain_id: null,
         record_type: null
       },
@@ -139,23 +111,18 @@ export default {
         { text: '英文名称', align: 'start', value: 'new_meta.name_en' },
         { text: '记录类型', align: 'center', value: 'record_type' },
         { text: '状态', align: 'center', value: 'status' },
+        { text: '备注', align: 'center', value: 'notes' },
         { text: '创建时间', align: 'start', value: 'created_at' },
-        { text: '操作', align: 'start', value: 'actions' }
+        { text: '操作', align: 'center', value: 'actions' }
       ],
       items: [],
       pageInfo: {
         size: 10,
         current: 1
       },
-      candidateMetaId: null,
       total: 0,
       info: {},
-      notes: '',
-      createNew: {
-        show: false,
-        name_zh: null,
-        params: {}
-      }
+      notes: ''
     }
   },
   created () {
@@ -212,60 +179,20 @@ export default {
         this.$snackbar.error(error)
       }
     },
-    // 作为新元数据创建
-    async handleCreateNew () {
-      if (!this.createNew.name_zh) {
-        this.$snackbar.warning('请输入元数据中文名称')
-        return
-      }
-      this.createNew.params.payload = {
-        new_name_zh: this.createNew.name_zh
-      }
-      try {
-        await dataReviewResolve(this.createNew.params)
-        this.$snackbar.success('操作成功')
-        this.createNew.show = false
-        this.show = false
-        this.init()
-      } catch (error) {
-        this.$snackbar.error(error.message)
-      } finally {
-        this.createNew = {
-          name_zh: null,
-          params: {},
-          show: false
-        }
-      }
-    },
-    // 设为别名、接受变动、拒绝变动、忽略
-    async handleSubmit (item, action) {
+    // 设为主元数据、设为别名、忽略
+    async handleSubmit (action, type) {
       const params = {
-        id: item.id,
+        id: this.info.id,
         action: action,
         resolved_by: this.$store.getters.userInfo.username,
         notes: this.notes || ''
       }
-      // 作为新元数据创建
-      if (action === 'create_new') {
-        this.createNew = {
-          show: true,
-          name_zh: item.new_meta.name_zh,
-          params
-        }
-        return
-      }
       // 设为某候选元数据别名
-      if (action === 'alias') {
-        if (!this.candidateMetaId) {
-          this.$snackbar.warning('请选择候选元数据')
-          return
-        }
-        params.payload = {
-          candidate_meta_id: this.candidateMetaId
-        }
-      } else if (action === 'accept_change') { // 接受变动
+      if (type === 'new_meta' || type === 'candidate') {
+        const otherMetaId = this.info.record_type === 'redundancy' ? this.info.candidates[0].snapshot.id : this.info.old_meta.snapshot.id
         params.payload = {
-          meta_id: item?.old_meta?.meta_id
+          primary_meta_id: type === 'new_meta' ? this.info.new_meta.id : otherMetaId,
+          alias_meta_id: type === 'new_meta' ? otherMetaId : this.info.new_meta.id
         }
       }
       try {