手工活动公益分类

杨泽宇
1 parent 0ddea150
Showing 8 changed files with 392 additions and 128 deletions
src/api/event/index.ts
src/router/modules/event.ts
src/views/event/category/index.vue
src/views/event/edit.vue → src/views/event/handwork/edit.vue
src/views/event/handwork.vue → src/views/event/handwork/index.vue
src/views/event/index.vue
src/views/repair/config.ts
src/views/repair/edit.vue
@@ -14,6 +14,45 @@ export const eventCategory = async ( params: any ) =&gt; {
   return res
 }
  
+/**
+ * @description 公益编辑
+ * @function eventCategoryEdit
+ */
+ export const eventCategoryEdit = async ( data: any ) => {
+  let res: any = await request({
+    method: 'post',
+    url: '/craft/insertOrUpdate',
+    data: data
+  })
+  return res
+}
+
+/**
+ * @description 公益删除
+ * @function eventCategoryOmit
+ */
+ export const eventCategoryOmit = async ( params: any ) => {
+  let res: any = await request({
+    method: 'delete',
+    url: '/craft/deleteCraftById',
+    params: params
+  })
+  return res
+}
+
+/**
+ * @description 公益详情
+ * @function eventCategoryDetail
+ */
+ export const eventCategoryDetail = async ( params: any ) => {
+  let res: any = await request({
+    method: 'get',
+    url: '/craft/getCraftById',
+    params: params
+  })
+  return res
+}
+
  
 /**
  * @description 手工活动列表
@@ -6,17 +6,17 @@ const event = {
   children: [{
     path: '/event/category',
     name: 'eventCategory',
-    component: () => import('@/views/event/index.vue'),
+    component: () => import('@/views/event/category/index.vue'),
     meta: { title: '公益分类' }
   }, {
     path: '/event/handwork',
     name: 'handwork',
-    component: () => import('@/views/event/handwork.vue'),
+    component: () => import('@/views/event/handwork/index.vue'),
     meta: { title: '手工活动' }
   }, {
     path: '/event/handwork/edit',
     name: 'handworkEdit',
-    component: () => import('@/views/event/edit.vue'),
+    component: () => import('@/views/event/handwork/edit.vue'),
     meta: { title: '手工活动编辑' }
   }]
 }
+<script setup lang="ts">
+import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+import {
+  eventCategory,
+  eventCategoryEdit,
+  eventCategoryOmit,
+  eventCategoryDetail,
+} from "@/api/event";
+import { parseTime } from "@/utils/tool";
+import * as store from "@/pinia/index";
+import Pagination from "@/components/Pagination/index.vue";
+import { ElMessageBox } from "element-plus";
+import type { ElForm } from "element-plus";
+interface Form {
+  page: number;
+  pageSize: number;
+  name: string;
+}
+interface Params {
+  total: number;
+  query: Form;
+}
+interface Data {
+  loading: boolean;
+  list: any[] | null;
+  params: Params;
+}
+let data = reactive({
+  list: [],
+  loading: false,
+  params: {
+    total: 0,
+    query: {
+      page: 1,
+      pageSize: 10,
+      name: "",
+    },
+  },
+});
+let form = reactive({
+  name: "",
+  status: "0",
+  id: null,
+  createTime: "",
+  deleteFlag: "",
+  oid: store?.family?.loginStore()?.organizationId ?? 0,
+});
+/**
+ * 表单验证规则
+ */
+const rules = reactive({
+  name: [
+    {
+      required: true,
+      message: "请填写公益名称",
+      trigger: "change",
+    },
+  ],
+});
+const dialogFormVisible = ref(false);
+const loading = ref(false);
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+let instance: ComponentInternalInstance | null = getCurrentInstance();
+/**
+ * 状态值
+ * @enum {number}
+ */
+enum statusEnum {
+  "禁用" = 0,
+  "启用",
+}
+/**
+ * 列表
+ */
+const getList = async () => {
+  data.loading = true;
+  try {
+    const res = await eventCategory(data.params.query);
+    data.list = res?.data?.data?.list;
+    data.params.total = res?.data?.data?.total;
+  } catch (e) {
+    console.log(e);
+  } finally {
+    data.loading = false;
+  }
+};
+/**
+ * 表单重置
+ */
+const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  dialogFormVisible.value = false;
+  if (!formEl) return;
+  formEl.resetFields();
+};
+/**
+ * 表单提交
+ */
+const submitForm = (
+  formEl: InstanceType<typeof ElForm> | undefined,
+  type: number
+) => {
+  loading.value = true;
+  if (!formEl) return;
+  formEl.validate(async (valid) => {
+    if (valid) {
+      eventCategoryEdit(form)
+        .then((res) => {
+          if (res) {
+            instance?.proxy?.$message.success("操作成功");
+            dialogFormVisible.value = false;
+            getList();
+          } else {
+            instance?.proxy?.$message.error("操作失败");
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    } else {
+      instance?.proxy?.$message.error("请检查表单格式");
+      loading.value = false;
+      return false;
+    }
+  });
+};
+/**
+ * 编辑
+ */
+const handleEdit = (obj: any) => {
+  eventCategoryDetail({ id: obj.id }).then((res) => {
+    form.id = res?.data?.data?.id;
+    form.name = res?.data?.data?.name;
+    form.status = res?.data?.data?.status?.toString();
+    form.oid = res?.data?.data?.oid;
+    form.createTime = res?.data?.data?.createTime;
+    form.deleteFlag = res?.data?.data?.deleteFlag;
+    dialogFormVisible.value = true;
+  });
+};
+/**
+ * 删除
+ */
+const handleDelete = (obj: any) => {
+  ElMessageBox.confirm("确认删除吗?", "警告", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(async () => {
+      try {
+        let res = await eventCategoryOmit({
+          id: obj.id,
+        });
+        if (res?.data) {
+          instance?.proxy?.$message.success("操作成功");
+          getList();
+        } else {
+          instance?.proxy?.$message.error("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    })
+    .catch(() => {
+      console.log("取消");
+    });
+};
+/**
+ * 弹框关闭
+ */
+const dialogClose: void = () => {
+  form.id = null;
+  form.name = "";
+  form.deleteFlag = "";
+  form.createTime = "";
+  form.oid = store?.family?.loginStore()?.organizationId ?? 0;
+  form.status = "0";
+};
+onMounted(() => {
+  getList();
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <h1>公益分类</h1>
+    <el-row style="padding-bottom: 20px">
+      <el-form :inline="true" label-width="70px">
+        <el-form-item label="名称">
+          <el-input
+            v-model.trim="data.params.query.name"
+            placeholder="请填写名称"
+            maxlength="15"
+            @change="getList"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="getList">查询</el-button>
+          <el-button type="primary" @click="dialogFormVisible = true"
+            >添加公益</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </el-row>
+    <el-table
+      :data="data.list"
+      style="width: 100%"
+      border
+      v-loading="data.loading"
+      align="center"
+      element-loading-text="拼命加载中"
+    >
+      <el-table-column prop="id" label="ID" align="center"></el-table-column>
+      <el-table-column
+        prop="name"
+        label="活动名称"
+        align="center"
+      ></el-table-column>
+      <el-table-column prop="createTime" label="添加时间" align="center">
+        <template #default="scope">
+          {{ parseTime(new Date(scope.row.createTime).getTime()) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" align="center">
+        <template #default="scope">
+          {{ statusEnum[scope.row.status] }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
+          <el-button type="text" @click="handleDelete(scope.row)"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <Pagination
+      :total="data.params.total"
+      v-model:currentPage="data.params.query.page"
+      v-model:pageSize="data.params.query.pageSize"
+      @pageChange="getList"
+    ></Pagination>
+
+    <el-dialog
+      v-model="dialogFormVisible"
+      title="编辑公益"
+      @close="dialogClose"
+    >
+      <el-form
+        :model="form"
+        label-width="120px"
+        ref="ruleFormRef"
+        :rules="rules"
+      >
+        <el-form-item label="公益名称" prop="name">
+          <el-input
+            v-model.trim="form.name"
+            placeholder="请填写名称"
+            autocomplete="off"
+            maxlength="15"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-radio-group v-model="form.status">
+            <el-radio label="1">启用</el-radio>
+            <el-radio label="0">禁用</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
+          <el-button
+            type="primary"
+            @click="submitForm(ruleFormRef)"
+            :loading="form.loading"
+            >确认</el-button
+          >
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
@@ -3,6 +3,7 @@ import { reactive, ref, getCurrentInstance, onMounted } from &quot;vue&quot;;
 import { eventCategory, handworkEdit } from "@/api/event";
 import { useRoute } from "vue-router";
 import { back } from "@/utils/tool";
+import * as store from "@/pinia";
 import type { ElForm } from "element-plus";
 let form = reactive({
   data: {
@@ -20,6 +21,7 @@ let form = reactive({
     publicityPic: "",
     status: 0,
   },
+  category: [],
   dataType: "",
   loading: false,
 });
@@ -102,6 +104,8 @@ const submitForm = (
           if (res) {
             instance?.proxy?.$message.success("操作成功");
             back();
+          } else {
+            instance?.proxy?.$message.error("操作失败");
           }
         })
         .catch((error) => {
@@ -117,11 +121,33 @@ const submitForm = (
     }
   });
 };
+/**
+ * 公益分类
+ * @param {number | null} pageSize 一次请求多少条数据
+ */
+const getCategory = async (pageSize: number = 20) => {
+  try {
+    const res = await eventCategory({
+      page: 1,
+      pageSize: pageSize,
+      oid: store?.family?.loginStore()?.organizationId ?? 0,
+    });
+    form.category = res?.data?.data?.list;
+    if (res?.data?.data?.total > pageSize) {
+      getCategory(res?.data?.data?.total);
+    }
+  } catch (e) {
+    console.log(e);
+  }
+};
 onMounted(() => {
+  getCategory()
   if (JSON.stringify(useRoute().query) === "{}") {
     form.dataType = "add";
   } else {
     form.dataType = "edit";
+    form.data = useRoute().query
+    form.data.craftId = ~~useRoute().query.craftId
   }
 });
 </script>
@@ -149,7 +175,7 @@ onMounted(() =&gt; {
         </el-form-item>
         <el-form-item label="活动分类" prop="craftId" style="width: 50%">
           <el-select v-model="form.data.craftId" placeholder="请选择活动分类">
-            <el-option label="分类" value="1000"></el-option>
+            <el-option v-for="(item, index) in form.category" :key="index" :label="item.name" :value="item.id"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="开始时间" prop="startTime" style="width: 50%">
@@ -162,12 +188,18 @@ onMounted(() =&gt; {
           </el-date-picker>
         </el-form-item>
         <el-form-item label="活动时长" prop="duration" style="width: 50%">
-          <el-input v-model.trim="form.data.duration" placeholder="请填写活动时长">
+          <el-input
+            v-model.trim="form.data.duration"
+            placeholder="请填写活动时长"
+          >
             <template #append>小时</template>
           </el-input>
         </el-form-item>
         <el-form-item label="活动单价" prop="unitPrice" style="width: 50%">
-          <el-input v-model.trim="form.data.unitPrice" placeholder="请填写活动单价">
+          <el-input
+            v-model.trim="form.data.unitPrice"
+            placeholder="请填写活动单价"
+          >
             <template #append>元</template>
           </el-input>
         </el-form-item>
@@ -2,7 +2,7 @@
 import { reactive, ref, onMounted } from "vue";
 import { handworkList } from "@/api/event";
 import { parseTime } from "@/utils/tool";
-import { statusData } from './config';
+import { statusData } from "./../config";
 import Pagination from "@/components/Pagination/index.vue";
 import { ElMessageBox, ElMessage } from "element-plus";
 interface Form {
@@ -34,11 +34,11 @@ let data = reactive({
       page: 1,
       pageSize: 10,
       oid: 0,
-      startTime: '',
-      endTime: '',
-      name: '',
+      startTime: "",
+      endTime: "",
+      name: "",
       status: null,
-      duration: null
+      duration: null,
     },
   },
 });
@@ -90,8 +90,17 @@ onMounted(() =&gt; {
           </el-date-picker>
         </el-form-item>
         <el-form-item label="活动状态">
-          <el-select v-model="data.params.query.status" placeholder="请选择活动状态" @change="getList" clearable>
-            <el-option v-for="(item, index) in statusData" :label="item.status" :value="item.value"></el-option>
+          <el-select
+            v-model="data.params.query.status"
+            placeholder="请选择活动状态"
+            @change="getList"
+            clearable
+          >
+            <el-option
+              v-for="(item, index) in statusData"
+              :label="item.status"
+              :value="item.value"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="名称">
@@ -139,11 +148,7 @@ onMounted(() =&gt; {
         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()) }}
         </template>
@@ -163,27 +168,23 @@ onMounted(() =&gt; {
         label="活动地址"
         align="center"
       ></el-table-column>
-      <el-table-column
-        prop="status"
-        label="活动状态"
-        align="center"
-      >
+      <el-table-column prop="status" label="活动状态" align="center">
         <template #default="scope">
-          {{statusData.find(u => u.value === scope.row.status)['status']}}
+          {{ statusData.find((u) => u.value === scope.row.status)["status"] }}
         </template>
       </el-table-column>
-      <el-table-column
-        prop="status"
-        label="发布总结"
-        align="center"
-      >
+      <el-table-column prop="status" label="发布总结" align="center">
         <template #default="scope">
-          {{statusData.find(u => u.value === scope.row.status)['publish']}}
+          {{ statusData.find((u) => u.value === scope.row.status)["publish"] }}
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template #default="scope">
-          <el-button type="text">编辑</el-button>
+          <el-button type="text" :disabled="~~scope.row.status !== 0"
+            ><router-link :to="{ path: '/event/handwork/edit', query: scope.row }"
+              >编辑</router-link
+            ></el-button
+          >
           <el-button type="text">删除</el-button>
           <el-button type="text">查看人员</el-button>
           <el-button type="text">编辑/查看/发布活动总结</el-button>
-<script setup lang="ts">
-import { reactive, ref, onMounted } from "vue";
-import { eventCategory } from '@/api/event';
-import { parseTime } from "@/utils/tool";
-import Pagination from "@/components/Pagination/index.vue";
-import { ElMessageBox, ElMessage } from "element-plus";
-interface Form {
-  page: number;
-  pageSize: number;
-}
-interface Params {
-  total: number;
-  query: Form;
-}
-interface Data {
-  loading: boolean;
-  list: any[] | null;
-  params: Params;
-}
-let data = reactive({
-  list: [],
-  loading: false,
-  params: {
-    total: 0,
-    query: {
-      page: 1,
-      pageSize: 10
-    },
-  },
-});
-/**
- * 列表
- */
-const getList = async () => {
-  data.loading = true;
-  try {
-    const res = await eventCategory(data.params.query);
-    data.list = res?.data?.data?.list;
-    data.params.total = res?.data?.data?.total;
-  } catch (e) {
-    console.log(e);
-  } finally {
-    data.loading = false;
-  }
-};
-onMounted(() => {
-  getList();
-});
-</script>
-
-<template>
-  <div class="page-container">
-    <h1>公益分类</h1>
-    <el-table
-      :data="data.list"
-      style="width: 100%"
-      border
-      v-loading="data.loading"
-      align="center"
-      element-loading-text="拼命加载中"
-    >
-      <el-table-column prop="id" label="ID" align="center"></el-table-column>
-      <el-table-column prop="name" label="活动名称" align="center"></el-table-column>
-      <el-table-column prop="createTime" label="添加时间" align="center"></el-table-column>
-      <el-table-column prop="status" label="状态" align="center"></el-table-column>
-      <el-table-column label="操作" align="center"></el-table-column>
-    </el-table>
-    <Pagination
-      :total="data.params.total"
-      v-model:currentPage="data.params.query.page"
-      v-model:pageSize="data.params.query.pageSize"
-      @pageChange="getList"
-    ></Pagination>
-  </div>
-</template>
@@ -4,28 +4,6 @@ interface Option {
 }
  
 /**
- * 维修项目
- */
-export const projects: Option[] = [
-  {
-    label: '马桶疏通',
-    value: 1
-  },
-  {
-    label: '下水道疏通',
-    value: 2
-  },
-  {
-    label: '水龙头维修',
-    value: 3
-  },
-  {
-    label: '更换灯泡',
-    value: 4
-  }
-]
-
-/**
  * 工单状态
  */
 export const status: Option[] = [
@@ -236,6 +236,7 @@ onMounted(() =&gt; {
           />
         </el-form-item>
         <el-form-item label="报修项目" prop="repairProject" style="width: 100%">
+          <!-- 启用状态的报修项目可选 -->
           <el-checkbox-group
             v-model="form.checkList"
             @change="(data) => (form.data.repairProject = data.join(','))"
@@ -245,6 +246,7 @@ onMounted(() =&gt; {
               v-for="(item, index) in form.projects"
               :key="index"
               :label="item.id"
+              :disabled="!item.status"
               >{{ item.name }}</el-checkbox
             >
           </el-checkbox-group>