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

<!--资格申请-添加-->
<template>
  <div class="addPage">
    <div class="addPage_title">
      <p v-if="type==1">审核供应商</p>
      <p v-if="type==2">审核车辆</p>
      <p v-if="type==3">审核人员</p>
      <P></P>
      <p class="button-p reset-button-one" @click="backPage">返回</p>
    </div>
    <div class="addPage_b">
      <!--申请3-->
      <div v-if="pageType==1" class="apply_tree">
        <div class="apply_tree_t" v-if="type==1">
          <img  src="@/assets/ZDimages/gasManage3_0/icon_sml_lxr.png"/>
          <i>请认真核对供应商信息后填写审核说明，审核通过可选填审核说明，审核未通过则必须填写审核说明。</i>
        </div>
        <div class="apply_tree_t" v-if="type==2">
          <img  src="@/assets/ZDimages/gasManage3_0/icon_sml_lxr.png"/>
          <i> 请认真核对车辆信息后填写审核说明，审核通过可选填审核说明，审核未通过则必须填写审核说明。</i>
        </div>
        <div class="apply_tree_t" v-if="type==3">
          <img  src="@/assets/ZDimages/gasManage3_0/icon_sml_lxr.png"/>
          <i> 请认真核对人员信息后填写审核说明，审核通过可选填审核说明，审核未通过则必须填写审核说明。。</i>
        </div>
         <!-- 供应商-->
        <div class="apply_tree_m" v-if="type==1">
          <li>
            <img  src="@/assets/ZDimages/gasManage3_0/icon_xxjl_gs.png"/>
            <div class="apply_tree_m_r">
              <i>供应商名称：</i>
              <p>{{form.companyName}}</p>
              <i>经营地址：</i>
              <p>{{form.businessAddress}}</p>
            </div>
          </li>
          <i></i>
          <li>
            <img  src="@/assets/ZDimages/gasManage3_0/icon_xxjl_lxr.png"/>
            <div class="apply_tree_m_r">
              <i>联系人：</i>
              <p>{{form.contacts}}</p>
              <i>联系方式：</i>
              <p>{{form.phone}}</p>
            </div>
          </li>
        </div>
        <!-- 车辆-->
        <div class="apply_tree_m1" v-if="type==2">
          <li><i>车辆号牌：</i><i style="width: 180px">{{form.carCode}}</i></li>
          <li><i>所属供应商：</i><i>{{form.companyName}}</i></li>
        </div>
        <!-- 人员-->
        <div class="apply_tree_m1" v-if="type==3">
          <li><i>姓名：</i><i style="width: 220px">{{form.userName}}</i></li>
          <li><i>所属供应商：</i><i style="width: 200px">{{form.companyName}}</i></li>
          <li><i>联系方式：</i><i>{{form.phone}}</i></li>
        </div>
        <!-- 供应商-->
        <div class="apply_tree_b" v-if="type==1">
          <li v-for="(item2,index2) in form.qpSupplierCredentialsVos">
            <div class="apply_tree_b_t">{{item2.naturalName}}：</div>
            <div class="apply_tree_b_m"><img  :src="item2.naturalUrl"/></div>
            <div class="apply_tree_b_b"><i style="color: #333">有效期：</i>{{item2.startTime}}至{{item2.endTime}}</div>
          </li>
        </div>
        <!-- 车辆-->
        <div class="apply_tree_b" v-if="type==2">
          <li v-for="(item2,index2) in form.carCredentialsVos">
            <div class="apply_tree_b_t">{{item2.naturalName}}：</div>
            <div class="apply_tree_b_m"><img  :src="item2.naturalUrl"/></div>
            <div class="apply_tree_b_b"><i style="color: #333">有效期：</i>{{item2.startTime}}至{{item2.endTime}}</div>
          </li>
        </div>
        <!-- 人员-->
        <div class="apply_tree_b" v-if="type==3">
          <li v-for="(item2,index2) in form.userCredentialsVos">
            <div class="apply_tree_b_t">{{item2.naturalName}}：</div>
            <div class="apply_tree_b_m"><img  :src="item2.naturalUrl"/></div>
            <div class="apply_tree_b_b"><i style="color: #333"><i style="color: #333">有效期：</i></i>{{item2.startTime}}至{{item2.endTime}}</div>
          </li>
        </div>
        <el-input type="textarea" class="apply_tree_b2" v-model="queryParamsCheck.auditContent" placeholder="请输入审核说明"  maxlength="50" />
        <div class="sub_btn">
          <p class="reset-button-one" style="width:150px;margin-right: 30px" @click="handleClick('','','reject')">审核驳回</p>
          <p class="inquire-button-one" style="width:150px;" @click="handleClick('','','pass')">审核通过</p>
        </div>
      </div>
    </div>
    <div class="record">
      <div class="record_title">审核记录</div>
      <el-table border v-loading="loading" :data="tableData" height="300">
        <el-table-column label="审核人" align="left" prop="auditUser"/>
        <el-table-column label="审核时间" align="left" prop="auditTime"></el-table-column>
        <el-table-column label="审核操作" align="left" prop="status">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">待审核</span>
            <span v-if="scope.row.status == 1">通过</span>
            <span v-if="scope.row.status == 2">驳回</span>
          </template>
        </el-table-column>
        <el-table-column label="审核说明" align="left" prop="auditContent"></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>
</template>
<script>
import { getToken } from "@/utils/auth";
import {
  carCheckRecordList, carDetail,
  CheckRecordList,
  subjectList,
  supplierCheck,
  supplierDetail, userDetail
} from '@/api/gasManage3_0/gasManage'
export default {
  name: "addPage",
  props:{
    pageData2: {},
  },
  data() {
    return {
      pageType:1,
      uploadImgUrl: window.location.href.split('://')[0]+'://' + process.env.VUE_APP_BASE_API + "/base/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      loading:false,
      form:{

      },
      dateRange:[],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize:20,
      },
      // 供应商审核参数
      queryParamsCheck: {
        auditType: 1,//审核类型 (1:供应商，2:人员，3:车辆)
        syntheticalId:'',
        status:1,//1通过2驳回
        auditContent:'',//	审核内容
      },
      // 供应商审核列表参数
      queryParamsCheckList: {
        auditType: 1,//审核类型 (1:供应商，2:人员，3:车辆)
        syntheticalId:'',
      },
      total:0,
      tableData:[{
        num:0,
      }],
      dialogVisible:false,
      type:null,//1供应商2车辆3人员
    };
  },
  created() {

  },
  methods: {
    handleClick(index,row,doType){
      let _this=this;
      if(doType=='reject'){//驳回
        _this.queryParamsCheck.status=2;
        if(_this.queryParamsCheck.auditContent){
          _this.checkFun();
        }else{
          this.$message({
            type: 'error',
            message:'请输入审核说明!',
            duration:2000,
          });
        }

      }else if(doType=='pass'){//通过
        _this.queryParamsCheck.status=1;
        _this.checkFun();
      }
    },
    /* 供应商详情 */
    getSupplierInfo(id){
      let _this=this;
      supplierDetail(id).then( response => {
        let res=response.data;
        if(response.code==200){
          _this.form=res;
          let arr=[];
          _this.form.qpSupplierCredentialsVos.forEach(function(item,idnex) {
              if(item.naturalUrl && item.startTime && item.endTime){
                arr.push(item)
              }
          })
          _this.form.qpSupplierCredentialsVos=arr
        }
      });
    },
    /* 运输车辆详情 */
    getCarInfo(id){
      let _this=this;
      carDetail(id).then( response => {
        let res=response.data;
        if(response.code==200){
          _this.form=res;
          let arr=[];
          _this.form.carCredentialsVos.forEach(function(item,idnex) {
            if(item.naturalUrl && item.startTime && item.endTime){
              arr.push(item)
            }
          })
          _this.form.carCredentialsVos=arr
        }
      });
    },
    /* 运输人员详情 */
    getUserInfo(id){
      let _this=this;
      userDetail(id).then( response => {
        let res=response.data;
        if(response.code==200){
          _this.form=res;
          let arr=[];
          _this.form.userCredentialsVos.forEach(function(item,idnex) {
            if(item.naturalUrl && item.startTime && item.endTime){
              arr.push(item)
            }
          })
          _this.form.userCredentialsVos=arr
        }
      });
    },
    //审核记录列表
    checkRecordList(){
      let _this=this;
      CheckRecordList(this.queryParamsCheckList).then( response => {
        let res=response.rows;
        _this.tableData=res;
      });
    },
    //审核按钮
    checkFun(){
      let _this=this;
      supplierCheck(this.queryParamsCheck).then( response => {
        if(response.code==200){
          this.$message({
            type: 'success',
            message:response.msg,
            duration:2000,
            onClose:function(){
              _this.backPage();
              _this.loading = false;
            }
          });
        }
      });
    },
    //返回
    backPage(){
      this.$parent.handleClick('','','back');
      this.$parent.getList();
      this.$parent.getList2();
      this.$parent.getList3();
    },
    getList(){

    },

  },
  mounted() {
    this.queryParamsCheck.syntheticalId=this.pageData2.id;
    this.queryParamsCheckList.syntheticalId=this.pageData2.id;


    this.type=this.pageData2.type
    if(this.pageData2.type==1){//供应商详情
      this.queryParamsCheck.auditType=1;
      this.queryParamsCheckList.auditType=1;
      this.getSupplierInfo(this.pageData2.id);

    }else if(this.pageData2.type==2){//运输车辆详情
      this.queryParamsCheck.auditType=3;
      this.queryParamsCheckList.auditType=3;
      this.getCarInfo(this.pageData2.id);
    }else if(this.pageData2.type==3){//运输人员详情
      this.queryParamsCheck.auditType=2;
      this.queryParamsCheckList.auditType=2;
      this.getUserInfo(this.pageData2.id);
    }


    this.checkRecordList()
  }

};
</script>

<style scoped lang="scss">
.addPage {
  flex:1;
  display: flex!important;
  flex-direction: column;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  border-radius:10px;
  /*顶部*/
  .addPage_title{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E0E0E0;
    padding-top:20px;
    p:nth-child(1){
      line-height:60px;
      color: #0045AF;
      font-size:18px;
      margin:0 12px 0 20px;
    }
    p:nth-child(2){
      font-size: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #999999;
      flex: 1;
    }
    p:nth-child(3){
      margin-right:20px;
    }
  }

  .addPage_b{
    flex: 1;
    display: flex!important;
    flex-direction: column;
    /*申请三*/
    .apply_tree{
      width: 900px;
      margin: 0 auto;
      .apply_tree_t{
        display: flex;
        justify-content: center;
        margin-top: 50px;
        >img{
          width: 16px;
          height: 16px;
          margin-right: 10px;
        }
        >i{
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FA8801;
          line-height: 16px;
          font-style: normal;
        }
      }
      .apply_tree_m{
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 50px;
        >li{
          display: flex;
          justify-content: flex-start;
          >img{
            width: 102px;
            height: 122px;
            margin-right: 28px;
          }
          .apply_tree_m_r{
            >i{
              display: block;
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              line-height: 16px;
              font-style: normal;
            }
            >p{
              font-size: 16px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 16px;
              margin-top: 20px;
            }
          }
        }
        >i{
          width: 2px;
          height: 100px;
          background: #E0E0E0;
          margin: 0 66px;
        }
      }
      .apply_tree_b{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 50px;
        >li{
          list-style-type: none;
          margin-left: 64px;
          .apply_tree_b_t{
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            line-height: 16px;
            margin-bottom: 20px;
          }
          .apply_tree_b_m{
            width: 230px;
            height: 150px;
            border: 1px solid #E0E0E0;
            >img{
              width: 190px;
              height: 138px;
              margin: 6px 20px;
            }
          }
          .apply_tree_b_b{
            font-size: 12px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999;
            line-height: 24px;
            margin-top: 24px;
            >i{
              font-style: normal;
            }
          }
        }
      }
      .apply_tree_m1{
        display: flex;
        justify-content: flex-start;
        margin-left: 70px;
        >li{
          list-style-type: none;
          margin-right: 20px;
          >i{
            font-style: normal;
            display: inline-block;
          }
          >i:nth-of-type(1){
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            line-height: 70px;
          }
          >i:nth-of-type(2){
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #333333;
            line-height: 70px;
          }
        }
      }
      .apply_tree_b2{
        width: 800px;
        margin: 46px 0 38px 70px;
      }
      .sub_btn{
        display: flex;
        justify-content: center;
        margin: 30px 0;
      }
    }
  }
  /*审核记录*/
  .record{
    margin: 20px;
    .record_title{
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #333333;
      line-height: 16px;
      margin-bottom: 20px;
    }
  }

}
</style>