|
@@ -110,6 +110,37 @@
|
|
|
<el-table-column label="员工后台昵称" align="center" prop="nickName" :show-overflow-tooltip="true" 员工后台 width="100"/>
|
|
|
<el-table-column label="部门" align="center" prop="deptName" :show-overflow-tooltip="true" />
|
|
|
<el-table-column label="手机号码" align="center" prop="phonenumber" width="120" />
|
|
|
+ <el-table-column label="二维码" align="center" prop="qrCodeWeixin">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 显示已上传的二维码 -->
|
|
|
+ <el-image
|
|
|
+ v-if="scope.row.qrCodeWeixin"
|
|
|
+ style="width: 80px; height: 80px; margin-bottom: 5px; display: block; margin-left: auto; margin-right: auto;"
|
|
|
+ :src="scope.row.qrCodeWeixin"
|
|
|
+ :preview-src-list="[scope.row.qrCodeWeixin]"
|
|
|
+ fit="contain">
|
|
|
+ <div slot="error" class="image-slot">
|
|
|
+ <i class="el-icon-picture-outline"></i>
|
|
|
+ </div>
|
|
|
+ </el-image>
|
|
|
+ <!-- 上传组件 -->
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ action="#"
|
|
|
+ :show-file-list="false"
|
|
|
+ :http-request="(options) => handleCustomUpload(options, scope.row)"
|
|
|
+ :before-upload="(file) => beforeImageUpload(file, scope.row)"
|
|
|
+ >
|
|
|
+ <el-button size="small" type="primary" :loading="scope.row.uploading">
|
|
|
+ {{ scope.row.qrCodeWeixin ? '更换图片' : '上传图片' }}
|
|
|
+ <i class="el-icon-upload el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div v-if="scope.row.uploadError" class="el-upload__tip" style="color: red;">
|
|
|
+ {{ scope.row.uploadError }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column label="状态" align="center">
|
|
|
<template slot-scope="scope">
|
|
|
<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
|
|
@@ -347,7 +378,7 @@
|
|
|
<!-- </el-form-item>-->
|
|
|
<!-- </el-col>-->
|
|
|
<!-- </el-row>-->
|
|
|
- <el-row>
|
|
|
+<!-- <el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="看课域名">
|
|
|
<el-input
|
|
@@ -360,7 +391,7 @@
|
|
|
<el-button type="primary" style="margin-left: 20px" @click="generateDomain">生成域名</el-button>
|
|
|
</el-form-item>
|
|
|
</el-col>
|
|
|
- </el-row>
|
|
|
+ </el-row>-->
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
<el-form-item label="备注">
|
|
@@ -468,11 +499,13 @@ import { syncDept } from '@/api/qw/qwDept';
|
|
|
import { getMyQwUserList,getMyQwCompanyList } from "@/api/qw/user";
|
|
|
import selectUser from "@/views/company/components/selectQwUser.vue";
|
|
|
import { getConfigByKey } from "@/api/company/companyConfig";
|
|
|
+import axios from "axios";
|
|
|
export default {
|
|
|
name: "User",
|
|
|
components: { Treeselect ,selectUser},
|
|
|
data() {
|
|
|
return {
|
|
|
+ uploadUrl: process.env.VUE_APP_BASE_API+"/company/user/common/uploadOSS",
|
|
|
// 遮罩层
|
|
|
loading: false,
|
|
|
qwUserList:[],
|
|
@@ -1108,7 +1141,104 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise且被 reject,则停止上传。
|
|
|
+ * @param {File} file - 用户选择的文件对象
|
|
|
+ * @param {Object} row - 当前行的数据对象
|
|
|
+ */
|
|
|
+ beforeImageUpload(file, row) {
|
|
|
+ // 清除之前的错误信息
|
|
|
+ this.$set(row, 'uploadError', '');
|
|
|
+ const isJPG = file.type === 'image/jpeg';
|
|
|
+ const isPNG = file.type === 'image/png';
|
|
|
+ const isGIF = file.type === 'image/gif'; // 根据需要添加更多格式
|
|
|
+ const isValidFormat = isJPG || isPNG || isGIF;
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2; // 限制图片大小为 2MB
|
|
|
+ if (!isValidFormat) {
|
|
|
+ const errorMsg = '上传二维码图片只能是 JPG/PNG/GIF 格式!';
|
|
|
+ this.$message.error(errorMsg);
|
|
|
+ this.$set(row, 'uploadError', errorMsg); // 在行内显示错误
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ const errorMsg = '上传二维码图片大小不能超过 2MB!';
|
|
|
+ this.$message.error(errorMsg);
|
|
|
+ this.$set(row, 'uploadError', errorMsg); // 在行内显示错误
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true; // 校验通过,允许上传
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 自定义上传方法
|
|
|
+ * @param {Object} options - Element UI upload 组件传递的参数,包含 file, onSuccess, onError, onProgress 等
|
|
|
+ * @param {Object} row - 当前行的数据对象
|
|
|
+ */
|
|
|
+ async handleCustomUpload(options, row) {
|
|
|
+
|
|
|
+ const file = options.file;
|
|
|
+ const formData = new FormData();
|
|
|
+ formData.append('file', file);
|
|
|
+
|
|
|
+ formData.append('userId',row.userId)
|
|
|
|
|
|
+ this.$set(row, 'uploading', true);
|
|
|
+ this.$set(row, 'uploadError', '');
|
|
|
+ try {
|
|
|
+ const response = await axios.post(this.uploadUrl, formData, {
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'multipart/form-data',
|
|
|
+ },
|
|
|
+ onUploadProgress: progressEvent => {
|
|
|
+ const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
|
|
|
+ console.log(`上传进度: ${percentCompleted}%`);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (response.data && (response.data.url || (response.data.data && response.data.data.url))) {
|
|
|
+ const imageUrl = response.data.url || response.data.data.url;
|
|
|
+ this.$set(row, 'qrCodeWeixin', imageUrl); // 更新行数据中的图片URL
|
|
|
+ this.$message.success('图片上传成功!');
|
|
|
+ options.onSuccess(response.data, file); // 通知el-upload上传成功 (虽然我们自定义了,但调用一下也无妨)
|
|
|
+ } else {
|
|
|
+ const errorMsg = response.data.message || '图片上传失败,服务器未返回有效URL';
|
|
|
+ this.$message.error(errorMsg);
|
|
|
+ this.$set(row, 'uploadError', errorMsg);
|
|
|
+ options.onError(new Error(errorMsg), file); // 通知el-upload上传失败
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('上传失败:', error);
|
|
|
+ let errorMsg = '图片上传失败';
|
|
|
+ if (error.response && error.response.data && error.response.data.message) {
|
|
|
+ errorMsg = error.response.data.message;
|
|
|
+ } else if (error.message) {
|
|
|
+ errorMsg = error.message;
|
|
|
+ }
|
|
|
+ this.$message.error(errorMsg);
|
|
|
+ this.$set(row, 'uploadError', errorMsg);
|
|
|
+ options.onError(error, file); // 通知el-upload上传失败
|
|
|
+ } finally {
|
|
|
+ this.$set(row, 'uploading', false); // 无论成功失败,结束上传状态
|
|
|
+ }
|
|
|
+ },
|
|
|
+ requestUpload() {
|
|
|
+ },
|
|
|
+ beforeUpload(){
|
|
|
+ console.log(file.type)
|
|
|
+ const isPic =
|
|
|
+ file.type === 'image/jpeg' ||
|
|
|
+ file.type === 'image/png' ||
|
|
|
+ file.type === 'image/gif' ||
|
|
|
+ file.type === 'image/jpg' ||
|
|
|
+ file.type === 'audio/mpeg'
|
|
|
+ const isLt2M = file.size / 1024 / 1024 < 2
|
|
|
+ if (!isPic) {
|
|
|
+ this.$message.error('上传图片只能是 JPG、JPEG、PNG、GIF 格式!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (!isLt2M) {
|
|
|
+ this.$message.error('上传头像图片大小不能超过 2MB!')
|
|
|
+ }
|
|
|
+ return isPic && isLt2M
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|