wangluohuoyun-htqd/src/views/enterpriseManagement/enterpriseAudit.vue

// 企业信息
<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-row>
          <el-col :span="14" style="height: 45px;">
            <!-- <el-button type="primary">添加</el-button> -->
          </el-col>
          <el-col :span="10">
            <div class="screen">
              <el-input class='find' placeholder="可按法人姓名、账号、企业名称查找" @keyup.enter.native="find" v-model="searchkeyWord"
                clearable @change="find"></el-input>
              <el-button class="search" @click="find"><img width="16" height="16" style="margin-left: -8px"
                  src="../../../public/img/sousuo.png" /></el-button><span class="count_css">共{{ deptBudgetTotal
                  }}条</span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <div class="search_btn">
              <div :class="search == '' ? 'search' : 'searchNo'" class="search_item search_block"
                @click="searchBtn('')">
                全部
              </div>
              <div :class="search == 1 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(1)">
                待审核
              </div>
              <div :class="search == 2 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(2)">
                已通过
              </div>
              <div :class="search == 3 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(3)">
                已驳回
              </div>
              <div :class="search == 4 ? 'search' : 'searchNo'" class="search_item" @click="searchBtn(4)">
                已过期
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border
        highlight-current-row>
        <el-table-column type="index" width="60"  label="序号" align="center">
            <template scope="scope">
                <span>{{scope.$index + 1}}</span>
                <!-- <span v-else>{{scope.$index}}</span> -->
            </template>
        </el-table-column>
        <el-table-column prop="companyName" label="企业名称" min-width="150"></el-table-column>
        <el-table-column prop="unifiedSocialCreditCode" label="统一社会信用代码" min-width="160"></el-table-column>
        <el-table-column prop="legalPersonName" label="法定代表人" min-width="91"></el-table-column>
        <el-table-column prop="accountNumber" label="账号" min-width="107"></el-table-column>
        <el-table-column prop="accountBalance" label="可用余额（元）" min-width="133"></el-table-column>
        <el-table-column prop="accumulatedFreight" label="累计支付运费（元）" min-width="133"></el-table-column>
        
        <el-table-column prop="frozenAmount" label="冻结金额（元）" min-width="133"></el-table-column>
        <el-table-column label="账户" min-width="153">
          <template slot-scope="scope">
            <el-popover placement="right" width="400" trigger="click" @show="getBillList(scope.row.id)">
              <div v-if='billList.length>0' class="bill-content">
                <div class="bill-item" v-for="item in billList" :Key="item.id">
                  <div class="row1">
                    <div class="left">
                      {{ item.types }}
                    </div>
                    <div class="right">{{ item.amountMoney }}元</div>
                  </div>
                  <div class="row1">
                    <div class="left">
                      <img v-if='item.rechargeUrl' style='width:20px;height:20px;' @click="enlarge(item.rechargeUrl)" :src="item.rechargeUrl" alt="">
                      <div >{{item.orderNo}}</div>
                    </div>
                    <div class="right">{{ item.createDate }}</div>
                  </div>
                  <!-- <div class="row2">
                    <div class="left">
                      支付预付款
                    </div>
                    <div class="right">-1000</div>
                  </div> -->
                </div>
              </div>
              <div v-else>暂无数据</div>
              <!-- <el-button slot="reference">账单</el-button> -->
              <span slot="reference" class="btn_css" style="margin-right:20px">账单</span>
            </el-popover>
            <!-- <el-button style='margin-left:10px;' @click='seemessage(scope.row)'>信息</el-button> -->
            <span class="btn_css" @click='seemessage(scope.row)'>信息</span>

          </template>
        </el-table-column>
        <!-- 	<el-table-column prop="registeredPaidAmount" label="实缴金额（万元）" min-width="133"></el-table-column>
				<el-table-column prop="updateDate" label="认证日期"></el-table-column> -->
        <el-table-column prop="siteLeaseDate" label="厂地租赁截止日期" min-width="132"></el-table-column>
        <el-table-column prop="businessTermDate" label="营业期限"></el-table-column>
        <el-table-column prop="backStageStatus" label="状态"></el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <el-link target="_blank" @click="seeInfo(scope.row)" type="primary" :underline="false"
              :disabled="scope.row.status != '审核中'">通过</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" @click="seeInfo(scope.row)" type="primary" :underline="false"
              :disabled="scope.row.status != '审核中'">驳回</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" @click="seeInfo(scope.row)" type="primary" :underline="false">查看</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" @click="recharge(scope.row)" type="primary" :underline="false"
              :disabled="scope.row.passOnce == '0'">充值</el-link>
            <!-- <span class="btn_css" @click="seeInfo(scope.row)"></span> -->
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      style="text-align: center; margin-top: 10px" :page-size="deptCircularPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
    </el-pagination>
    <!-- <el-dialog title="驳回认证" :visible.sync="rejectInfo" width="400px" :before-close="rejectClose">
			<div>
				<div><span class="sign">*</span>选择驳回原因</div>
				<div class="form_css">
					<el-form ref="form" :model="form" label-width="80px">
						<el-checkbox-group v-model="form.checkList">
							<el-checkbox label="证件照片不清晰"></el-checkbox>
							<el-checkbox label="证件照片上传错误"></el-checkbox>
							<el-checkbox label="身份信息填写错误"></el-checkbox>
							<el-checkbox label="证件信息填写错误"></el-checkbox>
							<el-checkbox label="其他"></el-checkbox>
						</el-checkbox-group>
						<div style="margin: 20px 0;">驳回原因描述（选填）</div>
						<el-input type="textarea" :rows="3" resize="none" placeholder="输入驳回原因，5-50个字" maxlength="50"
							v-model="form.textarea"></el-input>
						<div class="form_btn">
							<el-button @click="rejectClose">取消</el-button>
							<el-button @click="submit" type="primary">确定</el-button>
						</div>
					</el-form>
				</div>
			</div>
		</el-dialog> -->
    <el-dialog :close-on-click-modal="false" title="账户信息" :visible.sync="messageshow" width="500px"
      :before-close="payClose">
      <div class="pay">
        <div class="pay_css">
          <div class="title_css">对公账户：</div>
          <div class="name_css">{{ message.corporateAccount }}</div>
        </div>
        <div class="pay_css">
          <div class="title_css">账号：</div>
          <div class="id_css">{{ message.bankCard }}</div>
        </div>
        <div class="pay_css">
          <div class="title_css">开户行：</div>
          <div class="pay_name">{{ message.bankDeposit }}</div>
        </div>
        <div class="pay_css">
          <div class="title_css">开户支行：</div>
          <div class="pay_name">{{ message.bankDepositBranch }}</div>
        </div>
      </div>
      <!-- <img
          :src="paySee.payeeAddressUrl"
          class="user_item"
          @click="enlarge(paySee.payeeAddressUrl)"
        /> -->
    </el-dialog>
    <el-dialog :close-on-click-modal="false" title="充值" :visible.sync="rechargeShow" width="500px"
      :before-close="rechargeClose">
      <div class="recharge">
        <div class="recharge_css">
          <div class="title_css">企业名称 :</div>
          <div class="recharge_css">{{ rechargeData.companyName }}</div>
        </div>
        <div class="pay_css">
          <div class="title_css">金额(元) :</div>
          <div class="recharge_css" style="margin: -24px 32px 44px 69px;">
            <el-input type="number" @mousewheel.native.prevent v-model="rechargeData.amountMoney" placeholder="输入充值金额"
              maxlength="100" size="small">
            </el-input>
          </div>
        </div>
        <div class="pay_css">
          <div class="title_css">流水号:</div>
          <div class="recharge_css" style="margin: -24px 32px 44px 69px;">
            <el-input type="number" @mousewheel.native.prevent v-model="rechargeData.serialNumber" placeholder="输入流水号"
              maxlength="100" size="small">
            </el-input>
          </div>
        </div>
        <div class="pay_css">
          <div class="title_css">银行卡号:</div>
          <div class="recharge_css" style="margin: -24px 32px 44px 69px;">
            <el-input disabled type="number" @mousewheel.native.prevent v-model="rechargeData.bankCard" placeholder="输入银行卡号"
              maxlength="100" size="small">
            </el-input>
          </div>
        </div>
        <div class="recharge_css">
          <div class="title_css">上传截图 :</div>
          <div class="upLoad">
            <el-upload class="avatar-uploader" action="https://api.changyuntong56.com/appendix/api/upload" :show-file-list="false"
              :on-success="handleAvatarSuccess">
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
        <div style="text-align: center; margin-top: 20px">
          <el-button @click="rechargeSubmit()">提交</el-button>
        </div>
      </div>
    </el-dialog>
    <el-drawer title="企业详情" :visible.sync="rightSee">
      <div class="right_css">
        <div class="right_title">企业名称</div>
        <div class="right_item">{{ infoData.companyName }}</div>
        <div class="right_title">法定代表人姓名</div>
        <div class="right_item">{{ infoData.legalPersonName }}</div>
        <div class="right_title">联系方式</div>
        <div class="right_item">{{ infoData.accountNumber }}</div>
        <div class="right_title">通讯地址</div>
        <div class="right_item">{{ infoData.mailingAddress }}</div>
        <div class="right_title">上传营业执照</div>
        <div class="right_item">
          <img :src="infoData.businessLicenseAddressUrl" class="right_img"
            @click="enlarge(infoData.businessLicenseAddressUrl)">
        </div>
        <div class="right_title">营业期限截止日期</div>
        <div class="right_item">{{ infoData.businessTermDate }}</div>
        <div class="right_title">统一社会信用代码</div>
        <div class="right_item">{{ infoData.unifiedSocialCreditCode }}</div>
        <div class="right_title">身份证正反面</div>
        <div class="right_item">
          <img :src="infoData.cardAddressUrl" class="right_img" @click="enlarge(infoData.cardAddressUrl)">
          <img :src="infoData.cardBackAddressUrl" class="right_img" @click="enlarge(infoData.cardBackAddressUrl)">
        </div>
        <div class="right_title">身份证号</div>
        <div class="right_item">{{ infoData.cardNumber }}</div>
        <div class="right_title">身份证有效期</div>
        <div class="right_item">{{ infoData.cardValidityDate }}</div>

        <div class="right_title" v-if="infoData.advanceFreightService == 1">{{ infoData.landOwnership == 0 ?
            "房产证" : "租赁合同"
        }}</div>
        <div class="right_item" v-for="(item, index) in infoData.imgs" :key="index">
          <img :src="item" class="right_img" @click="enlarge(item)">
        </div>
        <div class="right_title">视频验证</div>
        <div class="right_item">
          <!-- <img src="../../../public/img/yonghu.jpg" class="right_img"> -->
          <!-- <video :src="infoData.videoAddressUrl" class="right_img">
             <source src="movie.mp4" type="video/mp4">
             <source src="movie.ogg" type="video/ogg">
          </video> -->
          <video ref="video" id="video" :src="infoData.videoAddressUrl" autoplay="false" controls="true"
            class="right_img">
          </video>
        </div>
        <div class="right_item">{{ infoData.advanceFreightService == 1 ? "申请开通平台垫付运费业务" : "未申请开通平台垫付运费业务" }}</div>
        <div class="right_btn">
          <el-button @click="submit(1)" v-if="infoData.status == '审核中'">通过</el-button>
          <el-button @click="submit(2)" v-if="infoData.status == '审核中'">驳回</el-button>
          <el-button @click="rightSee = false">关闭</el-button>
        </div>
      </div>
    </el-drawer>
    <el-image-viewer v-if="imgsVisible" :on-close="closeImgViewer" :url-list="srcList" style="z-index:9999" />

  </div>
</template>
<script>
import {
  getList,
  toallowExamine,
  getBillList,
  theRecharge
} from '@/api/enterpriseManagement'
  import {
    uploadPath
  } from '@/api/officialWebsiteManagement'
export default {
  components: {
    'el-image-viewer': () =>
      import('element-ui/packages/image/src/image-viewer'),
  },
  data() {
    return {
      uploadPath,
      billList: [],
      tableData: [],
      //分页
      searchkeyWord: '',
      currentPage: 1,
      pageSize: 10,
      deptBudgetTotal: 0,
      deptCircularPage: {},
      message: {},
      search: '5',
      addressUrl: [],
      disabled: false,
      rejectInfo: false,
      checkList: [],
      form: {
        checkList: [],
        textarea: '',
      },
      rightSee: false,
      infoData: {},
      //图片预览
      srcList: [],
      messageshow: false,
      rechargeShow: false,
      imageUrl: '',
      rechargeData: {bankCard:''},
      imgsVisible: false,
    };
  },
  mounted() {
    this.loading = true
    let _obj = {}
    let start_obj = {}
    start_obj.currentPage = this.currentPage
    start_obj.pageSize = this.pageSize
    start_obj.searchKeyWord = this.searchkeyWord
    start_obj.searchType = 1
    console.log(start_obj)
    getList(start_obj).then(response => {
      if (response.data.records.length > 0) {
        this.search = 1
        _obj.currentPage = this.currentPage
        _obj.pageSize = this.pageSize
        _obj.searchKeyWord = this.searchkeyWord
        _obj.searchType = this.search
        getList(_obj).then(response => {
          this.tableData = response.data.records
          this.deptBudgetTotal = response.data.total
          this.listLoading = false
        })
          .catch(() => {
            this.loading = false
          })
      } else {
        this.search = ''
        _obj.currentPage = this.currentPage
        _obj.pageSize = this.pageSize
        _obj.searchKeyWord = this.searchkeyWord
        _obj.searchType = this.search
        getList(_obj).then(response => {
          this.tableData = response.data.records
          this.deptBudgetTotal = response.data.total
          this.listLoading = false
        })
          .catch(() => {
            this.loading = false
          })
      }

    })
      .catch(() => {
        this.loading = false
      })
  },
  methods: {
    closeImgViewer() {
      this.srcList = []
      this.imgsVisible = false;
    },
    enlarge(url) {
      this.imgsVisible = true;
      this.srcList.push(url)
    },
    getBillList(id) {
      console.log('查看账单')
      let _obj = {
        companyId: id,
        pageSize: 999,
        currentPage: 1
      }
      getBillList(_obj).then(response => {
        this.billList = response.data.records
      })
        .catch(() => {
          this.loading = false
        })
    },
    seemessage(item) {
      this.message = item
      this.messageshow = true
    },
    payClose() {
      this.messageshow = false;
    },
    getList() {
      this.loading = true
      let _obj = {}

      _obj.currentPage = this.currentPage
      _obj.pageSize = this.pageSize
      _obj.searchKeyWord = this.searchkeyWord
      _obj.searchType = this.search
      getList(_obj).then(response => {
        this.tableData = response.data.records
        this.deptBudgetTotal = response.data.total
        this.listLoading = false
      })
        .catch(() => {
          this.loading = false
        })
    },
    submit(num) {
      var _allowObj = {}
      _allowObj.id = this.infoData.id
      let allowTitle = ''
      if (num == 1) {
        _allowObj.flag = 1
        allowTitle = '通过'
      } else if (num == 2) {
        _allowObj.flag = 2
        allowTitle = '驳回'
      }
      this.$confirm('确定' + allowTitle + '企业审核？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.listLoading = true

          toallowExamine(_allowObj).then(response => {
            this.rightSee = false
            this.infoData = {}
            this.$notify({
              title: '成功',
              message: allowTitle + '成功！',
              type: 'success'
            });
            this.getList()
            this.listLoading = false
          })
            .catch(() => {
              this.loading = false
            })
        })
    },
    seeInfo(row) {
      this.infoData = row
      this.infoData.imgs = []
      if (this.infoData.propertyAddressUrl) {
        this.infoData.imgs = this.infoData.propertyAddressUrl.split(',')
      }
      this.rightSee = true
    },
    rechargeClose() {
      this.rechargeShow = false;
    },
    recharge(item) {
      // this.rechargeData = item
      this.rechargeData.bankCard=item.bankCard
      this.rechargeData.bankDeposit=item.bankDeposit
      this.rechargeData.bankDepositBranch=item.bankDepositBranch
      this.rechargeData.companyName = item.companyName
      this.rechargeData.rechargeId = item.id;
      this.rechargeData.flag = 2;
      this.rechargeData.companyId = item.id;
      this.rechargeShow = true
    },
    //上传付款截图
    handleAvatarSuccess(e) {
      // console.log(e)
      this.imageUrl = e.data.url
    },
    rechargeSubmit() {
      if (!this.rechargeData.amountMoney) {
        this.$message({
          message: '充值金额不能为空',
          type: 'warning',
        })
        return
      }
      if (!this.imageUrl) {
        this.$message({
          message: '请上传截图 ',
          type: 'warning',
        })
        return
      }
      this.rechargeData.rechargeUrl = this.imageUrl
      this.listLoading = true;
      this.$confirm('确定提交充值信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          theRecharge(this.rechargeData)
            .then((response) => {
              this.$notify({
                title: '成功',
                message: '充值成功！',
                type: 'success',
              });
              this.rechargeData = {};
              this.rechargeShow = false;
              this.getList();
              this.listLoading = false;
            })
        })
        .catch(() => {
          this.loading = false;
        });
    },
    searchBtn(num) {
      this.search = num;
      this.getList();
    },
    find() {
      this.currentPage = 1
      this.getList();
    },
    onChange() {
      this.$refs.upload
        .handleSaveBill()
        .then(async (response) => {
          this.formData.addressUrl = response;
        })
        .catch((res) => {
          EventBus.$emit('error', (JSON.parse(res) || {}).message);
          this.$refs.upload.clearFiles();
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      console.log(`当前页: ${val}`);
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.center {
  padding: 10px 20px;
  background: #f5f6f7;
  min-height: calc(100vh - 50px);

  .top_css {
    padding: 10px;

    .search_btn {
      height: 80px;
      background: linear-gradient(#fafbfb, #ffffff);
      display: flex;
      margin-top: 20px;

      .search_block {
        margin-left: 20px;
      }

      .search_item {
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        line-height: 40px;
        width: 112px;
        height: 40px;
        background: #f7f8f9;
        cursor: pointer;
        margin-top: 30px;
      }

      .searchNo {
        color: #323233;
      }

      .search {
        color: #2f53eb;
        background: #ffffff;
      }
    }
  }

  .center_css {
    background: #ffffff;
    border-radius: 1px;
    margin-top: 10px;
    padding-bottom: 10px;
  }

  .screen {
    display: flex;

    .search {
      width: 40px;
      height: 40px;
      background: #2f53eb;
      border-radius: 0px 2px 2px 0px;
      border: 1px solid #DCDFE6;
      margin-left: -1px;
      // border-left: 1px solid #2f53eb;
    }

    .count_css {
      width: 80px;
      text-align: center;
      line-height: 40px;
      color: #666666;
    }
  }

  .el-button {
    padding: 10px 20px !important;
  }

  .center_css {

    ::v-deep .el-table th,
    ::v-deep .el-table td {
      text-align: center;
    }

    .fujian {
      font-size: 24px;
      color: #409eff;
    }

    .warning {
      font-size: 14px;
      color: #ed1d1d;
    }
  }
}

.car_css {
  width: 50%;
  display: inline-block;
  text-align: center;
  margin-top: 20px;
}

.car_item {
  width: 100px;
  height: 100px;
}

.user {
  margin-bottom: 20px;

  .user_id {
    display: flex;
    height: 30px;
  }

  .name_css,
  .id_css {
    width: 50%;
  }

  .name_css {
    text-align: right;
  }

  .user_item {
    width: 450px;
    height: 300px;
  }
}

::v-deep .el-table--border .el-table__header th {
  background: #f7f8f9;
}

.btn_css {
  color: #409eff;
  cursor: pointer;
}

.sign {
  font-size: 14px;
  color: red;
}

.form_css {
  width: 100%;
  margin: 20px auto 20px;

  ::v-deep .el-checkbox {
    width: 40%;
    height: 30px;
  }

  ::v-deep .el-dialog__body {
    padding: 10px 20px;
  }

  ::v-deep .el-dialog__title {
    font-size: 16px;
  }

  ::v-deep .el-textarea__inner {
    background: #F0F1F2;
  }

  .form_btn {
    text-align: right;
    margin-top: 10px;
  }
}

//发送信息
.Info_css {
  .Info_title {
    color: #323233;
    font-size: 16px;
  }

  .Info_item {
    margin: 20px 0;
  }

  .Info_btn {
    text-align: right;
    margin-top: 10px;
  }
}

.right_css {
  padding: 0 20px;

  .right_title {
    color: #9D9D9D;
    font-size: 14px;
  }

  .right_item {
    color: #0D0D0D;
    font-size: 14px;
    margin-bottom: 20px;
  }

  .right_btn {
    text-align: right;
    margin: 10px 0;
  }

  .right_img {
    width: 200px;
    height: 120px;
    margin-top: 10px;
  }
}

::v-deep .el-drawer {
  overflow: auto;
}

.bill-content {
  .bill-item{
  border-bottom:1px solid #ccc;
}
.bill-item:last-child{
  border-bottom:1px solid transparent;
}
.row1{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding:5px;
}
}

.pay {
  .pay_css {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
  }
}

.recharge {
  .recharge_css {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
  }

  .recharge_css {
    width: 80%;
  }
}

.upLoad {
  width: 40%;
  margin: 0 auto;
  // border: 1px solid #8890b1;
  // border-radius: 3px;
}

.avatar-uploader {
  position: relative;
  width: 178px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid #8890b1;
  border-radius: 5px;
}

.avatar {
  width: 178px;
  height: 178px;
  border: 1px solid #8890b1;
  border-radius: 5px;
  display: block;
}

.find::v-deep input.el-input__inner {
  border-radius: 0;
}
</style>