更新

src/components/common/Home.vue

@@ -6,9 +6,7 @@
       <v-tags></v-tags>
       <div class="content">
         <transition name="move" mode="out-in">
-          <keep-alive :include="tagsList">
-            <router-view></router-view>
-          </keep-alive>
+          <router-view></router-view>
         </transition>
         <el-backtop target=".content"></el-backtop>
       </div>

src/components/common/Sidebar.vue

@@ -54,8 +54,20 @@ export default {
         },
         {
           icon: 'el-icon-s-home',
-          index: 'test',
-          title: '测试菜单',
+          index: '2',
+          title: '添加数据模板',
+          subs: [
+            {
+              icon: 'el-icon-s-home',
+              index: 'dialogs',
+              title: '弹框式添加数据',
+            },
+            {
+              icon: 'el-icon-s-home',
+              index: 'route',
+              title: '跳转页面式添加数据',
+            },
+          ],
         },
         {
           icon: 'el-icon-s-home',

src/router/index.js

@@ -21,10 +21,21 @@ export default new Router({
           meta: { title: '系统首页' },
         },
         {
-          path: '/test',
-          component: () => import('../views/test/index.vue'),
-          meta: { title: '测试菜单' },
+          path: '/dialogs',
+          component: () => import('../views/test/dialogs.vue'),
+          meta: { title: '弹框式添加数据' },
         },
+        {
+          path: '/route',
+          component: () => import('../views/test/route.vue'),
+          meta: { title: '跳转页面式添加数据' },
+        },
+        {
+          path: '/routeDetail',
+          component: () => import('../views/test/routeDetail.vue'),
+          meta: { title: '信息管理' },
+        },
+
         {
           path: '/lunbo',
           component: () => import('../views/lunbo/index.vue'),

src/views/test/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="index">
+  <div id="dialogs">
     <el-row>
       <el-col :span="24">
         <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
@@ -51,7 +51,7 @@ export default {
   metaInfo() {
     return { title: this.$route.meta.title };
   },
-  name: 'index',
+  name: 'dialogs',
   props: {},
   components: {
     breadcrumb,

src/views/test/route.vue

@@ -0,0 +1,84 @@
+<template>
+  <div id="route">
+    <el-row>
+      <el-col :span="24">
+        <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+        <el-col :span="24" class="container">
+          <el-col :span="24" style="margin:15px 0;text-align:right;">
+            <el-button type="primary" size="mini" @click="add()">添加</el-button>
+          </el-col>
+          <el-col :span="24">
+            <el-table :data="list" style="width: 100%">
+              <el-table-column prop="name" label="名称" align="center"> </el-table-column>
+              <el-table-column prop="create_time" label="创建时间" align="center"> </el-table-column>
+              <el-table-column label="操作" align="center">
+                <template slot-scope="scope">
+                  <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
+                  <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import breadcrumb from '@c/common/breadcrumb.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: lunbo } = createNamespacedHelpers('lunbo');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'route',
+  props: {},
+  components: {
+    breadcrumb,
+  },
+  data: function() {
+    return {
+      list: [],
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...lunbo(['query', 'fetch', 'create', 'update', 'delete']),
+    // 查询列表
+    async search({ skip = 0, limit = 10, ...info } = {}) {
+      let res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        this.$set(this, `list`, res.data);
+      }
+    },
+    // 删除
+    async handleDelete(data) {
+      let res = await this.delete(data.id);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '创建成功',
+          type: 'success',
+        });
+        this.search();
+      }
+    },
+    // 添加数据
+    add() {
+      this.$router.push('/routeDetail');
+    },
+    // 修改数据
+    handleEdit(data) {
+      this.$router.push({ path: '/routeDetail', query: { id: data.id } });
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/test/routeDetail.vue

@@ -0,0 +1,128 @@
+<template>
+  <div id="route">
+    <el-row>
+      <el-col :span="24">
+        <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+        <el-col :span="24" class="container">
+          <el-col :span="24" style="margin:0 0 15px 0;text-align:right;">
+            <el-button type="primary" size="mini" @click="back()">返回</el-button>
+          </el-col>
+          <el-col :span="24">
+            <el-form :model="form" :rules="rules" ref="form" label-width="100px">
+              <el-form-item label="名称" prop="name">
+                <el-input v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item label="图片地址">
+                <upload :limit="1" :data="form.filepath" type="filepath" :url="'/files/filepath/upload'" @upload="uploadSuccess"></upload>
+              </el-form-item>
+              <el-form-item label="创建时间" prop="create_time">
+                <el-date-picker type="date" placeholder="选择日期" v-model="form.create_time" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" @click="submitForm('form')">保存</el-button>
+              </el-form-item>
+            </el-form>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import upload from '@/components/frame/uploadone.vue';
+import breadcrumb from '@c/common/breadcrumb.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: lunbo } = createNamespacedHelpers('lunbo');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'route',
+  props: {},
+  components: {
+    breadcrumb,
+    upload,
+  },
+  data: function() {
+    return {
+      form: {},
+      rules: {
+        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+        create_time: [{ required: true, message: '请选择日期', trigger: 'change' }],
+      },
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...lunbo(['query', 'fetch', 'create', 'update', 'delete']),
+    // 查询列表
+    async search() {
+      if (this.id) {
+        let res = await this.fetch(this.id);
+        if (this.$checkRes(res)) {
+          this.$set(this, `form`, res.data);
+        }
+      }
+    },
+    // 提交
+    submitForm(formName) {
+      this.$refs[formName].validate(async valid => {
+        if (valid) {
+          let data = this.form;
+          if (data.id) {
+            let res = await this.update(data);
+            if (this.$checkRes(res)) {
+              this.$message({
+                message: '修改成功',
+                type: 'success',
+              });
+              this.back();
+            }
+          } else {
+            let res = await this.create(data);
+            if (this.$checkRes(res)) {
+              this.$message({
+                message: '创建成功',
+                type: 'success',
+              });
+              this.back();
+            }
+          }
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    // 返回列表
+    back() {
+      this.$set(this, `form`, {});
+      this.$router.push({ path: '/route' });
+    },
+    // 图片
+    uploadSuccess({ type, data }) {
+      this.$set(this.form, `${type}`, data.uri);
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+    id() {
+      return this.$route.query.id;
+    },
+  },
+  watch: {
+    id: {
+      deep: true,
+      immediate: true,
+      handler(val) {
+        this.search();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>