manage_invoice_ui/src/views/platform/carbinding/carbinding.vue

<template>
  <div class="carbinding">
    <!-- 头部细节部分 -->
      <div class="title">
        <el-row>
          <el-col :span="24">
            <div class="top">
               <el-select v-model="formList.companyName" filterable  placeholder="请输入公司名称">
                <el-option
                  v-for="item in companyList"
                  :key="item.companyName"
                  :label="item.companyName"
                  :value="item.companyName">
                </el-option>
              </el-select>
              <el-input  placeholder="请输入车牌号码" class="input-demo" v-model="plateNum"></el-input>
              <el-select v-model="plateColor" placeholder="请选择车牌颜色">
                <el-option
                  v-for="item in optionone"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button type="success" style="margin-left: 1%;" @click="queryLook">查询</el-button>
              <el-button type="success" style="margin-left: 1%;" @click="checkLook">绑定</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    <!-- 头部细节部分结束 -->
      <template>
        <el-table
         class="table"
          ref="multipleTable"
          :data="usertabletwo"
          :height="heightt"
          border
          tooltip-effect="dark"
          @selection-change="handleSelectionChange">
          <el-table-column
          type="selection"
          width="40">
        </el-table-column>
          <el-table-column
            label="车牌号码"
            prop="plateNum"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="mobile"
            label="手机号码"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            label="车牌颜色"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.plateColor == 0">蓝色</span>
              <span v-else-if="scope.row.plateColor == 1">黄色</span>
              <span v-else-if="scope.row.plateColor == 2">黑色</span>
              <span v-else-if="scope.row.plateColor == 3">白色</span>
              <span v-else-if="scope.row.plateColor == 4">渐变绿色</span>
              <span v-else-if="scope.row.plateColor == 5">黄绿渐变色</span>
              <span v-else-if="scope.row.plateColor == 6">蓝白渐变色</span>
              <span v-else-if="scope.row.plateColor == 9">未确定</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="cardId"
            label="ETC卡号"
            show-overflow-tooltip>
          </el-table-column>
          <!-- <el-table-column
            label="操作"
            width="80">
            <template slot-scope="scope" show-overflow-tooltip>
              <span style="cursor: pointer;" @click="checkLook(scope.row)">绑定</span>
            </template>
          </el-table-column> -->
        </el-table>
      </template>

    <!-- 绑定 -->
      <el-dialog
        @close="handleEditDialogClose"
        :visible.sync="binDing"
        style="font-size: 0px;">
        <div class="tou">ETC卡--绑定</div>
        <div class="line"></div>
        <el-form
          label-position="right"
          label-width="110px"
          ref="ruleForm"
          :model="formCodeList">
          <el-form-item label="联系电话">
            <el-input v-model="formCodeList.mobile" auto-complete="off" placeholder="请输入联系电话"></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="validCode">
            <el-input v-model="formBindingList.validCode" auto-complete="off" placeholder="请输入验证码" style="width: 70%;"></el-input>
            <el-button type="success" style="margin-left: 1%; width: 28%;" @click="getCode">获取验证码</el-button>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="binDing = false" type="info">取 消</el-button>
          <el-button type="primary" @click="BindingCard">绑 定</el-button>
        </div>
      </el-dialog>

  </div>
</template>

<script>
export default{
  data() {
    return {
      loading: false,
      rules: {
        bankNumber: [
          { required: true, message: `请输入银行账号`, trigger: `blur` },
          { min: 12, max: 20, message: `长度在 12 到 20 个字符`, trigger: `blur` }
        ],
        address: [
          { required: true, message: `请输入公司地址`, trigger: `blur` }
        ],
        bankAddress: [
          { required: true, message: `请输入开户行`, trigger: `blur` }
        ],
        phone: [
          { required: true, message: `请输入手机号`, trigger: `blur` },
          { min: 11, max: 11, message: `长度在 11 个字符`, trigger: `blur` }
        ],
        dutyParagraph: [
          { required: true, message: `请输入税号`, trigger: `blur` },
          { min: 15, max: 20, message: `长度在 15 到 20 个字符`, trigger: `blur` }
        ],
        company: [
          { required: true, message: `请输入发票抬头`, trigger: `blur` }
        ]
      },
      binDing: false,
      hightt: `0px`,
      current: 1,
      pagesize: 8,
      total: 0,
      usertabletwo: [],
      optionone: [{
        value: `0`,
        label: `蓝色`
      }, {
        value: `1`,
        label: `黄色`
      }, {
        value: `2`,
        label: `黑色`
      }, {
        value: `3`,
        label: `白色`
      }, {
        value: `4`,
        label: `渐变绿色`
      }, {
        value: `5`,
        label: `黄绿渐变色`
      }, {
        value: `6`,
        label: `蓝白渐变色`
      }, {
        value: `9`,
        label: `未确定`
      }],
      plateNum: ``,
      plateColor: ``,
      roleId: ``,
      codeNumber: ``,
      multipleSelection: [],
      formCodeList: {
        'mobile': ``,
        'customerName': ``,
        'companyName': ``,
        'cards': []
      },
      formBindingList: {
        'mobile': ``,
        'customerName': ``,
        'companyName': ``,
        'validCode': ``
      },
      formList: {
        'companyName': ``,
        'customerName': ``,
        'cards': []
      },
      companyList: []
    }
  },
  created() {
    this.heightt = tableHeight  // eslint-disable-line
    this.initCompanyList()
  },
  methods: {
    async queryLook() {
      this.formList.customerName = sessionStorage.getItem(`userName`)
      var object = {}
      object.num = this.plateNum
      object.color = this.plateColor
      this.formList.cards.push(object)
      const response = await this.$http.post(`/selfCarService/queryEtcInfo`, this.formList)
      var {data: { code, msg, data }} = response
      if (code == 0 && msg == `success`) {
        this.usertabletwo = response.data.data
        this.formList.cards = []
      } else {
        this.$message.error(msg)
        this.formList.cards = []
      }
    },
    // 当选择中列表前的小框时候
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    async initCompanyList() {
      const response = await this.$http.post(`lowerService/customeRecQueryList`, {'customerName': sessionStorage.getItem(`userName`), 'bussinessType': `0`})
      if (response.data.code == 0) {
        this.companyList = response.data.data
      }
      if (this.companyList == null || typeof this.companyList == `undefined` || this.companyList == `` || this.companyList.length == 0) {
        this.companyList = [{'companyName': `.`}]
      }
      this.formList.companyName = this.companyList[0][`companyName`]
    },
    // 获取验证码数据
    checkLook() {
      this.formCodeList.companyName = this.formList.companyName
      this.formCodeList.customerName = sessionStorage.getItem(`userName`)
      this.formBindingList.companyName = this.formList.companyName
      this.formBindingList.customerName = sessionStorage.getItem(`userName`)
      var len = this.multipleSelection.length

      var flag = true
      for (var i = 0; i < len; i++) {
        if (this.multipleSelection[0].mobile != this.multipleSelection[i].mobile) {
          flag = false
        } else {
          var object = {};
          object.etcNum = this.multipleSelection[i].id
          this.formCodeList.cards.push(object)
        }
      }
      if (len == 0) {
        this.$message.error(`请选择需要绑定的ETC卡`)
      }
      if (flag == true && len != 0) {
        this.binDing = true
      } else if (len != 0) {
        this.$message.error(`请选择相同手机号下的ETC卡`)
      }
    },

    // 获取验证码
    async getCode() {
      const response = await this.$http.post(`/selfCarService/customerETCRec`, this.formCodeList)
      var {data: { code, msg, data }} = response
      if (code == 0 && msg == `success`) {

      } else {
        this.$message.error(msg)
      }
    },
    // 绑定银行卡
    async BindingCard() {
      this.formBindingList.mobile = this.formCodeList.mobile
      const response = await this.$http.post(`/selfCarService/customerETCRecValid`, this.formBindingList)
      var {data: { code, msg, data }} = response
      if (code == 0) {
        this.binDing = false
        for (var key in this.formBindingList) {
          this.formBindingList[key] = ``
        };
        this.$message({
          type: `success`,
          message: `绑定成功`
        })
        this.binDing = false
      } else {
        this.$message.error(msg)
      }
    },

    // 清空表单数据
    handleEditDialogClose() {
      for (var key in this.formList) {
        this.formList[key] = ``
      };
      for (var key in this.formBindingList) { // eslint-disable-line
        this.formBindingList[key] = ``
      };
      this.formCodeList.cardList = []
      this.formCodeList.mobile = ``
    }
  }
}
</script>

<style>
.carbinding {
  border: 1px solid #d9d9d9;
  border-radius: 10px;
}
.carbinding .title {
  font-size: 5px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.carbinding .top {
  padding-top: 20px;
  padding-left: 20px;
}
.carbinding .text {
  display: inline-block;
  color: #000;
  font-size: 16px ;
  margin-left: 1%;
}
.carbinding .input-demo {
  display: inline-block;
  width: 20%;
  margin-left: 1%;
}
.carbinding .block {
  font-size: 5px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 20px;
}

.carbinding .tou {
  font-size: 20px;
  height: 30px;
  line-height: 30px;
  padding-top: 15px;
}
.carbinding .line {
  margin-top: 15px;
  margin-bottom: 15px;
  width: 100%;
  height: 2px;
  background-color: #d9d9d9;
}
.carbinding .xinxi {
  text-align: center;
  margin: 15px auto;
  font-size: 18px;
}

.carbinding .el-dialog__header, .el-dialog__body {
  padding: 0 20px;
}

</style>