From a2586ce70485035d77746ff9c18364f408f4c6aa Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期一, 07 八月 2023 16:57:06 +0800
Subject: [PATCH] 服务管理模块详情页

---
 src/views/service/serviceContract/AddServiceContractDialog.vue      |   82 
 src/views/client/contacts/AddContactsDialog.vue                     |   86 
 src/views/service/serviceContract/DetailServiceContract.vue         |  533 ++++++++++
 src/views/service/serviceFollowup/AddServiceFollowupDialog.vue      |   82 
 src/views/service/clientServiceOrder/DetailClientServiceOrder.vue   |  664 +++++++++++++
 src/views/sales/generatePlan/DetailGeneratePlan.vue                 |  320 ++++++
 src/views/sales/salesDetails/AddSalesDetailsDialog.vue              |   82 
 src/views/sales/masterOrder/AddMasterOrderDialog.vue                |   82 
 src/views/sales/salesReturn/AddSalesReturnDialog.vue                |   82 
 src/views/service/clientServiceOrder/AddCientServiceOrderDialog.vue |  108 +-
 src/views/sales/refundForm/AddRefundFormDialog.vue                  |   82 
 src/common/const/salesFixedStatus.js                                |    5 
 src/views/service/serviceFollowup/DetailServiceFollowup.vue         |  371 +++++++
 src/components/makepager/TableCommonView.vue                        |   10 
 src/views/sales/salesOpportunity/AddSalesOpportunityDialog.vue      |   86 
 src/views/sales/quotation/AddQuotationDialog.vue                    |   82 
 src/views/sales/subOrder/AddSubOrderDialog.vue                      |   72 
 src/router/service/index.js                                         |    8 
 src/views/service/clientServiceOrder/index.vue                      |   66 +
 src/components/layout/components/appsidebar/index.vue               |    2 
 src/views/sales/generatePlan/index.vue                              |   20 
 src/views/service/serviceContract/index.vue                         |   41 
 src/views/service/serviceFollowup/index.vue                         |   93 +
 23 files changed, 2,587 insertions(+), 472 deletions(-)

diff --git a/src/common/const/salesFixedStatus.js b/src/common/const/salesFixedStatus.js
index 420d5f0..a11e787 100644
--- a/src/common/const/salesFixedStatus.js
+++ b/src/common/const/salesFixedStatus.js
@@ -13,6 +13,11 @@
     "11銆佽В鍐冲悎鍚岀籂绾风殑鏂瑰紡锛氭墽琛屾湰鍚堝悓鍙戠敓浜夎锛岀敱褰撲簨浜哄弻鏂瑰崗鍟嗚В鍐炽�傚崗鍟嗕笉鎴愶紝鍙屾柟鍚屾剰鎻愪氦鏈夊叧浠茶濮斿憳浼氫徊瑁侊紝鍙屾柟浜嬪悗娌℃湁杈炬垚浠茶鍗忚鐨勶紝鍙悜浜烘皯娉曢櫌璧疯瘔",
     "12銆佹湰鎶ヤ环鑷弻鏂圭瀛楃洊绔犺捣鐢熸晥銆傦紙浼犵湡浠舵湁鏁堬級",
     "13銆佸叾浠栫害瀹氫簨椤癸細鏈敖浜嬪疁锛屽弻鏂瑰弸濂藉崗鍟嗚В鍐�"
+  ],
+  serviceContract: [
+    "1銆佹湇鍔¤垂鏀粯鏂瑰紡锛氶樁娈� 浠樻姣斾緥 澶囨敞",
+    "2銆佺敳鏂归�炬湡浠樻鐨勶紝姣忛�炬湡涓�澶╋紝鐢叉柟搴旀寜閫炬湡浣欓鐨勫崈鍒嗕箣涓�鍚戜箼鏂规柟鏀粯杩濈害閲戯紝鍚屾椂浠嶅簲灞ヨ浠樻涔夊姟銆傞�炬湡15澶╃殑锛屼箼鏂规湁鏉冭В闄ゅ悎鍚屻��",
+    "3銆佷箼鏂规湭鎸夌害瀹氱殑鏃堕棿瀹屾垚鏈嶅姟鐨勶紝姣忛�炬湡涓�澶╋紝搴旀寜鍚堝悓閲戦鐨勫崈鍒嗕箣涓�鍚戝彟涓�鏂规敮浠樿繚绾﹂噾锛屽悓鏃朵粛搴斿敖蹇饱琛屻�傞�炬湡瓒呰繃15澶╃殑锛岀敳鏂规湁鏉冭В闄ゅ悎鍚屻��"
   ]
 }
 export default status
diff --git a/src/components/layout/components/appsidebar/index.vue b/src/components/layout/components/appsidebar/index.vue
index a4964d2..42578d9 100644
--- a/src/components/layout/components/appsidebar/index.vue
+++ b/src/components/layout/components/appsidebar/index.vue
@@ -44,7 +44,7 @@
             <span>鏈嶅姟绠＄悊</span>
           </template>
           <el-menu-item index="/service/serviceContract">鏈嶅姟鍚堝悓</el-menu-item>
-          <el-menu-item index="/service/orderManage">瀹㈡埛鏈嶅姟鍗�</el-menu-item>
+          <el-menu-item index="/service/clientServiceOrder">瀹㈡埛鏈嶅姟鍗�</el-menu-item>
           <el-menu-item index="/service/serviceFollowup">鏈嶅姟鍥炶鍗�</el-menu-item>
           <!-- <el-menu-item index="/service/serviceFeeManage">鏈嶅姟鏀惰垂绠＄悊</el-menu-item> -->
         </el-submenu>
diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index 2e9797c..3e14cf8 100644
--- a/src/components/makepager/TableCommonView.vue
+++ b/src/components/makepager/TableCommonView.vue
@@ -60,6 +60,12 @@
             >{{ scope.row[item.prop] }}</span
           >
           <span
+            v-else-if="item.isServiceOrder && scope.row[item.prop]"
+            class="sel-name"
+            @click="selServiceOrderClick(scope.row)"
+            >{{ scope.row[item.prop] }}</span
+          >
+          <span
             v-else-if="item.isCommonClick && scope.row[item.prop]"
             class="sel-name"
             @click="selCommonClick(scope.row)"
@@ -232,6 +238,10 @@
     selMasterClick(row) {
       this.$emit("selMasterClick", row)
     },
+    // 瀹㈡埛鏈嶅姟鍗�
+    selServiceOrderClick(row) {
+      this.$emit("selServiceOrderClick", row)
+    },
     // 鍏叡锛堥攢鍞満浼氥�佹姤浠峰崟銆侀攢鍞�诲崟銆侀攢鍞瓙鍗曘�傘�傘�傦級
     selCommonClick(row) {
       this.$emit("selCommonClick", row)
diff --git a/src/router/service/index.js b/src/router/service/index.js
index 821c23a..ec9d6bc 100644
--- a/src/router/service/index.js
+++ b/src/router/service/index.js
@@ -1,7 +1,7 @@
 // const type from '@/router/deployCode'
 
 const serviceContract = (resolve) => require(["@/views/service/serviceContract/index"], resolve) // 鏈嶅姟鍚堝悓
-const orderManage = (resolve) => require(["@/views/service/orderManage/index"], resolve) // 宸ュ崟绠＄悊
+const clientServiceOrder = (resolve) => require(["@/views/service/clientServiceOrder/index"], resolve) // 瀹㈡埛鏈嶅姟鍗�
 const serviceFollowup = (resolve) => require(["@/views/service/serviceFollowup/index"], resolve) // 鏈嶅姟鍥炶鍗�
 const serviceFeeManage = (resolve) => require(["@/views/service/serviceFeeManage/index"], resolve) // 鏈嶅姟鏀惰垂绠＄悊
 
@@ -15,9 +15,9 @@
     }
   },
   {
-    path: "/service/orderManage",
-    name: "orderManage",
-    component: orderManage,
+    path: "/service/clientServiceOrder",
+    name: "clientServiceOrder",
+    component: clientServiceOrder,
     meta: {
       title: "瀹㈡埛鏈嶅姟鍗�"
     }
diff --git a/src/views/client/contacts/AddContactsDialog.vue b/src/views/client/contacts/AddContactsDialog.vue
index 94b7394..f0f79e6 100644
--- a/src/views/client/contacts/AddContactsDialog.vue
+++ b/src/views/client/contacts/AddContactsDialog.vue
@@ -6,6 +6,8 @@
       :width="dialogWidth"
       :before-close="handleClose"
       :close-on-click-modal="false"
+      append-to-body
+      custom-class="iframe-dialog"
     >
       <el-form
         ref="form"
@@ -439,54 +441,56 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.add-contacts {
-  .basic-info {
-    .basic-info-title {
-      background-color: #f4f8fe;
-      padding-left: 10px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #666;
-      height: 42px;
-      line-height: 42px;
-    }
-    .basic-info-view {
-      margin-top: 10px;
-      padding-right: 40px;
-      .custom-name,
-      .common-select {
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name,
+        .common-select {
+          display: flex;
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 18px;
+            cursor: pointer;
+          }
+        }
+        .common-select {
+          .common-select-sel {
+            width: 270px;
+          }
+        }
+      }
+      .annex-view {
         display: flex;
-        .common-select-btn {
-          margin-left: 5px;
-          font-size: 18px;
-          cursor: pointer;
-        }
-      }
-      .common-select {
-        .common-select-sel {
-          width: 270px;
+        color: #6166d3;
+        .setFormat {
+          margin-left: 10px;
         }
       }
     }
-    .annex-view {
+    .unflod-collapse {
       display: flex;
+      height: 30px;
+      justify-content: center;
+      align-items: center;
       color: #6166d3;
-      .setFormat {
-        margin-left: 10px;
-      }
     }
-  }
-  .unflod-collapse {
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    align-items: center;
-    color: #6166d3;
-  }
-  .dialog-footer {
-    background-color: #f5f5f5;
-    height: 55px;
-    line-height: 55px;
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
   }
 }
 </style>
diff --git a/src/views/sales/generatePlan/DetailGeneratePlan.vue b/src/views/sales/generatePlan/DetailGeneratePlan.vue
new file mode 100644
index 0000000..772f613
--- /dev/null
+++ b/src/views/sales/generatePlan/DetailGeneratePlan.vue
@@ -0,0 +1,320 @@
+<template>
+  <div class="detail-view">
+    <el-drawer
+      :visible.sync="detailConfig.visible"
+      size="80%"
+      :before-close="handleClose"
+      :wrapperClosable="false"
+      :append-to-body="true"
+    >
+      <template slot="title">
+        <div class="header">
+          <span class="header-label">鍗曟嵁缂栧彿</span>
+          <span class="header-title">{{ detailConfig.infomation.number }}</span>
+        </div>
+      </template>
+      <div class="content">
+        <div class="tab-view">
+          <el-tabs v-model="activeName" @tab-click="tabsClick">
+            <el-tab-pane label="璇︽儏" name="first"></el-tab-pane>
+            <el-tab-pane label="闄勪欢绠＄悊" name="annex">
+              <!-- <template slot="label">
+                <div>璺熻繘璁板綍<el-badge type="primary" :value="2"> </el-badge></div>
+              </template> -->
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="activeName === 'first'" class="detail">
+          <!-- 鏈轰細鍩烘湰淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('basic')">
+              <i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">鏈轰細鍩烘湰淇℃伅</span>
+            </div>
+            <div v-show="isBasicExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in basicInfoList" :key="i">
+                  <div class="left">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue }}</div>
+                  </div>
+                  <div class="right">
+                    <div class="content-title">{{ item.rightStr }}</div>
+                    <div class="content-data">{{ item.rightValue }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 璁″垝鐩稿叧 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('plan')">
+              <i v-if="isPlanExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">璁″垝鐩稿叧</span>
+            </div>
+            <div v-show="isPlanExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in planList" :key="i">
+                  <div class="left">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue }}</div>
+                  </div>
+                  <div class="right">
+                    <div class="content-title">{{ item.rightStr }}</div>
+                    <div class="content-data">{{ item.rightValue }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 闄勪欢淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('annex')">
+              <i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">闄勪欢淇℃伅</span>
+            </div>
+            <div v-show="isAnnexExpand" class="basic-info-content">
+              <ul>
+                <li>
+                  <div class="left remark">
+                    <div class="content-title">{{ "闄勪欢锛�" }}</div>
+                    <div class="content-data">{{ "" }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div v-if="activeName === 'annex'" class="second">
+          <!-- <FollowupRecords :isDetail="true" /> -->
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailGeneratePlan",
+  props: {
+    planDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: {},
+  computed: {},
+  data() {
+    return {
+      detailConfig: this.planDetail,
+      activeName: "first",
+      isBasicExpand: true, // 鍩烘湰淇℃伅灞曞紑
+      basicInfoList: [],
+      isPlanExpand: true, // 璁″垝鐩稿叧
+      planList: [],
+      isAnnexExpand: true // 闄勪欢淇℃伅
+    }
+  },
+  created() {
+    this.setData()
+  },
+  mounted() {},
+  methods: {
+    setData() {
+      this.basicInfoList = [
+        {
+          leftStr: "瀹㈡埛鍚嶇О",
+          leftValue: "",
+          rightStr: "鍗曟嵁缂栧彿",
+          rightValue: ""
+        },
+        {
+          leftStr: "璐熻矗浜�",
+          leftValue: "",
+          rightStr: "鍒涘缓浜�",
+          rightValue: ""
+        },
+        {
+          leftStr: "鍒涘缓鏃堕棿",
+          leftValue: "",
+          rightStr: "鏈�鏂版洿鏂颁汉",
+          rightValue: ""
+        },
+        {
+          leftStr: "鏇存柊鏃堕棿",
+          leftValue: "",
+          rightStr: "瀹℃壒鐘舵��",
+          rightValue: ""
+        },
+        {
+          leftStr: "鏈�鏂板鎵规椂闂�",
+          leftValue: "",
+          rightStr: "涓婁竴姝ュ鎵逛汉",
+          rightValue: ""
+        },
+        {
+          leftStr: "褰撳墠瀹℃壒浜�",
+          leftValue: "",
+          rightStr: "閿�鍞瓙鍗�",
+          rightValue: ""
+        },
+        {
+          leftStr: "閿�鍞槑缁嗗崟",
+          leftValue: "",
+          rightStr: "",
+          rightValue: ""
+        }
+      ]
+      this.planList = [
+        {
+          leftStr: "璁″垝寮�濮嬫椂闂�",
+          leftValue: "",
+          rightStr: "璁″垝鎴鏃堕棿",
+          rightValue: ""
+        },
+        {
+          leftStr: "璁″垝鍐呭",
+          leftValue: "",
+          rightStr: "",
+          rightValue: ""
+        }
+      ]
+    },
+    handleClose() {
+      this.detailConfig.visible = false
+    },
+    // tab鍒囨崲
+    tabsClick(tab, event) {
+      console.log(tab, event)
+    },
+    // 灞曞紑鏀惰捣鐐瑰嚮浜嬩欢
+    expandClick(value) {
+      console.log(value)
+      if (value === "basic") {
+        this.isBasicExpand = !this.isBasicExpand
+      } else if (value === "annex") {
+        this.isAnnexExpand = !this.isAnnexExpand
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+::v-deep {
+  .el-drawer__header {
+    padding: 0;
+    margin-bottom: 0px;
+    .header {
+      height: 56px;
+      display: flex;
+      align-items: center;
+      padding-left: 10px;
+      .header-label {
+        padding: 5px;
+        border-radius: 4px;
+        background-color: #ff6600;
+        color: #fff;
+        font-size: 12px;
+      }
+      .header-title {
+        color: #323232;
+        font-size: 15px;
+        margin-left: 10px;
+        font-weight: inherit;
+      }
+    }
+  }
+  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+    padding-left: 20px;
+  }
+  .el-tabs__item.is-active,
+  .el-tabs__item:hover,
+  .el-tabs__active-bar {
+    color: $color-primary;
+  }
+  .el-tabs__header {
+    margin: 0;
+  }
+  .el-drawer__body {
+    .content {
+      background-color: rgb(230, 233, 240);
+      padding: 8px;
+      .tab-view {
+        background: #fff;
+        .item {
+          position: absolute;
+          top: 0px;
+          right: 0px;
+        }
+      }
+      .detail {
+        .basic-info {
+          .basic-info-label {
+            padding-left: 10px;
+            height: 42px;
+            line-height: 42px;
+            background: #f4f8fe;
+            color: #333;
+            font-size: 14px;
+          }
+          .basic-info-content {
+            background: #fff;
+            ul {
+              padding-inline-start: 0;
+            }
+            li {
+              display: flex;
+              font-size: 14px;
+              font-family: PingFangSC;
+              border-bottom: 1px solid #f9f9fb;
+              .left,
+              .right,
+              .all {
+                width: 50%;
+                display: flex;
+                align-items: center;
+                height: 40px;
+                .content-title {
+                  width: 320px;
+                  text-align: right;
+                  color: #555;
+                }
+                .content-data {
+                  text-align: left;
+                  margin-left: 25px;
+                  color: #333;
+                }
+              }
+              .all {
+                width: 100%;
+              }
+              .remark {
+                width: 100%;
+              }
+            }
+          }
+        }
+      }
+      .second {
+        background: #fff;
+        .followup-records {
+          .table-view {
+            margin-top: 0 !important;
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sales/generatePlan/index.vue b/src/views/sales/generatePlan/index.vue
index abf5576..bf56574 100644
--- a/src/views/sales/generatePlan/index.vue
+++ b/src/views/sales/generatePlan/index.vue
@@ -11,7 +11,7 @@
         <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
       </div>
     </div>
-    <TableCommonView ref="tableListRef" :table-list="tableList">
+    <TableCommonView ref="tableListRef" :table-list="tableList" @selCommonClick="selCommonClick">
       <template slot="tableButton">
         <el-table-column label="鎿嶄綔" width="100">
           <template slot-scope="scope">
@@ -23,6 +23,8 @@
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫-->
     <AddGeneratePlanDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 鐢熶骇璁″垝璇︽儏 -->
+    <DetailGeneratePlan v-if="planDetail.visible" :plan-detail="planDetail" />
   </div>
 </template>
 
@@ -30,13 +32,15 @@
 import AddGeneratePlanDialog from "@/views/sales/generatePlan/AddGeneratePlanDialog"
 import { getPlanList, getDelPlan } from "@/api/sales/generatePlan"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailGeneratePlan from "@/views/sales/generatePlan/DetailGeneratePlan"
 
 export default {
   name: "GeneratePlan",
   props: {},
   mixins: [pageMixin],
   components: {
-    AddGeneratePlanDialog
+    AddGeneratePlanDialog,
+    DetailGeneratePlan
   },
   computed: {
     searchCommonHeight() {
@@ -69,6 +73,10 @@
         visible: false,
         title: "鏂板缓",
         infomation: {}
+      },
+      planDetail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -81,7 +89,7 @@
       this.tableList = {
         tableInfomation: [],
         tableColumn: [
-          { label: "鍗曟嵁缂栧彿", prop: "number", min: 120 },
+          { label: "鍗曟嵁缂栧彿", prop: "number", min: 120, isCommonClick: true },
           { label: "璐熻矗浜�", prop: "memberId", min: 90 },
           { label: "瀹℃壒鐘舵��", prop: "approvalStatus" },
           { label: "鍒涘缓浜�", prop: "creator", min: 100 },
@@ -162,6 +170,12 @@
     },
     getSelectArray(val) {
       console.log(val)
+    },
+    // 鍚堝悓绠＄悊璇︽儏
+    selCommonClick(row) {
+      console.log(row)
+      this.planDetail.visible = true
+      this.planDetail.infomation = { ...row }
     }
   }
 }
diff --git a/src/views/sales/masterOrder/AddMasterOrderDialog.vue b/src/views/sales/masterOrder/AddMasterOrderDialog.vue
index 012cd7f..45434a1 100644
--- a/src/views/sales/masterOrder/AddMasterOrderDialog.vue
+++ b/src/views/sales/masterOrder/AddMasterOrderDialog.vue
@@ -5,6 +5,8 @@
       :visible.sync="editConfig.visible"
       :width="dialogWidth"
       :before-close="handleClose"
+      append-to-body
+      custom-class="iframe-dialog"
     >
       <el-form
         ref="form"
@@ -289,52 +291,54 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.add-quotation {
-  .basic-info {
-    .basic-info-title {
-      background-color: #f4f8fe;
-      padding-left: 10px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #666;
-      height: 42px;
-      line-height: 42px;
-    }
-    .basic-info-view {
-      margin-top: 10px;
-      padding-right: 40px;
-      .custom-name {
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name {
+          display: flex;
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 18px;
+            cursor: pointer;
+          }
+        }
+      }
+      .address-view {
+        margin-top: 10px;
+        padding-right: 40px;
+      }
+      .annex-view {
         display: flex;
-        .common-select-btn {
-          margin-left: 5px;
-          font-size: 18px;
-          cursor: pointer;
+        color: #6166d3;
+        .setFormat {
+          margin-left: 10px;
         }
       }
     }
-    .address-view {
-      margin-top: 10px;
-      padding-right: 40px;
-    }
-    .annex-view {
+    .unflod-collapse {
       display: flex;
+      height: 30px;
+      justify-content: center;
+      align-items: center;
       color: #6166d3;
-      .setFormat {
-        margin-left: 10px;
-      }
     }
-  }
-  .unflod-collapse {
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    align-items: center;
-    color: #6166d3;
-  }
-  .dialog-footer {
-    background-color: #f5f5f5;
-    height: 55px;
-    line-height: 55px;
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
   }
 }
 </style>
diff --git a/src/views/sales/quotation/AddQuotationDialog.vue b/src/views/sales/quotation/AddQuotationDialog.vue
index cdcf999..fe44f26 100644
--- a/src/views/sales/quotation/AddQuotationDialog.vue
+++ b/src/views/sales/quotation/AddQuotationDialog.vue
@@ -5,6 +5,8 @@
       :visible.sync="editConfig.visible"
       :width="dialogWidth"
       :before-close="handleClose"
+      append-to-body
+      custom-class="iframe-dialog"
     >
       <el-form
         ref="form"
@@ -482,52 +484,54 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.add-quotation {
-  .basic-info {
-    .basic-info-title {
-      background-color: #f4f8fe;
-      padding-left: 10px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #666;
-      height: 42px;
-      line-height: 42px;
-    }
-    .basic-info-view {
-      margin-top: 10px;
-      padding-right: 40px;
-      .custom-name,
-      .common-select {
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name,
+        .common-select {
+          display: flex;
+          .common-select-sel {
+            width: 270px;
+          }
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 16px;
+            cursor: pointer;
+          }
+        }
+      }
+      .annex-view {
         display: flex;
-        .common-select-sel {
-          width: 270px;
-        }
-        .common-select-btn {
-          margin-left: 5px;
-          font-size: 16px;
-          cursor: pointer;
+        color: #6166d3;
+        .setFormat {
+          margin-left: 10px;
         }
       }
     }
-    .annex-view {
+    .unflod-collapse {
       display: flex;
+      height: 30px;
+      justify-content: center;
+      align-items: center;
       color: #6166d3;
-      .setFormat {
-        margin-left: 10px;
-      }
     }
-  }
-  .unflod-collapse {
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    align-items: center;
-    color: #6166d3;
-  }
-  .dialog-footer {
-    background-color: #f5f5f5;
-    height: 55px;
-    line-height: 55px;
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
   }
 }
 </style>
diff --git a/src/views/sales/refundForm/AddRefundFormDialog.vue b/src/views/sales/refundForm/AddRefundFormDialog.vue
index 0eb0266..082208a 100644
--- a/src/views/sales/refundForm/AddRefundFormDialog.vue
+++ b/src/views/sales/refundForm/AddRefundFormDialog.vue
@@ -5,6 +5,8 @@
       :visible.sync="editConfig.visible"
       :width="dialogWidth"
       :before-close="handleClose"
+      append-to-body
+      custom-class="iframe-dialog"
     >
       <el-form
         ref="form"
@@ -466,52 +468,54 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.add-refund-form {
-  .basic-info {
-    .basic-info-title {
-      background-color: #f4f8fe;
-      padding-left: 10px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #666;
-      height: 42px;
-      line-height: 42px;
-    }
-    .basic-info-view {
-      margin-top: 10px;
-      padding-right: 40px;
-      .custom-name,
-      .common-select {
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name,
+        .common-select {
+          display: flex;
+          .common-select-sel {
+            width: 270px;
+          }
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 16px;
+            cursor: pointer;
+          }
+        }
+      }
+      .annex-view {
         display: flex;
-        .common-select-sel {
-          width: 270px;
-        }
-        .common-select-btn {
-          margin-left: 5px;
-          font-size: 16px;
-          cursor: pointer;
+        color: #6166d3;
+        .setFormat {
+          margin-left: 10px;
         }
       }
     }
-    .annex-view {
+    .unflod-collapse {
       display: flex;
+      height: 30px;
+      justify-content: center;
+      align-items: center;
       color: #6166d3;
-      .setFormat {
-        margin-left: 10px;
-      }
     }
-  }
-  .unflod-collapse {
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    align-items: center;
-    color: #6166d3;
-  }
-  .dialog-footer {
-    background-color: #f5f5f5;
-    height: 55px;
-    line-height: 55px;
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
   }
 }
 </style>
diff --git a/src/views/sales/salesDetails/AddSalesDetailsDialog.vue b/src/views/sales/salesDetails/AddSalesDetailsDialog.vue
index d65d667..c5e2e49 100644
--- a/src/views/sales/salesDetails/AddSalesDetailsDialog.vue
+++ b/src/views/sales/salesDetails/AddSalesDetailsDialog.vue
@@ -5,6 +5,8 @@
       :visible.sync="editConfig.visible"
       :width="dialogWidth"
       :before-close="handleClose"
+      append-to-body
+      custom-class="iframe-dialog"
     >
       <el-form
         ref="form"
@@ -569,52 +571,54 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.add-sales-details {
-  .basic-info {
-    .basic-info-title {
-      background-color: #f4f8fe;
-      padding-left: 10px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #666;
-      height: 42px;
-      line-height: 42px;
-    }
-    .basic-info-view {
-      margin-top: 10px;
-      padding-right: 40px;
-      .custom-name,
-      .common-select {
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name,
+        .common-select {
+          display: flex;
+          .common-select-sel {
+            width: 270px;
+          }
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 16px;
+            cursor: pointer;
+          }
+        }
+      }
+      .annex-view {
         display: flex;
-        .common-select-sel {
-          width: 270px;
-        }
-        .common-select-btn {
-          margin-left: 5px;
-          font-size: 16px;
-          cursor: pointer;
+        color: #6166d3;
+        .setFormat {
+          margin-left: 10px;
         }
       }
     }
-    .annex-view {
+    .unflod-collapse {
       display: flex;
+      height: 30px;
+      justify-content: center;
+      align-items: center;
       color: #6166d3;
-      .setFormat {
-        margin-left: 10px;
-      }
     }
-  }
-  .unflod-collapse {
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    align-items: center;
-    color: #6166d3;
-  }
-  .dialog-footer {
-    background-color: #f5f5f5;
-    height: 55px;
-    line-height: 55px;
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
   }
 }
 </style>
diff --git a/src/views/sales/salesOpportunity/AddSalesOpportunityDialog.vue b/src/views/sales/salesOpportunity/AddSalesOpportunityDialog.vue
index 04fb294..e86938c 100644
--- a/src/views/sales/salesOpportunity/AddSalesOpportunityDialog.vue
+++ b/src/views/sales/salesOpportunity/AddSalesOpportunityDialog.vue
@@ -5,6 +5,8 @@
       :visible.sync="editConfig.visible"
       :width="dialogWidth"
       :before-close="handleClose"
+      append-to-body
+      custom-class="iframe-dialog"
     >
       <el-form
         ref="form"
@@ -760,54 +762,56 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.add-sales-opportunity {
-  .basic-info {
-    .basic-info-title {
-      background-color: #f4f8fe;
-      padding-left: 10px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #666;
-      height: 42px;
-      line-height: 42px;
-    }
-    .basic-info-view {
-      margin-top: 10px;
-      padding-right: 40px;
-      .custom-name,
-      .common-select {
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name,
+        .common-select {
+          display: flex;
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 18px;
+            cursor: pointer;
+          }
+        }
+        .common-select {
+          .common-select-sel {
+            width: 270px;
+          }
+        }
+      }
+      .annex-view {
         display: flex;
-        .common-select-btn {
-          margin-left: 5px;
-          font-size: 18px;
-          cursor: pointer;
-        }
-      }
-      .common-select {
-        .common-select-sel {
-          width: 270px;
+        color: #6166d3;
+        .setFormat {
+          margin-left: 10px;
         }
       }
     }
-    .annex-view {
+    .unflod-collapse {
       display: flex;
+      height: 30px;
+      justify-content: center;
+      align-items: center;
       color: #6166d3;
-      .setFormat {
-        margin-left: 10px;
-      }
     }
-  }
-  .unflod-collapse {
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    align-items: center;
-    color: #6166d3;
-  }
-  .dialog-footer {
-    background-color: #f5f5f5;
-    height: 55px;
-    line-height: 55px;
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
   }
 }
 </style>
diff --git a/src/views/sales/salesReturn/AddSalesReturnDialog.vue b/src/views/sales/salesReturn/AddSalesReturnDialog.vue
index 5eba853..ae404d0 100644
--- a/src/views/sales/salesReturn/AddSalesReturnDialog.vue
+++ b/src/views/sales/salesReturn/AddSalesReturnDialog.vue
@@ -5,6 +5,8 @@
       :visible.sync="editConfig.visible"
       :width="dialogWidth"
       :before-close="handleClose"
+      append-to-body
+      custom-class="iframe-dialog"
     >
       <el-form
         ref="form"
@@ -392,52 +394,54 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.add-sales-return {
-  .basic-info {
-    .basic-info-title {
-      background-color: #f4f8fe;
-      padding-left: 10px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #666;
-      height: 42px;
-      line-height: 42px;
-    }
-    .basic-info-view {
-      margin-top: 10px;
-      padding-right: 40px;
-      .custom-name,
-      .common-select {
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name,
+        .common-select {
+          display: flex;
+          .common-select-sel {
+            width: 270px;
+          }
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 16px;
+            cursor: pointer;
+          }
+        }
+      }
+      .annex-view {
         display: flex;
-        .common-select-sel {
-          width: 270px;
-        }
-        .common-select-btn {
-          margin-left: 5px;
-          font-size: 16px;
-          cursor: pointer;
+        color: #6166d3;
+        .setFormat {
+          margin-left: 10px;
         }
       }
     }
-    .annex-view {
+    .unflod-collapse {
       display: flex;
+      height: 30px;
+      justify-content: center;
+      align-items: center;
       color: #6166d3;
-      .setFormat {
-        margin-left: 10px;
-      }
     }
-  }
-  .unflod-collapse {
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    align-items: center;
-    color: #6166d3;
-  }
-  .dialog-footer {
-    background-color: #f5f5f5;
-    height: 55px;
-    line-height: 55px;
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
   }
 }
 </style>
diff --git a/src/views/sales/subOrder/AddSubOrderDialog.vue b/src/views/sales/subOrder/AddSubOrderDialog.vue
index f6224c9..c70c802 100644
--- a/src/views/sales/subOrder/AddSubOrderDialog.vue
+++ b/src/views/sales/subOrder/AddSubOrderDialog.vue
@@ -5,6 +5,8 @@
       :visible.sync="editConfig.visible"
       :width="dialogWidth"
       :before-close="handleClose"
+      append-to-body
+      custom-class="iframe-dialog"
     >
       <el-form
         ref="form"
@@ -481,45 +483,47 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.add-quotation {
-  .basic-info {
-    .basic-info-title {
-      background-color: #f4f8fe;
-      padding-left: 10px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #666;
-      height: 42px;
-      line-height: 42px;
-    }
-    .basic-info-view {
-      margin-top: 10px;
-      padding-right: 40px;
-      .custom-name {
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name {
+          display: flex;
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 18px;
+            cursor: pointer;
+          }
+        }
+      }
+      .address-view {
+        margin-top: 10px;
+        padding-right: 40px;
+      }
+      .annex-view {
         display: flex;
-        .common-select-btn {
-          margin-left: 5px;
-          font-size: 18px;
-          cursor: pointer;
+        color: #6166d3;
+        .setFormat {
+          margin-left: 10px;
         }
       }
     }
-    .address-view {
-      margin-top: 10px;
-      padding-right: 40px;
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
     }
-    .annex-view {
-      display: flex;
-      color: #6166d3;
-      .setFormat {
-        margin-left: 10px;
-      }
-    }
-  }
-  .dialog-footer {
-    background-color: #f5f5f5;
-    height: 55px;
-    line-height: 55px;
   }
 }
 </style>
diff --git a/src/views/service/orderManage/AddOrderManageDialog.vue b/src/views/service/clientServiceOrder/AddCientServiceOrderDialog.vue
similarity index 95%
rename from src/views/service/orderManage/AddOrderManageDialog.vue
rename to src/views/service/clientServiceOrder/AddCientServiceOrderDialog.vue
index 685e1d5..3247a53 100644
--- a/src/views/service/orderManage/AddOrderManageDialog.vue
+++ b/src/views/service/clientServiceOrder/AddCientServiceOrderDialog.vue
@@ -5,6 +5,8 @@
       :visible.sync="editConfig.visible"
       :width="dialogWidth"
       :before-close="handleClose"
+      append-to-body
+      custom-class="iframe-dialog"
     >
       <el-form
         ref="form"
@@ -480,7 +482,7 @@
 import SelectClientDialog from "@/views/other/commonDialog/SelectClientDialog"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
 export default {
-  name: "AddOrderManageDialog",
+  name: "AddClientServiceOrderDialog",
   mixins: [pageMixin],
   props: {
     editCommonConfig: {
@@ -683,68 +685,70 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.order-manage {
-  .basic-info {
-    .basic-info-title {
-      background-color: #f4f8fe;
-      padding-left: 10px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #666;
-      height: 42px;
-      line-height: 42px;
-    }
-    .basic-info-view {
-      margin-top: 10px;
-      padding-right: 40px;
-      .custom-name,
-      .common-select {
-        display: flex;
-        .common-select-sel {
-          width: 270px;
-        }
-        .common-select-btn {
-          margin-left: 5px;
-          font-size: 16px;
-          cursor: pointer;
-        }
-      }
-    }
-    .annex-view {
-      display: flex;
-      color: #6166d3;
-      .setFormat {
-        margin-left: 10px;
-      }
-    }
+::v-deep {
+  .iframe-dialog .el-dialog__body {
     .basic-info {
-      .basic-info-label {
+      .basic-info-title {
+        background-color: #f4f8fe;
         padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
         height: 42px;
         line-height: 42px;
-        background: #f4f8fe;
-        color: #333;
-        font-size: 14px;
       }
-      .basic-info-content {
-        .list {
-          .page {
-            text-align: right;
-            margin-bottom: 5px;
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name,
+        .common-select {
+          display: flex;
+          .common-select-sel {
+            width: 270px;
+          }
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 16px;
+            cursor: pointer;
           }
         }
-        .no-data {
-          height: 40px;
-          line-height: 40px;
+      }
+      .annex-view {
+        display: flex;
+        color: #6166d3;
+        .setFormat {
           margin-left: 10px;
         }
       }
+      .basic-info {
+        .basic-info-label {
+          padding-left: 10px;
+          height: 42px;
+          line-height: 42px;
+          background: #f4f8fe;
+          color: #333;
+          font-size: 14px;
+        }
+        .basic-info-content {
+          .list {
+            .page {
+              text-align: right;
+              margin-bottom: 5px;
+            }
+          }
+          .no-data {
+            height: 40px;
+            line-height: 40px;
+            margin-left: 10px;
+          }
+        }
+      }
     }
-  }
-  .dialog-footer {
-    background-color: #f5f5f5;
-    height: 55px;
-    line-height: 55px;
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
   }
 }
 </style>
diff --git a/src/views/service/clientServiceOrder/DetailClientServiceOrder.vue b/src/views/service/clientServiceOrder/DetailClientServiceOrder.vue
new file mode 100644
index 0000000..926a42b
--- /dev/null
+++ b/src/views/service/clientServiceOrder/DetailClientServiceOrder.vue
@@ -0,0 +1,664 @@
+<template>
+  <div class="detail-view">
+    <el-drawer
+      :visible.sync="detailConfig.visible"
+      size="80%"
+      :before-close="handleClose"
+      :wrapperClosable="false"
+      :append-to-body="true"
+    >
+      <template slot="title">
+        <div class="header">
+          <span class="header-label">鏈嶅姟鍗曠紪鍙�</span>
+          <span class="header-title">{{ detailConfig.infomation.number }}</span>
+        </div>
+      </template>
+      <div class="content">
+        <div class="tab-view">
+          <el-tabs v-model="activeName" @tab-click="tabsClick">
+            <el-tab-pane label="璇︽儏" name="first"></el-tab-pane>
+            <el-tab-pane label="闄勪欢绠＄悊" name="annex"></el-tab-pane>
+            <el-tab-pane label="鏈嶅姟鍥炶鍗�" name="followup">
+              <!-- <template slot="label">
+                <div>璺熻繘璁板綍<el-badge type="primary" :value="2"> </el-badge></div>
+              </template> -->
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="activeName === 'first'" class="detail">
+          <!-- 鍩烘湰淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('basic')">
+              <i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">鍩烘湰淇℃伅</span>
+            </div>
+            <div v-show="isBasicExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in basicInfoList" :key="i">
+                  <div class="left">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue }}</div>
+                  </div>
+                  <div class="right">
+                    <div class="content-title">{{ item.rightStr }}</div>
+                    <div class="content-data">{{ item.rightValue }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 鍔ㄦ�佷俊鎭� -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('dynamic')">
+              <i v-if="isDynamicExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">鍔ㄦ�佷俊鎭�</span>
+            </div>
+            <div v-show="isDynamicExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in dynamicInfoList" :key="i">
+                  <div class="left">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue }}</div>
+                  </div>
+                  <div class="right">
+                    <div class="content-title">{{ item.rightStr }}</div>
+                    <div class="content-data">{{ item.rightValue }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 鏃堕棿/閲戦 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('timeAmount')">
+              <i v-if="isTimeAmountExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">鏃堕棿/閲戦</span>
+            </div>
+            <div v-show="isTimeAmountExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in timeAmountList" :key="i">
+                  <div class="left">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue }}</div>
+                  </div>
+                  <div class="right">
+                    <div class="content-title">{{ item.rightStr }}</div>
+                    <div class="content-data">{{ item.rightValue }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 瀹氫綅鍦板潃 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('address')">
+              <i v-if="isAddressExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">瀹氫綅鍦板潃</span>
+            </div>
+            <div v-show="isAddressExpand" class="basic-info-content">
+              <ul>
+                <li>
+                  <div class="left remark">
+                    <div class="content-title">{{ "瀹氫綅锛�" }}</div>
+                    <div class="content-data">{{ "" }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 闂鎻忚堪 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('issue')">
+              <i v-if="isIssueExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">闂鎻忚堪</span>
+            </div>
+            <div v-show="isIssueExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in issueList" :key="i">
+                  <div class="all">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 瑙ｅ喅鍔炴硶 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('solution')">
+              <i v-if="isSolutionExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">瑙ｅ喅鍔炴硶</span>
+            </div>
+            <div v-show="isSolutionExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in solutionList" :key="i">
+                  <div class="all">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 澶囨敞淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('remark')">
+              <i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">澶囨敞淇℃伅</span>
+            </div>
+            <div v-show="isRemarkExpand" class="basic-info-content">
+              <ul>
+                <li>
+                  <div class="left remark">
+                    <div class="content-title">{{ "澶囨敞锛�" }}</div>
+                    <div class="content-data">{{ "澶囨敞鍐呭" }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 绛惧埌鍦板潃淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('signInAddress')">
+              <i v-if="isSignInAddressExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">绛惧埌鍦板潃淇℃伅</span>
+            </div>
+            <div v-show="isSignInAddressExpand" class="basic-info-content">
+              <ul>
+                <li>
+                  <div class="left remark">
+                    <div class="content-title">{{ "绛惧埌鍦板潃锛�" }}</div>
+                    <div class="content-data">{{ "" }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 闄勪欢淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('annex')">
+              <i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">闄勪欢淇℃伅</span>
+            </div>
+            <div v-show="isAnnexExpand" class="basic-info-content">
+              <ul>
+                <li>
+                  <div class="left remark">
+                    <div class="content-title">{{ "闄勪欢锛�" }}</div>
+                    <div class="content-data">{{ "" }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 绛惧瓧纭 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('signConfim')">
+              <i v-if="isSignConfimExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">绛惧瓧纭</span>
+            </div>
+            <div v-show="isSignConfimExpand" class="basic-info-content">
+              <ul>
+                <li>
+                  <div class="left remark">
+                    <div class="content-title">{{ "闄勪欢锛�" }}</div>
+                    <div class="content-data">{{ "" }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 鏈嶅姟鍚堝悓淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('serviceContract')">
+              <i v-if="isServiceContractExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">鏈嶅姟鍚堝悓淇℃伅</span>
+            </div>
+            <div v-show="isServiceContractExpand" class="basic-info-content">
+              <div class="list" v-if="serviceContractList.length > 0">
+                <PagerView class="page" :pager-options="pagerOptions1" v-on="pagerEvents" />
+                <TableCommonView
+                  ref="tableListRef"
+                  :select-box="false"
+                  :table-list="serviceContractList"
+                ></TableCommonView>
+              </div>
+              <div class="no-data" v-else>娌℃湁鎵惧埌浠讳綍璁板綍</div>
+            </div>
+          </div>
+          <!-- 瀹㈡埛鏈嶅姟鍗曞巻鍙茶褰� -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('history')">
+              <i v-if="isHistoryExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">瀹㈡埛鏈嶅姟鍗曞巻鍙茶褰�</span>
+            </div>
+            <div v-show="isHistoryExpand" class="basic-info-content">
+              <div class="list" v-if="historyList.length > 0">
+                <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
+                <TableCommonView
+                  ref="recordTableListRef"
+                  :select-box="false"
+                  :table-list="historyList"
+                ></TableCommonView>
+              </div>
+              <div class="no-data" v-else>娌℃湁鎵惧埌浠讳綍璁板綍</div>
+            </div>
+          </div>
+        </div>
+        <div v-if="activeName === 'annex'" class="second">
+          <!-- <Contacts :isDetail="true" /> -->
+        </div>
+        <div v-if="activeName === 'followup'" class="second">
+          <ServiceFollowup :isDetail="true" />
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+// import FollowupRecords from "@/views/client/followupRecords"
+// import Contacts from "@/views/client/contacts"
+import ServiceFollowup from "@/views/service/serviceFollowup"
+import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+export default {
+  name: "DetailClientServiceOrder",
+  mixins: [pageMixin],
+  props: {
+    clientServiceDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { ServiceFollowup },
+  computed: {},
+  data() {
+    return {
+      detailConfig: this.clientServiceDetail,
+      activeName: "first",
+      isBasicExpand: true, // 鍩烘湰淇℃伅灞曞紑
+      basicInfoList: [],
+      isDynamicExpand: true, // 鍔ㄦ�佷俊鎭�
+      dynamicInfoList: [],
+      isTimeAmountExpand: true, // 鏃堕棿/閲戦
+      timeAmountList: [],
+      isAddressExpand: true, // 瀹氫綅鍦板潃
+      isIssueExpand: true, // 闂鎻忚堪
+      issueList: [],
+      isSolutionExpand: true, // 瑙ｅ喅鍔炴硶
+      solutionList: [],
+      isRemarkExpand: true, // 澶囨敞淇℃伅
+      isSignInAddressExpand: true, // 绛惧埌鍦板潃淇℃伅
+      isAnnexExpand: true, // 闄勪欢淇℃伅
+      isSignConfimExpand: true, // 绛惧瓧纭
+      isServiceContractExpand: true, // 鏈嶅姟鍚堝悓淇℃伅
+      serviceContractList: [],
+      isHistoryExpand: true, // 瀹㈡埛鏈嶅姟鍗曞巻鍙茶褰�
+      historyList: []
+    }
+  },
+  created() {
+    this.setData()
+    this.setTable()
+  },
+  mounted() {},
+  methods: {
+    setTable() {
+      this.serviceContractList = {
+        tableInfomation: [],
+        tableColumn: [
+          { label: "鏈嶅姟鍗曠紪鍙�", prop: "number", min: 100 },
+          { label: "涓婚", prop: "name" },
+          { label: "鏈嶅姟浜哄憳", prop: "clientId", min: 130 },
+          { label: "鏈嶅姟鏂瑰紡", prop: "contactName" },
+          { label: "浜у搧绫诲埆", prop: "name" },
+          { label: "浜у搧鍚嶇О", prop: "orderType" },
+          { label: "淇敼鏃堕棿", prop: "reportSourceId" }
+        ]
+      }
+    },
+    setData() {
+      this.basicInfoList = [
+        {
+          leftStr: "瀹㈡埛鍚嶇О",
+          leftValue: "",
+          rightStr: "鏈嶅姟鍗曠紪鍙�",
+          rightValue: ""
+        },
+        {
+          leftStr: "鏈嶅姟鍚堝悓",
+          leftValue: "",
+          rightStr: "鏁呴殰绫诲埆",
+          rightValue: ""
+        },
+        {
+          leftStr: "涓婚",
+          leftValue: "",
+          rightStr: "鍚堝悓璁㈠崟",
+          rightValue: ""
+        },
+        {
+          leftStr: "浜у搧绫诲埆",
+          leftValue: "",
+          rightStr: "浜у搧鍚嶇О",
+          rightValue: ""
+        },
+        {
+          leftStr: "鏈嶅姟鏂瑰紡",
+          leftValue: "",
+          rightStr: "鏈嶅姟浜哄憳",
+          rightValue: ""
+        },
+        {
+          leftStr: "涓婇棬鍦板潃",
+          leftValue: "",
+          rightStr: "浼樺厛绾у埆",
+          rightValue: ""
+        },
+        {
+          leftStr: "棰勭害涓婇棬鏃堕棿",
+          leftValue: "",
+          rightStr: "閿�鍞満浼�",
+          rightValue: ""
+        },
+        {
+          leftStr: "绛惧埌",
+          leftValue: "",
+          rightStr: "鐜板満鏈嶅姟浜哄憳鎵爜",
+          rightValue: ""
+        },
+        {
+          leftStr: "鍒涘缓鏃堕棿",
+          leftValue: "",
+          rightStr: "鍒涘缓浜�",
+          rightValue: ""
+        }
+      ]
+      this.dynamicInfoList = [
+        {
+          leftStr: "澶勭悊鐘舵��",
+          leftValue: "",
+          rightStr: "鏈�鏂板垎閰嶆椂闂�",
+          rightValue: ""
+        },
+        {
+          leftStr: "鏈�鏂版洿鏂颁汉",
+          leftValue: "",
+          rightStr: "淇敼鏃堕棿",
+          rightValue: ""
+        }
+      ]
+      this.timeAmountList = [
+        {
+          leftStr: "甯屾湜澶勭悊鏃堕棿",
+          leftValue: "",
+          rightStr: "瀹為檯澶勭悊鏃堕棿",
+          rightValue: ""
+        },
+        {
+          leftStr: "浜ら�氳垂",
+          leftValue: "",
+          rightStr: "鏀惰垂閲戦",
+          rightValue: ""
+        },
+        {
+          leftStr: "鑺辫垂鏃堕棿",
+          leftValue: "",
+          rightStr: "",
+          rightValue: ""
+        }
+      ]
+      this.issueList = [
+        {
+          leftStr: "甯歌闂",
+          leftValue: ""
+        },
+        {
+          leftStr: "闂鎻忚堪",
+          leftValue: ""
+        }
+      ]
+      this.solutionList = [
+        {
+          leftStr: "瑙ｅ喅鍔炴硶",
+          leftValue: ""
+        },
+        {
+          leftStr: "鍐呭澶囨敞",
+          leftValue: ""
+        }
+      ]
+      this.businessInfoList = [
+        {
+          leftStr: "鎵�灞炶涓�",
+          leftValue: "",
+          rightStr: "娉曞畾浠ｈ〃浜�",
+          rightValue: ""
+        },
+        {
+          leftStr: "娉ㄥ唽鏃堕棿",
+          leftValue: "",
+          rightStr: "娉ㄥ唽璧勯噾",
+          rightValue: ""
+        },
+        {
+          leftStr: "鍏徃鎬ц川",
+          leftValue: "",
+          rightStr: "瀹㈡埛瑙勬ā",
+          rightValue: ""
+        },
+        {
+          leftStr: "缁忚惀鑼冨洿",
+          leftValue: "",
+          rightStr: "",
+          rightValue: ""
+        }
+      ]
+      this.addressInfoList = [
+        {
+          leftStr: "鍥藉",
+          leftValue: "",
+          rightStr: "鐪佷唤",
+          rightValue: ""
+        },
+        {
+          leftStr: "鍩庡競",
+          leftValue: "",
+          rightStr: "鍖哄煙",
+          rightValue: ""
+        },
+        {
+          leftStr: "璇︾粏鍦板潃",
+          leftValue: "",
+          rightStr: "",
+          rightValue: ""
+        }
+      ]
+    },
+    handleClose() {
+      this.detailConfig.visible = false
+    },
+    // tab鍒囨崲
+    tabsClick(tab, event) {
+      console.log(tab, event)
+    },
+    // 灞曞紑鏀惰捣鐐瑰嚮浜嬩欢
+    expandClick(value) {
+      console.log(value)
+      if (value === "basic") {
+        this.isBasicExpand = !this.isBasicExpand
+      } else if (value === "dynamic") {
+        this.isDynamicExpand = !this.isDynamicExpand
+      } else if (value === "timeAmount") {
+        this.isTimeAmountExpand = !this.isTimeAmountExpand
+      } else if (value === "address") {
+        this.isAddressExpand = !this.isAddressExpand
+      } else if (value === "issue") {
+        this.isIssueExpand = !this.isIssueExpand
+      } else if (value === "solution") {
+        this.isSolutionExpand = !this.isSolutionExpand
+      } else if (value === "remark") {
+        this.isRemarkExpand = !this.isRemarkExpand
+      } else if (value === "signInAddress") {
+        this.isSignInAddressExpand = !this.isSignInAddressExpand
+      } else if (value === "annex") {
+        this.isAnnexExpand = !this.isAnnexExpand
+      } else if (value === "signConfim") {
+        this.isSignConfimExpand = !this.isSignConfimExpand
+      } else if (value === "serviceContract") {
+        this.isServiceContractExpand = !this.isServiceContractExpand
+      } else if (value === "history") {
+        this.isHistoryExpand = !this.isHistoryExpand
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+::v-deep {
+  .el-drawer__header {
+    padding: 0;
+    margin-bottom: 0px;
+    .header {
+      height: 56px;
+      display: flex;
+      align-items: center;
+      padding-left: 10px;
+      .header-label {
+        padding: 5px;
+        border-radius: 4px;
+        background-color: #ff6600;
+        color: #fff;
+        font-size: 12px;
+      }
+      .header-title {
+        color: #323232;
+        font-size: 15px;
+        margin-left: 10px;
+        font-weight: inherit;
+      }
+    }
+  }
+  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+    padding-left: 20px;
+  }
+  .el-tabs__item.is-active {
+    color: $color-primary;
+  }
+  .el-tabs__item:hover {
+    color: $color-primary;
+  }
+  .el-tabs__active-bar {
+    background-color: $color-primary;
+  }
+  .el-tabs__header {
+    margin: 0;
+  }
+  .el-drawer__body {
+    .content {
+      background-color: rgb(230, 233, 240);
+      padding: 8px;
+      .tab-view {
+        background: #fff;
+        // .tab-view-pane {
+        //   position: relative;
+        .item {
+          position: absolute;
+          top: 0px;
+          right: 0px;
+        }
+        // }
+      }
+      .detail {
+        .basic-info {
+          .basic-info-label {
+            padding-left: 10px;
+            height: 42px;
+            line-height: 42px;
+            background: #f4f8fe;
+            color: #333;
+            font-size: 14px;
+          }
+          .basic-info-content {
+            background: #fff;
+            ul {
+              padding-inline-start: 0;
+            }
+            li {
+              display: flex;
+              font-size: 14px;
+              font-family: PingFangSC;
+              border-bottom: 1px solid #f9f9fb;
+              .left,
+              .right,
+              .all {
+                width: 50%;
+                display: flex;
+                align-items: center;
+                height: 40px;
+                .content-title {
+                  width: 320px;
+                  text-align: right;
+                  color: #555;
+                }
+                .content-data {
+                  text-align: left;
+                  margin-left: 25px;
+                  color: #333;
+                }
+              }
+              .all {
+                width: 100%;
+              }
+              .remark {
+                width: 100%;
+              }
+            }
+            .list {
+              .page {
+                text-align: right;
+                margin-bottom: 5px;
+              }
+            }
+            .no-data {
+              height: 40px;
+              line-height: 40px;
+              margin-left: 10px;
+              font-size: 13px;
+              color: #666;
+            }
+          }
+        }
+      }
+      .second {
+        background: #fff;
+        .followup-records {
+          .table-view {
+            margin-top: 0 !important;
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/service/orderManage/index.vue b/src/views/service/clientServiceOrder/index.vue
similarity index 71%
rename from src/views/service/orderManage/index.vue
rename to src/views/service/clientServiceOrder/index.vue
index c1f2eac..d068dfc 100644
--- a/src/views/service/orderManage/index.vue
+++ b/src/views/service/clientServiceOrder/index.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="sales-lead">
-    <!-- <div class="detail-top">
-    </div> -->
-    <div class="top">
+    <div v-if="isDetail" class="detail-top">
+      <DetailListCommonBtn :query-class-options="queryClassOptions" />
+      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
+    </div>
+    <div v-else class="top">
       <SearchCommonView
         ref="searchCommonView"
         :query-class-options="queryClassOptions"
@@ -13,7 +15,13 @@
         <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
       </div>
     </div>
-    <TableCommonView ref="tableListRef" :table-list="tableList">
+    <TableCommonView
+      ref="tableListRef"
+      :table-list="tableList"
+      :select-box="!isDetail"
+      @selClientClick="selClientClick"
+      @selCommonClick="selCommonClick"
+    >
       <template slot="tableButton">
         <el-table-column label="鎿嶄綔" width="90">
           <template slot-scope="scope">
@@ -24,21 +32,33 @@
       </template>
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫 -->
-    <AddOrderManageDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <AddClientServiceOrderDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 瀹㈡埛鏈嶅姟鍗曡鎯� -->
+    <DetailClientServiceOrder v-if="clientServiceDetail.visible" :client-service-detail="clientServiceDetail" />
+    <!-- 瀹㈡埛璇︽儏 -->
+    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
   </div>
 </template>
 
 <script>
-import AddOrderManageDialog from "@/views/service/orderManage/AddOrderManageDialog"
+import AddClientServiceOrderDialog from "@/views/service/clientServiceOrder/AddCientServiceOrderDialog"
 import { getOrderManageList, getDelOrderManage } from "@/api/serviceManage/orderManage"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailClientServiceOrder from "@/views/service/clientServiceOrder/DetailClientServiceOrder"
 
 export default {
   name: "SalesLead",
-  props: {},
+  props: {
+    isDetail: {
+      type: Boolean,
+      default: false
+    }
+  },
   mixins: [pageMixin],
   components: {
-    AddOrderManageDialog
+    AddClientServiceOrderDialog,
+    DetailClientServiceOrder,
+    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
   },
   computed: {
     searchCommonHeight() {
@@ -65,6 +85,14 @@
         visible: false,
         title: "鏂板缓",
         infomation: {}
+      },
+      clientServiceDetail: {
+        visible: false,
+        infomation: {}
+      },
+      clientDeail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -77,9 +105,9 @@
       this.tableList = {
         tableInfomation: [],
         tableColumn: [
-          { label: "鏈嶅姟鍗曠紪鍙�", prop: "number", min: 100 }, // 鏈嶅姟鍗曠紪鍙�
+          { label: "鏈嶅姟鍗曠紪鍙�", prop: "number", min: 100, isCommonClick: true }, // 鏈嶅姟鍗曠紪鍙�
           { label: "涓婚", prop: "name" }, // 涓婚
-          { label: "瀹㈡埛鍚嶇О", prop: "clientId", min: 130 }, // 瀹㈡埛鍚嶇О
+          { label: "瀹㈡埛鍚嶇О", prop: "clientId", min: 130, isClientClick: true }, // 瀹㈡埛鍚嶇О
           { label: "瀹為檯澶勭悊鏃堕棿", prop: "contactName" }, // 瀹為檯澶勭悊鏃堕棿
           { label: "鏈嶅姟浜哄憳", prop: "name" }, // 鏈嶅姟浜哄憳
           { label: "鏈嶅姟鏂瑰紡", prop: "orderType" }, // 鏈嶅姟鏂瑰紡
@@ -165,6 +193,18 @@
     },
     getSelectArray(val) {
       console.log(val)
+    },
+    // 瀹㈡埛鍚嶇О璇︽儏
+    selClientClick(row) {
+      console.log(row)
+      this.clientDeail.visible = true
+      this.clientDeail.infomation = { ...row, client_name: row.name }
+    },
+    // 瀹㈡埛鏈嶅姟鍗曡鎯�
+    selCommonClick(row) {
+      console.log(row)
+      this.clientServiceDetail.visible = true
+      this.clientServiceDetail.infomation = { ...row }
     }
   }
 }
@@ -182,6 +222,12 @@
       }
     }
   }
+  .detail-top {
+    display: flex;
+    .page {
+      margin-left: auto;
+    }
+  }
 }
 ::v-deep {
   .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
diff --git a/src/views/service/serviceContract/AddServiceContractDialog.vue b/src/views/service/serviceContract/AddServiceContractDialog.vue
index db49c39..0e5110a 100644
--- a/src/views/service/serviceContract/AddServiceContractDialog.vue
+++ b/src/views/service/serviceContract/AddServiceContractDialog.vue
@@ -5,6 +5,8 @@
       :visible.sync="editConfig.visible"
       :width="dialogWidth"
       :before-close="handleClose"
+      append-to-body
+      custom-class="iframe-dialog"
     >
       <el-form
         ref="form"
@@ -524,52 +526,54 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.add-service-contract {
-  .basic-info {
-    .basic-info-title {
-      background-color: #f4f8fe;
-      padding-left: 10px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #666;
-      height: 42px;
-      line-height: 42px;
-    }
-    .basic-info-view {
-      margin-top: 10px;
-      padding-right: 40px;
-      .custom-name,
-      .common-select {
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name,
+        .common-select {
+          display: flex;
+          .common-select-sel {
+            width: 270px;
+          }
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 16px;
+            cursor: pointer;
+          }
+        }
+      }
+      .annex-view {
         display: flex;
-        .common-select-sel {
-          width: 270px;
-        }
-        .common-select-btn {
-          margin-left: 5px;
-          font-size: 16px;
-          cursor: pointer;
+        color: #6166d3;
+        .setFormat {
+          margin-left: 10px;
         }
       }
     }
-    .annex-view {
+    .unflod-collapse {
       display: flex;
+      height: 30px;
+      justify-content: center;
+      align-items: center;
       color: #6166d3;
-      .setFormat {
-        margin-left: 10px;
-      }
     }
-  }
-  .unflod-collapse {
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    align-items: center;
-    color: #6166d3;
-  }
-  .dialog-footer {
-    background-color: #f5f5f5;
-    height: 55px;
-    line-height: 55px;
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
   }
 }
 </style>
diff --git a/src/views/service/serviceContract/DetailServiceContract.vue b/src/views/service/serviceContract/DetailServiceContract.vue
new file mode 100644
index 0000000..6bac9a8
--- /dev/null
+++ b/src/views/service/serviceContract/DetailServiceContract.vue
@@ -0,0 +1,533 @@
+<template>
+  <div class="detail-view">
+    <el-drawer
+      :visible.sync="detailConfig.visible"
+      size="80%"
+      :before-close="handleClose"
+      :wrapperClosable="false"
+      :append-to-body="true"
+    >
+      <template slot="title">
+        <div class="header">
+          <span class="header-label">鏈嶅姟鍚堝悓缂栧彿</span>
+          <span class="header-title">{{ detailConfig.infomation.number }}</span>
+        </div>
+      </template>
+      <div class="content">
+        <div class="tab-view">
+          <el-tabs v-model="activeName" @tab-click="tabsClick">
+            <el-tab-pane label="璇︽儏" name="first"></el-tab-pane>
+            <el-tab-pane label="鏀舵璁″垝" name="collection">
+              <!-- <template slot="label">
+                <div>璺熻繘璁板綍<el-badge type="primary" :value="2"> </el-badge></div>
+              </template> -->
+            </el-tab-pane>
+            <el-tab-pane label="鏀舵鍗�" name="receipt"></el-tab-pane>
+            <el-tab-pane label="瀹㈡埛鏈嶅姟鍗�" name="clientService"> </el-tab-pane>
+            <el-tab-pane label="閿�鍞彂绁�" name="invoice"></el-tab-pane>
+            <el-tab-pane label="閿�鍞瓙鍗�" name="sub"></el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="activeName === 'first'" class="detail">
+          <!-- 鍩烘湰淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('basic')">
+              <i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">鍩烘湰淇℃伅</span>
+            </div>
+            <div v-show="isBasicExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in basicInfoList" :key="i">
+                  <div class="left">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue }}</div>
+                  </div>
+                  <div class="right">
+                    <div class="content-title">{{ item.rightStr }}</div>
+                    <div class="content-data">{{ item.rightValue }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 鍔ㄦ�佷俊鎭� -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('dynamic')">
+              <i v-if="isDynamicExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">鍔ㄦ�佷俊鎭�</span>
+            </div>
+            <div v-show="isDynamicExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in dynamicInfoList" :key="i">
+                  <div class="left">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue }}</div>
+                  </div>
+                  <div class="right">
+                    <div class="content-title">{{ item.rightStr }}</div>
+                    <div class="content-data">{{ item.rightValue }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 鏉′欢涓庢潯娆� -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('termsConditions')">
+              <i v-if="isTermsConditionsExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">鏉℃涓庢潯浠�</span>
+            </div>
+            <div v-show="isTermsConditionsExpand" class="basic-info-content">
+              <div class="termsConditions">
+                <div class="content-title">{{ "鏉℃涓庢潯绾�" + "锛�" }}</div>
+                <div class="content-termsConditions">
+                  <ul>
+                    <li v-for="(item, index) in Status.serviceContract" :key="index">{{ item }}</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- 澶囨敞淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('remark')">
+              <i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">澶囨敞淇℃伅</span>
+            </div>
+            <div v-show="isRemarkExpand" class="basic-info-content">
+              <ul>
+                <li>
+                  <div class="left remark">
+                    <div class="content-title">{{ "澶囨敞锛�" }}</div>
+                    <div class="content-data">{{ "" }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 闄勪欢淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('annex')">
+              <i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">闄勪欢淇℃伅</span>
+            </div>
+            <div v-show="isAnnexExpand" class="basic-info-content">
+              <ul>
+                <li>
+                  <div class="left remark">
+                    <div class="content-title">{{ "闄勪欢锛�" }}</div>
+                    <div class="content-data">{{ "" }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 浜у搧绠＄悊 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('product')">
+              <i v-if="isProductExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">浜у搧绠＄悊</span>
+              <span style="margin-left: 30px">{{ "甯佺锛�" + "浜烘皯甯�(锟�)" }}</span>
+            </div>
+            <div v-show="isProductExpand" class="basic-info-content">
+              <CommonFormTableView
+                :detail-enter="true"
+                :show-summary="showSummary"
+                :product-table-list="productTableList"
+              />
+            </div>
+          </div>
+        </div>
+        <div v-if="activeName === 'collection'" class="second">
+          <!-- <FollowupRecords :isDetail="true" /> -->
+        </div>
+        <div v-if="activeName === 'receipt'" class="second">
+          <!-- <FollowupRecords :isDetail="true" /> -->
+        </div>
+        <div v-if="activeName === 'clientService'" class="second">
+          <ClientServiceOrder :isDetail="true" />
+        </div>
+        <div v-if="activeName === 'invoice'" class="second">
+          <!-- <FollowupRecords :isDetail="true" /> -->
+        </div>
+        <div v-if="activeName === 'sub'" class="second">
+          <SubOrder :isDetail="true" />
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import ClientServiceOrder from "@/views/service/clientServiceOrder"
+import SubOrder from "@/views/sales/subOrder"
+import Status from "@/common/const/salesFixedStatus"
+import CommonFormTableView from "@/components/makepager/CommonFormTableView"
+export default {
+  name: "DetailSpecification",
+  props: {
+    serviceContractDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { ClientServiceOrder, SubOrder, CommonFormTableView },
+  computed: {},
+  data() {
+    return {
+      Status: Status,
+      detailConfig: this.serviceContractDetail,
+      activeName: "first",
+      topList: [],
+      isBasicExpand: true, // 鍩烘湰淇℃伅
+      basicInfoList: [],
+      isDynamicExpand: true, // 鍔ㄦ�佷俊鎭�
+      dynamicInfoList: [],
+      isTermsConditionsExpand: true, // 鏉′欢涓庢潯娆�
+      isRemarkExpand: true, // 澶囨敞淇℃伅
+      isAnnexExpand: true, // 闄勪欢淇℃伅
+      isProductExpand: true, // 浜у搧绠＄悊
+      showSummary: {
+        show: true,
+        total: true,
+        sumProp: ["other1", "other2", "other3", "other4"],
+        mergeNumber: 3
+      },
+      productTableList: {}
+    }
+  },
+  created() {
+    this.setData()
+    this.setTableForm()
+  },
+  mounted() {},
+  methods: {
+    setData() {
+      this.basicInfoList = [
+        {
+          leftStr: "瀹㈡埛鍚嶇О",
+          leftValue: "",
+          rightStr: "鏈嶅姟鍚堝悓缂栧彿",
+          rightValue: ""
+        },
+        {
+          leftStr: "璐熻矗浜�",
+          leftValue: "",
+          rightStr: "鑱旂郴浜哄鍚�",
+          rightValue: ""
+        },
+        {
+          leftStr: "閿�鍞満浼�",
+          leftValue: "",
+          rightStr: "鍚堝悓璁㈠崟",
+          rightValue: ""
+        },
+        {
+          leftStr: "鎶ヤ环鍗�",
+          leftValue: "",
+          rightStr: "鍚堝悓绫诲瀷",
+          rightValue: ""
+        },
+        {
+          leftStr: "鍚堝悓鍙戣捣浜�",
+          leftValue: "",
+          rightStr: "绛剧珷鐘舵��",
+          rightValue: ""
+        },
+        {
+          leftStr: "绛剧害鏃ユ湡",
+          leftValue: "",
+          rightStr: "鏈嶅姟寮�濮嬫棩鏈�",
+          rightValue: ""
+        },
+        {
+          leftStr: "鍒涘缓浜�",
+          leftValue: "",
+          rightStr: "鏈嶅姟鍒版湡鏃�",
+          rightValue: ""
+        },
+        {
+          leftStr: "鍒涘缓鏃堕棿",
+          leftValue: "",
+          rightStr: "鏁伴噺鍚堣",
+          rightValue: ""
+        }
+      ]
+      this.dynamicInfoList = [
+        {
+          leftStr: "瀹℃壒鐘舵��",
+          leftValue: "",
+          rightStr: "鍚堝悓鐘舵��",
+          rightValue: ""
+        },
+        {
+          leftStr: "宸叉湇鍔℃鏁�",
+          leftValue: "",
+          rightStr: "搴旀湇鍔℃鏁�",
+          rightValue: ""
+        },
+        {
+          leftStr: "宸叉敹鎬婚",
+          leftValue: "",
+          rightStr: "搴旀敹浣欓",
+          rightValue: ""
+        },
+        {
+          leftStr: "宸插紑绁ㄩ噾棰�",
+          leftValue: "",
+          rightStr: "鏈紑绁ㄩ噾棰�",
+          rightValue: ""
+        }
+      ]
+    },
+    handleClose() {
+      this.detailConfig.visible = false
+    },
+    // tab鍒囨崲
+    tabsClick(tab, event) {
+      console.log(tab, event)
+    },
+    // 灞曞紑鏀惰捣鐐瑰嚮浜嬩欢
+    expandClick(value) {
+      console.log(value)
+      if (value === "basic") {
+        this.isBasicExpand = !this.isBasicExpand
+      } else if (value === "dynamic") {
+        this.isDynamicExpand = !this.isLabelExpand
+      } else if (value === "delivery") {
+        this.isDeliveryExpand = !this.isDeliveryExpand
+      } else if (value === "termsConditions") {
+        this.isTermsConditionsExpand = !this.isTermsConditionsExpand
+      } else if (value === "remark") {
+        this.isRemarkExpand = !this.isRemarkExpand
+      } else if (value === "annex") {
+        this.isAnnexExpand = !this.isAnnexExpand
+      } else if (value === "product") {
+        this.isProductExpand = !this.isProductExpand
+      }
+    },
+    setTableForm() {
+      this.productTableList = {
+        tableData: [
+          {
+            id: "1",
+            productName: "涓婃捣鏈夐檺鍏徃",
+            other0: "ZDYBD03-1",
+            other1: "12",
+            other2: "5.00",
+            other4: "3.00",
+            other3: "2.00"
+          }
+        ],
+        tableColumn: [
+          { label: "#", prop: "id", width: 40 },
+          { label: "鍚◣鍗曚环", prop: "other9", input: true },
+          { label: "浜у搧鍚嶇О", prop: "productName", input: true, isRequird: true },
+          { label: "浜у搧缂栧彿", prop: "other0" },
+          { label: "鏁伴噺", prop: "other1", input: true, isRequird: true },
+          { label: "鎶樻墸鐜�(%)", prop: "other6", input: true },
+          { label: "涓嶅惈绋庡崟浠�", prop: "other7", input: true },
+          { label: "鎶樻墸棰�", prop: "other2" },
+          { label: "绋�(閿�鍞�)", prop: "other7", input: true },
+          { label: "瀹為檯鍚◣鍗曚环", prop: "other3" },
+          { label: "涓嶅惈绋庨噾棰�", prop: "other4" },
+          { label: "浠风◣鍚堣", prop: "other3", input: true },
+          { label: "鎻忚堪", prop: "other8" },
+          { label: "婧愬崟绫诲瀷", prop: "other5" },
+          { label: "婧愬崟", prop: "other6" }
+        ]
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+::v-deep {
+  .el-drawer__header {
+    padding: 0;
+    margin-bottom: 0px;
+    .header {
+      height: 56px;
+      display: flex;
+      align-items: center;
+      padding-left: 10px;
+      .header-label {
+        padding: 5px;
+        border-radius: 4px;
+        background-color: #ff6600;
+        color: #fff;
+        font-size: 12px;
+      }
+      .header-title {
+        color: #323232;
+        font-size: 15px;
+        margin-left: 10px;
+        font-weight: inherit;
+      }
+    }
+  }
+  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+    padding-left: 20px;
+  }
+  .el-tabs__item.is-active,
+  .el-tabs__item:hover,
+  .el-tabs__active-bar {
+    color: $color-primary;
+  }
+  .el-tabs__header {
+    margin: 0;
+  }
+  .el-drawer__body {
+    .content {
+      background-color: rgb(230, 233, 240);
+      padding: 8px;
+      .tab-view {
+        background: #fff;
+        .item {
+          position: absolute;
+          top: 0px;
+          right: 0px;
+        }
+      }
+      .detail {
+        .basic-info {
+          .basic-info-label {
+            padding-left: 10px;
+            height: 42px;
+            line-height: 42px;
+            background: #f4f8fe;
+            color: #333;
+            font-size: 14px;
+          }
+          .basic-info-content {
+            background: #fff;
+            ul {
+              padding-inline-start: 0;
+            }
+            li {
+              display: flex;
+              font-size: 14px;
+              font-family: PingFangSC;
+              border-bottom: 1px solid #f9f9fb;
+              .left,
+              .right,
+              .all {
+                width: 50%;
+                display: flex;
+                align-items: center;
+                height: 40px;
+                .content-title {
+                  width: 320px;
+                  text-align: right;
+                  color: #555;
+                }
+                .content-data {
+                  text-align: left;
+                  margin-left: 25px;
+                  color: #333;
+                }
+              }
+              .all {
+                width: 100%;
+              }
+              .remark {
+                width: 100%;
+              }
+              .history {
+                .content-title {
+                  width: 200px;
+                  color: #8b0000;
+                }
+                .content-data {
+                  color: #8b0000;
+                }
+              }
+            }
+            .step-view {
+              padding: 30px 60px 5px;
+              height: 100px;
+              .step-title-view {
+                margin-top: 10px;
+                font-size: 12px;
+                color: #555;
+                position: relative;
+                .step-label {
+                  margin-top: -65px;
+                  height: 60px;
+                }
+                .step-btn {
+                  position: absolute;
+                  bottom: -25px;
+                  left: 50%;
+                  margin-left: -28px;
+                  width: 56px;
+                  height: 24px;
+                  line-height: 24px;
+                  text-align: center;
+                  color: #2d82f4;
+                  border: 1px solid #2d82f4;
+                  border-radius: 15px;
+                  cursor: pointer;
+                }
+                .step-desc {
+                  margin-top: 15px;
+                }
+              }
+              .el-step__head.is-process {
+                color: #ff8707;
+                border-color: #ff8707;
+              }
+              .el-step__head.is-finish .el-step__line {
+                background-color: #409eff;
+              }
+            }
+            .termsConditions {
+              display: flex;
+              align-items: center;
+              font-size: 14px;
+              font-family: PingFangSC;
+              // padding: 5px 0;
+              .content-title {
+                width: 320px;
+                text-align: right;
+                color: #555;
+              }
+              .content-termsConditions {
+                margin-left: 25px;
+                font-size: 13px;
+                color: #333;
+                li {
+                  margin: 5px 0;
+                  border-bottom: 0px solid #f9f9fb;
+                }
+              }
+            }
+          }
+        }
+      }
+      .second {
+        background: #fff;
+        .followup-records {
+          .table-view {
+            margin-top: 0 !important;
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/service/serviceContract/index.vue b/src/views/service/serviceContract/index.vue
index bd59092..257a548 100644
--- a/src/views/service/serviceContract/index.vue
+++ b/src/views/service/serviceContract/index.vue
@@ -15,7 +15,13 @@
         <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
       </div>
     </div>
-    <TableCommonView ref="tableListRef" :table-list="tableList" :select-box="!isDetail">
+    <TableCommonView
+      ref="tableListRef"
+      :table-list="tableList"
+      :select-box="!isDetail"
+      @selClientClick="selClientClick"
+      @selCommonClick="selCommonClick"
+    >
       <template slot="tableButton">
         <el-table-column label="鎿嶄綔" width="90">
           <template slot-scope="scope">
@@ -27,6 +33,10 @@
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫 -->
     <AddServiceContractDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 鏈嶅姟鍚堝悓鏄庣粏 -->
+    <DetailServiceContract v-if="serviceContractDetail.visible" :service-contract-detail="serviceContractDetail" />
+    <!-- 瀹㈡埛璇︽儏 -->
+    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
   </div>
 </template>
 
@@ -34,6 +44,7 @@
 import AddServiceContractDialog from "@/views/service/serviceContract/AddServiceContractDialog"
 import { getServiceContractList, getDelServiceContract } from "@/api/serviceManage/serviceContract"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailServiceContract from "@/views/service/serviceContract/DetailServiceContract"
 
 export default {
   name: "ServiceContract",
@@ -45,7 +56,9 @@
   },
   mixins: [pageMixin],
   components: {
-    AddServiceContractDialog
+    AddServiceContractDialog,
+    DetailServiceContract,
+    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
   },
   computed: {
     searchCommonHeight() {
@@ -78,6 +91,14 @@
         visible: false,
         title: "鏂板缓",
         infomation: {}
+      },
+      serviceContractDetail: {
+        visible: false,
+        infomation: {}
+      },
+      clientDeail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -90,8 +111,8 @@
       this.tableList = {
         tableInfomation: [],
         tableColumn: [
-          { label: "鏈嶅姟鍚堝悓缂栧彿", prop: "number", min: 100 }, // 鏈嶅姟鍚堝悓缂栧彿
-          { label: "瀹㈡埛鍚嶇О", prop: "clientId", min: 120 }, // 瀹㈡埛鍚嶇О
+          { label: "鏈嶅姟鍚堝悓缂栧彿", prop: "number", min: 100, isCommonClick: true }, // 鏈嶅姟鍚堝悓缂栧彿
+          { label: "瀹㈡埛鍚嶇О", prop: "clientId", min: 120, isClientClick: true }, // 瀹㈡埛鍚嶇О
           { label: "绛剧害鏃ユ湡", prop: "signTime" }, // 绛剧害鏃ユ湡
           { label: "鍚堝悓绫诲瀷", prop: "typeId" }, // 鍚堝悓绫诲瀷
           { label: "鍚堝悓鐘舵��", prop: "statusId" }, // 鍚堝悓鐘舵��
@@ -176,6 +197,18 @@
     },
     getSelectArray(val) {
       console.log(val)
+    },
+    // 瀹㈡埛鍚嶇О璇︽儏
+    selClientClick(row) {
+      console.log(row)
+      this.clientDeail.visible = true
+      this.clientDeail.infomation = { ...row, client_name: row.name }
+    },
+    // 鏈嶅姟鍚堝悓璇︽儏
+    selCommonClick(row) {
+      console.log(row)
+      this.serviceContractDetail.visible = true
+      this.serviceContractDetail.infomation = { ...row }
     }
   }
 }
diff --git a/src/views/service/serviceFollowup/AddServiceFollowupDialog.vue b/src/views/service/serviceFollowup/AddServiceFollowupDialog.vue
index 583942e..3564b13 100644
--- a/src/views/service/serviceFollowup/AddServiceFollowupDialog.vue
+++ b/src/views/service/serviceFollowup/AddServiceFollowupDialog.vue
@@ -5,6 +5,8 @@
       :visible.sync="editConfig.visible"
       :width="dialogWidth"
       :before-close="handleClose"
+      append-to-body
+      custom-class="iframe-dialog"
     >
       <el-form
         ref="form"
@@ -385,52 +387,54 @@
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style lang="scss" scoped>
-.service-followup {
-  .basic-info {
-    .basic-info-title {
-      background-color: #f4f8fe;
-      padding-left: 10px;
-      font-size: 15px;
-      font-weight: bold;
-      color: #666;
-      height: 42px;
-      line-height: 42px;
-    }
-    .basic-info-view {
-      margin-top: 10px;
-      padding-right: 40px;
-      .custom-name,
-      .common-select {
+::v-deep {
+  .iframe-dialog .el-dialog__body {
+    .basic-info {
+      .basic-info-title {
+        background-color: #f4f8fe;
+        padding-left: 10px;
+        font-size: 15px;
+        font-weight: bold;
+        color: #666;
+        height: 42px;
+        line-height: 42px;
+      }
+      .basic-info-view {
+        margin-top: 10px;
+        padding-right: 40px;
+        .custom-name,
+        .common-select {
+          display: flex;
+          .common-select-sel {
+            width: 270px;
+          }
+          .common-select-btn {
+            margin-left: 5px;
+            font-size: 16px;
+            cursor: pointer;
+          }
+        }
+      }
+      .annex-view {
         display: flex;
-        .common-select-sel {
-          width: 270px;
-        }
-        .common-select-btn {
-          margin-left: 5px;
-          font-size: 16px;
-          cursor: pointer;
+        color: #6166d3;
+        .setFormat {
+          margin-left: 10px;
         }
       }
     }
-    .annex-view {
+    .unflod-collapse {
       display: flex;
+      height: 30px;
+      justify-content: center;
+      align-items: center;
       color: #6166d3;
-      .setFormat {
-        margin-left: 10px;
-      }
     }
-  }
-  .unflod-collapse {
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    align-items: center;
-    color: #6166d3;
-  }
-  .dialog-footer {
-    background-color: #f5f5f5;
-    height: 55px;
-    line-height: 55px;
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
   }
 }
 </style>
diff --git a/src/views/service/serviceFollowup/DetailServiceFollowup.vue b/src/views/service/serviceFollowup/DetailServiceFollowup.vue
new file mode 100644
index 0000000..44d36a1
--- /dev/null
+++ b/src/views/service/serviceFollowup/DetailServiceFollowup.vue
@@ -0,0 +1,371 @@
+<template>
+  <div class="detail-view">
+    <el-drawer
+      :visible.sync="detailConfig.visible"
+      size="80%"
+      :before-close="handleClose"
+      :wrapperClosable="false"
+      :append-to-body="true"
+    >
+      <template slot="title">
+        <div class="header">
+          <span class="header-label">鍥炶鍗曠紪鍙�</span>
+          <span class="header-title">{{ detailConfig.infomation.number }}</span>
+        </div>
+      </template>
+      <div class="content">
+        <div class="tab-view">
+          <el-tabs v-model="activeName" @tab-click="tabsClick">
+            <el-tab-pane label="璇︽儏" name="first"></el-tab-pane>
+            <el-tab-pane label="闄勪欢绠＄悊" name="annex">
+              <!-- <template slot="label">
+                <div>璺熻繘璁板綍<el-badge type="primary" :value="2"> </el-badge></div>
+              </template> -->
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="activeName === 'first'" class="detail">
+          <!-- 鍩烘湰淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('basic')">
+              <i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">鍩烘湰淇℃伅</span>
+            </div>
+            <div v-show="isBasicExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in basicInfoList" :key="i">
+                  <div class="left">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue }}</div>
+                  </div>
+                  <div class="right">
+                    <div class="content-title">{{ item.rightStr }}</div>
+                    <div class="content-data">{{ item.rightValue }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 澶囨敞淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('remark')">
+              <i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">澶囨敞淇℃伅</span>
+            </div>
+            <div v-show="isRemarkExpand" class="basic-info-content">
+              <ul>
+                <li>
+                  <div class="left remark">
+                    <div class="content-title">{{ "澶囨敞锛�" }}</div>
+                    <div class="content-data">{{ "澶囨敞鍐呭" }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- 闄勪欢淇℃伅 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('annex')">
+              <i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">闄勪欢淇℃伅</span>
+            </div>
+            <div v-show="isAnnexExpand" class="basic-info-content">
+              <ul>
+                <li>
+                  <div class="left remark">
+                    <div class="content-title">{{ "闄勪欢锛�" }}</div>
+                    <div class="content-data">{{ "" }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div v-if="activeName === 'annex'" class="second">
+          <!-- <SubOrder :isDetail="true" /> -->
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailServiceFollowup",
+  props: {
+    followupDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: {},
+  computed: {},
+  data() {
+    return {
+      detailConfig: this.followupDetail,
+      activeName: "first",
+      isBasicExpand: true, // 鍩烘湰淇℃伅
+      basicInfoList: [],
+      isRemarkExpand: true, // 澶囨敞淇℃伅
+      isAnnexExpand: true // 闄勪欢淇℃伅
+    }
+  },
+  created() {
+    this.setData()
+  },
+  mounted() {},
+  methods: {
+    setData() {
+      this.basicInfoList = [
+        {
+          leftStr: "瀹㈡埛鍚嶇О",
+          leftValue: "",
+          rightStr: "鍥炶鍗曠紪鍙�",
+          rightValue: ""
+        },
+        {
+          leftStr: "鑱旂郴浜哄鍚�",
+          leftValue: "",
+          rightStr: "瀹㈡埛鏈嶅姟鍗�",
+          rightValue: ""
+        },
+        {
+          leftStr: "鍥炶浜�",
+          leftValue: "",
+          rightStr: "椤圭洰璁″垝",
+          rightValue: ""
+        },
+        {
+          leftStr: "婊℃剰搴�",
+          leftValue: "",
+          rightStr: "鍙婃椂鐜�",
+          rightValue: ""
+        },
+        {
+          leftStr: "瑙ｅ喅鐜�",
+          leftValue: "",
+          rightStr: "鍘熸湇鍔′汉鍛�",
+          rightValue: ""
+        },
+        {
+          leftStr: "鏈嶅姟浜哄憳鏄惁鏉ヨ繃",
+          leftValue: "",
+          rightStr: "鍒涘缓鏃堕棿",
+          rightValue: ""
+        },
+        {
+          leftStr: "淇敼鏃堕棿",
+          leftValue: "",
+          rightStr: "",
+          rightValue: ""
+        }
+      ]
+    },
+    handleClose() {
+      this.detailConfig.visible = false
+    },
+    // tab鍒囨崲
+    tabsClick(tab, event) {
+      console.log(tab, event)
+    },
+    // 灞曞紑鏀惰捣鐐瑰嚮浜嬩欢
+    expandClick(value) {
+      console.log(value)
+      if (value === "basic") {
+        this.isBasicExpand = !this.isBasicExpand
+      } else if (value === "remark") {
+        this.isRemarkExpand = !this.isRemarkExpand
+      } else if (value === "annex") {
+        this.isAnnexExpand = !this.isAnnexExpand
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+::v-deep {
+  .el-drawer__header {
+    padding: 0;
+    margin-bottom: 0px;
+    .header {
+      height: 56px;
+      display: flex;
+      align-items: center;
+      padding-left: 10px;
+      .header-label {
+        padding: 5px;
+        border-radius: 4px;
+        background-color: #ff6600;
+        color: #fff;
+        font-size: 12px;
+      }
+      .header-title {
+        color: #323232;
+        font-size: 15px;
+        margin-left: 10px;
+        font-weight: inherit;
+      }
+    }
+  }
+  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+    padding-left: 20px;
+  }
+  .el-tabs__item.is-active,
+  .el-tabs__item:hover,
+  .el-tabs__active-bar {
+    color: $color-primary;
+  }
+  .el-tabs__header {
+    margin: 0;
+  }
+  .el-drawer__body {
+    .content {
+      background-color: rgb(230, 233, 240);
+      padding: 8px;
+      .tab-view {
+        background: #fff;
+        .item {
+          position: absolute;
+          top: 0px;
+          right: 0px;
+        }
+      }
+      .detail {
+        .basic-info {
+          .basic-info-label {
+            padding-left: 10px;
+            height: 42px;
+            line-height: 42px;
+            background: #f4f8fe;
+            color: #333;
+            font-size: 14px;
+          }
+          .basic-info-content {
+            background: #fff;
+            ul {
+              padding-inline-start: 0;
+            }
+            li {
+              display: flex;
+              font-size: 14px;
+              font-family: PingFangSC;
+              border-bottom: 1px solid #f9f9fb;
+              .left,
+              .right,
+              .all {
+                width: 50%;
+                display: flex;
+                align-items: center;
+                height: 40px;
+                .content-title {
+                  width: 320px;
+                  text-align: right;
+                  color: #555;
+                }
+                .content-data {
+                  text-align: left;
+                  margin-left: 25px;
+                  color: #333;
+                }
+              }
+              .all {
+                width: 100%;
+              }
+              .remark {
+                width: 100%;
+              }
+              .history {
+                .content-title {
+                  width: 200px;
+                  color: #8b0000;
+                }
+                .content-data {
+                  color: #8b0000;
+                }
+              }
+            }
+            .step-view {
+              padding: 30px 60px 5px;
+              height: 100px;
+              .step-title-view {
+                margin-top: 10px;
+                font-size: 12px;
+                color: #555;
+                position: relative;
+                .step-label {
+                  margin-top: -65px;
+                  height: 60px;
+                }
+                .step-btn {
+                  position: absolute;
+                  bottom: -25px;
+                  left: 50%;
+                  margin-left: -28px;
+                  width: 56px;
+                  height: 24px;
+                  line-height: 24px;
+                  text-align: center;
+                  color: #2d82f4;
+                  border: 1px solid #2d82f4;
+                  border-radius: 15px;
+                  cursor: pointer;
+                }
+                .step-desc {
+                  margin-top: 15px;
+                }
+              }
+              .el-step__head.is-process {
+                color: #ff8707;
+                border-color: #ff8707;
+              }
+              .el-step__head.is-finish .el-step__line {
+                background-color: #409eff;
+              }
+            }
+            .termsConditions {
+              display: flex;
+              align-items: center;
+              font-size: 14px;
+              font-family: PingFangSC;
+              // padding: 5px 0;
+              .content-title {
+                width: 320px;
+                text-align: right;
+                color: #555;
+              }
+              .content-termsConditions {
+                margin-left: 25px;
+                font-size: 13px;
+                color: #333;
+                li {
+                  margin: 5px 0;
+                  border-bottom: 0px solid #f9f9fb;
+                }
+              }
+            }
+          }
+        }
+      }
+      .second {
+        background: #fff;
+        .followup-records {
+          .table-view {
+            margin-top: 0 !important;
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/service/serviceFollowup/index.vue b/src/views/service/serviceFollowup/index.vue
index b406a5d..3ad980c 100644
--- a/src/views/service/serviceFollowup/index.vue
+++ b/src/views/service/serviceFollowup/index.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="sales-lead">
-    <div class="top">
+    <div v-if="isDetail" class="detail-top">
+      <DetailListCommonBtn :query-class-options="queryClassOptions" />
+      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
+    </div>
+    <div v-else class="top">
       <SearchCommonView
         ref="searchCommonView"
         :query-class-options="queryClassOptions"
@@ -11,7 +15,15 @@
         <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
       </div>
     </div>
-    <TableCommonView ref="tableListRef" :table-list="tableList">
+    <TableCommonView
+      ref="tableListRef"
+      :table-list="tableList"
+      :select-box="!isDetail"
+      @selClientClick="selClientClick"
+      @selCommonClick="selCommonClick"
+      @selContactsClick="selContactsClick"
+      @selServiceOrderClick="selServiceOrderClick"
+    >
       <template slot="tableButton">
         <el-table-column label="鎿嶄綔" width="90">
           <template slot-scope="scope">
@@ -23,6 +35,14 @@
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫 -->
     <AddServiceFollowupDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 鏈嶅姟鍥炶鍗曡鎯� -->
+    <DetailServiceFollowup v-if="followupDetail.visible" :followup-detail="followupDetail" />
+    <!-- 瀹㈡埛璇︽儏 -->
+    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
+    <!-- 鑱旂郴浜鸿鎯� -->
+    <DetailContacts v-if="contactsDeail.visible" :contacts-detail="contactsDeail" />
+    <!-- 瀹㈡埛鏈嶅姟鍗曡鎯� -->
+    <DetailClientServiceOrder v-if="clientServiceDetail.visible" :client-service-detail="clientServiceDetail" />
   </div>
 </template>
 
@@ -30,13 +50,23 @@
 import AddServiceFollowupDialog from "@/views/service/serviceFollowup/AddServiceFollowupDialog"
 import { getServiceFollowupList, getDelServiceFollowup } from "@/api/serviceManage/serviceFollowup"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailServiceFollowup from "@/views/service/serviceFollowup/DetailServiceFollowup"
 
 export default {
-  name: "SalesLead",
-  props: {},
+  name: "ServiceFollowup",
+  props: {
+    isDetail: {
+      type: Boolean,
+      default: false
+    }
+  },
   mixins: [pageMixin],
   components: {
-    AddServiceFollowupDialog
+    AddServiceFollowupDialog,
+    DetailServiceFollowup,
+    DetailContacts: () => import("@/views/client/contacts/DetailContacts"),
+    DetailClientManage: () => import("@/views/client/client/DetailClientManage"),
+    DetailClientServiceOrder: () => import("@/views/service/clientServiceOrder/DetailClientServiceOrder")
   },
   computed: {
     searchCommonHeight() {
@@ -62,6 +92,22 @@
         visible: false,
         title: "鏂板缓",
         infomation: {}
+      },
+      followupDetail: {
+        visible: false,
+        infomation: {}
+      },
+      contactsDeail: {
+        visible: false,
+        infomation: {}
+      },
+      clientDeail: {
+        visible: false,
+        infomation: {}
+      },
+      clientServiceDetail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -74,10 +120,10 @@
       this.tableList = {
         tableInfomation: [],
         tableColumn: [
-          { label: "鍥炶鍗曠紪鍙�", prop: "number", min: 80 }, // 鍥炶鍗曠紪鍙�
-          { label: "瀹㈡埛鍚嶇О", prop: "clientId", min: 130 }, // 瀹㈡埛鍚嶇О
-          { label: "鑱旂郴浜哄鍚�", prop: "contactId" }, // 鑱旂郴浜哄鍚�
-          { label: "瀹㈡埛鏈嶅姟鍗�", prop: "serviceId" }, // 瀹㈡埛鏈嶅姟鍗�
+          { label: "鍥炶鍗曠紪鍙�", prop: "number", min: 80, isCommonClick: true }, // 鍥炶鍗曠紪鍙�
+          { label: "瀹㈡埛鍚嶇О", prop: "clientId", min: 130, isClientClick: true }, // 瀹㈡埛鍚嶇О
+          { label: "鑱旂郴浜哄鍚�", prop: "contactId", isContactClick: true }, // 鑱旂郴浜哄鍚�
+          { label: "瀹㈡埛鏈嶅姟鍗�", prop: "serviceId", isServiceOrder: true }, // 瀹㈡埛鏈嶅姟鍗�
           { label: "鍥炶浜�", prop: "isVisit" }, // 鍥炶浜�
           { label: "婊℃剰搴�", prop: "satisfaction" } // 婊℃剰搴�
           // { label: "淇敼鏃堕棿", prop: "modifyTime" } // 淇敼鏃堕棿
@@ -157,6 +203,29 @@
     },
     getSelectArray(val) {
       console.log(val)
+    },
+    // 瀹㈡埛鍚嶇О璇︽儏
+    selClientClick(row) {
+      console.log(row)
+      this.clientDeail.visible = true
+      this.clientDeail.infomation = { ...row, client_name: row.name }
+    },
+    // 鑱旂郴浜鸿鎯�
+    selContactsClick(row) {
+      console.log(row)
+      this.contactsDeail.visible = true
+      this.contactsDeail.infomation = { ...row }
+    },
+    // 鏈嶅姟鍥炶鍗曡鎯�
+    selCommonClick(row) {
+      console.log(row)
+      this.followupDetail.visible = true
+      this.followupDetail.infomation = { ...row }
+    },
+    selServiceOrderClick(row) {
+      console.log(row)
+      this.clientServiceDetail.visible = true
+      this.clientServiceDetail.infomation = { ...row }
     }
   }
 }
@@ -174,5 +243,11 @@
       }
     }
   }
+  .detail-top {
+    display: flex;
+    .page {
+      margin-left: auto;
+    }
+  }
 }
 </style>

--
Gitblit v1.8.0