list.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. <template>
  2. <a-card size="small" :bordered="false" class="relationshipBindingList-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 搜索条件 -->
  5. <div class="table-page-search-wrapper">
  6. <a-form layout="inline" @keyup.enter.native="getList()">
  7. <a-row :gutter="15">
  8. <a-col :md="6" :sm="24">
  9. <a-form-item label="经销商名称">
  10. <a-input id="relationshipBindingList-dealerName" v-model.trim="queryParam.dealerName" allowClear placeholder="请输入经销商名称"/>
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-button style="margin-bottom: 18px;" type="primary" @click="getList()" :disabled="disabled" id="relationshipBindingList-refresh">查询</a-button>
  15. <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm()" :disabled="disabled" id="relationshipBindingList-reset">重置</a-button>
  16. </a-col>
  17. </a-row>
  18. </a-form>
  19. </div>
  20. <!-- 列表 -->
  21. <a-tabs type="card" @change="tabChange" v-model="tabInd">
  22. <a-tab-pane key="1" tab="省市级关系绑定"></a-tab-pane>
  23. <a-tab-pane key="2" tab="特约店关系绑定"></a-tab-pane>
  24. </a-tabs>
  25. <a-table
  26. class="sTable"
  27. ref="table"
  28. size="default"
  29. :rowKey="(record) => record.dealerSn"
  30. :columns="columns"
  31. :pagination="paginationProps"
  32. :data-source="list"
  33. @expand="expand"
  34. :expandedRowKeys="expandedRowKeys"
  35. :expandRowByClick="true"
  36. :scroll="{ y: tableHeight }">
  37. <a-table
  38. slot="expandedRowRender"
  39. :rowKey="(record) => record.dealerSn"
  40. :columns="innerColumns"
  41. :data-source="innerData"
  42. :pagination="false">
  43. <!-- 操作 -->
  44. <template slot="action" slot-scope="text, record">
  45. <a-button
  46. type="link"
  47. class="button-error"
  48. size="small"
  49. icon="close"
  50. :id="'relationshipBindingList-delSubItem'+record.id"
  51. @click.stop="handleDisassociate(record)">取消关联</a-button>
  52. </template>
  53. </a-table>
  54. <!-- 操作 -->
  55. <template slot="action" slot-scope="text, record">
  56. <a-button
  57. type="link"
  58. class="button-info"
  59. size="small"
  60. icon="plus"
  61. :id="'relationshipBindingList-addSubItem'+record.id"
  62. @click.stop="handleAssociate(record)">关联下级</a-button>
  63. </template>
  64. </a-table>
  65. </a-spin>
  66. <!-- 关联下级 -->
  67. <associate-modal :openModal="openModal" :nowData="nowData" :tabInd="tabInd" @ok="addItemOk" @close="openModal=false" />
  68. </a-card>
  69. </template>
  70. I
  71. <script>
  72. import { STable, VSelect } from '@/components'
  73. import associateModal from './associateModal.vue'
  74. import { dealerRelationList, querySubList, unbindRelation } from '@/api/dealerRelation'
  75. export default {
  76. components: { STable, VSelect, associateModal },
  77. data () {
  78. return {
  79. tableHeight: 0,
  80. spinning: false,
  81. formItemLayout: {
  82. labelCol: { span: 6 },
  83. wrapperCol: { span: 16 }
  84. },
  85. queryParam: {
  86. dealerName: ''
  87. },
  88. disabled: false, // 查询、重置按钮是否可操作
  89. columns: [
  90. { title: '经销商名称', dataIndex: 'dealerName', align: 'left' },
  91. { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
  92. ],
  93. expandedRowKeys: [],
  94. list: [],
  95. pageNo: 1, // 分页页码
  96. pageSize: 10, // 分页 每页多少条
  97. paginationProps: {
  98. showSizeChanger: true, // 是否可以改变 pageSize
  99. total: 0, // 分页总条数
  100. current: 1,
  101. onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize),
  102. onChange: (current) => this.changePage(current)
  103. },
  104. innerColumns: [
  105. { title: '经销商名称', dataIndex: 'dealerName', customRender: function (text) { return text || '--' }, ellipsis: true },
  106. { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
  107. ],
  108. innerData: [],
  109. openModal: false, // 新增编辑 弹框
  110. nowData: null, // 当前记录数据
  111. tabInd: '1', // tabs选中项
  112. dealerSn: []
  113. }
  114. },
  115. mounted () {
  116. this.tableHeight = window.innerHeight - 380
  117. this.getList()
  118. },
  119. methods: {
  120. expand (expanded, record) {
  121. this.nowData = record
  122. this.expandedRowKeys = [] // 重置展开节点,只展开当前点击的节点(内部数据调用模板,无法做到同时几个内层表格数据直接缓存在页面)
  123. if (expanded) {
  124. this.getSubItem(record) // 获取表格内部数据
  125. }
  126. },
  127. // 获取子节点数据
  128. getSubItem (record) {
  129. this.innerData = []
  130. this.spinning = true
  131. querySubList({ parentDealerSn: record.dealerSn }).then(res => {
  132. if (res.status == 200 && res.data && res.data.length) {
  133. this.innerData = res.data
  134. } else {
  135. this.innerData = []
  136. }
  137. this.expandedRowKeys = [record.dealerSn]
  138. this.spinning = false
  139. })
  140. },
  141. // 添加子级成功
  142. addItemOk () {
  143. this.getSubItem(this.nowData)
  144. },
  145. // 获取列表数据
  146. getList (pageNo) {
  147. this.disabled = true
  148. this.pageNo = pageNo || this.pageNo
  149. this.disabled = true
  150. const params = {
  151. pageNo: this.pageNo,
  152. pageSize: this.pageSize
  153. }
  154. dealerRelationList(Object.assign(params, this.queryParam, { dealerLevelList: this.tabInd == 1 ? ['PROVINCE'] : ['PROVINCE', 'CITY'] })).then(res => {
  155. if (res.status == 200) {
  156. const data = res.data
  157. this.paginationProps.total = Number(res.data.count) || 0
  158. this.paginationProps.current = data.pageNo
  159. const no = (data.pageNo - 1) * data.pageSize
  160. for (var i = 0; i < data.list.length; i++) {
  161. data.list[i].no = no + i + 1
  162. }
  163. this.list = data.list
  164. this.disabled = false
  165. } else {
  166. this.paginationProps.total = 0
  167. this.paginationProps.current = 1
  168. this.list = []
  169. }
  170. })
  171. },
  172. // 重置
  173. resetSearchForm (flag) {
  174. if (!flag) {
  175. this.queryParam.dealerName = ''
  176. this.expandedRowKeys = []
  177. this.pageNo = 1
  178. this.pageSize = 10
  179. this.paginationProps.total = 0
  180. this.paginationProps.current = 1
  181. }
  182. this.getList()
  183. },
  184. // 分页 一页多少条change
  185. changePageSize (current, pageSize) {
  186. this.pageNo = current
  187. this.pageSize = pageSize
  188. this.getList()
  189. },
  190. // 分页 页码change
  191. changePage (current) {
  192. this.pageNo = current
  193. this.getList()
  194. },
  195. tabChange (key) {
  196. this.tabInd = key
  197. // 不能共用resetSearchForm方法,因切换tab时,每页多少条数据更改后,不能同步tab两边页码
  198. this.queryParam.dealerName = ''
  199. this.expandedRowKeys = []
  200. this.pageNo = 1
  201. this.paginationProps.total = 0
  202. this.paginationProps.current = 1
  203. this.getList()
  204. },
  205. // 关联下级
  206. handleAssociate (row) {
  207. this.nowData = row
  208. this.openModal = true
  209. },
  210. // 取消关联
  211. handleDisassociate (row) {
  212. const _this = this
  213. _this.$confirm({
  214. title: '提示',
  215. content: '确认要解除上下级的关系吗?',
  216. centered: true,
  217. onOk () {
  218. unbindRelation({ subDealerSn: row.dealerSn }).then(res => {
  219. if (res.status == 200) {
  220. _this.$message.success(res.message)
  221. _this.addItemOk()
  222. }
  223. })
  224. }
  225. })
  226. }
  227. }
  228. }
  229. </script>