推荐按钮

src/components/CaseManage/CommonRecommend.vue

@@ -253,6 +253,25 @@
         </div>
       </div>
     </a-drawer>
+    <!-- 推荐按钮的提示 -->
+    <a-modal v-model:visible="state.recBtnvisible" width="450px" title="提醒" @ok="handleOk">
+      <div class="remModal">
+        <div class="remModal-words">
+          <div>您已选择案例：<span class="wordsColor">53</span> 篇</div>
+          <div class="wordsColor">去修改>></div>
+        </div>
+        <div class="remModal-words" style="margin-bottom: 30px;">
+          <div>您已选择学员：<span class="wordsColor">53</span> 人</div>
+          <div class="wordsColor">去修改>></div>
+        </div>
+        <a-form ref="formRef" :model="formState" :rules="rules" :label-col="{ span: 5 } ">
+          <a-form-item label="推荐组织：" name="name">
+            <a-input v-model:value="formState.name" />
+          </a-form-item>
+        </a-form>
+      </div>
+    </a-modal>
+
     <a-button @click="openDrawer" type="link">
       <slot></slot>
     </a-button>
@@ -291,7 +310,7 @@
 </template>
 <script setup>
 import { message } from "ant-design-vue";
-import { computed, defineEmits, defineProps, ref, watch, onMounted } from "vue";
+import { computed, defineEmits, defineProps, ref, watch, onMounted, reactive } from "vue";
 import { boeRequest, useBoeApi, useBoeApiPage, useBoeApiUserInfoPage, useBoeApiAuditPage } from "@/api/request";
 import {
   ORG_CHILD_LIST,
@@ -534,6 +553,22 @@ const audiColums = ref([
 const orgSelectKeys = ref([]);
 const auditTableRef = ref();
 const screenHeight = ref(document.body.clientHeight);
+// 推荐弹出框
+const formRef = ref();
+const formState = reactive({
+  name: undefined,
+});
+
+const rules = {
+  name: {
+    required: true,
+    message: '请输入推荐组织名称',
+  },
+};
+// 定义后来的变量
+const state = reactive({
+  recBtnvisible: false,//显示还是隐藏
+})
 
 const orgRowSelection = computed(() => ({
   columnWidth: 20,
@@ -619,6 +654,7 @@ const deleteDepSelect = () => {
   stuSelectRows.value = [];
   selectedOrgKeys.value = [];
   projectSelectKeys.value = [];
+  formState.name = undefined;
 };
 //重置组织
 const resetOrg = () => {
@@ -632,12 +668,18 @@ const resetAudienceInfo = () => {
 
 //推荐按钮
 const submitAuth = () => {
+  state.recBtnvisible = true
+};
+const handleOk = () => {
+  formRef.value.validate().then(() => {
+    state.recBtnvisible = false
     if (props.type === 2) {
       stageVisible.value = true;
     } else {
       handleDialogOk();
     }
-};
+  })
+}
 
 function handleDialogOk() {
   // if (auditSelectRowKeys.value.length || deptList.value.length) {
@@ -645,8 +687,7 @@ function handleDialogOk() {
   //   return;
   // }
   console.log(props.id);
-  console.log(auditSelectRowKeys.value);
+  console.log(stuSelectRows.value);
-  console.log(deptList.value);
 
 
   handleStageOk();
@@ -661,9 +702,12 @@ function handleStageOk() {
   emit("finash", false);
   nameSearch.value.keyword = "";
   caseRecommend({
-    importId: props.id,
+    launchType: 1,
-    recommendOrgName:''
+    casesIdList: props.id,
+    recommendOrgName: formState.name,
+    pushUserIdList: stuSelectRows.value.map((stu) => stu.id)
   }).then(() => {
+    message.error("推荐成功");
     deleteDepSelect();
     emit("finash", true);
   }).catch(() => {
@@ -721,6 +765,24 @@ watch(visiable, () => {
   min-height: 40px;
 }
 
+// 推荐按钮的弹出框
+.remModal {
+  height: 100%;
+  width: 100%;
+  padding: 0 24px;
+  margin-top: 30px;
+
+  .remModal-words {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 10px;
+    .wordsColor{
+      color: #4ea6ff;
+    }
+  }
+}
+
 .btnnq {
   height: 72px;
   width: 100%;