更新

src/App.vue

@@ -21,6 +21,8 @@ export default {
 
 <style>
 @import './assets/css/main.css';
-@import './assets/css/color-dark.css'; /*深色主题*/
-/*@import "./assets/css/theme-green/color-green.css";   浅绿色主题*/
+/*深色主题*/
+@import './assets/css/color-dark.css';
+/* 浅绿色主题*/
+/* @import './assets/css/theme-green/color-green.css'; */
 </style>

src/components/common/Sidebar.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="sidebar">
+    <!-- background-color="#07c4a8" text-color="#666" active-text-color="#fff" -->
     <el-menu
       class="sidebar-el-menu"
       :default-active="onRoutes"
@@ -51,6 +52,11 @@ export default {
           index: 'homeIndex',
           title: '系统首页',
         },
+        {
+          icon: 'el-icon-s-home',
+          index: 'company',
+          title: '企业信息',
+        },
       ],
     };
   },

src/components/common/breadcrumb.vue

@@ -0,0 +1,33 @@
+<template>
+  <div id="breadcrumb">
+    <el-row>
+      <el-col :span="24" class="crumbs">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item> <i class="el-icon-s-grid"></i> {{ breadcrumbTitle }} </el-breadcrumb-item>
+        </el-breadcrumb>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { mapState, createNamespacedHelpers } from 'vuex';
+export default {
+  metaInfo: {},
+  name: 'breadcrumb',
+  props: {
+    breadcrumbTitle: { type: String },
+  },
+  components: {},
+  data: function() {
+    return {};
+  },
+  created() {},
+  methods: {},
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/main.js

@@ -31,7 +31,7 @@ const i18n = new VueI18n({
 
 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
-  document.title = `${to.meta.title} | adminsys`;
+  document.title = `${to.meta.title} `;
   const user = localStorage.getItem('user');
   if (!user && to.path !== '/login') {
     next('/login');

src/router/index.js

@@ -23,7 +23,12 @@ export default new Router({
         {
           path: '/test',
           component: () => import('../views/test/index.vue'),
-          meta: { title: '测试页面' },
+          meta: { title: '测试菜单' },
+        },
+        {
+          path: '/company',
+          component: () => import('../views/company/index.vue'),
+          meta: { title: '企业信息' },
         },
       ],
     },

src/store/company.js

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

src/store/index.js

@@ -3,6 +3,7 @@ import Vuex from 'vuex';
 import * as ustate from './user/state';
 import * as umutations from './user/mutations';
 import login from './login';
+import company from './company';
 
 Vue.use(Vuex);
 
@@ -12,5 +13,6 @@ export default new Vuex.Store({
   actions: {},
   modules: {
     login,
+    company,
   },
 });

src/util/iconmenu.js

@@ -0,0 +1,282 @@
+export const iconmenu = [
+  { iconkey: 'el-icon-platform-eleme' },
+  { iconkey: 'el-icon-eleme' },
+  { iconkey: 'el-icon-delete-solid' },
+  { iconkey: 'el-icon-delete' },
+  { iconkey: 'el-icon-s-tools' },
+  { iconkey: 'el-icon-setting' },
+  { iconkey: 'el-icon-user-solid' },
+  { iconkey: 'el-icon-user' },
+  { iconkey: 'el-icon-phone' },
+  { iconkey: 'el-icon-phone-outline' },
+  { iconkey: 'el-icon-more' },
+  { iconkey: 'el-icon-more-outline' },
+  { iconkey: 'el-icon-star-on' },
+  { iconkey: 'el-icon-star-off' },
+  { iconkey: 'el-icon-s-goods' },
+  { iconkey: 'el-icon-goods' },
+  { iconkey: 'el-icon-warning' },
+  { iconkey: 'el-icon-warning-outline' },
+  { iconkey: 'el-icon-question' },
+  { iconkey: 'el-icon-info' },
+  { iconkey: 'el-icon-remove' },
+  { iconkey: 'el-icon-circle-plus' },
+  { iconkey: 'el-icon-success' },
+  { iconkey: 'el-icon-error' },
+  { iconkey: 'el-icon-zoom-in' },
+  { iconkey: 'el-icon-zoom-out' },
+  { iconkey: 'el-icon-remove-outline' },
+  { iconkey: 'el-icon-circle-plus-outline' },
+  { iconkey: 'el-icon-circle-check' },
+  { iconkey: 'el-icon-circle-close' },
+  { iconkey: 'el-icon-s-help' },
+  { iconkey: 'el-icon-help' },
+  { iconkey: 'el-icon-minus' },
+  { iconkey: 'el-icon-plus' },
+  { iconkey: 'el-icon-check' },
+  { iconkey: 'el-icon-close' },
+  { iconkey: 'el-icon-picture' },
+  { iconkey: 'el-icon-picture-outline' },
+  { iconkey: 'el-icon-picture-outline-round' },
+  { iconkey: 'el-icon-upload' },
+  { iconkey: 'el-icon-upload2' },
+  { iconkey: 'el-icon-download' },
+  { iconkey: 'el-icon-camera-solid' },
+  { iconkey: 'el-icon-camera' },
+  { iconkey: 'el-icon-video-camera-solid' },
+  { iconkey: 'el-icon-video-camera' },
+  { iconkey: 'el-icon-message-solid' },
+  { iconkey: 'el-icon-bell' },
+  { iconkey: 'el-icon-s-cooperation' },
+  { iconkey: 'el-icon-s-order' },
+  { iconkey: 'el-icon-s-platform' },
+  { iconkey: 'el-icon-s-fold' },
+  { iconkey: 'el-icon-s-unfold' },
+  { iconkey: 'el-icon-s-operation' },
+  { iconkey: 'el-icon-s-promotion' },
+  { iconkey: 'el-icon-s-home' },
+  { iconkey: 'el-icon-s-release' },
+  { iconkey: 'el-icon-s-ticket' },
+  { iconkey: 'el-icon-s-management' },
+  { iconkey: 'el-icon-s-open' },
+  { iconkey: 'el-icon-s-shop' },
+  { iconkey: 'el-icon-s-marketing' },
+  { iconkey: 'el-icon-s-flag' },
+  { iconkey: 'el-icon-s-comment' },
+  { iconkey: 'el-icon-s-finance' },
+  { iconkey: 'el-icon-s-claim' },
+  { iconkey: 'el-icon-s-custom' },
+  { iconkey: 'el-icon-s-opportunity' },
+  { iconkey: 'el-icon-s-data' },
+  { iconkey: 'el-icon-s-check' },
+  { iconkey: 'el-icon-s-grid' },
+  { iconkey: 'el-icon-menu' },
+  { iconkey: 'el-icon-share' },
+  { iconkey: 'el-icon-d-caret' },
+  { iconkey: 'el-icon-caret-left' },
+  { iconkey: 'el-icon-caret-right' },
+  { iconkey: 'el-icon-caret-bottom' },
+  { iconkey: 'el-icon-caret-top' },
+  { iconkey: 'el-icon-bottom-left' },
+  { iconkey: 'el-icon-bottom-right' },
+  { iconkey: 'el-icon-back' },
+  { iconkey: 'el-icon-right' },
+  { iconkey: 'el-icon-bottom' },
+  { iconkey: 'el-icon-top' },
+  { iconkey: 'el-icon-top-left' },
+  { iconkey: 'el-icon-top-right' },
+  { iconkey: 'el-icon-arrow-left' },
+  { iconkey: 'el-icon-arrow-right' },
+  { iconkey: 'el-icon-arrow-down' },
+  { iconkey: 'el-icon-arrow-up' },
+  { iconkey: 'el-icon-d-arrow-left' },
+  { iconkey: 'el-icon-d-arrow-right' },
+  { iconkey: 'el-icon-video-pause' },
+  { iconkey: 'el-icon-video-play' },
+  { iconkey: 'el-icon-refresh' },
+  { iconkey: 'el-icon-refresh-right' },
+  { iconkey: 'el-icon-refresh-left' },
+  { iconkey: 'el-icon-finished' },
+  { iconkey: 'el-icon-sort' },
+  { iconkey: 'el-icon-sort-up' },
+  { iconkey: 'el-icon-sort-down' },
+  { iconkey: 'el-icon-rank' },
+  { iconkey: 'el-icon-loading' },
+  { iconkey: 'el-icon-view' },
+  { iconkey: 'el-icon-c-scale-to-original' },
+  { iconkey: 'el-icon-date' },
+  { iconkey: 'el-icon-edit' },
+  { iconkey: 'el-icon-edit-outline' },
+  { iconkey: 'el-icon-folder' },
+  { iconkey: 'el-icon-folder-opened' },
+  { iconkey: 'el-icon-folder-add' },
+  { iconkey: 'el-icon-folder-remove' },
+  { iconkey: 'el-icon-folder-delete' },
+  { iconkey: 'el-icon-folder-checked' },
+  { iconkey: 'el-icon-tickets' },
+  { iconkey: 'el-icon-document-remove' },
+  { iconkey: 'el-icon-document-delete' },
+  { iconkey: 'el-icon-document-copy' },
+  { iconkey: 'el-icon-document-checked' },
+  { iconkey: 'el-icon-document' },
+  { iconkey: 'el-icon-document-add' },
+  { iconkey: 'el-icon-printer' },
+  { iconkey: 'el-icon-paperclip' },
+  { iconkey: 'el-icon-takeaway-box' },
+  { iconkey: 'el-icon-search' },
+  { iconkey: 'el-icon-monitor' },
+  { iconkey: 'el-icon-attract' },
+  { iconkey: 'el-icon-mobile' },
+  { iconkey: 'el-icon-scissors' },
+  { iconkey: 'el-icon-umbrella' },
+  { iconkey: 'el-icon-headset' },
+  { iconkey: 'el-icon-brush' },
+  { iconkey: 'el-icon-mouse' },
+  { iconkey: 'el-icon-coordinate' },
+  { iconkey: 'el-icon-magic-stick' },
+  { iconkey: 'el-icon-reading' },
+  { iconkey: 'el-icon-data-line' },
+  { iconkey: 'el-icon-data-board' },
+  { iconkey: 'el-icon-pie-chart' },
+  { iconkey: 'el-icon-data-analysis' },
+  { iconkey: 'el-icon-collection-tag' },
+  { iconkey: 'el-icon-film' },
+  { iconkey: 'el-icon-suitcase' },
+  { iconkey: 'el-icon-suitcase-1' },
+  { iconkey: 'el-icon-receiving' },
+  { iconkey: 'el-icon-collection' },
+  { iconkey: 'el-icon-files' },
+  { iconkey: 'el-icon-notebook-1' },
+  { iconkey: 'el-icon-notebook-2' },
+  { iconkey: 'el-icon-toilet-paper' },
+  { iconkey: 'el-icon-office-building' },
+  { iconkey: 'el-icon-school' },
+  { iconkey: 'el-icon-table-lamp' },
+  { iconkey: 'el-icon-house' },
+  { iconkey: 'el-icon-no-smoking' },
+  { iconkey: 'el-icon-smoking' },
+  { iconkey: 'el-icon-shopping-cart-full' },
+  { iconkey: 'el-icon-shopping-cart-1' },
+  { iconkey: 'el-icon-shopping-cart-2' },
+  { iconkey: 'el-icon-shopping-bag-1' },
+  { iconkey: 'el-icon-shopping-bag-2' },
+  { iconkey: 'el-icon-sold-out' },
+  { iconkey: 'el-icon-sell' },
+  { iconkey: 'el-icon-present' },
+  { iconkey: 'el-icon-box' },
+  { iconkey: 'el-icon-bank-card' },
+  { iconkey: 'el-icon-money' },
+  { iconkey: 'el-icon-coin' },
+  { iconkey: 'el-icon-wallet' },
+  { iconkey: 'el-icon-discount' },
+  { iconkey: 'el-icon-price-tag' },
+  { iconkey: 'el-icon-news' },
+  { iconkey: 'el-icon-guide' },
+  { iconkey: 'el-icon-male' },
+  { iconkey: 'el-icon-female' },
+  { iconkey: 'el-icon-thumb' },
+  { iconkey: 'el-icon-cpu' },
+  { iconkey: 'el-icon-link' },
+  { iconkey: 'el-icon-connection' },
+  { iconkey: 'el-icon-open' },
+  { iconkey: 'el-icon-turn-off' },
+  { iconkey: 'el-icon-set-up' },
+  { iconkey: 'el-icon-chat-round' },
+  { iconkey: 'el-icon-chat-line-round' },
+  { iconkey: 'el-icon-chat-square' },
+  { iconkey: 'el-icon-chat-dot-round' },
+  { iconkey: 'el-icon-chat-dot-square' },
+  { iconkey: 'el-icon-chat-line-square' },
+  { iconkey: 'el-icon-message' },
+  { iconkey: 'el-icon-postcard' },
+  { iconkey: 'el-icon-position' },
+  { iconkey: 'el-icon-turn-off-microphone' },
+  { iconkey: 'el-icon-microphone' },
+  { iconkey: 'el-icon-close-notification' },
+  { iconkey: 'el-icon-bangzhu' },
+  { iconkey: 'el-icon-time' },
+  { iconkey: 'el-icon-odometer' },
+  { iconkey: 'el-icon-crop' },
+  { iconkey: 'el-icon-aim' },
+  { iconkey: 'el-icon-switch-button' },
+  { iconkey: 'el-icon-full-screen' },
+  { iconkey: 'el-icon-copy-document' },
+  { iconkey: 'el-icon-mic' },
+  { iconkey: 'el-icon-stopwatch' },
+  { iconkey: 'el-icon-medal-1' },
+  { iconkey: 'el-icon-medal' },
+  { iconkey: 'el-icon-trophy' },
+  { iconkey: 'el-icon-trophy-1' },
+  { iconkey: 'el-icon-first-aid-kit' },
+  { iconkey: 'el-icon-discover' },
+  { iconkey: 'el-icon-place' },
+  { iconkey: 'el-icon-location' },
+  { iconkey: 'el-icon-location-outline' },
+  { iconkey: 'el-icon-location-information' },
+  { iconkey: 'el-icon-add-location' },
+  { iconkey: 'el-icon-delete-location' },
+  { iconkey: 'el-icon-map-location' },
+  { iconkey: 'el-icon-alarm-clock' },
+  { iconkey: 'el-icon-timer' },
+  { iconkey: 'el-icon-watch-1' },
+  { iconkey: 'el-icon-watch' },
+  { iconkey: 'el-icon-lock' },
+  { iconkey: 'el-icon-unlock' },
+  { iconkey: 'el-icon-key' },
+  { iconkey: 'el-icon-service' },
+  { iconkey: 'el-icon-mobile-phone' },
+  { iconkey: 'el-icon-bicycle' },
+  { iconkey: 'el-icon-truck' },
+  { iconkey: 'el-icon-ship' },
+  { iconkey: 'el-icon-basketball' },
+  { iconkey: 'el-icon-football' },
+  { iconkey: 'el-icon-soccer' },
+  { iconkey: 'el-icon-baseball' },
+  { iconkey: 'el-icon-wind-power' },
+  { iconkey: 'el-icon-light-rain' },
+  { iconkey: 'el-icon-lightning' },
+  { iconkey: 'el-icon-heavy-rain' },
+  { iconkey: 'el-icon-sunrise' },
+  { iconkey: 'el-icon-sunrise-1' },
+  { iconkey: 'el-icon-sunset' },
+  { iconkey: 'el-icon-sunny' },
+  { iconkey: 'el-icon-cloudy' },
+  { iconkey: 'el-icon-partly-cloudy' },
+  { iconkey: 'el-icon-cloudy-and-sunny' },
+  { iconkey: 'el-icon-moon' },
+  { iconkey: 'el-icon-moon-night' },
+  { iconkey: 'el-icon-dish' },
+  { iconkey: 'el-icon-dish-1' },
+  { iconkey: 'el-icon-food' },
+  { iconkey: 'el-icon-chicken' },
+  { iconkey: 'el-icon-fork-spoon' },
+  { iconkey: 'el-icon-knife-fork' },
+  { iconkey: 'el-icon-burger' },
+  { iconkey: 'el-icon-tableware' },
+  { iconkey: 'el-icon-sugar' },
+  { iconkey: 'el-icon-dessert' },
+  { iconkey: 'el-icon-ice-cream' },
+  { iconkey: 'el-icon-hot-water' },
+  { iconkey: 'el-icon-water-cup' },
+  { iconkey: 'el-icon-coffee-cup' },
+  { iconkey: 'el-icon-cold-drink' },
+  { iconkey: 'el-icon-goblet' },
+  { iconkey: 'el-icon-goblet-full' },
+  { iconkey: 'el-icon-goblet-square' },
+  { iconkey: 'el-icon-goblet-square-full' },
+  { iconkey: 'el-icon-refrigerator' },
+  { iconkey: 'el-icon-grape' },
+  { iconkey: 'el-icon-watermelon' },
+  { iconkey: 'el-icon-cherry' },
+  { iconkey: 'el-icon-apple' },
+  { iconkey: 'el-icon-pear' },
+  { iconkey: 'el-icon-orange' },
+  { iconkey: 'el-icon-coffee' },
+  { iconkey: 'el-icon-ice-tea' },
+  { iconkey: 'el-icon-ice-drink' },
+  { iconkey: 'el-icon-milk-tea' },
+  { iconkey: 'el-icon-potato-strips' },
+  { iconkey: 'el-icon-lollipop' },
+  { iconkey: 'el-icon-ice-cream-square' },
+  { iconkey: 'el-icon-ice-cream-round' },
+];

src/views/company/index.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main">
+        <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+        <el-col :span="24" class="container info">
+          <el-col :span="24" class="top">
+            <el-button type="primary" size="mini" @click="dialog = true">添加</el-button>
+          </el-col>
+          <el-col :span="24" class="list">
+            <data-table :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit" @delete="toDelete" @query="search"></data-table>
+          </el-col>
+        </el-col>
+      </el-col>
+    </el-row>
+    <el-dialog :visible.sync="dialog" title="增加企业信息" @close="toClose" :destroy-on-close="true" width="50%">
+      <data-form :data="form" :fields="formFields" :rules="rules" @save="turnSave"> </data-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import breadcrumb from '@c/common/breadcrumb.vue';
+import dataTable from '@/components/frame/filter-page-table.vue';
+import dataForm from '@/components/frame/form.vue';
+import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: company } = createNamespacedHelpers('company');
+export default {
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
+  name: 'index',
+  props: {},
+  components: {
+    breadcrumb,
+    dataTable,
+    dataForm,
+  },
+  data: function() {
+    return {
+      opera: [
+        {
+          label: '修改',
+          icon: 'el-icon-edit',
+          method: 'edit',
+        },
+        {
+          label: '删除',
+          icon: 'el-icon-delete',
+          method: 'delete',
+        },
+      ],
+      fields: [
+        { label: '企业名称', prop: 'company', filter: 'input' },
+        { label: '电话', prop: 'mobile' },
+      ],
+      list: [],
+      total: 0,
+      // 增加菜单
+      dialog: false,
+      formFields: [
+        { label: '企业名称', required: true, model: 'company' },
+        { label: '电话', required: true, model: 'mobile', options: { minlength: 11, maxlength: 11 } },
+      ],
+      form: {},
+      rules: {
+        company: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
+        mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }],
+      },
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    ...company(['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);
+        this.$set(this, `total`, res.total);
+      }
+    },
+    // 修改
+    async toEdit({ data }) {
+      this.dialog = true;
+      let res = await this.fetch(data.id);
+      if (this.$checkRes(res)) {
+        this.$set(this, `form`, res.data);
+      }
+    },
+    // 删除
+    async toDelete({ data }) {
+      let res = await this.delete(data.id);
+      if (this.$checkRes(res)) {
+        this.$message({
+          message: '删除成功',
+          type: 'success',
+        });
+        this.search();
+      }
+    },
+    // 增加菜单
+    // 保存
+    async turnSave({ data }) {
+      if (data.id) {
+        let res = await this.update(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '修改成功',
+            type: 'success',
+          });
+          this.toClose();
+        } else {
+          this.$message({
+            message: res.errmsg,
+            type: 'error',
+          });
+        }
+      } else {
+        let res = await this.create(data);
+        if (this.$checkRes(res)) {
+          this.$message({
+            message: '创建成功',
+            type: 'success',
+          });
+          this.toClose();
+        } else {
+          this.$message({
+            message: res.errmsg,
+            type: 'error',
+          });
+        }
+      }
+    },
+    // 取消增加
+    toClose() {
+      this.form = {};
+      this.dialog = false;
+      this.search();
+    },
+  },
+  computed: {
+    ...mapState(['user']),
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.main {
+  .info {
+    .top {
+      text-align: right;
+      margin: 10px 0;
+    }
+  }
+}
+</style>

src/views/homeIndex.vue

@@ -2,11 +2,7 @@
   <div id="Dashboard">
     <el-row>
       <el-col :span="24" class="main">
-        <el-col :span="24" class="crumbs">
-          <el-breadcrumb separator="/">
-            <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 系统首页 </el-breadcrumb-item>
-          </el-breadcrumb>
-        </el-col>
+        <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
         <el-col :span="24" class="container">
           首页
         </el-col>
@@ -16,16 +12,24 @@
 </template>
 
 <script>
+import breadcrumb from '@c/common/breadcrumb.vue';
+
 import { mapState, createNamespacedHelpers } from 'vuex';
 
 import bus from '@/components/common/bus';
 export default {
-  metaInfo: { title: '系统首页' },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
   name: 'Dashboard',
   props: {},
-  components: {},
+  components: {
+    breadcrumb,
+  },
   data: function() {
-    return {};
+    return {
+      breadcrumbTitle: '',
+    };
   },
   created() {},
   methods: {},

src/views/test/index.vue

@@ -1,29 +1,125 @@
 <template>
   <div id="index">
     <el-row>
-      <el-col :span="24">
-        <p>index</p>
+      <el-col :span="24" class="main">
+        <breadcrumb :breadcrumbTitle="this.$route.meta.title"></breadcrumb>
+        <el-col :span="24" class="container info">
+          <el-col :span="24" class="top">
+            <el-button type="primary" size="mini" @click="dialog = true">添加</el-button>
+          </el-col>
+          <el-col :span="24" class="list">
+            <data-table :fields="fields" :opera="opera" :data="list" :total="total" @edit="toEdit" @delete="toDelete" @query="search"></data-table>
+          </el-col>
+        </el-col>
       </el-col>
     </el-row>
+    <el-dialog :visible.sync="dialog" title="增加菜单" @close="toClose" :destroy-on-close="true" width="50%">
+      <data-form :data="form" :fields="formFields" :rules="rules" @save="turnSave">
+        <template #custom="{item}">
+          <template v-if="item.model == 'icon'">
+            <el-radio-group v-model="form.icon">
+              <el-radio v-for="(item, index) in iconlist" :key="index" :label="item.iconkey"><i :class="item.iconkey"></i></el-radio>
+            </el-radio-group>
+          </template>
+        </template>
+      </data-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { iconmenu } from '@/util/iconmenu';
+import breadcrumb from '@c/common/breadcrumb.vue';
+import dataTable from '@/components/frame/filter-page-table.vue';
+import dataForm from '@/components/frame/form.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
 export default {
-  metaInfo: { title: 'index' },
+  metaInfo() {
+    return { title: this.$route.meta.title };
+  },
   name: 'index',
   props: {},
-  components: {},
+  components: {
+    breadcrumb,
+    dataTable,
+    dataForm,
+  },
   data: function() {
-    return {};
+    return {
+      opera: [
+        {
+          label: '修改',
+          icon: 'el-icon-edit',
+          method: 'edit',
+        },
+        {
+          label: '删除',
+          icon: 'el-icon-delete',
+          method: 'delete',
+        },
+      ],
+      fields: [
+        { label: '菜单名称', prop: 'title' },
+        { label: '菜单地址', prop: 'index' },
+        { label: '菜单图标', prop: 'icon' },
+      ],
+      list: [],
+      total: 0,
+      // 增加菜单
+      dialog: false,
+      formFields: [
+        { label: '菜单名称', required: true, model: 'title' },
+        { label: '菜单地址', required: true, model: 'index' },
+        { label: '菜单图标', required: true, model: 'icon', custom: true },
+      ],
+      form: {},
+      rules: {
+        title: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
+        index: [{ required: true, message: '请输入菜单地址', trigger: 'blur' }],
+        icon: [{ required: true, message: '请输入菜单图标', trigger: 'blur' }],
+      },
+      // 图标
+      iconlist: iconmenu,
+    };
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    // 查询列表
+    async search({ skip = 0, limit = 10, ...info } = {}) {},
+    // 修改
+    toEdit({ data }) {
+      console.log(data);
+    },
+    // 删除
+    toDelete({ data }) {
+      console.log(data);
+    },
+    // 增加菜单
+    // 保存
+    turnSave({ data }) {
+      console.log(data);
+    },
+    // 取消增加
+    toClose() {
+      this.form = {};
+      this.dialog = false;
+    },
   },
-  created() {},
-  methods: {},
   computed: {
     ...mapState(['user']),
   },
 };
 </script>
 
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+.main {
+  .info {
+    .top {
+      text-align: right;
+      margin: 15px 0;
+    }
+  }
+}
+</style>

vue.config.js

@@ -20,13 +20,13 @@ module.exports = {
     //api地址前缀
     proxy: {
       '/files': {
-        target: 'http://jh.tgoodsoft.net',
+        target: 'http://free.liaoningdoupo.com',
         pathRewrite: {
           '^/files': '',
         },
       },
       '/api': {
-        target: 'http://jh.tgoodsoft.net',
+        target: 'http://192.168.1.43:8081',
         changeOrigin: true,
         ws: true,
       },