添加需求

This commit is contained in:
Kunagisa 2025-06-13 23:34:28 +08:00
parent 7e6c2a1740
commit 3bd286f50e

View File

@ -50,22 +50,13 @@
<button class="close-btn" @click="closeReplyModal">&times;</button> <button class="close-btn" @click="closeReplyModal">&times;</button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<form class="add-modal-form"> <form class="add-modal-form" @submit.prevent="submitReply">
<div class="form-row">
<span class="label">请求者</span>
<input class="input" placeholder="可选" />
</div>
<div class="form-row">
<span class="label">QQ号</span>
<input v-model="addForm.qq_code" class="input" placeholder="可选" />
</div>
<div class="form-row"> <div class="form-row">
<span class="label">相关建议</span> <span class="label">相关建议</span>
<textarea <textarea
v-model="addForm.sendcontent" v-model="addForm.sendcontent"
class="input" class="input"
placeholder="请输入需求内容" placeholder="请输入相关建议"
rows="3" rows="3"
ref="autoTextarea" ref="autoTextarea"
@input="autoResize" @input="autoResize"
@ -126,6 +117,10 @@
</div> </div>
</div> </div>
<div v-else class="no-reply"> <div v-else class="no-reply">
<div v-if="selectedDemand?.sendcontent">
<div class="reply-content">{{ selectedDemand.sendcontent }}</div>
</div>
<div v-else>
暂无回复 暂无回复
</div> </div>
</div> </div>
@ -133,6 +128,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 添加需求弹窗 --> <!-- 添加需求弹窗 -->
<div v-if="showAddModal" class="modal-overlay" @click="closeAddModal"> <div v-if="showAddModal" class="modal-overlay" @click="closeAddModal">
@ -155,7 +151,7 @@
<div class="form-row"> <div class="form-row">
<span class="label">需求内容</span> <span class="label">需求内容</span>
<textarea <textarea
v-model="addForm.sendcontent" v-model="addForm.content"
class="input" class="input"
placeholder="请输入需求内容" placeholder="请输入需求内容"
rows="3" rows="3"
@ -180,7 +176,7 @@
<script setup> <script setup>
import { ref, onMounted, nextTick } from 'vue' import { ref, onMounted, nextTick } from 'vue'
import axiosInstance from '../../api/axiosConfig' import { getDemandsList, addDemand, updateDemand } from '../../api/demands'
// //
const demands = ref([]) const demands = ref([])
@ -194,10 +190,10 @@ const showAddModal = ref(false)
const addError = ref('') const addError = ref('')
const addForm = ref({ const addForm = ref({
requester: '', requester: '',
sendcontent: '',
content: '', content: '',
reward: '', reward: '',
qq_code: '' qq_code: '',
sendcontent: ''
}) })
const addLoading = ref(false) const addLoading = ref(false)
const autoTextarea = ref(null) const autoTextarea = ref(null)
@ -228,16 +224,7 @@ const fetchDemands = async () => {
loading.value = true loading.value = true
error.value = null error.value = null
try { try {
const response = await fetch('http://zybdatasupport.online:8000/demands/getlist', { const data = await getDemandsList()
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
if (!response.ok) {
throw new Error(`请求失败: ${response.status}`)
}
const data = await response.json()
demands.value = data demands.value = data
} catch (err) { } catch (err) {
error.value = `加载失败: ${err.message}` error.value = `加载失败: ${err.message}`
@ -273,10 +260,10 @@ const closeModal = () => {
function openAddModal() { function openAddModal() {
addForm.value = { addForm.value = {
requester: '', requester: '',
sendcontent: '',
content: '', content: '',
reward: '', reward: '',
qq_code: '' qq_code: '',
sendcontent: ''
} }
addError.value = '' addError.value = ''
showAddModal.value = true showAddModal.value = true
@ -290,7 +277,7 @@ function closeAddModal() {
// //
async function submitAddForm() { async function submitAddForm() {
if (!addForm.value.sendcontent.trim()) { if (!addForm.value.content?.trim()) {
addError.value = '需求内容不能为空'; addError.value = '需求内容不能为空';
return; return;
} }
@ -300,18 +287,18 @@ async function submitAddForm() {
const now = new Date(); const now = new Date();
const dateStr = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2,'0')}-${now.getDate().toString().padStart(2,'0')} ${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}:${now.getSeconds().toString().padStart(2,'0')}`; const dateStr = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2,'0')}-${now.getDate().toString().padStart(2,'0')} ${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}:${now.getSeconds().toString().padStart(2,'0')}`;
const payload = { const payload = {
requester: addForm.value.requester, requester: addForm.value.requester || '',
sendcontent: addForm.value.sendcontent, sendcontent: '',
content: addForm.value.sendcontent, content: addForm.value.content,
reward: addForm.value.reward, reward: addForm.value.reward || '',
date: dateStr, date: dateStr,
qq_code: addForm.value.qq_code qq_code: addForm.value.qq_code || ''
}; };
const response = await axiosInstance.post('/demands/add', payload);
if (response.status === 200) { console.log('提交的数据:', payload);
await addDemand(payload);
showAddModal.value = false; showAddModal.value = false;
fetchDemands(); // fetchDemands(); //
}
} catch (e) { } catch (e) {
console.error('提交失败:', e); console.error('提交失败:', e);
addError.value = e.response?.data?.detail || '提交失败,请稍后重试'; addError.value = e.response?.data?.detail || '提交失败,请稍后重试';
@ -320,6 +307,38 @@ async function submitAddForm() {
} }
} }
//
const submitReply = async () => {
if (!addForm.value.sendcontent?.trim()) {
addError.value = '回复内容不能为空';
return;
}
addLoading.value = true;
addError.value = '';
try {
const now = new Date();
const dateStr = `${now.getFullYear()}-${(now.getMonth()+1).toString().padStart(2,'0')}-${now.getDate().toString().padStart(2,'0')} ${now.getHours().toString().padStart(2,'0')}:${now.getMinutes().toString().padStart(2,'0')}:${now.getSeconds().toString().padStart(2,'0')}`;
const payload = {
requester: reply.value.requester || '',
sendcontent: addForm.value.sendcontent,
content: reply.value.content,
reward: reply.value.reward || '',
date: dateStr,
qq_code: reply.value.qq_code || ''
};
console.log('提交的回复数据:', payload);
await updateDemand(reply.value.id, payload);
replyModal.value = false;
fetchDemands(); //
} catch (e) {
console.error('提交回复失败:', e);
addError.value = e.response?.data?.detail || '提交失败,请稍后重试';
} finally {
addLoading.value = false;
}
}
// //
onMounted(() => { onMounted(() => {
fetchDemands() fetchDemands()
@ -657,4 +676,17 @@ function autoResize() {
background: #f7faff; background: #f7faff;
border-radius: 8px; border-radius: 8px;
} }
.no-reply .reply-content {
text-align: left;
padding: 10px 0;
color: #333;
border-left: 3px solid #2563eb;
padding-left: 15px;
margin: 10px 0;
font-size: 14px;
line-height: 1.6;
background: transparent;
box-shadow: none;
}
</style> </style>