pdf_tech_front_end/src/views/TeamManagement/ManageMember/AddManageMember.vue

<script>
import { post, get } from '../../../../utils/request'

export default {
  data() {
    return {
      active: 0,
      formData: {
        memberEmail: '',
        memberName: '',
        teamId: ''
      },
      teamList: {},
      file: {},
      click: true
    }
  },
  methods: {
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.$router.push("/manage-member")
    },
    //提交单个添加表单
    submitFormSingle(){
      if(this.click){
        this.click = false
        const regEmail = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/
        if (this.formData.memberEmail.trim() === '' || this.formData.teamId.trim() === '') {
          this.$message.error('Missing required information')
          //限制点击
          setTimeout(() => {
            this.click = true
          }, 3000)
        } else if(!regEmail.test(this.formData.memberEmail)){
          this.$message.error('Incorrect email format')
          //限制点击
          setTimeout(() => {
            this.click = true
          }, 3000)
        }
        else {
          post('/pdf-tech/vppTeam/addTeamMember',this.formData).then((res)=>{
            //限制点击
            setTimeout(() => {
              this.click = true
            }, 3000)
            if(res.data.code === 200){
              this.$message({
                message: 'Add Success!',
                type: "success",
              })
            } else if(res.data.msg === "Member has joined a non-default team"){
              this.$message({
                message: 'Member has joined a non-default team',
                type: "error",
              })
            }
          })
        }
      }
    },
    //提交批量添加表单
    submitFormVolume(){
      if(this.click){
        this.click = false
        this.$refs.upload.submit()
        const formData = new FormData()
        formData.append("file",this.file)
        post('/pdf-tech/vppTeam/addTeamMemberBatch', formData).then((res) => {
          //限制点击
          setTimeout(() => {
            this.click = true
          }, 1000)
          if(res.data.code === 200){
            this.$message({
              message: 'Add Success!',
              type: "success",
            })
          }
        })
      }
    },
    //批量上传文件
    upLoadChange(file){
      this.file = file
      return false
    }
  },
  mounted() {
    //获取团队列表
    get('/pdf-tech/vppTeam/listWithAdmin').then(
      (res) => {
        if(res.data.code === 200){
          this.teamList = res.data.result
        }
      }
    )
  }
}
</script>

<template>
  <div>
    <h1 class="text-28px leading-40px mb-15px font-700">Add Member </h1>
    <div class="flex">
      <span
        class="
          flex
          justify-center
          bg-[#C6C9CC]
          rounded-t-8px
          items-center
          font-bold
          w-200px
          h-32px
          hand
        "
        @click="active = 0"
        :class="active === 0 ? 'active' : ''"
        >Single Add</span
      >
      <span
        class="
          flex
          justify-center
          bg-[#C6C9CC]
          rounded-t-8px
          items-center
          font-bold
          w-200px
          h-32px
          ml-8px
          hand
        "
        @click="active = 1"
        :class="active === 1 ? 'active' : ''"
        >Volume Add</span
      >
    </div>
    <div class="bg-[#fff] card">
      <!-- 单独加入 -->
      <el-form
        label-position="top"
        label-width="100px"
        class="p-40px"
        v-show="active === 0"
        :model="formData"
        ref="formData"
      >
        <el-form-item prop="memberEmail" class="required">
          <span slot="label" class="label">
            Member Email
            <span class="text-[#FF5054]">*</span>
          </span>
          <el-input v-model="formData.memberEmail" class="under-border" placeholder="Member Email"></el-input>
        </el-form-item>
        <el-form-item prop="memberName" class="under-border">
          <span slot="label" class="label">
            Member Name
          </span>
          <el-input v-model="formData.memberName" class="under-border" placeholder="Member Name"></el-input>
        </el-form-item>
        <el-form-item prop="team">
          <span slot="label" class="label">
            Team
            <span class="text-[#FF5054]">*</span>
          </span>
          <el-select
            v-model="formData.teamId"
            placeholder="Product Designer"
            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>
      <!-- 批量添加 -->
      <el-form
        label-position="top"
        label-width="100px"
        inline-message
        class="p-40px"
        v-show="active === 1"
      >
        <el-form-item>
          <span slot="label" class="label">
            XLSX with users
            <br>
            <span class="text-[14px] leading-20px text-[#808185]">
              Upload a XLSX file to add users.You can download the sample XLSX file for an example of the format.
            </span>
          </span>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            drag
            action=""
            :before-upload="upLoadChange"
            :auto-upload="false"
            :limit="1"
            accept=".xlsx"
            ref="upload">
            <div class="el-upload__text">Drag or drop XLSX file here or <em>browse</em></div>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <span slot="label" class="label leading-20px text-[#1460F3] hover:opacity-70 cursor-pointer">
            <a href="/public/download/团队成员导入模板.xlsx" download="团队成员导入模板.xlsx">
              Download sample XLSX <img src="@/assets/images/downLoadBlue.svg" class="inline-block ">
            </a>
          </span>
        </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
              mr-16px
              font-bold
              hover:opacity-80
            "
          >
            Cancel
          </button>
          <button
            type="button"
            @click="submitFormVolume()"
            class="
              w-168px
              h-48px
              bg-[#1460F3]
              text-[#fff]
              rounded-8px
              font-bold
              hover:opacity-80
            "
          >
            Add
          </button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.hand {
  cursor: pointer;
}
.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-upload__text{
  margin: 70px 0;
  color: #808185;
}
::v-deep .el-upload-dragger{
  border: 1px solid #d9d9d9;
  width: 100%;
}
::v-deep .el-upload{
  width: 50%;
}
::v-deep .el-upload-list__item{
  width: 50%;
}
</style>

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