#### 新增功能 1. 在`\ruoyi-ui\src\common\menuData.js`文件,找到对应的菜单下加入菜单。此处只作为菜单映射,不是实际展示的菜单内容。(实际展示内容根据用户权限返回的菜单项绑定)在`最近访问`文件中显示的名称也是在这里配置。 2. 所有业务程序都在`ruoyi-ui\src\views\JiHeExpressway\pages`目录下维护 3. 目前所有的elementUI组件都进行了新样式的重写,input组件直接引用即可,表格、分页等组件需要参考其他页面引用通用组件。 4. 系统表单采用Element Form,可以参考下面封装教程 #### 升级功能 1. 目前所有功能列表可参考同级目录`codehelp_files.md`文件,或`menuData.js`找到目录所在页面后进行页面调优。 2. 较为常用的通用页面有: - 事件通用弹窗,用于各页面展示实现详情 `src\views\JiHeExpressway\pages\control\event\event\EventDetailDialog\index.vue` - 通用视频组件,用户接入视频流`src\views\JiHeExpressway\components\VideoMulti\index.vue` 3. 较为复杂的页面只有首页的地图和缩略图相关。地图采用高速提供的接口,缩略图采用antv/x6。 - 地图文档:【腾讯文档】SuperMap-GIS组件使用文档 https://docs.qq.com/doc/DY3FYV1RaV2lLeXhO - 缩略图文档:[X6 图编辑引擎 | AntV](https://x6.antv.vision/zh) #### Element Form 封装 PresetFormItems.js 里面封装了一些可以复用的表单项 data.js 表单封装,里面会使用PresetFormItems的一些FormItem. Form表单属性介绍:
/* column: 一行放多少元素(基于:style grid布局实现) formList: 表单项(FormItem)配置集合 v-model: 双向绑定的表单数据(可以获取到表单数据(同步表单数据this.$emit("update:value", this.formData)), 也可修改表单数据) */ FormItem属性介绍 & ons 事件监听: export const additionalNotes = { label: "补充说明:", // 标题 key: "eventSourceTips", //数据存储字段 isAlone: true, // 单独一行 required: true, //必填 default: 5, //默认值 type: "input", //组件类型(el-input 去掉el-即可) 不填默认为input options: { //element原生formItem属性 type: "textarea", autosize: true, maxlength: 150, autosize: { minRows: 6, maxRows: 6 }, showWordLimit: true, }, visible: data => { //现隐控制 if (data.searchType == 1) { ​ return true } }, ons: { //on监听 element事件 change(value, ...args) { ​ const { data, formList } = args.slice(-1)\[0]; //data 为表单数据 formList为传入的配置项 ​ formList[4].options.options = []; //调整配置项 修改下拉框options选项 ​ this.$set(this.data, 'deviceState', undefined); //更新v-model双向绑定的表单数据 } }, }; MultipleLabelItem是单独写的组件,事件需按如下配置: merge({}, PresetFormItems.startStation, ​ { ​ options: { ​ options: [ ​ { ​ prefix: { ​ text: "K", ​ style: { ​ color: "#3DE8FF", ​ }, ​ }, ​ key: "startStakeMark[0]", ​ default: "55", ​ rules: [ ​ { ​ message: "请补全桩号", ​ callback(value, data) { ​ console.log(value, data.startStakeMark); ​ if ( ​ !((value + "")?.trim() && (data.startStakeMark[1] + "")?.trim()) ​ ) ​ return false; ​ else return true; ​ }, ​ }, ​ ], ​ ons: { //on监听 element事件 ​ change(value, ...args) { ​ const { data, formList } = args.slice[-1](0); //data 为数据 formList为传入的配置项 ​ data.deviceType && changeHandle(data, formList); ​ } ​ }, ​ }, ​ { ​ prefix: { ​ text: "+", ​ style: { ​ color: "#3DE8FF", ​ }, ​ }, ​ default: "378", ​ key: "startStakeMark[1]", ​ ons: { //on监听 element事件 ​ change(value, ...args) { ​ const { data, formList } = args.slice[-1](0); //data 为数据 formList为传入的配置项 ​ data.deviceType && changeHandle(data, formList); ​ } ​ }, ​ }, ​ ], ​ } ​ })