RT_MQ/src/components/UserManger.vue

<template>
  <div>
    <div class="search-box">
      <div class="filter-box">
        <el-input
          size="small"
          placeholder="请输入用户名"
          @change="checkList()"
          clearable
          v-model="username"
        >
          <i slot="suffix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
      <el-button
        v-if="have_type == 0 || staff == 1 || have_type == 2"
        type="success"
        @click="addUserFun"
        size="mini"
        >添加新用户</el-button
      >
    </div>
    <el-row :gutter="10">
      <el-col
        :xs="24"
        :sm="24"
        :md="12"
        :lg="6"
        :xl="6"
        v-for="item in userList"
        :key="item.uid"
      >
        <el-card class="box-card pad0">
          <div class="img-box">
            <img src="@/assets/images/systemManger/user.png" />
            <p :title="item.username">{{ item.username | ellipsis }}</p>
          </div>
          <div class="detail">
            <p>
              模块类型
              <span v-if="item.user_type == '1'">农业植保监测系统</span>
              <span v-if="item.user_type == '2'">农业气象监测系统</span>
              <span v-if="item.user_type == '3'">环境灾害预警系统</span>
              <span v-if="item.user_type == '4'">农产品溯源系统</span>
              <span v-if="item.user_type == '5'">可视农业应用系统</span>
              <span v-if="item.user_type == '6'">苗情监测应用系统</span>
            </p>
            <p>
              用户类型
              <span v-if="item.user_have_type == '1'">普通用户</span>
              <span v-if="item.user_have_type == '0'">模块管理员</span>
              <span v-if="item.user_have_type == '2'">项目管理员</span>
            </p>
            <p>
              适配用户
              <span>{{ item.user_have || "无" }}</span>
            </p>
            <p :title="item.site_name">
              站点名称
              <span>{{ (item.site_name || "无") | ellipsis }}</span>
            </p>
            <p>
              站点地址
              <span
                >{{ item.site_pro }} {{ item.site_city }}
                {{ item.site_area }}</span
              >
            </p>
            <p :title="item.user_header">
              系统标题
              <span>{{ (item.user_header || "--") | ellipsis }}</span>
            </p>
            <p>
              logo
              <span
                ><img style="width: 46px; height: 32px" :src="item.logo" alt=""
              /></span>
            </p>
          </div>
          <div class="btn">
            <el-button size="small" type="success" @click="edit(item)" plain
              >用户编辑</el-button
            >
            <template
              v-if="
                (have_type == 0 || staff == 1 || have_type == 2) &&
                currusername != item.username
              "
            >
              <el-button
                size="small"
                v-if="item.user_have_type == '1' || item.user_have_type == '2'"
                type="success"
                @click="allotEquip(item.id, item.username)"
                plain
                >分配设备</el-button
              >
              <el-button
                size="small"
                v-if="item.user_have_type == '1' || item.user_have_type == '2'"
                type="success"
                @click="delUser(item.id, item.username)"
                plain
                >删除用户</el-button
              >
            </template>
            <el-button
              size="small"
              type="success"
              @click="resetPassword(item.id, item.username)"
              plain
              >重置密码</el-button
            >
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 暂无数据 -->
    <div class="expertDiagnosis_referral_units_not" v-if="userList.length <= 0">
      <img
        src="@/assets/images/monitor/zanwu.png"
        alt
        class="expertDiagnosis_referral_units_notImg"
      />
    </div>
    <el-pagination
      v-if="userList.length > 0"
      background
      :page-size="8"
      layout="prev, pager, next"
      :current-page="page"
      :total="totalNum"
      @current-change="changePage"
    ></el-pagination>
    <!-- 重置密码 -->
    <el-dialog
      title="重置密码"
      :visible.sync="resetPassDialogVisible"
      width="30%"
      @close="resetPassDialogClosed"
    >
      <el-form
        ref="resetPassFormRef"
        :model="resetPassForm"
        label-width="110px"
        :rules="resetPassFormRules"
      >
        <el-form-item label="用户名 : " prop="username">
          <el-input
            type="text"
            disabled
            v-model="resetPassForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码 : " prop="pass">
          <el-input type="password" v-model="resetPassForm.pass"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码 : " prop="checkPass">
          <el-input
            type="password"
            v-model="resetPassForm.checkPass"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetPassDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetPassSubm">确认</el-button>
      </span>
    </el-dialog>

    <!-- 用户编辑 -->
    <el-dialog
      title="用户信息编辑"
      :visible.sync="editUserDialogVisible"
      width="500px"
      @close="editUserDialogClosed"
    >
      <el-form ref="editUserFormRef" :model="editUserForm" label-width="80px">
        <el-form-item label="用户名 : ">
          <el-input v-model="editUserForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="系统标题 : ">
          <el-input
            maxlength="11"
            v-model="editUserForm.user_header"
          ></el-input>
        </el-form-item>
        <el-form-item label="logo : ">
          <el-upload
            class="avatar-uploader"
            action
            :auto-upload="false"
            :show-file-list="false"
            :on-change="changeUpload"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="editUserForm.logo"
              :src="editUserForm.logo"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="站点名称 : ">
          <!-- <el-input maxlength="16" v-model="editUserForm.site"></el-input> -->
          <el-select
            v-model="editUserForm.site_name"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in siteNameList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="站点位置 : ">
          <div class="block">
            <el-cascader
              placeholder="搜索：河南"
              v-model="cityValue"
              :options="cityData"
              :props="props"
              @change="handleChange"
              filterable
              :disabled="true"
            >
            </el-cascader>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserSubm">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cityData from "./citydata.js";
export default {
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    },
  },
  data() {
    var checkMobile = (rule, value, callback) => {
      const regMobile = /^1\d{10}$/;
      if (regMobile.test(value)) {
        callback();
      } else {
        // 返回一个错误提示
        callback(new Error("请输入合法的手机号码"));
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        if (this.resetPassForm.checkPass !== "") {
          this.$refs.resetPassFormRef.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.resetPassForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      zanwu: "/images/expertDiagnosis/zanwu.png",
      role: "", //筛选项 角色类型
      userTypeCheck: "", //筛选项 用户类型
      username: "", //筛选项
      roleList: [],
      page: 1,
      userList: [],
      userGroupList: [],
      totalNum: 0,
      //省市县
      areaList: [],
      resetPassDialogVisible: false,
      addUserDialogVisible: false,
      editUserDialogVisible: false,
      resetPassForm: {
        username: "",
        uid: "",
        pass: "",
        checkPass: "",
      },
      addUserForm: {
        username: "",
        mobile: "",
        pass: "",
        role_id: "",
        user_type: "",
        pcd: "",
        user_area: "",
        cs_user: false, //1为普通用户
        user_group_id: "", //用户组id
      },
      cityData,
      cityValue: [],
      props: {
        expandTrigger: "hover",
        value: "value",
      },
      editUserForm: {},
      //控制省/市/区显示
      editIsShow: false,
      //添加用户规则
      addUserFormRules: {
        username: [
          { required: true, message: "请填写用户名", trigger: "blur" },
        ],
        mobile: [
          { required: true, trigger: "blur", message: "手机号不能为空" },
          { validator: checkMobile, trigger: "blur" },
        ],
        pass: [{ required: true, message: "请填写用户密码", trigger: "blur" }],
      },
      //重置密码格规则
      resetPassFormRules: {
        pass: [
          { validator: validatePass, trigger: "blur" },
          { required: true, message: "请填写新密码", trigger: "blur" },
        ],
        checkPass: [
          { validator: validatePass2, trigger: "blur" },
          { required: true, message: "请确认新密码", trigger: "blur" },
        ],
      },
      have_type: "",
      staff: "",
      currusername: "",
      siteNameList: [], // 站点列表
    };
  },
  computed: {
    //获取用户类型
    userType: function () {
      return window.sessionStorage.getItem("myuser_type");
    },
  },
  created() {},
  mounted() {
    this.getList();
    this.have_type = localStorage.getItem("have_type"); // 0管理员  1用户
    this.staff = localStorage.getItem("staff"); // 1是admin
    this.currusername = localStorage.getItem("username"); // 1是admin
    this.facilityList();
  },
  methods: {
    getList() {
      this.$axios({
        method: "POST",
        url: "user_list",
        data: this.qs.stringify({
          typelist: 6,
          page: this.page,
          uname: this.username,
          page_size: 8,
        }),
      }).then((res) => {
        this.userList = res.data.userlist;
        this.totalNum = res.data.nums;
      });
    },
    // 编辑用户信息
    edit(role) {
      this.editUserForm = JSON.parse(JSON.stringify(role));
      this.editUserDialogVisible = true;
      if (this.editUserForm.site_pro == "") {
        this.cityValue = [
          this.editUserForm.site_city,
          this.editUserForm.site_area,
        ];
      } else {
        this.cityValue = [
          this.editUserForm.site_pro,
          this.editUserForm.site_city,
          this.editUserForm.site_area,
        ];
      }
    },
    beforeAvatarUpload(file) {
      console.log(file);
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 和 PNG格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    changeUpload(file, fileList) {
      var form = new FormData();
      form.append("img_file", file.raw);
      this.$axios({
        method: "POST",
        url: "base_photo",
        data: form,
      }).then((res) => {
        this.editUserForm.logo = res.data.src;
      });
    },
    handleChange(value) {
      console.log(value);
      console.log(this.cityValue);
      this.editUserForm.user_pro = value[0];
      this.editUserForm.user_city = value[1];
      if (value[2]) {
        this.editUserForm.user_area = value[2];
      } else {
        this.editUserForm.user_city = value[0].substring(
          0,
          value[0].length - 1
        );
        this.editUserForm.user_area = value[1];
      }
    },
    // 分配设备
    allotEquip(id, name) {
      window.location.href = "allot?uname=" + name;
    },
    // 删除普通用户
    delUser(id, name) {
      this.$confirm("删除用户, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            method: "POST",
            url: "del_user",
            data: this.qs.stringify({
              userid: id,
            }),
          }).then((res) => {
            if (res.data == 1) {
              this.getList();
            } else {
              this.$message({
                type: "error",
                message: res.data,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //密码重置
    resetPassword(id, name) {
      this.resetPassForm.id = id;
      this.resetPassForm.username = name;
      this.resetPassDialogVisible = true;
    },
    resetPassSubm() {
      //暂时不用
      this.$refs.resetPassFormRef.validate((valid) => {
        if (!valid) return;
        this.$axios({
          method: "POST",
          url: "systemmanage_user_list",
          data: this.qs.stringify({
            id: this.resetPassForm.id,
            req: "resetpwd",
            userName: this.editUserForm.username,
            userpassWord: this.resetPassForm.pass,
            userRePassWord: this.resetPassForm.pass,
          }),
        }).then((res) => {
          if (res.data == 0) {
            this.$message.success("修改密码成功");
            this.resetPassDialogVisible = false;
          } else {
            this.$message.error(res.data.message);
          }
        });
      });
    },
    //监听重置密码对话框的关闭事件
    resetPassDialogClosed() {
      this.$refs.resetPassFormRef.resetFields();
    },
    changePage(value) {
      this.page = value;
      this.getList();
    },
    //添加用户
    addUser() {
      this.addUserDialogVisible = true;
    },

    //添加用户提交
    addUserSubm() {
      this.$refs.addUserFormRef.validate((valid) => {
        if (!valid) return;
        let cs_user = this.addUserForm.cs_user ? "1" : "";
        this.$axios({
          method: "POST",
          url: "api_gateway?method=user.login.regiest",
          data: this.qs.stringify({
            username: this.addUserForm.username,
            mobile: this.addUserForm.mobile,
            password: this.addUserForm.pass,
            role_id: this.addUserForm.role_id,
            user_type: this.addUserForm.user_type,
            pcd: this.addUserForm.pcd,
            user_area: this.addUserForm.user_area,
            user_group_id: this.addUserForm.user_group_id,
            cs_user,
          }),
        }).then((res) => {
          if (res.data.message == "") {
            this.$message.success("添加用户成功！");
            this.addUserDialogVisible = false;
            this.getList();
          } else {
            this.$message.error(res.data.message);
          }
        });
      });
    },
    addUserDialogClosed() {
      this.$refs.addUserFormRef.resetFields();
    },
    //修改用户信息提交
    editUserSubm() {
      this.$refs.editUserFormRef.validate((valid) => {
        if (!valid) return;
        this.$axios({
          method: "POST",
          url: "user_detail",
          data: this.qs.stringify(this.editUserForm),
        }).then((res) => {
          if (res.data == 1) {
            this.editUserDialogVisible = false;
            var curr = localStorage.getItem("username");
            if (curr == this.editUserForm.username) {
              window.location.reload();
            } else {
              this.getList();
            }
          }
        });
      });
    },
    editUserDialogClosed() {
      this.$refs.editUserFormRef.resetFields();
      this.areaList = []; //清空省/市/区
      this.editIsShow = false;
    },
    checkList() {
      this.page = 1;
      this.getList();
    },
    addUserFun() {
      window.location.href = "systemmanage_user_add";
    },

    // 获取站点列表数据
    facilityList() {
      this.$axios({
        method: "GET",
        url: "/site_manage",
      })
        .then((res) => {
          if (res.data) {
            var data = res.data;
            var arrList = [];
            var nameList = [];
            var nameListB = [];
            var list = data.forEach((item) => {
              var objA = {};
              objA["label"] = item.site_name;
              objA["value"] = item.site_name;
              if (
                item.self_site_name !== undefined &&
                item.self_site_name == ""
              ) {
              } else {
                if (item.self_site_name == undefined) {
                  if (item.child) {
                    for (var j in item.child) {
                      var obj = {};
                      obj["label"] = item.child[j].site_name;
                      obj["value"] = item.child[j].site_name;
                      if (
                        item.child[j].child &&
                        item.child[j].child.length == 0
                      ) {
                      } else if (
                        item.child[j].child &&
                        item.child[j].child.length !== 0
                      ) {
                        for (var k in item.child[j].child) {
                          var objB = {}
                          objB["label"] = item.child[j].child[k].site_name;
                          objB["value"] = item.child[j].child[k].site_name;
                          nameListB.push(objB)
                        }
                      }
                      arrList.push(obj);
                    }
                  }
                } else if (item.self_site_name !== undefined) {
                }
              }
              nameList.push(objA);
            });
            this.siteNameList = [...nameList, ...arrList, ...nameListB];
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang='less' scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  .filter-box > div {
    margin-right: 15px;
  }
  .el-input {
    width: 200px;
  }
  .el-date-editor--daterange {
    width: 222px;
  }
}
.el-card {
  .img-box {
    text-align: center;
    border-bottom: 1px solid #e1e1e1;
    padding: 15px 0;
    p {
      font-size: 14px;
      font-weight: 800;
      margin-top: 10px;
    }
  }
  .detail {
    border-bottom: 1px solid #e1e1e1;
    padding: 10px 0;
    padding: 0 20px;
    p {
      display: flex;
      justify-content: space-between;
      font-size: 13px;
      line-height: 34px;
      color: #666;
      padding: 0 0px;
    }
  }
  .btn {
    text-align: center;
    padding: 20px 10px;
    display: flex;
    justify-content: space-around;
    button {
      // flex: 1;
      // margin: 0 8px;
      border: 1px solid #17bb89;
      color: #17bb89;
      // // border-radius: 4px;
      // // font-size: 12px;
      // // padding: 5px 5px;
      background: #fff;
      cursor: pointer;
      i {
        font-size: 12px;
        margin-right: 2px;
      }
    }
    button:hover {
      background: #fff;
      border: 1px solid #47d9ad;
      color: #47d9ad;
    }
  }
}
// 暂无数据
.expertDiagnosis_referral_units_not {
  width: 272px;
  margin: 0 auto;
}
</style>