【Vue】基本功能方法

<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <div class="grid-content bg-purple">
                    ID
                    <el-input v-model="query.id" placeholder="请输入" class="handle-input mr10"></el-input>
                    文章标题
                    <el-input v-model="query.fileTitle" placeholder="请输入" class="handle-input mr10"></el-input>
                    文章分类
                    <el-input v-model="query.fileClassification" placeholder="请输入" class="handle-input mr10"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" @click="restSearch">重置</el-button>
                </div>
            </div>
            <el-divider></el-divider>
            <!-- 创建文章-->
            <el-button type="primary" icon="el-icon-circle-plus" class="handle-del mr10" @click="handleAdd">创建文章</el-button>
            <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="batchDelete">批量删除</el-button>
            <!-- 新增弹窗页面 -->
            <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogTableVisible">
                <el-form ref="artcleform" :model="artcleData" label-width="50px" :rules="artcleDataUles">
                    <el-form-item label="标题" prop="fileTitle">
                        <!-- <el-input v-model="editData.name"></el-input> -->
                        <el-input placeholder="请输入" class="handle-input" v-model="artcleData.fileTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="类型" class="handle-input" prop="fileClassification">
                        <el-select v-model="artcleData.fileClassification" placeholder="请选择" class="handle-select mr10">
                            <el-option key="1" label="Java" value="Java"></el-option>
                            <el-option key="2" label="Python" value="Python"></el-option>
                            <el-option key="3" label="Mysql" value="Mysql"></el-option>
                            <el-option key="4" label="Linux" value="Linux"></el-option>
                            <el-option key="5" label="Redis" value="Redis"></el-option>
                            <el-option key="6" label="网络安全" value="Networksecurity"></el-option>
                            <el-option key="7" label="自动化" value="automation"></el-option>
                            <el-option key="8" label="其他" value="other"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>

                <!-- 富文本编辑 -->
                <quill-editor ref="myTextEditor" v-model="artcleData.content" :options="editorOption"></quill-editor>

                <div slot="footer" class="dialog-footer">
                    <el-button class="editor-btn" type="primary" @click="saveArticleEdit">保存</el-button>
                    <el-button class="editor-btn" type="primary" @click="dialogTableVisible = false">取 消</el-button>
                </div>
            </el-dialog>
            <el-container>
                <el-main>
                    <el-table
                        :data="data"
                        style="width: 100%"
                        max-height="500"
                        :header-cell-style="{ textAlign: 'center' }"
                        :cell-style="{ textAlign: 'center' }"
                        @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <!-- 序号 -->
                        <el-table-column fixed prop="date" label="序号" width="80">
                            <template slot-scope="scope">
                                {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="ID" width="100"> </el-table-column>
                        <el-table-column prop="fileTitle" label="文章标题" width="120"> </el-table-column>
                        <el-table-column prop="content" label="文章内容" width="300"> 
                            <template slot-scope="scope">
                            <p v-html='scope.row.content'></p> 
                            </template>
                        </el-table-column>
                        <el-table-column prop="fileClassification" label="文章分类" width="120">
                            <!-- <template scope="scope">
                            <span v-if="scope.row.fileClassification =='Networksecurity'" style="color:red;">网络安全</span>
                            <span v-if="scope.row.fileClassification ==='automation'" style="color:green;">自动化</span>
                            <span v-if="scope.row.fileClassification ==='other'" style="color:green;">其他</span>
                            <span>{{scope.row.fileClassification}}</span>
                        </template> -->
                        </el-table-column>
                        <el-table-column prop="fileSize" label="文件大小" width="120"> </el-table-column>
                        <el-table-column prop="encrypt" label="是否加密" width="80"></el-table-column>
                        <el-table-column prop="passWord" label="密码" width="100"></el-table-column>
                        <el-table-column prop="status" label="状态" width="100"></el-table-column>
                        <el-table-column prop="createTime" label="创建时间" width="160" :formatter="formatDate"></el-table-column>
                        <el-table-column prop="updateTime" label="更新时间" width="160" :formatter="formatDate"></el-table-column>
                        <!-- 操作 -->
                        <el-table-column fixed="right" label="操作" width="220">
                            <template slot-scope="scope">
                                <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">
                                    编辑
                                </el-button>
                                <el-button
                                    @click.native.prevent="handleDelete(scope.$index, scope.row)"
                                    type="danger"
                                    size="mini"
                                    icon="el-icon-delete"
                                >
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <!-- 分页 -->
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        :total="pageTotal"
                        layout="total, sizes, prev, pager, next, jumper"
                    >
                    </el-pagination>
                </el-main>
            </el-container>
        </div>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
import { findAllArticle, getArticleByParams, deleteArtcleById, deleteBatchArtcle, addartcle, updateArtcleInfo } from '../../api/index';

export default {
    name: 'Article',
    data() {
        return {
            dialogTableVisible: false,
            tableData: [], //列表
            pageTotal: 0, //总条数
            currentPage: 1, //默认显示第1页
            pageSize: 10, //默认一次显示10条数据
            query: {
                //查询
                id: '',
                fileTitle: '',
                fileClassification: ''
            },
            artcleData: {
                fileTitle: '',
                fileClassification: '',
                //富文本内容
                content: ''
            }, //必填项校验
            artcleDataUles: {
                fileTitle: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
                fileClassification: [{ required: true, message: '文章类别不能为空', trigger: 'blur' }]
            },

            // 富文本提示
            editorOption: {
                placeholder: '点击进行编辑'
            },
            msg: '', //记录每一条的信息，便于取id
            // gridData: [],
            // multipleSelection: [],
            delList: [], //存放单个删除的数据
            selectionList: [], //多选的数据
            editVisible: false, //编辑状态
            delVisible: false, //删除提示弹框的状态

            //新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
            titleMap: {
                addEquipment: '创建文章',
                editEquipment: '编辑文章'
            },
            //新增和编辑弹框标题
            dialogStatus: ''
        };
    },
    created() {
        this.queryTableDate();
    },
    methods: {
        formatDate(value) {
            // 例如后台传给我们的时间戳
            this.value1 = new Date(value.createTime); //value.createdTime是prop绑定的字段名称
            let dateValue = this.$moment(this.value1).format('YYYY-MM-DD HH:mm:ss'); //$moment专门转化时间的插件（使用时需要下载引入）
            return dateValue;
        },
        //默认查询
        queryTableDate() {
            console.log('默认加载方法：');
            findAllArticle(this.query).then((res) => {
                console.log(res);
                this.tableData = res;
                this.pageTotal = res.length;
                console.log('total条数', this.pageTotal);
            });
        },
        // 每页条数切换
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
        },
        //当前页切换
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },
        //按条件查询
        handleSearch() {
            getArticleByParams(this.query).then((res) => {
                console.log(res);
                this.currentPage = 1; //当前页
                this.tableData = res;
                this.pageTotal = res.length;
                console.log('getArticleByParams:', this.pageTotal);
            });
        },
        //重置查询条件
        restSearch() {
            (this.query.id = ''), (this.query.fileTitle = ''), (this.query.fileClassification = ''), this.handleSearch();
            //指定表单属性值重置
        },
        // 多选操作
        handleSelectionChange(val) {
            this.selectionList = [];
            // this.selectionList = val;
            // if (this.selectionList.length >= 0) {
            //     this.$message.success(`选中了,id=${this.selectionList}`);
            // } else {
            //     this.$message.warning(`取消选中选项`);
            // }
            //储存多选id
            val.forEach((element) => {
                this.selectionList.push(element.id);
            });
            console.log('selectionList:', this.selectionList);
        },
        //单个删除，table行
        handleDelete(index, row) {
            // rows.splice(index, 1);
            // this.idx = index;
            // this.msg=rows;//每一条数据的记录

            // this.delList.push(this.msg.id);//把单行删除的每条数据的id添加进放删除数据的数组
            // console.log('msg:', this.idx);
            // console.log('delList:', this.delList);
            // this.delVisible = true;

            this.idx = index;
            this.msg = row; //每一条数据的记录
            this.delList = this.msg.id; //把单行删除的每条数据的id添加进放删除数据的数组
            this.delVisible = true;
            console.log('需被删除的id:', this.delList);
            var params = {
                ids: { id: this.delList }
            };
            console.log('需被删除的params:', params);
            // if (this.tableData.id != "") {
            //     // deleteBatchArtcle(params);
            //     this.tableData.splice(index, 1);
            //     this.$message.success('删除成功...');

            // } else {
            //     this.tableData.splice(index, 1);
            // }

            // 二次确认删除
            this.$confirm('此操作将永久删除【id=' + this.delList + '】的数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    // 这里加个 async，可以查下相关文档 async...await
                    deleteArtcleById(params);
                    this.$message.success('删除成功');
                    this.tableData.splice(index, 1);
                    this.handleSearch();
                })
                .catch(() => {
                    this.$message.warning('取消删除');
                });
            this.delVisible = false; //关闭删除提示模态框
        },
        //批量删除
        batchDelete() {
            //判断是否勾选
            // let that = this;
            if (this.selectionList == '' || this.selectionList == null) {
                this.$message.warning(`您未选中选项，请重新操作！`);
                return;
            }
            // multipleSelection存储了勾选到的数据
            //  this.delList = this.selectionList;
            console.log('选中的delList:', this.selectionList);
            // 数组转字符串使用逗号分隔
            let sids = this.selectionList.join(',');

            //组装id
            let params = {
                // ids: {id:this.delList}
                ids: sids
            };
            console.log('组装选中的params', params);

            this.$confirm('确定删除这些数据吗?', '批量删除', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(async () => {
                    deleteBatchArtcle(params);
                    this.handleSearch();
                    // this.queryTableDate();
                    this.$message.success('删除成功');
                    // this.tableData.splice(index, 1);
                })
                .catch(() => {
                    this.$message.warning('取消删除');
                });
            this.delVisible = false; //关闭删除提示模态框
        },
        //创建文章
        handleAdd() {
            this.dialogTableVisible = true;
            this.hasId = '';

            //新增弹框标题
            this.dialogStatus = 'addEquipment';
            //重置表单数据resetField方法
            this.$nextTick(() => {
                this.$refs.artcleform.resetFields();
                //重置表单数据
                this.artcleData = {
                    fileTitle: '',
                    fileClassification: '',
                    content: ''
                };
            });
        },

        // 编辑操作
        handleEdit(index, row) {
            this.idx = index;
            // this.artcleform = row;
            this.dialogTableVisible = true;
            //编辑弹框标题
            this.dialogStatus = 'editEquipment';

            this.hasId = row.id;
            console.log('idx=>', row.id);
            // //重置表单，回显数据
            this.artcleData.id = row.id;
            this.artcleData.fileTitle = row.fileTitle;
            this.artcleData.fileClassification = row.fileClassification;
            this.artcleData.content = row.content;
        },
        // 保存编辑文章及新增
        saveArticleEdit() {
            this.editVisible = false;
            // this.$message.success(`修改第 ${this.id+ 1} 行成功`);
            // this.$set(this.artcleData, this.idx, this.form);
               //请求参数
                    let params = {
                        articleData: this.artcleData
                    };

            this.$refs.artcleform.validate((valid) => {
                if (valid && this.hasId) {
                    //编辑
                    console.log('编辑页面', this.artcleform);

                    updateArtcleInfo(params).then((response) => {
                        if (response.success === true) {
                            this.$message.success(response.msg);
                            this.dialogTableVisible = false;
                            this.queryTableDate();
                        }
                    });
                } else if (valid && !this.hasId) {
                    //新增
                    console.log('新增页面', this.artcleData);
     
                    addartcle(params).then((response) => {
                        console.log('response==>', response);
                        if (response.success === true) {
                            this.$message.success(response.msg);
                            this.dialogTableVisible = false;
                            this.queryTableDate();
                        }
                    });
                } else {
                    return false;
                }
            });
        },
    },
    components: {
        quillEditor
    },
    computed: {
        // 计算当前表格中的数据
        data() {
            console.log('计算条数', this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize));
            return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize);
        }
    }
};
</script>


<style scoped>
.el-main {
    /* background-color: tomato; */
    color: #333;
    text-align: center;
}

.handle-box {
    height: 80px;
    line-height: 80px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 180px;
    /* padding: 0 10px 0 10px; */
    display: inline-block;
}
.mr10 {
    margin-right: 10px;
}
.handle-linefeed {
    /* float: left; */
    /* 强行换行 */
    word-break: normal;
    padding: 10px 0px 0px 0px;
}
</style>