--fix 路径图整体修改

src/components/drawers/AddActive.vue

@@ -1,19 +1,21 @@
 <template>
+  <div @click="openDrawer">
+    <slot></slot>
+  </div>
   <a-drawer
-    :visible="addactiveVisible"
-    class="drawerStyle addactiveDrawer"
-    width="80%"
-    title="添加活动"
-    placement="right"
-    @after-visible-change="afterVisibleChange"
+      :visible="visible"
+      class="drawerStyle addactiveDrawer"
+      width="80%"
+      title="添加活动"
+      placement="right"
   >
     <div class="drawerMain">
       <div class="header">
-        <div class="headerTitle">{{ edit ? "编辑" : "添加" }}活动</div>
+        <div class="headerTitle">{{ taskIndex >= 0 ? "编辑" : "添加" }}活动</div>
         <img
-          style="width: 29px; height: 29px; cursor: pointer"
-          src="../../assets/images/basicinfo/close.png"
-          @click="closeDrawer"
+            style="width: 29px; height: 29px; cursor: pointer"
+            src="../../assets/images/basicinfo/close.png"
+            @click="closeDrawer"
         />
       </div>
       <div class="contentMain">
@@ -22,18 +24,18 @@
             <div class="signbox">
               <div class="sign">
                 <img
-                  src="@/assets/images/coursewareManage/asterisk.png"
-                  alt=""
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
                 />
               </div>
               <span style="margin-right: 3px">活动名称：</span>
             </div>
             <div class="btnbox">
               <a-input
-                v-model:value="inputV1"
-                style="width: 400px; height: 40px; border-radius: 8px"
-                placeholder="请输入活动名称"
-                maxlength="20"
+                  v-model:value="formData.activityName"
+                  style="width: 400px; height: 40px; border-radius: 8px"
+                  placeholder="请输入活动名称"
+                  maxlength="20"
               />
             </div>
           </div>
@@ -42,21 +44,22 @@
             <div class="signbox">
               <div class="sign">
                 <img
-                  src="@/assets/images/coursewareManage/asterisk.png"
-                  alt=""
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
                 />
               </div>
               <span style="margin-right: 3px">活动时间：</span>
             </div>
             <div class="btnbox">
               <a-range-picker
-                :disabled-date="disabledDate"
-                :disabled-time="disabledRangeTime"
-                :show-time="{ format: 'HH:mm' }"
-                format="YYYY-MM-DD HH:mm"
-                style="width: 400px; height: 40px; border-radius: 8px"
-                v-model:value="time"
-                :placeholder="['      开始时间', '        结束时间']"
+                  :disabled-date="disabledDate"
+                  :disabled-time="disabledRangeTime"
+                  :show-time="{ format: 'HH:mm' }"
+                  format="YYYY-MM-DD HH:mm"
+                  style="width: 400px; height: 40px; border-radius: 8px"
+                  v-model:value="dateTime"
+                  @change="timeChange"
+                  :placeholder="['      开始时间', '        结束时间']"
               />
             </div>
           </div>
@@ -64,18 +67,18 @@
             <div class="signbox">
               <div class="sign">
                 <img
-                  src="@/assets/images/coursewareManage/asterisk.png"
-                  alt=""
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
                 />
               </div>
               <span style="margin-right: 3px">活动时长：</span>
             </div>
             <div class="btnbox">
               <a-input-number
-                :min="0"
-                :precision="0"
-                style="width: 400px; height: 40px; border-radius: 8px"
-                v-model:value="inputV2"
+                  :min="0"
+                  :precision="0"
+                  style="width: 400px; height: 40px; border-radius: 8px"
+                  v-model:value="formData.activityDuration"
               />
               <span style="color: #999999; margin-left: 8px">分钟</span>
             </div>
@@ -84,18 +87,18 @@
             <div class="signbox">
               <div class="sign">
                 <img
-                  src="@/assets/images/coursewareManage/asterisk.png"
-                  alt=""
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
                 />
               </div>
               <span style="margin-right: 3px">活动地点：</span>
             </div>
             <div class="btnbox">
               <a-input
-                v-model:value="inputV3"
-                style="width: 400px; height: 40px; border-radius: 8px"
-                placeholder="请输入活动地点"
-                maxlength="100"
+                  v-model:value="formData.activityAddress"
+                  style="width: 400px; height: 40px; border-radius: 8px"
+                  placeholder="请输入活动地点"
+                  maxlength="100"
               />
             </div>
           </div>
@@ -103,20 +106,20 @@
             <div class="signbox">
               <div class="sign">
                 <img
-                  src="@/assets/images/coursewareManage/asterisk.png"
-                  alt=""
+                    src="@/assets/images/coursewareManage/asterisk.png"
+                    alt=""
                 />
               </div>
               <span style="margin-right: 3px">活动公告：</span>
             </div>
             <div class="textarea">
               <a-textarea
-                v-model:value="textV1"
-                placeholder="请输入活动公告"
-                allow-clear
-                :rows="6"
-                show-count
-                :maxlength="200"
+                  v-model:value="formData.activityNotice"
+                  placeholder="请输入活动公告"
+                  allow-clear
+                  :rows="6"
+                  show-count
+                  :maxlength="200"
               />
             </div>
           </div>
@@ -126,12 +129,12 @@
             </div>
             <div class="textarea">
               <a-textarea
-                v-model:value="textV2"
-                placeholder="请输入活动说明"
-                allow-clear
-                :rows="6"
-                show-count
-                :maxlength="200"
+                  v-model:value="formData.activityExplain"
+                  placeholder="请输入活动说明"
+                  allow-clear
+                  :rows="6"
+                  show-count
+                  :maxlength="200"
               />
             </div>
           </div>
@@ -149,48 +152,23 @@
                 <div class="timerbox">
                   <span>活动开始前：</span>
                   <a-input-number
-                    :min="0"
-                    :max="30"
-                    :precision="0"
-                    style="
+                      :min="0"
+                      :max="30"
+                      :precision="0"
+                      style="
                       width: 88px;
                       height: 32px;
                       border-radius: 8px;
                       overflow: hidden;
                     "
-                    v-model:value="inputV4"
+                      v-model:value="formData.beforeSignIn"
                   />
                   <span style="color: #999999; margin-left: 8px"
-                    >分钟允许签到</span
+                  >分钟允许签到</span
                   >
                 </div>
                 <div class="timerbox">
                   <span>活动开始后：</span>
-                  <a-input-number
-                    :min="0"
-                    :max="30"
-                    :precision="0"
-                    style="
-                      width: 88px;
-                      height: 32px;
-                      border-radius: 8px;
-                      overflow: hidden;
-                    "
-                    v-model:value="inputV5"
-                  />
-                  <span style="color: #999999; margin-left: 8px"
-                    >分钟允许签到</span
-                  >
-                </div>
-              </div>
-              <!-- <div class="qdqtbox">
-                <div class="qtbtn">
-                  <div class="btntext">签退</div>
-                </div>
-              </div> -->
-              <!-- <div class="setbox">
-                <div class="timerbox">
-                  <span>结束前：</span>
                   <a-input-number
                       :min="0"
                       :max="30"
@@ -201,33 +179,15 @@
                       border-radius: 8px;
                       overflow: hidden;
                     "
-                      v-model:value="inputV6"
+                      v-model:value="formData.afterSignIn"
                   />
                   <span style="color: #999999; margin-left: 8px"
-                  >分钟（提前签退则记为早退）</span
+                  >分钟允许签到</span
                   >
                 </div>
-              </div> -->
+              </div>
             </div>
           </div>
-          <!--
-          <div class="main_item">
-            <div class="signbox">
-              <span style="margin-right: 3px">完成标准设置：</span>
-            </div>
-            <div class="btnbox">
-              <a-radio-group v-model:value="radioV1">
-                <a-radio v-model:checked="checked" :value="1" @click="cloradio1"
-                  >仅签到
-                </a-radio>-->
-          <!-- <a-radio v-model:checked="checked" :value="2" @click="cloradio1"
-                >签到、签退全部完成
-                </a-radio
-                > 
-              </a-radio-group>
-            </div>
-          </div>-->
-
           <div class="main_item" style="height: 40px">
             <div class="signbox">
               <span style="margin-right: 3px"></span>
@@ -237,342 +197,133 @@
         </div>
       </div>
       <div class="main_btns">
-        <button class="btn1" @click="closeDrawer1">取消</button>
-        <button class="btn2" @click="updateActivityInfo">确定</button>
+        <button class="btn1" @click="closeDrawer">取消</button>
+        <button class="btn2" @click="confirm">确定</button>
       </div>
     </div>
   </a-drawer>
 </template>
-<script>
-import { reactive, toRefs } from "vue";
-import * as api from "../../api/indexActivity";
-import * as apiTask from "../../api/indexTaskadd";
-import { RouterEditTask } from "@/api/indexTask";
-import { message } from "ant-design-vue";
+<script setup>
+import {defineEmits, defineProps, ref} from "vue";
+import {Form, message} from "ant-design-vue";
 import dayjs from "dayjs";
 
-export default {
-  name: "AddActive",
-  // components: {
-  // },
-  props: {
-    addactiveVisible: {
-      type: Boolean,
-      default: false,
+const props = defineProps({
+  type: Number,
+  taskList: []
+})
+const visible = ref(false)
+const formData = ref({
+  activityName: '',
+  activityNotice: '',
+  activityStartTime: '',
+  activityEndTime: '',
+  activityDuration: '',
+  activityAddress: '',
+  activityExplain: '',
+  beforeSignIn: '',
+  afterSignIn: '',
+})
+const emit = defineEmits({})
+const taskIndex = ref(-1);
+const dateTime = ref([]);
+const rulesRef = ref({
+  activityName: [
+    {
+      required: true,
+      message: '请输入活动名称',
     },
-    EditActiveId: {
-      type: Number,
-      default: null,
+  ],
+  activityNotice: [
+    {
+      required: true,
+      message: '请输入活动公告',
     },
-    taskIdDraft: {
-      type: Number,
-      default: null,
+  ],
+  activityStartTime: [
+    {
+      required: true,
+      message: '请输入活动开始时间',
     },
-    edit: {
-      //  是否为编辑
-      type: Boolean,
-      default: null,
+  ],
+  activityEndTime: [
+    {
+      required: true,
+      message: '请输入活动结束时间',
     },
-    projectId: {
-      type: Number,
-      default: null,
+  ],
+  activityDuration: [
+    {
+      required: true,
+      message: '请输入活动时长',
     },
-    chooseStageId: {
-      type: Number,
-      default: null,
+  ],
+  activityAddress: [
+    {
+      required: true,
+      message: '请输入活动地址',
     },
-    routerTaskId: {
-      type: Number,
-      default: 0,
-    },
-    isLevel: {
-      // 是否是关卡页面触发
-      type: Number,
-      default: null,
-    },
-    EditWorkId: {
-      // 要编辑的workId
-      type: Number,
-      default: null,
-    },
-    projectTaskId: {
-      // 要编辑的projectId
-      type: Number,
-      default: null,
-    },
-    routerId: {
-      type: Number,
-      default: null,
-    },
-    isactive: {
-      type: Number,
-      default: null,
-    },
-    projectTemplateId: {
-      type: Number,
-      default: null,
-    },
-  },
-  setup(props, ctx) {
-    const state = reactive({
-      inputV1: "",
-      inputV2: "",
-      inputV3: "",
-      inputV4: "",
-      inputV5: "",
-      inputV6: "",
-      textV1: "",
-      textV2: "",
-      radioV1: "",
-      time: "",
-      isClick: false,
-    });
-    const closeDrawer = () => {
-      ctx.emit("update:addactiveVisible", false);
-      ctx.emit("update:edit", false);
-      state.radioV1 = "";
-      state.inputV1 = "";
-      state.inputV2 = "";
-      state.inputV3 = "";
-      state.inputV4 = "";
-      state.inputV5 = "";
-      state.inputV6 = "";
-      state.textV1 = "";
-      state.textV2 = "";
-      state.time = "";
+  ],
+});
 
-      localStorage.setItem("stageId", props.chooseStageId);
-      localStorage.setItem("chapterId", props.isactive);
-    };
-    const closeDrawer1 = () => {
-      ctx.emit("update:addactiveVisible", false);
-      ctx.emit("update:edit", false);
-      state.radioV1 = "";
-      state.inputV1 = "";
-      state.inputV2 = "";
-      state.inputV3 = "";
-      state.inputV4 = "";
-      state.inputV5 = "";
-      state.inputV6 = "";
-      state.textV1 = "";
-      state.textV2 = "";
-      state.time = "";
-      localStorage.setItem("stageId", props.chooseStageId);
-      localStorage.setItem("chapterId", props.isactive);
-    };
-    const queryActive = () => {
-      api
-        .getActivity(props.EditActiveId)
-        .then((res) => {
-          console.log("获取活动信息", res);
-          //获取活动信息
-          state.inputV1 = res.data.data.activityName;
-          state.textV1 = res.data.data.activityNotice;
-          state.textV2 = res.data.data.activityExplain;
-          state.inputV2 = res.data.data.activityDuration;
-          state.inputV3 = res.data.data.activityAddress;
-          state.inputV5 = res.data.data.afterSignIn;
-          state.inputV6 = res.data.data.signOutTime;
-          state.inputV4 = res.data.data.beforeSignIn;
-          state.radioV1 = Number(res.data.data.standardSettings);
+const {resetFields, validate} = Form.useForm(formData, rulesRef);
 
-          state.time = [
-            dayjs(res.data.data.activityStartTime, "YYYY-MM-DD HH:mm"),
-            dayjs(res.data.data.activityEndTime, "YYYY-MM-DD HH:mm"),
-          ];
-        })
-        .catch(() => {});
-    };
-    const afterVisibleChange = (bool) => {
-      if (bool && props.edit) {
-        queryActive();
-      }
-    };
-    const cloradio1 = (value) => {
-      if (value != "") {
-        state.radioV1 = "";
-      }
-    };
-    const updateTask = async (res) => {
-      if (props.isLevel == 1) {
-        if (!props.isactive) {
-          message.destroy();
-          return message.warning("请先选中关卡");
-        }
-        await RouterEditTask({
-          chapterId: props.isactive,
-          courseId: res.data.data.id,
-          duration: res.data.data.activityDuration,
-          name: res.data.data.activityName,
-          routerId: props.routerId,
-          routerTaskId: props.routerTaskId || 0,
-          type: 9,
-          id: props.taskIdDraft
-        })
-          .then(() => {
-            //message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
-          })
-          .catch(() => {
-            //message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
-          });
-      } else if (props.isLevel == 2) {
-        await apiTask
-          .addTask({
-            courseId: res.data.data.id,
-            duration: res.data.data.activityDuration,
-            name: res.data.data.activityName,
-            projectId: props.projectId,
-            projectTaskId: props.projectTaskId || 0,
-            stageId: props.chooseStageId || 0,
-            type: 9,
-            id: props.taskIdDraft
-          })
-          .then(() => {
-            //message.success(`${props.edit ? "编辑" : "新增"}阶段任务成功`);
-          })
-          .catch(() => {
-            //////message.error(`${props.edit ? "编辑" : "新增"}阶段任务失败`);
-          });
-      } else if (props.isLevel == 3) {
-        await apiTask
-          .addTempTask({
-            courseId: res.data.data.id,
-            duration: res.data.data.activityDuration,
-            name: res.data.data.activityName,
-            projectTemplateId: props.projectTemplateId,
-            projectTaskId: props.projectTaskId || 0,
-            stageId: props.chooseStageId || 0,
-            type: 9,
-            id: props.taskIdDraft
-          })
-          .then(() => {
-            ctx.emit("changeData", false);
-            //message.success(`${props.edit ? "编辑" : "新增"}阶段任务成功`);
-          })
-          .catch(() => {
-            //message.error(`${props.edit ? "编辑" : "新增"}阶段任务失败`);
-          });
-      }
-    };
-    //创建活动
-    const updateActivityInfo = () => {
-      if (!state.inputV1) {
-        message.destroy();
-        return message.warning("请输入活动名称");
-      }
-      if (!state.textV1) {
-        message.destroy();
-        return message.warning("请输入活动公告");
-      }
-      if (!state.time) {
-        message.destroy();
-        return message.warning("请输入活动时间");
-      }
-      if (!state.inputV2) {
-        message.destroy();
-        return message.warning("请输入活动时长");
-      }
-      if (!state.inputV3) {
-        message.destroy();
-        return message.warning("请输入活动地址");
-      }
-
-      if (state.isClick) {
-        message.destroy();
-        message.error("请勿频繁点击");
-        return;
-      }
-      state.isClick = true;
-
-      let obj = {
-        activityAddress: state.inputV3, //活动地址
-        activityDuration: state.inputV2, //活动时长
-        activityExplain: state.textV2, //活动说明
-        activityEndTime: dayjs(state.time[1]).format("YYYY-MM-DD HH:mm"), //活动结束时间
-        activityId: props.edit ? props.EditActiveId : 0, //活动ID
-        activityName: state.inputV1, //活动名称
-        activityNotice: state.textV1, //活动公告
-        activityStartTime: dayjs(state.time[0]).format("YYYY-MM-DD HH:mm"), //活动开始时间
-        activityTag: "", //活动逻辑删除标识
-        afterSignIn: state.inputV5 ? state.inputV5 : 0, //活动开始后多少分钟签到
-        beforeSignIn: state.inputV4 ? state.inputV4 : 0, //活动开始前多少分钟签到
-        signOutTime: state.inputV6, //签退开始时间
-        standardSettings: state.radioV1, //标准设置
-        id: props.edit ? props.taskIdDraft : ""
-      };
-      console.log("obj", obj);
-      if (props.edit) {
-        //更新编辑活动信息
-        api
-          .updateActivity(obj)
-          .then(async (res) => {
-            closeDrawer();
-            await updateTask(res);
-            ctx.emit("changeData", false);
-            message.destroy();
-            message.success("更新成功");
-            state.isClick = false;
-          })
-          .catch(() => {
-            message.destroy();
-            message.error("更新失败");
-            state.isClick = false;
-          });
-      } else {
-        //新建活动信息
-        api
-          .createActivity(obj)
-          .then(async (res) => {
-            message.destroy();
-            message.success("创建成功");
-            closeDrawer();
-            await updateTask(res);
-            ctx.emit("changeData", false);
-            state.isClick = false;
-          })
-          .catch(() => {
-            message.destroy();
-            message.error("创建失败");
-            state.isClick = false;
-          });
-      }
-    };
-
-    const range = (start, end) => {
-      const result = [];
-
-      for (let i = start; i < end; i++) {
-        result.push(i);
-      }
-
-      return result;
-    };
-    const disabledDate = (current) => {
-      // Can not select days before today and today
-      console.log("1111", dayjs().endOf("day"));
-      return current && current < dayjs().startOf("day");
-    };
-
-    const disabledDateTime = () => {
-      return {
-        disabledHours: () => range(0, 24).splice(4, 20),
-        disabledMinutes: () => range(30, 60),
-        disabledSeconds: () => [55, 56],
-      };
-    };
-
-    return {
-      ...toRefs(state),
-      afterVisibleChange,
-      closeDrawer,
-      closeDrawer1,
-      cloradio1,
-      updateActivityInfo,
-      disabledDateTime,
-      disabledDate,
-    };
-  },
+const closeDrawer = () => {
+  visible.value = false
+  taskIndex.value = -1
+  dateTime.value = []
+  resetFields()
 };
+
+const range = (start, end) => {
+  const result = [];
+  for (let i = start; i < end; i++) {
+    result.push(i);
+  }
+  return result;
+};
+
+function timeChange(time, timeStr) {
+  formData.value.activityStartTime = timeStr[0]
+  formData.value.activityEndTime = timeStr[1]
+}
+
+const disabledDate = (current) => {
+  return current && current < dayjs().startOf('day');
+};
+
+const disabledRangeTime = () => ({
+  disabledHours: () => range(0, 24).splice(4, 20),
+  disabledMinutes: () => range(30, 60),
+  disabledSeconds: () => [55, 56],
+});
+
+
+async function confirm() {
+  await validate().catch(({errorFields}) => {
+    message.warning(errorFields[0].errors.join());
+    throw Error("数据校验不通过")
+  });
+  if (taskIndex.value === -1) {
+    const list = props.taskList
+    list.push({name: formData.value.activityName, type: props.type, info: {...formData.value}})
+  } else {
+    const data = props.taskList[taskIndex.value]
+    data.name = formData.value.activityName
+    data.info = {...formData.value}
+  }
+  emit('update:taskList', [...props.taskList])
+  closeDrawer()
+}
+
+function openDrawer(i, row) {
+  row && (formData.value = {...row.info});
+  row && (dateTime.value = [dayjs(row.info.activityStartTime, "YYYY-MM-DD HH:mm"), dayjs(row.info.activityEndTime, "YYYY-MM-DD HH:mm")]);
+  (i >= 0) && (taskIndex.value = i);
+  visible.value = true
+}
+
+defineExpose({openDrawer})
 </script>
 <style lang="scss">
 .ant-table-striped :deep(.table-striped) td {
@@ -657,6 +408,7 @@ export default {
           display: flex;
           align-items: flex-start;
           margin-bottom: 32px;
+
           .textarea {
             width: 400px;
 
@@ -678,6 +430,7 @@ export default {
               border-radius: 8px;
             }
           }
+
           .signbox {
             width: 120px;
             display: flex;