|
@@ -7,7 +7,12 @@
|
|
|
<el-tooltip content="瓷砖位置索引">
|
|
<el-tooltip content="瓷砖位置索引">
|
|
|
<LuInfo size="12px" class="text-accent-yellow" /> </el-tooltip
|
|
<LuInfo size="12px" class="text-accent-yellow" /> </el-tooltip
|
|
|
></span>
|
|
></span>
|
|
|
- <LuPlus class="cursor-pointer" size="16px" @click="handleAddRow" />
|
|
|
|
|
|
|
+ <span class="flex items-center gap-12px">
|
|
|
|
|
+ <el-tooltip content="动画">
|
|
|
|
|
+ <el-switch v-model="animation" size="small"> </el-switch>
|
|
|
|
|
+ </el-tooltip>
|
|
|
|
|
+ <LuPlus class="cursor-pointer" size="16px" @click="handleAddRow" />
|
|
|
|
|
+ </span>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
<el-scrollbar max-height="120px">
|
|
<el-scrollbar max-height="120px">
|
|
@@ -21,7 +26,7 @@
|
|
|
<input-number
|
|
<input-number
|
|
|
class="flex-1"
|
|
class="flex-1"
|
|
|
controls-position="right"
|
|
controls-position="right"
|
|
|
- :model-value="item.row"
|
|
|
|
|
|
|
+ v-model="item.row"
|
|
|
@change="(val) => setRow(index, val)"
|
|
@change="(val) => setRow(index, val)"
|
|
|
>
|
|
>
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
@@ -31,7 +36,7 @@
|
|
|
<input-number
|
|
<input-number
|
|
|
class="flex-1"
|
|
class="flex-1"
|
|
|
controls-position="right"
|
|
controls-position="right"
|
|
|
- :model-value="item.col"
|
|
|
|
|
|
|
+ v-model="item.col"
|
|
|
@change="(val) => setColumn(index, val)"
|
|
@change="(val) => setColumn(index, val)"
|
|
|
>
|
|
>
|
|
|
<template #prefix>
|
|
<template #prefix>
|
|
@@ -50,13 +55,14 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
-import { computed, type Ref, watch } from 'vue'
|
|
|
|
|
|
|
+import { computed, ref, type Ref, watch } from 'vue'
|
|
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
import { LuPlus, LuTrash2, LuInfo } from 'vue-icons-plus/lu'
|
|
import { LuPlus, LuTrash2, LuInfo } from 'vue-icons-plus/lu'
|
|
|
|
|
|
|
|
const props = defineProps<{
|
|
const props = defineProps<{
|
|
|
values: Ref<any>
|
|
values: Ref<any>
|
|
|
}>()
|
|
}>()
|
|
|
-
|
|
|
|
|
|
|
+console.log('props', props)
|
|
|
const directionOptions = [
|
|
const directionOptions = [
|
|
|
{ label: '水平', value: 'HOR' },
|
|
{ label: '水平', value: 'HOR' },
|
|
|
{ label: '垂直', value: 'VER' },
|
|
{ label: '垂直', value: 'VER' },
|
|
@@ -75,6 +81,18 @@ const children = computed({
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
+// 动画
|
|
|
|
|
+const animation = computed({
|
|
|
|
|
+ get() {
|
|
|
|
|
+ return props.values?.value?.props?.animation
|
|
|
|
|
+ },
|
|
|
|
|
+ set(val: string) {
|
|
|
|
|
+ if (props.values?.value?.props) {
|
|
|
|
|
+ props.values.value.props.animation = val
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
// 当前激活
|
|
// 当前激活
|
|
|
const activeIndex = computed({
|
|
const activeIndex = computed({
|
|
|
get() {
|
|
get() {
|
|
@@ -87,6 +105,15 @@ const activeIndex = computed({
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
|
|
+const lastValidPositions = ref<{ row: number; col: number }[]>([])
|
|
|
|
|
+
|
|
|
|
|
+const syncLastValidPositions = () => {
|
|
|
|
|
+ lastValidPositions.value = children.value.map((item) => ({
|
|
|
|
|
+ row: item.row,
|
|
|
|
|
+ col: item.col
|
|
|
|
|
+ }))
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
/*
|
|
/*
|
|
|
* 设置行号
|
|
* 设置行号
|
|
|
*/
|
|
*/
|
|
@@ -94,13 +121,23 @@ const setRow = (index: number, val?: number) => {
|
|
|
if (typeof val === 'undefined') return
|
|
if (typeof val === 'undefined') return
|
|
|
|
|
|
|
|
const record = children.value[index]
|
|
const record = children.value[index]
|
|
|
|
|
+ if (!record) return
|
|
|
|
|
+ const previousRow = lastValidPositions.value[index]?.row ?? record.row
|
|
|
|
|
|
|
|
// 判断是否存在相同索引
|
|
// 判断是否存在相同索引
|
|
|
- const existIndex = children.value.findIndex((item) => item.row === val && item.col === record.col)
|
|
|
|
|
|
|
+ const existIndex = children.value.findIndex(
|
|
|
|
|
+ (item, itemIndex) => itemIndex !== index && item.row === val && item.col === record.col
|
|
|
|
|
+ )
|
|
|
|
|
+
|
|
|
|
|
+ if (existIndex !== -1) {
|
|
|
|
|
+ ElMessage.warning('瓷砖位置索引重复')
|
|
|
|
|
+ record.row = previousRow
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- if (existIndex === -1) {
|
|
|
|
|
- // 不存在相同索引
|
|
|
|
|
- record.row = val
|
|
|
|
|
|
|
+ lastValidPositions.value[index] = {
|
|
|
|
|
+ row: val,
|
|
|
|
|
+ col: record.col
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -111,13 +148,23 @@ const setColumn = (index: number, val?: number) => {
|
|
|
if (typeof val === 'undefined') return
|
|
if (typeof val === 'undefined') return
|
|
|
|
|
|
|
|
const record = children.value[index]
|
|
const record = children.value[index]
|
|
|
|
|
+ if (!record) return
|
|
|
|
|
+ const previousCol = lastValidPositions.value[index]?.col ?? record.col
|
|
|
|
|
|
|
|
// 判断是否存在相同索引
|
|
// 判断是否存在相同索引
|
|
|
- const existIndex = children.value.findIndex((item) => item.col === val && item.row === record.row)
|
|
|
|
|
|
|
+ const existIndex = children.value.findIndex(
|
|
|
|
|
+ (item, itemIndex) => itemIndex !== index && item.col === val && item.row === record.row
|
|
|
|
|
+ )
|
|
|
|
|
+
|
|
|
|
|
+ if (existIndex !== -1) {
|
|
|
|
|
+ ElMessage.warning('瓷砖位置索引重复')
|
|
|
|
|
+ record.col = previousCol
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- if (existIndex === -1) {
|
|
|
|
|
- // 不存在相同索引
|
|
|
|
|
- record.col = val
|
|
|
|
|
|
|
+ lastValidPositions.value[index] = {
|
|
|
|
|
+ row: record.row,
|
|
|
|
|
+ col: val
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -132,7 +179,8 @@ watch(
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
- deep: true
|
|
|
|
|
|
|
+ deep: true,
|
|
|
|
|
+ immediate: true
|
|
|
}
|
|
}
|
|
|
)
|
|
)
|
|
|
|
|
|
|
@@ -142,6 +190,7 @@ watch(
|
|
|
*/
|
|
*/
|
|
|
const handleDeleteItem = (index: number) => {
|
|
const handleDeleteItem = (index: number) => {
|
|
|
children.value.splice(index, 1)
|
|
children.value.splice(index, 1)
|
|
|
|
|
+ syncLastValidPositions()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
@@ -164,7 +213,10 @@ const handleAddRow = () => {
|
|
|
direction: 'ALL',
|
|
direction: 'ALL',
|
|
|
children: []
|
|
children: []
|
|
|
})
|
|
})
|
|
|
|
|
+ syncLastValidPositions()
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+syncLastValidPositions()
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped></style>
|
|
<style scoped></style>
|