database.vue

<template>
  <div  class="template-box content_div_main">
    <el-form :inline="true" class="search-form" size="small">
         <el-form-item label="人口库：">
          <el-select v-model="dbname" class="br0 bra bla">
            <el-option v-for="item in crucialData"  :key="item.unid" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="姓名：">
          <el-input type="text" class="br0 bla bra" v-model="facename" placeholder="请输入姓名"></el-input>
        </el-form-item>
         <el-form-item label="证件号：">
          <el-input type="text" class="bla" placeholder="请输入证件号" v-model="facecard_id"></el-input>
        </el-form-item>
         <el-form-item label="性别：">
           <el-select v-model="facesex" class="br0 bra bla">
            <el-option label="全部" value=""></el-option>
            <el-option value="1" label="男"></el-option>
            <el-option value="0" label="女"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item>
          <el-button  class="search-btn" @click="searchFace" icon="el-icon-search">查询</el-button>
          <el-button  class="search-btn ml10"  @click="addFaceBlack()" icon="el-icon-edit">添加</el-button>
        </el-form-item>
      </el-form>
    <el-dialog title="人员管理" :visible.sync="dialogVisible" size="small" >
      <el-row>
        <el-upload
        ref="upload"
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :auto-upload="false"
          :on-change="handleAvatarChange"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-row>
      <el-form :model="form" ref="personform" class="mt10" :rules="rules">
        <el-row>
          <div style="overflow:hidden">
              <el-col :span="12">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.name" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="库类型" prop="type" :label-width="formLabelWidth">
              <el-select v-model="form.type" >
                <el-option v-for="item in typeData" :key="item.unid" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </div>
          <div style="overflow:hidden">
            <!-- <el-col :span="12">
            <el-form-item label="人员类型" :label-width="formLabelWidth">
              <el-input v-model="form.crime_act" auto-complete="off"></el-input>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
              <el-input v-model="form.age" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" :label-width="formLabelWidth" prop="gender">
              <el-select v-model="form.gender" placeholder="请选择性别">
                <el-option label="男" :value="1"></el-option>
                <el-option label="女" :value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </div>
          <div style="overflow:hidden">
          <el-col :span="12">
            <el-form-item label="生日" :label-width="formLabelWidth" prop="birthday">
              <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期"   value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件类型" :label-width="formLabelWidth" prop="card_type">
              <el-select v-model="form.card_type" placeholder="请选择证件类型">
                <el-option v-for="item in cartypeData" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </div>
           <div style="overflow:hidden">
          <el-col :span="12">
            <el-form-item label="证件号" :label-width="formLabelWidth" prop="card_id">
              <el-input  v-model="form.card_id" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="籍贯" :label-width="formLabelWidth" prop="info">
              <el-input  v-model="form.info" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
           </div>
             <!--  <div style="overflow:hidden">

       <el-col :span="12">
            <el-form-item label="籍贯" :label-width="formLabelWidth">
              <el-col :span="11">
                <el-select v-model="form.province" @change="getCity" placeholder="省份">
                  <el-option v-for="item in provenceData" :key="item.code" :label="item.name" :value="item.code"></el-option>
                </el-select>
              </el-col>
              <el-col :span="2" class="cc">/</el-col>
              <el-col :span="11">
                <el-select v-model="form.city" placeholder="城市">
                  <el-option v-for="item in cityData" :label="item.name" :key="item.code"  :value="item.code"></el-option>
                </el-select>
              </el-col>
            </el-form-item>
          </el-col>
           <el-col :span="12">
            <el-form-item label="地区" :label-width="formLabelWidth">
              <el-select v-model="form.resident_unid" placeholder="请选择">
                <el-option v-for="item in communityData"  :key="item.unid" :value="item.unid" :label="item.org_name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
            </div>-->
          <!-- <el-col :span="12">
            <el-form-item label="座机号" :label-width="formLabelWidth">
              <el-input v-model="form.homephone" auto-complete="off"></el-input>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="24">
            <el-form-item label="备注" :label-width="formLabelWidth">
              <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.note"></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <el-dialog
            width="30%"
            :visible.sync="dialogVisible1"
            append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
      <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">
      <facetable @edit="editTable" :dbname="dbname" :facename="facename" :facesex="facesex" :facecardid="facecard_id" :communityunid="communityunid" ref="c1"></facetable>
    </el-row>

  </div>
</template>
<script>
import { checkCardId, checkAge } from '@/util/validate.js';
import Facetable from "./faceTable";
export default {
  data() {
    const checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('姓名不能为空'))
      } else {
        return callback()
      }
    }
    return {
      typeData:[],
      imageUrl:'',
      file:null,
      Substate: 1,
      dbname: "",
      curEditData: [], //当前编辑的数据
      facename: "",
      facesex: "",
      facecard_id: "",
      fileList: [],
      activeIndex: "peopleImg",
      dialogImageUrl: "",
      dialogVisible: false,
      dialogVisible1: false,
      count: [],
      cityData: [],
      provenceData: [],
      faceunid: "",
      communityData:[],
      communityunid:"",
      cartypeData:[
        {
         name:"身份证",
         code:1
        }
      ],
      crucialData:[],
      form: {
        name: "",
        accountId:localStorage.getItem('accountId'),
        age:"",
        info:"",
        type: "",
        createType:0,
        photo:"",
        birthday: "",
        card_type: 1,
        card_id: "",
        gender: "",
        mphone: "",
        province: "",
        city: "",
        homephone: "",
        note: "",
        crime_act:"",
        resident_unid:''
      },
      formLabelWidth: "120px",
      pickerOptions0: {},
      deletStr:'',
      rules: {
        name: [
          { required: true, validator: checkName, trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择库类型', trigger: 'change' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别'}
        ],
        card_id: [
          { validator: checkCardId, trigger: 'blur' }
        ],
        mphone: [
          { min: 0, max: 13, message: '请正确输入手机号！', trigger: 'blur' }
        ],
      },
      accountId:localStorage.getItem('accountId')
    };
  },
  components: {
    Facetable
  },
  computed: {},
  methods: {
    getAddress(){
      this.faceapi.getAddress().then(res => {
        this.communityData = res.list_data;
      })
    },
    //搜索人员
    searchFace() {
      this.$refs.c1.initTable(); //调用子组件搜索方法
    },
    editTable(index, val) {
      this.Substate = 2;
      this.dialogVisible = true;
      this.getBlackInfo(val);
      this.faceunid = val.id;
    },
    /* 获取城市*/
    getCity(val, citycod) {
      this.form.province = val;
      this.form.city = "";
      var Vthis = this;
      var provenceuid = "";
      if (val) {
        for (var i = 0; i < this.provenceData.length; i++) {
          if (val == this.provenceData[i].code) {
            provenceuid = this.provenceData[i].province_unid;
          }
        }
        this.axios.get(this.API.url +"/codes/countries/0E229CD043/provinces/" +provenceuid +"/cities").then(function(response) {
            Vthis.cityData = response.data.list_data;
            if (citycod) {
              Vthis.form.city = citycod;
            }
          });
      }
    },
    addFaceBlack() {
      this.dialogVisible = true;
      this.count = [];
      this.file = null;
      this.imageUrl = '';
      this.initFaceInfo();
      this.Substate = 1;

    },
    successImg(response, file, fileList) {
      // console.log('r',response)
      // console.log('f',file)
      // console.log('fl',fileList)
      //图片上传成功
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return false
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false
      }
    },
    handleAvatarChange(file,fileList){
      this.file=file;
     this.imageUrl= URL.createObjectURL(file.raw);
    },
    uploadimg(file) {
      if (this.Substate == 2) {
        this.editPersonnelImg(file.file);
      }
    },
    subMitBlack() {
      this.$refs["personform"].validate(valid => {
        if (valid) {
          if (this.Substate == 1) this.saveAddPersonnel();
          if (this.Substate == 2) this.saveEditPersonnel();
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getBlackInfo(data) {
        this.initEditFaceInfo(data);
    },
    initEditFaceInfo(data) {
      this.imageUrl=this.API.picUrl+data.personPic;
      this.curEditData = data;
      this.form.name = data.name;
      this.form.type = data.type;
      this.form.gender=data.gender;
      this.form.birthday = data.birthday;
      this.form.card_type = 1;
      this.form.age = data.age;
      this.form.card_id = data.idCard;
      this.form.info = data.nativePlace;
      // this.form.gender = data.gender;
      // this.form.mphone = data.mphone;
      // this.form.province = data.province;
      // this.form.homephone = "";
      // this.form.note = data.note;
      // this.form.handle_state = data.handle_state;
      // this.form.crime_act = data.crime_act;
      // this.form.resident_unid = Number(data.resident_unid)
      this.getCity(data.province, data.city);
    },
    initFaceInfo() {
      this.form.name = "";
      this.form.photo = "";
      this.form.type = "";
      this.form.birthday = "";
      this.form.card_type = "";
      this.form.card_id = "";
      this.form.gender = "";
      this.form.mphone = "";
      this.form.province = "";
      this.form.city = "";
      this.form.homephone = "";
      this.form.crime_act = "";
      this.form.note = "";
      this.form.handle_state = "";
      this.form.resident_unid = "";
      
      this.form.card_type = 1;
      this.form.age ="";
      this.form.info = "";
    },
    saveAddPersonnel() {
      console.log('saveAddPersonnel:::')
      return;
            /* eslint-disable no-undef */
            let param = new FormData()  // 创建form对象
            param.append('file', this.file.raw)  // 通过append向form对象添加数据
            param.append('name', this.form.name);
            param.append('gender', this.form.gender);
            param.append('type', this.form.type);
            param.append('photo', this.imageUrl);
            param.append('age', this.form.age);
            param.append('idCard', this.form.card_id);
            param.append('birthday', this.form.birthday);
            param.append('nativePlace', this.form.info);
            param.append('accountId', this.form.accountId);
            param.append('createType', 0);
            let config = {
              headers: {'Content-Type': 'multipart/form-data'}
            }
      var Vthis = this;
      this.axios.post(this.API.url + "/persons", param,config).then((response)=>{
        // Vthis.savePersonnelImg(response.data.unid);
        this.$refs.upload.clearFiles();
        this.$refs.c1.initTable();
        Vthis.$message({
          message: "添加人员成功！",
          type: 'success'
        })
      });
    },
    saveEditPersonnel() {
       let param = new FormData()  // 创建form对象
      if(this.file){
        param.append('file', this.file.raw)  // 通过append向form对象添加数据
        param.append('personPic', this.imageUrl);
      }else{
        param.append('personPic', this.curEditData.personPic);
      }
      param.append('name', this.form.name);
      param.append('gender', this.form.gender);
      param.append('type', this.form.type);
      param.append('age', this.form.age);
      param.append('idCard', this.form.card_id);
      param.append('birthday', this.form.birthday);
      param.append('nativePlace', this.form.info);
      let config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
      var Vthis = this;
      this.axios.post(this.API.url + "/persons/" + Vthis.faceunid, param,config).then((response)=> {
          Vthis.$refs["personform"].resetFields();
          Vthis.$refs.c1.initTable();
          this.file=null;
          this.imageUrl='';
        });
        let messageInfo = "";
        if(this.Substate == 2) messageInfo ="修改人员成功！"
        this.$message({
          message: messageInfo,
          type: 'success'
        })
    },
    savePersonnelImg(faceunid) {
      var fileArr=[];
      var Vthis = this;
      this.$refs.upload.uploadFiles.forEach(function(ele,index) {
        Vthis.baseImg(ele.raw, function(srcs) {
          var data = {
            pic_base64: srcs,
            format: ele.raw.type.split("/")[1],
            ofilename: ele.name,
            t_format: "jpg"
          };
          fileArr.push(data)
         if(index==Vthis.$refs.upload.uploadFiles.length-1){
           var obj={
              deletepics:'',
              blackFacePicVos:fileArr
            }
           Vthis.sendImg(faceunid, obj);
         }
        });
      }, this);
    },
    editPersonnelImg(file) {
      var fileArr=[];
       var Vthis = this;
      this.$refs.upload.uploadFiles.forEach((ele,index)=>{
        if(ele.raw){
          this.baseImg(ele.raw, function(srcs){
            var data = {
              pic_base64: srcs,
              format: ele.raw.type.split("/")[1],
              ofilename: ele.name,
              t_format: "jpg"
            };
            fileArr.push(data)
            if(index==Vthis.$refs.upload.uploadFiles.length-1){
              var obj={
                 deletepics:Vthis.deletStr.substring(0,Vthis.deletStr.length-1),
                 blackFacePicVos:fileArr
               }
              Vthis.sendImg(Vthis.faceunid, obj);
            }
          },this);
        }
      });

    },
    sendImg(faceunid, data) {
      this.axios
        .post(this.API.faceweb + "/crucial_face_pics/" + faceunid + "/pics", data)
        .then((response)=>{
          this.deletStr=''
          this.$refs.upload.clearFiles();
          this.$refs.c1.initTable();
        });
    },
    baseImg(file, callback) {
      var srcs = "";
      var reader = new FileReader();
      if (file) {
        reader.readAsDataURL(file);
      }
      reader.onloadend = function() {
        srcs = reader.result.split(",")[1];
        if (callback) callback(srcs);
      };
    },
     initDbData(){
        this.axios.get(this.API.url + "/personTypes",{
          params:{
            accountId:this.accountId,
            hasBaseType: 1
          }
        }).then((response)=> {
           this.crucialData= response.data.data.filter(item=>{
              return item.id!==0&&item.id!==1
            })
           this.typeData=JSON.parse(JSON.stringify(this.crucialData));
           this.crucialData.unshift({
             "id":"",
             "name":"全部",
             "unid":"alltype"
           })
        });
     },
     initcartypeData(){
         this.axios.get(this.API.url + "/codes/simple/cates/09BB973F92/codes").then((response)=> {
           this.cartypeData = response.data.list_data;
      });
     },
   },
  created() {
    var Vthis = this;
    this.getAddress();
    this.axios
      .get(this.API.url + "/codes/countries/0E229CD043/provinces")
      .then(function(response) {
        Vthis.provenceData = response.data.list_data;
      });
    this.initDbData();
    // this.initcartypeData();
  },
  mounted() {}
};
</script>
<style lang="stylus" scoped>
.el-date-editor.el-input {
  width: 100%;
}

.cc {
  text-align: center;
}
</style>