webapp / GreenwayWeb

<!--  -->
<template>
  <div style="padding: 10px;background-color:#F2F3F5">
    <div class="userStyle">
        <!-- 搜索 -->
        <div class="topSearch">
          <div class="formSearch">
            <el-form :inline="true" :model="formInline">
              <el-form-item label="方案名称">
                <el-input v-model="formInline.name" placeholder="请输入方案名称"  size="mini" />
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model="formInline.state" placeholder="请选择状态"  size="mini">
                  <el-option label="通过" :value="1" />
                  <el-option label="驳回" :value="0" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button plain @click="search" size="mini" style="background-color: #3F9B6A;color: #fff">查询</el-button>
                <el-button plain @click="clear" size="mini" style="color: #000;border: 1px solid #F2F3F5;">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="rightBTn">
            <el-button plain @click="add" size="mini" style="background-color: #3F9B6A;color: #fff">新增方案</el-button>
          </div>
        </div>
        <!-- 表格 -->
        <div class="tableBox">
          <el-table
            ref="multipleTable"
            :data="tableData"
            border
           :header-cell-style="{fontSize: '12px', backgroundColor: '#FAFAFA',color:'#000',fontWeight: 'normal'}"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column prop="id" label="编号" />
            <el-table-column ref="table" prop="popupImg" label="方案名称">
              <template slot-scope="scope">
                  {{scope.row.schemeName}}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="创建者">
               <template slot-scope="scope">
               {{scope.row.createUser}}
              </template>
              </el-table-column>
            <el-table-column label="联系方式" align="center">
             <template slot-scope="scope">
              {{scope.row.contactInformation}}
             </template>
            </el-table-column>
            <el-table-column prop="startTime" label="计划招商时间">
              <template slot-scope="scope">
                <span>{{ scope.row.investmentTime }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="endTime" label="提交时间">
              <template slot-scope="scope">
                <span>{{ scope.row.createTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <div>
                  <el-tag v-if="scope.row.state === 1" style="cursor: pointer" :type="''">通过</el-tag>
                  <el-tag v-else style="cursor: pointer" :type=" 'info' ">驳回</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作"  width="300">
              <template slot-scope="scope">
                <div class="btnList">
                  <el-button
                    size="mini"
                    @click="edit(scope.row)"
                    style="background-color: transparent;border: none;color: #3F9B6A;"
                  >
                    编辑
                  </el-button>
                  <el-button slot="reference"  size="mini" @click="del(scope.row.id)" style="background-color: transparent;border: none;color: #3F9B6A;">删除</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="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
        <ad-form ref="adForm" @reset="getAll" @childMessage="handleChildMessage" />
        <ad-detail ref="adDetail" />
      </div>
  </div>
</template>

<script>
import {
  del,
  toggle
} from '@/api/advert'
import {
  getList,
  colse
} from '../../../api/faglgl'
import AdForm from './form'
import AdDetail from './detail'
import axios from 'axios'
export default {
  components: { AdDetail, AdForm },
  data () {
    // 这里存放数据
    return {
      formInline: {
        page: '1', // 当前页
        pageSize: '10' // 每页记录数
      },
      total: 1,
      tableData: [],
      currentPage: 1,
      listIndex:{
        pageNumber:0,
        pageSize:10
      }
    }
  },
  mounted () {
    // axios.post("http://localhost:9003/cereInvestmentProposal/queryByPage",{
    //     pageNumber:0,
    //     pageSize:10
    // }).then((response) => {
    //   this.tableData = response.data.data.content
    //           console.log("成功");
    //           console.log(response.data);
    //         })
    //         .catch((error) => {
    //           console.log(error);
    //         });
    //         return;
    this.getAll()
  },
  // 方法集合
  methods: {
    // 初始化查询列表数据
    async getAll () {
      const formInline = this.formInline
       const res  = await getList(this.listIndex)
     this.tableData = res.data.content
      // this.total = res.data.total
    },
    // 页码每页页数修改回调
    handleSizeChange (val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    handleChildMessage(){
      this.getAll()
    },
    // 页码当前页修改回调
    handleCurrentChange (val) {
      this.formInline.page = val
      this.getAll()
    },
    // 查询
   async search () {
      // this.total = 1
      // this.formInline.page = 1
      // this.getAll()
       const res  = await getList({ pageNumber:0,pageSize:10,schemeName:this.formInline.name,state:this.formInline.state,})
      this.tableData = res.data.content

    },
    // 清除
    clear () {
      this.formInline = {
        name: '', // 搜索字段
        state: '', // 是否启用 1-是 0-否
        page: '1', // 当前页
        pageSize: '10' // 每页记录数
      }
      this.getAll()
    },
    // 新增
    add () {
      this.$refs.adForm.show()
    },
    // 编辑
    edit (row) {
      this.$refs.adForm.show(row)
    },
    view (row) {
      this.$refs.adDetail.show(row)
    },
    // 删除
    async del (val) {
        await colse({id:val.id})
        this.getAll()
    },
  }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../../styles/elDialog.scss");
.userStyle {
  padding: 20px;
  min-height: calc(100vh - 50px - 20px);
  background-color: #Fff;
  .topSearch {
    display: flex;
    justify-content: space-between;
    //align-items: center;
    .formSearch,
    .rightBTn {
      margin-left: 20px;
    }
  }
  .btnList .el-popover__reference{
    margin-left: 10px;
  }
}
</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: #409EFF;
}
.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>