增加客户服务单（删除工单管理、消费服务单）和客户管理模块详情页

yangfeng

2023-08-03 624e812b40ac87bf8d7a17b83b4a3bc3bbd901fb

增加客户服务单（删除工单管理、消费服务单）和客户管理模块详情页

 src/assets/style/index.scss

@@ -1,3 +1,13 @@
@import "element-ui/lib/theme-chalk/index.css";
@import "./variable.scss";
@import "./reset-element.scss";

ul,
ol,
li {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
}

 src/components/index.js

@@ -3,8 +3,9 @@
import PublicFunctionBtnView from "@/components/makepager/PublicFunctionBtnView"
import PagerView from "@/components/makepager/pager/PagerView"
import TableCommonView from "@/components/makepager/TableCommonView"
import DetailListCommonBtn from "@/components/makepager/DetailListCommonBtn"

const components = [SearchCommonView, PublicFunctionBtnView, PagerView, TableCommonView]
const components = [SearchCommonView, PublicFunctionBtnView, PagerView, TableCommonView, DetailListCommonBtn]
components.forEach((component) => {
  Vue.component(component.name, component)
})

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

@@ -44,9 +44,9 @@
            <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/orderManage">客户服务单</el-menu-item>
          <el-menu-item index="/service/serviceFollowup">服务回访单</el-menu-item>
          <el-menu-item index="/service/serviceFeeManage">服务收费管理</el-menu-item>
          <!-- <el-menu-item index="/service/serviceFeeManage">服务收费管理</el-menu-item> -->
        </el-submenu>
        <!-- <el-submenu index="4">
          <template slot="title">

 src/components/makepager/DetailListCommonBtn.vue

New file
@@ -0,0 +1,73 @@
<template>
  <div class="detail-list">
    <div class="add" @click="addBtnClick">
      <i class="el-icon-circle-plus-outline" style="font-size: 15px; margin-right: 5px"></i>
      <span>新建</span>
    </div>
    <div class="query-class">
      <div class="query-class-title">查询分类</div>
      <el-select v-model="queryClassValue" placeholder="请选择" class="query-class-sel" size="mini">
        <el-option v-for="item in queryClassOptions" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailListCommonBtn",
  components: {},
  props: {
    queryClass: {
      type: String,
      default: "1"
    },
    queryClassOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      queryClassValue: this.queryClass
    }
  },
  methods: {
    addBtnClick() {
      this.$parent.addBtnClick()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.detail-list {
  display: flex;
  align-items: center;
  font-size: 12px;
  .add {
    color: #2a304d;
    height: 36px;
    line-height: 36px;
    width: 60px;
    text-align: center;
    margin-left: 10px;
    cursor: pointer;
  }
  .query-class {
    display: flex;
    height: 50px;
    line-height: 50px;
    .query-class-title {
      margin-left: 10px;
      color: #666;
    }
    .query-class-sel {
      width: 165px;
      margin-left: 10px;
    }
  }
}
</style>

 src/components/makepager/PublicFunctionBtnView.vue

@@ -8,9 +8,9 @@
      <!-- <el-button v-if="submitApproval" size="small" type="text" class="gray width64" @click="submitApprovalBtnClick"
        >提交审批
      </el-button> -->
      <!-- <el-button v-if="duplicateCheck" size="small" type="text" class="gray" @click="duplicateCheckBtnClick"
      <el-button v-if="duplicateCheck" size="small" type="text" class="gray" @click="duplicateCheckBtnClick"
        >查重</el-button
      > -->
      >
      <!-- <el-button v-if="importButton" size="small" type="text" class="gray" @click="importBtnClick">导入</el-button>
      <el-button v-if="departmentSet" size="small" type="text" class="gray" @click="departmentSetClick"
        >部门设置</el-button

 src/components/makepager/TableCommonView.vue

@@ -1,5 +1,5 @@
<template>
  <div class="page-view">
  <div class="table-view">
    <el-table
      ref="table"
      border
@@ -32,9 +32,27 @@
              ? "--"
              : dateFormat("YYYY-mm-dd HH:MM:SS", scope.row[item.prop])
          }}</span>
          <span v-else-if="item.isClick" class="sel-name" @click="selNameClick(scope.row)">{{
          <span v-else-if="item.isClick && scope.row[item.prop]" class="sel-name" @click="selNameClick(scope.row)">{{
            scope.row[item.prop]
          }}</span>
          <span
            v-else-if="item.isSalesLeadClick && scope.row[item.prop]"
            class="sel-name"
            @click="selSalesLeadClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span
            v-else-if="item.isClientClick && scope.row[item.prop]"
            class="sel-name"
            @click="selClientClick(scope.row)"
            >{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span
          >
          <span
            v-else-if="item.isContactClick && scope.row[item.prop]"
            class="sel-name"
            @click="selContactsClick(scope.row)"
            >{{ scope.row[item.prop] }}</span
          >
          <span v-else>{{ scope.row[item.prop] ? scope.row[item.prop] : "--" }}</span>
        </template>
      </el-table-column>
@@ -184,6 +202,15 @@
    },
    selNameClick(row) {
      this.$emit("selCommonClick", row)
    },
    selSalesLeadClick(row) {
      this.$emit("selSalesLeadClick", row)
    },
    selClientClick(row) {
      this.$emit("selClientClick", row)
    },
    selContactsClick(row) {
      this.$emit("selContactsClick", row)
    }
  }
}
@@ -191,10 +218,10 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.page-view {
  margin-top: 20px;
.table-view {
  // margin-top: 20px;
  margin-right: 10px;
  margin-bottom: 40px;
  // margin-bottom: 40px;
  .blue {
    width: 70px;
    text-align: center;

 src/components/makepager/pager/PagerView.vue

@@ -18,7 +18,7 @@
  props: {
    pageSizes: {
      type: Array,
      default: () => [10, 20, 30, 40]
      default: () => [5, 10, 20, 30, 40]
    },
    layout: {
      type: String,

 src/main.js

@@ -8,6 +8,11 @@
import "@/components"

Vue.use(ElementUI)
// 修改默认点击遮罩层为不关闭
ElementUI.MessageBox.setDefaults({
  closeOnClickModal: false
})
ElementUI.Dialog.props.closeOnClickModal.default = false

Vue.config.productionTip = false


 src/router/service/index.js

@@ -19,7 +19,7 @@
    name: "orderManage",
    component: orderManage,
    meta: {
      title: "工单管理"
      title: "客户服务单"
    }
  },
  {

 src/views/client/client/DetailClientManage.vue

New file
@@ -0,0 +1,528 @@
<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.client_name }}</span>
        </div>
      </template>
      <div class="content">
        <div class="tab-view">
          <el-tabs v-model="activeName" @tab-click="tabsClick">
            <el-tab-pane label="详情" name="first"></el-tab-pane>
            <el-tab-pane label="联系人" name="contact"></el-tab-pane>
            <el-tab-pane label="跟进记录" name="second">
              <!-- <template slot="label">
                <div>跟进记录<el-badge type="primary" :value="2"> </el-badge></div>
              </template> -->
            </el-tab-pane>
            <el-tab-pane label="销售机会" name="salesOpportunity"></el-tab-pane>
            <el-tab-pane label="报价单" name="quotation"></el-tab-pane>
            <el-tab-pane label="销售总单" name="master"></el-tab-pane>
            <el-tab-pane label="销售子单" name="sub"></el-tab-pane>
            <el-tab-pane label="销售明细单" name="detail"></el-tab-pane>
            <el-tab-pane label="收款单" name="plan"></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('contact')">
              <i v-if="isContactExpand" 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="isContactExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in contactList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 动态信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('dynamic')">
              <i v-if="isDynamicExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">动态信息</span>
            </div>
            <div v-show="isDynamicExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in dynamicInfoList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 工商信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('business')">
              <i v-if="isBusinessExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">工商信息</span>
            </div>
            <div v-show="isBusinessExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in businessInfoList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 地址信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('address')">
              <i v-if="isAddressExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">地址信息</span>
            </div>
            <div v-show="isAddressExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in addressInfoList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 备注信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('remark')">
              <i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">备注信息</span>
            </div>
            <div v-show="isRemarkExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "备注：" }}</div>
                    <div class="content-data">{{ "备注内容" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 附件信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('annex')">
              <i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">附件信息</span>
            </div>
            <div v-show="isAnnexExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "附件：" }}</div>
                    <div class="content-data">{{ "" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'contact'" class="second">
          <Contacts :isDetail="true" />
        </div>
        <div v-if="activeName === 'second'" class="second">
          <FollowupRecords :isDetail="true" />
        </div>
        <div v-if="activeName === 'salesOpportunity'" class="second">
          <SalesOpportunity :isDetail="true" />
        </div>
        <div v-if="activeName === 'quotation'" class="second">
          <Quotation :isDetail="true" />
        </div>
        <div v-if="activeName === 'master'" class="second">
          <MasterOrder :isDetail="true" />
        </div>
        <div v-if="activeName === 'sub'" class="second">
          <SubOrder :isDetail="true" />
        </div>
        <div v-if="activeName === 'detail'" class="second">
          <SalesDetails :isDetail="true" />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import FollowupRecords from "@/views/client/followupRecords"
import Contacts from "@/views/client/contacts"
import SalesOpportunity from "@/views/sales/salesOpportunity"
import Quotation from "@/views/sales/quotation"
import MasterOrder from "@/views/sales/masterOrder"
import SubOrder from "@/views/sales/subOrder"
import SalesDetails from "@/views/sales/salesDetails"
export default {
  name: "DetailClientManage",
  props: {
    clientManageDetail: {
      type: Object,
      default: () => {
        return {
          visible: false,
          infomation: {}
        }
      }
    }
  },
  components: { FollowupRecords, Contacts, SalesOpportunity, Quotation, MasterOrder, SubOrder, SalesDetails },
  computed: {},
  data() {
    return {
      detailConfig: this.clientManageDetail,
      activeName: "first",
      isBasicExpand: true, // 基本信息展开
      basicInfoList: [],
      isContactExpand: true, // 首要联系人
      contactList: [],
      isDynamicExpand: true, // 动态信息
      dynamicInfoList: [],
      isBusinessExpand: true, // 工商信息
      businessInfoList: [],
      isAddressExpand: true, // 地址信息
      addressInfoList: [],
      isRemarkExpand: true, // 备注信息
      isAnnexExpand: true // 附件信息
    }
  },
  created() {
    this.setData()
  },
  mounted() {},
  methods: {
    setData() {
      this.basicInfoList = [
        {
          leftStr: "客户名称",
          leftValue: this.detailConfig.infomation.client_name,
          rightStr: "客户编号",
          rightValue: this.detailConfig.infomation.number
        },
        {
          leftStr: "客户状态",
          leftValue: this.detailConfig.infomation.contact_name,
          rightStr: "销售负责人",
          rightValue: this.detailConfig.infomation.contact_position
        },
        {
          leftStr: "客户类型",
          leftValue: this.detailConfig.infomation.contact_phone,
          rightStr: "客户来源",
          rightValue: "新建"
        },
        {
          leftStr: "重要级别",
          leftValue: this.detailConfig.infomation.sales_sources_id,
          rightStr: "公海状态",
          rightValue: this.detailConfig.infomation.member_id
        },
        {
          leftStr: "所属公海",
          leftValue: "",
          rightStr: "服务代表",
          rightValue: ""
        },
        {
          leftStr: "签到",
          leftValue: "",
          rightStr: "下次回访日期",
          rightValue: ""
        },
        {
          leftStr: "创建时间",
          leftValue: "",
          rightStr: "最晚服务到期日",
          rightValue: ""
        },
        {
          leftStr: "创建人",
          leftValue: "",
          rightStr: "",
          rightValue: ""
        }
      ]
      this.contactList = [
        {
          leftStr: "联系人姓名",
          leftValue: "",
          rightStr: "联系人手机",
          rightValue: ""
        },
        {
          leftStr: "联系人职务",
          leftValue: "",
          rightStr: "联系人微信",
          rightValue: ""
        },
        {
          leftStr: "联系人Email",
          leftValue: "",
          rightStr: "",
          rightValue: ""
        }
      ]
      this.dynamicInfoList = [
        {
          leftStr: "最新联系日期",
          leftValue: "",
          rightStr: "未联系天数",
          rightValue: ""
        },
        {
          leftStr: "最新推进时间",
          leftValue: "",
          rightStr: "",
          rightValue: ""
        }
      ]
      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 === "contact") {
        this.isContactExpand = !this.isContactExpand
      } else if (value === "business") {
        this.isBusinessExpand = !this.isBusinessExpand
      } else if (value === "dynamic") {
        this.isDynamicExpand = !this.isDynamicExpand
      } else if (value === "address") {
        this.isAddressExpand = !this.isAddressExpand
      } 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 {
    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 {
                width: 50%;
                display: flex;
                align-items: center;
                height: 40px;
                .content-title {
                  width: 220px;
                  text-align: right;
                  color: #555;
                }
                .content-data {
                  text-align: left;
                  margin-left: 25px;
                  color: #333;
                }
              }
              .remark {
                width: 100%;
              }
            }
          }
        }
      }
      .second {
        background: #fff;
        .followup-records {
          .table-view {
            margin-top: 0 !important;
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>

 src/views/client/client/index.vue

@@ -18,18 +18,30 @@
        </div>
      </div>
    </div>
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView
        :duplicate-check="true"
        :list-button="true"
        :map-button="true"
        :statistics="true"
        :operates-list="operatesList"
    <div class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      <div class="btn-pager">
        <PublicFunctionBtnView
          :duplicate-check="true"
          :list-button="true"
          :map-button="true"
          :statistics="true"
          :operates-list="operatesList"
        />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" v-loading="loading" :table-list="tableList">
    <TableCommonView
      ref="tableListRef"
      v-loading="loading"
      :table-list="tableList"
      @selClientClick="selClientClick"
      @selContactsClick="selContactsClick"
    >
      <template slot="tableButton">
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
@@ -43,11 +55,15 @@
    </TableCommonView>
    <!-- 新建/编辑客户管理 -->
    <AddClientManageDialog v-if="editConfig.visible" :edit-client-manage-config="editConfig" />
    <!-- 客户详情 -->
    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
    <!-- 联系人详情 -->
    <DetailContacts v-if="contactsDeail.visible" :contacts-detail="contactsDeail" />
  </div>
</template>

<script>
import AddClientManageDialog from "@/views/client/client/AddClientManageDialog.vue"
import AddClientManageDialog from "@/views/client/client/AddClientManageDialog"
import { getClientList, getDeleteClient } from "@/api/client/client"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"

@@ -56,7 +72,9 @@
  props: {},
  mixins: [pageMixin],
  components: {
    AddClientManageDialog
    AddClientManageDialog,
    DetailContacts: () => import("@/views/client/contacts/DetailContacts"),
    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
  },
  computed: {
    searchCommonHeight() {
@@ -93,6 +111,14 @@
        visible: false,
        title: "新建",
        infomation: {}
      },
      contactsDeail: {
        visible: false,
        infomation: {}
      },
      clientDeail: {
        visible: false,
        infomation: {}
      }
    }
  },
@@ -105,13 +131,13 @@
      this.tableList = {
        tableInfomation: [],
        tableColumn: [
          { label: "客户名称", prop: "name", min: 100 }, // 客户名称
          { label: "客户名称", prop: "name", min: 100, isClientClick: true }, // 客户名称
          { label: "销售负责人", prop: "member_id" }, // 销售负责人
          { label: "重要级别", prop: "client_level_id" }, // 重要级别
          { label: "下次回访日期", prop: "next_visit_time", isTime: true, min: 90 }, // 下次回访日期
          { label: "详细地址", prop: "detail_address", min: 200 }, // 详细地址
          { label: "客户状态", prop: "client_status_id" }, // 客户状态
          { label: "联系人姓名", prop: "contact_name" }, // 联系人姓名
          { label: "联系人姓名", prop: "contact_name", isContactClick: true }, // 联系人姓名
          { label: "手机号码", prop: "contact_phone" } // 手机号码
        ]
      }
@@ -217,6 +243,18 @@
    },
    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 }
    }
  }
}
@@ -245,10 +283,13 @@
      }
    }
  }
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
}

 src/views/client/contacts/DetailContacts.vue

New file
@@ -0,0 +1,363 @@
<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.contact_name }}</span>
        </div>
      </template>
      <div class="content">
        <div class="tab-view">
          <el-tabs v-model="activeName" @tab-click="tabsClick">
            <el-tab-pane label="详情" name="first"></el-tab-pane>
            <el-tab-pane label="跟进记录" name="second">
              <!-- <template slot="label">
                <div>跟进记录<el-badge type="primary" :value="2"> </el-badge></div>
              </template> -->
            </el-tab-pane>
            <el-tab-pane label="销售明细单" name="detail"></el-tab-pane>
            <el-tab-pane label="服务合同" name="serviceContract"></el-tab-pane>
          </el-tabs>
        </div>
        <div v-if="activeName === 'first'" class="detail">
          <!-- 基本信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('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('address')">
              <i v-if="isAddressExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">地址信息</span>
            </div>
            <div v-show="isAddressExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in addressInfoList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 备注信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('remark')">
              <i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">备注信息</span>
            </div>
            <div v-show="isRemarkExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "备注：" }}</div>
                    <div class="content-data">{{ "备注内容" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 附件信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('annex')">
              <i v-if="isAnnexExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">附件信息</span>
            </div>
            <div v-show="isAnnexExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "附件：" }}</div>
                    <div class="content-data">{{ "" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'second'" class="second">
          <FollowupRecords :isDetail="true" />
        </div>
        <div v-if="activeName === 'detail'" class="second">
          <SalesDetails :isDetail="true" />
        </div>
        <div v-if="activeName === 'serviceContract'" class="second">
          <ServiceContract :isDetail="true" />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import FollowupRecords from "@/views/client/followupRecords"
import SalesDetails from "@/views/sales/salesDetails"
import ServiceContract from "@/views/service/serviceContract"
export default {
  name: "DetailContacts",
  props: {
    contactsDetail: {
      type: Object,
      default: () => {
        return {
          visible: false,
          infomation: {}
        }
      }
    }
  },
  components: { FollowupRecords, ServiceContract, SalesDetails },
  computed: {},
  data() {
    return {
      detailConfig: this.contactsDetail,
      activeName: "first",
      isBasicExpand: true, // 基本信息展开
      basicInfoList: [],
      isAddressExpand: true, // 地址信息
      addressInfoList: [],
      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: "联系人Email",
          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 === "remark") {
        this.isRemarkExpand = !this.isRemarkExpand
      } else if (value === "address") {
        this.isAddressExpand = !this.isAddressExpand
      } 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 {
    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 {
                width: 50%;
                display: flex;
                align-items: center;
                height: 40px;
                .content-title {
                  width: 220px;
                  text-align: right;
                  color: #555;
                }
                .content-data {
                  text-align: left;
                  margin-left: 25px;
                  color: #333;
                }
              }
              .remark {
                width: 100%;
              }
            }
          }
        }
      }
      .second {
        background: #fff;
        .followup-records {
          .table-view {
            margin-top: 0 !important;
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style>

 src/views/client/contacts/index.vue

@@ -1,11 +1,27 @@
<template>
  <div class="contacts-view">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :operates-list="operatesList" />
    <div v-if="isDetail" class="detail-top">
      <DetailListCommonBtn :query-class-options="queryClassOptions" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    </div>
    <TableCommonView ref="tableListRef" v-loading="loading" :table-list="tableList">
    <div v-else class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :operates-list="operatesList" :allocation="false" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView
      ref="tableListRef"
      v-loading="loading"
      :table-list="tableList"
      @selContactsClick="selContactsClick"
      @selClientClick="selClientClick"
    >
      <template slot="tableButton">
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
@@ -18,6 +34,10 @@
    </TableCommonView>
    <!-- 新建/编辑联系人 -->
    <AddContactsDialog v-if="editConfig.visible" :edit-contacts-config="editConfig" />
    <!-- 联系人详情 -->
    <DetailContacts v-if="contactsDeail.visible" :contacts-detail="contactsDeail" />
    <!-- 客户详情 -->
    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
  </div>
</template>

@@ -27,10 +47,17 @@
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
export default {
  name: "ContactsView",
  props: {},
  props: {
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  mixins: [pageMixin],
  components: {
    AddContactsDialog
    AddContactsDialog,
    DetailContacts: () => import("@/views/client/contacts/DetailContacts"),
    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
  },
  computed: {},
  data() {
@@ -59,6 +86,14 @@
        visible: false,
        title: "新建",
        infomation: {}
      },
      contactsDeail: {
        visible: false,
        infomation: {}
      },
      clientDeail: {
        visible: false,
        infomation: {}
      }
    }
  },
@@ -71,8 +106,8 @@
      this.tableList = {
        tableInfomation: [],
        tableColumn: [
          { label: "联系人姓名", prop: "name", min: 100 }, // 联系人姓名
          { label: "客户名称", prop: "client_name", min: 190 }, // 客户名称
          { label: "联系人姓名", prop: "name", min: 100, isContactClick: true }, // 联系人姓名
          { label: "客户名称", prop: "client_name", min: 190, isClientClick: true }, // 客户名称
          { label: "联系人编号", prop: "number", min: 100 }, // 联系人编号
          { label: "职务", prop: "position", min: 120 }, // 职务
          { label: "手机", prop: "phone", min: 100 }, // 手机号码
@@ -156,6 +191,18 @@
    },
    getSelectArray(val) {
      console.log(val)
    },
    // 联系人详情
    selContactsClick(row) {
      console.log(row)
      this.contactsDeail.visible = true
      this.contactsDeail.infomation = { ...row, contact_name: row.name }
    },
    // 客户名称详情
    selClientClick(row) {
      console.log(row)
      this.clientDeail.visible = true
      this.clientDeail.infomation = { ...row, client_name: row.Client.name }
    }
  }
}
@@ -164,7 +211,16 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.contacts-view {
  .btn-pager {
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
  .detail-top {
    display: flex;
    .page {
      margin-left: auto;

 src/views/client/followupRecords/AddFollowupRecordsDialog.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"
@@ -553,54 +555,56 @@

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.add-followup-records {
  .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/client/followupRecords/index.vue

@@ -1,11 +1,28 @@
<template>
  <div class="followup-records">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :statistics="true" :operates-list="operatesList" />
    <div v-if="isDetail" class="detail-top">
      <DetailListCommonBtn :query-class-options="queryClassOptions" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    </div>
    <TableCommonView ref="tableListRef" v-loading="loading" :table-list="tableList">
    <div v-else class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :statistics="true" :operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView
      ref="tableListRef"
      v-loading="loading"
      :table-list="tableList"
      :select-box="!isDetail"
      @selContactsClick="selContactsClick"
      @selClientClick="selClientClick"
    >
      <template slot="tableButton">
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
@@ -17,6 +34,10 @@
    </TableCommonView>
    <!-- 新建/编辑跟进记录 -->
    <AddFollowupRecordsDialog v-if="editConfig.visible" :edit-contacts-config="editConfig" />
    <!-- 联系人详情 -->
    <DetailContacts v-if="contactsDeail.visible" :contacts-detail="contactsDeail" />
    <!-- 客户详情 -->
    <DetailClientManage v-if="clientDeail.visible" :client-manage-detail="clientDeail" />
  </div>
</template>

@@ -27,10 +48,17 @@

export default {
  name: "FollowupRecords",
  props: {},
  props: {
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  mixins: [pageMixin],
  components: {
    AddFollowupRecordsDialog
    AddFollowupRecordsDialog,
    DetailContacts: () => import("@/views/client/contacts/DetailContacts"),
    DetailClientManage: () => import("@/views/client/client/DetailClientManage")
  },
  computed: {
    searchCommonHeight() {
@@ -42,6 +70,7 @@
      tableList: {},
      loading: false,
      activeName: "second",
      queryClassValue: "1",
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "今日联系" },
@@ -64,7 +93,15 @@
        title: "新建",
        infomation: {}
      },
      saleChanceName: ""
      saleChanceName: "",
      contactsDeail: {
        visible: false,
        infomation: {}
      },
      clientDeail: {
        visible: false,
        infomation: {}
      }
    }
  },
  created() {
@@ -77,8 +114,8 @@
        tableInfomation: [],
        tableColumn: [
          { label: "主题", prop: "topic", min: 120 }, // 主题
          { label: "客户名称", prop: "client_name", min: 190 }, // 客户名称
          { label: "联系人姓名", prop: "contact_name", min: 100 }, // 联系人姓名
          { label: "客户名称", prop: "client_name", min: 190, isClientClick: true }, // 客户名称
          { label: "联系人姓名", prop: "contact_name", min: 100, isContactClick: true }, // 联系人姓名
          { label: "客户状态", prop: "client_status_id", min: 100 }, // 客户状态
          { label: "联系方式", prop: "phone", min: 100 }, // 联系方式
          { label: "联系人日期", prop: "follow_time", isTime: true, min: 130 }, // 联系人日期
@@ -93,7 +130,6 @@
        this.searchOptions.push({ value: (i + 1).toString(), label: label })
      }
    },
    // 请求数据
    // 请求数据
    async getData() {
      this.loading = true
@@ -166,6 +202,18 @@
    },
    getSelectArray(val) {
      console.log(val)
    },
    // 联系人详情
    selContactsClick(row) {
      console.log(row)
      this.contactsDeail.visible = true
      this.contactsDeail.infomation = { ...row }
    },
    // 客户名称详情
    selClientClick(row) {
      console.log(row)
      this.clientDeail.visible = true
      this.clientDeail.infomation = { ...row }
    }
  }
}
@@ -174,7 +222,16 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.followup-records {
  .btn-pager {
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
  .detail-top {
    display: flex;
    .page {
      margin-left: auto;

 src/views/client/salesLead/DetailSalesLead.vue

New file
@@ -0,0 +1,365 @@
<template>
  <div class="detail-view">
    <el-drawer :visible.sync="detailConfig.visible" size="80%" :before-close="handleClose" :wrapperClosable="false">
      <template slot="title">
        <div class="header">
          <span class="header-label">客户名称</span>
          <span class="header-title">{{ detailConfig.infomation.name }}</span>
        </div>
      </template>
      <div class="content">
        <div class="tab-view">
          <el-tabs v-model="activeName" @tab-click="tabsClick">
            <el-tab-pane label="详情" name="first"></el-tab-pane>
            <el-tab-pane label="跟进记录" name="second">
              <!-- <template slot="label">
                <div>跟进记录<el-badge type="primary" :value="2"> </el-badge></div>
              </template> -->
            </el-tab-pane>
          </el-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('address')">
              <i v-if="isAddressExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">地址信息</span>
            </div>
            <div v-show="isAddressExpand" class="basic-info-content">
              <ul>
                <li v-for="(item, i) in addressInfoList" :key="i">
                  <div class="left">
                    <div class="content-title">{{ item.leftStr + "：" }}</div>
                    <div class="content-data">{{ item.leftValue }}</div>
                  </div>
                  <div class="right">
                    <div class="content-title">{{ item.rightStr }}</div>
                    <div class="content-data">{{ item.rightValue }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <!-- 备注信息 -->
          <div class="basic-info">
            <div class="basic-info-label" @click="expandClick('remark')">
              <i v-if="isRemarkExpand" class="el-icon-arrow-down"></i>
              <i v-else class="el-icon-arrow-up"></i>
              <span style="margin-left: 10px">备注信息</span>
            </div>
            <div v-show="isRemarkExpand" class="basic-info-content">
              <ul>
                <li>
                  <div class="left remark">
                    <div class="content-title">{{ "备注：" }}</div>
                    <div class="content-data">{{ "备注内容" }}</div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div v-if="activeName === 'second'" class="second">
          <FollowupRecords :isDetail="true" />
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import FollowupRecords from "@/views/client/followupRecords"
export default {
  name: "DetailSalesLead",
  props: {
    salesLeadDetail: {
      type: Object,
      default: () => {
        return {
          visible: false,
          infomation: {}
        }
      }
    }
  },
  components: { FollowupRecords },
  computed: {},
  data() {
    return {
      detailConfig: this.salesLeadDetail,
      activeName: "first",
      isBasicExpand: true, // 基本信息展开
      basicInfoList: [],
      isDynamicExpand: true, // 动态信息
      dynamicInfoList: [],
      isAddressExpand: true, // 地址信息
      addressInfoList: [],
      isRemarkExpand: true, // 备注信息
      remarkInfoList: []
    }
  },
  created() {
    this.setData()
  },
  mounted() {},
  methods: {
    setData() {
      this.basicInfoList = [
        {
          leftStr: "客户名称",
          leftValue: this.detailConfig.infomation.name,
          rightStr: "销售线索编号",
          rightValue: this.detailConfig.infomation.number
        },
        {
          leftStr: "联系人姓名",
          leftValue: this.detailConfig.infomation.contact_name,
          rightStr: "联系人职务",
          rightValue: this.detailConfig.infomation.contact_position
        },
        {
          leftStr: "手机号码",
          leftValue: this.detailConfig.infomation.contact_phone,
          rightStr: "商机状态",
          rightValue: "新建"
        },
        {
          leftStr: "商机来源",
          leftValue: this.detailConfig.infomation.sales_sources_id,
          rightStr: "负责人",
          rightValue: this.detailConfig.infomation.member_id
        },
        {
          leftStr: "分配日期",
          leftValue: "",
          rightStr: "公海状态",
          rightValue: ""
        },
        {
          leftStr: "创建时间",
          leftValue: "",
          rightStr: "创建人",
          rightValue: ""
        },
        {
          leftStr: "关闭原因",
          leftValue: "",
          rightStr: "签到",
          rightValue: ""
        }
      ]
      this.dynamicInfoList = [
        {
          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 === "address") {
        this.isAddressExpand = !this.isAddressExpand
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.detail-view {
  .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;
    }
  }
  .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 {
              width: 50%;
              display: flex;
              align-items: center;
              height: 40px;
              .content-title {
                width: 220px;
                text-align: right;
                color: #555;
              }
              .content-data {
                text-align: left;
                margin-left: 25px;
                color: #333;
              }
            }
            .remark {
              width: 100%;
            }
          }
        }
      }
    }
    .second {
      background: #fff;
      .followup-records {
        .table-view {
          margin-top: 0 !important;
          margin-bottom: 0;
        }
      }
    }
  }
}
::v-deep {
  .el-drawer__header {
    padding: 0;
    margin-bottom: 0px;
  }
  .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;
  }
}
</style>

 src/views/client/salesLead/index.vue

@@ -1,11 +1,17 @@
<template>
  <div class="sales-lead">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :operates-list="operatesList" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    <div class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
    <TableCommonView ref="tableListRef" :table-list="tableList" @selSalesLeadClick="selSalesLeadClick">
      <template slot="tableButton">
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
@@ -21,6 +27,8 @@
    <AddSalesLeadDialog v-if="editSalesLeadConfig.visible" :edit-sales-lead-config="editSalesLeadConfig" />
    <!-- 导入文件 -->
    <ImportFileDialog v-if="importConfig.visible" :import-file-config="importConfig" />
    <!-- 详情 -->
    <DetailSalesLead v-if="salesLeadDeail.visible" :sales-lead-detail="salesLeadDeail" />
  </div>
</template>

@@ -29,13 +37,15 @@
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
import ImportFileDialog from "@/views/other/commonDialog/ImportFileDialog"
import { getSalesLeadsList, getDeleteSalesLeads } from "@/api/client/salesLead"
import DetailSalesLead from "@/views/client/salesLead/DetailSalesLead"

export default {
  name: "SalesLead",
  props: {},
  components: {
    AddSalesLeadDialog,
    ImportFileDialog
    ImportFileDialog,
    DetailSalesLead
  },
  mixins: [pageMixin],
  computed: {},
@@ -68,6 +78,10 @@
        visible: false,
        title: "新建",
        infomation: {}
      },
      salesLeadDeail: {
        visible: false,
        infomation: {}
      }
    }
  },
@@ -80,7 +94,7 @@
      this.tableList = {
        tableInfomation: [],
        tableColumn: [
          { label: "客户名称", prop: "name", min: 190 }, // 客户名称
          { label: "客户名称", prop: "name", min: 190, isSalesLeadClick: true }, // 客户名称
          { label: "销售线索编号", prop: "number", min: 130 }, // 销售线索编号
          { label: "联系人姓名", prop: "contact_name", min: 130 }, // 联系人姓名
          { label: "手机号码", prop: "contact_phone", min: 130 }, // 手机号码
@@ -158,6 +172,12 @@
    },
    getSelectArray(val) {
      console.log(val)
    },
    // 详情
    selSalesLeadClick(row) {
      console.log(row)
      this.salesLeadDeail.visible = true
      this.salesLeadDeail.infomation = { ...row }
    }
  }
}
@@ -166,10 +186,13 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sales-lead {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
}

 src/views/sales/contractManage/index.vue

@@ -1,19 +1,21 @@
<template>
  <div class="contract-manage">
    <SearchCommonView
      ref="searchCommonView"
      :label-search="true"
      :query-class-options="queryClassOptions"
      :search-options="searchOptions"
    />
    <div class="btn-pager">
      <PublicFunctionBtnView
        :receive="false"
        :submit-approval="true"
        ::statistics="true"
        :operates-list="operatesList"
    <div class="top">
      <SearchCommonView
        ref="searchCommonView"
        :label-search="true"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      <div class="btn-pager">
        <PublicFunctionBtnView
          :receive="false"
          :submit-approval="true"
          ::statistics="true"
          :operates-list="operatesList"
        />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
@@ -174,10 +176,13 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.contract-manage {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
}

 src/views/sales/generatePlan/index.vue

@@ -1,9 +1,15 @@
<template>
  <div class="generate-plan">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :operates-list="operatesList" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    <div class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
@@ -164,10 +170,13 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.generate-plan {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
}

 src/views/sales/masterOrder/index.vue

@@ -1,11 +1,21 @@
<template>
  <div class="master-order">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :operates-list="operatesList" />
    <div v-if="isDetail" class="detail-top">
      <DetailListCommonBtn :query-class-options="queryClassOptions" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    </div>
    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList">
    <div v-else class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList" :select-box="!isDetail">
      <template slot="tableButton">
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
@@ -27,7 +37,12 @@

export default {
  name: "MasterOrder",
  props: {},
  props: {
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  mixins: [pageMixin],
  components: {
    AddMasterOrderDialog
@@ -168,7 +183,16 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.master-order {
  .btn-pager {
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
  .detail-top {
    display: flex;
    .page {
      margin-left: auto;

 src/views/sales/quotation/index.vue

@@ -1,16 +1,22 @@
<template>
  <div class="quotation">
    <SearchCommonView
      ref="searchCommonView"
      :label-search="true"
      :query-class-options="queryClassOptions"
      :search-options="searchOptions"
    />
    <div class="btn-pager">
      <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" />
    <div v-if="isDetail" class="detail-top">
      <DetailListCommonBtn :query-class-options="queryClassOptions" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
    <div v-else class="top">
      <SearchCommonView
        ref="searchCommonView"
        :label-search="true"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList" :select-box="!isDetail">
      <template slot="tableButton">
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
@@ -32,7 +38,12 @@

export default {
  name: "QuotationView",
  props: {},
  props: {
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  mixins: [pageMixin],
  components: {
    AddQuotationDialog
@@ -174,7 +185,16 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.quotation {
  .btn-pager {
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
  .detail-top {
    display: flex;
    .page {
      margin-left: auto;

 src/views/sales/refundForm/index.vue

@@ -1,9 +1,15 @@
<template>
  <div class="refund-form">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :receive="false" :submit-approval="true" :operates-list="operatesList" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    <div class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :receive="false" :submit-approval="true" :operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
@@ -166,10 +172,13 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.refund-form {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
}

 src/views/sales/salesDetails/index.vue

@@ -1,11 +1,21 @@
<template>
  <div class="sales-details">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" />
    <div v-if="isDetail" class="detail-top">
      <DetailListCommonBtn :query-class-options="queryClassOptions" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    </div>
    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList">
    <div v-else class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList" :select-box="!isDetail">
      <template slot="tableButton">
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
@@ -27,7 +37,12 @@

export default {
  name: "SalesDetails",
  props: {},
  props: {
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  mixins: [pageMixin],
  components: {
    AddSalesDetailsDialog
@@ -188,7 +203,16 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sales-details {
  .btn-pager {
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
  .detail-top {
    display: flex;
    .page {
      margin-left: auto;

 src/views/sales/salesOpportunity/index.vue

@@ -1,14 +1,24 @@
<template>
  <div class="sales-opportunity">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView
        :duplicate-check="true"
        :statistics="true"
        :custom-funnel="true"
        :operates-list="operatesList"
      />
    <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"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView
          :duplicate-check="true"
          :statistics="true"
          :custom-funnel="true"
          :operates-list="operatesList"
        />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
@@ -33,7 +43,12 @@

export default {
  name: "SalesOpportunity",
  props: {},
  props: {
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  mixins: [pageMixin],
  components: {
    AddSalesOpportunityDialog
@@ -184,7 +199,16 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sales-opportunity {
  .btn-pager {
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
  .detail-top {
    display: flex;
    .page {
      margin-left: auto;

 src/views/sales/salesReturn/index.vue

@@ -1,9 +1,15 @@
<template>
  <div class="sales-return">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :receive="false" :import-button="false" receive:operates-list="operatesList" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    <div class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :receive="false" :import-button="false" receive:operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
@@ -167,10 +173,13 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sales-return {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
}

 src/views/sales/subOrder/index.vue

@@ -1,11 +1,21 @@
<template>
  <div class="sub-order">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :operates-list="operatesList" />
    <div v-if="isDetail" class="detail-top">
      <DetailListCommonBtn :query-class-options="queryClassOptions" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    </div>
    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList">
    <div v-else class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :show-summary="showSummary" :table-list="tableList" :select-box="!isDetail">
      <template slot="tableButton">
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
@@ -27,7 +37,12 @@

export default {
  name: "SubOrder",
  props: {},
  props: {
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  mixins: [pageMixin],
  components: {
    AddSubOrderDialog
@@ -172,7 +187,16 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sub-order {
  .btn-pager {
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
  .detail-top {
    display: flex;
    .page {
      margin-left: auto;

 src/views/service/orderManage/AddOrderManageDialog.vue

@@ -1,7 +1,7 @@
<template>
  <div class="order-manage">
    <el-dialog
      :title="editCommonConfig.title + '工单管理'"
      :title="editCommonConfig.title + '客户服务单'"
      :visible.sync="editConfig.visible"
      :width="dialogWidth"
      :before-close="handleClose"
@@ -40,17 +40,30 @@
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工单编号" prop="number">
                <el-form-item label="服务单编号" prop="number">
                  <el-input v-model="editConfig.infomation.number"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工单名称" prop="name">
                  <el-input v-model="editConfig.infomation.name"></el-input>
                <el-form-item label="服务合同" prop="name">
                  <div class="custom-name">
                    <el-autocomplete
                      v-model="editConfig.infomation.client_name"
                      :fetch-suggestions="querySearchAsync"
                      value-key="name"
                      @select="handleSelectClient"
                    ></el-autocomplete>
                    <div class="common-select-btn" @click="selClientClick">
                      <i class="el-icon-circle-plus-outline" title="选择"></i>
                    </div>
                    <div class="common-select-btn" @click="clearupClient">
                      <i class="el-icon-edit-outline" title="清除"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工单类型" prop="orderType">
                <el-form-item label="故障类别" prop="orderType">
                  <div class="common-select">
                    <el-select
                      v-model="editConfig.infomation.orderType"
@@ -66,16 +79,113 @@
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人姓名" prop="contactId">
                <el-form-item label="主题" prop="contactId">
                  <el-input v-model="editConfig.infomation.contactId"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同订单" prop="name">
                  <div class="custom-name">
                    <el-input v-model="editConfig.infomation.contactId"></el-input>
                    <div class="common-select-btn"><i class="el-icon-circle-plus-outline" title="选择"></i></div>
                    <div class="common-select-btn"><i class="el-icon-edit" title="编辑"></i></div>
                    <el-autocomplete
                      v-model="editConfig.infomation.client_name"
                      :fetch-suggestions="querySearchAsync"
                      value-key="name"
                      @select="handleSelectClient"
                    ></el-autocomplete>
                    <div class="common-select-btn" @click="selClientClick">
                      <i class="el-icon-circle-plus-outline" title="选择"></i>
                    </div>
                    <div class="common-select-btn" @click="clearupClient">
                      <i class="el-icon-edit-outline" title="清除"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报修来源" prop="reportSourceId">
                <el-form-item label="产品类别" prop="orderType">
                  <div class="common-select">
                    <el-select
                      v-model="editConfig.infomation.orderType"
                      placeholder="请选择"
                      class="common-select-sel"
                      size="mini"
                    >
                      <el-option v-for="item in orderTypeOptions" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <div class="common-select-btn"><i class="el-icon-setting"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="产品名称" prop="name">
                  <div class="custom-name">
                    <el-autocomplete
                      v-model="editConfig.infomation.client_name"
                      :fetch-suggestions="querySearchAsync"
                      value-key="name"
                      @select="handleSelectClient"
                    ></el-autocomplete>
                    <div class="common-select-btn" @click="selClientClick">
                      <i class="el-icon-circle-plus-outline" title="选择"></i>
                    </div>
                    <div class="common-select-btn" @click="clearupClient">
                      <i class="el-icon-edit-outline" title="清除"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="服务方式" prop="orderType">
                  <div class="common-select">
                    <el-select
                      v-model="editConfig.infomation.orderType"
                      placeholder="请选择"
                      class="common-select-sel"
                      size="mini"
                    >
                      <el-option v-for="item in orderTypeOptions" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <div class="common-select-btn"><i class="el-icon-setting"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="服务人员" prop="orderType">
                  <div class="common-select">
                    <el-select
                      v-model="editConfig.infomation.orderType"
                      placeholder="请选择"
                      class="common-select-sel"
                      size="mini"
                    >
                      <el-option v-for="item in orderTypeOptions" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系人姓名" prop="client_name">
                  <div class="custom-name">
                    <el-autocomplete
                      v-model="editConfig.infomation.client_name"
                      :fetch-suggestions="querySearchAsync"
                      value-key="name"
                      @select="handleSelectClient"
                    ></el-autocomplete>
                    <div class="common-select-btn" @click="selClientClick">
                      <i class="el-icon-circle-plus-outline" title="选择"></i>
                    </div>
                    <div class="common-select-btn" @click="clearupClient">
                      <i class="el-icon-edit-outline" title="清除"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="严重程度" prop="reportSourceId">
                  <div class="common-select">
                    <el-select
                      v-model="editConfig.infomation.reportSourceId"
@@ -90,27 +200,192 @@
                  </div>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="选择源单" prop="sourceSheet">
                  <el-select v-model="editConfig.infomation.sourceSheet" size="mini">
                    <el-option
                      v-for="item in sourceSheetOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
              <el-col :span="24">
                <el-form-item label="上门地址" prop="problemDescription">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入内容"
                    v-model="editConfig.infomation.problemDescription"
                  ></el-input>
                </el-form-item>
              </el-col> -->
              </el-col>
              <el-col :span="12">
                <el-form-item label="优先级别" prop="reportSourceId">
                  <div class="common-select">
                    <el-select
                      v-model="editConfig.infomation.reportSourceId"
                      placeholder="请选择"
                      class="common-select-sel"
                      size="mini"
                    >
                      <el-option v-for="item in reportSourceOptions" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <div class="common-select-btn"><i class="el-icon-setting"></i></div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预约上门时间" prop="startTime">
                  <el-date-picker v-model="editConfig.infomation.startTime" type="datetime" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="销售机会" prop="client_name">
                  <div class="custom-name">
                    <el-autocomplete
                      v-model="editConfig.infomation.client_name"
                      :fetch-suggestions="querySearchAsync"
                      value-key="name"
                      @select="handleSelectClient"
                    ></el-autocomplete>
                    <div class="common-select-btn" @click="selClientClick">
                      <i class="el-icon-circle-plus-outline" title="选择"></i>
                    </div>
                    <div class="common-select-btn" @click="clearupClient">
                      <i class="el-icon-edit-outline" title="清除"></i>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 动态信息 -->
          <div class="basic-info-title">动态信息</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="希望处理时间" prop="startTime">
                  <el-date-picker v-model="editConfig.infomation.startTime" type="datetime" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="实际处理时间" prop="startTime">
                  <el-date-picker v-model="editConfig.infomation.startTime" type="datetime" placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="交通费" prop="reportSourceId">
                  <el-input v-model="editConfig.infomation.problemDescription"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收费金额" prop="reportSourceId">
                  <el-input v-model="editConfig.infomation.problemDescription"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="花费时间" prop="reportSourceId">
                  <div class="common-select">
                    <el-select
                      v-model="editConfig.infomation.reportSourceId"
                      placeholder="请选择"
                      class="common-select-sel"
                      size="mini"
                    >
                      <el-option v-for="item in reportSourceOptions" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <div class="common-select-btn"><i class="el-icon-setting"></i></div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 时间/金额 -->
          <div class="basic-info-title">时间/金额</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="常见问题" prop="problemDescription">
                  <el-input v-model="editConfig.infomation.problemDescription"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="问题描述" prop="problemDescription">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入内容"
                    v-model="editConfig.infomation.problemDescription"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 定位地址 -->
          <div class="basic-info-title">定位地址</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="24">
                <el-form-item label="定位" prop="position">
                  <el-input v-model="editConfig.infomation.position"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="地图" prop="map">
                  <div style="height: 100px"></div>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 问题描述 -->
          <div class="basic-info-title">问题描述</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="12">
                <el-form-item label="常见问题" prop="problemDescription">
                  <el-input v-model="editConfig.infomation.problemDescription"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="问题描述" prop="problemDescription">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入内容"
                    v-model="editConfig.infomation.problemDescription"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 解决方法 -->
          <div class="basic-info-title">解决方法</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="24">
                <el-form-item label="解决方法" prop="problemDescription">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入内容"
                    v-model="editConfig.infomation.problemDescription"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="内部备注" prop="problemDescription">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
                    placeholder="请输入内容"
                    v-model="editConfig.infomation.problemDescription"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <!-- 备注 -->
          <div class="basic-info-title">备注</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="24">
                <el-form-item label="备注" prop="problemDescription">
                  <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4 }"
@@ -148,46 +423,40 @@
              </el-col>
            </el-row>
          </div>
          <!-- 选择审批流程 -->
          <!-- <div class="basic-info-title">选择审批流程</div>
          <div class="basic-info-view">
            <el-row>
              <el-col :span="20">
                <el-form-item label="审批流程" prop="approvalWorkflow">
                  <el-select
                    v-model="editConfig.infomation.approvalWorkflow"
                    placeholder="请选择"
                    size="mini"
                    style="width: 100%"
                  >
                    <el-option
                      v-for="item in approvalWorkflowOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="审批步骤" prop="approvalSteps">
                  <el-input v-model="editConfig.infomation.approvalSteps"></el-input>
                </el-form-item>
              </el-col>
              \
              <el-col :span="20">
                <el-form-item label="审批人" prop="approvalPerson">
                  <el-input v-model="editConfig.infomation.approvalPerson"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-form-item label="审批意见" prop="approvalOpinion">
                  <el-input v-model="editConfig.infomation.approvalOpinion" type="textarea" :rows="2"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div> -->
          <!-- 客户服务单历史记录 -->
          <div v-if="editConfig.title === '编辑'" class="basic-info">
            <div class="basic-info-label" @click="expandClick('record')">
              <i v-if="isRecordExpand" 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="isRecordExpand" class="basic-info-content">
              <div class="list" v-if="recordTableList.length > 0">
                <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
                <TableCommonView
                  ref="recordTableListRef"
                  :select-box="false"
                  :table-list="recordTableList"
                ></TableCommonView>
              </div>
              <div class="no-data" v-else>没有找到任何记录</div>
            </div>
          </div>
          <!-- 服务合同信息 -->
          <div v-if="editConfig.title === '编辑'" class="basic-info">
            <div class="basic-info-label" @click="expandClick('contract')">
              <i v-if="isConttractExpand" 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="isConttractExpand" class="basic-info-content">
              <div class="list" v-if="recordTableList.length > 0">
                <PagerView class="page" :pager-options="pagerOptions1" v-on="pagerEvents" />
                <TableCommonView ref="tableListRef" :select-box="false" :table-list="tableList"></TableCommonView>
              </div>
              <div class="no-data" v-else>没有找到任何记录</div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
@@ -209,8 +478,10 @@
import { getAllData } from "@/api/client/client"
import { getAddOrderManage, getUpdateOrderManage } from "@/api/serviceManage/orderManage"
import SelectClientDialog from "@/views/other/commonDialog/SelectClientDialog"
import pageMixin from "@/components/makepager/pager/mixin/pageMixin"
export default {
  name: "AddOrderManageDialog",
  mixins: [pageMixin],
  props: {
    editCommonConfig: {
      type: Object,
@@ -253,14 +524,43 @@
        editVisible: false,
        title: "",
        infomation: {}
      },
      isRecordExpand: true,
      recordTableList: {},
      pagerOptions: {
        currPage: 1,
        pageSize: 5,
        totalCount: 0
      },
      isConttractExpand: true,
      tableList: {},
      pagerOptions1: {
        currPage: 1,
        pageSize: 5,
        totalCount: 0
      }
    }
  },
  created() {
    this.$store.dispatch("geClient")
    this.getCommonData()
    this.setTable()
  },
  methods: {
    setTable() {
      this.recordTableList = {
        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" }
        ]
      }
    },
    getCommonData() {
      getAllData()
        .then((res) => {
@@ -367,7 +667,16 @@
    // 添加附件
    addAnnexClick() {},
    // 设置允许上传文件格式
    setFormatClick() {}
    setFormatClick() {},
    // 展开收起点击事件
    expandClick(value) {
      console.log(value)
      if (value === "record") {
        this.isRecordExpand = !this.isRecordExpand
      } else if (value === "contract") {
        this.isConttractExpand = !this.isConttractExpand
      }
    }
  }
}
</script>
@@ -408,6 +717,29 @@
        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;

 src/views/service/orderManage/index.vue

@@ -1,18 +1,17 @@
<template>
  <div class="sales-lead">
    <div class="tab-view">
      <el-tabs v-model="activeName" @tab-click="tabsClick">
        <el-tab-pane label="全部" name="first"></el-tab-pane>
        <el-tab-pane label="待分配" name="second"></el-tab-pane>
        <el-tab-pane label="已催单" name="third"></el-tab-pane>
        <el-tab-pane label="处理中" name="fourth"></el-tab-pane>
        <el-tab-pane label="已结单" name="aaa"></el-tab-pane>
      </el-tabs>
    </div>
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :receive="true" :submit-approval="true" :operates-list="operatesList" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    <!-- <div class="detail-top">
    </div> -->
    <div class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :receive="true" :submit-approval="true" :operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
@@ -50,13 +49,7 @@
    return {
      activeName: "first",
      tableList: {},
      queryClassOptions: [
        { value: "1", label: "全部" },
        { value: "2", label: "小程序报修" },
        { value: "3", label: "面访报修" },
        { value: "4", label: "今日内创建" },
        { value: "5", label: "三天内创建" }
      ],
      queryClassOptions: [{ value: "1", label: "本月上门" }],
      searchOptions: [],
      operatesList: [
        { id: "1", name: "共享" },
@@ -84,13 +77,14 @@
      this.tableList = {
        tableInfomation: [],
        tableColumn: [
          { label: "工单编号", prop: "number", min: 100 }, // 工单编号
          { label: "服务单编号", prop: "number", min: 100 }, // 服务单编号
          { label: "主题", prop: "name" }, // 主题
          { label: "客户名称", prop: "clientId", min: 130 }, // 客户名称
          { label: "联系人姓名", prop: "contactName" }, // 联系人姓名
          { label: "实际处理时间", prop: "contactName" }, // 实际处理时间
          { label: "服务人员", prop: "name" }, // 服务人员
          { label: "工单状态", prop: "orderType" }, // 工单状态
          { label: "报修来源", prop: "reportSourceId" }, // 报修来源
          { label: "工单类型", prop: "orderType" } // 工单类型
          { label: "服务方式", prop: "orderType" }, // 服务方式
          { label: "产品类别", prop: "reportSourceId" }, // 产品类别
          { label: "故障类别", prop: "orderType" } // 故障类别
        ]
      }
      this.searchOptions = []
@@ -179,10 +173,13 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sales-lead {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
}

 src/views/service/serviceContract/index.vue

@@ -1,11 +1,21 @@
<template>
  <div class="service-contract">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" />
    <div v-if="isDetail" class="detail-top">
      <DetailListCommonBtn :query-class-options="queryClassOptions" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
    <div v-else class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :submit-approval="true" :operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList" :select-box="!isDetail">
      <template slot="tableButton">
        <el-table-column label="操作" width="90">
          <template slot-scope="scope">
@@ -27,7 +37,12 @@

export default {
  name: "ServiceContract",
  props: {},
  props: {
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  mixins: [pageMixin],
  components: {
    AddServiceContractDialog
@@ -169,7 +184,16 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.service-contract {
  .btn-pager {
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
  .detail-top {
    display: flex;
    .page {
      margin-left: auto;

 src/views/service/serviceFollowup/index.vue

@@ -1,9 +1,15 @@
<template>
  <div class="sales-lead">
    <SearchCommonView ref="searchCommonView" :query-class-options="queryClassOptions" :search-options="searchOptions" />
    <div class="btn-pager">
      <PublicFunctionBtnView :import-button="false" :operates-list="operatesList" />
      <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
    <div class="top">
      <SearchCommonView
        ref="searchCommonView"
        :query-class-options="queryClassOptions"
        :search-options="searchOptions"
      />
      <div class="btn-pager">
        <PublicFunctionBtnView :import-button="false" :operates-list="operatesList" />
        <PagerView class="page" :pager-options="pagerOptions" v-on="pagerEvents" />
      </div>
    </div>
    <TableCommonView ref="tableListRef" :table-list="tableList">
      <template slot="tableButton">
@@ -159,10 +165,13 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.sales-lead {
  .btn-pager {
    display: flex;
    .page {
      margin-left: auto;
  .top {
    margin-bottom: 20px;
    .btn-pager {
      display: flex;
      .page {
        margin-left: auto;
      }
    }
  }
}