ali_ai_learn_web/src/pages/Personal/Workflow.vue

<template>
  <div class="workflow">
    <div @click="router.push({ path: '/workflow-add' })" class="gradient workflow-btn flex-center">
      <img src="/src/assets/imgs/add.png" alt="">
      <div class="">{{ $t('common.publishWorkflow') }}</div>
    </div>
    <ul class="workflow-list">
      <li @click="toDetail(item)" v-for="(item, index) in list" :key="index" class="">
        <img class="image" :src="item.coverImage" alt="">
        <div class="kong"></div>
        <div class="workflow-list-con flex-column flex-between">
          <div class="top">
            <div class="workflow-list-time flex-align-center">
              <img src="/src/assets/imgs/rili.png" alt="">
              <div class="">{{ item.createTime }}</div>
            </div>
            <div class="title">{{ item.workflowTitle }}</div>
            <div class="desc">{{ item.description }}</div>
          </div>
          <div class="flex_1">
            <div class="info flex-center-between">
              <div class="info-left flex-align-center">
                <el-avatar :size="30" :src="item.userAvatar" />
                <div class="">{{ item.nickName }}</div>
              </div>
              <div class="info-right flex-align-center">
                <img src="/src/assets/imgs/yun.png" alt="">
                <div class="">{{ item.categoryName1 }}{{ $t('common.platform') }}</div>
              </div>
            </div>
            <div class="footer flex-center-between">
              <div @click.stop="changeItem(item, index, 0)" class="flex-center btn">
                <img src="/src/assets/imgs/my/edit@2x.png" alt="">
                <div class="">{{ $t('common.edit') }}</div>
              </div>
              <div @click.stop="changeItem(item, index, 1)" class="flex-center btn">
                <img src="/src/assets/imgs/my/del@2x.png" alt="">
                <div class="">{{ $t('common.delete') }}</div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <template v-if="list.length">
      <Pagination :total="form.total" :page-size="form.pageSize" :current-page="form.pageNum"
        @page-change="handlePageChange" />
    </template>
    <el-empty v-else :description="$t('common.empty')" />
  </div>
</template>
<script setup lang="ts">

import Pagination from '@/components/Pagination.vue'

import { ref, onMounted } from 'vue';

import { useRoute, useRouter } from 'vue-router'

import { userPublishList, delectPublish } from '@/api/my'

import { ElMessageBox } from 'element-plus'

import DGTMessage from '@/utils/message'

import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const route = useRoute()

const router = useRouter()

let list = ref([])
const form = ref({
  categoryId1: null,
  categoryId2: null,
  categoryId3: null,
  workflowTitle: '',
  orderByColumn: 'create_time',
  isAsc: 'desc',
  pageNum: 1,
  pageSize: 10,
  total: 0,
})

// 去工作流详情
const toDetail = (item: any) => {
  router.push({
    path: '/workflow-detail',
    query: {
      publishId: item.publishId,
      metaTitle: 'route.WorkflowDetail'
    }
  })
}

// 编辑删除
const changeItem = async (item: any, index: any, type: any) => {
  if (type == 0) {
    router.push({
      path: '/workflow-add',
      query: {
        id: item.publishId
      }
    })
  } else if (type == 1) {
    ElMessageBox.confirm(
      'proxy will permanently delete the file. Continue?',
      'Warning',
      {
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        type: 'warning',
      }
    )
      .then(async () => {
        let res = await delectPublish(item.publishId);
        if (res.code === 200) {
          DGTMessage.success(`${t('common.delete')} ${t('common.success')}`)
          getList()
        }
      })
      .catch(() => {

      })
  }
}

const getList = async () => {
  let res = await userPublishList(form.value);
  form.value.total = res.total;
  list.value = res.rows
}
const handlePageChange = (page) => {
  list.value = []
  form.value.pageNum = page;
  getList()
}
onMounted(() => {
  getList()
})

</script>
<style scoped lang="scss">
ul,
li {
  margin: 0;
  padding: 0;
}

.workflow {
  padding: 16px 0 20px;

  .workflow-btn {
    height: 50px;
    color: #FFFFFF;
    cursor: pointer;
    border-radius: 10px;
    font-size: 18px;

    &:hover {
      opacity: 0.9;
    }

    img {
      width: 30px;
      height: 30px;
      margin-right: 4px;
    }
  }

  .workflow-list {
    gap: 16px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;

    li {
      width: 380px;
      cursor: pointer;
      position: relative;
      background: #F5F7FA;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid #FFFFFF;

      .image {
        width: 100%;
        height: 204px;
        display: block;
        object-fit: cover;
        border-radius: 16px 16px 0 0;
      }

      .kong {
        height: 166px;
      }

      .workflow-list-con {
        height: 224px;
        padding: 16px;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        transform: translateY(58px);
        transition: transform 0.3s ease;

        background: #F5F7FA;
        border-radius: 0px 0px 16px 16px;

        .top {
          line-height: 1;
          height: 120px;
          display: flex;
          flex-direction: column;
        }

        .workflow-list-time {
          font-size: 14px;

          img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
        }

        .title {
          margin: 8px 0;
          font-size: 18px;
          font-weight: bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 26px;
        }

        .desc {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .info {
          font-size: 14px;

          .info-left {
            div {
              margin-left: 8px;
            }
          }

          .info-right {
            padding: 0 4px;
            height: 22px;
            background: #E9F3FF;
            border-radius: 4px;

            img {
              width: 16px;
              height: 16px;
              margin-right: 8px;
            }
          }
        }

        .footer {
          margin-top: 8px;

          .btn {
            width: 166px;
            height: 40px;
            font-size: 14px;
            color: #2D71FF;
            background: #FFFFFF;
            border-radius: 10px;

            img {
              width: 16px;
              height: 16px;
              margin-right: 4px;
            }

            &:last-child {
              color: #E43434;
            }

            &:hover {
              opacity: 0.7;
            }
          }
        }
      }

      &:hover {
        .workflow-list-con {
          transform: translateY(0);
        }
      }
    }
  }
}
</style>