<template>
|
<div class="box attr-item-box" v-if="isOne && isMatchType">
|
<el-divider content-position="left"><h4>模板参数属性</h4></el-divider>
|
<el-form :label-width="140" class="form-wrap" label-position="left">
|
<el-form-item :label="'数据参数名称'" required>
|
<el-input
|
v-model="baseAttr.label"
|
placeholder="请输入数据参数名称"
|
@input="(value) => changeCommon('label', value)"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="'数据参数字段'" required>
|
<el-input
|
v-model="baseAttr.name"
|
placeholder="请输入数据参数字段"
|
@input="(value) => changeCommon('name', value)"
|
disabled
|
></el-input>
|
</el-form-item>
|
<el-form-item :label="'合同模板变量类型'" required>
|
<FieldSelect
|
v-model="baseAttr.templateParamType"
|
placeholder="请选择合同模板变量类型"
|
:value-enum="EnumContractTemplateValueTypeText"
|
@change="(value) => changeCommon('templateParamType', value)"
|
/>
|
</el-form-item>
|
<el-form-item :label="'合同模板变量'" required>
|
<FieldSelect
|
v-model="baseAttr.recorder"
|
placeholder="请选择合同模板变量"
|
:value-enum="EnumContractTemplateValueRecorderText"
|
@change="(value) => changeCommon('recorder', value)"
|
/>
|
</el-form-item>
|
<el-form-item :label="'用户类型'" required>
|
<FieldSelect
|
v-model="baseAttr.userType"
|
placeholder="请选择用户类型"
|
:value-enum="EnumUserTypeText"
|
@change="(value) => changeCommon('userType', value)"
|
/>
|
</el-form-item>
|
<el-form-item :label="'是否必填'" required>
|
<FieldSwitch
|
v-model="baseAttr.required"
|
@change="(value) => changeCommon('required', value)"
|
/>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import useSelect from '@/fabric-editor/hooks/select';
|
// import InputNumber from '@/components/inputNumber';
|
import { TemplateParamObjectName } from '@/fabric-editor/customObject';
|
import {
|
EnumContractTemplateValueType,
|
EnumContractTemplateValueTypeText,
|
EnumContractTemplateValueRecorderText,
|
EnumUserTypeText,
|
} from '@/constants';
|
import { FieldSelect, FieldSwitch } from '@bole-core/components';
|
|
defineOptions({
|
name: 'attributeTemplateParam',
|
});
|
|
const update = getCurrentInstance();
|
|
// 可修改的元素
|
const baseType = [TemplateParamObjectName];
|
|
const { isMatchType, canvasEditor, isOne } = useSelect(baseType);
|
|
// 属性值
|
const baseAttr = reactive({
|
templateParamType: EnumContractTemplateValueType.Text,
|
recorder: EnumContractTemplateValueRecorder.Creator,
|
userType: EnumUserType.Personal,
|
label: '',
|
name: '',
|
required: true,
|
});
|
|
// 属性获取
|
const getObjectAttr = (e?: any) => {
|
const activeObject = canvasEditor.canvas.getActiveObject();
|
console.log('activeObject: ', activeObject);
|
// 不是当前obj，跳过
|
if (e && e.target && e.target !== activeObject) return;
|
if (activeObject && isMatchType) {
|
baseAttr.templateParamType = activeObject.get('templateParamType');
|
baseAttr.recorder = activeObject.get('recorder');
|
baseAttr.userType = activeObject.get('userType');
|
baseAttr.label = activeObject.get('label');
|
baseAttr.name = activeObject.get('name');
|
baseAttr.required = activeObject.get('required');
|
}
|
};
|
|
const selectCancel = () => {
|
update?.proxy?.$forceUpdate();
|
};
|
|
// 通用属性改变
|
const changeCommon = (key, value) => {
|
const activeObject = canvasEditor.canvas.getActiveObjects()[0];
|
if (activeObject) {
|
activeObject && activeObject.set(key, value);
|
canvasEditor.canvas.renderAll();
|
}
|
};
|
|
onMounted(() => {
|
// 获取字体数据
|
getObjectAttr();
|
canvasEditor.on('selectCancel', selectCancel);
|
canvasEditor.on('selectOne', getObjectAttr);
|
canvasEditor.canvas.on('object:modified', getObjectAttr);
|
});
|
|
onBeforeUnmount(() => {
|
canvasEditor.off('selectCancel', selectCancel);
|
canvasEditor.off('selectOne', getObjectAttr);
|
canvasEditor.canvas.off('object:modified', getObjectAttr);
|
});
|
</script>
|
|
<style lang="scss" scoped>
|
@use '@/style/common.scss' as *;
|
</style>
|
