admin_operation/src/views/channel/account.vue

<template>
  <div class="app-container">
      <div class="filter-container" style="margin: 10px 0 10px 0">
        <span class="textSpan">供应商名称:</span>
        <el-select v-model="body.supplierName" filterable  clearable  placeholder="请选择">
        <el-option
          v-for="item in userList"
          :key="item.relationId"
          :label="item.supplierName"
          :value="item.supplierName">   
        </el-option>
      </el-select>
        <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
      </div>
      <!-- 列表 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">

      <el-table-column label="序号" width="60" align="center">
          <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
          </template>
      </el-table-column>
      <el-table-column label="供应商名称" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope" @click="handleLook(scope.row)">
           <!-- <el-button type="text" @click="handleLook(scope.row)">{{ scope.row.supplierName }}</el-button> -->
           <span>{{ scope.row.supplierName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="可用余额" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.balance }}</span>
        </template>
      </el-table-column>

      <el-table-column label="累计充值" width="110" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.rechargeAmount  }}</span>
        </template>
      </el-table-column>

      <el-table-column label="累计消费" width="110" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.consumeAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="170" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
           <i class="el-icon-time"></i>
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否有效" width="90" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
            <el-tag v-if="scope.row.isValid==0" type="danger" size="warning">无效</el-tag>
            <el-tag v-if="scope.row.isValid==1" size="small">有效</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="限速" width="100" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.ratio }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" min-width="100" align="center">
        <template slot-scope="scope">
          <el-button size="small" class="classitem" type="primary" plain icon="el-icon-plus" @click="handleritemAdd(scope.row)">明细</el-button>        
        </template>
      </el-table-column>

    </el-table>
     <!-- 明细 -->
      <el-dialog title="供应商明细" :visible.sync="detailVisible" fullscreen center>
        <el-form ref="detail" :model="detail" :rules="rules2" label-width="80px" size="small" label-position="right">
          <el-card  shadow="never" >
            <div slot="header" class="clearfix">
              <span class="topClass">账户信息</span>
            </div>
            <div>
              <div class="flex_supplier">
                  <div class="flex_width">
                    <span class="flex_Name">供应商名称:</span>
                    <span class="flex_Number">{{detail.supplierName}}</span>
                  </div>
                  <div>
                    <span class="flex_Name">可用余额:</span>
                    <span class="flex_Number">{{detail.balance}}</span>
                  </div>
              </div>
              <div class="flex_supplier">
                  <div class="flex_width">
                    <span class="flex_Name">　累计充值:</span>
                    <span class="flex_Number">{{detail.rechargeAmount }}</span>
                  </div>
                  <div>
                    <span class="flex_Name">累计消费:</span>
                    <span class="flex_Number">{{detail.consumeAmount}}</span>
                  </div>
              </div>
            </div> 
          </el-card> 
             <el-card  shadow="never" >
            <div slot="header" class="clearfix">
              <span class="topClass">账户交易记录</span>
            </div>
            <div>
              <div class="AddButton">
              <el-button type="primary" plain icon="el-icon-plus" @click="handlerAdd(detail)">加款</el-button>
              <!-- <el-button type="danger" plain icon="el-icon-bank-card" @click="handlerAdd">信用额度调整</el-button> -->
              </div>
              <div>
                   <el-table  :data="detailTableData" stripe style="width: 100%">
                      <el-table-column label="序号" width="60" align="center">
                              <template slot-scope="scope">
                              <span>{{ scope.$index + 1 }}</span>
                              </template>
                          </el-table-column>
                        <el-table-column label="供应商" width="120" align="center" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <el-button type="text" @click="hookLook(scope.row)">{{ scope.row.supplierName }}</el-button>
                              </template>
                            </el-table-column>
                        <el-table-column label="加款金额" width="110" align="center" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <span>{{ scope.row.amount / 10000 }}</span>
                              </template>
                            </el-table-column>
                            <el-table-column label="出款账户" width="110"  align="center" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <span>{{ scope.row.paymentAccount }}</span>
                              </template>
                            </el-table-column>
                              <el-table-column label="开户行"  width="170" align="center" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <span>{{ scope.row.bankDeposit }}</span>
                              </template>
                            </el-table-column>
                            <el-table-column label="全称"  align="center" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <span>{{ scope.row.account }}</span>
                              </template>
                            </el-table-column>
                            <el-table-column label="银行卡" width="190"  align="center" show-overflow-tooltip>
                              <template slot-scope="scope"> 
                                <span>{{ scope.row.cardNo }}</span>
                              </template>
                            </el-table-column>
                        
                          
                            <el-table-column label="加款人"  align="center" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <span>{{ scope.row.payer }}</span>
                              </template>
                            </el-table-column>
                            <el-table-column label="凭证" width="120"  align="center">
                              <template slot-scope="scope">
                                <el-image 
                                  style="width: 100px; height: 80px"
                                  :src="scope.row.certificate" 
                                  :preview-src-list="new Array(scope.row.certificate)">
                                </el-image>
                              </template>
                            </el-table-column>
                        
                            
                            <el-table-column label="加款时间" width="190" align="center" show-overflow-tooltip>
                              <template slot-scope="scope">
                                <span>{{ scope.row.time }}</span>
                              </template>
                            </el-table-column>
                          

                            <el-table-column label="操作" fixed="right" width="200" align="center">
                              <template slot-scope="scope">
                                <!-- <el-button size="small" type="primary" plain icon="el-icon-plus" @click="handlerAdd(scope.row)">加款</el-button> -->
                                <el-button size="small" icon="el-icon-edit" type="warning" plain @click="handleEdit(scope.row)">修改</el-button>
                                <el-button size="small" icon="el-icon-edit" type="danger" v-if="scope.row.undo == 0" plain @click="handleRevocation(scope.row)">撤销</el-button>
                              </template>
                            </el-table-column>
                    </el-table>
                    <div class="pagination">
                      <el-pagination
                        current-page.sync="info.current"
                        :current-page="info.current"
                        :page-sizes="[10, 20, 30, 50]"
                        :page-size="info.size"
                        layout="total, sizes, prev, pager, next, jumper"
                        background
                        :total="detailTotal"
                        @size-change="detailHandleSizeChange"
                        @current-change="detailHandleCurrentChange"
                      />
                    </div>
              </div>
            </div> 
          </el-card> 
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="detailVisible = false">取 消</el-button>
          <el-button type="primary" @click="onVisible">确 定</el-button>
        </div>
      </el-dialog>

      <!-- <el-table v-loading="loading" :data="tableData" border style="width: 100%">
         <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
          <el-table-column label="供应商" width="120" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <el-button type="text" @click="hookLook(scope.row)">{{ scope.row.supplierName }}</el-button>
                </template>
              </el-table-column>
           <el-table-column label="加款金额" width="110" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.amount / 10000 }}</span>
                </template>
              </el-table-column>
              <el-table-column label="可用余额" width="100" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.balance }}</span>
                </template>
              </el-table-column>

              <el-table-column label="累计充值" width="110" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.rechargeAmount  }}</span>
                </template>
              </el-table-column>

              <el-table-column label="累计消费" width="110" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.consumeAmount }}</span>
                </template>
              </el-table-column>
                <el-table-column label="出款账户" width="110"  align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.paymentAccount }}</span>
                </template>
              </el-table-column>
                 <el-table-column label="开户行"  width="170" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.bankDeposit }}</span>
                </template>
              </el-table-column>
              <el-table-column label="全称"  align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.account }}</span>
                </template>
              </el-table-column>
              <el-table-column label="银行卡" width="190"  align="center" show-overflow-tooltip>
                <template slot-scope="scope"> 
                  <span>{{ scope.row.cardNo }}</span>
                </template>
              </el-table-column>
           
            
              <el-table-column label="加款人"  align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.payer }}</span>
                </template>
              </el-table-column>
              <el-table-column label="凭证" width="120"  align="center">
                <template slot-scope="scope">
                  <el-image 
                    style="width: 100px; height: 80px"
                    :src="scope.row.certificate" 
                    :preview-src-list="new Array(scope.row.certificate)">
                  </el-image>
                </template>
              </el-table-column>
           
              
              <el-table-column label="加款时间" width="190" align="center" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>{{ scope.row.time }}</span>
                </template>
              </el-table-column>
            

              <el-table-column label="操作" fixed="right" width="300" align="center">
                <template slot-scope="scope">
                  <el-button size="small" type="primary" plain icon="el-icon-plus" @click="handlerAdd(scope.row)">加款</el-button>
                  <el-button size="small" icon="el-icon-edit" type="warning" plain @click="handleEdit(scope.row)">修改</el-button>
                  <el-button size="small" icon="el-icon-edit" type="danger" v-if="scope.row.undo == 0" plain @click="handleRevocation(scope.row)">撤销</el-button>
                </template>
              </el-table-column>
      </el-table> -->
        <!-- 新增加款 -->
      <el-dialog :title="operation?'新增加款':'编辑加款'" :visible.sync="dialogFormVisible" width="55%" center>
        <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
              <el-form-item label="供应商" prop="relationId" :label-width="formLabelWidth"  >
                <el-select v-model="dataForm.relationId" :disabled="true" filterable  @change="onclick(dataForm.relationId)" clearable  placeholder="请选择客户" style="width:100%">
                  <el-option
                    v-for="item in userList"
                    :key="item.relationId"
                    :label="item.supplierName"
                    :value="item.relationId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="银行卡" prop="cardNo"  :label-width="formLabelWidth"  >
                 <el-select v-model="dataForm.cardNo" filterable :disabled="!operation" clearable  placeholder="请选择银行卡" value-key="id" @change="changeSel" style="width:100%">
                  <el-option
                    v-for="item in card"
                    :key="item.id"
                    :label="item.cardNo"
                    :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
                <!-- <el-form-item label="开户行" prop="bankDeposit" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.bankDeposit" placeholder="请输入供应商账户" />
              </el-form-item> -->
                <el-form-item label="加款金额" prop="amount" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.amount" :disabled="!operation" placeholder="请输入加款金额" />
              </el-form-item>
               <el-form-item label="出款账户" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.paymentAccount" :disabled="!operation" placeholder="请输入出款账户" />
              </el-form-item>
                <!-- <el-form-item label="凭证" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.certificate" placeholder="请输入凭证" />
              </el-form-item> -->
              <el-form-item label="凭证" prop="imgUrl" :label-width="formLabelWidth">
                    <el-upload
                ref = "upload"
                action="#"
                list-type="picture-card"       
                :on-change="handleDownload"
                :file-list="fileList"
                :limit="1"
                :auto-upload="false">
                    <i slot="default" class="el-icon-plus"></i>
                    <div slot="file" slot-scope="{file}">
                    <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url" alt=""
                    >
                    <!-- //图片三个按钮事件 -->
                    <span class="el-upload-list__item-actions">
                        <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                        >
                        <i class="el-icon-zoom-in"></i>
                        </span>
                        <span
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                            >
                            <i class="el-icon-delete"></i>
                         </span>
                     
                    </span>
                    </div>
                </el-upload>
                
                <el-dialog :visible.sync="dialogDspaly" :modal="false">
                <img width="100%" :src="dialogImageUrl" >
                </el-dialog>
                </el-form-item> 
               
                <!-- <el-form-item label="备注" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.distinguish" placeholder="请输入备注" />
              </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm" :loading="buttonLoading">确 定</el-button>
        </div>
      </el-dialog>
        <!-- 详情 -->
      <el-dialog title="详情" :visible.sync="dataFormVisible" width="55%" center>
        <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
              <el-form-item label="供应商" prop="cardNo" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.supplierName" disabled></el-input>
              </el-form-item>
              <el-form-item label="全称" prop="account" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.account" placeholder="请输入" disabled/>
              </el-form-item>
              <el-form-item label="银行卡" prop="cardNo" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.cardNo" disabled></el-input>
              </el-form-item>
                <el-form-item label="开户行" prop="bankDeposit" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.bankDeposit" disabled placeholder="请输入供应商账户" />
              </el-form-item>
                <el-form-item label="加款金额" prop="amount" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.amount" disabled placeholder="请输入加款金额" />
              </el-form-item>
               <el-form-item label="出款账户" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.paymentAccount" disabled placeholder="请输入出款账户" />
              </el-form-item>
                <el-form-item label="加款人" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.payer" disabled placeholder="加款人" />
                </el-form-item>
              <el-form-item label="凭证" prop="imgUrl"  :label-width="formLabelWidth">
                  <el-image 
                    style="width: 200px; height: 200px"
                    :src="dataForm.certificate" 
                    :preview-src-list="new Array(dataForm.certificate)">
                  </el-image>
                </el-form-item> 
               
                <!-- <el-form-item label="备注" :label-width="formLabelWidth"  >
                <el-input v-model="dataForm.distinguish" placeholder="请输入备注" />
              </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dataFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dataFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

         <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        current-page.sync="body.current"
        :current-page="body.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>


  </div>
</template>

<script>
import api from '@/api/userList'
import code from '@/api/channel.js'
import { supplierPaymentList,channelList,supplierPaymentAdd,supplierPaymentAnnul,supplierPaymentEdit,bankcardList } from '@/api/channelAdd'
export default {
  data() {
    return {
      loading:false,
      tableData:[],
       body:{
          size:10,
          current:1,
          // relationId:""
      },
       total:0,
      dataForm:{
        distinguish:1,
        type:"customer"
      },
      rules2:{
            relationId: [{ required: true, message: '请输入供应商名称', trigger: 'blur' } ],
            cardNo: [{ required: true, message: '请输入银行卡', trigger: 'blur' } ],
            amount: [{ required: true, message: '请输入加款金额', trigger: 'blur' } ],
      },
      userList:[],
      operation:false,
      dialogFormVisible:false,
      formLabelWidth:"120px",
      dialogImageUrl:"",   //图片地址
      dialogDspaly:false,
      // options1: [],
        // value:[],
        imgurl:"",
        // packet:[],
        // redenvelopesVOS:[],
        fileList:[],
        url:"",
        urlList:[],
        card:[],
        cardNo:"",
        dataFormVisible:false,
        detailVisible:false,
        detail:{},
        detailTableData:[],
        info:{
          size:10,
          current:1,
          relationId:""
        },
        detailTotal:0,
        buttonLoading:false
    }
  },
  created(){
    this.user()
    this.reLoad()
    // this.bankcardURL()
  },
  methods: {
      //选择供应商出发银行卡
    onclick(row){
      this.bankcardURL(row)
       this.dataForm.account = ""
      this.dataForm.bankDeposit = ""
      this.dataForm.cardNo = ""
    },
    //银行卡
    bankcardURL(row){
      let distinguish = {
        distinguish:1,
        relationId:row
        }
        const params = new URLSearchParams()
      params.append('distinguish', 1)
      params.append('relationId', row)
      bankcardList(params).then((res)=>{
        this.card = res.data.data
        console.log(this.card)
      })
    },
    //银行卡下拉选择
    changeSel(row){
      this.dataForm.account = row.account
      this.dataForm.bankDeposit = row.bankDeposit
      this.dataForm.cardNo = row.cardNo
    },
    //名称
    user(){
      // let user = "{customerName}"
      channelList().then((res) => {
        this.loading =false
        let userList = res.data.data
        userList.map((res)=>{
          // let user = {
          //   relationId:res.customerId,
          //   customerName:res.customerName
          // }
          res.relationId = res.supplierId.toString()
          // res.customerName = res.supplierName
          delete res.supplierId
          // delete res.supplierName
          return res
        })
        this.userList = userList
      })
    },
    //表格数据
    reLoad(){
      this.loading = true
       code.Search(this.body).then((res) => {
        this.loading =false
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
      // supplierPaymentList(this.body).then((res) => {
      //   this.loading =false
      //   this.tableData = res.data.data.records
      //   this.total = res.data.data.total
      // })
    },
    //明细刷新数据
    onVisible(){
      this.reLoad()
      this.detailVisible = false
    },
    //查看
    hookLook(row){
      let code = JSON.parse(JSON.stringify(row)) 
      code.amount = code.amount / 10000
      this.dataForm = code
      this.dataFormVisible = true
    },
    //明细分页
    handlerLook(row){
      let info = this.info
      let body={
          size:info.size,
          current:info.current,
          relationId:row
        }
      supplierPaymentList(body).then((res) => {
        this.detailTableData = res.data.data.records
        this.detailTotal = res.data.data.total
      })
    },
     //明细
    handleritemAdd(row){
       this.detailVisible = true,
       this.detail = JSON.parse(JSON.stringify(row))
       this.handlerLook(row.supplierId)
       console.log(row)
    },
    //新增
    handlerAdd(row){
      this.operation = true // true:新增, false:编辑
            this.dialogFormVisible = true // 控制弹出框
            let list = JSON.parse(JSON.stringify(row))
            this.bankcardURL(list.supplierId)
            console.log(list)
            list.relationId=list.supplierId.toString()
            // this.dataForm = list
            // this.dataForm.relationId = list.supplierId
            this.dataForm.amount = ""       //加款钱
            this.dataForm.certificate = ""  //凭证
            this.dataForm.paymentAccount = ""  //出款账户
            this.dataForm = list
            // this.dataForm = {}
            this.imgurl = ""
            this.fileList=[]   //图片
            this.card = []    //银行卡
            this.cardNo = ""
            if(this.$refs['dataForm']){
                 this.$refs['dataForm'].resetFields();
            }
    },
    //编辑
    handleEdit(row){
      //图片的判断
      if(row.certificate){
            let obj=new Object()
            obj.url=row.certificate
            let list=new Array()
            list.push(obj)
            this.fileList=list
        }else{
            this.fileList=[]
        }
      
    
      let code = JSON.parse(JSON.stringify(row)) 
         code.amount = code.amount / 10000
         
      this.dataForm = code
      console.log(row)
      if(this.$refs['dataForm']){
            this.$refs['dataForm'].resetFields();
      }
      this.operation = false
      this.dialogFormVisible = true
    },
    //撤销
    handleRevocation(row){
       let code = JSON.parse(JSON.stringify(row))

            code.undo = 1
            code.type = "supplier"
            let that = this
            that.$confirm('是否撤销该数据', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(() => {
                supplierPaymentAnnul(code).then((res)=>{
                     if (res.status === 200) {
                        that.$message({
                            type: 'success',
                            message: '撤销成功'
                        })
                        this.handlerLook(this.detail.supplierId)
                     } else {
                        that.$message({
                            type: 'error',
                            message: res.data.message
                        })
                     }
                })
            })    
    },
    //新增和修改API
      submitForm(){
        this.dataForm.distinguish=1
        this.dataForm.type="supplier"
        // this.dataForm.undo = 0
          let dataForm = this.dataForm
        this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                  if (!this.operation) {
                    this.buttonLoading = true
                    supplierPaymentEdit(dataForm).then(response => {
                      if (response.status === 200) {
                        this.$message({
                          type: 'success',
                          message: '操作成功'
                        })
                        this.dialogFormVisible = false
                        this.handlerLook(this.detail.supplierId)
                      } else {
                        this.$message({
                          type: 'error',
                          message: response.data.msg
                        })
                      }
                    })
                    .finally(() => this.buttonLoading = false)
                  } else {
                    console.log(this.dataForm)
                  //   // 添加
                    this.buttonLoading = true
                    supplierPaymentAdd(dataForm).then(response => {
                      if (response.status === 200) {
                        this.$message({
                          type: 'success',
                          message: '操作成功'
                        })
                        this.dialogFormVisible = false
                        this.handlerLook(this.detail.supplierId)
                      } else {
                        this.$message({
                          type: 'error',
                          message: response.data.msg
                        })
                      }
                    })
                    .finally(() => this.buttonLoading = false)
                  }
                }
              })
      },
     //清除图片
     handleRemove(file) {
        this.$refs.upload.clearFiles()
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        console.log(file)
        this.dialogDspaly = true;
      },
      handleDownload(event, file, fileList) {
        console.log(event)
        console.log(file)
        console.log(fileList)
        const params = new FormData()
        params.append('file', event.raw)
        api.account.Upload(params).then((res)=>{
          if(res.data.status == 200){
                let image=res.data.data
                this.dataForm.certificate=image
                console.log(res)
            }else{
                this.$notify.error({
                title: '错误',
                message: res.data.message
                });
            } 
        })


      },   
        //搜索
    Search() {
      this.body.current = 1
      this.reLoad()
    },
    //页码
    handleSizeChange(val) {
      this.body.size = val
      this.reLoad()
    },
    //换页
    handleCurrentChange(val) {
      this.body.current = val
      this.reLoad()
    },
    detailHandleSizeChange(val) {
      this.info.size = val
      this.handlerLook(this.detail.supplierId)
    },
    //换页
    detailHandleCurrentChange(val) {
      this.info.current = val
      this.handlerLook(this.detail.supplierId)
    },
  },

}
</script>

<style >
.el-upload-list__item {
  transition: none !important;
}
.flex_supplier{
  width: 90%;
  margin: 0px auto 30px;
  display: flex;
  flex-direction: row;
  /* justify-content:space-evenly; */
}
.flex_width{
  width: 50%;
  margin-left: 160px;
}
.flex_Name{
   font-size: 15px;
     font-weight: 600;
     color:rgb(87, 86, 86)
}
.flex_Number{
  font-weight: 600;
    margin-right: 20px;
    font-weight: 500px;
    font-size: 20px;
    color:salmon
}
.AddButton{
  display: flex;
  justify-content:flex-end;
  margin-right: 50px;
  margin-bottom: 20px;
}
.el-card {
    border: 0px solid #e6ebf5;
    margin-top: 10px;
    }
</style>