edit.vue

<template>
  <el-dialog
    custom-class="party-dialog"
    title="编辑账号"
    :visible.sync="dialogVisible"
    width="720px"
    :before-close="handleClose"
  >
     <div class="dialog-content">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        label-position="top"
        class="party-form"
      >
        <div class="form-row">
          <div>
            <el-form-item label="管理员姓名" prop="userName">
              <el-input
                v-model="form.userName"
                placeholder="请填写管理员姓名"
              ></el-input>
            </el-form-item>
            <el-form-item label="固定电话" prop="telephone">
              <el-input
                v-model="form.telephone"
                placeholder="请填写固定电话"
              ></el-input>
            </el-form-item>
            <el-form-item label="单位名称" prop="orgId">
              <el-select v-model="form.orgId" filterable placeholder="请选择">
                <el-option
                  v-for="item in organList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="账号有效期" prop="permanent">
              <el-radio-group v-model="form.permanent">
                <el-radio :label="true">永久有效</el-radio>
                <el-radio :label="false">设置有效期</el-radio>
              </el-radio-group>
              <div v-if="!form.permanent">
                <el-date-picker
                  class="mt16"
                  v-model="form.date"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="手机号码" prop="phone">
              <el-input
                v-model="form.phone"
                placeholder="请填写手机号码"
              ></el-input>
            </el-form-item>
            <el-form-item label="微信" prop="wechat">
              <el-input
                v-model="form.weChat"
                placeholder="请填写微信号"
              ></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                v-model="form.email"
                placeholder="请填写邮箱地址"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer btn-group">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="primary" @click="handleSubmit()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { getOrgListWithOutPage } from "@/config/organ";
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,
      organList: [],
      rolesList: [],
      id:'',
      form: {
        id:'',  
        userName: "",
        telephone: "",
        orgId: "",
        permanent: true,
        date: "",
        phone: "",
        weChat: "",
        email: "",
        type: 2,  //1.用户账号 2.平台单位管理员账号 3.机顶盒账号 4.运维账号
      },
      rules: {
        userName: [
          { required: true, message: "请选择系统用户名", trigger: "change" },
        ],
        orgId: [
          { required: true, message: "请输入所在机构", trigger: "change" },
        ],
        permanent: [
          { required: true, message: "请选择账号有效期", trigger: "change" },
        ],
         roleList: [
          { type: 'array',required: true, message: "请选择账号类型", trigger: "change" },
        ]
      },
    };
  },
  mounted() {
    this.getOrgList();
  },
  methods: {
    // 获取机构列表
    getOrgList() {
      getOrgListWithOutPage().then((res) => {
        this.organList = res;
      });
    },
    // 根据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]
                    }
                    if(!this.form.permanent){
                        this.form.date = [
                          resData.effectiveDate,
                          resData.exiredDate
                        ]
                    }
                } else {
                     _this.$message.error(res.data.message);
               } 
              } else {
                   _this.$message.error(res.data);
              }    
            })
            .catch((err) => {
              console.log(err);
            });
    },
    // 弹窗关闭
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.handleReset()  
        })
        .catch((_) => {});
    },
     handleReset(){
        this.dialogVisible = false
        this.$refs.form.resetFields()
        this.form = {
            userName: "",
            orgId: "",
            permanent: true,
            date: "",
            roleList: [],
            type:1
        }
    },
    // 提交
     handleSubmit() {
      // 校验用户输入值
      let _this = this
      _this.$refs.form.validate((valid) => {
        if (valid) {
           let user = {};
           if(!_this.form.permanent && !_this.form.date){
               _this.$message.error('请选择有效期')
               return false
           } 
          if(!_this.form.permanent){
               user.effectiveDate = _this.form.date[0];
               user.exiredDate = _this.form.date[1];
          }
          user.userName = _this.form.userName;
          user.orgId = _this.form.orgId;
          user.roleList = _this.form.roleList
          user.permanent = _this.form.permanent;
          user.id = _this.id
          user.type = this.form.type
          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(err);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.form-row {
  display: flex;
  justify-content: space-between;
}
</style>