datang-admin/src/components/Banner/index.vue

<template>
    <div>
        <el-button
            type="primary"
            icon="el-icon-plus"
            style="margin-bottom: 15px;"
            @click="addModal"
            >
            添加
        </el-button>
        <div class="table">
            <el-table
                :data="lists"
                style="width: 100%">
                <el-table-column
                    prop="id"
                    label="轮播图id"
                    align="center"
                    width="250">
                    <template slot-scope="lists">
                        {{ lists.row.id }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="图片"
                    align="center">
                    <template slot-scope="lists">
                        <img :src="lists.row.url" width="100%" alt="" @click="openPic(lists.row.url)">
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="页面显示位置"
                    align="center"
                    width="250">
                    <template slot-scope="lists">
                        {{ setCode(lists.row.showPage) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="状态"
                    align="center"
                    width="250">
                    <template slot-scope="lists">
                        <el-tag v-if="lists.row.recStatus === 0">正常</el-tag>
                        <el-tag v-if="lists.row.recStatus === 1" type="info">禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="230">
                    <template slot-scope="lists">
                        <el-button
                            type="primary"
                            icon="el-icon-edit"
                            style="margin-right: 15px;"
                            @click="editModal(lists.row)"
                            size="mini">
                            编辑
                        </el-button>
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteItem(lists.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    :page-size="pageSize"
                    layout="prev, pager, next"
                    :total="count"
                    @current-change="currentChange"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹框 -->
        <el-dialog
            width="800px"
            :show-close="false"
            :close-on-click-modal="false"
            :visible.sync="showModal">
            <add-or-edit ref="distribution" :show-add="showAdd" :currList="currList" v-if="showModal" @close="close"></add-or-edit>
        </el-dialog>
    </div>
</template>

<script>
    const AddOrEdit = () => import('./addOrEdit.vue');

    import {
        POST_QUERY_CAROUSEL,
        POST_DELETE_CAROUSEL
    } from '@/api/carousel'
    import Alert from "@/utils/alert";
    import {tabList} from '../../filters/code';

    export default {
        name: "index",
        props: {
            showPage: {
                type: String,
                default: "0000"
            }
        },
        data() {
            return {
                count: 0,
                id: '',
                showModal: false,
                tabList,
                lists: [],
                currList: null,
                pageSize: 10,
                pageNum: 1,
                showAdd: true,
            }
        },

        components: {
            AddOrEdit,
        },
        methods: {
            /**
             * 获取轮播图列表
             */
            getList() {
                const { pageNum, pageSize, showPage } = this;
                const params = {
                    pageNum,
                    pageSize,
                    showPage
                };
                POST_QUERY_CAROUSEL(params).then(res => {
                    if(res.code === 200){
                        this.lists = res.data.list
                        this.pageNum = +res.data.pageNum
                        this.pageSize = +res.data.pageSize
                        this.count = +res.data.total
                    }else{
                        Alert.fail(res.msg || '获取失败');
                    }
                });
            },

            /**
             * 分页
             */
            currentChange(res) {
                this.pageNum = res;
                this.getList()
            },

            // 查看图片
            openPic(pic){
                window.open(pic)
            },

            // 设置显示位置
            setCode(showPage){
                let item = null
                for (let i = 0; i < this.tabList.length; i++) {
                    const list = this.tabList[i];
                    for (let j = 0; j < list.children.length; j++) {
                        const curItem = list.children[j];
                        if(curItem.code == showPage){
                            item = curItem
                            break;
                        }
                    }
                }
                return item && item.title ? item.title : ''
            },

            addModal(){
                this.showModal = true;
                this.showAdd = true;
            },

            editModal(currList) {
                this.showModal = true;
                this.showAdd = false;
                // this.id = id;
                this.currList = currList
            },

            /**
             * 删除
             */
            deleteItem(id) {
                try {
                    this.$alert('确定删除该条轮播图吗？', '请确认', {
                        confirmButtonText: '确定',
                        callback: res => {
                            if(res === 'confirm') {
                                const params = {
                                    id
                                };
                                POST_DELETE_CAROUSEL(params).then((res) => {
                                    if(res.code === 200){
                                        Alert.success('删除成功');
                                        this.getList()
                                    }else{
                                        Alert.fail(res.msg || '删除失败');
                                    }
                                });
                            }
                        }
                    });
                } catch (error) {
                    console.error('error: ', error);
                }
            },

            // 关闭弹窗
            close(type){
                this.showModal = false
                if(type){
                    this.getList()
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .table {
        background: #fff;
    }

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