adminBigData/src/views/school/index.vue

<template>
  <div>
    <div class="user_num_content">
      <div class="user_item all">
        <div class="item_left">
          <img src="@/assets/icon/user_all.svg" alt="">
          <p>全部用户</p>
        </div>
        <div class="item_right">{{ userNumber.allUser }}</div>
      </div>
      <div class="user_item blue">    
        <div class="item_left">
          <img src="@/assets/icon/user_blue.svg" alt="">
          <p>正式用户</p>
        </div>
        <div class="item_right">{{ userNumber.officialUser }}</div>
      </div>
      <div class="user_item green">
        <div class="item_left">
          <img src="@/assets/icon/user_green.svg" alt="">
          <p>体验用户</p>
        </div>
        <div class="item_right">{{ userNumber.experienceUser }}</div>
      </div>
      <div class="user_item orange">
        <div class="item_left">
          <img src="@/assets/icon/user_orange.svg" alt="">
          <p>冻结用户</p>
        </div>
        <div class="item_right">{{ userNumber.freezeUser }}</div>
      </div>
    </div>
    <SearchMain @FnSearch="FnSearch" />
    <div class="page_jg_20"></div>
    <div class="page_item">
      <div class="page_search">
        <div class="search_content">
          <div class="content_left">
            <el-select v-model="schoolTypeSelect" @change="SearchChange" placeholder="">
              <el-option label="全部类型" value=" "></el-option>
              <el-option label="单校" :value="0"></el-option>
              <el-option label="联考" :value="1"></el-option>
            </el-select>
            <el-input v-model="schoolNameCode" placeholder="请输入学校名称或编号" @input="SearchChange">
              <template #append>
              <el-button :icon="Search" @click="SearchChange" />
              </template>
            </el-input>
          </div>
          <div class="content_right">
            <el-button>
              <img src="@/assets/icon/refresh.svg" alt="" style="margin-right: 5px;">刷新
            </el-button>
            <el-button @click="OpenSubject">开通科目</el-button>
            <el-button type="primary" @click="addUser">新增用户</el-button>
          </div>
        </div>
      </div>
      <div class="page_jg_20"></div>
      <div class="page_table">
        <el-table :data="tableData" stripe v-loading="tableLoading" element-loading-text="拼命加载中……" 
          element-loading-spinner="el-icon-loading" element-loading-background="#ffffff">
            <el-table-column type="index" label="序号" fixed="left" align="center" />
            <el-table-column prop="tenantCode" label="学校编号" width="80" fixed="left" align="center" show-overflow-tooltip />
            <el-table-column prop="tenantName" label="学校名称" width="150" fixed="left" align="center" show-overflow-tooltip />
            <el-table-column prop="schoolAbbreviation" label="学校简称" width="100" align="center" show-overflow-tooltip />
            <el-table-column prop="region" label="区域" align="center" show-overflow-tooltip />
            <el-table-column prop="schoolType" label="账号类型" align="center">
              <template #default="{ row }">
                {{ row.schoolType == 0 ? '单校版' : row.schoolType == 1 ? '联考版' :  '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="startDate" label="开始时间" width="100" align="center" show-overflow-tooltip />
            <el-table-column prop="endDate" label="结束时间" width="100" align="center" show-overflow-tooltip />
            <el-table-column prop="dateDiffDayS" label="剩余天数" align="center" />
            <el-table-column prop="status" label="状态" align="center">
              <template #default="{ row }">
                <div class="table_row_status">
                  <!-- 正式 -->
                  <div class="need_summary_icon" v-if="row.status==1"></div>
                  <!-- 试用 -->
                  <div class="yes_release_icon" v-else-if="row.status==2"></div>
                  <!-- 冻结 -->
                  <div class="no_release_icon" v-else-if="row.status==3"></div>
                  <!-- {{ row.statusLabel }} -->
                  {{ row.status == 1 ? '正式' : row.status == 2 ? '试用' : row.status == 3 ? '冻结' : '-' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="ityAndAreaNam" label="运维人员" align="center" />
            <el-table-column label="操作" width="280" fixed="right" align="center">
              <template #default="{ row }">
                <div class="table_row_option">
                  <div v-if="row.status == 3" class="button_delete" @click="ChangeStatus(row)">解冻</div>
                  <div v-else class="button_editor text_color_orange" @click="ChangeStatus(row)">冻结</div>
                  <div class="button_editor" @click="EditUser(row)">编辑</div>
                  <div class="button_editor" @click="OpenAuth(row)">权限</div>
                  <div class="button_editor">重置密码</div>
                  <div class="button_editor" @click="GoTeach">进入学校</div>
                </div>
              </template>
            </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="page_dialog">
      <AddUser v-if="showDialog" @AddUser="RefTable" /> 
      <AuthConfig v-if="authData.showDialog" />
      <SubjectList v-if="subjectShowDialog" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import SearchMain from '@/views/school/SearchMain.vue'
import AddUser from '@/views/school/addUser.vue'
import AuthConfig from '@/views/school/authConfig.vue'
import SubjectList from '@/views/school/subjectList.vue'
import { Search } from '@element-plus/icons-vue'
import { getSchoolNumber, getSchoolList, changeStatus } from '@/api/school'
import { ref, reactive, provide, onMounted } from 'vue'
interface UserNumber {
  allUser: number
  officialUser: number
  experienceUser: number
  freezeUser: number
}
const userNumber = ref<UserNumber>({
  allUser: 0,
  officialUser: 0,
  experienceUser: 0,
  freezeUser: 0
})
interface User {
  tenantCode: String;
  tenantName: String;
  status: number;
  statusLabel: String;
  schoolType: String;
  abbreviation: String;
  dateDiffDayS: String;
  startDate:  String;
  endDate:  String;
  ityAndAreaNam: string;
  region:  String;
}
const tableData = ref<User[]>([])

const schoolTypeSelect = ref<string>(" ")
const schoolNameCode = ref('')
const tableLoading = ref(false)
const showDialog = ref(false)
const dialogData = reactive({
  id: '',
  pageType: '',
  tenantName: ''
})
const subjectShowDialog = ref(false)
const authData = reactive({
  showDialog: false,
  id: '',
  schoolName: '',
  tenantCode: ''
})
provide('showDialog', showDialog) // 新增用户弹窗是否展示
provide('dialogData', dialogData) // 新增用户弹窗数据
provide('authData', authData) // 设置权限弹窗数据
provide('subjectShowDialog', subjectShowDialog) // 开通科目弹窗数据
onMounted(() => {
  GetSchoolNumber()
  GetSchoolList()
})
// 新增用户
const addUser = () => {
  showDialog.value = true
  dialogData.pageType = 'add'
}
// 编辑
const EditUser =  (row) => {
  console.log(row)
  showDialog.value = true
  dialogData.pageType = 'edit'
  dialogData.id = row.id
  dialogData.tenantName = row.tenantName
}
// 设置权限
const OpenAuth = (row) => {
  authData.id = row.id
  authData.schoolName = row.tenantName
  authData.tenantCode = row.tenantCode
  authData.showDialog = true
}
// 开通科目
const OpenSubject = () => {
  console.log('OpenSubject')
  subjectShowDialog.value = true
}
// 筛选项数据
const searchData = ref({
  provinceCode: '',
  cityCode: '',
  status: '',
  userId: ''
})
// 筛选项查询
const FnSearch = (data) => {
  searchData.value = data.value
  GetSchoolList()
}
// 表格上面筛选查询
const SearchChange = () => {
  GetSchoolList()
}
// 获取用户数量
const GetSchoolNumber = () => {
  getSchoolNumber().then(res => {
    if(res.code == 200 && res.data) {
      userNumber.value = res.data
    }
  })
}
// 获取学校列表
const GetSchoolList = () => {
  let params = {
    status: searchData.value.status,
    // userId: searchData.value.userId,
    cityCode: searchData.value.cityCode,
    provinceCode: searchData.value.provinceCode,
    schoolType:  schoolTypeSelect.value,
    queryStr: schoolNameCode.value
  }
  tableLoading.value = true
  getSchoolList(params).then(res => {
    if(res.code == 200 && res.data) {
      tableData.value = res.data
    }
    tableLoading.value = false
  }).catch(err => {
    tableLoading.value = false
  })
}
// 新增/修改学校信息后刷新列表
const RefTable = (val) => {
  showDialog.value = val
  GetSchoolList()
}
// 改变用户状态
const ChangeStatus = (row) => {
  console.log(row)
  changeStatus({
    id: row.id,
    status: row.status
  }).then(res => {
    if(res.code == 200) {
      GetSchoolList()
    }
  })
}
const GoTeach = () => {
  console.log('GoTeach')
}
</script>

<style lang="scss" scoped>
.user_num_content {
  width: 100%;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .user_item {
    flex-grow: 1;
    height: 80px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    font-weight: 500;
    .item_left {
      display: flex;
      align-items: center;
      img {
        margin-right: 10px;
      }
    }
    &.all {
      background: #2E64FA;
      color: #fff;
      .item_right {
        color: #fff;
      }
    }
    &.blue {
      border: 1px solid #2E64FA;
      background: #EAF0FF;
      color: #333;
      .item_right {
        color: #2E64FA;
      }
    }
    &.green {
      border: 1px solid #2BC644;
      background: #EAF9EC;
      color: #333;
      .item_right {
        color: #2BC644;
      }
    }
    &.orange {
      border: 1px solid #FB9F34;
      background: #FFF5EB;
      color: #333;
      .item_right {
        color: #FB9F34;
      }
    }
    .item_right {
      font-size: 24px;
      font-weight: 700;
    }
  }
}
.button_editor.text_color_orange {
  color: #FB9F34;
}
.button_editor.text_color_red {
  color: #F56C6C;
}
</style>