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

<template>
  <view>
    <scroll-view scroll-y="true">
      <view>
        <view
          :id="'cu-' + index"
          class="cu-item flex-col"
          v-for="(item, index) in data.itemList"
          :key="item.id"
          :style="{ 'background-color': item.color }"
          @touchend="stops($event, index)"
          @touchmove.stop.prevent="move"
          @longpress="start($event, index)"
        >

          <view class="w-full border-100 bg-blue-500" v-if="item.showTopBorder"></view>

          <view class="w-full" :style="{background: item.styleColor}">
            <!-- 有子项目 父项目 -->
            <view class="h-65 flex items-center justify-between p-3">
              <u-icon @click="openMenu(item, index)" 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" :class="{'mb-1': index > 0}">
                  <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">{{item.status === 1 ? '进行中' : item.status === 2 ? '已结束' : item.status === 0 ? '未开始' : '暂停'}}</view>
                </view>

                <view  v-if="index > 0" 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 class="remind-box bg-red-500 text-white text-xs" v-if="item.remindNum">{{ item.remindNum > 99 ? '99+' : item.remindNum }}</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>

            <!-- 子项目 -->
            <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)"
                @longpress.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="h-65 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="
                          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 @click="openProject(subItem)" class="text-gray-400" name="arrow-right" size="14px"></u-icon>
                </view>
              </view>
            </view>
          </view>

          <view class="w-full border-100 bg-blue-500" v-if="item.showBorder"></view>
          <view class="w-full 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" :cancel-btn="false"></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 userId = computed(() => store.getters['user/userId']);
const data = reactive({
  // itemTop: 0,
  // itemLeft: 0,
  begintop: 0, // 项目列表中第一个项目初始时距离顶部的距离
  beginleft: 0, // 项目列表中第一个项目初始时距离左侧的距离

  itemHeight: 0, // 当前选中移动元素的高度，二级项目则表示父项目的高度
  itemWidth: 0, // 当前选中移动元素的宽度
  moveItem: '', // 当前选中移动的项目信息
  moveLeft: 0, // 当前选中移动项目距左侧的距离
  moveTop: 0, // 当前选中移动项目距顶部的距离

  showMoveImage: false, // 选中的项目是否悬浮

  // subItemHeight: 0, // 当前选中移动的是二级项目，移动项目的高度

  deltaLeft: 0,
  deltaTop: 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: '删除' }],

  // show: false,
  // border: 'border border-blue-500 shadow rounded-md',
  // showBorder: false, // 一级项目底部边框是否显示
  showItemIndex: undefined,
  isStartMove: 0, // 是否可以移动
  timer: null
});

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) {
  data.timer = setTimeout(() => {
    data.isStartMove = 1;
    // console.log('开始', e, index);
  }, 1500);

  setTimeout(() => {
    getDate(); // 设置第一个数据的位置，距上，距左
  }, 300);

  // 是数字表示是1级项目,不是数字表示2级项目
  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 => {
          if (res) {
            data.moveTop = res.top;
            data.moveLeft = res.left;
            data.itemWidth = res.width;
            // data.subItemHeight = res.height;
          }

          data.moveItem = data.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];
        },
      )
      .exec();
  }
}

function move(e, length) {
  if (!data.isStartMove) return false;
  // 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 && lastIndex > -1) {
      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);
  data.isStartMove = 0;
  clearTimeout(data.timer);

  const touch = e.changedTouches[0];
  const lastIndex = findOverIndex(touch.pageY, length);

  // 交换两个值
  for (let i = 0; i < data.itemList.length; i++) {
    // 插入顶部
    if (data.itemList[i].showTopBorder) {
      if (!isNumber(index)) {
        // 从二级到顶部
        const arr = index.split('-');
        const Value = data.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];

        const options = {
          businessCode: Value.businessCode,
          moveProjectId: Value.id,
          targetProjectId: '',
        };
        emit('change', options);
      } else {
        // 从一级到顶部
        emit('change', data.itemList);
      }

      // 清空
      clearSet(i);
      return;
    }

    // 插入一级项目
    if (data.itemList[i].showBorder) {
      if (!isNumber(index)) {
        // 从二级到一级
        const arr = index.split('-');
        const Value = data.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];

        const options = {
          businessCode: Value.businessCode,
          moveProjectId: Value.id,
          targetProjectId: '',
        };
        emit('change', options);
      } else {
        // 从一级到一级
        emit('change', data.itemList);
      }

      // 清空
      clearSet(i);
      return;
    }

    // 插入二级项目
    if (data.itemList[i].showSubBorder) {
      if (isNumber(index)) {
        // 从一级到二级
        const Value = data.itemList[index];

        let targetProjectId = '';
        if (index === i) {
          targetProjectId = data.itemList[i-1].id;
        } else {
          targetProjectId = data.itemList[i].id;
        }

        const options = {
          businessCode: Value.businessCode,
          moveProjectId: Value.id,
          targetProjectId: targetProjectId,
        };
        emit('change', options);
      } else {
        // 从二级到二级
        const arr = index.split('-');
        const Value = data.itemList[arr[0] - 0].sonProjectList[arr[1] - 0];

        const options = {
          businessCode: Value.businessCode,
          moveProjectId: Value.id,
          targetProjectId: data.itemList[lastIndex].id,
        };
        emit('change', options);
      }
      // 清空
      clearSet(i);
      return;
    }
  }
}

// 还原初始数据
function clearSet(i) {
  if (i < data.itemList.length) {
    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) {
  if (posY < data.begintop) { // 移动到第一个项目之前
    return -1;
  }

  for (let i = 0; i < data.itemList.length; i++) {
    const begin = 65 * i + data.begintop;
    const end = data.begintop + 65 * i + data.itemHeight;
    if (begin <= posY && end >= posY) {
      return i;
    }
  }

  // 总数量
  let allNum = data.itemList.length;
  data.itemList.forEach(item => {
    if (item.show) {
      allNum += item.sonProjectList.length;
    }
  })
  const leng = allNum * 65; // 最后一个元素距离顶部的距离
  if (posY > (leng + data.begintop)) {
    // 交换最后一个
    return data.itemList.length - 1;
  }
}

// 删除项目
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' });
}

// 打开项目详情
function openProject(project) {
  store.commit('task/clearTasks'); // 清空定期任务
  store.commit('task/clearRealTasks'); // 清空真实任务数据
  store.commit('socket/setCurrLocationTaskId', '');
  store.commit('task/setAllTasks', []); // 清空定期任务
  store.commit('task/setUpNextPage', 1);
  store.commit('task/setDownNextPage', 1);
  store.commit('task/setTimeLineType', 1);
  const { name, id, url, businessCode  } = project;
  uni.navigateTo({ url: `/pages/project/project?u=${userId.value}&p=${id}&pname=${name}&url=${encodeURIComponent(url)}&businessCode=${businessCode}` });
}

/**
 * 弹出项目操作面板
 */
function openMenu(project, index) {
  if (index === 0) return;
  data.showMenu = true;
  data.projectId = project.id;
  data.tips.text = project.name;
  data.clickProject = project;

  // emit('setData', data.showMenu, project, data.tips);
}
</script>

<style lang="scss" scoped>
.h-65 {
  height: 65px;
}

.cu-item {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 14px;
}

.border-100 {
  height: 4rpx;
  margin: 0 20rpx;
}

.border-80 {
  height: 4rpx;
  margin: 0 20rpx 0 90rpx;
}

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

.remind-box {
  padding: 0 3px;
  min-width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  border-radius: 8px;
  font-weight: 100;
}
</style>