index.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <div class="app-container">
  3. <!-- 搜索区域 -->
  4. <div class="filter-container">
  5. <div class="filter-control">
  6. <span>供应商名称:</span>
  7. <el-input v-model="listQuery.shopName" placeholder="供应商名称" @keyup.enter.native="getList" />
  8. </div>
  9. <div class="filter-control">
  10. <span>供应商类型:</span>
  11. <el-select v-model="listQuery.shopType" placeholder="供应商类型" clearable @change="getList">
  12. <el-option label="所有类型" value="" />
  13. <el-option label="代理商" :value="2" />
  14. <el-option label="品牌方" :value="1" />
  15. </el-select>
  16. </div>
  17. <div class="filter-control">
  18. <span>手机号:</span>
  19. <el-input v-model="listQuery.mobile" placeholder="手机号" @keyup.enter.native="getList" />
  20. </div>
  21. <div class="filter-control">
  22. <span>审核状态:</span>
  23. <el-select v-model="listQuery.lowerAuditStatus" placeholder="审核状态" clearable @change="getList">
  24. <el-option label="全部" value="" />
  25. <el-option label="已完成审核" :value="1" />
  26. <el-option label="未完成审核" :value="0" />
  27. </el-select>
  28. </div>
  29. <div class="filter-control">
  30. <span>联系人:</span>
  31. <el-input v-model="listQuery.linkMan" placeholder="联系人" @keyup.enter.native="getList" />
  32. </div>
  33. <div class="filter-control">
  34. <el-button type="primary" @click="getList">查询</el-button>
  35. </div>
  36. </div>
  37. <!-- 搜索区域END -->
  38. <!-- 表格区域 -->
  39. <el-table
  40. v-loading="listLoading"
  41. :data="list"
  42. style="width: 100%"
  43. border
  44. fit
  45. highlight-current-row
  46. header-row-class-name="tableHeader"
  47. cell-class-name="table-cell"
  48. >
  49. <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center" />
  50. <el-table-column prop="name" label="供应商名称" align="center" />
  51. <el-table-column label="供应商类型" width="150px" align="center">
  52. <template slot-scope="{ row }">
  53. <span v-if="row.shopType === 1">品牌方</span>
  54. <span v-if="row.shopType === 2">代理商</span>
  55. </template>
  56. </el-table-column>
  57. <el-table-column prop="mobile" label="手机号" width="200px" align="center" />
  58. <el-table-column prop="linkMan" label="联系人" width="200px" align="center" />
  59. <el-table-column label="审核状态" width="220px" align="center">
  60. <template slot-scope="{ row }">
  61. <span v-if="row.lowerAuditStatus === 0" class="status warning">未完成审核</span>
  62. <span v-if="row.lowerAuditStatus === 1" class="status success">已完成审核</span>
  63. </template>
  64. </el-table-column>
  65. <el-table-column label="操作" width="260px" align="center">
  66. <template slot-scope="{ row }">
  67. <el-badge :hidden="row.lowerAuditStatus === 1" :value="row.doctorWaitNum" :max="99">
  68. <el-button type="primary" size="mini" @click="goAuditList(row, 'operate')">操作师审核</el-button>
  69. </el-badge>
  70. <el-badge :hidden="row.lowerAuditStatus === 1" :value="row.doctorWaitNum" :max="99">
  71. <el-button type="primary" size="mini" @click="goAuditList(row, 'training')">培训师审核</el-button>
  72. </el-badge>
  73. </template>
  74. </el-table-column>
  75. </el-table>
  76. <!-- 表格区域END -->
  77. <!-- 页码 -->
  78. <pagination
  79. :total="total"
  80. :page.sync="listQuery.pageNum"
  81. :limit.sync="listQuery.pageSize"
  82. @pagination="getList(listQuery)"
  83. />
  84. </div>
  85. </template>
  86. <script>
  87. import { fetchSupplierList } from '@/api/supplier'
  88. export default {
  89. data() {
  90. return {
  91. listQuery: {
  92. listType: 4,
  93. brandId: '', // 品牌id
  94. linkMan: '', // 联系人
  95. mobile: '', // 手机号
  96. pageNum: 0, // 页码
  97. pageSize: 10, // 分页大小
  98. shopName: '', // 供应商名称
  99. shopType: '', // 供应商类型
  100. lowerAuditStatus: ''
  101. },
  102. listLoading: false,
  103. list: [],
  104. total: 0
  105. }
  106. },
  107. created() {
  108. this.getList()
  109. },
  110. methods: {
  111. goAuditList(row, type) {
  112. const url = `personnel/${type}/doctor-list?authUserId=${row.authUserId}`
  113. this.$router.push(url)
  114. },
  115. // 获取供应商列表
  116. getList() {
  117. this.listLoading = true
  118. fetchSupplierList(this.listQuery)
  119. .then((res) => {
  120. if (res.code !== 0) return
  121. this.list = res.data.list
  122. this.total = res.data.total
  123. })
  124. .finally(() => {
  125. this.listLoading = false
  126. })
  127. },
  128. indexMethod(index) {
  129. return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
  130. }
  131. }
  132. }
  133. </script>
  134. <style lang="scss" scoped>
  135. .el-table .cell {
  136. overflow: visible;
  137. }
  138. .el-badge {
  139. margin: 0 6px;
  140. }
  141. </style>