sy/src/components/UserManger.vue

<template>
  <div>
	  	<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<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" size="mini"
			><a style="color: #fff" href="systemmanage_user_add"
			>添加新用户</a
			></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>{{ item.username }}</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>
              站点名称
              <span>{{ item.site || "无" }}</span>
            </p>
            <p>
              站点地址
              <span
                >{{ item.user_pro }} {{ item.user_city }}
                {{ item.user_area }}</span
              >
            </p>
            <p>
              系统标题
              <span>{{ item.user_header || "--" }}</span>
            </p>
            <p>
              logo
              <span
                ><img style="width: 46px; height: 32px" :src="item.logo" alt=""
              /></span>
            </p>
          </div>
          <div class="btn">
            <el-button 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="delUser(item.id, item.username)"
                plain
                >删除用户</el-button
              >
            </template>
            <el-button
              type="success"
              @click="resetPassword(item.id, item.username)"
              plain
              >重置密码</el-button
            >
            <!-- <a @click="edit(item)">
							<i class="iconfont icon-iconfontedit"></i>编辑
						</a>
						<a @click="resetPassword(item.uid, item.username)">
							<i class="iconfont icon-mima"></i>密码
						</a> -->
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 暂无数据 -->
    <div class="expertDiagnosis_referral_units_not" v-if="userList.length <= 0">
      <img
        src="@/assets/images/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-form-item>
        <el-form-item label="站点位置 : ">
          <div class="block">
            <el-cascader
              placeholder="搜索：河南"
              v-model="cityValue"
              :options="cityData"
              :props="props"
              @change="handleChange"
              filterable
            >
            </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 {
  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: "",
        oldPass: "",
        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: {
        oldPass: [{ required: true, message: "请填原始密码", trigger: "blur" }],
        pass: [
          { validator: validatePass, trigger: "blur" },
          { required: true, message: "请填写新密码", trigger: "blur" },
        ],
        checkPass: [
          { validator: validatePass2, trigger: "blur" },
          { required: true, message: "请确认新密码", trigger: "blur" },
        ],
      },
      have_type: "",
      staff: "",
      currusername: "",
    };
  },
  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
  },
  methods: {
    getList() {
      this.$axios({
        method: "POST",
        url: "/user_list",
        data: this.qs.stringify({
          typelist: 4,
          page_size:8,
          page: this.page,
          uname: this.username,
        }),
      }).then((res) => {
        this.userList = res.data.userlist;
        this.totalNum = res.data.nums;
      });
    },

    // 编辑用户信息
    edit(role) {
      this.editUserForm = JSON.parse(JSON.stringify(role));
      this.editUserDialogVisible = true;
      this.cityValue = [
        this.editUserForm.user_pro,
        this.editUserForm.user_city,
        this.editUserForm.user_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];
      }
    },
     // 删除普通用户
    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;
    },
    //监听用户类型改变
    userTypeChange(val) {
      if (val == 3) {
        this.editIsShow = true;
      } else {
        this.editIsShow = false;
      }
    },

    //修改用户信息提交
    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();
    },
  },
};
</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>