From 59f4c21703638e44cb833cefa1a32b9bacea5b3d Mon Sep 17 00:00:00 2001
From: song <srf428110@163.com>
Date: Fri, 27 Aug 2021 09:28:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A1=B9=E7=9B=AE=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |   3 +-
 .../PrettyExchange.vue}                       | 283 ++++++++++--------
 src/components/Projects/ProjectItem.vue       |  46 +--
 src/components/Projects/Projects.vue          |  51 +---
 4 files changed, 183 insertions(+), 200 deletions(-)
 rename src/components/{pretty-exchange/pretty-exchange.vue => PrettyExchange/PrettyExchange.vue} (62%)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 25133fb..fb050b2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-# 0.1.0 (2021-08-26)
+# 0.1.0 (2021-08-27)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -139,6 +139,7 @@
  - | 解决时间轴报错 | [da1eece](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/da1eece)
  - | 设置时间轴自动滚动到当前位置 | [a3474f8](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/a3474f8)
  - | 跳转详情页返回路径修改 | [c5e17c0](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/c5e17c0)
+ 项目列表排序 | 项目列表排序 | [402c563](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/402c563)
  - | 骨架屏替换 | [e9fdd71](https://dd.tall.wiki/gitea/ccsens_fe/TALL-MUI-3/commits/e9fdd71)
 
 
diff --git a/src/components/pretty-exchange/pretty-exchange.vue b/src/components/PrettyExchange/PrettyExchange.vue
similarity index 62%
rename from src/components/pretty-exchange/pretty-exchange.vue
rename to src/components/PrettyExchange/PrettyExchange.vue
index b72ca20..b651f8e 100644
--- a/src/components/pretty-exchange/pretty-exchange.vue
+++ b/src/components/PrettyExchange/PrettyExchange.vue
@@ -1,104 +1,115 @@
 <template>
   <view class>
     <scroll-view scroll-y="true" style="height: 80%">
-      <view
-        :id="'cu-' + index"
-        :key="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)"
-      >
-        <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 v-if="!changeEvent">
+        <view :id="'cu-' + index" :key="item.id" class="cu-item flex-col" v-for="(item, index) in itemList">
+          <project-item
+            :index="index"
+            :item="item"
+            :menuList="menuList"
+            @chooseAction="chooseAction"
+            @openSubProject="openSubProject"
+          ></project-item>
+        </view>
+      </view>
+      <view v-else>
+        <view
+          :id="'cu-' + index"
+          :key="index"
+          :style="{ 'background-color': item.color }"
+          @touchend="stops($event, index)"
+          @touchmove.stop.prevent="move"
+          @touchstart="start($event, index)"
+          class="cu-item flex-col"
+          v-for="(item, index) in itemList"
+        >
+          <view class="border-100 bg-blue-500" v-if="item.showTopBorder"></view>
+          <!-- 内容区 -->
+          <!-- 父项目 -->
+          <view class="w-full">
+            <view class="flex items-center justify-between p-3">
+              <u-icon class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
+
+              <view 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 @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 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 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 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 class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon>
             </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 ? '暂停' : '已完成' }}
+            <!-- 父项目 end -->
+            <!-- 子项目 -->
+            <view class="ml-8" v-if="item.show">
+              <view
+                :id="'cu-' + index + '-' + subIndex"
+                :key="subIndex"
+                @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"
+              >
+                <!-- @touchstart="start($event, index + '-' + subIndex)" -->
+                <!-- <view :key="subItem.id" v-for="subItem in item.sonProjectList"> -->
+                <view class="flex items-center justify-between p-3 w-full">
+                  <u-icon class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
+
+                  <view class="flex-1 px-3">
+                    <view class="flex items-center">
+                      <view class="mr-2">{{ subItem.name }}</view>
+                      <!-- 状态 -->
+                      <view
+                        :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'
+                        "
+                        class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full"
+                        >{{
+                          subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成'
+                        }}</view>
                     </view>
                   </view>
-                </view>
 
-                <!-- 箭头 -->
-                <u-icon @click="openProject(subItem)" class="text-gray-400" name="arrow-right" size="14px"></u-icon>
+                  <!-- 箭头 -->
+                  <u-icon 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>
-        <!-- 内容区 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 -->
@@ -108,15 +119,12 @@
       </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';
+import { mapState, mapGetters, mapMutations } from 'vuex';
 
 export default {
   components: { ProjectItem },
@@ -126,16 +134,6 @@ export default {
     event: 'change',
   },
 
-  props: {
-    list: {
-      // 数据交换列表
-      type: Array,
-      default() {
-        return [];
-      },
-    },
-  },
-
   data() {
     return {
       itemTop: 0,
@@ -153,6 +151,7 @@ export default {
       begintop: 0,
       itemList: [],
       setSubItem: false,
+      changeEvent: false,
 
       showMenu: false,
       tips: {
@@ -160,18 +159,30 @@ export default {
         color: '#909399',
         fontSize: 28,
       },
-      menuList: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }],
+      menuList: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }, { text: '排序' }],
       // show: false,
       border: 'border border-blue-500 shadow rounded-md',
       showBorder: false,
+      showItemIndex: undefined,
     };
   },
 
-  computed: mapGetters('user', ['userId']),
+  computed: {
+    ...mapGetters('user', ['userId']),
+    ...mapState('project', ['projects']),
 
-  mounted: function () {
+    eventName() {
+      if (this.changeEvent) {
+        return 'move.stop.prevent';
+      } else {
+        return 'move';
+      }
+    },
+  },
+
+  mounted() {
     this.$nextTick(function () {
-      this.itemList = this.list;
+      this.itemList = this.projects;
       this.itemList.forEach(item => {
         item.showBorder = false;
         item.showSubBorder = false;
@@ -181,7 +192,7 @@ export default {
   },
 
   watch: {
-    list(val) {
+    projects(val) {
       this.itemList = val;
       this.itemList.forEach(item => {
         item.showBorder = false;
@@ -193,36 +204,13 @@ export default {
 
   methods: {
     ...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);
       }
+      this.showItemIndex = index;
     },
 
     // 获取项目列表距离顶部的距离
@@ -238,11 +226,29 @@ export default {
         .exec();
     },
 
+    // 操作
+    chooseAction(index) {
+      if (this.menuList[index].text === '排序') {
+        this.changeEvent = true;
+        this.$t.ui.showToast('请移动进行排序');
+      }
+
+      if (this.showItemIndex !== undefined) {
+        this.setProjectItemShow({ index: this.showItemIndex, show: true });
+      }
+    },
+
     isNumber(val) {
       return val === +val;
     },
 
     start(e, index) {
+      if (!this.changeEvent) {
+        return;
+      } else {
+        e.stopPropagation();
+      }
+      console.log('开始');
       setTimeout(() => {
         this.getDate();
       }, 300);
@@ -262,7 +268,6 @@ export default {
           .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
@@ -286,6 +291,12 @@ export default {
     },
 
     move(e, length) {
+      if (!this.changeEvent) {
+        return;
+      } else {
+        e.stopPropagation();
+      }
+      console.log('移动');
       this.showMoveImage = true; //悬浮开始
       const touch = e.touches[0];
       if (this.deltaLeft == 0) {
@@ -326,9 +337,14 @@ export default {
     },
 
     stops(e, index, length) {
-      console.log('结束', index);
+      if (!this.changeEvent) {
+        return;
+      } else {
+        e.stopPropagation();
+      }
+
+      console.log('结束');
       const touch = e.mp.changedTouches[0];
-      console.log('touch.pageY: ', touch.pageY);
       let lastIndex = (lastIndex = this.findOverIndex(touch.pageY, length));
 
       // 交换两个值
@@ -385,7 +401,6 @@ export default {
         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 {
@@ -435,6 +450,8 @@ export default {
       this.deltaLeft == 0;
       this.showMoveImage = false;
       this.setSubItem = false;
+      this.changeEvent = false;
+      this.showItemIndex = undefined;
     },
 
     // 找到停下的元素的下标
diff --git a/src/components/Projects/ProjectItem.vue b/src/components/Projects/ProjectItem.vue
index a242035..7f3ca34 100644
--- a/src/components/Projects/ProjectItem.vue
+++ b/src/components/Projects/ProjectItem.vue
@@ -12,19 +12,22 @@
         </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>
       </view>
 
       <!-- 箭头 -->
       <view v-if="item.sonProjectList && item.sonProjectList.length">
-        <u-icon @click="openSubProject" class="text-gray-400" name="arrow-up" size="14px" v-if="show"></u-icon>
         <u-icon
-          @click="openSubProject(item.sonProjectList.length, index)"
+          @click="$emit('openSubProject', item.sonProjectList.length, index)"
+          class="text-gray-400"
+          name="arrow-up"
+          size="14px"
+          v-if="item.show"
+        ></u-icon>
+        <u-icon
+          @click="$emit('openSubProject', item.sonProjectList.length, index)"
           class="text-gray-400"
           name="arrow-down"
           size="14px"
@@ -34,8 +37,14 @@
       <u-icon @click="openProject(item)" class="text-gray-400" name="arrow-right" size="14px" v-else></u-icon>
     </view>
     <!-- 有子项目 -->
-    <view class="ml-8" v-if="show">
-      <view :key="subItem.id" v-for="subItem in item.sonProjectList">
+    <view class="ml-8" v-if="item.show">
+      <view
+        :id="'cu-' + index + '-' + subIndex"
+        :key="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">
           <u-icon @click="openMenu(subItem)" class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
 
@@ -44,7 +53,6 @@
               <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'
@@ -54,9 +62,8 @@
                     ? 'text-red-400 bg-red-100'
                     : 'text-gray-400 bg-gray-100'
                 "
-              >
-                {{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }}
-              </view>
+                class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full"
+                >{{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }}</view>
             </view>
           </view>
 
@@ -66,7 +73,7 @@
       </view>
     </view>
     <!-- 项目操作面板 -->
-    <u-action-sheet :list="list" :tips="tips" v-model="showMenu"></u-action-sheet>
+    <u-action-sheet :list="menuList" :tips="tips" @click="$emit('chooseAction', $event)" v-model="showMenu"></u-action-sheet>
   </view>
 </template>
 
@@ -83,6 +90,10 @@ export default {
       type: Number,
       default: 0,
     },
+    menuList: {
+      type: Array,
+      default: () => [],
+    },
   },
   data() {
     return {
@@ -92,7 +103,6 @@ export default {
         color: '#909399',
         fontSize: 28,
       },
-      list: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }],
       show: false,
       border: 'border border-blue-500 shadow rounded-md',
       showBorder: false,
@@ -124,14 +134,6 @@ export default {
       this.showMenu = true;
       this.tips.text = project.name;
     },
-
-    // 展开子项目
-    openSubProject(length, index) {
-      this.show = !this.show;
-      if (length && index) {
-        this.$emit('changeHeight', length, index);
-      }
-    },
   },
 };
 </script>
diff --git a/src/components/Projects/Projects.vue b/src/components/Projects/Projects.vue
index 3b0a355..c85f3a5 100644
--- a/src/components/Projects/Projects.vue
+++ b/src/components/Projects/Projects.vue
@@ -1,55 +1,16 @@
 <template>
   <view class="py-3 mt-4 bg-white u-font-15">
-    <!-- <PrettyExchange :list="projectLists"></PrettyExchange> -->
-
-    <pretty-exchange @change="change" :list="projectLists"></pretty-exchange>
-
-    <!-- 项目操作面板 -->
-    <!-- <u-action-sheet :tips="tips" :list="list" v-model="showMenu"></u-action-sheet> -->
+    <PrettyExchange @change="change"></PrettyExchange>
   </view>
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex';
-import PrettyExchange from '../pretty-exchange/pretty-exchange.vue';
+import PrettyExchange from '../PrettyExchange/PrettyExchange.vue';
 
 export default {
   components: { PrettyExchange },
   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,
-
-      // 对应需要显示的标题
-      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];
+    return {};
   },
 
   methods: {
@@ -76,9 +37,10 @@ export default {
       try {
         const params = { projectIdList };
         await this.$u.api.setProjectSort(params);
+        this.$t.ui.showToast('排序修改成功');
       } catch (error) {
         console.log('error: ', error);
-        this.$t.ui.showToast(error.msg || '修改失败');
+        this.$t.ui.showToast(error.msg || '排序修改失败');
       }
       this.$emit('getProjects');
     },
@@ -92,9 +54,10 @@ export default {
       try {
         const params = options;
         await this.$u.api.setProjectRelation(params);
+        this.$t.ui.showToast('排序修改成功');
       } catch (error) {
         console.log('error: ', error);
-        this.$t.ui.showToast(error.msg || '修改失败');
+        this.$t.ui.showToast(error.msg || '排序修改失败');
       }
       this.$emit('getProjects');
     },