74 lines
7.7 KiB
Markdown
74 lines
7.7 KiB
Markdown
# JY1.0 项目 Agent 规则
|
||
|
||
## 项目概述
|
||
|
||
你正在参与「景耀 JY1.0」制造执行系统（MES）的前端开发工作。本项目是江苏高精机械设备有限公司的管理信息系统，基于 Vue 2 + Element UI 构建，后端为 ASP.NET（.ashx 通用处理程序）。
|
||
|
||
## 技术栈识别
|
||
|
||
本项目使用 Vue 2.5.17 + Vuex 3.0.1 + Vue Router 3.0.7 + Element UI 2.13 + Axios 0.18.0 + ECharts 4 + Webpack 4。不使用 TypeScript，不使用 Composition API，不使用 Vue 3 语法。所有代码均为 JavaScript + Vue 2 Options API 风格。
|
||
|
||
## API 通信规范
|
||
|
||
所有业务请求统一 POST 到单一端点 `MESCommonBase.ashx`，URL 字段留空（由 baseURL 统一代理）。通过 `name` 字段（中文命名，格式为`模块_子模块_操作_查询/增加/编辑/删除数据`）路由到后端不同存储过程。通过 `type` 字段区分操作：`'1'` 为查询，`'2'` 为增删改，`'7'` 为批量提交。参数通过 `param` 字段以 `key=value&key2=value2` 字符串拼接传递，非 JSON 对象。每个请求必须携带 `UserID`（从 Cookie 取）和 `ModularID`（当前路由路径）。
|
||
|
||
## 数据字段命名
|
||
|
||
后端返回的数据库字段名为中文，如 `状态`、`订单编号`、`零件名称`、`图号`、`投产日期` 等。前端模板中直接使用中文属性访问，如 `scope.row.状态`、`scope.row.订单号`。新增字段时必须使用中文命名以保持与后端一致。
|
||
|
||
## 视图组件结构
|
||
|
||
每个页面视图遵循统一布局模式：外层 `div.app-container` > `el-card` > 搜索栏 + 数据表格。搜索栏使用 `el-input`、`el-select`、`el-date-picker` 等组件，数据表格使用 `el-table` + `el-table-column`，固定高度（如 `height="750px"`），尺寸为 `size="mini"`，带 `border` 属性。状态列使用 `el-tag` 组件，通过 `:type` 属性区分不同状态颜色。
|
||
|
||
## 全局工具方法
|
||
|
||
项目通过 `Vue.prototype` 挂载了以下全局方法，在组件中通过 `this.xxx` 直接调用：`CreateData(type, name, data, pageSize, pageList)` 构建请求参数、`ExecDatabase(num)` 发送请求、`addForm(form, callback)` 重置并打开新增表单、`editForm(row, form, callback)` 填充行数据到编辑表单、`getSelect(requestData, select, carrier, param)` 获取下拉框数据、`getData(requestData, carrier, param)` 获取普通数据、`getTable(requestData, param, e)` 获取分页表格数据、`addTable(requestData, param, form, callback)` 新增表格行、`editTable(requestData, param, form, callback)` 编辑表格行、`deleteRow(requestData, id, callback)` 删除表格行。新增/编辑操作必须使用这些全局方法，不要自行封装。
|
||
|
||
## 状态管理
|
||
|
||
Vuex 采用 modules 模式，包含 `app`、`user`、`tagsView`、`permission` 四个模块。用户信息（token、name、id、userId）通过 `js-cookie` 持久化，有效期 1 天。权限控制采用静态路由 + 动态路由注入模式，`getRouter.js` 根据后端返回的菜单数据递归构建路由树。登录后通过 `store.dispatch('GetInfo')` 获取用户信息，再通过 `store.dispatch('GenerateRoutes', asyncRouterMap)` 动态添加路由。
|
||
|
||
## 路由配置
|
||
|
||
静态路由定义在 `src/router/index.js` 的 `constantRouterMap` 中，仅包含登录页、404页和首页。动态路由通过 `src/router/getRouter.js` 根据后端返回的菜单数据（含 pid 父子关系）递归构建，组件路径映射到 `src/views` 目录下对应的 `.vue` 文件。路由 meta 中包含 `title`（中文标题）和 `icon`（SVG 图标名称）。
|
||
|
||
## API 文件组织
|
||
|
||
API 文件按业务模块组织在 `src/api/` 目录下，子目录与业务模块一一对应：`BasicData`（基础数据）、`SalesManagement`（销售管理）、`ManufacturingCenter`（制造中心）、`Assembly`（装配管理）、`Inventory`（仓储管理）、`Outsourcing`（外协管理）、`PurchasingCenter`（采购中心）、`TechnologyCenter`（技术中心）、`WorkshopProcurement`（车间采购）、`MarketingCenter`（营销中心）、`ProjectManagement`（项目管理）。每个 API 文件导出多个命名函数，函数名以操作语义命名。
|
||
|
||
## 视图目录组织
|
||
|
||
视图文件按业务模块组织在 `src/views/` 目录下，与 API 目录结构对应。主要模块包括：`BasicData`（基础数据）、`SalesManagement`（销售管理）、`SeikoWorkshop`（精工车间）、`AssemblyManagement`（装配管理）、`DeviceManagement`（设备管理）、`PurchasingManagement`（采购管理）、`WarehouseManagement`（仓储管理）、`TechnologyCenter`（技术中心）、`ManufacturingCenter`（制造中心）。每个页面为独立文件夹 + `index.vue`。
|
||
|
||
## 配置管理
|
||
|
||
环境配置集中在 `static/config.js` 中，通过导出常量供 `src/utils/request.js` 引用。包含主服务地址、立库接口地址、文件上传下载路径、WebSocket 地址等。环境切换通过注释切换 IP 地址实现，不使用 `.env` 文件。修改配置时需同时关注 `request.js` 中的引用。
|
||
|
||
## 文件上传下载
|
||
|
||
文件上传使用多个专用处理器：`uploadFile.ashx`（通用上传）、`MESUploadFile.ashx`（MES 系统上传）、`uploadOP.ashx`（工序上传）、`uploadPerson.ashx`（人员上传）等。文件下载使用 `downloadFile.ashx` 和 `MESDownloadFile.ashx`。Excel 导出使用 `ExcelDownLoad` 配置指向 `MESCommonBase.ashx`，前端通过 `this.exportExcel_NPOI(param)` 触发下载。图片查看使用 `v-viewer` 插件。
|
||
|
||
## 样式规范
|
||
|
||
全局样式位于 `src/styles/` 目录，包含 `element-ui.scss`（Element UI 覆写）、`variables.scss`（SCSS 变量）、`mixin.scss`（混入）、`sidebar.scss`（侧边栏）、`transition.scss`（过渡动画）。组件内样式使用 `<style scoped>`，深度选择器使用 `>>>` 而非 `/deep/` 或 `::v-deep`。Element UI Dialog 的 `closeOnClickModal` 已全局设为 `false`。
|
||
|
||
## 国际化
|
||
|
||
项目集成了 `vue-i18n`，Element UI 组件已绑定 i18n。语言包位于 `src/lang/` 目录，包含 `zh.js`（中文）和 `en.js`（英文）。但实际业务代码中大量使用中文硬编码，国际化支持有限。
|
||
|
||
## 图标系统
|
||
|
||
SVG 图标位于 `src/icons/svg/` 目录，通过 `svg-sprite-loader` 自动注册。在模板中使用 `<svg-icon icon-class="xxx" />` 引用。图标文件名与路由 meta 中的 icon 字段对应，命名采用英文帕斯卡命名法（如 `ProcessPlanning.svg`、`AssemblyExecution.svg`）。
|
||
|
||
## 代码风格约束
|
||
|
||
不使用 ES6 解构导入组件，使用 `import Vue from 'vue'` 风格。不使用 `async/await`，使用 `.then().catch()` 链式调用。变量命名允许中文拼音或英文，但数据库字段必须使用中文。不添加 ESLint 忽略注释（`// eslint-disable-next-line`）除非绝对必要。不使用箭头函数作为 Vue 生命周期钩子。不引入项目中未使用的第三方库。
|
||
|
||
## 新增页面开发流程
|
||
|
||
新增页面时：1）在 `src/views/对应模块/` 下创建文件夹和 `index.vue`；2）在 `src/api/对应模块/` 下创建或追加 API 函数；3）后端配置菜单数据后，前端通过动态路由自动加载；4）页面结构遵循搜索栏 + 数据表格的标准布局；5）使用全局工具方法（`CreateData`、`ExecDatabase`、`getTable` 等）进行数据操作；6）表格列字段名使用中文与后端保持一致。
|
||
|
||
## 调试与排错
|
||
|
||
请求拦截器中会检查 Cookie 中的 `id` 是否存在，不存在则强制登出并刷新页面。登录 API（`name` 为 `菜单系统模块_用户名密码_查询数据_new2` 和 `菜单系统模块_获取角色模块_查询数据`）跳过此检查。控制台日志使用 `console.log`，不使用 `console.error` 输出调试信息。Vue Router 的 `replace` 方法已全局捕获异常避免重复导航报错。
|