shaogen1995 3 anni fa
parent
commit
e8051d695a

+ 1 - 1
houtai/public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>江门市中国传统村落一张图-管理后台</title>
+    <title>传统村落一张图-管理后台</title>
   </head>
   <body>
     <noscript>

BIN
houtai/src/assets/img/IMGerror.png


BIN
houtai/src/assets/img/user.jpg


+ 8 - 15
houtai/src/main.js

@@ -4,23 +4,16 @@ import 'element-ui/lib/theme-chalk/index.css'
 import App from './App.vue'
 import router from './router'
 import './assets/css/base.css'
-import Moment from 'moment'
 
-// 留言和论坛的下拉刷新
-import { List } from 'vant'
-import 'vant/lib/index.css'
-Vue.use(List)
-
-Vue.prototype.moment = Moment
 Vue.config.productionTip = false
-const imgErr = {
-  data () {
-    return {
-      defaultImg: 'this.src="' + require('./assets/img/IMGerror.png') + '"'
-    }
-  }
-}
-Vue.mixin(imgErr)
+// const imgErr = {
+//   data () {
+//     return {
+//       defaultImg: 'this.src="' + require('./assets/img/IMGerror.png') + '"'
+//     }
+//   }
+// }
+// Vue.mixin(imgErr)
 Vue.use(ElementUI)
 new Vue({
   router,

+ 6 - 0
houtai/src/router/index.js

@@ -21,6 +21,12 @@ const routes = [
         component: () => import('../views/tab1/index.vue')
       },
       {
+        path: 'tab1Main/:id/:k',
+        name: 'tab1Main',
+        meta: { myInd: 1 },
+        component: () => import('../views/tab1Main/index.vue')
+      },
+      {
         path: 'tab2',
         name: 'tab2',
         meta: { myInd: 2 },

+ 2 - 2
houtai/src/views/layout/index.vue

@@ -154,9 +154,9 @@ export default {
           localStorage.clear('SWKK_token')
           localStorage.clear('SWKK_userInfo')
           this.$router.push('/')
-        } else this.$message.warning(res.msg)
+        } else this.$message.error(res.msg)
       } catch (error) {
-        this.$message.error('旧密码错误')
+        console.log(error)
       }
     },
     push (url) {

+ 3 - 7
houtai/src/views/tab1/index.vue

@@ -22,7 +22,7 @@
           <el-table-column prop="time" label="最近更新时间"></el-table-column>
           <el-table-column label="操作">
             <template #default="{ row }">
-              <el-button type="text" @click="editVillage(row.id)"
+              <el-button type="text" @click="$router.push(`/layout/tab1Main/${row.id}/1.1`)"
                 >编辑</el-button
               >
             </template>
@@ -43,7 +43,7 @@ export default {
       name: '',
       tableData: [
         { name: '东宁村', id: 1, time: '2022-03-25 10:48:16' },
-        { name: '良溪村', id: 1, time: '2022-03-25 10:48:16' },
+        { name: '良溪村', id: 2, time: '2022-03-25 10:48:16' },
         { name: '卢边村', id: 1, time: '2022-03-25 10:48:16' },
         { name: '田心村', id: 1, time: '2022-03-25 10:48:16' },
         { name: '仓前村', id: 1, time: '2022-03-25 10:48:16' },
@@ -62,11 +62,7 @@ export default {
   // 监控data中的数据变化
   watch: {},
   // 方法集合
-  methods: {
-    editVillage (id) {
-      console.log(id)
-    }
-  },
+  methods: {},
   // 生命周期 - 创建完成(可以访问当前this实例)
   created () {},
   // 生命周期 - 挂载完成(可以访问DOM元素)

+ 45 - 0
houtai/src/views/tab1Main/four.vue

@@ -0,0 +1,45 @@
+<!--  -->
+<template>
+<div class='four'>four</div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  methods: {
+
+  },
+  // 生命周期 - 创建完成(可以访问当前this实例)
+  created () {
+
+  },
+  // 生命周期 - 挂载完成(可以访问DOM元素)
+  mounted () {
+
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能,这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.four{
+  width: 100%;
+  height: 100%;
+  background-color: blue;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

+ 197 - 0
houtai/src/views/tab1Main/index.vue

@@ -0,0 +1,197 @@
+<template>
+  <div class="tab1Main">
+    <div class="insideTop">资料管理</div>
+    <div class="obstruct"></div>
+    <div class="conten">
+      <div class="top">编辑资料</div>
+      <div class="left">
+        <div class="name">卢边村</div>
+        <div class="row" v-for="(item, index) in data" :key="index">
+          <div class="rowOne el-icon-menu" @click="cutTab(item.id)">
+            <span class="txt">{{ item.name }}</span>
+            <i
+              :class="`${
+                tabInd === item.id ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
+              }`"
+            ></i>
+          </div>
+          <div
+            class="rowList"
+            :class="{
+              open: tabInd === item.id,
+              active: $route.params.k == val.id,
+            }"
+            @click="
+              $router.push(`/layout/tab1Main/${$route.params.id}/${val.id}`)
+            "
+            v-for="(val, ind) in item.son"
+            :key="ind"
+          >
+            {{ val.tit }}
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <One v-if="$route.params.k == 1.1" />
+        <Tow v-else-if="$route.params.k == 1.2" />
+        <Three v-else-if="$route.params.k == 1.3" />
+        <Four v-else />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import One from './one.vue'
+import Tow from './tow.vue'
+import Three from './three.vue'
+import Four from './four.vue'
+export default {
+  name: 'tab1Main',
+  components: { One, Tow, Three, Four },
+  data () {
+    // 这里存放数据
+    return {
+      tabInd: 1,
+      data: [
+        {
+          name: '历史文化',
+          id: 1,
+          son: [
+            { tit: '建村历史', id: 1.1 },
+            { tit: '历史人物', id: 1.2 },
+            { tit: '历史事件', id: 1.3 },
+            { tit: '族谱家训', id: 1.4 },
+            { tit: '口述史', id: 1.5 },
+            { tit: '视频集', id: 1.6 }
+          ]
+        },
+        {
+          name: '环境格局',
+          id: 2,
+          son: [
+            { tit: '村落选址', id: 2.1 },
+            { tit: '村落格局', id: 2.2 },
+            { tit: '建村智慧', id: 2.3 },
+            { tit: '自然环境', id: 2.4 },
+            { tit: '风景名胜', id: 2.5 },
+            { tit: '文物古迹', id: 2.6 },
+            { tit: '历史环境要素', id: 2.7 }
+          ]
+        },
+        {
+          name: '传统建筑',
+          id: 3,
+          son: [
+            { tit: '建筑信息', id: 3.1 },
+            { tit: '村落风貌', id: 3.2 },
+            { tit: '视频集', id: 3.3 }
+          ]
+        }
+      ]
+    }
+  },
+  // 监听属性 类似于data概念
+  computed: {},
+  // 监控data中的数据变化
+  watch: {},
+  // 方法集合
+  methods: {
+    cutTab (id) {
+      if (this.tabInd === id) {
+        this.tabInd = null
+        return
+      }
+      this.tabInd = id
+      let k = Number(this.$route.params.k)
+      k = Math.floor(k)
+      if (this.tabInd !== k) {
+        this.$router.push(`/layout/tab1Main/${this.$route.params.id}/${id}.1`)
+      }
+    }
+  },
+  // 生命周期 - 创建完成(可以访问当前this实例)
+  created () {},
+  // 生命周期 - 挂载完成(可以访问DOM元素)
+  mounted () {
+    const k = Number(this.$route.params.k)
+    this.tabInd = Math.floor(k)
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能,这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tab1Main {
+  width: 100%;
+  height: 100%;
+  .conten {
+    display: flex;
+    position: relative;
+    padding: 34px 20px 0;
+    height: calc(100% - 50px);
+    .top {
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 34px;
+      line-height: 34px;
+      width: 100%;
+      background-color: #f2f1f0;
+      font-weight: 700;
+      padding-left: 30px;
+    }
+    .left {
+      padding-top: 10px;
+      width: 140px;
+      height: 100%;
+      border-right: 1px solid #d7d7d7;
+      .row {
+        margin-top: 20px;
+        .rowOne {
+          cursor: pointer;
+          width: 100%;
+          position: relative;
+          i {
+            position: absolute;
+            top: 50%;
+            right: 5px;
+            transform: translateY(-50%);
+          }
+          .txt {
+            margin-left: 10px;
+          }
+        }
+        .rowList {
+          cursor: pointer;
+          padding-left: 18px;
+          height: 0;
+          overflow: hidden;
+          transition: margin 0.3s;
+          &:hover {
+            color: #a30014;
+          }
+        }
+        .open {
+          margin-top: 10px;
+          height: auto;
+        }
+        .active {
+          pointer-events: none;
+          color: #a30014;
+        }
+      }
+    }
+    .right {
+      width: calc(100% - 140px);
+      height: 100%;
+      overflow-y: auto;
+    }
+  }
+}
+</style>

+ 45 - 0
houtai/src/views/tab1Main/one.vue

@@ -0,0 +1,45 @@
+<!--  -->
+<template>
+<div class='one'>one</div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  methods: {
+
+  },
+  // 生命周期 - 创建完成(可以访问当前this实例)
+  created () {
+
+  },
+  // 生命周期 - 挂载完成(可以访问DOM元素)
+  mounted () {
+
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能,这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.one{
+  width: 100%;
+  height: 100%;
+  background-color: aliceblue;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

+ 45 - 0
houtai/src/views/tab1Main/three.vue

@@ -0,0 +1,45 @@
+<!--  -->
+<template>
+<div class='three'>three</div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  methods: {
+
+  },
+  // 生命周期 - 创建完成(可以访问当前this实例)
+  created () {
+
+  },
+  // 生命周期 - 挂载完成(可以访问DOM元素)
+  mounted () {
+
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能,这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.three{
+  width: 100%;
+  height: 100%;
+  background-color: red;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>

+ 45 - 0
houtai/src/views/tab1Main/tow.vue

@@ -0,0 +1,45 @@
+<!--  -->
+<template>
+<div class='tow'>tow</div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data () {
+    return {
+
+    }
+  },
+  computed: {},
+  methods: {
+
+  },
+  // 生命周期 - 创建完成(可以访问当前this实例)
+  created () {
+
+  },
+  // 生命周期 - 挂载完成(可以访问DOM元素)
+  mounted () {
+
+  },
+  beforeCreate () {}, // 生命周期 - 创建之前
+  beforeMount () {}, // 生命周期 - 挂载之前
+  beforeUpdate () {}, // 生命周期 - 更新之前
+  updated () {}, // 生命周期 - 更新之后
+  beforeDestroy () {}, // 生命周期 - 销毁之前
+  destroyed () {}, // 生命周期 - 销毁完成
+  activated () {} // 如果页面有keep-alive缓存功能,这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.tow{
+  width: 100%;
+  height: 100%;
+  background-color: orange;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>