项目添加中设置中心点功能

husq

2023-09-05 be84102dc381d0c1925e477f15a431d6c327c0d6

 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>