RRDJ_APP/application/admin/view/shopro/user/group/index.html

<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
<style>
    #groupIndex {
        background: #fff;
        padding: 0 20px 30px;
    }
    .status-normal{
        color: #6ACAA5;
    }
    .status-hidden{
        color: #C4C4C4;
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
<div id="groupIndex" v-cloak>
    <div class="custom-header display-flex">
        <div class="custom-header-title">
            用户分组
        </div>
    </div>
    <div class="custom-button-container">
        <div class="display-flex">
            <div class="custom-refresh" @click="getData">
                <i class="el-icon-refresh"></i>
            </div>
            <el-button type="primary" size="small" @click="operation('create',null)"><i class="el-icon-plus"></i> 新建分组</el-button>
        </div>
    </div>
    <div class="custom-table">
        <div class="custom-table-border">
            <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border
                :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName"
                :header-cell-class-name="tableCellClassName" @row-dblclick="operation">
                <el-table-column label="ID" prop="id" width="80">
                </el-table-column>
                <el-table-column label="组名" min-width="240">
                    <template slot-scope="scope">
                        <div class="ellipsis-item">
                            {{scope.row.name}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="更新时间" width="180">
                    <template slot-scope="scope">
                        <div>
                            {{moment(scope.row.updatetime*1000).format("YYYY-MM-DD HH:mm:ss")}}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="80">
                    <template slot-scope="scope">
                        <div class="display-flex">
                            <span v-if="scope.row.status=='normal'" class="display-flex">
                                <span class="shopro-status-dot shopro-status-normal-dot"></span>
                                <span class="shopro-status-normal">{{scope.row.status_text}}</span>
                            </span>
                            <span v-else class="display-flex">
                                <span class="shopro-status-dot shopro-status-default-dot"></span>
                                <span class="shopro-status-default">{{scope.row.status_text}}</span>
                            </span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="130">
                    <template slot-scope="scope">
                        <div>
                            {if condition = "$auth->check('shopro/user/group/edit')"}
                            <span class="table-edit-text" @click="operation('edit',scope.row.id)">编辑</span>
                            {/if}
                            {if condition = "$auth->check('shopro/user/group/del')"}
                            <span class="table-delete-text" @click="operation('del',scope.row.id)">删除</span>
                            {/if}
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper" :total="totalPage">
            </el-pagination>
        </div>
    </div>
</div>