list.vue 4.0 KB

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