首页分页修改

src/pages/main/leader/leaderhomeTask.vue

@@ -2,9 +2,7 @@
   <div style="display: flex; justify-content: space-between">
     <div class="taskbox">
       <div class="tit">
-        <span class="span1" @click="tabboxclick1"
-          >我的待办 ({{ this.totalDaiban}})</span
-        >
+        <span class="span1" @click="tabboxclick1">我的待办 ({{ this.daitotal }})</span>
         <span class="span2" @click="tabboxclick2">我的已办</span>
         <span class="span3" @click="tabboxclick3">我的发起</span>
         <!-- <span class="span" @click="more">更多>></span> -->
@@ -12,300 +10,158 @@
       <div class="fatherbox">
         <div class="tabbox">
           <!-- 我的待办列表 -->
-          <el-table
-            :header-cell-style="{
-              background: '#F2F2F2',
-              'text-align': 'center',
-            }"
-            :cell-style="{ background: '#FaFaFa' }"
-            v-if="tabbox1"
-            class="com-table"
-            ref="multipleTable"
-            :data="niticList"
-            tooltip-effect="dark"
-            size="small"
-            style="width: 100%; font-size: 16px; background: '#FaFaFa'"
-            height="442px"
-          >
-            <el-table-column
-              prop="woTitle"
-              label="工单标题"
-              align="left"
-              :show-overflow-tooltip="true"
-            >
+          <el-table :header-cell-style="{
+            background: '#F2F2F2',
+            'text-align': 'center',
+          }" :cell-style="{ background: '#FaFaFa' }" v-if="tabbox1" class="com-table" ref="multipleTable"
+            :data="niticList" tooltip-effect="dark" size="small"
+            style="width: 100%; font-size: 16px; background: '#FaFaFa'" height="442px">
+            <el-table-column prop="woTitle" label="工单标题" align="left" :show-overflow-tooltip="true">
               <template slot-scope="scope">
-                <span
-                  :title="scope.row.woTitle"
-                  @click="RowTitle(scope.row)"
-                  :style="
-                    scope.row.woTypeDesc == '预警工单'
-                      ? 'cursor: pointer;color:red;'
-                      : 'cursor: pointer;color:blue;'
-                  "
-                >
+                <span :title="scope.row.woTitle" @click="RowTitle(scope.row)" :style="
+                  scope.row.woTypeDesc == '预警工单'
+                    ? 'cursor: pointer;color:red;'
+                    : 'cursor: pointer;color:blue;'
+                ">
                   <!-- <span style="float: left; color: #afb2d8;margin-right:5px"
                   >•</span> -->
-                  {{ scope.row.woTitle }}</span
-                >
+                  {{ scope.row.woTitle }}
+                </span>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="procName"
-              label="流程名称"
-              align="center"
-              width="180"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column prop="procName" label="流程名称" align="center" width="180" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                 <span :title="scope.row.procName">{{
-                  scope.row.procName
+                    scope.row.procName
                 }}</span>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="assigneName"
-              label="上一步处理人"
-              align="center"
-              width="120"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column prop="assigneName" label="上一步处理人" align="center" width="120" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                 <span :title="scope.row.assigneName">{{
-                  scope.row.assigneName
+                    scope.row.assigneName
                 }}</span>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="clsj"
-              label="上一步处理时间"
-              align="center"
-              width="135"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column prop="clsj" label="上一步处理时间" align="center" width="135" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                 <span>{{ scope.row.clsj }}</span>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="opName"
-              label="发起姓名"
-              align="center"
-              width="100"
-            >
+            <el-table-column prop="opName" label="发起姓名" align="center" width="100">
               <template slot-scope="scope">
                 <span>{{ scope.row.opName }}</span>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="createTime"
-              label="发起时间"
-              align="center"
-              width="130"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column prop="createTime" label="发起时间" align="center" width="130" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                 <span>{{ scope.row.createTime }}</span>
               </template>
             </el-table-column>
           </el-table>
-          <el-pagination
-            class="pageBox"
-            @current-change="currchangeDdaiban"
-            layout="total,prev, pager, next"
-            background
-            :page-size="pagesize"
-            :total="totalDaiban"
-            v-if="tabbox1"
-          >
+          <!-- <el-pagination class="pageBox" @current-change="currchangeDdaiban" layout="total,prev, pager, next" background
+            page-size="10" :total="totalDaiban" v-if="tabbox1">
+          </el-pagination> -->
+          <el-pagination @current-change="currchangeDdaiban" :current-page="daipage" :page-size="daisize"
+            layout="total,prev, pager, next" :total="daitotal" v-if="tabbox1">
           </el-pagination>
         </div>
         <div class="tabbox">
           <!-- 我的已办列表 -->
-          <el-table
-            :header-cell-style="{
-              background: '#F2F2F2',
-              'text-align': 'center',
-            }"
-            :cell-style="{ background: '#FaFaFa' }"
-            class="com-table"
-            ref="tableDatayj"
-            v-if="tabbox2"
-            :data="tableDatayj"
-            tooltip-effect="dark"
-            size="small"
-            style="width: 100%; font-size: 16px; background: '#FaFaFa'"
-            height="442px"
-          >
-            <el-table-column
-              prop="woTitle"
-              label="工单标题"
-              align="left"
-              :show-overflow-tooltip="true"
-            >
+          <el-table :header-cell-style="{
+            background: '#F2F2F2',
+            'text-align': 'center',
+          }" :cell-style="{ background: '#FaFaFa' }" class="com-table" ref="tableDatayj" v-if="tabbox2"
+            :data="tableDatayj" tooltip-effect="dark" size="small"
+            style="width: 100%; font-size: 16px; background: '#FaFaFa'" height="442px">
+            <el-table-column prop="woTitle" label="工单标题" align="left" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                 <!-- <span style="float: left; color: #afb2d8;margin-right:5px"
                   >•</span
                 > -->
-                <span
-                  @click="RowDoneTitle(scope.row)"
-                  :title="scope.row.woTitle"
-                  style="cursor: pointer; color: blue"
-                  >{{ scope.row.woTitle }}</span
-                >
+                <span @click="RowDoneTitle(scope.row)" :title="scope.row.woTitle"
+                  style="cursor: pointer; color: blue">{{ scope.row.woTitle }}</span>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="procName"
-              label="流程名称"
-              align="center"
-              width="180"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column prop="procName" label="流程名称" align="center" width="180" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                 <span :title="scope.row.procName">{{
-                  scope.row.procName
+                    scope.row.procName
                 }}</span>
               </template>
             </el-table-column>
 
-            <el-table-column
-              prop="opName"
-              label="发起姓名"
-              align="center"
-              width="120"
-            >
+            <el-table-column prop="opName" label="发起姓名" align="center" width="120">
               <template slot-scope="scope">
                 <span>{{ scope.row.opName }}</span>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="createTime"
-              label="发起时间"
-              align="center"
-              width="180"
-            >
+            <el-table-column prop="createTime" label="发起时间" align="center" width="180">
               <template slot-scope="scope">
                 <span>{{ scope.row.createTime }}</span>
               </template>
             </el-table-column>
           </el-table>
-          <el-pagination
-            class="pageBox"
-            v-if="tabbox2"
-            @current-change="currchangeDone"
-            layout="total,prev, pager, next"
-            background
-            :total="totalDone"
-            :page-size="pagesize"
-          >
+          <!-- <el-pagination class="pageBox"  @current-change="currchangeDone"
+            layout="total,prev, pager, next" background :total="totalDone" page-size="10">
+          </el-pagination> -->
+          <el-pagination @current-change="currchangeDyiban" :current-page="yibanpage" :page-size="yibansize"
+            layout="total,prev, pager, next" :total="yibantotal" v-if="tabbox2">
           </el-pagination>
         </div>
         <div class="tabbox">
           <!-- 我的发起列表 -->
-          <el-table
-            :header-cell-style="{
-              background: '#F2F2F2',
-              'text-align': 'center',
-            }"
-            :cell-style="{ background: '#FaFaFa' }"
-            class="com-table"
-            ref="OpList"
-            :data="OpList"
-            v-if="tabbox3"
-            tooltip-effect="dark"
-            size="small"
-            style="width: 100%; font-size: 16px; background: '#FaFaFa'"
-            height="442px"
-          >
-            <el-table-column
-              prop="woTitle"
-              label="工单标题"
-              align="left"
-              :show-overflow-tooltip="true"
-            >
+          <el-table :header-cell-style="{
+            background: '#F2F2F2',
+            'text-align': 'center',
+          }" :cell-style="{ background: '#FaFaFa' }" class="com-table" ref="OpList" :data="OpList" v-if="tabbox3"
+            tooltip-effect="dark" size="small" style="width: 100%; font-size: 16px; background: '#FaFaFa'"
+            height="442px">
+            <el-table-column prop="woTitle" label="工单标题" align="left" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                 <!-- <span style="float: left; color: #afb2d8;margin-right:5px"
                   >•</span
                 > -->
-                <span
-                  :title="scope.row.woTitle"
-                  @click="RowlaunchTitle(scope.row)"
-                  style="cursor: pointer; color: blue"
-                  >{{ scope.row.woTitle }}</span
-                >
+                <span :title="scope.row.woTitle" @click="RowlaunchTitle(scope.row)"
+                  style="cursor: pointer; color: blue">{{ scope.row.woTitle }}</span>
               </template>
             </el-table-column>
-            <el-table-column
-              prop="procName"
-              label="流程名称"
-              align="center"
-              :show-overflow-tooltip="true"
-            >
+            <el-table-column prop="procName" label="流程名称" align="center" :show-overflow-tooltip="true">
               <template slot-scope="scope">
                 <span :title="scope.row.procName">{{
-                  scope.row.procName
+                    scope.row.procName
                 }}</span>
               </template>
             </el-table-column>
 
-            <el-table-column
-              prop="createTime"
-              label="发起时间"
-              align="center"
-              width="180"
-            >
+            <el-table-column prop="createTime" label="发起时间" align="center" width="180">
               <template slot-scope="scope">
                 <span>{{ scope.row.createTime }}</span>
               </template>
             </el-table-column>
           </el-table>
-          <el-pagination
-            class="pageBox"
-            @current-change="currchangeOp"
-            layout="total,prev, pager, next"
-            background
-            :total="totalOp"
-            v-if="tabbox3"
-            :page-size="pagesize"
-          >
+          <!-- <el-pagination class="pageBox" @current-change="currchangeOp" layout="total,prev, pager, next" background
+            :total="totalOp" v-if="tabbox3" page-size="10">
+          </el-pagination> -->
+          <el-pagination @current-change="currchangefaqi" :current-page="faqipage" :page-size="faqisize"
+            layout="total,prev, pager, next" :total="faqitotal" v-if="tabbox3">
           </el-pagination>
         </div>
       </div>
       <!-- 查看待办弹窗 -->
-      <el-dialog
-        title="查看"
-        :visible.sync="WorkOrderStatus"
-        width="50%"
-        :close-on-press-escape="false"
-        :show-close="true"
-        :destroy-on-close="true"
-        :modal-append-to-body="false"
-        :close-on-click-modal="false"
-      >
+      <el-dialog title="查看" :visible.sync="WorkOrderStatus" width="50%" :close-on-press-escape="false"
+        :show-close="true" :destroy-on-close="true" :modal-append-to-body="false" :close-on-click-modal="false">
         <div>
           <el-form :inline="true" :model="StatusList" class="demo-form-inline">
             <el-form-item label="工单标题">
-              <el-input
-                v-model="StatusList.woTitle"
-                placeholder="工单标题"
-                disabled
-              />
+              <el-input v-model="StatusList.woTitle" placeholder="工单标题" disabled />
             </el-form-item>
             <el-form-item label="流程名称">
-              <el-input
-                v-model="StatusList.procName"
-                placeholder="流程名称"
-                disabled
-              />
+              <el-input v-model="StatusList.procName" placeholder="流程名称" disabled />
             </el-form-item>
           </el-form>
           <h3>流程轨迹</h3>
-          <el-table
-            :data="WorkOrderList"
-            style="width: 100%"
-            max-height="350"
-            height="300"
-          >
+          <el-table :data="WorkOrderList" style="width: 100%" max-height="350" height="300">
             <el-table-column prop="createTime" label="节点开始时间" />
             <el-table-column prop="stepName" label="节点名称" width="180" />
             <el-table-column prop="assigneeName" label="处理角色" width="180" />
@@ -317,40 +173,19 @@
         </div>
       </el-dialog>
       <!-- 查看已办弹窗 -->
-      <el-dialog
-        title="查看"
-        :visible.sync="DoneStatus"
-        width="50%"
-        :close-on-press-escape="false"
-        :show-close="true"
-        :destroy-on-close="true"
-        :modal-append-to-body="false"
-        :close-on-click-modal="false"
-      >
+      <el-dialog title="查看" :visible.sync="DoneStatus" width="50%" :close-on-press-escape="false" :show-close="true"
+        :destroy-on-close="true" :modal-append-to-body="false" :close-on-click-modal="false">
         <div>
           <el-form :inline="true" :model="StatusList" class="demo-form-inline">
             <el-form-item label="工单标题">
-              <el-input
-                v-model="StatusList.woTitle"
-                placeholder="工单标题"
-                disabled
-              />
+              <el-input v-model="StatusList.woTitle" placeholder="工单标题" disabled />
             </el-form-item>
             <el-form-item label="流程名称">
-              <el-input
-                v-model="StatusList.procName"
-                placeholder="流程名称"
-                disabled
-              />
+              <el-input v-model="StatusList.procName" placeholder="流程名称" disabled />
             </el-form-item>
           </el-form>
           <h3>流程轨迹</h3>
-          <el-table
-            :data="DoneList"
-            style="width: 100%"
-            max-height="350"
-            height="300"
-          >
+          <el-table :data="DoneList" style="width: 100%" max-height="350" height="300">
             <el-table-column prop="createTime" label="节点开始时间" />
             <el-table-column prop="stepName" label="节点名称" width="180" />
             <el-table-column prop="assigneeName" label="处理角色" width="180" />
@@ -362,40 +197,19 @@
         </div>
       </el-dialog>
       <!-- 查看发起弹窗 -->
-      <el-dialog
-        title="查看"
-        :visible.sync="launchStatus"
-        width="50%"
-        :close-on-press-escape="false"
-        :show-close="true"
-        :destroy-on-close="true"
-        :modal-append-to-body="false"
-        :close-on-click-modal="false"
-      >
+      <el-dialog title="查看" :visible.sync="launchStatus" width="50%" :close-on-press-escape="false" :show-close="true"
+        :destroy-on-close="true" :modal-append-to-body="false" :close-on-click-modal="false">
         <div>
           <el-form :inline="true" :model="StatusList" class="demo-form-inline">
             <el-form-item label="工单标题">
-              <el-input
-                v-model="StatusList.woTitle"
-                placeholder="工单标题"
-                disabled
-              />
+              <el-input v-model="StatusList.woTitle" placeholder="工单标题" disabled />
             </el-form-item>
             <el-form-item label="流程名称">
-              <el-input
-                v-model="StatusList.procName"
-                placeholder="流程名称"
-                disabled
-              />
+              <el-input v-model="StatusList.procName" placeholder="流程名称" disabled />
             </el-form-item>
           </el-form>
           <h3>流程轨迹</h3>
-          <el-table
-            :data="launchList"
-            style="width: 100%"
-            max-height="350"
-            height="300"
-          >
+          <el-table :data="launchList" style="width: 100%" max-height="350" height="300">
             <el-table-column prop="createTime" label="节点开始时间" />
             <el-table-column prop="stepName" label="节点名称" width="180" />
             <el-table-column prop="assigneeName" label="处理角色" width="180" />
@@ -404,23 +218,10 @@
         </div>
       </el-dialog>
       <!-- 处理弹窗 -->
-      <el-dialog
-        title="处理"
-        :visible.sync="WorkOrderStatus1"
-        width="40%"
-        :close-on-press-escape="false"
-        :show-close="true"
-        :destroy-on-close="true"
-        :modal-append-to-body="false"
-        :close-on-click-modal="false"
-      >
+      <el-dialog title="处理" :visible.sync="WorkOrderStatus1" width="40%" :close-on-press-escape="false"
+        :show-close="true" :destroy-on-close="true" :modal-append-to-body="false" :close-on-click-modal="false">
         <div style="height: 450px">
-          <iframe
-            height="100%"
-            width="100%"
-            :src="dialogdiv"
-            frameborder="0"
-          ></iframe>
+          <iframe height="100%" width="100%" :src="dialogdiv" frameborder="0"></iframe>
         </div>
       </el-dialog>
     </div>
@@ -457,6 +258,15 @@ export default {
       pageSizeDone: 1,
       pageSizeDdaiban: 1,
       pageSizeOp: 1,
+      daipage: 1, //第几页
+      daisize: 10, //一页多少条
+      daitotal: 0, //总条目数
+      yibanpage: 1, //第几页
+      yibansize: 10, //一页多少条
+      yibantotal: 0, //总条目数
+      faqipage: 1, //第几页
+      faqisize: 10, //一页多少条
+      faqitotal: 0, //总条目数
     };
   },
   methods: {
@@ -564,7 +374,7 @@ export default {
         }).then((res) => {
           this.launchList = res.data;
         });
-      }else {
+      } else {
         this.$router.push(v.actionUrl);
       }
     },
@@ -582,12 +392,18 @@ export default {
         method: "post",
         headers: {
           "Content-Type": "application/json",
-          page: '{"pageNo":"' + n + '","pageSize":"10"}',
+          page: '{"pageNo":"' + '1' + '","pageSize":"100"}',
         },
-        data: '{"pageNo":"' + n + '","pageSize":"10"}',
+        data: '{"pageNo":"' + '1' + '","pageSize":"100"}',
       }).then((res) => {
-        this.niticList = res.data.data;
-        this.totalDaiban = res.data.totalRecord;
+       // this.niticList = res.data.data;
+       let data = JSON.parse(JSON.stringify(res.data.data))
+        this.niticList = data.splice(
+          (this.daipage - 1) * this.daisize,
+          this.daisize
+        );
+        this.daitotal = res.data.data.length
+        // this.totalDaiban = res.data.totalRecord;
       });
     },
 
@@ -600,27 +416,38 @@ export default {
         method: "post",
         headers: {
           "Content-Type": "application/json",
-          page: '{"pageNo":"' + n + '","pageSize":"10"}',
+          page: '{"pageNo":"' + '1' + '","pageSize":"100"}',
         },
-        data: '{"pageNo":"' + n + '","pageSize":"10"}',
+        data: '{"pageNo":"' + '1' + '","pageSize":"100"}',
       }).then((res) => {
-        this.tableDatayj = res.data.data;
-        this.totalDone = res.data.totalRecord;
+         // this.tableDatayj = res.data.data;
+        // this.totalDone = res.data.totalRecord;
+        let data = JSON.parse(JSON.stringify(res.data.data))
+        this.tableDatayj = data.splice(
+          (this.yibanpage - 1) * this.yibansize,
+          this.yibansize
+        );
+        this.yibantotal = res.data.data.length
       });
     },
     //待办分页
-    currchangeDdaiban(v) {
-      this.pageSizeDdaiban = v;
+    currchangeDdaiban(val) {
+      console.log("翻页，当前为第几页", val);
+      this.daipage = val;
+      // this.getTabelData2();
+      // this.pageSizeDdaiban = v;
       this.daiban(this.params, this.pageSizeDdaiban);
     },
     //已办分页
-    currchangeDone(v) {
-      this.pageSizeDone = v;
+    currchangeyiban(val) {
+      // this.pageSizeDone = v;
+      this.yibanpage = val;
       this.getListyj(this.params, this.pageSizeDone);
     },
     //发起分页
-    currchangeOp(v) {
-      this.pageSizeOp = v;
+    currchangefaqi(val) {
+      // this.pageSizeOp = v;
+      this.faqipage = val;
       this.getOPlist(this.params, this.pageSizeOp);
     },
     //我的发起列表初始化
@@ -631,12 +458,18 @@ export default {
         method: "post",
         headers: {
           "Content-Type": "application/json",
-          page: '{"pageNo":"' + n + '","pageSize":"10"}',
+          page: '{"pageNo":"' + '1' + '","pageSize":"100"}',
         },
-        data: '{"pageNo":"' + n + '","pageSize":"10"}',
+        data: '{"pageNo":"' + '1' + '","pageSize":"100"}',
       }).then((res) => {
-        this.OpList = res.data.data;
-        this.totalOp = res.data.totalRecord;
+      // this.OpList = res.data.data;
+        // this.totalOp = res.data.totalRecord;
+        let data = JSON.parse(JSON.stringify(res.data.data))
+        this.OpList = data.splice(
+          (this.faqipage - 1) * this.faqisize,
+          this.faqisize
+        );
+        this.faqitotal = res.data.data.length
       });
     },
     tabboxclick1() {
@@ -682,7 +515,7 @@ export default {
     this.getOPlist({}, 1);
     this.userInfo = JSON.parse(window.sessionStorage.userInfo);
   },
-  created() {},
+  created() { },
 };
 </script>
 
@@ -694,6 +527,7 @@ export default {
   //     justify-content: end;
   margin-top: 10px;
 }
+
 .taskbox {
   width: 100%;
   display: inline-block;
@@ -711,13 +545,16 @@ export default {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   justify-content: space-between;
+
   .com-table {
     background: "#FaFaFa";
   }
+
   .span {
     float: right;
     color: orange;
   }
+
   .span1 {
     display: inline-block;
     color: blue;
@@ -727,6 +564,7 @@ export default {
     width: 120px;
     border-bottom: 2px solid blue;
   }
+
   .span2 {
     display: inline-block;
     text-align: center;
@@ -734,6 +572,7 @@ export default {
     width: 120px;
     font-weight: 900;
   }
+
   .span3 {
     display: inline-block;
     text-align: center;
@@ -741,6 +580,7 @@ export default {
     width: 120px;
     font-weight: 900;
   }
+
   span {
     cursor: pointer;
   }
@@ -776,6 +616,7 @@ export default {
     margin-left: 20px;
   }
 }
+
 .fatherbox {
   background: #fafafa;
   padding: 10px;
@@ -784,11 +625,13 @@ export default {
   border-bottom-right-radius: 5px;
   width: 100%;
 }
-.pageBox {
-}
+
+.pageBox {}
+
 ::v-deep .gutter {
   background: #fafafa;
 }
+
 ::v-deep .is-scrolling-none {
   background: #fafafa;
 }