活动报名增加字段多图上传组件

杨泽宇
1 parent 0851365b
Showing 9 changed files with 465 additions and 20 deletions
docs/develop/component.md
docs/develop/discuss.md
src/api/community/residence.ts
src/api/event/index.ts
src/components/Photowall/index.vue
src/router/modules/event.ts
src/views/event/handwork/edit.vue
src/views/event/handwork/index.vue
src/views/event/handwork/signup.vue
@@ -30,6 +30,20 @@
     | url | `String` | required | 上传地址 |  |
     | method | `String` | required | 请求方式 |  |
  
+## 多图上传
+  * 代码位置：[src/components/Photowall](http://bj.gitlab.cnlive.com/cnlive_project/cnlive-community-web-vue/blob/dev/src/components/Photowall)
+  * Emit: `finish(images[], tagName)`
+  * 组件属性：
+
+    | propName | propType | propAttr | propDesc | propDefault |
+    | :-----: | :-----: | :-----: | :--: | :--: |
+    | tagName | `String` | optional | 标签 |  |
+    | maxSize | `Number` | optional | 图片尺寸上限 | 1MB |
+    | fileList | `Array` | optional | 默认图片 |  |
+    | moduleName | `String` | optional | 后台交互用的module值 | test |
+    | tip | `String` | optional | 上传须知 | 最多可以上传9张图片，单张图片大小不可超过1MB |
+    | formats | `Array<String>` | optional | 图片格式 | [图片格式](develop/component?id=图片格式) |
+
 ## 单图上传
   * 代码位置：[src/components/Uploader](http://bj.gitlab.cnlive.com/cnlive_project/cnlive-community-web-vue/blob/dev/src/components/Uploader)
   * Emit: `imageChange(url, tagName)`
@@ -34,7 +34,21 @@
   > * 当前登录的用户是物业管理员，表单里才有关联小区。
   > * 查看登录成功返回值[释义](http://bj.gitlab.cnlive.com/cnlive_project/cnlive-community-web-vue/blob/dev/src/pinia/login.ts "释义")
  
+## 小区管理
+  **关联小区**
+  > * 【活动】关联小区，调【机构下小区】接口。
+  > * 【机构】关联小区，调【全部小区】接口。
+  > * 【工单列表】小区回显，调【全部小区】接口。
+  > * 【工单】关联小区，调【小区】接口。
+  > * 【通知】关联小区，调【小区】接口。
+  > * 【用户】关联小区，调【小区】接口。
+
 ## 物业管理
   **物业公告**
   > * 已发布的公告不可以被删除、修改。
-  > * 查看详情时表单不能编辑，禁用表单会把按钮也禁用掉，所以单列出来一个返回按钮。
 \ No newline at end of file
+  > * 查看详情时表单不能编辑，禁用表单会把按钮也禁用掉，所以单列出来一个返回按钮。
+
+## 活动管理
+  **活动列表**
+  > * 添加活动时，被禁用的活动分类不可以被选择。
+  > * 要验证活动结束时间晚于活动开始时间，报名结束时间要晚于报名开始时间，没有验证和【现在】时间的前后关系。 
 \ No newline at end of file
@@ -31,4 +31,12 @@ export function allNeighborhood() {
     method: 'get',
     url: '/neighborhood/allList'
   })
+}
+
+// 机构下小区
+export function getPropertyNbhds () {
+  return request({
+    method: 'get',
+    url: '/neighborhood/getPropertyNbhds'
+  })
 }
 \ No newline at end of file
@@ -104,4 +104,30 @@ export const eventCategory = async ( params: any ) =&gt; {
     params: params
   })
   return res
+}
+
+/**
+ * @description 报名信息
+ * @function signupList
+ */
+export const signupList = async (params: any) => {
+  let res: any = await request({
+    method: 'get',
+    url: '/signup/signupListByHandworkId',
+    params: params
+  })
+  return res
+}
+
+/**
+ * @description 报名信息
+ * @function cancelSignup
+ */
+ export const cancelSignup = async (params: any) => {
+  let res: any = await request({
+    method: 'post',
+    url: '/signup/cancelSignup',
+    params: params
+  })
+  return res
 }
 \ No newline at end of file
+<script setup lang="ts">
+/**
+ * 多图上传组件
+ * @module Photowall
+ */
+import { ref, reactive } from "vue";
+import { useLoginStore } from "@/pinia/login";
+import { ElMessage } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
+import type {
+  UploadFile,
+  ElFile,
+  ElUploadProgressEvent,
+} from "element-plus/es/components/upload/src/upload.type";
+/**
+ * @description 组件属性
+ * @prop {string | null} tagName 标签
+ * @prop {string} moduleName 上传接口需要传的module值
+ * @prop {number} limit 图片数量上限
+ * @prop {string} tip 上传须知
+ * @prop {array} fileList 默认显示的图片
+ * @prop {array<string>} formats 允许上传的图片格式
+ * @prop {number | null} maxSize 允许上传的最大图片尺寸 default = 1 means 1MB
+ */
+interface Props {
+  tagName?: string;
+  moduleName?: string;
+  limit?: number;
+  maxSize?: number;
+  formats?: string[];
+  tip?: string;
+  fileList?: string[];
+}
+const props = withDefaults(defineProps<Props>(), {
+  tagName: "",
+  moduleName: "test",
+  limit: 9,
+  maxSize: 1,
+  fileList: () => [],
+  formats: () => [
+    "image/jpeg",
+    "image/gif",
+    "image/png",
+    "image/x-icon",
+    "image/svg+xml",
+    "image/webp",
+  ],
+  tip: "最多可以上传9张图片，单张图片大小不可超过1MB",
+});
+const dialogImageUrl = ref("");
+const dialogVisible = ref(false);
+/**
+ * @description 上传图片接口配置
+ */
+const uploadSettings = reactive({
+  uploadUrl: `${import.meta.env.VITE_BASE_URL}upload/uploadPicSource?module=${
+    props.moduleName
+  }`,
+  headers: {
+    type: "formData",
+    "X-Token": useLoginStore()?.getToken,
+  },
+});
+/**
+ * @method handlePictureCardPreview
+ * @description 已上传图片大图预览
+ * @param {UploadFile} file 文件对象
+ */
+const handlePictureCardPreview = (file: UploadFile) => {
+  dialogImageUrl.value = file?.response?.data;
+  dialogVisible.value = true;
+};
+/**
+ * @description 图片数量超上限提示
+ */
+const handleExceed = () => {
+  ElMessage.error(`最多可以传${props.limit}张图片`);
+};
+/**
+ * @method beforeAvatarUpload
+ * @description 图片上传之前检查格式、最大尺寸
+ * @param {ElFile} file 文件对象
+ */
+const beforeAvatarUpload = (file: ElFile) => {
+  const isFormatAllowed = props.formats.includes(file.type);
+  const isSizeAllowed = file.size / 1024 / 1024 < props.maxSize;
+  if (!isFormatAllowed) {
+    ElMessage.error("图片格式不支持");
+  }
+  if (!isSizeAllowed) {
+    ElMessage.error("图片尺寸过大");
+  }
+  return isFormatAllowed && isSizeAllowed;
+};
+/**
+ * @method handleAvatarSuccess
+ * @description 图片上传成功
+ * @param {object} res 接口返回信息
+ * @param {object} file 当前文件
+ * @param {object} fileList 上传成功的文件列表
+ */
+const handleAvatarSuccess = (
+  res: ElUploadProgressEvent,
+  file: ElFile,
+  fileList: ElFile[]
+) => {
+  console.log(fileList)
+  emit(
+    "finish",
+    fileList.map((item) => item.response? item.response.data: item.url),
+    props.tagName
+  );
+};
+/**
+ * @method handleRemove
+ * @description 图片移除
+ * @param {object} file 当前文件
+ * @param {object} fileList 上传成功的文件列表
+ */
+const handleRemove = (file: ElFile, fileList: ElFile[]) => {
+  emit(
+    "finish",
+    fileList.map((item) => item.response? item.response.data: item.url),
+    props.tagName
+  );
+};
+const emit = defineEmits<{
+  (e: "finish", images: string, tagName: string): void;
+}>();
+</script>
+
+<template>
+  <el-upload
+    :action="uploadSettings.uploadUrl"
+    :headers="uploadSettings.headers"
+    :with-credentials="true"
+    :limit="props.limit"
+    name="multipartFile"
+    list-type="picture-card"
+    :file-list="props.fileList"
+    :on-preview="handlePictureCardPreview"
+    :on-exceed="handleExceed"
+    :on-success="handleAvatarSuccess"
+    :on-remove="handleRemove"
+    :before-upload="beforeAvatarUpload"
+  >
+    <el-icon><plus /></el-icon>
+  </el-upload>
+  <div class="tip">{{ props.tip }}</div>
+  <el-dialog v-model="dialogVisible" title="图片预览">
+    <div style="text-align: center">
+      <el-image
+        :src="dialogImageUrl"
+        fit="contain"
+        style="height: 500px"
+      ></el-image>
+    </div>
+  </el-dialog>
+</template>
@@ -7,17 +7,22 @@ const event = {
     path: '/event/category',
     name: 'eventCategory',
     component: () => import('@/views/event/category/index.vue'),
-    meta: { title: '公益分类' }
+    meta: { title: '活动类型' }
   }, {
     path: '/event/handwork',
     name: 'handwork',
     component: () => import('@/views/event/handwork/index.vue'),
-    meta: { title: '手工活动' }
+    meta: { title: '活动列表' }
   }, {
     path: '/event/handwork/edit',
     name: 'handworkEdit',
     component: () => import('@/views/event/handwork/edit.vue'),
-    meta: { title: '手工活动编辑' }
+    meta: { title: '活动编辑' }
+  }, {
+    path: '/event/signup',
+    name: 'signup',
+    component: () => import('@/views/event/handwork/signup.vue'),
+    meta: { title: '报名信息' }
   }, {
     path: '/event/feedback',
     name: 'feedback',
 <script setup lang="ts">
-import { reactive, ref, getCurrentInstance, onMounted } from "vue";
+import { reactive, ref, getCurrentInstance, onMounted, nextTick } from "vue";
 import { eventCategory, handworkEdit } from "@/api/event";
 import { useRoute } from "vue-router";
 import { back } from "@/utils/tool";
-// import * as store from "@/pinia";
+import { getPropertyNbhds } from "@/api/community/residence";
 import { useLoginStore } from "@/pinia/login";
+import Photowall from "@/components/Photowall/index.vue";
 import type { ElForm } from "element-plus";
 let form = reactive({
   data: {
     name: "",
     craftId: null,
     startTime: "",
+    endTime: "",
+    signupStartTime: "",
+    signupEndTime: "",
     duration: null,
     location: "",
     unitPrice: null,
@@ -21,14 +25,71 @@ let form = reactive({
     personLimit: null,
     publicityPic: "",
     status: 0,
+    processDesc: "",
+    neighborhoodId: "",
   },
+  publicityPic: [],
   category: [],
+  communities: [],
+  communityList: [],
+  value1: [],
+  value2: [],
   dataType: "",
   loading: false,
 });
 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 [开始时间, 结束时间]
+ */
+const handleTimeChange = (value: array) => {
+  form.data.startTime = value ? value[0] : "";
+  form.data.endTime = value ? value[1] : "";
+};
+const handleSignupTimeChange = (value: array) => {
+  form.data.signupStartTime = value ? value[0] : "";
+  form.data.signupEndTime = value ? value[1] : "";
+};
+/**
  * 表单验证规则
  */
 const rules = reactive({
@@ -49,8 +110,33 @@ const rules = reactive({
   startTime: [
     {
       required: true,
-      message: "请选择活动开始时间",
+      message: "结束时间要晚于开始时间",
       trigger: "change",
+      // validator: checkStartTime,
+    },
+  ],
+  endTime: [
+    {
+      required: true,
+      message: "结束时间要晚于开始时间",
+      trigger: "change",
+      // validator: checkEndTime,
+    },
+  ],
+  signupStartTime: [
+    {
+      required: true,
+      message: "报名结束时间要晚于报名开始时间",
+      trigger: "change",
+      // validator: checkSignUpStartTime,
+    },
+  ],
+  signupEndTime: [
+    {
+      required: true,
+      message: "报名结束时间要晚于报名开始时间",
+      trigger: "change",
+      // validator: checkSignUpEndTime,
     },
   ],
   duration: [
@@ -77,7 +163,7 @@ const rules = reactive({
   description: [
     {
       required: true,
-      message: "请填写活动内容",
+      message: "请填写活动简介",
       trigger: "change",
     },
   ],
@@ -100,6 +186,7 @@ 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) {
@@ -131,7 +218,6 @@ const getCategory = async (pageSize: number = 20) =&gt; {
     const res = await eventCategory({
       page: 1,
       pageSize: pageSize,
-      // oid: store?.family?.loginStore()?.organizationId ?? 0,
       oId: useLoginStore()?.getOid ?? 0,
     });
     form.category = res?.data?.data?.list;
@@ -142,14 +228,48 @@ const getCategory = async (pageSize: number = 20) =&gt; {
     console.log(e);
   }
 };
+/**
+ * 机构下小区列表
+ */
+const getCommunityList = async () => {
+  try {
+    const res = await getPropertyNbhds();
+    form.communities = res?.data?.data;
+  } catch (e) {
+    console.log(e);
+  }
+};
+/**
+ * 多图上传组件回调
+ * @param {string} images 回调的图片urls
+ * @param {string} tagName 标签
+ */
+const handleFinish = (images) => {
+  form.publicityPic = [];
+  setTimeout(() => {
+    images.map((item) => {
+      form.publicityPic.push({
+        url: item,
+      });
+    });
+  }, 500);
+};
 onMounted(() => {
-  getCategory()
+  getCategory();
+  getCommunityList();
   if (JSON.stringify(useRoute().query) === "{}") {
     form.dataType = "add";
   } else {
     form.dataType = "edit";
-    form.data = useRoute().query
-    form.data.craftId = ~~useRoute().query.craftId
+    form.data = useRoute().query;
+    form.data.craftId = ~~useRoute().query.craftId;
+    useRoute()
+      .query.publicityPic.split(",")
+      .map((item) => {
+        form.publicityPic.push({
+          url: item,
+        });
+      });
   }
 });
 </script>
@@ -157,8 +277,8 @@ onMounted(() =&gt; {
 <template>
   <div class="page-container">
     <el-card class="form_card" style="max-width: 1303px">
-      <h1 v-show="form.dataType === 'add'">新增手工活动</h1>
-      <h1 v-show="form.dataType === 'edit'">编辑手工活动</h1>
+      <h1 v-show="form.dataType === 'add'">新增活动</h1>
+      <h1 v-show="form.dataType === 'edit'">编辑活动</h1>
       <el-form
         :inline="true"
         :model="form.data"
@@ -175,12 +295,19 @@ onMounted(() =&gt; {
             maxlength="15"
           />
         </el-form-item>
-        <el-form-item label="活动分类" prop="craftId" style="width: 50%">
+        <el-form-item label="活动分类" prop="craftId" style="width: 100%">
+          <!-- 被禁用了的活动分类不可以选择 -->
           <el-select v-model="form.data.craftId" placeholder="请选择活动分类">
-            <el-option v-for="(item, index) in form.category" :key="index" :label="item.name" :value="item.id"></el-option>
+            <el-option
+              v-for="(item, index) in form.category"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+              :disabled="!item.status"
+            ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="开始时间" prop="startTime" style="width: 50%">
+        <!-- <el-form-item label="开始时间" prop="startTime" style="width: 50%">
           <el-date-picker
             v-model="form.data.startTime"
             type="datetime"
@@ -189,6 +316,63 @@ onMounted(() =&gt; {
           >
           </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-date-picker
+            v-model="form.value1"
+            type="datetimerange"
+            range-separator="至"
+            format="YYYY-MM-DD HH:mm:ss"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            @change="handleTimeChange"
+          ></el-date-picker>
+        </el-form-item>
+        <el-form-item label="报名时间" prop="signupStartTime" style="width: 100%">
+          <el-date-picker
+            v-model="form.value2"
+            type="datetimerange"
+            range-separator="至"
+            format="YYYY-MM-DD HH:mm:ss"
+            start-placeholder="报名开始时间"
+            end-placeholder="报名结束时间"
+            @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"
@@ -212,10 +396,20 @@ onMounted(() =&gt; {
             maxlength="15"
           />
         </el-form-item>
-        <el-form-item label="活动内容" prop="description" style="width: 100%">
+        <el-form-item label="活动简介" prop="description" style="width: 100%">
           <el-input
             v-model.trim="form.data.description"
-            placeholder="请填写活动内容"
+            placeholder="请填写活动简介"
+            maxlength="1500"
+            show-word-limit
+            :rows="5"
+            type="textarea"
+          />
+        </el-form-item>
+        <el-form-item label="流程介绍" prop="processDesc" style="width: 100%">
+          <el-input
+            v-model.trim="form.data.processDesc"
+            placeholder="请填写流程介绍"
             maxlength="1500"
             show-word-limit
             :rows="5"
@@ -236,6 +430,27 @@ onMounted(() =&gt; {
             maxlength="15"
           />
         </el-form-item>
+        <el-form-item label="宣传图片" prop="publicityPic" style="width: 100%">
+          <Photowall
+            @finish="handleFinish"
+            :fileList="form.publicityPic"
+          ></Photowall>
+        </el-form-item>
+        <el-form-item label="小区" prop="neighborhoodId" style="width: 100%">
+          <el-checkbox-group
+            v-model="form.communityList"
+            @change="(data) => (form.data.neighborhoodIds = data.join(','))"
+            v-if="form.communities.length"
+          >
+            <el-checkbox
+              v-for="(item, index) in form.communities"
+              :key="index"
+              :label="item.id"
+              >{{ item.name }}</el-checkbox
+            >
+          </el-checkbox-group>
+          <span class="tip" v-else>暂无小区</span>
+        </el-form-item>
         <el-form-item style="width: 100%" v-show="form.dataType !== 'detail'">
           <el-button
             type="primary"
@@ -3,6 +3,7 @@ import { reactive, ref, onMounted } from &quot;vue&quot;;
 import { handworkList } from "@/api/event";
 import { parseTime } from "@/utils/tool";
 import { statusData } from "./../config";
+import { useLoginStore } from "@/pinia/login";
 import Pagination from "@/components/Pagination/index.vue";
 import { ElMessageBox, ElMessage } from "element-plus";
 interface Form {
@@ -33,7 +34,7 @@ let data = reactive({
     query: {
       page: 1,
       pageSize: 10,
-      oid: 0,
+      oid: useLoginStore()?.getOid ?? 0,
       startTime: "",
       endTime: "",
       name: "",
+<template>
+  报名信息
+</template>
 \ No newline at end of file