cardb.vue

<template>
  <div>
    <el-row class="mt30">
      <el-col :span="3" :offset="1">
        <el-select v-model="lib_code" class="br0 bra">
          <el-option value="" label="请选择库"></el-option>
          <el-option v-for="item in crucialData"  :key="item.lib" :value="item.lib" :label="item.name"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3">
        <el-select v-model="plateType" class="bla br0 bra">
          <el-option value="" label="请选择车牌类型"></el-option>
          <el-option v-for="item in plateTypes" :key="item.cate" :value="item.code" :label="item.name"></el-option>
        </el-select>
      </el-col>
      <el-col :span="3" >
        <el-input type="text" class="bla bra br0" v-model="plateText" placeholder="请输入车牌号码"></el-input>
      </el-col>
      <el-col :span="3" >
        <el-input type="text" class="bla" v-model="carOwner" placeholder="请输入车主姓名"></el-input>
      </el-col>
      <el-col :span="2">
        <el-button class="set-btn"  style="width:80%;float:right;" icon="search" @click="searchFace">搜索</el-button>
      </el-col>
       <el-col :span="2" class="ml10">
        <el-button :plain="true" icon="edit" class="set-btn" style="width:80%" type="info" @click="addFaceBlack">添加</el-button>
      </el-col>
    </el-row>
    <el-dialog title="车辆管理" :visible.sync="dialogVisible" size="small" >
      <el-form :model="form" ref="personform" class="mt10" :rules="rules">
        <el-row>
          <el-col :span="12">
            <el-form-item label="库类型" prop="lib_code" :label-width="formLabelWidth" :rules="[
              { required: true, message: '请选择库类型'},
            ]">
              <el-select v-model="form.lib_code" type="lib_code" placeholder="请选择库类型">
                <el-option v-for="item in crucialData" :key="item.lib" :label="item.name" :value="item.lib"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌号码" prop="plate_text" :label-width="formLabelWidth">
              <el-input  v-model="form.vehicle.plate_text" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌类型" prop="vehicle.plate_type" :label-width="formLabelWidth" :rules="[
              { required: true, message: '请选择车牌类型'},
            ]">
              <el-select v-model="form.vehicle.plate_type" type="vehicle.plate_type" placeholder="请选择车牌类型">
                <el-option v-for="item in plateTypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆类型" prop="vehicle.vehicle_type" :label-width="formLabelWidth" :rules="[
              { required: true, message: '请选择车辆类型'},
            ]">
              <el-select v-model="form.vehicle.vehicle_type" type="vehicle.vehicle_type" placeholder="请选择车辆类型">
                <el-option v-for="item in carTypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车身颜色" prop="vehicle.body_color" :label-width="formLabelWidth" :rules="[
              { required: true, message: '请选择车身颜色'},
            ]">
              <el-select v-model="form.vehicle.body_color" type="vehicle.body_color" placeholder="请选择车身颜色">
                <el-option v-for="item in carColors" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车主姓名" prop="name" :label-width="formLabelWidth">
              <el-input  v-model="form.owner.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号" prop="cnsf_id" :label-width="formLabelWidth">
              <el-input v-model="form.owner.cnsf_id" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="subMitBlack">确 定</el-button>
      </span>
    </el-dialog>
    <el-row class="mt20">
      <carTable @edit="editTable" :lib_code="lib_code" :plateType="plateType" :plateText="plateText" :carOwner="carOwner" ref="c1"></carTable>
    </el-row>
  </div>
</template>
<script>
import carTable from "./carTable";
export default {
  data() {
    var checkPlate = (rule, value, callback)=> {
      let boo = /(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{7}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/.test(this.form.vehicle.plate_text)
      if (!boo) {
        return callback(new Error('车牌号不符合规范'));
      } else {
        callback()
      }
    }
    return {
      Substate: 1,
      lib_code: "",
      plateType: "",
      plateText: "",
      carOwner: "",
      curEditData: [], //当前编辑的数据      
      dialogVisible: false,
      faceunid: "",
      plateTypes:[],//所有车牌类型
      carTypes:[],//所有车辆类型
      carColors:[],//所有车辆颜色
      crucialData:"",
      form: {
        lib_code:"",
        vehicle:{
          plate_type: "",
          plate_text: "",
          vehicle_type: "",
          body_color: "",
        },
        owner:{
          name:'',
          cnsf_id:''
        },
      },
      formLabelWidth: "120px",
      rules: {
        plate_text: [
          {validator: checkPlate, trigger:'blur'}
        ]}
    };
  },
  components: {
    carTable
  },
  computed: {},
  methods: {
    //搜索人员
    searchFace() {
      this.$refs.c1.initTable(); //调用子组件搜索方法
    },
    editTable(index, val) {
      this.Substate = 2;
      this.dialogVisible = true;
      this.getInfo(val.unid).then((response)=>{
        this.initEditFaceInfo(response)
      });
      this.faceunid = val.unid;
    },
    addFaceBlack() {
      this.dialogVisible = true;
      this.initFaceInfo();
      this.Substate = 1; 
    },
    subMitBlack() {
      this.$refs["personform"].validate(valid => {
        if (valid) {
          if (this.Substate == 1) this.saveAddCar();
          if (this.Substate == 2) this.saveEditCar();
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getInfo(unid) {
      return new Promise((resolve,reject)=> {
        this.axios.get(this.IP + '/api/v1/alarm/traffic/lib_vehicles/' + unid).then((response)=> {
          resolve(response.data)
        });
      })
    },
    initEditFaceInfo(data) {
      this.curEditData = data;
      this.form.lib_code = data.lib_code;
      this.form.vehicle.plate_type = data.vehicle.plate_type;
      this.form.vehicle.plate_text = data.vehicle.plate_text;
      this.form.vehicle.vehicle_type = data.vehicle.vehicle_type;
      this.form.vehicle.body_color = data.vehicle.body_color;
      this.form.owner.name = data.owner.name;
      this.form.owner.cnsf_id = data.owner.cnsf_id;
    },
    initFaceInfo() {
      this.form.lib_code = "";
      this.form.vehicle.plate_type = "";
      this.form.vehicle.plate_text = "";
      this.form.vehicle.vehicle_type = "";
      this.form.vehicle.body_color = "";
      this.form.owner.name = "";
      this.form.owner.cnsf_id = "";
    },
    saveAddCar() {
      this.axios.post(this.IP + "/api/v1/alarm/traffic/lib_vehicles", this.form).then((response)=> {
        this.initFaceInfo()
        this.$refs.c1.initTable();
        this.$message({
          message: "添加车辆成功！",
          type: 'success'
        })
      });
    },
    saveEditCar() {
      this.axios.post(this.IP + "/api/v1/alarm/traffic/lib_vehicles/" + this.faceunid, this.form).then((response)=> {
          this.$refs["personform"].resetFields();
          this.$refs.c1.initTable();
          let messageInfo = "";
          if(this.Substate == 2) messageInfo ="修改车辆成功！"
          this.$message({
            message: messageInfo,
            type: 'success'
          })
        });
    },
    //初始化下拉菜单项
     initDbData(){
      this.faceapi.getCarDbData().then(response => {
        this.crucialData = response.list_data
      });
     },
    carSlected: function (params) {
      this.getValueByName('号牌类型').then((response)=>{
        this.plateTypes = response
      })
      this.getValueByName('车辆类型').then((response)=>{
        this.carTypes = response
      })
      this.getValueByName('车身颜色').then((response)=>{
        this.carColors = response
      })
    },
     getValueByName: function(str) {
        return new Promise((resolve, reject) => {
          this.axios.get(this.IP + '/api/v1/codes/traffic/cates').then((response)=> {
            let unid;
            response.data.list_data.forEach((ele)=>{
              if (ele.name == str) {
                unid = ele.cate_unid
              }
            })
            resolve(unid);
          });
        }).then((data)=>{
          return new Promise((resolve, reject) => {
            this.axios.get(this.IP + '/api/v1/codes/traffic/cates/' + data + '/codes').then((response)=> {
              resolve(response.data.list_data);
            });
          })
        })
			},
   },
  created() {
    //初始化下拉菜单项
    this.carSlected()
    this.initDbData();
  },
  mounted() {}
};
</script>
<style lang="stylus" scoped>
.el-date-editor.el-input {
  width: 100%;
}

.cc {
  text-align: center;
}

</style>