|
|
@@ -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>
|