初始版本提交

src/views/workflow/task/FlowLaunch.vue

@@ -0,0 +1,185 @@
+<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>