<template>
|
<div>
|
<el-divider content-position="left">系统模板参数</el-divider>
|
<div class="tool-box">
|
<el-tag
|
v-for="(item, index) in templateParamList"
|
:key="item.code"
|
@click="() => addTemplateParam(item)"
|
:draggable="true"
|
@dragend="(ev) => addTemplateParam(item, ev)"
|
class="tag-item"
|
type="info"
|
>
|
{{ item.label }}
|
</el-tag>
|
<!-- <el-input
|
v-if="inputVisible"
|
ref="InputRef"
|
v-model="inputValue"
|
class="add-tag-input"
|
size="small"
|
@keyup.enter="handleInputConfirm"
|
@blur="handleInputConfirm"
|
/>
|
<el-button v-else class="add-tag-btn" size="small" @click="showInput" icon="Plus">
|
新增
|
</el-button> -->
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { InputInstance } from 'element-plus';
|
import { useTemplateDetailContext } from '../hooks/context';
|
import useSelect from '../hooks/select';
|
import { TemplateParam } from '@/fabric-editor/customObject';
|
import { Message } from '@bole-core/core';
|
|
defineOptions({
|
name: 'systemTemplateDataParamSetting',
|
});
|
|
const { fabric, canvasEditor } = useSelect();
|
|
const { templateParamList, templateEditState } = useTemplateDetailContext();
|
|
const state = reactive({
|
isDrawingLineMode: false,
|
lineType: false as boolean | string,
|
});
|
|
// 默认属性
|
const defaultPosition = { shadow: '', fontFamily: 'arial' };
|
|
const addTemplateParam = (
|
item: API.SelectOptionStringGetDictionaryDataSelectQueryResultOption,
|
event?: DragEvent
|
) => {
|
cancelDraw();
|
const templateParam = new TemplateParam(item.label, {
|
...defaultPosition,
|
fontSize: 24,
|
fill: '#333333',
|
textBackgroundColor: '#ffe084',
|
editable: false,
|
|
templateParamType: EnumContractTemplateValueType.Text,
|
recorder: EnumContractTemplateValueRecorder.Creator,
|
userType: EnumUserType.Personal,
|
required: true,
|
label: item.label,
|
name: item.data?.field3,
|
bindProperty: item.data?.field4,
|
|
templateDataParamId: '',
|
pageNum: templateEditState.currentImageIndex,
|
});
|
|
console.log('templateParam: ', templateParam);
|
canvasEditor.addBaseType(templateParam, { center: true, event });
|
};
|
|
const endConflictTools = () => {
|
canvasEditor.discardPolygon();
|
canvasEditor.endDraw();
|
canvasEditor.endTextPathDraw();
|
};
|
|
const ensureObjectSelEvStatus = (evented: boolean, selectable: boolean) => {
|
canvasEditor.canvas.forEachObject((obj) => {
|
if (obj.id !== 'workspace') {
|
obj.selectable = selectable;
|
obj.evented = evented;
|
}
|
});
|
};
|
|
const inputValue = ref('');
|
const inputVisible = ref(false);
|
const InputRef = ref<InputInstance>();
|
|
function handleClose(item: API.GetContractTemplateQueryResultValue) {
|
templateParamList.value = templateParamList.value.filter((i) => i.label !== item.label);
|
}
|
|
const showInput = () => {
|
inputVisible.value = true;
|
nextTick(() => {
|
InputRef.value!.input!.focus();
|
});
|
};
|
|
const handleInputConfirm = () => {
|
if (inputValue.value) {
|
if (templateParamList.value.some((x) => x.label === inputValue.value)) {
|
Message.warnMessage('已存在相同标签');
|
return;
|
}
|
// templateParamList.value.push({
|
// label: inputValue.value,
|
// type: EnumContractTemplateValueType.Text,
|
// recorder: EnumContractTemplateValueRecorder.Creator,
|
// userType: EnumUserType.Personal,
|
// name: '',
|
// required: true,
|
// id: '',
|
// });
|
}
|
inputVisible.value = false;
|
inputValue.value = '';
|
};
|
|
// 退出绘制状态
|
const cancelDraw = () => {
|
if (!state.isDrawingLineMode) return;
|
state.isDrawingLineMode = false;
|
state.lineType = '';
|
canvasEditor.setMode(false);
|
endConflictTools();
|
ensureObjectSelEvStatus(true, true);
|
};
|
|
onDeactivated(() => {
|
cancelDraw();
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
|
.tool-box {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 4px;
|
--bole-pro-form-input-height: 0px;
|
|
.tag-item {
|
cursor: pointer;
|
}
|
|
.add-tag-btn {
|
width: 60px;
|
height: auto !important;
|
}
|
|
.add-tag-input {
|
width: 60px;
|
min-height: 0 !important;
|
}
|
|
/* span {
|
margin-left: 2px;
|
padding: 5px 0;
|
text-align: center;
|
background: #f6f6f6;
|
flex: 1;
|
cursor: pointer;
|
|
&:hover {
|
background: #edf9ff;
|
|
svg {
|
fill: getCssVar('color', 'primary');
|
}
|
}
|
} */
|
}
|
</style>
|
