categoryList.vue 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <template>
  2. <div class="categoryList-wrap">
  3. <div ref="tableSearch" v-if="showTable" class="table-page-search-wrapper">
  4. <a-form-model
  5. ref="ruleForm"
  6. class="form-model-con"
  7. layout="inline"
  8. :model="queryParam"
  9. @keyup.enter.native="handleSearch">
  10. <a-row :gutter="15">
  11. <a-col :md="6" :sm="24">
  12. <a-form-item label="品牌分类">
  13. <v-select
  14. code="BRAND_TYPE"
  15. v-model="queryParam.productBrandType"
  16. allowClear
  17. placeholder="请选择品牌分类"></v-select>
  18. </a-form-item>
  19. </a-col>
  20. <a-col :md="6" :sm="24">
  21. <a-form-model-item label="品牌">
  22. <ProductBrand v-model="queryParam.productBrandSn"></ProductBrand>
  23. </a-form-model-item>
  24. </a-col>
  25. <a-col :md="6" :sm="24">
  26. <a-form-model-item label="产品分类">
  27. <ProductType placeholder="请选择产品分类" @change="changeProductType" v-model="productType"></ProductType>
  28. </a-form-model-item>
  29. </a-col>
  30. <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
  31. <a-button type="primary" @click="handleSearch">查询</a-button>
  32. <a-button style="margin-left: 5px" @click="resetSearchForm">重置</a-button>
  33. </a-col>
  34. </a-row>
  35. </a-form-model>
  36. </div>
  37. <a-spin :spinning="spinning" tip="Loading...">
  38. <ve-table
  39. v-show="!showEmpty"
  40. border-y
  41. :scroll-width="0"
  42. :max-height="tableHeight"
  43. :row-style-option="{clickHighlight: true}"
  44. :cellSelectionOption="{enable: false}"
  45. :virtual-scroll-option="{enable: true}"
  46. :columns="columns"
  47. :table-data="dataSource"
  48. row-key-field-name="id"
  49. :cell-style-option="cellStyleOption"
  50. :checkbox-option="checkboxOption"
  51. />
  52. <div v-show="showEmpty" class="empty-data"><a-empty description="暂无品类" :image="simpleImage"/></div>
  53. </a-spin>
  54. </div>
  55. </template>
  56. <script>
  57. import { commonMixin } from '@/utils/mixin'
  58. import { VSelect } from '@/components'
  59. import { dealerUpsPlQuery } from '@/api/dealer'
  60. import { Empty } from 'ant-design-vue'
  61. import ProductBrand from '@/views/common/productBrand.js'
  62. import ProductType from '@/views/common/productType.js'
  63. export default {
  64. name: 'DetailProductList',
  65. mixins: [commonMixin],
  66. components: { VSelect, ProductType, ProductBrand },
  67. props: {
  68. newLoading: {
  69. type: Boolean,
  70. default: false
  71. },
  72. maxHeight: {
  73. type: [String, Number],
  74. default: '300'
  75. },
  76. showTable: {
  77. type: Boolean,
  78. default: false
  79. }
  80. },
  81. data () {
  82. return {
  83. disabled: false, // 查询、重置按钮是否可操作
  84. spinning: false,
  85. simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
  86. dataSource: [],
  87. tableHeight: this.maxHeight,
  88. cellStyleOption: {
  89. bodyCellClass: ({ row, column, rowIndex }) => {
  90. if (row.id.indexOf('promo-') >= 0 && column.field === 'no') {
  91. return 'table-body-cell-no'
  92. }
  93. }
  94. },
  95. columnWidthResizeOption: {
  96. // default false
  97. enable: true,
  98. // column resize min width
  99. minWidth: 50
  100. },
  101. showEmpty: true,
  102. disableSelectedRowKeys: [],
  103. selectedRowKeys: [],
  104. productType: [],
  105. queryParam: { // 查询条件
  106. productBrandType: undefined,
  107. productBrandSn: undefined,
  108. productTypeSn1: undefined,
  109. productTypeSn2: undefined,
  110. productTypeSn3: undefined
  111. },
  112. dealerSn: undefined
  113. }
  114. },
  115. computed: {
  116. checkboxOption () {
  117. return {
  118. disableSelectedRowKeys: this.disableSelectedRowKeys,
  119. selectedRowKeys: this.selectedRowKeys,
  120. // 行选择改变事件
  121. selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
  122. this.selectedRowChange({ row, isSelected, selectedRowKeys })
  123. },
  124. // 全选改变事件
  125. selectedAllChange: ({ isSelected, selectedRowKeys }) => {
  126. this.selectedAllChange({ isSelected, selectedRowKeys })
  127. }
  128. }
  129. },
  130. columns () {
  131. const arr = [
  132. // { title: '序号', field: 'no', key: 'a', width: 60, align: 'center', operationColumn: false },
  133. { title: '', field: '', key: 'acheck', width: 40, type: 'checkbox', align: 'center' },
  134. { title: '品牌', field: 'productBrandName', key: 'b', width: 100, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  135. { title: '一级分类', field: 'productTypeName1', key: 'e', width: 180, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  136. { title: '二级分类', field: 'productTypeName2', width: 180, key: 'i', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  137. { title: '三级分类', field: 'productTypeName3', width: 180, key: 'm', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } }
  138. ]
  139. return arr
  140. }
  141. },
  142. methods: {
  143. // 查询品类列表
  144. handleSearch () {
  145. if (this.detailData && this.detailData.upsPriceLevel && this.detailData.upsDealerSn) {
  146. this.searchTable()
  147. } else {
  148. this.$message.info('请选择上级经销商及其价格级别')
  149. }
  150. },
  151. // 产品分类 change
  152. changeProductType (val, opt) {
  153. this.queryParam.productTypeSn1 = val[0] ? val[0] : ''
  154. this.queryParam.productTypeSn2 = val[1] ? val[1] : ''
  155. this.queryParam.productTypeSn3 = val[2] ? val[2] : ''
  156. },
  157. // 重置查询筛选表单
  158. resetSearchForm () {
  159. this.queryParam.productBrandType = undefined
  160. this.queryParam.productBrandSn = undefined
  161. this.queryParam.productTypeSn1 = undefined
  162. this.queryParam.productTypeSn2 = undefined
  163. this.queryParam.productTypeSn3 = undefined
  164. this.productType = []
  165. this.dataSource = []
  166. this.clearSelectTable()
  167. this.handleSearch()
  168. },
  169. // 清空选项
  170. clearSelectTable () {
  171. this.selectedRowKeys = []
  172. },
  173. // 选择单元格
  174. selectedRowChange ({ row, isSelected, selectedRowKeys }) {
  175. // console.log(row, isSelected, selectedRowKeys);
  176. this.selectedRowKeys = selectedRowKeys
  177. },
  178. // 全选行
  179. selectedAllChange ({ isSelected, selectedRowKeys }) {
  180. // console.log(isSelected, selectedRowKeys)
  181. this.selectedRowKeys = selectedRowKeys
  182. },
  183. // 获取已选数据
  184. getChooseData () {
  185. const result = []
  186. if (this.selectedRowKeys.length) {
  187. const rows = this.dataSource.filter(item => this.selectedRowKeys.includes(item.id))
  188. if (rows) {
  189. rows.map(item => {
  190. result.push({
  191. dealerSn: item.dealerSn,
  192. priceLevel: item.priceLevel,
  193. parentScopeSn: item.dealerScopeSn,
  194. productBrandSn: item.productBrandSn,
  195. productTypeSn1: item.productTypeSn1,
  196. productTypeSn2: item.productTypeSn2,
  197. productTypeSn3: item.productTypeSn3
  198. })
  199. })
  200. }
  201. }
  202. console.log(result)
  203. return result
  204. },
  205. async searchTable () {
  206. this.selectedRowKeys = []
  207. this.disableSelectedRowKeys = []
  208. this.dataSource = []
  209. this.disabled = true
  210. this.spinning = true
  211. const params = { ...this.detailData }
  212. params.dealerScope = { dealerSn: this.dealerSn, ...this.queryParam }
  213. console.log(params)
  214. // 品类列表
  215. const listData = await dealerUpsPlQuery(params).then(res => res.data)
  216. this.dataSource = listData
  217. // 格式化数据
  218. this.dataSource.map((item, i) => {
  219. item.no = i + 1
  220. })
  221. this.showEmpty = this.dataSource.length <= 0
  222. this.tableHeight = (this.showEmpty ? 0 : this.maxHeight) + 'px'
  223. this.spinning = false
  224. this.disabled = false
  225. },
  226. pageInit (detailData, dealerSn) {
  227. this.detailData = detailData
  228. this.dealerSn = dealerSn
  229. // 获取列表
  230. this.resetSearchForm()
  231. }
  232. }
  233. }
  234. </script>
  235. <style lang="less">
  236. .empty-data{
  237. color: #999;
  238. text-align: center;
  239. padding: 20px;
  240. }
  241. .ve-table-body-td{
  242. .active-title{
  243. display: flex;
  244. align-items: center;
  245. justify-content: space-between;
  246. padding: 10px;
  247. background: #f3f8fa;
  248. }
  249. }
  250. .ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-body-tr td.table-body-cell-no,
  251. .ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content tbody.ve-table-body tr.ve-table-expand-tr td.table-body-cell-no{
  252. padding: 0;
  253. }
  254. .ve-table .ve-table-container .ve-table-content-wrapper{
  255. border-bottom: 1px solid #ddd;
  256. }
  257. </style>