活动总结

杨泽宇
1 parent c9b846b0
Showing 6 changed files with 155 additions and 22 deletions
docs/develop/component.md
src/components/Tinymce/index.vue
src/router/modules/event.ts
src/views/event/handwork/edit.vue
src/views/event/handwork/index.vue
src/views/event/handwork/summary.vue
@@ -22,7 +22,9 @@
  
 ## 富文本
   * 代码位置：[src/components/Tinymce](http://bj.gitlab.cnlive.com/cnlive_project/cnlive-community-web-vue/blob/dev/src/components/Tinymce)
+  * 官方文档：[Tinymce](http://tinymce.ax-z.cn/)
   * Emit: `update:modelValue(content)`
+  * 表单重置清空内容：`window.tinymce.get(Tinymce.props.id.default).setContent("")`
   * 组件属性：
  
     | propName | propType | propAttr | propDesc | propDefault |
@@ -6,7 +6,7 @@
 import { ref, onMounted, onUnmounted } from "vue";
 import { uploadPicSource } from "@/api/user/login";
 import { toolbar, plugins } from "./settings/index";
-import load from './settings/load';
+import load from "./settings/load";
 import { ElMessage, ElLoading } from "element-plus";
  
 /**
@@ -37,15 +37,15 @@ const props = withDefaults(defineProps&lt;Props&gt;(), {
 const emit = defineEmits<{
   (e: "update:modelValue", val: string): void;
 }>();
-const cdnUrl = ref('https://unpkg.com/tinymce@5.10.3/tinymce.min.js')
-let pageLoading = ref(null)
+const cdnUrl = ref("https://unpkg.com/tinymce@5.10.3/tinymce.min.js");
+let pageLoading = ref(null);
 // 删除tinymce实例
 const destroyTinymce = () => {
-  const tinymce = window.tinymce.get(props.id)
-  if(tinymce) {
-    tinymce.destroy()
+  const tinymce = window.tinymce.get(props.id);
+  if (tinymce) {
+    tinymce.destroy();
   }
-}
+};
 // 初始化tinymce实例
 const initTinymce = () => {
   tinymce.init({
@@ -88,7 +88,7 @@ const initTinymce = () =&gt; {
     },
     // 内容改变监听
     init_instance_callback: (editor) => {
-      pageLoading.close()
+      pageLoading.close();
       // 赋默认值
       if (props.modelValue) {
         editor.setContent(props.modelValue);
@@ -97,24 +97,24 @@ const initTinymce = () =&gt; {
       editor.on("NodeChange Change KeyUp SetContent", () => {
         emit("update:modelValue", editor.getContent());
       });
-    },
+    }
   });
-}
+};
 onUnmounted(() => {
-  destroyTinymce()
-})
+  destroyTinymce();
+});
 onMounted(() => {
   pageLoading = ElLoading.service({
     lock: true,
-    text: '加载中，请稍候...'
-  })
+    text: "加载中，请稍候...",
+  });
   load(cdnUrl.value, (err) => {
     if (err) {
       ElMessage.error(err.message);
-      return
+      return;
     }
-    initTinymce()
-  })
+    initTinymce();
+  });
 });
 </script>
  
@@ -19,6 +19,11 @@ const event = {
     component: () => import('@/views/event/handwork/edit.vue'),
     meta: { title: '活动编辑' }
   }, {
+    path: '/event/summary',
+    name: 'summary',
+    component: () => import('@/views/event/handwork/summary.vue'),
+    meta: { title: '活动总结' }
+  }, {
     path: '/event/signup',
     name: 'signup',
     component: () => import('@/views/event/handwork/signup.vue'),
 <script setup lang="ts">
-import { reactive, ref, getCurrentInstance, onMounted, nextTick } from "vue";
+import { reactive, ref, getCurrentInstance, onMounted } from "vue";
 import { eventCategory, handworkEdit } from "@/api/event";
 import { useRoute } from "vue-router";
 import { back } from "@/utils/tool";
@@ -160,6 +160,11 @@ const rules = reactive({
  */
 const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
   if (!formEl) return;
+  form.publicityPic = [];
+  form.value1 = [];
+  form.value2 = [];
+  form.communityList = [];
+  window.tinymce.get(Tinymce.props.id.default).setContent("");
   formEl.resetFields();
 };
 /**
@@ -266,9 +271,6 @@ const handleFinish = (images) =&gt; {
     });
   }, 500);
 };
-const getContent = (data) => {
-  console.log(data);
-};
 onMounted(() => {
   getCategory();
   getCommunityList();
@@ -301,6 +303,11 @@ onMounted(() =&gt; {
         });
     }
   }
+  // setTimeout(() => {
+  //   console.log(window.tinymce.get(Tinymce.props.id.default))
+  //   console.log(Tinymce.props.id.default)
+  //   window.tinymce.get(Tinymce.props.id.default).setContent('tengxi')
+  // }, 500)
 });
 </script>
  
@@ -316,7 +323,6 @@ onMounted(() =&gt; {
         ref="ruleFormRef"
         label-width="120px"
         class="card-form"
-        :disabled="form.dataType === 'detail'"
       >
         <el-form-item label="活动名称" prop="name" style="width: 100%">
           <el-input
@@ -312,6 +312,13 @@ onMounted(() =&gt; {
               >查看人员</router-link
             ></el-button
           >
+          <!-- 活动结束以后可以填写活动总结 -->
+          <el-button type="text" v-show="new Date(scope.row.endTime) < new Date()"
+            ><router-link
+              :to="{ path: '/event/summary', query: { id: scope.row.id } }"
+              >活动总结</router-link
+            ></el-button
+          >
           <el-button
             type="text"
             @click="handleDelete(scope.row.id)"
+<script setup lang="ts">
+import { reactive, ref, getCurrentInstance, onMounted } from "vue";
+// import { eventCategory, handworkEdit } from "@/api/event";
+import { useRoute } from "vue-router";
+import { back } from "@/utils/tool";
+import Photowall from "@/components/Photowall/index.vue";
+import Tinymce from "@/components/Tinymce/index.vue";
+import type { ElForm } from "element-plus";
+let form = reactive({
+  data: {
+    summary: "",
+    imgs: "",
+  },
+  publicityPic: [],
+  dataType: "",
+  loading: false,
+});
+const ruleFormRef = ref<InstanceType<typeof ElForm>>();
+let instance: ComponentInternalInstance | null = getCurrentInstance();
+/**
+ * 表单验证规则
+ */
+const rules = reactive({
+  summary: [
+    {
+      required: true,
+      message: "请填写活动总结",
+      trigger: "change",
+    },
+  ],
+});
+/**
+ * 表单重置
+ */
+const resetForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
+  if (!formEl) return;
+  form.publicityPic = [];
+  window.tinymce.get(Tinymce.props.id.default).setContent("");
+  formEl.resetFields();
+};
+/**
+ * 表单提交
+ */
+const submitForm = (
+  formEl: InstanceType<typeof ElForm> | undefined,
+  type: number
+) => {
+  form.loading = true;
+  if (!formEl) return;
+  formEl.validate(async (valid) => {
+    if (valid) {
+      console.log("post api");
+    } else {
+      instance?.proxy?.$message.error("请检查表单格式");
+      form.loading = false;
+      return false;
+    }
+  });
+};
+/**
+ * 多图上传组件回调
+ * @param {string} images 回调的图片urls
+ * @param {string} tagName 标签
+ */
+const handleFinish = (images) => {
+  form.publicityPic = [];
+  setTimeout(() => {
+    images.map((item) => {
+      form.publicityPic.push({
+        url: item,
+      });
+    });
+  }, 500);
+};
+onMounted(() => {
+  console.log(useRoute().query);
+});
+</script>
+
+<template>
+  <div class="page-container">
+    <el-card class="form_card" style="max-width: 1303px">
+      <h1>活动总结</h1>
+      <el-form
+        :inline="true"
+        :model="form.data"
+        :rules="rules"
+        ref="ruleFormRef"
+        label-width="120px"
+        class="card-form"
+      >
+        <el-form-item label="活动总结" prop="summary" style="width: 100%">
+          <Tinymce v-model="form.data.summary"></Tinymce>
+        </el-form-item>
+        <el-form-item label="宣传图片" prop="imgs" style="width: 100%">
+          <Photowall
+            @finish="handleFinish"
+            :fileList="form.publicityPic"
+          ></Photowall>
+        </el-form-item>
+        <el-form-item style="width: 100%" v-show="form.dataType !== 'detail'">
+          <el-button
+            type="primary"
+            @click.prevent="submitForm(ruleFormRef, 0)"
+            :loading="form.loading"
+            >保存</el-button
+          >
+          <el-button type="info" @click="back">返回</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+  </div>
+</template>