🎨 优化审核表单位置固定方便填写

src/pages/collect/assessment/evaluation-form-review.vue

@@ -29,7 +29,7 @@
               :readonly="true"
             />
             <a-divider />
-            <a-card title="审核提交" size="small">
+            <a-card title="审核提交" size="small" class="review-submit-card">
               <a-alert
                 v-if="!canSubmitReview"
                 type="warning"
@@ -38,30 +38,44 @@
                 message="当前账号用户组无权在此环节审核"
                 :description="`仅项目保护单位(9)、县（区）文旅部门(5)、设区市文旅部门/省非遗中心(10)、省文化和旅游厅(11) 可提交。`"
               />
-              <a-form layout="vertical" class="max-w-xl">
-                <a-form-item :label="`审核环节：${reviewLevelLabel}`">
-                  <a-select
-                    v-model:value="reviewOpinion"
-                    allow-clear
-                    placeholder="请选择审核意见"
-                    :options="opinionSelectOptions"
-                  />
-                </a-form-item>
-                <a-form-item label="评分">
-                  <a-input-number
-                    v-model:value="reviewPoints"
-                    :min="0"
-                    :max="100"
-                    class="w-full"
-                    placeholder="可选"
-                  />
-                </a-form-item>
-                <a-form-item label="提交后进度">
-                  <a-input :value="progressSubmitLabel" readonly />
-                </a-form-item>
-                <a-form-item>
-                  <a-space>
+              <a-form layout="vertical" size="middle">
+                <div class="flex row w-full gap-3">
+                  <div class="flex flex-col flex-1">
+                    <a-form-item required :label="`审核环节：${reviewLevelLabel}`">
+                      <a-select
+                        v-model:value="reviewOpinion"
+                        allow-clear
+                        placeholder="请选择审核意见"
+                        :options="opinionSelectOptions"
+                      />
+                    </a-form-item>
+                    <a-form-item label="评分">
+                      <a-input-number
+                        v-model:value="reviewPoints"
+                        :min="0"
+                        :max="100"
+                        class="w-full"
+                        placeholder="可选"
+                      />
+                    </a-form-item>
+                  </div>
+                  <div class="flex flex-col flex-1">
+                    <a-form-item required label="回退原因">
+                      <a-textarea
+                        v-model:value="rejectReason"
+                        allow-clear
+                        placeholder="请输入回退原因"
+                        rows="5"
+                        max-length="500"
+                        show-count
+                      />
+                    </a-form-item>
+                  </div>
+                </div>
+                <div class="flex row w-full gap-3">
+                  <div class="flex flex-col flex-1">
                     <a-button
+                      block
                       type="primary"
                       :loading="submitLoading"
                       :disabled="!canSubmitReview"
@@ -69,7 +83,10 @@
                     >
                       提交审核
                     </a-button>
+                  </div>
+                  <div class="flex flex-col flex-1">
                     <a-button
+                      block
                       danger
                       :loading="rejectLoading"
                       :disabled="!canSubmitReview"
@@ -77,8 +94,8 @@
                     >
                       回退
                     </a-button>
-                  </a-space>
-                </a-form-item>
+                  </div>
+                </div>
               </a-form>
             </a-card>
           </div>
@@ -91,7 +108,7 @@
 <script setup lang="ts">
 import { computed, h, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { Input, message, Modal } from 'ant-design-vue';
+import { message, Modal } from 'ant-design-vue';
 import { RequestApiError } from '@imengyu/imengyu-utils';
 import { ArrowLeftOutlined } from '@ant-design/icons-vue';
 import AssessmentContentApi, {
@@ -133,6 +150,7 @@ const submitLoading = ref(false);
 const rejectLoading = ref(false);
 const reviewOpinion = ref<number | null>(null);
 const reviewPoints = ref<number | null>(null);
+const rejectReason = ref<string | null>(null);
 
 /** 用户组 → 本环节提交后的 progress */
 const GROUP_TO_REVIEW_PROGRESS: Record<number, number> = {
@@ -273,40 +291,6 @@ onMounted(() => {
 /** 回退后 progress：退回至上一环节 */
 const rejectTargetProgress = computed(() => Math.max(1, reviewProgress.value - 1));
 
-function promptRejectReason() {
-  const draft = ref('');
-  return new Promise<string | null>((resolve) => {
-    Modal.confirm({
-      title: '回退自查评估表',
-      okText: '确认回退',
-      cancelText: '取消',
-      okType: 'danger',
-      width: 800,
-      content: () => h(Input.TextArea, {
-        value: draft.value,
-        rows: 4,
-        maxlength: 500,
-        showCount: true,
-        placeholder: '请输入回退原因（必填）',
-        'onUpdate:value': (v: string) => {
-          draft.value = v ?? '';
-        },
-      }),
-      onOk: () => {
-        const reason = draft.value.trim();
-        if (!reason) {
-          message.warning('请输入回退原因');
-          return Promise.reject();
-        }
-        resolve(reason);
-      },
-      onCancel: () => {
-        resolve(null);
-      },
-    });
-  });
-}
-
 async function submitReject() {
   const f = currentForm.value;
   if (!f?.id) {
@@ -317,9 +301,11 @@ async function submitReject() {
     message.warning('当前账号用户组无权回退');
     return;
   }
-  const rejectReason = await promptRejectReason();
-  if (rejectReason === null)
+  const reason = (rejectReason.value ?? '').trim();
+  if (!reason) {
+    message.warning('请输入回退原因');
     return;
+  }
   const t = reviewProgress.value;
   try {
     rejectLoading.value = true;
@@ -327,7 +313,7 @@ async function submitReject() {
       id: f.id,
       progress: rejectTargetProgress.value,
       rejectType: t,
-      rejectReason,
+      rejectReason: reason,
     });
     message.success('已回退');
     router.back();
@@ -375,3 +361,16 @@ async function submitReview() {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.review-submit-card {
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+
+  :deep(.ant-form-item) {
+    margin-bottom: 0!important;
+  }
+}
+</style>