jihe-hs/ruoyi-ui

开发

  ruoyi版本号 3.7.0

# 克隆项目
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

浏览器访问 http://localhost:80

发布

# 构建测试环境
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; //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; //data 为数据 formList为传入的配置项 data.deviceType && changeHandle(data, formList); } }, }, ], } })