-- 新建学员管理

src/api/ThirdApi.js

@@ -0,0 +1,8 @@
+export const BASE = 'https://pre.boe.com'
+export const BASE_DEV = 'https://u-pre.boe.com'
+
+export const USER_LIST = '/userbasic/user/list post'
+export const ORG_LIST = '/userbasic/org/list post'
+export const ORG_CHILD_LIST = '/userbasic/org/info post'
+
+export const AUDIENCE_LIST = '/userbasic/audience/list post'

src/api/index1.js

@@ -44,7 +44,7 @@ import qs from "qs";
 
 //上传文件
 export const uploadFile = (obj) =>
-	http.post("/test/testRequest", qs.stringify({ obj }));
+    http.post("/test/testRequest", qs.stringify({obj}));
 
 // 接口-请求
 
@@ -56,7 +56,7 @@ export const getLearnPath = (obj) => http.post("/admin/router/list", obj);
 export const handleLearnPath = (obj) => http.post("/admin/router/handle", obj);
 //获取路径图统计数据
 export const getLearnCount = (routerId) =>
-	http.get("/admin/router/getCount", { params: { routerId: routerId } });
+    http.get("/admin/router/getCount", {params: {routerId: routerId}});
 
 //新建或编辑关卡
 export const editChapter = (obj) => http.post("/admin/router/editChapter", obj);
@@ -66,20 +66,20 @@ export const setConfig = (obj) => http.post("/admin/router/setConfig", obj);
 export const getStudent = (obj) => http.post("/admin/router/studentList", obj);
 //获取路径图详情-包含关卡及任务列表
 export const getRouterDetail = (routerId) =>
-	http.get("/admin/router/detail", {
-		params: {
-			routerId: routerId,
-		},
-	});
+    http.get("/admin/router/detail", {
+        params: {
+            routerId: routerId,
+        },
+    });
 //添加学员
 export const addStudent = (obj) => http.post("/admin/router/addStudent", obj);
 //删除学员
 export const delStudent = (obj) =>
-	http.post("/admin/router/deleteStudent", obj);
+    http.post("/admin/router/deleteStudent", obj);
 
 // 获取学员路径图进度明细
 export const stuProgress = (obj) =>
-	http.post("/admin/router/studentProcess", obj);
+    http.post("/admin/router/studentProcess", obj);
 //编辑学习路径基本信息
 export const editLearnInfo = (obj) => http.post('/admin/router/editInfo', obj)
 
@@ -92,7 +92,6 @@ export const billboard = (obj) => http.post("/admin/project/billboard", obj);
 //项目基础信息-----------------------------------
 
 
-
 //课程----------------------------------------------
 
 // //提交审核
@@ -121,7 +120,7 @@ export const optionAuthPerm = (obj) => http.post('/admin/AuthPerm/optionAuthPerm
 //获取学员列表
 export const getStuList = (obj) => http.post('/admin/orgStruct/getStudentRef', obj)
 //获取用户登录
-export const getUser = () => http.post('/admin/CheckUser/login', { withCredentials: true })
+export const getUser = () => http.post('/admin/CheckUser/login', {withCredentials: true})
 //公共信息---------------------------------------------------
 
 //添加项目学员
@@ -131,14 +130,15 @@ export const addStudentCourse = (obj) => http.post("/admin/offcourse/addStudent"
 
 // 获取组织结构树
 export const orgtree = () => http.get("/org/tree");
+export const saveStu = obj => http.post("/admin/student/addStudent", obj);
 
 //获取积分列表
 export const noticeList = (projectId) =>
-	http.post(
-		`/admin/project/noticeList?projectId=` +
-		projectId +
-		``
-	);
+    http.post(
+        `/admin/project/noticeList?projectId=` +
+        projectId +
+        ``
+    );
 
 // 测试方法
 // import * as api from '../../api/index'

src/api/method.js

@@ -1,4 +1,5 @@
 import * as api from './index1'
+
 function formatNumber(n) {
     n = n.toString();
     return n[1] ? n : "0" + n;
@@ -192,31 +193,33 @@ const setCookie = (name, value, perpetual) => {
 
 //先写一个方法
 function getCookie(name) {
+    return document.cookie?.split(";").find(e => e.includes(name)).replace(`${name}=`,'') || ''
     //1.获取cookie字符串
-    var cookies = document.cookie;
-    //通过；来分割字符串
-    var cookie = cookies.split("; ");
-    // console.log('cookie', cookie)
-    //遍历，使键值对匹配上
-    for (var i = 0; i < cookie.length; i++) {
-        var arr = cookie[i].split("token=");
-        // console.log('arr', arr)
-        console.log('name', name)
-        // if (arr[0] == name) {
-        //   console.log('arr[1]', arr[1])
-        //   return arr[1];
-        // }
-        // console.log('arr[1]', arr[1])
-        return arr[1]
-    }
-    return "";
+    // const cookies = document.cookie;
+    // console.log('cookies',cookies)
+    // //通过；来分割字符串
+    // const cookie = cookies.split(";");
+    // // console.log('cookie', cookie)
+    // //遍历，使键值对匹配上
+    // for (var i = 0; i < cookie.length; i++) {
+    //     var arr = cookie[i].split("token=");
+    //     // console.log('arr', arr)
+    //     console.log('name', name)
+    //     // if (arr[0] == name) {
+    //     //   console.log('arr[1]', arr[1])
+    //     //   return arr[1];
+    //     // }
+    //     // console.log('arr[1]', arr[1])
+    //     return arr[1]
+    // }
+    // return "";
 }
 
 
 //滚动加载信息
 const scrollLoad = (e) => {
     // console.log("滚动", e, b);
-    const { target } = e;
+    const {target} = e;
     const scrllHeight = target.scrollHeight - target.scrollTop;
     const clientHeight = target.clientHeight;
     // console.log("scrllHeight", scrllHeight, clientHeight);
@@ -226,6 +229,7 @@ const scrollLoad = (e) => {
         return 2
     }
 };
+
 //添加归属权
 function changeOwnership(classify, selectProjectId, selectPeopleArr) {
     let obj = {

src/api/request.js

@@ -0,0 +1,169 @@
+import {reactive, ref, toRefs, watch} from "vue";
+import axios from 'axios';
+import {getCookie} from "@/api/method";
+
+
+export function useBoeApiPage(_url, params = {}, config = {
+    init: true,
+    result: res => res.result,
+    totalPage: res => res.result.totalPage,
+    total: res => res.result.totalElement
+}) {
+
+    const state = reactive({
+        data: [],
+        loading: false,
+        page: 1,
+        pageSize: 10,
+        totalPage: 0,
+        total: 0
+    })
+
+    function fetch() {
+        console.log('params', params)
+        state.loading = true
+        return request(_url, params).then(r => {
+            state.data = config.result(r)
+            state.totalPage = config.totalPage(r)
+            state.total = config.total(r)
+            state.loading = false
+            state.page = params.page
+        })
+    }
+
+    config.init && fetch()
+    return {
+        ...toRefs(state),
+        fetch,
+    };
+}
+
+export function useBoeApi(_url, params = {}, config = {
+    init: true,
+    result: res => res.result,
+}) {
+
+    const state = reactive({
+        data: [],
+        loading: false,
+    })
+    watch(() => params, () => {
+        fetch()
+    })
+
+    function fetch() {
+        state.loading = true
+        return request(_url, params).then(r => {
+            state.data = config.result(r)
+            state.loading = false
+        })
+    }
+
+    config.init && fetch()
+    return {
+        ...toRefs(state),
+        fetch,
+    };
+}
+
+export function usePage(_url, params = {}, init = true) {
+
+    const state = reactive({
+        data: [],
+        loading: false
+    })
+
+    watch(params, () => {
+        fetch()
+    })
+
+    function fetch() {
+        state.loading = true
+        return request(_url, params).then(r => {
+            console.log('fetch')
+            console.log(r)
+            state.data = r.result
+            state.loading = false
+        })
+    }
+
+    init && fetch()
+    return {
+        ...toRefs(state),
+        fetch,
+    };
+}
+
+export function useRequest(_url, params = {}, init = true) {
+
+    const data = ref({})
+    const loading = ref(false)
+
+    watch(params, () => {
+        fetchData()
+    })
+
+    function fetchData() {
+        loading.value = true
+        request(_url, params).then(r => {
+            data.value = r
+            loading.value = false
+        })
+    }
+
+    init && fetchData()
+    return {
+        data,
+        loading,
+        fetchData,
+    };
+}
+
+export async function request(_url, params) {
+    const s = _url.split(' ')
+    let url = s[0]
+    const method = s[1] || 'get'
+    if (method === 'get') {
+        let paramsArray = [];
+        //拼接参数
+        if (params) {
+            Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
+            if (url.search(/\?/) === -1) {
+                url += '?' + paramsArray.join('&')
+            } else {
+                url += '&' + paramsArray.join('&')
+            }
+        }
+    }
+    const body = method !== 'get' ? params || {} : {}
+    console.log('token', getCookie('token'))
+    return axios({
+        url,
+        method,
+        headers: {
+            token: getCookie('token'),
+            ...method !== 'get' ? {'Content-Type': 'application/json'} : {}
+        },
+        baseURL: '',
+        ...method !== 'get' ? {data: JSON.stringify(body)} : {}
+    }).then(resp => resp.data).then(response => {
+        console.log(response)
+        // if (response.status !== 200 && response.code !== 0) {
+        //     if (response.code === 3 || response.code === 4 || response.code === 100) {
+//                router.push({path: '/login'})
+//                 return
+//             } else {
+//                response.showMsg &&  notification.open({
+//                    message: response.showMsg,
+//                    duration: 2,
+//                });
+//                 return
+//             }
+//         }
+        return response
+    }).catch(e => {
+        console.log(2222)
+        console.log(e)
+        // router.push({path: '/login'})
+    })
+}

src/components/student/Student.vue

@@ -0,0 +1,481 @@
+<template>
+  <a-drawer
+      :visible="visiable"
+      class="drawerStyle ProjCheckship"
+      placement="right"
+      width="45%"
+  >
+    <div class="drawerMain" id="ProjCheckship">
+      <div class="header">
+        <div class="headerTitle">
+          {{ {1: '查看权', 2: '管理权', 3: '添加学员'}[type] || '' }}
+        </div>
+        <img
+            style="width: 29px; height: 29px; cursor: pointer"
+            src="../../assets/images/basicinfo/close.png"
+            @click="closeDrawer"
+        />
+      </div>
+      <div style="width:100%;display: grid;grid-template-columns: 750px auto;">
+        <div class="tabs">
+          <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane :key="1" tab="快速选人">
+              <div :style="{ height: screenHeight - 235 + 'px' }">
+                <div class="tab1">
+                  <a-form-item label="姓名">
+                    <a-input
+                        v-model:value="nameSearch.keyword"
+                        style="width: 270px; height: 40px; border-radius: 8px"
+                        placeholder="请输入姓名"
+                    />
+                    <a-button type="primary" @click="onSearchStu" style="margin-left: 20px;border-radius: 4px">
+                      <template #icon>
+                        <SearchOutlined/>
+                      </template>
+                      搜索
+                    </a-button>
+                    <a-button @click="resetStu" style="margin-left: 20px;border-radius: 4px">重置</a-button>
+                  </a-form-item>
+                </div>
+                <div class="chooseLeft" style="display: grid;grid-template-columns: 250px auto">
+                  <div :style="{ height: screenHeight - 235 + 'px' ,overflowY:'auto'}">
+                    <a-tree
+                        allow-clear
+                        tree-default-expand-all
+                        :tree-data="treeData"
+                        :fieldNames="{
+                          children: 'treeChildList',
+                          key: 'id',
+                          title: 'name',
+                          value: 'name',
+                        }"
+                        @select="stuStuOrgSelect"
+                    >
+                    </a-tree>
+                  </div>
+                  <div class="tableBox tabb">
+                    <a-table
+                        :columns="stuColumns"
+                        :data-source="stuData"
+                        :pagination="stuPagination"
+                        :loading="stuLoading"
+                        row-key="id"
+                        :row-selection="stuRowSelection"
+                    />
+                  </div>
+                </div>
+              </div>
+            </a-tab-pane>
+            <a-tab-pane :key="2" tab="添加组织">
+              <div
+                  :style="{ height: screenHeight - 235 + 'px' }"
+              >
+                <div class="tab2">
+                  <a-form-item label="组织：">
+                    <a-input
+                        v-model:value="searchOrgName.keyword"
+                        style="width: 230px; height: 40px; border-radius: 8px"
+                        placeholder="请输入组织"
+                    />
+                    <a-button type="primary" @click="searchOrg" style="margin-left: 20px;border-radius: 4px">
+                      <template #icon>
+                        <SearchOutlined/>
+                      </template>
+                      搜索
+                    </a-button>
+                    <a-button @click="resetOrg" style="margin-left: 20px;border-radius: 4px">重置</a-button>
+                  </a-form-item>
+                </div>
+                <div class="boeTree">
+                  <a-tree
+                      :tree-data="searchOrgName.keyword ? orgData : treeData"
+                      @select="onOrgSelectChange"
+                      :fieldNames="{
+                          children: 'treeChildList',
+                          key: 'id',
+                          title: 'name',
+                          value: 'name',
+                        }"
+                      row-key="id"
+                      :row-selection="orgRowSelection"
+                      multiple
+                  >
+                  </a-tree>
+<!--                  <div>-->
+<!--                    <a-table-->
+<!--                        :columns="stuColumns"-->
+<!--                        :data-source="stuData"-->
+<!--                        :pagination="stuPagination"-->
+<!--                        :loading="orgLoading"-->
+<!--                        row-key="id"-->
+<!--                        :row-selection="stuRowSelection"-->
+<!--                    />-->
+<!--                  </div>-->
+                </div>
+              </div>
+            </a-tab-pane>
+            <a-tab-pane :key="3" tab="受众关联">
+              <div
+                  :style="{ height: screenHeight - 235 + 'px' }"
+              >
+                <div>
+                  <a-form-item label="受众名称：">
+                    <a-input
+                        v-model:value="audienceName.keyword"
+                        style="width: 260px; height: 40px; border-radius: 8px"
+                        placeholder="请输入受众名称"
+                    />
+                    <a-button type="primary" @click="searchAudi" style="margin-left: 20px;border-radius: 4px">
+                      <template #icon>
+                        <SearchOutlined/>
+                      </template>
+                      搜索
+                    </a-button>
+                    <a-button @click="resetAudienceInfo" style="margin-left: 20px;border-radius: 4px">重置</a-button>
+                  </a-form-item>
+                </div>
+                <div class="tableBox tabb">
+                  <a-table
+                      style="border: 1px solid #f2f6fe"
+                      row-key="id"
+                      :columns="audiColums"
+                      :data-source="audiData"
+                      :loading="audiLoading"
+                      :pagination="auditPagination"
+                      :row-selection="auditRowSelection"
+                  />
+                </div>
+              </div>
+            </a-tab-pane>
+          </a-tabs>
+        </div>
+        <div style="padding:100px 0 0 20px;display: grid;grid-template-rows: auto auto auto;">
+          <div>
+            <div style="margin-top: 20px">快速选人</div>
+            <a-tag :closable="true" color="#409eff" @close="stuDel(i)" v-for="(item,i) in selectsData.studentList"
+                   :key="i" style="margin-top:20px">
+              {{ item.realName }}
+            </a-tag>
+          </div>
+          <div>
+            <div style="margin-top: 20px">组织添加</div>
+            <a-tag :closable="true" color="#409eff" @close="orgDel(i)" v-for="(item,i) in selectsData.deptList" :key="i"
+                   style="margin-top:20px">
+              {{ item.name }}
+            </a-tag>
+          </div>
+          <div>
+            <div style="margin-top: 20px">受众添加</div>
+            <a-tag :closable="true" color="#409eff" @close="AuditDel(i)" v-for="(item,i) in selectsData.groupList"
+                   :key="i" style="margin-top:20px">
+              {{ item.audienceName }}
+            </a-tag>
+          </div>
+        </div>
+      </div>
+      <div class="btnn">
+        <button class="btn1" @click="closeDrawer">取消</button>
+        <button class="btn2" @click="submitAuth">确定</button>
+      </div>
+    </div>
+  </a-drawer>
+</template>
+<script setup>
+import {computed, defineEmits, defineProps, onMounted, ref, watch} from "vue";
+import {useStore} from "vuex";
+import {request, useBoeApi, useBoeApiPage} from "@/api/request";
+import {AUDIENCE_LIST, ORG_CHILD_LIST, ORG_LIST, USER_LIST} from "@/api/ThirdApi";
+import {saveStu} from "@/api/index1";
+
+const store = useStore();
+const emit = defineEmits()
+const props = defineProps({
+  type: Number,
+  visiable: {
+    type: Boolean,
+    default: false
+  },
+})
+
+const activeKey = ref(1)
+const visiableState = ref(false)
+const selectsData = ref({
+  studentList: [],
+  deptList: [],
+  groupList: []
+})
+const nameSearch = ref({
+  keyword: '',
+  departId: null,
+  page: 1,
+  pageSize: 10
+})
+const audienceName = ref({
+  keyword: '',
+  page: 1,
+  pageSize: 10
+})
+const searchOrgName = ref({
+  keyword: '',
+  page: 1,
+  pageSize: 10
+})
+
+const {
+  data: stuData,
+  fetch: searchStu,
+  page: stuPageNo,
+  pageSize: stuPageSize,
+  loading: stuLoading,
+  total: stuTotal
+} = useBoeApiPage(USER_LIST, nameSearch.value, {
+  init: true,
+  result: res => res.result.userInfoList,
+  totalPage: res => res.result.totalPage,
+  total: res => res.result.totalElement
+})
+
+const {
+  data: orgData,
+  fetch: searchOrg,
+  loading: orgLoading
+} = useBoeApi(ORG_LIST, searchOrgName.value)
+
+const {
+  data: audiData,
+  fetch: searchAudi,
+  page: audiPageNo,
+  pageSize: audiPageSize,
+  loading: audiLoading,
+  total: audiTotal
+} = useBoeApiPage(AUDIENCE_LIST, audienceName.value, {
+  init: true,
+  result: res => res.result.audienceList,
+  totalPage: res => res.result.totalPage,
+  total: res => res.result.totalElement
+})
+
+const stuColumns = ref([
+  {
+    title: "姓名",
+    dataIndex: "realName",
+    key: "realName",
+    width: 80,
+    align: "center",
+    className: "h",
+    ellipsis: true,
+  },
+  {
+    title: "工号",
+    dataIndex: "userNo",
+    key: "userNo",
+    width: 80,
+    align: "center",
+    className: "h",
+    ellipsis: true,
+  },
+  {
+    title: "归属组织",
+    dataIndex: "orgName",
+    key: "orgName",
+    width: 80,
+    align: "center",
+    className: "h",
+    ellipsis: true,
+  },
+  {
+    title: "部门",
+    dataIndex: "departName",
+    key: "departName",
+    width: 80,
+    align: "center",
+    className: "h",
+    ellipsis: true,
+  },
+])
+const audiColums = ref([{
+  title: "id",
+  dataIndex: "id",
+  key: "id",
+  width: 35,
+  align: "center",
+  className: "h",
+},
+  {
+    title: "受众名称",
+    dataIndex: "audienceName",
+    key: "audienceName",
+    width: 30,
+    align: "left",
+    className: "h",
+    ellipsis: true,
+  },
+  {
+    title: "人数",
+    dataIndex: "totalMember",
+    key: "totalMember",
+    width: 30,
+    align: "center",
+    className: "h",
+  },
+  {
+    title: "类型",
+    dataIndex: "audienceType",
+    key: "audienceType",
+    width: 40,
+    align: "center",
+    className: "h",
+  },
+])
+const stuSelectKeys = ref([])
+const orgSelectKeys = ref([])
+const auditSelectKeys = ref([])
+const screenHeight = ref(document.body.clientHeight)
+const stuRowSelection = computed(() => ({
+  columnWidth: 20,
+  selectedRowKeys: stuSelectKeys.value,
+  onChange: onStuSelectChange,
+  preserveSelectedRowKeys: true,
+}))
+const orgRowSelection = computed(() => ({
+  columnWidth: 20,
+  selectedRowKeys: orgSelectKeys.value,
+  onChange: onOrgSelectChange,
+  preserveSelectedRowKeys: true,
+}))
+
+const stuPagination = computed(() => ({
+  total: stuTotal.value,
+  showSizeChanger: false,
+  current: stuPageNo.value,
+  pageSize: stuPageSize.value,
+  onChange: changePagination
+}))
+
+const auditPagination = computed(() => ({
+  total: audiTotal.value,
+  showSizeChanger: false,
+  current: audiPageNo.value,
+  pageSize: audiPageSize.value,
+  onChange: auditChangePagination
+}))
+
+const auditRowSelection = computed(() => ({
+  columnWidth: 20,
+  selectedRowKeys: auditSelectKeys.value,
+  onChange: onAuditSelectChange,
+  preserveSelectedRowKeys: true,
+}))
+
+onMounted(() => {
+});
+
+const closeDrawer = () => {
+
+};
+//获取组织树
+const treeData = computed(() => {
+  return store.state.orgtreeList ? store.state.orgtreeList : [];
+});
+
+function onSearchStu() {
+  nameSearch.value.page = 1
+  searchStu()
+}
+
+function stuStuOrgSelect(e) {
+  nameSearch.value.departId = e.join('')
+  searchStu()
+}
+
+function stuDel(i) {
+  stuSelectKeys.value = stuSelectKeys.value.filter(e => e !== selectsData.value.studentList[i].id)
+  selectsData.value.studentList.splice(i, 1)
+}
+
+function AuditDel(i) {
+  auditSelectKeys.value = auditSelectKeys.value.filter(e => e !== selectsData.value.groupList[i].id)
+  selectsData.value.groupList.splice(i, 1)
+}
+
+function orgSelect(key, obj) {
+  console.log(obj)
+  request(ORG_CHILD_LIST, {orgId: null}).then(res => {
+    console.log(res.result)
+  })
+}
+
+function onStuSelectChange(e, l) {
+  stuSelectKeys.value = e
+  selectsData.value.studentList = l
+}
+
+function onOrgSelectChange(e, l) {
+  orgRowSelection.value = e
+  selectsData.value.deptList = l.selectedNodes
+}
+
+function onAuditSelectChange(e, l) {
+  auditSelectKeys.value = e
+  selectsData.value.groupList = l
+}
+
+const stuDepartmentSelect = (e) => {
+  nameSearch.value.orgId = e.join('')
+  searchStu()
+};
+
+//分页获取学员
+const changePagination = (page) => {
+  nameSearch.value.page = page;
+  searchStu()
+};
+
+const auditChangePagination = (page) => {
+  console.log(1111111111)
+  console.log(page)
+  audienceName.value.page = page;
+  searchAudi()
+};
+
+//重置
+const resetStu = () => {
+  deleteDepSelect();
+  nameSearch.value = {keyword: '', page: 1, pageSize: 10}
+};
+//清空选择部门信息
+const deleteDepSelect = () => {
+  stuSelectKeys.value = []
+};
+
+//重置组织
+const resetOrg = () => {
+  searchOrgName.value = {keyword: '', page: 1, pageSize: 10}
+};
+
+//重置受众
+const resetAudienceInfo = () => {
+  audienceName.value = {keyword: '', page: 1, pageSize: 10}
+};
+
+//全部清除
+const deleteAll = () => {
+  selectsData.value = {
+    studentList: [],
+    deptList: [],
+    groupList: []
+  }
+};
+//确定添加授权
+const submitAuth = () => {
+  emit('update:visiable', false)
+  saveStu(selectsData.value)
+};
+
+
+</script>
+<style>
+.ant-btn-primary {
+  background-color: #409eff !important;
+}
+</style>