用户管理Dm用户列表新增昵称和完善信息修改

src/views/user/dmUser/index.vue

@@ -69,7 +69,18 @@
             </div>
           </template>
         </el-table-column>
-        <el-table-column align="center" property="nickName" label="昵称" />
+        <el-table-column align="center" property="nickName" label="昵称">
+          <template slot-scope="scope">
+          <div>
+            <span>{{ scope.row.nickName }}</span>
+            <i
+              style="float: right;font-size:14px;"
+              @click="handleEditNickName(scope.row)"
+              class="el-icon-edit-outline"
+            ></i>
+          </div>
+        </template>
+        </el-table-column>
         <el-table-column align="center" property="code" label="编号">
           <template slot-scope="scope">
             <div>
@@ -114,6 +125,9 @@
             <el-button type="text" size="mini" @click="handleEdit(scope.row)"
               >修改等级</el-button
             >
+            <el-button type="text" size="mini" @click="handleInfo(scope.row)"
+              >完善信息</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
@@ -129,6 +143,7 @@
     <el-dialog
       :title="dialog.title"
       :visible.sync="dialog.Visible"
+      @open=openDialog
       center
       width="350px"
     >
@@ -151,11 +166,49 @@
             </el-select>
           </el-form-item>
         </div>
+        <div v-if="type == 'userInfo'">
+          <el-form-item label="简介">
+            <el-input style="width:100%" type="textarea" :rows="5" v-model="form.introduction" placeholder="请输入用户简介" />
+          </el-form-item>
+          <el-form-item label="封面信息">
+            <!-- <el-input v-model="form.coverImgs" clearable placeholder="请输入客户编号" /> -->
+            <div v-for="(item, l) in dataImg" :key="l" class="imgdata" style="margin-left:10px;">
+              <el-image style="width: 146px; height: 146px" :src="item" fit="fill">
+              </el-image>
+              <div class="imgdialog">
+                <p>
+                  <i
+                    class="el-icon-delete"
+                    @click="delDataImg(item, l)"
+                    style="font-size: 20px;"
+                  ></i>
+                </p>
+              </div>
+            </div>
+            <el-upload
+                      class="avatar-uploader" 
+                      style="float:left;margin-left: 10px;" 
+                      action list-type="picture-card" 
+                      :show-file-list="false" 
+                      :http-request="changeImgs" 
+                      element-loading-text="正在上传..."
+                      v-loading="loadingOtherImg">
+                      <i class="el-icon-plus"></i>
+            </el-upload>
+          </el-form-item>
+          <el-progress :percentage="jinduOtherImgNum" v-if="jinduShowOtherImg" status="success"></el-progress>
+        </div>
+
         <div v-if="type == 'code'">
           <el-form-item label="客户编号">
             <el-input v-model="form.code" clearable placeholder="请输入客户编号" />
           </el-form-item>
         </div>
+        <div v-if="type == 'nickName'">
+          <el-form-item label="昵称">
+            <el-input v-model="form.nickName" clearable placeholder="请输入昵称" />
+          </el-form-item>
+        </div>
         <div v-if="type == 'remark'">
           <el-form-item label="备注">
             <el-input
@@ -177,9 +230,14 @@
 </template>
 <script>
 import { queryUserInfo, updateUserInfo } from "@/api/user/user.js";
+import { uploadFile, delFile } from "@/api/upload/upload.js";
 export default {
   data() {
     return {
+      loadingOtherImg:false,//完善信息中封面图片加载圈
+      jinduOtherImgNum:0,//完善信息中封面图片进度
+      jinduShowOtherImg:false,//进度条显示
+      dataImg:[],//多个封面图片
       loading: true,
       queryParams: {
         pageNum: 1,
@@ -199,7 +257,12 @@ export default {
       total: 0,
       tableData: [],
       form: {
-        userId: ""
+        userId: "",
+        nickName:'',//昵称
+        code:'',//编号
+        remark:'',//备注
+        introduction:'',//完善信息中的简介
+        dataImg:[],//完善信息中的图片
       },
       dialog: {
         Visible: false,
@@ -272,25 +335,140 @@ export default {
     },
     // 编辑用户等级
     handleEdit(row) {
-      this.form = {}
+      // this.form = {}
       this.dialog.Visible = true;
       this.dialog.title = "修改用户等级";
       this.type = "level";
       this.form.userId = row.userId;
       this.data = row;
     },
+    //弹窗回显
+    openDialog(){
+      //昵称回显
+      if(this.type == 'nickName'){
+        console.log(this.data.nickName);
+        console.log('昵称');
+         this.form.nickName = this.data.nickName;
+      }
+      //编号回显
+      if(this.type == 'code'){
+        console.log(this.data.code);
+        console.log('编号');
+        this.form.code = this.data.code;
+      }
+      //备注回显
+      if(this.type == 'remark'){
+         console.log(this.data.remark);
+        console.log('备注');
+        this.form.remark = this.data.remark;
+        console.log('21',this.form.remark);
+      }
+
+      //完善信息回显
+      if(this.type=='userInfo'){
+        this.form.introduction = this.data.introduction; //简介回显
+        if(this.data.coverImgs){
+          this.dataImg = this.data.coverImgs.split(',');//回显图片
+        }else{
+          this.dataImg='';
+        }
+      }
+    },
+    //完善信息
+    handleInfo(row){
+      // this.form = {}
+      this.dialog.Visible = true;
+      this.dialog.title = "完善用户信息";
+      this.type = "userInfo";
+      this.form.userId = row.userId;
+      // this.form.introduction = row.introduction;
+      this.data = row;
+    },
+     //完善信息中的封面图片上传
+    changeImgs({ file }) {
+      this.loadingOtherImg = true; //显示加载
+      this.jinduOtherImgNum = 0;//进度条从0开始
+      this.jinduShowOtherImg = true; //是否显示进度条
+      let formData = new FormData();
+      formData.append("file", file);
+      formData.append("type", "product");
+      uploadFile(formData).then(res => {
+        this.dataImg.push(res.data.wjUrl);
+        this.loadingOtherImg = false; //显示加载
+        clearInterval(this.videoTime); //清除定时器
+        this.videoTime = null; //清除定时器
+        this.successVideo('otherImg'); //
+      });
+      let videoJindu1 = setTimeout(() => {
+        this.jinduVideoNum = 30;
+      }, 500);
+      let videoJindu2 = setTimeout(() => {
+        videoJindu1
+        this.jinduVideoNum = 80;
+      }, 1000);
+      this.videoTime = setTimeout(() => {
+        videoJindu2
+        this.jinduVideoNum = 90;
+      }, 1500);
+    },
+    successVideo(type){
+      console.log('上传成功');
+      switch (type) { 
+        case 'otherImg': //其他图片
+          this.jinduOtherImgNum = 100;
+          setTimeout(() => {
+            this.jinduShowOtherImg = false;
+          }, 1200);
+          break;
+      }
+    },
+    //完善信息中的封面图片删除
+    delDataImg(item, index) {
+      this.$confirm("此操作将永久删除图片,是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          this.dataImg.splice(index, 1);
+          delFile({ wjUrl: item }).then(res => {
+            if (res.code == 200) {
+              this.$message.success("删除成功");
+            }
+          });
+          // this.$message({
+          //   type: "success",
+          //   message: "删除成功!"
+          // });
+        })
+        .catch(() => {
+          this.$message({
+            type: "error",
+            message: "已取消删除"
+          });
+        });
+    },
     //编辑用户编号
     handleEditCode(row) {
-      this.form = {}
+      // this.form = {}
       this.dialog.Visible = true;
       this.dialog.title = "修改用户编号";
       this.form.userId = row.userId;
       this.type = "code";
       this.data = row;
     },
+    //编写用户昵称
+    handleEditNickName(row){
+      // this.form = {}
+      this.dialog.Visible = true;
+      this.dialog.title = "修改昵称";
+      this.form.userId = row.userId;
+      this.type = "nickName";
+      this.data = row;
+    },
     //编辑客户备注
     handleEditRemark(row) {
-      this.form = {}
+      // this.form = {}
       this.dialog.Visible = true;
       this.dialog.title = "修改用户备注";
       this.form.userId = row.userId;
@@ -308,6 +486,24 @@ export default {
           return false;
         }
       }
+      if(this.type == "userInfo"){
+        if(this.form.introduction == undefined || this.form.introduction == ''){
+          this.$message({
+            message: '请填写完善用户信息',
+            type: "error"
+          });
+          return false;
+        }
+      }
+      if(this.type == "nickName"){
+        if(this.form.nickName == undefined || this.form.nickName == ''){
+          this.$message({
+            message: '请输入用户昵称',
+            type: "error"
+          });
+          return false;
+        }
+      }
       if(this.type == "code"){
         if(this.form.code == undefined || this.form.code == ''){
           this.$message({
@@ -327,6 +523,7 @@ export default {
         }
       }
       try {
+        this.form.coverImgs = this.dataImg.join(",");
         let res = await updateUserInfo(this.form);
         if (res.code == 200) {
           this.$message.success("修改成功");
@@ -340,7 +537,7 @@ export default {
   }
 };
 </script>
-<style scoped>
+<style lang='scss' scoped>
 .content {
   background: #fff;
   margin-top: 15px;
@@ -351,4 +548,35 @@ export default {
 .search-button {
   display: flex;
 }
+.imgdata {
+  position: relative;
+  // display: inline-block;
+  float: left;
+  margin-left: 60px;
+
+  .imgdialog {
+    width: 146px;
+    height: 146px;
+    display: none;
+    position: absolute;
+    background: rgba(127, 127, 127, 0.5);
+    top: 0;
+    left: 0;
+    justify-content: space-between;
+    align-content: center;
+
+    p {
+      margin: auto;
+
+      i {
+        cursor: pointer;
+        color: white;
+      }
+    }
+  }
+}
+
+.imgdata:hover .imgdialog {
+  display: flex !important;
+}
 </style>

vue.config.js

@@ -37,8 +37,8 @@ module.exports = {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
         // target: `http://127.0.0.1:8501/`,
-        // target: `http://47.104.146.186:8501/`,
-        target: `http://192.168.3.23:8501/`,
+        target: `http://47.104.146.186:8501/`,
+        // target: `http://192.168.3.23:8501/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''