add.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">
          <el-form-item label="系统用户名" prop="userName">
            <el-input
              v-model.trim="form.userName"
              placeholder="请填写"
              oninput="value = value.trim()"
            ></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>
        </div>
        <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>
        <el-form-item label="账号类型" prop="roleList">
          <el-checkbox-group v-model="form.roleList" :min="1">
            <span v-for="(item, index) in rolesList">
              <el-checkbox
              v-if="item.name !== '单位管理员' && item.name !== '统计管理员' && item.name !== '互动审核员'"
              :key="index"
              :label="item.id"
            >
            {{ item.name }}
            </el-checkbox>
            </span>
          </el-checkbox-group>
        </el-form-item>
      </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>
export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        userName: "",
        orgId: "",
        permanent: true,
        date: "",
        roleList: [],
        type: 1, //1.用户账号 2.平台单位单位管理员账号 3.机顶盒账号 4.运维账号
      },
      rules: {
        userName: [
          { required: true, message: "请选择系统用户名", trigger: "change" },
          { min: 1, max: 20, message: "请输入1到20个字符" },
        ],
        orgId: [
          { required: true, message: "请输入所在机构", trigger: "change" },
        ],
        permanent: [
          { required: true, message: "请选择账号有效期", trigger: "change" },
        ],
        roleList: [
          {
            type: "array",
            required: true,
            message: "请选择账号类型",
            trigger: "change",
          },
        ],
      },
    };
  },
  props: {
    organList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    rolesList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  mounted() {},
  methods: {
    // 弹窗关闭
    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() {
      // 校验用户输入值
      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.type = this.form.type;
          this.$https(
            {
              method: "post",
              url: "tUser/add",
              authType: this.backToken,
            },
            user
          )
            .then((res) => {
              if (res.status == 200) {
                if (res.data.resultCode == 200) {
                  this.$message({
                    type: "success",
                    message: res.data.message,
                  });
                  this.handleReset();
                  this.$emit("success", true);
                } else {
                  this.$message.error(res.data.message);
                }
              } else {
                this.$message.error(res.data);
              }
            })
            .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>