categoryList.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. <template>
  2. <div class="categoryList-wrap" :style="{minHeight:maxHeight+'px'}">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <ve-table
  5. border-y
  6. v-show="!showEmpty"
  7. :scroll-width="0"
  8. :row-style-option="{clickHighlight: true}"
  9. :cellSelectionOption="{enable: false}"
  10. :virtual-scroll-option="{enable: false}"
  11. :columns="columns"
  12. :table-data="list"
  13. row-key-field-name="id"
  14. :expand-option="expandOption"
  15. />
  16. <div v-show="showEmpty" class="empty-data" :style="{height:maxHeight+'px'}"><a-empty description="暂无数据" :image="simpleImage"/></div>
  17. </a-spin>
  18. </div>
  19. </template>
  20. <script>
  21. import { commonMixin } from '@/utils/mixin'
  22. import { VSelect } from '@/components'
  23. import { dealerUpsList, dealerUpsDelete } from '@/api/dealer'
  24. import { Empty } from 'ant-design-vue'
  25. // 子表格
  26. const ChildTableComp = {
  27. name: 'ChildTableComp',
  28. template: `
  29. <div class="child-table-comp">
  30. <ve-table
  31. v-if="row.childData.length>0"
  32. :row-style-option="{clickHighlight: true, stripe: true}"
  33. :cellSelectionOption="{enable: false}"
  34. :scroll-width="0"
  35. :max-height="row.childData.length*30>300?300:row.childData.length*30+31"
  36. row-key-field-name="id"
  37. :virtual-scroll-option="{enable: true}"
  38. :columns="columns"
  39. :table-data="row.childData"
  40. />
  41. <a-empty v-else description="暂无品类" :image="simpleImage"/>
  42. </div>
  43. `,
  44. props: {
  45. row: Object
  46. },
  47. data () {
  48. return {
  49. simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
  50. columns: [
  51. { title: '序号', field: 'no', key: 'a', width: 40, align: 'center', operationColumn: false },
  52. { title: '品牌', field: 'productBrandName', key: 'b', width: 100, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  53. { title: '一级分类', field: 'productTypeName1', key: 'e', width: 180, align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  54. { title: '二级分类', field: 'productTypeName2', width: 180, key: 'i', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  55. { title: '三级分类', field: 'productTypeName3', width: 180, key: 'm', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } }
  56. ]
  57. }
  58. }
  59. }
  60. export default {
  61. name: 'DetailProductList',
  62. mixins: [commonMixin],
  63. components: { VSelect },
  64. props: {
  65. newLoading: {
  66. type: Boolean,
  67. default: false
  68. },
  69. maxHeight: {
  70. type: [String, Number],
  71. default: '300'
  72. }
  73. },
  74. data () {
  75. return {
  76. disabled: false, // 查询、重置按钮是否可操作
  77. spinning: false,
  78. simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
  79. dataSource: [],
  80. list: [],
  81. tableHeight: this.maxHeight,
  82. columnWidthResizeOption: {
  83. // default false
  84. enable: true,
  85. // column resize min width
  86. minWidth: 50
  87. },
  88. expandOption: {
  89. defaultExpandAllRows: false,
  90. expandedRowKeys: [],
  91. render: ({ row, column, rowIndex }, h) => {
  92. return <ChildTableComp row={row} />
  93. },
  94. // 重新赋值处理
  95. afterExpandRowChange: ({ afterExpandedRowKeys, row, rowIndex }) => {
  96. this.changeExpandedRowKeys(afterExpandedRowKeys)
  97. }
  98. },
  99. showEmpty: true,
  100. checkedDealerSn: [],
  101. isTeyue: false
  102. }
  103. },
  104. computed: {
  105. columns () {
  106. const _this = this
  107. // 差价归属
  108. const jcgsFormat = function (record, data, h) {
  109. const colors = { 'ASSIGN': '#00aaff', 'SUPERIORS': '#ff0000', 'HEAD': '#55aa7f' }
  110. if (data) {
  111. return (
  112. data.map(item => {
  113. return (
  114. <a-tag style="margin:5px;" color={colors[item.rebateParentType]}>{item.parentDealer.dealerName}({Number(item.allotRate * 100).toFixed(2) + '%'})</a-tag>
  115. )
  116. })
  117. )
  118. }
  119. return '--'
  120. }
  121. // 操作按钮
  122. const actionFormat = function (record, data, h) {
  123. return (
  124. <div>
  125. <a-button
  126. size="small"
  127. type="link"
  128. class="button-info"
  129. onClick={(e) => _this.handleEdit(record, e)}
  130. >编辑</a-button>
  131. <a-button
  132. size="small"
  133. type="link"
  134. class="button-error"
  135. onClick={(e) => _this.handleDel(record, e)}
  136. >删除</a-button>
  137. </div>
  138. )
  139. }
  140. const expendFormat = function (record, data, h) {
  141. if (_this.isTeyue) {
  142. return (<span>-</span>)
  143. }
  144. const hasExpend = _this.expandOption.expandedRowKeys.indexOf(record.id)
  145. if (hasExpend >= 0) {
  146. return (
  147. <span style="cursor:pointer;">收起</span>
  148. )
  149. }
  150. return (
  151. <span style="cursor:pointer;">展开</span>
  152. )
  153. }
  154. const arr = [
  155. { field: '', key: 'x', type: (this.isTeyue ? '-' : 'expand'), title: '品类', width: '5%', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return expendFormat(row, row[column.field], h) } },
  156. { title: '上级经销商', field: 'superDealerName', width: '20%', key: 'h', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return row[column.field] || '--' } },
  157. { title: '差价归属方', field: 'rebateDealerList', width: '65%', key: 'k', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return jcgsFormat(row, row[column.field], h) } },
  158. { title: '操作', field: 'action', width: '10%', key: 's', align: 'center', operationColumn: false, renderBodyCell: ({ row, column, rowIndex }, h) => { return actionFormat(row, row[column.field], h) } }
  159. ]
  160. return arr
  161. }
  162. },
  163. methods: {
  164. // 给可控属性重新赋值
  165. changeExpandedRowKeys (keys) {
  166. this.expandOption.expandedRowKeys = keys
  167. },
  168. // 展开全部
  169. expandAll () {
  170. this.expandOption.expandedRowKeys = this.list.map((x) => x.id)
  171. },
  172. // 折叠全部
  173. foldAll () {
  174. this.expandOption.expandedRowKeys = []
  175. },
  176. // 筛选数据
  177. filterData (data, queryParam) {
  178. return data.filter(s => {
  179. let cs = true
  180. let bs = true
  181. const plen = Object.keys(queryParam).length
  182. const xi = queryParam.productBrandSn ? 3 : 2
  183. bs = queryParam.productBrandSn ? s.productBrandSn == queryParam.productBrandSn : true
  184. if (plen == xi) {
  185. cs = queryParam.productTypeSn1 == s.productTypeSn1
  186. } else if (plen == xi + 1) {
  187. cs = queryParam.productTypeSn1 == s.productTypeSn1 && queryParam.productTypeSn2 == s.productTypeSn2
  188. } else if (plen == xi + 2) {
  189. cs = queryParam.productTypeSn1 == s.productTypeSn1 && queryParam.productTypeSn2 == s.productTypeSn2 && queryParam.productTypeSn3 == s.productTypeSn3
  190. }
  191. console.log(queryParam, bs, cs, xi, plen)
  192. return queryParam.productBrandSn ? bs && cs : cs
  193. })
  194. },
  195. // 组装数据
  196. formatData (listData, queryParam) {
  197. // 格式化数据
  198. const ret = []
  199. const no = 0
  200. for (let i = 0; i < listData.length; i++) {
  201. const item = listData[i]
  202. const rebateScopeList = item.rebateScopeList ? this.filterData(item.rebateScopeList, queryParam) : [{ productBrandName: null, productTypeName1: null, productTypeName2: null, productTypeName3: null }]
  203. const supDealerList = item.rebateDealerList.find(b => b.rebateParentType == 'SUPERIORS')
  204. const headDealerList = item.rebateDealerList.find(b => b.rebateParentType == 'HEAD')
  205. const zdDealerList = item.rebateDealerList.filter(b => b.rebateParentType == 'ASSIGN')
  206. // this.checkedDealerSn.push(rebateScopeList)
  207. // 差价归属组合
  208. const rebateDealerList = []
  209. if (supDealerList) {
  210. rebateDealerList.push(supDealerList)
  211. }
  212. zdDealerList && zdDealerList.map(zd => {
  213. rebateDealerList.push(zd)
  214. })
  215. if (headDealerList) {
  216. rebateDealerList.push(headDealerList)
  217. }
  218. for (let j = 0; j < rebateScopeList.length; j++) {
  219. rebateScopeList[j].no = j + 1
  220. rebateScopeList[j].dealerUpsSn = item.dealerUpsSn
  221. rebateScopeList[j].dealerSn = item.dealerSn
  222. }
  223. ret.push({
  224. no: i + 1,
  225. id: item.id,
  226. superDealerName: supDealerList.parentDealer.dealerName,
  227. dealerUpsSn: item.dealerUpsSn,
  228. dealerSn: item.dealerSn,
  229. rebateDealerList: rebateDealerList,
  230. childData: rebateScopeList
  231. })
  232. }
  233. return ret
  234. },
  235. searchTable (queryParam) {
  236. if (this.dataSource.length) {
  237. this.$emit('loaded', this.dataSource)
  238. this.list = this.formatData(this.dataSource, queryParam)
  239. this.showEmpty = this.list.length <= 0
  240. } else {
  241. this.dataSource = []
  242. this.list = []
  243. this.disabled = true
  244. this.spinning = true
  245. // 品类列表
  246. dealerUpsList(queryParam).then(res => {
  247. this.$emit('loaded', res.data || [])
  248. this.dataSource = res.data || []
  249. // 处理数据
  250. this.list = this.formatData(this.dataSource, queryParam)
  251. this.showEmpty = this.list.length <= 0
  252. this.tableHeight = (this.showEmpty ? 0 : this.maxHeight) + 'px'
  253. this.spinning = false
  254. this.disabled = false
  255. })
  256. }
  257. },
  258. handleEdit (record, e) {
  259. console.log(e)
  260. e.stopPropagation()
  261. const row = this.dataSource.find(item => item.dealerUpsSn == record.dealerUpsSn && item.dealerSn == record.dealerSn)
  262. this.$emit('edit', row)
  263. },
  264. handleDel (record, e) {
  265. e.stopPropagation()
  266. const _this = this
  267. this.$confirm({
  268. title: '提示',
  269. content: '删除后,将解除该品类差价设置归属关系。确定删除吗?',
  270. centered: true,
  271. closable: true,
  272. onOk () {
  273. _this.spinning = true
  274. dealerUpsDelete({ dealerUpsSn: record.dealerUpsSn }).then(res => {
  275. if (res.status == 200) {
  276. _this.$message.success(res.message)
  277. _this.$emit('del')
  278. }
  279. _this.spinning = false
  280. })
  281. }
  282. })
  283. },
  284. pageInit (queryParam, isTeyue) {
  285. this.isTeyue = isTeyue
  286. // 获取列表
  287. this.searchTable(queryParam)
  288. }
  289. }
  290. }
  291. </script>
  292. <style lang="less">
  293. .empty-data{
  294. color: #999;
  295. text-align: center;
  296. padding: 20px;
  297. }
  298. .ve-table-body-td{
  299. .active-title{
  300. display: flex;
  301. align-items: center;
  302. justify-content: space-between;
  303. padding: 10px;
  304. background: #f3f8fa;
  305. }
  306. }
  307. .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,
  308. .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{
  309. padding: 0;
  310. }
  311. .child-table-comp{
  312. padding: 10px;
  313. }
  314. </style>