pdf_tech_front_end/src/views/ManageAdmin.vue

<script setup>
import { onMounted, ref } from 'vue'
import Download from '@/components/icon/download.vue'
import Warning from '@/components/icon/warning.vue'
import Search from '@/components/icon/search.vue'
import { get, post } from '../../utils/request'

const currentPage = ref(1)
const size = ref(5)
const queryString = ref('')
const teamId = ref('')
const role = ref('')
const tableData = ref([])
const teamList = ref([])
const total = ref(0)
const dialogVisible = ref(false)
const cancelEmail = ref('')
let click = true
let memberRole = ''

onMounted(() => {
  let pageText = document.getElementsByClassName('el-pagination__jump')[0]
  if (pageText) {
    pageText.childNodes[0].nodeValue = '跳至'
  }
  get('/pdf-tech/vppMember/getMemberInfo').then((res)=>{
    if(res.data.code === 200){
      memberRole = res.data.result.role
    }
  })
  pagingQuery()
  getTeamList()
})
//打开对话框
const handleClick = (val) => {
  if( memberRole?.indexOf("1") !== -1){
    dialogVisible.value = true
    cancelEmail.value = val.email
  }
}
//获取分页数据
const pagingQuery = () => {
  get(
    '/pdf-tech/vppRTeamMemberRole/pageForAdmin/?page=' +
      currentPage.value +
      '&' +
      'pageSize=' +
      size.value +
      '&' +
      'teamId=' +
      teamId.value +
      '&' +
      'role=' +
      role.value +
      '&' +
      'queryString=' +
      queryString.value 
  ).then((res) => {
    //限制点击
    setTimeout(() => {
      click = true
    }, 1000)
    if(res.data.code === 200){
      const data = res.data.result.list
      for (let i = 0; i < data.length; i++) {
        if (data[i].memberRole ?.indexOf("1") !== -1) {
          data[i].memberRole = 'Super admin'
        } else if (data[i].memberRole ?.indexOf("2") !== -1) {
          data[i].memberRole = 'Team admin'
        } else {
          data[i].memberRole = 'Team member'
        }
      }
      tableData.value = data
      total.value = res.data.result.total
    }
  })
}
//筛选
const searchInfo = () => {
  if(click){
    click = false
    pagingQuery()
  }
}
// 获取团队管理列表
const getTeamList = (val) => {
  get('/pdf-tech/vppTeam/getManageTeamList', {
    teamId: '',
    keyword: ''
  }).then((res) => {
    if (res.data.code === 200) {
      teamList.value = res.data.result.list
    }
  })
}
//
const deleteAdmin = (val) => {
  dialogVisible.value = false
  var urlencoded = new URLSearchParams()
  urlencoded.append("memberId", val.id)
  post('/pdf-tech/vppTeam/deleteAdmin',urlencoded).then((res) => {
    if(res.data.code === 200){
      pagingQuery()
    }
  })
}
//切换每页条数
const handleSizeChange = (val) => {
  size.value = val
  pagingQuery()
}
//切换分页
const handleCurrentChange = (val) => {
  currentPage.value = val
  pagingQuery()
}
</script>

<template>
  <div class="flex flex-col items-center">
    <div class="w-full">
      <h1 class="leading-40px">Manage Admin</h1>
      <div
        class="
          mt-36px
          mb-16px
          leading-20px
          text-16px
          font-bold
          flex
          justify-between
        "
      >
        <span>Content</span>
        <div class="flex">
          <router-link
            :to="{ path: '/manageAdmin/addAdmin', query: {} }"
            class="
              bg-[#1460F3]
              h-28px
              w-111px
              flex
              justify-center
              items-center
              font-500
              text-14px
              ml-12px
              rounded-4px
              text-[#fff]
              hover:opacity-80
            "
          >
            Add Admin
          </router-link>
        </div>
      </div>
      <div class="flex bg-[#fff] pt-32px px-24px rounded-t-8px w-full">
        <select class="w-140px" v-model="teamId">
          <option value="" selected>Team</option>
          <option v-for="item in teamList" :key="item.value" :value="item.id">
            {{ item.name }}
          </option>
        </select>
        <select class="w-140px ml-16px" v-model="role">
          <option value="" selected>Role</option>
          <option value="1">Super admin</option>
          <option value="2">Team admin</option>
        </select>
        <div class="relative">
          <el-input
            v-model="queryString"
            size="mini"
            class="!w-316px ml-16px input-with-select"
            placeholder="Search Name/Email"
          >
          </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-1px border-[#1460F3]
            rounded-4px
            ml-16px
            text-[#1460F3]
            hover:opacity-80
          "
        >
          Confirm
        </button>
      </div>
      <el-table :data="tableData" class="px-24px rounded-b-8px w-full">
        <el-table-column prop="fullName" label="Name"> </el-table-column>
        <el-table-column prop="email" label="Email"> </el-table-column>
        <el-table-column prop="teamNames" label="Team"> </el-table-column>
        <el-table-column prop="memberRole" label="Role"> </el-table-column>
        <el-table-column prop="createdAt" label="Added date"> </el-table-column>
        <el-table-column prop="operate" label="Operate">
          <template slot-scope="scope">
            <div class="flex flex-col">
              <router-link
                :to="{ path: '/manageAdmin/editAdmin', query: { Email: scope.row.email, Team: scope.row.teamName, Id: scope.row.id } }"
                class="
                  w-60px
                  h-20px
                  flex
                  justify-center
                  items-center
                  rounded-4px
                  border-1px border-[#1460F3]
                  text-[#1460F3]
                  leading-12px
                "
              >
                Edit
              </router-link>
              <button
                @click="handleClick(scope.row)"
                type="text"
                class="
                  w-60px
                  h-20px
                  mt-8px
                  rounded-4px
                  border-1px border-[#1460F3]
                  text-[#1460F3]
                  leading-12px
                "
              >
                Delete
              </button>
            </div>
            <el-dialog title="" :visible.sync="dialogVisible" width="376px" top="30vh" center :show-close="false">
              <Warning />
              <p class="mt-16px">Sure Delete Team admin?</p>
              <p>
                User Name:<span class="text-16px font-bold">{{
                  cancelEmail
                }}</span>
              </p>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="deleteAdmin(scope.row)">
                  Delete
                </el-button>
              </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 20]"
        :page-size="size"
        :background="true"
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        class="px-24px !rounded-0 rounded-b-8px mt-20px flex justify-end"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.el-table::v-deep .el-table__cell{
  padding-right: 20px !important;
  padding-left: 20px !important;
}

.el-table__header-wrapper::v-deep .el-table__header {
  display: flex;
  width: 1100px !important;
}

.el-table__header {
  display: flex;
  width: 1100px !important;
}

.el-table::v-deep thead {
  color: #000 !important;
}
</style>