feat: 拓扑编辑多语言函数处理
This commit is contained in:
TsMask
@@ -1,7 +1,7 @@
|
||||
import { message, Form } from 'ant-design-vue/lib';
|
||||
import { reactive, watch } from 'vue';
|
||||
import { graphG6 } from './useGraph';
|
||||
import { number } from 'echarts';
|
||||
import useI18n from '@/hooks/useI18n';
|
||||
|
||||
/**图分组内置类型 */
|
||||
export const comboTypeOptions = [
|
||||
@@ -39,118 +39,130 @@ export const comboPositionOptions = [
|
||||
},
|
||||
];
|
||||
|
||||
/**图分组信息状态类型 */
|
||||
type ComboStateType = {
|
||||
/**图分组原始数据 */
|
||||
origin: Record<string, any>;
|
||||
/**图分组表单数据 */
|
||||
form: Record<string, any>;
|
||||
};
|
||||
export default function useCombo() {
|
||||
const { t } = useI18n();
|
||||
|
||||
/**图分组信息状态 */
|
||||
export let comboState: ComboStateType = reactive({
|
||||
origin: {},
|
||||
form: {
|
||||
id: '',
|
||||
type: 'rect',
|
||||
parentId: '',
|
||||
size: [40, 40],
|
||||
padding: [30, 30, 30, 30],
|
||||
style: {
|
||||
fill: '#ffffff',
|
||||
stroke: '#ffffff',
|
||||
lineWidth: 1,
|
||||
},
|
||||
label: '',
|
||||
labelCfg: {
|
||||
refX: 10,
|
||||
refY: 10,
|
||||
position: 'top',
|
||||
/**图分组信息状态类型 */
|
||||
type ComboStateType = {
|
||||
/**图分组原始数据 */
|
||||
origin: Record<string, any>;
|
||||
/**图分组表单数据 */
|
||||
form: Record<string, any>;
|
||||
};
|
||||
|
||||
/**图分组信息状态 */
|
||||
let comboState: ComboStateType = reactive({
|
||||
origin: {},
|
||||
form: {
|
||||
id: '',
|
||||
type: 'rect',
|
||||
parentId: '',
|
||||
size: [40, 40],
|
||||
padding: [30, 30, 30, 30],
|
||||
style: {
|
||||
fill: '#000000',
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
fill: '#ffffff',
|
||||
stroke: '#ffffff',
|
||||
lineWidth: 1,
|
||||
},
|
||||
label: '',
|
||||
labelCfg: {
|
||||
refX: 10,
|
||||
refY: 10,
|
||||
position: 'top',
|
||||
style: {
|
||||
fill: '#000000',
|
||||
fontSize: 12,
|
||||
fontWeight: 500,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
/**图分组对话分组内表单属性和校验规则 */
|
||||
export const comboStateForm = Form.useForm(
|
||||
comboState.form,
|
||||
reactive({
|
||||
id: [{ required: true, message: '分组唯一标识 ID' }],
|
||||
})
|
||||
);
|
||||
/**图分组对话分组内表单属性和校验规则 */
|
||||
const comboStateForm = Form.useForm(
|
||||
comboState.form,
|
||||
reactive({
|
||||
id: [{ required: true, message: '分组唯一标识 ID' }],
|
||||
})
|
||||
);
|
||||
|
||||
/**图分组编辑监听更新视图 */
|
||||
watch(comboState.form, combo => {
|
||||
const info = JSON.parse(JSON.stringify(combo));
|
||||
const comboId = info.id;
|
||||
if (comboId) {
|
||||
graphG6.value.clearItemStates(comboId, 'selected');
|
||||
console.log(info);
|
||||
const data = graphG6.value.save();
|
||||
const item = data.combos.find((item: any) => item.id === combo.id);
|
||||
Object.assign(item, combo);
|
||||
// 无父组id时不要设置，避免导致绘制失败
|
||||
if (!combo.parentId) {
|
||||
Reflect.deleteProperty(item, 'parentId');
|
||||
/**图分组编辑监听更新视图 */
|
||||
watch(comboState.form, combo => {
|
||||
const info = JSON.parse(JSON.stringify(combo));
|
||||
const comboId = info.id;
|
||||
if (comboId) {
|
||||
graphG6.value.clearItemStates(comboId, 'selected');
|
||||
console.log(info);
|
||||
const data = graphG6.value.save();
|
||||
const item = data.combos.find((item: any) => item.id === combo.id);
|
||||
Object.assign(item, combo);
|
||||
// 无父组id时不要设置，避免导致绘制失败
|
||||
if (!combo.parentId) {
|
||||
Reflect.deleteProperty(item, 'parentId');
|
||||
}
|
||||
graphG6.value.read(data);
|
||||
}
|
||||
graphG6.value.read(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
/**图分组类型输入限制 */
|
||||
export function handleComboTypeChange(type: any) {
|
||||
// 类型尺寸和边距
|
||||
if (type === 'circle') {
|
||||
comboState.form.size = 30;
|
||||
comboState.form.padding = 30;
|
||||
}
|
||||
if (type === 'rect') {
|
||||
comboState.form.size = [30, 20];
|
||||
comboState.form.padding = [10, 20, 10, 20];
|
||||
}
|
||||
}
|
||||
|
||||
/**图分组新增或更新 */
|
||||
export function handleOkcombo() {
|
||||
const combo = JSON.parse(JSON.stringify(comboState.form));
|
||||
if (!combo.id) {
|
||||
message.warn({
|
||||
content: `分组元素ID错误`,
|
||||
duration: 2,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
const item = graphG6.value.findById(combo.id);
|
||||
if (item) {
|
||||
const data = graphG6.value.save();
|
||||
const item = data.combos.find((item: any) => item.id === combo.id);
|
||||
Object.assign(item, combo);
|
||||
if (!combo.parentId) {
|
||||
Reflect.deleteProperty(item, 'parentId');
|
||||
/**图分组类型输入限制 */
|
||||
function handleComboTypeChange(type: any) {
|
||||
// 类型尺寸和边距
|
||||
if (type === 'circle') {
|
||||
comboState.form.size = 30;
|
||||
comboState.form.padding = 30;
|
||||
}
|
||||
if (type === 'rect') {
|
||||
comboState.form.size = [30, 20];
|
||||
comboState.form.padding = [10, 20, 10, 20];
|
||||
}
|
||||
graphG6.value.read(data);
|
||||
} else {
|
||||
graphG6.value.createCombo(combo, []);
|
||||
}
|
||||
comboStateForm.resetFields();
|
||||
comboState.origin = {};
|
||||
return true;
|
||||
}
|
||||
|
||||
/**图分组取消还原 */
|
||||
export function handleCancelcombo() {
|
||||
const origin = JSON.parse(JSON.stringify(comboState.origin));
|
||||
if (origin.id) {
|
||||
const data = graphG6.value.save();
|
||||
const item = data.combos.find((combo: any) => combo.id === origin.id);
|
||||
Object.assign(item, origin);
|
||||
graphG6.value.read(data);
|
||||
/**图分组新增或更新 */
|
||||
function handleOkcombo() {
|
||||
const combo = JSON.parse(JSON.stringify(comboState.form));
|
||||
if (!combo.id) {
|
||||
message.warn({
|
||||
content: `分组元素ID错误`,
|
||||
duration: 2,
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
const item = graphG6.value.findById(combo.id);
|
||||
if (item) {
|
||||
const data = graphG6.value.save();
|
||||
const item = data.combos.find((item: any) => item.id === combo.id);
|
||||
Object.assign(item, combo);
|
||||
if (!combo.parentId) {
|
||||
Reflect.deleteProperty(item, 'parentId');
|
||||
}
|
||||
graphG6.value.read(data);
|
||||
} else {
|
||||
graphG6.value.createCombo(combo, []);
|
||||
}
|
||||
comboStateForm.resetFields();
|
||||
comboState.origin = {};
|
||||
return true;
|
||||
}
|
||||
|
||||
/**图分组取消还原 */
|
||||
function handleCancelcombo() {
|
||||
const origin = JSON.parse(JSON.stringify(comboState.origin));
|
||||
if (origin.id) {
|
||||
const data = graphG6.value.save();
|
||||
const item = data.combos.find((combo: any) => combo.id === origin.id);
|
||||
Object.assign(item, origin);
|
||||
graphG6.value.read(data);
|
||||
comboStateForm.resetFields();
|
||||
comboState.origin = {};
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
comboState,
|
||||
comboStateForm,
|
||||
handleComboTypeChange,
|
||||
handleOkcombo,
|
||||
handleCancelcombo,
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user