banner通用设置

src/api/tourManage.js

+import fetch from 'utils/fetch';
+
+export function page(query) {
+  return fetch({
+    url: '/api/tour/good/admin/goodList',
+    method: 'post',
+    data: query
+  });
+}
+/**
+ * 编辑、新建旅游路线
+ * @param query
+ */
+export function goodsEdit(query) {
+  return fetch({
+    url: '/api/tour/good/admin/goodEdit',
+    method: 'post',
+    data: query
+  });
+}
+
+/**
+ * 根据旅游id获取旅游详情
+ */
+export function getOneGoodsById(query) {
+  return fetch({
+    url: '/api/tour/good/admin/goodOne',
+    method: 'get',
+    params: query
+  });
+}
+
+// api/tour/admin/tourBanner
+// api/tour/admin/tourBanner/page?pageNo=0&pageSize=10
+/**
+ * 获取bannerList
+ */
+export function getBannerList(query) {
+  return fetch({
+    url: '/api/tour/admin/tourBanner/page',
+    method: 'get',
+    params: query
+  });
+}
+/**
+ * 添加banner
+ */
+export function addBanner(params) {
+  return fetch({
+    url: '/api/tour/admin/tourBanner',
+    method: 'post',
+    data: params
+  });
+}
+/**
+ * 修改banner
+ */
+export function editBanner(params) {
+  return fetch({
+    url: '/api/tour/admin/tourBanner',
+    method: 'put',
+    data: params
+  });
+}
+
+// delBanner
+/**
+ * 修改banner
+ */
+export function delBanner(id) {
+  return fetch({
+    url: '/api/tour/admin/tourBanner/' + id,
+    method: 'delete'
+  });
+}

src/router/index.js

@@ -248,6 +248,12 @@ export const asyncRouterMap = [{
     component: _import('baseInfo/generalSetting'),
     name: '通用设置',
     authority: 'generalSetting'
+  },
+  {
+    path: 'bannerSetting',
+    component: _import('baseInfo/bannerSetting'),
+    name: 'banner设置',
+    authority: 'bannerSetting'
   }
   ]
 },
@@ -329,12 +335,6 @@ export const asyncRouterMap = [{
       component: _import('tourManage/tourLabel'),
       name: '旅行标签设置',
       authority: 'tourLabel'
-    },
-    {
-      path: 'bannerSetting',
-      component: _import('tourManage/bannerSetting'),
-      name: 'banner设置',
-      authority: 'bannerSetting'
     }
   ]
 }

src/views/baseInfo/bannerSetting.vue

+<template>
+  <div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
+    <div class="filter-container" ref="filter-container">
+      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate"
+                 type="primary" icon="edit">添加
+      </el-button>
+    </div>
+    <el-table :key='tableKey' :data="list" border fit highlight-current-row
+              style="width: 1300px">
+      <el-table-column
+        type="index"
+        align="center" label="序号" width="98">
+      </el-table-column>
+      <el-table-column width="500" align="center" label="标题">
+        <template scope="scope">
+          <span>{{scope.row.title}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column width="300" align="center" label="banner图">
+        <template scope="scope">
+          <img :src="scope.row.cover" style="width:100%;max-height:100px;">
+        </template>
+      </el-table-column>
+      <el-table-column width="200" align="center" label="跳转">
+        <template scope="scope">
+          <span>{{scope.row.url}}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" width="200" label="操作">
+        <template scope="scope">
+          <el-button size="small" type="success" @click="handleUpdate(scope.row)">编辑
+          </el-button>
+          <el-popover
+            ref="popover5"
+            placement="top"
+            width="160"
+            v-model="scope.row.visible2">
+            <p>确定删除吗？</p>
+            <div style="text-align: right; margin: 0">
+              <el-button size="mini" type="text" @click="scope.row.visible2 = false">取消</el-button>
+              <el-button type="primary" size="mini" @click="deleteHandler(scope.row)">确定</el-button>
+            </div>
+          </el-popover>
+          <el-button type="danger" size="small" v-popover:popover5>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div v-show="!listLoading" class="pagination-container">
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page.sync="listQuery.pageNo" :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize"
+                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
+    </div>
+    <!-- banner modal弹窗 -->
+    <el-dialog :title="modalTitle" :visible.sync="bannerDialogVisible">
+      <el-form :model="form" :rules="rules" ref="form" label-width="90px">
+        <el-form-item label="标题" prop="title">
+          <el-input v-model="form.title" placeholder="请输入标题"></el-input>
+        </el-form-item>
+        <!--0-app首页,1-app旅游页；2-租车-->
+        <el-form-item label="类型" prop="type">
+          <el-radio class="radio" v-model="form.type" label="0">app首页</el-radio>
+          <el-radio class="radio" v-model="form.type" label="1">app旅游页</el-radio>
+          <el-radio class="radio" v-model="form.type" label="2">租车</el-radio>
+        </el-form-item>
+        <!--BASE_API + -->
+        <el-form-item label="banner图" prop="cover" :style="{display:'block'}">
+          <el-upload
+            class="avatar-uploader"
+            :action="'https://xxtest.upyuns.com/api/universal/file/admin/upload'"
+            :show-file-list="false"
+            :headers="getHeaderWithToken"
+            :on-success="handleAvatarSuccess">
+            <img v-if="$utils.isString(form.cover) && !$utils.isEmpty(form.cover)" :src="form.cover" style="width:500px;max-height:300px;">
+            <i v-else class="el-icon-plus avatar-uploader-icon" style="lineHeight:100px;width:500px;height: 100px;"></i>
+          </el-upload>
+        </el-form-item>
+        <el-form-item>
+          建议尺寸：1080*630
+        </el-form-item>
+        <el-form-item label="跳转链接">
+          <el-input v-model="form.url" placeholder="请输入跳转链接"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancelHandel">取 消</el-button>
+        <el-button v-if="modalTitle=='创建'" type="primary" @click="create('form')">确 定</el-button>
+        <el-button v-else type="primary" @click="update('form')">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import 'static/css/uploadImg.css';// 引入图片上传组件对话框
+
+  import {
+    formatDate
+  } from 'utils/dateFormattor';
+
+  import {
+    toEast8Date,
+    deepCopyDate,
+    newEast8Date,
+    convertDate2Str
+  } from 'utils/dateUtils';
+
+  import {
+    getBannerList,
+    editBanner,
+    addBanner,
+    delBanner
+  } from 'api/tourManage';
+
+  import rsCode from '../../utils/rsCode';
+
+  import {mapGetters} from 'vuex';
+  import {
+    getToken
+  } from '../../utils/auth';
+
+  import Element1 from "../admin/menu/components/element";
+  import ElRow from "element-ui/packages/row/src/row";
+  import ElCol from "element-ui/packages/col/src/col";
+
+  export default {
+    name: 'tourManage',
+    components: {
+      ElCol,
+      ElRow,
+      Element1
+    },
+    data() {
+      return {
+        tableKey:0,
+        modalTitle: "创建",
+        BASE_API: process.env.BASE_API,
+        bannerDialogVisible: false,//添加、编辑弹框
+        showLoadingBody: false,
+        form: {
+          title: "",
+          url: "",
+          cover:"",
+          type: "0"
+        },
+        listQuery: {
+          pageNo: 1,
+          pageSize: 20
+        },
+        rules: {
+          title: {
+              type: 'string',
+              required: true,
+              message: '请输入标题',
+              trigger: 'blur'
+          },
+          type:{
+            type: 'string',
+            required: true,
+            message: '请选择banner类型',
+            trigger: 'blur'
+          },
+          cover: {
+            type: 'string',
+            required: true,
+            message: '请上传图片',
+          },
+        },
+        list: null,
+        total: null,
+        listLoading: true,
+        inline: true,
+        banner_btn_edit: false,//编辑
+        banner_btn_add: false,//添加
+      }
+    },
+    created() {
+      this.getList();
+      this.banner_btn_edit = true;//this.elements['tourManage:btn_edit'];
+      this.banner_btn_add = true;//this.elements['tourManage:btn_add'];
+    },
+    computed: {
+      ...mapGetters([
+        'elements',
+        'belong2Type'
+      ]),
+      getHeaderWithToken() {
+        return {Authorization: getToken()};
+      },
+    },
+    methods: {
+      handleSizeChange(val) {
+        this.listQuery.pageSize = val;
+        this.getList();
+      },
+      handleCurrentChange(val) {
+        this.listQuery.pageNo = val;
+        this.getList();
+      },
+      /**
+       * 添加
+       * */
+      handleCreate() {
+        this.cleanForm();
+        this.modalTitle = '创建';
+        this.bannerDialogVisible = true;
+      },
+      /**
+       * 操作-删除
+       * */
+      deleteHandler(row) {
+        this.oneTourRow = row;
+        this.bannerDialogVisible = true;
+      },
+      /**
+       * 操作-编辑
+       * */
+      handleUpdate(row) {
+        this.modalTitle = '编辑';
+        this.cleanForm();
+        this.form = row;
+        this.bannerDialogVisible = true;
+      },
+      /**
+       * 弹框-取消
+       * */
+      cancelHandel(){
+        this.cleanForm();
+        this.bannerDialogVisible = false;
+      },
+     /**
+      * 清空表单
+      * */
+      cleanForm() {
+        this.form = {
+          title: "",
+          cover: "",
+          url:"",
+          type: "0"
+        }
+      },
+      showImgDialog(drivingLicensePath) {
+        this.licenceSrcUrl = this.getDrivingLicenseUrl(drivingLicensePath);
+        this.dialogForm4LicenceVisible = true;
+      },
+      /**
+       * 获取banner列表数据
+       * */
+      getList() {
+        this.listLoading = true;
+        getBannerList(this.listQuery).then(response => {
+          let totalCountRs = undefined;
+          let listRs = undefined;
+          if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
+            listRs = response.data.data;
+            response.data.data.map(function(item){
+              item.type = item.type+"";
+              item.visible2 = false;
+            });
+            totalCountRs = response.data.totalCount;
+          }
+          this.listLoading = false;
+          this.list = listRs;
+          this.total = totalCountRs;
+        });
+      },
+      /**
+       * 创建
+       * */
+      create(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            addBanner(this.form)
+              .then(response => {
+                if (response.status === 200) {
+                  this.dialogFormVisible = false;
+                  this.getList();
+                  this.$notify({
+                    title: '成功',
+                    message: '创建成功',
+                    type: 'success',
+                    duration: 2000
+                  });
+                  this.getList();
+                } else {
+                  this.$notify({
+                    title: '失败',
+                    message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
+                    type: 'error',
+                    duration: 2000
+                  });
+                }
+              });
+          } else {
+            return false;
+          }
+        });
+      },
+      /**
+       * 编辑-更新
+       * */
+      update(formName) {
+        const set = this.$refs;
+        set[formName].validate(valid => {
+          if (valid) {
+            editBanner(this.form).then(response => {
+              if (response.status === 200) {
+                this.bannerDialogVisible = false;
+                this.getList();
+                this.$notify({
+                  title: '成功',
+                  message: '编辑成功',
+                  type: 'success',
+                  duration: 2000
+                });
+                this.getList();
+              } else {
+                this.$notify({
+                  title: '失败',
+                  message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
+                  type: 'error',
+                  duration: 2000
+                });
+              }
+            });
+          } else {
+            return false;
+          }
+        });
+      },
+      /**
+       * 上传图片
+       * @param file
+       * @returns {boolean}
+       */
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg' || file.type === 'image/gif';
+        const isLt2M = file.size / 1024 / 1024 < 10;
+
+        if (!isJPG) {
+          this.$message.error('上传图片只能是 JPG/GIF 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传图片大小不能超过 10MB!');
+        }
+        this.showLoadingBody = true;
+        return isJPG && isLt2M;
+      },
+      handleAvatarSuccess(res, file) {debugger
+        this.form.cover = res.data;
+        this.showLoadingBody = false;
+      },
+    /**
+    * 操作-删除
+    * */
+    deleteHandler(row) {
+        delBanner(row.id).then(response => {
+          if (response.status === 200) {
+            this.$notify({
+              title: '成功',
+              message: '删除成功',
+              type: 'success',
+              duration: 2000
+            });
+            this.getList();
+          } else {
+            this.$notify({
+              title: '删除失败',
+              message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败！',
+              type: 'error',
+              duration: 2000
+            });
+          }
+        });
+      },
+      getUrl(drivingLicensePath) {
+        return process.env.BASE_API +
+          '/vehicle/vehicleInfo/download/drivingLicense?realFileRelPath=' + encodeURI(drivingLicensePath);
+      },
+    }
+  }
+</script>