highseas.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <div class="hui-flex hui-content">
  3. <div class="hui-content-title">
  4. <div class="hui-title-item active">公海客户</div>
  5. </div>
  6. <div class="hui-flex-box hui-flex hui-table">
  7. <list-filter type="highseas" @filter="filterInit"></list-filter>
  8. <div class="hui-flex-box">
  9. <el-table :data="tableData" row-key="id" border height="100%">
  10. <el-table-column label="序号" width="50">
  11. <template slot-scope="scope">
  12. <div style="text-align: center;">{{scope.$index + 1}}</div>
  13. </template>
  14. </el-table-column>
  15. <el-table-column label="关注房源">
  16. <template slot-scope="scope">
  17. <div class="hui-ellipsis" v-for="(item,index) in scope.row.roomMap" :key="index">
  18. {{item}}
  19. </div>
  20. </template>
  21. </el-table-column>
  22. <el-table-column label="客户类型">
  23. <template slot-scope="scope">
  24. <span>{{$field.findTypeName('customerType',scope.row.type)}}</span>
  25. </template>
  26. </el-table-column>
  27. <el-table-column label="客户名称" prop="name"></el-table-column>
  28. <el-table-column label="客户行业" prop="customerIndustry"></el-table-column>
  29. <el-table-column label="联系人" prop="person"></el-table-column>
  30. <el-table-column label="联系电话" prop="phone"></el-table-column>
  31. <el-table-column label="职位" prop="job"></el-table-column>
  32. <el-table-column label="来访渠道" prop="visitingChannels"></el-table-column>
  33. <el-table-column label="操作" width="200">
  34. <template slot-scope="scope">
  35. <div class="hui-table-operation">
  36. <span class="table-operation" @click="lookProject(scope.row)">详情</span>
  37. </div>
  38. </template>
  39. </el-table-column>
  40. <template slot="empty">
  41. <empty description="暂无数据"></empty>
  42. </template>
  43. </el-table>
  44. </div>
  45. <div class="hui-content-pagination">
  46. <el-pagination :page-size="pageSize" :pager-count="9" layout="prev, pager, next" :total="totalCount"
  47. @current-change="currentChange">
  48. </el-pagination>
  49. </div>
  50. </div>
  51. <el-drawer title="客户详情" :visible.sync="drawer" :size="400" :append-to-body="true">
  52. <detail v-if="drawer" :detailId="detailId"></detail>
  53. </el-drawer>
  54. </div>
  55. </template>
  56. <script>
  57. import {
  58. getCustomerListByPage
  59. } from '@/httpApi/crm'
  60. import detail from '@/components/work/crm/customer/detail'
  61. import listFilter from '@/components/common/listFilter'
  62. export default {
  63. data() {
  64. return {
  65. tableData: [],
  66. currPage: 1,
  67. pageSize: 10,
  68. totalCount: 0,
  69. drawer: false,
  70. detailId: '',
  71. filterOption: {}
  72. }
  73. },
  74. created() {
  75. this.init();
  76. },
  77. methods: {
  78. init() {
  79. let postData = {
  80. currPage: this.currPage,
  81. pageSize: this.pageSize,
  82. organizationId: this.$store.getters.organization.id,
  83. highSeas: 1
  84. }
  85. postData = Object.assign(postData, this.filterOption);
  86. getCustomerListByPage(postData).then(res => {
  87. if (res.state) {
  88. this.tableData = res.data.dataList;
  89. this.totalCount = res.data.totalCount;
  90. }
  91. })
  92. },
  93. filterInit(option) {
  94. this.filterOption = option;
  95. this.currPage = 1;
  96. this.init();
  97. },
  98. currentChange(currPage) {
  99. this.currPage = currPage;
  100. this.init();
  101. },
  102. lookProject(val) {
  103. this.detailId = val.id;
  104. this.drawer = true;
  105. },
  106. lookHouse() {
  107. }
  108. },
  109. components: {
  110. detail,
  111. listFilter
  112. },
  113. }
  114. </script>
  115. <style lang="scss">
  116. </style>