models

.umirc.ts

@@ -31,7 +31,7 @@ export default defineConfig({
       layout: false,
     },
     {
-      name: '流程图管理',
+      name: '流程图列表',
       path: '/flow',
       hideChildrenInMenu: true,
       routes: [

src/components/DDComponents/DepartmentField/index.js

@@ -1,29 +1,34 @@
+import { useModel } from '@umijs/max';
 import { TreeSelect } from 'antd';
-import { connect } from 'dva';
+import { useEffect } from 'react';
 
 function DepartmentField(props) {
-  const { value, onChange, depUserTree } = props;
-  const onChangeValue = newValue => {
-    let dep = depUserTree.find(dep => dep.id == newValue);
-    onChange(String(dep?.ID));
+  const { value, onChange } = props;
+  const { depList, run, loading } = useModel('depList');
+
+  const onChangeValue = (newValue) => {
+    onChange(String(newValue));
   };
+  useEffect(() => {
+    run();
+  }, []);
 
   return (
-
     <TreeSelect
       showSearch
-      multiple
+      // multiple
       allowClear
       dropdownStyle={{
         maxHeight: 400,
         overflow: 'auto',
       }}
+      loading={loading}
       style={{ width: '100%' }}
       placeholder="请选择部门"
-      treeData={depUserTree}
+      treeData={depList}
       onChange={onChangeValue}
     />
   );
 }
 
-export default connect(({ user }) => ({ depUserTree: user.depUserTree }))(DepartmentField);
+export default DepartmentField;

src/components/DDComponents/InnerContactField/index.js

@@ -1,21 +1,28 @@
-import React from 'react';
-import { message, Select } from 'antd';
-import { connect } from 'dva';
+import { useModel } from '@umijs/max';
+import { Select } from 'antd';
+import { useEffect } from 'react';
 
 const { Option } = Select;
 
 function InnerContactField(props) {
-  const { value, userList, onChange } = props;
+  const { value, onChange } = props;
+  const { userList, run, loading } = useModel('userList');
+  useEffect(() => {
+    run();
+  }, []);
   return (
     <Select
       showSearch
-      onChange={value => {
+      onChange={(value) => {
         onChange(String(value));
         // onChange(JSON.stringify([value]));
       }}
-      filterOption={(input, option) => option.children.toLowerCase().includes(input.toLowerCase())}
+      loading={loading}
+      filterOption={(input, option) =>
+        option.children.toLowerCase().includes(input.toLowerCase())
+      }
     >
-      {(userList || []).map(item => (
+      {(userList || []).map((item) => (
         <Option key={item.ID} value={item.ID}>
           {item.CName}
         </Option>
@@ -24,6 +31,4 @@ function InnerContactField(props) {
   );
 }
 
-export default connect(({ user }) => ({
-  userList: user.list,
-}))(InnerContactField);
+export default InnerContactField;

src/components/DDComponents/index.js

@@ -16,13 +16,7 @@ const { RangePicker } = DatePicker;
 
 export default function DDComponents(props) {
   const { item, onChange } = props;
-  const {
-    placeholder,
-    options,
-    format,
-    unit,
-    disabled,
-  } = item.props;
+  const { placeholder, options, format, unit, disabled, notUpper } = item.props;
   let component = null;
   switch (item.componentName) {
     case 'TextField': //单行输入
@@ -30,7 +24,7 @@ export default function DDComponents(props) {
         <Input
           disabled={disabled}
           placeholder={placeholder}
-          onChange={e => onChange?.(e.target.value)}
+          onChange={(e) => onChange?.(e.target.value)}
         />
       );
       break;
@@ -39,24 +33,46 @@ export default function DDComponents(props) {
         <Input.TextArea
           disabled={disabled}
           placeholder={placeholder}
-          onChange={e => onChange?.(e.target.value)}
+          onChange={(e) => onChange?.(e.target.value)}
         />
       );
       break;
     case 'NumberField': //数字输入
-      component = <NumberField disabled={disabled} unit={unit} onChange={onChange} />;
+      component = (
+        <NumberField disabled={disabled} unit={unit} onChange={onChange} />
+      );
       break;
     case 'DDSelectField': //单选框
-      component = <DDSelectField options={options} onChange={onChange} disabled={disabled} />;
+      component = (
+        <DDSelectField
+          options={options}
+          onChange={onChange}
+          disabled={disabled}
+        />
+      );
       break;
     case 'DDMultiSelectField': //多选框
-      component = <DDMultiSelectField disabled={disabled} options={options} onChange={onChange} />;
+      component = (
+        <DDMultiSelectField
+          disabled={disabled}
+          options={options}
+          onChange={onChange}
+        />
+      );
       break;
     case 'DDDateField': //日期控件
-      component = <DDDateField format={format} disabled={disabled} onChange={onChange} />;
+      component = (
+        <DDDateField format={format} disabled={disabled} onChange={onChange} />
+      );
       break;
     case 'DDDateRangeField': //时间区间控件
-      component = <DDDateRangeField format={format} disabled={disabled} onChange={onChange} />;
+      component = (
+        <DDDateRangeField
+          format={format}
+          disabled={disabled}
+          onChange={onChange}
+        />
+      );
       break;
     case 'TextNote': //文本说明控件
       console.info('文本说明控件!');
@@ -86,18 +102,23 @@ export default function DDComponents(props) {
       component = <DepartmentField onChange={onChange} />;
       break;
     case 'RelateField': //关联审批单
-      component = '关联审批单控件未渲染!'
+      component = '关联审批单控件未渲染!';
       break;
     case 'AddressField': //省市区控件
-      component = '省市区控件未渲染!'
+      component = '省市区控件未渲染!';
       break;
     case 'StarRatingField': //评分控件
-      component = '评分控件未渲染!'
+      component = '评分控件未渲染!';
       break;
     case 'FormRelateField': //关联控件
-      component = '关联控件未渲染!'
+      component = '关联控件未渲染!';
       break;
   }
 
-  return component;
+  return (
+    <>
+      {component}
+      {notUpper == 1 && <p>大写</p>}
+    </>
+  );
 }

src/components/UserDropdown/index.less

@@ -13,5 +13,5 @@
 .name {
   margin-left: 8px;
   margin-right: 30px;
-  color: #333;
+  color: #fff;
 }

src/models/depList.js

@@ -0,0 +1,62 @@
+import { useRequest } from '@umijs/max';
+import { queryDepV2 } from '@/services/approval';
+
+const depList = () => {
+  const { data, run, loading } = useRequest(queryDepV2, {
+    manual: true,
+    cacheKey: 'queryDepV2',
+    defaultParams: [{ pageSize: 9999 }],
+  });
+  let depUserTree = [],
+    depList = [];
+  if (data) {
+    depList = data.list.map((item) => {
+      return getDepTree(item);
+    });
+
+    let copyData = JSON.parse(JSON.stringify(data.list));
+    depUserTree = copyData.map((item) => {
+      return getDepUserTree(item);
+    });
+  }
+  return { depUserTree, depList, loading, run };
+};
+function getDepUserTree(data) {
+  data.title = `${data.Name}`;
+  data.id = data.ID;
+  data.value = data.ID;
+  data.selectable = false;
+  if (!data.children) data.children = new Array();
+
+  if (data.children) {
+    data.children.forEach((item) => {
+      getDepUserTree(item);
+    });
+  }
+
+  if (data.Users && data.Users.length !== 0) {
+    data.Users.forEach((item) => {
+      item.title = item.CName;
+      item.id = item.ID + '||' + data.ID;
+      item.value = item.ID + '||' + data.ID;
+      // item.selectable = true;
+      item.DepId = data.ID;
+      data.children.push(item);
+    });
+  }
+  return data;
+}
+function getDepTree(data) {
+  data.title = `${data.Name}`;
+  data.id = data.ID;
+  data.value = data.ID;
+  if (!data.children) data.children = new Array();
+
+  if (data.children) {
+    data.children.forEach((item) => {
+      getDepTree(item);
+    });
+  }
+  return data;
+}
+export default depList;

src/models/userList.js

@@ -0,0 +1,11 @@
+import { useRequest } from '@umijs/max';
+import { query } from '@/services/user';
+
+export default () => {
+  const { data, loading, run } = useRequest(query, {
+    manual: true,
+    cacheKey: 'queryUserList',
+  });
+
+  return { userList: data?.list, loading, run };
+};

src/pages/Flow/Audit.js

@@ -6,14 +6,8 @@ import { PageContainer, ProCard } from '@ant-design/pro-components';
 import AuditForm from '@/components/AuditForm';
 import { useModel } from '@umijs/max';
 
-const { TabPane } = Tabs;
-
-const FLOWID = 2;
-
 function Audit(props) {
   const {
-    roleList,
-    currentItem,
     dispatch,
     formItems,
     formData,
@@ -27,9 +21,12 @@ function Audit(props) {
   const permission = user?.Permission || {};
 
   const curItem = useMemo(() => {
-    let item = localStorage.getItem('currentAudit');
-    return JSON.stringify(currentItem) == '{}' ? JSON.parse(item) : currentItem;
-  }, [currentItem, localStorage.getItem('currentAudit')]);
+    let item = {};
+    try {
+      item = JSON.parse(localStorage.getItem('currentAudit'));
+    } catch (e) {}
+    return item;
+  }, [1]);
 
   const editMode = useMemo(() => {
     // 判断是否有权限
@@ -52,13 +49,6 @@ function Audit(props) {
     dispatch({
       type: 'user/getRoleList',
     });
-    dispatch({
-      type: 'user/fetch',
-    });
-
-    dispatch({
-      type: 'user/fetchDepV2',
-    });
   }, []);
 
   const onChange = (values) => {
@@ -139,7 +129,6 @@ function Audit(props) {
 }
 export default connect(({ flow, loading, user, xflow }) => ({
   roleList: flow.roleList,
-  currentItem: flow.current,
   loading: loading.effects,
   formItems: xflow.formData,
   flowDetail: flow.flowDetail,

src/pages/Flow/Oa.js

@@ -1,16 +1,10 @@
 import React, { useMemo } from 'react';
-import { Collapse, Layout, List } from 'antd';
-import {
-  UserOutlined,
-  FileOutlined,
-  EditOutlined,
-  ExceptionOutlined,
-} from '@ant-design/icons';
+import { Collapse, List } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
 import { Link, useRequest } from '@umijs/max';
 import { queryAuditList, queryClassify } from '@/services/boom';
 
-const { Sider, Content } = Layout;
 const { Panel } = Collapse;
 
 const getBackgroundColors = (index) => {
@@ -53,7 +47,7 @@ const Approval = () => {
   }, [classify, auditList]);
 
   return (
-    <PageContainer loading={loading}>
+    <PageContainer loading={loading} breadcrumb={null}>
       {categories.length > 0 && (
         <Collapse defaultActiveKey={categories.map((category) => category.id)}>
           {categories.map((category, index) => (

src/pages/Flow/OaDetail.js

@@ -1,80 +1,47 @@
 import React, { useState } from 'react';
-import { PageContainer } from '@ant-design/pro-components';
+import { PageContainer, ProCard } from '@ant-design/pro-components';
 import { Col, Empty, Row } from 'antd';
 import ApprovalProcess from './components/ApprovalProcess';
 import AuditDetailed from './components/AuditDetailed';
-import { queryGetBomForm } from '@/services/boom';
+import { queryGetBomForm, queryProcessFlows } from '@/services/boom';
+import { useParams, useRequest } from 'umi';
 
 const OaDetail = () => {
   const [approvalProcess, setApprovalProcess] = useState([]);
+  const { oaId } = useParams();
   const items = [];
-  const initFormList = async () => {
-    const res = await queryGetBomForm({
-      project_id: version.project_id,
-      node_id: version.template_node_id,
-    });
-    if (res.data) {
-      const formList = JSON.parse(res.data.json);
-      setApprovalProcess(formList.approvalProcess || {});
-      return formList.approvalProcess;
-    }
-  };
-  //填写表单实时计算审批流程
-  const advanceSubmit = async (fieldsValue) => {
-    console.log('重重新计算审批流程');
-    // var fieldsValue = await form.validateFields();
 
-    let result = Object.values(fieldsValue)
-      .map((item) => {
-        if (item && Array.isArray(item)) return item;
-      })
-      .filter((item) => item);
-    const formList = await getFromData(result);
-    let params = {
-      desc: fieldsValue.desc,
-      // 审核流程id
-      flow_id: 0,
-      node_level_id: 0,
-      id: version.id,
-      project_id: version.project_id,
-      cur_template_node_id: version.template_node_id * 1, // 当前节点
-      next_template_node_id: 0, // 审核完成后的业务节点
-      template_node_id: null, // 将要流转的节点审批节点
-      flow_path: null, //审批节点数组
-      // 模板id.一致就行
-      template_id: version.template_id,
-      cur_template_id: version.template_id,
-      next_template_id: version.template_id,
-      form_list: formList,
-    };
-    dispatch({
-      type: 'detail/advanceSubmitNextNode',
-      payload: params, //values,
-      callback: (data) => {
-        if (data) {
-          setApprovalProcess(data);
-        }
-      },
-    });
+  const { data, loading } = useRequest(queryProcessFlows, {
+    defaultParams: [{ ids: oaId }],
+  });
+
+  //填写表单实时计算审批流程
+  const advanceSubmit = async (changedFields, allFields) => {
+    console.log(changedFields, allFields);
   };
 
   return (
-    <PageContainer>
-      <Row>
-        <Col span={17}>
-          <AuditDetailed items={items} onFieldsChange={advanceSubmit} />
-        </Col>
-        <Col offset={1} span={6}>
-          {approvalProcess.length == 0 ? ( //!formComponentValues[item.nodeId] ||
-            <Empty description="请先填写表单" />
-          ) : (
-            <ApprovalProcess
-              approvalProcess={approvalProcess}
-              onChange={setApprovalProcess}
+    <PageContainer loading={loading}>
+      <ProCard style={{ minHeight: '80vh' }}>
+        <Row gutter={24}>
+          <Col span={12}>
+            <AuditDetailed
+              items={data?.formData}
+              onFieldsChange={advanceSubmit}
             />
-          )}
-        </Col>
-      </Row>
+          </Col>
+          <Col span={12}>
+            {approvalProcess.length == 0 ? ( //!formComponentValues[item.nodeId] ||
+              <Empty description="请先填写表单" />
+            ) : (
+              <ApprovalProcess
+                approvalProcess={approvalProcess}
+                onChange={setApprovalProcess}
+              />
+            )}
+          </Col>
+        </Row>
+      </ProCard>
     </PageContainer>
   );
 };

src/pages/Flow/components/AuditDetailed.js

@@ -71,9 +71,13 @@ const AuditDetailed = (props) => {
     // const component = DDComponents({ item });
     // if (!component) return null;
     return (
-      <Form.Item label={formLabel} rules={[{ required }]}>
+      <Form.Item
+        key={id}
+        name={id}
+        label={formLabel}
+        rules={[{ required: required }]}
+      >
         <DDComponents item={item} />
-        {notUpper == 1 && <p>大写</p>}
       </Form.Item>
     );
   };
@@ -81,7 +85,7 @@ const AuditDetailed = (props) => {
   return (
     <Form
       form={form}
-      style={{ height: '400px', overflowY: 'scroll', paddingRight: 20 }}
+      style={{ minHeight: '80vh', overflowY: 'auto', paddingRight: 20 }}
       layout="vertical"
       autoComplete="off"
       onFieldsChange={onFieldsChange}

src/pages/Flow/index.js

@@ -55,8 +55,7 @@ function Audit(props) {
     });
   };
   const setCurrentNode = (item) => {
-    if (item?.list)
-      localStorage.setItem('currentAudit', JSON.stringify(item.list));
+    localStorage.setItem('currentAudit', JSON.stringify(item));
     dispatch({
       type: 'flow/save',
       payload: {
@@ -84,6 +83,7 @@ function Audit(props) {
   return (
     <PageContainer
       title={null}
+      breadcrumb={null}
       extra={[
         <Button
           key={1}

src/pages/Flow/models/flow.js

@@ -3,7 +3,7 @@ import {
   addAudit,
   queryProcessFlows,
   saveAuditFlowInfo,
-  queryClassify
+  queryClassify,
   // addAuditNode,
   // addFlow,
   // queryBoomFlowDetail,
@@ -43,96 +43,6 @@ import { message } from 'antd';
 //   return data;
 // }
 
-const getFlowDetail = (data) => {
-  const groups = {
-    top: {
-      position: { name: 'top' },
-      attrs: {
-        circle: {
-          r: 4,
-          magnet: true,
-          stroke: '#31d0c6',
-          strokeWidth: 2,
-          fill: '#fff',
-          style: { visibility: 'hidden' },
-        },
-      },
-      zIndex: 10,
-    },
-    right: {
-      position: { name: 'right' },
-      attrs: {
-        circle: {
-          r: 4,
-          magnet: true,
-          stroke: '#31d0c6',
-          strokeWidth: 2,
-          fill: '#fff',
-          style: { visibility: 'hidden' },
-        },
-      },
-      zIndex: 10,
-    },
-    bottom: {
-      position: { name: 'bottom' },
-      attrs: {
-        circle: {
-          r: 4,
-          magnet: true,
-          stroke: '#31d0c6',
-          strokeWidth: 2,
-          fill: '#fff',
-          style: { visibility: 'hidden' },
-        },
-      },
-      zIndex: 10,
-    },
-    left: {
-      position: { name: 'left' },
-      attrs: {
-        circle: {
-          r: 4,
-          magnet: true,
-          stroke: '#31d0c6',
-          strokeWidth: 2,
-          fill: '#fff',
-          style: { visibility: 'hidden' },
-        },
-      },
-      zIndex: 10,
-    },
-  };
-  const attrs = {
-    line: {
-      stroke: '#A2B1C3',
-      targetMarker: { name: 'block', width: 12, height: 8 },
-      strokeDasharray: '5 5',
-      strokeWidth: 1,
-    },
-  };
-  let nodes = data.nodes.map((item) => {
-    let node = { ...item };
-    node.ports.groups = groups;
-    node.parentKey = '1';
-
-    return node;
-  });
-  let edges = data.edges.map((item) => {
-    let edge = { ...item };
-    try {
-      edge.attrs = item.attr ? JSON.parse(item.attr) : attrs;
-    } catch (error) {
-      edge.attrs = attrs;
-    }
-    return edge;
-  });
-  return {
-    ...data,
-    nodes,
-    edges,
-  };
-};
-
 export default {
   namespace: 'flow',
   state: {
@@ -146,7 +56,7 @@ export default {
     templateList: [],
     depUserTree: [],
     simpleFlowDteail: '',
-    classify: []
+    classify: [],
   },
 
   effects: {
@@ -187,19 +97,15 @@ export default {
       }
     },
     *queryProcessFlows({ payload }, { call, put }) {
-      const data = yield call(queryProcessFlows, payload);
-      if (data && data.length > 0) {
-        yield put({
-          type: 'save',
-          payload: {
-            flowDetail: data[0].process_json
-              ? getFlowDetail(JSON.parse(data[0].process_json))
-              : { nodes: [], edges: [] },
-            formData: data[0].form_json ? JSON.parse(data[0].form_json) : [],
-            simpleFlowDteail: data[0].process_simple_json,
-          },
-        });
-      }
+      const { data } = yield call(queryProcessFlows, payload);
+      yield put({
+        type: 'save',
+        payload: {
+          flowDetail: data.flowDetail,
+          formData: data.formData,
+          simpleFlowDteail: data.simpleFlowDteail,
+        },
+      });
     },
     *saveAuditFlowInfo({ payload, callback }, { call, put }) {
       try {

src/services/boom.js

@@ -17,6 +17,96 @@ export async function addAudit(data) {
     data,
   });
 }
+
+const getFlowDetail = (data) => {
+  const groups = {
+    top: {
+      position: { name: 'top' },
+      attrs: {
+        circle: {
+          r: 4,
+          magnet: true,
+          stroke: '#31d0c6',
+          strokeWidth: 2,
+          fill: '#fff',
+          style: { visibility: 'hidden' },
+        },
+      },
+      zIndex: 10,
+    },
+    right: {
+      position: { name: 'right' },
+      attrs: {
+        circle: {
+          r: 4,
+          magnet: true,
+          stroke: '#31d0c6',
+          strokeWidth: 2,
+          fill: '#fff',
+          style: { visibility: 'hidden' },
+        },
+      },
+      zIndex: 10,
+    },
+    bottom: {
+      position: { name: 'bottom' },
+      attrs: {
+        circle: {
+          r: 4,
+          magnet: true,
+          stroke: '#31d0c6',
+          strokeWidth: 2,
+          fill: '#fff',
+          style: { visibility: 'hidden' },
+        },
+      },
+      zIndex: 10,
+    },
+    left: {
+      position: { name: 'left' },
+      attrs: {
+        circle: {
+          r: 4,
+          magnet: true,
+          stroke: '#31d0c6',
+          strokeWidth: 2,
+          fill: '#fff',
+          style: { visibility: 'hidden' },
+        },
+      },
+      zIndex: 10,
+    },
+  };
+  const attrs = {
+    line: {
+      stroke: '#A2B1C3',
+      targetMarker: { name: 'block', width: 12, height: 8 },
+      strokeDasharray: '5 5',
+      strokeWidth: 1,
+    },
+  };
+  let nodes = data.nodes.map((item) => {
+    let node = { ...item };
+    node.ports.groups = groups;
+    node.parentKey = '1';
+
+    return node;
+  });
+  let edges = data.edges.map((item) => {
+    let edge = { ...item };
+    try {
+      edge.attrs = item.attr ? JSON.parse(item.attr) : attrs;
+    } catch (error) {
+      edge.attrs = attrs;
+    }
+    return edge;
+  });
+  return {
+    ...data,
+    nodes,
+    edges,
+  };
+};
 export async function queryProcessFlows(params) {
   let res = await request(
     `/api/v1/purchase/process/get-flows?${stringify(params)}`,
@@ -24,7 +114,16 @@ export async function queryProcessFlows(params) {
       method: 'GET',
     },
   );
-  return res.data;
+  let data = res.data[0];
+  let item = {
+    ...data,
+    flowDetail: data.process_json
+      ? getFlowDetail(JSON.parse(data.process_json))
+      : { nodes: [], edges: [] },
+    formData: data.form_json ? JSON.parse(data.form_json) : [],
+    simpleFlowDteail: data.process_simple_json,
+  };
+  return { data: item };
 }
 export async function saveAuditFlowInfo(data) {
   return request(`/api/v1/purchase/flow/info`, {
@@ -373,7 +472,6 @@ export async function queryOSSData() {
 //   });
 // }
 
-
 // export async function queryRecordSheet(data) {
 //   return request(`/api/v1/purchase/record/sheet?${stringify(data)}`, {
 //     method: 'POST',