datang-admin/src/components/Detail/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%"
                :expand-row-keys="keys"
                :row-key="setKey"
                @expand-change="getDetail"
                >
                <el-table-column type="expand">
                    <template slot-scope="lists">
                        <el-form label-position="left" inline class="demo-table-expand">
                            <el-form-item>
                                <div id="table-content" v-if="content" v-html="content"></div>
                                <div v-else>暂无</div>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="页面显示位置"
                    align="center"
                    >
                    <template slot-scope="lists">
                        {{ setCode(lists.row.showPage) }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="创建时间"
                    align="center"
                    >
                    <template slot-scope="lists">
                        {{ $moment(lists.row.createdAt).format('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="修改时间"
                    align="center"
                    >
                    <template slot-scope="lists">
                        {{ $moment(lists.row.updatedAt).format('YYYY-MM-DD HH:mm') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="最后修改人登录名"
                    align="center"
                    >
                    <template slot-scope="lists">
                        {{ lists.row.modifyName }}
                    </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.detailId)">删除</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="1200px"
            :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-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
        </el-dialog>
    </div>
</template>

<script>
    const AddOrEdit = () => import('./addOrEdit.vue');
    import {
        POST_QUERY_DETAIL,
        QUERY_DETAIL,
        DELETE_DETAIL
    } from '@/api/contentDetail'
    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,
                content: '',
                keys: []
            }
        },
        components: {
            AddOrEdit,
        },
        methods: {
            /**
             * 获取详情列表
             */
            getList() {
                const { pageNum, pageSize, showPage } = this;
                const params = {
                    pageNum,
                    pageSize,
                    showPage
                };
                POST_QUERY_DETAIL(params).then(res => {
                    if(res.code === 200){
                        if(res.data.list && res.data.list.length){
                            this.lists = res.data.list
                        }
                        this.pageNum = res.data.pageNum
                        this.pageSize = res.data.pageSize
                        this.count = res.data.size
                    }else{
                        Alert.fail(res.msg || '获取失败');
                    }
                });
            },

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

            setKey(row){
                return row.detailId
            },

            /**
             * 单个内容详情
             */
            async getDetail(row){
                try {
                    const { showPage } = this;
                    const params = {
                        detailId: row.detailId,
                        pageNum: 1,
                        pageSize: 10,
                        showPage
                    };
                    await QUERY_DETAIL(params).then(res => {
                        if(res.code === 200){
                            this.content = res.data.content
                            if(this.keys.length){
                                const index = this.keys.findIndex(key => key === row.detailId)
                                if(index !== -1){
                                    this.keys = []
                                }else{
                                    this.keys.splice(0, 1, row.detailId)
                                }
                            }else{
                                this.keys.push(row.detailId)
                            }
                        }else{
                            Alert.fail(res.msg || '详情获取失败');
                        }
                    });
                } catch (error) {
                    console.log('error: ', error);
                }
            },

            // 设置显示位置
            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.currList = currList;
                this.showModal = true;
                this.showAdd = false;
                // this.id = id;
            },

            // 关闭弹窗
            close(){
                this.showModal = false
                this.keys = []
                this.getList()
            },

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

            },
        }
    }
</script>

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

        .option-span {
            color: #a90500;
            cursor: pointer;
        }
    }

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