geg-gas-web/src/views/workflow/task/FlowLaunch.vue

<template>
  <PageLayout
    :layoutClass="
      currentRoute.path == '/workflow/launch'
        ? '!p-2'
        : currentRoute.path == '/task/processtasks'
        ? '!p-0 !pr-7px'
        : ''
    "
    :title="t('流程模板列表')"
    :searchConfig="searchConfig"
    @search="search"
    @scroll-height="scrollHeight"
  >
    <template #left>
      <BasicTree
        search
        :title="t('流程模板分类')"
        :clickRowToExpand="true"
        :treeData="data.treeData"
        :fieldNames="{ key: 'id', title: 'name' }"
        @select="handleSelect"
      />
    </template>

    <template #search> </template>

    <template #right>
      <div
        v-if="data.list.length > 0"
        :style="{ overflowY: 'auto', height: tableOptions.scrollHeight + 30 + 'px' }"
      >
        <div class="list-page-box">
          <TemplateCard
            v-for="(item, index) in data.list"
            :key="index"
            :item="item"
            @click="launchProcess(item.id)"
          />
        </div>
        <div class="page-box">
          <a-pagination
            v-model:current="data.pagination.current"
            :total="data.pagination.total"
            v-model:pageSize="data.pagination.pageSize"
            :pageSizeOptions="['18', '36', '54', '72']"
            :showSizeChanger="true"
            :show-total="(total) => t(`共 {total} 条数据`, { total })"
            @change="getList"
        /></div>
      </div>

      <div v-else>
        <EmptyBox />
      </div>
      <LaunchProcess
        v-if="visibleLaunchProcess"
        :schemaId="data.schemaId"
        @close="visibleLaunchProcess = false"
      />
    </template>
  </PageLayout>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref, unref, watch } from 'vue';
  import TemplateCard from '/@bpmn/components/card/TemplateCard.vue';
  import { EmptyBox } from '/@/components/ModalPanel/index';
  import { getDesignPage } from '/@/api/workflow/design';
  import { WorkflowPageModel } from '/@/api/workflow/model';
  import { getDicDetailList } from '/@/api/system/dic';
  import { BasicTree, TreeItem } from '/@/components/Tree';
  import { PageLayout } from '/@/components/ModalPanel';
  import LaunchProcess from './components/LaunchProcess.vue';
  import { FlowCategory } from '/@/enums/workflowEnum';
  import userTableScrollHeight from '/@/hooks/setting/userTableScrollHeight';
  import { useRouter } from 'vue-router';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const { currentRoute } = useRouter();
  const searchConfig = [
    {
      field: 'code',
      label: t('模板编码'),
      type: 'input',
    },
    {
      field: 'name',
      label: t('模板名称'),
      type: 'input',
    },
  ];
  const { tableOptions, scrollHeight } = userTableScrollHeight();
  let visibleLaunchProcess = ref(false);
  let data: {
    list: Array<WorkflowPageModel>;
    treeData: Array<TreeItem>;
    schemaId: string;
    selectDeptId: string;
    pagination: { current: number; total: number; pageSize: number };
  } = reactive({
    list: [],
    treeData: [],
    schemaId: '',
    selectDeptId: '',
    pagination: {
      current: 1,
      total: 0,
      pageSize: 18,
    },
  });

  watch(
    () => unref(currentRoute),
    (val) => {
      if (val.path == '/workflow/launch') init();
    },
    { deep: true },
  );
  onMounted(() => {
    getCategoryTree();
    init();
  });
  async function init() {
    data.pagination.current = 1;
    data.pagination.total = 0;
    data.selectDeptId = '';
    await getList();
  }
  async function getCategoryTree() {
    let res = (await getDicDetailList({
      itemId: FlowCategory.ID,
    })) as unknown as TreeItem[];
    data.treeData = res.map((ele) => {
      ele.icon = 'ant-design:tags-outlined';
      return ele;
    });
  }
  async function getList(params?: any) {
    const searchParams = {
      ...{
        limit: data.pagination.current,
        size: data.pagination.pageSize,
      },
      ...{ category: data.selectDeptId },
      ...params,
      ...{ enabledMark: 1 }, // 流程发起list 需要隐藏 禁用的模板[enabledMark=1]
    };

    try {
      let res = await getDesignPage(searchParams);
      data.pagination.total = res.total;
      data.list = res.list;
    } catch (error) {}
  }

  function handleSelect(deptIds) {
    data.selectDeptId = deptIds[0];
    getList();
  }
  async function launchProcess(id: string) {
    data.schemaId = id;
    visibleLaunchProcess.value = true;
  }
  function search(params: any) {
    data.pagination.current = 1;
    getList(params);
  }
</script>
<style lang="less" scoped>
  .list-page-box {
    display: flex;
    flex-wrap: wrap;
  }

  :deep(.list-item) {
    max-width: 320px;
  }

  .page-box {
    position: absolute;
    bottom: 20px;
    right: 20px;
  }
</style>