Browse Source

feature 1001632

另存为报告模板名称必填,为空时给提示
Kevin Jiang 2 years ago
parent
commit
0e86c365ec
1 changed files with 22 additions and 7 deletions
  1. 22 7
      src/views/report/components/TemplateSaveModal.vue

+ 22 - 7
src/views/report/components/TemplateSaveModal.vue

@@ -3,15 +3,20 @@ import { onMounted, reactive, ref } from "vue"
 import type { ReportTemplateModal } from "../reportComponent.types";
 import * as reportTemplateService from "@/services/reportTemplate.service"
 import { CompLog } from "@/libs/log.lib";
-import type { SelectProps } from "ant-design-vue";
+import { message, type FormInstance, type SelectProps } from "ant-design-vue";
 
 const logError = CompLog.logErr("TemplateSaveModal")
 
+// 弹窗组件显示状态
 const visible = ref(false)
-
+// 确定按钮加载状态
 const saving = ref(false);
-
+// 标签值列表
 const tagsOptions = ref<SelectProps['options']>([]);
+// 表单ref
+const templateSaveModalRef = ref<FormInstance>();
+// 模板名称输入框ref
+const templateNameElem = ref<HTMLInputElement | null>(null)
 
 const emits = defineEmits<{
   (e: "ok", data: ReportTemplateModal): void
@@ -26,7 +31,15 @@ function onTagsChange() {
   formState.tags = formState.tags.map((item) => item.trim())
 }
 
-function onOk() {
+async function onOk() {
+  const templateName = (formState.templateName || '').trim()
+  formState.templateName = templateName
+  templateSaveModalRef.value?.validateFields()
+  if (templateName == '') {
+    templateNameElem.value?.focus()
+    message.warning("请填写模板名称!")
+    return
+  }
   saving.value = true;
   emits("ok", formState);
 }
@@ -39,6 +52,7 @@ onMounted(() => {
 
 function hide() {
   visible.value = false
+  saving.value = false
 }
 
 function complete() {
@@ -58,6 +72,7 @@ defineExpose({
     <a-form
       :model="formState"
       name="templateSaveModal"
+      ref="templateSaveModalRef"
       :label-col="{ span: 5 }"
       :wrapper-col="{ span: 19 }"
       autocomplete="off"
@@ -68,7 +83,7 @@ defineExpose({
         name="templateName"
         :rules="[{ required: true, message: '请输入模板名称!' }]"
       >
-        <a-input v-model:value="formState.templateName" />
+        <a-input v-model:value="formState.templateName" ref="templateNameElem" />
       </a-form-item>
 
       <a-form-item
@@ -79,10 +94,10 @@ defineExpose({
         <a-select
           v-model:value="formState.tags"
           mode="tags"
-          :token-separators="[',', ',']"
+          :token-separators="[',', ',', ' ']"
           @change="onTagsChange"
           :options="tagsOptions"
-          placeholder="模板标签,输入逗号或者回车自动分割"
+          placeholder="模板标签,输入逗号、空格或者回车自动分割"
         ></a-select>
       </a-form-item>
     </a-form>