From 0eae5e8bacca6885169fecee93625868151a3da8 Mon Sep 17 00:00:00 2001
From: NiSen <laonisen@icloud.com>
Date: Wed, 21 Jun 2023 15:09:12 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=88=E4=BE=8B=E6=8E=A8=E8=8D=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/case.js                               |  12 +-
 src/components/CaseManage/CommonRecommend.vue | 975 ++++++++++++++++++
 src/components/drawers/InitiateRecommend.vue  | 150 +--
 src/views/case/CaseRecommended.vue            |   2 +-
 4 files changed, 1070 insertions(+), 69 deletions(-)
 create mode 100644 src/components/CaseManage/CommonRecommend.vue

diff --git a/src/api/case.js b/src/api/case.js
index 8c28874b..a201cc90 100644
--- a/src/api/case.js
+++ b/src/api/case.js
@@ -1,12 +1,8 @@
 import http from "./configSys";
 
 // 案例列表
-const RECOMMEND_PAGE = "/systemapi/xboe/m/boe/cases/recommend/page post";
-
+export const RECOMMEND_PAGE = "/systemapi/xboe/m/boe/cases/recommend/page post";
 //下载失败数据
-const downloadErrorData = (params = {}) => http.post("/xboe/m/boe/cases/recommend/launch", params);
-
-export {
-    RECOMMEND_PAGE,
-    downloadErrorData
-}
\ No newline at end of file
+export const downloadErrorData = (params = {}) => http.post("/xboe/m/boe/cases/recommend/download", params);
+//推送消息
+export const recommendLaunch = (params = {}) => http.post("/xboe/m/boe/cases/recommend/launch", params);
diff --git a/src/components/CaseManage/CommonRecommend.vue b/src/components/CaseManage/CommonRecommend.vue
new file mode 100644
index 00000000..204c7740
--- /dev/null
+++ b/src/components/CaseManage/CommonRecommend.vue
@@ -0,0 +1,975 @@
+<!-- eslint-disable vue/no-parsing-error -->
+<!-- eslint-disable vue/require-v-for-key -->
+<template>
+  <div class="CommonStudent">
+    <a-drawer :visible="visiable" class="drawerStyle ProjCheckship CommonStudent" placement="right" width="80%">
+      <div class="drawerMain" id="ProjCheckship" style="">
+        <div class="header"
+          style="display: flex;justify-content: space-between;align-items: center;height: 55px;border-bottom: 1px solid #f0f0f0;margin-bottom: 20px;">
+          <div class="headerTitle">
+            {{ { 1: "添加学员", 2: "添加学员", 3: "添加学员" }[type] || title }}
+          </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 v-if="infoType" :key="4" tab="项目内学员">
+                <div :style="{ height: screenHeight - 235 + 'px' }">
+                  <div>
+                    <a-form-item label="姓名：">
+                      <a-input v-model:value="projectParams.studentName"
+                        style="width: 260px; height: 40px; border-radius: 8px" placeholder="请输入姓名" />
+                      <a-button type="primary" @click="getProjectStu" style="margin-left: 20px; border-radius: 4px">
+                        <template #icon>
+                          <SearchOutlined />
+                        </template>
+                        搜索
+                      </a-button>
+                      <a-button type="primary" @click="resetProjectStu" style="margin-left: 20px; border-radius: 4px">重置
+                      </a-button>
+                    </a-form-item>
+                  </div>
+                  <div class="tableBox tabb">
+                    <BaseTable ref="projectStuTableRef" :columns="projectStuColumns" :url="STUDENT_LIST"
+                      v-model:params="projectParams" v-model:selectedRows="projectSelectRows" type="checkbox"></BaseTable>
+                  </div>
+                </div>
+              </a-tab-pane>
+              <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="page"
+                        :request="useBoeApiUserInfoPage" v-model:params="nameSearch" v-model:selectedRows="stuSelectRows"
+                        type="checkbox"></BaseTable>
+                    </div>
+                  </div>
+                </div>
+              </a-tab-pane>
+              <a-tab-pane v-if="!selectStu" :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="请输入组织" @click="orgValue" />
+                      <a-button type="primary" @click="searchOrg" style="margin-left: 20px; border-radius: 4px">
+                        <template #icon>
+                          <SearchOutlined />
+                        </template>
+                        搜索
+                      </a-button>
+                      <a-button type="primary" @click="resetOrg" style="margin-left: 20px; border-radius: 4px">重置
+                      </a-button>
+                    </a-form-item>
+                  </div>
+                  <div class="boeTree">
+                    <a-tree v-model:selectedKeys="selectedOrgKeys"
+                      :tree-data="searchOrgName.keyword ? orgData : treeOrgData" @select="onOrgSelectChange"
+                      :loading="orgOrgLoading" :load-data="onLoadOrgData" :fieldNames="{
+                        children: 'treeChildList',
+                        key: 'id',
+                        title: 'name',
+                        value: 'name',
+                      }" row-key="id" :row-selection="orgRowSelection" multiple>
+                    </a-tree>
+                  </div>
+                </div>
+              </a-tab-pane>
+              <a-tab-pane v-if="!selectStu" :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 type="primary" @click="resetAudienceInfo" style="margin-left: 20px; border-radius: 4px">
+                        重置
+                      </a-button>
+                    </a-form-item>
+                  </div>
+                  <div class="tableBox tabb">
+                    <BaseTable ref="auditTableRef" :columns="audiColums" :url="AUDIENCE_LIST" page-key="page"
+                      :request="useBoeApiAuditPage" v-model:params="audienceName" v-model:selectedRows="auditSelectRows"
+                      v-model:selectedRowKeys="auditSelectRowKeys" type="checkbox"></BaseTable>
+                  </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" v-if="infoType">
+                <div class="person">项目内学员</div>
+                <div v-for="(item, i) in projectSelectRows" :key="i">
+                  <div v-if="i < 11">
+                    <div class="chose">
+                      {{ item.studentName }}
+                      <div class="ch" @click="auditTableRef.remove(i)"></div>
+                    </div>
+                  </div>
+                  <div v-else>
+                    <div v-if="person">
+                      <div class="chose">
+                        {{ item.studentName }}
+                        <div class="ch" @click="auditTableRef.remove(i)"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="!member && projectSelectRows?.length > 10" class="ifsw">
+                  <div @click="member = !member" class="“sw”">查看更多></div>
+                </div>
+                <div v-if="member && projectSelectRows?.length > 10" class="ifsw">
+                  <div @click="member = !member" class="sw">收起&lt;</div>
+                </div>
+              </div>
+              <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 v-if="!selectStu" class="selecteds">
+                <div class="dept">添加组织</div>
+                <div v-for="(item, i) in deptList" :key="i">
+                  <div v-if="i < 11">
+                    <div class="chose1">
+                      <div class="span">{{ item.name }}</div>
+                      <div class="ch1" @click="orgDel(i)" style="cursor: pointer;"></div>
+                    </div>
+                  </div>
+                  <div v-else>
+                    <div v-if="dept">
+                      <div class="chose1">
+                        <div class="span">{{ item.name }}</div>
+                        <div class="ch1" @click="orgDel(i)"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="!dept && deptList.length > 10" class="ifsw">
+                  <div @click="dept = !dept" class="“sw”">查看更多></div>
+                </div>
+                <div v-if="dept && deptList.length > 10" class="ifsw">
+                  <div @click="dept = !dept" class="sw">收起&lt;</div>
+                </div>
+              </div>
+              <!--受众-->
+              <div v-if="!selectStu" class="selecteds">
+                <div class="group">受众关联</div>
+                <div v-for="(item, i) in auditSelectRows" :key="i">
+                  <div v-if="i < 11">
+                    <div class="chose2">
+                      <div class="span">{{ item.audienceName }}</div>
+                      <div class="ch2" @click="auditTableRef.remove(i)"></div>
+                    </div>
+                  </div>
+                  <div v-else>
+                    <div v-if="group">
+                      <div class="chose2">
+                        <div class="span">{{ item.audienceName }}</div>
+                        <div class="ch2" @click="auditTableRef.remove(i)"></div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div v-if="!group && auditSelectRows.length > 10" class="ifsw">
+                  <div @click="group = !group" class="“sw”">查看更多></div>
+                </div>
+                <div v-if="group && auditSelectRows.length > 10" class="ifsw">
+                  <div @click="group = !group" class="sw">收起&lt;</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="btnnq">
+          <button class="btn2" @click="closeDrawer">取消</button>
+          <button class="btn2" @click="submitAuth">推荐</button>
+        </div>
+      </div>
+    </a-drawer>
+    <a-button @click="openDrawer" type="link">
+      <slot></slot>
+    </a-button>
+  </div>
+  <a-modal :style="{ padding: 0, position: 'relative', right: '-20%' }" :closable="true" :visible="stageVisible"
+    :footer="null" centered="true" @ok="handleStageOk" wrapClassName="changeModal">
+    <div class="con">
+      <div class="header">
+        <div class="inhe">
+          <div class="tz">{{ type === 1 ? "选择阶段" : "添加学员到关卡" }}</div>
+          <div class="mg" @click="closeChangeModal"></div>
+        </div>
+      </div>
+      <div class="mid">
+        <div class="inher">
+          <div class="select">
+            <a-select style="width: 400px" :placeholder="type === 1 ? '选择阶段' : '选择关卡'" v-model:value="stageId"
+              className="cus-select">
+              <a-select-option v-for="(item, i) in stageIds" :key="i" :value="item.id">{{ item.name || "默认" }}
+              </a-select-option>
+            </a-select>
+          </div>
+          <span style="color: #999999; margin-left: 10px"><minus-circle-outlined />已在其他关卡的学员，不会被添加到该关卡</span>
+          <div class="btn" style="margin-top: 50px">
+            <button class="sameb btn1" @click="closeChangeModal" style="cursor: pointer">
+              取消
+            </button>
+            <button class="sameb btn2" @click="handleDialogOk" style="cursor: pointer">
+              确定
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </a-modal>
+</template>
+<script setup>
+import { message } from "ant-design-vue";
+import { computed, defineEmits, defineProps, ref, watch, onMounted } from "vue";
+import { boeRequest, useBoeApi, useBoeApiPage, useBoeApiUserInfoPage, useBoeApiAuditPage } from "@/api/request";
+import {
+  ORG_CHILD_LIST,
+  ORG_LIST,
+  USER_LIST_PAGE,
+  AUDIENCE_LIST,
+} from "@/api/ThirdApi";
+import {
+  recommendLaunch,
+} from "@/api/case";
+import dialog from "@/utils/dialog";
+import BaseTable from "@/components/common/BaseTable";
+import { STUDENT_LIST } from "@/api/apis";
+
+const emit = defineEmits({});
+const props = defineProps({
+  type: Number,
+  infoType: Number,
+  infoId: Number,
+  id: Array,
+  title: {
+    type: String,
+    default: "",
+  },
+  clear: {
+    type: Boolean,
+    default: false,
+  },
+  selectStu: {
+    type: Boolean,
+    default: false,
+  },
+  selectOne: {
+    type: Boolean,
+    default: false,
+  },
+  stage: {
+    type: Array,
+    default: () => [],
+  },
+  isGroup: {
+    type: Boolean,
+    default: false,
+  },
+  projectId: {
+    type: Number,
+    default: null,
+  },
+  groupId: {
+    type: Number,
+    default: null,
+  },
+  groupName: {
+    type: String,
+    default: null,
+  },
+  groupMemberCount: {
+    type: Number,
+    default: null,
+  },
+  groupMemberNumber: {
+    type: Number,
+    default: null,
+  },
+  activeKey1: {
+    type: String,
+    default: null,
+  },
+});
+
+const projectSelectKeys = ref([]);
+const projectSelectRows = ref([]);
+const stuSelectRows = ref([]);
+const auditSelectRows = ref([]);
+const auditSelectRowKeys = ref([]);
+const deptList = ref([]);
+const member = ref(false);
+const dept = ref(false);
+const projectStuTableRef = ref();
+const stuTableRef = ref();
+const projectParams = ref({ pid: props.infoId, type: props.infoType, studentName: "" });
+
+const getProjectStu = () => projectStuTableRef.value.fetch();
+const resetProjectStu = () => {
+  console.log(111);
+  
+  console.log(props.id);
+  
+  projectParams.value.studentName = "";
+  projectStuTableRef.value.reset();
+};
+
+const person = ref(false);
+const group = ref(false);
+const visiable = ref(false);
+const activeKey = ref(props.infoType ? 4 : 1);
+const stageVisible = ref(false);
+const stageId = ref();
+
+const nameSearch = ref({
+  keyword: "",
+  departId: null,
+});
+const stuTreeSelectKeys = ref([]);
+const stuTreeExpandedKeys = ref([]);
+const audienceName = ref({
+  keyword: "",
+});
+const searchOrgName = ref({
+  keyword: "",
+  page: 1,
+  pageSize: 10,
+});
+const stageIds = computed(() => props.stage);
+
+const { data: orgData, fetch: searchOrg } = useBoeApiPage(
+  ORG_LIST,
+  searchOrgName.value
+);
+const { data: treeData, loading: orgLoading } = useBoeApi(
+  ORG_LIST,
+  { keyword: "" },
+  {
+    init: true,
+    result: (res) => res.result.map((e) => ({ ...e, isLeaf: false })),
+  }
+);
+const { data: treeOrgData, loading: orgOrgLoading } = useBoeApi(
+  ORG_LIST,
+  { keyword: "" },
+  {
+    init: true,
+    result: (res) => res.result.map((e) => ({ ...e, isLeaf: false })),
+  }
+);
+
+const projectStuColumns = ref([
+  {
+    title: "姓名",
+    dataIndex: "studentName",
+    key: "studentName",
+    width: 80,
+    align: "center",
+    className: "h",
+    ellipsis: true,
+  },
+  {
+    title: "工号",
+    dataIndex: "studentUserNo",
+    key: "studentUserNo",
+    width: 80,
+    align: "center",
+    className: "h",
+    ellipsis: true,
+  },
+  {
+    title: "归属组织",
+    dataIndex: "studentOrgName",
+    key: "studentOrgName",
+    width: 80,
+    align: "center",
+    className: "h",
+    ellipsis: true,
+  },
+  {
+    title: "部门",
+    dataIndex: "studentDepartName",
+    key: "studentDepartName",
+    width: 80,
+    align: "center",
+    className: "h",
+    ellipsis: true,
+  },
+]);
+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: "受众名称",
+    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 orgSelectKeys = ref([]);
+const auditTableRef = ref();
+const screenHeight = ref(document.body.clientHeight);
+
+const orgRowSelection = computed(() => ({
+  columnWidth: 20,
+  selectedRowKeys: orgSelectKeys.value,
+  onChange: onOrgSelectChange,
+  preserveSelectedRowKeys: true,
+}));
+
+const closeDrawer = () => {
+  deleteDepSelect();
+  visiable.value = false;
+  nameSearch.value.keyword = "";
+  selectedOrgKeys.value = [];
+};
+
+function searchAudi() {
+  auditTableRef.value.reset(audienceName.value);
+}
+
+function onLoadData(treeNode) {
+  return boeRequest(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
+    (r) => {
+      treeNode.dataRef.treeChildList = r.result.directChildList;
+      treeData.value = [...treeData.value];
+    }
+  );
+}
+
+function onLoadOrgData(treeNode) {
+  return boeRequest(ORG_CHILD_LIST, { keyword: "", orgId: treeNode.id }).then(
+    (r) => {
+      treeNode.dataRef.treeChildList = r.result.directChildList;
+      treeOrgData.value = [...treeOrgData.value];
+    }
+  );
+}
+
+const closeChangeModal = () => {
+  stageVisible.value = false;
+};
+const openDrawer = () => {
+  visiable.value = true;
+};
+
+function onSearchStu() {
+  console.log(props.id);
+  
+  stuTableRef.value.reset(nameSearch.value);
+}
+
+function stuStuOrgSelect(e) {
+  nameSearch.value.departId = e.join("");
+  stuTableRef.value.fetch();
+}
+
+const selectedOrgKeys = ref([]);
+
+watch(selectedOrgKeys, () => {
+  console.log("selectedKeys", selectedOrgKeys);
+});
+
+function orgDel(i) {
+  orgSelectKeys.value = orgSelectKeys.value.filter(e => e !== deptList.value[i].id);
+  selectedOrgKeys.value.splice(i, 1);
+  deptList.value.splice(i, 1);
+}
+
+function onOrgSelectChange(e, l) {
+  orgRowSelection.value = e;
+  deptList.value = l.selectedNodes;
+}
+
+const resetStu = () => {
+  nameSearch.value.keyword = "";
+  stuTableRef.value.reset({ keyword: "", departId: null });
+};
+//清空选择部门信息
+const deleteDepSelect = () => {
+  stuSelectRows.value = [];
+  selectedOrgKeys.value = [];
+  projectSelectKeys.value = [];
+};
+//重置组织
+const resetOrg = () => {
+  searchOrgName.value = { keyword: "" };
+};
+//重置受众
+const resetAudienceInfo = () => {
+  audienceName.value.keyword = "";
+  auditTableRef.value.reset({ keyword: "" });
+};
+
+//推荐
+const submitAuth = () => {
+  if (props.type === 2) {
+    stageVisible.value = true;
+  } else {
+    handleDialogOk();
+  }
+};
+
+function handleDialogOk() {
+  if (auditSelectRowKeys.value.length || deptList.value.length) {
+    dialog({ content: "您选择了组织或受众，此添加为异步添加，请稍后手动刷新学员！", ok: handleStageOk });
+    return;
+  }
+  handleStageOk();
+}
+
+function handleStageOk() {
+  if (props.type === 1 && props.groupId && (props.groupMemberCount < (props.groupMemberNumber * 1 + projectSelectRows.value.length + stuSelectRows.value.length))) {
+    return message.warning("添加小组学员超过最大值");
+  }
+  stageVisible.value = false;
+  visiable.value = false;
+  emit("finash", false);
+  nameSearch.value.keyword = "";
+  // recommendLaunch().then(() => {
+  //   deleteDepSelect();
+  //   emit("finash", true);
+  // })
+  // saveStu({
+  //   targetId: props.id,
+  //   type: props.type,
+  //   clear: props.clear,
+  //   deptIds: deptList.value?.map((e) => e.id),
+  //   stageId: stageId.value,
+  //   groupIds: auditSelectRows.value?.map((e) => e.id),
+  //   studentList: stuSelectRows.value,
+  //   projectList: projectSelectRows.value,
+  //   groupName: props.groupName,
+  //   groupId: props.groupId,
+  // }).then(() => {
+  //   deleteDepSelect();
+  //   emit("finash", true);
+  // });
+}
+
+// 搜索受众值发生变化
+function orgValue(value) {
+  console.log("", value.target.value);
+  searchOrgName.value.keyword = value.target.value;
+}
+
+watch(visiable, () => {
+  orgSelectKeys.value = [];
+  deptList.value = [];
+  audienceName.value.keyword = "";
+  nameSearch.value.departId = null;
+  stuTreeExpandedKeys.value = [];
+  stuTreeSelectKeys.value = [];
+  activeKey.value = props.isGroup ? 4 : 1;
+
+  projectParams.value.studentName = "";
+  nameSearch.value.keyword = "";
+  searchOrgName.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: null });
+    projectStuTableRef.value && projectStuTableRef.value.clear();
+    projectStuTableRef.value && projectStuTableRef.value.reset({ pid: props.infoId, type: props.infoType, studentName: "" });
+  }
+});
+</script>
+<style lang="scss">
+.CommonStudent {
+  min-height: 40px;
+}
+
+.btnnq {
+  height: 72px;
+  width: 100%;
+  position: absolute;
+  background-color: #fff;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
+
+  .btn1 {
+    width: 100px;
+    height: 40px;
+    border: 1px solid #4ea6ff;
+    border-radius: 8px;
+    color: #4ea6ff;
+    background-color: #fff;
+    cursor: pointer;
+  }
+
+  .btn2 {
+    cursor: pointer;
+    width: 100px;
+    height: 40px;
+    background: #4ea6ff;
+    border-radius: 8px;
+    border: 0;
+    margin-left: 15px;
+    color: #fff;
+  }
+}
+
+.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>
+  
\ No newline at end of file
diff --git a/src/components/drawers/InitiateRecommend.vue b/src/components/drawers/InitiateRecommend.vue
index e15611c3..77c46de4 100644
--- a/src/components/drawers/InitiateRecommend.vue
+++ b/src/components/drawers/InitiateRecommend.vue
@@ -30,12 +30,10 @@
         <div class="btnText">已选择 <span style="color:#4ea6ff ;">{{ state.selectedRowKeys.length }}</span> 条案例</div>
       </div>
     </div>
-
     <div style="display: flex; overflow-x: auto; overflow-y: auto;justify-content: space-between;">
       <div class="tableBox" style="margin-top: 30px;min-height: 800px;overflow: hidden;">
         <a-table style="border: 1px solid #f2f6fe;" :columns="state.columns" :data-source="state.dataSource"
-          :loading="!loading" :pagination="false" :row-selection="rowSelection">
-        </a-table>
+          :loading="!loading" :row-selection="rowSelection" :pagination="pagination" />
       </div>
       <div class="right1" style="min-width: 200px">
         <div class="onerow">
@@ -43,29 +41,34 @@
             <div class="already">已选</div>
           </div>
         </div>
-        <!-- <div :style="{ 'max-height': state.screenHeight - 235 + 'px' }" style="overflow-y: auto"> -->
-        <div style="overflow-y: auto">
+        <div :style="{ 'max-height': state.screenHeight - 240 + 'px' }" style="overflow-y: auto">
           <div class="selecteds">
-            <div v-for="(item, i) in state.projectSelectRows" :key="i">
+            <div v-for="(item, i) in state.selectedRow" :key="i">
               <div v-if="i < 11">
                 <div class="chose">
-                  {{ item.studentName }}
-                  <div class="ch" @click="auditTableRef.remove(i)"></div>
+                  {{ item.title.length > 6 ? item.title.slice(0, 6) + '...' : item.title }}
+                  <div class="ch" @click="() => {
+                    state.selectedRow.splice(i, 1);
+                    state.selectedRowKeys.splice(i, 1);
+                  }"></div>
                 </div>
               </div>
               <div v-else>
-                <div v-if="state.person">
+                <div v-if="state.member">
                   <div class="chose">
-                    {{ item.studentName }}
-                    <div class="ch" @click="auditTableRef.remove(i)"></div>
+                    {{ item.title.length > 6 ? item.title.slice(0, 6) + '...' : item.title }}
+                    <div class="ch" @click="() => {
+                      state.selectedRow.splice(i, 1);
+                      state.selectedRowKeys.splice(i, 1);
+                    }"></div>
                   </div>
                 </div>
               </div>
             </div>
-            <div v-if="!state.member && state.projectSelectRows?.length > 10" class="ifsw">
+            <div v-if="!state.member && state.selectedRow?.length > 10" class="ifsw">
               <div @click="state.member = !state.member" class="“sw”">查看更多></div>
             </div>
-            <div v-if="state.member && state.projectSelectRows?.length > 10" class="ifsw">
+            <div v-if="state.member && state.selectedRow?.length > 10" class="ifsw">
               <div @click="state.member = !state.member" class="sw">收起&lt;</div>
             </div>
           </div>
@@ -74,7 +77,11 @@
     </div>
     <div class="btnn">
       <button class="btn2" @click="closeDrawer">取消</button>
-      <button class="btn2" @click="nextPage">下一步</button>
+      <CommonRecommend :type="state.type" :id="state.selectedRowKeys" @finash="submitCall" :stage="state.stage">
+        <a-button class="btn2">
+          下一步
+        </a-button>
+      </CommonRecommend>
     </div>
   </a-drawer>
   <!-- 导入的提示框 -->
@@ -125,14 +132,14 @@
   <!-- 下一步添加学员 -->
 </template>
 <script setup>
-import { reactive, onMounted, ref, watch } from 'vue';
+import { reactive, onMounted, ref, watch, computed, nextTick } from 'vue';
 import { Form, message } from "ant-design-vue";
 import axios from "axios";
 import Cookies from "vue-cookies";
 import { downloadErrorData } from '@/api/case'
 import useDownload from '@/hooks/useDownload'
-
-defineProps({
+import CommonRecommend from "@/components/CaseManage/CommonRecommend";
+const props = defineProps({
   visible: {
     type: Boolean,
     default: false
@@ -143,10 +150,14 @@ defineProps({
   }
 })
 const emit = defineEmits(['update:visible'])
+
 const state = reactive({
+  type: 1,//添加学员
+  stage: '',//
   importId: '',//导入id
-  selectedRowKeys: [],
-  dataSource: [],
+  selectedRowKeys: [],//案例标题的id
+  selectedRow: [],//选择的每一行数据
+  dataSource: [],//表格的数据
   AMvisible: false,
   imptProgress: false,
   uploadpercent: -1,//导入进度
@@ -155,18 +166,11 @@ const state = reactive({
   uploadAction: process.env.VUE_APP_NEW_API + '/xboe/m/boe/cases/recommend/import',//下载地址
   addLoading: false,
   fileList: [],
-  nextPageShow: false,//下一步
-  person: false,
-  member: false,
-  projectSelectRows: [{
-    studentName: 'heihei',
-    title: '案例标题',
-    AuthorName: '作者名称'
-  }],
+  member: false,//收起和展开
+  screenHeight: document.body.clientHeight,
   projectParams: {
     pid: '', type: '', studentName: ""
   },
-  screenHeight: document.body.clientHeight,
   columns: [
     {
       title: "案例标题",
@@ -174,7 +178,7 @@ const state = reactive({
       key: "title",
       align: "left",
       className: "h",
-      width: '80%',
+      width: '75%',
       ellipsis: true,
     },
     {
@@ -188,6 +192,9 @@ const state = reactive({
     }
   ]
 })
+function submitCall(flag) {
+  flag && getTopList()
+}
 
 const loading = ref(false)
 // 查询数据
@@ -195,8 +202,9 @@ const searchDataInfo = reactive({
   pageIndex: 1,
   pageSize: 10,
   keyWord: "",
-  authorName: ''
+  authorName: '',
 });
+const total = ref(0)
 
 
 watch(() => state.dataSource, (newVal) => {
@@ -205,9 +213,41 @@ watch(() => state.dataSource, (newVal) => {
   deep: true,
 })
 
+
+// 分页
+const pagination = computed(() => ({
+  total: total.value,
+  showSizeChanger: false,
+  current: searchDataInfo.pageIndex,
+  pageSize: searchDataInfo.pageSize,
+  onChange: changePagination,
+}));
+const changePagination = (e) => {
+  console.log(e);
+  searchDataInfo.pageIndex = e
+  nextTick(getTopList);
+};
+// 计算全选
+const rowSelection = computed(() => {
+  return {
+    selectedRowKeys: state.selectedRowKeys,
+    onChange: onSelectChange,
+    preserveSelectedRowKeys: true,
+  }
+});
+
+const onSelectChange = (selectedRowKeys, selectedRow) => {
+  console.log("selectedRowKeys", selectedRowKeys);
+  state.selectedRowKeys = selectedRowKeys
+  state.selectedRow = selectedRow
+};
+
+
+
 // 请求列表数据是formdata类型的
 const getTopList = () => {
-  loading.value = true;
+  console.log(state.selectedRowKeys);
+
   axios({
     method: "post",
     url: "/systemapi/xboe/m/boe/cases/isTopList",
@@ -217,35 +257,31 @@ const getTopList = () => {
       'Content-Type': 'application/x-www-form-urlencoded',
     },
   }).then((res) => {
+    loading.value = true;
     console.log(res);
+    res?.data?.result?.list?.forEach(element => {
+      element.key = element.id
+    });
     state.dataSource = res?.data?.result?.list || []
-  }),
-    (err) => {
-      message.error(err);
-      loading.value = false;
-    };
+    total.value = res?.data?.result?.count || 0
+    console.log(total.value);
+    console.log(state.dataSource);
+  }).catch((err) => {
+    message.error(err);
+    loading.value = false;
+  })
 }
-// 获取列表数据
 getTopList()
 onMounted(() => {
   // console.log(window.location.protocol);
 })
 
-// 全选
-const rowSelection = {
-  onChange: (selectedRowKeys, selectedRows) => {
-    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
-  },
-  getCheckboxProps: record => ({
-    disabled: record.name === 'Disabled User',
-    // Column configuration not to be checked
-    name: record.name,
-  }),
-};
+
 
 
 // 搜索
-const handleSearch = () => {
+const handleSearch = (num) => {
+  if (num == 1) searchDataInfo.pageIndex = 1
   console.log(searchDataInfo);
   getTopList()
 }
@@ -254,17 +290,13 @@ const handleSearch = () => {
 const downloadErrorInfo = () => {
   // if (!state.importId) return
   downloadErrorData({ importId: state.importId }).then((res) => {
-    if(res.status!=200) return
-    useDownload(res,'失败数据.xsl')
+    if (res.status != 200) return
+    useDownload(res, '失败数据.xsl')
   }).catch((error) => {
     console.log(error);
   })
 }
 
-// 下一步
-const nextPage = () => {
-  state.nextPageShow = true
-}
 
 const { resetFields } = Form.useForm(searchDataInfo, {});
 //重置
@@ -275,6 +307,7 @@ const handleRest = () => {
 
 // 取消抽屉
 const closeDrawer = () => {
+  resetFields()
   emit('update:visible', false)
 }
 
@@ -350,10 +383,6 @@ const handleChange = (info) => {
   }
 };
 
-// 关闭modal弹窗
-const closeModal = () => {
-
-}
 
 
 </script>
@@ -661,7 +690,7 @@ const closeModal = () => {
       }
 
       .chose {
-        width: 64px;
+        min-width: 64px;
         height: 24px;
         margin-top: 25px;
         margin-right: 25px;
@@ -673,6 +702,7 @@ const closeModal = () => {
         color: rgba(56, 139, 225, 1);
         font-size: 12px;
         position: relative;
+        padding: 0 10px;
 
         .ch {
           position: absolute;
diff --git a/src/views/case/CaseRecommended.vue b/src/views/case/CaseRecommended.vue
index 06487f5d..ef028412 100644
--- a/src/views/case/CaseRecommended.vue
+++ b/src/views/case/CaseRecommended.vue
@@ -20,7 +20,7 @@
             <div class="search"></div>
             <div class="btnText">搜索</div>
           </div>
-          <div class="btnn btn2" @click="handleRest" style="width: 105px">
+          <div class="btn btn2" @click="handleRest" style="width: 105px">
             <div class="search"></div>
             <div class="btnText">重置</div>
           </div>