|
@@ -1,82 +1,83 @@
|
|
|
<template>
|
|
|
<a-card size="small" :bordered="false" class="chainGroupSetList-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="chainGroupSetList-linkageGroupName" v-model.trim="queryParam.linkageGroupName" allowClear placeholder="请输入连锁组名称"/>
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :md="6" :sm="24">
|
|
|
- <a-form-item label="关联连锁店名称">
|
|
|
- <a-input id="chainGroupSetList-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="chainGroupSetList-refresh">查询</a-button>
|
|
|
- <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm()" :disabled="disabled" id="chainGroupSetList-reset">重置</a-button>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </a-form>
|
|
|
- </div>
|
|
|
- <!-- 操作按钮 -->
|
|
|
- <div class="table-operator">
|
|
|
- <a-button id="chainGroupSetList-add" type="primary" class="button-error" @click="openEditModal=true">新增</a-button>
|
|
|
- </div>
|
|
|
- <!-- 列表 -->
|
|
|
- <a-table
|
|
|
- class="sTable"
|
|
|
- ref="table"
|
|
|
- size="default"
|
|
|
- :rowKey="(record) => record.linkageGroupSn"
|
|
|
- :columns="columns"
|
|
|
- :pagination="pagination"
|
|
|
- :data-source="list"
|
|
|
- @expand="expand"
|
|
|
- @change="change"
|
|
|
- :expandedRowKeys="expandedRowKeys"
|
|
|
- :expandRowByClick="true"
|
|
|
- :scroll="{ y: tableHeight }">
|
|
|
+ <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="chainGroupSetList-linkageGroupName" v-model.trim="queryParam.linkageGroupName" allowClear placeholder="请输入连锁组名称"/>
|
|
|
+ </a-form-item>
|
|
|
+ </a-col>
|
|
|
+ <a-col :md="6" :sm="24">
|
|
|
+ <a-form-item label="关联连锁店名称">
|
|
|
+ <a-input id="chainGroupSetList-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="chainGroupSetList-refresh">查询</a-button>
|
|
|
+ <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm()" :disabled="disabled" id="chainGroupSetList-reset">重置</a-button>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-form>
|
|
|
+ </div>
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <div class="table-operator">
|
|
|
+ <a-button id="chainGroupSetList-add" type="primary" class="button-error" @click="openEditModal=true">新增</a-button>
|
|
|
+ </div>
|
|
|
+ <!-- 列表 -->
|
|
|
<a-table
|
|
|
- slot="expandedRowRender"
|
|
|
- :rowKey="(record) => record.id"
|
|
|
- :columns="innerColumns"
|
|
|
- :data-source="innerData"
|
|
|
- :pagination="false"
|
|
|
- >
|
|
|
+ class="sTable"
|
|
|
+ ref="table"
|
|
|
+ size="default"
|
|
|
+ :rowKey="(record) => record.linkageGroupSn"
|
|
|
+ :columns="columns"
|
|
|
+ :pagination="paginationProps"
|
|
|
+ :data-source="list"
|
|
|
+ @expand="expand"
|
|
|
+ :expandedRowKeys="expandedRowKeys"
|
|
|
+ :expandRowByClick="true"
|
|
|
+ :scroll="{ y: tableHeight }">
|
|
|
+ <a-table
|
|
|
+ slot="expandedRowRender"
|
|
|
+ :rowKey="(record) => record.id"
|
|
|
+ :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="'chainGroupSetList-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-error"
|
|
|
+ class="button-success"
|
|
|
size="small"
|
|
|
- icon="close"
|
|
|
- :id="'chainGroupSetList-delSubItem'+record.id"
|
|
|
- @click.stop="handleDisassociate(record)">取消关联</a-button>
|
|
|
+ icon="plus"
|
|
|
+ :id="'chainGroupSetList-addSubItem'+record.id"
|
|
|
+ @click.stop="handleAssociate(record)">关联分店</a-button>
|
|
|
+ <a-button
|
|
|
+ type="link"
|
|
|
+ class="button-info"
|
|
|
+ size="small"
|
|
|
+ icon="edit"
|
|
|
+ :id="'chainGroupSetList-addSubItem'+record.id"
|
|
|
+ @click.stop="handleEdit(record)">编辑</a-button>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
- <!-- 操作 -->
|
|
|
- <template slot="action" slot-scope="text, record">
|
|
|
- <a-button
|
|
|
- type="link"
|
|
|
- class="button-success"
|
|
|
- size="small"
|
|
|
- icon="plus"
|
|
|
- :id="'chainGroupSetList-addSubItem'+record.id"
|
|
|
- @click.stop="handleAssociate(record)">关联分店</a-button>
|
|
|
- <a-button
|
|
|
- type="link"
|
|
|
- class="button-info"
|
|
|
- size="small"
|
|
|
- icon="edit"
|
|
|
- :id="'chainGroupSetList-addSubItem'+record.id"
|
|
|
- @click.stop="handleEdit(record)">编辑</a-button>
|
|
|
- </template>
|
|
|
- </a-table>
|
|
|
+ </a-spin>
|
|
|
<!-- 关联下级 -->
|
|
|
- <associate-modal :openModal="openModal" :itemSn="itemSn" @ok="addItemOk" @close="closeModal" />
|
|
|
+ <associate-modal :openModal="openModal" :itemSn="itemSn" @ok="addItemOk" @close="openModal=false" />
|
|
|
<!-- 新增/编辑 -->
|
|
|
<chain-group-edit-modal :openModal="openEditModal" :nowData="nowData" :itemId="itemId" @ok="getList" @close="closeEditModal" />
|
|
|
</a-card>
|
|
@@ -92,6 +93,7 @@ export default {
|
|
|
data () {
|
|
|
return {
|
|
|
tableHeight: 0,
|
|
|
+ spinning: false,
|
|
|
formItemLayout: {
|
|
|
labelCol: { span: 6 },
|
|
|
wrapperCol: { span: 16 }
|
|
@@ -107,17 +109,14 @@ 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: 'dealer.name', customRender: function (text) { return text || '--' }, ellipsis: true },
|
|
@@ -147,27 +146,18 @@ 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) {
|
|
|
this.innerData = []
|
|
|
+ this.spinning = true
|
|
|
linkageGroupDetail({ sn: record.linkageGroupSn }).then(res => {
|
|
|
if (res.status == 200 && res.data && res.data.length) {
|
|
|
this.innerData = res.data
|
|
|
} else {
|
|
|
this.innerData = []
|
|
|
}
|
|
|
- if (res.data.length == 0) {
|
|
|
- this.$message.info('暂无分店,请关联分店')
|
|
|
- } else {
|
|
|
- this.expandedRowKeys = [record.linkageGroupSn]
|
|
|
- }
|
|
|
+ this.expandedRowKeys = [record.linkageGroupSn]
|
|
|
+ this.spinning = false
|
|
|
})
|
|
|
},
|
|
|
// 添加子级成功
|
|
@@ -175,21 +165,30 @@ export default {
|
|
|
this.getSubItem(this.nowData)
|
|
|
},
|
|
|
// 获取列表数据
|
|
|
- getList () {
|
|
|
+ getList (pageNo) {
|
|
|
this.disabled = true
|
|
|
- linkageGroupList(Object.assign(this.parameter, this.queryParam)).then(res => {
|
|
|
- const data = res.data
|
|
|
- this.pagination.total = Number(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
|
|
|
+ this.pageNo = pageNo || this.pageNo
|
|
|
+ this.disabled = true
|
|
|
+ const params = {
|
|
|
+ pageNo: this.pageNo,
|
|
|
+ pageSize: this.pageSize
|
|
|
+ }
|
|
|
+ linkageGroupList(Object.assign(params, this.queryParam)).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
|
|
|
})
|
|
|
},
|
|
|
// 关闭 新增编辑 弹框
|
|
@@ -209,12 +208,25 @@ export default {
|
|
|
if (!flag) {
|
|
|
this.queryParam.linkageGroupName = ''
|
|
|
this.queryParam.dealerName = ''
|
|
|
- this.parameter.pageNo = 1
|
|
|
- this.parameter.pageSize = 10
|
|
|
+ this.pageNo = 1
|
|
|
+ this.pageSize = 10
|
|
|
+ this.paginationProps.total = 0
|
|
|
+ this.paginationProps.current = 1
|
|
|
this.expandedRowKeys = []
|
|
|
}
|
|
|
this.getList()
|
|
|
},
|
|
|
+ // 分页 一页多少条change
|
|
|
+ changePageSize (current, pageSize) {
|
|
|
+ this.pageNo = current
|
|
|
+ this.pageSize = pageSize
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ // 分页 页码change
|
|
|
+ changePage (current) {
|
|
|
+ this.pageNo = current
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
// 关联下级
|
|
|
handleAssociate (row) {
|
|
|
this.itemSn = row.linkageGroupSn
|
|
@@ -238,10 +250,6 @@ export default {
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
- },
|
|
|
- // 关闭弹框
|
|
|
- closeModal () {
|
|
|
- this.openModal = false
|
|
|
}
|
|
|
}
|
|
|
}
|