FE-V2-PC/src/views/gasManage3_0/manage/supplierManage/supplierManageCheckList.vue

<!--供应商管理-审核-->
<template>
  <div class="check">
    <div class="check_list" v-if="pageType==1">
      <div class="title-box">
        <div class="title-button-box">
          <div @click="handleTabClick(1)">
            <p :class="tableType == 1?'button-color-1':'button-color-2'">供应商</p>
            <p :class="tableType == 1?'button-back-1':''"></p>
          </div>
          <div @click="handleTabClick(2)">
            <p :class="tableType == 2?'button-color-1':'button-color-2'">运输车辆</p>
            <p :class="tableType == 2?'button-back-1':''"></p>
          </div>
          <div @click="handleTabClick(3)">
            <p :class="tableType == 3?'button-color-1':'button-color-2'">运输人员</p>
            <p :class="tableType == 3?'button-back-1':''"></p>
          </div>
        </div>
        <p class="reset-button-one out-p" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
      </div>
      <div class="check_page_one" v-show="tableType == 1">
        <div class="check_page_one_min">
          <el-form :model="queryParams" ref="queryForm" style="margin-top:20px;" :inline="true" label-width="120">
            <el-form-item label="关键字" prop="searchValue">
              <el-input
                v-model="queryParams.searchValue"
                placeholder="名称/联系人/联系方式"
                clearable
                maxLength="30"
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <p class="inquire-button-one" style="margin-right:10px;" @click="handleQuery(1)">查询</p>
              <p class="reset-button-one" @click="resetQuery(1)">重置</p>
            </el-form-item>
            <!--<el-form-item label="" prop="title" style="float: right">-->
            <!--<p  class="reset-button-one" @click="backPage">返回</p>-->
            <!--</el-form-item>-->
          </el-form>
          <el-table border v-loading="loading" :data="tableData">
            <el-table-column label="供应商名称" align="left" prop="companyName"/>
            <el-table-column label="供应商简称" align="left" prop="companyShort"></el-table-column>
            <el-table-column label="联系人" align="left" prop="contacts"></el-table-column>
            <el-table-column label="联系方式" align="left" prop="phone"></el-table-column>
            <el-table-column label="提交时间" align="left" prop="createTime"></el-table-column>
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p"
                     @click="handleClick('1',scope.row,'audit')"
                     v-hasPermi="['airbottle:supplier:query']"
                  >审核</p>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total"
            layout="total, prev, pager, next, sizes, jumper"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
      <div class="check_page_one" v-show="tableType == 2">
        <div class="check_page_one_min">
          <el-form :model="queryParams2" ref="queryForm" style="margin-top:20px;" :inline="true" label-width="120">
            <el-form-item label="关键字" prop="name">
              <el-input
                v-model="queryParams2.searchValue"
                placeholder="车辆号牌/所属供应商"
                clearable
                maxLength="30"
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <p class="inquire-button-one" style="margin-right:10px;" @click="handleQuery(2)">查询</p>
              <p class="reset-button-one" @click="resetQuery(2)">重置</p>
            </el-form-item>
            <!--<el-form-item label="" prop="title" style="float: right">-->
            <!--<p  class="reset-button-one" @click="backPage">返回</p>-->
            <!--</el-form-item>-->
          </el-form>
          <el-table border v-loading="loading" :data="tableData2">
            <el-table-column label="车辆号牌" align="left" prop="carCode"/>
            <el-table-column label="所属供应商" align="left" prop="companyName"></el-table-column>
            <el-table-column label="提交时间" align="left" prop="createTime"></el-table-column>
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p"
                     @click="handleClick('2',scope.row,'audit')"
                     v-hasPermi="['airbottle:supplier:query']"
                  >审核</p>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total2"
            layout="total, prev, pager, next, sizes, jumper"
            :page.sync="queryParams2.pageNum"
            :limit.sync="queryParams2.pageSize"
            @pagination="getList2"
          />
        </div>
      </div>
      <div class="check_page_one" v-show="tableType == 3">
        <div class="check_page_one_min">
          <el-form :model="queryParams3" ref="queryForm" style="margin-top:20px;" :inline="true" label-width="120">
            <el-form-item label="关键字" prop="name">
              <el-input
                v-model="queryParams3.searchValue"
                placeholder="姓名/所属供应商/联系方式"
                clearable
                maxLength="30"
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item>
              <p class="inquire-button-one" style="margin-right:10px;" @click="handleQuery(3)">查询</p>
              <p class="reset-button-one" @click="resetQuery(3)">重置</p>
            </el-form-item>
            <!--<el-form-item label="" prop="title" style="float: right">-->
            <!--<p  class="reset-button-one" @click="backPage">返回</p>-->
            <!--</el-form-item>-->
          </el-form>
          <el-table border v-loading="loading" :data="tableData3">
            <el-table-column label="姓名" align="left" prop="userName"/>
            <el-table-column label="所属供应商" align="left" prop="companyName"></el-table-column>
            <el-table-column label="联系方式" align="left" prop="phone"></el-table-column>
            <el-table-column label="提交时间" align="left" prop="createTime"></el-table-column>
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">
              <template slot-scope="scope">
                <div class="table-button-box">
                  <p class="table-button-null"></p>
                  <p class="table-button-p"
                     @click="handleClick('3',scope.row,'audit')"
                     v-hasPermi="['airbottle:supplier:query']"
                  >审核</p>
                  <p class="table-button-null"></p>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total="total3"
            layout="total, prev, pager, next, sizes, jumper"
            :page.sync="queryParams3.pageNum"
            :limit.sync="queryParams3.pageSize"
            @pagination="getList"
          />
        </div>
      </div>
      <!--<el-tabs v-model="activeName" @tab-click="handleTabClick">-->
      <!--<el-tab-pane label="供应商" name="1">-->
      <!--&lt;!&ndash; 供应商&ndash;&gt;-->
      <!--<div class="check_page_one" >-->
      <!--<el-form :model="queryParams" ref="queryForm" style="margin-top:20px;" :inline="true" label-width="120">-->
      <!--<el-form-item label="关键字" prop="searchValue">-->
      <!--<el-input-->
      <!--v-model="queryParams.searchValue"-->
      <!--placeholder="名称/联系人/联系方式"-->
      <!--clearable-->
      <!--maxLength="30"-->
      <!--size="small"-->
      <!--@keyup.enter.native="handleQuery"-->
      <!--/>-->
      <!--</el-form-item>-->
      <!--<el-form-item>-->
      <!--<p class="inquire-button-one" @click="handleQuery(1)">查询</p>-->
      <!--<p class="reset-button-one" @click="resetQuery(1)">重置</p>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="" prop="title" style="float: right">-->
      <!--<p  class="reset-button-one" @click="backPage">返回</p>-->
      <!--</el-form-item>-->
      <!--</el-form>-->
      <!--<el-table v-loading="loading" :data="tableData">-->
      <!--<el-table-column label="供应商名称" align="left" prop="companyName"/>-->
      <!--<el-table-column label="供应商简称" align="left" prop="companyShort"></el-table-column>-->
      <!--<el-table-column label="联系人" align="left" prop="contacts"></el-table-column>-->
      <!--<el-table-column label="联系方式" align="left" prop="phone"></el-table-column>-->
      <!--<el-table-column label="提交时间" align="left" prop="createTime"></el-table-column>-->
      <!--<el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">-->
      <!--<template slot-scope="scope">-->
      <!--<div class="button-box">-->
      <!--<p class="table-button-one-90"-->
      <!--@click="handleClick('1',scope.row,'audit')"-->
      <!--v-hasPermi="['airbottle:supplier:query']"-->
      <!--&gt;审核</p>-->
      <!--</div>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--</el-table>-->
      <!--<pagination-->
      <!--:total="total"-->
      <!--layout="total, prev, pager, next, sizes, jumper"-->
      <!--:page.sync="queryParams.pageNum"-->
      <!--:limit.sync="queryParams.pageSize"-->
      <!--@pagination="getList"-->
      <!--/>-->
      <!--</div>-->
      <!--</el-tab-pane>-->
      <!--<el-tab-pane label="运输车辆" name="2">-->
      <!--&lt;!&ndash; 运输车辆&ndash;&gt;-->
      <!--<div class="check_page_one" >-->
      <!--<el-form :model="queryParams2" ref="queryForm" style="margin-top:20px;" :inline="true" label-width="120">-->
      <!--<el-form-item label="关键字" prop="name">-->
      <!--<el-input-->
      <!--v-model="queryParams2.searchValue"-->
      <!--placeholder="车辆号牌/所属供应商"-->
      <!--clearable-->
      <!--maxLength="30"-->
      <!--size="small"-->
      <!--@keyup.enter.native="handleQuery"-->
      <!--/>-->
      <!--</el-form-item>-->
      <!--<el-form-item>-->
      <!--<p class="inquire-button-one" @click="handleQuery(2)">查询</p>-->
      <!--<p class="reset-button-one" @click="resetQuery(2)">重置</p>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="" prop="title" style="float: right">-->
      <!--<p  class="reset-button-one" @click="backPage">返回</p>-->
      <!--</el-form-item>-->
      <!--</el-form>-->
      <!--<el-table v-loading="loading" :data="tableData2">-->
      <!--<el-table-column label="车辆号牌" align="left" prop="carCode"/>-->
      <!--<el-table-column label="所属供应商" align="left" prop="companyName"></el-table-column>-->
      <!--<el-table-column label="提交时间" align="left" prop="createTime"></el-table-column>-->
      <!--<el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">-->
      <!--<template slot-scope="scope">-->
      <!--<div class="button-box">-->
      <!--<p class="table-button-one-90"-->
      <!--@click="handleClick('2',scope.row,'audit')"-->
      <!--v-hasPermi="['airbottle:supplier:query']"-->
      <!--&gt;审核</p>-->
      <!--</div>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--</el-table>-->
      <!--<pagination-->
      <!--:total="total2"-->
      <!--layout="total, prev, pager, next, sizes, jumper"-->
      <!--:page.sync="queryParams2.pageNum"-->
      <!--:limit.sync="queryParams2.pageSize"-->
      <!--@pagination="getList2"-->
      <!--/>-->
      <!--</div>-->
      <!--</el-tab-pane>-->
      <!--<el-tab-pane label="运输人员" name="3">-->
      <!--&lt;!&ndash; 运输人员&ndash;&gt;-->
      <!--<div class="check_page_one">-->
      <!--<el-form :model="queryParams3" ref="queryForm" style="margin-top:20px;" :inline="true" label-width="120">-->
      <!--<el-form-item label="关键字" prop="name">-->
      <!--<el-input-->
      <!--v-model="queryParams3.searchValue"-->
      <!--placeholder="姓名/所属供应商/联系方式"-->
      <!--clearable-->
      <!--maxLength="30"-->
      <!--size="small"-->
      <!--@keyup.enter.native="handleQuery"-->
      <!--/>-->
      <!--</el-form-item>-->
      <!--<el-form-item>-->
      <!--<p class="inquire-button-one" @click="handleQuery(3)">查询</p>-->
      <!--<p class="reset-button-one" @click="resetQuery(3)">重置</p>-->
      <!--</el-form-item>-->
      <!--<el-form-item label="" prop="title" style="float: right">-->
      <!--<p  class="reset-button-one" @click="backPage">返回</p>-->
      <!--</el-form-item>-->
      <!--</el-form>-->
      <!--<el-table v-loading="loading" :data="tableData3">-->
      <!--<el-table-column label="姓名" align="left" prop="userName"/>-->
      <!--<el-table-column label="所属供应商" align="left" prop="companyName"></el-table-column>-->
      <!--<el-table-column label="联系方式" align="left" prop="phone"></el-table-column>-->
      <!--<el-table-column label="提交时间" align="left" prop="createTime"></el-table-column>-->
      <!--<el-table-column label="操作" align="left" class-name="small-padding fixed-width" width="120">-->
      <!--<template slot-scope="scope">-->
      <!--<div class="button-box">-->
      <!--<p class="table-button-one-90"-->
      <!--@click="handleClick('3',scope.row,'audit')"-->
      <!--v-hasPermi="['airbottle:supplier:query']"-->
      <!--&gt;审核</p>-->
      <!--</div>-->
      <!--</template>-->
      <!--</el-table-column>-->
      <!--</el-table>-->
      <!--<pagination-->
      <!--:total="total3"-->
      <!--layout="total, prev, pager, next, sizes, jumper"-->
      <!--:page.sync="queryParams3.pageNum"-->
      <!--:limit.sync="queryParams3.pageSize"-->
      <!--@pagination="getList"-->
      <!--/>-->
      <!--</div>-->
      <!--</el-tab-pane>-->
      <!--</el-tabs>-->



    </div>
    <check-page v-if="pageType==2" :pageData2="pageData2"></check-page>
  </div>
</template>

<script>
import { updateEl_course } from '@/api/exam/el_course'
import {
  carCheckRecordList,
  supplierCheck,
  supplierCheckList,
  supplierList,
  userCheckRecordList
} from '@/api/gasManage3_0/gasManage'
import { getToken } from "@/utils/auth";
import checkPage from "./supplierManageCheck.vue"

export default {
  name: "Approval",
  components: {
    checkPage,
  },
  data() {
    return {
      //table显示状态
      tableType:1,
      activeName:'1',
      //页面状态
      pageType:1,
      loading:false,
      headers: {
        Authorization: "Bearer " + getToken()
      },
      // 供应商查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
        searchValue:'',
      },
      // 车辆查询参数
      queryParams2: {
        pageNum: 1,
        pageSize:20,
        isAudit:0,
        searchValue:'',
      },
      // 人员查询参数
      queryParams3: {
        pageNum: 1,
        pageSize:20,
        isAudit:0,
        searchValue:'',
      },
      total:0,
      total2:0,
      total3:0,
      tableData:[],
      tableData2:[],
      tableData3:[],
      dateRange:[],
      pageData2:{},
    };


  },
  methods: {
    handleTabClick(type, event){
      let _this=this;
      _this.tableData=[];
      _this.tableData2=[];
      _this.tableData3=[];

      if(type==1){
        _this.getList()
      }else if(type==2){
        _this.getList2()
      }else if(type==3){
        _this.getList3()
      }
      _this.tableType=type

    },
    handleClick(index,row,doType){
      let _this=this;
      if(doType=='audit'){//审核
        _this.pageData2.id=row.id;
        _this.pageData2.type=index;
        _this.pageType=2;
      }else if(doType=='back'){
        _this.pageType=1
      }
    },
    //返回
    backPage(){
      this.$parent.handleClick('','','back');
      this.$parent.getList();
    },
    /** 搜索按钮操作 */
    handleQuery(type) {

      if(type==1){
        this.queryParams.pageNum = 1;
        this.getList();
      }else if(type==2){
        this.queryParams2.pageNum = 1;
        this.getList2();
      }else if(type==3){
        this.queryParams3.pageNum = 1;
        this.getList3();
      }
    },
    /** 重置按钮操作 */
    resetQuery(type) {
      if(type==1){
        this.queryParams.searchValue = "";
      }else if(type==2){
        this.queryParams2.searchValue = "";
      }else if(type==3){
        this.queryParams3.searchValue = "";
      }
      this.handleQuery(type);
    },
    getList(){
      let _this=this;
      supplierCheckList(_this.queryParams).then( response => {
        let res=response.rows;
        _this.tableData=res;
        _this.total=response.total;
      });
    },
    getList2(){
      let _this=this;
      carCheckRecordList(_this.queryParams2).then( response => {
        let res=response.rows;
        _this.tableData2=res;
        _this.total2=response.total;
      });
    },
    getList3(){
      let _this=this;
      userCheckRecordList(_this.queryParams3).then( response => {
        let res=response.rows;
        _this.tableData3=res;
        _this.total3=response.total;
      });
    },



  },
  mounted() {
    this.getList()
    this.getList2()
    this.getList3()
  }
};
</script>

<style scoped lang="scss">
.check {
  flex: 1;
  display: flex!important;
  flex-direction: column;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  p{
    margin:0;
  }
  /*  padding:20px 20px 20px!important;
    border-radius:10px;*/
  .check_list{
    flex: 1;
    display: flex!important;
    flex-direction: column;
    .title-box{
      display: flex;
      border-bottom: 1px solid #D8D8D8;
      .title-button-box{
        display: flex;
        flex:1;
        div{
          width:150px;
          cursor: pointer;
          p:nth-child(1){
            line-height:80px;
            text-align: center;
            font-size:18px;
            font-weight:500;
          }
          p:nth-child(2){
            margin:0 auto;
            width:60px;
            height:5px;
            border-radius:4px;
          }
          .button-color-1{
            color:#0045AF;
          }
          .button-color-2{
            color:#333;
          }
          .button-back-1{
            background: #0045AF;
          }
        }
      }
      .out-p{
        margin:25px 25px 0 0;
      }
    }
    .check_page_one{
      /*display: flex!important;*/
      /*flex-direction: column;*/
      /*flex: 1;*/
      height:100%;
      margin:0 20px 20px!important;
      .check_page_one_min{
        height:100%;
        display: flex!important;
        flex-direction: column;
        flex: 1;
      }
    }
    .check_page_tow{
      display: flex!important;
      flex-direction: column;
      flex: 1;
    }
    .check_page_tree{
      display: flex!important;
      flex-direction: column;
      flex: 1;
    }


  }

}
</style>
<style lang="scss">
.check{
  .el-tabs{
    flex: 1;
    display: flex!important;
    flex-direction: column;
    overflow: hidden;
    .el-tabs__content{
      flex:1;
      display: flex!important;
      flex-direction: column;
      .el-tab-pane{
        flex:1;
        display: flex!important;
        flex-direction: column;
        .check_page_one{
          flex:1;

        }
      }
    }
  }
}
</style>