改变12345背景

src/view/client/12345/AcceptTickets/api.js

@@ -1,11 +1,14 @@
 import {server} from "@/tools/servers"
 
 export class getAcceptTickets{
-  // static getList(){
-  //   return server.connection('POST','/api/12345/getWorkOrderList')
-  // }
-
   static getList(data){
     return server.connection('POST','/api/12345/getWorkOrder',data)
   }
+
+  static getTranferList(data){
+    return server.connection('POST','/api/12345/getWorkOrderCirculationList',data)
+  }
+  static getDetail(data){
+    return server.connection('POST','/api/12345/getWorkOrderDetail',data)
+  }
 }

src/view/client/12345/AcceptTickets/index.vue

@@ -65,7 +65,7 @@
     <el-dialog
       title="工单受理详情"
       :visible.sync="dialogVisible"
-      width="70%"
+      width="80%"
       :append-to-body="true"
       :modal="false"
     >
@@ -89,83 +89,186 @@
           流转明细
         </div>
       </div>
-      <div class="base-info">
-        <div class="base-item" :style="{ height: '10vh' }">
+      <div class="base-info" v-if="curTab === 0">
+        <div class="base-item" :style="{ height: '100%' }">
           <div class="item-left">来往信息</div>
           <div class="item-right">
             <el-row>
               <el-col :span="8">
-                <div>受理人： handle_person</div>
+                <div>受理人： {{ detail.handlePerson }}</div>
               </el-col>
               <el-col :span="8">
-                <div>来源方式： source_type</div>
+                <div>来源方式： {{ detail.sourceType }}</div>
               </el-col>
               <el-col :span="8">
-                <div>受理类型： accept_type</div>
+                <div>受理类型： {{ detail.acceptType }}</div>
               </el-col>
+            </el-row>
+            <el-row>
               <el-col :span="8">
-                <div>受理时间： accept_date</div>
+                <div>受理时间： {{ detail.acceptDate }}</div>
               </el-col>
               <el-col :span="8">
-                <div>转接来源： transfer_source</div>
+                <div>转接来源： {{ detail.transferSource }}</div>
               </el-col>
               <el-col :span="8">
-                <div>所在地区： order_area</div>
+                <div>所在地区： {{ detail.orderArea }}</div>
               </el-col>
+            </el-row>
+            <el-row>
               <el-col :span="8">
-                <div>热点分类： hot_type</div>
+                <div>热点分类： {{ detail.hotType }}</div>
               </el-col>
             </el-row>
           </div>
         </div>
-        <div class="base-item" :style="{ height: '10vh' }">
+        <div class="base-item" :style="{ height: '100%' }">
           <div class="item-left">联系人</div>
           <div class="item-right">
-            <div>来电人： caller_name</div>
-            <div>性别： sex</div>
-            <div>联系电话： caller_phone</div>
-            <div>联系地址： caller_adress</div>
+            <el-row>
+              <el-col :span="8">来电人： {{ detail.callerName }}</el-col>
+              <el-col :span="8">性别： {{ detail.sex }}</el-col>
+              <el-col :span="8">联系电话： {{ detail.callerPhone }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8">联系地址： {{ detail.callerAddress }}</el-col>
+            </el-row>
           </div>
         </div>
-        <div class="base-item" :style="{ height: '10vh' }">
+        <div class="base-item" :style="{ height: '100%' }">
           <div class="item-left">部门</div>
           <div class="item-right">
-            <div>交办部门： assigned_dept</div>
-            <div>交办时间： delivery_time</div>
-            <div>办理部门： process_dept</div>
-            <div>办理时间： process_time</div>
-            <div>办理部门： archive_dept</div>
-            <div>办理时间： archive_time</div>
-            <div>办理时限： process_time_limit</div>
-            <div>期满时间： expiration_time</div>
+            <el-row>
+              <el-col :span="8">交办部门： {{ detail.assignedDept }}</el-col>
+              <el-col :span="8">交办时间： {{ detail.deliveryTime }}</el-col>
+              <el-col :span="8">办理部门： {{ detail.processDept }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8">办理时间： {{ detail.processTime }}</el-col>
+              <el-col :span="8">归档部门： {{ detail.archiveDept }}</el-col>
+              <el-col :span="8">归档时间： {{ detail.archiveTime }}</el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="8"
+                >办理时限： {{ detail.processTimeLimit }}</el-col
+              >
+              <el-col :span="8">期满时间： {{ detail.expirationTime }}</el-col>
+            </el-row>
           </div>
         </div>
-        <div class="base-item" :style="{ height: '10vh' }">
+        <div class="base-item" :style="{ height: '100%' }">
           <div class="item-left">工单信息</div>
           <div class="item-right">
-            <div>受理标题： acceptance_title</div>
-            <div>受理内容： acceptance_content</div>
+            <el-row>
+              <el-col :span="24">
+                受理标题： {{ detail.acceptanceTitle }}
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col :span="24">
+                受理内容： {{ detail.acceptanceContent }}
+              </el-col>
+            </el-row>
           </div>
         </div>
         <div class="base-item" :style="{ height: '100%' }">
           <div class="item-left"></div>
           <div class="item-right">
-            <div>中心意见： central_opinion</div>
+            <el-row>
+              <el-col :span="24">中心意见： {{ detail.centralOpinion }}</el-col>
+            </el-row>
           </div>
         </div>
         <div class="base-item" :style="{ height: '100%' }">
           <div class="item-left"></div>
           <div class="item-right">
-            <div>承办意见： undertak_opinions</div>
+            <el-row>
+              <el-col :span="24"
+                >承办意见： {{ detail.undertakOpinions }}</el-col
+              >
+            </el-row>
           </div>
         </div>
         <div class="base-item" :style="{ height: '100%' }">
           <div class="item-left"></div>
           <div class="item-right">
-            <div>退回意见： return_opinion</div>
+            <el-row>
+              <el-col :span="24">退回意见： {{ detail.returnOpinion }}</el-col>
+            </el-row>
           </div>
         </div>
       </div>
+      <div class="transfer-info" v-else>
+        <el-table
+          :data="transferTableData"
+          :cell-style="{ background: 'transparent' }"
+          @row-click="rowClick"
+        >
+          <el-table-column
+            prop="setTime"
+            label="建立时间"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="currentNode"
+            label="当前节点"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="handoverDept"
+            label="接办部门"
+            min-width="30"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="transactors"
+            label="办理人"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="processTime"
+            label="办理时间"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="timeLimit"
+            label="时限"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+          <el-table-column
+            prop="flowStatus"
+            label="流转状态"
+            min-width="20"
+            align="center"
+            show-overflow-tooltip
+          >
+          </el-table-column>
+        </el-table>
+        <!-- <el-pagination
+          background
+          layout="prev, pager, next"
+          :total="300"
+          @current-change="transferPageChange"
+        >
+        </el-pagination> -->
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -176,9 +279,12 @@ export default {
   data() {
     return {
       tableData: [],
+      transferTableData: [],
+      transferTotal: 0,
       scrolltimer: null,
       dialogVisible: false,
       curTab: 0,
+      detail: {},
     };
   },
   mounted() {
@@ -203,8 +309,9 @@ export default {
   methods: {
     getTableData() {
       getAcceptTickets.getList({ pageNum: 1, pageSize: 10 }).then((res) => {
-        const { code, result } = res.data;
+        const { code, pageMessage, result } = res.data;
         if (code === 200) {
+          this.transferTotal = pageMessage.total;
           this.tableData = result;
         }
       });
@@ -229,9 +336,32 @@ export default {
       }
     },
     rowClick(row) {
-      console.log(row, "点击了行");
-      this.dialogVisible = true;
+      getAcceptTickets.getDetail({ id: row.id }).then((res) => {
+        const { code, result } = res.data;
+        if (code === 200) {
+          this.detail = { ...result };
+          this.dialogVisible = true;
+        }
+      });
+      getAcceptTickets
+        .getTranferList({ pageNum: 1, pageSize: 10 })
+        .then((res) => {
+          const { code, result } = res.data;
+          if (code === 200) {
+            this.transferTableData = result;
+          }
+        });
     },
+    // transferPageChange(page) {
+    //   getAcceptTickets
+    //     .getTranferList({ pageNum: page, pageSize: 10 })
+    //     .then((res) => {
+    //       const { code, result } = res.data;
+    //       if (code === 200) {
+    //         this.transferTableData = result;
+    //       }
+    //     });
+    // },
   },
 };
 </script>
@@ -310,12 +440,15 @@ export default {
 /deep/ .el-dialog__body {
   padding: 10px 20px;
 }
+/deep/ .el-dialog__title {
+  color: #00fefd;
+}
 .dialog-top {
   display: flex;
   margin-bottom: 2px;
 
   .top-box {
-    width: 5vw;
+    width: 6vw;
     height: 3vh;
     line-height: 3vh;
     text-align: center;
@@ -324,7 +457,7 @@ export default {
     color: #0cfee1;
   }
   .top-box-active {
-    width: 5vw;
+    width: 6vw;
     height: 3vh;
     line-height: 3vh;
     text-align: center;
@@ -352,7 +485,95 @@ export default {
     .item-right {
       width: calc(100% - 20px);
       height: 100%;
+      color: #637078;
     }
   }
 }
+
+.transfer-info {
+  max-height: 60vh;
+  overflow-y: scroll;
+
+  /deep/ .el-table {
+    background-color: transparent;
+    color: #3e7aa3;
+  }
+
+  /deep/ .el-table tr {
+    background-color: transparent;
+  }
+  /deep/ .el-table th {
+    background-color: #133848;
+    color: #0cfee1;
+    border: solid 1px #1e6b75;
+  }
+
+  /deep/ .el-table td {
+    background-color: transparent;
+  }
+  /deep/ .el-table--enable-row-transition .el-table__body td,
+  .el-table .cell {
+    background-color: transparent;
+  }
+
+  /deep/ .el-table__row > td {
+    border: none;
+    border-bottom: solid 1px #1e6b75;
+    border-right: solid 1px #1e6b75;
+  }
+  /deep/ .el-table__row > td:last-child {
+    border: none;
+    border-bottom: solid 1px #1e6b75;
+  }
+
+  /deep/ .el-table th.el-table__cell {
+    padding: 6px 0;
+  }
+
+  /deep/ .el-table td.el-table__cell {
+    padding: 6px 0;
+  }
+
+  /deep/ .el-table::before {
+    height: 0;
+  }
+
+  ::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
+
+  // /deep/ .el-pagination.is-background .el-pager li {
+  //   background: red;
+  // }
+}
+.transfer-info::-webkit-scrollbar {
+  width: 0px;
+  height: 0px;
+}
+
+.el-row {
+  margin: 10px 0;
+}
+.el-col {
+  padding: 0 20px;
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #d3dce6;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
 </style>

src/view/client/12345/index.vue

@@ -261,9 +261,9 @@
   .background {
     width: 100%;
     height: 100%;
-    /* background-image: url("../../../assets/images/12345-bg.jpeg"); */
-    background-color: #101129;
-    background-size: cover;
+    background-image: url("../../../assets/images/12345-bg.jpg") ;
+    /* background-color: #101129; */
+    background-size: 100% 100%;
     position: relative;
   }
 
@@ -396,6 +396,8 @@
     border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
     position: relative;
     margin-bottom: 0.833rem;
+    background-color: rgba(1, 1, 1, 0.35);
+    border-top-right-radius: 30px;
   }
 
   .panel .inner {
@@ -414,6 +416,7 @@
     width: 32%;
     height: 28.5%;
     background-size: 100% 100%;
+
     top: 8.6%;
     left: 0.7%;
     transition: width 1s, height 1s, margin-left 1s, margin-top 1s;