细节

src/views/store/channel.vue

@@ -1,105 +1,93 @@
 <template>
-    <a-card :bordered="false">
-      <div class="card-title">{{ $route.meta.title }}</div>
-      <a-table
-        rowKey="merchant_id"
-        :columns="columns"
-        :dataSource="shopList"
-        :defaultExpandAllRows="true"
-        :expandIconColumnIndex="1"
-        :pagination="pagination"
-        :loading="isLoading"
-      >
-        <span slot="logoImage" slot-scope="text, item">
-          <a v-if="item.logoImage" title="点击查看原图" :href="item.logoImage.external_url" target="_blank">
-            <img width="50" height="50" :src="item.logoImage.external_url" alt="商户logo" />
-          </a>
-        </span>
-        <span slot="action" slot-scope="text, item">
-          <template>
-            <a v-action:edit style="margin-right: 8px" @click="handleEdit(item)">编辑</a>
-            <!-- <a v-action:delete @click="handleDelete(item)">删除</a> -->
-          </template>
-        </span>
-      </a-table>
-      <EditForm ref="EditForm" @handleSubmit="handleRefresh" />
-    </a-card>
-  </template>
+	<a-card :bordered="false">
+		<div class="card-title">{{ $route.meta.title }}</div>
+		<s-table ref="table" size="default" rowKey="store_id" :columns="columns" :data="loadData" :pagination="pagination">
+			<span slot="logoImage" slot-scope="text, item">
+				<a v-if="item.logoImage" title="点击查看原图" :href="item.logoImage.external_url" target="_blank">
+					<img width="50" height="50" :src="item.logoImage.external_url" alt="商户logo" />
+				</a>
+			</span>
+			<span slot="action" slot-scope="text, item">
+				<template>
+					<a v-action:edit style="margin-right: 8px" @click="handleEdit(item)">编辑</a>
+				</template>
+			</span>
+		</s-table>
+		<EditForm ref="EditForm" @handleSubmit="handleRefresh" />
+	</a-card>
+</template>
   
   <script>
 import * as Api from '@/api/channel'
-  import { STable } from '@/components'
-  import EditForm from './modules/channelEdit.vue'
-  
-  export default {
-    components: {
-      STable,
-      EditForm
-    },
-    data() {
-      return {
-        shopList: [],
-        // 表头
-        columns: [
-          {
-            title: '商户logo',
-            dataIndex: 'logoImage',
-            scopedSlots: { customRender: 'logoImage' }
-          },
-          {
-            title: '商户名称',
-            dataIndex: 'shop_name'
-          },
-          {
-            title: '商户标签',
-            dataIndex: 'shop_label'
-          },
-          {
-            title: '渠道名称',
-            dataIndex: 'name'
-          },
-          {
-            title: '渠道别名',
-            dataIndex: 'alias'
-          },
-          {
-            title: '添加时间',
-            dataIndex: 'create_time'
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            width: '180px',
-            scopedSlots: { customRender: 'action' }
-          }
-        ]
-      }
-    },
-    created() {
-      // 获取分类列表
-      this.getShopList()
-    },
-    methods: {
-       // 编辑商户
-      async handleEdit(record) {
-        // 显示对话框
-        this.$refs.EditForm.add(record)
-      },
-      // 刷新列表
-      handleRefresh () {
-        // 获取分类列表
-        this.getShopList()
-      },
-      // 获取商户列表
-      getShopList() {
-        this.isLoading = true
-        Api.channelList()
-          .then((result) => {
-            this.shopList = result.data.list.data
-            this.isLoading = false
-          })
-          .finally(() => (this.isLoading = false))
-      },
-    }
-  }
+import { STable } from '@/components'
+import EditForm from './modules/channelEdit.vue'
+
+export default {
+	components: {
+		STable,
+		EditForm
+	},
+	data() {
+		return {
+			shopList: [],
+			// 表头
+			columns: [
+				{
+					title: '商户logo',
+					dataIndex: 'logoImage',
+					scopedSlots: { customRender: 'logoImage' }
+				},
+				{
+					title: '商户名称',
+					dataIndex: 'shop_name'
+				},
+				{
+					title: '商户标签',
+					dataIndex: 'shop_label'
+				},
+				{
+					title: '渠道名称',
+					dataIndex: 'name'
+				},
+				{
+					title: '渠道别名',
+					dataIndex: 'alias'
+				},
+				{
+					title: '添加时间',
+					dataIndex: 'create_time'
+				},
+				{
+					title: '操作',
+					dataIndex: 'action',
+					width: '180px',
+					scopedSlots: { customRender: 'action' }
+				}
+			],
+			// 加载数据方法 必须为 Promise 对象
+			loadData: param => {
+				return Api.channelList(param)
+					.then(response => {
+						return response.data.list
+					})
+			},
+		}
+	},
+	created() {
+	},
+	methods: {
+		/**
+		 * 刷新列表
+		 * @param Boolean bool 强制刷新到第一页
+		 */
+		handleRefresh(bool = false) {
+			this.$refs.table.refresh(false)
+		},
+		// 编辑商户
+		async handleEdit(record) {
+			// 显示对话框
+			this.$refs.EditForm.add(record)
+		},
+	}
+}
   </script>