表单验证状态展示

api/app/lib/controllers/workOrder/index.js

@@ -21,6 +21,7 @@ async function getEnabledWorkflowProcess (ctx) {
          WHERE 
             workflow_process.deleted = 0
             AND workflow_process.is_enable = 1
+         order by workflow_process.update_time desc
       `).toPromise()
 
       ctx.status = 200;

web/client/src/components/workflow/index.jsx

@@ -2,9 +2,9 @@
 
 import React from 'react';
 import { connect } from 'react-redux';
-import { Modal, Spin, Notification, Row } from '@douyinfe/semi-ui';
+import { Modal, Spin, Notification, Row, Space, Button } from '@douyinfe/semi-ui';
 import { RouteTable } from '../../utils/webapi';
-import { RouteRequest } from '@peace/utils';
+import { EmisRequest, EmisApiTable } from '$utils';
 import { useState } from 'react';
 import { useEffect } from 'react';
 import { IconClose } from '@douyinfe/semi-icons';
@@ -14,7 +14,7 @@ import './index.less'
 const { confirm } = Modal;
 
 const WorkFlowModal = (props) => {
-   const { successCallBack = () => { }, title, visible, clientHeight, postData, processId, user, dispatch, webEmis, webOa } = props;
+   const { successCallBack = () => { }, title, visible, clientHeight, postData, processId, user, dispatch, webEmis, webOa, onCancel } = props;
    const [loading, setLoading] = useState(true);
    const [ifShowMessage, setIfShowMessage] = useState(true);
    const [customVisible, setCustomVisible] = useState(false);
@@ -25,7 +25,6 @@ const WorkFlowModal = (props) => {
       if (draftId) {
          setCustomVisible(false);
       } else {
-         const { onCancel } = props;
          onCancel && onCancel();
          setLoading(false);
       }
@@ -60,18 +59,13 @@ const WorkFlowModal = (props) => {
    }
 
    const handelDeny = () => {
-      // dispatch(delDraft(draftId)).then(res => {
-      //    if (res.success) {
-      //       Notification.success({title:'删除草稿成功'});
-      //       const { onCancel } = props;
-      //       onCancel && onCancel();
-      //       setLoading(false);
-      //       setCustomVisible(false);
-      //       setDraftId(null);
-      //    } else {
-      //       Notification.error({title:'删除草稿失败，请联系管理员'});
-      //    }
-      // })
+      EmisRequest.delete(EmisApiTable.delDraftUrl.replace('{draftId}', draftId)).then(res => {
+         Notification.success({ title: '删除草稿成功' });
+         onCancel && onCancel();
+         setLoading(false);
+         setCustomVisible(false);
+         setDraftId(null);
+      })
    }
 
    const cancel = () => {
@@ -84,6 +78,7 @@ const WorkFlowModal = (props) => {
             let data = JSON.parse(event.data);
             const { type, isSaveDraft, setIntervalSave, draftId, msg } = data;
             if (msg) {
+               console.log(msg);
                Notification.success({ title: msg })
             }
             setDraftId(draftId);
@@ -109,7 +104,6 @@ const WorkFlowModal = (props) => {
       }
       //监听message事件
       window.addEventListener('message', receiveMessageFromIndex, false);
-
    }, [])
 
    console.log(webEmis, processId);
@@ -124,7 +118,7 @@ const WorkFlowModal = (props) => {
             hasCancel={false}
             footer={null}
             wrapClassName='process_modal_wrap'
-            onCancel={showConfirm}
+         // onCancel={showConfirm}
          >
             <Row>
                <div className='workflow-body'>
@@ -158,16 +152,27 @@ const WorkFlowModal = (props) => {
                   </div>
                </div>
                {
-                  customVisible ? <div className='modalBox'>
-                     <div className='modal'>
-                        <p className='content'>此表单已保存为草稿，是否需要保留</p>
-                        <ul className='btn'>
-                           <li className='confirm' onClick={() => handelOk()}>是</li>
-                           <li className='deny' onClick={() => handelDeny()}>否</li>
-                           <li className='cancel' onClick={() => cancel()}>取消</li>
-                        </ul>
-                     </div>
-                  </div> : ''
+                  customVisible ?
+                     <Modal
+                        title="此表单已保存为草稿，是否需要保留"
+                        visible={customVisible}
+                        footer={
+                           <Space>
+                              <Button type="primary" onClick={() => handelOk()}>
+                                 是
+                              </Button>
+                              <Button type="primary" onClick={() => handelDeny()}>
+                                 否
+                              </Button>
+                              <Button type="primary" onClick={() => cancel()}>
+                                 取消
+                              </Button>
+                           </Space>
+
+                        }
+                     >
+                     </Modal>
+                     : ''
                }
             </Row>
          </Modal >

web/client/src/sections/workOrder/containers/jobOrder.jsx

@@ -3,28 +3,30 @@ import { connect } from 'react-redux';
 import moment from 'moment';
 import { WorkflowModal, WorkFlowViewModal } from "$components"
 import { EmisRequest, EmisApiTable } from "$utils"
-import { Card, Notification, Space, Button } from '@douyinfe/semi-ui';
+import { Card, Notification, Space, Button, Spin } from '@douyinfe/semi-ui';
 import { IconArticle } from '@douyinfe/semi-icons';
 import '../style.less'
 
 const { Meta } = Card;
 
 const JobOrder = (props) => {
-   const { dispatch, actions, user, workflowProcess } = props
+   const { dispatch, actions, user, workflowProcess, clientHeight } = props
    const { workOrder } = actions
    const [workflowModalVisible, setWorkflowModalVisible] = useState(false)
    const [launchProcessId, setLaunchProcessId] = useState(null)
+   const [formStateRequestingIndex, setFormStateRequestingIndex] = useState(false)
 
    useEffect(() => {
       dispatch(workOrder.getEnabledWorkflowProcess())
    }, [])
 
    return (
+      <div>
          <div className='work-order-container' style={{
             display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(340px, 1fr))`, gridAutoRows: `minmax(0, auto)`, gridGap: 12,
          }}>
             {
-            workflowProcess.map(p => {
+               workflowProcess.map((p, index) => {
                   return (
                      <Card
                         key={p.id}
@@ -36,11 +38,13 @@ const JobOrder = (props) => {
                            `创建时间：${moment(p.createTime || p.updateTime).format('YYYY-MM-DD HH:mm:ss')}`
                         }
                         onClick={() => {
+                           if (formStateRequestingIndex) return;
+                           setFormStateRequestingIndex(index + 1)
                            EmisRequest.get(EmisApiTable.getProcessByName, {
                               name: decodeURIComponent(p.name),
                               resource: p.id
                            }).then(res => {
-                           console.log(res);
+                              setFormStateRequestingIndex(false)
                               if (res) {
                                  // if (res.deleted) {
                                  //    Notification.error({ title: '该表单流程已删除，请尝试退出账号重新登录或联系项企管理员' })
@@ -61,8 +65,9 @@ const JobOrder = (props) => {
                      >
                         <div>
                            <Meta
-                           title={p.name}
-                           // description="全面、易用、优质"
+                              title={
+                                 <span>{p.name}<Spin style={{ position: 'relative', top: 6, left: 6 }} spinning={formStateRequestingIndex == index + 1} /></span>
+                              }
                               avatar={
                                  <IconArticle style={{ fontSize: 42 }} />
                               }
@@ -72,27 +77,30 @@ const JobOrder = (props) => {
                   )
                })
             }
-         {/* <WorkflowModal
+         </div>
+         <WorkflowModal
             visible={workflowModalVisible}
             title={''}
             processId={launchProcessId}
             onCancel={() => { setWorkflowModalVisible(false) }}
             successCallBack={() => { setWorkflowModalVisible(false) }}
-         /> */}
-         <WorkFlowViewModal
+         />
+         {/* <WorkFlowViewModal
             visible={workflowModalVisible}
             processId={launchProcessId}
-         />
+         /> */}
       </div>
    )
 }
 
 function mapStateToProps (state) {
    const { auth, global, workflowProcess } = state;
+   console.log(global);
    return {
       user: auth.user,
       actions: global.actions,
-      workflowProcess: workflowProcess.data || []
+      workflowProcess: workflowProcess.data || [],
+      clientHeight: global.clientHeight
    };
 }
 

web/client/src/utils/webapi.js

@@ -86,6 +86,8 @@ export const ApiTable = {
 export const EmisApiTable = {
    //通过流程名称查找指定流程
    getProcessByName: 'workflow/process/name',
+   //删除草稿
+   delDraftUrl: 'process/drafts/{draftId}',
 }
 
 export const RouteTable = {