update

src/views/metadata/offlinedata/OfflineDataDetail.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="app-container">
+    <el-card class="box-card" shadow="always">
+      <el-form ref="queryForm" :model="queryParams" :inline="true">
+        <el-form-item label="项目" prop="projectId">
+          <el-select v-model="queryParams.projectId" clearable size="small" placeholder="项目" class="filter-item">
+            <el-option v-for="item in projectsOptions" :key="item.id" :label="item.projectName" :value="item.id" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <iframe src="http://127.0.0.1:8000/model/modelChildren?hideInMenu=true&projectId=1" width="100%" height="850px" frameborder="0" />
+    </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'OfflineDataDetail',
+    data() {
+      return {
+        projectsOptions: [
+          { id: '1111', projectName: '演示项目' }
+        ],
+        // 查询参数
+        queryParams: {
+          pageNum: 1,
+          pageSize: 20,
+          projectId: '1111',
+          fileName: ''
+        }
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/metadata/offlinedata/OfflineDataList.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card class="box-card" shadow="always">
+  <el-card v-loading="boxCardLoading" class="box-card" shadow="always">
     <el-form ref="queryForm" :model="queryParams" :inline="true">
       <el-form-item label="项目" prop="projectId">
         <el-select v-model="queryParams.projectId" clearable size="small" placeholder="项目" class="filter-item" @change="handleQuery">
@@ -102,17 +102,19 @@
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
         <template slot-scope="scope">
           <el-button
+            v-if="scope.row.isSwitch != 'jrcg'"
             size="mini"
             type="text"
             icon="el-icon-sort"
-            @click="handleEdit(scope.row)"
+            @click="handleSwitch(scope.row)"
           >执行接入</el-button>
           <el-button
+            v-if="scope.row.isSwitch == 'jrcg'"
             size="mini"
             type="text"
             icon="el-icon-view"
-            @click="handleEdit(scope.row)"
+            @click="handleDetail(scope.row)"
-          >接入详情</el-button>
+          >查看接入数据</el-button>
           <el-button
             size="mini"
             type="text"
@@ -159,6 +161,7 @@
         },
         // 遮罩层
         loading: true,
+        boxCardLoading: false,
         // 表格头
         tableColumns: [
           { prop: 'fileName', label: '离线文件名称', show: true },
@@ -231,6 +234,21 @@
       initCols() {
         this.checkedTableColumns = this.tableColumns.map(col => col.prop)
       },
+      handleSwitch(row) {
+        this.boxCardLoading = true
+        setTimeout(() => {
+          row.isSwitch = 'jrcg'
+          this.boxCardLoading = false
+          this.$message.success('接入成功')
+        }, 2000)
+      },
+      /** 详情按钮操作 */
+      handleDetail(row) {
+        this.showOptions.data.id = row.id
+        this.showOptions.showList = false
+        this.showOptions.showDetail = true
+        this.$emit('showCard', this.showOptions)
+      },
       handleCheckedColsChange(val) {
         this.tableColumns.forEach(col => {
           if (!this.checkedTableColumns.includes(col.prop)) {

src/views/metadata/offlinedata/index.vue

@@ -2,21 +2,24 @@
   <div class="app-container">
     <transition name="el-zoom-in-center">
       <offline-data-list v-if="options.showList" @showCard="showCard" />
+      <offline-data-detail v-if="options.showDetail" @showCard="showCard" />
     </transition>
   </div>
 </template>
 
 <script>
   import OfflineDataList from './OfflineDataList'
+  import OfflineDataDetail from './OfflineDataDetail'
 
   export default {
     name: 'OfflineData',
-    components: { OfflineDataList },
+    components: { OfflineDataList, OfflineDataDetail },
     data() {
       return {
         options: {
           data: {},
-          showList: true
+          showList: true,
+          showDetail: true
         }
       }
     },