webapp / GreenwayWeb

<!--  -->
<template>
  <div class="userStyle">
    <!-- 搜索 -->
            <div class="zhuti">
              <div class="topSearch">
                    <div class="formSearch">
                      <el-form :inline="true">
                        <el-form-item label="方案编号">
                          <el-input v-model="id" placeholder="请输入方案编号" size="mini" />
                        </el-form-item>
                        <el-form-item label="方案标题">
                          <el-input v-model="schemeTitle" placeholder="请输入方案标题"  size="mini"/>
                        </el-form-item>
                        <el-form-item>
                          <el-button type="primary" plain @click="search" size="mini" style="background-color: #3F9B6A;color: #fff;">查询</el-button>
                          <el-button plain @click="clear" size="mini" style="background-color: #fff;color: #000;">重置</el-button>
                        </el-form-item>
                      </el-form>
                    </div>
                    <div class="rightBTn">
                      <el-button plain type="success" @click="add" size="mini" style="background-color: #3F9B6A;color: #fff;">新增方案</el-button>
                    </div>
                  </div>
                  <!-- 表格 -->
                  <div class="tableBox">
                    <el-table
                      ref="multipleTable"
                      :data="formTable"
                      border
                      :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
                      tooltip-effect="dark"
                      style="width: 100%"
                    >
                      <el-table-column prop="id" label="方案编号" min-width="10%"/>
                      <el-table-column ref="table" prop="schemeTitle" label="方案标题" min-width="15%">
                      </el-table-column>
                      <el-table-column prop="createUser" label="创建者" min-width="10%">
                        </el-table-column>
                      <el-table-column prop="createDate" label="创建时间" min-width="20%">
                      </el-table-column>
                      <el-table-column label="投放渠道" prop="promotionContent" min-width="15%">
                      </el-table-column>
                      <el-table-column label="操作"  width="300" min-width="20%">
                        <template slot-scope="scope">
                          <div class="btnList">
                            <el-button
                              v-if="scope.row.state === 1"
                              size="mini"
                              @click="onSale(scope.row.id,scope.row.state)"
                              style="background-color: transparent;color: #3F9B6A;border: none;"
                            >
                              下架
                            </el-button>

                            <el-button
                              size="mini"
                              @click="edit(scope.row)"
                              style="background-color: transparent;color: #3F9B6A;border: none;"
                            >
                              编辑
                            </el-button>
                            <el-button   @click="del(scope.row.id)" size="mini" style="background-color: transparent;color: #3F9B6A;border: none;">删除</el-button>
                          </div>
                        </template>
                      </el-table-column>
                    </el-table>
                    <div class="fenye">
                      <el-pagination
                        :current-page="currentPage"
                        :page-sizes="[10, 20, 50, 100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                        background
                        small
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                      />
                    </div>
                  </div>
                  <ad-form ref="adForm" @reset="getAll" @ok="modalFormOk"/>
                  <ad-detail ref="adDetail" />
            </div>
  </div>
</template>

<script>
import {
  getList,
  del,
  toggle
} from '@/api/advert'

import {
  tuiGetAll,
  deletTui
} from '@/api/tuiguancehuguanli.js'
import AdForm from './form'
import AdDetail from './detail'
import axios from 'axios'
export default {
  components: { AdDetail, AdForm },
  data () {
    // 这里存放数据
    return {
      id:'',//方案编号
      schemeTitle:'',//方案标题
      formTable: {
        page: '1', // 当前页
        pageSize: '10', // 每页记录数
        id:0,
        createDate:'',//创建时间
        createUser:'',//创建者
        promotionContent:'',//投放渠道
        schemeTitle:''//方案标题
      },
      formInline: {
        page: '1', // 当前页
        pageSize: '10', // 每页记录数
        id:'',
        schemeTitle:'',//方案标题
        promotionContent:'',//投放渠道
        createDate:''
      },
      total: 1,
      tableData: [],
      currentPage: 1,
       pageInform:{
         pageNumber:0,
         pageSize:10
       },
       pageSize: 10,
    }
  },
  mounted () {
    this.getAll()
    console.log()
   // this.getAll(this.formInline)
   // this.privacyTime = localStorage.getItem('privacyTime')
   // console.log(this.privacyTime)
  },
  // 方法集合
  methods: {
  async  modalFormOk(){
      await this.getAll()
      this.$refs.adForm.close()
    },
    // 初始化查询列表数据
    async getAll () {
      // const formInline = this.formInline
      // const res = await getList(formInline)
       const res = await tuiGetAll(this.pageInform)
      console.log(res.data)
      this.formTable = res.data.content
      this.total = res.data.content.length
    },
    // 页码每页页数修改回调
    handleSizeChange (val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    // 页码当前页修改回调
    handleCurrentChange (val) {
      this.formInline.page = val
      this.getAll()
    },
    // 查询
    search () {
      this.total = 1
      this.formInline.page = 1
      tuiGetAll({id:this.id,schemeTitle:this.schemeTitle,pageNumber:0,pageSize:10,}).then(res=>{
       this.formTable = res.data.content
       this.total = res.data.content.length
      })
      axios.post("http://localhost:9003/cerePromotion/queryByPage",{
          pageNumber:0,
          pageSize:10,
          id:this.formInline.num,
          schemeTitle:this.formInline.name
      }).then((response) => {
        this.tableData = response.data.data.content
                console.log("成功");
                console.log(response.data);
              })
              .catch((error) => {
                console.log(error);
              });
              return;
      // this.getAll()

    },
    // 清除
    clear () {
     this.id = ''
     this.schemeTitle= ''
      this.getAll()
    },
    // 新增角色
    add () {
      this.$refs.adForm.show()
    },
    // 编辑角色
    edit (row) {
      this.$refs.adForm.show(row)
      console.log(row)
    },
    view (row) {
      this.$refs.adDetail.show(row)
    },
    // 删除权益
    async del (id) {
      let that = this
     deletTui({id:id}).then(res=>{
          that.getAll()
     })
    },
    onSale(id,state){
      this.$confirm(`${state ? '确定让选择广告失效？' : '确定让选择广告生效？'}`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '我再想想',
        type: 'warning'
      })
        .then(() => {
          toggle({
            id,
            state: state === 0 ? 1 : 0
          }).then(({ data }) => {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getAll()
          })
        })
        .catch(() => { })
    }
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../../styles/elDialog.scss");
.userStyle {
  padding: 10px;
  background-color:#F2F3F5;
  .topSearch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .formSearch,
    .rightBTn {
      margin-left: 20px;
    }
  }
  .zhuti{
    padding: 20px;
      min-height: calc(100vh - 50px - 20px);
    background-color: #Fff;
  }
  .btnList .el-popover__reference{
    margin-left: 10px;
  }
}
  ::v-deep .el-form-item__label{
        font-weight: normal;
         font-size: 12px;

       }
       ::v-deep .btn .el-button:focus,
        .el-button:hover {
          border: 1px solid #3F9B6A;
        }
        ::v-deep .el-button {
           border: 1px solid #3F9B6A;
         }
         ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
           background-color: #3F9B6A;
         }
</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: #3F9B6A;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

</style>