Skip to content

Commit

Permalink
feat: 代码分离,功能优化
Browse files Browse the repository at this point in the history
1. 代码迁移到 ts.
2. 分离 axios 部分代码.
3. 增加 pinia 支持,全局状态代码迁移到相对应的 store.
4. 代码格式优化, 用 === 代替 ==.
5. 代码声明更改,用 const 代替 var 声明.
6. Header 使用 Router 导航.
7. v-for 增加 key.
  • Loading branch information
zhe28 committed Sep 20, 2024
1 parent dbb671d commit f2180ce
Show file tree
Hide file tree
Showing 20 changed files with 1,624 additions and 1,647 deletions.
4 changes: 3 additions & 1 deletion fe/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"element-plus": "^2.3.6",
"pinia": "^2.0.36",
"vue": "^3.3.2",
"vue-icons-plus": "^0.1.6",
"vue-router": "^4.2.0"
},
"devDependencies": {
Expand All @@ -23,6 +24,7 @@
"eslint-plugin-vue": "^9.11.0",
"unplugin-auto-import": "^0.16.4",
"unplugin-vue-components": "^0.25.0",
"vite": "^4.3.5"
"vite": "^4.3.5",
"vue-tsc": "^2.1.6"
}
}
22 changes: 11 additions & 11 deletions fe/src/App.vue
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
<script setup>
import { RouterView } from 'vue-router'
import {RouterView, useRoute} from 'vue-router'
import HomeHeader from '@/components/HomeHeader.vue'
import HomeAside from '@/components/HomeAside.vue';
import { watch, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {ref, watch} from 'vue'
const route = useRoute()
const pageName = ref(route.name)
watch(
() => route.fullPath,
(n, o) => {
pageName.value = route.name
}
() => route.fullPath,
() => {
pageName.value = route.name
}
)
</script>

<template>
<div id="main">
<HomeHeader />
<HomeHeader/>
<div id="content">
<div id="aside" v-if="pageName != 'login' && pageName != 'setup'">
<HomeAside />
<div id="aside" v-if="pageName !== 'login' && pageName !== 'setup'">
<HomeAside/>
</div>
<div id="body">
<RouterView />
<RouterView/>
</div>
</div>
</div>
Expand Down
139 changes: 70 additions & 69 deletions fe/src/components/GroupSettings.vue
Original file line number Diff line number Diff line change
@@ -1,98 +1,99 @@
<template>
<div id="main">
<el-tree :expand-on-click-node="false" :data="data" :props="defaultProps" :defaultExpandAll="true" :class="node">
<template #default="{ node, data }">
<div>
<span v-if="data.id != -1"> {{ data.label }}</span>
<el-input v-if="data.id == -1" v-model="data.label" @blur="onInputBlur(data)"></el-input>
<el-button v-if="data.id != 0" @click="del(node, data)" size="small" type="danger" circle> -
</el-button>
<el-button v-if="data.id != 0" @click="add(data)" size="small" type="primary" circle> + </el-button>
</div>
</template>
</el-tree>
<div id="main">
<el-tree :expand-on-click-node="false" :data="data" :props="defaultProps" :defaultExpandAll="true">
<template #default="{ node, data }">
<div>
<span v-if="data.id !== -1"> {{ data.label }}</span>
<el-input v-if="data.id === -1" v-model="data.label" @blur="onInputBlur(data)"></el-input>
<el-button v-if="data.id !== 0" @click="del(node, data)" size="small" type="danger" circle> -
</el-button>
<el-button v-if="data.id !== 0" @click="add(data)" size="small" type="primary" circle> +</el-button>
</div>
</template>
</el-tree>

<el-button @click="addRoot">{{ lang.add_group }}</el-button>
</div>
<el-button @click="addRoot">{{ lang.add_group }}</el-button>
</div>
</template>

<script setup>
import { reactive, ref, getCurrentInstance } from 'vue'
import {reactive} from 'vue'
import lang from '../i18n/i18n';
import {http} from "@/utils/axios";
import {ElMessage} from "element-plus";
import {defaultProps} from "element-plus/es/components/select-v2/src/useProps";
const data = reactive([])
const app = getCurrentInstance()
const $http = app.appContext.config.globalProperties.$http
$http.get('/api/group').then(res => {
data.push(...res.data)
http.get('/api/group').then(res => {
data.push(...res.data)
})
const del = function (node, data) {
if (data.id != -1) {
this.$axios.post("/api/group/del", { "id": data.id }).then(res => {
if (res.errorNo != 0) {
ElMessage({
message: res.errorMsg,
type: 'error',
})
} else {
const pc = node.parent.childNodes
for (let i = 0; i < pc.length; i++) {
if (pc[i].id == node.id) {
pc.splice(i, 1)
return
}
}
}
if (data.id !== -1) {
this.$axios.post("/api/group/del", {"id": data.id}).then(res => {
if (res.errorNo !== 0) {
ElMessage({
message: res.errorMsg,
type: 'error',
})
} else {
} else {
const pc = node.parent.childNodes
for (let i = 0; i < pc.length; i++) {
if (pc[i].id == node.id) {
pc.splice(i, 1)
return
}
if (pc[i].id === node.id) {
pc.splice(i, 1)
return
}
}
}
})
} else {
const pc = node.parent.childNodes
for (let i = 0; i < pc.length; i++) {
if (pc[i].id === node.id) {
pc.splice(i, 1)
return
}
}
}
}
const add = function (item) {
if (item.children == null) {
item.children = []
}
item.children.push({
"children": [],
"label": "",
"id": "-1",
"parent_id": item.id
})
if (item.children == null) {
item.children = []
}
item.children.push({
"children": [],
"label": "",
"id": "-1",
"parent_id": item.id
})
}
const addRoot = function () {
data.push({
"children": [],
"label": "",
"id": "-1",
"parent_id": 0
})
data.push({
"children": [],
"label": "",
"id": "-1",
"parent_id": 0
})
}
const onInputBlur = function (item) {
if (item.label != "") {
this.$axios.post("/api/group/add", { "name": item.label, "parent_id": item.parent_id }).then(res => {
if (res.errorNo != 0) {
ElMessage({
message: res.errorMsg,
type: 'error',
})
} else {
this.$axios.get('/api/group').then(res => {
data.splice(0, data.length)
data.push(...res.data)
})
}
if (item.label !== "") {
http.post("/api/group/add", {"name": item.label, "parent_id": item.parent_id}).then(res => {
if (res.errorNo !== 0) {
ElMessage({
message: res.errorMsg,
type: 'error',
})
}
} else {
this.$axios.get('/api/group').then(res => {
data.splice(0, data.length)
data.push(...res.data)
})
}
})
}
}
</script>
26 changes: 8 additions & 18 deletions fe/src/components/HomeAside.vue
Original file line number Diff line number Diff line change
@@ -1,34 +1,27 @@
<template>
<div id="main">
<input id="search" :placeholder="lang.search">
<el-tree :data="data" :props="defaultProps" :defaultExpandAll="true" @node-click="handleNodeClick" :class="node" />
<el-tree :data="data" :props="defaultProps" :defaultExpandAll="true" @node-click="handleNodeClick"/>
</div>
</template>


<script setup>
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import {useRouter} from 'vue-router'
import {ref} from 'vue'
import useGroupStore from '../stores/group'
import lang from '../i18n/i18n';
import { getCurrentInstance } from 'vue'
const app = getCurrentInstance()
const $http = app.appContext.config.globalProperties.$http
import {http} from "@/utils/axios";
import {defaultProps} from "element-plus/es/components/select-v2/src/useProps";
const groupStore = useGroupStore()
const router = useRouter()
const data = ref([])
$http.get('/api/group').then(res => {
data.value = res.data
http.get('/api/group').then(res => {
if (res.data) data.value = res.data
})
const handleNodeClick = function (data) {
if (data.tag != null) {
groupStore.name = data.label
Expand All @@ -38,9 +31,6 @@ const handleNodeClick = function (data) {
})
}
}
</script>


Expand All @@ -65,7 +55,7 @@ const handleNodeClick = function (data) {
background-color: #F1F1F1;
}
.add_group{
.add_group {
font-size: 14px;
text-align: left;
padding-left: 15px;
Expand Down
Loading

0 comments on commit f2180ce

Please sign in to comment.