jbs_front/src/views/user/wjUser/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="昵称" />
        <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
            >
          </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"
      center
      width="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 == 'code'">
          <el-form-item label="客户编号">
            <el-input v-model="form.code" 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";
export default {
  data() {
    return {
      loading: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        query: {
          nickName: undefined,
          code: undefined,
          phonenumber: undefined,
          userType: '01',
          params: {
            beginTime: undefined,
            endTime: undefined
        }
        },
      },
      time: [],
      total: 0,
      tableData: [],
      form: {
        userId: ""
      },
      dialog: {
        Visible: false,
        title: ""
      },
      level: [],
      data: {},
      type: "level"
    };
  },
  created() {
    this.getDicts("jbs_wj_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: '01',
        },
        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;
    },
    //编辑用户编号
    handleEditCode(row) {
      this.form = {}
      this.dialog.Visible = true;
      this.dialog.title = "修改用户编号";
      this.form.userId = row.userId;
      this.type = "code";
      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 == "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 {
        let res = await updateUserInfo(this.form);
        if (res.code == 200) {
          this.$message.success("修改成功");
          this.dialog.Visible = false;
          this.queryUserInfo();
        }
      } catch (err) {

      }
    }
  }
};
</script>
<style scoped>
.content {
  background: #fff;
  margin-top: 15px;
}
.add-button {
  margin-top: 15px;
}
.search-button {
  display: flex;
}
</style>