Merge branch 'zcwy-teacher-manage' of https://codeup.aliyun.com/648097ddb583fece2f059e59/vue/fe-manage into zcwy-teacher-manage

src/api/Lecturer.js

@@ -49,3 +49,7 @@ export const insertTeacherOutSide = (obj) => http.post('/admin/teacher/insertTea
 export const updateOutTeacher = (obj) => http.post('/admin/teacher/updateOutTeacher', obj)
 
 export const fileUp = (obj) => http.post('/file/upload', obj)
+//组织树查询讲师
+export const getTeacherByDepartId = (obj) => http.post(`/admin/teacher/getTeacherByDepartId?organizationId=${obj.organizationId}`)
+//根据姓名工号查询讲师
+export const getTeacherByNameOrUserNo = (obj) => http.post(`/admin/teacher/getTeacherByNameOrUserNo?nameOrUserNo=${obj.nameOrUserNo}`)

src/components/project/AddOrgContent.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="twoDimensionalCode">
+    <!--选择教师专长页面 -->
+    <a-modal
+      :visible="showContent"
+      :footer="null"
+      :closable="closableQR"
+      wrapClassName="codeModal"
+      style="margin-top: 400px"
+      :zIndex="9999"
+      @cancel="qr_exit"
+    >
+      <div class="QR">
+        <div class="qr_header"></div>
+        <div class="qr_main">
+          <div class="qrm_header">
+            <span style="title">{{Addtitle}}</span>
+            <div class="close_exit" @click="closeCodeModal"></div>
+          </div>
+          <div class="line"></div>
+          <div class="content">
+            <div class="left">
+              <a-tree checkable :tree-data="treeData" :loading="orgLoading"
+              :load-data="onLoadData" v-model:expandedKeys="expandedKeys"
+                v-model:selectedKeys="selectedKeys"
+                v-model:checkedKeys="checkedKeys" :fieldNames="{
+                children: 'treeChildList',
+                key: 'id',
+                title: 'name',
+                value: 'name',
+              }" @check="onCheck">
+            </a-tree>
+            </div>
+            <div class="right">
+              <div class="headers">
+                <div>已选择标签<span style="color: #4ea6ff;margin-left:5px;">{{treeAddData?.length}}</span>个</div>
+                <div class="header_right" @click="clearTree">清空</div>
+              </div>
+              <div class="tags">
+                <div
+                  class="tag"
+                  v-for="(item, index) in treeAddData"
+                  :key="index"
+                >
+                  <div>{{ item?.name }}</div>
+                  <div @click="deleteTree(item)" class="tag_delete">+</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="footer">
+          <a-button style="margin-right: 20px;" @click="closeCodeModal">取消</a-button>
+          <a-button type="primary" @click="queryCreate">确定</a-button>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
+<script setup>
+import { reactive, toRefs, watch,ref,computed } from "vue";
+import { message } from "ant-design-vue";
+import { useStore } from "vuex";
+import { ORG_CHILD_LIST, ORG_LIST} from "@/api/apis";
+import { defineProps,defineEmits } from "vue";
+import { request, useRequest} from "@/api/request";
+  const props =  defineProps({
+    showContent: {
+      type: Boolean,
+      default: false,
+    },
+    Addtitle:{
+      type:String,
+      default: true,
+    },
+    AddContentList:{
+      type:Array,
+      default: ()=>[],
+    }
+  })
+  const emit = defineEmits({})
+  const treeAddData = ref([])
+  const { data: treeData, loading: orgLoading } = useRequest(
+    ORG_LIST,
+    { keyword: "" },
+  );
+  function onLoadData(treeNode) {
+    return request(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
+      (r) => {
+        // r.data.map(item=>item.disabled = true)
+        treeNode.dataRef.treeChildList = r.data;
+        treeData.value = [...treeData.value];
+      }
+    );
+  }
+  watch(()=>props.showContent, (val) => {
+    if(!val){
+      expandedKeys.value = []
+      selectedKeys.value = []
+      checkedKeys.value = []
+    }
+  });
+  const onCheck = (checkedKeys, {checked: bool, checkedNodes, node, event}) => {
+    treeAddData.value = checkedNodes.filter(node => !node.treeChildList || node.treeChildList.length === 0);
+  }
+  const clearTree = () => {
+    treeAddData.value = [];
+    checkedKeys.value = [];
+  }
+  const deleteTree = (item) => {
+    treeAddData.value = treeAddData.value.filter(node => node.id !== item.id);
+    checkedKeys.value = treeAddData.value.map(item=>item.id)
+  }
+  const closeCodeModal = () => {
+    emit("update:showContent", false);
+    clearTree()
+  };
+  const queryCreate = () => {
+    emit("AddContentList", treeAddData.value);
+    closeCodeModal()
+  }
+  const expandedKeys = ref([]);
+  const selectedKeys = ref([]);
+  const checkedKeys = ref([]);
+</script>
+<style scoped lang="scss">
+.twoDimensionalCode {
+}
+.codeModal {
+  .ant-modal {
+    .ant-modal-content {
+      width: 479px !important;
+      .ant-modal-body {
+        .QR {
+          z-index: 9999;
+          width: 700px;
+          background: #ffffff;
+          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
+          position: absolute;
+          left: 50%;
+          top: 10%;
+          transform: translate(-50%, -50%);
+          .qr_header {
+            position: absolute;
+            width: calc(100%);
+            height: 40px;
+            // background: linear-gradient(
+            //   rgba(78, 166, 255, 0.2) 0%,
+            //   rgba(78, 166, 255, 0) 100%
+            // );
+          }
+          .qr_main {
+            width: 100%;
+            position: relative;
+            .qrm_header {
+              display: flex;
+              align-items: center;
+              padding-top: 20px;
+              padding-left: 26px;
+              font-size: 16px;
+              .title {
+                font-size: 16px;
+                font-weight: 600;
+                color: #333333;
+                line-height: 22px;
+              }
+              .close_exit {
+                position: absolute;
+                right: 42px;
+                cursor: pointer;
+                width: 20px;
+                height: 20px;
+                background-image: url(@/assets/images/coursewareManage/close.png);
+                background-size: 100% 100%;
+              }
+            }
+            .line{
+              height: 1px;
+              margin-top: 16px;
+              background-color: #666666;
+            }
+            .content{
+              display: flex;
+              min-height: 500px;
+              .left{
+                width: 50%;
+                border-right: 1px solid #666666;
+                padding: 30px 15px;
+                max-height: 600px;
+                overflow-y: auto;
+              }
+              .right{
+                width: 50%;
+                // max-height: 600px;
+                // overflow-y: auto;
+                .headers{
+                  display: flex;
+                  justify-content: space-between;
+                  margin: 30px 15px;
+                  .header_right{
+                    color: #666666;
+                    cursor: pointer;
+                  }
+                }
+                .tags{
+                  max-height: 500px;
+                  overflow-y: auto;
+                  padding: 0 15px;
+                  .tag{
+                    height: 44px;
+                    padding: 0 15px;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    .tag_delete{
+                      display: none;
+                      color: #4ea6ff;
+                      transform: rotate(45deg);
+                      font-size: 26px;
+                      cursor: pointer;
+                    }
+                  }
+                  .tag:hover .tag_delete {
+                    display: block;
+                  }
+                  .tag:hover {
+                    background-color: aliceblue;
+                  }
+                }
+              }
+            }
+          }
+          .footer{
+            height: 60px;
+            text-align: right;
+            padding: 13px 30px;
+            border-top: 1px solid #666666;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/components/project/SearchTeacher.vue

@@ -0,0 +1,246 @@
+<template>
+  <div>
+    <a-popover v-model:visible="visible"  placement="bottom" trigger="click">
+      <template #content>
+        <div class="pover">
+          <div class="search">
+            <a-select
+              v-model:value="selectName"
+              style="width: 100%"
+              placeholder="请查询姓名或工号"
+              :options="isOpen?options:selectOptions"
+              :filter-option="false"
+              allowClear
+              showSearch
+              :open="isOpen"
+              :defaultOpen="false"
+              @search="searchMembers"
+              @change="handleChange"
+              @blur="blur"
+            >
+              <template #suffixIcon><ZoomInOutlined twoToneColor="#eb2f96" /></template>
+              <template v-if="loading" #notFoundContent>
+                <a-spin size="small"/>
+              </template>
+            </a-select>
+          </div>
+          <div class="tree">
+            <a-tree allow-clear tree-default-expand-all :tree-data="treeData" :loading="orgLoading"
+              :load-data="onLoadData" v-model:selectedKeys="stuTreeSelectKeys"
+              v-model:expandedKeys="stuTreeExpandedKeys" :fieldNames="{
+                children: 'treeChildList',
+                key: 'id',
+                title: 'name',
+                value: 'name',
+              }" @select="stuStuOrgSelect" style="max-height: 260px;overflow-y: auto;width: 250px;">
+            </a-tree>
+          </div>
+          <div class="btn">
+            <div class="btn0 btn1" @click="notChange">取消</div>
+            <div class="btn0 btn2" @click="changeOut">确定</div>
+          </div>
+        </div>
+      </template>
+      <a-select
+        v-model:value="selectData"
+        style="width: 100%"
+        placeholder="请选择讲师"
+        :options="selectOptions"
+        :filter-option="false"
+        :open="false"
+        :defaultOpen="false"
+      >
+        <template v-if="loading" #notFoundContent>
+          <a-spin size="small"/>
+        </template>
+      </a-select>
+    </a-popover>
+  </div>
+</template>
+
+<script setup>
+import { ref,defineProps,defineEmits,watch,onMounted } from 'vue';
+import { request, useRequest} from "@/api/request";
+import { message } from "ant-design-vue"
+import { ORG_CHILD_LIST, ORG_LIST,USER_LIST_PAGE} from "@/api/apis";
+import { getTeacherByDepartId,getTeacherByNameOrUserNo } from "@/api/Lecturer";
+import { ZoomInOutlined } from '@ant-design/icons-vue';
+const props = defineProps({
+  value:{
+    type: String,
+    default: '',
+  },
+  lable:{
+    type: String,
+    default: '',
+  },
+})
+const emit = defineEmits(['update:value','update:lable'])
+const visible = ref(false);
+watch(()=>props.value,(val)=>{
+  if(val){
+    selectData.value = val
+  }
+})
+const teacherName = ref('')
+const selectData = ref(null);
+const selectName = ref(null)
+const options = ref([]);
+const selectOptions = ref([])
+const isOpen = ref(false);
+const loading = ref(false);
+function blur() {
+  isOpen.value = false
+}
+const handleChange = (e,l) => {
+  console.log(e,l,'handlechange');
+  isOpen.value = false
+  // emit('update:value',e)
+  teacherName.value = e
+};
+function debounce(func, wait) {
+  let timeout;
+  return function(...args) {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(this, args), wait);
+  };
+}
+const searchMembers = (keyword) => {
+  isOpen.value = true
+  options.value = []
+  loading.value = true
+  if(keyword == '' || keyword == null){
+    isOpen.value = false
+    loading.value = false
+    options.value = []
+  }else{
+    debounceObject(keyword)
+  }
+};
+const searchMember = (keyword) => {
+  console.log(keyword,'keyword')
+  getTeacherByNameOrUserNo({nameOrUserNo:keyword}).then((res) => {
+    console.log(res,'res')
+    if(res.data.code == 200){
+      loading.value = false
+      options.value = res.data.data.map((item) => {
+        return {
+          value: item.realName,
+          label: item.realName+'('+item.userNo+')'+item.orgName,
+          key: item.id,
+        }
+      })
+    }else{
+      loading.value = false
+    }
+  }).catch(()=>{
+    loading.value = false
+  })
+};
+const debounceObject = debounce(searchMember, 1500);
+const filterOption = (input, option) => {
+  console.log(input,option,'xixixixi')
+};
+
+const stuTreeSelectKeys = ref([]);
+const stuTreeExpandedKeys = ref([]);
+const teacherById = ref(null)
+const { data: treeData, loading: orgLoading } = useRequest(
+  ORG_LIST,
+  { keyword: "" },
+);
+function onLoadData(treeNode) {
+  console.log(treeNode, "treeNode")
+  teacherById.value = treeNode.id
+  const promises = [];
+  const childDatas = []
+  promises.push(
+    getTeacherByDepartId({organizationId:teacherById.value}).then((res) => {
+      if(res.data.code == 200){
+        res.data.data.map(item=>{
+          return (
+            item.isLeaf = true
+          )
+        })
+        childDatas.unshift(...res.data.data)
+      }
+    }).catch((err)=>{
+      console.log(err,'err')
+    })
+  );
+  promises.push(
+    request(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then((r) => {
+      // treeNode.dataRef.treeChildList = r.data;
+      childDatas.push(...r.data)
+      treeData.value = [...treeData.value];
+    })
+  );
+
+  return Promise.all(promises).then(() => {
+    treeNode.dataRef.treeChildList = childDatas;
+      treeData.value = [...treeData.value];
+  });
+}
+function stuStuOrgSelect(e, {selected: bool, selectedNodes, node, event}) {
+  console.log(selectedNodes)
+  teacherName.value = ''
+  if(selectedNodes[0].isLeaf){
+    teacherName.value = selectedNodes[0].name
+    // emit('update:value',selectedNodes[0].realName)
+  }
+}
+watch(()=>visible.value,(val)=>{
+  if(val){
+    stuTreeSelectKeys.value = []
+    stuTreeExpandedKeys.value = []
+    teacherName.value = ''
+    selectName.value = null
+  }
+})
+const notChange = () => {
+  visible.value = false
+  teacherName.value = ''
+}
+const changeOut = () => {
+  if(!teacherName.value){
+    message.error('请选择讲师')
+    return
+  }
+  selectData.value = teacherName.value
+  emit('update:value',teacherName.value)
+  notChange()
+}
+</script>
+
+<style lang="scss" scoped>
+.pover{
+  .search{
+    margin-top: 10px;
+  }
+  .tree{
+    margin-top: 5px;
+    border: 1px solid rgba(215, 215, 215, 1);
+  }
+  .btn{
+    margin-top: 10px;
+    display: flex;
+    justify-content: flex-end;
+    .btn0{
+      width: 70px;
+      height: 25px;
+      color: #FFFFFF;
+      text-align: center;
+      line-height: 25px;
+      cursor: pointer;
+    }
+    .btn1{
+      margin-right: 10px;
+      background-color: rgba(170, 170, 170, 1);
+    }
+    .btn2{
+      background-color: rgba(50, 107, 250, 1);
+    }
+  }
+}
+
+</style>

src/views/lecturer/InsideLecturer.vue

@@ -139,9 +139,15 @@
         <a-row :gutter="16">
           <a-col :span="12">
             <a-form-item label="讲师名称" name="name">
-
-              <ProjectManager v-model:value="formParam.userNo" v-model:name="formParam.name" placeholder="请输入工号/讲师姓名进行检索"
-                @onChange="managerChange" mode="multiple"></ProjectManager>
+        
+          <!-- <ProjectManager v-model:value="formParam.userNo" 
+        v-model:name="formParam.name"
+        placeholder="请输入工号/讲师姓名进行检索"
+                            @onChange="managerChange" mode="multiple"></ProjectManager> -->
+              <SearchTeacher v-model:value="formParam.name"></SearchTeacher>       
+              <!-- <a-tree-select v-model:value="formParam.name" 
+              show-search    allow-clear tree-data-simple-mode  class="draitem"
+                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="请输入讲师名称" /> -->
             </a-form-item>
           </a-col>
           <a-col :span="12">
@@ -520,6 +526,7 @@ import {
 } from '@ant-design/icons-vue';
 import Editor from "@/components/project/Editor";
 import ProjectManager from "@/components/project/ProjectManagerNew";
+import SearchTeacher from "@/components/project/SearchTeacher";
 import { message } from "ant-design-vue";
 import { useRouter } from "vue-router";
 import { getTeacherSystemList, getTeacherList, getPayRollPlace, getLevel, insertTeacher, deleteInTeacher, updateInTeacher, getTeacherById, updateTeacherState } from "../../api/Lecturer";
@@ -531,6 +538,7 @@ export default {
   name: "InsideLecturer",
   components: {
     ProjectManager,
+    SearchTeacher,
     AddContent,
     Editor,
     // FJUpload,