list.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. <template>
  2. <a-card size="small" :bordered="false" class="erpAllotSettings-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 列表 -->
  5. <s-table
  6. class="sTable fixPagination"
  7. ref="table"
  8. :style="{ height: tableHeight+70+'px'}"
  9. size="small"
  10. :rowKey="(record) => record.id"
  11. :columns="columns"
  12. :showPagination="false"
  13. :data="loadData"
  14. :scroll="{ y: tableHeight }"
  15. :defaultLoadData="false"
  16. childrenColumnName="sonList"
  17. bordered>
  18. <template slot="titles" slot-scope="text, record">
  19. {{ record.name }}
  20. </template>
  21. <!-- 操作 -->
  22. <template slot="action" slot-scope="text, record">
  23. <v-select
  24. v-if="record.root==1"
  25. size="small"
  26. style="width:30%;"
  27. code="ERP_PRICE_TYPE"
  28. id="erpAllotSettings-erpPriceType"
  29. v-model="record.erpPriceType"
  30. placeholder="请选择"
  31. @change="e=>handleType(record,e)"></v-select>
  32. </template>
  33. </s-table>
  34. </a-spin>
  35. </a-card>
  36. </template>
  37. <script>
  38. import { commonMixin } from '@/utils/mixin'
  39. import { STable, VSelect } from '@/components'
  40. import { allocateTypeTreeList, allocateTypeSave } from '@/api/allocateType.js'
  41. export default {
  42. name: 'ErpAllotSettings',
  43. mixins: [commonMixin],
  44. components: { STable, VSelect },
  45. data () {
  46. return {
  47. spinning: false,
  48. tableHeight: 0,
  49. columns: [
  50. { title: '费用/调拨类型', scopedSlots: { customRender: 'titles' }, width: '70%', align: 'left' },
  51. { title: '同步ERP价格类型', scopedSlots: { customRender: 'action' }, width: '30%', align: 'center' }
  52. ],
  53. // 加载数据方法 必须为 Promise 对象
  54. loadData: parameter => {
  55. this.spinning = true
  56. return allocateTypeTreeList(parameter).then(res => {
  57. let data
  58. if (res.status == 200) {
  59. const newData = this.findChild(res.data)
  60. data = newData
  61. }
  62. this.spinning = false
  63. return data
  64. })
  65. },
  66. itemId: null,
  67. parentData: null
  68. }
  69. },
  70. methods: {
  71. // 查找树的子节点
  72. findChild (treeList) {
  73. treeList.forEach(item => {
  74. if (item.sonList && item.sonList.length > 0) {
  75. this.findChild(item.sonList)
  76. } else {
  77. item.root = this.$hasPermissions('B_erpAllotSettings_erpPriceType') ? 1 : 0
  78. }
  79. })
  80. return treeList
  81. },
  82. // 价格类型选择
  83. handleType (row, val) {
  84. const params = {
  85. allocateTypeSn: row.allocateTypeSn,
  86. erpPriceType: val,
  87. name: row.name,
  88. allocateCategory: row.allocateCategory,
  89. treeLevel: row.treeLevel
  90. }
  91. allocateTypeSave(params).then(res => {
  92. if (res.status == 200) {
  93. this.$message.success('操作成功')
  94. }
  95. })
  96. },
  97. pageInit () {
  98. const _this = this
  99. this.$nextTick(() => { // 页面渲染完成后的回调
  100. _this.setTableH()
  101. })
  102. },
  103. setTableH () {
  104. const tableSearchH = this.$refs.tableSearch.offsetHeight
  105. this.tableHeight = window.innerHeight - tableSearchH - 230
  106. }
  107. },
  108. watch: {
  109. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  110. this.setTableH()
  111. }
  112. },
  113. mounted () {
  114. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  115. this.pageInit()
  116. this.$refs.table.refresh()
  117. }
  118. },
  119. activated () {
  120. // 如果是新页签打开,则重置当前页面
  121. if (this.$store.state.app.isNewTab) {
  122. this.pageInit()
  123. this.$refs.table.refresh()
  124. }
  125. // 仅刷新列表,不重置页面
  126. if (this.$store.state.app.updateList) {
  127. this.pageInit()
  128. this.$refs.table.refresh()
  129. }
  130. },
  131. beforeRouteEnter (to, from, next) {
  132. next(vm => {})
  133. }
  134. }
  135. </script>
  136. <style lang="less">
  137. .erpAllotSettings-wrap{
  138. height: 100%;
  139. }
  140. </style>