import { useQuery } from '@tanstack/vue-query';
|
import * as electronSignServices from '@/services/api/electronSign';
|
import { Ref, Reactive } from 'vue';
|
import { setOSSLink } from '@/utils';
|
import { TemplateParam, TemplateParamExtraData, TemplateParamObjectName } from '../customObject';
|
import useSelect from '../hooks/select';
|
import { Message } from '@bole-core/core';
|
import { fabric } from 'fabric';
|
import { v4 as uuid } from 'uuid';
|
import {
|
CanvasJson,
|
checkTemplateParamObjectListNotNull,
|
convertJsonMapToTemplateParamObjectList,
|
} from '../utils';
|
|
export interface TemplateDetailContext {
|
templateDetail: Ref<API.GetContractTemplateQueryResult>;
|
templateParamList: Ref<API.SelectOptionStringGetDictionaryDataSelectQueryResultOption[]>;
|
templateImageList: Ref<TemplateEditDataItem[]>;
|
templateEditState: Reactive<{
|
templateId: string;
|
currentImageIndex: number;
|
jsonMap: Record<number, CanvasJson>;
|
}>;
|
}
|
|
export const TemplateDetailPContextKey: InjectionKey<TemplateDetailContext> = Symbol(
|
'TemplateDetailPContextKey'
|
);
|
|
type UseTemplateDetailProvideOptions = {
|
id: MaybeRef<string>;
|
};
|
|
export function useTemplateDetailProvide({ id }: UseTemplateDetailProvideOptions) {
|
console.log('id: ', id);
|
// const templateParamList = ref<API.GetContractTemplateQueryResultValue[]>([]);
|
|
const { data: templateDetail, isLoading } = useQuery({
|
queryKey: ['electronSignServices/getContractTemplate', id],
|
queryFn: async () => {
|
return await electronSignServices.getContractTemplate(
|
{
|
id: unref(id),
|
},
|
{
|
showLoading: false,
|
}
|
);
|
},
|
enabled: computed(() => !!unref(id)),
|
placeholderData: () => ({} as API.GetContractTemplateQueryResult),
|
onSuccess(data) {
|
const jsonData = JSON.parse(data.templateJsonData);
|
console.log('jsonData22: ', jsonData);
|
if (data.templateJsonData && jsonData) {
|
templateEditState.jsonMap = jsonData;
|
}
|
},
|
});
|
|
const templateImageList = computed(() => {
|
if (templateDetail.value.templateEditData) {
|
let _templateImageList = JSON.parse(
|
templateDetail.value.templateEditData
|
) as TemplateEditDataItem[];
|
return _templateImageList
|
? _templateImageList.map((x) => ({
|
...x,
|
path: setOSSLink(x.path),
|
}))
|
: [];
|
}
|
return [];
|
});
|
|
const { dictionaryDataList: templateParamList } = useDictionaryDataSelect({
|
categoryCode: computed(() => CategoryCode.ElectronSignParam),
|
});
|
|
const templateEditState = reactive({
|
templateId: unref(id),
|
currentImageIndex: 0,
|
jsonMap: {} as Record<number, CanvasJson>,
|
});
|
|
provide(TemplateDetailPContextKey, {
|
templateDetail,
|
templateParamList,
|
templateImageList,
|
templateEditState,
|
});
|
|
return {
|
isLoading,
|
};
|
}
|
|
export function useTemplateDetailContext() {
|
return inject(TemplateDetailPContextKey);
|
}
|
|
export function useCanvasActions() {
|
const { canvasEditor } = useSelect();
|
const { templateEditState, templateImageList } = useTemplateDetailContext();
|
|
const clear = () => {
|
canvasEditor.clear();
|
clearHistory();
|
};
|
|
function clearHistory() {
|
// canvasEditor.canvas.clearHistory(false);
|
// canvasEditor.historyUpdate();
|
}
|
|
function toggleCanvas(index: number, force = false) {
|
if (index !== templateEditState.currentImageIndex || force) {
|
let json = canvasEditor.getJson() as CanvasJson;
|
console.log('toggle json: ', json);
|
templateEditState.jsonMap[templateEditState.currentImageIndex] = json;
|
clear();
|
templateEditState.currentImageIndex = index;
|
const jsonData = templateEditState.jsonMap[index];
|
if (jsonData) {
|
canvasEditor.loadJSON(JSON.stringify(jsonData), () => {
|
canvasEditor.canvas.discardActiveObject();
|
});
|
// canvasEditor.canvas.loadFromJSON(JSON.stringify(jsonData), () => {
|
// // const imgs = canvasEditor.canvas
|
// // .getObjects()
|
// // .find((o) => o.type === 'image') as fabric.Image[];
|
// // console.log('imgs: ', imgs);
|
// // imgs[0].evented = false;
|
// // imgs[0].selectable = false;
|
// // imgs.forEach(setImageLock);
|
// // canvasEditor.canvas.renderAll();
|
// });
|
} else {
|
setBackgroundImage(templateImageList.value[index].path);
|
console.log('templateEditState: ', templateEditState);
|
}
|
}
|
}
|
|
const setBackgroundImage = (imageUrl: string) => {
|
fabric.Image.fromURL(imageUrl, function (img: fabric.Image) {
|
setImageLock(img);
|
console.log('img: ', img);
|
canvasEditor.setSize(img.width, img.height);
|
canvasEditor.canvas.add(img);
|
canvasEditor.canvas.renderAll();
|
});
|
};
|
|
function exportCanvas() {
|
let json = canvasEditor.getJson() as CanvasJson;
|
console.log('json: ', json);
|
}
|
|
function saveAllCanvas() {
|
let json = canvasEditor.getJson() as CanvasJson;
|
templateEditState.jsonMap[templateEditState.currentImageIndex] = json;
|
saveCustomerTemplateParam();
|
}
|
|
async function saveCustomerTemplateParam() {
|
try {
|
const templateParamObjectList = convertJsonMapToTemplateParamObjectList(
|
templateEditState.jsonMap
|
);
|
if (!checkTemplateParamObjectListNotNull(templateParamObjectList)) {
|
return;
|
}
|
let params: API.SaveContractTemplateValuesCommand = {
|
id: templateEditState.templateId,
|
values: templateParamObjectList.map(
|
(x) =>
|
({
|
id: x.templateDataParamId,
|
label: x.label,
|
name: x.name,
|
required: x.required,
|
type: x.templateParamType,
|
recorder: x.recorder,
|
userType: x.userType,
|
} as API.SaveContractTemplateValuesCommandItem)
|
),
|
templateJsonData: JSON.stringify(templateEditState.jsonMap),
|
};
|
console.log('params: ', params);
|
let res = await electronSignServices.saveContractTemplateValues(params);
|
if (res) {
|
Message.successMessage('已保存');
|
}
|
} catch (error) {}
|
}
|
|
return {
|
clear,
|
toggleCanvas,
|
saveAllCanvas,
|
exportCanvas,
|
setBackgroundImage,
|
};
|
}
|
|
function setImageLock(img: fabric.Image) {
|
img.set({
|
selectable: false, // 不可选中
|
evented: false, // 不响应事件
|
lockMovementX: true, // 不响应事件
|
lockMovementY: true, // 不响应事件
|
lockRotation: true, // 锁定旋转
|
lockScalingX: true, // 锁定水平缩放
|
lockScalingY: true, // 锁定垂直缩放
|
hasControls: false,
|
});
|
}
|
