From a0b491b38c45b59c0e5a3d28409935d083501566 Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Tue, 24 Aug 2021 18:30:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=A1=B9=E7=9B=AE?=
 =?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                         |   1 +
 package.json                         |   1 +
 src/.hbuilderx/launch.json           |  11 --
 src/components/Projects/Projects.vue | 172 ++++++++++++++++++++++++---
 src/package.json                     |  37 ++++++
 5 files changed, 192 insertions(+), 30 deletions(-)
 delete mode 100644 src/.hbuilderx/launch.json
 create mode 100644 src/package.json

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1aa5ac4..3344cf8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -110,6 +110,7 @@
  - | 定期任务接口 | [aa4981c](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/aa4981c)
  - | 定期任务插件 | [92b3254](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/92b3254)
  - | 定期任务未加载时,显示空的时间轴并能上下滑动 | [ce38093](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/ce38093)
+ - | 定期任务本地缓存和api赋值,未完成 | [5a10856](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/5a10856)
  定期任务本地缓存和api赋值,未完成 | 定期任务本地缓存和api赋值,未完成 | [b22a366](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/b22a366)
  - | 定期任务骨架屏修改 | [8ff72dd](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/8ff72dd)
  - | 平车演示临时去掉项目快捷方式的toast提示 | [e0b2c23](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e0b2c23)
diff --git a/package.json b/package.json
index 5ca43c4..ca9496d 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "regenerator-runtime": "^0.12.1",
     "uview-ui": "^1.8.4",
     "vue": "^2.6.11",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.2.0"
   },
   "devDependencies": {
diff --git a/src/.hbuilderx/launch.json b/src/.hbuilderx/launch.json
deleted file mode 100644
index e5aaa3e..0000000
--- a/src/.hbuilderx/launch.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{ // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
-  // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
-    "version": "0.0",
-    "configurations": [{
-            "type": "uniCloud",
-            "default": {
-                "launchtype": "local"
-            }
-        }
-    ]
-}
diff --git a/src/components/Projects/Projects.vue b/src/components/Projects/Projects.vue
index 6338842..1d2d651 100644
--- a/src/components/Projects/Projects.vue
+++ b/src/components/Projects/Projects.vue
@@ -1,39 +1,88 @@
 <template>
   <view class="py-3 mt-4 bg-white u-font-15">
-    <view v-for="(project, index) in projects" :key="index">
-      <!-- 有子项目 -->
-      <view class="flex items-center justify-between p-3">
-        <view class="text-blue-400 border border-blue-200 rounded-full order bg-blue-50">
-          {{ index + 1 }}
-        </view>
+    <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 }}+{{ project.showBorder }}</view>
+              <!-- 状态 TODO:-->
+              <view class="px-2 text-xs text-green-400 bg-green-100 rounded-full">进行中</view>
+            </view>
 
-        <view class="flex-1 px-3">
-          <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 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 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 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(project)"></u-icon>
+              <!-- 箭头 -->
+              <u-icon name="arrow-right" class="text-gray-400" size="14px" @click="openProject(subItem)"></u-icon>
+            </view>
+          </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 {};
+    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: {
@@ -41,7 +90,79 @@ export default {
     ...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 所点击的项目的信息
@@ -56,6 +177,19 @@ export default {
         url: encodeURIComponent(url),
       });
     },
+
+    /**
+     * 弹出项目操作面板
+     */
+    openMenu(project) {
+      this.showMenu = true;
+      this.tips.text = project.name;
+    },
+
+    // 展开子项目
+    openSubProject() {
+      this.show = !this.show;
+    },
   },
 };
 </script>
diff --git a/src/package.json b/src/package.json
new file mode 100644
index 0000000..743d5c5
--- /dev/null
+++ b/src/package.json
@@ -0,0 +1,37 @@
+{
+  "pages": [
+    {
+      "path": "pages/index/index",
+      "style": {
+        "navigationStyle": "custom" ,
+        "navigationBarTextStyle": "white"
+      }
+    },
+    {
+      "path": "pages/project/project",
+      "style": {
+        "navigationStyle": "custom" ,
+        "navigationBarTextStyle": "white"
+      }
+    },
+    {
+      "path": "pages/test/test",
+      "style": {
+        "navigationBarTitleText": "测试"
+      }
+    }
+  ],
+  "globalStyle": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "TALL",
+    "navigationBarBackgroundColor": "#F8F8F8",
+    "backgroundColor": "#F8F8F8"
+  },
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue",
+      "^p-(.*)": "@/plugins/p-$1/p-$1.vue"
+    }
+  }
+}