数据产品：数据预览调整

src/views/dataService/dataOrder/components/OrderDetailDialog.vue

@@ -249,10 +249,10 @@ export default {
       return ['pending_approval', 'manual_review'].includes(status)
     },
     goToProduct (productId) {
-      this.$router.push('/dataService/dataProduct')
+      window.open('/dataService/dataProduct', '_blank')
     },
     goToDataflow (dataflowId) {
-      this.$router.push('/data-governance/data-process')
+      window.open('/data-governance/data-process', '_blank')
     },
     getStatusColor (status) {
       const colors = {

src/views/dataService/dataProduct/components/RegisterForm.vue

@@ -1,6 +1,5 @@
 <template>
-  <m-form ref="form" :items="formItems" v-model="formValues">
-  </m-form>
+  <m-form ref="form" :items="formItems" v-model="formValues"></m-form>
 </template>
 
 <script>

src/views/dataService/dataProduct/components/mGraph.vue

@@ -112,7 +112,7 @@
         </v-toolbar>
       </template>
       <v-container v-if="drawer.nodeData">
-        <div class="d-flex">
+        <div class="d-flex mt-10">
           <ul class="ml-0 pl-0" style="color: #333;text-align:right; padding-right: 16px; min-width: 120px;">
             <template v-for="key in Object.keys(detailKeys)">
               <li v-if="drawer.nodeData[key]" :key="key" style="margin-bottom: 12px;">{{ detailKeys[key] }} ：</li>
@@ -123,7 +123,11 @@
               <li v-if="drawer.nodeData[key]" :key="key" style="margin-bottom: 12px;">
                 <span v-if="key === 'labels'">{{ drawer.nodeData[key].join(',') }}</span>
                 <span v-else-if="key === 'matched_data'">
-                  <v-simple-table fixed-header height="60vh" v-if="getMatchDataArray(drawer.nodeData[key]) && getMatchDataArray(drawer.nodeData[key]).length">
+                  <v-simple-table
+                    fixed-header
+                    height="60vh"
+                    v-if="getMatchDataArray(drawer.nodeData[key]) && getMatchDataArray(drawer.nodeData[key]).length"
+                  >
                     <template v-slot:default>
                       <thead>
                         <tr>
@@ -141,6 +145,7 @@
                       </tbody>
                     </template>
                   </v-simple-table>
+                  <span v-else>无匹配数据</span>
                   <!-- <v-data-iterator
                     :items="getMatchDataArray(drawer.nodeData[key])"
                     hide-default-footer
@@ -162,6 +167,8 @@
                     </template>
                   </v-data-iterator> -->
                 </span>
+                <span v-else-if="key === 'update_mode'">{{ drawer.nodeData[key] === 'append' ? '追加' : '全量更新' }}</span>
+                <span v-else-if="key === 'script_requirement'">{{ dataRules }}</span>
                 <span v-else>{{ drawer.nodeData[key] }}</span>
               </li>
             </template>
@@ -325,28 +332,21 @@ export default {
         labels: '节点标签',
         is_target: '是否目标节点',
         is_source: '是否源节点',
-        matched_data: '匹配数据'
+        matched_data: '匹配数据',
+        script_type: '脚本类型',
+        update_mode: '更新模式',
+        script_requirement: '数据规则'
       }
     }
   },
   computed: {
     legend () {
       return Object.values(this.config)
-    }
-  },
-  watch: {
-    graphData: {
-      handler (newVal) {
-        if (newVal && newVal.nodes && newVal.nodes.length) {
-          this.drawWithData(newVal)
-        } else if (newVal === null) {
-          // 当 graphData 被清空时，重置状态
-          this.empty = true
-          this.loading = false
-        }
-      },
-      immediate: false,
-      deep: true
+    },
+    dataRules () {
+      const scriptRequirement = this.drawer.nodeData?.script_requirement
+      if (!scriptRequirement) return ''
+      return JSON.parse(scriptRequirement)?.rule || ''
     }
   },
   mounted () {
@@ -441,7 +441,7 @@ export default {
     },
     // 将匹配数据统一转换为数组格式
     getMatchDataArray (matchData) {
-      if (!matchData) return []
+      if (!matchData || !Object.keys(matchData).length) return []
       return Array.isArray(matchData) ? matchData : [matchData]
     }
   }

src/views/dataService/dataProduct/components/PreviewDialog.vue → src/views/dataService/dataProduct/components/preview.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <MDialog :visible="visible" title="数据预览" widthType="1" :footer="false" max-width="90%" @update:visible="handleVisibleChange">
     <div v-if="previewData.product" class="mb-4">
       <v-card outlined>
         <v-card-text>
@@ -30,7 +29,6 @@
           multiple
           dense
           style="max-width: 300px;"
-          @change="handleColumnChange"
         >
           <template v-slot:selection="{ item, index }">
             <v-chip v-if="index === 0" small>
@@ -78,34 +76,18 @@
         :loading="false"
       >
         <template #actions="{ item }">
-          <v-btn text color="primary" @click="handleVisualize(item)">可视化</v-btn>
+          <v-btn text color="primary" @click="handleVisualize(item)">数据溯源</v-btn>
         </template>
       </TableList>
       <div v-else class="text-center pa-10 text--secondary">
-        暂无数据
+          暂无数据
       </div>
       <div v-if="previewData.preview_count > 0 && selectedColumns.length > 0" class="text-end text--secondary">
-        <span>已加载 {{ previewData.preview_count || 0 }} / {{ previewData.total_count || 0 }} 条</span>
+          <span>已加载 {{ previewData.preview_count || 0 }} / {{ previewData.total_count || 0 }} 条</span>
       </div>
     </div>
-    <template #footer>
-      <v-divider></v-divider>
-      <v-card-actions>
-        <v-spacer></v-spacer>
-        <v-btn
-          v-if="previewData.preview_count < previewData.total_count && limit < 1000"
-          text
-          color="primary"
-          @click="handleLoadMore"
-        >
-          加载更多
-        </v-btn>
-        <v-btn v-if="previewData?.data?.length > 0" text color="success" @click="handleDownload">下载Excel</v-btn>
-        <v-btn text @click="handleClose">关闭</v-btn>
-      </v-card-actions>
-    </template>
-    </MDialog>
-    <!-- 可视化图谱弹窗 -->
+
+    <!-- 关系图谱弹窗 -->
     <MDialog
       :visible="graphDialogVisible"
       title="数据加工可视化"
@@ -135,10 +117,6 @@ export default {
     TableList
   },
   props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
     loading: {
       type: Boolean,
       default: false
@@ -210,14 +188,8 @@ export default {
     }
   },
   watch: {
-    visible (val) {
-      if (!val) {
-        // 关闭时重置
-        this.selectedColumns = []
-      }
-    },
     'previewData.columns' (val) {
-      if (val && val.length && this.visible) {
+      if (val && val.length) {
         // 只在首次加载（selectedColumns为空）时，默认选中前6条
         // 如果已经有选中的列，则保持用户的选择
         if (this.selectedColumns.length === 0) {
@@ -238,62 +210,6 @@ export default {
       } catch (error) {
         this.$snackbar.error(error.message)
       }
-
-      // const data = {
-      //   nodes: [
-      //     {
-      //       id: 212,
-      //       name_zh: '用户标签库',
-      //       name_en: 'user_tag_library',
-      //       node_type: 'BusinessDomain',
-      //       labels: ['BusinessDomain'],
-      //       is_target: true,
-      //       is_source: false,
-      //       matched_data: [row, row, row, row, row, row, row, row, row, row, row, row, row, row]
-      //     },
-      //     {
-      //       id: 183,
-      //       name_zh: '用户标签生成',
-      //       name_en: 'user_tag_generate',
-      //       node_type: 'DataFlow',
-      //       labels: ['DataFlow'],
-      //       is_target: false,
-      //       is_source: false
-      //     },
-      //     {
-      //       id: 159,
-      //       name_zh: '用户画像',
-      //       name_en: 'user_profile',
-      //       node_type: 'BusinessDomain',
-      //       labels: ['BusinessDomain'],
-      //       is_target: false,
-      //       is_source: false,
-      //       matched_data: [row]
-      //     },
-      //     {
-      //       id: 154,
-      //       name_zh: '用户基础数据',
-      //       name_en: 'user_base_info',
-      //       node_type: 'DataResource',
-      //       labels: ['DataResource', 'BusinessDomain'],
-      //       is_target: false,
-      //       is_source: true,
-      //       matched_data: row
-      //     }
-      //   ],
-      //   lines: [
-      //     { from: '183', to: '212', text: 'OUTPUT' },
-      //     { from: '159', to: '183', text: 'INPUT' },
-      //     { from: '156', to: '159', text: 'OUTPUT' },
-      //     { from: '154', to: '156', text: 'INPUT' }
-      //   ],
-      //   lineage_depth: 2
-      // }
-      // this.graphData = data
-      // this.graphDialogVisible = true
-    },
-    handleColumnChange () {
-      this.$emit('column-change', this.selectedColumns)
     },
     // 表头项全选/取消全选
     handleSelectAll () {
@@ -303,21 +219,8 @@ export default {
         } else {
           this.selectedColumns = this.previewData.columns.map(col => col.name)
         }
-        this.handleColumnChange()
       })
     },
-    handleLoadMore () {
-      this.$emit('load-more')
-    },
-    handleDownload () {
-      this.$emit('download', this.previewData.total_count > 10000 ? 10000 : this.previewData.total_count)
-    },
-    handleVisibleChange (val) {
-      this.$emit('update:visible', val)
-    },
-    handleClose () {
-      this.$emit('update:visible', false)
-    },
     handleGraphDialogVisibleChange (val) {
       this.graphDialogVisible = val
       if (!val) {

src/views/dataService/dataProduct/index.vue

@@ -35,14 +35,30 @@
     </table-list>
 
     <!-- 预览对话框 -->
-    <preview-dialog
-      :visible.sync="previewDialog.show"
-      :loading="previewDialog.loading"
-      :preview-data="previewDialog.data"
-      :limit="previewDialog.limit"
-      @load-more="handleLoadMore"
-      @download="handleDownloadFromPreview"
-    />
+    <m-dialog :visible.sync="previewDialog.show" widthType="1" :footer="false" max-width="90%" title="数据预览" @close="handleClosePreview">
+      <preview-page
+        v-if="previewDialog.show"
+        :loading="previewDialog.loading"
+        :limit="previewDialog.limit"
+        :preview-data="previewDialog.data"
+      ></preview-page>
+      <template #footer>
+        <v-divider></v-divider>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            v-if="previewDialog.data.preview_count < previewDialog.data.total_count && limit < 1000"
+            text
+            color="primary"
+            @click="handleLoadMore"
+          >
+            加载更多
+          </v-btn>
+          <v-btn v-if="previewDialog.data?.data?.length > 0" text color="success" @click="handleDownload">下载Excel</v-btn>
+          <v-btn text @click="handleClosePreview">关闭</v-btn>
+        </v-card-actions>
+      </template>
+    </m-dialog>
 
     <!-- 注册对话框 -->
     <m-dialog :visible.sync="registerDialog.show" :title="registerDialog.isEdit ? '编辑数据产品' : '新增数据产品'" @submit="handleRegisterSubmit">
@@ -56,7 +72,7 @@ import MFilter from '@/components/Filter'
 import TableList from '@/components/List/table'
 import MDialog from '@/components/Dialog'
 import RegisterForm from './components/RegisterForm'
-import PreviewDialog from './components/PreviewDialog'
+import PreviewPage from './components/preview'
 import { api } from '@/api/dataService'
 import { formatDate } from '@/utils/date'
 
@@ -67,7 +83,7 @@ export default {
     TableList,
     MDialog,
     RegisterForm,
-    PreviewDialog
+    PreviewPage
   },
   data () {
     return {
@@ -196,6 +212,20 @@ export default {
         this.previewDialog.loading = false
       }
     },
+    handleClosePreview () {
+      this.previewDialog.show = false
+      this.previewDialog.loading = false
+      this.previewDialog.limit = 200
+      this.previewDialog.currentItem = null
+      this.previewDialog.data = {
+        product: null,
+        columns: [],
+        data: [],
+        total_count: 0,
+        preview_count: 0,
+        error: null
+      }
+    },
     // 加载更多数据
     async handleLoadMore () {
       this.previewDialog.limit = Math.min(this.previewDialog.limit + 200, 1000)
@@ -209,15 +239,13 @@ export default {
         this.previewDialog.loading = false
       }
     },
-    // 从预览弹窗下载
-    async handleDownloadFromPreview (limit = 200) {
-      if (!this.previewDialog.currentItem) {
+    // 下载数据
+    async handleDownload () {
+      const limit = this.previewDialog.data.total_count > 10000 ? 10000 : this.previewDialog.data.total_count
+      const item = this.previewDialog.currentItem
+      if (!item) {
         return
       }
-      await this.handleDownload(this.previewDialog.currentItem, limit)
-    },
-    // 下载数据
-    async handleDownload (item, limit) {
       try {
         const response = await api.downloadExcel(item.id, limit)