Merge branch 'dev_vite' of http://18.167.251.121:10003/aidlab/aida_front into dev_vite
This commit is contained in:
@@ -2,26 +2,26 @@
|
||||
<div class="demo">
|
||||
<div
|
||||
class="control"
|
||||
:class="{ active: item.id === activeId }"
|
||||
:class="{ active: item.token === activeToken }"
|
||||
v-for="(item, index) in list"
|
||||
:key="item.id"
|
||||
@click="onSelect(item.id)"
|
||||
:key="item.token"
|
||||
@click="onSelect(item.token)"
|
||||
>
|
||||
<div>
|
||||
<b>{{ item.name }}</b>
|
||||
<button
|
||||
v-if="index !== 0"
|
||||
@click="onMove(item.id, list[index - 1].id)"
|
||||
@click="onMove(item.token, list[index - 1].token)"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<button
|
||||
v-if="index !== list.length - 1"
|
||||
@click="onMove(item.id, list[index + 1].id)"
|
||||
@click="onMove(item.token, list[index + 1].token)"
|
||||
>
|
||||
→
|
||||
</button>
|
||||
<button @click.stop="onDelete(item.id)">删除</button>
|
||||
<button @click.stop="onDelete(item.token)">删除</button>
|
||||
</div>
|
||||
<div>
|
||||
<span>偏移X</span>
|
||||
@@ -105,10 +105,10 @@
|
||||
|
||||
const convertDotNotationToBracket = (str) =>
|
||||
str.replace(/(?:^|\.)(\d+)(?=\.|$)/g, "[#$1]").replace(/\[#/g, "[");
|
||||
const activeId = ref("1");
|
||||
const activeToken = ref("1");
|
||||
const list = ref([
|
||||
{
|
||||
id: "1",
|
||||
token: "1",
|
||||
ifSingle: false,
|
||||
level2Type: "Pattern",
|
||||
designType: "Library",
|
||||
@@ -133,7 +133,7 @@
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
token: "2",
|
||||
ifSingle: false,
|
||||
level2Type: "Pattern",
|
||||
designType: "Library",
|
||||
@@ -163,42 +163,35 @@
|
||||
const oldList = ref(deepCopy(list.value));
|
||||
const pingpuRef = ref(null);
|
||||
const updateCanvas = (arr) => {
|
||||
console.log(arr);
|
||||
oldList.value = deepCopy(list.value);
|
||||
arr.forEach((item) => {
|
||||
list.value.forEach((v) => {
|
||||
const obj = list.value.find((v) => v.token === item.token);
|
||||
if (item.action === ACTIONS.UPDATE) {
|
||||
if (item.action === ACTIONS.UPDATE) {
|
||||
if (v.id === item.id) {
|
||||
if (item.action === ACTIONS.UPDATE) {
|
||||
try {
|
||||
const key = item.key;
|
||||
const str = /^\[/.test(item.key)
|
||||
? "v" + key
|
||||
: "v." + key;
|
||||
eval(`${str} = item.value`);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
try {
|
||||
const key = item.key;
|
||||
const str = /^\[/.test(item.key)
|
||||
? "obj" + key
|
||||
: "obj." + key;
|
||||
eval(`${str} = item.value`);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
} else if (item.action === ACTIONS.SELECT) {
|
||||
activeId.value = item.id;
|
||||
}
|
||||
});
|
||||
} else if (item.action === ACTIONS.SELECT) {
|
||||
activeToken.value = item.token;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const onSelect = (id) => {
|
||||
activeId.value = id;
|
||||
pingpuRef.value.updataList([
|
||||
{
|
||||
id: id,
|
||||
action: ACTIONS.SELECT,
|
||||
},
|
||||
]);
|
||||
const onSelect = (token) => {
|
||||
activeToken.value = token;
|
||||
pingpuRef.value.updataList([{ token, action: ACTIONS.SELECT }]);
|
||||
};
|
||||
const onMove = (id, id2) => {
|
||||
const obj1 = list.value.find((v) => v.id === id);
|
||||
const obj2 = list.value.find((v) => v.id === id2);
|
||||
const onMove = (token1, token2) => {
|
||||
const obj1 = list.value.find((v) => v.token === token1);
|
||||
const obj2 = list.value.find((v) => v.token === token2);
|
||||
const index1 = list.value.indexOf(obj1);
|
||||
const index2 = list.value.indexOf(obj2);
|
||||
if (index1 < index2) {
|
||||
@@ -206,26 +199,16 @@
|
||||
} else {
|
||||
list.value.splice(index1, 0, list.value.splice(index2, 1)[0]);
|
||||
}
|
||||
const ids = list.value.map((v) => v.id);
|
||||
pingpuRef.value.updataList([
|
||||
{
|
||||
action: ACTIONS.SORT,
|
||||
ids,
|
||||
},
|
||||
]);
|
||||
const tokens = list.value.map((v) => v.token);
|
||||
pingpuRef.value.updataList([{ action: ACTIONS.SORT, tokens }]);
|
||||
};
|
||||
const onDelete = (id) => {
|
||||
list.value = list.value.filter((v) => v.id !== id);
|
||||
pingpuRef.value.updataList([
|
||||
{
|
||||
id: id,
|
||||
action: ACTIONS.DELETE,
|
||||
},
|
||||
]);
|
||||
const onDelete = (token) => {
|
||||
list.value = list.value.filter((v) => v.token !== token);
|
||||
pingpuRef.value.updataList([{ token, action: ACTIONS.DELETE }]);
|
||||
};
|
||||
const onAdd = () => {
|
||||
const obj = {
|
||||
id: Date.now().toString(),
|
||||
token: Date.now().toString(),
|
||||
ifSingle: false,
|
||||
level2Type: "Pattern",
|
||||
designType: "Library",
|
||||
@@ -250,12 +233,7 @@
|
||||
},
|
||||
};
|
||||
list.value.push(obj);
|
||||
pingpuRef.value.updataList([
|
||||
{
|
||||
action: ACTIONS.ADD,
|
||||
data: obj,
|
||||
},
|
||||
]);
|
||||
pingpuRef.value.updataList([{ action: ACTIONS.ADD, data: obj }]);
|
||||
};
|
||||
watch(
|
||||
() => list.value,
|
||||
@@ -266,20 +244,20 @@
|
||||
const updateList = () => {
|
||||
const changeList = [];
|
||||
oldList.value.forEach((oldItem) => {
|
||||
const newItem = list.value.find((v) => v.id === oldItem.id);
|
||||
const newItem = list.value.find((v) => v.token === oldItem.token);
|
||||
if (newItem) {
|
||||
const arr = findDiffProps(oldItem, newItem);
|
||||
arr.forEach((item) => {
|
||||
changeList.push({
|
||||
...item,
|
||||
id: oldItem.id,
|
||||
token: oldItem.token,
|
||||
action: ACTIONS.UPDATE,
|
||||
key: convertDotNotationToBracket(item.key),
|
||||
});
|
||||
});
|
||||
} else {
|
||||
changeList.push({
|
||||
id: oldItem.id,
|
||||
token: oldItem.token,
|
||||
action: ACTIONS.DELETE,
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user