edit.vue

<template>
  <el-dialog
    custom-class="party-dialog"
    :title="`管理员${isEdit ? '修改' : '查看'}`"
    :visible.sync="dialogVisible"
    width="468px"
    :before-close="handleClose"
  >
    <div class="dialog-content">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        label-position="top"
        class="party-form"
      >
        <el-form-item label="管理员姓名" prop="userName">
          <el-input
            v-model="form.userName"
            placeholder="请填写管理员姓名"
            oninput="value = value.trim()"
            :readonly="!isEdit"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input
            v-model="form.phone"
            placeholder="请填写手机号码"
            :readonly="!isEdit"
          ></el-input>
        </el-form-item>
        <el-form-item label="固定电话" prop="telephone">
          <el-input
            v-model="form.telephone"
            placeholder="请填写固定电话"
            :readonly="!isEdit"
          ></el-input>
        </el-form-item>
        <el-form-item label="微信" prop="wechat">
          <el-input
            v-model="form.weChat"
            placeholder="请填写微信号"
            :readonly="!isEdit"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="form.email"
            placeholder="请填写邮箱地址"
            :readonly="!isEdit"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer btn-group">
      <div v-if="isEdit">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </div>
      <div v-else>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    var validateMobilePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("手机号不可为空"));
      } else {
        if (value !== "") {
          var reg = /^1[3456789]\d{9}$/;
          if (!reg.test(value)) {
            callback(new Error("请输入有效的手机号码"));
          }
        }
        callback();
      }
    };
    return {
      dialogVisible: false,
      isEdit: true,
      id: "",
      form: {
        id: "",
        userName: "",
        telephone: "",
        phone: "",
        weChat: "",
        email: "",
        roleList: [],
        type: 2, //1.用户账号 2.平台单位管理员账号 3.机顶盒账号 4.运维账号
      },
      rules: {
        userName: [
          { required: true, message: "请选择系统用户名", trigger: "change" },
          { min: 1, max: 20, message: "请输入1到20个字" },
        ],
        phone: [
          { required: true, validator: validateMobilePhone, trigger: "change" },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    // 根据id获取获取详情内容
    getDetailById() {
      let _this = this;
      this.$https(
        {
          method: "get",
          url: "tUser/getById",
          authType: this.backToken,
        },
        { id: _this.id }
      )
        .then((res) => {
          if (res.status == 200) {
            if (res.data.resultCode == 200) {
              let resData = res.data.data;
              for (let key in _this.form) {
                _this.form[key] = resData[key];
              }
            } else {
              _this.$message.error(res.data.message);
            }
          } else {
            _this.$message.error(res.data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 弹窗关闭
    handleClose() {
      if (this.isEdit) {
        this.$confirm("确认关闭？")
          .then((_) => {
            this.handleReset();
          })
          .catch((_) => {});
      } else {
        this.handleReset();
      }
    },
    handleReset() {
      this.dialogVisible = false;
      this.$refs.form.resetFields();
      this.form = {
        id: "",
        userName: "",
        telephone: "",
        phone: "",
        weChat: "",
        email: "",
        roleList: [],
        type: 2, //1.用户账号 2.平台单位管理员账号 3.机顶盒账号 4.运维账号
      };
    },
    // 提交
    handleSubmit() {
      // 校验用户输入值
      let _this = this;
      _this.$refs.form.validate((valid) => {
        if (valid) {
          let user = {};
          user.userName = _this.form.userName;
          user.telephone = _this.form.telephone;
          user.phone = _this.form.phone;
          user.weChat = _this.form.weChat;
          user.email = _this.form.email;
          user.id = _this.id;
          user.type = this.form.type;
          user.roleList = this.form.roleList;
          this.$https(
            {
              method: "put",
              url: "tUser/update",
              authType: _this.backToken,
            },
            user
          )
            .then((res) => {
              if (res.status == 200) {
                if (res.data.resultCode == 200) {
                  this.$message({
                    type: "success",
                    message: res.data.message,
                  });
                  _this.dialogVisible = false;
                  this.$emit("success", true);
                } else {
                  this.$message.error(res.data.message);
                  this.$emit("success", false);
                }
              } else {
                this.$message.error(res.data);
                this.$emit("success", false);
              }
            })
            .catch((err) => {
              console.log(res);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.form-row {
  display: flex;
  justify-content: space-between;
}
</style>