SmartCommunity/smart/src/views/vehicleInformation/setpPage/details.vue

<template>
  <div>
    <el-form
      ref="formDate"
      label-width="80px"
      :rules="rules"
      :model="formDate"
    >
      <div class="formContent-item_title">基本信息</div>
      <el-row>
        <el-col :span="9">
          <el-form-item
            label="名称"
            prop="userName"
          >
            <el-input
              placeholder="请输入车主名称"
              v-model="formDate.userName"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item
            label="手机号"
            prop="tel"
          >
            <el-input
              placeholder="请输入手机号"
              v-model="formDate.tel"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col
          :span="4  "
          style="margin-left: 15px;"
        >
          <el-button
            type="primary"
            @click="personnel"
          >调取人员信息</el-button>
        </el-col>
        <el-col :span="9">
          <el-form-item label="房间">
            <el-select
              placeholder="请选择房间"
              clearable
              v-model="formDate.resDate"
              @change='formDateResDate'
            >
              <el-option
                v-for="(itemse,ix) in room"
                :key="ix"
                :label='itemse.name'
                :value='itemse.label'
                @click.native="resDate(itemse)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="备注信息">
            <el-input
              placeholder="请输入备注信息"
              v-model="formDate.remark"
            ></el-input>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="9">
          <el-form-item label="车位设置">
            <el-select
              placeholder="请选择停车场"
              clearable
              v-model="formDate.parkId"
            >
              <el-option
                v-for="(item,index) in nameParkingLot"
                :key="index"
                :value="item.label"
                :label="item.name"
                @click.native="parkingLot(item.name)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="formContent-item_title">内部车信息</div>
      <el-row>
        <el-col :span="9">
          <el-form-item label="车牌类型">
            <!--  prop="carTypes" -->
            <el-select
              placeholder="请选择车牌类型"
              clearable
              v-model="formDate.carTypes"
            >
              <el-option
                label="临时车"
                value="0"
                @click.native="carTypes"
              ></el-option>
              <el-option
                label="VIP车"
                value="1"
                @click.native="carTypes"
              ></el-option>
              <el-option
                label="月租车"
                value="2"
                @click.native="carTypes"
              ></el-option>
              <el-option
                label="充值车"
                value="3"
                @click.native="carTypes"
              ></el-option>
              <el-option
                label="时租车"
                value="4"
                @click.native="carTypes"
              ></el-option>
              <el-option
                label="产权车"
                value="5"
                @click.native="carTypes"
              ></el-option>
              <el-option
                label="计次车"
                value="6"
                @click.native="carTypes"
              ></el-option>
              <el-option
                label="贵宾卡"
                value="7"
                @click.native="carTypes"
              ></el-option>
              <el-option
                label="员工卡"
                value="8"
                @click.native="carTypes"
              ></el-option>
              <el-option
                label="大客车"
                value="9"
                @click.native="carTypes"
              ></el-option>
              <el-option
                label="预约车"
                value="100"
                @click.native="carTypes"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="充值规则">
            <!-- prop="ruleId" -->
            <el-select
              placeholder="请选择充值规则"
              clearable
              v-model="formDate.ruleId"
              @click.native="parkingLotes"
            >

              <!-- recharge -->
              <el-option
                v-for="(itemes,indexes) in recharge"
                :key="indexes"
                :label='itemes.name'
                :value='itemes.label'
              ></el-option>

            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="9">
          <el-form-item label="首充时间">
            <el-date-picker
              type="date"
              placeholder="首充时间"
              value-format="yyyy-MM-dd"
              :editable="false"
              @change="timeToggle"
              v-model="formDate.beginTime"
            >
            </el-date-picker>
          </el-form-item>
        </el-col> -->
      </el-row>

      <div class="formContent-item_title">
        <el-row>
          <el-col :span="2">车位设置</el-col>
          <el-col
            :span="8"
            style="margin-top: -5px;"
          >
          </el-col>
        </el-row>
        <el-row>
          <el-col-2>
            <el-button
              type="primary"
              @click="addTime"
            >新增</el-button>
          </el-col-2>
        </el-row>

        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :cell-style="{'text-align':'center'}"
        >
          <el-table-column
            class="tableColumn"
            align="center"
          >

            <!-- label="可停区域" -->
            <template slot-scope="scope">

              <el-form-item
                prop="parkingArea"
                ref="againValue"
                style="float: left; margin: 15px auto ;"
              >

                <el-select
                  placeholder="请选择"
                  v-model="tableData[scope.$index].parkingArea"
                  @click.native="parking"
                  style="float: left;"
                >
                  <el-option
                    v-for="(item,index) in eloption"
                    :key="index"
                    :value='item.value'
                    :label="item.label"
                    @click.native="parked(item,scope.$index)"
                  ></el-option>
                </el-select>
              </el-form-item>

            </template>
          </el-table-column>

          <el-table-column
            label="占用车位"
            align="center"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="tableData[scope.$index].num"
                @click="tableDataNum(tableData[scope.$index].num)"
              ></el-input-number>
            </template>

          </el-table-column>
          <el-table-column
            label="位置信息"
            align="center"
          >
            <template slot-scope="scope">

              <el-input
                v-model="tableData[scope.$index].positionInformation"
                @click.native="positionInformation(scope.$index)"
                placeholder="请选择车位"
              ></el-input>
            </template>

          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="light"
                placement="bottom"
                content="删除"
              >
                <i
                  class="zoniot_font zoniot-icon-shanchu redText"
                  @click="deleteUserByUserName(scope.$index)"
                ></i>
              </el-tooltip>
            </template>

          </el-table-column>
        </el-table>

      </div>

      <div class="formContent-item_title">
        <el-row>
          <el-col :span="2">车位设置</el-col>
        </el-row>
        <el-row>
          <el-col-2>
            <el-button
              type="primary"
              @click="addTimes"
            >新增</el-button>
          </el-col-2>
        </el-row>

        <el-table
          :data="parkingSpaceSetting"
          border
          style="width: 100%"
          :cell-style="{'text-align':'center'}"
        >

          <el-table-column
            align="center"
            width="230"
          >
            <template slot-scope="scope">

              <el-col
                :span="10"
                style="float: left; "
              >
                <el-form-item
                  prop="againInput"
                  ref="againInput"
                  style="float: left; margin: 15px auto;"
                >

                  <el-select v-model="parkingSpaceSetting[scope.$index].licensePlate">

                    <el-option
                      v-for="(item,index) in beforelicense"
                      :key="index"
                      :value='item.label'
                      :label="item.label"
                      @click.native="license"
                    ></el-option>

                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">

                <el-form-item
                  prop="againLicense"
                  ref="againLicense"
                  style="float: left; margin: 15px auto;"
                >
                  <el-input
                    placeholder="车牌号"
                    v-model="parkingSpaceSetting[scope.$index].license"
                    clearable
                    ref="searchInput"
                    @input="parkingSpace()"
                    @blur="Setting()"
                  >
                  </el-input>
                </el-form-item>

              </el-col>
            </template>
          </el-table-column>
          <el-table-column
            label="进出凭据（卡号/ETC/扫码）"
            align="center"
            width="230"
          >
            <template slot-scope="scope">
              <el-input
                placeholder="进出凭据"
                v-model="parkingSpaceSetting[scope.$index].accessCredentials"
                clearable
              >
              </el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            align="center"
          ><template slot-scope="scope">
              <el-select v-model="parkingSpaceSetting[scope.$index].state">
                <el-option
                  label="启用"
                  value="1"
                ></el-option>
                <el-option
                  label="禁用"
                  value="2"
                ></el-option>
              </el-select>
            </template>

          </el-table-column>
          <el-table-column
            label="备注"
            align="center"
          >
            <template slot-scope="scope">
              <el-input
                placeholder="备注"
                v-model="parkingSpaceSetting[scope.$index].remarks"
                clearable
              >
              </el-input>
            </template>

          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
          >
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="light"
                placement="bottom"
                content="删除"
              >
                <i
                  class="zoniot_font zoniot-icon-shanchu redText"
                  @click="defult(scope.$index)"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="light"
                placement="bottom"
                content="编辑"
              >
                <span>
                  <img
                    src="../../../assets/img/btn_peizhi.png"
                    alt=""
                    style="width: 15px; height: 13px; margin-left: 10px; cursor: pointer;"
                    @click="addEdit(scope.$index)"
                  >
                </span>

              </el-tooltip>
            </template>

          </el-table-column>
        </el-table>
      </div>
    </el-form>

    <!-- </el-form> -->
  </div>
</template>



<script>
import { parse } from 'path';
import native from './native.vue'
import configure from './configure.vue';
export default {
  props: ['params', configure],
  data () {
    return {
      url: '',
      areaNamed: [],
      formDate: {
        userName: '',
        // tel: '17688920088',
        tel: '',
        residentId: '',
        resDate: '',
        remark: '',
        carType: '',
        carTypes: '',
        ruleId: '',
        beginTime: '',
        parkId: '',
        id: '',
        sort: '',
        areaName: '',
        idName: '',
        res: '',
        // 校验
        parking: false,
        parkingArea: '',
        againInput: '',
        againLicense: ''
      },
      tableData: [
        {
          parkingArea: '',
          positionInformation: '',
          areaName: '',
          parkingId: [],
          num: 1
        },
      ],
      parkingSpaceSetting: [
        {
          licensePlate: '',
          license: '',
          accessCredentials: '',
          state: '1',
          remarks: ''
        }
      ],
      eloption: [],

      // parkingArea: '',//可停区域
      beforelicense: [
        {
          value: '1',
          label: '京'
        },
        {
          value: '2',
          label: '津'
        },
        {
          value: '3',
          label: '冀'
        },
        {
          value: '4',
          label: '晋'
        },
        {
          value: '5',
          label: '蒙'
        },
        {
          value: '6',
          label: '辽'
        },
        {
          value: '7',
          label: '吉'
        },
        {
          value: '8',
          label: '黑'
        },
        {
          value: '9',
          label: '沪'
        },
        {
          value: '10',
          label: '苏'
        },
        {
          value: '11',
          label: '浙'
        },
        {
          value: '12',
          label: '皖'
        },
        {
          value: '13',
          label: '闽'
        },
        {
          value: '14',
          label: '赣'
        },
        {
          value: '15',
          label: '鲁'
        },
        {
          value: '16',
          label: '豫'
        },
        {
          value: '17',
          label: '鄂'
        },
        {
          value: '18',
          label: '湘'
        },
        {
          value: '19',
          label: '粤'
        },
        {
          value: '20',
          label: '桂'
        },
        {
          value: '21',
          label: '琼'
        }
        ,
        {
          value: '22',
          label: '渝'
        }
        ,
        {
          value: '23',
          label: '川'
        }
        ,
        {
          value: '24',
          label: '贵'
        }
        ,
        {
          value: '25',
          label: '云'
        },
        {
          value: '26',
          label: '藏'
        },
        {
          value: '27',
          label: '陕'
        },
        {
          value: '28',
          label: '甘'
        },
        {
          value: '29',
          label: '青'
        }
        ,
        {
          value: '30',
          label: '宁'
        }
        ,
        {
          value: '31',
          label: '新'
        }

      ],
      rules: {
        userName: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        tel: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/, message: '请输入正确的电话' }
        ],
        carTypes: [
          { required: true, message: '请选择车牌类型', trigger: 'change' }
        ],
        ruleId: [
          { required: true, message: '请选择充值规则', trigger: 'change' }
        ],
        parkingArea: [
          { required: true, message: '请选择可停区域', trigger: 'change' }
        ],
        againInput: [
          { required: true, message: '请选择车牌', trigger: 'change' },
        ],
        againLicense: [
          { required: true, message: '请输入车牌号', trigger: 'change' },
        ]

      },


      room: [],
      nameParkingLot: [],
      nameParkingLotName: '',
      form: [
        {
          vehicleType: '',
          vehicleColor: '',
          vehicleColors: '',
          vehicleBrand: ''
        }

      ],
      fullCarNoStr: '',
      plateNoInfo: [],
      // 充值规则
      recharge: []
    };
  },
  methods: {
    carTypes () {
      // alert(1)
      this.formDate.ruleId = ''
    },
    // 车牌号
    // @input="parkingSpace()"
    // @blur="Setting()"
    parkingSpace () {
      // parkingSpaceSetting[scope.$index].license
      for (let i = 0; i < this.parkingSpaceSetting.length; i++) {
        console.log(this.parkingSpaceSetting[i].license);
        if (this.parkingSpaceSetting[i].license.length == 0) {
          this.formDate.againLicense = ''
          this.rules.againLicense[0].required = !this.formDate.parking;
        } else {
          this.formDate.againLicense = '验证'
          this.rules.againLicense[0].required = this.formDate.parking;
          this.clearValidate('againLicense');
        }
      }
    },
    Setting () {
      for (let i = 0; i < this.parkingSpaceSetting.length; i++) {
        console.log(this.parkingSpaceSetting[i].license);
        if (this.parkingSpaceSetting[i].license.length == 0) {
          this.formDate.againLicense = ''
          this.rules.againLicense[0].required = !this.formDate.parking;
        } else {
          this.formDate.againLicense = '验证'
          this.rules.againLicense[0].required = this.formDate.parking;
          this.clearValidate('againLicense');
        }
      }
    },

    clearValidate (formName) {
      this.$refs[formName].clearValidate();
    },

    resDate (val) {

      this.formDate.resDate = val.label;
      this.formDate.id = val.residentId;
      this.formDate.idName = val.name;
    },





    parked (item, id) {
      // this.areaNamed = [];
      if (this.areaNamed[id] != undefined) {
        this.areaNamed[id] = item.label
      }
      this.areaNamed.push(item.label);
      this.formDate.sort = item.startDate;
      if (this.rules.parkingArea[0].required == true && this.formDate.parkingArea == '') {
        this.formDate.parkingArea = '验证'
        this.rules.parkingArea[0].required = this.formDate.parking;
        this.clearValidate('againValue');
      }



    },

    licenseVerification () {
      if (this.rules.againInput[0].required == true && this.formDate.againInput == '') {
        this.formDate.againInput = '验证'
        this.rules.againInput[0].required = this.formDate.parking;
        this.clearValidate('againInput');
        this.$refs.searchInput.focus();
      }
    },

    license () {
      this.licenseVerification();


    },
    // 充值规则
    rechargeRules () {
      this.recharge = []
      this.$http
        .get('/sc-community/parkingCar/queryRechargeRules', {
          carType: this.formDate.carTypes == '临时车' ? '0' :
            this.formDate.carTypes == 'VIP车' ? '1' :
              this.formDate.carTypes == '月租车' ? '2' :
                this.formDate.carTypes == '充时车' ? '3' :
                  this.formDate.carTypes == '时租车' ? '4' :
                    this.formDate.carTypes == '产权车' ? '5' :
                      this.formDate.carTypes == '计次车' ? '6' :
                        this.formDate.carTypes == '贵宾车' ? '7' :
                          this.formDate.carTypes == '员工卡' ? '8' : this.formDate.carTypes
          , parkingId: this.formDate.parkId
        })
        .then(({ data, msg, status }) => {
          console.log('data', data);

          for (let i = 0; i < data.length; i++) {
            this.recharge.push({
              name: data[i].ruleName,
              label: data[i].ruleId
            })
          }

        })
        .catch(() => { });
    },
    parkingLotes () {
      if (this.nameParkingLotName.length == 0) {
        this.$message.error('请选择停车场');
      } else if (this.formDate.carTypes.length == 0) {
        this.$message.error('请选择车牌类型');
      } else {
        this.rechargeRules();
      }
    },
    parkingLot (name) {
      this.nameParkingLotName = name;
    },
    // 调用用户信息
    personnel () {
      if (this.formDate.tel.length == 0) {
        this.$message.error('请输入手机号码');
      } else {
        console.log(this.formDate.tel)
        this.room = [];
        this.$http
          .get('/sc-community/parkingCar/getUserInfo', { phone: this.formDate.tel })
          .then(({ data, msg, status }) => {
            for (let i = 0; i < data.houseInfos.length; i++) {
              this.room.push({
                name: data.houseInfos[i].communityName + '-' + data.houseInfos[i].buildingName + '-' + data.houseInfos[i].unitName + '-' + data.houseInfos[i].roomNumber,
                label: data.houseInfos[i].id,
                residentId: data.houseInfos[i].residentId,
              })
            }


            if (this.formDate.resDate == '') {
              this.formDate.resDate = data.houseInfos[0].id;
              this.formDate.id = data.houseInfos[0].residentId;
              this.formDate.idName = data.houseInfos[0].communityName + '-' + data.houseInfos[0].buildingName + '-' + data.houseInfos[0].unitName + '-' + data.houseInfos[0].roomNumber
            }

          })
          .catch(() => { });
      }
    },

    DOMInput () {
      document.querySelectorAll('.is-center')[0].children[0].innerHTML = "<span style='width: 5px;color: #F56C6C; margin-right: 5px;'>*</span><span>可停区域</span>"
      document.querySelectorAll('.is-center')[8].children[0].innerHTML = "<span style='width: 5px;color: #F56C6C; margin-right: 5px;'>*</span><span>车牌号码</span>"
    },

    // 事件处理函数
    getMsgFormSon (data) {
      console.log('data', data);
    },



    addTime () {

      this.tableData.push({
        parkingArea: '',
        positionInformation: '',
        num: 1,
        parkingId: [],
      })
    },
    addTimes () {
      this.parkingSpaceSetting.push({
        licensePlate: '',
        license: '',
        accessCredentials: '',
        state: '1',
        remarks: ''
      });
      this.form.push({
        vehicleType: '',
        vehicleColor: '',
        vehicleColors: '',
        vehicleBrand: ''
      });
    },
    deleteUserByUserName (row) {
      // console.log(row)
      if (this.tableData.length > 1) {
        this.tableData.splice(row, 1);
      }
      return;
    },
    defult (row) {
      if (this.parkingSpaceSetting.length > 1) {
        this.parkingSpaceSetting.splice(row, 1);
        this.form.splice(row, 1);
      }
      return;
    },
    positionInformation (id) {
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/vehicleInformation/setpPage/native.vue',
          width: '500px',
          height: '400px',
          props: {
            callback: resolve,
            id: id,
            positionInformation: this.tableData[id].positionInformation,
            value: this.tableData[id].parkingId,
            count: this.tableData[id].num
          },

          hideStar: true,
          title: '选择车位'
        });
      }).then((data) => {

        var id = data[0].id;
        if (this.tableData[id].num == 1) {
          this.tableData[id].positionInformation = data[0].positionInformation;
          this.tableData[id].parkingId.push(data[0].value);

        } else {
          this.tableData[id].positionInformation = (Array.from(new Set(data[0].positionInformation))).join(',');
          this.tableData[id].parkingId = data[0].value;
        }

      });
    },



    timeToggle (e) {
      console.log(e);
      let start = '00:00:00',
        end = '23:59:59';
      if (!!e) {
        this.formDate.createDate = `${e} ${start}`;
        // this.mixins_query.endDate = `${e} ${end}`;
      } else {
        this.mixins_query.startDate = ``;
        // this.mixins_query.endDate = ``;
      }
    },
    addEdit (row) {

      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/vehicleInformation/setpPage/configure.vue',
          width: '400px',
          height: '340px',
          props: {
            callback: resolve,
            id: row,
            form: this.form
            // positionInformation: this.tableData
          },

          hideStar: true,
          title: '更多配置'
        });
      }).then((data) => {

        var id = data.id;
        this.form[id].vehicleType = data.vehicleType;
        this.form[id].vehicleColor = data.vehicleColor;
        this.form[id].vehicleColors = data.vehicleColors;
        this.form[id].vehicleBrand = data.vehicleBrand;
      });
    },
    // 获取停车场名称
    nameParking () {
      this.nameParkingLot = [];
      this.$http.post('/sc-community/parkingCar/findParkInfo', { pageNum: 1, pageSize: 15 }).then(({ data, status, msg }) => {
        for (let i = 0; i < data.list.length; i++) {
          this.nameParkingLot.push({
            name: data.list[i].garageName,
            label: data.list[i].parkId
          })
        }
      })
    },
    // 获取可停区域
    parking () {
      if (this.formDate.parkId.length == 0) {
        this.$message.error('请输选择停车场');
      } else {
        // 获取可停区域
        this.region();
      }
    },
    region () {

      this.$http.post('/sc-community/parkingCar/findAreaInfo', { parkId: this.formDate.parkId }).then(({ data, status, msg }) => {
        this.eloption = [];
        for (let i = 0; i < data.length; i++) {
          this.eloption.push({
            label: data[i].areaName,
            value: data[i].areaCode,
            startDate: data[i].sort,
          })
        }
      });
    },
    mergeObj (arr, Obj) {
      return arr.map(item => {
        return { ...item, ...Obj }
      })
    },
    submit () {
      if (this.params.comm == 'add') {
        this.url = '/sc-community/parkingCar/updateVehicleInfor'
      } else {
        this.url = '/sc-community/parkingCar/addVehicleInfor'
      }
      this.$refs.formDate.validate((valid) => {
        if (valid) {
          var table = [];
          this.plateNoInfo = [];
          console.log(this.areaNamed)
          for (let i = 0; i < this.tableData.length; i++) {
            this.tableData[i].areaName = (Array.from(new Set(this.areaNamed))).join(',');
            table.push({
              areaId: [this.tableData[i].parkingArea],
              // areaName: this.tableData[i].areaName[i],
              areaName: this.areaNamed[i],
              lotCount: this.tableData[i].num,
              lotName: this.tableData[i].positionInformation,
              parkingIds: this.tableData[i].parkingId,
              carType: this.formDate.carTypes == '临时车' ? '0' :
                this.formDate.carTypes == 'VIP车' ? '1' :
                  this.formDate.carTypes == '月租车' ? '2' :
                    this.formDate.carTypes == '充时车' ? '3' :
                      this.formDate.carTypes == '时租车' ? '4' :
                        this.formDate.carTypes == '产权车' ? '5' :
                          this.formDate.carTypes == '计次车' ? '6' :
                            this.formDate.carTypes == '贵宾车' ? '7' :
                              this.formDate.carTypes == '员工卡' ? '8' : this.formDate.carTypes,
              ruleId: this.formDate.ruleId,
              sequence: this.formDate.sort,
            })

            this.formDate.areaName = this.tableData[i].areaName
          }
          var parkingSpace = [];

          for (let k = 0; k < this.parkingSpaceSetting.length; k++) {
            parkingSpace.push({
              carNo: this.parkingSpaceSetting[k].licensePlate + this.parkingSpaceSetting[k].license,
              cardNo: this.parkingSpaceSetting[k].accessCredentials,
              enable: this.parkingSpaceSetting[k].state == '启用' ? '1' : this.parkingSpaceSetting[k].state == '禁用' ? '2' : this.parkingSpaceSetting[k].state,
              remark: this.parkingSpaceSetting[k].remarks,


              carType: this.form[k].vehicleType,
              carNoColor: this.form[k].vehicleColor,
              carColor: this.form[k].vehicleColors,
              carBrand: this.form[k].vehicleBrand,

            });

            this.fullCarNoStr = this.parkingSpaceSetting[k].licensePlate + this.parkingSpaceSetting[k].license;
            this.plateNoInfo.push((this.parkingSpaceSetting[k].licensePlate + this.parkingSpaceSetting[k].license));

            // for (let j = 0; j < table.length; j++) {
            //   debugger
            //   table[j].carType = this.formDate.carType;
            // }

          }

          this.$http.post(this.url, {
            cardId: this.params.cardId != undefined ? this.params.cardId : '',
            cardName: this.formDate.userName,
            userName: this.formDate.userName,
            tel: this.formDate.tel,
            // houseId: this.formDate.residentId,
            houseId: this.formDate.resDate,
            residentId: this.formDate.id,
            // residentId: this.formDate.ruleId,
            remark: this.formDate.remark,
            cardType: this.formDate.carTypes == '临时车' ? '0' :
              this.formDate.carTypes == 'VIP车' ? '1' :
                this.formDate.carTypes == '月租车' ? '2' :
                  this.formDate.carTypes == '充时车' ? '3' :
                    this.formDate.carTypes == '时租车' ? '4' :
                      this.formDate.carTypes == '产权车' ? '5' :
                        this.formDate.carTypes == '计次车' ? '6' :
                          this.formDate.carTypes == '贵宾车' ? '7' :
                            this.formDate.carTypes == '员工卡' ? '8' : this.formDate.carTypes,
            beginTime: this.formDate.beginTime,
            parkId: this.formDate.parkId,
            areaName: this.formDate.areaName,
            ruleId: this.formDate.ruleId,
            idName: this.formDate.idName,


            carLotList: table,
            parkCarDetails: parkingSpace,


            fullCarNoStr: this.fullCarNoStr,
            plateNoInfo: this.plateNoInfo,


          }).then(({ data, status, msg }) => {
            if (status != 0) {
              this.$message.error(msg);
            } else if (status == 0) {
              this.$message.success('成功');
              this.params.callback();
              this.$emit('close');
            }

          })

        } else {
          return false;
        }
      })

    },
  },
  mounted: function () {
    this.$nextTick(function () {

      this.DOMInput()
    })
  },
  created () {
    // <span style="width: 5px;color: #F56C6C; float: left; margin-right: 5px;">*</span>

    // this.nameParking();

    if (this.params.cardId != undefined) {
      this.formDate.parkingArea = '验证';
      this.formDate.againInput = '验证';
      this.formDate.againLicense = '验证'

      this.params.cardId;
      this.$http.get('/sc-community/parkingCar/getVehicleInfor', { id: this.params.cardId }).then(({ data, msg, status }) => {
        console.log(data);

        this.formDate.userName = data.userName
        this.formDate.tel = data.tel
        // this.personnel();
        // this.formDate.resDate = '1480'
        // this.formDate.resDate = '10243'
        //   this.formDate.resDate = val.label;

        // this.personnel();
        this.formDate.remark = data.remark
        this.formDate.carTypes = data.cardType == 0 ? '临时车'
          : data.cardType == 1 ? 'VIP车'
            : data.cardType == 2 ? '月租车'
              : data.cardType == 3 ? '充时车'
                : data.cardType == 4 ? '时租车'
                  : data.cardType == 5 ? '产权车'
                    : data.cardType == 6 ? '计次车'
                      : data.cardType == 7 ? '贵宾卡'
                        : '员工卡'

        // this.formDate.areaName = data.areaName;

        this.nameParkingLotName = '1';//随便

        this.formDate.beginTime = data.beginTime
        this.formDate.parkId = data.parkId
        var carLotStr = JSON.parse(data.carLotStr)

        this.tableData = [];
        for (let i = 0; i < carLotStr.length; i++) {
          this.tableData.push({
            parkingArea: '',
            areaName: carLotStr[i].areaName,
            num: carLotStr[i].lotCount,
            positionInformation: carLotStr[i].lotName,
            parkingId: carLotStr[i].parkingIds
          })
          this.formDate.areaName = carLotStr[i].areaName;
          // this.tableData[i].areaName = carLotStr[i].areaName 
          this.areaNamed.push(carLotStr[i].areaName);
          // this.tableData[i].carType = data.cardType
          // this.tableData[i].lotCount = carLotStr[i].lotCount
          // this.tableData[i].positionInformation = carLotStr[i].lotName
          // this.tableData[i].parkingId = carLotStr[i].parkingId
          this.formDate.ruleId = carLotStr.ruleId
          this.formDate.sort = carLotStr.sequence

        }
        this.parkingSpaceSetting = [];
        for (let k = 0; k < data.parkCarDetails.length; k++) {
          this.parkingSpaceSetting.push({
            licensePlate: (data.parkCarDetails[k].carNo).substr(0, 1),
            license: (data.parkCarDetails[k].carNo).substr(1),
            state: data.parkCarDetails[k].enable == 1 ? '启用' : '禁用',
            remarks: data.parkCarDetails[k].remark

          })
          // this.parkingSpaceSetting[k].licensePlate = (data.fullCarNoStr).substr(0, 1)
          // this.parkingSpaceSetting[k].license = (data.fullCarNoStr).substr(1)
          // this.parkingSpaceSetting[k].state = data.parkCarDetails[k].enable == 1 ? '启用' : '禁用'
          // this.parkingSpaceSetting[k].remarks = data.parkCarDetails[k].remark

        }

        this.personnel();
        this.rechargeRules();
        this.nameParking();
        this.region();
        this.formDate.resDate = data.houseId;
        // this.personnel();
        for (let i = 0; i < carLotStr.length; i++) {
          this.tableData[i].parkingArea = Number(carLotStr[i].areaId)
          this.formDate.ruleId = carLotStr[i].ruleId
        }
        this.form = [];
        for (let k = 0; k < data.parkCarDetails.length; k++) {
          this.formDate.carType = data.cardType;
          this.form.push({
            vehicleType: data.parkCarDetails[k].carType,
            vehicleColor: data.parkCarDetails[k].carNoColor,
            vehicleColors: data.parkCarDetails[k].carColor,
            vehicleBrand: data.parkCarDetails[k].carBrand
          })
          // this.form[k].vehicleType = data.parkCarDetails[k].carType;
          // this.form[k].vehicleColor = data.parkCarDetails[k].carNoColor
          // this.form[k].vehicleColors = data.parkCarDetails[k].carColor
          // this.form[k].vehicleBrand = data.parkCarDetails[k].carBrand
        }

      });
    } else {
      this.nameParking();
    }



  }
}
</script >


<style lang="scss" >
.el-input--small .el-input__inner {
    cursor: pointer;
}
.el-row {
    margin: 10px !important;
}
tr {
    .el-form-item__content {
        margin-left: 0 !important;
    }
}
</style>