banner

web-ui/src/views/module/banner/index.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="订单编号" prop="orderNo">
+        <el-input
+          v-model="queryParams.orderNo"
+          placeholder="请输入订单编号"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="卡密" prop="cardKey">
+        <el-input
+          v-model="queryParams.cardKey"
+          placeholder="请输入卡密"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+    <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+            <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            @click="addOrUpdateHandle()"
+            >新增</el-button>
+        </el-col>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+    <el-table v-loading="loading" :data="bannerList" stripe>
+      <el-table-column prop="name" header-align="center" align="center" label="名称"></el-table-column>
+      <el-table-column prop="image" header-align="center" align="center" label="图片">
+          <template slot-scope="scope">
+              <img :src="scope.row.image" style="width:100px;height:auto" />
+          </template>
+      </el-table-column>
+      <el-table-column prop="skipType" header-align="center" align="center" label="跳转方式">
+        <template slot-scope="scope">
+          <span v-text="getType(scope.row.skipType)"></span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="url" header-align="center" align="center" label="跳转链接"></el-table-column>
+      <el-table-column  header-align="center" align="center" label="位置">
+        <template slot-scope="scope">
+            <span v-text="getPosition(scope.row.position)"></span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" header-align="center" align="center" label="状态">
+        <template slot-scope="scope">
+          <el-switch
+            @change="updateStatus(scope.row.id, scope.row.status)"
+            :active-value="1"
+            :inactive-value="0"
+            v-model="scope.row.status"
+            active-color="#13ce66"
+            inactive-color="#ff4949"
+          ></el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" header-align="center" align="center" label="排序值"></el-table-column>
+      <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">编辑</el-button>
+          <el-button type="text" size="small" @click="deleteHandle(scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+        <el-form-item label="名称" prop="name">
+            <el-input v-model="form.name" placeholder maxlength="25"></el-input>
+        </el-form-item>
+        <el-form-item label="图片" prop="image">
+            <el-upload class="upload-demo" v-model="form.image" ref="image"
+                        :action="caerAction"
+                        :before-upload="caerBeforeUpload" 
+                        list-type="picture"
+                        :limit="1"
+                        :on-success="handleSuccess"
+                        :headers="headers" 
+                        :on-remove="handleRemove" 
+                        drag >
+            <i class="el-icon-upload">
+                <div class="el-upload__text">将文件拖到此处， 或<em>点击上传</em></div>
+            </i>
+            </el-upload>
+        </el-form-item>
+        <el-form-item label="位置" prop="position">
+            <el-select v-model="form.position" placeholder="请选择">
+                <el-option v-for="item in positions" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="跳转方式" prop="skipType">
+            <el-select v-model="form.skipType" placeholder="请选择">
+                <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id">
+                </el-option>
+            </el-select>
+        </el-form-item>
+        <el-form-item label="url" prop="url" v-if="form.skipType == 1">
+            <el-input v-model="form.url" placeholder="请输入网址"></el-input>
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+            <el-input-number
+            :min="0"
+            controls-position="right"
+            :max="10000000"
+            v-model="form.sort"
+            placeholder="排序"
+            ></el-input-number>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listBanner, addBanner, updateBanner, delBanner, getBanner } from "@/api/module/banner";
+import {getToken} from "@/utils/auth";
+
+export default {
+  name: 'banner',
+  components: {
+  },
+  data () {
+    return {
+      positions: [
+        {
+            id: 1,
+            name: '首页'
+        }
+      ],
+      types: [
+        {
+            id: 0,
+            name: '不跳转'
+        }, {
+            id: 1,
+            name: 'url'
+        }, {
+            id: 4,
+            name: '资讯'
+        }
+      ],
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      caerAction: process.env.VUE_APP_BASE_API + "/common/upload",
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 轮播图数据
+      bannerList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 表单参数
+      form: {
+        id: undefined,
+        image: '',
+        position: 1,
+        skipType: 0,
+        url: '',
+        sort: 1,
+        status: 1
+      },
+      // 表单校验
+      rules: {
+        name: [{ required: true,message: '请输入名称',trigger: 'blur' }],
+        image: [{ required: true,message: '请上传图片',trigger: 'blur' }],
+        position: [{ required: true,message: '请选择位置',trigger: 'blur' }],
+        skipType: [{ required: true,message: '请选择跳转类型',trigger: 'blur' }],
+        sort: [{ required: true,message: '请输入排序值',trigger: 'blur' }]
+      },
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        name: ''
+      }
+    }
+  },
+  created () {
+    this.getList()
+  },
+  methods: {
+    handleSuccess(file) {
+      this.form.image = file.url;
+    },
+    handleRemove(file) {
+      //刚上传的图片
+      this.form.image = '';
+    },
+    caerBeforeUpload(file) {
+      let isRightSize = file.size / 1024 / 1024 < 20
+      if (!isRightSize) {
+        this.$message.error('文件大小超过 20MB')
+      }
+      return isRightSize
+    },
+
+    getPosition (position) {
+      var p = this.positions.filter(function (obj) {
+        return obj.id == position
+      })
+      if (p[0]) {
+        return p[0].name
+      } else {
+        return '--'
+      }
+    },
+    getType (type) {
+      var t = this.types.filter(function (obj) {
+        return obj.id === type
+      })
+      if (t[0]) {
+        return t[0].name
+      } else {
+        return '--'
+      }
+    },
+   /** 查询字典类型列表 */
+    getList() {
+      listBanner(this.queryParams).then(response => {
+        this.bannerList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 新增 / 修改
+    addOrUpdateHandle (id) {
+      this.form.id = id
+      if(this.form.id != null) {
+        this.title = "修改"
+        getBanner(id).then(response => {
+            this.form = response.data;
+        })
+      } else {
+        this.title = "新增"
+      }
+      console.log('form', this.form)
+      this.open = true;
+    },
+    updateStatus (id, status) {
+      let msg = '禁用成功'
+      if (status === 0) {
+        msg = '启动成功'
+      }
+      this.$http.get(`/banner/updateStatus?id=` + id + '&status=' + status).then(({ data }) => {
+        if (data.code === 0) {
+          this.getList();
+          this.$message({
+            message: msg,
+            type: 'success',
+            duration: 1500
+          })
+        }
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+    //   this.reset();
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+            if (this.form.id != null) {
+            updateBanner(this.form).then(response => {
+              this.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addBanner(this.form).then(response => {
+              this.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      })
+    },
+    // 删除
+    deleteHandle (row) {
+      this.$confirm('是否删除?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
+        .then(() => {
+          delBanner([row.id]).then(({ data }) => {
+            this.getList();
+          })
+        })
+        .catch(() => {})
+    }
+  }
+}
+</script>