fix(工作报告): 修复工作报告存在的若干问题。

feat(加班申请): 支持批量审批。

src/views/personal-center/work-report/shared/components/action-dialog.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { computed, reactive, watch } from 'vue';
+import { computed, nextTick, reactive, watch } from 'vue';
 import dayjs from 'dayjs';
+import { useForm, useFormRules } from '@/hooks/common/form';
 import BusinessFormDialog from '@/components/custom/business-form-dialog.vue';
 import BusinessFormSection from '@/components/custom/business-form-section.vue';
 import { WORK_REPORT_TYPE_LABEL, type WorkReportType } from '../types';
@@ -33,6 +34,9 @@ const emit = defineEmits<{
   ): void;
 }>();
 
+const { formRef, validate } = useForm();
+const { createRequiredRule } = useFormRules();
+
 const reasonModel = reactive<Api.WorkReport.Common.StatusActionParams>({
   reason: ''
 });
@@ -72,12 +76,35 @@ const title = computed(() => {
 });
 
 const preset = computed(() => (isMonthlyApprove.value ? 'lg' : 'sm'));
+const rejectOpinionRequired = computed(() => isCommonApprove.value && commonApprovalModel.conclusion === 'reject');
+const opinionLabel = computed(() => (rejectOpinionRequired.value ? '退回原因' : '审批意见'));
+const opinionPlaceholder = computed(() =>
+  rejectOpinionRequired.value ? `请输入${opinionLabel.value}` : '可填写审批意见'
+);
 const confirmText = computed(() => {
   if (isCommonApprove.value) return '确认提交';
   if (props.actionType === 'approve') return '通过';
   return '退回';
 });
 const confirmDisabled = computed(() => isCommonApprove.value && !commonApprovalModel.conclusion);
+const commonRules = computed(() => ({
+  opinion: rejectOpinionRequired.value
+    ? [
+        createRequiredRule(`请输入${opinionLabel.value}`),
+        {
+          validator: (_rule, value: string, callback) => {
+            if (!value?.trim()) {
+              callback(new Error(`请输入${opinionLabel.value}`));
+              return;
+            }
+
+            callback();
+          },
+          trigger: 'blur'
+        }
+      ]
+    : []
+}));
 
 watch(visible, isVisible => {
   if (!isVisible) return;
@@ -106,16 +133,36 @@ watch(visible, isVisible => {
   }
 });
 
-function handleSubmit() {
+watch(
+  () => visible.value,
+  async isVisible => {
+    if (!isVisible || !isCommonApprove.value) return;
+
+    await nextTick();
+    formRef.value?.clearValidate();
+  }
+);
+
+watch(rejectOpinionRequired, async () => {
+  if (!visible.value || !isCommonApprove.value) return;
+
+  await nextTick();
+  formRef.value?.clearValidate('opinion');
+});
+
+async function handleSubmit() {
   if (isCommonApprove.value) {
     if (!commonApprovalModel.conclusion) {
       window.$message?.warning('请选择审批结论');
       return;
     }
+
+    await validate();
+
     emit(
       'submit',
       {
-        reason: commonApprovalModel.opinion || (commonApprovalModel.conclusion === 'approve' ? '通过' : '不通过')
+        reason: commonApprovalModel.opinion.trim() || (commonApprovalModel.conclusion === 'approve' ? '通过' : '退回')
       },
       commonApprovalModel.conclusion
     );
@@ -176,14 +223,29 @@ function handleSubmit() {
                 <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
                 <path d="M6 6L10 10M10 6L6 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
               </svg>
-              不通过
+              退回
             </button>
           </div>
         </div>
-        <div class="audit-field">
-          <label>审批意见</label>
-          <ElInput v-model="commonApprovalModel.opinion" type="textarea" :rows="3" placeholder="请输入审批意见" />
-        </div>
+
+        <ElForm
+          ref="formRef"
+          :model="commonApprovalModel"
+          :rules="commonRules"
+          label-position="top"
+          :validate-on-rule-change="false"
+        >
+          <ElFormItem :label="opinionLabel" prop="opinion">
+            <ElInput
+              v-model="commonApprovalModel.opinion"
+              type="textarea"
+              :rows="5"
+              maxlength="1000"
+              show-word-limit
+              :placeholder="opinionPlaceholder"
+            />
+          </ElFormItem>
+        </ElForm>
       </div>
     </template>