admin_operation/src/views/userList/index.vue

<template>
  <div class="app-container">
    <div class="filter-container" style="margin: 10px 0 10px 0">
      <span class="textSpan">客户名称:</span>
      <!-- <el-input v-model="body.customerName" style="width:200px;" placeholder="客户名称" size="small" clearable /> -->
       <el-select v-model="body.customerName" filterable  clearable  placeholder="请选择">
        <el-option
          v-for="item in userList"
          :key="item.customerName"
          :label="item.customerName"
          :value="item.customerName">   
        </el-option>
      </el-select>
      <el-button class="filter-item" icon="el-icon-search" type="primary" plain @click="Search">搜索</el-button>
      <el-button class="classitem" style="marginRight:50px" type="primary" plain icon="el-icon-plus" @click="NewUser">新增</el-button>
    </div>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">

      <el-table-column label="序号" width="60" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

      <el-table-column label="客户名称" width="150" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.customerName }}</span> -->
          <el-button type="text" @click="hookLook(scope.row)">{{ scope.row.customerName }}</el-button>
        </template>
      </el-table-column>


      <el-table-column label="状态" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status === 1" >正常</el-tag>
          <el-tag v-if="scope.row.status === 2" type="warning">暂停</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="客户简称" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button type="text" @click="productLook(scope.row)">{{ scope.row.shorterName }}</el-button>
        </template>
      </el-table-column>

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

      <el-table-column label="授信额度" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.creditAmount }}</span>
        </template>
      </el-table-column>

      <el-table-column label="当前费用" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.currentAmount }}</span>
        </template>
      </el-table-column>

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


      <el-table-column label="操作" fixed="right" width="131" align="center">
        <template slot-scope="scope">
          <!-- <el-button v-if="scope.row.status === 1" size="small" icon="el-icon-close" plain type="info" @click="ModifyStatus(scope.row,2)">暂停</el-button>
          <el-button v-if="scope.row.status === 2" size="small" icon="el-icon-check" plain type="success" @click="ModifyStatus(scope.row,1)">有效</el-button>
          <el-button size="small" icon="el-icon-edit" type="primary" plain  @click="product(scope.row)">产品</el-button>
          <el-button style="marginTop:5px" size="small" icon="el-icon-edit" type="warning" plain @click="ModifyEdit(scope.row)">编辑</el-button>
          <el-button style="marginTop:5px" size="small" icon="el-icon-delete" type="danger" plain @click="ModifyDelete(scope.row)">删除</el-button> -->
          <el-dropdown trigger="click" >
            <el-button size="medium" type="text" >
            操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item >
                      <el-button style="margin:5px" v-if="scope.row.status === 1" size="small" icon="el-icon-close" plain type="info" @click="ModifyStatus(scope.row,2)">暂停</el-button>
                       <el-button style="margin:5px" v-if="scope.row.status === 2" size="small" icon="el-icon-check" plain type="success" @click="ModifyStatus(scope.row,1)">正常</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                  <el-button style="margin:5px" size="small" icon="el-icon-edit" type="primary" plain v-if="scope.row.status  == 2 " @click="AddProduct(scope.row)">产品</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
          <el-button style="margin:5px" size="small" icon="el-icon-edit" type="warning" plain @click="ModifyEdit(scope.row)">编辑</el-button>
                
              </el-dropdown-item>
              <el-dropdown-item>
          <el-button style="margin:5px" size="small" icon="el-icon-delete" type="danger" plain @click="ModifyDelete(scope.row)">删除</el-button>

              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>

    </el-table>

<!-- 添加或修改对话框 -->
        <el-dialog :title="operation?'新增客户':'编辑客户'" width="85%" :visible.sync="dialogFormVisible" center>
          <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
               <!-- 客户基本信息 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">客户基本信息</span>
                </div>
                <div>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="客户名称" prop="customerName" :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.customerName" />
                      </el-form-item>
                    </el-col>
                    <el-col v-if="!operation" :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="客户ID" :label-width="formLabelWidth"  >
                          <el-input disabled v-model="dataForm.customerId"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="客户简称" prop="shorterName" :label-width="formLabelWidth">
                          <el-input v-model="dataForm.shorterName"  />
                        </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-card>  
              <!-- 客户服务联系人信息 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">客户服务联系人信息</span>
                </div>
                <div>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="联系人姓名" :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.linkmanName" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="联系人电话" :label-width="formLabelWidth"  >
                          <el-input v-model="dataForm.linkmanMobile"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="联系人邮箱" :label-width="formLabelWidth">
                          <el-input v-model="dataForm.linkmanEmail"  />
                        </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="联系人地址" :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.address" />
                      </el-form-item>
                    </el-col> 
                  </el-row>
                </div>
              </el-card>  
              <!-- 其他 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">其他</span>
                </div>
                <div>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="代理商提成比例" :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.partnerCommission" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="合作伙伴ID" :label-width="formLabelWidth"  >
                          <el-input v-model="dataForm.partnerId"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="价格校验" :label-width="formLabelWidth">
                          <!-- <el-input v-model="dataForm.priceCheck"  /> -->
                          <el-select size="small"  v-model="dataForm.priceCheck">
                            <el-option
                            v-for="item in priceCheck"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            />
                          </el-select>
                        </el-form-item>
                    </el-col>
                  </el-row>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <!-- <el-form-item label="是否有效" :label-width="formLabelWidth"  >
                       <el-select size="small"  v-model="dataForm.status">
                        <el-option
                        v-for="item in status"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        />
                        </el-select>
                      </el-form-item> -->
                    </el-col>
                  </el-row>
      
                </div>
              </el-card>  
               <el-card  shadow="hover" v-if="!operation">
                  <div slot="header" class="clearfix">
                    <span class="topClass">客户银行账户信息</span>
                    <el-button style="float: right;" type="primary" plain @click="addCards(dataForm.supplierId)">添加银行卡</el-button>
                  </div>
                  <div>
                    <!-- 添加银行卡 -->
                    <el-table :data="dataForm.bankCards" >

                    <el-table-column label="银行卡"  align="center"  show-overflow-tooltip>
                      <template slot-scope="scope" >
                        <el-input v-model="scope.row.cardNo"></el-input>
                        <!-- <span v-else>{{ scope.row.cardNo }}</span> -->
                      </template>
                    </el-table-column>

                    <el-table-column label="开户行" width="140" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.bankDeposit"></el-input>
                        <!-- <span v-else>{{ scope.row.bankDeposit }}</span> -->
                      </template>
                    </el-table-column>
                    <el-table-column label="全称" width="170" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <el-input v-model="scope.row.account"></el-input>
                        <!-- <span v-else>{{ scope.row.bankDeposit }}</span> -->
                      </template>
                    </el-table-column>

                    <el-table-column label="创建者" width="150" align="center" show-overflow-tooltip >
                      <template slot-scope="scope" >
                        <!-- <el-input v-model="scope.row.creator"></el-input> -->
                        <span >{{ scope.row.creator }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column label="创建时间" align="center" show-overflow-tooltip >
                      <template slot-scope="scope" >
                        <!-- <el-input v-if="editable[scope.$index]" @input="onBurl(scope.row.facePrice,scope.row.payPrice)" v-model="scope.row.creator"></el-input> -->
                        <i class="el-icon-time"></i>
                        <span >{{ scope.row.createTime }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column label="操作"  width="165" min-width="150" align="center">
                        <template slot-scope="scope">
                          <el-button type="danger" icon="el-icon-delete" @click="CardsDelete(scope.row,scope.$index,$event)">删除</el-button>
                        </template>
                      </el-table-column>
                  </el-table>
                  </div>
                </el-card>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </div>
        </el-dialog>

<!-- 查看对话框 -->
        <el-dialog title="查看客户" width="85%" :visible.sync="dialogFormLook" center>
          <el-form ref="dataForm" :model="dataForm" :rules="rules2" label-width="80px" size="small" label-position="right">
               <!-- 客户基本信息 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">客户基本信息</span>
                </div>
                <div>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="客户名称"  :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.customerName" disabled />
                      </el-form-item>
                    </el-col>
                    <el-col  :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="授信额度" :label-width="formLabelWidth"  >
                          <el-input disabled v-model="dataForm.creditAmount"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="账号余额"  :label-width="formLabelWidth">
                          <el-input v-model="dataForm.balance" disabled  />
                        </el-form-item>
                      
                    </el-col>
                  </el-row>
                    <el-row :gutter="20">
                      <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                          <el-form-item label="客户简称"  :label-width="formLabelWidth">
                          <el-input v-model="dataForm.shorterName" disabled  />
                        </el-form-item>
                    </el-col>
                    </el-row>
                </div>
              </el-card>  
              <!-- 客户服务联系人信息 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">客户服务联系人信息</span>
                </div>
                <div>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="联系人姓名" :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.linkmanName" disabled />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="联系人电话" :label-width="formLabelWidth"  >
                          <el-input v-model="dataForm.linkmanMobile" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="联系人邮箱" :label-width="formLabelWidth">
                          <el-input v-model="dataForm.linkmanEmail" disabled />
                        </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="联系人地址" :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.address" disabled />
                      </el-form-item>
                    </el-col> 
                  </el-row>
                </div>
              </el-card>  
              <!-- 其他 -->
              <el-card shadow="never"  >
                <!-- <el-card  shadow="hover" > -->
                <div slot="header" class="clearfix">
                  <span class="topClass">其他</span>
                </div>
                <div>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="代理商提成比例" :label-width="formLabelWidth"  >
                        <el-input v-model="dataForm.partnerCommission" disabled />
                      </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="合作伙伴ID" :label-width="formLabelWidth"  >
                          <el-input v-model="dataForm.partnerId" disabled  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                        <el-form-item label="价格校验" :label-width="formLabelWidth">
                          <!-- <el-input v-model="dataForm.priceCheck"  /> -->
                          <el-select size="small" disabled v-model="dataForm.priceCheck">
                            <el-option
                            v-for="item in priceCheck"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            />
                          </el-select>
                        </el-form-item>
                    </el-col>
                  </el-row>
                    <el-row :gutter="20">
                    <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
                      <el-form-item label="是否有效" :label-width="formLabelWidth"  >
                       <el-select size="small" disabled v-model="dataForm.status">
                        <el-option
                        v-for="item in status"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                        />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
      
                </div>
              </el-card>  
               <el-card  shadow="hover" >
                  <div slot="header" class="clearfix">
                    <span class="topClass">客户银行账户信息</span>
                    <!-- <el-button style="float: right;" type="primary" plain @click="addCards(dataForm.supplierId)">添加银行卡</el-button> -->
                  </div>
                  <div>
                    <!-- 添加银行卡 -->
                    <el-table :data="dataForm.bankCards" >

                    <el-table-column label="银行卡"  align="center"  show-overflow-tooltip>
                      <template slot-scope="scope" >
                        <!-- <el-input v-model="scope.row.cardNo"></el-input> -->
                        <span >{{ scope.row.cardNo }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column label="开户行" width="140" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <!-- <el-input v-model="scope.row.bankDeposit"></el-input> -->
                        <span >{{ scope.row.bankDeposit }}</span>
                      </template>
                    </el-table-column>
                    
                    <el-table-column label="全称" width="170" align="center" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <!-- <el-input v-model="scope.row.account"></el-input> -->
                        <span >{{ scope.row.account }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column label="创建者" width="150" align="center" show-overflow-tooltip >
                      <template slot-scope="scope" >
                        <!-- <el-input v-model="scope.row.creator"></el-input> -->
                        <span >{{ scope.row.creator }}</span>
                      </template>
                    </el-table-column>

                    <el-table-column label="创建时间" align="center" show-overflow-tooltip >
                      <template slot-scope="scope" >
                        <!-- <el-input v-if="editable[scope.$index]" @input="onBurl(scope.row.facePrice,scope.row.payPrice)" v-model="scope.row.creator"></el-input> -->
                        <i class="el-icon-time"></i>
                        <span >{{ scope.row.createTime }}</span>
                      </template>
                    </el-table-column>


                  </el-table>
                  </div>
                </el-card>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormLook = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormLook = false">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 查看产品 -->
        <el-dialog :title="productData.customerName+' 产品'" width="85%" :visible.sync="LookProduct" center>
          <!-- 添加 -->
          <el-table  ref="multipleTable" :data="channelProductInfos" >
  

          <el-table-column label="产品Id" align="center" width="100"  show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input v-model="scope.row.packageId"></el-input> -->
              <span>{{ scope.row.packageId }}</span>
            </template>
          </el-table-column>

          <el-table-column label="客户产品名称" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input  v-model="scope.row.channelProductName"></el-input> -->
              <span >{{ scope.row.productName }}</span>  
            </template>
          </el-table-column>

          <el-table-column label="面额"  width="100" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input  v-model="scope.row.price"></el-input> -->
              <span >{{ scope.row.facePrice  }}</span>  
            </template>
          </el-table-column>
          <el-table-column label="结算价格"  align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input  v-model="scope.row.price"></el-input> -->
              <span >{{ scope.row.price }}</span>  
            </template>
          </el-table-column>
          <el-table-column label="折扣"  align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <div v-if="scope.row.disCount" >{{ ((scope.row.disCount ) * 100).toFixed(2)}}  </div>   -->
              <div v-if="scope.row.disCount" >{{ parseFloat(scope.row.disCount * 100).toFixed(4)}}  %</div>  
              <!-- <el-input  v-model="scope.row.price"></el-input> -->
            </template>
          </el-table-column>

          <el-table-column label="是否有效"  align="center" show-overflow-tooltip >
            <template slot-scope="scope" >
              <span v-if="scope.row.isEffective == 0">无效</span>
              <span v-if="scope.row.isEffective == 1">有效</span>
            </template>
          </el-table-column>
          </el-table>
            <div slot="footer" class="dialog-footer">
            <el-button @click="LookProduct = false">取 消</el-button>
            <el-button type="primary" @click="LookProduct = false">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 添加产品 -->
        <el-dialog :title="productData.customerName+' 产品'" width="85%" :visible.sync="productShow" center>
      <el-form ref="infoForm" style="marginBottom:20px" :model="infoForm" :rules="rules2" label-width="80px" size="small" label-position="right">
        <el-row :gutter="20">
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
            <el-form-item label="客户名称" prop="channelName" :label-width="formLabelWidth"  >
              <el-input v-model="productData.customerName" disabled placeholder="请输入产品" />
              <!-- <span class="textSpan">{{productData.customerName}}</span> -->
            </el-form-item>
          </el-col>
          <el-col :span="6" :xs="24" :sm="12" :md="12" :lg="8">
           <el-form-item label="折扣(%)" prop="discount" :label-width="formLabelWidth"  >
                <el-input  v-model="infoForm.discount" placeholder="请输入折扣" @change="clicklong(infoForm.discount)" />
              </el-form-item>
          </el-col>
        </el-row>  
      </el-form>
             <!-- 添加产品 -->
       <el-card  shadow="hover" >
        <div slot="header" class="clearfix">
          <span class="topClass">客户产品信息</span>
          <el-button style="float: right;" type="primary" plain @click="addprice(productData.customerId)">添加客户产品</el-button>
          <el-button style="marginRight:20px;float: right;" type="success" plain @click="editpricing">结算价格批量定价</el-button>
        </div>
        <div>
          <!-- 添加 -->
          <el-table  ref="multipleTable" :data="channelProductInfos"  @selection-change="handleSelectionChange">
             <el-table-column
                type="selection"
                width="55">
              </el-table-column>

          <el-table-column label="产品Id" align="center" width="100"  show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input v-model="scope.row.packageId"></el-input> -->
              <span>{{ scope.row.packageId }}</span>
            </template>
          </el-table-column>
<!-- 
          <el-table-column label="通道产品ID" width="150" align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model="scope.row.channelProductId"></el-input>
            </template>
          </el-table-column> -->

          <el-table-column label="客户产品名称" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input  v-model="scope.row.channelProductName"></el-input> -->
              <span >{{ scope.row.productName }}</span>  
            </template>
          </el-table-column>

          <el-table-column label="面额"  width="100" align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <el-input  v-model="scope.row.price"></el-input> -->
              <span >{{ scope.row.facePrice  }}</span>  
            </template>
          </el-table-column>
          <el-table-column label="结算价格"  align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <el-input  v-model="scope.row.price"></el-input>
              <!-- <span >{{ scope.row.account }}</span>   -->
            </template>
          </el-table-column>
          <el-table-column label="折扣"  align="center" show-overflow-tooltip>
            <template slot-scope="scope" >
              <!-- <div v-if="scope.row.disCount" >{{ ((scope.row.disCount ) * 100).toFixed(2)}}  </div>   -->
              <div v-if="scope.row.disCount" >{{ parseFloat(scope.row.disCount * 100).toFixed(4)}}  %</div>  
              <div v-else >{{ parseFloat(scope.row.price / scope.row.facePrice * 100).toFixed(4)}}  %</div>  
              <!-- <el-input  v-model="scope.row.price"></el-input> -->
            </template>
          </el-table-column>

          <el-table-column label="是否有效"  align="center" show-overflow-tooltip >
            <template slot-scope="scope" >
               <el-select size="small" v-model="scope.row.isEffective"  placeholder="请选择是否有效" style="width: 90%" >
                  <el-option
                  v-for="item in isEffective"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                  />
                  </el-select>
              <!-- <span >{{ scope.row.aaa }}</span> -->
            </template>
          </el-table-column>

          <el-table-column label="操作"  width="165" min-width="150" align="center">
              <template slot-scope="scope">
                <el-button type="danger" plain icon="el-icon-delete" @click="priceDelete(scope.row,scope.$index,$event)">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        </div>
       </el-card>
          <div slot="footer" class="dialog-footer">
            <el-button @click="productShow = false">取 消</el-button>
            <el-button type="primary" @click="productSubmit">确 定</el-button>
          </div>
        </el-dialog>

            <!-- 结算价格批量定价 -->
    <el-dialog
    title="结算价格批量定价"
    :visible.sync="pricingVisible"
    width="40%"
    modal
    :close-on-click-modal="false"
    center
    >
      <div style="text-align:center;">
        <el-input v-model="morePricing" @keyup.enter.native="pricingClike" style="width:200px"></el-input>
        <span>
          %
        </span>
      </div>
    <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="">取 消</el-button> -->
        <el-button type="primary" @click="pricingClike">确 定</el-button>
    </span>
    </el-dialog>

    <!-- 产品选择 -->
    <el-dialog
    title="添加产品"
    :visible.sync="dialogVisible"
    width="58%"
    >
         <div class="edit_dev">

            <el-transfer
                v-model="value"
                filterable
                :props="{
                key: 'productId',
                label: 'productName'
                }"
                :format="{
                  noChecked: '${total}',
                  hasChecked: '${checked}/${total}'
                }"
                    :titles="['话费','话费']"
                :data="data">
            </el-transfer>
         </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickeAddprice">确 定</el-button>
    </span>
    </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'
export default {
  data() {
    return {
      body: {
        customerName:"",
        size: 10,
        current: 1
      },
      isEffective:[
        {id:0,name:"无效"},
        {id:1,name:"有效"}
      ],
      status:[
        {id:2,name:"正常"},
        {id:1,name:"暂停"}
      ],
      priceCheck:[
        {id:0,name:"关闭"},
        {id:1,name:"开启"}
      ],
      operation: false, // true:新增, false:编辑
      dialogFormVisible: false, // 控制弹出框
      pricingVisible:false,     //批量折扣弹框
      dialogFormLook:false,     //查看弹框
      LookProduct:false,      //查看产品
      dialogVisible:false,
      formLabelWidth: '120px',   //新增宽度
      dataForm:{
          userId:4,
      },
      infoForm:{
        
      },
      productShow:false,
      productData:{}, // 产品查看时的基本数据的数据
      rules2:{
        shorterName: [{ required: true, message: '请输入客户简称', trigger: 'blur' }],
        customerName: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
        discount: [{ required: true, message: '请输入折扣', trigger: 'blur' }],
      },
      loading:false,
      total: 1,
      tableData: [
 
      ],
      morePricing:"",
      data:[],       
      value:[],
      batch:[],          //批量所选的数据
      channelProductInfos:[],  //添加产品列表
      userList:[]
    }
  },
  created() {
    this.getTenantList()
    this.user()
  },
  methods: {
    //客户名称
     //客户名称
    user(){
      let user = "{customerName}"
      api.account.userList(user).then((res) => {
        this.loading =false
        let userList = res.data.data
        // userList.map((res)=>{
        //   // let user = {
        //   //   relationId:res.customerId,
        //   //   customerName:res.customerName
        //   // }
        //   res.relationId = res.customerId.toString()
        //   delete res.customerId
        //   return res
        // })
        this.userList = userList
      })
    },
    //新增弹框
    NewUser() {
      this.operation = true
      this.dialogFormVisible = true
      this.dataForm = {
          userId:4,
      }
    },
    //编辑弹框
    ModifyEdit(row) {
      this.operation = false
      this.dialogFormVisible = true
      if(row.bankCards == undefined){    
      //修改弹框时如果银行卡字段为undefined的时候赋值为空
         row.bankCards = []
      }
      let newObj=JSON.parse(JSON.stringify(row))
      this.dataForm = newObj
       if(this.$refs['dataForm']){
            this.$refs['dataForm'].resetFields();
        }
    },
    ModifyDelete(row) {
      this.$confirm('此操作将删除客户：' + row.customerName, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.isDeleted = 1
        api.index.customerDelect(row.customerId).then((resp)=>{
          if (resp.status === 200) {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getTenantList()
          } else {
            this.$message({
              type: 'error',
              message: resp.data.msg
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    //数据
    getTenantList(){
      this.loading = true
      api.index.Search(this.body).then((res) => {
        this.loading =false
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    //获取产品信息
    AddProduct(row){
      this.productShow = true
      this.productData = row
      let info={
        customerId:row.customerId,
        type: 1,     // 1：话费   
      }
      api.index.paroductDetails(info).then((res)=>{
        let list = res.data.data
        list.map((res)=>{
                    res.price = (res.price / 10000).toFixed(4)
                    res.facePrice = res.facePrice / 10000
                  return res
                })
        this.channelProductInfos = list
      })
      this.infoForm={
        discount:"100"
      }
    },
     //查看弹框
        hookLook(row){
             console.log(row)
            this.dialogFormLook = true
            this.dataForm={

            }
            let newObj=JSON.parse(JSON.stringify(row))
            this.dataForm = newObj
        },
     //查看产品
     productLook(row){
      this.productData = row
      let info={
        customerId:row.customerId,
        type: 1,     // 1：话费   
      }
      api.index.paroductDetails(info).then((res)=>{
        let list = res.data.data
        list.map((res)=>{
                    res.price = (res.price / 10000).toFixed(4)
                    res.facePrice = res.facePrice / 10000
                  return res
                })
        this.channelProductInfos = list
      })
        this.LookProduct = true
     },  
    //多选
        handleSelectionChange(rows){
          this.batch = rows
        },
     //结算价格批量定价
        editpricing(){
          console.log(this.batch)
          if(this.batch.length == 0){
              this.$message({
                type: 'error',
                message: "请至少选择一项"
              })
          }else{
             this.pricingVisible = true
          }
        },
          //折扣批量
        pricingClike(){
          // console.log(this.batch)
          let morePricing = this.morePricing
          let code = this.batch
          if(!morePricing){
            this.$message({
                type: 'error',
                message: "请输入结算价格批量定价"
              })
          }else{
            let info = []
            let data = this.channelProductInfos
            let arry= code.forEach((res)=>{
              //结算价格 * 折扣(%) * 0.01
               res.price=(res.facePrice * morePricing * 0.01).toFixed(4)
                    return res
            })
             this.pricingVisible = false
             
            }
            this.$refs.multipleTable.clearSelection();
        },
        //新增产品
        addprice(row){
            api.index.userProduct(row).then(res=>{
              let dataForm=this.channelProductInfos
              let code = res.data.data
              if(dataForm.length == 0){
                this.data=code
              }else{
                // 去重产品            
                  var set=dataForm.map(item=>item.productName)
                  var resArr=code.filter(item=>!set.includes(item.productName))
                  this.data=resArr
                  console.log(resArr)
              }
              // console.log(code)
              this.dialogVisible = true
            })
        },
        //确认产品
        clickeAddprice(){
           let customerId=this.productData.customerId
           let value = this.value;
           let data =this.data;
           let code= value.map(item1=>{
            let arry=  data.map(item2=>{
  
                  if(item1 == item2.productId){
                    let form = {
                      customerId:customerId,
                       price : item2.productPrice,
                       facePrice : item2.productPrice,
                       productName:item2.productName,
                       packageId:item2.packageId,
                       isEffective:1,
                       type:1,
                    }
                    console.log(form)
                    //  console.log(form)
                      this.channelProductInfos.push(form)
                  }
                  //  return info
              })
            })
            this.dialogVisible = false
            this.value = []
        },
        //添加银行卡
        addCards(relationId){
          this.dataForm.bankCards.push({
          cardNo:"",       //银行卡
          bankDeposit:"",   //开户行
          account:'',       //供应商账户
          relationId:relationId,
          distinguish:2
          // creator:""       //创建者
         })
        },
        //删除银行卡
        CardsDelete(row,index,e){
            let relationId=this.dataForm.relationId
              this.$confirm('此操作将删除：' + row.account, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {  
                if(row.id){
                  let info = {
                    id:row.id
                  }
                  api.index.supplierDelete(row.id).then((res)=>{
                    this.dataForm.bankCards.splice(index,1)
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                      })
                  })
                }else{
                    this.dataForm.bankCards.splice(index,1)
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                      })
                }
              })
            let target=e.target;
            if(target.nodeName == 'SPAN' || target.nodeName == 'I'){
                  target = e.target.parentNode;
            }
            target.blur();  
        },
    //文本框折扣编辑
    clicklong(row){
      let code = this.channelProductInfos
      let info = []
      let arry= code.forEach((res)=>{
        //结算价格 * 折扣(%) * 0.01
            res.price=(res.facePrice * row * 0.01).toFixed(4)
              info.push(res)
          })
      this.channelProductInfos = info    
          console.log(info)
        // console.log(number)
    },
    //API
    productSubmit(){
        this.$refs['infoForm'].validate((valid) => {
          if (valid) {
            let channelProductInfos = this.channelProductInfos
            // let row=channelProductInfos.map((res)=>{
            //                     if(res.price > 10000){
            //                       return res
            //                     }else{
            //                       res.price = res.price * 10000
            //                       res.facePrice = res.facePrice * 10000
            //                       return res
            //                     }
            //                   })
            api.index.AddCustomer(channelProductInfos).then((res)=>{
              if (res.status == 200) {
                        this.$message({
                          type: 'success',
                          message: '操作成功'
                        })
                        this.productShow = false
                      } else {
                        this.$message({
                          type: 'error',
                          message: res.data.msg
                        })
                      }
            })
          }
        })
    },
     //产品删除
        priceDelete(row,index,e){
        this.$confirm('此操作将删除：' + row.productName, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          
          if(row.customerProductId){
            api.index.delectCustomer(row.customerProductId).then((res)=>{
             this.channelProductInfos.splice(index,1)
              this.$message({
                  type: 'success',
                  message: '删除成功'
                })
            })
          }else{
              this.channelProductInfos.splice(index,1)
              this.$message({
                  type: 'success',
                  message: '删除成功'
                })
          }
        })
      let target=e.target;
      if(target.nodeName == 'SPAN' || target.nodeName == 'I'){
            target = e.target.parentNode;
      }
       target.blur();
        },
    //新增或修改API
    submitForm(){
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (!this.operation) {
              console.log(this.dataForm)
              // 编辑
              api.index.update(this.dataForm).then(response => {
                if (response.status === 200) {
                  this.$message({
                    type: 'success',
                    message: '操作成功'
                  })
                  this.dialogFormVisible = false
                  this.getTenantList()
                } else {
                  this.$message({
                    type: 'error',
                    message: response.data.msg
                  })
                }
              })
            } else {
              console.log(this.dataForm)
            //   // 添加
              api.index.userAdd(this.dataForm).then(response => {
                if (response.status === 200) {
                  this.$message({
                    type: 'success',
                    message: '操作成功'
                  })
                  this.dialogFormVisible = false
                  this.getTenantList()
                } else {
                  this.$message({
                    type: 'error',
                    message: response.data.msg
                  })
                }
              })
            }
          }
        })
    },
    ModifyStatus(row,i){
      this.$confirm('是否修改 '+row.customerName+' 的状态', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(()=>{
        let code = JSON.parse(JSON.stringify(row))
        code.status = i   // 2:暂停   1：有效
        api.index.customerValid(code.customerId,code.status).then(response => {
        if (response.status === 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.dialogFormVisible = false
          this.getTenantList()
        } else {
          this.$message({
            type: 'error',
            message: response.data.msg
          })
        }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });          
      });
      
    },
    //搜索
    Search() {
      this.body.current = 1
      this.getTenantList()
    },
    //页码
    handleSizeChange(val) {
      this.body.size = val
      this.getTenantList()
    },
    //换页
    handleCurrentChange(val) {
      this.body.current = val
      this.getTenantList()
    }
  }
}
</script>

<style scoped>
    .el-card {
      border: 0px solid #fff;
    }

.edit_dev >>> .el-transfer-panel {
     width:250px;
   }
</style>