pdf_tech_front_end/src/views/TeamManagement/ManageTeamOperate.vue

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

export default {
  data () {
    return {
      formData: {
        teamName: '',
        teamDescription: '',
        teamAdminId: [],
        productList: [{
          productId: '',
          licenseNumber: ''
        }]
      },
      flag: '',
      adminOptions: [],
      projectOptions: [],
      click: true
    }
  },
  computed: {
    disabled () {
      let isEmpty = true
      isEmpty = this.formData.teamName.trim() === '' && this.formData.teamDescription.trim() === '' && this.formData.teamAdminId.length === 0
      this.formData.productList.forEach((item)=>{
        Object.keys(item).forEach((key)=>{
          if (item[key] !== '' && item[key] !== null && item[key] !== undefined) {
            isEmpty = false
          }
        })
      })
      return isEmpty
    }
  },
  created () {
    let rowData = {}
    if (!Object.keys(this.$route.params).length) {
      rowData = JSON.parse(localStorage.getItem('rowData'))
    } else {
      rowData = this.$route.params
      localStorage.setItem('rowData', JSON.stringify(this.$route.params))
    }
    this.flag = rowData.flag
    if (rowData.flag === 'edit') {
      if (rowData.teamInfo) {
        this.formData.teamId = rowData.teamInfo.id
        this.formData.teamName = rowData.teamInfo.name
        this.formData.teamDescription = rowData.teamInfo.description
        this.formData.productList[0].licenseNumber = rowData.teamInfo.licenseAmount
      }
    }
    this.getAdmin()
    this.getProduct()
  },
  methods: {
    // 提交表单
    submitForm () {
      if(this.click){
        this.click = false
        let emptyFlag = true
        let productArr = []
        for (const item of this.formData.productList) {
          productArr.push(item['productId'])
        }
        emptyFlag = productArr.includes('')
        if (this.formData.teamName.trim() === '' || emptyFlag) {
          this.$message.error({duration: 5000, message: 'Missing required information'})
          //限制点击
          setTimeout(() => {
            this.click = true
          }, 3000)
        } else {
          if (this.flag === 'create') this.createTeam()
          if (this.flag === 'edit') this.editTeam()
        }
      }
    },
    // 重置表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    removeDomain(item) {
      var index = this.formData.productList.indexOf(item)
      if (index !== -1) {
        this.formData.productList.splice(index, 1)
      }
      console.log(this.formData.productList)
    },
    // 添加卡片
    addDomain () {
      this.formData.productList.push({
        licenseNumber: '',
        productId: ''
      })
      console.log(this.formData.productList)
    },
    // 创建团队
    createTeam () {
      let data = JSON.parse(JSON.stringify(this.formData))
      data.productList.forEach(item =>{
        if (item.licenseNumber === null || item.licenseNumber === '') {
          item.licenseNumber = 0
        }
      })
      data.teamAdminId = data.teamAdminId.filter((item) => {
        return item !== 'All'
      })
      postWithHeader('/pdf-tech/vppTeam/createTeam', JSON.stringify(data)).then((res) => {
        //限制点击
        setTimeout(() => {
          this.click = true
        }, 1000)
        if (res.data.code === 200) {
          this.$message({
            duration: 5000,
            message: 'Change Success',
            type: 'success'
          })
          this.$router.push({name:'ManageTeam'})
        } else (
          this.$message.error({duration: 5000, message:res.data.msg})
        )
      })
    },
    // 编辑团队
    editTeam () {
      let data = JSON.parse(JSON.stringify(this.formData))
      data.productList.forEach(item =>{
        if (item.licenseNumber === null || item.licenseNumber === '') {
          item.licenseNumber = 0
        }
      })
      data.teamAdminId = data.teamAdminId.filter((item) => {
        return item !== 'All'
      })
      putWithHeader('/pdf-tech/vppTeam/editTeam', JSON.stringify(data)).then((res) => {
        //限制点击
        setTimeout(() => {
          this.click = true
        }, 1000)
        if (res.data.code === 200) {
          this.$message({
            duration: 5000,
            message: 'Change Success',
            type: 'success'
          })
          this.$router.push({name:'ManageTeam'})
        } else (
          this.$message.error(res.data.msg)
        )
      })
    },
    // 获取所有管理员
    getAdmin () {
      get('/pdf-tech/vppRTeamMemberRole/pageForAdmin').then((res) => {
        if (res.data.code === 200) {
          res.data.result.list.forEach(item => {
            if (item.memberRole !== '1') {
              this.adminOptions.push({
                  label: item.email,
                  value: item.id
              })
            }
          })
        }
      })
    },
    // 获取所有产品
    getProduct () {
      get('/pdf-tech/product/listWithAdmin').then((res) => {
        if (res.data.code === 200) {
          res.data.result.forEach(item => {
            this.projectOptions.push({
                label: item.name,
                value: item.id
            })
          })
        }
      })
    },
    // Team Admin下拉框全选功能
    selectAllAdmin() {
      if (this.formData.teamAdminId.length < this.adminOptions.length) {
        this.formData.teamAdminId = []
        this.adminOptions.map((item) => {
          this.formData.teamAdminId.push(item.value)
        })
        this.formData.teamAdminId.unshift('All')
      } else {
        this.formData.teamAdminId = []
      }
    },
    changeSelectAdmin(val) {
      if (!val.includes('All') && val.length === this.adminOptions.length) {
        this.formData.teamAdminId.unshift('All')
      } else if (val.includes('All') && (val.length - 1) < this.adminOptions.length) {
        this.formData.teamAdminId = this.formData.teamAdminId.filter((item) => {
          return item !== 'All'
        })
      }
    },
    removeTag(val) {
      if (val === 'All') {
        this.formData.teamAdminId = []
      }
    }
  },
  // 切换路由时清除本地存储数据
  beforeRouteLeave (to, from, next) {
    localStorage.removeItem('rowData')
    next()
  }
}
</script>

<template>
  <div>
    <h1>Team {{ flag === 'create' ? 'Create' : 'Edit'}}</h1>
    <div class="block mt-24px p-40px pr-50px">
      <el-form label-position="top" label-width="80px" :model="formData" ref="formData">
        <el-form-item>
          <template slot="label">
            <span>Team Name</span>
            <span class="text-[#FF5054]">*</span>
          </template>
          <el-input v-model="formData.teamName" class="under-border"></el-input>
        </el-form-item>
        <el-form-item label="Team Description">
          <el-input v-model="formData.teamDescription" class="under-border"></el-input>
        </el-form-item>
        <el-form-item label="Team Admin">
          <el-select
            v-model="formData.teamAdminId"
            @change='changeSelectAdmin'
            @remove-tag='removeTag'
            multiple
            placeholder=""
            class="w-600px">
            <el-option value="All" @click.native='selectAllAdmin'>All</el-option>
            <el-option
              v-for="item in adminOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="w-600px border-1 border-[#1460F3] rounded-8px p-12px pb-0 mb-24px relative" v-for="(item, index) in formData.productList" :key="index">
          <img v-show="formData.productList.length > 1" src="@/assets/images/minus.png" alt="minus" class="w-24px h-24px absolute top-[-12px] right-[-12px] cursor-pointer" @click.prevent="removeDomain(item)">
          <el-form-item>
            <template slot="label">
              <span>Product</span>
              <span class="text-[#FF5054]">*</span>
            </template>
            <select v-model="item.productId" placeholder="Project" class="w-[100%] !h-40px !pl-12px focus-visible:(outline-none)" :class="{ '!text-[#232A40]': item.productId !== '' }">
              <option value="">Project</option>
              <option v-for="item in projectOptions" :key="item.value" :value="item.value">{{ item.label }}</option>
            </select>
          </el-form-item>
          <el-form-item label="Team License Number" class="!mb-22px">
            <el-input v-model.number="item.licenseNumber"></el-input>
          </el-form-item>
        </div>
        <div class="w-600px h-48px border-1 border-dashed border-[#1460F3] rounded-8px flex justify-center items-center">
          <img src="@/assets/images/add.png" alt="add" class="w-24px h-24px cursor-pointer" @click="addDomain">
        </div>
        <div class="mt-32px flex">
          <router-link :to="{ name: 'ManageTeam' }">
            <div class="w-152px h-40px border-1 border-[#1460F3] rounded-8px text-center text-16px text-[#1460F3] font-700 leading-40px mr-16px"
              @click="resetForm('formData')">Cancel</div>
          </router-link>
          <div :class="disabled ? 'cursor-not-allowed' : 'cursor-pointer'">
            <div class="w-152px h-40px border-1 border-[#1460F3] rounded-8px bg-[#1460F3] text-center text-16px text-[#fff] font-700 leading-40px"
              :class="disabled ? 'opacity-20 pointer-events-none' : 'hover:bg-[#3776f2]'"
              @click="submitForm()">Save</div>
          </div>
        </div> 
      </el-form>
    </div>
    <!-- <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="376px"
      center
      :show-close="false"
    >
      <img src="@/assets/images/close_user.png" alt="close_user" class="inline-block w-48px h-48px">
      <div class="mt-16px text-16px leading-24px text-[#232A40]">
        <p>Your TEAM ADMIN is not on the team.<br />Invite <span class="font-bold">{{ formData.teamAdminId[0] }}</span> to Team Kdan？</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Change Admin</el-button>
        <el-button type="primary" @click="dialogVisible = false">Invite</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-bottom: 24px;
}
::v-deep .under-border .el-input__inner {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
::v-deep.el-form--label-top .el-form-item__label {
  padding: 0 0 4px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #232A40;
  font-weight: 700;
}
::v-deep .el-select {
  .el-input__inner {
    border-color: #D9D9D9;
  }
  .el-input .el-select__caret {
    color: #808185;
    font-weight: bold;
  }
  .el-tag {
    border-color: #8D9CB9;
    background-color: #EEF4FF;
    margin-left: 8px;
  }
  .el-tag.el-tag--info {
    color: #505258;
    font-size: 14px;
    padding-left: 4px;
  }
  .el-tag__close.el-icon-close {
    background-color: transparent;
    color: #8D9CB9;
    font-size: 20px;
    font-weight: bold;
  }
}
::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>