admin-cms/src/layout/zhidao/zhidaoList.vue

<template>
    <div id="zhidaoList">
        <el-row>
            <el-col :span="24">
                <el-col :span="24" class="search">
                    <!--<el-col :span="5">
                    <span>筛选条件：</span>
                    <el-select v-model="search.region" placeholder="请选择">
                      <el-option label="类型一" value="0"></el-option>
                      <el-option label="类型二" value="1"></el-option>
                    </el-select>
                  </el-col>-->
                        <span>输入条件：</span>
                        <el-input clearable v-model="search.name" :placeholder="placeholder" class="input"></el-input>
                    <!--<el-col :span="7">
                      <span>时间选择：</span>
                      <el-date-picker v-model="search.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
                    </el-col>-->
                        <el-button class="btnSearch" @click="toQuery">查询</el-button>
<!--                        <el-button class="btnSearch qing" @click="toClear">清空</el-button>-->
                </el-col>
                <el-col :span="24">
                    <el-table
                            v-loading = "pictLoading"
                            element-loading-text = "数据正在加载中"
                            element-loading-spinner = "el-icon-loading"
                            ref="tableData"
                            :data="tableData"
                            tooltip-effect="dark"
                            :default-sort="{ prop: 'date', order: 'descending' }"
                            style="width: 100%"
                            @selection-change="handleSelectionChange"
                    >
                        <!--<el-table-column type="selection" align="center"> </el-table-column>-->
                        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                        <el-table-column property="name" label="名称" align="center"></el-table-column>
                        <el-table-column label="图片" align="center">
                            <template slot-scope="scope">
                                <span> <el-image v-if="scope.row.image" :src="scope.row.image" style="height:20px;width:20px "
                                                 @click="showImage(scope.row.image)"></el-image></span>
                            </template>
                        </el-table-column>
                        <el-table-column property="link" label="链接" align="center"></el-table-column>
                        <el-table-column label="操作" align="center" width="300px">
                            <template slot-scope="scope">
                                <el-button size="mini" title="修改信息" type="text" class="edit" icon="el-icon-edit"
                                           @click="$router.push({ path: '/zhidao/detail', query: { id: scope.row.id } })"></el-button>
                                <el-button size="mini" title="删除" type="text" class="delete" icon="el-icon-delete"
                                           @click.prevent="deleteRow(scope.row.id)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-row>
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page.sync="currentPage"
                                :page-sizes="[10, 20, 30, 40]"
                                :page-size.sync="limit"
                                background
                                layout="total, prev, pager, next, jumper"
                                :total="total"
                        >
                        </el-pagination>
                    </el-row>
                </el-col>
            </el-col>
        </el-row>
        <el-dialog
                :visible.sync="dialogVisible"
                width="30%"
        >
            <el-image :src="elImage" style="height:100%;width:100% "></el-image>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'zhidaoList',
        props: {
            tableData: null,
            total: null,
        },
        components: {},
        data: () => ({
            placeholder: '请输入名称',
            search: {},
            currentPage: 1,
            limit: 10,
            dialogVisible: false,
            elImage: '',
            pictLoading:true,
        }),
        watch:{
            tableData(){
                this.pictLoading = false;
            }
        },
        created() {
        },
        computed: {},
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            deleteRow(id) {
                this.$confirm('确定删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$set(this, `currentPage`, 1);
                    this.$emit('deleteRow', {id: id, skip: 0, limit: this.limit, ...this.search});
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleSizeChange(val) {
                this.$set(this, `currentPage`, 1);
                this.$emit('select', {skip: 0, limit: val, ...this.search});
            },
            handleCurrentChange(val) {
                this.$set(this, `pictLoading`, true);
                this.$emit('select', {skip: (val - 1) * this.limit, limit: this.limit, ...this.search});
            },
            toQuery() {
                this.$set(this, `currentPage`, 1);
                this.$set(this, `pictLoading`, true);
                this.$emit('select', {skip: 0, limit: this.limit, ...this.search});
            },
            toClear() {
                let keys = Object.keys(this.search);
                for (const key of keys) {
                    this.$set(this.search, `${key}`, '');
                }
            },
            showImage(image) {
              if(image){
                this.$set(this, `elImage`, image);
                this.$set(this, `dialogVisible`, true);
              }else{
                this.$set(this, `dialogVisible`, false);
              }
            }
        },
    };
</script>

<style lang="less" scoped>
    /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
        background-color: red;
        border-color: red;
    }

    /deep/ .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: red;
        border-color: red;
    }

    /deep/ .el-table th {
        background-color: #f5f6fa;
        padding: 8px 0;
    }

    /deep/ .el-table td {
        padding: 11px 0;
    }

    .other {
        color: #f36302;
    }

    .view {
        color: #f36302;
    }

    .edit {
        color: #2ccc02;
    }

    .delete {
        color: #e9021d;
    }

    /deep/ .el-pagination {
        padding: 26px 20px;
    }

    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: red;
    }

    .input {
        width: 150px;
        margin-right: 10px;
    }

    /*/deep/ .el-input__inner {*/
    /*    height: 35px;*/
    /*    line-height: 35px;*/
    /*}*/

    .btnSearch {
        width: 80px;
        height: 34px;
        background: rgba(233, 2, 29, 1);
        border-radius: 4px;
        padding: 0;
        color: #fff;
    }

    /*.qing {*/
    /*    background: rgba(185, 185, 185, 1);*/
    /*}*/

    .top {
        height: 50px;
        margin: 0 0 10px 0;
    }

    .search {
        background: #ffffff;
        width: 97%;
        height: 35px;
        margin: 20px;
        margin-left: 0px;
    }

    .list {
        padding: 0 20px;
    }

    /deep/ .el-input__suffix {
        .el-input__suffix-inner {
            border-color: unset;

            .el-icon-circle-close:before {
                content: "\e79d" !important;
                font-size: 20px;
            }
        }
    }
    /deep/ .el-icon-edit {
        background: url(../../assets/xiugaixinxi.png) center no-repeat;
        background-size: cover;
        width: 25px;
        height: 25px;
    }

    /deep/ .el-icon-edit:before {
        content: "替";
        font-size: 16px;
        visibility: hidden;
    }
    /deep/ .el-icon-delete {
        background: url(../../assets/shanchu.png) center no-repeat;
        background-size: cover;
        width: 25px;
        height: 25px;
    }

    /deep/ .el-icon-delete:before {
        content: "替";
        font-size: 16px;
        visibility: hidden;
    }
    /deep/ .el-table__row .cell  .edit:first-child  {
        margin-right: 10px;
    }


    /deep/.el-loading-spinner .el-loading-text {
        color: #e9021d;
        margin: 3px 0;
        font-size: 14px;
    }
    /deep/ .el-icon-loading {
        background: url(../../assets/loading.png) center no-repeat;
        background-size: cover;
        width: 25px;
        height: 25px;
    }
    /deep/ .el-icon-loading:before {
        content: "替";
        visibility: hidden;
    }
</style>