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

<template>
    <div class="app-container">
        <el-form ref="form" :model="cooperationsForm" :rules="rules" label-width="100px">
            <el-form-item label="职位名称" prop="title">
                <el-input v-model="cooperationsForm.title" placeholder="请输入客户名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="职位图片" prop="image">
                <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-item label="职位信息" prop="introduction">
                <tinymce v-model="cooperationsForm.introduction" :height="300" />
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer" style="float:right;">
            <el-button @click="$router.go(-1);">取消</el-button>
            <el-button type="primary" @click="addCooperation()" :loading="loading">提交</el-button>
        </span>
    </div>
</template>

<script>
    import request from "@/utils/request";
    import Tinymce from "@/components/Tinymce";
    export default {
        name: "TinymceDemo",
        components: { Tinymce },
        data() {
            return {
                id: this.$route.params.id,

                loading: false,
                cooperations: [],
                cooperationsForm: {
                    id: null,
                    title: null,
                    introduction: null,
                    image: null,
                },
                rules: {
                    title: [{ required: true, message: "请输入职位名称", trigger: "blur" }],
                    introduction: [{ required: true, message: "请输入职位信息", trigger: "blur"}],
                },
            };
        },
        methods: {
            //打开对话框
            openDialog(isEdit, index) {
                this.editing = isEdit;
                if (this.editing) {
                    this.cooperationsForm.id = this.cooperations[index].id;
                    this.cooperationsForm.title = this.cooperations[index].companyName;
                    this.cooperationsForm.title1 = this.cooperations[index].companyName;
                    this.cooperationsForm.introduction = this.cooperations[index].description;
                    this.cooperationsForm.image = null;
                } else {
                    this.cooperationsForm.id = null;
                    this.cooperationsForm.title = "";
                    this.cooperationsForm.title1 = "";
                    this.cooperationsForm.introduction = "";
                    this.cooperationsForm.image = null;
                }
            },

            //获取合作信息
            getCooperations() {
                this.loading = true;
                request({
                    url: "/feedback/listFeedback",
                    method: "post",
                    params: {pageIndex:1,pageSize: 9999999}
                })
                .then(response => {
                    this.cooperations = response.data;
                    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.title);
                        form.append("content", this.cooperationsForm.introduction);
                        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("file", this.cooperationsForm.image);
                        }
                        if (this.cooperationsForm.id != null) {
                            form.append("id", this.cooperationsForm.id);
                        }
                        request({
                            url: "/feedback/insertOrUpdateFeedback",
                            method: "post",
                            data: form
                        })
                        .then(response => {
                            this.$refs.upload.clearFiles();
                            this.loading = false;
                            this.$message({
                                message: this.cooperationsForm.id != null?"修改成功":"添加成功",
                                type: "success"
                            });
                            this.$router.go(-1);
                        })
                        .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() {
            if(this.id != 0) {
                this.getCooperations();
            }
        }
    };
</script>

<style scoped>
</style>