工作台页面优化

src/views/modules/sys/dashboard/workBench/Pending.vue

@@ -1,198 +1,164 @@
 <template>
   <div>
-    <el-row :gutter="30">
-      <el-col :span="12">
-        <div class="page" style="height: 600px">
-          <!--<el-form size="small" :inline="true"  class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
-            <el-form-item label="创建时间" prop="searchDates">
-              <el-date-picker
-                v-model="searchDates"
-                type="daterange"
-                size="small"
-                align="right"
-                value-format="yyyy-MM-dd HH:mm:ss"
-                unlink-panels
-                range-separator="至"
-                start-placeholder="开始日期"
-                end-placeholder="结束日期"
-                :picker-options="pickerOptions">
-              </el-date-picker>
-            </el-form-item>
-            <el-form-item>
-              <el-button  type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
-              <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
-            </el-form-item>
-          </el-form>-->
-          <div class="top bg-white">
-            <!--      <vxe-toolbar :refresh="{query: refreshList}" export print custom></vxe-toolbar>-->
-            <div style="height: 18px" >
-              <span>我的待办({{tablePage.total}})</span>
-
-              <div style="float:right;align-items:center;display:flex;height: 18px">
-                <el-button type="text" style="float:right" @click="resetSearch()">刷新</el-button>
-                <el-button type="text" style="float:right" @click="toPendingList()">更多>></el-button>
-
+    <el-container style="height: calc(100vh - 105px)">
+      <el-header style="padding:0px;height: 50%;" >
+        <el-container direction="horizontal"style="height: 100%;">
+        <el-main style="height: 100%;width: 50%;padding: 0 5px 0 0;" >
+          <div class="page" style="height: calc(100% - 0px);">
+            <div class="top bg-white" style="height: calc(100% - 10px);border: 1px solid #c8ced4;padding-top: 15px">
+              <div style="height: 18px" >
+                <span>我的待办</span><el-badge class="mark" v-if="tablePage.total !== 0" :value="tablePage.total" :max="99" />
+                <div style="float:right;align-items:center;display:flex;height: 18px">
+                  <el-button type="text" style="float:right" @click="resetSearch()">刷新</el-button>
+                  <el-button type="text" style="float:right" @click="toPendingList()">更多>></el-button>
+                </div>
+              </div>
+              <div style="height: calc(100% - 55px);margin-top: 5px">
+                <vxe-table
+                  border="inner"
+                  auto-resize
+                  resizable
+                  height="auto"
+                  :loading="loading"
+                  size="small"
+                  ref="todoTable"
+                  show-header-overflow
+                  show-overflow
+                  highlight-hover-row
+                  :menu-config="{}"
+                  :print-config="{}"
+                  :import-config="{}"
+                  :export-config="{}"
+                  :data="dataList"
+                  header-align="center"
+                  :checkbox-config="{}">
+                  <!--<vxe-column type="seq" width="60" title="序号"></vxe-column>
+                  <vxe-column type="checkbox"  width="40px"></vxe-column>-->
+                  <vxe-column title="实例标题" field="vars.title">
+                    <template slot-scope="scope">
+                      <el-link type="primary" :underline="false" v-if="scope.row.status === 'todo'"
+                               @click="todo(scope.row)">{{scope.row.vars.title}}
+                      </el-link>
+                      <span v-else>{{scope.row.vars.title}}</span>
+                    </template>
+                  </vxe-column>
+                  <vxe-column title="流程名称" field="processDefinitionName"></vxe-column>
+                  <vxe-column title="当前环节" field="task.name">
+                    <template slot-scope="scope">
+                      <el-tag>{{scope.row.task.name}}</el-tag>
+                    </template>
+                  </vxe-column>
+                  <vxe-column title="流程发起人" field="vars.userName"></vxe-column>
+                  <vxe-column
+                    field="task.createTime"
+                    title="创建时间">
+                  </vxe-column>
+                  <vxe-column title="操作" width="200px" fixed="right" align="center">
+                    <template slot-scope="scope">
+                      <el-button type="text" size="small" @click="todo(scope.row)">办理</el-button>
+                      <el-button  type="text" size="small" @click="trace(scope.row)">进度</el-button>
+                    </template>
+                  </vxe-column>
+                </vxe-table>
+                <vxe-pager
+                  background
+                  style="margin-top: 5px"
+                  size="small"
+                  :current-page="tablePage.currentPage"
+                  :page-size="tablePage.pageSize"
+                  :total="tablePage.total"
+                  :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
+                  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+                  @page-change="currentChangeHandle">
+                </vxe-pager>
               </div>
             </div>
-            <div style="height: calc(100% - 80px);margin-top: 15px">
-              <vxe-table
-                border="inner"
-                auto-resize
-                resizable
-                height="auto"
-                :loading="loading"
-                size="small"
-                ref="todoTable"
-                show-header-overflow
-                show-overflow
-                highlight-hover-row
-                :menu-config="{}"
-                :print-config="{}"
-                :import-config="{}"
-                :export-config="{}"
-                :data="dataList"
-                header-align="center"
-                :checkbox-config="{}">
-                <!--<vxe-column type="seq" width="60" title="序号"></vxe-column>
-                <vxe-column type="checkbox"  width="40px"></vxe-column>-->
-                <vxe-column title="实例标题" field="vars.title">
-                  <template slot-scope="scope">
-                    <el-link type="primary" :underline="false" v-if="scope.row.status === 'todo'"
-                             @click="todo(scope.row)">{{scope.row.vars.title}}
-                    </el-link>
-                    <span v-else>{{scope.row.vars.title}}</span>
-                  </template>
-                </vxe-column>
-                <vxe-column title="流程名称" field="processDefinitionName"></vxe-column>
-                <vxe-column title="当前环节" field="task.name">
-                  <template slot-scope="scope">
-                    <el-tag>{{scope.row.task.name}}</el-tag>
-                  </template>
-                </vxe-column>
-                <vxe-column title="流程发起人" field="vars.userName"></vxe-column>
-                <vxe-column
-                  field="task.createTime"
-                  title="创建时间">
-                </vxe-column>
-                <vxe-column title="操作" width="200px" fixed="right" align="center">
-                  <template slot-scope="scope">
-                    <el-button type="text" size="small" @click="todo(scope.row)">办理</el-button>
-                                  <el-button  type="text" size="small" @click="trace(scope.row)">进度</el-button>
-                  </template>
-                </vxe-column>
-              </vxe-table>
-              <vxe-pager
-                background
-                size="small"
-                :current-page="tablePage.currentPage"
-                :page-size="tablePage.pageSize"
-                :total="tablePage.total"
-                :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
-                :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
-                @page-change="currentChangeHandle">
-              </vxe-pager>
-            </div>
+            <el-dialog
+              title="查看进度"
+              :close-on-click-modal="true"
+              :visible.sync="visible"
+              v-dialogDrag
+              width="70%"
+              height="600px">
+              <flow-chart ref="preview" :processInstanceId="processInstanceId"></flow-chart>
+            </el-dialog>
+            <user-select ref="userSelect" :limit="1" @doSubmit="selectUsersToTransferTask"></user-select>
           </div>
-          <el-dialog
-            title="查看进度"
-            :close-on-click-modal="true"
-            :visible.sync="visible"
-            v-dialogDrag
-            width="70%"
-            height="600px">
-            <flow-chart ref="preview" :processInstanceId="processInstanceId"></flow-chart>
-          </el-dialog>
-              <user-select ref="userSelect" :limit="1" @doSubmit="selectUsersToTransferTask"></user-select>
-        </div>
-      </el-col>
-
-      <el-col :span="12">
-        <div class="page" style="height: 600px">
-          <div class="top bg-white">
-            <div style="height: 18px" >
-              <span>我的通知({{noticePageList.total}})</span>
-
-              <div style="float:right;align-items:center;display:flex;height: 18px">
-                <el-button type="text" style="float:right" @click="toNoticeList()">更多>></el-button>
-
+        </el-main>
+        <el-main style="height: 100%;width: 50%;padding: 0 0 0 5px;" >
+          <div class="page" style="height: calc(100% - 0px);">
+            <div class="top bg-white" style="height: calc(100% - 10px);border: 1px solid #c8ced4;padding-top: 15px">
+              <div style="height: 18px" >
+                <span>我的通知</span><el-badge class="mark" v-if="noticePageList.total !== 0" :value="noticePageList.total" :max="99" />
+                <div style="float:right;align-items:center;display:flex;height: 18px">
+                  <el-button type="text" style="float:right" @click="toNoticeList()">更多>></el-button>
+                </div>
               </div>
+              <div style="height: calc(100% - 55px);margin-top: 5px">
+                <vxe-table
+                  border="inner"
+                  auto-resize
+                  resizable
+                  height="auto"
+                  :loading="loading"
+                  size="small"
+                  ref="noticetable"
+                  show-header-overflow
+                  show-overflow
+                  highlight-hover-row
+                  :menu-config="{}"
+                  :print-config="{}"
+                  :import-config="{}"
+                  :export-config="{}"
+                  @sort-change="sortChangeHandle"
+                  :sort-config="{remote:true}"
+                  :data="dataNoticeList"
+                  :checkbox-config="{}">
+                  <vxe-column title="实例标题" field="title">
+                    <template slot-scope="scope">
+                      <el-link type="primary" :underline="false"
+                               @click="todoPage(scope.row)">{{scope.row.title}}
+                      </el-link>
+                    </template>
+                  </vxe-column>
+                  <vxe-column title="流程名称" field="taskName"></vxe-column>
+                  <vxe-column title="流程发起人" field="createUser"></vxe-column>
+                  <vxe-column
+                    field="createTime"
+                    title="创建时间">
+                  </vxe-column>
+                </vxe-table>
+                <vxe-pager
+                  background
+                  size="small"
+                  style="margin-top: 5px"
+                  :current-page="noticePageList.currentPage"
+                  :page-size="noticePageList.pageSize"
+                  :total="noticePageList.total"
+                  :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
+                  :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
+                  @page-change="currentChangeHandle">
+                </vxe-pager>
+              </div>
+              <!-- 弹窗, 新增 / 修改 -->
+              <NotifyForm  ref="notifyForm" @refreshDataList="refreshList"></NotifyForm>
             </div>
-
-            <div style="height: calc(100% - 80px);margin-top: 15px">
-              <vxe-table
-                border="inner"
-                auto-resize
-                resizable
-                height="auto"
-                :loading="loading"
-                size="small"
-                ref="noticetable"
-                show-header-overflow
-                show-overflow
-                highlight-hover-row
-                :menu-config="{}"
-                :print-config="{}"
-                :import-config="{}"
-                :export-config="{}"
-                @sort-change="sortChangeHandle"
-                :sort-config="{remote:true}"
-                :data="dataNoticeList"
-                :checkbox-config="{}">
-                <vxe-column title="实例标题" field="title">
-                  <template slot-scope="scope">
-                    <el-link type="primary" :underline="false"
-                             @click="todoPage(scope.row)">{{scope.row.title}}
-                    </el-link>
-                  </template>
-                </vxe-column>
-                <vxe-column title="流程名称" field="taskName"></vxe-column>
-                <vxe-column title="流程发起人" field="createUser"></vxe-column>
-                <vxe-column
-                  field="createTime"
-                  title="创建时间">
-                </vxe-column>
-              </vxe-table>
-              <vxe-pager
-                background
-                size="small"
-                :current-page="noticePageList.currentPage"
-                :page-size="noticePageList.pageSize"
-                :total="noticePageList.total"
-                :page-sizes="[10, 20, 100, 1000, {label: '全量数据', value: 1000000}]"
-                :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
-                @page-change="currentChangeHandle">
-              </vxe-pager>
-            </div>
-            <!-- 弹窗, 新增 / 修改 -->
-            <NotifyForm  ref="notifyForm" @refreshDataList="refreshList"></NotifyForm>
           </div>
-        </div>
-      </el-col>
-
-      <el-col :span="12">
-        <div class="page" style="height: 600px">
-          <!--<el-form size="small" :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()" @submit.native.prevent>
-            &lt;!&ndash; 搜索框&ndash;&gt;
-            <el-form-item prop="title">
-              <el-input size="small" v-model="searchForm.title" placeholder="标题" clearable></el-input>
-            </el-form-item>
-            <el-form-item>
-              <el-button  type="primary" @click="refreshList()" size="small" icon="el-icon-search">查询</el-button>
-              <el-button @click="resetSearch()" size="small" icon="el-icon-refresh-right">重置</el-button>
-            </el-form-item>
-          </el-form>-->
-          <div class="top bg-white">
+        </el-main>
+        </el-container>
+      </el-header>
+      <el-header style="padding:0px;height: 50%;">
+        <el-container direction="horizontal"style="height: 100%;">
+          <el-main style="height: 100%;width: 50%;padding: 0 5px 0 0;" >
+            <div class="page" style="calc(100% - 0px);">
+          <div class="top bg-white"style="height: calc(100% - 10px);border: 1px solid #c8ced4;padding-top: 15px">
             <div style="height: 18px" >
-              <span>公告({{noticePage.total}})</span>
-
+              <span>公告</span><el-badge v-if="noticePage.total !== 0" class="mark" :value="noticePage.total" :max="99" />
               <div style="float:right;align-items:center;display:flex;height: 18px">
                 <el-button type="text" style="float:right" @click="toNotice()">更多>></el-button>
-
               </div>
             </div>
-
-<!--            <vxe-toolbar :refresh="{query: refreshList}" export print custom></vxe-toolbar>-->
-            <div style="height: calc(100% - 80px);margin-top: 15px">
+            <div style="height: calc(100% - 55px);margin-top: 5px">
               <vxe-table
                 border="inner"
                 auto-resize
@@ -249,6 +215,7 @@
               <vxe-pager
                 background
                 size="small"
+                style="margin-top: 5px"
                 :current-page="noticePage.currentPage"
                 :page-size="noticePage.pageSize"
                 :total="noticePage.total"
@@ -261,9 +228,17 @@
             <NotifyForm  ref="notifyForm" @refreshDataList="refreshList"></NotifyForm>
           </div>
         </div>
-      </el-col>
-
-    </el-row>
+          </el-main>
+          <el-main style="height: 100%;width: 50%;padding: 0 0 0 5px;" >
+            <div class="page" style="calc(100% - 0px);">
+              <div class="top bg-white"style="height: calc(100% - 10px);border: 1px solid #c8ced4;padding-top: 15px">
+                <el-empty></el-empty>
+              </div>
+            </div>
+          </el-main>
+        </el-container>
+      </el-header>
+    </el-container>
   </div>
 </template>