fix: 项目列表排序

CHANGELOG.md

@@ -5,6 +5,7 @@
 --|--|--
  - | 表单验证 | [8f3bc1e](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/8f3bc1e)
  - | 插件面板分开显示 | [fb5e86b](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/fb5e86b)
+ - | 登录、日历页小绿点、二级项目列表 | [e676cf0](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/e676cf0)
  - | 更新代码 | [392c8cc](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/392c8cc)
  - | 日历页首页 | [561c8e6](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/561c8e6)
  - | 日历页添加 | [1b46a91](https://101.201.226.163:50022/TALL/TALL-MUI-4/commits/1b46a91)

components/PrettyExchange/PrettyExchange.vue

@@ -3,17 +3,31 @@
     <scroll-view scroll-y="true">
       <view v-if="!data.changeEvent">
         <view :id="'cu-' + index" :key="item.id" class="cu-item flex-col" v-for="(item, index) in data.itemList">
-          <ProjectItem class="w-full" :index="index" :item="item" :menuList="data.menuList" @setData="setData"
+          <ProjectItem
-            @openSubProject="openSubProject" />
+            class="w-full"
+            :index="index"
+            :item="item"
+            :menuList="data.menuList"
+            @setData="setData"
+            @openSubProject="openSubProject"
+          />
         </view>
       </view>
 
       <view v-else>
-        <view :id="'cu-' + index" :key="index" :style="{ 'background-color': item.color }"
+        <view
-          @touchend="stops($event, index)" @touchmove.stop.prevent="move" @touchstart="start($event, index)"
+          :id="'cu-' + index"
-          class="cu-item flex-col" v-for="(item, index) in data.itemList">
+          :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 data.itemList"
+        >
+
           <view class="border-100 bg-blue-500" v-if="item.showTopBorder"></view>
-111111111111
+
           <!-- 内容区 -->
           <!-- 父项目 -->
           <view class="w-full">
@@ -36,10 +50,8 @@
 
               <!-- 箭头 -->
               <view v-if="item.sonProjectList && item.sonProjectList.length">
-                <u-icon @click="openSubProject(item.sonProjectList.length, index)" class="text-gray-400" name="arrow-up"
+                <u-icon @click="openSubProject(item.sonProjectList.length, index)" class="text-gray-400" name="arrow-up" size="14px" v-if="item.show"></u-icon>
-                  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>
-                <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>
@@ -47,28 +59,33 @@
 
             <!-- 子项目 -->
             <view class="ml-8" v-if="item.show">
-              <view :id="'cu-' + index + '-' + subIndex" :key="subIndex"
+              <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">
+                v-for="(subItem, subIndex) 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 class="mover" name="https://www.tall.wiki/staticrec/drag.svg" size="48"></u-icon>
-                  </u-icon>
 
                   <view class="flex-1 px-3">
                     <view class="flex items-center">
                       <view class="mr-2">{{ subItem.name }}</view>
                       <!-- 状态 -->
-                      <view :class="
+                      <view
-													subItem.status === 0
+                        :class="
-													? 'text-blue-400 bg-blue-100'
+                            subItem.status === 0
-													: subItem.status === 1
+                            ? 'text-blue-400 bg-blue-100'
-													? 'text-green-400 bg-green-100'
+                            : subItem.status === 1
-													: subItem.status === 2
+                            ? 'text-green-400 bg-green-100'
-													? 'text-red-400 bg-red-100'
+                            : subItem.status === 2
-													: 'text-gray-400 bg-gray-100'
+                            ? 'text-red-400 bg-red-100'
-												" class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full flex-shrink-0">
+                            : 'text-gray-400 bg-gray-100'
+                          "
+                          class="px-2 text-xs text-gray-400 bg-gray-100 rounded-full flex-shrink-0">
                         {{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }}
                       </view>
                     </view>
@@ -90,8 +107,8 @@
 
     <!-- 移动悬浮 begin -->
     <view v-if="data.showMoveImage">
-      <view :style="{ left: moveLeft + 'px', top: moveTop + 'px' }" class="cu-item absolute">
+      <view :style="{ left: data.moveLeft + 'px', top: data.moveTop + 'px' }" class="cu-item absolute">
-        <ProjectItem class="w-full" :item="moveItem" />
+        <ProjectItem class="w-full" :item="data.moveItem" />
       </view>
     </view>
     <!-- 移动悬浮 end -->
@@ -111,20 +128,20 @@
   const projects = computed(() => store.state.project.projects);
   const data = reactive({
     // itemTop: 0,
-    itemLeft: 0,
+    // itemLeft: 0,
     itemHeight: 0, // 移动元素的高度
-    subItemHeight: 0, // 移动子元素的高度
     itemWidth: 0, // 移动元素的宽度
+    subItemHeight: 0, // 移动子元素的高度
     showMoveImage: false,
-    moveItem: '',
+    moveItem: '', // 当前选中的项目信息
-    moveLeft: 0,
+    moveLeft: 0, // 当前选中项目距左侧的距离
-    moveTop: 0,
+    moveTop: 0, // 当前选中项目距顶部的距离
     deltaLeft: 0,
     deltaTop: 0,
-    beginleft: 0,
+    beginleft: 0, // 项目列表中第一个项目初始时距离左侧的距离
-    begintop: 0,
+    begintop: 0, // 项目列表中第一个项目初始时距离顶部的距离
     itemList: [], // 项目列表
-    setSubItem: false,
+    setSubItem: false, // 选中的是否是二级项目
     changeEvent: false, // 是否点击过操作面板
     showMenu: false,
     tips: { text: '', color: '#909399', fontSize: 28, },
@@ -136,8 +153,9 @@
     showItemIndex: undefined,
   });
 
-  const emit = defineEmits(['changeHeight']);
+  const emit = defineEmits(['changeHeight', 'change']);
 
+  // 监听项目列表
   watch(projects, (val) => {
     data.itemList = val;
     data.itemList.forEach(item => {
@@ -158,10 +176,7 @@
 
   // 展开子项目
   function openSubProject(length, index) {
-    store.commit('project/setProjectItemShow', {
+    store.commit('project/setProjectItemShow', { index, show: data.itemList[index].show ? false : true });
-      index,
-      show: data.itemList[index].show ? false : true
-    });
     if (length && index) {
       emit('changeHeight', length, index);
     }
@@ -170,9 +185,12 @@
 
   // 获取项目列表距离顶部的距离
   function getDate() {
-    const query = uni.createSelectorQuery().in(this);
+    const query = uni.createSelectorQuery().select(`#cu-0`).fields({
-    query.select(`#cu-0`).boundingClientRect(res => {
+      id: true,
-      console.log('data: ', res);
+      dataset: true,
+      rect: true,
+      size: true
+    }, res => {
       data.begintop = res.top;
       data.beginleft = res.left;
     }).exec();
@@ -189,7 +207,7 @@
       index: e,
       projectId: data.projectId
     };
-    // this.$emit('chooseAction', data);
+    // emit('chooseAction', data);
     actionFun(obj);
   }
 
@@ -219,31 +237,45 @@
   }
 
   function start(e, index) {
-    console.log('开始', e);
+    console.log('开始');
     setTimeout(() => {
       getDate();
     }, 300);
 
-    if (isNumber(index)) {
+    if (isNumber(index)) { // 选中一级项目
       data.setSubItem = false;
-      const query = uni.createSelectorQuery().in(this);
+      const query = uni.createSelectorQuery().select(`#cu-${index}`).fields({
-      console.log('2222', query)
+        id: true,
-      query.select(`#cu-${index}`).boundingClientRect(res => {
+        dataset: true,
+        rect: true,
+        size: true
+      }, res => {
         data.moveTop = res.top;
         data.moveLeft = res.left;
         data.moveItem = data.itemList[index];
         data.itemWidth = res.width;
         data.itemHeight = res.height;
       }).exec();
-    } else {
+    } else { // 选中二级项目
       let arr = index.split('-');
       data.setSubItem = true;
-      const query = uni.createSelectorQuery().in(this);
+
-      query.select(`#cu-${arr[0] - 0}`).boundingClientRect(res => {
+      const query = uni.createSelectorQuery();
+      query.select(`#cu-${arr[0] - 0}`).fields({
+        id: true,
+        dataset: true,
+        rect: true,
+        size: true
+      }, res => {
         data.itemHeight = res.height;
       }).exec();
 
-      query.select(`#cu-${index}`).boundingClientRect(res => {
+      query.select(`#cu-${index}`).fields({
+        id: true,
+        dataset: true,
+        rect: true,
+        size: true
+      }, res => {
         data.moveTop = res.top;
         data.moveLeft = res.left;
         data.moveItem = data.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
@@ -265,8 +297,7 @@
     data.moveLeft = touch.pageX - data.deltaLeft;
     data.moveTop = touch.pageY - data.deltaTop;
 
-    let lastIndex = (lastIndex = findOverIndex(touch.pageY, length));
+    let lastIndex = findOverIndex(touch.pageY, length);
-    console.log('111111', lastIndex);
     // 显示下划线
     for (let i = 0; i < data.itemList.length; i++) {
       if (data.moveLeft > 35) {
@@ -297,8 +328,8 @@
 
   function stops(e, index, length) {
     console.log('结束');
-    const touch = e.mp.changedTouches[0];
+    const touch = e.changedTouches[0];
-    let lastIndex = (lastIndex = findOverIndex(touch.pageY, length));
+    let lastIndex = findOverIndex(touch.pageY, length);
 
     // 交换两个值
     for (let i = 0; i < data.itemList.length; i++) {
@@ -317,11 +348,11 @@
             id: Value.id,
             parentId: 0,
           };
-          this.$emit('change', options);
+          emit('change', options);
         }
         // 清空
         clearSet(i);
-        this.$emit('change', data.itemList);
+        emit('change', data.itemList);
         return;
       }
       // 插入一级项目
@@ -343,11 +374,11 @@
             id: Value.id,
             parentId: 0,
           };
-          this.$emit('change', options);
+          emit('change', options);
         }
         // 清空
         clearSet(i);
-        this.$emit('change', data.itemList);
+        emit('change', data.itemList);
         return;
       }
       // 插入二级项目
@@ -366,7 +397,7 @@
             id: Value.id,
             parentId: data.itemList[lastIndex - 1].id,
           };
-          this.$emit('change', options);
+          emit('change', options);
         } else {
           let arr = index.split('-');
           let Value = data.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
@@ -382,13 +413,13 @@
             id: Value.id,
             parentId: data.itemList[lastIndex].id,
           };
-          this.$emit('change', options);
+          emit('change', options);
 
           const options1 = {
             id: Value.id,
             parentId: 0,
           };
-          this.$emit('change', options1);
+          emit('change', options1);
         }
         return;
       }
@@ -439,7 +470,7 @@
         confirm
       }) => {
         if (confirm) {
-          await this.$u.api.delProject(id);
+          await uni.$u.api.delProject(id);
           let flag_index = 0;
           data.itemList.forEach((item, index) => {
             if (item.id == id) {