pdf_tech_front_end/src/views/MenageAdmin/addAdmin.vue

<script>
import { post, get } from '../../../utils/request'
// import Warning from '@/components/icon/warning.vue'

export default {
  data() {
    return {
      formData: {
        AdminEmail: '',
        TeamAdmin: [],
      },
      teamList: {},
      click: true,
      memberRole: ''
      // dialogVisible: false,
    }
  },
  // components:{Warning},
  methods: {
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.$router.push("/manageAdmin")
    },
    //提交添加表单
    submitFormSingle(){
      if(this.click && this.memberRole === '1'){
        this.click = false
        const regEmail = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/
        if (this.formData.AdminEmail.trim() === '' || this.formData.TeamAdmin.length === 0) {
          this.$message.error('Missing required information')
        } else {
          var urlencoded = new URLSearchParams()
          urlencoded.append("teamIds", this.formData.TeamAdmin)
          urlencoded.append("account", this.formData.AdminEmail)
          post('/pdf-tech/vppTeam/sendEmailForAddTeamAdmin', urlencoded).then((res)=>{
            if(res.data.code === 200){
              this.$message({
                duration: 5000,
                message: 'Change Success',
                type: "success",
              })
            } else if(res.data.msg === "Member has joined a non-default team"){
              this.$message({
                duration: 5000,
                message: 'Member has joined a non-default team',
                type: "error",
              })
            } else if(res.data.msg === "Invalid Email Addresses"){
              this.$message({
                message: 'Invalid Email Addresses',
                type: "error",
              })
            }
          })
        }
        //限制点击
        setTimeout(() => {
          this.click = true
        }, 3000)
      }
    },
  },
  mounted() {
    // 获取团队列表
    get('/pdf-tech/vppTeam/listWithAdmin').then(
      (res) => {
        if(res.data.code === 200){
          this.teamList = res.data.result
        }
      }
    )
    get('/pdf-tech/vppMember/getMemberInfo').then((res)=>{
      if(res.data.code === 200){
        this.memberRole = res.data.result.role
      }
    })
  }
}
</script>

<template>
  <div>
    <h1 class="text-28px leading-40px mb-15px font-700">Add Admin</h1>
    <div class="bg-[#fff] card">
      <el-form
        label-position="top"
        label-width="100px"
        class="p-40px"
        :model="formData"
        ref="formData"
      >
        <el-form-item prop="memberEmail" class="required">
          <span slot="label" class="label">
            Admin Email
          </span>
          <el-input v-model="formData.AdminEmail" class="under-border" placeholder="Admin Email"></el-input>
        </el-form-item>
        <el-form-item prop="team">
          <span slot="label" class="label">
            Team Admin
          </span>
          <el-select
            v-model="formData.TeamAdmin"
            placeholder="Team Admin"
            multiple
            class="w-[40%]"
          >
            <el-option
              v-for="item in teamList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <button
            type="button"
            @click="resetForm('formData')"
            class="
              w-168px
              h-48px
              border-1px border-[#1460F3]
              text-[#1460F3]
              rounded-8px
              font-bold
              mr-16px
              hover:opacity-80
            "
          >
            Cancel
          </button>
          <button
            type="button"
            @click="submitFormSingle()"
            class="
              w-168px
              h-48px
              bg-[#1460F3]
              text-[#fff]
              rounded-8px
              font-bold
              hover:opacity-80
            "
          >
            Add
          </button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 账号未注册弹出框 -->
    <!-- <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="376px"
      center
      top="30vh"
      :show-close="false"
    >
      <Warning class="inline-block" />
      <div class="mt-16px text-16px leading-24px text-[#232A40]">
        <p>Your admin account hasn't created.<br>Send invitation and add admin？</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="sureSave">Yes</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<style lang="scss" scoped>
.el-form-item::v-deep label {
  color: #232a40 !important;
}
.active {
  color: #1460f3;
  background-color: #fff;
}
.card {
  border-radius: 8px;
  border-top-left-radius: 0px;
}
.el-input::v-deep input {
  border: 0px !important;
  border-bottom: 1px solid #d9d9d9 !important;
  // border-radius: 6px !important;
}
.username::v-deep input {
  border-radius: 0px !important;
}
.email::v-deep input {
  border: 0px !important;
}
.required::v-deep label::before {
  display: none;
}
.el-form-item::v-deep label {
  font-weight: 700;
  padding: 0;
  margin-left: 8px;
}
.el-select-dropdown::v-deep .popper__arrow {
  display: none;
}
::v-deep .el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    text-align: center;
    padding: 24px;
  }
  .el-dialog__footer {
    padding: 0 24px 24px;
    .el-button {
      width: 133px;
      height: 32px;
      padding: 0;
      &.el-button--default {
        border-color: #1460F3;
        span {
          color: #1460F3;
        }
      }
      span {
        line-height: 20px;
      }
    }
    .el-button + .el-button {
      margin-left: 8px;
    }
  }
}
</style>

<style lang="scss">
.popper__arrow {
  display: none !important;
}
.el-select-dropdown {
  margin-top: 0 !important;
}
</style>

<style lang="scss">
.el-message--success {
  margin-top: 90px !important;
  background-color: #373A47 !important;
  height: 36px;
  min-width: auto !important;
  padding: 12px !important;
  p{
    color: #fff !important;
  }
}
</style>