|
|
@@ -14,7 +14,9 @@
|
|
|
<n-drawer-content title="专题导航">
|
|
|
<div class="drawerContent m-5"></div>
|
|
|
<n-flex justify="center">
|
|
|
- <n-button type="primary" @click="handleAdd">+ 添加</n-button>
|
|
|
+ <n-button v-if="!isPanoEditing" type="primary" @click="handleAdd"
|
|
|
+ >+ 添加
|
|
|
+ </n-button>
|
|
|
</n-flex>
|
|
|
|
|
|
<n-list
|
|
|
@@ -22,19 +24,39 @@
|
|
|
clickable
|
|
|
style="--n-color-modal: none; margin-top: 20px"
|
|
|
:show-divider="false"
|
|
|
- @select="handleSelect"
|
|
|
+ v-if="!isPanoEditing"
|
|
|
>
|
|
|
<n-list-item v-for="(nav, index) in dataList" :key="index" style="">
|
|
|
- <n-flex justify="space-between">
|
|
|
+ <n-flex justify="space-between" align="center" :size="0">
|
|
|
<n-flex align="center">
|
|
|
<n-icon size="20">
|
|
|
<WalkSharp />
|
|
|
</n-icon>
|
|
|
- {{ nav.title }}
|
|
|
+ <template v-if="isShowEditing(index)">
|
|
|
+ <n-flex style="flex: 1" align="center">
|
|
|
+ <n-input-group>
|
|
|
+ <n-input
|
|
|
+ v-model:value="nav.title"
|
|
|
+ style="max-width: 130px"
|
|
|
+ />
|
|
|
+
|
|
|
+ <n-button type="primary" @click="currentEditing = NaN">
|
|
|
+ 退出
|
|
|
+ </n-button>
|
|
|
+ </n-input-group>
|
|
|
+ </n-flex>
|
|
|
+ </template>
|
|
|
+ <div v-else @click="handleItem(index)">
|
|
|
+ {{ nav.title === '新增路线' ? nav.title + index : nav.title }}
|
|
|
+ </div>
|
|
|
</n-flex>
|
|
|
|
|
|
- <n-dropdown trigger="hover" :options="fullOptions">
|
|
|
- <n-icon :size="20">
|
|
|
+ <n-dropdown
|
|
|
+ @select="(key) => handleSelect(key, index)"
|
|
|
+ trigger="hover"
|
|
|
+ :options="fullOptions"
|
|
|
+ >
|
|
|
+ <n-icon :size="20" v-show="!isShowEditing(index)">
|
|
|
<svg
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
|
@@ -49,31 +71,71 @@
|
|
|
</n-flex>
|
|
|
</n-list-item>
|
|
|
</n-list>
|
|
|
+
|
|
|
+ <template v-else>
|
|
|
+ <n-flex justify="center" align="center" vertical style="flex: 1">
|
|
|
+ <n-flex
|
|
|
+ justify="start"
|
|
|
+ align="start"
|
|
|
+ style="min-height: 400px; width: 100%"
|
|
|
+ vertical
|
|
|
+ >
|
|
|
+ <template v-if="panos.length > 0">
|
|
|
+ <n-list
|
|
|
+ hoverable
|
|
|
+ clickable
|
|
|
+ style="--n-color-modal: none; width: 100%"
|
|
|
+ :show-divider="false"
|
|
|
+ >
|
|
|
+ <n-list-item v-for="(pano, index) in panos" :key="index">
|
|
|
+ <n-flex justify="space-between">
|
|
|
+ {{ pano }}
|
|
|
+ <n-icon :size="20" @click="handlePanoDel">
|
|
|
+ <TrashOutline />
|
|
|
+ </n-icon>
|
|
|
+ </n-flex>
|
|
|
+ </n-list-item>
|
|
|
+ </n-list>
|
|
|
+ </template>
|
|
|
+ <n-flex v-else justify="center" style="width: 100%">
|
|
|
+ <span> 暂没数据，请选择线路</span>
|
|
|
+ </n-flex>
|
|
|
+ </n-flex>
|
|
|
+
|
|
|
+ <n-button
|
|
|
+ type="primary"
|
|
|
+ @click="handleItemSubmit"
|
|
|
+ style="width: 130px"
|
|
|
+ >确定并返回列表
|
|
|
+ </n-button>
|
|
|
+ </n-flex>
|
|
|
+ </template>
|
|
|
</n-drawer-content>
|
|
|
</n-drawer>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
-import { ref } from 'vue'
|
|
|
+import { computed, ref } from 'vue'
|
|
|
import { sdk, clearScreen } from '@/sdk'
|
|
|
import { onMounted, onUnmounted } from 'vue'
|
|
|
import {
|
|
|
- NRadio,
|
|
|
- NPopover,
|
|
|
+ // NRadio,
|
|
|
+ // NPopover,
|
|
|
useDialog,
|
|
|
useMessage,
|
|
|
NDropdown,
|
|
|
NList,
|
|
|
- NListItem
|
|
|
+ NListItem,
|
|
|
+ NInputGroup
|
|
|
} from 'naive-ui'
|
|
|
import { WalkSharp, TrashOutline, EllipsisHorizontal } from '@vicons/ionicons5'
|
|
|
|
|
|
const panos = ref([])
|
|
|
-const isEditing = ref({
|
|
|
- index: NaN
|
|
|
-})
|
|
|
|
|
|
+const currentEditing = ref(NaN)
|
|
|
+const currentPanoEditing = ref()
|
|
|
+const isPanoEditing = ref(false)
|
|
|
const dataList = ref<
|
|
|
{
|
|
|
title: string
|
|
|
@@ -128,7 +190,6 @@ const dialog = useDialog()
|
|
|
const message = useMessage()
|
|
|
|
|
|
const active = ref(true)
|
|
|
-// const show = ref(true)
|
|
|
|
|
|
const fullOptions = ref([
|
|
|
{
|
|
|
@@ -141,14 +202,42 @@ const fullOptions = ref([
|
|
|
}
|
|
|
])
|
|
|
|
|
|
-const handleSelect = (key: string) => {
|
|
|
+const handleSelect = (key: string, index: number) => {
|
|
|
+ // console.log('handleSelect', key)
|
|
|
switch (key) {
|
|
|
case '1':
|
|
|
+ handleListEdit(index)
|
|
|
break
|
|
|
case '2':
|
|
|
+ handleListDel(index)
|
|
|
break
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+const handleListEdit = (index: number) => {
|
|
|
+ console.log('handleListEdit', index)
|
|
|
+ currentPanoEditing.value = index
|
|
|
+ isPanoEditing.value = true
|
|
|
+}
|
|
|
+
|
|
|
+const handleListDel = (index: number) => {
|
|
|
+ console.log('handleListDel', index)
|
|
|
+ dataList.value.splice(index, 1)
|
|
|
+}
|
|
|
+
|
|
|
+const isShowEditing = computed(() => (i: number) => currentEditing.value === i)
|
|
|
+
|
|
|
+const handleItem = (index: number) => {
|
|
|
+ console.log('handleItem', index)
|
|
|
+ currentEditing.value = index
|
|
|
+}
|
|
|
+
|
|
|
+const handleItemSubmit = () => {
|
|
|
+ isPanoEditing.value = false
|
|
|
+}
|
|
|
+const handlePanoDel = () => {
|
|
|
+ isPanoEditing.value = false
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="sass" scoped>
|
gemercheung