feat: 销售端添加上传个微二维码功能

src/api/users/user.js

@@ -56,7 +56,7 @@ export function updateUser(data) {
 // 列出当前公司的客户
 export function listUser(data) {
   return request({
-    url: '/fsuser/user/list',
+    url: '/user/fsUser/list',
     method: 'get',
     params: data
   })
@@ -65,7 +65,7 @@ export function listUser(data) {
 // 转移客户
 export function transferUser(data) {
   return request({
-    url: '/fsuser/user/transfer',
+    url: '/fsUser/user/transfer',
     method: 'post',
     data: data
   })

src/views/company/companyUser/index.vue

@@ -92,6 +92,38 @@
           <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>
@@ -166,27 +198,27 @@
         <el-button @click="qwCancel">取 消</el-button>
       </div>
     </el-dialog>
+    <el-dialog title="绑定个微账号" :visible.sync="gwOpen" width="800px" append-to-body>
+      <el-form ref="gwForm" :model="gwForm" label-width="80px">
+        <el-form-item label="查询"  prop="companyUserId">
+          <el-button type="primary" icon="el-icon-search"  @click="selectGwUser()"  size="mini">搜索账号</el-button>
+        </el-form-item>
+        <el-form-item label="个微账号"  prop="companyUserId">
 
-    <el-dialog title="选择企微主体" :visible.sync="synNameOpen" width="800px" append-to-body>
-
-      <el-form   label-width="80px">
-        <el-form-item label="企微公司" prop="corpId">
-          <el-select v-model="synNameform.corpId" placeholder="企微公司"  >
-            <el-option
-              v-for="dict in myQwCompanyList"
-              :key="dict.dictValue"
-              :label="dict.dictLabel"
-              :value="dict.dictValue"
-            />
-          </el-select>
+          <el-tag
+            style="margin-left: 5px"
+            size="medium"
+            :key="id"
+            v-for="id in qwUser"
+            closable
+            :disable-transitions="false"
+            @close="handleClosegroupUser(id)">
+            <span v-for="list in qwUserList" :key="list.qwUserId" v-if="list.id==id">{{list.qwUserName}}({{list.corpName}})
+            </span>
+          </el-tag>
         </el-form-item>
       </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="synNameSubmitForm">确 定</el-button>
-        <el-button @click="synNameOpen=false">取 消</el-button>
-      </div>
     </el-dialog>
-
     <el-dialog title="选择企微主体" :visible.sync="synOpen" width="800px" append-to-body>
 
       <el-form   label-width="80px">
@@ -205,7 +237,7 @@
         <el-button type="primary" @click="synSubmitForm">确 定</el-button>
         <el-button @click="synOpen=false">取 消</el-button>
       </div>
-    </el-dialog>
+    </el-dialog>`
     <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="700px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -280,7 +312,7 @@
           </el-col>
 
         </el-row>
-        <el-row>
+         <el-row>
           <el-col :span="12">
             <el-form-item label="身份证号">
               <el-input v-model="form.idCard" placeholder="请输入身份证号" maxlength="18" />
@@ -330,31 +362,10 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
-
-    <!--    &lt;!&ndash; 用户导入对话框 &ndash;&gt;-->
-    <!--    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>-->
-    <!--      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>-->
-    <!--        <i class="el-icon-upload"></i>-->
-    <!--        <div class="el-upload__text">-->
-    <!--          将文件拖到此处，或-->
-    <!--          <em>点击上传</em>-->
-    <!--        </div>-->
-    <!--        <div class="el-upload__tip" slot="tip">-->
-    <!--          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据-->
-    <!--          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>-->
-    <!--        </div>-->
-    <!--        <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>-->
-    <!--      </el-upload>-->
-    <!--      <div slot="footer" class="dialog-footer">-->
-    <!--        <el-button type="primary" @click="submitFileForm">确 定</el-button>-->
-    <!--        <el-button @click="upload.open = false">取 消</el-button>-->
-    <!--      </div>-->
-    <!--    </el-dialog>-->
-    <el-dialog :title="user.title" :visible.sync="user.open" width="1000px" append-to-body>
+    <el-dialog :title="user.title" :visible.sync="user.open" width="800px" append-to-body>
       <selectUser ref="selectUser" @bindQwUser="bindQwUser"></selectUser>
     </el-dialog>
-
-
+    <gw-query-list-dialog :visible="gwSearchOpen"/>
     <el-dialog :title="companyUserArea.title" :visible.sync="companyUserArea.open" width="300px" append-to-body>
       <el-select v-model="addressId"  filterable placeholder="请选择所属销售的区域" style="width: 200px;">
         <el-option
@@ -394,11 +405,22 @@ import {bindQwUser, getQwUserList, addQwUser, getQwUser, getQwUserByIds,addQwUse
 import { syncDept } from '@/api/qw/qwDept';
 import { getMyQwUserList,getMyQwCompanyList } from "@/api/qw/user";
 import  selectUser  from "@/views/company/components/selectQwUser.vue";
+import {listWxUser} from "@/api/wxUser/wxUser";
+import GwQueryListDialog from "@/views/company/companyUser/gwQueryListDialog/gwQueryListDialog.vue";
+import axios from "axios";
 export default {
   name: "User",
   components: { Treeselect ,selectUser},
   data() {
     return {
+      uploadUrl: process.env.VUE_APP_BASE_API+"/company/user/common/uploadOSS",
+      companyUserArea:{
+        open:false,
+        title:"分配区域",
+      },
+      //选择的区域
+      addressId:null,
+      citysAreaList:[],
       // 遮罩层
       loading: false,
       qwUserList:[],
@@ -466,21 +488,6 @@ export default {
         children: "children",
         label: "label",
       },
-      // // 用户导入参数
-      // upload: {
-      //   // 是否显示弹出层（用户导入）
-      //   open: false,
-      //   // 弹出层标题（用户导入）
-      //   title: "",
-      //   // 是否禁用上传
-      //   isUploading: false,
-      //   // 是否更新已经存在的用户数据
-      //   updateSupport: 0,
-      //   // 设置上传的请求头部
-      //   headers: { Authorization: "Bearer " + getToken() },
-      //   // 上传的地址
-      //   url: process.env.VUE_APP_BASE_API + "/system/user/importData",
-      // },
       // 查询参数
       queryParams: {
         pageNum: 1,
@@ -550,6 +557,9 @@ export default {
     },
   },
   created() {
+    getCitysAreaList().then(res=>{
+      this.citysAreaList=res.data;
+    })
     this.getList();
     this.getTreeselect();
     this.getDicts("sys_normal_disable").then((response) => {
@@ -558,17 +568,148 @@ export default {
     this.getDicts("company_user_sex").then((response) => {
       this.sexOptions = response.data;
     });
+    this.getConfigKey("sys.user.initPassword").then((response) => {
+      this.initPassword = response.msg;
+    });
     this.getDicts("sys_qw_user_status").then(response => {
-      this.qwStatusOptions = response.data;
+          this.qwStatusOptions = response.data;
     });
-    getCitysAreaList().then(res=>{
-      this.citysAreaList=res.data;
-    })
+
     getMyQwCompanyList().then(response => {
       this.myQwCompanyList = response.data;
     });
   },
   methods: {
+    /**
+     * 上传文件之前的钩子，参数为上传的文件，若返回 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
+    },
+    submitFormArea(address){
+      const uIds = this.ids;
+
+      if (address == null){
+        this.$message.error("请选择地区");
+        return;
+      }
+      updateCompanyUserAreaList({userIds:uIds,addressId:address}).then(res=>{
+        this.companyUserArea.open=false;
+        this.getList();
+        this.msgSuccess("操作成功");
+
+      })
+
+    },
+    cancelArea(){
+      this.companyUserArea.open=false;
+      this.addressId=null;
+    },
+    handerCompanyUserAreaList(){
+      this.companyUserArea.open=true;
+    },
+    // 绑定个微
+    gwBind(row){
+      this.gwOpen = true
+    },
+    // 查询个微账号
+    selectGwUser(){
+      listWxUser().then(res=>{
+        this.gwSearchOpen = true;
+      })
+    },
     /** 查询用户列表 */
     getList() {
       this.loading = true;
@@ -720,11 +861,11 @@ export default {
           getQwUserByIds(this.qwUser).then(res => {
             this.qwUserList=res.data;
           })
-          // this.qwUser.forEach(item => {
-          //     getQwUser(item).then(response => {
-          //         this.qwUserList.push(response.data);
-          //     });
-          // });
+           // this.qwUser.forEach(item => {
+           //     getQwUser(item).then(response => {
+           //         this.qwUserList.push(response.data);
+           //     });
+           // });
         }
         this.qwOpen = true;
       });
@@ -895,11 +1036,6 @@ export default {
         loadingRock.close()
       });
     },
-
-
-
-
-
     /** 删除按钮操作 */
     handleDelete(row) {
       const userIds = row.userId || this.ids;