adddbs.vue

<template>
 <el-dialog
  title="添加人员"
  :visible.sync="dialogVisible"
  width="40%"
  top="90px"
  class="add-dialog"
  :before-close="handleClose">
  <div class="body-box">
    <div class="pic-box">
      <el-upload
        ref="upload"
        action=""
        :http-request="uploadimg"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
    <div class="content-box mt10">
      <el-form :model="faceForm" :rules="rules" ref="faceForm" label-width="100px" class="demo-faceForm">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="faceForm.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="region">
            <el-select v-model="faceForm.sex" placeholder="">
              <el-option label="男" value="shanghai"></el-option>
              <el-option label="女" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生年月" prop="name">
              <el-date-picker
                v-model="birthday"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="证件类型" prop="region">
            <el-select v-model="faceForm.cartype" placeholder="">
              <el-option label="社保库1" value="shanghai"></el-option>
              <el-option label="社保库2" value="beijing"></el-option>
            </el-select>

          </el-form-item>
        </el-col>
        <el-col :span="12">
           <el-form-item label="证件号" prop="name">
            <el-input v-model="faceForm.carnum"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="籍贯" >
              <el-col :span="11">
                <el-select v-model="faceForm.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="faceForm.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="地区" prop="name">
            <el-input v-model="faceForm.area"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="name">
            <el-input v-model="faceForm.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12"></el-col>
      </el-form>
    </div>
  </div>
  <div>

  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitFace">确 定</el-button>
  </span>
</el-dialog>

</template>

<script>
export default {
 data() {
      return {
        provenceData:[],
        Substate:1,
        cityData:[],
        dialogVisible: false,
        faceunid:'',
        fileList:[],
        faceForm: {
          name: '',
          sex: '',
          date: '',
          cartype:'',
          carnum:'',
          address:'',
          area:'',
          phone:'',
          province:'',
          city:''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
  methods: {
    handlePictureCardPreview(){

    },
    handleRemove(file, fileList) {
      //移除图片
      this.axios.delete(this.API.faceweb.removepic(this.curEditData.unid,file.unid)).then(function(response) {});
    },
    init(){
      this.dialogVisible = true
    },
    editTable(index, val) {
      this.Substate = 2;
      this.dialogVisible = true;
      this.getBlackInfo(val.unid);
      this.faceunid = val.unid;
    },
     getBlackInfo(unid) {
      this.axios.get(this.API.faceweb.getFaces(unid)).then((response)=> {
        this.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.faceForm.name = data.name;
      var pice = [];
      this.faceForm.crucial_type = data.crucial_type;
      this.faceForm.birthday = data.birthday;
      this.faceForm.card_type = "111";
      this.faceForm.card_id = data.card_id;
      this.faceForm.sex = data.sex;
      this.faceForm.mphone = data.mphone;
      this.faceForm.province = data.province;
      this.faceForm.homephone = "";
      this.faceForm.note = data.note;
      this.fileList = data.pics;
      this.faceForm.handle_state = data.handle_state;
      this.faceForm.crime_act = data.crime_act;
      this.faceForm.resident_unid = Number(data.resident_unid)
      this.getCity(data.province, data.city);
    },
    initFaceInfo() {
      this.faceForm.name = "";
      this.faceForm.crucial_type = "";
      this.faceForm.birthday = "";
      this.faceForm.card_type = "";
      this.faceForm.card_id = "";
      this.faceForm.sex = "";
      this.faceForm.mphone = "";
      this.faceForm.province = "";
      this.faceForm.city = "";
      this.faceForm.homephone = "";
      this.faceForm.crime_act = "";
      this.faceForm.note = "";
      this.faceForm.handle_state = "";
      this.faceForm.resident_unid = "";
    },
    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!");
      }
    },
    handleClose(done) {
      done()
    },
    saveAddPersonnel() {
      this.axios.post(this.API.faceweb.faces, this.faceForm).then((response) => {
        this.savePersonnelImg(response.data.unid);
        this.$refs.upload.clearFiles();
        this.$refs.c1.initTable();
        this.$message({
          message: "添加人员成功！",
          type: 'success'
        })
      });
    },
    saveEditPersonnel() {
      var Vthis = this;
      var birthdayDate= new Date(new Date(this.faceForm.birthday).getTime());
      this.faceForm.birthday = this.faceForm.birthday?this.timeForm(birthdayDate).split(' ')[0]:'';
      this.axios.post(this.API.faceweb.faces +'/' + this.faceunid, this.faceForm).then((response) => {
          this.$refs["personform"].resetFields();
          this.$refs.c1.initTable();
        });
        let messageInfo = "";
        if(this.Substate == 2) messageInfo ="修改人员成功！"
        this.$message({
          message: messageInfo,
          type: 'success'
        })
    },
    savePersonnelImg(faceunid) {
      this.$refs.upload.uploadFiles.forEach((ele) => {
        this.baseImg(ele.raw, (srcs) => {
          var data = {
            pic_base64: srcs,
            format: ele.raw.type.split("/")[1],
            ofilename: ele.name,
            t_format: "jpg"
          };
          this.sendImg(faceunid, data);
        });
      }, this);
    },
    editPersonnelImg(file) {
      this.baseImg(file, (srcs) => {
        var data = {
          pic_base64: srcs,
          format: file.type.split("/")[1],
          ofilename: file.name,
          t_format: "jpg"
        };
        this.sendImg(this.faceunid, data);
      });
    },
    sendImg(faceunid, data) {
      this.axios.post(this.API.faceweb.sendImg(faceunid), data).then((response)=> {
      });
    },
    uploadimg(file) {
      if (this.Substate == 2) {
        this.editPersonnelImg(file.file);
      }
    },
    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);
      };
    },
    resetForm(formName) {
      this.$refs.faceForm.resetFields();
    },
      /* 获取城市*/
    getCity(val, citycod) {
      this.faceForm.province = val;
      this.faceForm.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;
            }
          });
      }
    },
    submitFace() {
      this.$refs["faceForm"].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;
        }
      });
    },
  },
  created(){
    this.axios.get(this.API.url + "/codes/countries/0E229CD043/provinces").then((response)=> {
        this.provenceData = response.data.list_data;
    });
  }
}
</script>

<style lang="stylus" scoped>

</style>>