addUser.vue

<template>
  <el-dialog
    :title="$t('button.addUser')"
    class="manage-dialog"
    :visible.sync="addDialogVisible"
    :close-on-click-modal="false"
    @close="addDialogClose()"
    @open="dialogOpen()"
  >
    <el-form :model="addForm" status-icon :rules="rules" ref="addForm">
      <el-form-item :label="$t('dialog.loginName')" prop="loginName">
        <el-input v-model="addForm.loginName"></el-input>
        <i class="error-tip">*</i>
      </el-form-item>
      <el-form-item :label="$t('dialog.realName')" prop="realName">
        <el-input v-model="addForm.realName"></el-input>
        <i class="error-tip">*</i>
      </el-form-item>
      <el-form-item :label="$t('dialog.password')" prop="password" v-show="false">
        <el-input type="password" v-model="addForm.password"></el-input>
        <i class="error-tip">*</i>
      </el-form-item>
      <el-form-item :label="$t('dialog.tel')" prop="tel">
        <el-input v-model="addForm.tel"></el-input>
      </el-form-item>
      <el-form-item :label="$t('dialog.email')" prop="email">
        <el-input v-model="addForm.email"></el-input>
      </el-form-item>
      <el-form-item :label="$t('dialog.selectRole')" v-if="!$Menu">
        <el-select
          v-model="menuPermissionVal"
          :placeholder="$t('pholder.rolePermiss')"
          class="manage-sel dialog-mall-sel"
          :no-data-text="$t('pholder.nodata')"
          filterable
        >
          <el-option
            v-for="(roleItem, index) in roleArr"
            :key="roleItem.role_unid"
            :label="roleItem.name"
            :value="roleItem.role_unid"
          >
            <!-- <span class="custom-checkbox__input">
                            <span class="custom-checkbox__inner"></span>
                        </span>
            <span style="padding-left: 5px;">{{ roleItem.name }}</span>-->
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('dialog.accountId')" prop="accountId">
        <el-select
          v-model="addForm.accountId"
          filterable
          :placeholder="$t('pholder.select')"
          class="manage-sel dialog-mall-sel"
          :no-data-text="$t('pholder.nodata')"
          @change="getMallList"
        >
          <el-option v-for="item in accList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <i class="error-tip">*</i>
      </el-form-item>
      <el-form-item :label="$t('dialog.mallPermiss')">
        <el-select
          v-model="mallMenuVal"
          :placeholder="mallMenuVal.length > 0 ? $t('pholder.selectMallPermiss') : $t('pholder.allMall') "
          class="manage-sel dialog-mall-sel"
          :no-data-text="$t('pholder.nodata')"
          filterable
          multiple
          collapse-tags
        >
          <el-option
            v-for="(item, index) in mallList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            <span class="custom-checkbox__input">
              <span class="custom-checkbox__inner"></span>
            </span>
            <span style="padding-left: 5px;">{{ item.name }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="所属广场" prop="mallId">
                    <el-select v-model="addForm.mallId" filterable :placeholder="$t('pholder.select')" class="manage-sel dialog-mall-sel" collapse-tags multiple :no-data-text="$t('pholder.nodata')">
                        <el-option v-for="item in mallList" :key="item.id" :label="item.name" :value="item.id">
                            <span class="custom-checkbox__input">
                                <span class="custom-checkbox__inner"></span>
                            </span>
                            <span style="padding-left: 5px;">{{ item.name }}</span>
                        </el-option>
                    </el-select>
      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addDialogVisible = false" class="dialog-btn">{{$t('dialog.cancel')}}</el-button>
      <el-button
        type="primary"
        @click="addSubmit('addForm')"
        class="dialog-btn dialog-confirm-btn"
      >{{$t('dialog.confirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    var validatorName = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入用户名"));
      } /*else if(value.length<2||value.length>10){
				return callback(new Error('长度在 2到 10 个字符'));
			}*/ else if (
        /[\u4E00-\u9FA5]/.test(value)
      ) {
        return callback(new Error("用户名不能为中文"));
      }
      this.$api.management
        .userList({
          loginName: value
          // _t: Date.parse(new Date()) / 1000
        })
        .then(data => {
          if (data.data.data.length != 0) {
            return callback(new Error("用户名重复,请重新输入"));
          } else {
            callback();
          }
        })
        .catch(error => {});
    };
    var validatorTel = (rule, value, callback) => {
      var tel = value;
      var ph = /^(0|86|17951)?(13[0-9]|15[012356789]|17[01678]|18[0-9]|14[57])[0-9]{8}$/;
      var mb = /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/;
      // if (value === '') {
      // 	return callback(new Error('请输入手机号码'));
      // }else
      if (!ph.test(tel) && !mb.test(tel)) {
        return callback(new Error("请输入正确手机号码"));
      } else {
        callback();
      }
    };
    var validatorEmail = (rule, value, callback) => {
      var re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
      // if (value === '') {
      // 	return callback(new Error('请输入电子邮箱'));
      // }else
      if (!re.test(value)) {
        return callback(new Error("请输入正确邮箱地址"));
      } else {
        callback();
      }
    };
    var validatorPwd = (rule, value, callback) => {
      var re = /^\w{6,}$/g;
      // var exp = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/; //密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
      var exp = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,16}$/; //密码强度正则，最少6位最多16位，包括1个大写字母，1个小写字母，1个数字，1个特殊字符以上两种
      if (!exp.test(value)) {
        return callback(new Error("请输入不小于六位包含字母数字的密码"));
      } else {
        callback();
      }
    };
    return {
      addDialogVisible: false,
      addForm: {
        loginName: "",
        realName: "",
        password: "",
        tel: "",
        email: "",
        accountId: ""
      },
      accList: [],
      isSup: false,
      roleArr: [],
      menuPermissionVal: "",
      mallList: [],
      mallMenuVal: [],
      rules: {
        realName: [
          { required: true, message: "请输入姓名", trigger: "blur" }
          // { min: 2, max: 10, message: '长度在 2到 10 个字符', trigger: 'blur' }
        ],
        loginName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { validator: validatorName, trigger: "blur" }
        ],
        password: [
          // { required: true, message: '请输入密码', trigger: 'change' },
          // { min: 6, max: null, message: '长度不得小于 6 个字符', trigger: 'blur' }
          // { validator: validatorPwd, trigger: 'change' }
        ],
        accountId: [
          { required: true, message: "请选择所属集团", trigger: "change" }
        ]
        // tel: [
        // 	{ validator: validatorTel, trigger: 'blur' }
        // ],
        // email:[
        // 	{ validator: validatorEmail, trigger: 'blur' }
        // ]
      }
    };
  },
  methods: {
    dialogInit(is_sup) {
      this.isSup = is_sup;
      this.addDialogVisible = true;
      var nowUserunid = this.$cookie.get("user_unid");
      if (!this.$Menu) {
        this.getNowUserRole(nowUserunid);
      }
    },
    getNowUserRole(nowUserunid) {
      this.$api.management
        .role(nowUserunid, {
          order: "asc",
          sortby: "create_dt",
          is_active: true
          // _t: Date.parse(new Date()) / 1000
        })
        .then(res => {
          this.roleArr = res.data.list_data;
        })
        .catch(error => {
          // console.log(error)
        });
    },
    addDialogClose() {
      this.$refs.addForm.resetFields();
      this.menuPermissionVal = "";
      this.mallMenuVal = [];
    },
    dialogOpen() {
      this.getAccList();
    },
    getAccList() {
      let _params = {};
      if (!this.isSup) {
        _params["id"] = this.$cookie.get("accountId");
      }
      // _params['_t'] = Date.parse(new Date()) / 1000
      this.addForm.accountId = "";
      this.accList = [];
      this.$api.base.account(_params).then(res => {
        let result = res.data;
        if (result.data.length > 0) {
          this.addForm.accountId = result.data[0].id;
          this.getMallList();
        }
        // else {
        // 	this.addForm.accountId = ''
        // }
        this.accList = result.data;
      });
    },
    getMallList() {
      this.mallList = [];
      // this.addForm.mallId = []
      if (!this.addForm.accountId) return;
      this.$api.base
        .mall(
          {
            accountId: this.addForm.accountId,
            // status: 1,
            status_arr: "1,3"
          },
          null,
          true
        )
        .then(data => {
          let result = data.data;
          this.mallList = result.data;
          if (this.mallList.length > 0) {
            // this.addForm.mallId = [this.mallList[0].id];
          } else {
            // this.addForm.mallId = [];
          }
        })
        .catch(error => {});
    },
    //zoneId
    getZoneList() {
      let id = this.$cookie.get("accountId");
      this.$api.base
        .zone({
          accountId: id,
          status: 1,
          sortName: '"floor".name, "zone".name'
          // _t: Date.parse(new Date()) / 1000
        })
        .then(res => {
          this.zoneList = res.data.data;
          if (this.zoneList.length > 0) {
            this.addForm.zoneId = this.zoneList[0].id;
          } else {
            this.addForm.zoneId = "";
          }
        });
    },
    addSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.addForm.createUser = this.$cookie.get("userId");
          this.addForm.modifyUser = this.$cookie.get("userId");
          this.addForm.password = "123456";
          // this.addForm.accoundId = this.$cookie.get('accountId');
          // this.addForm.manager = window.localStorage.getItem('loginName');
          this.addForm.createTime = dateUnit.dateFormat(
            new Date(),
            "yyyy-MM-dd HH:mm:ss"
          );
          this.$api.management
            .addUser(this.addForm)
            .then(data => {
              let result = data.data;
              if (result.code == 200) {
                if (this.mallMenuVal.length > 0) {
                  this.mallMenuVal.forEach(mall_id => {
                    this.bindUserMall(result.data.id, mall_id);
                  });
                }
                if (this.menuPermissionVal) {
                  this.getUserunid(result.data.loginName);
                } else {
                  this.addDialogVisible = false;
                  this.$parent.getTableData();
                }
              } else {
                this.$message({
                  showClose: true,
                  type: "error",
                  message: this.$t("message.addUser") + result.msg
                });
              }
            })
            .catch(error => {});
        } else {
          return false;
        }
      });
    },
    bindUserMall(user_id, mall_id) {
      this.$api.management
        .editUserMall({
          userId: user_id,
          mallId: mall_id
        })
        .then(res => {
          let result = res.data;
          if (result.code == 200) {
          } else {
          }
        });
    },
    getUserunid(loginName) {
      this.$api.management
        .authUser({
          user_type: "user",
          username: loginName
        })
        .then(res => {
          let userunid = res.data.list_data[0].user_unid;
          this.bindRole(userunid);
        })
        .catch(err => {
          // console.log(err)
        });
    },
    bindRole(userunid) {
      this.$api.management
        .bindRole(userunid, {
          role_unid: this.menuPermissionVal
        })
        .then(res => {
          this.addDialogVisible = false;
          this.$parent.getTableData();
          this.$message({
            showClose: true,
            message: this.$t("message.bindSuccess"),
            type: "success"
          });
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: this.$t("message.bindFailed"),
            type: "error"
          });
        });
    }
  }
};
</script>

<style scoped>
</style>