日志弹窗

src/modules/base/components/DataTaskDialog.vue

@@ -1,86 +1,102 @@
 <template>
-  <el-dialog
-    class="data-task-dialog page-dialog"
-    :visible.sync="modalIsShow"
-    title="数据任务进度"
-    top="10vh"
-    width="900px"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    append-to-body
-    @open="visibleChange"
-  >
-    <div class="part-box part-box-pad">
-      <el-table ref="TableList" :data="dataList">
-        <el-table-column
-          type="index"
-          label="序号"
-          width="50"
-          :index="indexMethod"
-        ></el-table-column>
-        <el-table-column prop="type" label="类别" width="140">
-          <span slot-scope="scope">
-            {{ scope.row.type | dataTaskTypeFilter }}
-          </span>
-        </el-table-column>
-        <el-table-column prop="status" label="状态" width="100">
-          <span slot-scope="scope">
-            {{ scope.row.status | dataTaskStatusFilter }}
-          </span>
-        </el-table-column>
-        <el-table-column prop="result" label="结果" width="80">
-          <span slot-scope="scope">
-            {{ scope.row.result | dataTaskResultFilter }}
-          </span>
-        </el-table-column>
-        <el-table-column prop="createTime" label="创建时间" width="170">
-          <span slot-scope="scope">{{
-            scope.row.createTime | timestampFilter
-          }}</span>
-        </el-table-column>
-        <el-table-column prop="createName" label="创建人"></el-table-column>
-        <el-table-column
-          class-name="action-column"
-          label="操作"
-          width="160px"
-          align="center"
-          fixed="right"
-        >
-          <template slot-scope="scope">
-            <el-button
-              v-if="scope.row.reportFile"
-              class="btn-primary"
-              type="text"
-              :disabled="loading"
-              @click="toDonwload(scope.row.reportFile)"
-              >导出日志</el-button
-            >
-            <el-button
-              v-if="scope.row.resultFile"
-              class="btn-primary"
-              type="text"
-              :disabled="loading"
-              @click="toDonwload(scope.row.resultFile)"
-              >下载文件</el-button
-            >
-          </template>
-        </el-table-column>
-      </el-table>
-      <div class="part-page">
-        <el-pagination
-          background
-          layout="total,prev, pager, next"
-          :current-page="current"
-          :total="total"
-          :page-size="size"
-          @current-change="toPage"
-        >
-        </el-pagination>
+  <div>
+    <el-dialog
+      class="data-task-dialog page-dialog"
+      :visible.sync="modalIsShow"
+      title="数据任务进度"
+      top="10vh"
+      width="900px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      @open="visibleChange"
+    >
+      <div class="part-box part-box-pad">
+        <el-table ref="TableList" :data="dataList">
+          <el-table-column
+            type="index"
+            label="序号"
+            width="50"
+            :index="indexMethod"
+          ></el-table-column>
+          <el-table-column prop="type" label="类别" width="140">
+            <span slot-scope="scope">
+              {{ scope.row.type | dataTaskTypeFilter }}
+            </span>
+          </el-table-column>
+          <el-table-column prop="status" label="状态" width="100">
+            <span slot-scope="scope">
+              {{ scope.row.status | dataTaskStatusFilter }}
+            </span>
+          </el-table-column>
+          <el-table-column prop="result" label="结果" width="80">
+            <span slot-scope="scope">
+              {{ scope.row.result | dataTaskResultFilter }}
+            </span>
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" width="170">
+            <span slot-scope="scope">{{
+              scope.row.createTime | timestampFilter
+            }}</span>
+          </el-table-column>
+          <el-table-column prop="createName" label="创建人"></el-table-column>
+          <el-table-column
+            class-name="action-column"
+            label="操作"
+            width="160px"
+            fixed="right"
+          >
+            <template slot-scope="scope">
+              <el-button
+                v-if="scope.row.summary"
+                class="btn-primary"
+                type="text"
+                :disabled="loading"
+                @click="toViewLog(scope.row)"
+                >导出日志</el-button
+              >
+              <el-button
+                v-if="scope.row.resultFile"
+                class="btn-primary"
+                type="text"
+                :disabled="loading"
+                @click="toDonwload(scope.row.resultFile)"
+                >下载文件</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="part-page">
+          <el-pagination
+            background
+            layout="total,prev, pager, next"
+            :current-page="current"
+            :total="total"
+            :page-size="size"
+            @current-change="toPage"
+          >
+          </el-pagination>
+        </div>
       </div>
-    </div>
 
-    <div slot="footer"></div>
-  </el-dialog>
+      <div slot="footer"></div>
+    </el-dialog>
+
+    <el-dialog
+      class="log-dialog"
+      :visible.sync="logModalIsShow"
+      title="日志"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      top="10vh"
+      width="800px"
+    >
+      <div style="min-height: 300px; overflow: auto">
+        <p v-for="(cont, cidx) in logList" :key="cidx">{{ cont }}</p>
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
@@ -108,6 +124,8 @@ export default {
       size: this.GLOBAL.pageSize,
       total: 0,
       loading: false,
+      logModalIsShow: false,
+      logList: [],
     };
   },
   methods: {
@@ -148,6 +166,10 @@ export default {
       downloadByUrl(url);
       this.$message.success("文件开始成功！");
     },
+    toViewLog(row) {
+      this.logList = (row.summary || "").split("\n");
+      this.logModalIsShow = true;
+    },
   },
 };
 </script>