list.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248
  1. <template>
  2. <a-card size="small" :bordered="false" class="chainGroupSetList-wrap">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="getList()">
  6. <a-row :gutter="15">
  7. <a-col :md="6" :sm="24">
  8. <a-form-item label="连锁组名称">
  9. <a-input id="chainGroupSetList-linkageGroupName" v-model.trim="queryParam.linkageGroupName" allowClear placeholder="请输入连锁组名称"/>
  10. </a-form-item>
  11. </a-col>
  12. <a-col :md="6" :sm="24">
  13. <a-form-item label="关联连锁店名称">
  14. <a-input id="chainGroupSetList-dealerName" v-model.trim="queryParam.dealerName" allowClear placeholder="请输入关联连锁店名称"/>
  15. </a-form-item>
  16. </a-col>
  17. <a-col :md="6" :sm="24">
  18. <a-button style="margin-bottom: 18px;" type="primary" @click="getList()" :disabled="disabled" id="chainGroupSetList-refresh">查询</a-button>
  19. <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm()" :disabled="disabled" id="chainGroupSetList-reset">重置</a-button>
  20. </a-col>
  21. </a-row>
  22. </a-form>
  23. </div>
  24. <!-- 操作按钮 -->
  25. <div class="table-operator">
  26. <a-button id="chainGroupSetList-add" type="primary" class="button-error" @click="openEditModal=true">新增</a-button>
  27. </div>
  28. <!-- 列表 -->
  29. <a-table
  30. class="sTable"
  31. ref="table"
  32. size="default"
  33. :rowKey="(record) => record.linkageGroupSn"
  34. :columns="columns"
  35. :pagination="pagination"
  36. :data-source="list"
  37. @expand="expand"
  38. @change="change"
  39. :expandedRowKeys="expandedRowKeys"
  40. :expandRowByClick="true"
  41. :scroll="{ y: tableHeight }">
  42. <a-table
  43. slot="expandedRowRender"
  44. :rowKey="(record) => record.id"
  45. :columns="innerColumns"
  46. :data-source="innerData"
  47. :pagination="false"
  48. >
  49. <!-- 操作 -->
  50. <template slot="action" slot-scope="text, record">
  51. <a-button
  52. type="link"
  53. class="button-error"
  54. size="small"
  55. icon="close"
  56. :id="'chainGroupSetList-delSubItem'+record.id"
  57. @click.stop="handleDisassociate(record)">取消关联</a-button>
  58. </template>
  59. </a-table>
  60. <!-- 操作 -->
  61. <template slot="action" slot-scope="text, record">
  62. <a-button
  63. type="link"
  64. class="button-success"
  65. size="small"
  66. icon="plus"
  67. :id="'chainGroupSetList-addSubItem'+record.id"
  68. @click.stop="handleAssociate(record)">关联分店</a-button>
  69. <a-button
  70. type="link"
  71. class="button-info"
  72. size="small"
  73. icon="edit"
  74. :id="'chainGroupSetList-addSubItem'+record.id"
  75. @click.stop="handleEdit(record)">编辑</a-button>
  76. </template>
  77. </a-table>
  78. <!-- 关联下级 -->
  79. <associate-modal :openModal="openModal" :itemSn="itemSn" @ok="addItemOk" @close="closeModal" />
  80. <!-- 新增/编辑 -->
  81. <chain-group-edit-modal :openModal="openEditModal" :nowData="nowData" :itemId="itemId" @ok="getList" @close="closeEditModal" />
  82. </a-card>
  83. </template>
  84. <script>
  85. import { STable, VSelect } from '@/components'
  86. import associateModal from './associateModal.vue'
  87. import chainGroupEditModal from './editModal.vue'
  88. import { linkageGroupList, linkageGroupDetail, linkageGroupUnRelation } from '@/api/linkageGroup'
  89. export default {
  90. components: { STable, VSelect, associateModal, chainGroupEditModal },
  91. data () {
  92. return {
  93. tableHeight: 0,
  94. formItemLayout: {
  95. labelCol: { span: 6 },
  96. wrapperCol: { span: 16 }
  97. },
  98. queryParam: {
  99. linkageGroupName: '',
  100. dealerName: ''
  101. },
  102. disabled: false, // 查询、重置按钮是否可操作
  103. columns: [
  104. { title: '连锁组名称', dataIndex: 'linkageGroupName', customRender: function (text) { return text || '--' }, ellipsis: true, align: 'left' },
  105. { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
  106. ],
  107. expandedRowKeys: [],
  108. list: [],
  109. parameter: {
  110. pageNo: 1,
  111. pageSize: 10
  112. },
  113. pagination: {
  114. total: 1,
  115. current: 1,
  116. showTotal: total => `共 ${total} 条记录 第 ${this.pagination.current} / ${Math.ceil(total / this.pagination.pageSize)} 页`,
  117. showQuickJumper: true,
  118. showSizeChanger: true,
  119. pageSize: 10
  120. },
  121. innerColumns: [
  122. { title: '关联连锁店名称', dataIndex: 'dealer.name', customRender: function (text) { return text || '--' }, ellipsis: true },
  123. { title: '负责人', dataIndex: 'dealer.contactName', customRender: function (text) { return text || '--' }, ellipsis: true },
  124. { title: '联系电话', dataIndex: 'dealer.contactPhone', customRender: function (text) { return text || '--' } },
  125. { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
  126. ],
  127. innerData: [],
  128. openModal: false, // 新增编辑 弹框
  129. nowData: null, // 当前记录数据
  130. tabInd: '1', // tabs选中项
  131. dealerSn: [],
  132. openEditModal: false,
  133. itemId: '',
  134. itemSn: ''
  135. }
  136. },
  137. mounted () {
  138. this.tableHeight = window.innerHeight - 380
  139. this.getList()
  140. },
  141. methods: {
  142. expand (expanded, record) {
  143. this.nowData = record
  144. this.expandedRowKeys = [] // 重置展开节点,只展开当前点击的节点(内部数据调用模板,无法做到同时几个内层表格数据直接缓存在页面)
  145. if (expanded) {
  146. this.getSubItem(record) // 获取表格内部数据
  147. }
  148. },
  149. // 外层表格操作
  150. change (pagination, filters, sorter) { // 对页面大小,筛选,排序等条件修改后重新查询数据
  151. this.pagination = pagination
  152. this.parameter.pageNo = pagination.current
  153. this.parameter.pageSize = pagination.pageSize
  154. this.getList()
  155. },
  156. // 获取子节点数据
  157. getSubItem (record) {
  158. this.innerData = []
  159. linkageGroupDetail({ sn: record.linkageGroupSn }).then(res => {
  160. if (res.status == 200 && res.data && res.data.length) {
  161. this.innerData = res.data
  162. } else {
  163. this.innerData = []
  164. }
  165. if (res.data.length == 0) {
  166. this.$message.info('暂无分店,请关联分店')
  167. } else {
  168. this.expandedRowKeys = [record.linkageGroupSn]
  169. }
  170. })
  171. },
  172. // 添加子级成功
  173. addItemOk () {
  174. this.getSubItem(this.nowData)
  175. },
  176. // 获取列表数据
  177. getList () {
  178. this.disabled = true
  179. linkageGroupList(Object.assign(this.parameter, this.queryParam)).then(res => {
  180. const data = res.data
  181. this.pagination.total = Number(data.count)
  182. this.pagination.current = data.pageNo
  183. this.pagination.pageSize = data.pageSize
  184. this.parameter.pageNo = data.pageNo
  185. this.parameter.pageSize = data.pageSize
  186. const no = (data.pageNo - 1) * data.pageSize
  187. for (var i = 0; i < data.list.length; i++) {
  188. data.list[i].no = no + i + 1
  189. }
  190. this.disabled = false
  191. this.list = data.list
  192. })
  193. },
  194. // 关闭 新增编辑 弹框
  195. closeEditModal () {
  196. this.itemId = ''
  197. this.nowData = null
  198. this.openEditModal = false
  199. },
  200. // 编辑连锁组
  201. handleEdit (row) {
  202. this.itemId = row.id
  203. this.nowData = JSON.parse(JSON.stringify(row)) // 为避免编辑数据未改变无法触发表单赋值
  204. this.openEditModal = true
  205. },
  206. // 重置
  207. resetSearchForm (flag) {
  208. if (!flag) {
  209. this.queryParam.linkageGroupName = ''
  210. this.queryParam.dealerName = ''
  211. this.parameter.pageNo = 1
  212. this.parameter.pageSize = 10
  213. this.expandedRowKeys = []
  214. }
  215. this.getList()
  216. },
  217. // 关联下级
  218. handleAssociate (row) {
  219. this.itemSn = row.linkageGroupSn
  220. this.nowData = row
  221. this.openModal = true
  222. },
  223. // 取消关联
  224. handleDisassociate (row) {
  225. const _this = this
  226. _this.nowData = row
  227. _this.$confirm({
  228. title: '提示',
  229. content: '确认要解除关联的关系吗?',
  230. centered: true,
  231. onOk () {
  232. linkageGroupUnRelation({ sn: row.linkageGroupDetailSn }).then(res => {
  233. if (res.status == 200) {
  234. _this.$message.success(res.message)
  235. _this.addItemOk()
  236. }
  237. })
  238. }
  239. })
  240. },
  241. // 关闭弹框
  242. closeModal () {
  243. this.openModal = false
  244. }
  245. }
  246. }
  247. </script>