admin-web-master/src/views/aaa/index.vue

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>轮播图设置</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">轮播图管理</span></div>
      </div>
      <div>
        <div style="margin:0 0 20px 0px;">
          <el-button @click="addbuss(1)" style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
            icon="el-icon-circle-plus-outline"> 新增
          </el-button>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData"
          :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
          style="width: 100%">
          <el-table-column label="序号" min-width="5%" prop="id">
            <template slot-scope="scope">
              {{scope.$index +1 }}
            </template>
          </el-table-column>
          <el-table-column label="轮播图" prop="" min-width="20%">
            <template slot-scope="scope">
              <el-image  style="height: 80px;" :src="$baseURL+scope.row.imageUrl" fit="contain"></el-image>
            </template>
          </el-table-column>
          <el-table-column label="跳转地址" min-width="20%" prop="jumpUrl" >
            <template slot-scope="scope">
              {{ scope.row.jumpUrl || '-' }}
            </template>
          </el-table-column>
		  <el-table-column label="发布类型" min-width="20%" prop="type" >
			  <template slot-scope="scope">
			    {{ scope.row.type==1?'商城端':'商家端' }}
			  </template>
		  </el-table-column>
          <el-table-column label="操作" min-width="17%">
            <template slot-scope="scope">
              <div @click="handleDelete(scope.row)" class="tableBtn greens">删除</div>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content: space-between;" class="bom">
          <div style="font-size: 14px;">共 <span style="color: #3F9B6A;">{{total}}</span> 项数据</div>
          <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
            background small layout="prev, pager, next" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
          </el-pagination>
        </div>
        <!-- 新建商家弹框 -->
        <el-dialog :title="index == 1?'新增':index == 2?'详情':'编辑'" :visible.sync="ggXin" custom-class="diaslog_zhong"
          style="padding: 0;" width="50%" class="dialog_css_Xq" center :close-on-click-modal="false"
          :show-close="false">
          <div style="padding: 30px;">
            <div style="margin-bottom: 20px;">
              <el-form  :model="formInline"  :rules="rules" ref="ruleForm" label-width="80px">
                <el-form-item label="轮播图" prop="imageUrl">
                  <upimg :limit="1" :cmpOption="{disabled:false,isSetCover:false}" filePath="lb" inputtype="imageUrl" :value="formInline.imageUrl" @changimg="e=>changimg(e,'imageUrl')"></upimg>
                  <!-- <upimg v-model="formInline.imageUrl" :limit="1" :fileSize="1"></upimg> -->
                </el-form-item>
                <el-form-item label="跳转地址">
                  <el-input v-model="formInline.jumpUrl" placeholder="请输入" />
                </el-form-item>
				<el-form-item label="发布端口" prop="type">
				  <el-select v-model="formInline.type" placeholder="请选择"  style="width:100%">
					  <el-option
					    label="商城端" :value="1">
					  </el-option>
				    <el-option
				      label="商家端" :value="2">
				    </el-option>
				  </el-select>
				</el-form-item>
				  
              </el-form>
            </div>
            <div style="display: flex;justify-content: flex-end;">
              <el-button @click="closeFn(1)" class="buttonHover"
                style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">返回</el-button>
              <el-button @click="addCheck(0)" v-if="index!= 2"
                style="background-color: #3F9B6A;color: #fff;padding:8px 15px;">确定</el-button>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
  import upimg from "@/components/ImageUpload/index";
  import {
    bannerGet,
    bannerAdd,
    bannerDel
  } from '../../api/banner';
  export default {
    components: {
      upimg
    },
    data() {
      return {
        currentPage: 1,
        total: 100,
        flag: false,
        pageSize: 10,
        ggXin: false,
        index: 1,
        formInline: {
          imageUrl: '',
          jumpUrl: '',
		  type:null
        },
        tableData: [],
        formRul: {
          pageNumber: 1,
          pageSize: 10
        },
		  rules: {
		          imageUrl: [
		            { required: true, message: '请选择轮播图片', trigger: 'change' },
		          ],
				  type: [
				    { required: true, message: '请选择发布端口', trigger: 'change' },
				  ],
		}
      }
    },
    computed: {},
    mounted() {
      this.getAll()
    },
    methods: {
      changimg(e, type) {
        this.formInline[type] = e
      },
      addbuss(val, item) {
        if (val == 1) {
          this.formInline = {
          imageUrl: '',
          jumpUrl: '',
		  type:null
			}
        }
        this.index = val
        this.ggXin = true
      },
      async getAll() {
        const res = await bannerGet(this.formRul)
        this.tableData = res.data.content
        this.total = res.data.content.length
      },
      onSubmit() {
      },
      handleSizeChange() {
      },
      handleCurrentChange() {
      },
       addCheck() {
		   this.$refs.ruleForm.validate((valid) => {
		            if (valid) {
						bannerAdd(this.formInline).then(()=>{
							this.$message({
							    message: '保存成功',
							    type: 'success',
							    offset: 100
							  })
							this.ggXin = false
							this.getAll()
						})
						
						}else{
                       this.$message({
                           message: '请填写数据',
                           type: 'error',
                           offset: 100
                         })
                         return false;
                       }
          })
      },
      async handleDelete(row) {
        let that = this
        this.$confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bannerDel({
            id: row.id
          }).then(res => {
            console.error(res)
            if (res.code == 200) {
              this.$message({
                message:'删除成功',
                type: 'success'
              })
              this.getAll()
            } else {
              this.$message({
                message: res.msg,
                type: 'error'
              })
            }
          })
        })
      },
      closeFn() {
        this.ggXin = false
        this.index = 1
      }
    }
  }
</script>
<style scoped>
  .zhuti {
    padding: 0 20px 20px 20px;
    min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
  }
  .chengeXia {
    border-bottom: 6px solid #3F9B6A;
    padding-bottom: 4px;
    color: #3F9B6A;
  }
  .formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
<style lang="scss" scoped>
  ::v-deep .el-dialog__body {
    padding: 0 0 !important;
  }
  .el-dialog__header{
    padding: 0;
    display: none;
  }
</style>