feat:获取学员列表批量删除单个删除勾选效果查询重置清空

2025-12-10 03:16:44 +08:00 · 2022-11-08 17:49:19 +08:00
parent f5f4dc8e78 360c52c098
commit 7895406f80
3 changed files with 556 additions and 3 deletions
--- a/src/components/drawers/AddHomework.vue
+++ b/src/components/drawers/AddHomework.vue
@@ -0,0 +1,552 @@
+<template>
+  <a-drawer :visible="addhomeworkVisible" class="drawerStyle addhomeworkDrawer" width="80%" placement="right"
+    @after-visible-change="afterVisibleChange">
+    <div class="drawerMain">
+      <div class="header">
+        <div class="headerTitle">{{ edit ? '编辑' : '添加' }}作业</div>
+        <img style="width: 29px; height: 29px; cursor: pointer" src="../../assets/images/basicinfo/close.png"
+          @click="closeDrawer" />
+      </div>
+      <a-form ref="formRef" name="custom-validation" :model="formState" :rules="rules" v-bind="layout"
+        @finish="handleFinish" @validate="handleValidate" @finishFailed="handleFinishFailed">
+        <div class="contentMain">
+          <div class="main_left">
+
+            <div class="main_item">
+              <div class="btnbox">
+                <a-form-item has-feedback label="作业名称" name="workName">
+                  <a-input v-model:value="formState.workName" style="width: 424px; height: 32px;margin-left: 35px;"
+                    placeholder="请输入作业名称" autocomplete="off" />
+                </a-form-item>
+
+              </div>
+            </div>
+            <div class="main_item2">
+              <a-form-item has-feedback label="作业要求" name="workRequirement">
+                <a-textarea v-model:value="formState.workRequirement" placeholder="请输入作业要求" autocomplete="off"
+                  allow-clear style="margin-left: 35px" maxlength="150" />
+              </a-form-item>
+            </div>
+            <div class="main_item">
+              <div class="btnbox">
+                <a-form-item has-feedback label="提交时间" name="choosedTime">
+                  <a-range-picker style="width: 424px;margin-left: 35px;" v-model:value="formState.choosedTime"
+                    format="YYYY-MM-DD" :placeholder="['      开始时间', '        结束时间']" />
+                </a-form-item>
+              </div>
+            </div>
+            <div class="main_item">
+              <div class="signbox">
+                <div class="sign">
+                  <img src="@/assets/images/coursewareManage/enclosure.png" alt="" />
+                </div>
+                <span style="margin-right: 3px">附件：</span>
+              </div>
+              <div class="btnbox">
+                <a-upload v-model:file-list="fileList" name="file" action="/api/file/upload" @change="handleChange">
+                  <button class="xkbtn" type="button">上传附件</button>
+                </a-upload>
+              </div>
+            </div>
+            <div class="main_item" style="margin-top:-25px;">
+              <div class="signbox">
+              </div>
+              <div class="btnbox">
+                <span style="color:#999999;">支持：pdf.ppt.pptx.doc.docx.xls.xlsx.jpeg.png.gif.zip</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="main_btns">
+          <a-button class="btn1" @click="closeDrawer">取消</a-button>
+          <a-button class="btn2" html-type="submit">确定</a-button>
+        </div>
+      </a-form>
+      
+
+    </div>
+    <!--  加载动画 -->
+    <div class="aeLoading" :style="{display:addLoading?'flex':'none'}">
+        <a-spin :spinning="addLoading" tip="添加中..." />
+      </div>
+  </a-drawer>
+</template>
+<script>
+import { reactive, ref, toRefs } from "vue";
+import { message } from "ant-design-vue";
+import { createWorkTask, queryWorkDetailById, updateWorkTaskUsing } from "@/api/indexWork";
+import { ProjectEditTask, RouterEditTask } from "@/api/indexTask";
+import dayjs from 'dayjs';
+
+const rowSelection = ref({
+  checkStrictly: false,
+  onChange: (selectedRowKeys, selectedRows) => {
+    console.log(
+      `selectedRowKeys: ${selectedRowKeys}`,
+      "selectedRows: ",
+      selectedRows
+    );
+  },
+  onSelect: (record, selected, selectedRows) => {
+    console.log(record, selected, selectedRows);
+  },
+  onSelectAll: (selected, selectedRows, changeRows) => {
+    console.log(selected, selectedRows, changeRows);
+  },
+});
+export default {
+  name: "AddHomework",
+  // components: {
+  // },
+  props: {
+    addhomeworkVisible: {
+      type: Boolean,
+      default: false,
+    },
+    edit: { //  是否为编辑
+      type: Boolean,
+      default: null,
+    },
+    projectId: {
+      type: Number,
+      default: null,
+    },
+    chooseStageId: {
+      type: Number,
+      default: null,
+    },
+    routerTaskId: {
+      type: Number,
+      default: 0,
+    },
+    isLevel: { // 是否是关卡页面触发
+      type: Boolean,
+      default: null,
+    },
+    EditWorkId: { // 要编辑的workId 
+      type: Number,
+      default: null,
+    },
+    projectTaskId: { // 要编辑的projectId 
+      type: Number,
+      default: null,
+    },
+    routerId: {
+      type: Number,
+      default: null,
+    },
+    isactive: {
+      type: Number,
+      default: null,
+    }
+  },
+  setup(props, ctx) {
+    const formState = reactive({
+      workName: '',
+      workRequirement: '',
+      choosedTime: '',
+    });
+    const state = reactive({
+      addLoading: false,
+    })
+    const formRef = ref();
+
+    let checkWorkName = async (_rule, value) => {
+      if (!value) {
+        return Promise.reject('请输入作业名称');
+      }
+    };
+
+    let checkWorkRequirement = async (_rule, value) => {
+      if (!value) {
+        return Promise.reject('请输入作业要求');
+      }
+    };
+
+    let checkTime = async (_rule, value) => {
+      if (!value.length) {
+        return Promise.reject('请选择时间');
+      }
+    };
+
+    const rules = {
+      workName: [{
+        required: true,
+        validator: checkWorkName,
+        trigger: 'change',
+      }],
+      workRequirement: [{
+        required: true,
+        validator: checkWorkRequirement,
+        trigger: 'change',
+      }],
+      choosedTime: [{
+        required: true,
+        validator: checkTime,
+        trigger: 'change',
+      }],
+    };
+    // const layout = {
+    //   labelCol: {
+    //     span: 4,
+    //   },
+    //   wrapperCol: {
+    //     span: 14,
+    //   },
+    // };
+    const handleFinish = values => {
+      console.log(values);
+      updateWork(props.workId)
+    };
+
+    const handleFinishFailed = errors => {
+      console.log(errors);
+      // message.error("handleFinishFailed");
+    };
+
+    const resetForm = () => {
+      formRef.value.resetFields();
+    };
+
+    const handleValidate = (...args) => {
+      console.log(args);
+    };
+    const handleChange = info => {
+      if (info.file.status !== 'uploading') {
+        console.log(info.file, info.fileList);
+      }
+
+      if (info.file.status === 'done') {
+        message.success(`${info.file.name} 文件上传成功`);
+      } else if (info.file.status === 'error') {
+        message.error(`${info.file.name} 文件上传失败.`);
+      }
+    };
+
+    const fileList = ref([]);
+    const closeDrawer = () => {
+      resetForm();
+      fileList.value = [];
+      formState.choosedTime = '';
+      ctx.emit("update:addhomeworkVisible", false);
+      ctx.emit("update:edit", false);
+    };
+    const afterVisibleChange = (bool) => {
+      if (props.addhomeworkVisible && props.edit) { // 该页面显示同时 edit为true 时，发送查询请求, 
+        queryWork()
+      }
+      console.log("state", bool);
+    };
+
+    const updateWork = () => {
+      state.addLoading = true;
+        if (props.edit) { // 编辑任务
+          myUpdateWorkTaskUsing()
+        } else {  // 创建任务
+          console.log('创建任务***************');
+          myCreateWorkTask()
+        }
+      
+    };
+
+        // 新增任务
+        const myCreateWorkTask = () => {
+          let obj = {
+            "createTime": "",
+            "createUser": 0,
+            "submitEndTime": dayjs(formState.choosedTime[1]).format("YYYY-MM-DD"),
+            "submitStartTime": dayjs(formState.choosedTime[0]).format("YYYY-MM-DD"),
+            "updateTime": "",
+            "updateUser": 0,
+            "workEnclosureAddress": "",
+            "workFlag": "",
+            "workId": 0,
+            "workName": formState.workName,
+            "workRequirement": formState.workRequirement,
+            "workTag": ""
+          }
+          createWorkTask(obj).then((res) => {
+            if(props.isLevel) {
+            // 如果是关卡页面进入 ---------------------------------
+              myRouterEditTask(res.data.data.workId);
+            }else {
+              myProjectEditTask(res.data.data.workId);
+            }
+            
+          }).catch((err) => {
+            message.error(`添加失败${err}`)
+          })
+        }
+        // 编辑任务
+        const myUpdateWorkTaskUsing = () => {
+          let editObj = {
+            "createTime": "",
+            "createUser": 0,
+            "submitEndTime": dayjs(formState.choosedTime[1]).format("YYYY-MM-DD"),
+            "submitStartTime": dayjs(formState.choosedTime[0]).format("YYYY-MM-DD"),
+            "updateTime": "",
+            "updateUser": 0,
+            "workEnclosureAddress": "",
+            "workFlag": "",
+            "workId": props.EditWorkId,
+            "workName": formState.workName,
+            "workRequirement": formState.workRequirement,
+            "workTag": ""
+          }
+          updateWorkTaskUsing(editObj).then((res) => {
+          console.log(res);
+          if(props.isLevel) {
+            // 如果是关卡页面进入 ---------------------------------
+              myRouterEditTask(res.data.data.workId);
+            }else {
+              myProjectEditTask(res.data.data.workId);
+            }
+        }).catch((err) => {
+          message.error(`编辑失败${err}`)
+        })
+        }
+        // 查询任务
+        const queryWork = () => {
+          state.addLoading = true;
+          queryWorkDetailById({workId:props.EditWorkId}).then((res) => {
+            console.log(dayjs(res.data.data.submitStartTime).format("YYYY-MM-DD"));
+            formState.workName = res.data.data.workName;
+            formState.workRequirement = res.data.data.workRequirement;
+            formState.choosedTime = [dayjs(res.data.data.submitStartTime, "YYYY-MM-DD"), dayjs(res.data.data.submitEndTime, "YYYY-MM-DD")]
+            console.log(res);
+            state.addLoading = false;
+          }).catch(() => {
+            message.error(`查询失败`)
+          })
+        };
+        // 新增编辑或新增项目任务
+        const myProjectEditTask = (workId) => {
+          let editObj = {
+          "courseId": workId,
+          "duration": 60,
+          "flag": true,
+          "name": formState.workName,
+          "projectId": props.projectId,
+          "projectTaskId":  props.projectTaskId || 0,
+          "stageId": props.chooseStageId,
+          "type": 4
+        }
+        ProjectEditTask(editObj).then(res => {
+          console.log(` 编辑项目成功的打印 ${res}`);
+          message.success(`${props.edit ? '编辑' : '新增'}阶段任务成功`)
+          ctx.emit("changeData", false);
+          state.addLoading = false;
+          closeDrawer();
+        }).catch(err => {
+          message.error(`${props.edit ? '编辑' : '新增'}阶段任务失败`)
+          console.log(` 编辑项目失败的打印 ${err}`);
+        })
+
+        }
+        // 新增编辑或新增关卡任务
+        const myRouterEditTask = (testId) => {
+          let editObj1 = {
+            "chapterId": props.isactive,
+            "courseId": testId,
+            "duration": 30,
+            "flag": true,
+            "name": formState.workName,
+            "routerId": props.routerId,
+            "routerTaskId":  props.routerTaskId || 0,
+            "type": 4
+          }
+
+          RouterEditTask(editObj1).then(res => {
+            console.log(` 编辑关卡成功的打印 ${res}`);
+            message.success(`${props.edit ? '编辑' : '新增'}关卡任务成功`)
+            ctx.emit("changeData", false);
+            state.addLoading = false;
+            closeDrawer();
+          }).catch(err => {
+            message.error(`${props.edit ? '编辑' : '新增'}关卡任务失败`)
+            console.log(` 编辑关卡失败的打印 ${err}`);
+          })
+        }
+
+    return {
+      afterVisibleChange,
+      closeDrawer,
+      rowSelection,
+      handleChange,
+      fileList,
+      formState,
+      handleFinish,
+      handleFinishFailed,
+      resetForm,
+      handleValidate,
+      formRef,
+      // layout,
+      rules,
+      updateWork,
+      ...toRefs(state)
+    };
+  },
+};
+</script>
+<style lang="scss">
+.ant-table-striped :deep(.table-striped) td {
+  background-color: #fafafa !important;
+}
+
+.addhomeworkDrawer {
+  .drawerMain {
+    .header {
+      height: 73px;
+      border-bottom: 1px solid #e8e8e8;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-shrink: 0;
+
+      .headerTitle {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 25px;
+        margin-left: 24px;
+      }
+    }
+
+    .contentMain {
+      display: flex;
+      justify-content: space-between;
+
+      .main_left {
+        padding-right: 30px;
+        flex: 1;
+        border-right: 1px solid #e8e8e8;
+
+        .main_item {
+          display: flex;
+          align-items: center;
+          margin-bottom: 32px;
+
+          .signbox {
+            width: 120px;
+            display: flex;
+            justify-content: end;
+            align-items: center;
+
+            .sign {
+              margin-right: 5px;
+            }
+          }
+
+          .btnbox {
+            display: flex;
+            flex: 1;
+            align-items: center;
+
+            .xkbtn {
+              cursor: pointer;
+              width: 130px;
+              height: 40px;
+              background: #388be1;
+              border-radius: 8px;
+              border: 0;
+              margin-right: 8px;
+              color: #fff;
+            }
+          }
+        }
+
+        .main_item2 {
+          display: flex;
+          align-items: flex-start;
+          margin-bottom: 32px;
+
+          .signbox {
+            width: 120px;
+            display: flex;
+            justify-content: end;
+            align-items: center;
+
+            .sign {
+              margin-right: 5px;
+            }
+          }
+
+          .kqszbox {
+            .qdqtbox {
+              margin-left: 56px;
+            }
+
+            .setbox {
+              display: flex;
+              flex-wrap: wrap;
+              margin-top: 10px;
+              margin-bottom: 24px;
+
+              .timerbox {
+                margin-top: 6px;
+                margin-right: 32px;
+                display: flex;
+                align-items: center;
+                flex-wrap: nowrap;
+              }
+            }
+          }
+
+          .btnbox2 {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-start;
+
+            .xkbtn {
+              cursor: pointer;
+              width: 130px;
+              height: 40px;
+              background: #388be1;
+              border-radius: 8px;
+              border: 0;
+              margin-right: 16px 8px 32px 0;
+              color: #fff;
+              margin-top: 16px;
+              margin-bottom: 60px;
+            }
+          }
+        }
+      }
+    }
+
+    .main_btns {
+      position: absolute;
+      height: 72px;
+      width: 100%;
+      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;
+      }
+    }
+  }
+}
+</style>
+
--- a/src/components/drawers/AddRef.vue
+++ b/src/components/drawers/AddRef.vue
@@ -182,7 +182,7 @@ export default {
    };
    const handleFinish = values => {
      console.log(values);
-      updateRef(props.workId)
+      updateRef(props.EditRefId)
    };
    const handleFinishFailed = errors => {
      console.log(errors);
--- a/src/views/projectcenter/TaskAdd.vue
+++ b/src/views/projectcenter/TaskAdd.vue
@@ -1889,10 +1889,11 @@ export default {
      console.log("任务id", id);
    };
    //打开编辑外链的弹窗
-    const showEditRefDrawer = (id) => {
+    const showEditRefDrawer = (id, eleId) => {
      state.addrefvisible = true;
      state.isRefEdit = true;
      state.EditRefId = id;
+      state.projectTaskId = eleId;
    };
    //打开编辑直播的弹窗
    const showEditLiveDrawer = (id) => {
@@ -1913,7 +1914,7 @@ export default {
      state.edit = true;
      console.log(type, id);
      if (type == "外链") {
-        showEditRefDrawer(id);
+        showEditRefDrawer(id, eleId);
      } else if (type == "直播") {
        showEditLiveDrawer(id, eleId);
      } else if (type == "测评") {