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.customName"></el-input>
              <el-input  placeholder="部门" class="input-demo" v-model="formCondition.startTime"></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>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- 表格部分 -->
       <template>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="coustomerTable"
           height="370px"
          border
          tooltip-effect="dark">
          <el-table-column
            label="客户名称"
            prop="customerName"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="invoiceTime"
            label="开票时间"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="company"
            label="主体名称"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="usenumAll"
            label="调用量"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="integrationType"
            label="对接方式"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <span v-if="scope.row.integrationType == 0" >接口</span>
              <span v-else-if="scope.row.integrationType == 1" >平台</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="accountBalance"
            label="账号余额"
            show-overflow-tooltip>
            
          </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]"
        :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>
        <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" 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">客户--备案列表</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="companyLeader"
            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>
            </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>
            </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>
            </template>
          </el-table-column>
        </el-table>
      </template> 
      </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" readonly=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" readonly=true  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" readonly=true ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="公司名称">
                   <el-input v-model="customerRec.companyName" readonly=true 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" readonly=true ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="公司开户行">
                   <el-input v-model="customerRec.companyOpenbank" readonly=true 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" readonly=true ></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%" readonly=true></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" readonly=true ></el-input>
              </el-form-item>
              </el-col>
              <el-col :span="12">
                   <el-form-item label-width=120px label="备案申请时间">
                   <el-input v-model="customerRec.createtime"  style="width: 100%" readonly=true></el-input>
                </el-form-item>
              </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="changeStatus = false" type="primary">信息上传</el-button>
          <el-button type="primary" @click="changeStatusM">生成文档</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" 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>
       <el-dialog
        @close="addCustomerClose"
        :visible.sync="carRecclose"
        style="font-size: 0px;">
        <div class="tou">客户--车辆备案</div>
        <div class="line"></div>
         <!-- 表格部分 -->
       <template>
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="coustomerCarTable"
           height="370px"
          border
          tooltip-effect="dark">
          <el-table-column
            label="客户名称"
            prop="customerName"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="companyName"
            label="公司名称"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="businessType"
            label="业务类型"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <span v-if="scope.row.businessType == 0">自有车</span>
              <span v-if="scope.row.businessType == 1">外协车</span>
              <span v-if="scope.row.businessType == 2">无车</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="carNum"
            label="车牌号"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="carColor"
            label="车辆颜色"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="custPhone"
            label="手机号"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            prop="etcNum"
            label="ETC卡号"
            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 == 1" style="color: green">备案成功</span>
              <span v-else-if="scope.row.recStatus == 0" style="color: red">备案失败</span>
            </template>
          </el-table-column>
           <el-table-column
            prop="succTime"
            label="成功时间"
            show-overflow-tooltip>
            
          </el-table-column>
          <el-table-column
            prop="failTime"
            label="失败时间"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="failReason"
            label="失败原因"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            label="操作"
            width="280">
            <template slot-scope="scope" show-overflow-tooltip>
              <el-link v-if="scope.row.businessType == 1 || scope.row.businessType == 0" style="cursor:pointer; color: blue;" @click="alert(scope)">解绑</el-link>
            </template>
          </el-table-column>
        </el-table>
      </template> 
      </el-dialog>
    </div>
</template>
<script type="text/javascript">
      export default {
        data(){
          return{
            formCondition:{
              customerName:'',
              startTime:''
            },
            coustomerTable:[],
            coustomerCarTable:[],
            customeRecQueryListTable:[],
            custAddrules: {
              customerName: [
                { required: true, message: '请输入', trigger: 'blur' },
                { min: 3, max: 100, message: '长度在 3 到 100个字符', 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: '停用'
            }],
            current: 1,
            pagesize: 8,
            total:'',
            addCustomerShow:false,
            changeStatus:false,
            recVis:false,
            accIsclose:false,
            carRecclose:false,
            recVisList:false
          }
        },
          created() {
          this.loadData();
        },
        methods:{
          addCustomer(formName){
                this.$refs[formName].validate(async (valid) => {
                if(valid) {
                  console.log(this.customer);
                  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;
            console.log(recoder);

            const response = await this.$http.post(`lowerService/customeRecQuery`, {"customerName":recoder.customerName,"companyName":recoder.companyName});
            if (response.data.code === 0) {
              this.customerRec = response.data.data;
            }
          },
           async recInfoList(recoder){
            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() {
            customerRec = {};
          },
          // 列表展示
          async loadData() {
            const formData = new FormData();
            formData.append('current', this.current);
            formData.append('size', this.pagesize);

            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();
            console.log(`每页 ${val} 条`);
          },
          handleCurrentChange(val) {
            this.current = val;
              this.loadData();
            // console.log(`当前页: ${val}`);
          }
        }
      };
</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>