添加心链计划功能

src/api/plan/index.js

@@ -0,0 +1,45 @@
+import { request } from "@/utils/service"
+
+/** 增 */
+export function createTableDataApi(data) {
+  return request({
+    url: "/alumniHeart/insertHeartData",
+    method: "post",
+    data
+  })
+}
+
+/** 删 */
+export function deleteTableDataApi(id) {
+  return request({
+    url: `/alumniHeart/deleteHeartById/?id=${id}`,
+    method: "get"
+  })
+}
+
+/** 改 */
+export function updateTableDataApi(data) {
+  return request({
+    url: "/alumniHeart/updateHeartData",
+    method: "post",
+    data
+  })
+}
+
+/** 查 */
+export function getTableDataApi(params) {
+  return request({
+    url: "/alumniHeart/queryHeartPage",
+    method: "get",
+    params
+  })
+}
+
+/** 置顶 */
+export function handleTopReq(data) {
+  return request({
+    url: "/alumniHeart/HeartTopup",
+    method: "post",
+    data
+  })
+}

src/components/customEditor/index.vue

@@ -51,6 +51,9 @@ const init = () => {
       "table"
     ],
     image: {
+      // 本地
+      // uploadUrl: "/alumni/api/file/uploadFile",
+      // 线上
       uploadUrl: "https://chtech.ncjti.edu.cn/alumnus/alumni_api/alumni/api/file/uploadFile",
       uploadFormName: "file",
       uploadHeaders: {

src/router/index.js

@@ -218,6 +218,26 @@ export const constantRoutes = [
     ]
   },
   {
+    path: "/plan",
+    component: Layouts,
+    redirect: "/plan/index",
+    name: "Plan",
+    meta: {
+      title: "心链计划"
+    },
+    children: [
+      {
+        path: "index",
+        component: () => import("@/views/plan/index.vue"),
+        name: "PlanIndex",
+        meta: {
+          title: "心链计划",
+          svgIcon: "activity-management"
+        }
+      }
+    ]
+  },
+  {
     path: "/account-management",
     component: Layouts,
     redirect: "/account-management/index",

src/views/plan/index.vue

@@ -0,0 +1,315 @@
+<script setup>
+import { reactive, ref, watch } from "vue"
+import { createTableDataApi, deleteTableDataApi, updateTableDataApi, getTableDataApi, handleTopReq } from "@/api/plan"
+import { ElMessage, ElMessageBox } from "element-plus"
+import { usePagination } from "@/hooks/usePagination"
+import { cloneDeep } from "lodash-es"
+import CustomEditor from "@/components/customEditor/index.vue"
+import { getToken } from "@/utils/cache/cookies"
+
+const loading = ref(false)
+const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
+
+const elUploadRef = ref(null)
+
+//#region 增
+const DEFAULT_FORM_DATA = {
+  id: undefined,
+  equityName: "",
+  coverImage: "",
+  content: ""
+}
+const temImage = ref([])
+const dialogVisible = ref(false)
+const formRef = ref(null)
+const formData = ref(cloneDeep(DEFAULT_FORM_DATA))
+
+const formRules = {
+  equityName: [{ required: true, trigger: "blur", message: "权益名称必填" }],
+  coverImage: [{ required: true, trigger: "blur", message: "封面图必传" }],
+  content: [{ required: true, trigger: "blur", message: "权益内容必填" }]
+}
+const handleCreateOrUpdate = () => {
+  formRef.value?.validate((valid, fields) => {
+    if (!valid) return console.error("表单校验不通过", fields)
+    loading.value = true
+    const api = formData.value.id === undefined ? createTableDataApi : updateTableDataApi
+    api(formData.value)
+      .then(() => {
+        ElMessage.success("操作成功")
+        dialogVisible.value = false
+        elUploadRef.value?.clearFiles()
+        getTableData()
+      })
+      .catch(() => {
+        loading.value = false
+      })
+  })
+}
+const resetForm = () => {
+  formRef.value?.clearValidate()
+  elUploadRef.value?.clearFiles()
+  formData.value = cloneDeep(DEFAULT_FORM_DATA)
+}
+//#endregion
+
+//#region 删
+const handleDelete = (row) => {
+  ElMessageBox.confirm("确认删除？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  }).then(() => {
+    deleteTableDataApi(row.id).then(() => {
+      ElMessage.success("删除成功")
+      getTableData()
+    })
+  })
+}
+//#endregion
+
+//#region 改
+const handleUpdate = (row) => {
+  // console.log(row)
+  formData.value = cloneDeep(row)
+  temImage.value = []
+  temImage.value.push({
+    url: formData.value.coverImage
+  })
+  dialogVisible.value = true
+}
+//#endregion
+
+const handleTop = (row) => {
+  ElMessageBox.confirm("确认置顶吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  }).then(() => {
+    const data = {
+      id: row.id,
+      isTop: row.isTop == 1 ? 2 : 1
+    }
+    handleTopReq(data).then(() => {
+      ElMessage.success("操作成功")
+      getTableData()
+    })
+  })
+}
+
+//#region 查
+const tableData = ref([])
+const searchFormRef = ref(null)
+const searchData = reactive({
+  name: undefined,
+  createTime: []
+})
+const getTableData = () => {
+  loading.value = true
+
+  getTableDataApi({
+    currentPage: paginationData.currentPage,
+    pageCount: paginationData.pageSize,
+    name: searchData.name,
+    startTime: searchData.createTime ? searchData.createTime[0] : undefined,
+    endTime: searchData.createTime ? searchData.createTime[1] : undefined
+  })
+    .then(({ data }) => {
+      // console.log(data)
+
+      paginationData.total = data.totalCount
+      tableData.value = data.list
+    })
+    .catch(() => {
+      tableData.value = []
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+const handleSearch = () => {
+  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
+}
+const resetSearch = () => {
+  searchFormRef.value?.resetFields()
+  handleSearch()
+}
+
+// 新增按钮回调
+const handleAdd = () => {
+  resetForm()
+  dialogVisible.value = true
+}
+
+// 富文本编辑器组件自定义事件
+const getEditorValue = (data) => {
+  // console.log(data)
+  formData.value.content = data
+}
+
+const handleAvatarSuccess = (response) => {
+  formData.value.coverImage = response.data.fileUrl
+}
+
+const handleRemove = () => {
+  // todo 删除图片
+  formData.value.coverImage = ""
+}
+
+// 当超出限制时，执行的钩子函数
+const handleExceed = () => {
+  ElMessage.warning("只能上传一张图片")
+}
+//#endregion
+
+/** 监听分页参数的变化 */
+watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
+</script>
+
+<template>
+  <div class="app-container">
+    <el-card v-loading="loading" header="心链计划">
+      <div class="toolbar-wrapper">
+        <el-form ref="searchFormRef" :inline="true" :model="searchData">
+          <el-form-item prop="name" label="权益名称">
+            <el-input v-model="searchData.name" placeholder="请输入" />
+          </el-form-item>
+          <el-form-item prop="createTime" label="创建时间">
+            <el-date-picker
+              v-model="searchData.createTime"
+              type="datetimerange"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              value-format="YYYY:MM:DD HH:mm:ss"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+            <el-button @click="resetSearch" plain>重置</el-button>
+          </el-form-item>
+        </el-form>
+        <div>
+          <el-button type="primary" @click="handleAdd">添加权益</el-button>
+        </div>
+      </div>
+      <div class="table-wrapper">
+        <el-table :data="tableData" max-height="500">
+          <el-table-column type="index" label="序号" width="100" align="center" />
+          <el-table-column prop="equityName" label="权益名称" align="center" />
+          <el-table-column label="封面图" align="center">
+            <template #default="{ row }">
+              <el-image
+                style="width: 120px; height: 80px"
+                fit="cover"
+                :src="row.coverImage"
+                :preview-src-list="[row.coverImage]"
+                preview-teleported
+                hide-on-click-modal
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="createTime" label="创建时间" align="center" />
+          <el-table-column label="操作" width="200" align="center">
+            <template #default="scope">
+              <el-link type="warning" @click="handleTop(scope.row)">
+                {{ scope.row.isTop == 1 ? "取消置顶" : "置顶" }}
+              </el-link>
+              <el-link type="primary" @click="handleUpdate(scope.row)">编辑</el-link>
+              <el-link type="danger" @click="handleDelete(scope.row)">删除</el-link>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="pager-wrapper">
+        <el-pagination
+          background
+          :layout="paginationData.layout"
+          :page-sizes="paginationData.pageSizes"
+          :total="paginationData.total"
+          :page-size="paginationData.pageSize"
+          :currentPage="paginationData.currentPage"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </el-card>
+    <!-- 新增/修改 -->
+    <el-dialog
+      v-model="dialogVisible"
+      :close-on-click-modal="false"
+      :title="formData.id === undefined ? '新增' : '编辑'"
+      @closed="resetForm"
+      width="50%"
+    >
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto" size="large">
+        <el-form-item prop="equityName" label="校友权益名称">
+          <el-input v-model="formData.equityName" placeholder="请输入卡面名称" />
+        </el-form-item>
+        <el-form-item prop="coverImage" label="上传封面图">
+          <!-- 本地： action="/alumni/api/file/uploadFile" -->
+          <!-- 线上：https://chtech.ncjti.edu.cn/alumnus/alumni_api/alumni/api/file/uploadFile -->
+          <el-upload
+            v-if="dialogVisible"
+            ref="elUploadRef"
+            action="https://chtech.ncjti.edu.cn/alumnus/alumni_api/alumni/api/file/uploadFile"
+            :headers="{
+              Token: getToken() || ''
+            }"
+            :accept="'.jpg, .jpeg, .png, .gif, .webp'"
+            :file-list="temImage"
+            list-type="picture-card"
+            :limit="1"
+            :on-success="handleAvatarSuccess"
+            :on-remove="handleRemove"
+            :on-exceed="handleExceed"
+          >
+            <el-icon><Plus /></el-icon>
+          </el-upload>
+        </el-form-item>
+        <el-form-item prop="content" label="权益详情">
+          <CustomEditor v-if="dialogVisible" :value="formData.content" @change="getEditorValue" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleCreateOrUpdate" :loading="loading">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.toolbar-wrapper {
+  margin-bottom: 26px;
+}
+
+.table-wrapper {
+  margin-bottom: 29px;
+  .el-link {
+    margin-right: 15px;
+  }
+}
+
+.pager-wrapper {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.pwd_icon {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 10px;
+  right: 15px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+}
+
+.no_autofill_pwd {
+  ::v-deep(.el-input__inner) {
+    -webkit-text-security: disc !important;
+  }
+}
+</style>

src/views/school-endorsement/index.vue

@@ -397,12 +397,15 @@ const downloadReq = async () => {
           <el-input v-model="formData.name" placeholder="请输入" />
         </el-form-item>
         <el-form-item prop="image" label="照片">
+          <!-- 本地： action="/alumni/api/file/uploadFile" -->
+          <!-- 线上：https://chtech.ncjti.edu.cn/alumnus/alumni_api/alumni/api/file/uploadFile -->
           <el-upload
             ref="elUploadRef"
-            action="/alumni/api/file/uploadFile"
+            action="https://chtech.ncjti.edu.cn/alumnus/alumni_api/alumni/api/file/uploadFile"
             :headers="{
               Token: getToken() || ''
             }"
+            :accept="'.jpg, .jpeg, .png, .gif, .webp'"
             v-model="formData.image"
             list-type="picture-card"
             :limit="1"