|
|
@@ -6,118 +6,256 @@
|
|
|
<img src="@/assets/icon/user_all.svg" alt="">
|
|
|
<p>全部用户</p>
|
|
|
</div>
|
|
|
- <div class="item_right">5185</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">5185</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">5185</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">5185</div>
|
|
|
+ <div class="item_right">{{ userNumber.freezeUser }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <SearchMain />
|
|
|
- <div class="module_content">
|
|
|
- <div class="module_title">
|
|
|
- <div class="title_left">
|
|
|
- <el-select v-model="accountTypeSelect">
|
|
|
- <el-option label="全部类型" :value="0"></el-option>
|
|
|
- <el-option label="单校" :value="1"></el-option>
|
|
|
- <el-option label="联考" :value="2"></el-option>
|
|
|
- </el-select>
|
|
|
- <el-input v-model="studentName" placeholder="请输入学生姓名">
|
|
|
- <template #append>
|
|
|
- <img src="@/assets/icon/search_line.svg" alt="">
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
- </div>
|
|
|
- <div class="title_right">
|
|
|
- <el-button>
|
|
|
- <img src="@/assets/icon/refresh.svg" alt="" style="margin-right: 5px;">刷新
|
|
|
- </el-button>
|
|
|
- <el-button>开通科目</el-button>
|
|
|
- <el-button type="primary">新增用户</el-button>
|
|
|
+ <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="module_table">
|
|
|
- <el-table :data="tableData">
|
|
|
- <el-table-column type="index" label="序号" />
|
|
|
- <el-table-column prop="schoolCode" label="学校编号" width="180" />
|
|
|
- <el-table-column prop="schoolName" label="学校名称" width="180" />
|
|
|
- <el-table-column prop="schoolAbbreviation" label="学校简称" />
|
|
|
- <el-table-column prop="region" label="区域" />
|
|
|
- <el-table-column prop="accountType" label="账号类型" />
|
|
|
- <el-table-column prop="startTime" label="开始时间" />
|
|
|
- <el-table-column prop="endTime" label="结束时间" />
|
|
|
- <el-table-column prop="remainingDays" label="剩余天数" />
|
|
|
- <el-table-column prop="status" label="状态" />
|
|
|
- <el-table-column prop="maintenanceStaff" label="运维人员" />
|
|
|
- <el-table-column label="操作" width="250" fixed="right">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button link>{{ row.status == '3' ? "解冻" : "冻结"}}</el-button>
|
|
|
- <el-button link>编辑</el-button>
|
|
|
- <el-button link>权限</el-button>
|
|
|
- <el-button link>重置密码</el-button>
|
|
|
- <el-button link>进入学校</el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
+ <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">进入学校</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>
|
|
|
-import SearchMain from '@/components/SearchMain.vue'
|
|
|
-import { ref } from 'vue'
|
|
|
-// import { Search } from '@element-plus/icons-vue'
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- SearchMain,
|
|
|
- // Search
|
|
|
- },
|
|
|
- setup() {
|
|
|
- const tableData = ref([
|
|
|
- {
|
|
|
- schoolCode: '182900',
|
|
|
- schoolName: '霍格沃茨魔法学校',
|
|
|
- schoolAbbreviation: '霍格沃茨',
|
|
|
- region: '九又四分之三站台',
|
|
|
- accountType: '魔法版',
|
|
|
- startTime: '2024-10-15',
|
|
|
- endTime: '2024-10-16',
|
|
|
- remainingDays: '1',
|
|
|
- status: '1',
|
|
|
- statusName: '正式',
|
|
|
- maintenanceStaff: '哈利·波特',
|
|
|
- }
|
|
|
- ])
|
|
|
- const accountTypeSelect = ref(0)
|
|
|
- const studentName = ref('')
|
|
|
- return {
|
|
|
- accountTypeSelect,
|
|
|
- studentName,
|
|
|
- tableData
|
|
|
+<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,
|
|
|
+ data: {}
|
|
|
+})
|
|
|
+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.data = row
|
|
|
+ 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()
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style lang="scss" scoped>
|
|
|
.user_num_content {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
@@ -125,40 +263,63 @@ export default {
|
|
|
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;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-.user_num_content .user_item {
|
|
|
- flex-grow: 1;
|
|
|
- height: 80px;
|
|
|
- padding: 20px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- border-radius: 10px;
|
|
|
-}
|
|
|
-.user_num_content .user_item .item_left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-}
|
|
|
-.item_left img {
|
|
|
- margin-right: 10px;
|
|
|
-}
|
|
|
-.user_item.all {
|
|
|
- background: #2E64FA;
|
|
|
- color: #fff;
|
|
|
-}
|
|
|
-.user_item.blue {
|
|
|
- border: 1px solid #2E64FA;
|
|
|
- background: #EAF0FF;
|
|
|
- color: #333;
|
|
|
-}
|
|
|
-.user_item.green {
|
|
|
- border: 1px solid #2BC644;
|
|
|
- background: #EAF9EC;
|
|
|
- color: #333;
|
|
|
+.button_editor.text_color_orange {
|
|
|
+ color: #FB9F34;
|
|
|
}
|
|
|
-.user_item.orange {
|
|
|
- border: 1px solid #FB9F34;
|
|
|
- background: #FFF5EB;
|
|
|
- color: #333;
|
|
|
+.button_editor.text_color_red {
|
|
|
+ color: #F56C6C;
|
|
|
}
|
|
|
</style>
|