diff --git a/api/app/lib/controllers/workOrder/index.js b/api/app/lib/controllers/workOrder/index.js
index 4479687..4fe4164 100644
--- a/api/app/lib/controllers/workOrder/index.js
+++ b/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;
diff --git a/web/client/src/components/workflow/index.jsx b/web/client/src/components/workflow/index.jsx
index 12ad985..a1e8868 100644
--- a/web/client/src/components/workflow/index.jsx
+++ b/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 >
diff --git a/web/client/src/sections/workOrder/containers/jobOrder.jsx b/web/client/src/sections/workOrder/containers/jobOrder.jsx
index e318f37..21dfa5d 100644
--- a/web/client/src/sections/workOrder/containers/jobOrder.jsx
+++ b/web/client/src/sections/workOrder/containers/jobOrder.jsx
@@ -3,96 +3,104 @@ 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 className='work-order-container' style={{
-         display: 'grid', gridTemplateColumns: `repeat(auto-fit, minmax(340px, 1fr))`, gridAutoRows: `minmax(0, auto)`, gridGap: 12,
-      }}>
-         {
-            workflowProcess.map(p => {
-               return (
-                  <Card
-                     key={p.id}
-                     className='work-order-card'
-                     style={{ gridColumn: `span 1`, cursor: 'pointer' }}
-                     footerLine={true}
-                     footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
-                     footer={
-                        `创建时间：${moment(p.createTime || p.updateTime).format('YYYY-MM-DD HH:mm:ss')}`
-                     }
-                     onClick={() => {
-                        EmisRequest.get(EmisApiTable.getProcessByName, {
-                           name: decodeURIComponent(p.name),
-                           resource: p.id
-                        }).then(res => {
-                           console.log(res);
-                           if (res) {
-                              // if (res.deleted) {
-                              //    Notification.error({ title: '该表单流程已删除，请尝试退出账号重新登录或联系项企管理员' })
-                              // } else if (res.isEdited) {
-                              //    Notification.error({ title: '该表单流程已修改，请尝试退出账号重新登录或联系项企管理员' })
-                              // } else if (!res.isEnable) {
-                              //    Notification.error({ title: '该表单流程已停用，请尝试退出账号重新登录或联系项企管理员' })
-                              // } else 
-                              if (res.id) {
-                                 setLaunchProcessId(res.id)
-                                 setWorkflowModalVisible(true)
+      <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, index) => {
+                  return (
+                     <Card
+                        key={p.id}
+                        className='work-order-card'
+                        style={{ gridColumn: `span 1`, cursor: 'pointer' }}
+                        footerLine={true}
+                        footerStyle={{ display: 'flex', justifyContent: 'flex-end' }}
+                        footer={
+                           `创建时间：${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 => {
+                              setFormStateRequestingIndex(false)
+                              if (res) {
+                                 // if (res.deleted) {
+                                 //    Notification.error({ title: '该表单流程已删除，请尝试退出账号重新登录或联系项企管理员' })
+                                 // } else if (res.isEdited) {
+                                 //    Notification.error({ title: '该表单流程已修改，请尝试退出账号重新登录或联系项企管理员' })
+                                 // } else if (!res.isEnable) {
+                                 //    Notification.error({ title: '该表单流程已停用，请尝试退出账号重新登录或联系项企管理员' })
+                                 // } else 
+                                 if (res.id) {
+                                    setLaunchProcessId(res.id)
+                                    setWorkflowModalVisible(true)
+                                 }
+                              } else {
+                                 Notification.error({ title: `获取指定流程失败` });
                               }
-                           } else {
-                              Notification.error({ title: `获取指定流程失败` });
-                           }
-                        })
-                     }}
-                  >
-                     <div>
-                        <Meta
-                           title={p.name}
-                           // description="全面、易用、优质"
-                           avatar={
-                              <IconArticle style={{ fontSize: 42 }} />
-                           }
-                        />
-                     </div>
-                  </Card>
-               )
-            })
-         }
-         {/* <WorkflowModal
+                           })
+                        }}
+                     >
+                        <div>
+                           <Meta
+                              title={
+                                 <span>{p.name}<Spin style={{ position: 'relative', top: 6, left: 6 }} spinning={formStateRequestingIndex == index + 1} /></span>
+                              }
+                              avatar={
+                                 <IconArticle style={{ fontSize: 42 }} />
+                              }
+                           />
+                        </div>
+                     </Card>
+                  )
+               })
+            }
+         </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
    };
 }
 
diff --git a/web/client/src/utils/webapi.js b/web/client/src/utils/webapi.js
index 2c3261a..b9999ec 100644
--- a/web/client/src/utils/webapi.js
+++ b/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 = {