新增logo设置

src/pages/system/list/logo.vue

@@ -0,0 +1,202 @@
+<template>
+    <div class="page">
+        <h6 class="p-title">系统logo设置</h6>
+        <el-form ref="form" label-width="100px">
+            <el-form-item label="标题">
+                <el-input v-model="form.title " ref="account" placeholder="请输入标题" style="width: 400px"></el-input>
+            </el-form-item>
+            <el-form-item label="图标">
+                <el-upload
+                    class="avatar-uploader"
+                    accept=".jpg,.png,.jpeg"
+                    :on-remove="handleRemove"
+                    :on-error="uploadError"
+                    :on-success="uploadSuccess"
+                    :before-remove="beforeRemove"
+                    :limit="1"
+                    :on-exceed="handleExceed"
+                    :action="this.api.fileupload"
+                    :headers="headers"
+                    name="file"
+                >
+                    <img v-if="coverUrl" :src="coverUrl" class="avatar">
+                    <div class="uploader-default" v-else>
+                        <i class="el-icon-plus"></i>
+                        <p>上传图标</p>
+                    </div>
+
+                    <div slot="tip" class="el-upload__tip">
+                        <p>只能上传jpg/png文件</p>
+                        <p>图标将按1:1显示，最佳分辨率100*100</p>
+                    </div>
+                </el-upload>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="save">{{ form.id ? "更新" : "创建" }}</el-button>
+            </el-form-item>
+        </el-form>
+    </div>
+</template>
+
+<script>
+import util from "@/libs/util";
+import Setting from "@/setting";
+import { mapActions, mapState } from "vuex";
+export default {
+    name: "logo",
+    data() {
+        return {
+            headers: {
+                token: util.local.get(Setting.tokenKey)
+            },
+            coverUrl: "",
+            uploadList: [],
+            form: {
+                id: "",
+                title: "",
+                logoUrl: ""
+            }
+        }
+    },
+    mounted() {
+        this.getSystemDetail();
+    },
+    methods: {
+        ...mapActions("user", [
+            "setTitle", "setLogoUrl"
+        ]),
+        getSystemDetail () {
+            this.$get(this.api.logoDetail).then(res => {
+                if (res.status === 200) {
+                    if (res.data) {
+                        this.form = res.data;
+                        this.coverUrl = res.data.logoUrl;
+                        this.uploadList.push({
+                            name: "logo.jpg",
+                            url: this.coverUrl
+                        });
+                        this.setTitle(res.data.title);
+                        this.setLogoUrl(res.data.logoUrl);
+                    }
+                } else {
+                    util.errorMsg(res.message);
+                }
+            }).catch(res => {});
+        },
+        handleExceed(files, fileList) { // 上传文件
+            util.warningMsg("当前限制选择 1 个文件，如需更换，请删除上一个文件再重新选择！");
+        },
+        uploadSuccess(res, file, fileList) {
+            this.coverUrl = res.data.filesResult.fileUrl;
+        },
+        uploadError(err, file, fileList) {
+            this.$message({
+                message: "上传出错，请重试！",
+                type: "error",
+                center: true
+            });
+        },
+        beforeRemove(file, fileList) {
+            return this.$confirm(`确定移除 ${file.name}？`);
+        },
+        handleRemove(file, fileList) {
+            let fileName = this.coverUrl.replace("https://liuwanr.oss-cn-shenzhen.aliyuncs.com/", "");
+            this.$del(`${this.api.fileDeletion}?keys=${fileName}`).then(res => {
+                this.coverUrl = "";
+            }).catch(res => {
+            });
+        },
+        save() {
+            this.form.logoUrl = this.coverUrl;
+            if (this.form.id) {
+                this.$post(this.api.logoUpdate, this.form).then(res => {
+                    if (res.status === 200) {
+                        util.successMsg("更新成功");
+                        this.getSystemDetail();
+                    } else {
+                        util.errorMsg(res.message);
+                    }
+                }).catch(res => {});
+            } else {
+                this.$post(this.api.logoSave, this.form).then(res => {
+                    if (res.status === 200) {
+                        util.successMsg("新增成功");
+                        this.getSystemDetail();
+                    } else {
+                        util.errorMsg(res.message);
+                    }
+                }).catch(res => {});
+            }
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+$avatar-width: 104px;
+/deep/ .avatar-uploader {
+.el-upload {
+    position: relative;
+    width: $avatar-width;
+    border: 1px dashed #d9d9d9;
+    border-radius: 2px;
+    cursor: pointer;
+    overflow: hidden;
+
+&:hover {
+     border-color: #409EFF;
+ }
+
+.uploader-default {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: $avatar-width !important;
+    height: $avatar-width;
+    text-align: center;
+    background: rgba(0, 0, 0, 0.04);
+
+i {
+    font-size: 20px;
+    font-weight: bold;
+    color: #8c939d;
+}
+
+p {
+    margin-top: 10px;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.65);
+    line-height: 1;
+}
+}
+
+.avatar {
+    width: $avatar-width;
+    height: $avatar-width;
+    display: block;
+}
+}
+
+.el-upload__tip {
+    margin-top: 0;
+
+p {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 1;
+
+&:first-child {
+     margin-bottom: 5px;
+ }
+}
+}
+}
+
+/deep/ .d-inline-block {
+    width: 216px;
+
+.el-select, .el-input {
+    width: 100%;
+}
+}
+</style>