开始写Vue3 JS功能

一、项目需求

1.1、了解需求

功能概述：中后台管理系统中，要有管理公司信息的功能，主要包含公司信息、银行账户、发票资料等，这些信息供有需要的业务使用。

需求1：管理公司基本信息，包含：企业名称、Logo、地区、营业执照、联系人等等，可以增删拆改
需求2：管理公司的银行账户，包含：银行信息、账户名称、账号、类型等，可以增删拆改
需求3：管理公司的发票信息，包含：开票抬头、纳税号、银行账户、开户行、备注等，可以增删拆改
需求4：对于公司信息、银行信息、发票信息任何的修改，都有记录数据变动记录；

1.2、需求原型


公司列表	公司添加修改	变动记录2	变动记录2


银行列表	银行添加修改	发票列表	发票添加修改

二、定义api接口

根据需求，了解到 企业、银行、发票属于业务功能，变更记录属于支撑功能。
在src/api/business/ 目录下，创建企业、银行、发票的接口。在src/api/support/ 目录下，创建数据变更的接口。如下：

javascript

api/business/                          业务目录
| -- | oa                                  OA目录
| -- | -- bank-api.js                          银行api
| -- | -- enterprise-api.js                    企业api
| -- | -- invoice-api.js                       发票api
api/support/                           支撑目录
| -- | data-tracer                         数据变更
| -- | -- data-tracer-api.js                   数据变更api

按照《Vue3规范 V3.0》 , 遵循如下要求：

api文件要以api为结尾，比如 employee-api.js、login-api.js，方便查找
api文件必须导出对象必须以Api为结尾，如：employeeApi、noticeApi
api中以一个对象将方法包裹
api中的注释，必须和后端 swagger 文档保持一致，同时保留后端作者

比如 bank-api.js

javascript

import { postRequest, getRequest } from '/@/lib/axios';

export const bankApi = {
  // 新建银行信息 @author 善逸
  create: (param) => {
    return postRequest('/oa/bank/create', param);
  },

  // 删除银行信息 @author 善逸
  delete: (bankId) => {
    return getRequest(`/oa/bank/delete/${bankId}`);
  },

  // 查询银行信息详情 @author 善逸
  detail: (bankId) => {
    return getRequest(`/oa/bank/get/${bankId}`);
  },

  // 分页查询银行信息 @author 善逸
  pageQuery: (param) => {
    return postRequest('/oa/bank/page/query', param);
  },

  // 编辑银行信息 @author 善逸
  uplastUpdated: (param) => {
    return postRequest('/oa/bank/update', param);
  },

  // 根据企业ID查询不分页的银行列表 @author 善逸
  queryList: (enterpriseId) => {
    return getRequest(`/oa/bank/query/list/${enterpriseId}`);
  },
};

其他接口文件，请具体在项目中找：enterprise-api.js、invoice-api.js、data-tracer-api.js

三、定义常量

根据需求，了解到 企业类型属于是一个常量枚举，又是属于业务business，所以
在src/constants/business/ 目录下，创建企业相关的常量：

javascript

constants/business/                  常量目录
| -- | oa                                OA目录
| -- | -- enterprise-const.js                企业常量和枚举

代码 enterprise-const.js

javascript


export const ENTERPRISE_TYPE_ENUM = {
  NORMAL: {
    value: 1,
    desc: '有限企业',
  },
  FOREIGN: {
    value: 2,
    desc: '外资企业',
  },
};

export default {
  ENTERPRISE_TYPE_ENUM,
};

在 src/constants/index.js 文件中，将刚刚的常量导入，代码如下:

import menu from './system/menu-const';
import { LOGIN_DEVICE_ENUM } from './system/login-device-const';
import { FLAG_NUMBER_ENUM, GENDER_ENUM, USER_TYPE_ENUM } from './common-const';
import { LAYOUT_ENUM } from './layout-const';
import enterprise from './business/oa/enterprise-const';

export default {
  FLAG_NUMBER_ENUM,
  LOGIN_DEVICE_ENUM,
  GENDER_ENUM,
  USER_TYPE_ENUM,
  LAYOUT_ENUM,
  ...enterprise,
};

四、编写页面

在src/views/business/ 目录下，创建企业、银行、发票的页面。
在src/components/support/ 目录下，创建数据变更的组件。（因为数据变更只是企业详情页面的一个组件，而且将来也会给其他页面使用，所以将这个组件上提到顶级components组件中）


公司、银行、发票	顶级组件：数据变更记录

接着编写具体的增删查改了，需要注意的有如下：

vue文件后缀要求，按照要求：页面规范
父子组件文件名要求，具体见父子组件文件名
组合式Composition API ，模块化编写要求，具体见模块化编写要求

更详细的代码请研读javascript-ant-design-vue3项目中的src/views/oa/enterprise的代码。
在线阅读代码

五、配置页面路由

第一步：打开系统，以 admin 超级管理员登录
第二步：打开菜单 系统设置 -> 菜单管理
第三步：点击添加菜单 -> 选择菜单 tab，输入正确的 路由地址 和 组件地址
第四步：点击右上角姓名，会出现下拉按钮 , 点击“刷新权限”
第五步：点击菜单或者输入刚才录入的组件路由地址，即可访问

六、总结

第一步：注意api和const常量的文件后缀名，为 -api和-const，这样能很好的搜索文件
第二步：一定要按照代码规范编写页面
第三步：在菜单管理 中添加对应页面，才能访问到

以上，你get到了吗？

联系我们

1024创新实验室-主任：卓大，混迹于各个技术圈，研究过计算机，熟悉点 java，略懂点前端。

1024创新实验室致力于成为中原领先、国内一流的技术团队，以AI+数字化为驱动，用技术为产业互联网提供无限可能，业务如下:

教育（就业创业大数据平台、继续教育平台、在线教育系统、题库、医学考试、专升本等）
供应链（网络货运、大宗贸易进销存ERP、物流TMS、B2B电商、仓储WMS、AI提效等）
中医大健康（诊所数字化管理、AI辅助诊疗、中医适宜技术、在线问诊、空中药房等）
AI+软件（软件定制外包、数据大屏、国产化改造、人员外包、技术顾问、技术培训等）
欢迎各类合作哦，一起赚钱~


加微信：卓大拉你入群，一起学习	公众号：六边形工程师分享：赚钱、代码、生活	请 “1024创新实验室” 烩面里加肉咖啡配胡辣汤,提神又饱腹	抖音 : 六边形工程师直播：赚钱、代码、中医


加微信：卓大拉你入群，一起学习	公众号：六边形工程师分享：赚钱、代码、生活	请 “1024创新实验室” 烩面里加肉咖啡配胡辣汤,提神又饱腹	抖音 : 六边形工程师直播：赚钱、代码、中医

1024创新实验室-公告

开始写Vue3 JS功能 ​

一、项目需求 ​

1.1、了解需求 ​

1.2、需求原型 ​

二、定义api接口 ​

三、定义常量 ​

四、编写页面 ​

五、配置页面路由 ​

六、总结 ​

联系我们 ​

开始写Vue3 JS功能

一、项目需求

1.1、了解需求

1.2、需求原型

二、定义api接口

三、定义常量

四、编写页面

五、配置页面路由

六、总结

联系我们