轮播图

foyo-service/src/main/java/com/huiju/foyo/controller/TaCarouselPictureController.java

@@ -4,6 +4,7 @@ import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.metadata.IPage;
 import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
 import com.huiju.foyo.common.BaseController;
+import com.huiju.foyo.common.ConstantFoyo;
 import com.huiju.foyo.common.ResponseBean;
 import com.huiju.foyo.model.TaCarouselPicture;
 import com.huiju.foyo.service.ITaCarouselPictureService;
@@ -18,6 +19,11 @@ import org.springframework.web.bind.annotation.RequestParam;
 import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.bind.annotation.RestController;
 
+import java.time.LocalDateTime;
+import java.util.Arrays;
+import java.util.Date;
+import java.util.List;
+
 /**
  * <p>
     * 轮播图  前端控制器
@@ -42,7 +48,7 @@ public class TaCarouselPictureController extends BaseController {
      * @param pageSize
      * @return
      */
-    @RequestMapping(value="/taCarouselPicture",method= RequestMethod.GET)
+    @RequestMapping(value="/admin/carousel/list",method= RequestMethod.GET)
     public ResponseBean taCarouselPictureList(@RequestParam(value ="pageNum",defaultValue = "1") Integer pageNum,
                                               @RequestParam(value ="pageSize",defaultValue = "10") Integer pageSize){
         ResponseBean responseBean = new ResponseBean();
@@ -67,10 +73,13 @@ public class TaCarouselPictureController extends BaseController {
      * @param taCarouselPicture 实体对象
      * @return
      */
-    @RequestMapping(value="/taCarouselPicture",method= RequestMethod.POST)
+    @RequestMapping(value="/admin/carousel/add",method= RequestMethod.POST)
     public ResponseBean taCarouselPictureAdd(@RequestBody TaCarouselPicture taCarouselPicture){
         ResponseBean responseBean = new ResponseBean();
         try {
+            taCarouselPicture.setCreateBy(ConstantFoyo.USER_ADMIN);
+            taCarouselPicture.setCreateTime(LocalDateTime.now());
+            taCarouselPicture.setStatus(ConstantFoyo.STATUS_EFFECTIVE);
             if (iTaCarouselPictureService.save(taCarouselPicture)){
                 responseBean.addSuccess(taCarouselPicture);
             }else {
@@ -86,14 +95,14 @@ public class TaCarouselPictureController extends BaseController {
 
     /**
      * 根据id删除对象
-     * @param id  实体ID
      */
     @ResponseBody
-    @RequestMapping(value="/taCarouselPicture/{id}", method= RequestMethod.DELETE)
-    public ResponseBean taCarouselPictureDelete(@PathVariable Integer id){
+    @RequestMapping(value="/admin/carousel/delete", method= RequestMethod.DELETE)
+    public ResponseBean taCarouselPictureDelete(@RequestBody String[] ids){
         ResponseBean responseBean = new ResponseBean();
         try {
-            if(iTaCarouselPictureService.removeById(id)){
+            List<String> idList = Arrays.asList(ids);
+            if(iTaCarouselPictureService.removeByIds(idList)){
                 responseBean.addSuccess("success");
             }else {
                 responseBean.addError("fail");

foyo-service/src/main/resources/application.yml

@@ -10,5 +10,5 @@ mybatis-plus:
     db-config:
       id-type: auto
   configuration:
-    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl #´òÓ¡sqlÓï¾ä,µ÷ÊÔÓÃ
+    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
   mapper-locations: classpath:mapper/*.xml

vue-element-admin/src/api/carousel.js

@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function carouselList(query) {
+  return request({
+    url: '/carousel/list',
+    method: 'get',
+    params: query
+  })
+}
+
+export function addCarousel(data) {
+  return request({
+    url: '/carousel/add',
+    method: 'post',
+    data
+  })
+}
+
+export function deleteCarouselBatch(data) {
+  return request({
+    url: '/carousel/delete',
+    method: 'delete',
+    data
+  })
+}

vue-element-admin/src/router/index.js

@@ -91,6 +91,29 @@ export const constantRouterMap = [
         meta: { title: '添加业务信息', icon: 'table' }
       }
     ]
+  },
+  {
+    path: '/carousel',
+    component: Layout,
+    redirect: '/conmmunity/download',
+    name: 'carousel',
+    alwaysShow: true,
+    meta: { title: '轮播图管理', icon: 'zip' },
+    children: [
+      {
+        path: 'carousel',
+        component: () => import('@/views/carousel/index'),
+        name: 'carousel-index',
+        meta: { title: '轮播图列表', icon: 'carousel' }
+      },
+      {
+        path: '/carousel/edit',
+        component: () => import('@/views/carousel/edit'),
+        name: 'carousel-edit',
+        hidden: true,
+        meta: { title: '新增轮播图', icon: 'table' }
+      }
+    ]
   }
 ]
 

vue-element-admin/src/store/index.js

@@ -7,6 +7,7 @@ import tagsView from './modules/tagsView'
 import user from './modules/user'
 import getters from './getters'
 import service from './modules/service'
+import carousel from './modules/carousel'
 
 Vue.use(Vuex)
 
@@ -17,7 +18,8 @@ const store = new Vuex.Store({
     permission,
     tagsView,
     user,
-    service
+    service,
+    carousel
   },
   getters
 })

vue-element-admin/src/store/modules/carousel.js

@@ -0,0 +1,37 @@
+import { carouselList, addCarousel, deleteCarouselBatch } from '@/api/carousel'
+
+const carousel = {
+  namespaced: true,
+
+  actions: {
+    getCarouselList({ commit, state }, data) {
+      return new Promise((resolve, reject) => {
+        carouselList(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    createCarlosel({ commit, state }, data) {
+      return new Promise((resolve, reject) => {
+        addCarousel(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    },
+    deleteCarousel({ commit, state }, data) { // 删除轮播图
+      return new Promise((resolve, reject) => {
+        deleteCarouselBatch(data).then(response => {
+          resolve(response)
+        }).catch(error => {
+          reject(error)
+        })
+      })
+    }
+  }
+}
+
+export default carousel

vue-element-admin/src/views/carousel/edit.vue

@@ -0,0 +1,190 @@
+<template>
+  <div id="app" class="app-container">
+    <el-form ref="form" :model="form">
+      <!-- <el-form-item :label-width="formLabelWidth" label="业务名称">
+        <el-input v-model="form.serviceName"/>
+      </el-form-item> -->
+      <el-form-item :label-width="formLabelWidth" label="权重">
+        <el-input v-model="form.sort"/>
+      </el-form-item>
+      <el-form-item :label-width="formLabelWidth" label="banner图">
+        <el-upload
+          :action= "uploadImgUrl"
+          :show-file-list="false"
+          :on-success="handleAvatarSuccess"
+          class="avatar-uploader"
+          name="uploadFiles">
+          <img v-if="imageUrl" :src="imageUrl" class="avatar">
+          <i v-else class="el-icon-plus avatar-uploader-icon"/>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogForm('0')">取 消</el-button>
+      <el-button type="primary" @click="dialogForm('1')">确 定</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { updateArticle, createBanner } from '@/api/banner' // getBanner
+import waves from '@/directive/waves' // Waves directive
+import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+const calendarTypeOptions = [
+  { key: 'CN', display_name: 'China' },
+  { key: 'US', display_name: 'USA' },
+  { key: 'JP', display_name: 'Japan' },
+  { key: 'EU', display_name: 'Eurozone' }
+]
+// arr to obj ,such as { CN : "China", US : "USA" }
+const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
+  acc[cur.key] = cur.display_name
+  return acc
+}, {})
+export default {
+  name: 'UpdateBanner',
+  components: { Pagination },
+  directives: { waves },
+  filters: {
+    statusFilter(status) {
+      const statusMap = {
+        published: 'success',
+        draft: 'info',
+        deleted: 'danger'
+      }
+      return statusMap[status]
+    },
+    typeFilter(type) {
+      return calendarTypeKeyValue[type]
+    }
+  },
+  data() {
+    return {
+      tableKey: 0,
+      list: null,
+      total: 0,
+      listLoading: true,
+      imageUrl: '', // 图片预览
+      importanceOptions: [1, 2, 3],
+      calendarTypeOptions,
+      communityQuery: {
+        pageNum: 1,
+        pageSize: 300,
+        communityId: undefined,
+        communityName: undefined,
+        provinceId: undefined,
+        cityId: undefined,
+        districtId: undefined
+      },
+      listQuery: [],
+      form: {
+        id: '',
+        serviceName: '',
+        sort: '',
+        imageUrl: ''
+      },
+      uploadImgUrl: process.env.BASE_API + '/uploadimage',
+      dialogStatus: '',
+      downloadLoading: false,
+      formLabelWidth: '120px',
+      showContentVisible: false,
+      showURLVisible: true,
+      bannerPositionArr: [
+        { id: 1, value: '首页banner' },
+        { id: 2, value: '服务banner' }
+      ]
+    }
+  },
+  computed: {
+  },
+  created() {
+    this.listQuery = this.$route.params.listQuery
+  },
+  updated() {
+  },
+  methods: {
+    handleAvatarSuccess(res, file) { // 上传成功回调
+      this.imageUrl = URL.createObjectURL(file.raw)
+      this.form.imageUrl = res.data[0]
+    },
+    dialogAddForm() {
+      this.dialogFormVisible = true
+      this.form.serviceName = ''
+      this.form.sort = ''
+      this.form.imageUrl = ''
+    },
+    dialogForm(isVaule) {
+      if (isVaule === '0') {
+        this.$router.push({ name: 'carousel-index' })
+      } else {
+        this.createData()
+      }
+    },
+    showContent() {
+      if (this.form.bannerType === '1') {
+        this.showContentVisible = false
+        this.showURLVisible = true
+      } else {
+        this.showContentVisible = true
+        this.showURLVisible = false
+      }
+    },
+    createData() {
+      this.$refs['form'].validate((valid) => {
+        if (valid) {
+          this.$store.dispatch('carousel/createCarlosel', this.form).then((res) => {
+            if (res.data.code === '0') {
+              this.$message({
+                message: res.data.message,
+                type: 'success'
+              })
+              this.$router.push({ name: 'carousel-index' })
+            } else {
+              this.$message({
+                message: res.data.message,
+                type: 'warning'
+              })
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-container {
+  width: 50%;
+  margin: auto;
+}
+.dialog-footer {
+  text-align: center;
+}
+</style>
+<style>
+.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-element-admin/src/views/carousel/index.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="root">
+    <el-form :inline="true" :model="listQuery" class="form-listQuery">
+      <!-- <el-form-item label="业务名称">
+        <el-input v-model="listQuery.serviceName" placeholder="业务名称" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="info" @click="clearListQuery">清空</el-button>
+        <el-button type="primary" @click="handleFilter">查询</el-button>
+      </el-form-item> -->
+    </el-form>
+    <div class="operation">
+      <div>
+        <el-button type="primary" @click="addCarousel">新增轮播图</el-button>
+        <el-button type="danger" @click="deleteCarousel">删除</el-button>
+      </div>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      ref="multipleTable"
+      :data="carouselList"
+      border
+      tooltip-effect="dark"
+      style="width: 100%; margin-top: 20px;"
+      @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center"/>
+      <!-- <el-table-column label="业务名称" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.serviceName }}</span>
+        </template>
+      </el-table-column> -->
+      <el-table-column label="业务图片" align="center">
+        <template slot-scope="scope">
+          <img v-if="scope.row.imageUrl !== ''" :src="scope.row.imageUrl" width="50" height="50">
+        </template>
+      </el-table-column>
+      <el-table-column label="排序" align="center">
+        <template slot-scope="scope">
+          <span>{{ scope.row.sort }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建时间" align="center">
+        <template slot-scope="scope">
+          <span>{{ formatDate(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="block">
+      <el-pagination
+        :current-page.sync="listQuery.pageNum"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size.sync="listQuery.pageSize"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import waves from '@/directive/waves' // Waves directive
+import { parseTime } from '@/utils'
+
+export default {
+  directives: { waves },
+  data() {
+    var _self = this
+    return {
+      events: {
+        click: (e) => {
+          // _self.postData.Coordinate = e.lnglat.lat + ',' + e.lnglat.lng
+          _self.detail.longitude = e.lnglat.lng
+          _self.detail.latitude = e.lnglat.lat
+        }
+      },
+      markers: [],
+      searchOption: {
+        city: '南京',
+        citylimit: false
+      },
+      carouselList: [],
+      total: 0,
+      listLoading: true,
+      listQuery: {
+        pageNum: 1,
+        pageSize: 20
+      },
+      ids: [], // id集合
+      tableKey: 0,
+      downloadLoading: false
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    setCurrent(item) {
+      this.setDetail({ ...item })
+    },
+    getList() {
+      this.listLoading = true
+      this.$store.dispatch('carousel/getCarouselList', this.listQuery).then((res) => {
+        console.log(res)
+        this.carouselList = res.data.data.records
+        this.total = res.data.data.total
+        this.listLoading = false
+      }).catch(() => {
+        this.loading = false
+        console.log('get list error')
+      })
+    },
+    clearListQuery() {
+      this.listQuery.pageNum = 1
+      this.listQuery.pageSize = 20
+      this.listQuery.billId = undefined
+      this.listQuery.billName = undefined
+      this.listQuery.billExplain = undefined
+      this.getList()
+    },
+    getInfo(billId, billStatus) {
+      if (billStatus === '2') {
+        this.$router.push({ name: 'bill-edi', query: { id: billId }})
+      } else {
+        this.$router.push({ name: 'bill-info', query: { id: billId }})
+      }
+    },
+    addCarousel() {
+      this.$router.push({ name: 'carousel-edit' })
+    },
+    handleFilter() {
+      this.listQuery.pageNum = 1
+      this.getList()
+    },
+    handleModifyStatus(row, status) {
+      this.$message({
+        message: '操作成功',
+        type: 'success'
+      })
+      row.status = status
+    },
+    sortChange(data) {
+      const { prop, order } = data
+      if (prop === 'id') {
+        this.sortByID(order)
+      }
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.listQuery.pageSize = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.listQuery.pageNum = val
+      this.getList()
+    },
+    sortByID(order) {
+      if (order === 'ascending') {
+        this.listQuery.sort = '+id'
+      } else {
+        this.listQuery.sort = '-id'
+      }
+      this.handleFilter()
+    },
+    handleUpdate(row) {
+      this.setCurrent(row)
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+      this.getEditCityList()
+      this.getEditDistrictList()
+    },
+    handleLook(id) {
+      this.$router.push({ name: 'transaction-info', params: { id: id }})
+    },
+    handleCreate() {
+      this.resetDetail()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    handleDelete(row) {
+      this.$notify({
+        title: '成功',
+        message: '删除成功',
+        type: 'success',
+        duration: 2000
+      })
+      const index = this.list.indexOf(row)
+      this.list.splice(index, 1)
+    },
+    handleDownload() {
+      this.downloadLoading = true
+      import('@/vendor/Export2Excel').then(excel => {
+        const tHeader = ['timestamp', 'title', 'type', 'importance', 'status']
+        const filterVal = ['timestamp', 'title', 'type', 'importance', 'status']
+        const data = this.formatJson(filterVal, this.list)
+        excel.export_json_to_excel({
+          header: tHeader,
+          data,
+          filename: 'table-list'
+        })
+        this.downloadLoading = false
+      })
+    },
+    padDate(value) {
+      value = value < 10 ? '0' + value : value
+      return value
+    },
+    formatDate(val) {
+      if (val === null) {
+        return ''
+      }
+      var value = new Date(val)
+      var year = value.getFullYear()
+      var month = this.padDate(value.getMonth() + 1)
+      var day = this.padDate(value.getDate())
+      var hour = this.padDate(value.getHours())
+      var minutes = this.padDate(value.getMinutes())
+      var seconds = this.padDate(value.getSeconds())
+      return year + '-' + month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds
+    },
+    formatJson(filterVal, jsonData) {
+      return jsonData.map(v => filterVal.map(j => {
+        if (j === 'timestamp') {
+          return parseTime(v[j])
+        } else {
+          return v[j]
+        }
+      }))
+    },
+    deleteCarousel() { // 删除
+      if (this.ids.length <= 0) {
+        this.$message.error('请至少选择一项')
+        return
+      }
+      this.$store.dispatch('carousel/deleteCarousel', this.ids).then(res => {
+        const resCode = res.data.code
+        if (resCode === '0') {
+          this.$message.success('删除成功')
+          this.getList()
+          return
+        }
+        this.$message.error(res.data.message)
+      }).catch(() => {
+        console.log('DeleteBillBeach error')
+      })
+    },
+    handleSelectionChange(val) { // 选择
+      console.log(val)
+      this.ids = []
+
+      val.map((item, index) => {
+        console.log(item, index)
+        this.ids.push(item.id)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.root{
+  display: flex;
+  flex-flow: column;
+}
+.form-listQuery{
+  margin-top: 20px;
+  margin-left: 30px;
+}
+.operation{
+  display: flex;
+  justify-content: space-between;
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.block{
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+}
+</style>