Sun_sun/jurong_circle_program_black_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Sun_sun:89a3c1cda7962d24372dc94c3b1431d6e9c995f8
Branches Tags
Sun_sun:master
...
compare: Sun_sun:014479b8d11f7a0aabaaa2faabbc6acd615210a7
Branches Tags
Sun_sun:master

4 Commits
89a3c1cda7 ... 014479b8d1

Author SHA1 Message Date
Sun_sun
014479b8d1 2025-10-14 
发送图片
 2025-10-14 13:25:54 +08:00
Sun_sun
3995dd8cdd 2025-10-14 
注释统计
 2025-10-14 11:21:25 +08:00
Sun_sun
0e9ea78296 2025-10-14 
项目简介富文本图片/视频上传
 2025-10-14 11:19:49 +08:00
Sun_sun
3dd2502e31 2025-10-14 
聊天添加刷新
 2025-10-14 09:13:04 +08:00
4 changed files with 250 additions and 99 deletions
Expand all files Collapse all files

52
src/assets/wangeditor.css Normal file
View File

@@ -0,0 +1,52 @@
.editor-content-view {
border: 3px solid #ccc;
border-radius: 5px;
padding: 0 10px;
margin-top: 20px;
overflow-x: auto;
}
.editor-content-view p,
.editor-content-view li {
white-space: pre-wrap; /* 保留空格 */
}
.editor-content-view blockquote {
border-left: 8px solid #d0e5f2;
padding: 10px 10px;
margin: 10px 0;
background-color: #f1f1f1;
}
.editor-content-view code {
font-family: monospace;
background-color: #eee;
padding: 3px;
border-radius: 3px;
}
.editor-content-view pre>code {
display: block;
padding: 10px;
}
.editor-content-view table {
border-collapse: collapse;
}
.editor-content-view td,
.editor-content-view th {
border: 1px solid #ccc;
min-width: 50px;
height: 20px;
}
.editor-content-view th {
background-color: #f1f1f1;
}
.editor-content-view ul,
.editor-content-view ol {
padding-left: 20px;
}
.editor-content-view input[type="checkbox"] {
margin-right: 5px;
}

29
src/components/RichTextEditor.vue
View File

@@ -52,7 +52,7 @@ const mode = 'default' // 或 'simple'
// 工具栏配置 // 工具栏配置
const toolbarConfig = { const toolbarConfig = {
excludeKeys: [ excludeKeys: [
'group-video', // 排除视频 // 'group-video', // 排除视频
'fullScreen' // 排除全屏 'fullScreen' // 排除全屏
] ]
} }
@@ -63,26 +63,47 @@ const editorConfig = {
MENU_CONF: { MENU_CONF: {
// 配置上传图片 // 配置上传图片
uploadImage: { uploadImage: {
server: '/api/upload/image', server: '/mid/upload/image',
fieldName: 'file', fieldName: 'file',
meta: { meta: {
token: localStorage.getItem('token') || '' token: localStorage.getItem('token') || ''
}, },
metaWithUrl: false, metaWithUrl: false,
headers: { headers: {
'Authorization': `Bearer ${localStorage.getItem('token') || ''}` 'Authorization': `Bearer ${localStorage.getItem('admin_token') || ''}`
}, },
maxFileSize: 5 * 1024 * 1024, // 5M maxFileSize: 5 * 1024 * 1024, // 5M
allowedFileTypes: ['image/*'], allowedFileTypes: ['image/*'],
customInsert(res, insertFn) { customInsert(res, insertFn) {
// 自定义插入图片 // 自定义插入图片
if (res.code === 200) { if (res.success) {
insertFn(res.data.url, res.data.alt || '', res.data.url) insertFn(res.data.url, res.data.alt || '', res.data.url)
} else { } else {
console.error('图片上传失败:', res.message) console.error('图片上传失败:', res.message)
} }
} }
}, },
uploadVideo: {
server: '/mid/upload',
fieldName: 'file',
meta: {
token: localStorage.getItem('token') || ''
},
metaWithUrl: false,
headers: {
'Authorization': `Bearer ${localStorage.getItem('admin_token') || ''}`
},
maxFileSize: 20 * 1024 * 1024,
allowedFileTypes: ['video/*'],
customInsert(res, insertFn) {
// 自定义插入视频
if (res.success) {
insertFn(res.data.url, res.data.alt || '', res.data.url)
} else {
console.error('视频上传失败:', res.message)
}
}
},
// 配置字体 // 配置字体
fontSize: { fontSize: {
fontSizeList: [ fontSizeList: [

144
src/views/Chat.vue
View File

@@ -6,43 +6,43 @@
</el-card> </el-card>
<!-- 统计卡片 --> <!-- 统计卡片 -->
<el-card class="stats-card"> <!-- <el-card class="stats-card">-->
<el-row :gutter="24" class="stats-row"> <!-- <el-row :gutter="24" class="stats-row">-->
<el-col :span="8"> <!-- <el-col :span="8">-->
<el-card class="stat-card"> <!-- <el-card class="stat-card">-->
<div class="stat-content"> <!-- <div class="stat-content">-->
<div class="stat-number">{{ stats.totalTransfers }}</div> <!-- <div class="stat-number">{{ stats.totalTransfers }}</div>-->
<div class="stat-label">总转账数</div> <!-- <div class="stat-label">总转账数</div>-->
</div> <!-- </div>-->
<el-icon class="stat-icon"> <!-- <el-icon class="stat-icon">-->
<Money/> <!-- <Money/>-->
</el-icon> <!-- </el-icon>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
<el-col :span="8"> <!-- <el-col :span="8">-->
<el-card class="stat-card"> <!-- <el-card class="stat-card">-->
<div class="stat-content"> <!-- <div class="stat-content">-->
<div class="stat-number">{{ stats.confirmedTransfers }}</div> <!-- <div class="stat-number">{{ stats.confirmedTransfers }}</div>-->
<div class="stat-label">已确认</div> <!-- <div class="stat-label">已确认</div>-->
</div> <!-- </div>-->
<el-icon class="stat-icon"> <!-- <el-icon class="stat-icon">-->
<Check/> <!-- <Check/>-->
</el-icon> <!-- </el-icon>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
<el-col :span="8"> <!-- <el-col :span="8">-->
<el-card class="stat-card"> <!-- <el-card class="stat-card">-->
<div class="stat-content"> <!-- <div class="stat-content">-->
<div class="stat-number">¥{{ stats.totalAmount }}</div> <!-- <div class="stat-number">¥{{ stats.totalAmount }}</div>-->
<div class="stat-label">总欠额</div> <!-- <div class="stat-label">总欠额</div>-->
</div> <!-- </div>-->
<el-icon class="stat-icon"> <!-- <el-icon class="stat-icon">-->
<Wallet/> <!-- <Wallet/>-->
</el-icon> <!-- </el-icon>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
</el-row> <!-- </el-row>-->
</el-card> <!-- </el-card>-->
<!-- 筛选和操作 --> <!-- 筛选和操作 -->
<el-card class="filter-card"> <el-card class="filter-card">
@@ -87,7 +87,7 @@
<!-- 数据列表 --> <!-- 数据列表 -->
<el-card class="table-card"> <el-card class="table-card">
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8 mb-2">
<!-- <el-col :span="1.5">--> <!-- <el-col :span="1.5">-->
<!-- <el-button--> <!-- <el-button-->
<!-- type="primary"--> <!-- type="primary"-->
@@ -107,16 +107,25 @@
<!-- >修改--> <!-- >修改-->
<!-- </el-button>--> <!-- </el-button>-->
<!-- </el-col>--> <!-- </el-col>-->
<!-- <el-col :span="1.5">--> <!-- <el-col :span="1.5">-->
<!-- <el-button--> <!-- <el-button-->
<!-- type="danger"--> <!-- type="danger"-->
<!-- plain--> <!-- plain-->
<!-- icon="Delete"--> <!-- icon="Delete"-->
<!-- :disabled="single"--> <!-- :disabled="single"-->
<!-- @click="handleDelete"--> <!-- @click="handleDelete"-->
<!-- >删除--> <!-- >删除-->
<!-- </el-button>--> <!-- </el-button>-->
<!-- </el-col>--> <!-- </el-col>-->
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="Refresh"
@click="handleRefresh"
>刷新
</el-button>
</el-col>
</el-row> </el-row>
<el-table <el-table
@@ -159,7 +168,7 @@
<!-- <el-button link type="primary" icon="Document" @click="handleDetail(scope.row)">详情</el-button>--> <!-- <el-button link type="primary" icon="Document" @click="handleDetail(scope.row)">详情</el-button>-->
<!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>--> <!-- <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>-->
<el-button link type="primary" :icon="inChatSvg" @click="handleChat(scope.row)">进入聊天</el-button> <el-button link type="primary" :icon="inChatSvg" @click="handleChat(scope.row)">进入聊天</el-button>
<!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>--> <!-- <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>-->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -270,7 +279,23 @@
:rows="3" :rows="3"
placeholder="请输入消息..." placeholder="请输入消息..."
></el-input> ></el-input>
<el-row :gutter="24">
<el-col :span="12">
<el-upload
action="/mid/upload/image"
:headers="headers"
:on-success="uploadSuccess"
:on-error="uploadError"
:show-file-list="false"
accept="image/png, image/jpeg"
:limit="1">
<el-button type="primary">发送图片</el-button>
</el-upload>
</el-col>
<el-col :span="12">
<el-button type="primary" @click="handleSendMsg">发送</el-button> <el-button type="primary" @click="handleSendMsg">发送</el-button>
</el-col>
</el-row>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
@@ -293,6 +318,9 @@ import {io} from 'socket.io-client';
const {proxy} = getCurrentInstance(); const {proxy} = getCurrentInstance();
const userStore = useUserStore() const userStore = useUserStore()
const headers = {
Authorization: `Bearer ${userStore.token}`
}
// 统计 // 统计
const stats = ref({ const stats = ref({
@@ -548,6 +576,20 @@ const handleSendMsg = () => {
inputText.value = '' inputText.value = ''
} }
const uploadSuccess = (res) => {
socket.value.emit('clientMsg', {
groupId: params.value.groupId,
createId: userStore.user.id,
content: res.data.url,
type: 'img'
})
}
const uploadError = (res) => {
const result = JSON.parse(res.message)
ElMessage.error(result.message)
}
// 头像字 // 头像字
const getRoleInitial = (createId) => { const getRoleInitial = (createId) => {
if (messageUserId.value === createId) { if (messageUserId.value === createId) {
@@ -561,6 +603,10 @@ const getRoleInitial = (createId) => {
} }
}; };
const handleRefresh = () => {
getList()
}
onMounted(() => { onMounted(() => {
// 获取统计 // 获取统计
getStats() getStats()

122
src/views/Program.vue
View File

@@ -6,43 +6,43 @@
</el-card> </el-card>
<!-- 统计卡片 --> <!-- 统计卡片 -->
<el-card class="stats-card"> <!-- <el-card class="stats-card">-->
<el-row :gutter="24" class="stats-row"> <!-- <el-row :gutter="24" class="stats-row">-->
<el-col :span="8"> <!-- <el-col :span="8">-->
<el-card class="stat-card"> <!-- <el-card class="stat-card">-->
<div class="stat-content"> <!-- <div class="stat-content">-->
<div class="stat-number">{{ stats.totalTransfers }}</div> <!-- <div class="stat-number">{{ stats.totalTransfers }}</div>-->
<div class="stat-label">总转账数</div> <!-- <div class="stat-label">总转账数</div>-->
</div> <!-- </div>-->
<el-icon class="stat-icon"> <!-- <el-icon class="stat-icon">-->
<Money/> <!-- <Money/>-->
</el-icon> <!-- </el-icon>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
<el-col :span="8"> <!-- <el-col :span="8">-->
<el-card class="stat-card"> <!-- <el-card class="stat-card">-->
<div class="stat-content"> <!-- <div class="stat-content">-->
<div class="stat-number">{{ stats.confirmedTransfers }}</div> <!-- <div class="stat-number">{{ stats.confirmedTransfers }}</div>-->
<div class="stat-label">已确认</div> <!-- <div class="stat-label">已确认</div>-->
</div> <!-- </div>-->
<el-icon class="stat-icon"> <!-- <el-icon class="stat-icon">-->
<Check/> <!-- <Check/>-->
</el-icon> <!-- </el-icon>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
<el-col :span="8"> <!-- <el-col :span="8">-->
<el-card class="stat-card"> <!-- <el-card class="stat-card">-->
<div class="stat-content"> <!-- <div class="stat-content">-->
<div class="stat-number">¥{{ stats.totalAmount }}</div> <!-- <div class="stat-number">¥{{ stats.totalAmount }}</div>-->
<div class="stat-label">总欠额</div> <!-- <div class="stat-label">总欠额</div>-->
</div> <!-- </div>-->
<el-icon class="stat-icon"> <!-- <el-icon class="stat-icon">-->
<Wallet/> <!-- <Wallet/>-->
</el-icon> <!-- </el-icon>-->
</el-card> <!-- </el-card>-->
</el-col> <!-- </el-col>-->
</el-row> <!-- </el-row>-->
</el-card> <!-- </el-card>-->
<!-- 筛选和操作 --> <!-- 筛选和操作 -->
<el-card class="filter-card"> <el-card class="filter-card">
@@ -87,7 +87,7 @@
<!-- 数据列表 --> <!-- 数据列表 -->
<el-card class="table-card"> <el-card class="table-card">
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8 mb-2">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="primary" type="primary"
@@ -140,7 +140,11 @@
<el-table-column prop="startDate" label="开始时间"/> <el-table-column prop="startDate" label="开始时间"/>
<el-table-column prop="endDate" label="结束时间"/> <el-table-column prop="endDate" label="结束时间"/>
<el-table-column prop="createDate" label="创建时间"/> <el-table-column prop="createDate" label="创建时间"/>
<el-table-column prop="introduction" label="项目描述"/> <el-table-column prop="introduction" label="项目描述">
<template #default="scope">
<el-button text type="primary" @click="handleDetail(scope.row)">详情</el-button>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300"> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300">
<template #default="scope"> <template #default="scope">
@@ -166,7 +170,7 @@
</el-card> </el-card>
<!-- 表单 --> <!-- 表单 -->
<el-dialog :title="title" v-model="open" width="800px" append-to-body> <el-dialog :title="title" v-model="open" width="60%" append-to-body top="1vh">
<el-form ref="formRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="项目名称" prop="name"> <el-form-item label="项目名称" prop="name">
<el-input v-model="form.name" placeholder="请输入项目名称"/> <el-input v-model="form.name" placeholder="请输入项目名称"/>
@@ -196,7 +200,7 @@
<!-- <el-input v-model="form.endDate" placeholder="请选择结束时间"/>--> <!-- <el-input v-model="form.endDate" placeholder="请选择结束时间"/>-->
<!-- </el-form-item>--> <!-- </el-form-item>-->
<el-form-item label="项目描述" prop="introduction" class="editor"> <el-form-item label="项目描述" prop="introduction" class="editor">
<RichTextEditor height="300px" /> <RichTextEditor v-model="form.introduction" class="w-100"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
@@ -207,10 +211,17 @@
</template> </template>
</el-dialog> </el-dialog>
<!-- 详情 -->
<el-dialog :title="detailTitle" v-model="openDetail" width="50%" class="h-75 overflow-hidden overflow-scroll">
<div class="p-5 border editor-content-view">
<div v-html="detailContent"></div>
</div>
</el-dialog>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup>
import {getCurrentInstance, reactive, ref, shallowRef, toRefs} from "vue"; import {getCurrentInstance, reactive, ref, shallowRef, toRefs} from "vue";
import {Check, Money, Wallet} from "@element-plus/icons-vue"; import {Check, Money, Wallet} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus"; import {ElMessage, ElMessageBox} from "element-plus";
@@ -218,8 +229,7 @@ import {programAPI} from "@/api/program";
import {useUserStore} from "@/stores/user"; import {useUserStore} from "@/stores/user";
import '@wangeditor/editor/dist/css/style.css' // 引入 css import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue' import '@/assets/wangeditor.css'
import {IToolbarConfig} from "@wangeditor/editor";
import RichTextEditor from "@/components/RichTextEditor.vue"; import RichTextEditor from "@/components/RichTextEditor.vue";
const {proxy} = getCurrentInstance(); const {proxy} = getCurrentInstance();
@@ -330,9 +340,15 @@ const handleDelete = (row) => {
}) })
} }
const openDetail = ref(false)
const detailTitle = ref("")
const detailContent = ref("")
// 查看详情 // 查看详情
const handleDetail = (row) => { const handleDetail = (row) => {
ElMessage.info('查看详情') detailTitle.value = row.name
detailContent.value = row.introduction
openDetail.value = true
} }
const submitForm = () => { const submitForm = () => {
@@ -359,9 +375,25 @@ const submitForm = () => {
} }
}) })
} }
const formRef = ref(null)
const reset = () => {
form.value = {
linkmanId: undefined,
startDate: undefined,
endDate: undefined,
dataRange: [],
name: undefined,
company: undefined,
address: undefined,
introduction: undefined,
paymentMethod: undefined
}
formRef.value.resetForm()
}
const cancel = () => { const cancel = () => {
open.value = false open.value = false
reset()
} }
// 获取统计 // 获取统计