adminBigData/src/views/examination/addSchool.vue

<template>
  <el-dialog v-model="schoolData.showDialog" :title="`${schoolData.tenantName} 新增学校`" width="800px">
    <div class="page_search">
      <div class="search_content">
        <div class="content_left">
          <el-select v-model="provinceSelect" placeholder="全部省份" clearable>
            <el-option v-for="province in provincesList" :key="province.provinceCode" :label="province.provinceName" :value="province.provinceCode"></el-option>
          </el-select>
          <el-input v-model="schooltName" placeholder="请输入学校名称或编号" @input="SearchChange">
            <template #append>
            <el-button :icon="Search" @click="SearchChange" />
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <div class="page_jg_20"></div>
    <div class="page_table"> 
      <el-table :data="tableData" stripe v-loading="tableLoading" element-loading-text="拼命加载中……" height="500px" ref="tableDataRef"
        element-loading-spinner="el-icon-loading" element-loading-background="#ffffff" @selection-change="handleSelectionChange">
          <el-table-column type="selection" align="center" />
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column prop="tenantCode" label="账号" align="center" />
          <el-table-column prop="tenantName" label="学校名称" align="center" />
          <el-table-column prop="cityAndAreaName" label="区域" align="center">
            <template #default="{ row }">
              {{ row.cityAndAreaName ||  '-' }}
            </template>
          </el-table-column>
          <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="status" label="状态" align="center">
            <template #default="{ row }">
              <div class="table_row_status">
                <!-- 正式 -->
                <div class="need_summary_icon" v-if="row.status === 1 && row.type === 1"></div>
                <!-- 试用 -->
                <div class="yes_release_icon" v-else-if="row.status === 1 && row.type === 0"></div>
                <!-- 冻结 -->
                <div class="no_release_icon" v-else-if="row.status === 0"></div>
                <!-- 状态文本 -->
                {{ row.status === 1 ? (row.type === 1 ? '正式' : row.type === 0 ? '体验' : '-') : row.status === 0 ? '冻结' : '-' }}
              </div>
            </template>
          </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <el-button class="button_border_gray cancel" @click="schoolData.showDialog = false">取消</el-button>
      <el-button class="button_background" :loading="submitLoading" @click="AddComfirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script lang="ts">
export default {
  name: 'AddSchool',
}
</script>
<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { ElMessage, ElTable } from 'element-plus'
import { ref, inject, onMounted, nextTick } from 'vue'
import { getSingleExamList, addSingleSchool } from '@/api/examination'
import { provinceTree } from '@/api/school'
interface SchoolDataItem {
  id: string
}
interface SchoolData {
  showDialog: boolean
  tenantName: string
  id: string
}
const schoolData = inject<SchoolData>('schoolData', {
  showDialog: false,
  tenantName: '',
  id: ''
})
interface Province {
  provinceCode: string
  provinceName: string
  children?: any[] // 可选字段
}
const provincesList = ref<Province[]>([])
const provinceSelect = ref('')
const schooltName =  ref('')
const tableData = ref([])
const selUserList = ref([])
const selectListId = inject<any>('selectListId', [])
const tableDataRef = ref<InstanceType<typeof ElTable>>()
// 提交按钮loading
const submitLoading = ref(false)
onMounted(() => {
  GetProvinceTree()
  GetSingleExamList()
})
// 获取省市区树列表
const GetProvinceTree = async () => {
  const res = await provinceTree()
  if(res.code == 200 && res.data) {
    const { data } = res
    provincesList.value = data
  }
}
const tableLoading = ref(false)
const GetSingleExamList = async () => {
  try {
    tableLoading.value = true
    const res = await getSingleExamList({
      queryStr: schooltName.value,
      provinceCode: provinceSelect.value,
      // cityCode: '',
      // areaCode: '',
    })
    if (res.code === 200) {
      tableData.value = res.data
      nextTick(() => {
        tableData.value.forEach((item: any) => {
          if(selectListId.value.includes(item.tenantCode)) {
            tableDataRef.value?.toggleRowSelection(item, true)
          }
        })
      })
    }
  }catch {} finally {
    tableLoading.value = false
  }
}
const SearchChange = () => {
  GetSingleExamList()
}
const handleSelectionChange = (val: any) => {
  selUserList.value = val.map((item: any) => item.id)
}
const emit = defineEmits(['RefTable'])
const AddComfirm = async () => {
  submitLoading.value = true
  try {
    const res = await addSingleSchool({
      schoolParentId: schoolData.id,
      schoolChildId: selUserList.value
    })
    if(res.code == 200) {
      ElMessage.success(res.msg)
      schoolData.showDialog = false
      emit('RefTable', false)
    }else {
      ElMessage.error(res.msg)
    }
    submitLoading.value = false
  } catch (error) {
    console.log(error)
    submitLoading.value = false
  }
}
</script>

<style lang="scss" scoped>
.page_search {
  display: flex;
}
</style>