jhsw_manage/src/components/StaffRegister.vue

<template>
  <div>
    <el-dialog
      :title="isView ? '用户新增' : '用户编辑'"
      :visible.sync="dialogVisible"
      :before-close="cancle"
      width="60%"
    >
      <el-form
        :inline="true"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="头像" prop="avatar">
              <el-upload
                 accept=".png, .jpg, .jpeg"
                class="avatar-uploader"
                name="file"
                :action="action"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div class="el-upload__tip" slot="tip">
                  建议上传jpg/png/jpeg文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="姓名" prop="name">
              <el-input
                v-model="ruleForm.name"
                class="inputCom"
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="个人描述" prop="description">
              <el-input
                v-model="ruleForm.description"
                class="inputCom"
                placeholder="请输入描述"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="岗位" prop="job">
              <el-input
                v-model="ruleForm.job"
                class="inputCom"
                placeholder="请输入岗位"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="邮箱" prop="mail">
              <el-input
                v-model="ruleForm.mail"
                class="inputCom"
                placeholder="请输入邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="手机号" prop="phone">
              <el-input
                v-model="ruleForm.phone"
                class="inputCom"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <el-form-item label="状态" prop="state">
              <el-select v-model="ruleForm.state" placeholder="请选择状态">
                <el-option
                  :label="item.name"
                  :value="item.state"
                  v-for="item in stateList"
                  :key="item.state"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancle" round>取 消</el-button>
        <el-button
          v-show="isView"
          type="primary"
          round
          :disabled="disableFlag"
          @click="submitCom"
          >确 定</el-button
        >
        <el-button
          v-show="!isView"
          type="primary"
          round
          :disabled="disableFlag"
          @click="submitCom"
          >修 改</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import { oSessionStorage } from "../../utils/utils";
import { oSessionStorage } from "../utils/utils";
import { basePath } from "../utils/http";
import md5 from "md5";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else if (value.length < 6) {
        callback(new Error("密码至少6位"));
      } else {
        callback();
      }
    };
    var validatePhone = (rule, value, callback) => {
      let myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!myreg.test(value)) {
        callback(new Error("请输入正确格式"));
      } else {
        callback();
      }
    };
    return {
        action:'',
      disableFlag: false,
      phoneFlag: false,
      flag: 3,
      dialogVisible: false,
      //渠道列表
      stateList: [
        { name: "签约", state: "1" },
        { name: "解约", state: "0" },
      ],
      ruleForm: {
        id: "",
        channelId: "",
        //头像
        avatar: "",
        //员工姓名
        name: "",
        //描述
        description: "",
        //岗位
        job: "",
        //邮箱
        mail: "",
        //手机号
        phone: "",
        //状态
        state: "",
        // //删除状态
        isDelete: "0",
      },
      isView: true,
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号", trigger: ["blur", "change"] },
        ],
        state: [{ required: true, message: "请输选择状态", trigger: "change" }],
        mail: [
          { required: true, message: "请输选择邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] },
        ],
      },
    };
  },
  mounted() {
    let userInfo = JSON.parse(oSessionStorage.getItem("userInfo"));
    this.ruleForm.parentCode = userInfo.invitationCode;
    this.action = basePath+ "/file/customUpload";
    //获取到router 传输过来的信息
    this.ruleForm.channelId = this.$route.query.channelId;

    //获取渠道信息

    // this.ruleForm.type = "3";
  },
  methods: {
    beforeAvatarUpload(file) {
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf("."));
      if (fileType !== ".jpg" && fileType !== ".jpeg" && fileType !== ".png") {
        // alert("请上传jpg、jpge或png的图片！");
        this.$message.error('请上传jpg、jpge或png的图片！')
        return false;
      }
      return true;
    },
    //handleAvatarSuccess
    //上传成功后的回调
    handleAvatarSuccess(data) {
      if (data.code == 200) {
        this.ruleForm.avatar = basePath + "/file/show?filePath=" + data.data;
        console.log(basePath + "/file/show?filePath=" + data.data);
      } else {
        //失败
      }
    },
    phoneCheck() {
      //判断是否重复
      this.$http.get(`v1/system/checkPhone/${this.ruleForm.phone}`, {}, (res) => {
        //  this.$toast.success({message:'成功'});
        if (res && res.code == 200) {
          if (res.data) {
            this.phoneFlag = true;
          } else {
            this.phoneFlag = false;
            // this.$toast.success({ message: "手机号重复" });
            this.$message.warning("手机号重复");
          }
        } else {
          // this.$toast.fail({ message: res.msg });
          this.$message.error(res.msg);
        }
      });
    },
    timeChange(val) {
      if (val !== null) {
        //根据时间得到格式化的数据
        this.ruleForm.birthDate = this.formatterTime(val);
      }
    },
    formatterTime(val) {
      let date = new Date(val);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = this.formatterMon(month);
      let day = date.getDate();
      day = this.formatterMon(day);
      return year + "-" + month + "-" + day;
    },
    formatterMon(val) {
      if (val < 10) {
        return "0" + val;
      } else {
        return val;
      }
    },
    open(val) {
      this.dialogVisible = true;
      this.isView = val;

      this.$nextTick(() => {
        this.$refs["ruleForm"].clearValidate();
      });
    },
    edit(val) {
      this.dialogVisible = true;
      this.isView = false;
      this.ruleForm.id = val.id;
      this.ruleForm.channelId = val.channelId;
      this.ruleForm.avatar = val.avatar;
      this.ruleForm.name = val.name;
      this.ruleForm.description = val.description;
      this.ruleForm.phone = val.phone;
      this.ruleForm.mail = val.mail;
      this.ruleForm.job = val.job;
      this.ruleForm.state = val.state;
      this.ruleForm.isDelete = val.isDelete;
    },
    cancle() {
      //清空表单
      //   id: "",
      //     channelId:'',
      //     //头像
      //     avatar: "",
      //     //员工姓名
      //     name: "",
      //     //描述
      //     description: "",
      //     //岗位
      //     job: "",
      //     //邮箱
      //     mail: "",
      //     //手机号
      //     phone: "",
      //     //状态
      //     state: "",
      this.ruleForm.id = "";
      // this.ruleForm.channelId='';
      this.ruleForm.avatar = "";
      this.ruleForm.name = "";
      this.ruleForm.description = "";
      this.ruleForm.job = "";
      this.ruleForm.mail = "";
      this.ruleForm.phone = "";
      this.ruleForm.state = "";
      this.ruleForm.isDelete = "";
      this.$refs["ruleForm"].clearValidate();
      this.dialogVisible = false;
    },
    submitCom() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          //判断是编辑还是新增
          if (this.isView) {
            this.register();
          } else {
            this.editUserFun();
          }

          //都校验通过后可以触发注册接口了
          //调用方法进行入参
        }
      });
    },
    register() {
      let that = this;
      this.$http.post(
        `/staff/save`,
        {
          avatar: this.ruleForm.avatar,
          name: this.ruleForm.name,
          description: this.ruleForm.description,
          job: this.ruleForm.job,
          mail: this.ruleForm.mail,
          phone: this.ruleForm.phone,
          state: this.ruleForm.state,
          channelId: this.ruleForm.channelId,
          isDelete: this.ruleForm.isDelete,
          // ...this.ruleForm, //解构对象
        },
        (res) => {
          this.disableFlag = false;
          if (res && res.code == 200) {
            this.dialogVisible = false;
            this.$message.success(res.msg);
            // this.$toast.success({ message: "成功" });
            //调用父组件的查询方法
            that.$emit("search");
          } else {
            // this.$toast.fail({ message: res.msg });
            this.$message.error(res.msg);
          }
          //清空缓存
          this.cancle();
        }
      );
    },
    editUserFun() {
      let that = this;
      this.$http.post(
        `/staff/save`,
        {
          ...this.ruleForm,
          // ...this.ruleForm, //解构对象
        },
        (res) => {
          this.disableFlag = false;
          if (res && res.code == 200) {
            this.dialogVisible = false;
            // this.$toast.success({ message: "成功" });
            //调用父组件的查询方法
            that.$emit("search");
            this.$message.success("修改成功");
          } else {
            // this.$toast.fail({ message: res.msg });
            this.$message.error(res.msg);
          }
          //清空缓存
          this.cancle();
        }
      );
    },
  },
};
</script>
<style scoped>
.inputCom {
  width: 200px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px solid;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>