Banner管理更新

.env.production

@@ -2,5 +2,5 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = '/prod-api'
+VUE_APP_BASE_API = 'https://dongfengqichen.jiyou-tech.com/admin'
 

package.json

@@ -21,6 +21,7 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "qs": "^6.9.1",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
     "vuex": "3.1.0"

src/api/banner.js

@@ -6,4 +6,13 @@ export function getHomeBanner(params) {
         method: 'get',
         params
     })
-}
+}
+export function updateHomeBanner(data) {
+    return request({
+        url: '/home/updateHomeBanner',
+        method: 'post',
+        data:{
+          bannerData:data
+        }
+    })
+}

src/views/banner/index.vue

@@ -1,66 +1,209 @@
-<template>
-  <div class="app-container">
-    <el-button icon="el-icon-edit" style="margin-bottom:15px;">新增</el-button>
-    <el-table
-      v-loading="listLoading"
-      :data="list"
-      element-loading-text="Loading"
-      border
-      fit
-      highlight-current-row
-    >
-      <el-table-column align="center" label="ID" width="95">
-        <template slot-scope="scope">{{ scope.$index+1 }}</template>
-      </el-table-column>
-      <el-table-column label="名称" align="center">
-        <template slot-scope="scope">{{ scope.row.bannerName }}</template>
-      </el-table-column>
-      <el-table-column label="轮播图" width="400" align="center">
+<template>
+  <div id="banner" class="app-container">
+    <el-button icon="el-icon-edit" style="margin-bottom:15px;" @click="addBanner">新增</el-button>
+    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
+      <el-table-column align="center" label="ID" width="95">
+        <template slot-scope="scope">{{ scope.$index+1 }}</template>
+      </el-table-column>
+      <el-table-column label="名称" align="center">
+        <template slot-scope="scope">{{ scope.row.bannerName }}</template>
+      </el-table-column>
+      <el-table-column label="轮播图" width="600" align="center">
         <template slot-scope="scope">
-          <el-image fit="cover" :src="scope.row.bannerUrl"></el-image>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" prop="created_at" label="操作" width="200">
-        <template slot-scope="scope">
-          <el-button>编辑</el-button>
-          <el-button type="danger">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-import { getHomeBanner } from "@/api/banner";
-
-export default {
-  filters: {
-    statusFilter(status) {
-      const statusMap = {
-        published: "success",
-        draft: "gray",
-        deleted: "danger"
-      };
-      return statusMap[status];
-    }
-  },
-  data() {
-    return {
-      list: null,
-      listLoading: true
-    };
-  },
-  created() {
-    this.getBannerList();
-  },
+          <el-image fit="cover" style="width: 400px;height: 150px;cursor: pointer;" :src="scope.row.bannerUrl" :preview-src-list="[scope.row.bannerUrl]" @click="showBanner(scope.$index)" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="created_at" label="操作" width="250">
+        <template slot-scope="scope">
+          <el-button @click="changeBanner(scope.$index)">编辑</el-button>
+          <el-button type="danger" @click="delBanner(scope.$index)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-dialog :title="titleName" :visible.sync="showDialog" width="50%" :show-close="false" center>
+      <el-form ref="editFrom" :model="editFrom" label-width="100px" :rules="rules">
+        <el-form-item label="名称" prop="bannerName">
+          <el-input
+            ref="bannerName"
+            v-model="editFrom.bannerName"
+            placeholder="请输入轮播图名称"
+            tabindex="1"
+            name="bannerName"
+            type="text"
+          />
+        </el-form-item>
+        <el-form-item label="轮播图" prop="bannerUrl">
+          <el-upload
+            class="avatar-uploader"
+            action="https://dongfengqichen.jiyou-tech.com/admin/upload/uploadByFilePath"
+            :show-file-list="false"
+            name="fileName"
+            :data="fileUpData"
+            :on-success="upBannerSuccess"
+          >
+            <img v-if="editFrom.bannerUrl" :src="editFrom.bannerUrl" class="avatar">
+            <i v-else class="el-icon-plus avatar-uploader-icon" />
+          </el-upload>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="showDialog = false">取 消</el-button>
+        <el-button v-if="isEdit" type="primary" @click="checkBannerInfo">更 新</el-button>
+        <el-button v-else type="primary" @click="checkBannerInfo">新 增</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  getHomeBanner,
+  updateHomeBanner
+} from '@/api/banner'
+const editFrom = {
+  bannerUrl: '',
+  bannerName: ''
+}
+
+export default {
+  name: 'Banner',
+  data() {
+    return {
+      list: null,
+      listLoading: true,
+      showDialog: false,
+      isEdit: false,
+      editIndex: 0, // 编辑下标
+      editFrom: JSON.parse(JSON.stringify(editFrom)),
+      rules: {
+        bannerName: [{
+          required: true,
+          message: '请输入轮播图名称',
+          trigger: 'blur'
+        }],
+        bannerUrl: [{
+          required: true,
+          message: '请先上传轮播图',
+          trigger: 'blur'
+        }]
+      },
+      fileUpData: {
+        filePath: 'homeBanner'
+      }
+    }
+  },
+  computed: {
+    titleName() {
+      if (this.isEdit) {
+        return '编辑Banner'
+      } else {
+        return '新增Banner'
+      }
+    }
+  },
+  created() {
+    this.getBannerList()
+  },
   methods: {
-    getBannerList() {
-      getHomeBanner().then(res => {
-        this.list = res.data;
-        this.listLoading = false;
-        console.log(res);
-      });
-    }
-  }
-};
-</script>
+    showBanner(index) {
+
+    },
+    getBannerList() {
+      getHomeBanner().then(res => {
+        this.list = res.data
+        this.listLoading = false
+      })
+    },
+    addBanner() {
+      this.isEdit = false
+      this.editFrom = JSON.parse(JSON.stringify(editFrom))
+      this.showDialog = true
+    },
+    changeBanner(index) {
+      this.isEdit = true
+      this.editIndex = index
+      this.editFrom = JSON.parse(JSON.stringify(this.list[index]))
+      this.showDialog = true
+    },
+    checkBannerInfo() {
+      this.$refs.editFrom.validate((valid) => {
+        if (valid) {
+          var data = JSON.parse(JSON.stringify(this.editFrom))
+          if (this.isEdit) { // 编辑
+            this.$set(this.list, this.editIndex, data)
+          } else { // 新增
+            this.list.push(data)
+          }
+          this.showDialog = false
+          this.updateBanner()
+        } else {
+          return false
+        }
+      })
+    },
+    delBanner(index) {
+      this.$confirm('确定删除？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          this.list.splice(index, 1)
+          this.updateBanner()
+        })
+        .catch(() => {
+          this.$message({
+            type: 'info',
+            message: '已取消删除操作'
+          })
+        })
+    },
+    updateBanner() {
+      updateHomeBanner(JSON.stringify(this.list)).then(res => {
+        if (res.code === 200) {
+          this.$message.success('Banner更新成功')
+        } else {
+          this.getBannerList()
+        }
+      })
+    },
+    upBannerSuccess(res, file) {
+      if (res.code === 200) {
+        this.editFrom.bannerUrl = res.data[0].url
+      } else {
+        this.$message.error('图片上传失败')
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+  #banner {
+    .avatar-uploader .el-upload {
+      border: 1px dashed #d9d9d9;
+      border-radius: 6px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .avatar-uploader .el-upload:hover {
+      border-color: #409EFF;
+    }
+
+    .avatar-uploader-icon {
+      font-size: 28px;
+      color: #8c939d;
+      width: 178px;
+      height: 178px;
+      line-height: 178px;
+      text-align: center;
+    }
+
+    .avatar {
+      width: 178px;
+      height: 178px;
+      display: block;
+    }
+  }
+</style>

vue.config.js

@@ -24,7 +24,7 @@ module.exports = {
    * In most cases please use '/' !!!
    * Detail: https://cli.vuejs.org/config/#publicpath
    */
-  publicPath: '/',
+  publicPath: process.env.NODE_ENV === 'production' ? '/2020/496_qichen/admin/' : '/',
   outputDir: 'dist',
   assetsDir: 'static',
   lintOnSave: process.env.NODE_ENV === 'development',