chore: Draw ui

src/views/workflow/task/TaskForm.vue

@@ -1,35 +1,85 @@
 <template>
-  <ALayoutContent class="p-10">
+  <div :class="prefixCls">
-    <h4 class="text-center">{{ state.formTitle }}</h4>
+    <ALayoutContent class="m-10">
-    <ATable v-model:activeKey="state.taskSelectedTab">
+      <h4 class="text-center">{{ state.formTitle }}</h4>
-      <ATabPane key="formInfo">
+      <ATable v-model:activeKey="state.taskSelectedTab"
-        <template #tab>
+              class="bg-white"
-          <span>
+              :tab-bar-style="{ 'padding-left': '13px' }"
-            <Icon icon="fa6-solid:file-lines"/>表单信息
+      >
-          </span>
+        <ATabPane key="formInfo">
-        </template>
+          <template #tab>
-        <!-- 动态表单:内置使用枇杷表单设计器 -->
+            <span>
-        <workflow-preview-form v-if="state.formType !== '2'"
+              <Icon icon="fa6-solid:file-lines"/>表单信息
-                               ref="form"
+            </span>
-                               :taskFormData="state.taskFormData"
+          </template>
-        />
+          <!-- 动态表单:内置使用枇杷表单设计器 -->
-        <!-- 外置表单:内置使用用户自定义的vue页面,手动填写页面路径即可 -->
+          <workflow-preview-form v-if="state.formType !== '2'"
-        <component :is="state.formPath"
+                                 ref="form"
-                   v-if="state.formType === '2'"
+                                 :taskFormData="state.taskFormData"
-                   ref="form"
+          />
-                   :formReadOnly="state.formReadOnly"
+          <!-- 外置表单:内置使用用户自定义的vue页面,手动填写页面路径即可 -->
-                   :businessId="state.businessId"
+          <component :is="state.formPath"
-        />
+                     v-if="state.formType === '2'"
-      </ATabPane>
+                     ref="form"
-      <ATabPane key="processChart">
+                     :formReadOnly="state.formReadOnly"
-        <template #tab>
+                     :businessId="state.businessId"
-          <span>
+          />
-            <Icon icon="fa-solid:image"/>流程图
+        </ATabPane>
-          </span>
+        <ATabPane key="processChart">
-        </template>
+          <template #tab>
-      </ATabPane>
+            <span>
-    </ATable>
+              <Icon icon="fa-solid:image"/>流程图
-  </ALayoutContent>
+            </span>
+          </template>
+        </ATabPane>
+      </ATable>
+      <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' } }"
+          :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>
+        </AForm>
+      </a-card>
+    </ALayoutContent>
+    <footer class="workflow-form__footer">
+      <a-button size="large" type="primary">审批</a-button>
+      <a-button size="large" type="primary" danger>驳回</a-button>
+    </footer>
+  </div>
 </template>
 <script lang="ts" setup>
   /**
@@ -39,7 +89,7 @@
    * author wangxiang4
    */
   import { reactive, onActivated, unref, nextTick, ref } from 'vue';
-  import { LayoutContent, Tabs } from 'ant-design-vue';
+  import { Input, LayoutContent, Tabs, Form, Row, 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';
@@ -54,6 +104,8 @@
   import WorkflowPreviewForm from './WorkflowPreviewForm.vue';
   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';
 
   /** 类型规范统一声明定义区域 */
   interface WindowState {
@@ -112,7 +164,14 @@
   const ALayoutContent = LayoutContent;
   const ATable = Tabs;
   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 state = reactive<WindowState>({
     formTitle: '',
     formKey: '',
@@ -469,5 +528,29 @@
     }
   }
 
-
 </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;
+        background: #fff;
+        display: flex;
+        gap: 11px;
+        flex-flow: row nowrap;
+        justify-content: center;
+        align-items: center;
+        -webkit-box-shadow: 0 -3px 5px 0 rgba(0,0,0,.12);
+        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;
+      }
+    }
+  }
+</style>