编写后台任务模块逻辑，完成80%

riku

2023-12-27 bb7ae31d7066a838bd177bf21c20f13ef044950b

 src/components/bg-task/FYBgTaskCard.vue

@@ -1,67 +1,175 @@
<template>
  <el-card class="bg-task-card" shadow="hover" :body-style="{ padding: '8px' }">
    <!-- <template #header> -->
    <el-row style="background-color: aliceblue">
      <!-- <el-space> -->
      <el-tag>{{ nameToLabel(model.type) }}</el-tag>
      <el-text style="width: 80%" tag="b" size="large" truncated>{{ model.name }}</el-text>
      <!-- <div>{{ model.name }}asdasdasdasdasdasdaasdasdasdasdasdasdaasdasdasdasdasdasdaasdasdasdasdasdasda</div> -->
      <!-- </el-space> -->
  <el-card class="m-b-8" shadow="always" :body-style="{ padding: '8px' }">
    <el-row>
      <el-col :span="4">
        <div class="status-btn">
          <el-icon v-if="waiting" color="var(--el-color-info)" :size="50"><VideoPlay /></el-icon>
          <el-icon v-else-if="running" color="var(--el-color-primary)" :size="50" class="is-loading"
            ><Loading
          /></el-icon>
          <el-icon v-else-if="success" color="var(--el-color-success)" :size="50"
            ><CircleCheck
          /></el-icon>
          <el-icon v-else-if="fail" color="var(--el-color-error)" :size="50"
            ><CircleClose
          /></el-icon>
          <el-icon v-else color="var(--el-color-warning)" :size="50"><Warning /></el-icon>
          <el-text type="info" size="small" style="position: absolute; bottom: 0">{{
            nameToLabel(model.status)
          }}</el-text>
        </div>
      </el-col>
      <el-col :span="20" class="p-l-8">
        <el-row justify="space-between">
          <el-text class="m-l-4px w-150px" tag="b" size="large" truncated>{{ model.name }}</el-text>
          <el-tag>{{ nameToLabel(model.type) }}</el-tag>
        </el-row>
        <el-row class="p-v-8" align="bottom">
          <el-col :span="12">
            <span class="timer">{{ time }}</span>
            <el-text type="info" size="small" tag="div">运行时长</el-text>
          </el-col>
          <el-col :span="12">
            <el-text type="default" size="default" tag="div"
              >开始：{{ $fm.formatYMDH(model.startTime) }}</el-text
            >
            <el-text type="default" size="default" tag="div"
              >结束：{{ $fm.formatYMDH(model.endTime) }}</el-text
            >
          </el-col>
        </el-row>
        <el-row justify="end" align="bottom">
          <!-- <span class="f-s color-i">ID：{{ model.id }}</span> -->
          <el-row>
            <FYReconfrimButton v-if="waiting" @confirm="startTask" v-model="startConfirm">
              <el-button
                plain
                icon="VideoPlay"
                type="primary"
                size="small"
                :loading="false"
                @click="startConfirm = true"
                >开始任务</el-button
              >
            </FYReconfrimButton>
            <FYReconfrimButton v-if="running" @confirm="stopTask" v-model="stopConfirm">
              <el-button
                icon="VideoPause"
                plain
                type="danger"
                size="small"
                :loading="false"
                @click="stopConfirm = true"
                >强制结束</el-button
              >
            </FYReconfrimButton>
            <FYReconfrimButton v-if="!running" @confirm="removeTask" v-model="removeConfirm">
              <el-button
                icon="Delete"
                plain
                type="danger"
                size="small"
                :loading="false"
                @click="removeConfirm = true"
                >移除任务</el-button
              >
            </FYReconfrimButton>
            <el-button
              v-if="success"
              plain
              type="success"
              size="small"
              :loading="false"
              @click="gotoResult"
              >查看结果<el-icon class="m-l-4"><Right /></el-icon
            ></el-button>
          </el-row>
        </el-row>
      </el-col>
    </el-row>
    <!-- <div>
      <el-text truncated>{{ model.name }}asdasdasdasdasdasdaasdasdasdasdasdasdaasdasdasdasdasdasdaasdasdasdasdasdasda</el-text>
        </div> -->

    <!-- </template> -->
    <div>
      <el-text type="info" size="small">ID：{{ model.id }}</el-text>
    </div>

    <div>
      <el-text type="info" size="small">状态：{{ nameToLabel(model.status) }}</el-text>
    </div>
    <div>
      <el-text type="info" size="small">开始：{{ model.startTime }}</el-text>
    </div>
    <div>
      <el-text type="info" size="small">结束：{{ model.endTime }}</el-text>
    </div>
    <!-- <template #footer> -->
    <el-row justify="end">
      <el-button type="primary" size="small" :loading="false" @click="$emit('start', model)"
        >开始任务</el-button
      >
      <el-button type="danger" size="small" :loading="false" @click="$emit('shutDown', model)"
        >强制结束</el-button
      >
      <el-button type="danger" size="small" :loading="false" @click="$emit('remove', model)"
        >移除任务</el-button
      >
      <el-button type="danger" size="small" :loading="false" @click="$emit('gotoResult', model)"
        >查看结果</el-button
      >
    </el-row>
    <!-- </template> -->
  </el-card>
</template>
<script>
import { nTlBgTask } from '@/enum/bgTask';
import { nTlBgTask, BG_TASK_STATUS } from '@/enum/bgTask';
import { useTimer } from '../../composables/timer';

export default {
  setup() {
    const { time, startTimer, pauseTimer, stopTimer } = useTimer();
    return { time, startTimer, pauseTimer, stopTimer };
  },
  props: {
    model: Object
    model: Object,
    index: Number
  },
  emits: ['start', 'shutDown', 'remove', 'gotoResult'],
  data() {
    return {
      startConfirm: false,
      stopConfirm: false,
      removeConfirm: false
    };
  },
  computed: {
    waiting() {
      return this.model.status == BG_TASK_STATUS.WAITING.name;
    },
    running() {
      return this.model.status == BG_TASK_STATUS.RUNNING.name;
    },
    success() {
      return this.model.status == BG_TASK_STATUS.SUCCESS.name;
    },
    fail() {
      return this.model.status == BG_TASK_STATUS.FAIL.name;
    },
    shutdown() {
      return this.model.status == BG_TASK_STATUS.SHUTDOWN.name;
    }
  },
  methods: {
    nameToLabel(name) {
      const t = nTlBgTask(name);
      return t.label;
    },
    startTask() {
      this.$emit('start', this.index, (res) => {
        if (res) {
          this.startTimer();
        }
      });
    },
    stopTask() {
      this.$emit('shutDown', this.index, (res) => {
        if (res) {
          this.stopTimer();
        }
      });
    },
    removeTask() {
      this.$emit('remove', this.index, (res) => {
        if (res) {
          // this.stopTimer();
        }
      });
    },
    gotoResult() {
      this.$emit('gotoResult', this.index);
    }
  }
};
</script>
<style scoped>
.bg-task-card {
  margin-bottom: 8px;
.status-btn {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: var(--el-border);
  border-radius: var(--el-border-radius-base);
}
.timer {
  font-size: 30px;
}
</style>