jbs_front/src/views/user/dmUser/index.vue

<template>
  <div style="padding:30px;">
    <!-- 搜索栏 -->
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="用户昵称:" style="margin-right:50px;">
          <el-input
            v-model="queryParams.query.nickName"
            clearable
            placeholder="请输入用户昵称"
          />
        </el-form-item>
        <el-form-item label="用户编号:" style="margin-right:50px;">
          <el-input
            v-model="queryParams.query.code"
            clearable
            placeholder="请输入用户编号"
          />
        </el-form-item>
        <el-form-item label="联系电话:" style="margin-right:50px;">
          <el-input
            v-model="queryParams.query.phonenumber"
            clearable
            placeholder="请输入联系电话"
          />
        </el-form-item>
        <el-form-item label="注册时间:" style="margin-right:50px;">
          <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </el-form>
      <div class="search-button">
        <el-button
          size="medium"
          type="primary"
          style="height:36px;width:100px;"
          @click="search"
          >搜索</el-button
        >
        <el-button
          @click="refresh"
          size="medium"
          style="margin-left:20px;height:36px;width:100px;"
          >重置</el-button
        >
      </div>
    </div>
    <!-- 列表 -->
    <div class="content">
      <el-table
        v-loading="loading"
        ref="singleTable"
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" width="50" />
        <el-table-column align="center" property="avatar" label="头像">
          <template slot-scope="scope">
            <div>
              <img style="width: 50px;height: 50px;" :src="scope.row.avatar" alt="" />
            </div>
          </template>
        </el-table-column>
        <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>
              <span>{{ scope.row.code }}</span>
              <i
                style="float: right;font-size:14px;"
                @click="handleEditCode(scope.row)"
                class="el-icon-edit-outline"
              ></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          property="phonenumber"
          label="联系电话"
        />
        <el-table-column
          align="center"
          property="createTime"
          label="注册时间"
        />
        <el-table-column align="center" property="level" label="用户等级">
          <template slot-scope="scope">
            {{ levelormat(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" property="remark" label="备注">
          <template slot-scope="scope">
            <div>
              <span>{{ scope.row.remark }}</span>
              <i
                style="float: right;font-size:14px;"
                @click="handleEditRemark(scope.row)"
                class="el-icon-edit-outline"
              ></i>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <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>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="queryUserInfo"
      />
    </div>
    <!-- 修改表单 -->
    <el-dialog :title="dialog.title" :visible.sync="dialog.Visible" @open=openDialog center :width="type=='userInfo'?'690px':'350px'">
      <el-form :model="form" :inline="true">
        <div v-if="type == 'level'">
          <el-form-item label="客户昵称:" style="width:100%">
            <span>{{ data.nickName }}</span>
          </el-form-item>
          <el-form-item label="客户等级:" style="width:100%">
            <span>{{ levelormat(data) }}</span>
          </el-form-item>
          <el-form-item label="修改为:" style="width:100%">
            <el-select v-model="form.level" placeholder="请选择客户等级">
              <el-option
                v-for="(item,index) in level"
                :key="index"
                :label="item.dictLabel"
                :value="item.dictValue"
              />
            </el-select>
          </el-form-item>
        </div>
        <div v-if="type == 'userInfo'" style="display:flex;flex-direction: column;width:100%">
          <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
              style="width:100%"
              type="textarea"
              :rows="5"
              v-model="form.remark"
              placeholder="请输入备注"
            />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.Visible = false">取 消</el-button>
        <el-button type="primary" @click="subMit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</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,
        pageSize: 10,
        query: {
          nickName: undefined,
          code: undefined,
          phonenumber: undefined,
          userType: '02',
          params: {
            beginTime: undefined,
            endTime: undefined
        }
        },
      },
      time: [],
      total: 0,
      tableData: [],
      form: {
        userId: "",
        nickName:'',//昵称
        code:'',//编号
        remark:'',//备注
        introduction:'',//完善信息中的简介
        dataImg:[],//完善信息中的图片
      },
      dialog: {
        Visible: false,
        title: ""
      },
      level: [],
      data: {},
      type: "level"
    };
  },
  created() {
    this.getDicts("jbs_dm_user_level").then(res => {
    this.level = res.data;
    });
  },
  mounted() {
    this.queryUserInfo();
  },
  methods: {
    //获取用户
    async queryUserInfo() {
      this.loading = true;
      try {
        let res = await queryUserInfo(this.queryParams);
        if (res.code == 200) {
          this.loading = false;
          this.tableData = res.rows;
          this.total = res.total;
        }
      } catch (err) {

      }
    },
    //搜索
    search() {
      if (this.time != null) {
        if (this.time.length > 0) {
          this.queryParams.query.params.beginTime = this.time[0];
          this.queryParams.query.params.endTime = this.time[1];
        }
      } else {
        this.time = [];
        this.queryParams.query.params.beginTime = undefined;
        this.queryParams.query.params.endTime = undefined;
      }
      this.queryUserInfo()
    },
    //重置
    refresh() {
      this.time = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        query: {
          nickName: undefined,
          code: undefined,
          phonenumber: undefined,
          userType: '02',
        },
        params: {
          beginTime: undefined,
          endTime: undefined
        }
      }
      this.queryUserInfo()
    },
    // 任务组名字典翻译
    levelormat(row, column) {
      return this.selectDictLabel(this.level, row.level);
    },
    // 编辑用户等级
    handleEdit(row) {
      // 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.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.dialog.Visible = true;
      this.dialog.title = "修改用户备注";
      this.form.userId = row.userId;
      this.type = "remark";
      this.data = row;
    },
    //提交表单
    async subMit() {
      if(this.type == "level"){
        if(this.form.level == undefined || this.form.level == ''){
          this.$message({
            message: '请选择用户等级',
            type: "error"
          });
          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({
            message: '请输入用户编号',
            type: "error"
          });
          return false;
        }
      }
      if(this.type == "remark"){
        if(this.form.remark == undefined || this.form.remark == ''){
          this.$message({
            message: '请输入用户备注',
            type: "error"
          });
          return false;
        }
      }
      try {
        this.form.coverImgs = this.dataImg.join(",");
        let res = await updateUserInfo(this.form);
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.dialog.Visible = false;
          this.queryUserInfo();
        }
      } catch (err) {

      }
    }
  }
};
</script>
<style lang='scss' scoped>
.content {
  background: #fff;
  margin-top: 15px;
}
.add-button {
  margin-top: 15px;
}
.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;
}

::v-deep .el-form-item__content{
  width: 100%;
}
</style>