From be84102dc381d0c1925e477f15a431d6c327c0d6 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Tue, 05 Sep 2023 15:05:41 +0800
Subject: [PATCH] 项目添加中设置中心点功能
---
src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue | 172 +++++++++++++++++++++++++++++++-------------------------
1 files changed, 95 insertions(+), 77 deletions(-)
diff --git a/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue b/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue
index b710bbd..7f49cea 100644
--- a/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue
+++ b/src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue
@@ -2,57 +2,59 @@
* @Author: 胡思旗 931347610@qq.com
* @Date: 2023-08-28 15:23:47
* @LastEditors: husq 931347610@qq.com
- * @LastEditTime: 2023-09-01 17:29:16
+ * @LastEditTime: 2023-09-05 10:17:17
* @FilePath: \Cloud-API-Demo-Web\src\pages\page-web\projects\project_list\list_page\components\ProjectList.vue
* @Description:项目列表组件
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
- <div class="project-box">
- <div class="project-card" v-for="item in cardList" :key="item.id">
- <div class="project-left">
- <div class="head mb10 flex-display flex-align-center flex-justify-between">
- <div class="head-left flex-display flex-align-center">
- <a-tag color="#87d068">{{ status[item.projectStatus] }}</a-tag>
- <span class="head-text">{{ item.projectName }}</span>
- </div>
- <div class="head-right">
- <a-dropdown>
- <dash-outlined />
- <template #overlay>
- <a-menu>
- <a-menu-item>
- <a @click="goEdit(item)">编辑</a>
- </a-menu-item>
- <a-menu-item>
- <a @click="editStatus(item)">归档</a>
- </a-menu-item>
- <a-menu-item>
- <a @click="deleteItem(item)">删除</a>
- </a-menu-item>
- </a-menu>
- </template>
- </a-dropdown>
- </div>
- </div>
- <div class="wrapper">
- <div class="introduction mb10">{{ item.projectIntro || '暂无简介' }}</div>
- <div class="time mb5">创建时间: {{ item.createTime }}</div>
- <div class="manager mb5 flex-display flex-align-center">
- <user-outlined />
- <!-- {{item.memberList[0].userId}} -->
- <div class="user_name ml10">测试角色</div>
- </div>
- </div>
+ <div class="project-box flex-common">
+ <a-spin :spinning="model" style="width: 100%;">
+ <div class="project-card" v-for="item in cardList" :key="item.id">
+ <div class="project-left">
+ <div class="head mb10 flex-display flex-align-center flex-justify-between">
+ <div class="head-left flex-display flex-align-center">
+ <a-tag color="#87d068">{{ status[item.projectStatus] }}</a-tag>
+ <span class="head-text">{{ item.projectName }}</span>
</div>
- <div>
- <div class="enter">
- <export-outlined />
- </div>
+ <div class="head-right">
+ <a-dropdown>
+ <dash-outlined />
+ <template #overlay>
+ <a-menu>
+ <a-menu-item>
+ <a @click="goEdit(item)">编辑</a>
+ </a-menu-item>
+ <a-menu-item>
+ <a @click="editStatus(item)">归档</a>
+ </a-menu-item>
+ <a-menu-item>
+ <a @click="deleteItem(item)">删除</a>
+ </a-menu-item>
+ </a-menu>
+ </template>
+ </a-dropdown>
</div>
+ </div>
+ <div class="wrapper">
+ <div class="introduction mb10">{{ item.projectIntro || '暂无简介' }}</div>
+ <div class="time mb5">创建时间: {{ item.createTime }}</div>
+ <div class="manager mb5 flex-display flex-align-center">
+ <user-outlined />
+ <!-- {{item.memberList[0].userId}} -->
+ <div class="user_name ml10">测试角色</div>
+ </div>
+ </div>
</div>
- </div>
+ <div>
+ <div class="enter">
+ <export-outlined />
+ </div>
+ </div>
+ </div>
+ </a-spin>
+ </div>
</template>
<script setup lang="ts">
@@ -63,16 +65,25 @@
import { del, edit } from '/@/api/project-page'
import { Modal, message } from 'ant-design-vue'
const router = useRouter()
-const emit = defineEmits(['refreshList'])
+const emit = defineEmits(['refreshList', 'update:modelValue'])
const props = defineProps({
cardList: {
type: Array as () => projectCard[],
required: true,
},
+ modelValue: [String, Number, Boolean]
})
-
+const model = computed({
+ get () {
+ return props.modelValue
+ },
+ set (val) {
+ emit('update:modelValue', val)
+ }
+})
+const spinning = ref<boolean>(true)
// 删除方法
-const deleteItem = (item:projectCard) => {
+const deleteItem = (item: projectCard) => {
Modal.confirm({
title: () => '确认删除?',
icon: () => createVNode(ExclamationCircleOutlined),
@@ -91,7 +102,7 @@
})
}
-const editStatus = (item:projectCard) => {
+const editStatus = (item: projectCard) => {
Modal.confirm({
title: () => '确认归档?',
icon: () => createVNode(ExclamationCircleOutlined),
@@ -111,8 +122,7 @@
})
}
-const goEdit = (item:any) => {
- console.log(item)
+const goEdit = (item: any) => {
router.push({
name: ERouterName.EDIT_PROJECT,
query: { id: item.id }
@@ -123,38 +133,46 @@
<style scoped lang="scss">
.project-box {
- .project-card {
- cursor: pointer;
- width: 100%;
- min-height: 120px;
- background: #232323;
- user-select: none;
- border-bottom: 1px solid #4f4f4f;
- display: flex;
- }
+ width: 100%;
+ height: 100%;
- .project-left {
- padding: 16px;
- flex: 1;
- width: calc(100% - 48px);
- box-sizing: border-box;
+ :deep(.ant-spin-nested-loading) {
+ width: 100%;
+ height: 100%;
+ }
- .head {
- .head-left {
- font-size: 16px;
- }
- }
- }
+ .project-card {
+ cursor: pointer;
+ width: 100%;
+ min-height: 120px;
+ background: #232323;
+ user-select: none;
+ border-bottom: 1px solid #4f4f4f;
+ display: flex;
+ }
- .enter {
- background: #303030;
- width: 48px;
- display: flex;
- align-items: center;
- justify-content: center;
- color: #fff;
- height: 100%;
- cursor: pointer;
+ .project-left {
+ padding: 16px;
+ flex: 1;
+ width: calc(100% - 48px);
+ box-sizing: border-box;
+
+ .head {
+ .head-left {
+ font-size: 16px;
+ }
}
+ }
+
+ .enter {
+ background: #303030;
+ width: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ height: 100%;
+ cursor: pointer;
+ }
}
</style>
--
Gitblit v1.9.3