首页增加办公数据

klp-ui/src/views/components/FlowTable.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="order-analysis-dashboard" v-loading="loading">
+    <!-- 业绩区 -->
+    <el-tabs v-model="activeTab" type="card">
+      <el-tab-pane label="我的流程" name="my">
+        <el-table v-loading="loading" :data="ownProcessList">
+          <el-table-column label="流程编号" align="center" prop="procInsId" :show-overflow-tooltip="true" />
+          <el-table-column label="流程名称" align="center" prop="procDefName" :show-overflow-tooltip="true" />
+          <el-table-column label="流程类别" align="center" prop="category" :formatter="categoryFormat" />
+          <el-table-column label="流程版本" align="center" width="80px">
+            <template slot-scope="scope">
+              <el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="当前节点" align="center" prop="taskName" />
+          <el-table-column label="提交时间" align="center" prop="createTime" width="180" />
+          <el-table-column label="流程状态" align="center" width="100">
+            <template slot-scope="scope">
+              <dict-tag :options="dict.type.wf_process_status" :value="scope.row.processStatus" />
+            </template>
+          </el-table-column>
+          <el-table-column label="耗时" align="center" prop="duration" width="180" />
+        </el-table>
+      </el-tab-pane>
+      <el-tab-pane label="代办任务" name="todo">
+        <el-table v-loading="loading" :data="todoList">
+          <el-table-column label="任务编号" align="center" prop="taskId" :show-overflow-tooltip="true" />
+          <el-table-column label="流程名称" align="center" prop="procDefName" />
+          <el-table-column label="任务节点" align="center" prop="taskName" />
+          <el-table-column label="流程版本" align="center">
+            <template slot-scope="scope">
+              <el-tag size="medium">v{{ scope.row.procDefVersion }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="流程发起人" align="center">
+            <template slot-scope="scope">
+              <label>{{ scope.row.startUserName }}</label>
+            </template>
+          </el-table-column>
+          <el-table-column label="接收时间" align="center" prop="createTime" width="180" />
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" icon="el-icon-edit-outline" @click="handleProcess(scope.row)"
+                v-hasPermi="['workflow:process:approval']">办理
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import { listOwnProcess } from '@/api/workflow/process';
+import { listTodoProcess } from '@/api/workflow/process';
+
+export default {
+  name: 'OrderAnalysisDashboard',
+  data() {
+    return {
+      loading: false,
+      activeTab: 'my',
+      ownProcessList: [],
+      todoList: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10
+      },
+      dateRange: []
+    }
+  },
+  dicts: ['wf_process_status'],
+  created() {
+    this.loading = true;
+    Promise.all([this.getList1(), this.getList2()]).then(() => {
+      this.loading = false;
+    });
+  },
+  methods: {
+    /** 查询流程定义列表 */
+    async getList1() {
+      const response = await listOwnProcess(this.addDateRange(this.queryParams, this.dateRange));
+      this.ownProcessList = response.rows;
+    },
+    async getList2() {
+      const response = await listTodoProcess(this.addDateRange(this.queryParams, this.dateRange));
+      this.todoList = response.rows;
+    },
+  }
+}
+</script>
+
+<style scoped>
+.order-analysis-dashboard {
+  padding: 24px;
+  background-color: #f7f8fa;
+  box-sizing: border-box;
+}
+
+.section-row {
+  margin-bottom: 30px;
+}
+
+.section-title {
+  margin-bottom: 20px;
+  padding: 0 10px;
+}
+
+.section-title h2 {
+  margin: 0 0 8px 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.section-title p {
+  margin: 0;
+  font-size: 14px;
+  color: #909399;
+}
+
+.top-row,
+.chart-row {
+  margin-bottom: 20px;
+}
+
+.chart-row>.el-col {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+}
+</style>

klp-ui/src/views/index.vue

@@ -18,7 +18,7 @@
 
     <el-row>
       <el-col :span="12">
-        办公管理数据
+        <FlowTable />
       </el-col>
 
       <el-col :span="12">
@@ -60,11 +60,13 @@
 import * as echarts from 'echarts';
 import AllApplications from '@/views/components/AllApplications.vue';
 import OrderDashboard from '@/views/components/OrderDashboard.vue';
+import FlowTable from '@/views/components/FlowTable.vue';
 
 export default {
   components: {
     AllApplications,
-    OrderDashboard
+    OrderDashboard,
+    FlowTable
   },
   data() {
     return {

klp-ui/src/views/wms/order/components/CurrentSituationArea.vue

@@ -103,17 +103,17 @@
         </div>
         <div class="table-container">
           <el-table :data="orderProductStatistics" size="small" height="320" v-loading="!orderProductStatistics.length">
-            <el-table-column prop="productName" label="产品名称" width="120" />
-            <el-table-column prop="orderDemandQuantity" label="需求数量" width="80" />
-            <el-table-column prop="currentStockQuantity" label="库存数量" width="80" />
-            <el-table-column prop="stockGap" label="库存缺口" width="80">
+            <el-table-column prop="productName" label="产品名称" />
+            <el-table-column prop="orderDemandQuantity" label="需求数量" />
+            <el-table-column prop="currentStockQuantity" label="库存数量" />
+            <el-table-column prop="stockGap" label="库存缺口">
               <template slot-scope="scope">
                 <span :class="getStockGapClass(scope.row.stockGap)">
                   {{ scope.row.stockGap }}
                 </span>
               </template>
             </el-table-column>
-            <el-table-column prop="relatedOrderCount" label="相关订单" width="80" />
+            <el-table-column prop="relatedOrderCount" label="相关订单" />
           </el-table>
           <div v-if="!orderProductStatistics.length" class="empty-data">
             <i class="el-icon-warning-outline"></i>