## 开发 ``` ruoyi版本号 3.7.0 ``` ```bash # 克隆项目 git clone https://gitee.com/y_project/RuoYi-Vue # 进入项目目录 cd ruoyi-ui # 安装依赖 npm install # 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org #新增视频流播放和gis地图 npm install --save @vue/composition-api npm install gis-map-tunnel@0.1.3 #新增swiper轮播图 npm install swiper@^5.4.5 #新增精确计算 npm install mathjs # 新安装阿里云iconfont图标库，文件地址src\assets\icon\iconfont.css #新增树形穿梭框 npm install --save el-tree-transfer # 启动服务 npm run dev ``` 浏览器访问 ## 发布 ```bash # 构建测试环境 npm run build:stage # 构建生产环境 npm run build:prod # 新版gis地图 npm install gis-map-admin@0.9.2 # 新增 vue-resource 数据请求 npm install vue-resource --save # 新增 视频 rtmp转码 npm install vue-video-player -S # 因为是播放rtmp格式流，需要安装 videojs-flash 插件，必须用npm安装！！！！！！ npm install video-flash --save # 使用file-saver导出文件，下载Excel文件、下载图片、下载文本 npm install file-saver --save ``` ## 开发教程 ### 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); } }, }, ], } })