项目页面复选按钮
This commit is contained in:
parent
a661825091
commit
ce17f62ab6
@ -515,6 +515,23 @@ const projectGet =(token) => {
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 展示全部消息
|
||||
*
|
||||
*/
|
||||
const messageGetAll = (token) => {
|
||||
return axios({
|
||||
url:api + "/message/get/all",
|
||||
method:"get",
|
||||
headers:{
|
||||
'Authorization':'Bearer '+token,
|
||||
'Timestamp': getCurrentTimestamp()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
login,
|
||||
register,
|
||||
@ -548,6 +565,10 @@ export default {
|
||||
infoEditSettingHeaderImage,
|
||||
|
||||
|
||||
projectGet
|
||||
projectGet,
|
||||
|
||||
|
||||
|
||||
messageGetAll
|
||||
|
||||
}
|
||||
@ -2,12 +2,36 @@
|
||||
<div class="relative h-full bg-gray-50 flex">
|
||||
<div class="mt-12">
|
||||
<nav class="ml-16 flex space-x-72">
|
||||
<ul class="flex space-x-24">
|
||||
<li class="hover:text-blue-500">全部</li>
|
||||
<li class="hover:text-blue-500">Web</li>
|
||||
<li class="hover:text-blue-500">Ai</li>
|
||||
<li class="hover:text-blue-500">App</li>
|
||||
</ul>
|
||||
<div class="inline-flex rounded-md shadow-sm" role="group">
|
||||
<button
|
||||
:class="buttonClass('DisableSelection')"
|
||||
type="button"
|
||||
@click="toggleSelectionDisabled"
|
||||
>
|
||||
全部
|
||||
</button>
|
||||
<button
|
||||
:class="buttonClass('web')"
|
||||
type="button"
|
||||
@click="toggleSelection('web')"
|
||||
>
|
||||
Web
|
||||
</button>
|
||||
<button
|
||||
:class="buttonClass('Ai')"
|
||||
type="button"
|
||||
@click="toggleSelection('Ai')"
|
||||
>
|
||||
Ai
|
||||
</button>
|
||||
<button
|
||||
:class="buttonClass('App')"
|
||||
type="button"
|
||||
@click="toggleSelection('App')"
|
||||
>
|
||||
App
|
||||
</button>
|
||||
</div>
|
||||
<ul class="flex space-x-12 ">
|
||||
<a-checkbox>未开始</a-checkbox>
|
||||
<a-checkbox>进行中</a-checkbox>
|
||||
@ -72,4 +96,41 @@ function getAllProject(){
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
const selectedButtons = ref([]);
|
||||
const selectionDisabled = ref(false);
|
||||
|
||||
|
||||
//选择全部按钮，其他按钮不可选
|
||||
const toggleSelectionDisabled = () => {
|
||||
selectionDisabled.value = !selectionDisabled.value;
|
||||
if (selectionDisabled.value) {
|
||||
// 清空选中的按钮
|
||||
selectedButtons.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSelection = (button) => {
|
||||
// 如果禁止选择，直接返回
|
||||
if (selectionDisabled.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
//选择其他按钮
|
||||
const index = selectedButtons.value.indexOf(button);
|
||||
if (index > -1) {
|
||||
selectedButtons.value.splice(index, 1); // 如果已选中，再次点击时移除
|
||||
} else {
|
||||
selectedButtons.value.push(button); // 如果未选中，点击时添加
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
//设置复选按钮样式
|
||||
const buttonClass = (button) => ({
|
||||
'px-4 py-2 text-sm font-medium border focus:z-10 focus:ring-2': true,
|
||||
'text-gray-900 bg-white border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-blue-700 focus:text-blue-700 ': (!selectedButtons.value.includes(button) && !selectionDisabled.value) || (button === 'DisableSelection' && !selectionDisabled.value),
|
||||
'bg-green-400 text-white': selectedButtons.value.includes(button) || (button === 'DisableSelection' && selectionDisabled.value), // 选中状态的样式
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -29,12 +29,12 @@
|
||||
<div class="w-[1000px]">
|
||||
<table class="w-full text-sm text-left rtl:text-right text-gray-500">
|
||||
<tbody>
|
||||
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
||||
<tr v-for="(message, index) in messages" :key="index" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
||||
<th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" scope="row">
|
||||
小明老师
|
||||
{{ message.uid }}
|
||||
</th>
|
||||
<td class="px-6 py-4">
|
||||
时间
|
||||
{{ message.createdAt }}
|
||||
</td>
|
||||
<td class="px-6 py-4 flex justify-end">
|
||||
<a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
|
||||
@ -48,7 +48,7 @@
|
||||
时间
|
||||
</td>
|
||||
<td class="px-6 py-4 flex justify-end">
|
||||
<a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
|
||||
<a-button class="flex justify-center items-center" type="link" @click="deleteMessage(message.id)"><DeleteOutlined />删除</a-button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class=" bg-white border-b dark:bg-gray-800 dark:border-gray-700">
|
||||
@ -65,19 +65,43 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script setup>
|
||||
import {reactive, ref, watch} from 'vue';
|
||||
import {onMounted, reactive, ref, watch} from 'vue';
|
||||
import {DeleteOutlined} from '@ant-design/icons-vue';
|
||||
import request from "@/js/request.js";
|
||||
|
||||
const selectedKeys = ref(['1']);
|
||||
const openKeys = ref(['sub1']);
|
||||
const token = window.localStorage.getItem('token')
|
||||
const messages = ref([]); // 使用ref创建响应式数据
|
||||
|
||||
|
||||
onMounted(() =>{
|
||||
messageGetAll();
|
||||
})
|
||||
|
||||
function messageGetAll() {
|
||||
request.messageGetAll(token).then((res) => {
|
||||
// 假设返回的res是你想要的数据数组
|
||||
messages.value = res.data.data; // 更新messages
|
||||
}).catch(error => {
|
||||
console.error("Failed to fetch messages:", error);
|
||||
});
|
||||
}
|
||||
|
||||
const deleteMessage = (messageId) => {
|
||||
// 这里调用后端接口删除消息
|
||||
console.log("Deleting message with id:", messageId);
|
||||
// 假设删除成功，从messages中移除这条消息
|
||||
messages.value = messages.value.filter(message => message.id !== messageId);
|
||||
};
|
||||
|
||||
|
||||
|
||||
function getItem(label, key, icon, children, type) {
|
||||
return {
|
||||
key,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user