【工作流】- 对接新获取表单字段权限接口

2d16816f · jason · 27d24cd0 · 2d16816f · 2d16816f · 2d16816f
Commit 2d16816f authored Oct 02, 2024 by jason
7 changed files
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -87,7 +87,13 @@ export const getProcessInstanceCopyPage = async (params: any) => {
  return await request.get({ url: '/bpm/process-instance/copy/page', params })
 }
+// 获取审批详情
 export const getApprovalDetail = async (processInstanceId?:string, processDefinitionId?:string) => {
  const param = processInstanceId ? '?processInstanceId='+ processInstanceId : '?processDefinitionId='+ processDefinitionId
  return await request.get({ url: 'bpm/process-instance/get-approval-detail'+ param })
 }
+// 获取表单字段权限
+export const getFormFieldsPermission = async (params: any) => {
+  return await request.get({ url: '/bpm/process-instance/get-form-fields-permission', params })
+}
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -300,7 +300,14 @@ const remainingRouter: AppRouteRecordRaw[] = [
          canTo: true,
          title: '流程详情',
          activeMenu: '/bpm/task/my'
+        },
+        props: route => (
+          { 
+            id: route.query.id,
+            taskId: route.query.taskId,
+            activityId: route.query.activityId
          }
+        )
      },
      {
        path: 'oa/leave/create',

--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -178,7 +178,6 @@ const getApprovalDetail = async () => {
    props.processInstanceId,
    props.processDefinitionId
  )
-  console.log('approveNodes is []', data)
  approveNodes.value = data.approveNodes
 }

--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -88,7 +88,10 @@
          <el-tab-pane label="流转评论" name="comment"> 流转评论 </el-tab-pane>
        </el-tabs>
-        <div class=" b-t-solid border-t-1px border-[var(--el-border-color)]" v-if="activeTab === 'form'">
+        <div
+          class="b-t-solid border-t-1px border-[var(--el-border-color)]"
+          v-if="activeTab === 'form'"
+        >
          <!-- 操作栏按钮 -->
          <ProcessInstanceOperationButton
            ref="operationButtonRef"
@@ -115,15 +118,18 @@ import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue
 import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
 import { registerComponent } from '@/utils/routerHelper'
 import * as UserApi from '@/api/system/user'
+import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import audit1 from '@/assets/svgs/bpm/audit1.svg'
 import audit2 from '@/assets/svgs/bpm/audit2.svg'
 import audit3 from '@/assets/svgs/bpm/audit3.svg'
 defineOptions({ name: 'BpmProcessInstanceDetail' })
+const props = defineProps<{
-const { query } = useRoute() // 查询参数
+  id: string   // 流程实例的编号
+  taskId?: string  // 任务编号
+  activityId?: string  //流程活动编号，用于抄送查看
+}>()
 const message = useMessage() // 消息弹窗
-const id = query.id as unknown as string // 流程实例的编号
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
 const operationButtonRef = ref()
@@ -157,7 +163,7 @@ const BusinessFormComponent = ref<any>(null) // 异步组件
 const getProcessInstance = async () => {
  try {
    processInstanceLoading.value = true
-    const data = await ProcessInstanceApi.getProcessInstance(id)
+    const data = await ProcessInstanceApi.getProcessInstance(props.id)
    if (!data) {
      message.error('查询不到流程信息！')
      return
@@ -167,6 +173,15 @@ const getProcessInstance = async () => {
    // 设置表单信息
    const processDefinition = data.processDefinition
    if (processDefinition.formType === 10) {
+      // 获取表单字段权限
+      let fieldsPermission = undefined
+      if (props.taskId || props.activityId) {
+        fieldsPermission = await ProcessInstanceApi.getFormFieldsPermission({
+          processInstanceId: props.id,
+          taskId: props.taskId,
+          activityId: props.activityId
+        })
+      }
      setConfAndFields2(
        detailForm,
        processDefinition.formConf,
@@ -177,6 +192,11 @@ const getProcessInstance = async () => {
        fApi.value?.btn.show(false)
        fApi.value?.resetBtn.show(false)
        fApi.value?.disabled(true)
+        if (fieldsPermission) {
+          Object.keys(fieldsPermission).forEach((item) => {
+            setFieldPermission(item, fieldsPermission[item])
+          })
+        }
      })
    } else {
      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
@@ -190,12 +210,27 @@ const getProcessInstance = async () => {
  }
 }
+/**
+ * 设置表单权限
+ */
+const setFieldPermission = (field: string, permission: string) => {
+  if (permission === FieldPermissionType.READ) {
+    fApi.value?.disabled(true, field)
+  }
+  if (permission === FieldPermissionType.WRITE) {
+    fApi.value?.disabled(false, field)
+  }
+  if (permission === FieldPermissionType.NONE) {
+    fApi.value?.hidden(true, field)
+  }
+}
 /** 加载任务列表 */
 const getTaskList = async () => {
  try {
    // 获得未取消的任务
    tasksLoad.value = true
-    const data = await TaskApi.getTaskListByProcessInstanceId(id)
+    const data = await TaskApi.getTaskListByProcessInstanceId(props.id)
    tasks.value = []
    // 1.1 移除已取消的审批
    data.forEach((task) => {
@@ -238,19 +273,29 @@ onMounted(async () => {
 </script>
 <style lang="scss" scoped>
-$wrap-padding-height: 30px ;
+$wrap-padding-height: 30px;
 $wrap-margin-height: 15px;
 $button-height: 51px;
 $process-header-height: 194px;
 .processInstance-wrap-main {
-  height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px);
+  height: calc(
-  max-height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px);
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px
+  );
+  max-height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px
+  );
  overflow: auto;
  .form-scoll-area {
-    height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px - $process-header-height - 40px);
+    height: calc(
-    max-height: calc(100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px - $process-header-height - 40px);
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px -
+        $process-header-height - 40px
+    );
+    max-height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px -
+        $process-header-height - 40px
+    );
    overflow: auto;
  }
 }
@@ -260,7 +305,4 @@ $process-header-height: 194px;
    border: none;
  }
 }
 </style>
--- a/src/views/bpm/task/copy/index.vue
+++ b/src/views/bpm/task/copy/index.vue
@@ -111,11 +111,16 @@ const getList = async () => {
 /** 处理审批按钮 */
 const handleAudit = (row: any) => {
+  const query = {
+    id: row.processInstanceId,
+    activityId: undefined
+  }
+  if (row.activityId) {
+    query.activityId = row.activityId
+  }
  push({
    name: 'BpmProcessInstanceDetail',
-    query: {
+    query: query
-      id: row.processInstanceId
-    }
  })
 }

--- a/src/views/bpm/task/done/index.vue
+++ b/src/views/bpm/task/done/index.vue
@@ -158,7 +158,8 @@ const handleAudit = (row: any) => {
  push({
    name: 'BpmProcessInstanceDetail',
    query: {
-      id: row.processInstance.id
+      id: row.processInstance.id,
+      taskId: row.id
    }
  })
 }

--- a/src/views/bpm/task/todo/index.vue
+++ b/src/views/bpm/task/todo/index.vue
@@ -140,7 +140,8 @@ const handleAudit = (row: any) => {
  push({
    name: 'BpmProcessInstanceDetail',
    query: {
-      id: row.processInstance.id
+      id: row.processInstance.id,
+      taskId: row.id
    }
  })
 }