nt_backend/application/admin/view/shopro/link/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>
    #linkIndex {
        padding: 16px 20px 30px;
        background: #fff;
        border-radius: 10px 10px 0px 0px;
        color: #444;
        font-weight: 500;
    }

    .el-tabs__item {
        padding: 0;
        text-align: center;
        width: 90px;
        height: 48px;
        line-height: 44px;
        padding-right: 10px;
        color: #666;
    }

    .table-item {
        margin-bottom: 10px;
        border: 1px solid #E6E6E6;
    }

    .table-item-header {
        height: 40px;
        background: #F9F9F9;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 30px 0 14px;
        /* border: 1px solid #E6E6E6;
        border-bottom: none; */
    }

    .express-width {
        width: 100px;
        text-align: center;
    }

    .header-btn {
        margin-left: 24px;
    }

    .group-item-operation {
        flex: 1;
    }

    .delete-button,
    .edit-button {
        cursor: pointer;
        margin-right: 14px;
    }

    .edit-button {
        color: #7438D5;
    }

    .delete-button {
        color: #FF5959;
    }

    [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="linkIndex" v-cloak>
    <div class="tabs-custom">
        <el-tabs v-model="activeName" @tab-click="tabClick">
            <el-tab-pane v-for="(group,gindex) in linkData" :label="group.group?group.group:'其它'"
                :name="group.group?group.group:'其它'">
                <div class="custom-table-header display-flex-b">
                    <div class="display-flex">
                        <div class="custom-refresh display-flex-c" @click="getData">
                            <i class="el-icon-refresh"></i>
                        </div>
                        <div class="create-btn display-flex-c" @click="operation('add',null)">
                            <i class="el-icon-plus"></i>
                            <span>新建</span>
                        </div>
                    </div>
                    {if condition = "$auth->check('shopro/link/recyclebin')"}
                    <div class="recycle-btn display-flex-c" @click="operation('recyclebin')">
                        <i class="fa fa-recycle"></i>
                        回收站
                    </div>
                    {/if}
                </div>
                <div class="group-container">
                    <el-table ref="multipleTable" :data="linkData[activeIndex].children" tooltip-effect="dark"
                        style="width: 100%" border :row-class-name="tableRowClassName" :cell-class-name="tableCellClassName" :header-cell-class-name="tableCellClassName" >

                        <el-table-column label="ID" min-width="60" prop="id">
                        </el-table-column>
                        <el-table-column label="名称" min-width="120">
                            <template slot-scope="scope">
                                <div class="ellipsis-item">
                                    {{scope.row.name}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="路径" min-width="300">
                            <template slot-scope="scope">
                                <div class="ellipsis-item">
                                    {{scope.row.path}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="所属分组" min-width="100" prop="group">
                            <template slot-scope="scope">
                                <div class="ellipsis-item">
                                    {{scope.row.group?scope.row.group:'其它'}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createtime" label="添加时间" width="160">
                            <template slot-scope="scope">
                                <div class="ellipsis-item">
                                    {{moment(scope.row.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="usenum" label="更新时间" width="160">
                            <template slot-scope="scope">
                                <div class="group-item-time">
                                    {{moment(scope.row.updatetime*1000).format('YYYY-MM-DD HH:mm:ss')}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="110">
                            <template slot-scope="scope">
                                <div class="group-item-operation display-flex">
                                    <div class="edit-button" @click="operation('edit',scope.row.id)">编辑</div>
                                    <div class="delete-button" @click="operation('delete',scope.row.id)">删除</div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- <div class="group-item display-flex">
                        <div class="group-item-id">ID</div>
                        <div class="group-item-name">名称</div>
                        <div class="group-item-path">路径</div>
                        <div class="group-item-group">所属分组</div>
                        <div class="group-item-time">添加时间</div>
                        <div class="group-item-time">更新时间</div>
                        <div class="group-item-operation display-flex">
                            操作
                        </div>
                    </div>
                    <div class="group-item display-flex" v-for="item in linkData[activeIndex].children">
                        <div class="group-item-id">{{item.id}}</div>
                        <div class="group-item-name">{{item.name}}</div>
                        <div class="group-item-path">{{item.path}}</div>
                        <div class="group-item-group">{{item.group?item.group:'其他'}}</div>
                        <div class="group-item-time">{{moment(item.createtime*1000).format('YYYY-MM-DD HH:mm:ss')}}</div>
                        <div class="group-item-time">{{moment(item.updatetime*1000).format('YYYY-MM-DD HH:mm:ss')}}</div>
                        <div class="group-item-operation display-flex">
                            <div class="edit-button" @click="operation('edit',item.id)">编辑</div>
                            <div class="delete-button" @click="operation('delete',item.id)">删除</div>
                        </div>
                    </div> -->
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    <div v-if="isData" class="display-flex-c" style="height: 200px;">
        暂无数据
    </div>
</div>