erp/resources/frontend/src/views/store/store.vue

<template>
    <div class="conent">
        <!-- 新增按钮 -->
        <el-button type="primary" @click="handAdd">新增</el-button>

        <div class="table" style="margin-top: 10px">
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="ID" width="180"> </el-table-column>
                <el-table-column prop="name" label="店铺名称" width="180">
                </el-table-column>
                <el-table-column prop="plat_id" label="所属平台"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="danger" v-if="scope.row.status === '未授权'"><a :href="scope.row.authUrl"
                                target="_blank"
                                rel="noopener noreferrer">&nbsp;&nbsp;授&nbsp;&nbsp;&nbsp;权&nbsp;&nbsp;</a>
                        </el-button>
                        <div v-if="scope.row.status === '已授权'">
                            <el-button type="success" :disabled="true">{{
                            scope.row.status
                            }}</el-button>
                            <el-button @click="download(scope.row)">下载商品</el-button>
                        </div>
                        <div v-if="scope.row.status === '重新授权'">
                            <el-button type="danger" target="_blank"><a :href="scope.row.authUrl"
                                    rel="noopener noreferrer">重新授权</a>
                            </el-button>
                            <el-button @click="download(scope.row)">下载商品</el-button>
                        </div>

                        <div v-if="scope.row.status === '无需授权'">
                            <el-button type="success" :disabled="true">{{
                            scope.row.status
                            }}</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- 分页功能 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="current_page" :page-sizes="[15, 50, 100]" :page-size="per_page"
                layout="total, sizes, prev, pager, next, jumper" :total="Paginationdata.total">
            </el-pagination>
        </div>

        <!-- 新增店铺 -->
        <el-dialog title="新增店铺" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="form">
                <el-form-item label="店铺名称">
                    <el-input v-model="form.name" placeholder="输入店铺名称"></el-input>
                </el-form-item>
                <el-form-item label="店铺平台">
                    <el-select v-model="form.plat_id" placeholder="输入店铺平台">
                        <el-option v-for="(item, index) in storeId" :key="index" :label="item" :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSubmit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { shopListId, shopAdd, storeList, downloadGoods } from "../../api/shop";
export default {
    data() {
        return {
            dialogFormVisible: false,
            form: {
                name: "",
                plat_id: "",
            },
            storeId: [], // 店铺id
            loading: true,
            tableData: [],
            Paginationdata: {}, //分页相关数据
            current_page: 1, //当前页
            per_page: 15, //每页显示数量
        };
    },
    mounted() {
        // 展示店铺列表
        this.getStoreList();
    },
    methods: {
        // 点击新增
        handAdd() {
            this.form.name = "";
            this.form.plat_id = "";
            this.dialogFormVisible = true;
            this.getshop();
        },

        // 新增商品
        addSubmit() {
            const datas = this.form;
            shopAdd(datas).then((res) => {
                if (res.status == 200) {
                    this.$message({
                        type: "success",
                        message: "添加成功",
                    });
                }
                this.getStoreList();
            });
            this.dialogFormVisible = false;
        },

        // 店铺列表
        getStoreList() {
            let page = {
                page: this.current_page,
                per_page: this.per_page,
            };
            storeList(page).then((res) => {
                this.tableData = res.data.data;
                this.Paginationdata = res.data.meta;
            });
            this.loading = false
        },

        //分页功能
        handleSizeChange(val) {
            //当前条数
            this.per_page = val;
            this.getStoreList();
        },
        handleCurrentChange(val) {
            //当前页
            this.current_page = val;
            this.getStoreList();
        },

        // 店铺平台
        getshop() {
            shopListId().then((res) => {
                this.storeId = res.data.data;
            });
        },

        // 下载商品
        download(row) {
            const loading = this.$loading({
                lock: true,
                text: row.name + ' 店铺商品下载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            downloadGoods(row.id).then((res) => {
                loading.close();
                this.$message({
                    type: "success",
                    message: res.data.message,
                });
            });
        },
    },
};
</script>

<style lang="scss" scoped>
a {
    text-decoration: none;
    color: white;
}

.block {
    margin-top: 20px;
}
</style>