tall-mui-3/src/components/Projects/ProjectItem.vue

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

        <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 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"
              >
                {{ 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>
    <!-- 项目操作面板 -->
    <!-- <u-action-sheet :list="menuList" :tips="tips" @click="$emit('chooseAction', $event)" v-model="showMenu"></u-action-sheet> -->
    <u-action-sheet :list="menuList" :tips="tips" @click="chooseAction" v-model="showMenu"></u-action-sheet>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  props: {
    item: {
      type: Object,
      default: () => {},
    },
    index: {
      type: Number,
      default: 0,
    },
    menuList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      showMenu: false,
      tips: {
        text: '',
        color: '#909399',
        fontSize: 28,
      },
      show: false,
      border: 'border border-blue-500 shadow rounded-md',
      showBorder: false,
      projectId: 0,
    };
  },

  computed: mapGetters('user', ['userId']),

  methods: {
    // 打开项目详情
    openProject(project) {
      const { name, id, url } = project;
      url && (uni.$t.domain = url);
      this.$u.route('pages/project-webview/project-webview', {
        u: this.userId,
        p: id,
        pname: name,
        url: encodeURIComponent(url),
      });
    },

    /**
     * 弹出项目操作面板
     */
    openMenu(project) {
      this.showMenu = true;
      this.projectId = project.id;
      this.tips.text = project.name;
      console.log(this.projectId, '点击的项目');
    },

    chooseAction(e) {
      console.log(e, '点击操作');
      let data = { index: e, projectId: this.projectId };
      this.$emit('chooseAction', data);
    },
  },
};
</script>

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