From 38f8b9445bbff78f920e66f5778bfb91979e9bf2 Mon Sep 17 00:00:00 2001
From: wangxiang <1827945911@qq.com>
Date: Thu, 19 Oct 2023 15:03:54 +0800
Subject: [PATCH] chore: work form fixe

---
 .../AMap/src/AMapDesigner/index.vue           |   2 +-
 src/views/workflow/task/TaskForm.vue          | 108 +++++++++++-------
 2 files changed, 67 insertions(+), 43 deletions(-)

diff --git a/src/components/AMap/src/AMapDesigner/index.vue b/src/components/AMap/src/AMapDesigner/index.vue
index 2140f3e..70ffeaf 100644
--- a/src/components/AMap/src/AMapDesigner/index.vue
+++ b/src/components/AMap/src/AMapDesigner/index.vue
@@ -879,7 +879,7 @@
 
 // 地图设计器总样式
 .amap-designer {
-  @toolbarHeight: v-bind('mapState.toggleOperatePanelClass.toolbarHeight + "px"');;
+  @toolbarHeight: v-bind('mapState.toggleOperatePanelClass.toolbarHeight + "px"');
   @siderWidth: v-bind('mapState.toggleOperatePanelClass.siderWidth + "px"');
   @borderColor: #e0e0e0;
 
diff --git a/src/views/workflow/task/TaskForm.vue b/src/views/workflow/task/TaskForm.vue
index 80d517f..8e2dd12 100644
--- a/src/views/workflow/task/TaskForm.vue
+++ b/src/views/workflow/task/TaskForm.vue
@@ -36,46 +36,58 @@
       <a-card v-if="!state.processInsId || state.taskId || state.status === 'reStart'" style="margin-top:10px;margin-bottom:66px;">
         <AForm
           ref="auditForm"
-          :labelCol="{ style: { width: '120px' } }"
+          :labelCol="{ style: { width: '90px' } }"
           :wrapperCol="{ style: { width: '100%' } }"
           :model="state.auditForm"
           :scrollToFirstError="true"
         >
-          <AFormItem v-if="!state.processInsId || state.status === 'reStart'" label="流程标题" name="formTitle">
-            <a-input v-model:value="state.formTitle" placeholder="请输入流程标题"/>
-          </AFormItem>
-          <AFormItem v-if="state.taskId" label="审批信息" name="message">
-            <ATextarea
-              v-model:value="state.auditForm.message"
-              placeholder="请输入审批意见"
-              :rows="3"
-              allowClear
-            />
-          </AFormItem>
-          <AFormItem name="isCC">
-            <a-checkbox v-model:checked="state.isCC">是否抄送</a-checkbox>
-          </AFormItem>
-          <AFormItem v-if="state.isCC"
-                     label="抄送给"
-                     name="userIds"
-                     :rules="[{required: true, message: '用户不能为空', validateTrigger: 'blur'}]"
-          >
-            <a-select v-model:value="state.auditForm.userIds" allowClear/>
-          </AFormItem>
-          <AFormItem name="isAssign">
-            <a-checkbox v-model:checked="state.isAssign">指定下一步处理者(不设置就使用默认处理人)</a-checkbox>
-          </AFormItem>
-          <AFormItem v-if="state.isAssign"
-                     label="指定"
-                     name="assignee"
-                     :rules="[{required: true, message: '用户不能为空', validateTrigger: 'blur'}]"
-          >
-            <a-select v-model:value="state.auditForm.userIds" allowClear/>
-          </AFormItem>
+          <ACol :span="16">
+            <AFormItem v-if="!state.processInsId || state.status === 'reStart'" label="流程标题" name="formTitle">
+              <a-input v-model:value="state.formTitle" placeholder="请输入流程标题"/>
+            </AFormItem>
+          </ACol>
+          <ACol :span="16">
+            <AFormItem v-if="state.taskId" label="审批信息" name="message">
+              <ATextarea
+                v-model:value="state.auditForm.message"
+                placeholder="请输入审批意见"
+                :rows="3"
+                allowClear
+              />
+            </AFormItem>
+          </ACol>
+          <ACol :span="16">
+            <AFormItem label=" " :colon="false" name="isCC">
+              <a-checkbox v-model:checked="state.isCC">是否抄送</a-checkbox>
+            </AFormItem>
+          </ACol>
+          <ACol :span="16">
+            <AFormItem v-if="state.isCC"
+                       label="抄送给"
+                       name="userIds"
+                       :rules="[{required: true, message: '用户不能为空', validateTrigger: 'blur'}]"
+            >
+              <a-select v-model:value="state.auditForm.userIds" allowClear/>
+            </AFormItem>
+          </ACol>
+          <ACol :span="16">
+            <AFormItem label=" " :colon="false" name="isAssign">
+              <a-checkbox v-model:checked="state.isAssign">指定下一步处理者(不设置就使用默认处理人)</a-checkbox>
+            </AFormItem>
+          </ACol>
+          <ACol :span="16">
+            <AFormItem v-if="state.isAssign"
+                       label="指定"
+                       name="assignee"
+                       :rules="[{required: true, message: '用户不能为空', validateTrigger: 'blur'}]"
+            >
+              <a-select v-model:value="state.auditForm.userIds" allowClear/>
+            </AFormItem>
+          </ACol>
         </AForm>
       </a-card>
     </ALayoutContent>
-    <footer class="workflow-form__footer">
+    <footer class="workflow-form__footer" :style="getWrapFormFooterStyle">
       <a-button size="large" type="primary">审批</a-button>
       <a-button size="large" type="primary" danger>驳回</a-button>
     </footer>
@@ -88,8 +100,8 @@
    * Copyright © 2023-2023 <a href="https://godolphinx.org">海豚生态开源社区</a> All rights reserved.
    * author wangxiang4
    */
-  import { reactive, onActivated, unref, nextTick, ref } from 'vue';
-  import { Input, LayoutContent, Tabs, Form, Row, Col } from 'ant-design-vue';
+  import { reactive, onActivated, unref, nextTick, ref, computed, CSSProperties } from 'vue';
+  import { Input, LayoutContent, Tabs, Form, Col } from 'ant-design-vue';
   import type { FormProperty } from '/@/api/platform/workflow/entity/formProperty';
   import type { Workflow } from '/@/api/platform/workflow/entity/workflow';
   import type { WorkflowButton } from '/@/api/platform/workflow/extension/entity/workflowButton';
@@ -105,7 +117,8 @@
   import { getProcessStartEventFormData, getTaskFormData } from '/@/api/platform/workflow/controller/form';
   import { findByDefIdAndTaskId } from '/@/api/platform/workflow/extension/controller/activityExtensionData';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { usePageContext } from '/@/hooks/component/usePageContext';
+  import { useAppInject } from '/@/hooks/web/useAppInject';
+  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
 
   /** 类型规范统一声明定义区域 */
   interface WindowState {
@@ -166,12 +179,12 @@
   const ATabPane = Tabs.TabPane;
   const AForm = Form;
   const AFormItem = Form.Item;
-  const ARow = Row;
   const ACol = Col;
   const ATextarea = Input.TextArea;
 
   const { prefixCls } = useDesign('task-form');
-  const { contentHeight } = usePageContext();
+  const { getIsMobile } = useAppInject();
+  const { getCalcContentWidth } = useMenuSetting();
   const state = reactive<WindowState>({
     formTitle: '',
     formKey: '',
@@ -528,15 +541,17 @@
     }
   }
 
+  const getWrapFormFooterStyle = computed((): CSSProperties | Recordable => {
+    return {
+      width: unref(getIsMobile) ? '100%' : unref(getCalcContentWidth)
+    };
+  });
+
 </script>
 <style lang="less" scoped>
   @prefix-cls: ~'@{namespace}-task-form';
 
   .@{prefix-cls} {
-    display: flex;
-    width: 100%;
-    min-height: 100%;
-    flex-direction: column;
     .workflow-form {
       &__footer{
         height: 66px;
@@ -550,7 +565,16 @@
         box-shadow: 0 -3px 5px 0 rgba(0,0,0,.12);
         -webkit-transition: inline-block 0.3s, left 0.3s, width 0.3s, margin-left 0.3s, font-size 0.3s;
         transition: inline-block 0.3s, left 0.3s, width 0.3s, margin-left 0.3s, font-size 0.3s;
+        position: fixed;
+        bottom: 0;
+        z-index: @page-footer-z-index;
       }
     }
   }
+
+  .ant-form {
+    .ant-form-item {
+      margin-bottom: 15px;
+    }
+  }
 </style>