class接口对接

.env

@@ -1,3 +1,4 @@
 VUE_APP_AXIOS_BASE_URL = ''
 VUE_APP_ROOT_URL=/admin/
 VUE_APP_MODULE='center'
+VUE_APP_LIMIT = 10

src/plugins/axios.js

@@ -11,11 +11,13 @@ const Plugin = {
       created() {
         if (this.$store && !this.$store.$axios) {
           this.$store.$axios = this.$axios;
+          this.$store.$limit = process.env.VUE_APP_LIMIT;
         }
       },
     });
     // 4. 添加实例方法
     vue.prototype.$axios = new AxiosWrapper(options);
+    vue.prototype.$limit = process.env.VUE_APP_LIMIT;
   },
 };
 

src/router/index.js

@@ -52,7 +52,7 @@ const routes = [
       },
       {
         path: '/teacher/means',
-        name: 'teacher_index',
+        name: 'teacher_means',
         component: () => import('@/views/teacher/means.vue'),
       },
       {
@@ -67,13 +67,13 @@ const routes = [
       },
       {
         path: '/work/look',
-        name: 'index_index',
+        name: 'work_look',
         component: () => import('@/views/work/look.vue'),
       },
 
       {
         path: '/work/lookdetail',
-        name: 'index_index',
+        name: 'work_lookdetail',
         component: () => import('@/views/work/lookdetail.vue'),
       },
       {

src/store/classes.js

@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import _ from 'lodash';
+Vue.use(Vuex);
+const api = {
+  class: `/api/class`,
+};
+const state = () => ({});
+const mutations = {};
+
+const actions = {
+  async query({ commit }, { skip = 0, limit = this.$limit, ...info }) {
+    const res = await this.$axios.$get(`${api.class}`, { skip, limit, ...info });
+    return res;
+  },
+  async create({ commit }, payload) {
+    const res = await this.$axios.$post(`${api.class}`, payload);
+    return res;
+  },
+  async fetch({ commit }, payload) {
+    const res = await this.$axios.$get(`${api.class}/${payload}`);
+    return res;
+  },
+  async update({ commit }, { id, ...data }) {
+    const res = await this.$axios.$post(`${api.class}/update/${id}`, data);
+    return res;
+  },
+  async delete({ commit }, payload) {
+    const res = await this.$axios.$delete(`${api.class}/${payload}`);
+    return res;
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/store/index.js

@@ -1,11 +1,13 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-
+import classes from './classes';
 Vue.use(Vuex);
 
 export default new Vuex.Store({
+  modules: {
+    classes,
+  },
   state: {},
   mutations: {},
   actions: {},
-  modules: {},
 });

src/views/classes/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="detail">
     <detail-frame title="班级信息" returns="/classes/index">
-      <data-form :data="info" :fields="fields" :rules="rules" @save="handleSave" :isNew="isNew"> </data-form>
+      <data-form v-loading="loading" :data="info" :fields="fields" :rules="rules" @save="handleSave" :isNew="isNew"> </data-form>
     </detail-frame>
   </div>
 </template>
@@ -9,6 +9,8 @@
 <script>
 import detailFrame from '@frame/layout/admin/detail-frame';
 import dataForm from '@frame/components/form';
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapClass } = createNamespacedHelpers('classes');
 export default {
   metaInfo: { title: '班级信息' },
   name: 'detail',
@@ -18,28 +20,56 @@ export default {
     dataForm,
   },
   data: () => ({
+    loading: true,
     info: {},
     fields: [
       { label: '班级名称', required: true, model: 'name' },
-      { label: '人数', required: true, model: 'num' },
+      { label: '人数', required: true, model: 'number' },
       { label: '批次', required: true, model: 'batch' },
     ],
     rules: {
       name: [{ required: true, message: '请输入班级名称' }],
-      num: [{ required: true, message: '请输入人数' }],
+      number: [{ required: true, message: '请输入人数' }],
       batch: [{ required: true, message: '请输入批次' }],
     },
   }),
   created() {},
   computed: {
+    id() {
+      return this.$route.query.id;
+    },
     isNew() {
       return this.$route.query.id ? false : true;
     },
   },
+  watch: {
+    isNew: {
+      immediate: true,
+      handler(val) {
+        if (val) this.loading = false;
+        else this.search();
+      },
+    },
+  },
   methods: {
+    ...mapClass(['fetch', 'create', 'update']),
+    async search() {
+      const res = await this.fetch(this.id);
+      console.log(res);
+      if (this.$checkRes(res)) this.$set(this, `info`, res.data);
+      this.loading = false;
+    },
     async handleSave({ isNew, data }) {
-      console.log(isNew);
-      console.log(data);
+      let res;
+      let msg;
+      if (isNew) {
+        res = this.create(data);
+        msg = '班级添加成功';
+      } else {
+        res = this.update(data);
+        msg = '班级修改成功';
+      }
+      if (this.$checkRes(res, msg)) this.$router.push({ path: '/classes/index' });
     },
   },
 };

src/views/classes/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="index">
-    <list-frame title="班级管理" @query="search" :needFilter="false" @add="$router.push({ path: '/classes/detail' })">
-      <data-table :fields="fields" :data="list" :opera="opera" @edit="toEdit" @deltet="toDelete"></data-table>
+    <list-frame title="班级管理" @query="search" :total="total" :needFilter="false" @add="$router.push({ path: '/classes/detail' })">
+      <data-table :fields="fields" :data="list" :opera="opera" @edit="toEdit" @delete="toDelete"></data-table>
     </list-frame>
   </div>
 </template>
@@ -9,6 +9,8 @@
 <script>
 import listFrame from '@frame/layout/admin/list-frame';
 import dataTable from '@frame/layout/admin/data-table';
+import { mapActions, mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: mapClass } = createNamespacedHelpers('classes');
 export default {
   metaInfo: { title: '班级管理' },
   name: 'index',
@@ -28,32 +30,41 @@ export default {
         label: '删除',
         icon: 'el-icon-delete',
         method: 'delete',
+        confirm: true,
+        methodZh: '删除',
       },
     ],
     fields: [
       { label: '班级名称', prop: 'name' },
-      { label: '人数', prop: 'num' },
+      { label: '人数', prop: 'number' },
       { label: '批次', prop: 'batch' },
     ],
-    list: [
-      { id: 1, name: '501', batch: '1', num: 6 },
-      { id: 2, name: '502', batch: '2', num: 4 },
-    ],
+    list: [],
+    total: 0,
   }),
-  created() {},
+  created() {
+    this.search();
+  },
   computed: {},
   methods: {
-    search({ skip = 0, limit = 15, ...info } = {}) {
-      console.log(`in search`);
+    ...mapClass(['query', 'delete']),
+    async search({ skip = 0, limit = 15, ...info } = {}) {
+      const res = await this.query({ skip, limit, ...info });
+      if (this.$checkRes(res)) {
+        console.log(res);
+        this.$set(this, `list`, res.data);
+        this.$set(this, `total`, res.total);
+      }
     },
     toEdit(data) {
-      console.log(`in toEdit`);
-      console.log(data);
-      this.$router.push({ path: '/place/detail', query: { id: data.id } });
+      this.$router.push({ path: '/classes/detail', query: { id: data.id } });
     },
-    toDelete(data) {
+    async toDelete(data) {
       console.log(`in toDelete`);
       console.log(data);
+      const res = await this.delete(data.id);
+      this.$checkRes(res, '删除成功', '删除失败');
+      this.search();
     },
   },
 };

src/views/test/list.vue

@@ -78,6 +78,7 @@ export default {
     toEdit(data) {
       console.log(`in toEdit`);
       console.log(data);
+      return data;
     },
   },
 };

vue.config.js

@@ -22,7 +22,7 @@ module.exports = {
     //api地址前缀
     proxy: {
       '/api': {
-        target: 'http://smart.cc-lotus.info',
+        target: 'http://10.16.9.108:8001',
         changeOrigin: true,
         ws: true,
       },