chenrui 3 gadi atpakaļ
vecāks
revīzija
e04d7763d9
1 mainītis faili ar 128 papildinājumiem un 107 dzēšanām
  1. 128 107
      src/views/dealerManagement/dealerRelationshipBinding/list.vue

+ 128 - 107
src/views/dealerManagement/dealerRelationshipBinding/list.vue

@@ -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
     }
   }
 }