一. 编辑页代码

<template>
    <el-dialog width="55%" :visible.sync="open" :close-on-click-modal="false" title="消息公告详情" append-to-body :before-close="closePage">
        <!-- 表单 -->
        <el-form ref="formOne" :model="formData" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="信息类型">
                        <el-select v-model="formData.messageType" placeholder="请选择" style="width: 200px" clearable>
                            <el-option value="1" label="系统公告"></el-option>
                            <el-option value="2" label="业务流程信息"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="阅读状态">
                        <el-select v-model="formData.isRead" placeholder="请选择" style="width: 200px" clearable>
                            <el-option value="1" label="已读"></el-option>
                            <el-option value="2" label="未读"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="处理状态">
                        <el-select v-model="formData.isDeal" placeholder="请选择" style="width: 200px" clearable>
                            <el-option value="1" label="已处理"></el-option>
                            <el-option value="2" label="未处理"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="信息标题">
                        <el-input v-model="formData.messageTitle" placeholder="请输入" style="width: 200px" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="平台">
                        <el-select v-model="formData.platform" placeholder="请选择" style="width: 200px" clearable>
                            <el-option value="1" label="小程序"></el-option>
                            <el-option value="2" label="web端"></el-option>
                            <el-option value="3" label="官网"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="通知时间">
                        <el-input v-model="formData.createTime" placeholder="请输入" style="width: 200px" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item :label="$t('system_notice_index_520')">
                        <editor v-model="formData.content" :min-height="192" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer" style="text-align: center">
            <el-button type="primary" size="mini" icon="el-icon-tickets" @click="saveInfo">确定</el-button>
            <el-button  size="mini" icon="el-icon-close" @click="closePage">关闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { viewData } from '@/api/system/newsBulletin';

export default {
    name: 'edit',
    data() {
        return {
            formData: {},
            open: false
        };
    },
    created() {},
    methods: {
        //打开查看dialog
        openPage(id) {
            console.log('111', id);
            this.open = true;
            viewData(id).then(res => {
                this.formData = res.data;
                console.log('data', this.formData);
            });
        },

        //保存按钮
        saveInfo() {
            this.$refs['formOne'].validate(valid => {
                if (valid) {
                    this.closePage();
                }
            });
        },
        //关闭按钮
        closePage() {
            this.open = false;
        }
    }
};
</script>

二.主页代码

[1] 主页查看按钮事件

主页ref调编辑页打开事件

        //查看
        handleView(row) {
            this.$refs.editInfo.openPage(row.messageId);
        },

[2] 全部代码

<template>
    <div class="app-container">
        <div>
            <!-- 表单 -->
            <el-form ref="formOne" :model="formData" label-width="80px" :inline="true">
                <el-form-item label="阅读状态">
                    <el-select v-model="formData.isRead" placeholder="请选择" style="width: 200px" clearable>
                        <el-option value="1" label="已读"></el-option>
                        <el-option value="2" label="未读"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="处理状态">
                    <el-select v-model="formData.isDeal" placeholder="请选择" style="width: 200px" clearable>
                        <el-option value="1" label="已处理"></el-option>
                        <el-option value="2" label="未处理"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="信息标题">
                    <el-input v-model="formData.messageTitle" placeholder="请输入" style="width: 200px" clearable></el-input>
                </el-form-item>
                <!-- 操作 -->
                <el-form-item>
                    <SeaButton :label="$t('znBtn.search')" @seaClick="handleQuery" />
                    <ResButton :label="$t('znBtn.reset')" @resClick="resetQuery" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table :data="tableData" style="width: 100%" v-loading="loading" highlight-current-row @sort-change="handleSortChange">
                <el-table-column prop="messageType" label="信息类型" align="center" :formatter="conversion"></el-table-column>
                <el-table-column prop="isRead" label="阅读状态" align="center" :formatter="conversion"></el-table-column>
                <el-table-column prop="isDeal" label="处理状态" align="center" :formatter="conversion"></el-table-column>
                <el-table-column prop="messageTitle" label="信息标题" align="center"></el-table-column>
                <el-table-column prop="platform" label="平台" align="center" :formatter="conversion"></el-table-column>
                <el-table-column header-align="center" align="center" prop="createTime" label="通知时间"></el-table-column>
                <el-table-column show-overflow-tooltip label="操作" fixed="right" min-width="100" align="center">
                    <template v-slot="{ row }">
                        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleView(row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页查询-->
            <pagination v-show="total > 0" :total="total" :page.sync="formData.pageNum" :limit.sync="formData.pageSize" @pagination="getTable" />
        </div>
        <EditInfo ref="editInfo" />
    </div>
</template>

<script>
import { listData } from '@/api/system/newsBulletin';
export default {
    components: {
        EditInfo: () => import('./edit.vue')
    },
    data() {
        return {
            loading: false, //遮罩层
            formData: this.queryForm(), //表单参数
            tableData: [], //表格参数
            total: 0 // 总条数
        };
    },
    created() {
        this.getTable();
    },
    methods: {
        // 初始化表单
        queryForm() {
            return {
                pageNum: 1,
                pageSize: 10,
                orderColumn: 'createTime',
                orderTurn: 'DESC'
            };
        },
        //获取表格
        getTable() {
            this.loading = true;
            listData(this.formData).then(res => {
                this.tableData = res.rows;
                this.total = res.total;
                this.loading = false;
            });
        },
        /************************************按钮*****************************************/
        //搜索按钮操作
        handleQuery() {
            this.getTable();
        },
        //重置按钮
        resetQuery() {
            this.formData = this.queryForm();
            this.getTable();
        },
        //查看
        handleView(row) {
            this.$refs.editInfo.openPage(row.messageId);
        },
        //排序
        handleSortChange() {}
    }
};
</script>