CRMEB二次开发—添加一个汽车配件VIN码查询功能(2)

本文链接：https://blog.csdn.net/lisypro1/article/details/142617708

2.在后台管理界面，添加一个导入和导出，车型类型表的界面，并能显示表格

2.1 使用HbuilderX打开后台源代码

 找到之前下载crmeb的源代码中有 /template/admin/目录，管理员的后台源代码就是这个，系统默代的管理员后台在\crmeb\public\admin之下，这个是vue发布的默认的，不好修改（这个官方教程里也没说明，新手需要特别注意）。 使用Hbuilder打开。

界面如下：

2.2 添加后台管理路由

需要修改的是文件夹路径：/template/admin/src/router/modules/product.js 文件，因为这个要做到商品查询之下，所以和商品查询在一个vue路由文件里。
原来文件内容如下：

// +---------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +---------------------------------------------------------------------
// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
// +---------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +---------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +---------------------------------------------------------------------

import LayoutMain from '@/layout';
import setting from '@/setting';
let routePre = setting.routePre;

const pre = 'product_';

export default {
  path: routePre + '/product',
  name: 'product',
  header: 'product',
  meta: {
    title: '商品',
    // 授权标识
    auth: ['admin-store-index'],
  },
  redirect: {
    name: `${pre}productList`,
  },
  component: LayoutMain,
  children: [
    {
      path: 'product_list',
      name: `${pre}productList`,
      meta: {
        title: '商品管理',
        auth: ['admin-store-storeProuduct-index'],
        keepAlive: true,
      },
      component: () => import('@/pages/product/productList'),
    },
    {
      path: 'product_classify',
      name: `${pre}productClassify`,
      meta: {
        title: '商品分类',
        auth: ['admin-store-storeCategory-index'],
      },
      component: () => import('@/pages/product/productClassify'),
    },
    {
      path: 'add_product/:id?',
      name: `${pre}productAdd`,
      meta: {
        auth: ['admin-store-storeProuduct-index'],
        title: '商品添加',
        activeMenu: routePre + '/product/product_list',
      },
      component: () => import('@/pages/product/productAdd'),
    },
    {
      path: 'product_reply/:id?',
      name: `${pre}productEvaluate`,
      meta: {
        auth: ['admin-store-storeProuduct-index'],
        title: '商品评论',
      },
      component: () => import('@/pages/product/productReply'),
    },
    {
      path: 'product_attr',
      name: `${pre}productAttr`,
      meta: {
        auth: ['admin-store-storeProuduct-index'],
        title: '商品规格',
      },
      component: () => import('@/pages/product/productAttr'),
    },
  ],
};

我们需要添一个导入车型类型表的页面。页面中可以导入车辆类型表的CSV文件，并能展示已导入车辆类型表。

添加的代码如下：

{
	  path: 'product_cartype',
	  name: `${pre}productCartype`,
	  meta: {
	    auth: ['admin-store-storeProuductcartype-index'],
	    title: '车辆类型维护',
	  },
	  component: () => import('@/pages/product/productCartype'),
	},

整体代码如下：

// +---------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +---------------------------------------------------------------------
// | Copyright (c) 2016~2023 https://www.crmeb.com All rights reserved.
// +---------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +---------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +---------------------------------------------------------------------

import LayoutMain from '@/layout';
import setting from '@/setting';
let routePre = setting.routePre;

const pre = 'product_';

export default {
  path: routePre + '/product',
  name: 'product',
  header: 'product',
  meta: {
    title: '商品',
    // 授权标识
    auth: ['admin-store-index'],
  },
  redirect: {
    name: `${pre}productList`,
  },
  component: LayoutMain,
  children: [
    {
      path: 'product_list',
      name: `${pre}productList`,
      meta: {
        title: '商品管理',
        auth: ['admin-store-storeProuduct-index'],
        keepAlive: true,
      },
      component: () => import('@/pages/product/productList'),
    },
    {
      path: 'product_classify',
      name: `${pre}productClassify`,
      meta: {
        title: '商品分类',
        auth: ['admin-store-storeCategory-index'],
      },
      component: () => import('@/pages/product/productClassify'),
    },
    {
      path: 'add_product/:id?',
      name: `${pre}productAdd`,
      meta: {
        auth: ['admin-store-storeProuduct-index'],
        title: '商品添加',
        activeMenu: routePre + '/product/product_list',
      },
      component: () => import('@/pages/product/productAdd'),
    },
    {
      path: 'product_reply/:id?',
      name: `${pre}productEvaluate`,
      meta: {
        auth: ['admin-store-storeProuduct-index'],
        title: '商品评论',
      },
      component: () => import('@/pages/product/productReply'),
    },
    {
      path: 'product_attr',
      name: `${pre}productAttr`,
      meta: {
        auth: ['admin-store-storeProuduct-index'],
        title: '商品规格',
      },
      component: () => import('@/pages/product/productAttr'),
    },
	//本次新增的代码 车辆类型维护 2024-9-29
	{
	  path: 'product_cartype',
	  name: `${pre}productCartype`,
	  meta: {
	    auth: ['admin-store-storeProuductcartype-index'],
	    title: '车辆类型维护',
	  },
	  component: () => import('@/pages/product/productCartype'),
	},
	//end for本次新增的代码 车辆类型维护 2024-9-29
  ],
};