活动删除接口

杨泽宇
1 parent a26a53a6
Showing 4 changed files with 162 additions and 189 deletions
src/api/event/index.ts
src/views/event/config.ts
src/views/event/handwork/edit.vue
src/views/event/handwork/index.vue
@@ -130,4 +130,17 @@ export const signupList = async (params: any) =&gt; {
     params: params
   })
   return res
+}
+
+/**
+ * @description 删除活动
+ * @function handworkDelete
+ */
+ export const handworkDelete = async (params: any) => {
+  let res: any = await request({
+    method: 'delete',
+    url: '/handwork/delete',
+    params: params
+  })
+  return res
 }
 \ No newline at end of file
 import type { EnumArrayItem } from "@/@type/module/basic"
  
-interface Item {
-  status: string,
-  publish: string,
-  value: number
-}
-
 // 活动状态和总结状态
-export const statusData: Item[] = [
+export const statusData: EnumArrayItem[] = [
   {
-    status: '草稿',
-    publish: '',
+    label: '未开始',
     value: 0
   },
   {
-    status: '提交未开始',
-    publish: '',
+    label: '进行中',
     value: 1
   },
   {
-    status: '进行中',
-    publish: '',
+    label: '已结束',
     value: 2
   },
-  {
-    status: '已结束',
-    publish: '',
-    value: 3
-  },
-  {
-    status: '活动结束',
-    publish: '草稿',
-    value: 4
-  },
-  {
-    status: '活动结束',
-    publish: '发布',
-    value: 5
-  }
 ]
  
 // 活动评价展示到前台状态
@@ -6,6 +6,7 @@ import { back } from &quot;@/utils/tool&quot;;
 import { getPropertyNbhds } from "@/api/community/residence";
 import { useLoginStore } from "@/pinia/login";
 import Photowall from "@/components/Photowall/index.vue";
+import { ElMessageBox } from "element-plus";
 import type { ElForm } from "element-plus";
 let form = reactive({
   data: {
@@ -21,10 +22,9 @@ let form = reactive({
     description: "",
     id: null,
     oid: useLoginStore()?.getOid ?? 0,
-    organizer: "",
     personLimit: null,
     publicityPic: "",
-    status: 0,
+    status: null,
     processDesc: "",
     neighborhoodId: "",
   },
@@ -40,44 +40,6 @@ let form = reactive({
 const ruleFormRef = ref<InstanceType<typeof ElForm>>();
 let instance: ComponentInternalInstance | null = getCurrentInstance();
 /**
- * 结束时间要晚于开始时间
- */
-// const checkStartTime = (rules, value, callback) => {
-//   if (checkTime(value, form.data.endTime)) {
-//     callback();
-//   } else {
-//     callback(new Error("结束时间要晚于开始时间"));
-//   }
-// };
-// const checkEndTime = (rules, value, callback) => {
-//   if (checkTime(form.data.startTime, value)) {
-//     callback();
-//   } else {
-//     callback(new Error("结束时间要晚于开始时间"));
-//   }
-// };
-// const checkSignUpStartTime = (rules, value, callback) => {
-//   if (checkTime(value, form.data.signupEndTime)) {
-//     callback();
-//   } else {
-//     callback(new Error("报名结束时间要晚于报名开始时间"));
-//   }
-// };
-// const checkSignUpEndTime = (rules, value, callback) => {
-//   if (checkTime(form.data.signupStartTime, value)) {
-//     callback();
-//   } else {
-//     callback(new Error("报名结束时间要晚于报名开始时间"));
-//   }
-// };
-// const checkTime = (startTime, endTime, isAfterNow = false) => {
-//   if (new Date(endTime).getTime() > new Date(startTime).getTime()) {
-//     return true;
-//   } else {
-//     return false;
-//   }
-// };
-/**
  * 时间组件回调
  * @param {array} value [开始时间, 结束时间]
  */
@@ -107,28 +69,11 @@ const rules = reactive({
       trigger: "change",
     },
   ],
-  startTime: [
-    {
-      required: true,
-      message: "结束时间要晚于开始时间",
-      trigger: "change",
-      // validator: checkStartTime,
-    },
-  ],
   endTime: [
     {
       required: true,
       message: "结束时间要晚于开始时间",
       trigger: "change",
-      // validator: checkEndTime,
-    },
-  ],
-  signupStartTime: [
-    {
-      required: true,
-      message: "报名结束时间要晚于报名开始时间",
-      trigger: "change",
-      // validator: checkSignUpStartTime,
     },
   ],
   signupEndTime: [
@@ -136,14 +81,14 @@ const rules = reactive({
       required: true,
       message: "报名结束时间要晚于报名开始时间",
       trigger: "change",
-      // validator: checkSignUpEndTime,
     },
   ],
   duration: [
     {
       required: true,
-      message: "请填写活动时长",
+      message: "请填写活动时长数字",
       trigger: "change",
+      type: "number",
     },
   ],
   location: [
@@ -158,6 +103,15 @@ const rules = reactive({
       required: true,
       message: "请填写活动单价",
       trigger: "change",
+      type: "number",
+    },
+  ],
+  personLimit: [
+    {
+      required: false,
+      message: "请填写人数限制",
+      trigger: "change",
+      type: "number",
     },
   ],
   description: [
@@ -186,24 +140,27 @@ const submitForm = (
   if (!formEl) return;
   formEl.validate(async (valid) => {
     if (valid) {
-      form.data.publicityPic = form.publicityPic
-        .map((item) => item.url)
-        .join(",");
-      handworkEdit(form.data)
-        .then((res) => {
-          if (res) {
-            instance?.proxy?.$message.success("操作成功");
-            back();
-          } else {
-            instance?.proxy?.$message.error("操作失败");
+      if (type) {
+        ElMessageBox.confirm(
+          "是否确定发布?（确认发布后将不可进行修改）",
+          "提示",
+          {
+            confirmButtonText: "确认",
+            cancelButtonText: "取消",
+            type: "warning",
           }
-        })
-        .catch((error) => {
-          console.log(error);
-        })
-        .finally(() => {
-          form.loading = false;
-        });
+        )
+          .then((res) => {
+            form.data.status = 1;
+            postApi(type);
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      } else {
+        form.data.status = 0;
+        postApi(type);
+      }
     } else {
       instance?.proxy?.$message.error("请检查表单格式");
       form.loading = false;
@@ -212,6 +169,26 @@ const submitForm = (
   });
 };
 /**
+ * 表单提交接口
+ * @param {number} type 1发布 0保存
+ */
+const postApi = async (type: number) => {
+  form.data.publicityPic = form.publicityPic.map((item) => item.url).join(",");
+  handworkEdit(form.data)
+    .then((res) => {
+      if (res) {
+        instance?.proxy?.$message.success(type ? "发布成功" : "已存为草稿");
+        history.go(-1);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    })
+    .finally(() => {
+      form.loading = false;
+    });
+};
+/**
  * 活动分类
  * @param {number | null} pageSize 一次请求多少条数据
  */
@@ -262,17 +239,29 @@ onMounted(() =&gt; {
   if (JSON.stringify(useRoute().query) === "{}") {
     form.dataType = "add";
   } else {
-    console.log(useRoute().query);
     form.dataType = "edit";
     form.data = useRoute().query;
+    form.data.personLimit = ~~useRoute().query.personLimit;
+    form.data.unitPrice = ~~useRoute().query.unitPrice;
+    form.data.duration = ~~useRoute().query.duration;
     form.data.craftId = ~~useRoute().query.craftId;
-    useRoute()
-      .query.publicityPic.split(",")
-      .map((item) => {
-        form.publicityPic.push({
-          url: item,
+    form.value1 = [useRoute().query.startTime, useRoute().query.endTime];
+    form.value2 = [
+      useRoute().query.signupStartTime,
+      useRoute().query.signupEndTime,
+    ];
+    form.communityList = useRoute()
+      .query.neighborhoodId.split(",")
+      .map((i) => i / 1);
+    if (useRoute().query.publicityPic) {
+      useRoute()
+        .query.publicityPic.split(",")
+        .map((item) => {
+          form.publicityPic.push({
+            url: item,
+          });
         });
-      });
+    }
   }
 });
 </script>
@@ -310,25 +299,7 @@ onMounted(() =&gt; {
             ></el-option>
           </el-select>
         </el-form-item>
-        <!-- <el-form-item label="开始时间" prop="startTime" style="width: 50%">
-          <el-date-picker
-            v-model="form.data.startTime"
-            type="datetime"
-            format="YYYY-MM-DD HH:mm:ss"
-            placeholder="请选择开始时间"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="结束时间" prop="endTime" style="width: 50%">
-          <el-date-picker
-            v-model="form.data.endTime"
-            type="datetime"
-            format="YYYY-MM-DD HH:mm:ss"
-            placeholder="请选择结束时间"
-          >
-          </el-date-picker>
-        </el-form-item> -->
-        <el-form-item label="活动时间" prop="startTime" style="width: 100%">
+        <el-form-item label="活动时间" prop="endTime" style="width: 100%">
           <el-date-picker
             v-model="form.value1"
             type="datetimerange"
@@ -339,11 +310,7 @@ onMounted(() =&gt; {
             @change="handleTimeChange"
           ></el-date-picker>
         </el-form-item>
-        <el-form-item
-          label="报名时间"
-          prop="signupStartTime"
-          style="width: 100%"
-        >
+        <el-form-item label="报名时间" prop="signupEndTime" style="width: 100%">
           <el-date-picker
             v-model="form.value2"
             type="datetimerange"
@@ -354,35 +321,9 @@ onMounted(() =&gt; {
             @change="handleSignupTimeChange"
           ></el-date-picker>
         </el-form-item>
-        <!-- <el-form-item
-          label="报名开始时间"
-          prop="signupStartTime"
-          style="width: 50%"
-        >
-          <el-date-picker
-            v-model="form.data.signupStartTime"
-            type="datetime"
-            format="YYYY-MM-DD HH:mm:ss"
-            placeholder="请选择报名开始时间"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item
-          label="报名结束时间"
-          prop="signupEndTime"
-          style="width: 50%"
-        >
-          <el-date-picker
-            v-model="form.data.signupEndTime"
-            type="datetime"
-            format="YYYY-MM-DD HH:mm:ss"
-            placeholder="请选择报名结束时间"
-          >
-          </el-date-picker>
-        </el-form-item> -->
         <el-form-item label="活动时长" prop="duration" style="width: 50%">
           <el-input
-            v-model.trim="form.data.duration"
+            v-model.number="form.data.duration"
             placeholder="请填写活动时长"
           >
             <template #append>小时</template>
@@ -390,7 +331,7 @@ onMounted(() =&gt; {
         </el-form-item>
         <el-form-item label="活动单价" prop="unitPrice" style="width: 50%">
           <el-input
-            v-model.trim="form.data.unitPrice"
+            v-model.number="form.data.unitPrice"
             placeholder="请填写活动单价"
           >
             <template #append>元</template>
@@ -423,16 +364,9 @@ onMounted(() =&gt; {
             type="textarea"
           />
         </el-form-item>
-        <el-form-item label="组织者" prop="organizer" style="width: 50%">
-          <el-input
-            v-model.trim="form.data.organizer"
-            placeholder="请填写活动组织者"
-            maxlength="15"
-          />
-        </el-form-item>
         <el-form-item label="人数限制" prop="personLimit" style="width: 50%">
           <el-input
-            v-model.trim="form.data.personLimit"
+            v-model.number="form.data.personLimit"
             placeholder="请填写人数限制"
             maxlength="15"
           />
@@ -458,11 +392,20 @@ onMounted(() =&gt; {
           </el-checkbox-group>
           <span class="tip" v-else>暂无小区</span>
         </el-form-item>
+        <!-- 新增活动的时候，只有保存按钮
+        编辑活动的时候，可以保存、可以发布，提交接口用status区分，1为发布，需要二次确认，0为保存 -->
         <el-form-item style="width: 100%" v-show="form.dataType !== 'detail'">
           <el-button
             type="primary"
-            @click.prevent="submitForm(ruleFormRef)"
+            @click.prevent="submitForm(ruleFormRef, 0)"
+            :loading="form.loading"
+            >保存</el-button
+          >
+          <el-button
+            type="success"
+            @click.prevent="submitForm(ruleFormRef, 1)"
             :loading="form.loading"
+            v-show="form.dataType === 'edit'"
             >发布</el-button
           >
           <el-button
 <script setup lang="ts">
 import { reactive, ref, onMounted } from "vue";
-import { handworkList, eventCategory } from "@/api/event";
+import { handworkList, eventCategory, handworkDelete } from "@/api/event";
 import { parseTime } from "@/utils/tool";
 import { statusData } from "./../config";
 import { useLoginStore } from "@/pinia/login";
@@ -88,6 +88,41 @@ const getCategory = async (pageSize: number = 20) =&gt; {
     console.log(e);
   }
 };
+/**
+ * 活动删除
+ * @param {number | string} id 活动id
+ */
+const handleDelete = (id: number | string) => {
+  ElMessageBox.confirm("是否确定删除该活动?", "提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        const res = await handworkDelete({
+          handworkId: id,
+        });
+        if (res?.data) {
+          ElMessage({
+            type: "success",
+            message: "操作成功",
+          });
+          getList()
+        } else {
+          ElMessage({
+            type: "error",
+            message: "操作失败",
+          });
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+};
 onMounted(() => {
   getList();
   getCategory();
@@ -99,7 +134,7 @@ onMounted(() =&gt; {
     <!-- <h1>手工活动</h1> -->
     <el-row style="padding-bottom: 20px">
       <el-form :inline="true" label-width="70px">
-        <el-form-item label="时间">
+        <el-form-item label="活动时间">
           <el-date-picker
             v-model="value1"
             type="datetimerange"
@@ -121,7 +156,7 @@ onMounted(() =&gt; {
           >
             <el-option
               v-for="(item, index) in statusData"
-              :label="item.status"
+              :label="item.label"
               :value="item.value"
             ></el-option>
           </el-select>
@@ -165,18 +200,20 @@ onMounted(() =&gt; {
         </template>
       </el-table-column>
       <el-table-column
-        prop="organizer"
-        label="发布人"
-        align="center"
-      ></el-table-column>
-      <el-table-column
         prop="signupNum"
         label="参与人数"
         align="center"
       ></el-table-column>
-      <el-table-column prop="startTime" label="开始时间" align="center">
+      <el-table-column prop="startTime" label="活动时间" align="center">
         <template #default="scope">
-          {{ parseTime(new Date(scope.row.startTime).getTime()) }}
+          {{ parseTime(new Date(scope.row.startTime).getTime()) }} ~
+          {{ parseTime(new Date(scope.row.endTime).getTime()) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="startTime" label="活动报名时间" align="center">
+        <template #default="scope">
+          {{ parseTime(new Date(scope.row.signupStartTime).getTime()) }} ~
+          {{ parseTime(new Date(scope.row.signupEndTime).getTime()) }}
         </template>
       </el-table-column>
       <el-table-column
@@ -195,18 +232,19 @@ onMounted(() =&gt; {
         align="center"
       ></el-table-column>
       <el-table-column prop="status" label="活动状态" align="center">
+        <!-- 活动状态值是当前时间和活动开始结束时间对比的结果
+        当前时间晚于活动结束时间，即活动已结束
+        当前时间早于活动开始时间，即活动未开始
+        当前时间介于活动开始、结束时间之间（含），即活动进行中 -->
         <template #default="scope">
-          {{ statusData.find((u) => u.value === scope.row.status)["status"] }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="status" label="发布总结" align="center">
-        <template #default="scope">
-          {{ statusData.find((u) => u.value === scope.row.status)["publish"] }}
+          <span v-show="new Date(scope.row.endTime) < new Date()">已结束</span>
+          <span v-show="new Date(scope.row.startTime) > new Date()">未开始</span>
+          <span v-show="new Date(scope.row.startTime) <= new Date() && new Date(scope.row.endTime) >= new Date()">进行中</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button type="text" :disabled="~~scope.row.status !== 0"
+          <el-button type="text"
             ><router-link
               :to="{ path: '/event/handwork/edit', query: scope.row }"
               >编辑</router-link
@@ -218,6 +256,9 @@ onMounted(() =&gt; {
               >查看人员</router-link
             ></el-button
           >
+          <el-button type="text" @click="handleDelete(scope.row.id)"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>