培训发生组织担当修改

src/components/project/AddApprover.vue

@@ -0,0 +1,521 @@
+<template>
+  <div class="CommonStudent">
+    <a-drawer :visible="visiable" class="drawerStyle ProjCheckship CommonStudent" placement="right" width="40%">
+      <div class="drawerMain" id="ProjCheckship" style="">
+        <div class="header">
+          <div class="headerTitle">
+           添加讲师
+          </div>
+          <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
+               @click="closeDrawer"/>
+        </div>
+        <div style="display: flex; overflow-x: auto; overflow-y: auto">
+          <div class="tabs" style="min-width: 800px">
+            <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 type="primary" @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 - 180 + 'px',
+                      overflowY: 'auto',
+                    }" style="border: 1px solid #f0f0f0">
+                      <div class="tree" style="margin: 10px 4px 220px 10px">
+                        <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">
+                        </a-tree>
+                      </div>
+                    </div>
+                    <div class="tableBox tabb" style="
+                                    margin: 0px 4px 120px 10px;
+                                    border: 1px solid #f0f0f0;
+                                  ">
+                      <BaseTable ref="stuTableRef" :columns="stuColumns" :url="USER_LIST_PAGE" pageKey="pageNo"
+                                 v-model:params="nameSearch" :request="useNewRowsPageNoInit"
+                                 v-model:selectedRows="stuSelectRows" v-model:selectedRowKeys="stuSelectRowKeys" type="checkbox"></BaseTable>
+                    </div>
+                  </div>
+                </div>
+              </a-tab-pane>
+            </a-tabs>
+          </div>
+          <div class="right1" style="min-width: 200px">
+            <div class="onerow">
+              <div class="onleft">
+                <div class="already">已选</div>
+              </div>
+            </div>
+            <div :style="{ 'max-height': screenHeight - 235 + 'px' }" style="overflow-y: auto">
+              <div class="selecteds">
+                <div class="person">快速选人</div>
+                <div v-for="(item, i) in stuSelectRows" :key="i">
+                  <div v-if="i < 11">
+                    <div class="chose">
+                      {{ item.realName }}
+                      <div class="ch" @click="stuTableRef.remove(i)"></div>
+                    </div>
+                  </div>
+                  <div v-else>
+                    <div v-if="person">
+                      <div class="chose">
+                        {{ item.realName }}
+                        <div class="ch" @click="stuTableRef.remove(i)"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="!person && stuSelectRows.length > 10" class="ifsw">
+                  <div @click="person = !person" class="“sw”">查看更多></div>
+                </div>
+                <div v-if="person && stuSelectRows.length > 10" class="ifsw">
+                  <div @click="person = !person" class="sw">收起&lt;</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div style="display: flex;justify-content: center;" class="btnn" >
+          <button class="btn2" style="width: 100px; height:38px;background:
+           #4ea6ff;border: none;margin-right: 15px; border-radius: 8px;color:aliceblue" @click="closeDrawer">取消</button>
+          <button class="btn2" style="width: 100px;
+           height:38px;background: #4ea6ff;border: none; border-radius: 8px ;color:aliceblue" @click="submitAuth">确定</button>
+        </div>
+      </div>
+    </a-drawer>
+    <a-button @click="openDrawer" type="link">
+      <slot></slot>
+    </a-button>
+  </div>
+</template>
+<script setup>
+import {message} from "ant-design-vue";
+import {computed, defineEmits, defineProps, ref, watch,onMounted} from "vue";
+import {useNewRowsPageNoInit, request, useRequest, useTotalPage} from "@/api/request";
+import {
+  saveStu,
+} from "@/api/index1";
+import dialog from "@/utils/dialog";
+import BaseTable from "@/components/common/BaseTable";
+import {AUDIENCE_LIST, ORG_CHILD_LIST, ORG_LIST, STUDENT_LIST, USER_LIST_PAGE} from "@/api/apis";
+import {addTutor,getOnlineLearningList}from '@/api/examineApi.js'
+import {boeRequest} from "@/api/request";
+const emit = defineEmits({});
+const props = defineProps({
+  arrayList: {
+    type: Array,
+    default: () => []
+  },
+  type: {
+    type: Number,
+    default: 0
+  },
+
+});
+onMounted(()=>{
+  onlineLearningList()
+})
+const courseList = ref([])
+const onlineLearningList = () =>{
+  boeRequest('/activityApi/examine/getOnlineLearningList post').then(res=>{
+    courseList.value = res.data.filter(item=>item.status == 0).map(item => item.courseId)
+  })
+}
+const stuSelectRows = ref([]);
+
+const stuSelectRowKeys = ref([]);
+const stuTableRef = ref();
+const teaunm = ref([])
+watch(stuSelectRows,(val)=>{
+  if(val.length == 0){
+    teaunm.value = []
+    return
+  }
+  console.log(stuSelectRowKeys.value,'xixixixi')
+  teaunm.value = val.map((res,index)=>{
+    return {
+      userName:res.realName,
+      userNo:res.userNo,
+      type: props.type,
+      userId: res.id,
+    }
+  })
+  console.log(teaunm.value);
+},{deep:true})
+const person = ref(false);
+const visiable = ref(false);
+const activeKey = ref(1);
+
+const nameSearch = ref({
+  keyword: "",
+  departId: '',
+});
+const stuTreeSelectKeys = ref([]);
+const stuTreeExpandedKeys = ref([]);
+const audienceName = ref({
+  keyword: "",
+});
+
+const { data: treeData, loading: orgLoading } = useRequest(
+  ORG_LIST,
+  { keyword: "" },
+);
+
+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 auditTableRef = ref();
+const screenHeight = ref(document.body.clientHeight);
+
+const closeDrawer = () => {
+  deleteDepSelect();
+  visiable.value = false;
+  nameSearch.value.keyword = "";
+};
+
+
+function onLoadData(treeNode) {
+  return request(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
+    (r) => {
+      treeNode.dataRef.treeChildList = r.data;
+      treeData.value = [...treeData.value];
+    }
+  );
+}
+
+const openDrawer = () => {
+  visiable.value = true;
+};
+
+function onSearchStu() {
+  stuTableRef.value.reset(nameSearch.value);
+}
+
+function stuStuOrgSelect(e) {
+  nameSearch.value.departId = e.join("");
+  stuTableRef.value.fetch();
+}
+
+const resetStu = () => {
+  nameSearch.value.keyword = "";
+  stuTableRef.value.reset({ keyword: "", departId: '' });
+};
+//清空选择部门信息
+const deleteDepSelect = () => {
+  stuSelectRows.value = [];
+};
+
+//确定添加授权
+const submitAuth = () => {
+  emit('update:arrayList',teaunm.value)
+  emit('valueChange',teaunm.value)
+  visiable.value = false;
+  emit("finash", false);
+};
+
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+
+
+watch(visiable, () => {
+  audienceName.value.keyword = "";
+  nameSearch.value.departId = '';
+  stuTreeExpandedKeys.value = [];
+  stuTreeSelectKeys.value = [];
+  nameSearch.value.keyword = "";
+  audienceName.value.keyword = "";
+
+  if (!visiable.value) {
+    auditTableRef.value && auditTableRef.value.clear();
+    auditTableRef.value && auditTableRef.value.reset({ keyword: "" });
+    stuTableRef.value && stuTableRef.value.clear();
+    stuTableRef.value && stuTableRef.value.reset({ keyword: "", departId: '' });
+  }
+});
+</script>
+<style lang="scss">
+.CommonStudent > .ant-drawer-content-wrapper {
+  min-width: 1200px !important;
+  width: 1200px !important;
+}
+
+.CommonStudent {
+  .ant-btn-primary {
+    background-color: #4ea6ff !important;
+  }
+
+  .cus-select {
+    height: 40px;
+    border-radius: 8px;
+  }
+
+  .tableBox .ant-table-row .ant-table-cell {
+    height: 48px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #4f5156;
+    line-height: 29px;
+    padding: 0px;
+  }
+
+  .tableBox .ant-table-thead tr th {
+    font-size: 14px;
+  }
+
+  .ant-tabs-tabpane {
+    height: 100%;
+  }
+
+  .ant-tabs {
+    overflow: visible;
+  }
+
+  .right1 {
+    border-left: 1px solid #f2f6fe;
+    margin-left: 20px;
+
+    .onerow {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-right: 40px;
+      flex-wrap: wrap;
+
+      width: 100%;
+
+      .onleft {
+        display: flex;
+        text-align: center;
+
+        .already {
+          color: rgba(51, 51, 51, 1);
+          font-size: 16px;
+          font-weight: 500;
+          margin-left: 32px;
+          white-space: nowrap;
+          // margin-bottom: 20px;
+        }
+
+        .count {
+          color: #4ea6ff;
+          font-size: 16px;
+          margin: 0 6px;
+        }
+
+        .peo {
+          color: rgba(51, 51, 51, 1);
+          font-size: 16px;
+          font-weight: 500;
+        }
+      }
+
+      .clbox {
+        margin-right: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        width: 104px;
+        height: 32px;
+        border-radius: 4px;
+        background: #4ea6ff;
+
+        .colose {
+          width: 16px;
+          height: 16px;
+          // border-radius: 8px;
+          // background: #ffffff;
+          // position: relative;
+          background-image: url(../../assets/images/basicinfo/ch.png);
+          background-size: 100%;
+          margin-right: 4px;
+        }
+
+        .allclear {
+          color: rgba(255, 255, 255, 1);
+          font-size: 14px;
+        }
+      }
+    }
+
+    .selecteds {
+      display: flex;
+      flex-wrap: wrap;
+      margin-left: 32px;
+
+      .person {
+        width: 100%;
+        margin-top: 20px;
+        border-top: 1px solid #f2f6fe;
+      }
+
+      .chose {
+        width: 64px;
+        height: 24px;
+        margin-top: 25px;
+        margin-right: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 2px;
+        border: 1px solid rgba(56, 139, 225, 1);
+        color: rgba(56, 139, 225, 1);
+        font-size: 12px;
+        position: relative;
+
+        .ch {
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          background-image: url(../../assets/images/basicinfo/ch.png);
+          right: -8px;
+          top: -8px;
+        }
+      }
+
+      .ifsw {
+        display: flex;
+        align-items: end;
+        justify-content: center;
+        color: #4ea6ff;
+      }
+
+      .sw {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: justify;
+        color: #4ea6ff;
+        margin-top: 23px;
+        margin-left: 10px;
+      }
+
+      .dept {
+        width: 100%;
+        margin-top: 30px;
+        border-top: 1px solid #f2f6fe;
+      }
+
+      .chose1 {
+        //width: 90px;
+        height: 24px;
+        margin-top: 25px;
+        margin-right: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 2px;
+        border: 1px solid rgba(56, 139, 225, 1);
+        color: rgba(56, 139, 225, 1);
+        font-size: 12px;
+        position: relative;
+
+        .span {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .ch1 {
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          background-image: url(../../assets/images/basicinfo/ch.png);
+          right: -8px;
+          top: -8px;
+        }
+      }
+
+      .group {
+        width: 100%;
+        margin-top: 30px;
+        border-top: 1px solid #f2f6fe;
+      }
+
+      .chose2 {
+        //width: 120px;
+        height: 24px;
+        margin-top: 25px;
+        margin-right: 25px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 2px;
+        border: 1px solid rgba(56, 139, 225, 1);
+        color: rgba(56, 139, 225, 1);
+        font-size: 12px;
+        position: relative;
+
+        .span {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        .ch2 {
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          background-image: url(../../assets/images/basicinfo/ch.png);
+          right: -8px;
+          top: -8px;
+        }
+      }
+    }
+  }
+}
+</style>