feat: 项目列表添加置顶功能

app/Http/Controllers/Api/ProjectController.php

@@ -1747,4 +1747,31 @@ class ProjectController extends AbstractController
         //
         return Base::retSuccess('success', $list);
     }
+
+    /**
+     * @api {get} api/project/top       37. 项目置顶
+     *
+     * @apiDescription 需要token身份
+     * @apiVersion 1.0.0
+     * @apiGroup project
+     * @apiName top
+     *
+     * @apiParam {Number} project_id            项目ID
+     *
+     * @apiSuccess {Number} ret     返回状态码（1正确、0错误）
+     * @apiSuccess {String} msg     返回信息（错误描述）
+     * @apiSuccess {Object} data    返回数据
+     */
+    public function top()
+    {
+        $user = User::auth();
+        $projectId = intval(Request::input('project_id'));
+        $projectUser = ProjectUser::whereUserid($user->userid)->whereProjectId($projectId)->first();
+        if (!$projectUser) {
+            return Base::retError("项目不存在");
+        }
+        $projectUser->top_at = $projectUser->top_at ? null : Carbon::now();
+        $projectUser->save();
+        return Base::retSuccess("success", $projectId);
+    }
 }

app/Models/Project.php

@@ -113,6 +113,7 @@ class Project extends AbstractModel
             ->select([
                 'projects.*',
                 'project_users.owner',
+                'project_users.top_at',
             ])
             ->leftJoin('project_users', function ($leftJoin) use ($userid) {
                 $leftJoin
@@ -136,6 +137,7 @@ class Project extends AbstractModel
             ->select([
                 'projects.*',
                 'project_users.owner',
+                'project_users.top_at',
             ])
             ->join('project_users', 'projects.id', '=', 'project_users.project_id')
             ->where('project_users.userid', $userid);

app/Models/ProjectUser.php

@@ -11,6 +11,7 @@ use App\Module\Base;
  * @property int|null $project_id 项目ID
  * @property int|null $userid 成员ID
  * @property int|null $owner 是否负责人
+ * @property \Illuminate\Support\Carbon|null $top_at 置顶时间
  * @property \Illuminate\Support\Carbon|null $created_at
  * @property \Illuminate\Support\Carbon|null $updated_at
  * @property-read \App\Models\Project|null $project

database/migrations/2022_02_22_142148_project_users_add_top_at.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class ProjectUsersAddTopAt extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('project_users', function (Blueprint $table) {
+            if (!Schema::hasColumn('project_users', 'top_at')) {
+                $table->timestamp('top_at')->nullable()->after('owner')->comment('置顶时间');
+            }
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('project_users', function (Blueprint $table) {
+            $table->dropColumn("top_at");
+        });
+    }
+}

resources/assets/js/pages/manage.vue

@@ -70,13 +70,20 @@
                     <i class="taskfont">&#xe6f3;</i>
                     <div class="menu-title">{{$L('文件')}}</div>
                 </li>
-                <li class="menu-project">
+                <li class="menu-project" ref="projectWrapper">
                     <ul>
                         <li
                             v-for="(item, key) in projectLists"
                             :key="key"
                             :class="classNameRoute('project/' + item.id, openMenu[item.id])"
-                            @click="toggleRoute('project/' + item.id)">
+                            @click="toggleRoute('project/' + item.id)"
+                            @contextmenu.prevent.stop="handleRightClick($event, item)"
+                            >
+                            <div
+                                :class="{
+                                 top: item.top_at,
+                                 operate: item.id == topOperateItem.id && topOperateVisible
+                             }">
                             <div class="project-h1">
                                 <em @click.stop="toggleOpenMenu(item.id)"></em>
                                 <div class="title">{{item.name}}</div>
@@ -94,9 +101,24 @@
                                     <Progress :percent="item.task_percent" :stroke-width="6" />
                                 </p>
                             </div>
+                            </div>
                         </li>
                     </ul>
                     <Loading v-if="loadIng > 0"/>
+                    <div class="top-operate" :style="topOperateStyles">
+                        <Dropdown
+                            trigger="custom"
+                            :visible="topOperateVisible"
+                            transfer-class-name="page-file-dropdown-menu"
+                            @on-clickoutside="handleClickTopOperateOutside"
+                            transfer>
+                            <DropdownMenu slot="list">
+                                <DropdownItem @click.native="handleTopClick">
+                                    {{ $L(topOperateItem.top_at ? '取消置顶' : '置顶该项目') }}
+                                </DropdownItem>
+                            </DropdownMenu>
+                        </Dropdown>
+                    </div>
                 </li>
             </ul>
             <div
@@ -285,6 +307,9 @@ export default {
 
             reportTabs: "my",
             reportUnreadNumber: 0,
+            topOperateStyles: {},
+            topOperateVisible: false,
+            topOperateItem: {},
         }
     },
 
@@ -405,6 +430,9 @@ export default {
         projectLists() {
             const {projectKeyValue, cacheProjects} = this;
             const data = cacheProjects.sort((a, b) => {
+                if (a.top_at || b.top_at) {
+                    return $A.Date(b.top_at) - $A.Date(a.top_at);
+                }
                 return b.id - a.id;
             });
             if (projectKeyValue) {
@@ -773,6 +801,37 @@ export default {
             }
             document.addEventListener(visibilityChangeEvent, visibilityChangeListener);
         },
+        handleRightClick(event, item) {
+            this.handleClickTopOperateOutside();
+            this.topOperateItem = $A.isJson(item) ? item : {};
+            this.$nextTick(() => {
+                const projectWrap = this.$refs.projectWrapper;
+                const projectBounding = projectWrap.getBoundingClientRect();
+                this.topOperateStyles = {
+                    left: `${event.clientX - projectBounding.left}px`,
+                    top: `${event.clientY - projectBounding.top}px`
+                };
+                this.topOperateVisible = true;
+            })
+        },
+        handleClickTopOperateOutside() {
+            this.topOperateVisible = false;
+        },
+
+        handleTopClick() {
+            this.$store.dispatch("call", {
+                url: 'project/top',
+                data: {
+                    project_id: this.topOperateItem.id,
+                },
+            }).then(() => {
+                this.$store.dispatch("getProjects").catch(() => {});
+                this.$Modal.remove();
+            }).catch(({msg}) => {
+                $A.modalError(msg, 301);
+                this.$Modal.remove();
+            });
+        }
     }
 }
 </script>

resources/assets/sass/pages/page-manage.scss

@@ -225,6 +225,12 @@
                                     display: block;
                                 }
                             }
+                            .top {
+                                background-color: #dae3ef;
+                            }
+                            .operate {
+                                border:1px solid $primary-color;
+                            }
                         }
                     }
                     .common-loading {
@@ -232,6 +238,13 @@
                         width: 22px;
                         height: 22px;
                     }
+                    .top-operate {
+                        position: absolute;
+                        top: 0;
+                        right: 0;
+                        opacity: 0;
+                        display: flex;
+                    }
                 }
                 &.active {
                     background-color: #ffffff;