服务管理模块详情页

yangfeng

2023-08-07 a2586ce70485035d77746ff9c18364f408f4c6aa

服务管理模块详情页

 src/common/const/salesFixedStatus.js

@@ -13,6 +13,11 @@
    "11、解决合同纠纷的方式：执行本合同发生争议，由当事人双方协商解决。协商不成，双方同意提交有关仲裁委员会仲裁，双方事后没有达成仲裁协议的，可向人民法院起诉",
    "12、本报价自双方签字盖章起生效。（传真件有效）",
    "13、其他约定事项：未尽事宜，双方友好协商解决"
  ],
  serviceContract: [
    "1、服务费支付方式：阶段 付款比例 备注",
    "2、甲方逾期付款的，每逾期一天，甲方应按逾期余额的千分之一向乙方方支付违约金，同时仍应履行付款义务。逾期15天的，乙方有权解除合同。",
    "3、乙方未按约定的时间完成服务的，每逾期一天，应按合同金额的千分之一向另一方支付违约金，同时仍应尽快履行。逾期超过15天的，甲方有权解除合同。"
  ]
}
export default status

 src/components/layout/components/appsidebar/index.vue

@@ -44,7 +44,7 @@
            <span>服务管理</span>
          </template>
          <el-menu-item index="/service/serviceContract">服务合同</el-menu-item>
          <el-menu-item index="/service/orderManage">客户服务单</el-menu-item>
          <el-menu-item index="/service/clientServiceOrder">客户服务单</el-menu-item>
          <el-menu-item index="/service/serviceFollowup">服务回访单</el-menu-item>
          <!-- <el-menu-item index="/service/serviceFeeManage">服务收费管理</el-menu-item> -->
        </el-submenu>

 src/components/makepager/TableCommonView.vue

@@ -60,6 +60,12 @@
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isServiceOrder && scope.row[item.prop]"
            class="sel-name"
            @click="selServiceOrderClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isCommonClick && scope.row[item.prop]"
            class="sel-name"
            @click="selCommonClick(scope.row)"
@@ -232,6 +238,10 @@
    selMasterClick(row) {
      this.$emit("selMasterClick", row)
    },
    // 客户服务单
    selServiceOrderClick(row) {
      this.$emit("selServiceOrderClick", row)
    },
    // 公共（销售机会、报价单、销售总单、销售子单。。。）
    selCommonClick(row) {
      this.$emit("selCommonClick", row)

 src/router/service/index.js

@@ -1,7 +1,7 @@
// const type from '@/router/deployCode'

const serviceContract = (resolve) => require(["@/views/service/serviceContract/index"], resolve) // 服务合同
const orderManage = (resolve) => require(["@/views/service/orderManage/index"], resolve) // 工单管理
const clientServiceOrder = (resolve) => require(["@/views/service/clientServiceOrder/index"], resolve) // 客户服务单
const serviceFollowup = (resolve) => require(["@/views/service/serviceFollowup/index"], resolve) // 服务回访单
const serviceFeeManage = (resolve) => require(["@/views/service/serviceFeeManage/index"], resolve) // 服务收费管理

@@ -15,9 +15,9 @@
    }
  },
  {
    path: "/service/orderManage",
    name: "orderManage",
    component: orderManage,
    path: "/service/clientServiceOrder",
    name: "clientServiceOrder",
    component: clientServiceOrder,
    meta: {
      title: "客户服务单"
    }

 src/views/client/contacts/AddContactsDialog.vue

@@ -6,6 +6,8 @@
      :width="dialogWidth"
      :before-close="handleClose"
      :close-on-click-modal="false"
      append-to-body
      custom-class="iframe-dialog"
    >
      <el-form
        ref="form"
@@ -439,54 +441,56 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-contacts {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name,
      .common-select {
::v-deep {
  .iframe-dialog .el-dialog__body {
    .basic-info {
      .basic-info-title {
        background-color: #f4f8fe;
        padding-left: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        height: 42px;
        line-height: 42px;
      }
      .basic-info-view {
        margin-top: 10px;
        padding-right: 40px;
        .custom-name,
        .common-select {
          display: flex;
          .common-select-btn {
            margin-left: 5px;
            font-size: 18px;
            cursor: pointer;
          }
        }
        .common-select {
          .common-select-sel {
            width: 270px;
          }
        }
      }
      .annex-view {
        display: flex;
        .common-select-btn {
          margin-left: 5px;
          font-size: 18px;
          cursor: pointer;
        }
      }
      .common-select {
        .common-select-sel {
          width: 270px;
        color: #6166d3;
        .setFormat {
          margin-left: 10px;
        }
      }
    }
    .annex-view {
    .unflod-collapse {
      display: flex;
      height: 30px;
      justify-content: center;
      align-items: center;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
  }
}
</style>

 src/views/sales/generatePlan/DetailGeneratePlan.vue

New file
@@ -0,0 +1,320 @@
<template>
  <div class="detail-view">
    <el-drawer
      :visible.sync="detailConfig.visible"
      size="80%"
      :before-close="handleClose"
      :wrapperClosable="false"
      :append-to-body="true"
    >
      <template slot="title">
        <div class="header">
          <span class="header-label">单据编号</span>
          <span class="header-title">{{ detailConfig.infomation.number }}</span>
        </div>
      </template>
      <div class="content">
        <div class="tab-view">
          <el-tabs v-model="activeName" @tab-click="tabsClick">
            <el-tab-pane label="详情" name="first"></el-tab-pane>
            <el-tab-pane label="附件管理" name="annex">
              <!-- <template slot="label">
                <div>跟进记录<el-badge type="primary" :value="2"> </el-badge></div>
              </template> -->
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="activeName === 'first'" class="detail">
          <!-- 机会基本信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('basic')">
              <i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">机会基本信息</span>
            </div>
            <div v-show="isBasicExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in basicInfoList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 计划相关 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('plan')">
              <i v-if="isPlanExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">计划相关</span>
            </div>
            <div v-show="isPlanExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in planList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 附件信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('annex')">
              <i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">附件信息</span>
            </div>
            <div v-show="isAnnexExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "附件：" }}</div>
                    <div class="content-data">{{ "" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'annex'" class="second">
          <!-- <FollowupRecords :isDetail="true" /> -->
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "DetailGeneratePlan",
  props: {
    planDetail: {
      type: Object,
      default: () => {
        return {
          visible: false,
          infomation: {}
        }
      }
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      detailConfig: this.planDetail,
      activeName: "first",
      isBasicExpand: true, // 基本信息展开
      basicInfoList: [],
      isPlanExpand: true, // 计划相关
      planList: [],
      isAnnexExpand: true // 附件信息
    }
  },
  created() {
    this.setData()
  },
  mounted() {},
  methods: {
    setData() {
      this.basicInfoList = [
        {
          leftStr: "客户名称",
          leftValue: "",
          rightStr: "单据编号",
          rightValue: ""
        },
        {
          leftStr: "负责人",
          leftValue: "",
          rightStr: "创建人",
          rightValue: ""
        },
        {
          leftStr: "创建时间",
          leftValue: "",
          rightStr: "最新更新人",
          rightValue: ""
        },
        {
          leftStr: "更新时间",
          leftValue: "",
          rightStr: "审批状态",
          rightValue: ""
        },
        {
          leftStr: "最新审批时间",
          leftValue: "",
          rightStr: "上一步审批人",
          rightValue: ""
        },
        {
          leftStr: "当前审批人",
          leftValue: "",
          rightStr: "销售子单",
          rightValue: ""
        },
        {
          leftStr: "销售明细单",
          leftValue: "",
          rightStr: "",
          rightValue: ""
        }
      ]
      this.planList = [
        {
          leftStr: "计划开始时间",
          leftValue: "",
          rightStr: "计划截止时间",
          rightValue: ""
        },
        {
          leftStr: "计划内容",
          leftValue: "",
          rightStr: "",
          rightValue: ""
        }
      ]
    },
    handleClose() {
      this.detailConfig.visible = false
    },
    // tab切换
    tabsClick(tab, event) {
      console.log(tab, event)
    },
    // 展开收起点击事件
    expandClick(value) {
      console.log(value)
      if (value === "basic") {
        this.isBasicExpand = !this.isBasicExpand
      } else if (value === "annex") {
        this.isAnnexExpand = !this.isAnnexExpand
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
::v-deep {
  .el-drawer__header {
    padding: 0;
    margin-bottom: 0px;
    .header {
      height: 56px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      .header-label {
        padding: 5px;
        border-radius: 4px;
        background-color: #ff6600;
        color: #fff;
        font-size: 12px;
      }
      .header-title {
        color: #323232;
        font-size: 15px;
        margin-left: 10px;
        font-weight: inherit;
      }
    }
  }
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
  .el-tabs__item.is-active,
  .el-tabs__item:hover,
  .el-tabs__active-bar {
    color: $color-primary;
  }
  .el-tabs__header {
    margin: 0;
  }
  .el-drawer__body {
    .content {
      background-color: rgb(230, 233, 240);
      padding: 8px;
      .tab-view {
        background: #fff;
        .item {
          position: absolute;
          top: 0px;
          right: 0px;
        }
      }
      .detail {
        .basic-info {
          .basic-info-label {
            padding-left: 10px;
            height: 42px;
            line-height: 42px;
            background: #f4f8fe;
            color: #333;
            font-size: 14px;
          }
          .basic-info-content {
            background: #fff;
            ul {
              padding-inline-start: 0;
            }
            li {
              display: flex;
              font-size: 14px;
              font-family: PingFangSC;
              border-bottom: 1px solid #f9f9fb;
              .left,
              .right,
              .all {
                width: 50%;
                display: flex;
                align-items: center;
                height: 40px;
                .content-title {
                  width: 320px;
                  text-align: right;
                  color: #555;
                }
                .content-data {
                  text-align: left;
                  margin-left: 25px;
                  color: #333;
                }
              }
              .all {
                width: 100%;
              }
              .remark {
                width: 100%;
              }
            }
          }
        }
      }
      .second {
        background: #fff;
        .followup-records {
          .table-view {
            margin-top: 0 !important;
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>

 src/views/sales/generatePlan/index.vue

@@ -11,7 +11,7 @@
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
    <TableCommonView ref="tableListRef" :table-list="tableList" @selCommonClick="selCommonClick">
      <template slot="tableButton">
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
@@ -23,6 +23,8 @@
    </TableCommonView>
    <!-- 新建/编辑-->
    <AddGeneratePlanDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
    <!-- 生产计划详情 -->
    <DetailGeneratePlan v-if="planDetail.visible" :plan-detail="planDetail" />
  </div>
</template>

@@ -30,13 +32,15 @@
import AddGeneratePlanDialog from "@/views/sales/generatePlan/AddGeneratePlanDialog"
import { getPlanList, getDelPlan } from "@/api/sales/generatePlan"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import DetailGeneratePlan from "@/views/sales/generatePlan/DetailGeneratePlan"

export default {
  name: "GeneratePlan",
  props: {},
  mixins: [pageMixin],
  components: {
    AddGeneratePlanDialog
    AddGeneratePlanDialog,
    DetailGeneratePlan
  },
  computed: {
    searchCommonHeight() {
@@ -69,6 +73,10 @@
        visible: false,
        title: "新建",
        infomation: {}
      },
      planDetail: {
        visible: false,
        infomation: {}
      }
    }
  },
@@ -81,7 +89,7 @@
      this.tableList = {
        tableInfomation: [],
        tableColumn: [
          { label: "单据编号", prop: "number", min: 120 },
          { label: "单据编号", prop: "number", min: 120, isCommonClick: true },
          { label: "负责人", prop: "memberId", min: 90 },
          { label: "审批状态", prop: "approvalStatus" },
          { label: "创建人", prop: "creator", min: 100 },
@@ -162,6 +170,12 @@
    },
    getSelectArray(val) {
      console.log(val)
    },
    // 合同管理详情
    selCommonClick(row) {
      console.log(row)
      this.planDetail.visible = true
      this.planDetail.infomation = { ...row }
    }
  }
}

 src/views/sales/masterOrder/AddMasterOrderDialog.vue

@@ -5,6 +5,8 @@
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <el-form
        ref="form"
@@ -289,52 +291,54 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-quotation {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name {
::v-deep {
  .iframe-dialog .el-dialog__body {
    .basic-info {
      .basic-info-title {
        background-color: #f4f8fe;
        padding-left: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        height: 42px;
        line-height: 42px;
      }
      .basic-info-view {
        margin-top: 10px;
        padding-right: 40px;
        .custom-name {
          display: flex;
          .common-select-btn {
            margin-left: 5px;
            font-size: 18px;
            cursor: pointer;
          }
        }
      }
      .address-view {
        margin-top: 10px;
        padding-right: 40px;
      }
      .annex-view {
        display: flex;
        .common-select-btn {
          margin-left: 5px;
          font-size: 18px;
          cursor: pointer;
        color: #6166d3;
        .setFormat {
          margin-left: 10px;
        }
      }
    }
    .address-view {
      margin-top: 10px;
      padding-right: 40px;
    }
    .annex-view {
    .unflod-collapse {
      display: flex;
      height: 30px;
      justify-content: center;
      align-items: center;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
  }
}
</style>

 src/views/sales/quotation/AddQuotationDialog.vue

@@ -5,6 +5,8 @@
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <el-form
        ref="form"
@@ -482,52 +484,54 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-quotation {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name,
      .common-select {
::v-deep {
  .iframe-dialog .el-dialog__body {
    .basic-info {
      .basic-info-title {
        background-color: #f4f8fe;
        padding-left: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        height: 42px;
        line-height: 42px;
      }
      .basic-info-view {
        margin-top: 10px;
        padding-right: 40px;
        .custom-name,
        .common-select {
          display: flex;
          .common-select-sel {
            width: 270px;
          }
          .common-select-btn {
            margin-left: 5px;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
      .annex-view {
        display: flex;
        .common-select-sel {
          width: 270px;
        }
        .common-select-btn {
          margin-left: 5px;
          font-size: 16px;
          cursor: pointer;
        color: #6166d3;
        .setFormat {
          margin-left: 10px;
        }
      }
    }
    .annex-view {
    .unflod-collapse {
      display: flex;
      height: 30px;
      justify-content: center;
      align-items: center;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
  }
}
</style>

 src/views/sales/refundForm/AddRefundFormDialog.vue

@@ -5,6 +5,8 @@
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <el-form
        ref="form"
@@ -466,52 +468,54 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-refund-form {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name,
      .common-select {
::v-deep {
  .iframe-dialog .el-dialog__body {
    .basic-info {
      .basic-info-title {
        background-color: #f4f8fe;
        padding-left: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        height: 42px;
        line-height: 42px;
      }
      .basic-info-view {
        margin-top: 10px;
        padding-right: 40px;
        .custom-name,
        .common-select {
          display: flex;
          .common-select-sel {
            width: 270px;
          }
          .common-select-btn {
            margin-left: 5px;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
      .annex-view {
        display: flex;
        .common-select-sel {
          width: 270px;
        }
        .common-select-btn {
          margin-left: 5px;
          font-size: 16px;
          cursor: pointer;
        color: #6166d3;
        .setFormat {
          margin-left: 10px;
        }
      }
    }
    .annex-view {
    .unflod-collapse {
      display: flex;
      height: 30px;
      justify-content: center;
      align-items: center;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
  }
}
</style>

 src/views/sales/salesDetails/AddSalesDetailsDialog.vue

@@ -5,6 +5,8 @@
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <el-form
        ref="form"
@@ -569,52 +571,54 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-sales-details {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name,
      .common-select {
::v-deep {
  .iframe-dialog .el-dialog__body {
    .basic-info {
      .basic-info-title {
        background-color: #f4f8fe;
        padding-left: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        height: 42px;
        line-height: 42px;
      }
      .basic-info-view {
        margin-top: 10px;
        padding-right: 40px;
        .custom-name,
        .common-select {
          display: flex;
          .common-select-sel {
            width: 270px;
          }
          .common-select-btn {
            margin-left: 5px;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
      .annex-view {
        display: flex;
        .common-select-sel {
          width: 270px;
        }
        .common-select-btn {
          margin-left: 5px;
          font-size: 16px;
          cursor: pointer;
        color: #6166d3;
        .setFormat {
          margin-left: 10px;
        }
      }
    }
    .annex-view {
    .unflod-collapse {
      display: flex;
      height: 30px;
      justify-content: center;
      align-items: center;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
  }
}
</style>

 src/views/sales/salesOpportunity/AddSalesOpportunityDialog.vue

@@ -5,6 +5,8 @@
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <el-form
        ref="form"
@@ -760,54 +762,56 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-sales-opportunity {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name,
      .common-select {
::v-deep {
  .iframe-dialog .el-dialog__body {
    .basic-info {
      .basic-info-title {
        background-color: #f4f8fe;
        padding-left: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        height: 42px;
        line-height: 42px;
      }
      .basic-info-view {
        margin-top: 10px;
        padding-right: 40px;
        .custom-name,
        .common-select {
          display: flex;
          .common-select-btn {
            margin-left: 5px;
            font-size: 18px;
            cursor: pointer;
          }
        }
        .common-select {
          .common-select-sel {
            width: 270px;
          }
        }
      }
      .annex-view {
        display: flex;
        .common-select-btn {
          margin-left: 5px;
          font-size: 18px;
          cursor: pointer;
        }
      }
      .common-select {
        .common-select-sel {
          width: 270px;
        color: #6166d3;
        .setFormat {
          margin-left: 10px;
        }
      }
    }
    .annex-view {
    .unflod-collapse {
      display: flex;
      height: 30px;
      justify-content: center;
      align-items: center;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
  }
}
</style>

 src/views/sales/salesReturn/AddSalesReturnDialog.vue

@@ -5,6 +5,8 @@
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <el-form
        ref="form"
@@ -392,52 +394,54 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-sales-return {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name,
      .common-select {
::v-deep {
  .iframe-dialog .el-dialog__body {
    .basic-info {
      .basic-info-title {
        background-color: #f4f8fe;
        padding-left: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        height: 42px;
        line-height: 42px;
      }
      .basic-info-view {
        margin-top: 10px;
        padding-right: 40px;
        .custom-name,
        .common-select {
          display: flex;
          .common-select-sel {
            width: 270px;
          }
          .common-select-btn {
            margin-left: 5px;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
      .annex-view {
        display: flex;
        .common-select-sel {
          width: 270px;
        }
        .common-select-btn {
          margin-left: 5px;
          font-size: 16px;
          cursor: pointer;
        color: #6166d3;
        .setFormat {
          margin-left: 10px;
        }
      }
    }
    .annex-view {
    .unflod-collapse {
      display: flex;
      height: 30px;
      justify-content: center;
      align-items: center;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
  }
}
</style>

 src/views/sales/subOrder/AddSubOrderDialog.vue

@@ -5,6 +5,8 @@
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <el-form
        ref="form"
@@ -481,45 +483,47 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-quotation {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name {
::v-deep {
  .iframe-dialog .el-dialog__body {
    .basic-info {
      .basic-info-title {
        background-color: #f4f8fe;
        padding-left: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        height: 42px;
        line-height: 42px;
      }
      .basic-info-view {
        margin-top: 10px;
        padding-right: 40px;
        .custom-name {
          display: flex;
          .common-select-btn {
            margin-left: 5px;
            font-size: 18px;
            cursor: pointer;
          }
        }
      }
      .address-view {
        margin-top: 10px;
        padding-right: 40px;
      }
      .annex-view {
        display: flex;
        .common-select-btn {
          margin-left: 5px;
          font-size: 18px;
          cursor: pointer;
        color: #6166d3;
        .setFormat {
          margin-left: 10px;
        }
      }
    }
    .address-view {
      margin-top: 10px;
      padding-right: 40px;
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
    .annex-view {
      display: flex;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
  }
}
</style>

 src/views/service/clientServiceOrder/AddCientServiceOrderDialog.vue

File was renamed from src/views/service/orderManage/AddOrderManageDialog.vue
@@ -5,6 +5,8 @@
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <el-form
        ref="form"
@@ -480,7 +482,7 @@
import SelectClientDialog from "@/views/other/commonDialog/SelectClientDialog"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
export default {
  name: "AddOrderManageDialog",
  name: "AddClientServiceOrderDialog",
  mixins: [pageMixin],
  props: {
    editCommonConfig: {
@@ -683,68 +685,70 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.order-manage {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name,
      .common-select {
        display: flex;
        .common-select-sel {
          width: 270px;
        }
        .common-select-btn {
          margin-left: 5px;
          font-size: 16px;
          cursor: pointer;
        }
      }
    }
    .annex-view {
      display: flex;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
::v-deep {
  .iframe-dialog .el-dialog__body {
    .basic-info {
      .basic-info-label {
      .basic-info-title {
        background-color: #f4f8fe;
        padding-left: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        height: 42px;
        line-height: 42px;
        background: #f4f8fe;
        color: #333;
        font-size: 14px;
      }
      .basic-info-content {
        .list {
          .page {
            text-align: right;
            margin-bottom: 5px;
      .basic-info-view {
        margin-top: 10px;
        padding-right: 40px;
        .custom-name,
        .common-select {
          display: flex;
          .common-select-sel {
            width: 270px;
          }
          .common-select-btn {
            margin-left: 5px;
            font-size: 16px;
            cursor: pointer;
          }
        }
        .no-data {
          height: 40px;
          line-height: 40px;
      }
      .annex-view {
        display: flex;
        color: #6166d3;
        .setFormat {
          margin-left: 10px;
        }
      }
      .basic-info {
        .basic-info-label {
          padding-left: 10px;
          height: 42px;
          line-height: 42px;
          background: #f4f8fe;
          color: #333;
          font-size: 14px;
        }
        .basic-info-content {
          .list {
            .page {
              text-align: right;
              margin-bottom: 5px;
            }
          }
          .no-data {
            height: 40px;
            line-height: 40px;
            margin-left: 10px;
          }
        }
      }
    }
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
  }
}
</style>

 src/views/service/clientServiceOrder/DetailClientServiceOrder.vue

New file
@@ -0,0 +1,664 @@
<template>
  <div class="detail-view">
    <el-drawer
      :visible.sync="detailConfig.visible"
      size="80%"
      :before-close="handleClose"
      :wrapperClosable="false"
      :append-to-body="true"
    >
      <template slot="title">
        <div class="header">
          <span class="header-label">服务单编号</span>
          <span class="header-title">{{ detailConfig.infomation.number }}</span>
        </div>
      </template>
      <div class="content">
        <div class="tab-view">
          <el-tabs v-model="activeName" @tab-click="tabsClick">
            <el-tab-pane label="详情" name="first"></el-tab-pane>
            <el-tab-pane label="附件管理" name="annex"></el-tab-pane>
            <el-tab-pane label="服务回访单" name="followup">
              <!-- <template slot="label">
                <div>跟进记录<el-badge type="primary" :value="2"> </el-badge></div>
              </template> -->
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="activeName === 'first'" class="detail">
          <!-- 基本信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('basic')">
              <i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">基本信息</span>
            </div>
            <div v-show="isBasicExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in basicInfoList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 动态信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('dynamic')">
              <i v-if="isDynamicExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">动态信息</span>
            </div>
            <div v-show="isDynamicExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in dynamicInfoList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 时间/金额 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('timeAmount')">
              <i v-if="isTimeAmountExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">时间/金额</span>
            </div>
            <div v-show="isTimeAmountExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in timeAmountList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 定位地址 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('address')">
              <i v-if="isAddressExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">定位地址</span>
            </div>
            <div v-show="isAddressExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "定位：" }}</div>
                    <div class="content-data">{{ "" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 问题描述 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('issue')">
              <i v-if="isIssueExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">问题描述</span>
            </div>
            <div v-show="isIssueExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in issueList" :key="i">
                  <div class="all">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 解决办法 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('solution')">
              <i v-if="isSolutionExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">解决办法</span>
            </div>
            <div v-show="isSolutionExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in solutionList" :key="i">
                  <div class="all">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 备注信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('remark')">
              <i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">备注信息</span>
            </div>
            <div v-show="isRemarkExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "备注：" }}</div>
                    <div class="content-data">{{ "备注内容" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 签到地址信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('signInAddress')">
              <i v-if="isSignInAddressExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">签到地址信息</span>
            </div>
            <div v-show="isSignInAddressExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "签到地址：" }}</div>
                    <div class="content-data">{{ "" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 附件信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('annex')">
              <i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">附件信息</span>
            </div>
            <div v-show="isAnnexExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "附件：" }}</div>
                    <div class="content-data">{{ "" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 签字确认 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('signConfim')">
              <i v-if="isSignConfimExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">签字确认</span>
            </div>
            <div v-show="isSignConfimExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "附件：" }}</div>
                    <div class="content-data">{{ "" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 服务合同信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('serviceContract')">
              <i v-if="isServiceContractExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">服务合同信息</span>
            </div>
            <div v-show="isServiceContractExpand" class="basic-info-content">
              <div class="list" v-if="serviceContractList.length > 0">
                <PagerView class="page" :pager-options="pagerOptions1" v-on="pagerEvents" />
                <TableCommonView
                  ref="tableListRef"
                  :select-box="false"
                  :table-list="serviceContractList"
                ></TableCommonView>
              </div>
              <div class="no-data" v-else>没有找到任何记录</div>
            </div>
          </div>
          <!-- 客户服务单历史记录 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('history')">
              <i v-if="isHistoryExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">客户服务单历史记录</span>
            </div>
            <div v-show="isHistoryExpand" class="basic-info-content">
              <div class="list" v-if="historyList.length > 0">
                <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
                <TableCommonView
                  ref="recordTableListRef"
                  :select-box="false"
                  :table-list="historyList"
                ></TableCommonView>
              </div>
              <div class="no-data" v-else>没有找到任何记录</div>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'annex'" class="second">
          <!-- <Contacts :isDetail="true" /> -->
        </div>
        <div v-if="activeName === 'followup'" class="second">
          <ServiceFollowup :isDetail="true" />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
// import FollowupRecords from "@/views/client/followupRecords"
// import Contacts from "@/views/client/contacts"
import ServiceFollowup from "@/views/service/serviceFollowup"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
export default {
  name: "DetailClientServiceOrder",
  mixins: [pageMixin],
  props: {
    clientServiceDetail: {
      type: Object,
      default: () => {
        return {
          visible: false,
          infomation: {}
        }
      }
    }
  },
  components: { ServiceFollowup },
  computed: {},
  data() {
    return {
      detailConfig: this.clientServiceDetail,
      activeName: "first",
      isBasicExpand: true, // 基本信息展开
      basicInfoList: [],
      isDynamicExpand: true, // 动态信息
      dynamicInfoList: [],
      isTimeAmountExpand: true, // 时间/金额
      timeAmountList: [],
      isAddressExpand: true, // 定位地址
      isIssueExpand: true, // 问题描述
      issueList: [],
      isSolutionExpand: true, // 解决办法
      solutionList: [],
      isRemarkExpand: true, // 备注信息
      isSignInAddressExpand: true, // 签到地址信息
      isAnnexExpand: true, // 附件信息
      isSignConfimExpand: true, // 签字确认
      isServiceContractExpand: true, // 服务合同信息
      serviceContractList: [],
      isHistoryExpand: true, // 客户服务单历史记录
      historyList: []
    }
  },
  created() {
    this.setData()
    this.setTable()
  },
  mounted() {},
  methods: {
    setTable() {
      this.serviceContractList = {
        tableInfomation: [],
        tableColumn: [
          { label: "服务单编号", prop: "number", min: 100 },
          { label: "主题", prop: "name" },
          { label: "服务人员", prop: "clientId", min: 130 },
          { label: "服务方式", prop: "contactName" },
          { label: "产品类别", prop: "name" },
          { label: "产品名称", prop: "orderType" },
          { label: "修改时间", prop: "reportSourceId" }
        ]
      }
    },
    setData() {
      this.basicInfoList = [
        {
          leftStr: "客户名称",
          leftValue: "",
          rightStr: "服务单编号",
          rightValue: ""
        },
        {
          leftStr: "服务合同",
          leftValue: "",
          rightStr: "故障类别",
          rightValue: ""
        },
        {
          leftStr: "主题",
          leftValue: "",
          rightStr: "合同订单",
          rightValue: ""
        },
        {
          leftStr: "产品类别",
          leftValue: "",
          rightStr: "产品名称",
          rightValue: ""
        },
        {
          leftStr: "服务方式",
          leftValue: "",
          rightStr: "服务人员",
          rightValue: ""
        },
        {
          leftStr: "上门地址",
          leftValue: "",
          rightStr: "优先级别",
          rightValue: ""
        },
        {
          leftStr: "预约上门时间",
          leftValue: "",
          rightStr: "销售机会",
          rightValue: ""
        },
        {
          leftStr: "签到",
          leftValue: "",
          rightStr: "现场服务人员扫码",
          rightValue: ""
        },
        {
          leftStr: "创建时间",
          leftValue: "",
          rightStr: "创建人",
          rightValue: ""
        }
      ]
      this.dynamicInfoList = [
        {
          leftStr: "处理状态",
          leftValue: "",
          rightStr: "最新分配时间",
          rightValue: ""
        },
        {
          leftStr: "最新更新人",
          leftValue: "",
          rightStr: "修改时间",
          rightValue: ""
        }
      ]
      this.timeAmountList = [
        {
          leftStr: "希望处理时间",
          leftValue: "",
          rightStr: "实际处理时间",
          rightValue: ""
        },
        {
          leftStr: "交通费",
          leftValue: "",
          rightStr: "收费金额",
          rightValue: ""
        },
        {
          leftStr: "花费时间",
          leftValue: "",
          rightStr: "",
          rightValue: ""
        }
      ]
      this.issueList = [
        {
          leftStr: "常见问题",
          leftValue: ""
        },
        {
          leftStr: "问题描述",
          leftValue: ""
        }
      ]
      this.solutionList = [
        {
          leftStr: "解决办法",
          leftValue: ""
        },
        {
          leftStr: "内容备注",
          leftValue: ""
        }
      ]
      this.businessInfoList = [
        {
          leftStr: "所属行业",
          leftValue: "",
          rightStr: "法定代表人",
          rightValue: ""
        },
        {
          leftStr: "注册时间",
          leftValue: "",
          rightStr: "注册资金",
          rightValue: ""
        },
        {
          leftStr: "公司性质",
          leftValue: "",
          rightStr: "客户规模",
          rightValue: ""
        },
        {
          leftStr: "经营范围",
          leftValue: "",
          rightStr: "",
          rightValue: ""
        }
      ]
      this.addressInfoList = [
        {
          leftStr: "国家",
          leftValue: "",
          rightStr: "省份",
          rightValue: ""
        },
        {
          leftStr: "城市",
          leftValue: "",
          rightStr: "区域",
          rightValue: ""
        },
        {
          leftStr: "详细地址",
          leftValue: "",
          rightStr: "",
          rightValue: ""
        }
      ]
    },
    handleClose() {
      this.detailConfig.visible = false
    },
    // tab切换
    tabsClick(tab, event) {
      console.log(tab, event)
    },
    // 展开收起点击事件
    expandClick(value) {
      console.log(value)
      if (value === "basic") {
        this.isBasicExpand = !this.isBasicExpand
      } else if (value === "dynamic") {
        this.isDynamicExpand = !this.isDynamicExpand
      } else if (value === "timeAmount") {
        this.isTimeAmountExpand = !this.isTimeAmountExpand
      } else if (value === "address") {
        this.isAddressExpand = !this.isAddressExpand
      } else if (value === "issue") {
        this.isIssueExpand = !this.isIssueExpand
      } else if (value === "solution") {
        this.isSolutionExpand = !this.isSolutionExpand
      } else if (value === "remark") {
        this.isRemarkExpand = !this.isRemarkExpand
      } else if (value === "signInAddress") {
        this.isSignInAddressExpand = !this.isSignInAddressExpand
      } else if (value === "annex") {
        this.isAnnexExpand = !this.isAnnexExpand
      } else if (value === "signConfim") {
        this.isSignConfimExpand = !this.isSignConfimExpand
      } else if (value === "serviceContract") {
        this.isServiceContractExpand = !this.isServiceContractExpand
      } else if (value === "history") {
        this.isHistoryExpand = !this.isHistoryExpand
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
::v-deep {
  .el-drawer__header {
    padding: 0;
    margin-bottom: 0px;
    .header {
      height: 56px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      .header-label {
        padding: 5px;
        border-radius: 4px;
        background-color: #ff6600;
        color: #fff;
        font-size: 12px;
      }
      .header-title {
        color: #323232;
        font-size: 15px;
        margin-left: 10px;
        font-weight: inherit;
      }
    }
  }
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
  .el-tabs__item.is-active {
    color: $color-primary;
  }
  .el-tabs__item:hover {
    color: $color-primary;
  }
  .el-tabs__active-bar {
    background-color: $color-primary;
  }
  .el-tabs__header {
    margin: 0;
  }
  .el-drawer__body {
    .content {
      background-color: rgb(230, 233, 240);
      padding: 8px;
      .tab-view {
        background: #fff;
        // .tab-view-pane {
        //   position: relative;
        .item {
          position: absolute;
          top: 0px;
          right: 0px;
        }
        // }
      }
      .detail {
        .basic-info {
          .basic-info-label {
            padding-left: 10px;
            height: 42px;
            line-height: 42px;
            background: #f4f8fe;
            color: #333;
            font-size: 14px;
          }
          .basic-info-content {
            background: #fff;
            ul {
              padding-inline-start: 0;
            }
            li {
              display: flex;
              font-size: 14px;
              font-family: PingFangSC;
              border-bottom: 1px solid #f9f9fb;
              .left,
              .right,
              .all {
                width: 50%;
                display: flex;
                align-items: center;
                height: 40px;
                .content-title {
                  width: 320px;
                  text-align: right;
                  color: #555;
                }
                .content-data {
                  text-align: left;
                  margin-left: 25px;
                  color: #333;
                }
              }
              .all {
                width: 100%;
              }
              .remark {
                width: 100%;
              }
            }
            .list {
              .page {
                text-align: right;
                margin-bottom: 5px;
              }
            }
            .no-data {
              height: 40px;
              line-height: 40px;
              margin-left: 10px;
              font-size: 13px;
              color: #666;
            }
          }
        }
      }
      .second {
        background: #fff;
        .followup-records {
          .table-view {
            margin-top: 0 !important;
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>

 src/views/service/clientServiceOrder/index.vue

File was renamed from src/views/service/orderManage/index.vue
@@ -1,8 +1,10 @@
<template>
  <div class="sales-lead">
    <!-- <div class="detail-top">
    </div> -->
    <div class="top">
    <div v-if="isDetail" class="detail-top">
      <DetailListCommonBtn :query-class-options="queryClassOptions" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    </div>
    <div v-else class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
@@ -13,7 +15,13 @@
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
    <TableCommonView
      ref="tableListRef"
      :table-list="tableList"
      :select-box="!isDetail"
      @selClientClick="selClientClick"
      @selCommonClick="selCommonClick"
    >
      <template slot="tableButton">
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
@@ -24,21 +32,33 @@
      </template>
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddOrderManageDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
    <AddClientServiceOrderDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
    <!-- 客户服务单详情 -->
    <DetailClientServiceOrder v-if="clientServiceDetail.visible" :client-service-detail="clientServiceDetail" />
    <!-- 客户详情 -->
    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
  </div>
</template>

<script>
import AddOrderManageDialog from "@/views/service/orderManage/AddOrderManageDialog"
import AddClientServiceOrderDialog from "@/views/service/clientServiceOrder/AddCientServiceOrderDialog"
import { getOrderManageList, getDelOrderManage } from "@/api/serviceManage/orderManage"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import DetailClientServiceOrder from "@/views/service/clientServiceOrder/DetailClientServiceOrder"

export default {
  name: "SalesLead",
  props: {},
  props: {
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  mixins: [pageMixin],
  components: {
    AddOrderManageDialog
    AddClientServiceOrderDialog,
    DetailClientServiceOrder,
    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
  },
  computed: {
    searchCommonHeight() {
@@ -65,6 +85,14 @@
        visible: false,
        title: "新建",
        infomation: {}
      },
      clientServiceDetail: {
        visible: false,
        infomation: {}
      },
      clientDeail: {
        visible: false,
        infomation: {}
      }
    }
  },
@@ -77,9 +105,9 @@
      this.tableList = {
        tableInfomation: [],
        tableColumn: [
          { label: "服务单编号", prop: "number", min: 100 }, // 服务单编号
          { label: "服务单编号", prop: "number", min: 100, isCommonClick: true }, // 服务单编号
          { label: "主题", prop: "name" }, // 主题
          { label: "客户名称", prop: "clientId", min: 130 }, // 客户名称
          { label: "客户名称", prop: "clientId", min: 130, isClientClick: true }, // 客户名称
          { label: "实际处理时间", prop: "contactName" }, // 实际处理时间
          { label: "服务人员", prop: "name" }, // 服务人员
          { label: "服务方式", prop: "orderType" }, // 服务方式
@@ -165,6 +193,18 @@
    },
    getSelectArray(val) {
      console.log(val)
    },
    // 客户名称详情
    selClientClick(row) {
      console.log(row)
      this.clientDeail.visible = true
      this.clientDeail.infomation = { ...row, client_name: row.name }
    },
    // 客户服务单详情
    selCommonClick(row) {
      console.log(row)
      this.clientServiceDetail.visible = true
      this.clientServiceDetail.infomation = { ...row }
    }
  }
}
@@ -182,6 +222,12 @@
      }
    }
  }
  .detail-top {
    display: flex;
    .page {
      margin-left: auto;
    }
  }
}
::v-deep {
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {

 src/views/service/serviceContract/AddServiceContractDialog.vue

@@ -5,6 +5,8 @@
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <el-form
        ref="form"
@@ -524,52 +526,54 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-service-contract {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name,
      .common-select {
::v-deep {
  .iframe-dialog .el-dialog__body {
    .basic-info {
      .basic-info-title {
        background-color: #f4f8fe;
        padding-left: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        height: 42px;
        line-height: 42px;
      }
      .basic-info-view {
        margin-top: 10px;
        padding-right: 40px;
        .custom-name,
        .common-select {
          display: flex;
          .common-select-sel {
            width: 270px;
          }
          .common-select-btn {
            margin-left: 5px;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
      .annex-view {
        display: flex;
        .common-select-sel {
          width: 270px;
        }
        .common-select-btn {
          margin-left: 5px;
          font-size: 16px;
          cursor: pointer;
        color: #6166d3;
        .setFormat {
          margin-left: 10px;
        }
      }
    }
    .annex-view {
    .unflod-collapse {
      display: flex;
      height: 30px;
      justify-content: center;
      align-items: center;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
  }
}
</style>

 src/views/service/serviceContract/DetailServiceContract.vue

New file
@@ -0,0 +1,533 @@
<template>
  <div class="detail-view">
    <el-drawer
      :visible.sync="detailConfig.visible"
      size="80%"
      :before-close="handleClose"
      :wrapperClosable="false"
      :append-to-body="true"
    >
      <template slot="title">
        <div class="header">
          <span class="header-label">服务合同编号</span>
          <span class="header-title">{{ detailConfig.infomation.number }}</span>
        </div>
      </template>
      <div class="content">
        <div class="tab-view">
          <el-tabs v-model="activeName" @tab-click="tabsClick">
            <el-tab-pane label="详情" name="first"></el-tab-pane>
            <el-tab-pane label="收款计划" name="collection">
              <!-- <template slot="label">
                <div>跟进记录<el-badge type="primary" :value="2"> </el-badge></div>
              </template> -->
            </el-tab-pane>
            <el-tab-pane label="收款单" name="receipt"></el-tab-pane>
            <el-tab-pane label="客户服务单" name="clientService"> </el-tab-pane>
            <el-tab-pane label="销售发票" name="invoice"></el-tab-pane>
            <el-tab-pane label="销售子单" name="sub"></el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="activeName === 'first'" class="detail">
          <!-- 基本信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('basic')">
              <i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">基本信息</span>
            </div>
            <div v-show="isBasicExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in basicInfoList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 动态信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('dynamic')">
              <i v-if="isDynamicExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">动态信息</span>
            </div>
            <div v-show="isDynamicExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in dynamicInfoList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 条件与条款 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('termsConditions')">
              <i v-if="isTermsConditionsExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">条款与条件</span>
            </div>
            <div v-show="isTermsConditionsExpand" class="basic-info-content">
              <div class="termsConditions">
                <div class="content-title">{{ "条款与条约" + "：" }}</div>
                <div class="content-termsConditions">
                  <ul>
                    <li v-for="(item, index) in Status.serviceContract" :key="index">{{ item }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- 备注信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('remark')">
              <i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">备注信息</span>
            </div>
            <div v-show="isRemarkExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "备注：" }}</div>
                    <div class="content-data">{{ "" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 附件信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('annex')">
              <i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">附件信息</span>
            </div>
            <div v-show="isAnnexExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "附件：" }}</div>
                    <div class="content-data">{{ "" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 产品管理 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('product')">
              <i v-if="isProductExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">产品管理</span>
              <span style="margin-left: 30px">{{ "币种：" + "人民币(￥)" }}</span>
            </div>
            <div v-show="isProductExpand" class="basic-info-content">
              <CommonFormTableView
                :detail-enter="true"
                :show-summary="showSummary"
                :product-table-list="productTableList"
              />
            </div>
          </div>
        </div>
        <div v-if="activeName === 'collection'" class="second">
          <!-- <FollowupRecords :isDetail="true" /> -->
        </div>
        <div v-if="activeName === 'receipt'" class="second">
          <!-- <FollowupRecords :isDetail="true" /> -->
        </div>
        <div v-if="activeName === 'clientService'" class="second">
          <ClientServiceOrder :isDetail="true" />
        </div>
        <div v-if="activeName === 'invoice'" class="second">
          <!-- <FollowupRecords :isDetail="true" /> -->
        </div>
        <div v-if="activeName === 'sub'" class="second">
          <SubOrder :isDetail="true" />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import ClientServiceOrder from "@/views/service/clientServiceOrder"
import SubOrder from "@/views/sales/subOrder"
import Status from "@/common/const/salesFixedStatus"
import CommonFormTableView from "@/components/makepager/CommonFormTableView"
export default {
  name: "DetailSpecification",
  props: {
    serviceContractDetail: {
      type: Object,
      default: () => {
        return {
          visible: false,
          infomation: {}
        }
      }
    }
  },
  components: { ClientServiceOrder, SubOrder, CommonFormTableView },
  computed: {},
  data() {
    return {
      Status: Status,
      detailConfig: this.serviceContractDetail,
      activeName: "first",
      topList: [],
      isBasicExpand: true, // 基本信息
      basicInfoList: [],
      isDynamicExpand: true, // 动态信息
      dynamicInfoList: [],
      isTermsConditionsExpand: true, // 条件与条款
      isRemarkExpand: true, // 备注信息
      isAnnexExpand: true, // 附件信息
      isProductExpand: true, // 产品管理
      showSummary: {
        show: true,
        total: true,
        sumProp: ["other1", "other2", "other3", "other4"],
        mergeNumber: 3
      },
      productTableList: {}
    }
  },
  created() {
    this.setData()
    this.setTableForm()
  },
  mounted() {},
  methods: {
    setData() {
      this.basicInfoList = [
        {
          leftStr: "客户名称",
          leftValue: "",
          rightStr: "服务合同编号",
          rightValue: ""
        },
        {
          leftStr: "负责人",
          leftValue: "",
          rightStr: "联系人姓名",
          rightValue: ""
        },
        {
          leftStr: "销售机会",
          leftValue: "",
          rightStr: "合同订单",
          rightValue: ""
        },
        {
          leftStr: "报价单",
          leftValue: "",
          rightStr: "合同类型",
          rightValue: ""
        },
        {
          leftStr: "合同发起人",
          leftValue: "",
          rightStr: "签章状态",
          rightValue: ""
        },
        {
          leftStr: "签约日期",
          leftValue: "",
          rightStr: "服务开始日期",
          rightValue: ""
        },
        {
          leftStr: "创建人",
          leftValue: "",
          rightStr: "服务到期日",
          rightValue: ""
        },
        {
          leftStr: "创建时间",
          leftValue: "",
          rightStr: "数量合计",
          rightValue: ""
        }
      ]
      this.dynamicInfoList = [
        {
          leftStr: "审批状态",
          leftValue: "",
          rightStr: "合同状态",
          rightValue: ""
        },
        {
          leftStr: "已服务次数",
          leftValue: "",
          rightStr: "应服务次数",
          rightValue: ""
        },
        {
          leftStr: "已收总额",
          leftValue: "",
          rightStr: "应收余额",
          rightValue: ""
        },
        {
          leftStr: "已开票金额",
          leftValue: "",
          rightStr: "未开票金额",
          rightValue: ""
        }
      ]
    },
    handleClose() {
      this.detailConfig.visible = false
    },
    // tab切换
    tabsClick(tab, event) {
      console.log(tab, event)
    },
    // 展开收起点击事件
    expandClick(value) {
      console.log(value)
      if (value === "basic") {
        this.isBasicExpand = !this.isBasicExpand
      } else if (value === "dynamic") {
        this.isDynamicExpand = !this.isLabelExpand
      } else if (value === "delivery") {
        this.isDeliveryExpand = !this.isDeliveryExpand
      } else if (value === "termsConditions") {
        this.isTermsConditionsExpand = !this.isTermsConditionsExpand
      } else if (value === "remark") {
        this.isRemarkExpand = !this.isRemarkExpand
      } else if (value === "annex") {
        this.isAnnexExpand = !this.isAnnexExpand
      } else if (value === "product") {
        this.isProductExpand = !this.isProductExpand
      }
    },
    setTableForm() {
      this.productTableList = {
        tableData: [
          {
            id: "1",
            productName: "上海有限公司",
            other0: "ZDYBD03-1",
            other1: "12",
            other2: "5.00",
            other4: "3.00",
            other3: "2.00"
          }
        ],
        tableColumn: [
          { label: "#", prop: "id", width: 40 },
          { label: "含税单价", prop: "other9", input: true },
          { label: "产品名称", prop: "productName", input: true, isRequird: true },
          { label: "产品编号", prop: "other0" },
          { label: "数量", prop: "other1", input: true, isRequird: true },
          { label: "折扣率(%)", prop: "other6", input: true },
          { label: "不含税单价", prop: "other7", input: true },
          { label: "折扣额", prop: "other2" },
          { label: "税(销售)", prop: "other7", input: true },
          { label: "实际含税单价", prop: "other3" },
          { label: "不含税金额", prop: "other4" },
          { label: "价税合计", prop: "other3", input: true },
          { label: "描述", prop: "other8" },
          { label: "源单类型", prop: "other5" },
          { label: "源单", prop: "other6" }
        ]
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
::v-deep {
  .el-drawer__header {
    padding: 0;
    margin-bottom: 0px;
    .header {
      height: 56px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      .header-label {
        padding: 5px;
        border-radius: 4px;
        background-color: #ff6600;
        color: #fff;
        font-size: 12px;
      }
      .header-title {
        color: #323232;
        font-size: 15px;
        margin-left: 10px;
        font-weight: inherit;
      }
    }
  }
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
  .el-tabs__item.is-active,
  .el-tabs__item:hover,
  .el-tabs__active-bar {
    color: $color-primary;
  }
  .el-tabs__header {
    margin: 0;
  }
  .el-drawer__body {
    .content {
      background-color: rgb(230, 233, 240);
      padding: 8px;
      .tab-view {
        background: #fff;
        .item {
          position: absolute;
          top: 0px;
          right: 0px;
        }
      }
      .detail {
        .basic-info {
          .basic-info-label {
            padding-left: 10px;
            height: 42px;
            line-height: 42px;
            background: #f4f8fe;
            color: #333;
            font-size: 14px;
          }
          .basic-info-content {
            background: #fff;
            ul {
              padding-inline-start: 0;
            }
            li {
              display: flex;
              font-size: 14px;
              font-family: PingFangSC;
              border-bottom: 1px solid #f9f9fb;
              .left,
              .right,
              .all {
                width: 50%;
                display: flex;
                align-items: center;
                height: 40px;
                .content-title {
                  width: 320px;
                  text-align: right;
                  color: #555;
                }
                .content-data {
                  text-align: left;
                  margin-left: 25px;
                  color: #333;
                }
              }
              .all {
                width: 100%;
              }
              .remark {
                width: 100%;
              }
              .history {
                .content-title {
                  width: 200px;
                  color: #8b0000;
                }
                .content-data {
                  color: #8b0000;
                }
              }
            }
            .step-view {
              padding: 30px 60px 5px;
              height: 100px;
              .step-title-view {
                margin-top: 10px;
                font-size: 12px;
                color: #555;
                position: relative;
                .step-label {
                  margin-top: -65px;
                  height: 60px;
                }
                .step-btn {
                  position: absolute;
                  bottom: -25px;
                  left: 50%;
                  margin-left: -28px;
                  width: 56px;
                  height: 24px;
                  line-height: 24px;
                  text-align: center;
                  color: #2d82f4;
                  border: 1px solid #2d82f4;
                  border-radius: 15px;
                  cursor: pointer;
                }
                .step-desc {
                  margin-top: 15px;
                }
              }
              .el-step__head.is-process {
                color: #ff8707;
                border-color: #ff8707;
              }
              .el-step__head.is-finish .el-step__line {
                background-color: #409eff;
              }
            }
            .termsConditions {
              display: flex;
              align-items: center;
              font-size: 14px;
              font-family: PingFangSC;
              // padding: 5px 0;
              .content-title {
                width: 320px;
                text-align: right;
                color: #555;
              }
              .content-termsConditions {
                margin-left: 25px;
                font-size: 13px;
                color: #333;
                li {
                  margin: 5px 0;
                  border-bottom: 0px solid #f9f9fb;
                }
              }
            }
          }
        }
      }
      .second {
        background: #fff;
        .followup-records {
          .table-view {
            margin-top: 0 !important;
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>

 src/views/service/serviceContract/index.vue

@@ -15,7 +15,13 @@
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList" :select-box="!isDetail">
    <TableCommonView
      ref="tableListRef"
      :table-list="tableList"
      :select-box="!isDetail"
      @selClientClick="selClientClick"
      @selCommonClick="selCommonClick"
    >
      <template slot="tableButton">
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
@@ -27,6 +33,10 @@
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddServiceContractDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
    <!-- 服务合同明细 -->
    <DetailServiceContract v-if="serviceContractDetail.visible" :service-contract-detail="serviceContractDetail" />
    <!-- 客户详情 -->
    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
  </div>
</template>

@@ -34,6 +44,7 @@
import AddServiceContractDialog from "@/views/service/serviceContract/AddServiceContractDialog"
import { getServiceContractList, getDelServiceContract } from "@/api/serviceManage/serviceContract"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import DetailServiceContract from "@/views/service/serviceContract/DetailServiceContract"

export default {
  name: "ServiceContract",
@@ -45,7 +56,9 @@
  },
  mixins: [pageMixin],
  components: {
    AddServiceContractDialog
    AddServiceContractDialog,
    DetailServiceContract,
    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
  },
  computed: {
    searchCommonHeight() {
@@ -78,6 +91,14 @@
        visible: false,
        title: "新建",
        infomation: {}
      },
      serviceContractDetail: {
        visible: false,
        infomation: {}
      },
      clientDeail: {
        visible: false,
        infomation: {}
      }
    }
  },
@@ -90,8 +111,8 @@
      this.tableList = {
        tableInfomation: [],
        tableColumn: [
          { label: "服务合同编号", prop: "number", min: 100 }, // 服务合同编号
          { label: "客户名称", prop: "clientId", min: 120 }, // 客户名称
          { label: "服务合同编号", prop: "number", min: 100, isCommonClick: true }, // 服务合同编号
          { label: "客户名称", prop: "clientId", min: 120, isClientClick: true }, // 客户名称
          { label: "签约日期", prop: "signTime" }, // 签约日期
          { label: "合同类型", prop: "typeId" }, // 合同类型
          { label: "合同状态", prop: "statusId" }, // 合同状态
@@ -176,6 +197,18 @@
    },
    getSelectArray(val) {
      console.log(val)
    },
    // 客户名称详情
    selClientClick(row) {
      console.log(row)
      this.clientDeail.visible = true
      this.clientDeail.infomation = { ...row, client_name: row.name }
    },
    // 服务合同详情
    selCommonClick(row) {
      console.log(row)
      this.serviceContractDetail.visible = true
      this.serviceContractDetail.infomation = { ...row }
    }
  }
}

 src/views/service/serviceFollowup/AddServiceFollowupDialog.vue

@@ -5,6 +5,8 @@
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
      append-to-body
      custom-class="iframe-dialog"
    >
      <el-form
        ref="form"
@@ -385,52 +387,54 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.service-followup {
  .basic-info {
    .basic-info-title {
      background-color: #f4f8fe;
      padding-left: 10px;
      font-size: 15px;
      font-weight: bold;
      color: #666;
      height: 42px;
      line-height: 42px;
    }
    .basic-info-view {
      margin-top: 10px;
      padding-right: 40px;
      .custom-name,
      .common-select {
::v-deep {
  .iframe-dialog .el-dialog__body {
    .basic-info {
      .basic-info-title {
        background-color: #f4f8fe;
        padding-left: 10px;
        font-size: 15px;
        font-weight: bold;
        color: #666;
        height: 42px;
        line-height: 42px;
      }
      .basic-info-view {
        margin-top: 10px;
        padding-right: 40px;
        .custom-name,
        .common-select {
          display: flex;
          .common-select-sel {
            width: 270px;
          }
          .common-select-btn {
            margin-left: 5px;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
      .annex-view {
        display: flex;
        .common-select-sel {
          width: 270px;
        }
        .common-select-btn {
          margin-left: 5px;
          font-size: 16px;
          cursor: pointer;
        color: #6166d3;
        .setFormat {
          margin-left: 10px;
        }
      }
    }
    .annex-view {
    .unflod-collapse {
      display: flex;
      height: 30px;
      justify-content: center;
      align-items: center;
      color: #6166d3;
      .setFormat {
        margin-left: 10px;
      }
    }
  }
  .unflod-collapse {
    display: flex;
    height: 30px;
    justify-content: center;
    align-items: center;
    color: #6166d3;
  }
  .dialog-footer {
    background-color: #f5f5f5;
    height: 55px;
    line-height: 55px;
    .dialog-footer {
      background-color: #f5f5f5;
      height: 55px;
      line-height: 55px;
    }
  }
}
</style>

 src/views/service/serviceFollowup/DetailServiceFollowup.vue

New file
@@ -0,0 +1,371 @@
<template>
  <div class="detail-view">
    <el-drawer
      :visible.sync="detailConfig.visible"
      size="80%"
      :before-close="handleClose"
      :wrapperClosable="false"
      :append-to-body="true"
    >
      <template slot="title">
        <div class="header">
          <span class="header-label">回访单编号</span>
          <span class="header-title">{{ detailConfig.infomation.number }}</span>
        </div>
      </template>
      <div class="content">
        <div class="tab-view">
          <el-tabs v-model="activeName" @tab-click="tabsClick">
            <el-tab-pane label="详情" name="first"></el-tab-pane>
            <el-tab-pane label="附件管理" name="annex">
              <!-- <template slot="label">
                <div>跟进记录<el-badge type="primary" :value="2"> </el-badge></div>
              </template> -->
            </el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="activeName === 'first'" class="detail">
          <!-- 基本信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('basic')">
              <i v-if="isBasicExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">基本信息</span>
            </div>
            <div v-show="isBasicExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in basicInfoList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 备注信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('remark')">
              <i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">备注信息</span>
            </div>
            <div v-show="isRemarkExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "备注：" }}</div>
                    <div class="content-data">{{ "备注内容" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 附件信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('annex')">
              <i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">附件信息</span>
            </div>
            <div v-show="isAnnexExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "附件：" }}</div>
                    <div class="content-data">{{ "" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'annex'" class="second">
          <!-- <SubOrder :isDetail="true" /> -->
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "DetailServiceFollowup",
  props: {
    followupDetail: {
      type: Object,
      default: () => {
        return {
          visible: false,
          infomation: {}
        }
      }
    }
  },
  components: {},
  computed: {},
  data() {
    return {
      detailConfig: this.followupDetail,
      activeName: "first",
      isBasicExpand: true, // 基本信息
      basicInfoList: [],
      isRemarkExpand: true, // 备注信息
      isAnnexExpand: true // 附件信息
    }
  },
  created() {
    this.setData()
  },
  mounted() {},
  methods: {
    setData() {
      this.basicInfoList = [
        {
          leftStr: "客户名称",
          leftValue: "",
          rightStr: "回访单编号",
          rightValue: ""
        },
        {
          leftStr: "联系人姓名",
          leftValue: "",
          rightStr: "客户服务单",
          rightValue: ""
        },
        {
          leftStr: "回访人",
          leftValue: "",
          rightStr: "项目计划",
          rightValue: ""
        },
        {
          leftStr: "满意度",
          leftValue: "",
          rightStr: "及时率",
          rightValue: ""
        },
        {
          leftStr: "解决率",
          leftValue: "",
          rightStr: "原服务人员",
          rightValue: ""
        },
        {
          leftStr: "服务人员是否来过",
          leftValue: "",
          rightStr: "创建时间",
          rightValue: ""
        },
        {
          leftStr: "修改时间",
          leftValue: "",
          rightStr: "",
          rightValue: ""
        }
      ]
    },
    handleClose() {
      this.detailConfig.visible = false
    },
    // tab切换
    tabsClick(tab, event) {
      console.log(tab, event)
    },
    // 展开收起点击事件
    expandClick(value) {
      console.log(value)
      if (value === "basic") {
        this.isBasicExpand = !this.isBasicExpand
      } else if (value === "remark") {
        this.isRemarkExpand = !this.isRemarkExpand
      } else if (value === "annex") {
        this.isAnnexExpand = !this.isAnnexExpand
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
::v-deep {
  .el-drawer__header {
    padding: 0;
    margin-bottom: 0px;
    .header {
      height: 56px;
      display: flex;
      align-items: center;
      padding-left: 10px;
      .header-label {
        padding: 5px;
        border-radius: 4px;
        background-color: #ff6600;
        color: #fff;
        font-size: 12px;
      }
      .header-title {
        color: #323232;
        font-size: 15px;
        margin-left: 10px;
        font-weight: inherit;
      }
    }
  }
  .el-tabs--top .el-tabs__item.is-top:nth-child(2) {
    padding-left: 20px;
  }
  .el-tabs__item.is-active,
  .el-tabs__item:hover,
  .el-tabs__active-bar {
    color: $color-primary;
  }
  .el-tabs__header {
    margin: 0;
  }
  .el-drawer__body {
    .content {
      background-color: rgb(230, 233, 240);
      padding: 8px;
      .tab-view {
        background: #fff;
        .item {
          position: absolute;
          top: 0px;
          right: 0px;
        }
      }
      .detail {
        .basic-info {
          .basic-info-label {
            padding-left: 10px;
            height: 42px;
            line-height: 42px;
            background: #f4f8fe;
            color: #333;
            font-size: 14px;
          }
          .basic-info-content {
            background: #fff;
            ul {
              padding-inline-start: 0;
            }
            li {
              display: flex;
              font-size: 14px;
              font-family: PingFangSC;
              border-bottom: 1px solid #f9f9fb;
              .left,
              .right,
              .all {
                width: 50%;
                display: flex;
                align-items: center;
                height: 40px;
                .content-title {
                  width: 320px;
                  text-align: right;
                  color: #555;
                }
                .content-data {
                  text-align: left;
                  margin-left: 25px;
                  color: #333;
                }
              }
              .all {
                width: 100%;
              }
              .remark {
                width: 100%;
              }
              .history {
                .content-title {
                  width: 200px;
                  color: #8b0000;
                }
                .content-data {
                  color: #8b0000;
                }
              }
            }
            .step-view {
              padding: 30px 60px 5px;
              height: 100px;
              .step-title-view {
                margin-top: 10px;
                font-size: 12px;
                color: #555;
                position: relative;
                .step-label {
                  margin-top: -65px;
                  height: 60px;
                }
                .step-btn {
                  position: absolute;
                  bottom: -25px;
                  left: 50%;
                  margin-left: -28px;
                  width: 56px;
                  height: 24px;
                  line-height: 24px;
                  text-align: center;
                  color: #2d82f4;
                  border: 1px solid #2d82f4;
                  border-radius: 15px;
                  cursor: pointer;
                }
                .step-desc {
                  margin-top: 15px;
                }
              }
              .el-step__head.is-process {
                color: #ff8707;
                border-color: #ff8707;
              }
              .el-step__head.is-finish .el-step__line {
                background-color: #409eff;
              }
            }
            .termsConditions {
              display: flex;
              align-items: center;
              font-size: 14px;
              font-family: PingFangSC;
              // padding: 5px 0;
              .content-title {
                width: 320px;
                text-align: right;
                color: #555;
              }
              .content-termsConditions {
                margin-left: 25px;
                font-size: 13px;
                color: #333;
                li {
                  margin: 5px 0;
                  border-bottom: 0px solid #f9f9fb;
                }
              }
            }
          }
        }
      }
      .second {
        background: #fff;
        .followup-records {
          .table-view {
            margin-top: 0 !important;
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>

 src/views/service/serviceFollowup/index.vue

@@ -1,6 +1,10 @@
<template>
  <div class="sales-lead">
    <div class="top">
    <div v-if="isDetail" class="detail-top">
      <DetailListCommonBtn :query-class-options="queryClassOptions" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    </div>
    <div v-else class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
@@ -11,7 +15,15 @@
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
    <TableCommonView
      ref="tableListRef"
      :table-list="tableList"
      :select-box="!isDetail"
      @selClientClick="selClientClick"
      @selCommonClick="selCommonClick"
      @selContactsClick="selContactsClick"
      @selServiceOrderClick="selServiceOrderClick"
    >
      <template slot="tableButton">
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
@@ -23,6 +35,14 @@
    </TableCommonView>
    <!-- 新建/编辑 -->
    <AddServiceFollowupDialog v-if="editConfig.visible" :edit-common-config="editConfig" />
    <!-- 服务回访单详情 -->
    <DetailServiceFollowup v-if="followupDetail.visible" :followup-detail="followupDetail" />
    <!-- 客户详情 -->
    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
    <!-- 联系人详情 -->
    <DetailContacts v-if="contactsDeail.visible" :contacts-detail="contactsDeail" />
    <!-- 客户服务单详情 -->
    <DetailClientServiceOrder v-if="clientServiceDetail.visible" :client-service-detail="clientServiceDetail" />
  </div>
</template>

@@ -30,13 +50,23 @@
import AddServiceFollowupDialog from "@/views/service/serviceFollowup/AddServiceFollowupDialog"
import { getServiceFollowupList, getDelServiceFollowup } from "@/api/serviceManage/serviceFollowup"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import DetailServiceFollowup from "@/views/service/serviceFollowup/DetailServiceFollowup"

export default {
  name: "SalesLead",
  props: {},
  name: "ServiceFollowup",
  props: {
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  mixins: [pageMixin],
  components: {
    AddServiceFollowupDialog
    AddServiceFollowupDialog,
    DetailServiceFollowup,
    DetailContacts: () => import("@/views/client/contacts/DetailContacts"),
    DetailClientManage: () => import("@/views/client/client/DetailClientManage"),
    DetailClientServiceOrder: () => import("@/views/service/clientServiceOrder/DetailClientServiceOrder")
  },
  computed: {
    searchCommonHeight() {
@@ -62,6 +92,22 @@
        visible: false,
        title: "新建",
        infomation: {}
      },
      followupDetail: {
        visible: false,
        infomation: {}
      },
      contactsDeail: {
        visible: false,
        infomation: {}
      },
      clientDeail: {
        visible: false,
        infomation: {}
      },
      clientServiceDetail: {
        visible: false,
        infomation: {}
      }
    }
  },
@@ -74,10 +120,10 @@
      this.tableList = {
        tableInfomation: [],
        tableColumn: [
          { label: "回访单编号", prop: "number", min: 80 }, // 回访单编号
          { label: "客户名称", prop: "clientId", min: 130 }, // 客户名称
          { label: "联系人姓名", prop: "contactId" }, // 联系人姓名
          { label: "客户服务单", prop: "serviceId" }, // 客户服务单
          { label: "回访单编号", prop: "number", min: 80, isCommonClick: true }, // 回访单编号
          { label: "客户名称", prop: "clientId", min: 130, isClientClick: true }, // 客户名称
          { label: "联系人姓名", prop: "contactId", isContactClick: true }, // 联系人姓名
          { label: "客户服务单", prop: "serviceId", isServiceOrder: true }, // 客户服务单
          { label: "回访人", prop: "isVisit" }, // 回访人
          { label: "满意度", prop: "satisfaction" } // 满意度
          // { label: "修改时间", prop: "modifyTime" } // 修改时间
@@ -157,6 +203,29 @@
    },
    getSelectArray(val) {
      console.log(val)
    },
    // 客户名称详情
    selClientClick(row) {
      console.log(row)
      this.clientDeail.visible = true
      this.clientDeail.infomation = { ...row, client_name: row.name }
    },
    // 联系人详情
    selContactsClick(row) {
      console.log(row)
      this.contactsDeail.visible = true
      this.contactsDeail.infomation = { ...row }
    },
    // 服务回访单详情
    selCommonClick(row) {
      console.log(row)
      this.followupDetail.visible = true
      this.followupDetail.infomation = { ...row }
    },
    selServiceOrderClick(row) {
      console.log(row)
      this.clientServiceDetail.visible = true
      this.clientServiceDetail.infomation = { ...row }
    }
  }
}
@@ -174,5 +243,11 @@
      }
    }
  }
  .detail-top {
    display: flex;
    .page {
      margin-left: auto;
    }
  }
}
</style>