TALL-MUI-4/components/TimeLine 复制/component/TaskTools.vue

<template>
  <view>
    <view class="flex justify-between" style="min-width: 90px; position: relative">
      <u-icon custom-prefix="custom-icon" name="C-bxl-redux" size="17px"></u-icon>
      <u-icon custom-prefix="custom-icon" name="attachment" size="21px"></u-icon>
      <!-- <u-icon custom-prefix="custom-icon" name="moneycollect" size="20px"></u-icon> -->
      <u-icon name="xuanxiang" custom-prefix="custom-icon" size="21px" @click="operation"></u-icon>

      <!-- 右上角 ... 弹窗 -->
      <view class="popup border shadow-md" v-if="data.show">
        <!-- <view class="flex justify-center pb-3 border-b-1">
          <span>添加插件</span>
        </view> -->
        <view class="flex justify-center pb-3 border-b-1">
          <span @click="createTask">新建任务</span>
        </view>
        <view class="flex pt-3 justify-center">
          <span>克隆任务</span>
        </view>
      </view>
    </view>

    <!-- 遮罩 -->
    <view class="mask" v-if="data.maskShow" @click="closeMask"></view>
    <!-- 新建任务弹窗 -->
    <CreateTask
      :startTime="data.startTime"
      :endTime="data.endTime"
      :task="task"
      :source="'regular'"
      @showTime="showTime"
      @closeMask="closeMask"
      class="thirdPopup flex transition-transform"
      v-if="data.createTaskShow"
    />

    <u-picker title="开始时间" mode="time" v-model="data.showStart" :params="data.params" @confirm="confirmStartTime"></u-picker>
    <u-picker title="结束时间" mode="time" v-model="data.showEnd" :params="data.params" @confirm="confirmEndTime"></u-picker>
  </view>
</template>

<script setup>
import { reactive } from 'vue';
import CreateTask from '@/components/Title/components/CreateTask.vue';

defineProps({ task: { type: Object, default: () => {} } });

const data = reactive({
  show: false, // 右上角 ... 显示
  createTaskShow: false, // 新建项目显示
  secondShow: false, // 分享项目显示
  maskShow: false, // 遮罩显示
  showStart: false,
  showEnd: false,
  startTime: '', // 新建任务的开始时间
  endTime: '', // 新建任务的截止时间
  params: {
    year: true,
    month: true,
    day: true,
    hour: true,
    minute: true,
    second: true,
  },
});

// 操作
function operation() {
  // this.$t.ui.showToast('操作');
  data.show = !data.show;
}

// 新建项目
function createTask() {
  // 关闭 ... 弹窗
  data.show = false;
  // 打开遮罩
  data.maskShow = true;
  // 打开新建项目弹窗
  data.createTaskShow = true;
}

// 点击遮罩，关闭弹窗
function closeMask() {
  // 关闭遮罩
  data.maskShow = false;
  // 关闭分享项目弹窗
  data.secondShow = false;
  // 关闭新建项目弹窗
  data.createTaskShow = false;
}

function showTime() {
  data.showStart = !data.showStart;
}

// 选择开始时间
function confirmStartTime(e) {
  data.startTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
  data.showEnd = true;
}

// 选择结束时间
function confirmEndTime(e) {
  data.endTime = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}:${e.second}`;
}
</script>

<style lang="scss" scoped>
.mask {
  width: 100%;
  height: 100vh;
  z-index: 21;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

.thirdPopup {
  background: #ffffff;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 33;
  border-radius: 5px;
  width: 90%;
}

.popup {
  width: 110px;
  background: #fff;
  position: absolute;
  right: 0;
  top: 35px;
  z-index: 99;
  padding: 15px 0;
  color: black;
  animation: opacity 1s ease-in;
}

@keyframes opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

::v-deep .u-slot-content {
  min-width: 0;
}
::v-deep .u-dropdown__content {
  min-height: 120px !important;
  height: auto !important;
  overflow-y: auto;
  background: #fff !important;
  transition: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
::v-deep .u-dropdown__menu__item .u-flex {
  justify-content: space-between;
  width: 100%;
  height: 100%;
  flex-wrap: nowrap;
  border: 1px solid #afbed1;
  padding: 0 8px;
}
::v-deep .u-dropdown__content__mask {
  display: none;
}
</style>