platform/io.sc.platform.lcdp.frontend/src/views/bpm/Bpm.vue

<template>
  <div>
    <q-splitter :model-value="100" unit="px" class="w-full h-full">
      <template #before>
        <q-tabs v-model="selectedTabRef" vertical>
          <q-tab name="processDefine" icon="mail" label="流程定义" />
          <q-tab name="processInstance" icon="mail" label="流程实例" />
          <q-tab name="task" icon="mail" label="工作任务" />
        </q-tabs>
      </template>
      <template #after>
        <q-tab-panels v-model="selectedTabRef" animated swipeable vertical transition-prev="jump-up" transition-next="jump-up">
          <q-tab-panel name="processDefine">
            <w-grid
              ref="processDefineGridRef"
              title="流程定义列表"
              :checkbox-selection="true"
              :data-url="Environment.apiContextPath('/api/flowable/process')"
              :pageable="true"
              :pagination="{ sortBy: 'lastModifyDate', descending: true }"
              :query-form-cols-num="3"
              :query-form-fields="[
                { name: 'key', label: $t('code'), type: 'text' },
                { name: 'name', label: $t('name'), type: 'text' },
                { name: 'status', label: $t('status'), queryOperator: 'equals', type: 'select', clearable: true, options: Options.enum(ProcessStatusEnum) },
              ]"
              :toolbar-actions="[
                'query',
                'separator',
                'refresh',
                'separator',
                'add',
                'clone',
                {
                  extend: 'edit',
                  enableIf: (selecteds) => {
                    if (selecteds && selecteds.length > 0) {
                      const selected = selecteds[0];
                      if ('SKETCH' === selected.status) {
                        return true;
                      }
                    }
                    return false;
                  },
                },
                {
                  extend: 'remove',
                  enableIf: (selecteds) => {
                    if (selecteds && selecteds.length > 0) {
                      const selected = selecteds[0];
                      if ('SKETCH' === selected.status) {
                        return true;
                      }
                    }
                    return false;
                  },
                },
                'separator',
                {
                  name: 'design',
                  label: '设计',
                  icon: 'bi-brush',
                  enableIf: (selecteds) => {
                    if (selecteds && selecteds.length > 0) {
                      const selected = selecteds[0];
                      if ('SKETCH' === selected.status) {
                        return true;
                      }
                    }
                    return false;
                  },
                  click: (selecteds: object[]) => {
                    if (selecteds && selecteds.length > 0) {
                      const selected = selecteds[0];
                      const title = '流程设计器 - ' + selected.name + (selected.version ? ' (' + selected.version + ')' : '');
                      processDesignerDialogRef.open(title, selected.id);
                    }
                  },
                },
                {
                  name: 'deployment',
                  label: '发布',
                  icon: 'bi-arrow-up-circle',
                  enableIf: (selecteds) => {
                    if (selecteds && selecteds.length > 0) {
                      const selected = selecteds[0];
                      if ('SKETCH' === selected.status) {
                        return true;
                      }
                    }
                    return false;
                  },
                  click: (selecteds: object[]) => {
                    DialogManager.confirm('您确定要发布流程吗?', () => {
                      axios.post(Environment.apiContextPath('api/flowable/process/deploy/') + selecteds[0].id).then(() => {
                        processDefineGridRef.refresh();
                        NotifyManager.success();
                      });
                    });
                  },
                },
                {
                  name: 'queryProcessInstance',
                  label: '查询流程实例',
                  enableIf: (selecteds) => {
                    if (selecteds && selecteds.length > 0) {
                      const selected = selecteds[0];
                      if ('SKETCH' != selected.status) {
                        return true;
                      }
                    }
                    return false;
                  },
                  click: (selecteds: object[]) => {},
                },
                {
                  name: 'createProcessInstance',
                  label: '创建流程实例',
                  enableIf: (selecteds) => {
                    if (selecteds && selecteds.length > 0) {
                      const selected = selecteds[0];
                      if ('RELEASE' === selected.status) {
                        return true;
                      }
                    }
                    return false;
                  },
                  click: (selecteds) => {
                    createProcessInstanceDialogRef.open();
                  },
                },
                'separator',
                'view',
                'separator',
                'export',
              ]"
              :columns="[
                { width: 150, name: 'key', label: $t('code') },
                {
                  width: '100%',
                  name: 'name',
                  label: $t('name'),
                  format: (value, row) => {
                    return Formater.dictionary(ProcessCategoryDictionaries)(row.key);
                  },
                },
                { width: 60, name: 'version', label: $t('version') },
                { width: 60, name: 'status', label: $t('status'), format: Formater.enum(ProcessStatusEnum) },
                { width: 300, name: 'deployedId', label: $t('lcdp.bpm.deployId') },
                {
                  width: 80,
                  name: 'canClaimTask',
                  label: $t('lcdp.bpm.canClaimTask'),
                  format: Formater.yesNo(),
                },
                { width: 80, name: 'lastModifier', label: $t('lastModifier') },
                { width: 100, name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.dateOnly() },
              ]"
              :editor="{
                dialog: {
                  width: '600px',
                  height: '610px',
                },
                form: {
                  colsNum: 1,
                  fields: [
                    {
                      name: 'category',
                      label: $t('category'),
                      type: 'select',
                      defaultValue: 'SAMPLE',
                      options: Options.dictionary(ProcessCategoryDictionaries),
                      'onUpdate:modelValue': (value) => {
                        const form = processDefineGridRef.getEditorForm();
                        form.setFieldValue('key', value);
                        form.setFieldValue('name', Formater.dictionary(ProcessCategoryDictionaries)(value));
                      },
                    },
                    {
                      name: 'key',
                      label: $t('code'),
                      type: 'text',
                      defaultValue: 'SAMPLE',
                      readonlyIf: () => {
                        return true;
                      },
                    },
                    {
                      name: 'name',
                      label: $t('name'),
                      type: 'text',
                      required: true,
                      defaultValue: Formater.dictionary(ProcessCategoryDictionaries)('SAMPLE'),
                      readonlyIf: () => {
                        return true;
                      },
                    },
                    { name: 'description', label: $t('description'), type: 'textarea', rows: 1 },
                    { name: 'xml', label: $t('xml'), type: 'textarea' },
                    { name: 'status', label: $t('status'), type: 'text', defaultValue: 'SKETCH', hidden: true },
                    { name: 'canClaimTask', label: $t('lcdp.bpm.canClaimTask'), type: 'checkbox', defaultValue: true, rule: [] },
                  ],
                },
              }"
              :viewer="{
                panel: {
                  columnNum: 1,
                  fields: [
                    { name: 'key', label: $t('code') },
                    { name: 'name', label: $t('name'), format: Formater.none() },
                    { name: 'version', label: $t('version') },
                    { name: 'status', label: $t('status'), format: Formater.enum(ProcessStatusEnum) },
                    { name: 'deployedId', label: $t('lcdp.bpm.deployId') },
                    { name: 'canClaimTask', label: $t('lcdp.bpm.canClaimTask'), format: Formater.none() },
                    { name: 'lastModifier', label: $t('lastModifier') },
                    { name: 'lastModifyDate', label: $t('lastModifyDate'), format: Formater.none() },
                  ],
                },
              }"
            ></w-grid>
          </q-tab-panel>
          <q-tab-panel name="processInstance">
            <w-grid
              ref="processInstanceGridRef"
              title="流程实例列表"
              :checkbox-selection="true"
              :data-url="Environment.apiContextPath('/api/flowable/process')"
              :pageable="true"
              :pagination="{ sortBy: 'lastModifyDate', descending: true }"
              :query-form-cols-num="3"
              :query-form-fields="[]"
              :toolbar-actions="['query', 'separator', 'refresh', 'separator', 'add', 'clone', 'separator', 'view', 'separator', 'export']"
              :columns="[]"
              :editor="{
                dialog: {
                  width: '600px',
                  height: '610px',
                },
                form: {
                  colsNum: 1,
                  fields: [],
                },
              }"
              :viewer="{
                panel: {
                  columnNum: 1,
                  fields: [],
                },
              }"
            ></w-grid>
          </q-tab-panel>
          <q-tab-panel name="task"></q-tab-panel>
        </q-tab-panels>
      </template>
    </q-splitter>

    <ProcessDesigner ref="processDesignerDialogRef">
      <iframe ref="processDesignerIframeRef" src="#" style="width: 100%; height: 100%"></iframe>
    </ProcessDesigner>

    <CreateProcessInstanceDialog ref="createProcessInstanceDialogRef"></CreateProcessInstanceDialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { Environment, DialogManager, NotifyManager, axios, EnumTools, DictionaryTools, Formater, Options } from 'platform-core';
import ProcessDesigner from './ProcessDesigner.vue';
import CreateProcessInstanceDialog from './CreateProcessInstanceDialog.vue';

const selectedTabRef = ref('processDefine');
const processDefineGridRef = ref();
const processDesignerDialogRef = ref();
const processDesignerIframeRef = ref();
const createProcessInstanceDialogRef = ref();
const show = ref(true);

const ProcessStatusEnum = await EnumTools.fetch('io.sc.platform.flowable.enums.ProcessStatus');
const ProcessCategoryDictionaries = await DictionaryTools.fetch('WORK_FLOW');
</script>