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表单属性介绍:

{ key: "ServiceAreaAbnormal", //唯一标识 一般tabs才需要 label: "服务区异常",//表单标题 formConfig: { formOptions: {//element中表单配置参数 column: 2, //一行放多少元素(基于:style grid布局实现) }, list: [//FormItem定义 { label: "异常分类:", key: "eventSubclass", type: "RadioGroup", isAlone: true, required: true, options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ { key: "8-1", label: "封闭、暂停营业", }, { key: "8-2", label: "重要设施停用", }, { key: "8-3", label: "其他异常", }, ], }, }, PresetFormItems.freeway, PresetFormItems.direction, { label: "服务区:", key: "dcEventServiceArea.facilityId", type: "select", isAlone: true, required: true, options: { options: [ { value: "选项1", label: "黄金糕", }, ], }, }, { label: "出入口:", key: "dcEventServiceArea.exitsInlets", type: "RadioGroup", isAlone: true, required: true, options: { activeColor: "linear-gradient(180deg, #37E7FF 0%, #009BCC 100%)", options: [ { key: "1", label: "出口", }, { key: "2", label: "入口", }, ], }, }, PresetFormItems.startTime, PresetFormItems.expectedEndTime, PresetFormItems.remark, PresetFormItems.source, ], }, }

FormItem属性介绍:

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为传入的配置项 mileCal(data); } }, };

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); } }, }, ], } })