From 037956b0794e6b47ef6b6daf308844522c448e96 Mon Sep 17 00:00:00 2001
From: liweilong <515897141@qq.com>
Date: 星期三, 02 十二月 2020 12:28:25 +0800
Subject: [PATCH] 添加轮播图管理
---
src/router/system_router.js | 7 +
src/pages/system/banner.vue | 345 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 352 insertions(+), 0 deletions(-)
diff --git a/src/pages/system/banner.vue b/src/pages/system/banner.vue
new file mode 100644
index 0000000..b60e9fd
--- /dev/null
+++ b/src/pages/system/banner.vue
@@ -0,0 +1,345 @@
+// 璁惧绠＄悊
+<template>
+ <div class="app-container">
+ <!-- 鎿嶄綔鍖� 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌 -->
+ <el-row :gutter="10" class="mb8">
+ <el-col :span="1.5">
+ <el-button
+ v-if="getAuthValueFN('banner_add')"
+ type="primary"
+ icon="el-icon-plus"
+ size="mini"
+ @click="showDialog('add')"
+ >鏂板</el-button>
+ </el-col>
+ </el-row>
+ <!-- 鎿嶄綔鍖� 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈 -->
+
+ <el-table :data="list">
+ <el-table-column type="index" label="搴忓彿" align="center" width="60" />
+ <el-table-column label="鍥剧墖" prop="imgUrl" align="center" min-width="120">
+ <template slot-scope="scope">
+ <el-image :src="scope.row.imgUrl" style="width:80px;height:80px" fit="contain" :preview-src-list="[scope.row.imgUrl]" />
+ </template>
+ </el-table-column>
+ <el-table-column prop="orderNum" label="鎺掑簭鍙�" align="center" min-width="120" />
+ <el-table-column prop="createTime" label="鍒涘缓鏃堕棿" align="center" />
+ <el-table-column label="鎿嶄綔" align="center" class-name="small-padding fixed-width" min-width="100">
+ <template slot-scope="scope">
+ <el-button
+ v-if="getAuthValueFN('banner_edit')"
+ size="mini"
+ type="text"
+ icon="el-icon-edit"
+ @click="handleEdit(scope.row)"
+ >缂栬緫</el-button>
+ <el-button
+ v-if="getAuthValueFN('banner_del')"
+ size="mini"
+ type="text warn"
+ icon="el-icon-delete"
+ @click="handleDelete(scope.row)"
+ >鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+
+ <pagination
+ v-show="total>0"
+ :total="total"
+ :page.sync="pageNum"
+ :limit.sync="pageSize"
+ @pagination="getList"
+ />
+
+ <!-- 鏂板&缂栬緫 -->
+ <el-dialog :title="dialogData.type=='add'?'鏂板杞挱鍥�':'缂栬緫杞挱鍥�'" width="500px" :visible.sync="isShowDialog" append-to-body :before-close="hideDialog">
+ <el-form :ref="formName" :model="dialogData" label-width="100px" :rules="rules" size="small">
+ <el-form-item label="鎺掑簭鍙�" prop="orderNum">
+ <el-input v-model="dialogData.orderNum" placeholder="璇疯緭鍏ユ帓搴忓彿" />
+ </el-form-item>
+ <el-form-item ref="uploadFormItem" label="杞挱鍥�" prop="uploadImgs">
+ <!-- 涓婁紶鍥剧墖缁勪欢(鍗曞浘) -->
+ <el-upload
+ ref="refUploadImg"
+ accept="image/jpeg,image/jpg,image/gif,image/png"
+ :auto-upload="false"
+ list-type="picture-card"
+ :class="{disabled:uploadDisabled}"
+ action="#"
+ :limit="1"
+ :file-list="dialogData.uploadImgs"
+ :on-change="addUploadImg"
+ :on-remove="delUploadImg"
+ :http-request="uploadImg"
+ :on-preview="uploadPreview"
+ :before-upload="beforeUploadImg"
+ >
+ <i class="el-icon-plus" />
+ </el-upload>
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="hideDialog">鍙栨秷</el-button>
+ <el-button type="primary" @click="handleSave(dialogData.type)">纭畾</el-button>
+ </div>
+ </el-dialog>
+
+ <!-- upload鏀惧ぇ鍥剧墖 -->
+ <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
+ <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
+ </el-dialog>
+ </div>
+</template>
+
+<script>
+
+import mixin_Upload from '@/mixins/upload.js'
+
+export default {
+ name: 'Equipment',
+ mixins: [mixin_Upload],
+ data() {
+ return {
+ list: [], // 璁惧鍒楄〃
+
+ // 鍒嗛〉 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
+ total: 0,
+ pageNum: 1,
+ pageSize: 20,
+ // 鍒嗛〉 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
+
+ // 鏄剧ず寮圭獥
+ isShowDialog: false,
+
+ // 琛ㄥ崟鏍￠獙
+ rules: {
+ orderNum: [
+ { required: true, message: '鎺掑簭鍙蜂笉鑳戒负绌�', trigger: 'change' }
+ ],
+ uploadImgs: [
+ { required: true, message: '璇烽�夋嫨杞挱鍥剧墖', trigger: 'change' }
+ ]
+ },
+
+ // 琛ㄥ崟鍚嶇О
+ formName: 'dialogForm',
+ // 寮圭獥琛ㄥ崟
+ dialogData: {
+ // 涓婁紶鍥剧墖
+ uploadImgs: []
+ }
+
+ }
+ },
+ computed: {
+ // 涓婁紶绂佺敤
+ uploadDisabled() {
+ return this.dialogData.uploadImgs.length > 0
+ }
+ },
+ mounted() {
+ this.init()
+ },
+ methods: {
+ // 鍒濆鍖�
+ init() {
+ // this.id = this.$route.query.id || ''
+ this.getList()
+ },
+
+ // 涓婁紶鍥剧墖 鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌鈫撯啌
+ // 涓婁紶鍓嶇‘璁ゆ牸寮�
+ beforeUploadImg(file) {
+ const isImg = file.type.indexOf('image/') > -1
+ if (!isImg) {
+ this.$message.error('蹇呴』鏄�夋嫨鍥剧墖鏂囦欢')
+ }
+ return isImg
+ },
+ // 澧炲姞鍥剧墖
+ addUploadImg(file, fileList) {
+ this.$refs.uploadFormItem.resetField()
+ this.dialogData.uploadImgs = fileList
+ },
+ // 鍒犻櫎鍥剧墖
+ delUploadImg(file, fileList) {
+ this.dialogData.uploadImgs = fileList
+ },
+ // 鎵ц涓婁紶鍟嗗搧鍥�
+ runUploadImg(suc_cb) {
+ if (this.checkNeedUpload(this.dialogData.uploadImgs)) {
+ this.$refs.refUploadImg.submit()
+ } else {
+ suc_cb && suc_cb()
+ }
+ },
+ // 涓婁紶鍟嗗搧鍥�
+ uploadImg(res) {
+ console.log(res)
+ const file = res.file
+ const formData = new FormData()
+ formData.append('file', file)
+ console.log(formData)
+ this.postFN({
+ url: 'admin/image/upload',
+ header: { 'Content-Type': 'multipart/form-data' },
+ params: formData,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {
+ imgUrl: 'xxxx'
+ }
+ }
+ }, (inf) => {
+ console.log('涓婁紶鍥剧墖鎴愬姛')
+
+ // 鏇挎崲鎺夋湭涓婁紶鐨勫浘鐗�
+ this.dialogData.uploadImgs[0] = { url: inf.imgUrl, status: 'success' }
+ this.dialogData.uploadImgs = JSON.parse(JSON.stringify(this.dialogData.uploadImgs))
+ this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
+
+ console.log('涓婁紶鍥剧墖缁撴潫')
+
+ // 鎻愪氦
+ this.submit(this.dialogData.type)
+ })
+ },
+ // 涓婁紶鍥剧墖 鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈鈫戔啈
+
+ // 鑾峰彇鍒楄〃
+ getList() {
+ var { pageNum, pageSize } = this
+ const params = {
+ pageNum: pageNum,
+ pageSize: pageSize
+ }
+
+ this.postFN({
+ url: 'admin/banner/list',
+ params: params,
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {
+ list: [{
+ 'imgUrl': 'https://profile.csdnimg.cn/0/1/7/3_weixin_38373875',
+ 'jumpUrl': '123',
+ 'jumpType': 0,
+ 'orderNum': 1,
+ 'createTime': '2020-02-02 02:00:00'
+ }],
+ total: 100
+ }
+ }
+ }, (inf) => {
+ this.list = inf.list || []
+ this.total = inf.total
+ })
+ },
+ // 閲嶆柊鑾峰彇鍒楄〃
+ reGetList() {
+ this.pageNum = 1
+ this.getList()
+ },
+ // 鍒犻櫎
+ handleDelete(item) {
+ // 鎵撳紑浜屾纭寮圭獥
+ this.$confirm('鏄惁纭鍒犻櫎璇ヨ疆鎾浘?', '鎻愮ず', {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ }).then(() => {
+ // 纭畾鍥炶皟
+ this.postFN({
+ url: 'admin/banner/del',
+ params: {
+ id: item.id
+ },
+ mockData: {
+ code: 100,
+ msg: '',
+ data: {}
+ }
+ }, () => {
+ this.getList()
+ this.$messageSuc('鍒犻櫎鎴愬姛')
+ })
+ }).catch(() => {})
+ },
+ // 缂栬緫
+ handleEdit(item) {
+ this.showDialog('edit', item)
+ },
+ // 鏄剧ず寮规
+ showDialog(type, item) {
+ let dialogData = {}
+
+ this.isShowDialog = true
+ this.$nextTick(() => {
+ if (type === 'add') {
+ dialogData = {
+ type: 'add',
+ orderNum: 1,
+ uploadImgs: []
+ }
+ } else {
+ dialogData = {
+ type: 'edit',
+ ...item
+ }
+ dialogData.uploadImgs = [{ url: item.imgUrl, status: 'success' }]
+ }
+ this.dialogData = dialogData
+ this.$refs[this.formName].resetFields()
+ })
+ },
+ // 闅愯棌寮规
+ hideDialog() {
+ this.$refs[this.formName].resetFields()
+ this.isShowDialog = false
+ },
+ // 鎻愪氦
+ handleSave(type) {
+ // 楠岃瘉
+ this.$refs[this.formName].validate((valid) => {
+ if (valid) {
+ // 涓婁紶鍥剧墖
+ this.runUploadImg(() => {
+ this.submit(type)
+ })
+ }
+ })
+ },
+ submit(type) {
+ const url = type === 'add' ? 'admin/banner/add' : 'admin/banner/edit'
+ const dialogData = this.dialogData
+ const params = {
+ orderNum: dialogData.orderNum,
+ imgUrl: dialogData.imgUrl
+ }
+ if (dialogData.type === 'edit') {
+ params.id = dialogData.id
+ }
+ this.postFN({
+ url,
+ params,
+ mockData: {
+ code: 100, data: {
+
+ }
+ }
+ }, inf => {
+ this.$messageSuc('淇濆瓨鎴愬姛')
+ this.hideDialog()
+ this.getList()
+ })
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/src/router/system_router.js b/src/router/system_router.js
index 8b8affb..66fcab1 100644
--- a/src/router/system_router.js
+++ b/src/router/system_router.js
@@ -26,6 +26,13 @@
auth: 'sys_admin_role_see'
},
{
+ path: 'banner',
+ component: () => import('@/pages/system/banner'),
+ name: 'systemBanner',
+ meta: { title: '杞挱鍥剧鐞�', keepAlive: true },
+ auth: 'banner_see'
+ },
+ {
path: 'basic',
component: () => import('@/pages/system/basic'),
name: 'systemBasic',
--
Gitblit v1.8.0