TALL-MUI-4/components/PrettyExchange/PrettyExchange222.vue

<template>
  <view>
    <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"
            @openSubProject="openSubProject"
          />
        </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 data.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 flex-shrink-0">进行中</view>
                </view>

                <view class="flex items-center text-xs text-gray-400">
                  <view class="pr-2">{{ dayjs(+item.startTime).format('MM-DD HH:mm') }}</view>
                  至
                  <view class="pl-2">{{ dayjs(+item.endTime).format('MM-DD HH:mm') }}</view>
                </view>
              </view>

              <!-- <view class="workbench-btn" v-if="index === 0" @click="toWorkbench">工作台</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>
            <!-- 父项目 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"
              >
                <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 flex-shrink-0"
                      >
                        {{ subItem.status === 0 ? '未开始' : subItem.status === 1 ? '进行中' : subItem.status === 2 ? '暂停' : '已完成' }}
                      </view>
                    </view>
                  </view>

                  <!-- 箭头 -->
                  <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>
      </view>
    </scroll-view>

    <!-- 移动悬浮 begin -->
    <view v-if="data.showMoveImage">
      <view :style="{ left: data.moveLeft + 'px', top: data.moveTop + 'px' }" class="cu-item absolute">
        <ProjectItem class="w-full" :item="data.moveItem" />
      </view>
    </view>
    <!-- 移动悬浮 end -->

    <!-- 项目操作面板 -->
    <u-action-sheet :list="data.menuList" :tips="data.tips" @click="chooseAction" v-model="data.showMenu"></u-action-sheet>
  </view>
</template>

<script setup>
import { reactive, onMounted, watchEffect, computed } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import ProjectItem from '@/components/Projects/ProjectItem.vue';

const store = useStore();
const projects = computed(() => store.state.project.projects);
const remindData = computed(() => store.state.socket.remindData);
const data = reactive({
  // itemTop: 0,
  // itemLeft: 0,
  itemHeight: 0, // 移动元素的高度
  itemWidth: 0, // 移动元素的宽度
  subItemHeight: 0, // 移动子元素的高度
  showMoveImage: false,
  moveItem: '', // 当前选中的项目信息
  moveLeft: 0, // 当前选中项目距左侧的距离
  moveTop: 0, // 当前选中项目距顶部的距离
  deltaLeft: 0,
  deltaTop: 0,
  beginleft: 0, // 项目列表中第一个项目初始时距离左侧的距离
  begintop: 0, // 项目列表中第一个项目初始时距离顶部的距离
  itemList: [], // 项目列表
  setSubItem: false, // 选中的是否是二级项目
  changeEvent: false, // 是否点击过操作面板
  showMenu: false,
  tips: { text: '', color: '#909399', fontSize: 28 },
  clickProject: {},
  projectId: 0,
  // menuList: [{ text: '复制' }, { text: '编辑' }, { text: '删除' }, { text: '置顶' }, { text: '排序' }],
  menuList: [{ text: '导入' }, { text: '导出' }, { text: '删除' }, { text: '排序' }],

  // show: false,
  // border: 'border border-blue-500 shadow rounded-md',
  // showBorder: false, // 一级项目底部边框是否显示
  showItemIndex: undefined,
});

const emit = defineEmits(['changeHeight', 'change']);

// 监听项目列表
watchEffect(() => {
  if (projects.value) {
    data.itemList = projects.value;
    data.itemList.forEach(item => {
      item.showBorder = false; // 一级项目移动位置底部边框是否显示
      item.showSubBorder = false; // 二级项目移动位置底部边框是否显示
      item.showTopBorder = false; // 一级项目移动位置顶部边框是否显示
      item.remindNum = 0;

      if (remindData.value) {
        remindData.value.forEach(remind => {
          const remind_data = JSON.parse(remind.data);
          if (remind_data.data.projectId === item.id) {
            item.remindNum++;
          }
        });
      }
    });
  }
});

onMounted(() => {
  data.itemList = projects.value;
  data.itemList.forEach(item => {
    item.showBorder = false; // 一级项目底部边框是否显示
    item.showSubBorder = false; // 一级项目底部边框是否显示
    item.showTopBorder = false; // 一级项目顶部边框是否显示
  });
});

// 展开子项目
function openSubProject(length, index) {
  store.commit('project/setProjectItemShow', { index, show: !data.itemList[index].show });
  if (length && index) {
    emit('changeHeight', length, index);
  }
  data.showItemIndex = index;
}

// 获取项目列表距离顶部的距离
function getDate() {
  const query = uni
    .createSelectorQuery()
    .select('#cu-0')
    .fields(
      {
        id: true,
        dataset: true,
        rect: true,
        size: true,
      },
      res => {
        data.begintop = res.top;
        data.beginleft = res.left;
      },
    )
    .exec();
}

function setData(flag, project, tips) {
  data.showMenu = flag;
  data.projectId = project.id;
  data.tips = tips;
  data.clickProject = project;
}

function chooseAction(e) {
  const obj = {
    index: e,
    projectId: data.projectId,
    url: data.clickProject.url,
    projectName: data.tips.text
  };
  // emit('chooseAction', data);
  actionFun(obj);
}

// 操作
function actionFun(obj) {
  const action = data.menuList[obj.index].text;
  if (action === '排序') {
    data.changeEvent = true;
    uni.$ui.showToast('请移动进行排序');
  }

  if (action === '删除') {
    data.changeEvent = false;
    delProject(obj.projectId, obj.url);
  }

  if (action === '导入') {
    data.changeEvent = false;
    store.commit('setDomain', obj.url);
    importProject(obj.projectId, obj.projectName);
  }

  if (action === '导出') {
    data.changeEvent = false;
    exportProject(obj.projectId, obj.url);
  }

  if (data.showItemIndex !== undefined) {
    store.commit('project/setProjectItemShow', {
      index: data.showItemIndex,
      show: true,
    });
  }
}

function isNumber(val) {
  return val === +val;
}

function start(e, index) {
  console.log('开始');
  setTimeout(() => {
    getDate();
  }, 300);

  if (isNumber(index)) {
    // 选中一级项目
    data.setSubItem = false;
    const query = uni
      .createSelectorQuery()
      .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[index];
          data.itemWidth = res.width;
          data.itemHeight = res.height;
        },
      )
      .exec();
  } else {
    // 选中二级项目
    const arr = index.split('-');
    data.setSubItem = true;

    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}`)
      .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];
          data.itemWidth = res.width;
          data.subItemHeight = res.height;
        },
      )
      .exec();
  }
}

function move(e, length) {
  console.log('移动');
  data.showMoveImage = true; // 悬浮开始
  const touch = e.touches[0];
  if (data.deltaLeft == 0) {
    // 获得本身的移动
    data.deltaLeft = touch.pageX - data.moveLeft;
    data.deltaTop = touch.pageY - data.moveTop;
  }
  data.moveLeft = touch.pageX - data.deltaLeft;
  data.moveTop = touch.pageY - data.deltaTop;

  const lastIndex = findOverIndex(touch.pageY, length);
  // 显示下划线
  for (let i = 0; i < data.itemList.length; i++) {
    if (data.moveLeft > 35) {
      data.itemList[i].showBorder = false;
      data.itemList[i].showTopBorder = false;
      if (i === lastIndex) {
        data.itemList[i].showSubBorder = true;
      } else {
        data.itemList[i].showSubBorder = false;
      }
    } else if (lastIndex === -1) {
      data.itemList[0].showTopBorder = true;
      data.itemList[i].showSubBorder = false;
      data.itemList[i].showBorder = false;
    } else {
      data.itemList[i].showSubBorder = false;
      data.itemList[i].showTopBorder = false;
      if (i === lastIndex) {
        data.itemList[i].showBorder = true;
      } else {
        data.itemList[i].showBorder = false;
      }
    }
  }
}

function stops(e, index, length) {
  console.log('结束', e, index, length);
  const touch = e.changedTouches[0];
  const lastIndex = findOverIndex(touch.pageY, length);
  console.log('11111111111', data.itemList)
  // 交换两个值
  for (let i = 0; i < data.itemList.length; i++) {
    // 插入顶部
    if (data.itemList[i].showTopBorder) {
      if (isNumber(index)) {
        const Value = data.itemList[index];
        data.itemList.unshift(Value);
        data.itemList.splice(index + 1, 1);
      } else {
        const arr = index.split('-');
        const Value = data.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
        data.itemList.unshift(Value);
        data.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
        // const options = {
        //   id: Value.id,
        //   parentId: 0,
        // };
        const options = {
          businessCode: Value.businessCode,
          moveProjectId: Value.id,
          targetProjectId: '',
        };
        emit('change', options);
      }
      // 清空
      clearSet(i);
      emit('change', data.itemList);
      return;
    }
    // 插入一级项目
    if (data.itemList[i].showBorder) {
      if (isNumber(index)) {
        const Value = data.itemList[index];
        data.itemList.splice(i + 1, 0, Value);
        if (i < index) {
          data.itemList.splice(index + 1, 1);
        } else {
          data.itemList.splice(index, 1);
        }
      } else {
        const arr = index.split('-');
        const Value = data.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
        data.itemList.splice(i + 1, 0, Value);
        data.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
        // const options = {
        //   id: Value.id,
        //   parentId: 0,
        // };
        const options = {
          businessCode: Value.businessCode,
          moveProjectId: Value.id,
          targetProjectId: '',
        };
        emit('change', options);
      }
      // 清空
      clearSet(i);
      emit('change', data.itemList);
      return;
    }
    // 插入二级项目
    if (data.itemList[i].showSubBorder) {
      if (isNumber(index)) {
        const Value = data.itemList[index];
        if (data.itemList[lastIndex - 1].sonProjectList && data.itemList[lastIndex - 1].sonProjectList.length) {
          data.itemList[lastIndex - 1].sonProjectList.push(Value);
        } else {
          data.itemList[lastIndex].sonProjectList = [Value];
        }
        data.itemList.splice(index, 1);
        // 清空
        clearSet(i);
        // const options = {
        //   id: Value.id,
        //   parentId: data.itemList[lastIndex - 1].id,
        // };
        const options = {
          businessCode: Value.businessCode,
          moveProjectId: Value.id,
          targetProjectId: data.itemList[lastIndex - 1].id,
        };
        emit('change', options);
      } else {
        const arr = index.split('-');
        const Value = data.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
        if (data.itemList[lastIndex].sonProjectList && data.itemList[lastIndex].sonProjectList.length) {
          data.itemList[lastIndex].sonProjectList.push(Value);
        } else {
          data.itemList[lastIndex].sonProjectList = [Value];
        }
        data.itemList[arr[0] - 0].sonProjectList.splice([arr[1] - 0], 1);
        // 清空
        clearSet(i);
        // const options = {
        //   id: Value.id,
        //   parentId: data.itemList[lastIndex].id,
        // };
        const options = {
          businessCode: Value.businessCode,
          moveProjectId: Value.id,
          targetProjectId: data.itemList[lastIndex].id,
        };
        emit('change', options);

        // const options1 = {
        //   id: Value.id,
        //   parentId: 0,
        // };
        const options1 = {
          businessCode: Value.businessCode,
          moveProjectId: Value.id,
          targetProjectId: '',
        };
        emit('change', options1);
      }
      return;
    }
  }
}

// 还原初始数据
function clearSet(i) {
  data.itemList[i].showBorder = false;
  data.itemList[i].showSubBorder = false;
  data.itemList[i].showTopBorder = false;
  data.deltaLeft == 0;
  data.showMoveImage = false;
  data.setSubItem = false;
  data.changeEvent = false;
  data.showItemIndex = undefined;
}

// 找到停下的元素的下标
function findOverIndex(posY) {
  // 如果有子项目展开着
  const leng = data.itemList.length * data.itemHeight; // 最后一个元素距离顶部的距离
  if (posY < data.begintop) {
    return -1;
  }
  for (let i = 0; i < data.itemList.length; i++) {
    const begin = data.itemHeight * i + data.begintop;
    const end = data.itemHeight * i + data.begintop + data.itemHeight;
    if (begin <= posY && end >= posY) {
      return i;
    }
  }
  if (posY > leng) {
    // 交换最后一个
    return data.itemList.length - 1;
  }
  if (posY < data.begintop) {
    return 0;
  }
}

// 删除项目
function delProject(id, url) {
  uni.showModal({
    title: '',
    content: '是否删除项目？',
    showCancel: true,
    success: async ({ confirm }) => {
      if (confirm) {
        await uni.$u.api.delProject(id, url);
        let flag_index = 0;
        data.itemList.forEach((item, index) => {
          if (item.id == id) {
            flag_index = index;
          }
        });

        data.itemList.splice(flag_index, 1);
        store.commit('project/setProjects', data.itemList);
      }
    },
  });
}

// 导入
function importProject(id, name) {
  uni.showModal({
    content: '是否导入到' + name,
    showCancel: true,
    success: async ({ confirm }) => {
      if (confirm) {
        try {
          const res = await uni.$u.api.import(id);
          // 导入WBS成功后
          // 直接打开导入的项目
          emit('success');
          // const { apiUrl } = Config;
          // let defaultwbs = `${apiUrl}/defaultwbs`;
          // res.url && (defaultwbs = res.url);

          store.commit('project/setIsRefresh', 1);

          setTimeout(() => {
            uni.navigateTo({ url: `/pages/project/project?u=${user.value.id}&p=${res.id}&pname=${res.name}&url=${encodeURIComponent(res.url)}` });
          }, 2000);
        } catch (error) {
          console.error('error: ', error);
          emit('error', error);
        }
      }
    },
  });
}

// 导出
function exportProject(id, url) {
  uni.showModal({
    title: '',
    content: '是否导出项目？',
    showCancel: true,
    success: async ({ confirm }) => {
      if (confirm) {
        const data = await uni.$u.post(`${url}/tall/project/exportWbs`, { projectId: id });
        // #ifdef H5
        window.location.href = data.url;
        // #endif

        // #ifdef APP-PLUS
        uni.downloadFile({
        	url: data.url, //仅为示例，并非真实的资源
        	success: ({statusCode, tempFilePath}) => {
        		if (statusCode === 200) {
        			console.log('下载成功', tempFilePath);

              uni.saveFile({
                tempFilePath,
                success:(res)=>{
                  uni.$ui.showToast('文件保存路径：' + res.savedFilePath);
                  //res.savedFilePath文件的保存路径
                  //保存成功并打开文件
                  // uni.openDocument({
                  //   filePath: res.savedFilePath,
                  //   success:(res)=>console.log('成功打开文档')
                  // })
                },
                fail:()=>console.log('下载失败')
              })
        		}
        	}
        });
        // #endif
      }
    },
  });
}

// 跳转工作台
// function toWorkbench() {
//   uni.navigateTo({ url: '/pages/workbench/workbench' });
// }
</script>

<style lang="scss" scoped>
.cu-item {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.border-100 {
  width: 92%;
  height: 4rpx;
}

.border-80 {
  width: 84%;
  height: 2px;
  margin-left: 30px;
}

.workbench-btn {
  margin-right: 10px;
  width: 80px;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #2b85e4;
  background-color: #1890ff;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
}
</style>