diff --git a/src/api/system/user.js b/src/api/system/user.js
index 02a38d0..91e7aa7 100644
--- a/src/api/system/user.js
+++ b/src/api/system/user.js
@@ -93,3 +93,23 @@
     }
   })
 }
+
+// 人脸注册
+export function regFace(data) {
+  return request({
+    url: 'face/add',
+    method: 'post',
+    data
+  })
+}
+
+// 人脸解绑
+export function delFace(userId) {
+  return request({
+    url: 'face/delete',
+    method: 'post',
+    params: {
+      userId: userId
+    }
+  })
+}

diff --git a/src/api/system/user.js b/src/api/system/user.js
index 02a38d0..91e7aa7 100644
--- a/src/api/system/user.js
+++ b/src/api/system/user.js
@@ -93,3 +93,23 @@
     }
   })
 }
+
+// 人脸注册
+export function regFace(data) {
+  return request({
+    url: 'face/add',
+    method: 'post',
+    data
+  })
+}
+
+// 人脸解绑
+export function delFace(userId) {
+  return request({
+    url: 'face/delete',
+    method: 'post',
+    params: {
+      userId: userId
+    }
+  })
+}
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ

diff --git a/src/api/system/user.js b/src/api/system/user.js
index 02a38d0..91e7aa7 100644
--- a/src/api/system/user.js
+++ b/src/api/system/user.js
@@ -93,3 +93,23 @@
     }
   })
 }
+
+// 人脸注册
+export function regFace(data) {
+  return request({
+    url: 'face/add',
+    method: 'post',
+    data
+  })
+}
+
+// 人脸解绑
+export function delFace(userId) {
+  return request({
+    url: 'face/delete',
+    method: 'post',
+    params: {
+      userId: userId
+    }
+  })
+}
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
index 20c1408..c5df2f1 100644
--- a/src/views/system/user/listUser.vue
+++ b/src/views/system/user/listUser.vue
@@ -48,11 +48,12 @@
               <el-button v-if="hasPerm('/mgr/delete')" size="small" type="primary" icon="el-icon-delete" @click="del">删除</el-button>
               <el-button v-if="hasPerm('/mgr/reset')" size="small" type="primary" icon="el-icon-key" @click="resetPwd">重置密码</el-button>
               <el-button v-if="hasPerm('/mgr/roleAssign')" size="small" type="primary" icon="el-icon-magic-stick" @click="roleAssign">角色分配</el-button>
+              <el-button v-if="hasPerm('/mgr/regFace')" size="small" type="primary" icon="el-icon-s-custom" @click="regFace">注册人脸</el-button>
             </div>
           </template>
         </search-area>
         <!--查询结果Table显示-->
-        <normal-table ref="normalTable" class="table" :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="listLoading" size="small" @change="changePage">
+        <normal-table ref="normalTable" :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="listLoading" class="table" size="small" @change="changePage">
           <template slot="preColumns">
             <el-table-column label="选择" width="70" header-align="center" align="center">
               <template slot-scope="scope">
@@ -61,6 +62,12 @@
             </el-table-column>
           </template>
           <template slot="columns">
+            <!-- 人脸是否注册 -->
+<!--            <el-table-column label="人脸" width="80" align="center" >-->
+<!--              <template slot-scope="scope">-->
+<!--                <el-tag v-show="scope.row.attr1" size="medium">{{ faceReged[scope.row.attr1] }}</el-tag>-->
+<!--              </template>-->
+<!--            </el-table-column>-->
             <!--冻结状态-->
             <el-table-column label="状态" width="80" align="center" >
               <template slot-scope="scope">
@@ -72,6 +79,11 @@
                 <el-button v-if="hasPerm('/mgr/freeze')" :type="btnStatus[scope.row.statusName]" size="mini" @click="freeze(scope.row)">{{ btnNames[scope.row.statusName] }}</el-button>
               </template>
             </el-table-column>
+            <el-table-column v-if="hasPerm('/mgr/delFace')" label="人脸" align="center" width="70">
+              <template slot-scope="scope">
+                <el-button v-show="faceStatus[scope.row.attr1]" v-if="hasPerm('/mgr/delFace')" type="warning" size="mini" @click="delFace(scope.row)">{{ faceReged[scope.row.attr1] }}</el-button>
+              </template>
+            </el-table-column>
           </template>
         </normal-table>
       </el-col>
@@ -79,6 +91,7 @@
     <!--编辑用户的对话框-->
     <edit-user v-show="editShow" ref="edituser" @watchChild="fetchData"/>
     <role-assign v-show="roleAssignShow" ref="roleassign" @watchChild="fetchData"/>
+    <reg-face v-show="regFaceShow" ref="regFace" />
   </div>
 </template>
 
@@ -86,7 +99,8 @@
 import { RSAencrypt } from '@/utils/security'
 import editUser from '@/views/system/user/editUser'
 import roleAssign from '@/views/system/user/roleAssign'
-import { getUserList, delUser, freezeUser, unfreezeUser, resetPwd } from '@/api/system/user'
+import RegFace from '@/views/system/user/regFace'
+import { getUserList, delUser, freezeUser, unfreezeUser, resetPwd, delFace } from '@/api/system/user'
 import { getDeptTreeList } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
@@ -94,6 +108,7 @@
   name: 'ListUser',
   components: {
     roleAssign,
+    RegFace,
     editUser
   },
   data() {
@@ -110,6 +125,16 @@
         sort: 'id'
       },
       registerTime: [], // 注册时间范围
+      faceReged: {
+        '1': '解绑',
+        '0': '',
+        '': ''
+      },
+      faceStatus: {
+        '1': true,
+        '0': false,
+        '0': false
+      },
       tagNames: {
         '已冻结': 'danger',
         '启用': 'success'
@@ -159,7 +184,8 @@
       editShow: false, // 编辑组件是否显示
       roleAssignShow: false, // 角色分配组件是否显示
       expandAllNode: true,
-      expandNodeClick: false
+      expandNodeClick: false,
+      regFaceShow: false
     }
   },
   watch: {
@@ -208,6 +234,37 @@
         this.$message.error('必须选中一项')
       }
     },
+    // 打开注册人脸对话框
+    regFace() {
+      if (this.singleCheck()) {
+        this.dialogFormVisible = true
+        this.regFaceShow = true
+        const row = this.list[this.radio]
+        this.$refs.regFace.initDialog(this.dialogFormVisible, row)
+      } else {
+        this.$message.error('必须选中一项')
+      }
+    },
+    // 解绑人脸
+    delFace(row) {
+      console.log(row.id)
+      this.$confirm(
+        '确定要对' + row.name + '解绑人脸吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delFace(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('解绑人脸成功')
+            row.attr1 = ''
+          }
+        })
+      })
+    },
     // 删除
     del() {
       if (this.singleCheck()) {

diff --git a/src/api/system/user.js b/src/api/system/user.js
index 02a38d0..91e7aa7 100644
--- a/src/api/system/user.js
+++ b/src/api/system/user.js
@@ -93,3 +93,23 @@
     }
   })
 }
+
+// 人脸注册
+export function regFace(data) {
+  return request({
+    url: 'face/add',
+    method: 'post',
+    data
+  })
+}
+
+// 人脸解绑
+export function delFace(userId) {
+  return request({
+    url: 'face/delete',
+    method: 'post',
+    params: {
+      userId: userId
+    }
+  })
+}
diff --git a/src/assets/global_images/photo.png b/src/assets/global_images/photo.png
new file mode 100644
index 0000000..7d1e905
--- /dev/null
+++ b/src/assets/global_images/photo.png
Binary files differ
diff --git a/src/views/system/user/listUser.vue b/src/views/system/user/listUser.vue
index 20c1408..c5df2f1 100644
--- a/src/views/system/user/listUser.vue
+++ b/src/views/system/user/listUser.vue
@@ -48,11 +48,12 @@
               <el-button v-if="hasPerm('/mgr/delete')" size="small" type="primary" icon="el-icon-delete" @click="del">删除</el-button>
               <el-button v-if="hasPerm('/mgr/reset')" size="small" type="primary" icon="el-icon-key" @click="resetPwd">重置密码</el-button>
               <el-button v-if="hasPerm('/mgr/roleAssign')" size="small" type="primary" icon="el-icon-magic-stick" @click="roleAssign">角色分配</el-button>
+              <el-button v-if="hasPerm('/mgr/regFace')" size="small" type="primary" icon="el-icon-s-custom" @click="regFace">注册人脸</el-button>
             </div>
           </template>
         </search-area>
         <!--查询结果Table显示-->
-        <normal-table ref="normalTable" class="table" :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="listLoading" size="small" @change="changePage">
+        <normal-table ref="normalTable" :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="listLoading" class="table" size="small" @change="changePage">
           <template slot="preColumns">
             <el-table-column label="选择" width="70" header-align="center" align="center">
               <template slot-scope="scope">
@@ -61,6 +62,12 @@
             </el-table-column>
           </template>
           <template slot="columns">
+            <!-- 人脸是否注册 -->
+<!--            <el-table-column label="人脸" width="80" align="center" >-->
+<!--              <template slot-scope="scope">-->
+<!--                <el-tag v-show="scope.row.attr1" size="medium">{{ faceReged[scope.row.attr1] }}</el-tag>-->
+<!--              </template>-->
+<!--            </el-table-column>-->
             <!--冻结状态-->
             <el-table-column label="状态" width="80" align="center" >
               <template slot-scope="scope">
@@ -72,6 +79,11 @@
                 <el-button v-if="hasPerm('/mgr/freeze')" :type="btnStatus[scope.row.statusName]" size="mini" @click="freeze(scope.row)">{{ btnNames[scope.row.statusName] }}</el-button>
               </template>
             </el-table-column>
+            <el-table-column v-if="hasPerm('/mgr/delFace')" label="人脸" align="center" width="70">
+              <template slot-scope="scope">
+                <el-button v-show="faceStatus[scope.row.attr1]" v-if="hasPerm('/mgr/delFace')" type="warning" size="mini" @click="delFace(scope.row)">{{ faceReged[scope.row.attr1] }}</el-button>
+              </template>
+            </el-table-column>
           </template>
         </normal-table>
       </el-col>
@@ -79,6 +91,7 @@
     <!--编辑用户的对话框-->
     <edit-user v-show="editShow" ref="edituser" @watchChild="fetchData"/>
     <role-assign v-show="roleAssignShow" ref="roleassign" @watchChild="fetchData"/>
+    <reg-face v-show="regFaceShow" ref="regFace" />
   </div>
 </template>
 
@@ -86,7 +99,8 @@
 import { RSAencrypt } from '@/utils/security'
 import editUser from '@/views/system/user/editUser'
 import roleAssign from '@/views/system/user/roleAssign'
-import { getUserList, delUser, freezeUser, unfreezeUser, resetPwd } from '@/api/system/user'
+import RegFace from '@/views/system/user/regFace'
+import { getUserList, delUser, freezeUser, unfreezeUser, resetPwd, delFace } from '@/api/system/user'
 import { getDeptTreeList } from '@/api/system/dept'
 import { toTreeList } from '@/utils/structure'
 
@@ -94,6 +108,7 @@
   name: 'ListUser',
   components: {
     roleAssign,
+    RegFace,
     editUser
   },
   data() {
@@ -110,6 +125,16 @@
         sort: 'id'
       },
       registerTime: [], // 注册时间范围
+      faceReged: {
+        '1': '解绑',
+        '0': '',
+        '': ''
+      },
+      faceStatus: {
+        '1': true,
+        '0': false,
+        '0': false
+      },
       tagNames: {
         '已冻结': 'danger',
         '启用': 'success'
@@ -159,7 +184,8 @@
       editShow: false, // 编辑组件是否显示
       roleAssignShow: false, // 角色分配组件是否显示
       expandAllNode: true,
-      expandNodeClick: false
+      expandNodeClick: false,
+      regFaceShow: false
     }
   },
   watch: {
@@ -208,6 +234,37 @@
         this.$message.error('必须选中一项')
       }
     },
+    // 打开注册人脸对话框
+    regFace() {
+      if (this.singleCheck()) {
+        this.dialogFormVisible = true
+        this.regFaceShow = true
+        const row = this.list[this.radio]
+        this.$refs.regFace.initDialog(this.dialogFormVisible, row)
+      } else {
+        this.$message.error('必须选中一项')
+      }
+    },
+    // 解绑人脸
+    delFace(row) {
+      console.log(row.id)
+      this.$confirm(
+        '确定要对' + row.name + '解绑人脸吗？',
+        '确认操作',
+        {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }
+      ).then(() => {
+        delFace(row.id).then(response => {
+          if (response.code === 200) {
+            this.$message.success('解绑人脸成功')
+            row.attr1 = ''
+          }
+        })
+      })
+    },
     // 删除
     del() {
       if (this.singleCheck()) {
diff --git a/src/views/system/user/regFace.vue b/src/views/system/user/regFace.vue
new file mode 100644
index 0000000..faec06d
--- /dev/null
+++ b/src/views/system/user/regFace.vue
@@ -0,0 +1,285 @@
+<template>
+  <el-dialog :visible.sync="dialogFormVisible" :title="titleText" append-to-body>
+    <div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-row>
+            <div class="avatar">
+              <el-image
+                :src="photo!==''?photo:defaultPhoto"
+                fit="cover"
+                style="width: 130px; height: 175px"/>
+            </div>
+          </el-row>
+          <el-row>
+            <el-upload
+              ref="upload"
+              :before-upload="handleBeforeUpload"
+              :http-request="uploadFile"
+              :show-file-list="false"
+              class="avatar-uploader"
+              action="string"
+              accept=".jpg,.jpeg,.png,.bmp">
+              <el-button type="primary" class="face-btn">点击上传照片</el-button>
+            </el-upload>
+          </el-row>
+          <el-row>
+            <el-button v-if="!canSnap" type="primary" plain class="face-btn" @click="openCamera">打开摄像头</el-button>
+            <el-button v-else type="primary" plain class="face-btn" @click="setImage">摄像头拍照</el-button>
+          </el-row>
+        </el-col>
+
+        <el-col :span="18">
+          <div class="camera_outer">
+            <video
+              id="videoCamera"
+              :width="videoWidth"
+              :height="videoHeight"
+              autoplay
+            />
+            <canvas
+              id="canvasCamera"
+              :width="videoWidth"
+              :height="videoHeight"
+              style="display: none"
+            />
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button v-show="canSave" type="primary" @click="saveData">保存</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { regFace } from '@/api/system/user'
+export default {
+  name: 'RegFace',
+  data() {
+    return {
+      userId: '', // 用户id
+      userName: '', // 用户名称
+      dialogFormVisible: false, // 对话框是否显示
+      defaultProps: {
+        label: 'name',
+        children: 'children'
+      },
+      videoWidth: 396,
+      videoHeight: 297,
+      thisCancas: null,
+      thisContext: null,
+      thisVideo: null,
+      canSnap: false, // 是否显示拍照按钮
+      canSave: false, // 是否可以提交
+      photo: '', // 图片路径
+      defaultPhoto: require('@/assets/global_images/photo.png'), // 默认图片路径
+      btnLoading: false // 保存按钮的加载中状态
+    }
+  },
+  computed: {
+    titleText: function() {
+      return this.userName + ''
+    }
+  },
+  methods: {
+    // 初始化对话框
+    initDialog: function(dialogFormVisible, row) {
+      this.loading = true
+      this.userId = row.id
+      this.userName = row.name
+      this.dialogFormVisible = dialogFormVisible
+    },
+    // 图片上传
+    uploadFile(file) {
+      console.log('uploadFile:' + file.file.name)
+      // 转base64
+      this.getBase64(file.file).then(resBase64 => {
+        this.photo = 'data:image/png;base64,' + resBase64.split(',')[1] // 直接拿到base64信息
+        this.canSave = true
+      })
+    },
+    getBase64(file) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        let fileResult = ''
+        reader.readAsDataURL(file)
+        // 开始转
+        reader.onload = function() {
+          fileResult = reader.result
+        }
+        // 转 失败
+        reader.onerror = function(error) {
+          reject(error)
+        }
+        // 转 结束  咱就 resolve 出去
+        reader.onloadend = function() {
+          resolve(fileResult)
+        }
+      })
+    },
+    // 上传前判断文件格式及大小
+    handleBeforeUpload(file) {
+      const isJPG = (file.type === 'image/jpeg') || (file.type === 'image/png') || (file.type === 'image/bmp')
+      let res = true
+      console.log(file.size)
+      const isLt2M = file.size / 1024 < 200
+      if (!isJPG) {
+        this.$message.error('上传图片只能是 JPG 或 PNG 或 BMP 格式!')
+        res = false
+      }
+      if (!isLt2M) {
+        this.$message.error('上传图片大小不能超过 200KB!')
+        res = false
+      }
+      return res
+    },
+    openCamera() {
+      // 打开摄像头
+      const _this = this
+      this.thisCancas = document.getElementById('canvasCamera')
+      this.thisContext = this.thisCancas.getContext('2d')
+      this.thisVideo = document.getElementById('videoCamera')
+      // 旧版本浏览器可能根本不支持mediaDevices，我们首先设置一个空对象
+      if (navigator.mediaDevices === undefined) {
+        navigator.mediaDevices = {}
+      }
+      // 一些浏览器实现了部分mediaDevices，我们不能只分配一个对象
+      // 使用getUserMedia，因为它会覆盖现有的属性。
+      // 这里，如果缺少getUserMedia属性，就添加它。
+      if (navigator.mediaDevices.getUserMedia === undefined) {
+        navigator.mediaDevices.getUserMedia = function(constraints) {
+          // 首先获取现存的getUserMedia(如果存在)
+          const getUserMedia =
+            navigator.webkitGetUserMedia ||
+            navigator.mozGetUserMedia ||
+            navigator.getUserMedia
+          // 有些浏览器不支持，会返回错误信息
+          // 保持接口一致
+          if (!getUserMedia) {
+            return Promise.reject(
+              new Error('getUserMedia is not implemented in this browser')
+            )
+          }
+          // 否则，使用Promise将调用包装到旧的navigator.getUserMedia
+          return new Promise(function(resolve, reject) {
+            getUserMedia.call(navigator, constraints, resolve, reject)
+          })
+        }
+      }
+      const constraints = {
+        audio: false,
+        video: {
+          width: this.videoWidth,
+          height: this.videoHeight
+        }
+      }
+      navigator.mediaDevices
+        .getUserMedia(constraints)
+        .then(function(stream) {
+          // 旧的浏览器可能没有srcObject
+          if ('srcObject' in _this.thisVideo) {
+            _this.thisVideo.srcObject = stream
+          } else {
+            // 避免在新的浏览器中使用它，因为它正在被弃用。
+            _this.thisVideo.src = window.URL.createObjectURL(stream)
+          }
+          _this.thisVideo.onloadedmetadata = function(e) {
+            _this.thisVideo.play()
+          }
+        })
+        .catch((err) => {
+          console.log(err)
+        })
+
+      this.canSnap = true
+    },
+    //  绘制图片（拍照功能）
+    setImage() {
+      const _this = this
+      // 点击，canvas画图
+      _this.thisContext.drawImage(
+        _this.thisVideo,
+        0,
+        0,
+        _this.videoWidth,
+        _this.videoHeight
+      )
+      // 获取图片base64链接
+      const image = this.thisCancas.toDataURL('image/png')
+      this.photo = image
+      this.canSave = true
+
+      // 关闭摄像头并将按钮复位
+      this.canSnap = false
+      this.stopNavigator()
+    },
+    // 关闭摄像头
+    stopNavigator() {
+      this.thisVideo.srcObject.getTracks()[0].stop()
+    },
+    // 保存数据
+    saveData: function() {
+      this.btnLoading = true
+      regFace({
+        userId: this.userId,
+        image: this.photo
+      }).then(response => {
+        console.log(response)
+        if (response.code === 200) {
+          this.$message.success('人脸注册成功')
+          this.btnLoading = false
+          this.$emit('watchChild')
+          this.dialogFormVisible = false
+        }
+      })
+    },
+    // 点击取消
+    cancel() {
+      this.dialogFormVisible = false
+      this.$emit('watchChild')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .camera_outer {
+    position: relative;
+    overflow: hidden;
+    background-size: 100%;
+    border: 2px solid #007eff;
+    width: 400px;
+    height: 301px;
+  }
+
+  .avatar-uploader .el-upload {
+    margin-left: 12px;
+    margin-top: 10px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+  }
+  .avatar-uploader .el-upload:hover {
+    border-color: #409EFF;
+  }
+  .avatar-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 178px;
+    height: 238px;
+    line-height: 238px;
+    text-align: center;
+  }
+  .avatar {
+    margin: 0px 10px;
+    display: block;
+  }
+  .face-btn {
+    width:126px;
+    margin-left: 10px;
+    margin-top: 20px;
+  }
+</style>