|
|
@@ -0,0 +1,405 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-main ref="elMain" style="padding: 0px">
|
|
|
+ <el-row style="margin: 0px 20px">
|
|
|
+ <!-- <kt-button size="small" style="color: #409EFF;" icon="el-icon-circle-plus" label="新增海报" type="text" perms="sys:user:add" @click="handleAdd" /> -->
|
|
|
+ <el-button
|
|
|
+ style="
|
|
|
+ background-color: #52c578;
|
|
|
+ border: #52c578;
|
|
|
+ margin-left: 15px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ "
|
|
|
+ icon="fa fa-plus"
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ @click="handleAdd"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ </el-row>
|
|
|
+ <el-table
|
|
|
+ :data="pageResult"
|
|
|
+ height="650"
|
|
|
+ border
|
|
|
+ style="width: 100%"
|
|
|
+ highlight-current-row
|
|
|
+ :default-sort="{ prop: 'createtime', order: 'descending' }"
|
|
|
+ stripe
|
|
|
+ :header-cell-style="{
|
|
|
+ background: '#F2F7FC',
|
|
|
+ fontWeight: '700',
|
|
|
+ color: '#606266',
|
|
|
+ }"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="level"
|
|
|
+ label="等级"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="image"
|
|
|
+ label="背景图"
|
|
|
+ align="center"
|
|
|
+ :formatter="imgFormatter"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="logo"
|
|
|
+ label="LOGO"
|
|
|
+ align="center"
|
|
|
+ :formatter="logoFormatter"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="address"
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ width="300"
|
|
|
+ fixed="right"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="warning"
|
|
|
+ @click="bannerput(scope.$index, scope.row)"
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <div class="block" ref="bottomFixed">
|
|
|
+ <el-pagination
|
|
|
+ v-if="pagination.totalSize"
|
|
|
+ style="margin-top: 10px"
|
|
|
+ :page-size="pagination.pageSize"
|
|
|
+ :current-page.sync="pagination.pageNum"
|
|
|
+ :total="pagination.totalSize"
|
|
|
+ layout="total, sizes,prev, pager, next,jumper"
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+
|
|
|
+ <!-- 新增协议的对话框 -->
|
|
|
+ <el-dialog
|
|
|
+ v-dialogDrag
|
|
|
+ :title="dialogTitle"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="840px"
|
|
|
+ :before-close="handleClose"
|
|
|
+ >
|
|
|
+ <el-form :model="form" ref="form" label-width="120px">
|
|
|
+ <el-form-item label="等级" prop="level">
|
|
|
+ <el-input
|
|
|
+ v-model.number="form.level"
|
|
|
+ placeholder="请输入等级"
|
|
|
+ style="width: 300px"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="背景图" prop="img" style="width: 100%">
|
|
|
+ <el-upload
|
|
|
+ action="#"
|
|
|
+ list-type="picture-card"
|
|
|
+ :auto-upload="false"
|
|
|
+ :limit="1"
|
|
|
+ :file-list="fileList"
|
|
|
+ :on-exceed="uploadlimit"
|
|
|
+ :on-change="drivingupload"
|
|
|
+ accept=".png, .jpg, .jpeg"
|
|
|
+ >
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ <div slot="file" slot-scope="{ file }">
|
|
|
+ <img
|
|
|
+ class="el-upload-list__item-thumbnail"
|
|
|
+ :src="file.url"
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+
|
|
|
+ <!-- <el-upload
|
|
|
+ action="#"
|
|
|
+ :auto-upload="false"
|
|
|
+ accept=".png, .jpg, .jpeg"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-change="drivingupload">
|
|
|
+ <img v-if="Image" :src="Image" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="24">
|
|
|
+ <el-form-item label="LOGO" prop="img" style="width: 100%">
|
|
|
+ <el-upload
|
|
|
+ action="#"
|
|
|
+ list-type="picture-card"
|
|
|
+ :auto-upload="false"
|
|
|
+ :limit="1"
|
|
|
+ :file-list="fileList1"
|
|
|
+ :on-exceed="uploadlimit"
|
|
|
+ :on-change="drivingupload1"
|
|
|
+ accept=".png, .jpg, .jpeg"
|
|
|
+ >
|
|
|
+ <i slot="default" class="el-icon-plus"></i>
|
|
|
+ <div slot="file" slot-scope="{ file }">
|
|
|
+ <img
|
|
|
+ class="el-upload-list__item-thumbnail"
|
|
|
+ :src="file.url"
|
|
|
+ alt
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ <!-- <el-upload
|
|
|
+ action="#"
|
|
|
+ :auto-upload="false"
|
|
|
+ accept=".png, .jpg, .jpeg"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-change="drivingupload1">
|
|
|
+ <img v-if="logo" :src="logo" class="avatar">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </el-upload> -->
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="submit">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogTitle: "",
|
|
|
+ pagination:{
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ totalSize: 0,
|
|
|
+ },
|
|
|
+ Image:'',
|
|
|
+ logo:'',
|
|
|
+ fileList:[],
|
|
|
+ fileList1:[],
|
|
|
+ dialogVisible: false, //控制对话框显示
|
|
|
+ form: {
|
|
|
+ level: "", //标题
|
|
|
+ image: "", //图片base64
|
|
|
+ },
|
|
|
+ pageResult: [],
|
|
|
+ color: null,
|
|
|
+ id: "",
|
|
|
+ // 右侧列表查询数据End
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ uploadlimit(files, fileList) {
|
|
|
+ if (fileList.length == "1") {
|
|
|
+ this.$message({
|
|
|
+ message: "一次最多只能上传一张",
|
|
|
+ type: "warning",
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.pagination.pageNum = val;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+ handleSizeChange(value) {
|
|
|
+ this.pagination.pageSize = value;
|
|
|
+ this.pagination.pageNum = 1;
|
|
|
+ this.findPage();
|
|
|
+ },
|
|
|
+
|
|
|
+ drivingupload(file) {
|
|
|
+ this.form.image = "";
|
|
|
+ var file = file.raw;
|
|
|
+ var _this = this;
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ reader.onload = function (e) {
|
|
|
+ // 图片base64化
|
|
|
+ _this.form.image = this.result;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ drivingupload1(file) {
|
|
|
+ this.form.logo = "";
|
|
|
+ var file = file.raw;
|
|
|
+ var _this = this;
|
|
|
+ var reader = new FileReader();
|
|
|
+ reader.readAsDataURL(file);
|
|
|
+ reader.onload = function (e) {
|
|
|
+ // 图片base64化
|
|
|
+ _this.form.logo = this.result;
|
|
|
+ };
|
|
|
+ },
|
|
|
+ bannerput(index, row) {
|
|
|
+ //修改
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.form = row;
|
|
|
+ this.id = row.id;
|
|
|
+ },
|
|
|
+ bannerdelete(ndex, row) {
|
|
|
+ this.$confirm("确定删除该图片吗?，请谨慎操作", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ let id = row.id;
|
|
|
+ this.$api.task.bannerDelete(id).then((res) => {
|
|
|
+ if (res.code == "200") {
|
|
|
+ this.$message({
|
|
|
+ type: "success",
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ this.findPage();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ colorchange(e) {
|
|
|
+ this.form.color = e;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (!!this.id) {
|
|
|
+ this.$api.task.sysPartnerConfiEdit(this.form, this.id).then((res) => {
|
|
|
+ if (res.code == "200") {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg ,
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.findPage();
|
|
|
+ this.dialogVisible = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$api.task.sysPartnerConfigAdd(this.form).then((res) => {
|
|
|
+ if (res.code == "200") {
|
|
|
+ this.$message({
|
|
|
+ message: res.msg || '新增成功',
|
|
|
+ type: "success",
|
|
|
+ });
|
|
|
+ this.findPage();
|
|
|
+ this.dialogVisible = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ imgFormatter(row) {
|
|
|
+ let image = row.image;
|
|
|
+ return <img src={"" + image + ""} class="imageclass"></img>;
|
|
|
+ },
|
|
|
+ logoFormatter(row) {
|
|
|
+ let image = row.logo;
|
|
|
+ return <img src={"" + image + ""} class="imageclass" style='width:150px'></img>;
|
|
|
+ },
|
|
|
+ //新增海报
|
|
|
+ handleAdd() {
|
|
|
+ this.dialogTitle = "新增";
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.fileList=[]
|
|
|
+ this.fileList1=[]
|
|
|
+ this.form={
|
|
|
+ img:'',
|
|
|
+ logo:'',
|
|
|
+ id:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //--数据字典 end --
|
|
|
+ // 上传图片的方法End
|
|
|
+ handleClose(done) {
|
|
|
+ this.$confirm("确认关闭？", { lockScroll: false })
|
|
|
+ .then((_) => {
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ .catch((_) => {});
|
|
|
+ },
|
|
|
+ //-- formatter begin--
|
|
|
+ enableFormatter(row) {
|
|
|
+ if (row.enable == 1) {
|
|
|
+ return "开启";
|
|
|
+ } else {
|
|
|
+ return "关闭";
|
|
|
+ }
|
|
|
+ },
|
|
|
+ validateNumber(event) {
|
|
|
+ event.target.value = event.target.value.replace(/\D/g, '');
|
|
|
+ // 如果输入的是空字符串，则设置为0
|
|
|
+ if (event.target.value === '') {
|
|
|
+ this.form.level = 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 右侧列表的方法Start
|
|
|
+ findPage() {
|
|
|
+ this.$api.task.sysPartnerConfigPage(this.pagination).then((res) => {
|
|
|
+ this.pageResult = res.data.content;
|
|
|
+ this.pagination.pageNum = res.data.pageNum;
|
|
|
+ this.pagination.pageSize = res.data.pageSize;
|
|
|
+ this.pagination.totalSize = res.data.totalSize;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.queryForm .el-row {
|
|
|
+ margin: 0px;
|
|
|
+}
|
|
|
+.queryForm .el-form-item {
|
|
|
+ margin-bottom: 0px;
|
|
|
+}
|
|
|
+.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: 150px;
|
|
|
+ height: 150px;
|
|
|
+ line-height: 150px;
|
|
|
+ text-align: center;
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+}
|
|
|
+.avatar {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ padding: 5px;
|
|
|
+ border-radius: 6px;
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.imageclass {
|
|
|
+ width: 200px;
|
|
|
+ height: 100px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
lihongxiao