pdf_tech_front_end/src/views/TeamManagement/ManageTeam.vue

<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue'
import Search from '@/components/icon/search.vue'
import Warning from '@/components/icon/warning.vue'
import { get, _delete, downLoad} from '../../../utils/request'
import { userStore } from '@/store/userInfo'

const { proxy } = getCurrentInstance()
const tableData = ref([])
const teamList = ref([])
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const dialogVisible = ref(false)
const teamId = ref('')
const queryString = ref('')
const deleteTeamName = ref('')
const deleteTeamId = ref('')
const deleteTeamIndex = ref('')
const role = ref('')
//限制用户点击
let click = true

//打开对话框
const handleClick = (index, val) => {
  deleteTeamName.value = val.name
  deleteTeamId.value = val.id
  deleteTeamIndex.value = index
  dialogVisible.value = true
}

function handleSizeChange(val) {
  pageSize.value = val
  getManageTeamList()
}
function handleCurrentChange(val) {
  currentPage.value = val
  getManageTeamList()
}
// 获取团队管理列表
function getManageTeamList() {
  get('/pdf-tech/vppTeam/getManageTeamList', {
    page: currentPage.value,
    pageSize: pageSize.value,
    teamId: teamId.value,
    keyword: queryString.value
  }).then((res) => {
    //限制点击
    setTimeout(() => {
      click = true
    }, 1000)
    if (res.data.code === 200) {
      tableData.value = res.data.result.list
      total.value = res.data.result.total
    }
  })
}
// 获取团队管理列表
const getTeamList = () => {
  get('/pdf-tech/vppTeam/getManageTeamList', {
    teamId: '',
    keyword: ''
  }).then((res) => {
    if (res.data.code === 200) {
      teamList.value = res.data.result.list
    }
  })
}
// 团队管理列表导出
function exportManageTeamList() {
  if(click){
    click = false
    downLoad('/pdf-tech/vppTeam/exportManageTeamList?teamId='+
      teamId.value +
      '&' +
      'keyword=' +
      queryString.value
      ).then((res) => {
        //限制点击
        setTimeout(() => {
          click = true
        }, 1000)
        let url = window.URL.createObjectURL(new Blob([res.data], { type: '.xlsx' }))
        let a= document.createElement('a')
        a.style.display = 'none'
        a.href = url
        // 自定义文件名
        a.setAttribute('download', `团队.xlsx`)
          document.body.appendChild(a)
          // 下载文件
          a.click()
          // 释放内存
          url = window.URL.revokeObjectURL(url)
          document.body.removeChild(a) 
      }
    )
  }
}
// 删除
function handleDelete() {
  _delete('/pdf-tech/vppTeam/deleteTeam', {
    teamId: deleteTeamId.value
  }).then((res) => {
    if (res.data.code === 200) {
      proxy.$message({
        duration: 5000,
        message: 'Delete Success',
        type: 'success'
      })
      tableData.value.splice(deleteTeamIndex.value, 1)
    } else (
      proxy.$message.error(res.data.msg)
    )
    dialogVisible.value = false
  })
}
//筛选
const searchInfo = () => {
  if(click){
    click = false
    getManageTeamList()
  }
}
onMounted(() => {
  role.value = userStore().user.role
  let pageText = document.getElementsByClassName('el-pagination__jump')[0]
  if (pageText) {
    pageText.childNodes[0].nodeValue = '跳至'
  }
  getManageTeamList()
  getTeamList()
})
</script>

<template>
  <div>
    <h1>Manage Team</h1>
    <div class="mt-36px mb-16px flex justify-between">
      <h2>Content</h2>
      <div class="flex">
        <el-tooltip
          class="item"
          effect="dark"
          content="Download data"
          placement="bottom"
        >
          <div
            class="
              w-28px
              h-28px
              border-1 border-[#D9D9D9]
              rounded-4px
              bg-[#F9FAFB]
              flex
              justify-center
              items-center
              mr-12px
              cursor-pointer
            "
            @click="exportManageTeamList"
          >
            <img src="@/assets/images/download.svg" alt="download" />
          </div>
        </el-tooltip>
        <router-link
          v-if="role === '1'"
          :to="{ name: 'CreateManageTeam', params: { flag: 'create' } }"
        >
          <div
            class="
              h-28px
              px-10px
              py-4px
              bg-[#1460F3]
              rounded-4px
              text-14px
              leading-20px
              font-400
              text-[#fff]
              cursor-pointer
              hover:opacity-80
            "
          >
            Create Team
          </div>
        </router-link>
      </div>
    </div>
    <div class="block px-24px pt-32px pb-40px">
      <div class="flex">
        <select v-model="teamId" name="team" class="min-w-140px mr-16px" :class="{ '!text-[#232A40]': teamId !== '' }">
          <option value="">Team</option>
          <option v-for="item in teamList" :value="item.id" :key="item.id">
            {{ item.name }}
          </option>
        </select>
        <div class="relative mr-16px">
          <el-input
            v-model="queryString"
            size="mini"
            class="!w-316px input-with-select"
            placeholder="Search Team Description / Team Admin"
          >
          </el-input>
          <button
            type="button"
            @click="searchInfo()"
            class="absolute top-8px right-8px"
          >
            <Search />
          </button>
        </div>
        <button
          type="button"
          @click="searchInfo()"
          class="
            w-70px
            h-28px
            border-[#1460F3] border-1px
            rounded-4px
            px-10px
            py-4px
            text-14px
            leading-20px
            text-[#1460F3]
            cursor-pointer
            hover:opacity-80
          "
        >
          Confirm
        </button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="Team name" min-width="14%">
        </el-table-column>
        <el-table-column prop="members" label="Members" min-width="11%">
        </el-table-column>
        <el-table-column
          prop="licenseAmount"
          label="License Amount"
          min-width="17%"
        >
        </el-table-column>
        <el-table-column
          prop="description"
          label="Team Description"
          min-width="18%"
        >
        </el-table-column>
        <el-table-column label="Team Admin" min-width="14.5%">
          <template slot-scope="scope">
            <span v-for="(item, index) in scope.row.teamAdmin" :key="index">{{ item }}<br /></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="Created date"
          min-width="13.5%"
        >
        </el-table-column>
        <el-table-column label="Operate" min-width="12%">
          <template slot-scope="scope">
            <div>
              <router-link :to="{ name: 'EditManageTeam', params: { flag: 'edit', teamInfo: scope.row } }">
                <div class="w-61px h-20px border-1 border-[#1460F3] rounded-4px text-center text-14px leading-20px text-[#1460F3] cursor-pointer mb-8px">Edit</div>
              </router-link>
              <div
                class="
                  w-61px
                  h-20px
                  border-1 border-[#1460F3]
                  rounded-4px
                  text-center text-14px
                  leading-20px
                  text-[#1460F3]
                  cursor-pointer
                "
                @click="handleClick(scope.$index, scope.row)"
              >
                Delete
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="376px"
      top="30vh"
      center
      :show-close="false"
    >
      <Warning class="inline-block" />
      <div class="mt-16px text-16px leading-24px text-[#232A40]">
        <p>Sure Delete Team?</p>
        <p>
          Team Name: <span class="font-bold">{{ deleteTeamName }}</span>
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">No</el-button>
        <el-button type="primary" @click="handleDelete()">Yes</el-button>
      </span>
    </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      :background="true"
      layout="prev, pager, next, sizes, jumper"
      :total="total"
      class="px-24px !rounded-0 rounded-b-8px flex justify-end"
    >
    </el-pagination>
  </div>
</template>

<style lang="scss" scoped>
.el-table::v-deep thead {
  color: #000 !important;
}

.el-table::v-deep .el-table__cell{
  padding-right: 20px !important;
  padding-left: 20px !important;
}

::v-deep .input-with-select .el-input__inner {
  padding: 0 20px 0 8px;
  border-color: #d9d9d9;
  font-size: 14px;
  color: #232A40;
}

::v-deep .input-with-select .el-input__inner::placeholder {
  font-size: 14px;
  font-weight: 400;
  color: #808185;
}
</style>