setTempValues({ ...tempValues, [field.id]: value })}
+ />
+ );
+
+ let previewNode;
+ const { previewTemplate, id } = field;
+ const value = values[id]?.value;
+ const DEFAULT_CONTENT_PLACEHOLDER = '#DEFAULT#';
+ if (previewTemplate) {
+ const showPreviewAnyway = previewTemplate.startsWith('!');
+ if (showPreviewAnyway || value !== undefined) {
+ const template = showPreviewAnyway ? previewTemplate.slice(1) : previewTemplate;
+ previewNode = (
+ (
+ Render preview template error: {error.message}
+ )}
+ >
+ {/* {template.startsWith(DEFAULT_CONTENT_PLACEHOLDER) && defaultContent} */}
+
+ {/* {template.endsWith(DEFAULT_CONTENT_PLACEHOLDER) && defaultContent} */}
+
+ );
+ }
+ }
+
return (
- setTempValues({ ...tempValues, [field.id]: value })}
- />
+ {previewNode ? (
+ <>
+ {previewNode}
+
+ 编辑
+ {contentNode}
+
+
+ ) : (
+ contentNode
+ )}
);
})}
@@ -149,3 +205,27 @@ function withProps, K extends keyof P>(
): JSXElementConstructor> {
return (props: any) => ;
}
+
+function CustomFieldPreview({
+ template,
+ value,
+ user,
+}: {
+ template: string;
+ value: string;
+ user?: UserSchema;
+}) {
+ const tpl = useMemo(() => (template ? Handlebars.compile(template) : undefined), [template]);
+ const previewHTML = useMemo(() => {
+ let parsedValue = value;
+ try {
+ parsedValue = JSON.parse(value);
+ } catch (error) {
+ // ignore the error
+ }
+ return tpl
+ ? DOMPurify.sanitize(tpl({ value: parsedValue, user }), { ADD_TAGS: ['iframe'] })
+ : undefined;
+ }, [tpl, value, user]);
+ return ;
+}
diff --git a/next/web/src/api/ticket.ts b/next/web/src/api/ticket.ts
index 6b3d5ea4d..d5f792ab9 100644
--- a/next/web/src/api/ticket.ts
+++ b/next/web/src/api/ticket.ts
@@ -1,4 +1,10 @@
-import { UseMutationOptions, UseQueryOptions, useMutation, useQuery } from 'react-query';
+import {
+ UseMutationOptions,
+ UseQueryOptions,
+ useMutation,
+ useQuery,
+ useQueryClient,
+} from 'react-query';
import { castArray, isEmpty } from 'lodash-es';
import { http } from '@/leancloud';
@@ -410,8 +416,12 @@ async function updateTicketFieldValues(ticketId: string, data: UpdateTicketField
export function useUpdateTicketFieldValues(
options?: UseMutationOptions>
) {
+ const queryClient = useQueryClient();
return useMutation({
mutationFn: (vars) => updateTicketFieldValues(...vars),
+ onSuccess: (_, [ticketId, data]) => {
+ queryClient.invalidateQueries(['ticketFieldValues', ticketId]);
+ },
...options,
});
}