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

<template>
    <div class="conent">
        <!-- 新增按钮 -->
        <el-button type="success" @click="handAdd">新增</el-button>
        <el-button type="primary" @click="syncShopStock('all')">同步所有店铺库存</el-button>

        <div class="table" style="margin-top: 10px">
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="店铺名称">
                </el-table-column>
                <el-table-column prop="plat_id" label="所属平台"></el-table-column>
                <el-table-column prop="owner_id" label="商家店铺id"></el-table-column>
                <el-table-column prop="refresh_token_expires_at" label="授权过期时间点"></el-table-column>
                <el-table-column label="成本变动">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.ratio" placeholder="成本变动" @change="handleCellChange(scope.row)">
                        </el-input>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="danger" v-if="scope.row.status === '未授权'" size="small"><a :href="scope.row.authUrl"
                                target="_blank" rel="noopener noreferrer">授权</a>
                        </el-button>

                        <div v-if="scope.row.status === '已授权'">
                            <el-button type="success" :disabled="true" size="small">{{ scope.row.status }}</el-button>
                            <el-button @click="download(scope.row)" size="small">下载商品</el-button>
                            <el-button type="primary" v-if="scope.row.status === '已授权'" size="small"
                                @click="syncShopStock(scope.row.id)">同步库存</el-button>
                        </div>
                        <div v-if="scope.row.status === '重新授权'">
                            <el-button type="danger" target="_blank" size="small">
                                <a :href="scope.row.authUrl" rel="noopener noreferrer">重新授权</a>
                            </el-button>
                            <el-button @click="download(scope.row)" size="small">下载商品</el-button>
                        </div>

                        <div v-if="scope.row.status === '无需授权'">
                            <el-button type="success" :disabled="true" size="small">{{ 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" width="20%">
            <el-form ref="form" :rules="rules" :model="form" lable-width="80px">
                <el-form-item label="店铺名称">
                    <el-input v-model="form.name" placeholder="输入店铺名称" style="width: 400px;"></el-input>
                </el-form-item>
                <el-form-item label="店铺平台">
                    <el-select v-model="form.plat_id" placeholder="输入店铺平台" style="width: 400px;">
                        <el-option v-for="(item, index) in storeId" :key="index" :label="item" :value="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="成本变动">
                    <el-input v-model="form.ratio" placeholder="成本变动" style="width: 400px;"></el-input>
                </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, updateStore, syncStoreStock } from "../../api/shop";
export default {
    data() {
        return {
            dialogFormVisible: false,
            form: {
                name: "",
                plat_id: "",
                ratio: "*1",
            },
            rules: {
                name: [
                    { required: true, message: '请输入店铺名称', trigger: 'blur' },
                ],
                plat_id: [
                    { required: true, message: '请选择店铺平台', trigger: 'blur' },
                ],
                ratio: [
                    { required: true, message: '请输入成本变动', trigger: 'blur', },
                ],
            },
            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,
                });
            });
        },
        handleCellChange(row) {
            this.$confirm('确认修改成本变动吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                updateStore(row.id, { ratio: row.ratio }).then((res) => {
                    this.$message({
                        type: 'info',
                        message: res.data.message
                    })
                })
            });
        },
        // 同步
        syncShopStock(id) {
            let loading = this.$loading({
                lock: true,
                text: '店铺商品库存同步中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            syncStoreStock({ shop_id: id }).then((res) => {
                loading.close();
                this.$message({
                    type: 'info',
                    message: res.data.message
                })
            });
        }
    },
};
</script>

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

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