工单受理详情

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

@@ -1,11 +1,11 @@
 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 getList(){
+  //   return server.connection('POST','/api/12345/getWorkOrderList')
   // }
+
+  static getList(data){
+    return server.connection('POST','/api/12345/getWorkOrder',data)
+  }
 }

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

@@ -10,6 +10,7 @@
         style="width: 100%"
         height="100%"
         :cell-style="{ background: 'transparent' }"
+        @row-click="rowClick"
       >
         <el-table-column
           prop="orderType"
@@ -61,98 +62,123 @@
         </el-table-column>
       </el-table>
     </div>
+    <el-dialog
+      title="工单受理详情"
+      :visible.sync="dialogVisible"
+      width="70%"
+      :append-to-body="true"
+      :modal="false"
+    >
+      <div class="dialog-top">
+        <div
+          :class="{
+            'top-box-active': curTab === 0,
+            'top-box': curTab !== 0,
+          }"
+          @click="curTab = 0"
+        >
+          基础信息
+        </div>
+        <div
+          :class="{
+            'top-box-active': curTab === 1,
+            'top-box': curTab !== 1,
+          }"
+          @click="curTab = 1"
+        >
+          流转明细
+        </div>
+      </div>
+      <div class="base-info">
+        <div class="base-item" :style="{ height: '10vh' }">
+          <div class="item-left">来往信息</div>
+          <div class="item-right">
+            <el-row>
+              <el-col :span="8">
+                <div>受理人： handle_person</div>
+              </el-col>
+              <el-col :span="8">
+                <div>来源方式： source_type</div>
+              </el-col>
+              <el-col :span="8">
+                <div>受理类型： accept_type</div>
+              </el-col>
+              <el-col :span="8">
+                <div>受理时间： accept_date</div>
+              </el-col>
+              <el-col :span="8">
+                <div>转接来源： transfer_source</div>
+              </el-col>
+              <el-col :span="8">
+                <div>所在地区： order_area</div>
+              </el-col>
+              <el-col :span="8">
+                <div>热点分类： hot_type</div>
+              </el-col>
+            </el-row>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '10vh' }">
+          <div class="item-left">联系人</div>
+          <div class="item-right">
+            <div>来电人： caller_name</div>
+            <div>性别： sex</div>
+            <div>联系电话： caller_phone</div>
+            <div>联系地址： caller_adress</div>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '10vh' }">
+          <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>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '10vh' }">
+          <div class="item-left">工单信息</div>
+          <div class="item-right">
+            <div>受理标题： acceptance_title</div>
+            <div>受理内容： acceptance_content</div>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '100%' }">
+          <div class="item-left"></div>
+          <div class="item-right">
+            <div>中心意见： central_opinion</div>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '100%' }">
+          <div class="item-left"></div>
+          <div class="item-right">
+            <div>承办意见： undertak_opinions</div>
+          </div>
+        </div>
+        <div class="base-item" :style="{ height: '100%' }">
+          <div class="item-left"></div>
+          <div class="item-right">
+            <div>退回意见： return_opinion</div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { getAcceptTickets } from "./api";
-import colors from "./colors";
 export default {
   data() {
     return {
-      tableData: [
-        {
-          orderType: "咨询",
-          resourceType: "电话",
-          orderTime: "2023-10-01 10:00:00",
-          orderPerson: "张三",
-          orderTitle: "关于产品功能的咨询",
-          orderArea: "巴州区",
-        },
-        {
-          orderType: "投诉",
-          resourceType: "微信",
-          orderTime: "2023-10-02 14:30:00",
-          orderPerson: "李四",
-          orderTitle: "产品质量问题",
-          orderArea: "恩阳区",
-        },
-        {
-          orderType: "建议",
-          resourceType: "邮件",
-          orderTime: "2023-10-03 09:45:00",
-          orderPerson: "王五",
-          orderTitle: "优化产品体验",
-          orderArea: "南江县",
-        },
-        {
-          orderType: "咨询",
-          resourceType: "电话",
-          orderTime: "2023-10-04 11:15:00",
-          orderPerson: "赵六",
-          orderTitle: "售后服务问题",
-          orderArea: "通江县",
-        },
-        {
-          orderType: "投诉",
-          resourceType: "网站",
-          orderTime: "2023-10-05 13:20:00",
-          orderPerson: "孙七",
-          orderTitle: "物流延迟",
-          orderArea: "平昌县",
-        },
-        {
-          orderType: "咨询",
-          resourceType: "电话",
-          orderTime: "2023-10-01 10:00:00",
-          orderPerson: "张三",
-          orderTitle: "关于产品功能的咨询",
-          orderArea: "巴州区",
-        },
-        {
-          orderType: "投诉",
-          resourceType: "微信",
-          orderTime: "2023-10-02 14:30:00",
-          orderPerson: "李四",
-          orderTitle: "产品质量问题",
-          orderArea: "恩阳区",
-        },
-        {
-          orderType: "建议",
-          resourceType: "邮件",
-          orderTime: "2023-10-03 09:45:00",
-          orderPerson: "王五",
-          orderTitle: "优化产品体验",
-          orderArea: "南江县",
-        },
-        {
-          orderType: "咨询",
-          resourceType: "电话",
-          orderTime: "2023-10-04 11:15:00",
-          orderPerson: "赵六",
-          orderTitle: "售后服务问题",
-          orderArea: "通江县",
-        },
-        {
-          orderType: "投诉",
-          resourceType: "网站",
-          orderTime: "2023-10-05 13:20:00",
-          orderPerson: "孙七",
-          orderTitle: "物流延迟",
-          orderArea: "平昌县",
-        },
-      ],
+      tableData: [],
       scrolltimer: null,
+      dialogVisible: false,
+      curTab: 0,
     };
   },
   mounted() {
@@ -176,7 +202,7 @@ export default {
   },
   methods: {
     getTableData() {
-      getAcceptTickets.getList().then((res) => {
+      getAcceptTickets.getList({ pageNum: 1, pageSize: 10 }).then((res) => {
         const { code, result } = res.data;
         if (code === 200) {
           this.tableData = result;
@@ -202,73 +228,131 @@ export default {
         }, 200);
       }
     },
+    rowClick(row) {
+      console.log(row, "点击了行");
+      this.dialogVisible = true;
+    },
   },
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .box {
   display: flex;
   flex-direction: column;
   padding: 10px;
   height: 100%;
   box-sizing: border-box;
-}
-.box-top {
-  width: 100%;
-  height: 30px;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 1vh;
-}
-.topTitle {
-  padding-left: 10px;
-  margin-left: 10px;
-  border-left: solid 10px #02fffd;
-  height: 100%;
-  line-height: 30px;
-  font-size: 1.3rem;
-  color: white;
-}
-.acceptTickets {
-  flex: 1;
-  overflow: hidden;
-}
 
-.acceptTickets /deep/ .el-table {
-  background-color: transparent;
-  color: #3e7aa3;
-}
+  .box-top {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1vh;
+    .topTitle {
+      padding-left: 10px;
+      margin-left: 10px;
+      border-left: solid 10px #02fffd;
+      height: 100%;
+      line-height: 30px;
+      font-size: 1.3rem;
+      color: white;
+    }
+  }
 
-.acceptTickets /deep/ .el-table tr {
-  background-color: transparent;
-}
-.acceptTickets /deep/ .el-table th {
-  background-color: transparent;
-}
-.acceptTickets /deep/ .el-table td {
-  background-color: transparent;
-  border-bottom: 0px solid #dfe6ec;
-}
-.acceptTickets /deep/ .el-table--enable-row-transition .el-table__body td,
-.el-table .cell {
-  background-color: transparent;
-}
+  .acceptTickets {
+    flex: 1;
+    overflow: hidden;
+  }
 
-.acceptTickets /deep/ .el-table__row > td {
-  border: none;
-}
+  .acceptTickets /deep/ .el-table {
+    background-color: transparent;
+    color: #3e7aa3;
+  }
+
+  .acceptTickets /deep/ .el-table tr {
+    background-color: transparent;
+  }
+  .acceptTickets /deep/ .el-table th {
+    background-color: transparent;
+  }
+  .acceptTickets /deep/ .el-table td {
+    background-color: transparent;
+    border-bottom: 0px solid #dfe6ec;
+  }
+  .acceptTickets /deep/ .el-table--enable-row-transition .el-table__body td,
+  .el-table .cell {
+    background-color: transparent;
+  }
+
+  .acceptTickets /deep/ .el-table__row > td {
+    border: none;
+  }
+
+  .acceptTickets /deep/ .el-table th.is-leaf {
+    border: none;
+  }
+
+  .acceptTickets /deep/ .el-table::before {
+    height: 0;
+  }
 
-.acceptTickets /deep/ .el-table th.is-leaf {
-  border: none;
+  .acceptTickets ::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
 }
+/deep/ .el-dialog {
+  background-color: #010d1d;
+  // background-color: #8f8fce;
+}
+/deep/ .el-dialog__body {
+  padding: 10px 20px;
+}
+.dialog-top {
+  display: flex;
+  margin-bottom: 2px;
 
-.acceptTickets /deep/ .el-table::before {
-  height: 0;
+  .top-box {
+    width: 5vw;
+    height: 3vh;
+    line-height: 3vh;
+    text-align: center;
+    background: #174350;
+    border: solid 1px #1e6b75;
+    color: #0cfee1;
+  }
+  .top-box-active {
+    width: 5vw;
+    height: 3vh;
+    line-height: 3vh;
+    text-align: center;
+    background: #4abdc4;
+    border: solid 1px #1e6b75;
+    color: #ffffff;
+  }
 }
+.base-info {
+  width: 100%;
 
-.acceptTickets ::-webkit-scrollbar {
-  width: 0px;
-  height: 0px;
+  .base-item {
+    display: flex;
+    border: solid 1px #135055;
+    .item-left {
+      width: 20px;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      justify-content: center;
+      border-right: solid 1px #135055;
+      background: #153949;
+      text-align: center;
+    }
+    .item-right {
+      width: calc(100% - 20px);
+      height: 100%;
+    }
+  }
 }
 </style>

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

@@ -58,7 +58,12 @@ export default {
         .then((res) => {
           const { code, result } = res.data;
           if (code === 200) {
-            this.areaDataList = result;
+            const order = ["南江县", "通江县", "平昌县", "巴州区", "恩阳区"];
+            this.areaDataList = result.sort((a, b) => {
+              return (
+                order.indexOf(a.districtName) - order.indexOf(b.districtName)
+              );
+            });;
           }
         });
     },