nbb-component-ui 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nbb-component-ui",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",

package/src/ProcessFlow/src/CmcFlowList.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="scroll-area">
+    <div class="flow-header flex justify-between">
+      <div class="text-18px font-bold">
+        <span>{{ t('processFlow.flow') }}</span>
+        <span>{{ processInstance.id }}</span>
+      </div>
+      <div class="text-14px font-bold" style="color: #005aae">
+        <span>{{ processInstance.name }}</span>
+      </div>
+    </div>
+    <div class="flex items-center">
+      <div class="flow-start">
+        <p>{{ t('processFlow.startTime') }}{{ formatDate(processInstance.startTime) }}</p>
+        <p>{{ t('processFlow.endTime') }}{{ formatDate(processInstance.endTime) }}</p>
+        <p v-if="processInstance.durationInMillis">
+          {{ t('processFlow.duration') }}{{ formatPast2(processInstance?.durationInMillis) }}
+        </p>
+      </div>
+      <Icon
+          :size="100"
+          :icon="statusIconMapping[processInstance.status] || 'svg-icon:approvalPending'"
+      />
+    </div>
+
+    <div class="mt-30px block">
+      <el-timeline>
+        <el-timeline-item
+            v-for="(item, index) in tasks"
+            :key="index"
+            :type="getTaskTimelineItemType(item) || 'info'"
+        >
+          <template #dot>
+            <img
+                :src="
+                item?.assigneeUser?.avatar ||
+                'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
+              "
+                class="avatar-wrap"
+            />
+          </template>
+          <p style="font-weight: 700">
+            {{ item.name }}
+            <dict-tag
+                v-if="item.status"
+                :type="DICT_TYPE.BPM_TASK_STATUS"
+                :value="item.status || ''"
+            />
+          </p>
+
+          <el-card :body-style="{ padding: '10px' }">
+            <label v-if="index === 0" style="margin-right: 30px; font-weight: normal">
+              {{ item.assigneeUser?.nickname || item.ownerUser?.nickname }}
+              <el-tag size="small" type="info" style="vertical-align: 1px">{{
+                  processInstance?.startUser?.deptName
+                }}</el-tag>
+            </label>
+            <label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
+              {{ t('processFlow.approver') }}{{ item.assigneeUser?.nickname || item.ownerUser?.nickname }}
+              <el-tag size="small" type="info" style="vertical-align: 1px">{{
+                  item.assigneeUser.deptName
+                }}</el-tag>
+            </label>
+            <div>
+              <label v-if="item.createTime && !item.endTime" style="font-weight: normal"
+              >{{ t('processFlow.createTime') }}</label
+              >
+              <label
+                  v-if="item.createTime && !item.endTime"
+                  style="font-weight: normal; color: #8a909c"
+              >
+                {{ formatDate(item?.createTime, 'MM-DD HH:mm') }}
+              </label>
+              <label v-if="item.endTime" style="font-weight: normal"> {{ t('processFlow.approvalTime') }} </label>
+              <label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
+                {{ formatDate(item?.endTime, 'MM-DD HH:mm') }}
+              </label>
+              <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
+                {{ t('processFlow.duration') }}
+              </label>
+              <label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
+                {{ formatPast2(item?.durationInMillis) }}
+              </label>
+            </div>
+            <div v-if="item.reason"> {{ t('processFlow.approvalSuggestion') }}{{ item.reason }} </div>
+          </el-card>
+        </el-timeline-item>
+      </el-timeline>
+    </div>
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+import { formatDate, formatPast2 } from '@/utils/formatTime'
+import { propTypes } from '@/utils/propTypes'
+import { DICT_TYPE } from '@/utils/dict'
+import { isEmpty } from '@/utils/is'
+import TaskSignList from './dialog/TaskSignList.vue'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import * as TaskApi from '@/api/bpm/task'
+import download from '@/utils/download'
+import {ref} from "vue";
+
+defineOptions({ name: 'BpmProcessInstanceTaskList' })
+
+const { t } = useI18n()
+const statusIconMapping = {
+  1: 'svg-icon:approvalPending', // 审批中
+  2: 'svg-icon:approvalPass', // 通过
+  3: 'svg-icon:approvalRejected', // 拒绝
+  4: 'svg-icon:approvalCanceled' // 取消
+}
+const props = defineProps({
+  loading: propTypes.bool, // 是否加载中
+  processInstance: propTypes.object, // 流程实例
+  tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
+})
+
+/** 获得任务对应的颜色 */
+const getTaskTimelineItemType = (item: any) => {
+  if ([0, 1, 6, 7].includes(item.status)) {
+    return 'primary'
+  }
+  if (item.status === 2) {
+    return 'success'
+  }
+  if (item.status === 3) {
+    return 'danger'
+  }
+  if (item.status === 4) {
+    return 'info'
+  }
+  if (item.status === 5) {
+    return 'warning'
+  }
+  return ''
+}
+
+/** 查看表单 */
+const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
+const taskForm = ref({
+  rule: [],
+  option: {},
+  value: {}
+}) // 流程任务的表单详情
+const taskFormVisible = ref(false)
+
+
+/** 刷新数据 */
+const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
+const refresh = () => {
+  emit('refresh')
+}
+</script>
+
+
+
+<style scoped lang="scss">
+.avatar-wrap {
+  width: 40px;
+  height: 40px;
+}
+.flow-start {
+  width: 70%;
+  margin: 10px auto;
+  padding: 10px;
+  padding-top: 0;
+  background: rgba(245, 247, 253, 1);
+
+  p {
+    margin: 0px;
+    padding-top: 10px;
+    font-size: 14px;
+  }
+}
+:deep(.el-timeline-item__dot) {
+  left: -15px;
+  top: -15px;
+}
+.scroll-area {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+</style>

package/src/ProcessFlow/src/CmcProcessFlow.vue

@@ -1,41 +1,75 @@
 <template>
-  <el-button @click="open">aaaa</el-button>
+  <el-button @click="open">测试按钮</el-button>
+  <!-- 审批记录列表 -->
+  <ProcessInstanceTaskList
+      :process-instance="processInstance"
+      :tasks="tasks"
+      @refresh="getTaskList"
+  />
 </template>
 
 <script setup lang="ts">
 import { ElMessage } from 'element-plus'
 import {ref, watch} from "vue";
 import {createProcessInstanceApi}  from "@/api/processInstance";
+import {createTaskApi} from "@/api/task";
+
+import ProcessInstanceTaskList from './CmcFlowList.vue'
+
+
+const message = useMessage() // 消息弹窗
 
 const props = defineProps<{
   processInstanceId: string
   request: any
 }>()
 
+
+const processInstanceLoading = ref(false)
+const processInstance = ref<any>({})
+const todoTask = ref<any>({})
+const applicationPrefix = ref('')
+const tasks = ref<any[]>([])
+
 const id = ref<string>('')
 const processInstanceApi = createProcessInstanceApi(props.request)
-console.log('props.request', props.request)
-console.log('processInstanceApi', processInstanceApi)
+const taskApi = createTaskApi(props.request)
 
 
 const open = () => {
   ElMessage.success('aaa!')
-  console.log(props.request)
-  props.request.get({
-    url: `/system/bpm/process-instance/get-approval-detail`,
-    params: {
-      processInstanceId: id.value
-    }
-  })
 }
 
 const init = (processInstanceId: string) => {
   id.value = processInstanceId
-  processInstanceApi.getApprovalDetail(processInstanceId)
-      .then((res: any) => {
-        console.log(res)
-      })
+  getApprovalDetail()
+  getTaskList()
+}
+
+// 获取审批详情数据
+const getApprovalDetail =  async () => {
+  try {
+    processInstanceLoading.value = true
+    const data = await processInstanceApi.getApprovalDetail(id.value)
+    if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+    if (!data.processDefinition || !data.processInstance) {
+      message.error('查询不到流程信息！')
+      return
+    }
+    processInstance.value = data?.processInstance
+    applicationPrefix.value = data?.processInstance?.formVariables?.applicationPrefix
+    todoTask.value = data?.todoTask
+  } finally {
+    processInstanceLoading.value = false
+  }
+}
 
+// 获取任务列表
+const getTaskList = async () => {
+  tasks.value = await taskApi.getTaskListByProcessInstanceId(id.value)
 }
 
 watch(

package/src/api/task.ts

@@ -0,0 +1,12 @@
+export const createTaskApi = (request: any) => ({
+    getTaskListByProcessInstanceId: async (processInstanceId: string) => {
+        return await request.get({
+            url: `/system/bpm/task/list-by-process-instance-id`,
+            params: {
+                processInstanceId
+            }
+        })
+    }
+})
+
+