manage_invoice_ui/src/views/customer/Customer.vue

<template>
    <div class="custome_container">
      <div class="title">
        <el-row>
          <el-col :span="24">
            <div class="top">
              <el-input  placeholder="客户名称" class="input-demo" v-model="formCondition.customerName"></el-input>
               <el-button type="success" style="margin-left: 1%;" @click="loadData">查询</el-button>
             <!--         <el-button type="success" style="margin-left: 1%;" @click="addCustomerShow = true">添加</el-button>-->
                <el-button type="primary" style="margin-left: 1%;" @click="exportExcel">导出报表</el-button>

            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 表格部分 -->
       <template>
        <el-table
         class="table"
          v-loading="loading"
          ref="multipleTable"
          :data="coustomerTable"
           :height="heightt"
          border
          tooltip-effect="dark">
          <el-table-column
            label="客户名称"
            prop="customerName"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="客户密钥"
            prop="appSecret"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="主体名称"
            prop="company"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="fee"
            label="etc卡月费"
            show-overflow-tooltip>
          </el-table-column> 
           <el-table-column
            prop="bussinessType"
            label="业务类型"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <span v-if="scope.row.bussinessType == 2" >无车</span>
              <span v-else-if="scope.row.integrationType == 0" >自有车</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="accountBalance"
            label="账号余额"
            show-overflow-tooltip>
            <template slot-scope="scope">
               <span>{{scope.row.accountBalance| rounding}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="firstSign"
            label="首签日"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="accstatus"
            label="账号状态"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <span v-if="scope.row.accstatus == 0" style="color:green">正常</span>
              <span v-else-if="scope.row.accstatus == 1" style="color: red">停用</span>
            </template>
          </el-table-column>
           <el-table-column
            label="操作"
            width="280">
            <template slot-scope="scope" show-overflow-tooltip>
              <el-link style="cursor:pointer; color: blue;" @click="investMone(scope.row)">充值</el-link>
              <el-link style="margin-left: 10px; cursor:pointer; color: blue;" @click="recInfoList(scope.row)">备案列表</el-link>
              <!-- <el-link style="margin-left: 10px; cursor:pointer; color: blue;" @click="carInfo(scope.row)">车辆信息</el-link> -->
              <el-link style="margin-left: 10px; cursor:pointer; color: blue;" @click="updateStatus(scope.row)">状态修改</el-link>
            </template>
          </el-table-column>
        </el-table>
      </template> 
      <!-- 分页 -->
      <div class="block">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[6, 8, 10 , 20, 50, 100]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
      </div>
 <el-dialog
        @close="addCustomerClose"
        :visible.sync="addCustomerShow"
        style="font-size: 0px;">
        <div class="tou">客戶--添加</div>
        <div class="line"></div>
        <el-form
          label-position="right"
          label-width="80px"
          :rules="custAddrules"
           ref="customerForm"
          :model="customer">
          <el-form-item label="客戶名称" prop="customerName">
            <el-input v-model="customer.customerName" auto-complete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
           <el-form-item label="客户主体" prop="customerCompany"> 
            <el-input v-model="customer.company" auto-complete="off" placeholder="请输入主体名称"></el-input>
          </el-form-item>
          <el-form-item label="业务类型" prop="bussinessType">
            <el-select v-model="customer.bussinessType" @change="changeRow" placeholder="请选择业务类型" style="width: 100%">
              <el-option
                v-for="item in roleList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="ETC卡月费" v-show="showEtcFee" prop="customerCompany">
            <el-input v-model="customer.fee" auto-complete="off" placeholder="etc卡月费用"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addCustomerShow = false" type="info">取 消</el-button>
          <el-button type="primary" @click="addCustomer('customerForm')">新 增</el-button>
        </div>
      </el-dialog>
        <!-- 修改锁定和解锁状态 -->
      <el-dialog
        @close="addCustomerClose"
        :visible.sync="changeStatus"
        style="font-size: 0px;">
        <div class="tou">客户--修改状态</div>
        <div class="line"></div>
        <el-form
          label-position="right"
          label-width="80px"
          :model="customer">
          <el-form-item label="用户名">
            <el-input v-model="customer.customerName" disabled="true" auto-complete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="customer.accstatus" placeholder="请选择状态" style="width: 100%">
              <el-option
                v-for="item in optionone"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="changeStatus = false" type="info">取 消</el-button>
          <el-button type="primary" @click="changeStatusM">修 改</el-button>
        </div>
      </el-dialog>
      <el-dialog
        @close="addCustomerClose"
        :visible.sync="recVisList"
        style="font-size: 0px;">
        <div class="tou">客户--备案列表  <el-button type="success" size="small" style="margin-left: 1%;" @click="showAddCustomerRec">添加</el-button></div>
        <div class="line"></div>
      
         <!-- 表格部分 -->
       <template>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="customeRecQueryListTable"
           height="370px"
          border
          tooltip-effect="dark">
          <el-table-column
            label="客户名称"
            prop="customerName"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="companyNum"
            label="企业编号"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="contrantNum"
            label="协议编号"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="companyName"
            label="公司名称"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="companyReferencenum"
            label="税号"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="companyOpenbank"
            label="开户行"
            show-overflow-tooltip>
          </el-table-column>
           <!-- <el-table-column
            prop="companyOpenbankAcc"
            label="银行账号"
            show-overflow-tooltip>
          </el-table-column> -->
          <el-table-column
            prop="recStatus"
            label="备案状态"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <span v-if="scope.row.recStatus == 0">备案中</span>
              <span v-else-if="scope.row.recStatus == 1" style="color: green">备案成功</span>
              <span v-else-if="scope.row.recStatus == 2" style="color: red">备案失败</span>
              <span v-else-if="scope.row.recStatus == 3" style="color: red">等待协议上传</span>
              <span v-else-if="scope.row.recStatus == 4" style="color: red">手工停用</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="contractSuc"
            label="协议上传状态"
            width="120"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <span v-if="scope.row.contractSuc == 1" style="color: green">协议上传成功</span>
              <span v-else-if="scope.row.contractSuc == 2" style="color: red">协议未上传</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="interType"
            label="对接方式"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <span v-if="scope.row.interType == 0">接口</span>
              <span v-if="scope.row.interType == 1">平台</span>
              <span v-if="scope.row.interType == 3">平台</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="bussinessType"
            label="业务类型"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <span v-if="scope.row.bussinessType == 0">自有车</span>
              <span v-if="scope.row.bussinessType == 1">外协车</span>
              <span v-if="scope.row.bussinessType == 2">无车</span>
            </template>
          </el-table-column>
           <el-table-column
            label="操作"
            width="280">
            <template slot-scope="scope" show-overflow-tooltip>
               <el-link style="margin-left: 10px; cursor:pointer; color: blue;" @click="recInfo(scope.row)">备案信息</el-link>
               <el-link style="margin-left: 10px; cursor:pointer; color: blue;" @click="concatInfo(scope.row)">协议信息</el-link>
               <el-link v-if="scope.row.recStatus == 1" style="margin-left: 10px; cursor:pointer; color: blue;" @click="stopUse(scope.row)">停用</el-link>
            </template>
          </el-table-column>
        </el-table>
      </template> 
      </el-dialog>
      <el-dialog
        @close="custRecClose"
        :visible.sync="concatVis"
        style="font-size: 0px;">
        <div class="tou">客户-协议信息</div>
        <div class="line"></div>
        <el-form
          label-position="right"
          label-width="80px"
          :model="formUserList">
          
            <el-row :span="24">
              <el-col :span="12">
                 <el-form-item  label-width=120px label="协议类型" prop="serviceType">
                    <el-select v-model="customerRec.serviceType" placeholder="运营范围"   style="width: 100%">
                        <el-option
                           v-for="item in serviceTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="12" v-show= false>
                <el-form-item  label-width=120px label="协议文件名">
                <el-input v-model="customerRec.contractFileName" auto-complete="off" :disabled=disable ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12" v-show= true>
                <el-form-item  label-width=120px label="协议文件" prop="contractFileName">
                <el-upload
                    class="avatar-uploader"
                    style="width: 100%"
                    action="#"
                    :show-file-list="false"
                    :http-request="httpRequest">
                      <el-input label-width=120px v-model="customerRec.contractFileName" auto-complete="off"  style="width: 100%"></el-input>
                      <!-- <el-button type="primary" @click="getFile(index)">选取文件</el-button> -->
                  </el-upload>
                  <el-input label-width=120px v-model="customerRec.base64Str" v-show="false" auto-complete="off"></el-input>
              </el-form-item>
              </el-col>
          </el-row>
          <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="服务开始时间">
                <!-- <el-input v-model="customerRec.serviceStartTime" auto-complete="off" :disabled=false ></el-input> -->
                 <el-date-picker v-model="customerRec.serviceStartTime" type="date" value-format="yyyy-MM-dd HH:mm:SS" placeholder="服务开始时间"></el-date-picker>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label-width=120px label="服务结束时间">
                <!-- <el-input v-model="customerRec.serviceEndTime" auto-complete="off" :disabled=false ></el-input> -->
                <el-date-picker v-model="customerRec.serviceEndTime" type="date" value-format="yyyy-MM-dd HH:mm:SS" placeholder="服务结束时间"></el-date-picker>
              </el-form-item>
              </el-col>
          </el-row> 
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="contractDownload" v-show="customerRec.lowerFileName" type="primary">下游文件下载</el-button>
          <el-button @click="contractAdd" type="primary">协议上传</el-button>
        </div>
      </el-dialog>
      <el-dialog
        @close="custRecClose"
        :visible.sync="recVis"
        style="font-size: 0px;">
        <div class="tou">客户--备案信息</div>
        <div class="line"></div>
        <el-form
          label-position="right"
          label-width="80px"
          :model="formUserList">
          <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="客户名称">
                <el-input v-model="customerRec.customerName" auto-complete="off" :disabled= true ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="公司负责人">
                   <el-input v-model="customerRec.companyLeader" :disabled=disable  style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="负责人手机号">
                <el-input v-model="customerRec.companyLeaderPhone" auto-complete="off" :disabled=disable ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="公司名称">
                   <el-input v-model="customerRec.companyName" :disabled=disable style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="公司税号">
                <el-input v-model="customerRec.companyReferencenum" auto-complete="off" :disabled=disable ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="公司开户行">
                   <el-input v-model="customerRec.companyOpenbank" :disabled=disable style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
         <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="公司开户行账号">
                <el-input v-model="customerRec.companyOpenbankAcc" auto-complete="off" :disabled=disable ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="公司地址">
                   <el-input v-model="customerRec.companyAdress"  style="width: 100%" :disabled=disable></el-input>
                </el-form-item>
              </el-col>
          </el-row>
           <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="公司电话">
                <el-input v-model="customerRec.companyPhone" auto-complete="off" :disabled=disable ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                    <el-form-item label-width=120px label="业务类型">
                   <el-select v-model="customerRec.bussinessType" placeholder="业务类型" :disabled=disable  style="width: 100%">
                        <el-option
                          v-for="item in bussinessTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
          </el-row>
           <el-row :span="24">
              <el-col :span="12">
                <!-- <el-form-item  label-width=120px label="公司类型">
                <el-input v-model="customerRec.companyType" auto-complete="off" readonly=true ></el-input>
              </el-form-item> -->
               <el-form-item label-width=120px label="公司类型" prop="companyType">
                    <el-select v-model="customerRec.companyType" placeholder="公司类型"  style="width: 100%" :disabled=disable>
                        <el-option
                          v-for="item in companyList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
              </el-form-item>
              </el-col>
               <el-col :span="12">
                <!-- <el-form-item  label-width=120px label="公司类型">
                <el-input v-model="customerRec.companyType" auto-complete="off" readonly=true ></el-input>
              </el-form-item> -->
               <el-form-item label-width=120px label="运营范围" prop="operatingRangeType">
                    <el-select v-model="customerRec.operatingRangeType" placeholder="运营范围"  style="width: 100%" :disabled=disable>
                        <el-option
                          v-for="item in operatingRangeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
              </el-form-item>
              </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="customerRecConform" type="primary">信息上传</el-button>
          <el-button type="primary" @click="generateWord">生成文档</el-button>
        </div>
      </el-dialog>
       <el-dialog
        @close="custRecClose"
        :visible.sync="addCustomerRecShow1"
        style="font-size: 0px;">
        <div class="tou">客户--备案信息</div>
        <div class="line"></div>
        <el-form
          label-position="right"
          label-width="80px"
           :rules="custRecAddrules"
          ref="recRuleForm"
          :model="customerRec">
          <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="客户名称">
                <el-input v-model="customerRec.customerName" auto-complete="off" :disabled=true ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="公司负责人" prop="companyLeader">
                   <el-input v-model="customerRec.companyLeader"  style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="负责人手机号" prop="companyLeaderPhone">
                <el-input v-model="customerRec.companyLeaderPhone" auto-complete="off"  ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="公司名称" prop="companyName">
                   <el-input v-model="customerRec.companyName"  style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="公司税号" prop="companyReferencenum">
                <el-input v-model="customerRec.companyReferencenum" auto-complete="off"  ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="公司开户行" prop="companyOpenbank">
                   <el-input v-model="customerRec.companyOpenbank"  style="width: 100%"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
         <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="公司开户行账号" prop="companyOpenbankAcc">
                <el-input v-model="customerRec.companyOpenbankAcc" auto-complete="off"  ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="公司地址" prop="companyAdress">
                   <el-input v-model="customerRec.companyAdress"  style="width: 100%" ></el-input>
                </el-form-item>
              </el-col>
          </el-row>
           <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="公司电话" prop="companyPhone">
                <el-input v-model="customerRec.companyPhone" auto-complete="off"  ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="业务类型" prop="bussinessType">
                   <el-select v-model="customerRec.bussinessType" placeholder="业务类型"  style="width: 100%">
                        <el-option
                          v-for="item in bussinessTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
              </el-col>
          </el-row>
           <el-row :span="24">
              <el-col :span="12">
                <!-- <el-form-item  label-width=120px label="公司类型">
                <el-input v-model="customerRec.companyType" auto-complete="off" readonly=true ></el-input>
              </el-form-item> -->
               <el-form-item label-width=120px label="公司类型" prop="companyType">
                    <el-select v-model="customerRec.companyType" placeholder="公司类型"  style="width: 100%">
                        <el-option
                          v-for="item in companyList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
              </el-form-item>
              </el-col>
               <el-col :span="12">
                <!-- <el-form-item  label-width=120px label="公司类型">
                <el-input v-model="customerRec.companyType" auto-complete="off" readonly=true ></el-input>
              </el-form-item> -->
               <el-form-item label-width=120px label="运营范围" prop="operatingRangeType">
                    <el-select v-model="customerRec.operatingRangeType" placeholder="运营范围"  style="width: 100%">
                        <el-option
                          v-for="item in operatingRangeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
              </el-form-item>
              </el-col>
          </el-row>
           <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="协议类型" prop="serviceType">
                <el-select v-model="customerRec.serviceType" placeholder="运营范围"  style="width: 100%">
                        <el-option
                          v-for="item in serviceTypeList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                    </el-select>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label-width=120px label="协议文件" prop="contractFileName">
                <el-upload
                    class="avatar-uploader"
                    style="width: 100%"
                    action="#"
                    :show-file-list="false"
                    :http-request="httpRequest">
                      <el-input label-width=120px v-model="customerRec.contractFileName" auto-complete="off"  style="width: 100%"></el-input>
                      <!-- <el-button type="primary" @click="getFile(index)">选取文件</el-button> -->
                  </el-upload>
                  <el-input label-width=120px v-model="customerRec.base64Str" v-show="false" auto-complete="off"></el-input>
              </el-form-item>
              </el-col>
          </el-row>
          <el-row :span="24">
              <el-col :span="12">
                <el-form-item  label-width=120px label="服务开始时间" prop="serviceStartTime">
                <!-- <el-input v-model="customerRec.serviceStartTime" auto-complete="off" ></el-input> -->
                <el-date-picker v-model="customerRec.serviceStartTime" type="date" value-format="yyyy-MM-dd HH:mm:SS" placeholder="服务开始时间"></el-date-picker>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item  label-width=120px label="服务结束时间" prop="serviceEndTime">
                <!-- <el-input v-model="customerRec.serviceEndTime" auto-complete="off" ></el-input> -->
                 <el-date-picker v-model="customerRec.serviceEndTime" type="date" value-format="yyyy-MM-dd HH:mm:SS" placeholder="服务结束时间"></el-date-picker>
              </el-form-item>
              </el-col>
          </el-row> 
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="customerRecAdd" type="primary">保存</el-button>
        </div>
      </el-dialog>
       <el-dialog
        @close="addCustomerClose"
        :visible.sync="accIsclose"
        style="font-size: 0px;">
        <div class="tou">客户--充值</div>
        <div class="line"></div>
        <el-form
          label-position="right"
          label-width="80px"
          :model="customer">
          <el-form-item label="客户名称">
            <el-input v-model="customer.customerName" auto-complete="off" readonly=true></el-input>
          </el-form-item>
           <el-form-item label="账号余额">
            <el-input v-model="customer.accountBalance" auto-complete="off" readonly=true></el-input>
          </el-form-item>
          <el-form-item label="充值金额">
            <el-input v-model="customerRecharge.rechargeMony" @input="changeAmt" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="accIsclose = false" type="info">取 消</el-button>
          <el-button type="primary" @click="customRecharge">充值</el-button>
        </div>
      </el-dialog>
    </div>
</template>
<script type="text/javascript">
import FileSaver from "file-saver";
import XLSX from "xlsx";
      export default {
        data(){
          return{
            formCondition:{
              customerName:'',
              startTime:''
            },
            hightt:'0px',
            coustomerTable:[],
            coustomerCarTable:[],
            customeRecQueryListTable:[],
            companyList:[{id:1,name:"行业用户"},{id:2,name:"自营平台"},{id:3,name:"合作商户"}],
            bussinessTypeList:[{id:"0",name:"自有车"},{id:"2",name:"无车"}],
            operatingRangeList:[{id:1,name:"快递"},
                                {id:2,name:"速运"},
                                {id:3,name:"货运代理"},
                                {id:4,name:"普通货运"},
                                {id:5,name:"专线运输"},
                                {id:6,name:"其他"}],
            serviceTypeList:[{id:1,name:"一级产品"},{id:2,name:"二级产品"},{id:3,name:"三级产品"}],                    
            custAddrules: { 
              customerName: [
                { required: true, message: '请输入', trigger: 'blur' },
                { min: 3, max: 100, message: '长度在 3 到 100个字符', trigger: 'blur' }
              ],
               customerCompany: [
                { required: true, message: '请输入', trigger: 'blur' },
                { min: 3, max: 100, message: '长度在 3 到 300个字符', trigger: 'blur' }
              ],
               bussinessType: [
                { required: true, message: '请输入', trigger: 'blur' },
              ]
            }, 
            custRecAddrules: { 
              customerName: [
                { required: true, message: '请输入', trigger: 'blur' },
              ],
               companyLeader: [
                { required: true, message: '请输入', trigger: 'blur' },
              ],
               companyLeaderPhone: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               companyName: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               companyReferencenum: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               companyOpenbank: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               companyOpenbankAcc: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               companyAdress: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               companyPhone: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               bussinessType: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               companyType: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               operatingRangeType: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               serviceType: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               serviceStartTime: [
                { required: true, message: '请输入', trigger: 'blur' },
               ],
               serviceEndTime: [
                { required: true, message: '请输入', trigger: 'blur' },
               ]
            },
            customerRec:{

            },
            customer:{
               id:0,
               customerName:'',
               usenumAll:'',
               invoiceTime:'',
               usenumInterface:'',
               usenumPlat:'',
               accountBalance:'',
               bussinessType:'',
               integrationType:'',
               firstSign:'',
               accstatus:'0',
               company:''
            },
            customerRecharge:{
              customerName:'',
              rechargeMony:''
            },
            queryParam:{

            },
             optionone: [{
              value: 0,
              label: '正常'
            }, {
              value: 1,
              label: '停用'
            }],
            roleList: [{
              value: 0,
              label: '自有车'
            }, {
              value: 2,
              label: '无车'
            }],
            current: 1,
            pagesize: 8,
            total:'',
            addCustomerShow:false,
            addCustomerRecShow1:false,
            changeStatus:false,
            recVis:false,
            concatVis:false,
            accIsclose:false,
            carRecclose:false,
            recVisList:false,
            disable:false,
            showEtcFee:false
          }
        },
          created() {
             this.heightt = tableHeight;
          this.loadData();
        },
        filters: {
            rounding (value) {
              return value.toFixed(2)
            }
        },
        methods:{
          showAddCustomerRec(){
            this.addCustomerRecShow1 =true;
            this.customerRec.customerName = this.customer.customerName;
          },
          changeAmt(value){
           value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '');
           this.customerRecharge.rechargeMony = value;
         },
          getBase64(file) {
                this.customerRec.contractFileName = file.name;
                this.$forceUpdate()
                return new Promise((resolve, reject) => {
                  let reader = new FileReader();
                  let fileResult = "";
                  reader.readAsDataURL(file);
          　　　　　//开始转
                  reader.onload = function() {
                    fileResult = reader.result;
                  };
          　　　　　//转 失败
                  reader.onerror = function(error) {
                    reject(error);
                  };
          　　　　　//转 结束  咱就 resolve 出去
                  reader.onloadend = function() {
                    resolve(fileResult);
                  };
                });
          },
          httpRequest(data){　　// 没事儿就打印data看看呗　　　　//这是限制上传文件类型
              const isPFX = data.file.type === "application/pdf";
              const isLt2M = data.file.size / 1024 / 1024 < 10;

              if (!isPFX) {
                this.$message.error("上传文件只能是pdf格式!");
              }else if (!isLt2M) {
                this.$message.error("上传文件大小不能超过 10MB!");
              }else{
                // 转base64
                this.getBase64(data.file).then(resBase64 => {
                this.fileBase64 = resBase64.split(',')[1]　　//直接拿到base64信息
                 this.customerRec.base64Str = resBase64.split(',')[1];
                })
                this.$message.success('文件上传成功');
          }},
          addCustomer(formName){
                this.$refs[formName].validate(async (valid) => {
                if(valid) {
                  const response = await this.$http.post(`customer/addCustomer`, this.customer);
                  if(response.data.code === 0) {
                    this.loadData();
                    this.addCustomerShow = false;
                    this.$message({
                      type: 'success',
                      message: '添加成功'
                    });
                  }else {
                    this.$message({
                      type: 'error',
                      message: '添加失败'
                    });
                  }
                }else {
                  this.$message.error('请查看是否有选项未填写或填错项');
                  return false;
                }
              })
          },
          investMone(recoder){
            this.customer = this.customer= JSON.parse(JSON.stringify(recoder ));;
            this.customerRecharge['rechargeMony']='';
            this.accIsclose = true;
          },
         async customRecharge(){
             this.customerRecharge['customerName'] = this.customer['customerName'];
             const response = await this.$http.post(`customer/customRecharge`, this.customerRecharge);
                  if(response.data.code === 0) {
                    this.loadData();
                    this.accIsclose = false;
                    this.$message({
                      type: 'success',
                      message: '充值成功'
                    });
                  }else {
                    this.$message({
                      type: 'error',
                      message: '充值失败'
                    });
                  }
          },
         async changeStatusM(){
                  const response = await this.$http.post(`customer/updateCustomer`, this.customer);
                  if(response.data.code === 0) {
                    this.loadData();
                    this.changeStatus = false;
                    this.$message({
                      type: 'success',
                      message: '修改成功'
                    });
                  }else {
                    this.$message({
                      type: 'error',
                      message: '修改失败'
                    });
                  }
          },
          updateStatus(recoder){
            this.changeStatus = true;
            this.customer= JSON.parse(JSON.stringify(recoder ));
          },
          async recInfo(recoder){
              this.recVis = true;


            const response = await this.$http.post(`lowerService/customeRecQuery`, {"customerName":recoder.customerName,"companyName":recoder.companyName});
            if (response.data.code === 0) {
              this.customerRec = response.data.data;
            
              this.disable = !((this.customerRec.interType ==1) && (this.customerRec.recStatus ==2 || this.customerRec.recStatus ==0));

            }
          },
          
          async concatInfo(recoder){
              //this.recVis = true;
              this.concatVis = true;
            const response = await this.$http.post(`lowerService/customeRecQuery`, {"customerName":recoder.customerName,"companyName":recoder.companyName});
            if (response.data.code === 0) {
              this.customerRec = response.data.data;
              this.disable = !((this.customerRec.interType ==1) && (this.customerRec.recStatus ==2));
            }
          },
          stopUse(recoder){
                  this.$confirm('此操作将任务状态改为删除状态, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                         type: 'warning'
                   }).then(async () => {
                       const response = await this.$http.post("customer/customeRecStop", {"customerName":recoder.customerName,"companyName":recoder.companyName});
                       if (response.data.code === 0) {
                            this.$message({
                                type: 'success',
                                 message: '停用成功'
                             });
                             recoder.recStatus=4;
                        }else{
                          this.$message({
                              type: 'error',
                              message: '停用失败：'+response.data.msg
                          });
                        }
                   }).catch(() => {
                      //几点取消的提示
                   }); 
            
          },
           async recInfoList(recoder){
             this.customer.customerName =recoder.customerName;
            const response = await this.$http.post(`lowerService/customeRecQueryList`, {"customerName":recoder.customerName});
            if (response.data.code === 0) {
              this.customeRecQueryListTable = response.data.data;
            }
          
            this.recVisList = true;
          },
          async carInfo(recoder){
            const response = await this.$http.post(`lowerService/customerCarRecQuery`, {"customerName":recoder.customerName});
            if (response.data.code === 0) {
              this.coustomerCarTable = response.data.data;
            }
          
            this.carRecclose = true;
          },
          // 清空表单数据
          addCustomerClose() {
            for (var key in this.customer) {
              this.customer[key] = '';
            };
            this.customer['id'] = 0;
            this.customer['accstatus'] = 0;
            this.current = 1;
            this.pagesize = 8;
          },
          custRecClose() {
            this.recVis = false,
            this.concatVis = false,
            this.addCustomerRecShow1 =false;
            this.customerRec = {};
          },
          async customerRecAdd(){
            console.log(this.customerRec);
             this.$refs['recRuleForm'].validate(async (valid) => {
               if(valid){
                    const response = await this.$http.post(`customer/customerRecAdd`, this.customerRec);
                  if(response.data.code === 0) {
                    this.loadData();
                    this.addCustomerRecShow1 = false;
                    this.$message({
                      type: 'success',
                      message: '保存成功'
                    });
                  }else {
                    this.$message({
                      type: 'error',
                      message: '保存失败：'+response.data.msg
                    });
                  }
               }
             });
             
          },
          generateWord(){
            const token = sessionStorage.getItem('token');
            window.open(hostUrl+'customer/generateWord?customerRecId='+this.customerRec['id']+'&token='+token);
          },
          async customerRecConform(){
             const response = await this.$http.post(`customer/customeRec`, this.customerRec);
             debugger
                  if(response.data.code === 0) {
                    this.loadData();
                    this.recInfoList(this.customerRec)
                    this.changeStatus = false;
                    this.$message({
                      type: 'success',
                      message: '备案成功'
                    });
                  }else {
                    this.$message({
                      type: 'error',
                      message: '备案失败：'+response.data.msg
                    });
                  }
          },
          changeRow(id){
            if(id == 0){
              this.showEtcFee =true
            }else{
              this.showEtcFee =false
            }
         },
          async contractAdd(){
             const response = await this.$http.post(`customer/contractAdd`, this.customerRec);
                  if(response.data.code === 0) {
                    this.loadData();
                    this.recInfoList(this.customerRec)
                    this.changeStatus = false;
                    this.$message({
                      type: 'success',
                      message: '协议上传成功'
                    });
                  }else {
                    this.$message({
                      type: 'error',
                      message: '协议上传失败：'+response.data.msg
                    });
                  }
          },
          contractDownload(){
            const token = sessionStorage.getItem('token');
            window.open(hostUrl+'customer/contractDownload?customerRecId='+this.customerRec['id']+'&token='+token);
          },
          // 列表展示
          async loadData() {
            const formData = new FormData();
            formData.append('current', this.current);
            formData.append('size', this.pagesize);
            formData.append('customerName', this.formCondition.customerName);
            const response = await this.$http.post(`customer/findCustomer`, formData);
            if (response.data.code === 0) {
              this.coustomerTable = response.data.data.records;
              this.total = response.data.data.total;
            }
          },
          // 分页方法
          handleSizeChange(val) {
            this.pagesize = val;
            this.loadData();
          },
          handleCurrentChange(val) {
            this.current = val;
              this.loadData();
            // console.log(`当前页: ${val}`);
          },
     async exportExcel() {
        let curr = this.current;
      let pagesize1 = this.pagesize;
      this.current = 1; 
      this.pagesize = this.total;
      await this.loadData();
      // 设置当前日期
      let time = new Date();
      //console.log(time);
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let name = "客户管理查询列表_"+year + "" + month + "" + day;
      // console.log(name)
      /* generate workbook object from table */
      //  .table要导出的是哪一个表格
      var wb = XLSX.utils.table_to_book(document.querySelector(".table"),{ raw: true });
      /* get binary string as output */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        //  name+'.xlsx'表示导出的excel表格名字
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          name + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      this.current = curr; 
      this.pagesize = pagesize1;
      this.loadData();
      return wbout;
    },
        }
      };
</script>
<style>
.custome_container {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
}
.custome_container .title {
  font-size: 5px;
  margin-bottom: 20px;
}
.custome_container .top {
  padding-top: 20px;
  padding-left: 20px;
}
.custome_container .text {
  display: inline-block;
  color: #000;
  font-size: 16px ;
  margin-left: 1%;
}
.custome_container .input-demo {
  display: inline-block;
  width: 20%;
  margin-left: 1%;
}
.custome_container .block {
  font-size: 5px;
  text-align: center;
  margin-top: 25px;
  margin-bottom: 25px;
}
.custome_container .el-dialog {
  width: 60%;
}
.custome_container .el-dialog__header, .el-dialog__body {
  padding: 0 20px;
}
.custome_container .tou {
  font-size: 20px;
  height: 30px;
  line-height: 30px;
  padding-top: 15px;
}
.custome_container .line {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 100%;
  height: 2px;
  background-color: #d9d9d9;
}
.custome_container .xinxi {
  text-align: center;
  margin: 15px auto;
  font-size: 18px;
}
</style>