From ba814d605ad50da217a3dd422bcc7db5360b092f Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期六, 05 八月 2023 17:51:50 +0800
Subject: [PATCH] 销售模块详情页

---
 src/views/sales/subOrder/index.vue                       |   58 
 src/views/sales/refundForm/DetailRefundForm.vue          |  419 +++++
 src/views/client/client/DetailClientManage.vue           |    2 
 src/components/makepager/CommonFormTableView.vue         |   45 
 src/views/sales/masterOrder/DetailMasterOrder.vue        |  351 ++++
 src/views/sales/masterOrder/index.vue                    |   42 
 src/views/sales/contractManage/DetailContractManage.vue  |  459 +++++
 src/views/sales/refundForm/index.vue                     |   60 
 src/common/const/salesFixedStatus.js                     |   18 
 src/components/makepager/TableCommonView.vue             |   24 
 src/views/sales/salesOpportunity/DetailAdvanceDialog.vue |  107 +
 src/views/sales/salesOpportunity/DetailOpportunity.vue   |  683 ++++++++
 src/views/sales/salesDetails/DetailSpecification.vue     |  638 ++++++++
 src/views/sales/salesReturn/index.vue                    |   60 
 src/views/sales/quotation/AddQuotationDialog.vue         |    4 
 src/views/sales/quotation/DetailQuotation.vue            |  593 +++++++
 src/views/sales/salesOpportunity/index.vue               |   56 
 src/views/sales/salesReturn/DetailReturn.vue             |  460 +++++
 src/views/sales/subOrder/DetailSubOrder.vue              |  414 +++++
 src/views/client/contacts/DetailContacts.vue             |    2 
 src/views/sales/contractManage/index.vue                 |   20 
 src/views/sales/quotation/index.vue                      |   57 
 src/views/sales/salesDetails/index.vue                   |   42 
 23 files changed, 4,553 insertions(+), 61 deletions(-)

diff --git a/src/common/const/salesFixedStatus.js b/src/common/const/salesFixedStatus.js
new file mode 100644
index 0000000..420d5f0
--- /dev/null
+++ b/src/common/const/salesFixedStatus.js
@@ -0,0 +1,18 @@
+const status = {
+  termsConditions: [
+    "1銆佷互涓婃姤浠峰惈17%鐨勫鍊肩◣绁�",
+    "2銆佽川閲忔爣鍑嗭細鎸夎涓氭爣鍑嗘墽琛�",
+    "3銆佷緵璐ф柟瀵硅川閲忚礋璐ｇ殑鏉′欢鍙婃湡闄愶細浜у搧鍏嶈垂淇濅慨1骞达紙浜轰负鍥犵礌闄ゅ锛夛紝鑷揣鍒颁箣鏃ョ畻璧�",
+    "4銆佸寘瑁呮爣鍑嗐�佸寘瑁呯墿鐨勪緵搴斾笌鍥炴敹锛氭爣鍑嗗寘瑁咃紝鍖呰鐗╀笉鍥炴敹",
+    "5銆佸悎鐞嗘崯鑰楀強璁＄畻鏂规硶锛氭棤",
+    "6銆佽喘鐗╂墍鏈夋潈鑷揣娆句袱娓呮椂杞Щ锛屼絾璐揣鏂规湭灞ヨ鏀粯浠锋涔夊姟鐨勶紝璐殑鐗╁睘浜庝緵璐ф柟鎵�鏈�",
+    "7銆佺粨绠楁柟寮忓強鏈熼檺锛氶浠�30%锛屾彁渚涘墠浠樻竻鍏ㄦ",
+    "8銆佷氦璐ф湡闄愶細鍙崗鍟�",
+    "9銆佹媴淇濇柟寮忥紙涔熷彲鍙︾珛鎷呬繚鍚堝悓锛夛細鏃�",
+    "10銆佽繚绾﹁矗浠伙細鎸夊悎鍚屾硶鎵ц",
+    "11銆佽В鍐冲悎鍚岀籂绾风殑鏂瑰紡锛氭墽琛屾湰鍚堝悓鍙戠敓浜夎锛岀敱褰撲簨浜哄弻鏂瑰崗鍟嗚В鍐炽�傚崗鍟嗕笉鎴愶紝鍙屾柟鍚屾剰鎻愪氦鏈夊叧浠茶濮斿憳浼氫徊瑁侊紝鍙屾柟浜嬪悗娌℃湁杈炬垚浠茶鍗忚鐨勶紝鍙悜浜烘皯娉曢櫌璧疯瘔",
+    "12銆佹湰鎶ヤ环鑷弻鏂圭瀛楃洊绔犺捣鐢熸晥銆傦紙浼犵湡浠舵湁鏁堬級",
+    "13銆佸叾浠栫害瀹氫簨椤癸細鏈敖浜嬪疁锛屽弻鏂瑰弸濂藉崗鍟嗚В鍐�"
+  ]
+}
+export default status
diff --git a/src/components/makepager/CommonFormTableView.vue b/src/components/makepager/CommonFormTableView.vue
index ad95fc2..01f734a 100644
--- a/src/components/makepager/CommonFormTableView.vue
+++ b/src/components/makepager/CommonFormTableView.vue
@@ -24,30 +24,33 @@
           </template>
           <!-- column鏍峰紡 -->
           <template slot-scope="scope">
-            <el-form-item
-              v-if="item.input"
-              label=" "
-              :prop="'tableData.' + scope.$index + '.' + item.prop"
-              :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
-            >
-              <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini" disabled></el-input>
-            </el-form-item>
-            <el-form-item
-              v-else-if="item.date"
-              label=" "
-              :prop="'tableData.' + scope.$index + '.' + item.prop"
-              :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
-            >
-              <!-- <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini"></el-input> -->
-              <el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px" disabled>
-              </el-date-picker>
-            </el-form-item>
+            <template v-if="!detailEnter">
+              <el-form-item
+                v-if="item.input"
+                label=" "
+                :prop="'tableData.' + scope.$index + '.' + item.prop"
+                :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
+              >
+                <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini" disabled></el-input>
+              </el-form-item>
+              <el-form-item
+                v-else-if="item.date"
+                label=" "
+                :prop="'tableData.' + scope.$index + '.' + item.prop"
+                :rules="[{ required: item.isRequird ? true : false, message: '杈撳叆涓嶈兘涓虹┖' }]"
+              >
+                <!-- <el-input v-model.trim="scope.row[item.prop]" maxlength="50" size="mini"></el-input> -->
+                <el-date-picker v-model="scope.row[item.prop]" type="date" size="mini" style="width: 110px" disabled>
+                </el-date-picker>
+              </el-form-item>
+              <span v-else>{{ scope.row[item.prop] }}</span>
+            </template>
             <span v-else>{{ scope.row[item.prop] }}</span>
           </template>
         </el-table-column>
       </el-table>
     </el-form>
-    <div style="margin: 10px">
+    <div v-if="!detailEnter" style="margin: 10px">
       <el-button size="small" type="primary" disabled>鏂板</el-button>
       <el-button size="small" type="primary" disabled>瀵煎叆鏄庣粏</el-button>
       <el-button size="small" type="primary" disabled>娓呯┖</el-button>
@@ -72,6 +75,10 @@
 export default {
   name: "CommmonFormTableView",
   props: {
+    detailEnter: {
+      type: Boolean,
+      default: false
+    },
     productTableList: {
       type: Object,
       default: () => {
diff --git a/src/components/makepager/TableCommonView.vue b/src/components/makepager/TableCommonView.vue
index 80b1e97..2e9797c 100644
--- a/src/components/makepager/TableCommonView.vue
+++ b/src/components/makepager/TableCommonView.vue
@@ -53,6 +53,18 @@
             @click="selContactsClick(scope.row)"
             >{{ scope.row[item.prop] }}</span
           >
+          <span
+            v-else-if="item.isMasterClick && scope.row[item.prop]"
+            class="sel-name"
+            @click="selMasterClick(scope.row)"
+            >{{ scope.row[item.prop] }}</span
+          >
+          <span
+            v-else-if="item.isCommonClick && scope.row[item.prop]"
+            class="sel-name"
+            @click="selCommonClick(scope.row)"
+            >{{ scope.row[item.prop] }}</span
+          >
           <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
         </template>
       </el-table-column>
@@ -200,17 +212,29 @@
       }
       return fmt
     },
+    // 鏂板缓缂栬緫閫夋嫨寮圭獥
     selNameClick(row) {
       this.$emit("selCommonClick", row)
     },
+    // 閿�鍞嚎绱�
     selSalesLeadClick(row) {
       this.$emit("selSalesLeadClick", row)
     },
+    // 瀹㈡埛鍚嶇О
     selClientClick(row) {
       this.$emit("selClientClick", row)
     },
+    // 鑱旂郴浜哄鍚�
     selContactsClick(row) {
       this.$emit("selContactsClick", row)
+    },
+    // 閿�鍞�诲崟
+    selMasterClick(row) {
+      this.$emit("selMasterClick", row)
+    },
+    // 鍏叡锛堥攢鍞満浼氥�佹姤浠峰崟銆侀攢鍞�诲崟銆侀攢鍞瓙鍗曘�傘�傘�傦級
+    selCommonClick(row) {
+      this.$emit("selCommonClick", row)
     }
   }
 }
diff --git a/src/views/client/client/DetailClientManage.vue b/src/views/client/client/DetailClientManage.vue
index e1c0423..388075c 100644
--- a/src/views/client/client/DetailClientManage.vue
+++ b/src/views/client/client/DetailClientManage.vue
@@ -496,7 +496,7 @@
                 align-items: center;
                 height: 40px;
                 .content-title {
-                  width: 220px;
+                  width: 320px;
                   text-align: right;
                   color: #555;
                 }
diff --git a/src/views/client/contacts/DetailContacts.vue b/src/views/client/contacts/DetailContacts.vue
index 97e078c..18907ff 100644
--- a/src/views/client/contacts/DetailContacts.vue
+++ b/src/views/client/contacts/DetailContacts.vue
@@ -331,7 +331,7 @@
                 align-items: center;
                 height: 40px;
                 .content-title {
-                  width: 220px;
+                  width: 320px;
                   text-align: right;
                   color: #555;
                 }
diff --git a/src/views/sales/contractManage/DetailContractManage.vue b/src/views/sales/contractManage/DetailContractManage.vue
new file mode 100644
index 0000000..9e9b700
--- /dev/null
+++ b/src/views/sales/contractManage/DetailContractManage.vue
@@ -0,0 +1,459 @@
+<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.name }}</span>
+        </div>
+      </template>
+      <div class="content">
+        <div class="top">
+          <ul>
+            <li v-for="(item, i) in topList" :key="i">
+              <div class="left1">
+                <div class="content-title">{{ item.left1Str + "锛�" }}</div>
+                <div class="content-data">{{ item.left1Value }}</div>
+              </div>
+              <div class="left2">
+                <div class="content-title">{{ item.left2Str + "锛�" }}</div>
+                <div class="content-data">{{ item.left2Value }}</div>
+              </div>
+              <div class="right1">
+                <div class="content-title">{{ item.right1Str + "锛�" }}</div>
+                <div class="content-data">{{ item.right1Value }}</div>
+              </div>
+              <div class="right2">
+                <div class="content-title">{{ item.right2Str + "锛�" }}</div>
+                <div class="content-data">{{ item.right2Value }}</div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <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('schdule')">
+              <i v-if="isSchduleExpand" 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="isSchduleExpand" class="basic-info-content">
+              <div class="step-view">
+                <el-steps :active="active" align-center>
+                  <el-step :active-color="'#fff'" :title="item.title" :key="index" v-for="(item, index) in stepsList">
+                    <template slot="title">
+                      <div class="step-title-view">
+                        <div class="step-label">{{ item.title }}</div>
+                        <div v-show="index === active" class="step-btn" @click="advanceClick(item)">鎺ㄨ繘</div>
+                        <div class="step-desc">{{ item.desc }}</div>
+                      </div>
+                    </template>
+                  </el-step>
+                </el-steps>
+              </div>
+            </div>
+          </div>
+          <!-- 鏈轰細鍩烘湰淇℃伅 -->
+          <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('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>
+      <!-- 鎺ㄨ繘 -->
+      <DetailAdvanceDialog v-if="advanceConfig.visible" :advance-config="advanceConfig" />
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import DetailAdvanceDialog from "@/views/sales/salesOpportunity/DetailAdvanceDialog"
+export default {
+  name: "DetailContractManage",
+  props: {
+    contractDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { DetailAdvanceDialog },
+  computed: {},
+  data() {
+    return {
+      detailConfig: this.contractDetail,
+      activeName: "first",
+      isSchduleExpand: true, // 杩涘害杩借釜
+      stepsList: [
+        { title: "寰呭鎵�", desc: "鍋滅暀: 1鏈�8澶�20灏忔椂" },
+        { title: "瀹℃壒涓�", desc: "" },
+        { title: "宸插鎵�", desc: "" },
+        { title: "宸插綊妗�", desc: "" }
+      ],
+      topList: [],
+      isBasicExpand: true, // 鍩烘湰淇℃伅灞曞紑
+      basicInfoList: [],
+      isAnnexExpand: true, // 闄勪欢淇℃伅
+      active: 2,
+      advanceConfig: {
+        visible: false,
+        active: ""
+      }
+    }
+  },
+  created() {
+    this.setData()
+  },
+  mounted() {},
+  methods: {
+    setData() {
+      this.topList = [
+        {
+          left1Str: "鍗曟嵁缂栧彿",
+          left1Value: "",
+          left2Str: "璐熻矗浜�",
+          left2Value: "",
+          right1Str: "鍒涘缓浜�",
+          right1Value: "",
+          right2Str: "褰撳墠瀹℃壒浜�",
+          right2Value: ""
+        },
+        {
+          left1Str: "鍚堝悓鐘舵��",
+          left1Value: "",
+          left2Str: "鍚堝悓鎵弿浠�",
+          left2Value: "",
+          right1Str: "瀹℃壒鐘舵��",
+          right1Value: "",
+          right2Str: "鏇存柊鏃堕棿",
+          right2Value: ""
+        },
+        {
+          left1Str: "鍒涘缓鏃堕棿",
+          left1Value: "",
+          left2Str: "瀹㈡埛鍚嶇О",
+          left2Value: "",
+          right1Str: "",
+          right1Value: "",
+          right2Str: "",
+          right2Value: ""
+        }
+      ]
+      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 === "schdule") {
+        this.isSchduleExpand = !this.isSchduleExpand
+      } else if (value === "basic") {
+        this.isBasicExpand = !this.isBasicExpand
+      } else if (value === "annex") {
+        this.isAnnexExpand = !this.isAnnexExpand
+      }
+    },
+    // 鎺ㄨ繘
+    advanceClick(item) {
+      console.log(item)
+      this.advanceConfig.visible = true
+      this.advanceConfig.active = item.title
+    }
+  }
+}
+</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;
+      .top {
+        height: 126px;
+        // line-height: 42px;
+        margin-bottom: 10px;
+        text-align: center;
+        font-size: 14px;
+        color: #555;
+        background-color: #fff;
+        li {
+          display: flex;
+          .left1,
+          .left2,
+          .right1,
+          .right2 {
+            width: 25%;
+            display: flex;
+            align-items: center;
+            height: 40px;
+            .content-title {
+              width: 150px;
+              text-align: right;
+            }
+            .content-data {
+              text-align: left;
+              margin-left: 25px;
+            }
+          }
+        }
+      }
+      .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;
+              }
+            }
+          }
+        }
+      }
+      .second {
+        background: #fff;
+        .followup-records {
+          .table-view {
+            margin-top: 0 !important;
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sales/contractManage/index.vue b/src/views/sales/contractManage/index.vue
index ff11738..99243fa 100644
--- a/src/views/sales/contractManage/index.vue
+++ b/src/views/sales/contractManage/index.vue
@@ -17,7 +17,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">
@@ -29,6 +29,8 @@
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫 -->
     <AddContractManageDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 鏈轰細璇︽儏 -->
+    <DetailContractManage v-if="contractDetail.visible" :contract-detail="contractDetail" />
   </div>
 </template>
 
@@ -36,13 +38,15 @@
 import AddContractManageDialog from "@/views/sales/contractManage/AddContractManageDialog"
 import { getContractList, getDelContract } from "@/api/sales/contractManage"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailContractManage from "@/views/sales/contractManage/DetailContractManage"
 
 export default {
   name: "ContractManage",
   props: {},
   mixins: [pageMixin],
   components: {
-    AddContractManageDialog
+    AddContractManageDialog,
+    DetailContractManage
   },
   computed: {
     searchCommonHeight() {
@@ -75,6 +79,10 @@
         visible: false,
         title: "鏂板缓",
         infomation: {}
+      },
+      contractDetail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -87,7 +95,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 },
@@ -168,6 +176,12 @@
     },
     getSelectArray(val) {
       console.log(val)
+    },
+    // 鍚堝悓绠＄悊璇︽儏
+    selCommonClick(row) {
+      console.log(row)
+      this.contractDetail.visible = true
+      this.contractDetail.infomation = { ...row }
     }
   }
 }
diff --git a/src/views/sales/masterOrder/DetailMasterOrder.vue b/src/views/sales/masterOrder/DetailMasterOrder.vue
new file mode 100644
index 0000000..e09653c
--- /dev/null
+++ b/src/views/sales/masterOrder/DetailMasterOrder.vue
@@ -0,0 +1,351 @@
+<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="sub">
+              <!-- <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('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 === 'sub'" class="second">
+          <SubOrder :isDetail="true" />
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import SubOrder from "@/views/sales/subOrder"
+export default {
+  name: "DetailMasterOrder",
+  props: {
+    masterOrderDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { SubOrder },
+  computed: {},
+  data() {
+    return {
+      detailConfig: this.masterOrderDetail,
+      activeName: "first",
+      isBasicExpand: true, // 鍩烘湰淇℃伅
+      basicInfoList: [],
+      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 === "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/sales/masterOrder/index.vue b/src/views/sales/masterOrder/index.vue
index 7c748bf..685e9e5 100644
--- a/src/views/sales/masterOrder/index.vue
+++ b/src/views/sales/masterOrder/index.vue
@@ -15,7 +15,14 @@
         <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
       </div>
     </div>
-    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList" :select-box="!isDetail">
+    <TableCommonView
+      ref="tableListRef"
+      :show-summary="showSummary"
+      :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 +34,10 @@
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫 -->
     <AddMasterOrderDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 閿�鍞瓙鍗曡鎯� -->
+    <DetailMasterOrder v-if="masterOrderDeail.visible" :master-order-detail="masterOrderDeail" />
+    <!-- 瀹㈡埛璇︽儏 -->
+    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
   </div>
 </template>
 
@@ -34,6 +45,7 @@
 import AddMasterOrderDialog from "@/views/sales/masterOrder/AddMasterOrderDialog"
 import { getMasterOrderList, getDelMasterOrder } from "@/api/sales/masterOrder"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailMasterOrder from "@/views/sales/masterOrder/DetailMasterOrder"
 
 export default {
   name: "MasterOrder",
@@ -45,7 +57,9 @@
   },
   mixins: [pageMixin],
   components: {
-    AddMasterOrderDialog
+    AddMasterOrderDialog,
+    DetailMasterOrder,
+    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
   },
   computed: {},
   data() {
@@ -79,6 +93,14 @@
         show: true,
         sumProp: ["money"],
         mergeNumber: 5
+      },
+      masterOrderDeail: {
+        visible: false,
+        infomation: {}
+      },
+      clientDeail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -91,8 +113,8 @@
       this.tableList = {
         tableInfomation: [],
         tableColumn: [
-          { label: "鍗曟嵁缂栧彿", prop: "number", min: 100 }, // 鍗曟嵁缂栧彿
-          { label: "瀹㈡埛鍚嶇О", prop: "client_name", min: 120 }, // 瀹㈡埛鍚嶇О
+          { label: "鍗曟嵁缂栧彿", prop: "number", min: 100, isCommonClick: true }, // 鍗曟嵁缂栧彿
+          { label: "瀹㈡埛鍚嶇О", prop: "client_name", min: 120, isClientClick: true }, // 瀹㈡埛鍚嶇О
           { label: "鏈嶅姟寮�濮嬫椂闂�", prop: "start_time", isTime: true }, // 鏈嶅姟寮�濮嬫椂闂�
           { label: "鏈嶅姟鎴鏃堕棿", prop: "end_time", isTime: true }, // 鏈嶅姟鎴鏃堕棿
           { label: "鍚堝悓閲戦", prop: "money" }, // 鍚堝悓閲戦
@@ -175,6 +197,18 @@
     },
     getSelectArray(val) {
       console.log(val)
+    },
+    // 瀹㈡埛鍚嶇О璇︽儏
+    selClientClick(row) {
+      console.log(row)
+      this.clientDeail.visible = true
+      this.clientDeail.infomation = { ...row }
+    },
+    // 鏈轰細鍚嶇О璇︽儏
+    selCommonClick(row) {
+      console.log(row)
+      this.masterOrderDeail.visible = true
+      this.masterOrderDeail.infomation = { ...row }
     }
   }
 }
diff --git a/src/views/sales/quotation/AddQuotationDialog.vue b/src/views/sales/quotation/AddQuotationDialog.vue
index 9c6c37d..cdcf999 100644
--- a/src/views/sales/quotation/AddQuotationDialog.vue
+++ b/src/views/sales/quotation/AddQuotationDialog.vue
@@ -34,10 +34,10 @@
                       value-key="name"
                       @select="handleSelectClient('client', $event)"
                     ></el-autocomplete>
-                    <div class="common-select-btn" @click="selClientClick">
+                    <div class="common-select-btn" @click="selClientClick('client')">
                       <i class="el-icon-circle-plus-outline" title="閫夋嫨"></i>
                     </div>
-                    <div class="common-select-btn" @click="clearupClient">
+                    <div class="common-select-btn" @click="clearupClient('client')">
                       <i class="el-icon-edit-outline" title="娓呴櫎"></i>
                     </div>
                   </div>
diff --git a/src/views/sales/quotation/DetailQuotation.vue b/src/views/sales/quotation/DetailQuotation.vue
new file mode 100644
index 0000000..1cd4f7c
--- /dev/null
+++ b/src/views/sales/quotation/DetailQuotation.vue
@@ -0,0 +1,593 @@
+<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="top">{{ "鍚堝悓鍙戣捣浜猴細" + "" }}</div>
+        <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="changeOrder">
+              <!-- <template slot="label">
+                <div>璺熻繘璁板綍<el-badge type="primary" :value="2"> </el-badge></div>
+              </template> -->
+            </el-tab-pane>
+            <el-tab-pane label="閿�鍞槑缁嗗崟" name="detail"></el-tab-pane>
+            <el-tab-pane label="鏈嶅姟鍚堝悓" name="serviceContract"></el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="activeName === 'first'" class="detail">
+          <!-- 鏍囩 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('label')">
+              <i v-if="isLabelExpand" 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="isLabelExpand" class="basic-info-content"></div>
+          </div>
+          <!-- 鍩烘湰淇℃伅 -->
+          <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('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.termsConditions" :key="index">{{ item }}</li>
+                  </ul>
+                </div>
+              </div>
+            </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 class="basic-info">
+            <div class="basic-info-label" @click="expandClick('approval')">
+              <i v-if="isApprovalExpand" 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="isApprovalExpand" class="basic-info-content"></div>
+          </div> -->
+        </div>
+        <div v-if="activeName === 'changeOrder'" class="second">
+          <!-- <FollowupRecords :isDetail="true" /> -->
+        </div>
+        <div v-if="activeName === 'detail'" class="second">
+          <SalesDetails :isDetail="true" />
+        </div>
+        <div v-if="activeName === 'serviceContract'" class="second">
+          <ServiceContract :isDetail="true" />
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import SalesDetails from "@/views/sales/salesDetails"
+import ServiceContract from "@/views/service/serviceContract"
+import Status from "@/common/const/salesFixedStatus"
+import CommonFormTableView from "@/components/makepager/CommonFormTableView"
+export default {
+  name: "DetailQuotation",
+  props: {
+    quotationDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { SalesDetails, ServiceContract, CommonFormTableView },
+  computed: {},
+  data() {
+    return {
+      Status: Status,
+      detailConfig: this.quotationDetail,
+      activeName: "first",
+      isLabelExpand: true, // 鏍囩
+      isBasicExpand: true, // 鍩烘湰淇℃伅
+      basicInfoList: [],
+      isTermsConditionsExpand: true, // 鏉′欢涓庢潯娆�
+      isAnnexExpand: true, // 闄勪欢淇℃伅
+      isProductExpand: true, // 浜у搧绠＄悊
+      isApprovalExpand: 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: ""
+        }
+      ]
+      this.forecastList = [
+        {
+          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: ""
+        }
+      ]
+      this.businessInfoList = [
+        {
+          leftStr: "瀹㈡埛闇�姹傛垨鐥涚偣锛坵hy锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "鏄惁宸茬粡绔嬮」锛坧lan锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "璧勯噾棰勭畻鏄灏戯紙plan锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "鍏抽敭鍐崇瓥浜烘槸璋侊紙who锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "鍏抽敭鍐崇瓥鍥犵礌鏈夊摢浜涳紙what锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "鍐崇瓥娴佺▼鏄�庢牱鐨勶紙what锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "绔炰簤瀵规墜鎻愪緵鐨勬柟妗堬紙what锛�",
+          leftValue: ""
+        }
+      ]
+      this.swotInfoList = [
+        {
+          leftStr: "浼樺娍(S)",
+          leftValue: "",
+          rightStr: "鍔ｅ娍(W)",
+          rightValue: ""
+        },
+        {
+          leftStr: "鏈轰細(O)",
+          leftValue: "",
+          rightStr: "濞佽儊(T)",
+          rightValue: ""
+        }
+      ]
+      this.addressInfoList = [
+        {
+          leftStr: "鍥藉",
+          leftValue: "",
+          rightStr: "鐪佷唤",
+          rightValue: ""
+        },
+        {
+          leftStr: "鍩庡競",
+          leftValue: "",
+          rightStr: "鍖哄煙",
+          rightValue: ""
+        },
+        {
+          leftStr: "璇︾粏鍦板潃",
+          leftValue: "",
+          rightStr: "",
+          rightValue: ""
+        }
+      ]
+      this.historyList = [
+        {
+          date: "2023-08-04 13:22:36",
+          stage: "鎴愬姛缁撴",
+          modify: "绯荤粺绠＄悊鍛�"
+        },
+        {
+          date: "2023-08-04 13:22:36",
+          stage: "鎴愬姛缁撴",
+          modify: "绯荤粺绠＄悊鍛�"
+        }
+      ]
+    },
+    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 === "label") {
+        this.isLabelExpand = !this.isLabelExpand
+      } else if (value === "termsConditions") {
+        this.isTermsConditionsExpand = !this.isTermsConditionsExpand
+      } else if (value === "annex") {
+        this.isAnnexExpand = !this.isAnnexExpand
+      } else if (value === "product") {
+        this.isProductExpand = !this.isProductExpand
+      } else if (value === "approval") {
+        this.isApprovalExpand = !this.isApprovalExpand
+      }
+    },
+    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;
+      .top {
+        height: 42px;
+        line-height: 42px;
+        margin-bottom: 10px;
+        text-align: center;
+        font-size: 14px;
+        color: #555;
+        background-color: #fff;
+      }
+      .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/sales/quotation/index.vue b/src/views/sales/quotation/index.vue
index 3a4d5a4..8f73b84 100644
--- a/src/views/sales/quotation/index.vue
+++ b/src/views/sales/quotation/index.vue
@@ -16,7 +16,14 @@
         <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"
+      @selContactsClick="selContactsClick"
+      @selCommonClick="selCommonClick"
+    >
       <template slot="tableButton">
         <el-table-column label="鎿嶄綔" width="90">
           <template slot-scope="scope">
@@ -28,6 +35,12 @@
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫 -->
     <AddQuotationDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 鎶ヤ环鍗曡鎯� -->
+    <DetailQuotation v-if="quotationDeail.visible" :quotation-detail="quotationDeail" />
+    <!-- 瀹㈡埛璇︽儏 -->
+    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
+    <!-- 鑱旂郴浜鸿鎯� -->
+    <DetailContacts v-if="contactsDeail.visible" :contacts-detail="contactsDeail" />
   </div>
 </template>
 
@@ -35,6 +48,7 @@
 import AddQuotationDialog from "@/views/sales/quotation/AddQuotationDialog"
 import { getQuotationList, getDelQuotation } from "@/api/sales/quotation"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailQuotation from "@/views/sales/quotation/DetailQuotation"
 
 export default {
   name: "QuotationView",
@@ -46,7 +60,10 @@
   },
   mixins: [pageMixin],
   components: {
-    AddQuotationDialog
+    AddQuotationDialog,
+    DetailQuotation,
+    DetailContacts: () => import("@/views/client/contacts/DetailContacts"),
+    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
   },
   computed: {
     searchCommonHeight() {
@@ -77,6 +94,18 @@
         visible: false,
         title: "鏂板缓",
         infomation: {}
+      },
+      quotationDeail: {
+        visible: false,
+        infomation: {}
+      },
+      contactsDeail: {
+        visible: false,
+        infomation: {}
+      },
+      clientDeail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -89,9 +118,9 @@
       this.tableList = {
         tableInfomation: [],
         tableColumn: [
-          { label: "鎶ヤ环鍗曞彿", prop: "number", min: 90 }, // 鎶ヤ环鍗曞彿
-          { label: "瀹㈡埛鍚嶇О", prop: "client_name", min: 120 }, // 瀹㈡埛鍚嶇О
-          { label: "鑱旂郴浜哄鍚�", prop: "contact_name", min: 90 }, // 鑱旂郴浜哄鍚�
+          { label: "鎶ヤ环鍗曞彿", prop: "number", min: 90, isCommonClick: true }, // 鎶ヤ环鍗曞彿
+          { label: "瀹㈡埛鍚嶇О", prop: "client_name", min: 120, isClientClick: true }, // 瀹㈡埛鍚嶇О
+          { label: "鑱旂郴浜哄鍚�", prop: "contact_name", min: 90, isContactClick: true }, // 鑱旂郴浜哄鍚�
           { label: "閿�鍞礋璐ｄ汉", prop: "member_id" }, // 閿�鍞礋璐ｄ汉
           { label: "鏈夋晥鏈�", prop: "validity_date", isTime: true, min: 100 }, // 淇敼鏃堕棿
           { label: "灏忚", prop: "subTotal" }, // 灏忚
@@ -177,6 +206,24 @@
     },
     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.quotationDeail.visible = true
+      this.quotationDeail.infomation = { ...row }
     }
   }
 }
diff --git a/src/views/sales/refundForm/DetailRefundForm.vue b/src/views/sales/refundForm/DetailRefundForm.vue
new file mode 100644
index 0000000..786ae99
--- /dev/null
+++ b/src/views/sales/refundForm/DetailRefundForm.vue
@@ -0,0 +1,419 @@
+<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 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 === 'annex'" class="second">
+          <!-- <RefundForm :isDetail="true" /> -->
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import CommonFormTableView from "@/components/makepager/CommonFormTableView"
+export default {
+  name: "DetailSpecification",
+  props: {
+    refundFormDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { CommonFormTableView },
+  computed: {},
+  data() {
+    return {
+      detailConfig: this.refundFormDetail,
+      activeName: "first",
+      isBasicExpand: true, // 鍩烘湰淇℃伅
+      basicInfoList: [],
+      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: ""
+        }
+      ]
+    },
+    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
+      } 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/sales/refundForm/index.vue b/src/views/sales/refundForm/index.vue
index 01da30f..df1d464 100644
--- a/src/views/sales/refundForm/index.vue
+++ b/src/views/sales/refundForm/index.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="refund-form">
-    <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,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="100">
           <template slot-scope="scope">
@@ -23,6 +33,10 @@
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫 -->
     <AddRefundFormDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 閿�鍞��璐у崟璇︽儏 -->
+    <DetailRefundForm v-if="refundFormDetail.visible" :refund-form-detail="refundFormDetail" />
+    <!-- 瀹㈡埛璇︽儏 -->
+    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
   </div>
 </template>
 
@@ -30,13 +44,21 @@
 import AddRefundFormDialog from "@/views/sales/refundForm/AddRefundFormDialog"
 import { getSalesRefundList, getDelSalesRefund } from "@/api/sales/refundForm"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailRefundForm from "@/views/sales/refundForm/DetailRefundForm"
 
 export default {
   name: "RefundForm",
-  props: {},
+  props: {
+    isDetail: {
+      type: Boolean,
+      default: false
+    }
+  },
   mixins: [pageMixin],
   components: {
-    AddRefundFormDialog
+    AddRefundFormDialog,
+    DetailRefundForm,
+    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
   },
   computed: {
     searchCommonHeight() {
@@ -67,6 +89,14 @@
         visible: false,
         title: "鏂板缓",
         infomation: {}
+      },
+      refundFormDetail: {
+        visible: false,
+        infomation: {}
+      },
+      clientDeail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -79,8 +109,8 @@
       this.tableList = {
         tableInfomation: [],
         tableColumn: [
-          { label: "閫�娆惧崟缂栧彿", prop: "number" },
-          { label: "瀹㈡埛鍚嶇О", prop: "clientId", min: 120 },
+          { label: "閫�娆惧崟缂栧彿", prop: "number", isCommonClick: true },
+          { label: "瀹㈡埛鍚嶇О", prop: "clientId", min: 120, isClientClick: true },
           { label: "閫�娆炬棩鏈�", prop: "refundDate", isTime: true, min: 130 },
           { label: "璐︽埛", prop: "accountId" },
           { label: "鏄惁寮�绁�", prop: "isInvoice", min: 100 },
@@ -164,6 +194,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.refundFormDetail.visible = true
+      this.refundFormDetail.infomation = { ...row }
     }
   }
 }
@@ -181,5 +223,11 @@
       }
     }
   }
+  .detail-top {
+    display: flex;
+    .page {
+      margin-left: auto;
+    }
+  }
 }
 </style>
diff --git a/src/views/sales/salesDetails/DetailSpecification.vue b/src/views/sales/salesDetails/DetailSpecification.vue
new file mode 100644
index 0000000..1ed67b2
--- /dev/null
+++ b/src/views/sales/salesDetails/DetailSpecification.vue
@@ -0,0 +1,638 @@
+<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="top">
+          <ul>
+            <li v-for="(item, i) in topList" :key="i">
+              <div class="left1">
+                <div class="content-title">{{ item.left1Str + "锛�" }}</div>
+                <div class="content-data">{{ item.left1Value }}</div>
+              </div>
+              <div class="left2">
+                <div class="content-title">{{ item.left2Str + "锛�" }}</div>
+                <div class="content-data">{{ item.left2Value }}</div>
+              </div>
+              <div class="right1">
+                <div class="content-title">{{ item.right1Str + "锛�" }}</div>
+                <div class="content-data">{{ item.right1Value }}</div>
+              </div>
+              <div class="right2">
+                <div class="content-title">{{ item.right2Str + "锛�" }}</div>
+                <div class="content-data">{{ item.right2Value }}</div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <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="invoice"></el-tab-pane>
+            <el-tab-pane label="閿�鍞��璐у崟" name="return"> </el-tab-pane>
+            <el-tab-pane label="鏈嶅姟鍚堝悓" name="serviceContract"></el-tab-pane>
+            <el-tab-pane label="閿�鍞��娆惧崟" name="refundForm"></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('delivery')">
+              <i v-if="isDeliveryExpand" 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="isDeliveryExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in deliveryInfoList" :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.termsConditions" :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 === 'invoice'" class="second">
+          <!-- <FollowupRecords :isDetail="true" /> -->
+        </div>
+        <div v-if="activeName === 'return'" class="second">
+          <SalesReturn :isDetail="true" />
+        </div>
+        <div v-if="activeName === 'serviceContract'" class="second">
+          <ServiceContract :isDetail="true" />
+        </div>
+        <div v-if="activeName === 'refundForm'" class="second">
+          <RefundForm :isDetail="true" />
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import SalesReturn from "@/views/sales/salesReturn"
+import ServiceContract from "@/views/service/serviceContract"
+import RefundForm from "@/views/sales/refundForm"
+import Status from "@/common/const/salesFixedStatus"
+import CommonFormTableView from "@/components/makepager/CommonFormTableView"
+export default {
+  name: "DetailSpecification",
+  props: {
+    specificationDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { SalesReturn, ServiceContract, RefundForm, CommonFormTableView },
+  computed: {},
+  data() {
+    return {
+      Status: Status,
+      detailConfig: this.specificationDetail,
+      activeName: "first",
+      topList: [],
+      isLabelExpand: true, // 鏍囩
+      isBasicExpand: true, // 鍩烘湰淇℃伅
+      basicInfoList: [],
+      isDynamicExpand: true, // 鍔ㄦ�佷俊鎭�
+      dynamicInfoList: [],
+      isDeliveryExpand: true, // 鏀惰揣淇℃伅
+      deliveryInfoList: [],
+      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.topList = [
+        {
+          left1Str: "瀹㈡埛鍚嶇О",
+          left1Value: "",
+          left2Str: "鍚堣",
+          left2Value: "",
+          right1Str: "宸叉敹閲戦",
+          right1Value: "0.00",
+          right2Str: "宸插紑绁ㄩ噾棰�",
+          right2Value: "0.00"
+        },
+        {
+          left1Str: "绛剧害鏃ユ湡",
+          left1Value: "",
+          left2Str: "閿�鍞礋璐ｄ汉",
+          left2Value: "",
+          right1Str: "搴旀敹閲戦",
+          right1Value: "0.00",
+          right2Str: "鏈紑绁ㄩ噾棰�",
+          right2Value: "0.00"
+        }
+      ]
+      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: ""
+        }
+      ]
+      this.deliveryInfoList = [
+        {
+          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;
+      .top {
+        height: 84px;
+        // line-height: 42px;
+        margin-bottom: 10px;
+        text-align: center;
+        font-size: 14px;
+        color: #555;
+        background-color: #fff;
+        li {
+          display: flex;
+          .left1,
+          .left2,
+          .right1,
+          .right2 {
+            width: 25%;
+            display: flex;
+            align-items: center;
+            height: 40px;
+            .content-title {
+              width: 150px;
+              text-align: right;
+            }
+            .content-data {
+              text-align: left;
+              margin-left: 25px;
+            }
+          }
+        }
+      }
+      .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/sales/salesDetails/index.vue b/src/views/sales/salesDetails/index.vue
index 52c6d40..b318dad 100644
--- a/src/views/sales/salesDetails/index.vue
+++ b/src/views/sales/salesDetails/index.vue
@@ -15,7 +15,14 @@
         <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
       </div>
     </div>
-    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList" :select-box="!isDetail">
+    <TableCommonView
+      ref="tableListRef"
+      :show-summary="showSummary"
+      :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 +34,10 @@
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫 -->
     <AddSalesDetailsDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 閿�鍞槑缁嗚鎯� -->
+    <DetailSpecification v-if="specificationDetail.visible" :specification-detail="specificationDetail" />
+    <!-- 瀹㈡埛璇︽儏 -->
+    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
   </div>
 </template>
 
@@ -34,6 +45,7 @@
 import AddSalesDetailsDialog from "@/views/sales/salesDetails/AddSalesDetailsDialog"
 import { getSalesDetailsList, getDelSalesDetails } from "@/api/sales/salesDetails"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailSpecification from "@/views/sales/salesDetails/DetailSpecification"
 
 export default {
   name: "SalesDetails",
@@ -45,7 +57,9 @@
   },
   mixins: [pageMixin],
   components: {
-    AddSalesDetailsDialog
+    AddSalesDetailsDialog,
+    DetailSpecification,
+    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
   },
   computed: {
     searchCommonHeight() {
@@ -91,6 +105,14 @@
           "priceTax"
         ],
         mergeNumber: 6
+      },
+      specificationDetail: {
+        visible: false,
+        infomation: {}
+      },
+      clientDeail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -103,8 +125,8 @@
       this.tableList = {
         tableInfomation: [],
         tableColumn: [
-          { label: "璁㈠崟缂栧彿", prop: "number" },
-          { label: "瀹㈡埛鍚嶇О", prop: "client_name" },
+          { label: "璁㈠崟缂栧彿", prop: "number", isCommonClick: true },
+          { label: "瀹㈡埛鍚嶇О", prop: "client_name", isClientClick: true },
           { label: "绛剧害鏃ユ湡", prop: "signTime", isTime: true, width: 150 },
           { label: "閿�鍞礋璐ｄ汉", prop: "memberId" },
           { label: "鍑哄簱鐘舵��", prop: "outboundStatus" },
@@ -195,6 +217,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.specificationDetail.visible = true
+      this.specificationDetail.infomation = { ...row }
     }
   }
 }
diff --git a/src/views/sales/salesOpportunity/DetailAdvanceDialog.vue b/src/views/sales/salesOpportunity/DetailAdvanceDialog.vue
new file mode 100644
index 0000000..c4aa32d
--- /dev/null
+++ b/src/views/sales/salesOpportunity/DetailAdvanceDialog.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="advance">
+    <el-dialog
+      :title="'鎺ㄨ繘'"
+      append-to-body
+      :visible.sync="commonConfig.visible"
+      :width="dialogWidth"
+      :before-close="handleClose"
+      custom-class="advance-dialog"
+    >
+      <div class="content">
+        <el-radio-group v-model="radio">
+          <div class="one">
+            <el-radio :label="1">
+              <span>鎺ㄨ繘鍒颁笅涓�闃舵</span>
+              <el-select v-model="value" size="mini" disabled>
+                <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item"> </el-option>
+              </el-select>
+            </el-radio>
+          </div>
+          <div class="two">
+            <el-radio :label="2">
+              <span>鎺ㄨ繘鍒版寚瀹氶樁娈�</span>
+              <el-select v-model="value" size="mini">
+                <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item"> </el-option>
+              </el-select>
+            </el-radio>
+          </div>
+        </el-radio-group>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="saveClick('form')">鎺ㄨ繘</el-button>
+        <el-button size="small" @click="commonConfig.visible = false">鍙栨秷</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DetailAdvanceDialog",
+  props: {
+    advanceConfig: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          active: "闇�姹傚垎鏋�"
+        }
+      }
+    }
+  },
+  components: {},
+  computed: {},
+  data() {
+    return {
+      allOptions: ["鍒濇湡娌熼��", "闇�姹傚垎鏋�", "鏂规鎶ヤ环", "鍟嗗姟璋堝垽", "鎴愬姛缁撴", "澶辫触缁撴"],
+      dialogWidth: "25%",
+      radio: 1,
+      commonConfig: this.advanceConfig,
+      value: "",
+      options: ["鍒濇湡娌熼��", "闇�姹傚垎鏋�", "鏂规鎶ヤ环", "鍟嗗姟璋堝垽", "鎴愬姛缁撴", "澶辫触缁撴"]
+    }
+  },
+  watch: {},
+  created() {
+    this.setData()
+  },
+  methods: {
+    setData() {
+      console.log(this.commonConfig.active)
+      this.allOptions.map((item, index) => {
+        if (item === this.commonConfig.active) {
+          console.log(index)
+          this.value = this.allOptions[index + 1]
+          this.options.splice(index, 1)
+        }
+      })
+    },
+    handleClose() {
+      this.commonConfig.visible = false
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+::v-deep {
+  .advance-dialog .el-dialog__body {
+    padding: 10px 20px;
+    .content {
+      .el-select {
+        margin-left: 10px;
+      }
+      .two {
+        margin-top: 15px;
+      }
+    }
+    .dialog-footer {
+      background-color: #f5f5f5;
+      height: 55px;
+      line-height: 55px;
+    }
+  }
+}
+</style>
diff --git a/src/views/sales/salesOpportunity/DetailOpportunity.vue b/src/views/sales/salesOpportunity/DetailOpportunity.vue
new file mode 100644
index 0000000..cd2476c
--- /dev/null
+++ b/src/views/sales/salesOpportunity/DetailOpportunity.vue
@@ -0,0 +1,683 @@
+<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.name }}</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="second">
+              <!-- <template slot="label">
+                <div>璺熻繘璁板綍<el-badge type="primary" :value="2"> </el-badge></div>
+              </template> -->
+            </el-tab-pane>
+            <el-tab-pane label="鏀舵棰勬祴" name="collectionForecast"></el-tab-pane>
+            <el-tab-pane label="鎶ヤ环鍗�" name="quotation"></el-tab-pane>
+            <el-tab-pane label="閿�鍞槑缁嗗崟" name="detail"></el-tab-pane>
+            <el-tab-pane label="鏈嶅姟鍚堝悓" name="serviceContract"></el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-if="activeName === 'first'" class="detail">
+          <!-- 杩涘害杩借釜 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('schdule')">
+              <i v-if="isSchduleExpand" 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="isSchduleExpand" class="basic-info-content">
+              <div class="step-view">
+                <el-steps :active="active" align-center>
+                  <el-step :active-color="'#fff'" :title="item.title" :key="index" v-for="(item, index) in stepsList">
+                    <template slot="title">
+                      <div class="step-title-view">
+                        <div class="step-label">{{ item.title }}</div>
+                        <div v-show="index === active" class="step-btn" @click="advanceClick(item)">鎺ㄨ繘</div>
+                        <div class="step-desc">{{ item.desc }}</div>
+                      </div>
+                    </template>
+                  </el-step>
+                </el-steps>
+              </div>
+            </div>
+          </div>
+          <!-- 鏈轰細鍩烘湰淇℃伅 -->
+          <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('forecast')">
+              <i v-if="isForecastExpand" 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="isForecastExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in forecastList" :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('business')">
+              <i v-if="isBusinessExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">鍟嗘満涓冭绱�(5W2P)</span>
+            </div>
+            <div v-show="isBusinessExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in businessInfoList" :key="i">
+                  <div class="all">
+                    <div class="content-title">{{ item.leftStr + "锛�" }}</div>
+                    <div class="content-data">{{ item.leftValue }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!-- SWOT鍒嗘瀽 -->
+          <div class="basic-info">
+            <div class="basic-info-label" @click="expandClick('swot')">
+              <i v-if="isSwotExpand" class="el-icon-arrow-down"></i>
+              <i v-else class="el-icon-arrow-up"></i>
+              <span style="margin-left: 10px">SWOT鍒嗘瀽</span>
+            </div>
+            <div v-show="isSwotExpand" class="basic-info-content">
+              <ul>
+                <li v-for="(item, i) in swotInfoList" :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 v-for="(item, i) in addressInfoList" :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 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">
+              <ul>
+                <li v-for="(item, i) in historyList" :key="i">
+                  <div class="left remark history">
+                    <div class="content-title">{{ "鏃ユ湡锛�" + "2023-08-04 13:33:36" }}</div>
+                    <div class="content-data">{{ "閿�鍞樁娈碉細" + "鎴愬姛缁撴" }}</div>
+                    <div class="content-data">{{ "淇敼浜猴細" + "绯荤粺绠＄悊鍛�" }}</div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <div v-if="activeName === 'second'" class="second">
+          <FollowupRecords :isDetail="true" />
+        </div>
+        <div v-if="activeName === 'collectionForecast'" class="second">
+          <!-- <SalesOpportunity :isDetail="true" /> -->
+        </div>
+        <div v-if="activeName === 'quotation'" class="second">
+          <Quotation :isDetail="true" />
+        </div>
+        <div v-if="activeName === 'detail'" class="second">
+          <SalesDetails :isDetail="true" />
+        </div>
+        <div v-if="activeName === 'serviceContract'" class="second">
+          <ServiceContract :isDetail="true" />
+        </div>
+      </div>
+      <!-- 鎺ㄨ繘 -->
+      <DetailAdvanceDialog v-if="advanceConfig.visible" :advance-config="advanceConfig" />
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import FollowupRecords from "@/views/client/followupRecords"
+import Quotation from "@/views/sales/quotation"
+import SalesDetails from "@/views/sales/salesDetails"
+import ServiceContract from "@/views/service/serviceContract"
+import DetailAdvanceDialog from "@/views/sales/salesOpportunity/DetailAdvanceDialog"
+export default {
+  name: "DetailClientManage",
+  props: {
+    opportunityDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { FollowupRecords, Quotation, SalesDetails, DetailAdvanceDialog, ServiceContract },
+  computed: {},
+  data() {
+    return {
+      detailConfig: this.opportunityDetail,
+      activeName: "first",
+      isSchduleExpand: true, // 杩涘害杩借釜
+      stepsList: [
+        { title: "鍒濇湡娌熼��", desc: "鍋滅暀: 1鏈�8澶�20灏忔椂" },
+        { title: "闇�姹傚垎鏋�", desc: "" },
+        { title: "鏂规鎶ヤ环", desc: "" },
+        { title: "鍟嗗姟璋堝垽", desc: "" },
+        { title: "鎴愬姛缁撴", desc: "" },
+        { title: "澶辫触缁撴", desc: "" }
+      ],
+      isBasicExpand: true, // 鍩烘湰淇℃伅灞曞紑
+      basicInfoList: [],
+      isForecastExpand: true, // 閿�鍞娴�
+      forecastList: [],
+      isDynamicExpand: true, // 鍔ㄦ�佷俊鎭�
+      dynamicInfoList: [],
+      isBusinessExpand: true, // 鍟嗘満涓冭绱�
+      businessInfoList: [],
+      isSwotExpand: true, // SWOT鍒嗘瀽
+      swotInfoList: [],
+      isAddressExpand: true, // 鍦板潃淇℃伅
+      addressInfoList: [],
+      isRemarkExpand: true, // 澶囨敞淇℃伅
+      isAnnexExpand: true, // 闄勪欢淇℃伅
+      isHistoryExpand: true, // 鎺ㄨ繘鍘嗗彶
+      historyList: [],
+      active: 2,
+      advanceConfig: {
+        visible: false,
+        active: ""
+      }
+    }
+  },
+  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.forecastList = [
+        {
+          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: ""
+        }
+      ]
+      this.businessInfoList = [
+        {
+          leftStr: "瀹㈡埛闇�姹傛垨鐥涚偣锛坵hy锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "鏄惁宸茬粡绔嬮」锛坧lan锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "璧勯噾棰勭畻鏄灏戯紙plan锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "鍏抽敭鍐崇瓥浜烘槸璋侊紙who锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "鍏抽敭鍐崇瓥鍥犵礌鏈夊摢浜涳紙what锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "鍐崇瓥娴佺▼鏄�庢牱鐨勶紙what锛�",
+          leftValue: ""
+        },
+        {
+          leftStr: "绔炰簤瀵规墜鎻愪緵鐨勬柟妗堬紙what锛�",
+          leftValue: ""
+        }
+      ]
+      this.swotInfoList = [
+        {
+          leftStr: "浼樺娍(S)",
+          leftValue: "",
+          rightStr: "鍔ｅ娍(W)",
+          rightValue: ""
+        },
+        {
+          leftStr: "鏈轰細(O)",
+          leftValue: "",
+          rightStr: "濞佽儊(T)",
+          rightValue: ""
+        }
+      ]
+      this.addressInfoList = [
+        {
+          leftStr: "鍥藉",
+          leftValue: "",
+          rightStr: "鐪佷唤",
+          rightValue: ""
+        },
+        {
+          leftStr: "鍩庡競",
+          leftValue: "",
+          rightStr: "鍖哄煙",
+          rightValue: ""
+        },
+        {
+          leftStr: "璇︾粏鍦板潃",
+          leftValue: "",
+          rightStr: "",
+          rightValue: ""
+        }
+      ]
+      this.historyList = [
+        {
+          date: "2023-08-04 13:22:36",
+          stage: "鎴愬姛缁撴",
+          modify: "绯荤粺绠＄悊鍛�"
+        },
+        {
+          date: "2023-08-04 13:22:36",
+          stage: "鎴愬姛缁撴",
+          modify: "绯荤粺绠＄悊鍛�"
+        }
+      ]
+    },
+    handleClose() {
+      this.detailConfig.visible = false
+    },
+    // tab鍒囨崲
+    tabsClick(tab, event) {
+      console.log(tab, event)
+    },
+    // 灞曞紑鏀惰捣鐐瑰嚮浜嬩欢
+    expandClick(value) {
+      console.log(value)
+      if (value === "schdule") {
+        this.isSchduleExpand = !this.isSchduleExpand
+      } else if (value === "basic") {
+        this.isBasicExpand = !this.isBasicExpand
+      } else if (value === "forecast") {
+        this.isForecastExpand = !this.isForecastExpand
+      } else if (value === "dynamic") {
+        this.isDynamicExpand = !this.isDynamicExpand
+      } else if (value === "business") {
+        this.isBusinessExpand = !this.isBusinessExpand
+      } else if (value === "swot") {
+        this.isSwotExpand = !this.isSwotExpand
+      } else if (value === "address") {
+        this.isAddressExpand = !this.isAddressExpand
+      } else if (value === "remark") {
+        this.isRemarkExpand = !this.isRemarkExpand
+      } else if (value === "annex") {
+        this.isAnnexExpand = !this.isAnnexExpand
+      } else if (value === "history") {
+        this.isHistoryExpand = !this.isHistoryExpand
+      }
+    },
+    // 鎺ㄨ繘
+    advanceClick(item) {
+      console.log(item)
+      this.advanceConfig.visible = true
+      this.advanceConfig.active = item.title
+    }
+  }
+}
+</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;
+              }
+            }
+          }
+        }
+      }
+      .second {
+        background: #fff;
+        .followup-records {
+          .table-view {
+            margin-top: 0 !important;
+            margin-bottom: 0;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/sales/salesOpportunity/index.vue b/src/views/sales/salesOpportunity/index.vue
index 7885fd1..b9071f5 100644
--- a/src/views/sales/salesOpportunity/index.vue
+++ b/src/views/sales/salesOpportunity/index.vue
@@ -20,7 +20,13 @@
         <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
       </div>
     </div>
-    <TableCommonView ref="tableListRef" :table-list="tableList">
+    <TableCommonView
+      ref="tableListRef"
+      :table-list="tableList"
+      @selClientClick="selClientClick"
+      @selContactsClick="selContactsClick"
+      @selCommonClick="selCommonClick"
+    >
       <template slot="tableButton">
         <el-table-column label="鎿嶄綔" width="120">
           <template slot-scope="scope">
@@ -33,6 +39,12 @@
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫 -->
     <AddSalesOpportunityDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 鏈轰細璇︽儏 -->
+    <DetailOpportunity v-if="opportunityDeail.visible" :opportunity-detail="opportunityDeail" />
+    <!-- 瀹㈡埛璇︽儏 -->
+    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
+    <!-- 鑱旂郴浜鸿鎯� -->
+    <DetailContacts v-if="contactsDeail.visible" :contacts-detail="contactsDeail" />
   </div>
 </template>
 
@@ -40,6 +52,7 @@
 import AddSalesOpportunityDialog from "@/views/sales/salesOpportunity/AddSalesOpportunityDialog"
 import { getSaleChanceList, getDelSaleChance } from "@/api/sales/salesOpportunity"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailOpportunity from "@/views/sales/salesOpportunity/DetailOpportunity"
 
 export default {
   name: "SalesOpportunity",
@@ -51,7 +64,10 @@
   },
   mixins: [pageMixin],
   components: {
-    AddSalesOpportunityDialog
+    AddSalesOpportunityDialog,
+    DetailOpportunity,
+    DetailContacts: () => import("@/views/client/contacts/DetailContacts"),
+    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
   },
   computed: {
     searchCommonHeight() {
@@ -91,6 +107,18 @@
         visible: false,
         title: "鏂板缓",
         infomation: {}
+      },
+      opportunityDeail: {
+        visible: false,
+        infomation: {}
+      },
+      contactsDeail: {
+        visible: false,
+        infomation: {}
+      },
+      clientDeail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -103,10 +131,10 @@
       this.tableList = {
         tableInfomation: [],
         tableColumn: [
-          { label: "鏈轰細鍚嶇О", prop: "name", min: 120 }, // 鏈轰細鍚嶇О
-          { label: "瀹㈡埛鍚嶇О", prop: "client_name", min: 90 }, // 瀹㈡埛鍚嶇О
+          { label: "鏈轰細鍚嶇О", prop: "name", min: 120, isCommonClick: true }, // 鏈轰細鍚嶇О
+          { label: "瀹㈡埛鍚嶇О", prop: "client_name", min: 90, isClientClick: true }, // 瀹㈡埛鍚嶇О
           { label: "閿�鍞満浼氱紪鍙�", prop: "number" }, // 閿�鍞満浼氱紪鍙�
-          { label: "鑱旂郴浜哄鍚�", prop: "contact_name", min: 100 }, // 鑱旂郴浜哄鍚�
+          { label: "鑱旂郴浜哄鍚�", prop: "contact_name", min: 100, isContactClick: true }, // 鑱旂郴浜哄鍚�
           { label: "閿�鍞樁娈�", prop: "sale_stage_id" }, // 閿�鍞樁娈�
           { label: "鍙兘鎬�(%)", prop: "possibilities_id" }, // 鍙兘鎬�
           { label: "棰勮鎴愪氦鏃ユ湡", prop: "expected_time", isTime: true, min: 130 }, // 棰勮鎴愪氦鏃ユ湡
@@ -191,6 +219,24 @@
     },
     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.opportunityDeail.visible = true
+      this.opportunityDeail.infomation = { ...row }
     }
   }
 }
diff --git a/src/views/sales/salesReturn/DetailReturn.vue b/src/views/sales/salesReturn/DetailReturn.vue
new file mode 100644
index 0000000..a678fda
--- /dev/null
+++ b/src/views/sales/salesReturn/DetailReturn.vue
@@ -0,0 +1,460 @@
+<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="refundForm">
+              <!-- <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('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 === 'refundForm'" class="second">
+          <RefundForm :isDetail="true" />
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import RefundForm from "@/views/sales/refundForm"
+import CommonFormTableView from "@/components/makepager/CommonFormTableView"
+export default {
+  name: "DetailSpecification",
+  props: {
+    returnDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { RefundForm, CommonFormTableView },
+  computed: {},
+  data() {
+    return {
+      detailConfig: this.returnDetail,
+      activeName: "first",
+      isBasicExpand: true, // 鍩烘湰淇℃伅
+      basicInfoList: [],
+      isDynamicExpand: true, // 鍔ㄦ�佷俊鎭�
+      dynamicInfoList: [],
+      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: ""
+        }
+      ]
+      this.dynamicInfoList = [
+        {
+          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 === "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/sales/salesReturn/index.vue b/src/views/sales/salesReturn/index.vue
index 87060d6..32c0634 100644
--- a/src/views/sales/salesReturn/index.vue
+++ b/src/views/sales/salesReturn/index.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="sales-return">
-    <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,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">
@@ -23,6 +33,10 @@
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫 -->
     <AddSalesReturnDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 閿�鍞��璐у崟璇︽儏 -->
+    <DetailReturn v-if="returnDetail.visible" :return-detail="returnDetail" />
+    <!-- 瀹㈡埛璇︽儏 -->
+    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
   </div>
 </template>
 
@@ -30,13 +44,21 @@
 import AddSalesReturnDialog from "@/views/sales/salesReturn/AddSalesReturnDialog"
 import { getSalesReturnList, getDelSalesReturn } from "@/api/sales/salesReturn"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailReturn from "@/views/sales/salesReturn/DetailReturn"
 
 export default {
   name: "SalesReturn",
-  props: {},
+  props: {
+    isDetail: {
+      type: Boolean,
+      default: false
+    }
+  },
   mixins: [pageMixin],
   components: {
-    AddSalesReturnDialog
+    AddSalesReturnDialog,
+    DetailReturn,
+    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
   },
   computed: {
     searchCommonHeight() {
@@ -68,6 +90,14 @@
         visible: false,
         title: "鏂板缓",
         infomation: {}
+      },
+      returnDetail: {
+        visible: false,
+        infomation: {}
+      },
+      clientDeail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -80,8 +110,8 @@
       this.tableList = {
         tableInfomation: [],
         tableColumn: [
-          { label: "閿�鍞��璐у崟缂栧彿", prop: "number", min: 120 },
-          { label: "瀹㈡埛鍚嶇О", prop: "clientId", min: 90 },
+          { label: "閿�鍞��璐у崟缂栧彿", prop: "number", min: 120, isCommonClick: true },
+          { label: "瀹㈡埛鍚嶇О", prop: "clientId", min: 90, isClientClick: true },
           { label: "閫�璐ф棩鏈�", prop: "returnDate", isTime: true, min: 130 },
           { label: "鐘舵��", prop: "status" },
           { label: "閫�鍏ヤ粨搴�", prop: "repository" },
@@ -165,6 +195,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.returnDetail.visible = true
+      this.returnDetail.infomation = { ...row }
     }
   }
 }
@@ -182,5 +224,11 @@
       }
     }
   }
+  .detail-top {
+    display: flex;
+    .page {
+      margin-left: auto;
+    }
+  }
 }
 </style>
diff --git a/src/views/sales/subOrder/DetailSubOrder.vue b/src/views/sales/subOrder/DetailSubOrder.vue
new file mode 100644
index 0000000..4fd0fbe
--- /dev/null
+++ b/src/views/sales/subOrder/DetailSubOrder.vue
@@ -0,0 +1,414 @@
+<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="detail">
+              <!-- <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('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 === 'detail'" class="second">
+          <SalesDetails :isDetail="true" />
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import SalesDetails from "@/views/sales/salesDetails"
+import CommonFormTableView from "@/components/makepager/CommonFormTableView"
+export default {
+  name: "DetailSubOrder",
+  props: {
+    subOrderDetail: {
+      type: Object,
+      default: () => {
+        return {
+          visible: false,
+          infomation: {}
+        }
+      }
+    }
+  },
+  components: { SalesDetails, CommonFormTableView },
+  computed: {},
+  data() {
+    return {
+      detailConfig: this.subOrderDetail,
+      activeName: "first",
+      isBasicExpand: true, // 鍩烘湰淇℃伅
+      basicInfoList: [],
+      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: ""
+        }
+      ]
+    },
+    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
+      } 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;
+      .top {
+        height: 42px;
+        line-height: 42px;
+        margin-bottom: 10px;
+        text-align: center;
+        font-size: 14px;
+        color: #555;
+        background-color: #fff;
+      }
+      .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/sales/subOrder/index.vue b/src/views/sales/subOrder/index.vue
index 54c3e39..44eff2f 100644
--- a/src/views/sales/subOrder/index.vue
+++ b/src/views/sales/subOrder/index.vue
@@ -15,7 +15,15 @@
         <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
       </div>
     </div>
-    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList" :select-box="!isDetail">
+    <TableCommonView
+      ref="tableListRef"
+      :show-summary="showSummary"
+      :table-list="tableList"
+      :select-box="!isDetail"
+      @selClientClick="selClientClick"
+      @selMasterClick="selMasterClick"
+      @selCommonClick="selCommonClick"
+    >
       <template slot="tableButton">
         <el-table-column label="鎿嶄綔" width="90">
           <template slot-scope="scope">
@@ -27,6 +35,12 @@
     </TableCommonView>
     <!-- 鏂板缓/缂栬緫 -->
     <AddSubOrderDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
+    <!-- 閿�鍞瓙鍗曡鎯� -->
+    <DetailSubOrder v-if="subOrderDeail.visible" :sub-order-detail="subOrderDeail" />
+    <!-- 瀹㈡埛璇︽儏 -->
+    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
+    <!-- 閿�鍞�诲崟璇︽儏 -->
+    <DetailMasterOrder v-if="masterDeail.visible" :master-order-detail="masterDeail" />
   </div>
 </template>
 
@@ -34,6 +48,7 @@
 import AddSubOrderDialog from "@/views/sales/subOrder/AddSubOrderDialog"
 import { getSubOrderList, getDelSubOrder } from "@/api/sales/subOrder"
 import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
+import DetailSubOrder from "@/views/sales/subOrder/DetailSubOrder"
 
 export default {
   name: "SubOrder",
@@ -45,7 +60,10 @@
   },
   mixins: [pageMixin],
   components: {
-    AddSubOrderDialog
+    AddSubOrderDialog,
+    DetailSubOrder,
+    DetailMasterOrder: () => import("@/views/sales/masterOrder/DetailMasterOrder"),
+    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
   },
   computed: {
     searchCommonHeight() {
@@ -83,6 +101,18 @@
         show: true,
         sumProp: ["number"],
         mergeNumber: 7
+      },
+      subOrderDeail: {
+        visible: false,
+        infomation: {}
+      },
+      masterDeail: {
+        visible: false,
+        infomation: {}
+      },
+      clientDeail: {
+        visible: false,
+        infomation: {}
       }
     }
   },
@@ -95,9 +125,9 @@
       this.tableList = {
         tableInfomation: [],
         tableColumn: [
-          { label: "鍗曟嵁缂栧彿", prop: "number", min: 120 }, // 鍗曟嵁缂栧彿
-          { label: "瀹㈡埛鍚嶇О", prop: "client_name", min: 120 }, // 瀹㈡埛鍚嶇О
-          { label: "閿�鍞�诲崟", prop: "masterOrderId", min: 90 }, // 閿�鍞�诲崟
+          { label: "鍗曟嵁缂栧彿", prop: "number", min: 120, isCommonClick: true }, // 鍗曟嵁缂栧彿
+          { label: "瀹㈡埛鍚嶇О", prop: "client_name", min: 120, isClientClick: true }, // 瀹㈡埛鍚嶇О
+          { label: "閿�鍞�诲崟", prop: "masterOrderId", min: 90, isMasterClick: true }, // 閿�鍞�诲崟
           { label: "璐熻矗浜�", prop: "memberId" }, // 璐熻矗浜�
           { label: "瀹℃壒鐘舵��", prop: "approvalStatus" }, // 瀹℃壒鐘舵��
           { label: "浜у搧鍚嶇О", prop: "productName" }, // 浜у搧鍚嶇О
@@ -179,6 +209,24 @@
     },
     getSelectArray(val) {
       console.log(val)
+    },
+    // 瀹㈡埛鍚嶇О璇︽儏
+    selClientClick(row) {
+      console.log(row)
+      this.clientDeail.visible = true
+      this.clientDeail.infomation = { ...row, client_name: row.name }
+    },
+    // 閿�鍞�诲崟璇︽儏
+    selMasterClick(row) {
+      console.log(row)
+      this.masterDeail.visible = true
+      this.masterDeail.infomation = { ...row, number: row.masterOrderId }
+    },
+    // 閿�鍞瓙鍗曡鎯�
+    selCommonClick(row) {
+      console.log(row)
+      this.subOrderDeail.visible = true
+      this.subOrderDeail.infomation = { ...row }
     }
   }
 }

--
Gitblit v1.8.0