GLT-FreeCarRegistration/FreeCarRegistrationView/src/views/wxCharCarUser/WxVehicleBind.vue

<template>
<!--    <div  class="version-info">-->
<!--      版本号： {{ version }}-->
<!--    </div>-->
  <el-row>
    <el-col :span="24">
      <div style="padding: 10px 0">
        <el-input style="width: 150px;margin-left: 0.5%" placeholder="车牌号" v-model="searchForm.vehicleid"
                  clearable></el-input>
        <el-select v-model="searchForm.vehiclecolor" class="m-2" clearable placeholder="车牌颜色"
                   style="width: 150px;margin-left: 0.5%">
          <el-option
              v-for="item in CarColorList"
              :label="item.text"
              :value="item.value"
          />
        </el-select>

        <el-button type="primary" style="margin-left: 0.5%;margin-top: 0px;" @click="network">
          <el-icon style="vertical-align: middle;">
            <search/>
          </el-icon>
          <span style="vertical-align: middle;"> 搜索 </span>
        </el-button>
        <el-button type="primary" style="margin-left: 0.5%;margin-top: 0px;" @click="reNetwork">
          <el-icon>
            <Refresh/>
          </el-icon>
          <span style="vertical-align: middle;"> 重置 </span>
        </el-button>
        <el-button type="primary" style="margin-top: 5px;margin-top: 0px;" @click="addItem" v-if="addShow">
          <el-icon>
            <plus/>
          </el-icon>
          <span style="vertical-align: middle;"> 新增 </span>
        </el-button>
        <el-button type="success" style="margin-top: 5px;margin-top: 0px;" @click="completeThis(null)"
                   v-if="completeShow">
          <el-icon>
            <Select/>
          </el-icon>
          <span style="vertical-align: middle;"> 审核 </span>
        </el-button>

        <el-button type="danger" style="margin-top: 5px;margin-top: 0px;" @click="deleteSelect(null)" v-if="addShow">
          <el-icon>
            <delete/>
          </el-icon>
          <span style="vertical-align: middle;"> 删除 </span>
        </el-button>
      </div>
      <el-table :data="tableData" border
                highlight-current-row="true"
                style="width: 100%;"
                :height=myHeight
                @selection-change="handleSelectionChange"
                v-loading="tableLoading"
      >
        <el-table-column :resizable="false" fixed type="selection" width="50" align="center"></el-table-column>
        <el-table-column prop="vehicleid" fixed label="车牌" align="center" width="120"></el-table-column>
        <el-table-column prop="platecolorname" fixed label="车牌颜色" align="center"></el-table-column>
        <el-table-column prop="typename" label="车型" align="center" width="120"></el-table-column>
        <el-table-column prop="phoneNumber" label="手机号" align="center" width="160"></el-table-column>
        <el-table-column prop="freetypename" label="免费类型" align="center"></el-table-column>
        <el-table-column prop="freeStartTime" label="免费开始时间" align="center" width="180"></el-table-column>
        <el-table-column prop="freeEndTime" label="免费结束时间" align="center" width="180"></el-table-column>
        <el-table-column prop="freeTimes" label="免费次数" align="center" width="100" :formatter="transforFreeTimes"></el-table-column>
        <el-table-column prop="applyTimes" label="使用次数" align="center" width="100" ></el-table-column>
        <el-table-column prop="surplusTimes" label="剩余次数" align="center" width="100" :formatter="transforSurplusTimes" ></el-table-column>
        <el-table-column prop="adduserid" label="添加人ID" align="center"></el-table-column>
        <el-table-column prop="adduser" label="添加人" align="center"></el-table-column>
        <el-table-column prop="freesta" label="免费站" align="center" :formatter="transforSta"
                         width="120"></el-table-column>
        <el-table-column prop="advancefee" label="预缴金额" align="center" width="90"></el-table-column>
        <el-table-column prop="applyType" label="申请" align="center" width="90" v-if="completeShow">
          <template v-slot="scope">
            <el-tooltip effect="dark" placement="top" content="解绑申请">
              <el-button style="width: 23%;margin-left: 1%;margin-top: 2%" @click="unBindThis(scope.row)" type="warning"
                         size="default"
                         v-if="changDisPlay(scope.row)"
                         :icon="Switch">
              </el-button>
            </el-tooltip>
            <p v-if="!changDisPlay(scope.row)">无申请</p>
          </template>


        </el-table-column>
        <el-table-column prop="iscomplete" label="审核状态" align="center" width="100">

          <template v-slot="{ row }">
            <span :style="getColorStyle(row)">{{ isCompleted(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column :resizable="false" prop="right" label="操作" align="center" width="100" fixed="right">
          <template v-slot="scope">
            <el-tooltip effect="dark" placement="top" content="编辑">
              <el-button style="width: 23%;margin-left: 1%;margin-top: 2%" @click="editThis(scope.row)" type="warning"
                         size="default"
                         v-if="addShow"
                         :icon="Edit">
              </el-button>
            </el-tooltip>
            <el-tooltip effect="dark" placement="top" content="审核通过">
              <el-button style="width: 23%;margin-left: 2%;margin-top: 0%;" @click="completeThis(scope.row)"
                         type="success"
                         size="default"
                         v-if="completeShow"
                         :icon="Select">
              </el-button>
            </el-tooltip>
            <el-tooltip effect="dark" placement="top" content="删除">
              <el-button style="width: 23%;margin-left: 2%;margin-top: 2%" @click="deleteSelect(scope.row)"
                         type="danger"
                         v-if="addShow"
                         size="default" :icon="Delete">
              </el-button>
            </el-tooltip>
            <el-tooltip effect="dark" placement="top" content="审核不通过">
              <el-button style="width: 23%;margin-left: 2%;margin-top: 0%;" @click="closeBoldThis(scope.row)"
                         type="warning"
                         size="default"
                         v-if="completeShow"
                         :icon="CloseBold">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-config-provider :locale="locale">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.pageNum"
            :page-sizes="[ 10, 50, 100]"
            :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="searchForm.total">
        </el-pagination>
      </el-config-provider>
    </el-col>
  </el-row>
  <el-dialog title="免费车登记操作" v-model="editShow" width="60%" top="0.5%" destroy-on-close
             :close-on-click-modal="false">
    <el-form :model="editThisRow" size="medium" :rules="editRules" ref="editThisRow">
      <el-row>
        <el-col :span="12">
          <el-form-item label="车牌" :label-width="formLabelWidth" prop="vehicleid">
            <el-input v-model="editThisRow.vehicleid" autocomplete="off" :disabled="!editThisRow.isAdd"
                      clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌颜色" :label-width="formLabelWidth" prop="vehiclecolor">
            <el-select v-model="editThisRow.vehiclecolor" class="m-2" placeholder="请选择车牌颜色"
                       style="width: 100%;"
                       :disabled="!editThisRow.isAdd"
            >
              <el-option
                  v-for="item in CarColorList"
                  :label="item.text"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车型" :label-width="formLabelWidth" prop="vehicletype">
            <el-select v-model="editThisRow.vehicletype" class="m-2" placeholder="请选择车型"
                       style="width: 100%;"
            >
              <el-option
                  v-for="item in CarTypeList"
                  :label="item.text"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" :label-width="formLabelWidth" prop="phoneNumber">
            <el-input v-model="editThisRow.phoneNumber" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="免费类型" :label-width="formLabelWidth" prop="freetype">
            <el-select v-model="editThisRow.freetype" class="m-2" placeholder="请选择免费类型"
                       style="width: 100%;"
                       @change="showadvancefee(editThisRow.freetype)"
            >
              <el-option
                  v-for="item in FreeTypeList"
                  :label="item.text"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="免费开始时间" :label-width="formLabelWidth" prop="freeStartTime">
            <el-date-picker
                v-model="editThisRow.freeStartTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :clearable="false"
                style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="免费结束时间" :label-width="formLabelWidth" prop="freeEndTime">
            <el-date-picker
                v-model="editThisRow.freeEndTime"
                type="datetime"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                :clearable="false"
                style="width: 100%;"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="免费站" :label-width="formLabelWidth" prop="freesta">
            <el-select v-model="editThisRow.freesta" class="m-2" placeholder="请选择免费站"
                       multiple
                       style="width: 100%;"
            >
              <el-option
                  v-for="item in freestas"
                  :label="item.text"
                  :value="item.freesta"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预缴金额" :label-width="formLabelWidth" prop="advancefee" v-if="isShow">
            <el-input v-model.number="editThisRow.advancefee" autocomplete="off" clearable
                      oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value<0)value=0"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="免费次数" :label-width="formLabelWidth" prop="freeTimes" v-if="isShowFreeTimes">
            <el-input v-model.number="editThisRow.freeTimes" autocomplete="off"
                      oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value<0)value=0"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="图像" :label-width="formLabelWidth" prop="imageList" :disabled="!editThisRow.isAdd">
            <gpy ref="gpy"></gpy>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editShow=false"> 关闭</el-button>
        <el-button type="primary" @click="commit()"> 确认</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog title="处理绑定申请操作" v-model="unBindShow" width="50%" top="0.5%" destroy-on-close
             :close-on-click-modal="false">
    <el-form :model="unBindThisRow" size="medium" :rules="unBindRules" ref="unBindThisRow">
      <el-row>
        <el-col :span="12">
          <el-form-item label="车牌" :label-width="formLabelWidth" prop="vehicleid">
            <el-input v-model="unBindThisRow.vehicleid" autocomplete="off" disabled clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车牌颜色" :label-width="formLabelWidth" prop="vehiclecolor">
            <el-select v-model="unBindThisRow.vehiclecolor" class="m-2" placeholder="请选择车牌颜色"
                       style="width: 100%;"
                       disabled
            >
              <el-option
                  v-for="item in CarColorList"
                  :label="item.text"
                  :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="原微信昵称" :label-width="formLabelWidth" prop="wxname">
            <el-input v-model="unBindThisRow.wxname" disabled autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="更换微信昵称" :label-width="formLabelWidth" prop="managername">
            <el-input v-model="unBindThisRow.managername" disabled autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="原因" :label-width="formLabelWidth" prop="text" >
            <el-input v-model="unBindThisRow.text" type="textarea" :rows="5" placeholder="请输入原因"/>
          </el-form-item>
        </el-col>


      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="unBindShow=false"> 关闭</el-button>
        <el-button type="warning" @click="notApproved()">解绑不通过</el-button>
        <el-button type="primary" @click="approved()">解绑通过</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import {getPage, getCarColorList, commitVehicleBind, deleteVehicleBind} from "../../util/api/api.js";
import pro from '../../util/tool.js';
import {Delete, Edit, Reading, ZoomIn, Select, CloseBold, Switch} from '@element-plus/icons-vue'
import {ElMessage} from "element-plus/es";
import {ElMessageBox} from "element-plus";
import {
  completeSetup,
  getCarTypeList,
  getFreeTypeList, getVersionNumber,
  isShowAdvanceFee,
  notPassed,
  queryImageList, queryWxName, updateApproved
} from "../../util/api/api";
import gpy from './gpy.vue';
import moment from "moment";

export default {
  name: "WxVehicleBind",
  components: {gpy},
  data() {
    //车牌号校验
    let validatorCarno = (rule, value, callback) => {
      let flag = false
      let xreg =
          /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
      let creg =
          /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
      if (value.length === 7) {
        flag = creg.test(value);
      } else if (value.length === 8) {
        flag = xreg.test(value);
      }
      if (flag) {
        callback();
      } else {
        return callback(new Error("车牌号格式不正确,请核对后重新输入"));
      }
    };
    return {
      Delete,
      Edit,
      Reading,
      ZoomIn,
      Select,
      CloseBold,
      Switch,
      version: '',

      unBindShow: false,
      unBindThisRow: {},

      completeShow: false,
      isShowFreeTimes: false,
      addShow: false,
      isShow: false,
      locale: zhCn,
      tableData: [],
      CarColorList: [],
      FreeTypeList: [],
      CarTypeList: [],
      freestas: [
        {
          freesta: 'G',
          text: '嘎鲁图'
        },
        {
          freesta: 'T',
          text: '台格'
        }
      ],
      multipleSelection: [],
      searchForm: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      man: '',
      manno: '',
      wxIsComplete: '1',
      formLabelWidth: '130px',
      myHeight: 500,
      tableLoading: false,
      editShow: false,
      editThisRow: {},
      editRules: {
        vehicleid: [{required: true, message: '请输入车辆车牌号码', trigger: 'blur'},
          {validator: validatorCarno, message: '车牌号格式不正确'}],
        vehiclecolor: [{required: true, message: '请输入车牌颜色', trigger: 'blur'}],
        vehicletype: [{required: true, message: '请选择车型', trigger: 'blur'}],
        phoneNumber: [{required: true, message: '请输入手机号', trigger: 'blur'}],
        freetype: [{required: true, message: '请选择免费类型', trigger: 'blur'}],
        freeStartTime: [{required: true, message: '请选择免费开始时间', trigger: 'blur'}],
        freeEndTime: [{required: true, message: '请选择免费结束时间', trigger: 'blur'}],
        freeTimes: [{required: true, message: '请输入免费次数', trigger: 'blur'}],
        freesta: [{required: true, message: '请选择免费站', trigger: 'blur'}],
        advancefee: [{required: true, message: '请输入预缴金额', trigger: 'blur'}],
        // imageList: [{required: true, message: '请上传图片', trigger: 'blur'}],
      },
      unBindRules: {
        // vehicleid: [{required: true, message: '请输入车辆车牌号码', trigger: 'blur'},
        //   {validator: validatorCarno, message: '车牌号格式不正确'}],
        // vehiclecolor: [{required: true, message: '请输入车牌颜色', trigger: 'blur'}],
        // wxname: [{required: true, message: '请输入原微信昵称', trigger: 'blur'}],
        // managername: [{required: true, message: '请输入更换微信', trigger: 'blur'}],
        // applytime: [{required: true, message: '请选择操作时间', trigger: 'blur'}],
      }
    }
  },
  methods: {
    //获取用户的基础信息
    queryUserBasic() {
      // wxIsComplete 0-普通用户，1-审核人员，2-是管理员
      this.man = localStorage.getItem("man");
      this.manno =  localStorage.getItem("manno");
      this.wxIsComplete =  localStorage.getItem("wxIsComplete");
      // this.man = "测试号";
      // this.manno = "A/WmzjNaj6k=";
      // this.wxIsComplete = "2";
      if (this.wxIsComplete === '0') {
        this.addShow = true;
      } else if (this.wxIsComplete === '1') {
        this.completeShow = true;
      } else if (this.wxIsComplete === '2') {
        this.addShow = true;
        this.completeShow = true;
      }
    },
    //3-不通过
    notApproved() {
      ElMessageBox.confirm(
          '是否把申请状态更改为不通过？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        this.unBindThisRow.approved = false;
        updateApproved(this.unBindThisRow).then((res) => {
          // console.log(res)
          if (res) {
            ElMessage({
              message: '申请处理完成！',
              type: 'success',
            });
            this.unBindShow = false;
            this.network()
          } else {
            ElMessage.error(('申请处理失败！'))
            this.network()
          }
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消！',
        })
      })

    },
    //2-通过
    approved() {
      ElMessageBox.confirm(
          '是否把申请状态更改为通过？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        this.unBindThisRow.approved = true;
        updateApproved(this.unBindThisRow).then((res) => {
          // console.log(res)
          if (res) {
            ElMessage({
              message: '申请处理完成！',
              type: 'success',
            });
            this.unBindShow = false;
            this.network()
          } else {
            ElMessage.error(('申请处理失败！'))
            this.network()
          }
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消！',
        })
      })


    },

    unBindThis(row) {
      this.unBindShow = true;
      this.unBindThisRow = JSON.parse(JSON.stringify(row));
      const vehicleid = this.unBindThisRow.vehicleid;
      const vehiclecolor = this.unBindThisRow.vehiclecolor;
      const wxid = this.unBindThisRow.wxid;
      const managerWXID = this.unBindThisRow.managerWXID;
      queryWxName({wxid: wxid}).then((res) => {
        // console.log(res)
        this.unBindThisRow.wxname = res;
      })
      queryWxName({wxid: managerWXID}).then((res) => {
        // console.log(res)
        this.unBindThisRow.managername = res;
      })
      // queryReasonText({vehicleid: vehicleid,vehiclecolor:vehiclecolor}).then((res) => {
      //   // console.log(res)
      //   this.unBindThisRow.text = res;
      // })


    },

    changDisPlay(row) {
      // console.log(row.applyType)
      if (row.applyType === 0 || row.applyType === 1) {
        return true;
      } else {
        return false;
      }
    },


    queryVersion() {
      getVersionNumber({}).then((res) => {
        // console.log(res)
        this.version = res;
      })
    },
    getColorStyle(row) {
      switch (row.iscomplete) {
        case 1:
          return 'color: green;';
        case 2:
          return 'color: orange;';
        default:
          return 'color: red;';
      }
    },
    isCompleted(row) {
      //审核字段 0-未审核 1-通过 2-未通过
      if (row.iscomplete === 0) {
        return '未审核'
      } else if (row.iscomplete === 1) {
        return '通过'
      } else if (row.iscomplete === 2) {
        return '未通过'
      }
    },
    //审核不通过
    closeBoldThis(row) {
      ElMessageBox.confirm(
          '是否把审核状态更改为未通过？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        notPassed(row).then((res) => {
          if (res) {
            ElMessage({
              message: '未通过设置成功！',
              type: 'success',
            });
            this.network()
          } else {
            ElMessage.error(('未通过设置失败！'))
            this.network()
          }
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消！',
        })
      })

    },
    //审核通过
    completeThis(row) {
      let carNoList = [];
      if (row != null) {
        carNoList[0] = row;
      } else {
        carNoList = this.multipleSelection;
      }
      if (carNoList.length === 0) {
        ElMessage({
          showClose: true,
          message: '请选择要审核的数据！',
          type: 'warning',
        })
        return;
      }
      ElMessageBox.confirm(
          '是否批量审核' + carNoList.length + '条数据？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        completeSetup(carNoList).then((res) => {
          if (res) {
            ElMessage({
              message: '审核成功！',
              type: 'success',
            });
            this.network()
          } else {
            ElMessage.error(('审核失败！'))
            this.network()
          }
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消！',
        })
      })

    },


    showadvancefee(freetype) {
      // console.log(freetype);
      this.isShowFreeTimes=false;
      this.editThisRow.freeTimes = -1000;
      if(freetype===5){
        this.isShowFreeTimes=true;
        this.editThisRow.freeTimes = 0;
      }

      isShowAdvanceFee({freetype: freetype}).then((res) => {
        if (res) {
          this.isShow = true;
        } else {
          this.isShow = false;
          this.editThisRow.advancefee = 0;
        }
      })
    },
    commit() {
      this.$refs['editThisRow'].validate((valid) => {
        if (valid) {
          ElMessageBox.confirm(
              '是否修改保存这条数据,修改后需重新审核？',
              '提示',
              {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
              }
          ).then(() => {
            this.editThisRow.adduserid = this.manno;
            this.editThisRow.adduser = this.man;
            // console.log(this.$refs.gpy.imgArr.length)
            // console.log("=========================")
            // console.log(this.$refs.gpy.imgArr)
            this.editThisRow.imageList = this.$refs.gpy.imgArr;
            this.editThisRow.freesta = this.editThisRow.freesta.join(',');
            ;
            commitVehicleBind(this.editThisRow).then((res) => {
              // console.log(res)
              if (res === "该车牌已存在") {
                ElMessage.error('该车牌已存在!')
              } else if (res) {
                ElMessage.success('操作成功!')
                this.network();
                this.editShow = false;
                // window.parent.insertUserLogControl('1110',(this.managerForm.isAdd?"添加":"修改")+'免费车成功');
              } else {
                ElMessage.error('操作失败!')

                // window.parent.insertUserLogControl('1110',(this.managerForm.isAdd?"添加":"修改")+'免费车失败');
              }
              return res;
            })
          })

        }
      })
    },
    addItem() {
      this.editThisRow = {};
      this.editThisRow.isAdd = true;
      this.editThisRow.timeSpan = pro.MonthAdd(new Date(), 6);
      this.editShow = true;
      this.isShow = false;
      this.isShowFreeTimes = false;
    },
    editThis(row) {
      this.editThisRow = JSON.parse(JSON.stringify(row));
      this.editThisRow.isAdd = false;
      this.editThisRow.freesta = this.editThisRow.freesta.split(',');
      // console.log("===========")
      // console.log(this.editThisRow.ImagesID)
      //根据图片id查询图片信息
      queryImageList({
        ImagesID: this.editThisRow.ImagesID
      }).then(res => {
        // console.log(res)
        const arr = []; //定义数组
        for (const i in res) {
          let blob = 'data:image/png;base64,' + res[i].images
          arr.push(blob);
        }
        this.$refs.gpy.imgArr = arr;
        // console.log(this.$refs.gpy.imgArr)
      })
      this.editShow = true;
      this.isShow = true;
      if( this.editThisRow.freetype===5){
        this.isShowFreeTimes = true;
      }

    },
    deleteSelect(row) {
      let carNoList = [];
      if (row != null) {
        carNoList[0] = row;
      } else {
        carNoList = this.multipleSelection;
      }
      if (carNoList.length == 0) {
        ElMessage({
          showClose: true,
          message: '请选择要删除的数据！',
          type: 'warning',
        })
        return;
      }
      ElMessageBox.confirm(
          '是否批量删除' + carNoList.length + '条数据？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        deleteVehicleBind(carNoList).then((res) => {
          if (res) {
            ElMessage({
              message: res + '条删除成功！',
              type: 'success',
            })
            this.network()
            // window.parent.insertUserLogControl('1110', ids.length + '条删除成功！');
          } else {
            ElMessage.error('删除失败！')
            // window.parent.insertUserLogControl('1110', ids.length + '条删除失败！');
          }
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消！',
        })
      })
    },
    handleSelectionChange(row) { //批量删除选择的数据
      this.multipleSelection = row
    },
    reNetwork() {
      this.searchForm = {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      };
      this.network()
    },
    network() {
      this.tableLoading = true;
      getPage(this.searchForm).then((res) => {
        if (res.records != null) {
          this.tableData = res.records;
          // console.log(res.records)
          this.searchForm.total = res.total;
          this.searchForm.pageNum = res.current;
          this.searchForm.pageSize = res.size;
        } else {
          ElMessage.error('查询失败！')
        }
        this.tableLoading = false;
        // window.parent.insertUserLogControl('1111','查询微信绑定车牌列表');
      })
    },
    carColor(row, column) {
      for (let i = 0; i < this.CarColorList.length; i++) {
        if (row[column.property] == this.CarColorList[i].VALUE) {
          return this.CarColorList[i].TEXT;
        }
      }
    },
    transforSurplusTimes(row) {
     // console.log(row)
     // console.log(row.applyTimes)
      if (row.freeTimes < 0) {
        return '';
      } else {
        return row.freeTimes-row.applyTimes;
      }
    },
    transforFreeTimes(row) {
      if (row.freeTimes < 0) {
        return '';
      } else {
        return row.freeTimes;
      }
    },
    transforSta(row) {
      if (row.freesta === 'G') {
        return '嘎鲁图';
      } else if (row.freesta === 'T') {
        return '台格';
      } else {
        return '台格,嘎鲁图';
      }
    },
    dateFormat(row, column) {
      return pro.dateFormat(row[column.property]);
    },
    handleSizeChange(val) { //页大小改变
      this.searchForm.pageSize = val
      this.network()
    },
    handleCurrentChange(val) { //当前页改变
      this.searchForm.pageNum = val
      this.network()
    },
  },
  mounted() {
    console.log("============")
    this.queryUserBasic();
    getCarColorList().then((res) => {
      this.CarColorList = res;
    })
    getFreeTypeList().then((res) => {
      this.FreeTypeList = res;
    })
    getCarTypeList().then((res) => {
      this.CarTypeList = res;
    })
    // this.queryVersion();
    this.network();
    this.myHeight = (document.documentElement.clientHeight) * 0.86;
  }
}
</script>

<style scoped>
.version-info {
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>