qimall/addons/Seed/backend/views/setting/store.php

<?php
use common\helpers\ComponentHelper;

ComponentHelper::loadComponentView('com-store-list',Yii::getAlias('@addons').'/Store/backend/views/compoents/store');
?>
<div id="app" v-cloak>
    <el-card shadow="never" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div>
                <span>店铺设置</span>
                <div style="float: right; margin: -5px 10px">
                    <el-button type="primary" size="small" @click="handle('add_setting')">新增店长设置</el-button>
                </div>
            </div>
        </div>

        <div class="header-item flex-row">
            <span style="margin-right: 20px;">店长种子金统一设置：{{ config.percent }}%</span>
            <el-button type="text" @click="handle('update_global')">更改</el-button>
        </div>

        <div class="table-body el-input--small">
			<el-form :model="search"  ref="searchForm" label-width="100px">
				<el-row>
					<el-col :span="5">
						<el-form-item label="店铺ID">
						   <el-input v-model="search.store_id" placeholder="店铺ID"></el-input>
                        </el-form-item>
					</el-col>
					<el-col :span="5">
                        <el-form-item label="">
                            <el-button type="primary" size="small" @click="toSearch">搜索</el-button>
                        </el-form-item>
					</el-col>
				</el-row>
			</el-form>

            <el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
				<el-table-column prop="store_id" label="店铺ID" align="center"></el-table-column>

				<el-table-column label="店铺名称" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.store.store_name }}
                    </template>
                </el-table-column>

                <el-table-column label="店铺LOGO">
                    <template slot-scope="scope">
                        <com-image style="float: left;margin-right: 5px;" model="aspectFill" :src="scope.row.store.logo_img"></com-image>
                    </template>
                </el-table-column>

                <el-table-column label="店长ID" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.store.user_id }}
                    </template>
                </el-table-column>

				<el-table-column prop="percent" label="比例%" align="center"></el-table-column>

                <el-table-column label="添加时间" align="center" width="160" >
                    <template slot-scope="scope">
                        {{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" min-width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handle('update_setting', scope.row)">修改</el-button>
                        <el-button type="text" @click="handle('destroy', scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
            </div>
        </div>
    </el-card>

    <!-- 弹窗开始 -->
    <el-dialog title="修改设置" :visible.sync="dialog" @close="handle('close')">
        <el-form :model="setting" ref="settingForm" label-width="100px">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="店铺选择" prop="store_id" v-if="is_add">
                        <com-store-list :multiple="false" title="店铺选择" @selected="storeSelect">
                            <el-button type="primary" size="small">添加商家</el-button>
                        </com-store-list>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="店铺ID" prop="store_id" v-if="setting.type == 2">
                        <el-input v-model="setting.store_id" :disabled="true"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="比例设置" prop="percent">
                        <el-input onkeyup="value=toNumber(value,2)" v-model="setting.percent" placeholder="比例设置"></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="24">
                    <el-form-item label="">
                        <el-button type="primary" size="small" @click="handle('update', setting)">保存</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </el-dialog>
    <!-- 弹窗结束 -->
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
			search:{
				store_id:null,
			},
			list:[],
			listLoading: false,
            page: 1,
            pageCount: 0,
			limit:20,
            config: {
                percent: 0
            },
            dialog: false,
            setting: {
                store_id: null,
                percent: 0
            },
            StoreList:[],
            is_add: false
        },
        mounted() {
           this.getList(); 
        },
        methods: {
			getList() {
			    let self = this;
			    self.listLoading = true;
                let params = {
                    r: 'seed/setting/store',
                    page:self.page,
                    limit:self.limit,
                };
                params = Object.assign(params, this.search);
			    request({
			        method: 'get',
                    params: params,
			    }).then(e => {
			        self.listLoading = false;
			        self.list = e.data.data.list.list;
			        if (!isEmpty(e.data.data.config)) self.config = e.data.data.config;
                    self.page = e.data.data.list.page;
                    self.pageCount = e.data.data.list.page_count;
			    }).catch(e => {
			        console.log(e);
			    });
			},
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.getList();
            },
            toSearch() {
                this.page = 1;
                this.getList();
            },
            // 操作处理
            handle(type, data = null) {
                switch (type) {
                    case 'destroy':// 删除
                        params = {store_id: data.store_id, status: -1, type: 2};
                        this.$confirm('点击确定将删除该条数据, 是否继续?', '警告', {type: 'warning'}).then(() => {
                            this.send(params,'seed/setting/store',(resp) => {
                                if (resp.code == 0) this.getList();
                            })
                        })
                        break;
                    case 'update':// 修改
                        this.send(data,'seed/setting/store',(resp) => {
                            if (resp.code == 0) {
                                this.dialog = false
                                this.getList();
                            }
                        })
                        break;
                    case 'add_setting':// 新增店铺设置
                        this.dialog = true
                        this.setting.type = 2
                        this.is_add = true
                        break;
                    case 'update_setting':// 修改店铺设置
                        this.dialog = true
                        this.setting = data
                        this.setting.type = 2
                        break;
                    case 'update_global':// 修改统一配置
                        this.dialog = true
                        this.setting = this.config
                        this.setting.type = 1
                        break;
                    case 'close':// 关闭弹窗
                        this.dialog = false
                        this.is_add = false
                        break;
                }
            },
            send(params,url,callback = null) {
                let self = this;
                request({
                    params: {
                        r: url
                    },
                    method: 'post',
                    data: params
                }).then(e => {
                    if (e.data.code == 0) {
                        self.$message.success(e.data.msg);
                    } else {
                        self.$message.error(e.data.msg);
                    }
                    if (callback) callback(e.data);
                }).catch(e => {
                    console.log(e);
                });
            },
            storeSelect(store){
                this.setting.store_id = store.id
            },
        }
    });
</script>
<style>
    .header-item {
        background-color: #fff;
        margin-bottom: 10px;
        padding: 10px 20px;
        border-radius: 5px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
</style>