yunsu/official_frontend/src/views/about/qualifications.vue

<template>
    <div class="app-container">
        <el-button size="small" type="primary" @click="openDialog(false, null)" :loading="loading">添加</el-button>
        <el-table :data="cooperations" style="width: 100%">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="图片" width="200">
            <template slot-scope="scope">
            <el-image :src="scope.row.imgUrl"></el-image>
            <!-- style="width: 200px; height: 200px"  -->
            </template>
        </el-table-column>
        <el-table-column prop="title" label="名称" width="150"></el-table-column>
        <el-table-column prop="content" label="描述"></el-table-column>
        <el-table-column label="操作" width="300">
            <template slot-scope="scope">
            <el-button size="small" @click="openDialog(true, scope.$index)" :loading="loading">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteCooperation(scope.row.id)" :loading="loading">删除</el-button>
            </template>
        </el-table-column>
        </el-table>

        <!-- 添加和编辑的dialog -->
        <el-dialog title="荣誉资质" :visible.sync="addDialogVisible" width="500px">
            <el-form ref="form" :model="cooperationsForm" :rules="rules" label-width="80px">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="cooperationsForm.name" placeholder="请输入名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="description">
                    <el-input v-model="cooperationsForm.description" placeholder="请输入描述" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-upload ref="upload" action="customize" :http-request="uploadDiscardFile" :limit="1" :before-remove="beforeRemove">
                        <el-button size="small" type="primary" :loading="loading">上传一张图片</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="addCooperation()" :loading="loading">提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import request from "@/utils/request";
    export default {
        data() {
            return {
                editing: false,
                loading: false,
                addDialogVisible: false,
                cooperations: [],
                cooperationsForm: {
                    id: null,
                    name: null,
                    description: null,
                    image: null
                },
            };
        },
        methods: {
            //打开对话框
            openDialog(isEdit, index) {
                this.editing = isEdit;
                if (this.editing) {
                    this.cooperationsForm.id = this.cooperations[index].id;
                    this.cooperationsForm.name = this.cooperations[index].title;
                    this.cooperationsForm.description = this.cooperations[index].content;
                    this.cooperationsForm.image = null;
                } else {
                    this.cooperationsForm.id = null;
                    this.cooperationsForm.name = "";
                    this.cooperationsForm.description = "";
                    this.cooperationsForm.image = null;
                }
                this.addDialogVisible = true;
            },
            //获取合作信息
            getCooperations() {
                this.loading = true;
                request({
                    url: "/qualification/list",
                    method: "post"
                })
                .then(response => {
                    this.cooperations = response.data;
                    this.loading = false;
                })
                .catch(error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                    this.loading = false;
                });
            },

            //删除合作信息
            deleteCooperation(id) {
                request({
                    url: "/qualification/delete",
                    method: "post",
                    params: { id: id }
                })
                .then(response => {
                    this.$message({
                        message: "删除成功",
                        type: "success"
                    });
                    this.getCooperations();
                    this.addDialogVisible = false;
                    this.loading = false;
                })
                .catch(error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                    this.loading = false;
                });
            },
            //添加/编辑合作信息
            addCooperation() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.loading = true;
                        var form = new FormData();
                        form.append("title", this.cooperationsForm.name);
                        form.append("content", this.cooperationsForm.description);
                        //新增记录 并且 没有图片时
                        if (this.cooperationsForm.image == null && this.editing == false) {
                            //如果没上传文件的话
                            this.loading =false;
                            this.$message({
                                message: "尚未上传图片",
                                type: "error"
                            });
                            return;
                            //有图片时
                        } else if (this.cooperationsForm.image != null) {
                            form.append("multipartFile", this.cooperationsForm.image);
                        }
                        if (this.cooperationsForm.id != null) {
                            form.append("id", this.cooperationsForm.id);
                        }
                        request({
                            url: "/qualification/insertOrUpdate",
                            method: "post",
                            data: form
                        })
                        .then(response => {
                            this.$refs.upload.clearFiles();
                            this.getCooperations();
                            this.addDialogVisible = false;
                            this.loading = false;
                            this.$message({
                                message: "添加成功",
                                type: "success"
                            });
                        })
                        .catch(error => {
                            this.$message({
                                message: error,
                                type: "error"
                            });
                            this.loading = false;
                        });
                    }
                });
            },
            //文件上传的部分操作
            uploadDiscardFile(params) {
                this.cooperationsForm.image = params.file;
                return false;
            },
            //文件上传的移除操作
            beforeRemove(params) {
                this.cooperationsForm.image = null;
            }
        },
        mounted() {
            this.getCooperations();
        }
    };
</script>

<style scoped>
</style>