Преглед изворни кода

云塑关于我们——后台管理修改

ZhouRuiTing пре 5 година
родитељ
комит
8c571de22b

Разлика између датотеке није приказан због своје велике величине
+ 1 - 0
official_frontend/src/icons/svg/about.svg


Разлика између датотеке није приказан због своје велике величине
+ 1 - 0
official_frontend/src/icons/svg/qualifications.svg


+ 20 - 20
official_frontend/src/router/index.js

@@ -172,27 +172,27 @@ export const constantRoutes = [
   {
     path: '/position',
     component: Layout,
+    meta: { title: '关于我们', icon: 'about' },
     children: [
-      {
-        path: '',
-        name: 'position',
-        component: () => import('@/views/about/position'),
-        meta: { title: '职位管理', icon: 'position' }
-      }
-    ]
-  },
-
-  {
-    path: '/position/:id',
-    component: Layout,
-    children: [
-      {
-        path: '',
-        name: 'positionEdit',
-        hidden: true,
-        component: () => import('@/views/about/positionEdit'),
-        meta: { title: '职位管理编辑', icon: 'position' }
-      }
+        {
+            path: '',
+            name: 'position',
+            component: () => import('@/views/about/position'),
+            meta: { title: '职位管理', icon: 'position' }
+        },
+        {
+            path: '',
+            name: 'positionEdit',
+            hidden: true,
+            component: () => import('@/views/about/positionEdit'),
+            meta: { title: '职位管理编辑', icon: 'position' }
+        },
+        {
+            path: '/qualifications',
+            name: 'qualifications',
+            component: () => import('@/views/about/qualifications'),
+            meta: { title: '荣誉资质', icon: 'qualifications' }
+        }
     ]
   },
 

+ 190 - 0
official_frontend/src/views/about/qualifications.vue

@@ -0,0 +1,190 @@
+<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>
+