fix: unable to manually fill in the publish time (#5472)

#### What type of PR is this?

/kind bug
/area ui
/milestone 2.14.x

#### What this PR does / why we need it:

解决文章、页面中无法手动填写发布日期的问题

#### How to test it?

测试文章设置与页面设置中的发布日期是否能够使用键盘填写。

需要同步测试其他设置项是否正常。

#### Which issue(s) this PR fixes:

Fixes #5389 

#### Does this PR introduce a user-facing change?
```release-note
解决文章设置及页面设置中无法手动填写发布日期的问题
```
pull/5511/head
Takagi 2024-03-14 13:04:07 +08:00 committed by GitHub
parent 820c1038db
commit 69c080a268
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 32 deletions

View File

@ -6,7 +6,7 @@ import {
VModal,
VSpace,
} from "@halo-dev/components";
import { computed, nextTick, ref, watchEffect } from "vue";
import { computed, nextTick, ref, toRaw, watch } from "vue";
import type { SinglePage } from "@halo-dev/api-client";
import { cloneDeep } from "lodash-es";
import { apiClient } from "@/utils/api-client";
@ -76,6 +76,7 @@ const saving = ref(false);
const publishing = ref(false);
const publishCanceling = ref(false);
const submitType = ref<"publish" | "save">();
const publishTime = ref<string | undefined>(undefined);
const isUpdateMode = computed(() => {
return !!formState.value.metadata.creationTimestamp;
@ -247,26 +248,26 @@ const handleUnpublish = async () => {
}
};
watchEffect(() => {
if (props.singlePage) {
formState.value = cloneDeep(props.singlePage);
watch(
() => props.singlePage,
(value) => {
if (value) {
formState.value = toRaw(value);
publishTime.value = toDatetimeLocal(formState.value.spec.publishTime);
}
}
});
);
watch(
() => publishTime.value,
(value) => {
formState.value.spec.publishTime = value ? toISOString(value) : undefined;
}
);
// custom templates
const { templates } = useThemeCustomTemplates("page");
// publishTime
const publishTime = computed({
get() {
const { publishTime } = formState.value.spec;
return publishTime ? toDatetimeLocal(publishTime) : undefined;
},
set(value) {
formState.value.spec.publishTime = value ? toISOString(value) : undefined;
},
});
// slug
const { handleGenerateSlug } = useSlugify(
computed(() => formState.value.spec.title),

View File

@ -6,7 +6,7 @@ import {
VModal,
VSpace,
} from "@halo-dev/components";
import { computed, nextTick, ref, watchEffect } from "vue";
import { computed, nextTick, ref, toRaw, watch } from "vue";
import type { Post } from "@halo-dev/api-client";
import { cloneDeep } from "lodash-es";
import { apiClient } from "@/utils/api-client";
@ -78,6 +78,7 @@ const saving = ref(false);
const publishing = ref(false);
const publishCanceling = ref(false);
const submitType = ref<"publish" | "save">();
const publishTime = ref<string | undefined>(undefined);
const isUpdateMode = computed(() => {
return !!formState.value.metadata.creationTimestamp;
@ -208,26 +209,26 @@ const handleUnpublish = async () => {
}
};
watchEffect(() => {
if (props.post) {
formState.value = cloneDeep(props.post);
watch(
() => props.post,
(value) => {
if (value) {
formState.value = toRaw(value);
publishTime.value = toDatetimeLocal(formState.value.spec.publishTime);
}
}
});
);
watch(
() => publishTime.value,
(value) => {
formState.value.spec.publishTime = value ? toISOString(value) : undefined;
}
);
// custom templates
const { templates } = useThemeCustomTemplates("post");
// publishTime convert
const publishTime = computed({
get() {
const { publishTime } = formState.value.spec;
return publishTime ? toDatetimeLocal(publishTime) : undefined;
},
set(value) {
formState.value.spec.publishTime = value ? toISOString(value) : undefined;
},
});
const annotationsFormRef = ref<InstanceType<typeof AnnotationsForm>>();
// slug