yunshengtai-admin/src/views/shop/demandHall/index.vue

<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div class="search-box">
        <el-select v-model="resourceType" clearable placeholder="资源类型">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="resourceAuditState" clearable @change="stateChange" placeholder="审核状态">
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" @click="search">搜索</el-button>
      </div>
      <!--表格渲染-->
      <el-table ref="table" v-loading="loading" :data="data" size="small" style="width: 100%;">
        <el-table-column prop="id" label="id" />
        <el-table-column prop="enterpriseName" label="企业名称" />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="capital" label="资金需求" />
        <el-table-column prop="detailedDescription" label="详细描述" />
        <el-table-column prop="resourceType" label="资源类型">
          <template slot-scope="scope">
            <span>{{scope.row.resourceType == 1 ? '资源' : '需求'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="resourceAuditState" label="审核状态">
          <template slot-scope="scope">
            <span>{{scope.row.resourceAuditState == 1 ? '待审核' : scope.row.resourceAuditState == 2 ? '审核通过' : '审核未通过'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="showDialog(scope.row)">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="审核"
        :visible.sync="dialogVisible"
        width="500">
        <div>
          <el-form :model="authForm" label-width="100px">
            <el-form-item label="是否通过">
              <el-radio-group v-model="authForm.type" @change="radioChange">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="未通过理由" v-show="authForm.type == 0">
              <el-input type="textarea" v-model="authForm.reason"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="authSubmit">确 定</el-button>
        </div>
      </el-dialog>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page="page"
        :page-size="size"
        :page-sizes="[1, 10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import crudResource from '@/api/Resources.js'

// crud交由presenter持有
export default {
  name: 'Resource',
  data() {
    return {
      loading: true,
      data: [],
      typeOptions:[
        {
          value: 1,
          label: '资源'
        },
        {
          value: 2,
          label: '需求'
        }
      ],
      stateOptions:[
        {
          value: 1,
          label: '审核中'
        },
        {
          value: 2,
          label: '审核通过'
        },
        {
          value: 3,
          label: '审核不通过'
        }
      ],
      // resourceCagetoryId: 0,
      // enterpriseType: 0,
      // resourceAuditState: [1],
      // resourceType: 0,
      resourceCagetoryId: null,
      enterpriseType: null,
      resourceAuditState: null,
      resourceType: null,
      total: 0,
      page: 1,
      size: 10,
      dialogVisible:false,
      authForm:{type: 1,reason: ''}
    }
  },
  created(){
    this.getList()
  },
  methods: {
    stateChange(e){
      this.resourceAuditState = [e]
    },
    handleSizeChange(val){
      this.size = val
      this.getList()
    },
    handleCurrentChange(val){
      this.page = val
      this.getList()
    },
    search(){
      this.page = 1
      this.getList()
    },
    getList(){
      let params = {
        resourceAuditState: this.resourceAuditState,
        resourceType: this.resourceType,
        resourceCagetoryId: this.resourceCagetoryId,
        enterpriseType:this.enterpriseType,
        page: this.page - 1,
        size: this.size
      }
      crudResource.getResourceList(params).then((res)=>{
        this.data = res.content
        this.loading = false
        this.total = res.totalElements
      })
    },
    showDialog(row){
      console.log(row)
      this.dialogVisible = true
      row.resourceAuditState == 2 ? this.authForm.type = 1 :  this.authForm.type = 0
      this.authForm.examineId = row.id
    },
    radioChange(val){
      if(val == 1){
        this.authForm.reason = ''
      }
    },
    authSubmit(){
      crudResource.examineResources(this.authForm).then((res)=>{
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        this.dialogVisible = false
        this.getList()
      })
    }
  }
}



</script>

<style scoped>
  .table-img {
    display: inline-block;
    text-align: center;
    background: #ccc;
    color: #fff;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    line-height: 32px;
  }
  .el-pagination{
    margin-top: 20px;
  }
</style>