From 402c563dcb512ca350f9610d4c65cba9f43fb9ed Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Thu, 26 Aug 2021 19:35:01 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F):=20=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |   3 +-
 src/apis/tall.js                              |   4 +
 src/components/Projects/ProjectItem.vue       |  92 ++--
 src/components/Projects/Projects copy.vue     | 206 --------
 src/components/Projects/Projects.vue          |  62 ++-
 .../pretty-exchange/pretty-exchange.vue       | 441 +++++++++++++++---
 src/pages/index/index.vue                     |   5 +-
 src/store/project/mutations.js                |  19 +
 8 files changed, 476 insertions(+), 356 deletions(-)
 delete mode 100644 src/components/Projects/Projects copy.vue

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1f4d402..25133fb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-# 0.1.0 (2021-08-25)
+# 0.1.0 (2021-08-26)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -55,6 +55,7 @@
  - | 面变化首页变化 | [5e860f1](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5e860f1)
  - | 项目api url设置 | [6cd5245](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/6cd5245)
  - | 项目列表, 项目url | [32e005b](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/32e005b)
+ - | 项目列表排序 | [224c58b](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/224c58b)
  - | 首页项目样式改变 | [8514c85](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/8514c85)
 
 
diff --git a/src/apis/tall.js b/src/apis/tall.js
index d21b334..04cedce 100644
--- a/src/apis/tall.js
+++ b/src/apis/tall.js
@@ -35,6 +35,10 @@ const install = (Vue, vm) => {
   vm.$u.api.getProjects = (startTime, endTime) => vm.$u.post(`${tall}/project/query`, { startTime, endTime });
   // 查询日历是否有小红点
   vm.$u.api.findRedPoint = (startTime, endTime) => vm.$u.post(`${tall}/project/day`, { startTime, endTime });
+  // 设置项目顺序
+  vm.$u.api.setProjectSort = params => vm.$u.post(`${tall}/project/setProjectSort`, params);
+  // 设置项目父子结构
+  vm.$u.api.setProjectRelation = params => vm.$u.post(`${tall}/project/setProjectRelation`, params);
 };
 
 export default { install };
diff --git a/src/components/Projects/ProjectItem.vue b/src/components/Projects/ProjectItem.vue
index cc25f88..a242035 100644
--- a/src/components/Projects/ProjectItem.vue
+++ b/src/components/Projects/ProjectItem.vue
@@ -1,10 +1,10 @@
 <template>
   <view class="w-full">
     <!-- 有子项目 -->
-    <view class="flex items-center justify-between p-3" :class="item.showBorder ? border : ''">
-      <u-icon class="mover" @click="openMenu(item)" size="48" name="https://www.tall.wiki/staticrec/drag.svg"></u-icon>
+    <view class="flex items-center justify-between p-3">
+      <u-icon @click="openMenu(item)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
 
-      <view class="flex-1 px-3" @click="openProject(item)">
+      <view @click="openProject(item)" class="flex-1 px-3">
         <view class="flex items-center mb-1">
           <view class="mr-2">{{ item.name }}</view>
           <!-- 状态 TODO:-->
@@ -12,52 +12,66 @@
         </view>
 
         <view class="flex items-center text-xs text-gray-400">
-          <view class="pr-2">{{ $moment(+item.startTime).format('MM-DD HH:mm') }}</view>
+          <view class="pr-2">
+            {{ $moment(+item.startTime).format('MM-DD HH:mm') }}
+          </view>
           至
-          <view class="pl-2"> {{ $moment(+item.endTime).format('MM-DD HH:mm') }}</view>
+          <view class="pl-2">{{ $moment(+item.endTime).format('MM-DD HH:mm') }}</view>
         </view>
       </view>
 
       <!-- 箭头 -->
       <view v-if="item.sonProjectList && item.sonProjectList.length">
-        <u-icon name="arrow-up" class="text-gray-400" size="14px" v-if="show" @click="openSubProject"></u-icon>
+        <u-icon @click="openSubProject" class="text-gray-400" name="arrow-up" size="14px" v-if="show"></u-icon>
         <u-icon
-          name="arrow-down"
+          @click="openSubProject(item.sonProjectList.length, index)"
           class="text-gray-400"
+          name="arrow-down"
           size="14px"
           v-else
-          @click="openSubProject(item.sonProjectList.length, index)"
         ></u-icon>
       </view>
-      <u-icon v-else name="arrow-right" class="text-gray-400" size="14px" @click="openProject(item)"></u-icon>
+      <u-icon @click="openProject(item)" class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon>
     </view>
     <!-- 有子项目 -->
-    <view v-if="show" class="ml-8">
-      <view v-for="subItem in item.sonProjectList" :key="subItem.id">
+    <view class="ml-8" v-if="show">
+      <view :key="subItem.id" v-for="subItem in item.sonProjectList">
         <view class="flex items-center justify-between p-3">
-          <u-icon class="mover" @click="openMenu(subItem)" size="48" name="https://www.tall.wiki/staticrec/drag.svg"></u-icon>
+          <u-icon @click="openMenu(subItem)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
 
-          <view class="flex-1 px-3" @click="openProject(subItem)">
+          <view @click="openProject(subItem)" class="flex-1 px-3">
             <view class="flex items-center">
               <view class="mr-2">{{ subItem.name }}</view>
-              <!-- 状态 TODO:-->
-              <view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view>
+              <!-- 状态 -->
+              <view
+                class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full"
+                :class="
+                  subItem.status === 0
+                    ? 'text-blue-400 bg-blue-100'
+                    : subItem.status === 1
+                    ? 'text-green-400 bg-green-100'
+                    : subItem.status === 2
+                    ? 'text-red-400 bg-red-100'
+                    : 'text-gray-400 bg-gray-100'
+                "
+              >
+                {{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }}
+              </view>
             </view>
           </view>
 
           <!-- 箭头 -->
-          <u-icon name="arrow-right" class="text-gray-400" size="14px" @click="openProject(subItem)"></u-icon>
+          <u-icon @click="openProject(subItem)" class="text-gray-400" name="arrow-right" size="14px"></u-icon>
         </view>
       </view>
     </view>
-
     <!-- 项目操作面板 -->
-    <u-action-sheet :tips="tips" :list="list" v-model="showMenu"></u-action-sheet>
+    <u-action-sheet :list="list" :tips="tips" v-model="showMenu"></u-action-sheet>
   </view>
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex';
+import { mapGetters } from 'vuex';
 
 export default {
   props: {
@@ -79,41 +93,15 @@ export default {
         fontSize: 28,
       },
       list: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }],
-      projectLists: [],
       show: false,
       border: 'border border-blue-500 shadow rounded-md',
       showBorder: false,
-
-      // 对应需要显示的标题
-      props: { label: 'label' },
-      lists: [{ label: '标题1' }, { label: '标题2' }, { label: '标题3' }, { label: '标题4' }, { label: '标题5' }],
     };
   },
 
-  computed: {
-    ...mapState('project', ['projects']),
-    ...mapGetters('user', ['userId']),
-  },
-
-  watch: {
-    projects(val) {
-      if (val) {
-        this.projectLists = [...this.projects];
-      }
-    },
-  },
-
-  mounted() {
-    this.projectLists = [...this.projects];
-  },
+  computed: mapGetters('user', ['userId']),
 
   methods: {
-    SortChange(e) {
-      console.log(e);
-      // frontData 插到谁后面
-      // data 操作的数据
-    },
-
     /**
      * 打开项目
      * @param {object} project 所点击的项目的信息
@@ -139,7 +127,6 @@ export default {
 
     // 展开子项目
     openSubProject(length, index) {
-      console.log('length, index: ', length, index);
       this.show = !this.show;
       if (length && index) {
         this.$emit('changeHeight', length, index);
@@ -148,3 +135,14 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.border-100 {
+  height: 4rpx;
+  margin: 0 20rpx;
+}
+.border-80 {
+  height: 4rpx;
+  margin: 0 20rpx 0 90rpx;
+}
+</style>
diff --git a/src/components/Projects/Projects copy.vue b/src/components/Projects/Projects copy.vue
deleted file mode 100644
index 073d320..0000000
--- a/src/components/Projects/Projects copy.vue	
+++ /dev/null
@@ -1,206 +0,0 @@
-<template>
-  <view class="py-3 mt-4 bg-white u-font-15">
-    <draggable
-      v-model="projectLists"
-      chosenClass="active"
-      animation="500"
-      @chang="change"
-      @start="start"
-      @end="end"
-      :move="move"
-      handle=".mover"
-    >
-      <view v-for="(project, index) in projectLists" :key="index">
-        <!-- 有子项目 -->
-        <view class="flex items-center justify-between p-3" :class="project.showBorder ? border : ''">
-          <u-icon class="mover" @click="openMenu(project)" size="48" name="https://www.tall.wiki/staticrec/drag.svg"></u-icon>
-
-          <view class="flex-1 px-3 divide-y divide-light-blue-400" @click="openProject(project)">
-            <view class="flex items-center mb-1">
-              <view class="mr-2">{{ project.name }}</view>
-              <!-- 状态 TODO:-->
-              <view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view>
-            </view>
-
-            <view class="flex items-center text-xs text-gray-400">
-              <view class="pr-2">{{ $moment(+project.startTime).format('MM-DD HH:mm') }}</view>
-              至
-              <view class="pl-2"> {{ $moment(+project.endTime).format('MM-DD HH:mm') }}</view>
-            </view>
-          </view>
-
-          <!-- 箭头 -->
-          <view v-if="project.subProject && project.subProject.length">
-            <u-icon name="arrow-up" class="text-gray-400" size="14px" v-if="show" @click="openSubProject"></u-icon>
-            <u-icon name="arrow-down" class="text-gray-400" size="14px" v-else @click="openSubProject"></u-icon>
-          </view>
-          <u-icon v-else name="arrow-right" class="text-gray-400" size="14px" @click="openProject(project)"></u-icon>
-        </view>
-        <!-- 有子项目 -->
-        <view v-if="show" class="ml-8">
-          <view v-for="subItem in project.subProject" :key="subItem.id">
-            <view class="flex items-center justify-between p-3">
-              <u-icon class="mover" @click="openMenu(subItem)" size="48" name="https://www.tall.wiki/staticrec/drag.svg"></u-icon>
-
-              <view class="flex-1 px-3" @click="openProject(subItem)">
-                <view class="flex items-center">
-                  <view class="mr-2">{{ subItem.name }}</view>
-                  <!-- 状态 TODO:-->
-                  <view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view>
-                </view>
-              </view>
-
-              <!-- 箭头 -->
-              <u-icon name="arrow-right" class="text-gray-400" size="14px" @click="openProject(subItem)"></u-icon>
-            </view>
-          </view>
-        </view>
-      </view>
-    </draggable>
-
-    <!-- 项目操作面板 -->
-    <u-action-sheet :tips="tips" :list="list" v-model="showMenu"></u-action-sheet>
-  </view>
-</template>
-
-<script>
-import draggable from 'vuedraggable';
-import { mapGetters, mapState } from 'vuex';
-
-export default {
-  components: { draggable },
-  data() {
-    return {
-      showMenu: false,
-      tips: {
-        text: '',
-        color: '#909399',
-        fontSize: 28,
-      },
-      list: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }],
-      projectLists: [],
-      show: false,
-      border: 'border border-blue-500 shadow rounded-md',
-      showBorder: false,
-    };
-  },
-
-  computed: {
-    ...mapState('project', ['projects']),
-    ...mapGetters('user', ['userId']),
-  },
-
-  watch: {
-    projects(val) {
-      if (val) {
-        this.projectLists = [...this.projects];
-
-        const arr = [
-          {
-            endTime: '1659680363000',
-            id: '1420652719055835520',
-            name: '测试子项目',
-            startTime: '1596608363000',
-            status: 1,
-            url: 'https://www.tall.wiki/gateway/qcp/v3.0',
-          },
-        ];
-        this.projectLists[0].subProject = [...arr];
-        console.log('this.projectLists[0]: ', this.projectLists[0]);
-      }
-    },
-  },
-
-  mounted() {
-    this.projectLists = [...this.projects];
-    const arr = [
-      {
-        endTime: '1659680363000',
-        id: '1420652719055835520',
-        name: '测试子项目',
-        startTime: '1596608363000',
-        status: 1,
-        url: 'https://www.tall.wiki/gateway/qcp/v3.0',
-      },
-    ];
-    this.projectLists[0].subProject = [...arr];
-  },
-
-  methods: {
-    change(event) {
-      console.log('change', event);
-    },
-    start(event) {
-      console.log('开始', event);
-    },
-    end(event) {
-      console.log('结束', event, this.groups);
-      this.showBorder = false;
-    },
-    move(event, orgin) {
-      console.log('move', event, orgin);
-      // 移动的位置
-      console.log('clientX', orgin.clientX);
-      console.log('clientY', orgin.clientY);
-      if (orgin.clientX > 60) {
-        // this.showBorder = true;
-        console.log('this.showBorder: ', this.showBorder);
-        this.projectLists[event.draggedContext.futureIndex].showBorder = true;
-        // this.projectLists[event.draggedContext.futureIndex].subProject = this.projectLists[event.relatedContext.index]
-      } else {
-        // this.showBorder = false;
-        this.projectLists[event.draggedContext.futureIndex].showBorder = false;
-      }
-
-      // 移动前的位置
-      console.log('移动前', event.draggedContext);
-      // 移动后的位置
-      console.log('移动后', event.relatedContext);
-      // 返回新数组
-      // [this.projectLists[event.draggedContext.index], this.projectLists[event.relatedContext.index]] = [
-      //   this.projectLists[event.relatedContext.index],
-      //   this.projectLists[event.draggedContext.index],
-      // ];
-    },
-
-    /**
-     * 打开项目
-     * @param {object} project 所点击的项目的信息
-     */
-    openProject(project) {
-      const { name, id, url } = project;
-      url && (uni.$t.domain = url);
-      this.$u.route('pages/project/project', {
-        u: this.userId,
-        p: id,
-        pname: name,
-        url: encodeURIComponent(url),
-      });
-    },
-
-    /**
-     * 弹出项目操作面板
-     */
-    openMenu(project) {
-      this.showMenu = true;
-      this.tips.text = project.name;
-    },
-
-    // 展开子项目
-    openSubProject() {
-      this.show = !this.show;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.order {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  font-size: 13px;
-}
-</style>
diff --git a/src/components/Projects/Projects.vue b/src/components/Projects/Projects.vue
index a240d4d..3b0a355 100644
--- a/src/components/Projects/Projects.vue
+++ b/src/components/Projects/Projects.vue
@@ -2,7 +2,7 @@
   <view class="py-3 mt-4 bg-white u-font-15">
     <!-- <PrettyExchange :list="projectLists"></PrettyExchange> -->
 
-    <pretty-exchange :list="projectLists"></pretty-exchange>
+    <pretty-exchange @change="change" :list="projectLists"></pretty-exchange>
 
     <!-- 项目操作面板 -->
     <!-- <u-action-sheet :tips="tips" :list="list" v-model="showMenu"></u-action-sheet> -->
@@ -53,38 +53,50 @@ export default {
   },
 
   methods: {
-    SortChange(e) {
-      console.log(e);
-      // frontData 插到谁后面
-      // data 操作的数据
+    change(options) {
+      if (options instanceof Array) {
+        let projectIdList = [];
+        let arr = [];
+        options.forEach(item => {
+          projectIdList.push(item.id);
+          arr.push(item.name);
+        });
+        this.setProjectSort(projectIdList);
+        console.log('arr: ', arr);
+      } else {
+        this.setProjectRelation(options);
+      }
     },
 
     /**
-     * 打开项目
-     * @param {object} project 所点击的项目的信息
+     * 设置项目顺序
+     * @param { Array } projectIdList 项目id
      */
-    openProject(project) {
-      const { name, id, url } = project;
-      url && (uni.$t.domain = url);
-      this.$u.route('pages/project/project', {
-        u: this.userId,
-        p: id,
-        pname: name,
-        url: encodeURIComponent(url),
-      });
+    async setProjectSort(projectIdList) {
+      try {
+        const params = { projectIdList };
+        await this.$u.api.setProjectSort(params);
+      } catch (error) {
+        console.log('error: ', error);
+        this.$t.ui.showToast(error.msg || '修改失败');
+      }
+      this.$emit('getProjects');
     },
 
     /**
-     * 弹出项目操作面板
+     * 设置项目父子结构
+     * @param { string } id 当前移动的项目的id
+     * @param { string } parentId 父项目的id
      */
-    openMenu(project) {
-      this.showMenu = true;
-      this.tips.text = project.name;
-    },
-
-    // 展开子项目
-    openSubProject() {
-      this.show = !this.show;
+    async setProjectRelation(options) {
+      try {
+        const params = options;
+        await this.$u.api.setProjectRelation(params);
+      } catch (error) {
+        console.log('error: ', error);
+        this.$t.ui.showToast(error.msg || '修改失败');
+      }
+      this.$emit('getProjects');
     },
   },
 };
diff --git a/src/components/pretty-exchange/pretty-exchange.vue b/src/components/pretty-exchange/pretty-exchange.vue
index f200380..b72ca20 100644
--- a/src/components/pretty-exchange/pretty-exchange.vue
+++ b/src/components/pretty-exchange/pretty-exchange.vue
@@ -1,36 +1,122 @@
 <template>
-  <view class="">
+  <view class>
     <scroll-view scroll-y="true" style="height: 80%">
       <view
-        class="cu-item"
         :id="'cu-' + index"
-        v-for="(item, index) in itemList"
         :key="index"
-        @touchstart="start($event, index)"
-        @touchmove.stop.prevent="move"
-        @touchend="stops($event, index)"
         :style="{ 'background-color': item.color }"
+        class="cu-item flex-col"
+        v-for="(item, index) in itemList"
+        @touchend="stops($event, index)"
+        @touchmove.stop.prevent="move"
+        @touchstart="start($event, index)"
       >
-        <project-item :item="item" :index="index"></project-item>
+        <view class="border-100 bg-blue-500" v-if="item.showTopBorder"></view>
+        <!-- 内容区 -->
+        <!-- <project-item :index="index" :item="item"></project-item> -->
+        <!-- 父项目 -->
+        <view class="w-full">
+          <view class="flex items-center justify-between p-3">
+            <u-icon @click="openMenu(item)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
+
+            <view @click="openProject(item)" class="flex-1 px-3">
+              <view class="flex items-center mb-1">
+                <view class="mr-2">{{ item.name }}</view>
+                <!-- 状态 TODO:-->
+                <view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view>
+              </view>
+
+              <view class="flex items-center text-xs text-gray-400">
+                <view class="pr-2"> {{ $moment(+item.startTime).format('MM-DD HH:mm') }} </view>至
+                <view class="pl-2">{{ $moment(+item.endTime).format('MM-DD HH:mm') }}</view>
+              </view>
+            </view>
+
+            <!-- 箭头 -->
+            <view v-if="item.sonProjectList && item.sonProjectList.length">
+              <u-icon
+                @click="openSubProject(item.sonProjectList.length, index)"
+                class="text-gray-400"
+                name="arrow-up"
+                size="14px"
+                v-if="item.show"
+              ></u-icon>
+              <u-icon
+                @click="openSubProject(item.sonProjectList.length, index)"
+                class="text-gray-400"
+                name="arrow-down"
+                size="14px"
+                v-else
+              ></u-icon>
+            </view>
+            <u-icon @click="openProject(item)" class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon>
+          </view>
+          <!-- 父项目 end -->
+          <!-- 子项目 -->
+
+          <view class="ml-8" v-if="item.show">
+            <view
+              :id="'cu-' + index + '-' + subIndex"
+              :key="subIndex"
+              :style="{ 'background-color': item.color }"
+              @touchend.stop.prevent="stops($event, index + '-' + subIndex, item.sonProjectList.length)"
+              @touchmove.stop.prevent="move($event, item.sonProjectList.length)"
+              @touchstart.stop.prevent="start($event, index + '-' + subIndex)"
+              class="cu-item flex-col"
+              v-for="(subItem, subIndex) in item.sonProjectList"
+            >
+              <!-- <view :key="subItem.id" v-for="subItem in item.sonProjectList"> -->
+              <view class="flex items-center justify-between p-3 w-full">
+                <u-icon @click="openMenu(subItem)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
+
+                <view @click="openProject(subItem)" class="flex-1 px-3">
+                  <view class="flex items-center">
+                    <view class="mr-2">{{ subItem.name }}</view>
+                    <!-- 状态 -->
+                    <view
+                      class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full"
+                      :class="
+                        subItem.status === 0
+                          ? 'text-blue-400 bg-blue-100'
+                          : subItem.status === 1
+                          ? 'text-green-400 bg-green-100'
+                          : subItem.status === 2
+                          ? 'text-red-400 bg-red-100'
+                          : 'text-gray-400 bg-gray-100'
+                      "
+                    >
+                      {{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }}
+                    </view>
+                  </view>
+                </view>
+
+                <!-- 箭头 -->
+                <u-icon @click="openProject(subItem)" class="text-gray-400" name="arrow-right" size="14px"></u-icon>
+              </view>
+            </view>
+          </view>
+        </view>
+        <!-- 内容区 end -->
+        <view class="border-100 bg-blue-500" v-if="item.showBorder"></view>
+        <view class="border-80 bg-blue-500" v-if="item.showSubBorder"></view>
       </view>
     </scroll-view>
-
     <!-- 移动悬浮 begin -->
     <view v-if="showMoveImage">
-      <view
-        class="cu-item"
-        style="position: absolute"
-        :style="{ left: moveLeft + 'px', top: moveTop + 'px', 'background-color': moveItem.color }"
-      >
+      <view :style="{ left: moveLeft + 'px', top: moveTop + 'px' }" class="cu-item" style="position: absolute">
         <project-item :item="moveItem"></project-item>
       </view>
     </view>
     <!-- 移动悬浮 end -->
+
+    <!-- 项目操作面板 -->
+    <u-action-sheet :list="menuList" :tips="tips" v-model="showMenu"></u-action-sheet>
   </view>
 </template>
 
 <script>
 import ProjectItem from '../Projects/ProjectItem.vue';
+import { mapGetters, mapMutations } from 'vuex';
 
 export default {
   components: { ProjectItem },
@@ -39,6 +125,7 @@ export default {
     prop: 'showPop',
     event: 'change',
   },
+
   props: {
     list: {
       // 数据交换列表
@@ -48,11 +135,13 @@ export default {
       },
     },
   },
+
   data() {
     return {
       itemTop: 0,
       itemLeft: 0,
       itemHeight: 0, // 移动元素的高度
+      subItemHeight: 0, // 移动子元素的高度
       itemWidth: 0, // 移动元素的宽度
       showMoveImage: false,
       moveItem: '',
@@ -60,69 +149,145 @@ export default {
       moveTop: 0,
       deltaLeft: 0,
       deltaTop: 0,
-      marginDis: 0,
       beginleft: 0,
       begintop: 0,
       itemList: [],
+      setSubItem: false,
+
+      showMenu: false,
+      tips: {
+        text: '',
+        color: '#909399',
+        fontSize: 28,
+      },
+      menuList: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }],
+      // show: false,
+      border: 'border border-blue-500 shadow rounded-md',
+      showBorder: false,
     };
   },
+
+  computed: mapGetters('user', ['userId']),
+
   mounted: function () {
     this.$nextTick(function () {
       this.itemList = this.list;
-    });
-    setTimeout(() => {
-      const query = uni.createSelectorQuery().in(this);
-      query
-        .select(`#cu-0`)
-        .boundingClientRect(data => {
-          console.log(data);
-          this.begintop = data.top;
-          this.beginleft = data.left;
-        })
-        .exec();
-      query
-        .select(`#cu-1`)
-        .boundingClientRect(data => {
-          this.marginDis = (data.top - this.begintop - data.height) / 2; // 元素之间的margin值
-        })
-        .exec();
+      this.itemList.forEach(item => {
+        item.showBorder = false;
+        item.showSubBorder = false;
+        item.showTopBorder = false;
+      });
     });
   },
+
   watch: {
-    list(val, oldVal) {
-      console.log('oldVal: ', oldVal);
+    list(val) {
       this.itemList = val;
+      this.itemList.forEach(item => {
+        item.showBorder = false;
+        item.showSubBorder = false;
+        item.showTopBorder = false;
+      });
     },
   },
-  created() {},
+
   methods: {
-    start(e, index) {
-      console.log('e, index: ', e, index);
+    ...mapMutations('project', ['setProjectItemShow']),
+
+    /**
+     * 打开项目
+     * @param {object} project 所点击的项目的信息
+     */
+    openProject(project) {
+      const { name, id, url } = project;
+      url && (uni.$t.domain = url);
+      this.$u.route('pages/project/project', {
+        u: this.userId,
+        p: id,
+        pname: name,
+        url: encodeURIComponent(url),
+      });
+    },
+
+    /**
+     * 弹出项目操作面板
+     */
+    openMenu(project) {
+      this.showMenu = true;
+      this.tips.text = project.name;
+    },
+
+    // 展开子项目
+    openSubProject(length, index) {
+      this.setProjectItemShow({ index, show: this.itemList[index].show ? false : true });
+      if (length && index) {
+        this.$emit('changeHeight', length, index);
+      }
+    },
+
+    // 获取项目列表距离顶部的距离
+    getDate() {
       const query = uni.createSelectorQuery().in(this);
       query
-        .select(`#cu-${index}`)
+        .select(`#cu-0`)
         .boundingClientRect(data => {
           console.log('data: ', data);
-          //#ifdef H5
-          // this.moveTop = data.top - data.height;
-          //#endif
-          //#ifndef H5
-          // this.moveTop = data.top;
-          //#endif
-          this.moveTop = data.top;
-
-          this.moveLeft = data.left;
-          this.moveItem = this.itemList[index];
-          this.itemWidth = data.width;
-          this.itemHeight = data.height;
-          this.showMoveImage = true; //悬浮开始
+          this.begintop = data.top;
+          this.beginleft = data.left;
         })
         .exec();
     },
 
-    move(e) {
+    isNumber(val) {
+      return val === +val;
+    },
+
+    start(e, index) {
+      setTimeout(() => {
+        this.getDate();
+      }, 300);
+
+      if (this.isNumber(index)) {
+        this.setSubItem = false;
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(`#cu-${index}`)
+          .boundingClientRect(data => {
+            this.moveTop = data.top;
+            this.moveLeft = data.left;
+            this.moveItem = this.itemList[index];
+            this.itemWidth = data.width;
+            this.itemHeight = data.height;
+          })
+          .exec();
+      } else {
+        let arr = index.split('-');
+        // this.moveItem = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
+        this.setSubItem = true;
+        const query = uni.createSelectorQuery().in(this);
+        query
+          .select(`#cu-${arr[0] - 0}`)
+          .boundingClientRect(data => {
+            this.itemHeight = data.height;
+          })
+          .exec();
+
+        query
+          .select(`#cu-${index}`)
+          .boundingClientRect(data => {
+            this.moveTop = data.top;
+            this.moveLeft = data.left;
+            this.moveItem = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
+            this.itemWidth = data.width;
+            this.subItemHeight = data.height;
+          })
+          .exec();
+      }
+    },
+
+    move(e, length) {
+      this.showMoveImage = true; //悬浮开始
       const touch = e.touches[0];
-      console.log('touch: ', touch);
       if (this.deltaLeft == 0) {
         // 获得本身的移动
         this.deltaLeft = touch.pageX - this.moveLeft;
@@ -130,31 +295,158 @@ export default {
       }
       this.moveLeft = touch.pageX - this.deltaLeft;
       this.moveTop = touch.pageY - this.deltaTop;
-      console.log('this.moveLeft: ', this.moveLeft);
-      console.log('this.moveTop: ', this.moveTop);
+
+      let lastIndex = (lastIndex = this.findOverIndex(touch.pageY, length));
+      // 显示下划线
+      for (let i = 0; i < this.itemList.length; i++) {
+        if (this.moveLeft > 35) {
+          this.itemList[i].showBorder = false;
+          this.itemList[i].showTopBorder = false;
+          if (i === lastIndex) {
+            this.itemList[i].showSubBorder = true;
+          } else {
+            this.itemList[i].showSubBorder = false;
+          }
+        } else {
+          if (lastIndex === -1) {
+            this.itemList[0].showTopBorder = true;
+            this.itemList[i].showSubBorder = false;
+            this.itemList[i].showBorder = false;
+          } else {
+            this.itemList[i].showSubBorder = false;
+            this.itemList[i].showTopBorder = false;
+            if (i === lastIndex) {
+              this.itemList[i].showBorder = true;
+            } else {
+              this.itemList[i].showBorder = false;
+            }
+          }
+        }
+      }
     },
 
-    stops(e, index) {
-      console.log('e, index: ', e, index);
+    stops(e, index, length) {
+      console.log('结束', index);
       const touch = e.mp.changedTouches[0];
-      console.log('touch: ', touch);
-      // let lastIndex = (lastIndex = this.findOverIndex(touch.pageY));
+      console.log('touch.pageY: ', touch.pageY);
+      let lastIndex = (lastIndex = this.findOverIndex(touch.pageY, length));
+
       // 交换两个值
-      // let Value = this.itemList[index];
-      // this.itemList[index] = this.itemList[lastIndex];
-      // this.itemList[lastIndex] = Value;
-      // this.deltaLeft == 0;
+      for (let i = 0; i < this.itemList.length; i++) {
+        // 插入顶部
+        if (this.itemList[i].showTopBorder) {
+          if (this.isNumber(index)) {
+            let Value = this.itemList[index];
+            this.itemList.unshift(Value);
+            this.itemList.splice(index + 1, 1);
+          } else {
+            let arr = index.split('-');
+            let Value = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
+            this.itemList.unshift(Value);
+            this.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
+            const options = {
+              id: Value.id,
+              parentId: 0,
+            };
+            this.$emit('change', options);
+          }
+          // 清空
+          this.clearSet(i);
+          this.$emit('change', this.itemList);
+          return;
+        }
+        // 插入一级项目
+        if (this.itemList[i].showBorder) {
+          if (this.isNumber(index)) {
+            let Value = this.itemList[index];
+            this.itemList.splice(i + 1, 0, Value);
+            if (i < index) {
+              this.itemList.splice(index + 1, 1);
+            } else {
+              this.itemList.splice(index, 1);
+            }
+          } else {
+            let arr = index.split('-');
+            let Value = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
+            this.itemList.splice(i + 1, 0, Value);
+            this.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
+            const options = {
+              id: Value.id,
+              parentId: 0,
+            };
+            this.$emit('change', options);
+          }
+          // 清空
+          this.clearSet(i);
+          this.$emit('change', this.itemList);
+          return;
+        }
+        // 插入二级项目
+        if (this.itemList[i].showSubBorder) {
+          if (this.isNumber(index)) {
+            let Value = this.itemList[index];
+            console.log('lastIndex: ', lastIndex);
+            if (this.itemList[lastIndex - 1].sonProjectList && this.itemList[lastIndex - 1].sonProjectList.length) {
+              this.itemList[lastIndex - 1].sonProjectList.push(Value);
+            } else {
+              this.itemList[lastIndex].sonProjectList = [Value];
+            }
+            this.itemList.splice(index, 1);
+            // 清空
+            this.clearSet(i);
+            const options = {
+              id: Value.id,
+              parentId: this.itemList[lastIndex - 1].id,
+            };
+            this.$emit('change', options);
+          } else {
+            let arr = index.split('-');
+            let Value = this.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
+            if (this.itemList[lastIndex].sonProjectList && this.itemList[lastIndex].sonProjectList.length) {
+              this.itemList[lastIndex].sonProjectList.push(Value);
+            } else {
+              this.itemList[lastIndex].sonProjectList = [Value];
+            }
+            this.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
+            // 清空
+            this.clearSet(i);
+            const options = {
+              id: Value.id,
+              parentId: this.itemList[lastIndex].id,
+            };
+            this.$emit('change', options);
+
+            const options1 = {
+              id: Value.id,
+              parentId: 0,
+            };
+            this.$emit('change', options1);
+          }
+          return;
+        }
+      }
+    },
+
+    // 还原初始数据
+    clearSet(i) {
+      this.itemList[i].showBorder = false;
+      this.itemList[i].showSubBorder = false;
+      this.itemList[i].showTopBorder = false;
+      this.deltaLeft == 0;
       this.showMoveImage = false;
-      // this.$emit('change', this.itemList);
+      this.setSubItem = false;
     },
 
     // 找到停下的元素的下标
     findOverIndex(posY) {
-      console.log('posY: ', posY);
-      let leng = this.itemList.length * this.itemHeight + this.marginDis * 2 * (this.itemList.length - 1); // 最后一个元素距离顶部的距离
+      // 如果有子项目展开着
+      let leng = this.itemList.length * this.itemHeight; // 最后一个元素距离顶部的距离
+      if (posY < this.begintop) {
+        return -1;
+      }
       for (var i = 0; i < this.itemList.length; i++) {
         let begin = this.itemHeight * i + this.begintop;
-        let end = this.itemHeight * i + this.begintop + this.itemHeight + this.marginDis * 2 * i;
+        let end = this.itemHeight * i + this.begintop + this.itemHeight;
         if (begin <= posY && end >= posY) {
           return i;
         }
@@ -178,16 +470,13 @@ export default {
   font-size: 14px;
 }
 
-.staffimage {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  margin: 0 20px;
+.border-100 {
+  width: 92%;
+  height: 4rpx;
 }
-
-.staffimage image {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
+.border-80 {
+  width: 84%;
+  height: 2px;
+  margin-left: 30px;
 }
 </style>
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index d27bd50..7b91407 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -8,7 +8,7 @@
     </view>
 
     <!-- 项目列表 -->
-    <Projects class="flex-1 overflow-y-auto" />
+    <Projects @getProjects="getProjects" class="flex-1 overflow-y-auto" />
 
     <!-- 全局提示框 -->
     <u-top-tips ref="uTips"></u-top-tips>
@@ -58,6 +58,9 @@ export default {
         if (err) {
           console.error('err: ', err);
         } else {
+          data.forEach(item => {
+            item.show = false;
+          });
           this.setProjects(data);
         }
       });
diff --git a/src/store/project/mutations.js b/src/store/project/mutations.js
index c208b5f..fc5baf3 100644
--- a/src/store/project/mutations.js
+++ b/src/store/project/mutations.js
@@ -12,6 +12,25 @@ const mutations = {
     }
   },
 
+  /**
+   * 设置子项目收缩展开
+   * @param { object } state
+   * @param { object } options options:{ index,show }
+   */
+  setProjectItemShow(state, options) {
+    if (options.show) {
+      for (var i = 0; i < state.projects.length; i++) {
+        if (i === options.index) {
+          state.projects[i].show = true;
+        } else {
+          state.projects[i].show = false;
+        }
+      }
+    } else {
+      state.projects[options.index].show = false;
+    }
+  },
+
   /**
    * 设置当前项目信息
    * @param { object } state