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 value="" label="请选择库类型"></el-option>
            <el-option v-for="item in crucialData"  :key="item.unid" :value="item.code" :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 value="" label="请选择性别"></el-option>
            <el-option :value="1" label="男"></el-option>
            <el-option :value="2" 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" action="" :file-list="fileList" :http-request="uploadimg" list-type="picture-card" :before-upload="beforeAvatarUpload" :on-progress="successImg" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
          <i class="el-icon-plus"></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">
              <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="crucial_type" :label-width="formLabelWidth" :rules="[ { required: true, message: '请选择库类型'}]">
              <el-select v-model="form.crucial_type" type="crucial_type" placeholder="请选择库类型">
                <el-option v-for="item in crucialData" :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">
              <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">
              <el-select v-model="form.sex" placeholder="请选择性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></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-date-picker v-model="form.birthday" type="date" placeholder="选择日期" :picker-options="pickerOptions0">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="证件类型" :label-width="formLabelWidth">
              <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="证件号" prop="card_id" :label-width="formLabelWidth">
              <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="手机号" prop="mphone" :label-width="formLabelWidth">
              <el-input v-model="form.mphone" 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>
      <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>
    <el-dialog v-model="dialogVisible1" size="tiny">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import Facetable from "./faceTable";
export default {
  data() {
    return {
      Substate: 1,
      dbname: "",
      curEditData: [], //当前编辑的数据
      facename: "",
      facesex: "",
      facecard_id: "",
      fileList: [],
      activeIndex: "peopleImg",
      dialogImageUrl: "",
      dialogVisible: false,
      dialogVisible1: false,
      count: [],
      cityData: [],
      provenceData: [],
      faceunid: "",
      communityData:"",
      communityunid:"",
      cartypeData:"",
      crucialData:"",
      form: {
        name: "",
        crucial_type: "",
        birthday: "",
        card_type: "",
        card_id: "",
        sex: "",
        mphone: "",
        province: "",
        city: "",
        homephone: "",
        note: "",
        crime_act:"",
        resident_unid:''
      },
      formLabelWidth: "120px",
      pickerOptions0: {},
      rules: {
          card_id: [
            { min: 0, max: 22, message: '请正确输入身份证号码！', trigger: 'blur' }
          ],
           mphone: [
            { min: 0, max: 13, message: '请正确输入手机号！', trigger: 'blur' }
          ],
        }
    };
  },
  components: {
    Facetable
  },
  computed: {},
  methods: {
    //搜索人员
    searchFace() {
      this.$refs.c1.initTable(); //调用子组件搜索方法
    },
    editTable(index, val) {
      this.Substate = 2;
      this.dialogVisible = true;
      this.getBlackInfo(val.unid);
      this.faceunid = val.unid;
    },
    /* 获取城市*/
    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.fileList = [];
      this.initFaceInfo();
      this.Substate = 1;

    },
    handleRemove(file, fileList) {
      //移除图片
      this.axios
        .delete(this.API.this.API.faceweb +
            "/crucial_face_pics/" +
            this.curEditData.unid +
            "/pics/" +
            file.unid
        )
        .then(function(response) {});
    },
    handlePictureCardPreview(file) {
      //预览大图
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
    },
    successImg(response, file, fileList) {
      //图片上传成功
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
    },
    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(unid) {
      var Vthis = this;
      this.axios.get(this.API.faceweb + "/faces/" + unid).then(function(response) {
        Vthis.initEditFaceInfo(response.data);
      });
    },
    initEditFaceInfo(data) {
      for (var i = 0; i < data.pics.length; i++) {
        data.pics[i].url = data.pics[i].pic_url;
      }
      this.curEditData = data;
      this.form.name = data.name;
      var pice = [];
      this.form.crucial_type = data.crucial_type;
      this.form.birthday = data.birthday;
      this.form.card_type = "111";
      this.form.card_id = data.card_id;
      this.form.sex = data.sex;
      this.form.mphone = data.mphone;
      this.form.province = data.province;
      this.form.homephone = "";
      this.form.note = data.note;
      this.fileList = data.pics;
      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.crucial_type = "";
      this.form.birthday = "";
      this.form.card_type = "";
      this.form.card_id = "";
      this.form.sex = "";
      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 = "";
    },
    saveAddPersonnel() {
      var Vthis = this;
      this.axios.post(this.API.faceweb + "/faces", this.form).then(function(response) {
        Vthis.savePersonnelImg(response.data.unid);
        Vthis.$refs.upload.clearFiles();
        Vthis.$refs.c1.initTable();
        Vthis.$message({
          message: "添加人员成功！",
          type: 'success'
        })
      });
    },
    saveEditPersonnel() {
      var Vthis = this;
      var birthdayDate= new Date(new Date(this.form.birthday).getTime());
      this.form.birthday = this.form.birthday?this.timeForm(birthdayDate).split(' ')[0]:'';
      this.axios.post(this.API.faceweb + "/faces/" + Vthis.faceunid, this.form).then(function(response) {
          Vthis.$refs["personform"].resetFields();
          Vthis.$refs.c1.initTable();
        });
        let messageInfo = "";
        if(this.Substate == 2) messageInfo ="修改人员成功！"
        this.$message({
          message: messageInfo,
          type: 'success'
        })
    },
    savePersonnelImg(faceunid) {
      var Vthis = this;
      this.$refs.upload.uploadFiles.forEach(function(ele) {
        Vthis.baseImg(ele.raw, function(srcs) {
          var data = {
            pic_base64: srcs,
            format: ele.raw.type.split("/")[1],
            ofilename: ele.name,
            t_format: "jpg"
          };
          Vthis.sendImg(faceunid, data);
        });
      }, this);
    },
    editPersonnelImg(file) {
      var Vthis = this;
      this.baseImg(file, function(srcs) {
        var data = {
          pic_base64: srcs,
          format: file.type.split("/")[1],
          ofilename: file.name,
          t_format: "jpg"
        };
        Vthis.sendImg(Vthis.faceunid, data);
      });
    },
    sendImg(faceunid, data) {
      this.axios
        .post(this.API.faceweb + "/crucial_face_pics/" + faceunid + "/pics", data)
        .then(function(response) {});
    },
    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 + "/codes/custom/cates/4DD23AF66E/codes").then((response)=> {
           this.crucialData = response.data.list_data;
      });
     },
     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.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>