流程图

src/components/CostEntry/actionBar.vue

@@ -57,7 +57,7 @@
           <a-menu-item>申请开票</a-menu-item>
           <a-menu-item>收费申请</a-menu-item>
           <a-menu-item>费用拆分</a-menu-item>
-          <a-menu-item @click="flowChart">查看工作流</a-menu-item>
+          <a-menu-item @click="openFlowChart">查看工作流</a-menu-item>
           <a-menu-item>批量更改费用对象</a-menu-item>
           <a-menu-item>批量修改核算单位</a-menu-item>
           <a-menu-item>禁开发票</a-menu-item>
@@ -101,6 +101,8 @@
     <FeeTemDrawer ref="feeDrawer" @submit="submitTem"></FeeTemDrawer>
     <!-- 保存到费用模版 -->
     <ToFeeTemDrawer ref="toFeeTemDrawer"></ToFeeTemDrawer>
+    <!-- 流程图 -->
+    <FlowChart ref="flowChart"></FlowChart>
   </div>
 </template>
 <script lang="ts" setup>
@@ -109,6 +111,7 @@
   import HistoryDrawer from './components/historyDrawer.vue'
   import FeeTemDrawer from './components/feeTemDrawer.vue'
   import ToFeeTemDrawer from './components/ToFeeTemDrawer.vue'
+  import FlowChart from '../FlowChart/index.vue'
   const { createMessage } = useMessage()
   const emits = defineEmits(['revoke', 'save', 'delete', 'cancel', 'refresh', 'history', 'selectInsert', 'submit']) 
   const props = defineProps({
@@ -136,6 +139,8 @@
   const feeDrawer = ref(null)
   // 保存到费用
   const toFeeTemDrawer = ref(null)
+  // 流程图dom
+  const flowChart = ref(null)
   // 添加行
   const addRow = () => {
     const deepCopyRow = JSON.parse(JSON.stringify(props.row))
@@ -219,8 +224,19 @@
     feeDrawer.value.init()
   }
   // 查看工作流
-  const flowChart = () => {
-    
+  const openFlowChart = () => {
+    let flag = false
+    const arr = []
+    props.data.forEach(item => {
+      if (item?.selected) {
+        flag = true
+        arr.push(item)
+      }
+    })
+    if (!flag) return createMessage.warning('请勾选要查看流程的费用！')
+    if (arr.length > 1) return createMessage.warning('仅支持勾选1条费用进行查看流程！')
+    if (arr[0].feeStatus == 1) return createMessage.warning('费用录入状态的数据不支持查看流程！')
+    flowChart.value.init(arr[0].id, 0)
   }
   // 提交引入（历史）
   const submitHistory = (v) => {

src/components/CostEntry/feeTable.vue

@@ -207,9 +207,9 @@
       },
     },
     {
-      title: '不含税单价',
+      title: '税率',
       width: 120,
-      data: 'noTaxPrice',
+      data: 'taxRate',
       type: 'numeric',
     },
     {
@@ -227,9 +227,9 @@
       format: '0',
     },
     {
-      title: '金额',
+      title: '不含税单价',
       width: 120,
-      data: 'amount',
+      data: 'noTaxPrice',
       type: 'numeric',
     },
     {
@@ -240,22 +240,11 @@
       format: '0.00',
     },
     {
-      title: '税率',
-      width: 120,
-      data: 'taxRate',
-      type: 'numeric',
-    },
-    {
-      title: '汇率',
+      title: '金额',
       width: 120,
-      data: 'exchangeRate',
+      data: 'amount',
       type: 'numeric',
     },
-    {
-      title: '备注',
-      width: 120,
-      data: 'note',
-    },
     {
       title: '币别',
       width: 80,
@@ -274,6 +263,17 @@
         }
       },
     },
+    {
+      title: '汇率',
+      width: 120,
+      data: 'exchangeRate',
+      type: 'numeric',
+    },
+    {
+      title: '备注',
+      width: 120,
+      data: 'note',
+    },
     {
       title: '销项税率',
       width: 100,

src/components/FlowChart/api.ts

@@ -0,0 +1,19 @@
+/*
+ * @Description: 流程图
+ * @Author: lijj
+ * @Date: 2024-04-25 15:48:33
+ */
+
+import { request } from '/@/utils/request'
+import { DataResult, PageRequest } from '/@/api/model/baseModel'
+enum Api {
+  list = '/mainAPI/ClientFlowTemplate/GetFlowContent'
+}
+// 流程图 (Auth)
+export function GetFlowContent(params: PageRequest) {
+  return request<DataResult>({
+    url: Api.list,
+    method: 'get',
+    params
+  })
+}

src/components/FlowChart/index.vue

@@ -0,0 +1,53 @@
+<!--
+ * @Author: lijj
+ * @Date: 2024-05-06 09:18:47
+ * @Description: 流程图组件
+-->
+<template>
+   <a-modal 
+    v-model:visible="visible"
+    v-if="visible"
+    title="流程图"
+    width="80%"
+    @ok="handleOk"
+  >
+    <FlowDesign :process="process" :fields="fields" :readonly="true" />
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, defineExpose } from 'vue'
+  import FlowDesign from '/@/views/flowcenter/flowInstances/Lowflow/index.vue'
+  import { GetFlowContent } from './api'
+  const visible = ref(false)
+  const init = (id, type) => {
+    visible.value = true
+    console.log(id)
+    // GetFlowContent({ id, type }).then(res => {
+    //   console.log(res)
+    // })
+  }
+  const fields = ref([])
+  const process = ref({
+    id: 'root',
+    pid: null,
+    type: 'start',
+    name: '发起人',
+    formProperties: [],
+    child: {
+      id: 'end',
+      pid: 'root',
+      type: 'end',
+      name: '结束',
+      child: null,
+    }
+  })
+  const handleOk = () => {
+    
+  }
+  defineExpose({
+    init
+  })
+</script>
+<style>
+</style>

src/design/public.less

@@ -56,7 +56,7 @@
 
 // 自定义最小输入框
 .ant-form-small {
-  .ant-input-affix-wrapper-sm, .ant-select-selector {
+  .ant-input-affix-wrapper-sm, .ant-select-selector, .ant-input-number {
     height: 28px!important;
     .ant-select-selection-item {
       line-height: 26px!important;
@@ -66,4 +66,11 @@
     height: 28px;
     width: 100%;
   }
+  .ant-input-number-input-wrap {
+    height: 28px;
+    line-height: 26px;
+  }
+  .ant-form-item-label > label {
+    height: 20px!important;
+  }
 }

src/utils/request.ts

@@ -71,7 +71,7 @@ service.interceptors.response.use(
       return response
     } else if (!res.succeeded) {
       $message.error(res.message || UNKNOWN_ERROR)
-      // return response
+      return response
       // // Illegal token
       // if (res.code === 11001 || res.code === 11002) {
       //   window.localStorage.clear();

src/views/flowcenter/flowInstances/Lowflow/index.vue

@@ -11,12 +11,13 @@
 
   export interface FlowDesignProps {
     process: FlowNode
-    fields: Field[]
+    fields: Field[],
+    readonly: false
   }
 
   const $props = defineProps<FlowDesignProps>()
   const $emits = defineEmits(['update:process', 'update:fields'])
-  const { process, fields } = useVModels($props, $emits)
+  const { process, fields, readonly } = useVModels($props, $emits)
   const nodePenalRef = ref<InstanceType<typeof NodePenal>>()
   const zoom = ref(100)
   const getScale = computed(() => zoom.value / 100)
@@ -110,7 +111,7 @@
       <NodeTree :node="process" />
     </div>
     <!--属性面板-->
-    <NodePenal ref="nodePenalRef" />
+    <NodePenal ref="nodePenalRef" v-if="!readonly" />
   </div>
 </template>
 

src/views/flowcenter/flowInstances/api.ts

@@ -2,19 +2,19 @@
 import { request } from '/@/utils/request'
 import { DataResult, PageRequest } from '/@/api/model/baseModel'
 enum Api {
-  list = '/adminApi/FlowInstance/GetFlowInstanceList',
-  EditFlowTemplate = '/adminApi/FlowTemplate/EditFlowTemplate',
-  GetTables = '/adminApi/Common/GetTables',
-  GetColumns = '/adminApi/Common/GetColumns',
-  GetFlowInstanceInfo = '/adminApi/FlowInstance/GetFlowInstanceInfo',
-  AuditFlowInstance = '/adminApi/FlowInstance/AuditFlowInstance',
-  getClientPermissionTreeList = '/adminApi/Common/GetClientPermissionTreeList',
-  rolegetList='/adminApi/Common/GetRoleList',
-  getList='/adminApi/Common/GetUserList',
-  EditFlowInstance='/adminApi/FlowInstance/EditFlowInstance',
-  CancelFlowInstance='/adminApi/FlowInstance/CancelFlowInstance',
-  StartFlowInstance='/adminApi/FlowInstance/StartFlowInstance',
-  GetFlowInstanceHistoryList='/adminApi/FlowInstance/GetFlowInstanceHistoryList',
+  list = '/mainApi/ClientFlowInstance/GetFlowInstanceList',
+  EditFlowTemplate = '/mainApi/ClientFlowTemplate/EditFlowTemplate',
+  GetTables = '/mainApi/Common/GetTables',
+  GetColumns = '/mainApi/Common/GetColumns',
+  GetFlowInstanceInfo = '/mainApi/ClientFlowInstance/GetFlowInstanceInfo',
+  AuditFlowInstance = '/mainApi/ClientFlowInstance/AuditFlowInstance',
+  getClientPermissionTreeList = '/mainApi/Common/GetClientPermissionTreeList',
+  rolegetList='/mainApi/Common/GetRoleList',
+  getList='/mainApi/Common/GetUserList',
+  EditFlowInstance='/mainApi/ClientFlowInstance/EditFlowInstance',
+  CancelFlowInstance='/mainApi/ClientFlowInstance/CancelFlowInstance',
+  StartFlowInstance='/mainApi/ClientFlowInstance/StartFlowInstance',
+  GetFlowInstanceHistoryList='/mainApi/ClientFlowInstance/GetFlowInstanceHistoryList',
   downloadXml = '/stage-api/workflow/model/download',
   getByUsername='/stage-api/user/info',
   getById='/stage-api/role/info',

src/views/operation/seaexport/detail/style/basicInfo.less

@@ -256,15 +256,6 @@ form .has-feedback .ant-time-picker-clear {
   }
 }
 
-/deep/ .ant-form-item-label {
-  height: 28px !important;
-  line-height: 28px !important;
-  // border: 1px solid #f00;
-}
-// /deep/ .ant-form-item-control {
-//   height: 36px !important;
-//   line-height: 36px !important;
-// }
 
 .from-box3 {
   /deep/ .ant-form-item-label {

src/views/operation/seaexport/detail/style/cargoInfo.less

@@ -121,15 +121,6 @@
     height: 45px;
     color: #000;
   }
-
-  /deep/ .ant-form-item-label {
-    height: 28px !important;
-    line-height: 28px !important;
-  }
-  /deep/ .ant-form-item-control {
-    // height:36px !important;
-    line-height: 36px !important;
-  }
   .line {
     height: 45px;
     color: #000;