人脸识别上传

src/views/system/user/index.vue

@@ -61,6 +61,10 @@
 						<el-button type="warning" plain icon="Download" @click="handleExport"
 							v-hasPermi="['system:user:export']">导出</el-button>
 					</el-col>
+          <el-col :span="1.5">
+						<el-button type="success" plain icon="Grid" @click="handleFace"
+							v-hasPermi="['system:user:face']">人脸导入</el-button>
+					</el-col>
 					<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"
 						:columns="columns"></right-toolbar>
 				</el-row>
@@ -74,6 +78,11 @@
 						v-if="columns[2].visible" :show-overflow-tooltip="true" />
 					<el-table-column label="部门" align="center" key="deptName" prop="dept.deptName"
 						v-if="columns[3].visible" :show-overflow-tooltip="true" />
+          <el-table-column label="人脸登录" align="center" prop="createTime" v-if="columns[6].visible">
+            <template #default="scope">
+              <span>{{ scope.row.expand.faceEnable }}</span>
+            </template>
+          </el-table-column>
 					<el-table-column label="手机号码" align="center" key="phonenumber" prop="phonenumber"
 						v-if="columns[4].visible" width="120" >
 						<template #default="scope">
@@ -228,6 +237,26 @@
 				</div>
 			</template>
 		</el-dialog>
+	<!-- 人脸导入对话框 -->
+		<el-dialog :title="face.title" v-model="face.open" width="400px" append-to-body>
+			<el-upload ref="faceRef" multiple accept=".bmp, .gif, .jpg, .jpeg, .png" :headers="face.headers"
+				:action="face.url" :disabled="face.isUploading"
+				:on-progress="handleFaceProgress" :on-success="handleFaceSuccess" :auto-upload="false" drag>
+				<el-icon class="el-icon--upload"><upload-filled /></el-icon>
+				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+				<template #tip>
+					<div class="el-upload__tip text-center">
+						<span>仅允许导入以“user-用户编号”命名的图片文件。</span>
+					</div>
+				</template>
+			</el-upload>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button type="primary" @click="submitFaceForm">确 定</el-button>
+					<el-button @click="face.open = false">取 消</el-button>
+				</div>
+			</template>
+		</el-dialog>
 
 		<!-- 修改用户登录限制对话框 -->
 		<el-dialog :title="login.title" v-model="login.open" width="500px" append-to-body>
@@ -312,6 +341,24 @@
 		// 上传的地址
 		url: import.meta.env.VITE_APP_BASE_API + "/system/user/importData"
 	});
+
+  /*** 用户导入参数 */
+  const face = reactive({
+    // 是否显示弹出层（用户导入）
+    open: false,
+    // 弹出层标题（用户导入）
+    title: "",
+    // 是否禁用上传
+    isUploading: false,
+    // 是否更新已经存在的用户数据
+    updateSupport: 0,
+    // 设置上传的请求头部
+    headers: {
+      Authorization: "Bearer " + getToken()
+    },
+    // 上传的地址
+    url: import.meta.env.VITE_APP_BASE_API + "/system/user/importFace"
+  });
 	/*** 用户导入参数 */
 	const login = reactive({
 		// 是否显示弹出层（用户导入）
@@ -546,6 +593,11 @@
 		upload.title = "用户导入";
 		upload.open = true;
 	};
+  /** 导入按钮操作 */
+	function handleFace() {
+		face.title = "人脸导入";
+    face.open = true;
+	};
 	/** 下载模板操作 */
 	function importTemplate() {
 		proxy.download("system/user/importTemplate", {}, `user_template_${new Date().getTime()}.xlsx`);
@@ -569,6 +621,26 @@
 	function submitFileForm() {
 		proxy.$refs["uploadRef"].submit();
 	};
+
+  /**文件上传中处理 */
+  const handleFaceProgress = (event, file, fileList) => {
+    face.isUploading = true;
+  };
+  /** 文件上传成功处理 */
+  const handleFaceSuccess = (response, file, fileList) => {
+    face.open = false;
+    face.isUploading = false;
+    proxy.$refs["faceRef"].handleRemove(file);
+    proxy.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
+        response.msg + "</div>", "导入结果", {
+      dangerouslyUseHTMLString: true
+    });
+    getList();
+  };
+  /** 提交上传文件 */
+  function submitFaceForm() {
+    proxy.$refs["faceRef"].submit();
+  };
 	/** 解密手机号码 */
 	const smPhone = (num)=>{
 		// console.log('num',num);