TALL-MUI-4/components/Projects/ProjectItem.vue

<template>
  <view class="w-full" :style="{background: item.styleColor}">
    <!-- 有子项目 父项目 -->
    <view class="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 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 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="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"
          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"
        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>

          <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>
</template>

<script setup>
import { reactive, computed } from 'vue';
import dayjs from 'dayjs';
import { useStore } from 'vuex';
import config from '@/common/js/config.js';

defineProps({
  item: {
    type: Object,
    default: () => {},
  },
  index: {
    type: Number,
    default: 0,
  },
  // menuList: {
  //   type: Array,
  //   default: () => [],
  // },
});
const emit = defineEmits(['setData', 'openSubProject']);

const store = useStore();
const userId = computed(() => store.getters['user/userId']);

const data = reactive({
  showMenu: false,
  tips: {
    text: '',
    color: '#909399',
    fontSize: 28,
  },
  // show: false,
  // border: 'border border-blue-500 shadow rounded-md',
  // showBorder: false,
  projectId: 0,
});

// 跳转工作台
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 } = project;
  uni.navigateTo({ url: `/pages/project/project?u=${userId.value}&p=${id}&pname=${name}&url=${encodeURIComponent(url)}` });
}

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

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

<style lang="scss" scoped>
.border-100 {
  height: 4rpx;
  margin: 0 20rpx;
}

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

.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;
}

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