|
|
@@ -1,6 +1,7 @@
|
|
|
<script setup>
|
|
|
import { computed, onMounted, onUnmounted, watch, ref } from "vue";
|
|
|
import { useRouter } from 'vue-router';
|
|
|
+import { Search } from '@element-plus/icons-vue'
|
|
|
const router = useRouter();
|
|
|
|
|
|
// let state = ref({
|
|
|
@@ -165,12 +166,88 @@ let state = ref({
|
|
|
],
|
|
|
// 用户总数量
|
|
|
"userTotal": 6,
|
|
|
+ // 是否弹出添加账号UI
|
|
|
"showDialog": false,
|
|
|
+ // 当前分页列表，多选的数据
|
|
|
"ids": [],
|
|
|
"showDel": false
|
|
|
});
|
|
|
|
|
|
+const ruleFormRef = ref();
|
|
|
|
|
|
+const userAddParams = ref({
|
|
|
+ name: '',
|
|
|
+ username: '',
|
|
|
+ password: '123456',
|
|
|
+ orgId: '',
|
|
|
+ roles: [],
|
|
|
+});
|
|
|
+
|
|
|
+const userAddRules = ref({
|
|
|
+ name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
|
|
|
+ username: [{ required: true, message: '请填写学号', trigger: 'blur' }],
|
|
|
+ orgId: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择班级',
|
|
|
+ trigger: 'change',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+})
|
|
|
+
|
|
|
+/**
|
|
|
+ * 弹出添加账号UI
|
|
|
+ */
|
|
|
+const btnAddStudent = (formEl) => {
|
|
|
+ state.value.showDialog = true;
|
|
|
+ if (!formEl) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ formEl.resetFields();
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 触发搜索账号逻辑
|
|
|
+ */
|
|
|
+const btnSearchName = () => {
|
|
|
+ console.log("触发搜索账号逻辑");
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 更新选中的班级逻辑
|
|
|
+ * @param val
|
|
|
+ */
|
|
|
+const classChange = (val) => {
|
|
|
+ state.value.userListParams.orgId = val;
|
|
|
+ console.log(
|
|
|
+ "更新选中的班级逻辑", val
|
|
|
+ );
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ * 上一页，下一页改变
|
|
|
+ */
|
|
|
+const handleSizeChange = (val) => {
|
|
|
+ // 重新查找分页数据
|
|
|
+}
|
|
|
+/**
|
|
|
+ * 上一页，下一页改变
|
|
|
+ */
|
|
|
+const handleCurrentChange = (val) => {
|
|
|
+ // 重新查找分页数据
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+ *
|
|
|
+ * @param res
|
|
|
+ */
|
|
|
+const selectionChange = (res) => {
|
|
|
+ state.value.ids = [];
|
|
|
+ res.forEach((item) => {
|
|
|
+ state.value.ids.push(item.id);
|
|
|
+ });
|
|
|
+}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
@@ -198,7 +275,7 @@ let state = ref({
|
|
|
</div>
|
|
|
<div class="rowBtn rowBtn1" @click="btnAddStudent(ruleFormRef)">
|
|
|
<img src="./assets/img/manageUser/add.svg" alt="" />
|
|
|
- <span class="rowBtn-text rowBtn-text1">添加学生</span>
|
|
|
+ <span class="rowBtn-text rowBtn-text1">添加账号</span>
|
|
|
</div>
|
|
|
<div class="rowBtn rowBtn2">
|
|
|
<img src="./assets/img/manageUser/download.svg" alt="" />
|
|
|
@@ -223,7 +300,7 @@ let state = ref({
|
|
|
:prefix-icon="Search"
|
|
|
clearable
|
|
|
style="width: 17rem; height: 3rem"
|
|
|
- placeholder="搜索学生姓名/学号"
|
|
|
+ placeholder="搜索账号/姓名"
|
|
|
@clear="btnSearchName"
|
|
|
/>
|
|
|
<div class="rowSearch" @click="btnSearchName">搜索</div>
|
|
|
@@ -232,10 +309,10 @@ let state = ref({
|
|
|
<div class="contentTable commonsScrollbar">
|
|
|
<el-table :data="state.userList" style="width: 100%" @selection-change="selectionChange">
|
|
|
<el-table-column align="center" type="selection" width="110" />
|
|
|
- <el-table-column prop="name" label="姓名/学号" />
|
|
|
- <el-table-column prop="name" label="学校" />
|
|
|
+ <el-table-column prop="name" label="账号" />
|
|
|
+ <el-table-column prop="name" label="姓名" />
|
|
|
<el-table-column prop="orgName" label="班级" />
|
|
|
- <el-table-column prop="orgName" label="加入时间" />
|
|
|
+ <el-table-column prop="orgName" label="状态" />
|
|
|
<el-table-column label="操作">
|
|
|
<template #default="scope">
|
|
|
<el-button link type="primary" @click="btnDetail(scope.row)">详情</el-button>
|
|
|
@@ -275,6 +352,37 @@ let state = ref({
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 添加账号模态框 -->
|
|
|
+ <el-dialog v-model="state.showDialog" class="dialog">
|
|
|
+ <template #header>
|
|
|
+ <div class="dialog-title">添加账号</div>
|
|
|
+ </template>
|
|
|
+ <div class="dialogBody">
|
|
|
+ <el-form ref="ruleFormRef" :model="userAddParams" :rules="userAddRules">
|
|
|
+ <el-form-item label="姓名" prop="name">
|
|
|
+ <el-input v-model="userAddParams.name" clearable placeholder="请填写姓名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学号" prop="username">
|
|
|
+ <el-input v-model="userAddParams.username" type="number" clearable placeholder="请填写学号"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="学校" prop="orgId">
|
|
|
+ <el-select v-model="userAddParams.orgId" clearable placeholder="请选择学校" @change="selectClass">
|
|
|
+ <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="班级" prop="orgId">
|
|
|
+ <el-select v-model="userAddParams.orgId" clearable placeholder="请选择班级" @change="selectClass">
|
|
|
+ <el-option v-for="item in state.organizationList" :key="item.id" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="dialogFoot">
|
|
|
+ <el-button color="#EAEAEA" @click="state.showDialog = false" style="margin-right: 0.6rem">取消</el-button>
|
|
|
+ <el-button color="#2C68FF" @click="submitForm(ruleFormRef)">确认</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -495,6 +603,102 @@ let state = ref({
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
+ :deep(.dialog) {
|
|
|
+ width: 55rem;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 1.1rem;
|
|
|
+ .dialog-title {
|
|
|
+ width: 55rem;
|
|
|
+ height: 5.9rem;
|
|
|
+ background: #2c68ff;
|
|
|
+ font-size: 1.8rem;
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 1.1rem 1.1rem 0 0;
|
|
|
+ padding-left: 4rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .el-dialog__headerbtn {
|
|
|
+ font-size: 1.7rem;
|
|
|
+ right: 1rem;
|
|
|
+ top: 1.5rem;
|
|
|
+ .el-dialog__close {
|
|
|
+ color: #ffffff;
|
|
|
+ margin-right: 4rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dialogBody {
|
|
|
+ padding: 0.8rem 8rem 3.5rem 6.7rem;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .el-form-item {
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+ }
|
|
|
+ .el-form-item__label {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #000000;
|
|
|
+ padding-right: 2rem;
|
|
|
+ }
|
|
|
+ .el-input {
|
|
|
+ height: 3.7rem;
|
|
|
+ --el-input-bg-color: #efefef;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ --el-input-border-radius: 0.57rem;
|
|
|
+ --el-input-border-color: #efefef;
|
|
|
+ --el-input-focus-border-color: #efefef;
|
|
|
+ --el-input-hover-border-color: #efefef;
|
|
|
+ .el-input__wrapper {
|
|
|
+ padding: 0 2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-select {
|
|
|
+ .el-select__wrapper {
|
|
|
+ height: 3.7rem;
|
|
|
+ background-color: #efefef;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ // box-shadow: 0 0 0 1px #efefef inset;
|
|
|
+ padding: 0 2rem;
|
|
|
+ .el-select__caret {
|
|
|
+ color: #555555;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dialogFoot {
|
|
|
+ display: flex;
|
|
|
+ justify-content: end;
|
|
|
+ margin-top: 4rem;
|
|
|
+ .el-button {
|
|
|
+ width: 8.5rem;
|
|
|
+ height: 3.2rem;
|
|
|
+ border-radius: 0.57rem;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ :deep(.del) {
|
|
|
+ .del-img {
|
|
|
+ width: 1.5rem;
|
|
|
+ height: 1.5rem;
|
|
|
+ margin-right: 0.3rem;
|
|
|
+ }
|
|
|
+ .del-name {
|
|
|
+ font-size: 1.2rem;
|
|
|
+ color: #e84d4d;
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ width: 100%;
|
|
|
+ height: 10rem;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 3rem;
|
|
|
+ color: #000000;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 1.2rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
</style>
|
