nbb-component-ui 1.2.1 → 1.2.3

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from 'vue';
-import { ProcessFlow } from './src/ProcessFlow';
+import { CmcProcessFlow } from './src/ProcessFlow';
 declare const plugin: Plugin<[]>;
-export { ProcessFlow };
+export { CmcProcessFlow };
 export default plugin;

package/dist/index.es.js

@@ -1,29 +1,29 @@
 import { defineComponent as l, ref as i, watch as u, resolveComponent as m, openBlock as g, createBlock as d, withCtx as f, createTextVNode as v } from "vue";
 import { ElMessage as _ } from "element-plus";
-const I = (t) => ({
+const C = (t) => ({
   getApprovalDetail: async (e) => await t.get({
     url: "/system/bpm/process-instance/get-approval-detail",
     params: {
       processInstanceId: e
     }
   })
-}), q = /* @__PURE__ */ l({
-  __name: "ProcessFlow",
+}), I = /* @__PURE__ */ l({
+  __name: "CmcProcessFlow",
   props: {
     processInstanceId: {},
     request: {}
   },
   setup(t) {
-    const e = t, n = i(""), r = I(e.request);
+    const e = t, n = i(""), r = C(e.request);
     console.log("props.request", e.request), console.log("processInstanceApi", r);
-    const a = () => {
+    const c = () => {
       _.success("aaa!"), console.log(e.request), e.request.get({
         url: "/system/bpm/process-instance/get-approval-detail",
         params: {
           processInstanceId: n.value
         }
       });
-    }, c = (s) => {
+    }, a = (s) => {
       n.value = s, r.getApprovalDetail(s).then((o) => {
         console.log(o);
       });
@@ -32,12 +32,12 @@ const I = (t) => ({
       () => e.processInstanceId,
       (s) => {
         debugger;
-        s && s !== n.value && c(s);
+        s && s !== n.value && a(s);
       },
       { immediate: !0, deep: !0 }
     ), (s, o) => {
       const p = m("el-button");
-      return g(), d(p, { onClick: a }, {
+      return g(), d(p, { onClick: c }, {
         default: f(() => [...o[0] || (o[0] = [
           v("aaaa", -1)
         ])]),
@@ -45,12 +45,12 @@ const I = (t) => ({
       });
     };
   }
-}), C = {
+}), A = {
   install(t) {
-    t.component("CmcLinkProcessFlow", q);
+    t.component("CmcProcessFlow", I);
   }
 };
 export {
-  q as ProcessFlow,
-  C as default
+  I as CmcProcessFlow,
+  A as default
 };

package/dist/index.umd.js

@@ -1 +1 @@
-(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.NbbComponentUi={},t.Vue,t.ElementPlus))})(this,function(t,e,a){"use strict";const i=n=>({getApprovalDetail:async s=>await n.get({url:"/system/bpm/process-instance/get-approval-detail",params:{processInstanceId:s}})}),p=e.defineComponent({__name:"ProcessFlow",props:{processInstanceId:{},request:{}},setup(n){const s=n,c=e.ref(""),l=i(s.request);console.log("props.request",s.request),console.log("processInstanceApi",l);const d=()=>{a.ElMessage.success("aaa!"),console.log(s.request),s.request.get({url:"/system/bpm/process-instance/get-approval-detail",params:{processInstanceId:c.value}})},m=o=>{c.value=o,l.getApprovalDetail(o).then(r=>{console.log(r)})};return e.watch(()=>s.processInstanceId,o=>{debugger;o&&o!==c.value&&m(o)},{immediate:!0,deep:!0}),(o,r)=>{const f=e.resolveComponent("el-button");return e.openBlock(),e.createBlock(f,{onClick:d},{default:e.withCtx(()=>[...r[0]||(r[0]=[e.createTextVNode("aaaa",-1)])]),_:1})}}}),u={install(n){n.component("CmcLinkProcessFlow",p)}};t.ProcessFlow=p,t.default=u,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(t,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus"],e):(t=typeof globalThis<"u"?globalThis:t||self,e(t.NbbComponentUi={},t.Vue,t.ElementPlus))})(this,function(t,e,a){"use strict";const i=n=>({getApprovalDetail:async s=>await n.get({url:"/system/bpm/process-instance/get-approval-detail",params:{processInstanceId:s}})}),p=e.defineComponent({__name:"CmcProcessFlow",props:{processInstanceId:{},request:{}},setup(n){const s=n,r=e.ref(""),l=i(s.request);console.log("props.request",s.request),console.log("processInstanceApi",l);const d=()=>{a.ElMessage.success("aaa!"),console.log(s.request),s.request.get({url:"/system/bpm/process-instance/get-approval-detail",params:{processInstanceId:r.value}})},m=o=>{r.value=o,l.getApprovalDetail(o).then(c=>{console.log(c)})};return e.watch(()=>s.processInstanceId,o=>{debugger;o&&o!==r.value&&m(o)},{immediate:!0,deep:!0}),(o,c)=>{const f=e.resolveComponent("el-button");return e.openBlock(),e.createBlock(f,{onClick:d},{default:e.withCtx(()=>[...c[0]||(c[0]=[e.createTextVNode("aaaa",-1)])]),_:1})}}}),u={install(n){n.component("CmcProcessFlow",p)}};t.CmcProcessFlow=p,t.default=u,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/src/ProcessFlow/index.d.ts

@@ -1,2 +1,2 @@
-import { default as ProcessFlow } from './src/ProcessFlow.vue';
-export { ProcessFlow };
+import { default as CmcProcessFlow } from './src/CmcProcessFlow.vue';
+export { CmcProcessFlow };

package/index.ts

@@ -1,14 +1,14 @@
 import type { App, Plugin } from 'vue'
-import {ProcessFlow} from "./src/ProcessFlow";
+import {CmcProcessFlow} from "./src/ProcessFlow";
 
 // 定义插件对象，严格标注类型
 const plugin: Plugin<[]> = {
   install(app: App) {
-    app.component('CmcLinkProcessFlow', ProcessFlow)
+    app.component('CmcProcessFlow', CmcProcessFlow)
   }
 }
 // 支持按需引入
-export {ProcessFlow }
+export {CmcProcessFlow }
 
 // 默认导出插件（必须是Plugin类型）
 export default plugin

package/package.json

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

package/src/ProcessFlow/index.ts

@@ -1,3 +1,3 @@
-import ProcessFlow from './src/ProcessFlow.vue'
+import CmcProcessFlow from './src/CmcProcessFlow.vue'
 
-export { ProcessFlow }
+export { CmcProcessFlow }

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

@@ -0,0 +1,89 @@
+<template>
+  <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)
+const taskApi = createTaskApi(props.request)
+
+
+const open = () => {
+  ElMessage.success('aaa!')
+}
+
+const init = (processInstanceId: string) => {
+  id.value = processInstanceId
+  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(
+    () => props.processInstanceId,
+    (newValue) => {
+      debugger
+      if (newValue && newValue !== id.value) {
+        init(newValue)
+      }
+    },
+    { immediate: true, deep: true }
+)
+</script>
+
+<style>
+
+</style>

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
+            }
+        })
+    }
+})
+
+

package/src/ProcessFlow/src/ProcessFlow.vue

@@ -1,55 +0,0 @@
-<template>
-  <el-button @click="open">aaaa</el-button>
-</template>
-
-<script setup lang="ts">
-import { ElMessage } from 'element-plus'
-import {ref, watch} from "vue";
-import {createProcessInstanceApi}  from "@/api/processInstance";
-
-const props = defineProps<{
-  processInstanceId: string
-  request: any
-}>()
-
-const id = ref<string>('')
-const processInstanceApi = createProcessInstanceApi(props.request)
-console.log('props.request', props.request)
-console.log('processInstanceApi', processInstanceApi)
-
-
-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)
-      })
-
-}
-
-watch(
-    () => props.processInstanceId,
-    (newValue) => {
-      debugger
-      if (newValue && newValue !== id.value) {
-        init(newValue)
-      }
-    },
-    { immediate: true, deep: true }
-)
-</script>
-
-<style>
-
-</style>