|
@@ -1,64 +1,70 @@
|
|
|
<template>
|
|
|
<a-card size="small" :bordered="false" class="relationshipBindingList-wrap">
|
|
|
- <!-- 搜索条件 -->
|
|
|
- <div class="table-page-search-wrapper">
|
|
|
- <a-form layout="inline" @keyup.enter.native="getList()">
|
|
|
- <a-row :gutter="15">
|
|
|
- <a-col :md="6" :sm="24">
|
|
|
- <a-form-item label="经销商名称">
|
|
|
- <a-input id="relationshipBindingList-dealerName" v-model.trim="queryParam.dealerName" allowClear placeholder="请输入经销商名称"/>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :md="6" :sm="24">
|
|
|
- <a-button style="margin-bottom: 18px;" type="primary" @click="getList()" :disabled="disabled" id="relationshipBindingList-refresh">查询</a-button>
|
|
|
- <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm()" :disabled="disabled" id="relationshipBindingList-reset">重置</a-button>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- <!-- 列表 -->
|
|
|
- <a-tabs type="card" @change="tabChange" v-model="tabInd">
|
|
|
- <a-tab-pane key="1" tab="省市级关系绑定"></a-tab-pane>
|
|
|
- <a-tab-pane key="2" tab="特约店关系绑定"></a-tab-pane>
|
|
|
- </a-tabs>
|
|
|
- <a-table
|
|
|
- class="sTable"
|
|
|
- ref="table"
|
|
|
- size="default"
|
|
|
- :rowKey="(record) => record.dealerSn"
|
|
|
- :columns="columns"
|
|
|
- :pagination="pagination"
|
|
|
- :data-source="list"
|
|
|
- @expand="expand"
|
|
|
- @change="change"
|
|
|
- :expandedRowKeys="expandedRowKeys"
|
|
|
- :expandRowByClick="true"
|
|
|
- :scroll="{ y: tableHeight }">
|
|
|
- <span slot="expandIcon">
|
|
|
- 1
|
|
|
- </span>
|
|
|
- <!-- 操作 -->
|
|
|
- <template slot="action" slot-scope="text, record">
|
|
|
- <a-button
|
|
|
- type="link"
|
|
|
- class="button-info"
|
|
|
- size="small"
|
|
|
- icon="plus"
|
|
|
- :id="'relationshipBindingList-addSubItem'+record.id"
|
|
|
- v-if="record.children"
|
|
|
- @click.stop="handleAssociate(record)">关联下级</a-button>
|
|
|
- <a-button
|
|
|
- type="link"
|
|
|
- class="button-error"
|
|
|
- size="small"
|
|
|
- icon="close"
|
|
|
- :id="'relationshipBindingList-delSubItem'+record.id"
|
|
|
- v-else
|
|
|
- @click.stop="handleDisassociate(record)">取消关联</a-button>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
+ <a-spin :spinning="spinning" tip="Loading...">
|
|
|
+ <!-- 搜索条件 -->
|
|
|
+ <div class="table-page-search-wrapper">
|
|
|
+ <a-form layout="inline" @keyup.enter.native="getList()">
|
|
|
+ <a-row :gutter="15">
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-form-item label="经销商名称">
|
|
|
+ <a-input id="relationshipBindingList-dealerName" v-model.trim="queryParam.dealerName" allowClear placeholder="请输入经销商名称"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-button style="margin-bottom: 18px;" type="primary" @click="getList()" :disabled="disabled" id="relationshipBindingList-refresh">查询</a-button>
|
|
|
+ <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm()" :disabled="disabled" id="relationshipBindingList-reset">重置</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <!-- 列表 -->
|
|
|
+ <a-tabs type="card" @change="tabChange" v-model="tabInd">
|
|
|
+ <a-tab-pane key="1" tab="省市级关系绑定"></a-tab-pane>
|
|
|
+ <a-tab-pane key="2" tab="特约店关系绑定"></a-tab-pane>
|
|
|
+ </a-tabs>
|
|
|
+ <a-table
|
|
|
+ class="sTable"
|
|
|
+ ref="table"
|
|
|
+ size="default"
|
|
|
+ :rowKey="(record) => record.dealerSn"
|
|
|
+ :columns="columns"
|
|
|
+ :pagination="paginationProps"
|
|
|
+ :data-source="list"
|
|
|
+ @expand="expand"
|
|
|
+ :expandedRowKeys="expandedRowKeys"
|
|
|
+ :expandRowByClick="true"
|
|
|
+ :scroll="{ y: tableHeight }">
|
|
|
+ <a-table
|
|
|
+ slot="expandedRowRender"
|
|
|
+ :rowKey="(record) => record.dealerSn"
|
|
|
+ :columns="innerColumns"
|
|
|
+ :data-source="innerData"
|
|
|
+ :pagination="false">
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template slot="action" slot-scope="text, record">
|
|
|
+ <a-button
|
|
|
+ type="link"
|
|
|
+ class="button-error"
|
|
|
+ size="small"
|
|
|
+ icon="close"
|
|
|
+ :id="'relationshipBindingList-delSubItem'+record.id"
|
|
|
+ @click.stop="handleDisassociate(record)">取消关联</a-button>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <template slot="action" slot-scope="text, record">
|
|
|
+ <a-button
|
|
|
+ type="link"
|
|
|
+ class="button-info"
|
|
|
+ size="small"
|
|
|
+ icon="plus"
|
|
|
+ :id="'relationshipBindingList-addSubItem'+record.id"
|
|
|
+ @click.stop="handleAssociate(record)">关联下级</a-button>
|
|
|
+ </template>
|
|
|
+ </a-table>
|
|
|
+ </a-spin>
|
|
|
<!-- 关联下级 -->
|
|
|
- <associate-modal :openModal="openModal" :nowData="nowData" :tabInd="tabInd" @ok="addItemOk" @close="closeModal" />
|
|
|
+ <associate-modal :openModal="openModal" :nowData="nowData" :tabInd="tabInd" @ok="addItemOk" @close="openModal=false" />
|
|
|
</a-card>
|
|
|
</template>
|
|
|
I
|
|
@@ -71,6 +77,7 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
tableHeight: 0,
|
|
|
+ spinning: false,
|
|
|
formItemLayout: {
|
|
|
labelCol: { span: 6 },
|
|
|
wrapperCol: { span: 16 }
|
|
@@ -85,18 +92,20 @@ export default {
|
|
|
],
|
|
|
expandedRowKeys: [],
|
|
|
list: [],
|
|
|
- parameter: {
|
|
|
- pageNo: 1,
|
|
|
- pageSize: 10
|
|
|
- },
|
|
|
- pagination: {
|
|
|
- total: 1,
|
|
|
+ pageNo: 1, // 分页页码
|
|
|
+ pageSize: 10, // 分页 每页多少条
|
|
|
+ paginationProps: {
|
|
|
+ showSizeChanger: true, // 是否可以改变 pageSize
|
|
|
+ total: 0, // 分页总条数
|
|
|
current: 1,
|
|
|
- showTotal: total => `共 ${total} 条记录 第 ${this.pagination.current} / ${Math.ceil(total / this.pagination.pageSize)} 页`,
|
|
|
- showQuickJumper: true,
|
|
|
- showSizeChanger: true,
|
|
|
- pageSize: 10
|
|
|
+ onShowSizeChange: (current, pageSize) => this.changePageSize(current, pageSize),
|
|
|
+ onChange: (current) => this.changePage(current)
|
|
|
},
|
|
|
+ innerColumns: [
|
|
|
+ { title: '经销商名称', dataIndex: 'dealerName', customRender: function (text) { return text || '--' }, ellipsis: true },
|
|
|
+ { title: '操作', scopedSlots: { customRender: 'action' }, align: 'center' }
|
|
|
+ ],
|
|
|
+ innerData: [],
|
|
|
openModal: false, // 新增编辑 弹框
|
|
|
nowData: null, // 当前记录数据
|
|
|
tabInd: '1', // tabs选中项
|
|
@@ -115,71 +124,87 @@ export default {
|
|
|
this.getSubItem(record) // 获取表格内部数据
|
|
|
}
|
|
|
},
|
|
|
- // 外层表格操作
|
|
|
- change (pagination, filters, sorter) { // 对页面大小,筛选,排序等条件修改后重新查询数据
|
|
|
- this.pagination = pagination
|
|
|
- this.parameter.pageNo = pagination.current
|
|
|
- this.parameter.pageSize = pagination.pageSize
|
|
|
- this.getList()
|
|
|
- },
|
|
|
// 获取子节点数据
|
|
|
getSubItem (record) {
|
|
|
- record.children = []
|
|
|
+ this.innerData = []
|
|
|
+ this.spinning = true
|
|
|
querySubList({ parentDealerSn: record.dealerSn }).then(res => {
|
|
|
if (res.status == 200 && res.data && res.data.length) {
|
|
|
- record.children = res.data
|
|
|
- } else {
|
|
|
- record.children = this.nowData.children
|
|
|
- }
|
|
|
- if (record.children.length == 0) {
|
|
|
- this.$message.info('暂无下级,请关联下级')
|
|
|
+ this.innerData = res.data
|
|
|
} else {
|
|
|
- this.expandedRowKeys = [record.dealerSn]
|
|
|
+ this.innerData = []
|
|
|
}
|
|
|
+ this.expandedRowKeys = [record.dealerSn]
|
|
|
+ this.spinning = false
|
|
|
})
|
|
|
},
|
|
|
- // 添加子机成功
|
|
|
+ // 添加子级成功
|
|
|
addItemOk () {
|
|
|
this.getSubItem(this.nowData)
|
|
|
},
|
|
|
// 获取列表数据
|
|
|
- getList () {
|
|
|
+ getList (pageNo) {
|
|
|
+ this.disabled = true
|
|
|
+ this.pageNo = pageNo || this.pageNo
|
|
|
this.disabled = true
|
|
|
- console.log(this.queryParam.dealerName)
|
|
|
- dealerRelationList(Object.assign(this.parameter, this.queryParam, { dealerLevelList: this.tabInd == 1 ? ['PROVINCE'] : ['PROVINCE', 'CITY'] })).then(res => {
|
|
|
- const data = res.data
|
|
|
- this.pagination.total = data.count
|
|
|
- this.pagination.current = data.pageNo
|
|
|
- this.pagination.pageSize = data.pageSize
|
|
|
- this.parameter.pageNo = data.pageNo
|
|
|
- this.parameter.pageSize = data.pageSize
|
|
|
- const no = (data.pageNo - 1) * data.pageSize
|
|
|
- for (var i = 0; i < data.list.length; i++) {
|
|
|
- data.list[i].no = no + i + 1
|
|
|
- data.list[i].children = []
|
|
|
+ const params = {
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: this.pageSize
|
|
|
+ }
|
|
|
+ dealerRelationList(Object.assign(params, this.queryParam, { dealerLevelList: this.tabInd == 1 ? ['PROVINCE'] : ['PROVINCE', 'CITY'] })).then(res => {
|
|
|
+ if (res.status == 200) {
|
|
|
+ const data = res.data
|
|
|
+ this.paginationProps.total = Number(res.data.count) || 0
|
|
|
+ this.paginationProps.current = data.pageNo
|
|
|
+ const no = (data.pageNo - 1) * data.pageSize
|
|
|
+ for (var i = 0; i < data.list.length; i++) {
|
|
|
+ data.list[i].no = no + i + 1
|
|
|
+ }
|
|
|
+ this.list = data.list
|
|
|
+ this.disabled = false
|
|
|
+ } else {
|
|
|
+ this.paginationProps.total = 0
|
|
|
+ this.paginationProps.current = 1
|
|
|
+ this.list = []
|
|
|
}
|
|
|
- this.disabled = false
|
|
|
- this.list = data.list
|
|
|
})
|
|
|
},
|
|
|
// 重置
|
|
|
resetSearchForm (flag) {
|
|
|
if (!flag) {
|
|
|
this.queryParam.dealerName = ''
|
|
|
- this.parameter.pageNo = 1
|
|
|
- this.parameter.pageSize = 10
|
|
|
this.expandedRowKeys = []
|
|
|
+ this.pageNo = 1
|
|
|
+ this.pageSize = 10
|
|
|
+ this.paginationProps.total = 0
|
|
|
+ this.paginationProps.current = 1
|
|
|
}
|
|
|
this.getList()
|
|
|
},
|
|
|
+ // 分页 一页多少条change
|
|
|
+ changePageSize (current, pageSize) {
|
|
|
+ this.pageNo = current
|
|
|
+ this.pageSize = pageSize
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ // 分页 页码change
|
|
|
+ changePage (current) {
|
|
|
+ this.pageNo = current
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
tabChange (key) {
|
|
|
this.tabInd = key
|
|
|
- this.resetSearchForm()
|
|
|
+ // 不能共用resetSearchForm方法,因切换tab时,每页多少条数据更改后,不能同步tab两边页码
|
|
|
+ this.queryParam.dealerName = ''
|
|
|
+ this.expandedRowKeys = []
|
|
|
+ this.pageNo = 1
|
|
|
+ this.paginationProps.total = 0
|
|
|
+ this.paginationProps.current = 1
|
|
|
+ this.getList()
|
|
|
},
|
|
|
// 关联下级
|
|
|
handleAssociate (row) {
|
|
|
this.nowData = row
|
|
|
- this.expandedRowKeys = [row.dealerSn]
|
|
|
this.openModal = true
|
|
|
},
|
|
|
// 取消关联
|
|
@@ -198,10 +223,6 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
- },
|
|
|
- // 关闭弹框
|
|
|
- closeModal () {
|
|
|
- this.openModal = false
|
|
|
}
|
|
|
}
|
|
|
}
|