更新

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,10 +54,22 @@ 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',
           index: 'lunbo',
           title: '轮播测试',

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/store/lunbo.js

@@ -4,32 +4,42 @@ import Vuex from 'vuex';
 import _ from 'lodash';
 Vue.use(Vuex);
 const api = {
+  //接口地址
   lunboInfo: `/api/huanqi/lunbo`,
 };
 const state = () => ({});
 const mutations = {};
 
 const actions = {
+  //查询列表 skip:第一页,limit:第一页显示的数据，info:其余查询参数
   async query({ commit }, { skip = 0, limit, ...info } = {}) {
+    //连接接口。。。。
     const res = await this.$axios.$get(`${api.lunboInfo}`, {
       skip,
       limit,
       ...info,
     });
+    //把数据集合res返回
     return res;
   },
+  //创建数据  payload是添加form表单中的数据集合  创建数据的时候需要拿到form表单里面的数据
   async create({ commit }, payload) {
+    //通过$axios提交post请求????
     const res = await this.$axios.$post(`${api.lunboInfo}`, payload);
     return res;
   },
+  //查询详情，payload：参数位，一般传当前数据id
   async fetch({ commit }, payload) {
+    //有/一般都是路径
     const res = await this.$axios.$get(`${api.lunboInfo}/${payload}`);
     return res;
   },
+  //修改：id: 当前数据id, data: 当前修改数据的新form表单
   async update({ commit }, { id, ...data }) {
     const res = await this.$axios.$post(`${api.lunboInfo}/update/${id}`, data);
     return res;
   },
+  //删除：payload：参数位，一般传当前数据id
   async delete({ commit }, payload) {
     const res = await this.$axios.$delete(`${api.lunboInfo}/${payload}`);
     return res;

src/views/lunbo/index.vue

@@ -2,65 +2,75 @@
   <div id="index">
     <el-row>
       <el-col :span="24">
-        <el-button type="text" @click="dialogFormVisible = true">添加</el-button>
-        <el-dialog title="轮播信息" :visible.sync="dialogFormVisible">
-          <el-form :model="form">
-            <el-form-item label="名称" :label-width="formLabelWidth">
-              <el-input v-model="form.name" autocomplete="off"></el-input>
-            </el-form-item>
-            <el-form-item label="图片路径" :label-width="formLabelWidth">
-              <el-input v-model="form.filepath" autocomplete="off"></el-input>
-            </el-form-item>
-            <el-form-item label="发布时间" :label-width="formLabelWidth">
-              <!-- <el-input v-model="form.create_time" autocomplete="off"></el-input> -->
-              <div class="block">
-                <!-- <span class="demonstration">设置默认时间</span> -->
-                <el-date-picker v-model="value3" type="datetime" placeholder="选择日期时间" default-time="12:00:00"> </el-date-picker>
-              </div>
-            </el-form-item>
-          </el-form>
-          <div slot="footer" class="dialog-footer">
-            <el-button @click="dialogFormVisible = false">取 消</el-button>
-            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
-          </div>
-        </el-dialog>
-      </el-col>
-      <el-col :span="24">
-        <el-table :data="tableData" style="width: 100%">
-          <el-table-column prop="name" label="名称" width="180"> </el-table-column>
-          <el-table-column prop="filepath" label="图片路径" width="180"> </el-table-column>
-          <el-table-column prop="create_time" label="发布时间"> </el-table-column>
-          <el-table-column label="操作">
-            <template slot-scope="scope">
-              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+        <!-- 哪个组件活跃就显示哪个的meta的title -->
+        <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+        <el-col :span="24" class="contain">
+          <!-- text-align: right 按钮移到右侧 -->
+          <el-col :span="24" style="margin:15px 0;text-align:right;">
+            <el-button type="primary" size="mini" @click="dialogFormVisible = true">添加</el-button>
+          </el-col>
+          <el-col :span="24">
+            <template>
+              <el-table :data="list" style="width: 100%">
+                <el-table-column prop="name" label="名称" width="180"> </el-table-column>
+                <el-table-column prop="create_time" label="创建时间" width="180"> </el-table-column>
+                <el-table-column label="操作">
+                  <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>
             </template>
-          </el-table-column>
-        </el-table>
+          </el-col>
+        </el-col>
       </el-col>
     </el-row>
+    <!-- dialog与el-row实同一级的代码 不用和Button写在一起他们俩通过dialogTableVisible绑定在一起-->
+    <el-dialog title="轮播测试" :visible.sync="dialogFormVisible">
+      <el-form :model="form">
+        <el-form-item label="名称" :label-width="formLabelWidth">
+          <el-input v-model="form.name" auto-complete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="图片地址" :label-width="formLabelWidth">
+          <upload :limit="1" :data="form.filepath" type="filepath" :url="'/files/filepath/upload'" @upload="uploadSuccess"></upload>
+        </el-form-item>
+        <el-form-item label="创建时间" :label-width="formLabelWidth">
+          <el-date-picker v-model="form.create_time" type="date" placeholder="选择日期"> </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="hide">取 消</el-button>
+        <el-button type="primary" @click="onSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import { mapState, createNamespacedHelpers } from 'vuex';
+//引用upload
+import upload from '@/components/frame/uploadone.vue';
+//引用breadcrumb组件来显示上面的小title
+import breadcrumb from '@c/common/breadcrumb.vue';
+//页面引用文件lunbo
 const { mapActions: lunbo } = createNamespacedHelpers('lunbo');
 export default {
+  metaInfo() {
+    return { title: this.route.meta.title };
+  },
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    breadcrumb,
+    upload,
+  },
   data: function() {
     return {
-      tableData: [],
-      dialogTableVisible: false,
       dialogFormVisible: false,
-      form: {
-        name: '',
-        filepath: '',
-        create_time: '',
-      },
       formLabelWidth: '120px',
-      value3: '',
+      form: {},
+      list: [],
     };
   },
   created() {
@@ -71,59 +81,55 @@ export default {
     async search({ skip = 0, limit = 10, ...info } = {}) {
       let res = await this.query({ skip, limit, ...info });
       if (this.$checkRes(res)) {
-        this.$set(this, `tableData`, res.data);
+        this.$set(this, `list`, res.data);
       }
     },
+    hide() {
+      dialogFormVisible = false;
+      form = {};
+    },
     async onSubmit() {
       // this.form的数据集合用data变量接收
       let data = this.form; // 判断data中有无id,有id:走修改，无id:走创建
       if (data.id) {
         const res = await this.update(data);
         if (this.$checkRes(res)) {
-          // vant组件中，消息提示方法
-          this.$notify({
+          this.$message({
             message: '修改成功',
             type: 'success',
-          }); // 执行完方法，修改再走一遍查询，查询数据更新之后的数据
-          this.search();
+          });
         }
       } else {
         const res = await this.create(data);
         if (this.$checkRes(res)) {
-          this.$notify({
-            message: '添加成功',
+          this.$message({
+            message: '修改成功',
             type: 'success',
           });
-          this.search();
         }
       }
+      this.hide();
     },
-    // handleEdit(index, row) {
-    //   console.log(index, row);
-    // },
-    async handleDelete(row) {
-      // console.log(index, row);
-      const res = await this.delete(row.id);
+    async handleDelete(data) {
+      let res = await this.delete(data.id);
       if (this.$checkRes(res)) {
         this.$message({
-          message: '恭喜你，这是一条成功消息',
+          message: '创建成功',
           type: 'success',
         });
         this.search();
       }
     },
-    // dialogFormVisible() {
-
-    // },
+    handleEdit(data) {
+      this.$set(this, `form`, data);
+      this.dialogFormVisible = true;
+    },
+    uploadSuccess({ type, data }) {
+      this.$set(this.form, `${type}`, data.uri);
+    },
   },
   computed: {
     ...mapState(['user']),
-    pageTitle() {
-      return `${this.$route.meta.title}`;
-    },
-  },
-  metaInfo() {
-    return { title: this.$route.meta.title };
   },
 };
 </script>

src/views/test/index.vue

@@ -1,133 +0,0 @@
-<template>
-  <div id="index">
-    <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="dialogFormVisible = true">添加</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>
-    <el-dialog title="轮播图" :visible.sync="dialogFormVisible">
-      <el-form :model="form">
-        <el-form-item label="名称" label-width="120px">
-          <el-input v-model="form.name" autocomplete="off"></el-input>
-        </el-form-item>
-        <el-form-item label="图片地址" label-width="120px">
-          <upload :limit="1" :data="form.filepath" type="filepath" :url="'/files/filepath/upload'" @upload="uploadSuccess"></upload>
-        </el-form-item>
-        <el-form-item label="创建时间" label-width="120px">
-          <el-date-picker v-model="form.create_time" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"> </el-date-picker>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" style="text-align:center">
-        <el-button @click="quSeve()">取 消</el-button>
-        <el-button type="primary" @click="onSubmit()">确 定</el-button>
-      </div>
-    </el-dialog>
-  </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: 'index',
-  props: {},
-  components: {
-    breadcrumb,
-    upload,
-  },
-  data: function() {
-    return {
-      list: [],
-      dialogFormVisible: false,
-      form: {},
-    };
-  },
-  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 onSubmit() {
-      let data = this.form;
-      if (data.id) {
-        let res = await this.update(data);
-        if (this.$checkRes(res)) {
-          this.$message({
-            message: '修改成功',
-            type: 'success',
-          });
-        }
-      } else {
-        let res = await this.create(data);
-        if (this.$checkRes(res)) {
-          this.$message({
-            message: '创建成功',
-            type: 'success',
-          });
-        }
-      }
-      this.quSeve();
-    },
-    // 取消
-    quSeve() {
-      this.form = {};
-      this.dialogFormVisible = false;
-    },
-    // 修改
-    handleEdit(data) {
-      this.dialogFormVisible = true;
-      this.$set(this, `form`, data);
-    },
-    // 删除
-    async handleDelete(data) {
-      let res = await this.delete(data.id);
-      if (this.$checkRes(res)) {
-        this.$message({
-          message: '创建成功',
-          type: 'success',
-        });
-        this.search();
-      }
-    },
-    // 图片
-    uploadSuccess({ type, data }) {
-      this.$set(this.form, `${type}`, data.uri);
-    },
-  },
-  computed: {
-    ...mapState(['user']),
-  },
-};
-</script>
-
-<style lang="less" scoped></style>