|
|
@@ -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>
|
