销售模块详情页

yangfeng

2023-08-05 ba814d605ad50da217a3dd422bcc7db5360b092f

销售模块详情页

 src/common/const/salesFixedStatus.js

New file
@@ -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

 src/components/makepager/CommonFormTableView.vue

@@ -24,6 +24,7 @@
          </template>
          <!-- column样式 -->
          <template slot-scope="scope">
            <template v-if="!detailEnter">
            <el-form-item
              v-if="item.input"
              label=" "
@@ -44,10 +45,12 @@
            </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: () => {

 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)
    }
  }
}

 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;
                }

 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;
                }

 src/views/sales/contractManage/DetailContractManage.vue

New file
@@ -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>

 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 }
    }
  }
}

 src/views/sales/masterOrder/DetailMasterOrder.vue

New file
@@ -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>

 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 }
    }
  }
}

 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>

 src/views/sales/quotation/DetailQuotation.vue

New file
@@ -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: "客户需求或痛点（why）",
          leftValue: ""
        },
        {
          leftStr: "是否已经立项（plan）",
          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>

 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 }
    }
  }
}

 src/views/sales/refundForm/DetailRefundForm.vue

New file
@@ -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>

 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>

 src/views/sales/salesDetails/DetailSpecification.vue

New file
@@ -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>

 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 }
    }
  }
}

 src/views/sales/salesOpportunity/DetailAdvanceDialog.vue

New file
@@ -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>

 src/views/sales/salesOpportunity/DetailOpportunity.vue

New file
@@ -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: "客户需求或痛点（why）",
          leftValue: ""
        },
        {
          leftStr: "是否已经立项（plan）",
          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>

 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 }
    }
  }
}

 src/views/sales/salesReturn/DetailReturn.vue

New file
@@ -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>

 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>

 src/views/sales/subOrder/DetailSubOrder.vue

New file
@@ -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>

 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 }
    }
  }
}