Skip to content

VUE_R7_RES_iBizEAM
VUE_R7_RES_iBizEAM
提交 cbe60b63 编写于 作者: chenxiang@lab.ibiz5.com's avatar chenxiang@lab.ibiz5.com
浏览文件
操作

1

上级 e8b78796
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 1224 行增加 和 1342 行删除
CHANGELOG.md 0 → 100644
浏览文件 @ cbe60b63
*2020-3-7*
初始化
README.md 0 → 100644
浏览文件 @ cbe60b63
## 前言
### 1. 简介
该web应用是基于iBiz平台提供的一套PC端前端解决方案Vue_R7【**一套基于Vue全家桶（Vue + Vue-router + Vuex）的前端框架**】生产而成，Vue_R7不仅适用于管理后台或管理系统开发，且广泛适用于B/S架构的项目开发。本文档主要介绍项目如何快速上手，成果物代码结构做一阐述，旨在能够为开发人员提供一定开发指导支持。而今框架开源，希望能有更多志同道合的伙伴参与Vue_R7的迭代 ^_^
### 2. 开发环境要求
- Node.js
- Yarn
- Vue Cli
### 3. 开发技术要求
掌握`Vue`、`TypeScript`、`less`、`html`等技术。
### 4. 技术栈
- 前端MVVM框架：vue.js 2.6.10
- 路由：vue-router 3.1.3
- 状态管理：vue-router 3.1.3
- 国际化：vue-i18n 8.15.3
- 数据交互：axios 0.19.1
- UI框架：element-ui 2.13.0, view-design 4.1.0
- 工具库：qs, path-to-regexp, rxjs
- 图标库：font-awesome 4.7.0
- 引入组件： tinymce 4.8.5
- 代码风格检测：eslint
## 快速上手
### 1. 开发环境
> 在安装使用 `Yarn` 和 `Vue Cli (3.0)` 前，务必确认 [Node.js](https://nodejs.org) 已经升级到 v4.8.0 或以上，强烈建议升级至最新版本。
> 如果你想了解更多 `Yarn` 工具链的功能和命令，建议访问 [Yarn](https://yarnpkg.com) 了解更多。
> 如果你想了解更多 `Vue Cli (3.0)` 工具链的功能和命令，建议访问 [Vue Cli (3.0)](https://cli.vuejs.org/) 了解更多。
- 访问 [Node.js](https://nodejs.org) ，根据文档安装 `Node.js`。
- 访问 [Yarn](https://yarnpkg.com) ，根据文档安装 `Yarn`。
- 访问 [Vue Cli (3.0)](https://cli.vuejs.org/) ，根据文档安装 `Vue Cli (3.0)`。
<blockquote style="border-color: red;"><p>在安装 Vue Cli (3.0) ,请使用 Yarn 模式全局安装。</p></blockquote>
```bash
$ yarn global add @vue/cli
```
以下为 Windows 环境开发正常配置
<br>
<br>
![开发环境信息](./imgs/getting-started/development.png)
### 2. 安装依赖
打开前端项目，进入工作空间下，执行安装依赖命令
```bash
$ yarn install
```
### 3. 启动
在工作空间下，执行启动命令
```bash
$ yarn dev-serve
```
启动后，通过 vue.config.js 开发服务 devServer 下配置的本地启动端口号访问开发项目。<br>
示例:
```bash
$ http://localhost:8111
```
这儿需要注意一点，此时启动的项目访问的数据是我们前端的mock数据，如需与后台直接交互，请看第4点。
### 4. 远程代理
在工作空间下，执行启动命令
```bash
$ yarn serve
```
修改远程代理文件 vue.config.js 代理地址
![远程代理地址](./imgs/getting-started/proxy.png)
### 5. 打包
在工作空间下，执行打包命令
```bash
$ yarn build
```
打包完成，生成最终交付产物。
## 成果物结构
```
|─ ─ app
​ |─ ─ public public文件夹
​ |─ ─ assets 静态文件夹
|─ ─ favicon.ico 图标
​ |─ ─ src 工程文件夹
|─ ─ assets 静态资源
|─ ─ components 基础组件，主要包含编辑器组件和其他全局使用的组件
|─ ─ engine 引擎文件，主要封装了内置视图的内置逻辑
|─ ─ environments 环境文件
​ |─ ─ interface 接口文件
​ |─ ─ locale 多语言文件
|─ ─ mock 模拟数据
|─ ─ pages 视图文件夹
|─ ─ module 模块名称
​ |─ ─ XXX-view 视图文件夹
|─ ─ XXX-view-base.vue 视图基类
|─ ─ XXX-view.vue 自定义视图文件
|─ ─ XXX-view.less 自定义视图样式文件
​ |─ ─ main.ts 应用主函数入口
​ |─ ─ page-register.ts 全局视图注册
​ |─ ─ router.ts 路由配置文件
|─ ─ service 应用实体数据服务文件夹
|─ ─ XXX 应用实体名称
|─ ─ XXX-service-base.ts 应用实体数据服务文件
|─ ─ XXX-service.ts 自定义应用实体数据服务文件
|─ ─ YYY-logic-base.ts 应用实体数据处理逻辑文件
|─ ─ YYY-logic.ts 自定义应用实体数据处理逻辑文件
|─ ─ store 全局状态管理
|─ ─ styles 样式文件夹
|─ ─ default.less 默认样式
|─ ─ user.less 用户自定义样式
|─ ─ theme 主题文件夹
|─ ─ uiservice 界面服务文件
|─ ─ XXX 应用实体名称
|─ ─ XXX-ui-service-base.ts 应用实体界面服务文件
|─ ─ XXX-ui-service.ts 自定义应用实体界面服务文件
|─ ─ YYY-ui-logic-base.ts 应用实体界面处理逻辑文件
|─ ─ YYY-ui-logic.ts 自定义应用实体界面处理逻辑文件
|─ ─ utils 工具类文件
|─ ─ widgets 部件文件夹
|─ ─ appde 应用实体名称
​ |─ ─ XXX 部件名称
|─ ─ XXX-base.vue 视图基类
|─ ─ XXX.vue 自定义部件文件
|─ ─ XXX.less 部件样式文件
​ |─ ─ XXX.model.ts 部件model文件
​ |─ ─ XXX.service.ts 部件服务文件
|─ ─ app-register.ts 公共组件全局注册
​ |─ ─ App.vue 入口组件
​ |─ ─ user-register.ts 自定义组件全局注册
​|─ ─ package.json 依赖管理文件
​ |─ ─ vue.config.js vue cli 配置
```
## 更新日志
每个版本的详细更改都记录在[发行说明](CHANGELOG.md)中。
## 如何贡献
如果你希望参与贡献，欢迎 [Pull Request](<http://demo.ibizlab.cn/ibiz_r7/vue_r7/issues/new>)，或通过自助服务群给我们报告 Bug。
强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)(本指南不提供此项目的实际支持服务！)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](https://www.chiark.greenend.org.uk/~sgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。
## 社区互助
1.[iBizLab论坛](https://bbs.ibizlab.cn/)
2.加入钉钉 Vue_R7自助服务群（中文）
<img src="./imgs/getting-started/vue-r7-group.png" height="400" width="400">
\ No newline at end of file
src/components/app-file-upload-drag/app-file-upload-drag.vue 0 → 100644
浏览文件 @ cbe60b63
<template>
<el-upload
class="upload-demo"
:disabled="disabled"
:file-list="files"
:action="uploadUrl"
:headers="{}"
:before-upload="beforeUpload"
:before-remove="onRemove"
:on-success="onSuccess"
:on-error="onError"
:on-preview="onDownload"
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Environment } from '@/environments/environment';
import { CreateElement } from 'vue';
import { Subject, Unsubscribable } from 'rxjs';
@Component({})
export default class AppFileUploadDrag extends Vue {
/**
* 表单状态
*
* @type {Subject<any>}
* @memberof AppFileUploadDrag
*/
@Prop() public formState?: Subject<any>
/**
* 是否忽略表单项书香值变化
*
* @type {boolean}
* @memberof AppFileUploadDrag
*/
@Prop() public ignorefieldvaluechange?: boolean;
/**
* 表单状态事件
*
* @private
* @type {(Unsubscribable | undefined)}
* @memberof AppFileUploadDrag
*/
private formStateEvent: Unsubscribable | undefined;
/**
* 表单数据
*
* @type {string}
* @memberof AppFileUploadDrag
*/
@Prop() public data!: string;
/**
* 初始化值
*
* @type {*}
* @memberof AppFileUploadDrag
*/
@Prop() public value?: any;
/**
* 数据值变化
*
* @param {*} newval
* @param {*} val
* @memberof AppFileUploadDrag
*/
@Watch('value')
onValueChange(newval: any, val: any) {
if (this.ignorefieldvaluechange) {
return;
}
if (newval) {
this.files = JSON.parse(newval);
this.dataProcess();
} else {
this.files = [];
}
}
/**
* 所属表单项名称
*
* @type {string}
* @memberof AppFileUploadDrag
*/
@Prop() public name!: string;
/**
* 是否禁用
*
* @type {boolean}
* @memberof AppFileUploadDrag
*/
@Prop() public disabled?: boolean;
/**
* 上传参数
*
* @type {string}
* @memberof AppFileUploadDrag
*/
@Prop() public uploadparams?: string;
/**
* 下载参数
*
* @type {string}
* @memberof AppFileUploadDrag
*/
@Prop() public exportparams?: string;
/**
* 自定义参数
*
* @type {*}
* @memberof AppFileUploadDrag
*/
@Prop() public customparams?: any;
/**
* 上传文件路径
*
* @memberof AppFileUploadDrag
*/
public uploadUrl = Environment.BaseUrl + Environment.UploadFile;
/**
* 下载文件路径
*
* @memberof AppFileUploadDrag
*/
public downloadUrl = Environment.BaseUrl + Environment.ExportFile;
/**
* 文件列表
*
* @memberof AppFileUploadDrag
*/
public files = [];
/**
* 上传keys
*
* @type {Array<any>}
* @memberof AppFileUploadDrag
*/
public upload_keys: Array<any> = [];
/**
* 导出keys
*
* @type {Array<any>}
* @memberof AppFileUploadDrag
*/
public export_keys: Array<any> = [];
/**
* 自定义数组
*
* @type {Array<any>}
* @memberof AppFileUploadDrag
*/
public custom_arr: Array<any> = [];
/**
* 应用参数
*
* @type {*}
* @memberof AppFileUploadDrag
*/
public appData: any;
/**
* 数据处理
*
* @private
* @memberof AppFileUploadDrag
*/
private dataProcess(): void {
let upload_arr: Array<string> = [];
let export_arr: Array<string> = [];
const _data: any = JSON.parse(this.data);
this.upload_keys.forEach((key: string) => {
upload_arr.push(`${key}=${_data[key]}`);
});
this.export_keys.forEach((key: string) => {
export_arr.push(`${key}=${_data[key]}`);
});
let _url = `${Environment.BaseUrl}${Environment.UploadFile}`;
if (upload_arr.length > 0 || this.custom_arr.length > 0) {
_url = `${_url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`;
}
this.uploadUrl = _url;
this.files.forEach((file: any) => {
let url = `${this.downloadUrl}/${file.id}`;
if (upload_arr.length > 0 || this.custom_arr.length > 0) {
url = `${url}?${upload_arr.join('&')}${upload_arr.length > 0 ? '&' : ''}${this.custom_arr.join('&')}`;
}
file.url = url;
});
}
/**
* vue 生命周期
*
* @memberof AppFileUploadDrag
*/
public created() {
if (this.formState) {
this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成
if (Object.is($event.type, 'load')) {
if (this.value) {
this.files = JSON.parse(this.value);
}
this.dataProcess();
}
});
}
}
/**
* vue 生命周期
*
* @returns
* @memberof AppFileUploadDrag
*/
public mounted() {
this.appData = this.$store.getters.getAppData();
let uploadparams: string = '';
let exportparams: string = '';
if (this.uploadparams && !Object.is(this.uploadparams, '')) {
uploadparams = this.uploadparams;
}
if (this.exportparams && !Object.is(this.exportparams, '')) {
exportparams = this.exportparams;
}
let upload_keys: Array<string> = uploadparams.split(';');
let export_keys: Array<string> = exportparams.split(';');
let custom_arr: Array<string> = [];
if (this.customparams && !Object.is(this.customparams, '')) {
Object.keys(this.customparams).forEach((name: string) => {
custom_arr.push(`${name}=${this.customparams[name]}`);
});
}
this.upload_keys = upload_keys;
this.export_keys = export_keys;
this.custom_arr = custom_arr;
if (this.value) {
this.files = JSON.parse(this.value);
}
this.dataProcess();
}
/**
* 组件销毁
*
* @memberof AppFileUploadDrag
*/
public destroyed(): void {
if (this.formStateEvent) {
this.formStateEvent.unsubscribe();
}
}
/**
* 上传之前
*
* @param {*} file
* @memberof AppFileUploadDrag
*/
public beforeUpload(file: any) {
// console.log('上传之前');
}
/**
* 上传成功回调
*
* @param {*} response
* @param {*} file
* @param {*} fileList
* @memberof AppFileUploadDrag
*/
public onSuccess(response: any, file: any, fileList: any) {
if (!response) {
return;
}
const data = { name: response.name, id: response.id };
let arr: Array<any> = [];
this.files.forEach((_file:any) => {
arr.push({name: _file.name, id: _file.id})
});
arr.push(data);
let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
/**
* 上传失败回调
*
* @param {*} error
* @param {*} file
* @param {*} fileList
* @memberof AppFileUploadDrag
*/
public onError(error: any, file: any, fileList: any) {
this.$Notice.error({ title: '上传失败' });
}
/**
* 删除文件
*
* @param {*} file
* @param {*} fileList
* @memberof AppFileUploadDrag
*/
public onRemove(file: any, fileList: any) {
let arr: Array<any> = [];
fileList.forEach((f: any) => {
if (f.id != file.id) {
arr.push({ name: f.name, id: f.id });
}
});
let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
/**
* 下载文件
*
* @param {*} file
* @memberof AppFileUploadDrag
*/
public onDownload(file: any) {
window.open(file.url);
}
}
</script>
<style lang='less'>
@import './app-file-upload-drag.less';
</style>
\ No newline at end of file
src/components/app-file-upload/app-file-upload.less
浏览文件 @ cbe60b63
.app-file-upload{
.upload-col{
text-align: center;
.button-preview{
padding: 8px 15px 8.5px 15px;
.ivu-badge{
margin-left: 2px;
.ivu-badge-count{
height: auto;
min-width: auto;
line-height: unset;
padding: 0 4px;
}
}
}
}
}
.upload-preview-modal{
.preview-file-list-item{
margin: 0 8px 8px 0;
display: inline-block;
position: relative;
}
.preview-file-list-img{
display: inline-block;
position: relative;
}
.file-name{
text-align: center;
}
.preview-file-list-actions{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
font-size: 20px;
text-align: center;
color: #fff;
opacity: 0;
transition: opacity .3s;
}
.preview-file-list-actions:hover{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
font-size: 20px;
text-align: center;
color: #fff;
opacity: 1;
background-color: rgba(0,0,0,.5);
}
.preview-file-list-actions::after{
display: inline-block;
content: "";
height: 100%;
vertical-align: middle;
}
.action-delete{
margin-left:15px;
}
}
\ No newline at end of file
src/components/app-file-upload/app-file-upload.vue
浏览文件 @ cbe60b63
<template>
<div class="app-file-upload">
<el-row>
<el-col v-if="rowPreview && files.length > 0" :span="12" class="upload-col">
<el-button size='small' class="button-preview" icon='el-icon-view' :disabled="disabled" @click="()=>{this.dialogVisible = true;}">查看<Badge :count="files.length" type="info"></Badge></el-button>
</el-col>
<el-col :span="rowPreview ? 12 : 24" class="upload-col">
<el-upload
:disabled="disabled"
:file-list="files"
:action="uploadUrl"
:headers="{}"
:before-upload="beforeUpload"
:before-remove="onRemove"
:on-success="onSuccess"
:on-error="onError"
:on-preview="onDownload"
:drag="isdrag"
:show-file-list="!rowPreview"
>
<el-button v-if="!isdrag" size='small' icon='el-icon-upload' :disabled="disabled">{{this.$t('app.fileUpload.caption')}}</el-button>
<i v-if="isdrag" class="el-icon-upload"></i>
<div v-if="isdrag" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</el-col>
</el-row>
<modal width="80%" v-model="dialogVisible" footer-hide class-name='upload-preview-modal'>
<ul class="">
<li v-for="(file,index) in files" :key="index" class="preview-file-list-item">
<div class='preview-file-list-img'>
<el-image :src="file.url" class='' style=''>
<div slot='error' class='image-slot'>
<img src="/assets/img/picture.png" style='width:100%;height:100%;'>
</div>
</el-image>
<div class='preview-file-list-actions' @mouseenter="()=>{showActions = true;}" @mouseleave="()=>{showActions = false;}">
<span v-show="showActions" class='action-download'>
<i class='el-icon-download' @click="onDownload(file)"></i>
</span>
<span v-show="showActions" :style="{ 'display': disabled? 'none' : 'inline-block' }" class='action-delete'>
<i class='el-icon-delete' @click="onRemove(file, files)"></i>
</span>
</div>
</div>
<div class="file-name">{{file.name}}</div>
</li>
</ul>
</modal>
</div>
<el-upload
:disabled="disabled"
:file-list="files"
:action="uploadUrl"
:headers="{}"
:before-upload="beforeUpload"
:before-remove="onRemove"
:on-success="onSuccess"
:on-error="onError"
:on-preview="onDownload"
:drag="isdrag"
>
<el-button v-if="!isdrag" size='small' icon='el-icon-upload' :disabled="disabled">{{this.$t('app.fileUpload.caption')}}</el-button>
<i v-if="isdrag" class="el-icon-upload"></i>
<div v-if="isdrag" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
</el-upload>
</template>
<script lang="ts">
......@@ -119,8 +87,12 @@ export default class AppFileUpload extends Vue {
if (this.ignorefieldvaluechange) {
return;
}
this.setFiles(newval)
this.dataProcess();
if (newval) {
this.files = JSON.parse(newval);
this.dataProcess();
} else {
this.files = [];
}
}
/**
......@@ -216,21 +188,6 @@ export default class AppFileUpload extends Vue {
*/
public appData: any;
/**
* 设置files
*
* @private
* @memberof AppFileUpload
*/
private setFiles(value:any): void {
let _files = JSON.parse(value);
if (value && Object.prototype.toString.call(_files)=='[object Array]') {
this.files = _files;
} else {
this.files = [];
}
}
/**
* 数据处理
*
......@@ -273,7 +230,9 @@ export default class AppFileUpload extends Vue {
this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成
if (Object.is($event.type, 'load')) {
this.setFiles(this.value);
if (this.value) {
this.files = JSON.parse(this.value);
}
this.dataProcess();
}
});
......@@ -312,7 +271,12 @@ export default class AppFileUpload extends Vue {
this.export_keys = export_keys;
this.custom_arr = custom_arr;
this.setFiles(this.value);
if (this.value) {
let _files = JSON.parse(this.value);
if(typeof _files === "object" ){
this.files = _files;
}
}
this.dataProcess();
}
......@@ -334,7 +298,7 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload
*/
public beforeUpload(file: any) {
console.log(file);
// console.log('上传之前');
}
/**
......@@ -387,9 +351,6 @@ export default class AppFileUpload extends Vue {
}
});
let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
if(arr.length == 0){
this.dialogVisible = false;
}
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
......@@ -403,30 +364,6 @@ export default class AppFileUpload extends Vue {
window.open(file.url);
}
/**
* 是否开启行内预览
*
* @type {boolean}
* @memberof AppFileUpload
*/
@Prop({default: false}) public rowPreview!: boolean;
/**
* 是否开启行内预览
*
* @type {boolean}
* @memberof AppFileUpload
*/
public dialogVisible: boolean = false;
/**
* 是否开启行内预览
*
* @type {boolean}
* @memberof AppFileUpload
*/
public showActions: boolean = false;
}
</script>
......
src/components/app-image-upload/app-image-upload.vue
浏览文件 @ cbe60b63
......@@ -3,7 +3,7 @@
<ul class='el-upload-list el-upload-list--picture-card'>
<!-- 绘制缩略图 Start -->
<li v-for="(file,index) in files" :key="index" class='el-upload-list__item is-success'>
<el-image :src="file.url" class='el-upload-list__item-thumbnail' style='min-height:100px;min-width:100px;'>
<el-image src={file.url} class='el-upload-list__item-thumbnail' style='min-height:100px;min-width:100px;'>
<div slot='error' class='image-slot'>
<i class='el-icon-picture-outline'></i>
</div>
......@@ -119,8 +119,12 @@ export default class AppImageUpload extends Vue {
if (this.ignorefieldvaluechange) {
return;
}
this.setFiles(newval)
this.dataProcess();
if (newval) {
this.files = JSON.parse(newval);
this.dataProcess();
} else {
this.files = [];
}
}
/**
......@@ -216,21 +220,6 @@ export default class AppImageUpload extends Vue {
*/
public appData: any="";
/**
* 设置files
*
* @private
* @memberof AppImageUpload
*/
private setFiles(value:any): void {
let _files = JSON.parse(value);
if (value && Object.prototype.toString.call(_files)=='[object Array]') {
this.files = _files;
} else {
this.files = [];
}
}
/**
* 数据处理
*
......@@ -273,7 +262,10 @@ export default class AppImageUpload extends Vue {
this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成
if (Object.is($event.type, 'load')) {
this.setFiles(this.value);
if (this.value) {
// console.log(this.value);
this.files = JSON.parse(this.value);
}
this.dataProcess();
}
});
......@@ -311,7 +303,12 @@ export default class AppImageUpload extends Vue {
this.export_keys = export_keys;
this.custom_arr = custom_arr;
this.setFiles(this.value);
if (this.value) {
let _files = JSON.parse(this.value);
if(typeof _files === "object" ){
this.files = _files;
}
}
this.dataProcess();
}
......
src/components/app-input-number/app-input-number.less 0 → 100644
浏览文件 @ cbe60b63
.input-unit{
position: relative;
.unit-text{
position: absolute;
top: 0;
right: 20px;
}
}
\ No newline at end of file
src/components/app-input-number/app-input-number.vue 0 → 100644
浏览文件 @ cbe60b63
<template>
<div class="input-unit">
<i-input
:placeholder="placeholder"
:size="size"
v-model="CurrentVal"
:disabled="disabled ? true : false"
@on-enter="enter"
type="number"
></i-input>
<div class="unit-text">{{unit}}</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";
import { Subject } from "rxjs";
import { debounceTime, distinctUntilChanged } from "rxjs/operators";
@Component({})
export default class appInputNumber extends Vue {
/**
* 双向绑定值
* @type {any}
* @memberof InputBox
*/
@Model("change") readonly itemValue?: any;
/**
* 单位
* @type {String}
* @memberof InputBoxUnit
*/
@Prop() public unit?: string;
/**
* 大小
* @type {String}
* @memberof InputBoxUnit
*/
@Prop() public size?: string;
/**
* placeholder值
* @type {String}
* @memberof InputBox
*/
@Prop() public placeholder?: string;
/**
* 是否禁用
* @type {boolean}
* @memberof InputBox
*/
@Prop() public disabled?: boolean;
/**
* 属性类型
*
* @type {string}
* @memberof InputBox
*/
@Prop() public type?: string;
/**
* 当前值
*
* @memberof InputBox
*/
get CurrentVal() {
return this.itemValue;
}
/**
* 值变化
*
* @memberof InputBox
*/
set CurrentVal(val: any) {
let _data: any = val;
if (Object.is(this.type, "number") && val && !isNaN(val)) {
try {
_data = isNaN(Number(val)) ? null : Number(val);
} catch (error) {}
}
if (Object.is(_data, "")) {
_data = null;
}
this.$emit("change", _data);
}
/**
* 回车事件
*
* @param {*} $event
* @memberof InputBox
*/
@Emit()
public enter($event: any) {
if (!$event || $event.keyCode !== 13) {
return;
}
return $event;
}
}
</script>
<style lang='less'>
@import "./app-input-number.less";
</style>
\ No newline at end of file
src/components/app-mpicker/app-mpicker.vue
浏览文件 @ cbe60b63
......@@ -232,8 +232,7 @@ export default class AppMpicker extends Vue {
_selectItems[index].srfkey = item[this.deKeyField];
});
}
_context = Object.assign(_context, { srfparentdata: { srfparentkey: this.activeData[this.deKeyField] }, });
_viewparams = Object.assign(_viewparams,{ selectedData: [..._selectItems]});
_context = Object.assign(_context, { srfparentdata: { srfparentkey: this.activeData[this.deKeyField] }, selectedData: [..._selectItems], });
let formdata = this.activeData;
const modal: Subject<any> = this.$appmodal.openModal(view, _context, _viewparams)
modal.subscribe((result: any) => {
......
src/components/app-picker-select-view/app-picker-select-view.less
浏览文件 @ cbe60b63
......@@ -26,8 +26,6 @@
overflow:inherit;
}
}
}
}
.select-no-dropdown.el-select-dropdown{
display: none;
}
\ No newline at end of file
src/components/app-picker-select-view/app-picker-select-view.vue
浏览文件 @ cbe60b63
<template>
<div class="app-picker-select-view">
<Dropdown :visible="visible" trigger="custom" style="left:0px;width: 100%" @on-clickoutside="() => {triggerMenu(false);}" >
<Input v-if="isSingleSelect" v-model="queryValue" class="tree-input" type="text" :placeholder="placeholder" :disabled="disabled" @on-change="OnInputChange" @on-focus="()=>{triggerMenu(true);}" >
<Input v-model="inputValue" class="tree-input" type="text" :placeholder="placeholder" :disabled="disabled" @on-change="OnInputChange" @on-focus="()=>{triggerMenu(true);}" >
<template v-slot:suffix>
<i v-if="queryValue && !disabled" class='el-icon-circle-close' @click="onClear"></i>
<i v-if="inputValue && !disabled" class='el-icon-circle-close' @click="onClear"></i>
<Icon :type="visible ? 'ios-arrow-up' : 'ios-arrow-down'" class="icon-arrow" @click="() => {triggerMenu();}"></Icon>
<icon v-if="linkview" type="ios-open-outline" @click="openLinkView"/>
</template>
</Input>
<el-select v-if="!isSingleSelect" popper-class="select-no-dropdown" :value="keySet" multiple filterable remote :remote-method="($event) => {this.queryValue = $event;}" size="small" style="width:100%;" @change="onSelectChange" @focus="() => {triggerMenu(true);}" :disabled="disabled">
<el-option v-for="(item, index) in items" :key="index" :label="item.srfmajortext" :value="item[deKeyField]"></el-option>
</el-select>
<DropdownMenu slot="list">
<component
:is="pickupView.viewname"
:viewdata="viewdata"
:viewparam="viewparam"
:isShowButton="false"
:ifShowButtons="false"
:viewDefaultUsage="false"
@viewdataschange="onViewdatasChange"
@viewdataschange="setValue"
style="height:100%;">
</component>
</DropdownMenu>
......@@ -49,38 +46,6 @@ export default class AppPickerSelectView extends Vue {
* @memberof AppFormDRUIPart
*/
@Prop() public viewparams!: any;
/**
* 是否单选
*
* @type {*}
* @memberof AppFormDRUIPart
*/
@Prop({default: 'true'}) public isSingleSelect!: any;
/**
* 当前多选框选中值的key集合
*
* @type {string}
* @memberof AppTreePicker
*/
public keySet: any = [];
/**
* 当前多选框选中项对象集合
*
* @type {string}
* @memberof AppTreePicker
*/
public selectItems: Array<any> = [];
/**
* 所有操作过的下拉选项对象集合
*
* @type {string}
* @memberof AppTreePicker
*/
public items: Array<any> = [];
/**
* 视图参数
......@@ -88,7 +53,7 @@ export default class AppPickerSelectView extends Vue {
* @type {string}
* @memberof AppTreePicker
*/
public viewparam: any = JSON.stringify(this.viewparams);
public viewparam: any = JSON.stringify(this.viewparams);;
/**
* 视图上下文
......@@ -139,12 +104,12 @@ export default class AppPickerSelectView extends Vue {
@Prop({default: 'srfkey'}) public deKeyField!: string;
/**
* 输入框值(搜索值)
* 输入框值
*
* @type {string}
* @memberof AppTreePicker
*/
public queryValue: any = '';
public inputValue: any = '';
/**
* 值项名称
......@@ -152,7 +117,7 @@ export default class AppPickerSelectView extends Vue {
* @type {string}
* @memberof AppPicker
*/
@Prop() public valueitem!: string;
@Prop() public valueitem?: string;
/**
* 关联视图名称
......@@ -217,7 +182,7 @@ export default class AppPickerSelectView extends Vue {
* @memberof AppTreePicker
*/
public OnInputChange($event: any){
let _viewdata = Object.assign({ query: this.queryValue }, JSON.parse(this.viewdata)) ;
let _viewdata = Object.assign({ query: this.inputValue }, JSON.parse(this.viewdata)) ;
this.viewdata = JSON.stringify(_viewdata);
}
......@@ -299,35 +264,9 @@ export default class AppPickerSelectView extends Vue {
* @param {*} oldVal
* @memberof AppPicker
*/
@Watch('value', { deep: true })
@Watch('value')
public onValueChange(newVal: any, oldVal: any) {
if(this.isSingleSelect){
this.queryValue = newVal;
if (!this.data || !this.valueitem || !this.data[this.valueitem]) {
this.$Notice.error({ title: '错误', desc: "编辑器"+this.name+'值项异常' });
}else{
let _viewparam = JSON.parse(this.viewparam);
_viewparam.selectedData = [{srfkey: this.data[this.valueitem], srfmajortext: this.value }];
this.viewparam = JSON.stringify(_viewparam);
}
}else{
this.keySet = [];
this.selectItems = [];
if (newVal) {
this.selectItems = JSON.parse(newVal);
this.selectItems.forEach((item: any) => {
this.keySet.push(item.srfkey);
let index = this.items.findIndex((i) => Object.is(i.srfkey, item.srfkey));
if (index < 0) {
this.items.push({ srfmajortext : item.srfmajortext, srfkey: item.srfkey });
}
});
let _viewparam = JSON.parse(this.viewparam);
_viewparam.selectedData = this.selectItems;
this.viewparam = JSON.stringify(_viewparam);
}
}
this.$forceUpdate();
this.inputValue = newVal;
}
/**
......@@ -362,36 +301,19 @@ export default class AppPickerSelectView extends Vue {
* @param {*} item
* @memberof AppTreePicker
*/
public onViewdatasChange($event: any) {
if($event.length == 0){
public setValue(item: any) {
this.visible = false;
if(item.length == 0){
this.onClear(null);
return;
}
if(this.isSingleSelect){
this.visible = false;
if (this.valueitem) {
let tempvalue = $event[0][this.deKeyField] ? $event[0][this.deKeyField] : $event[0].srfkey;
this.$emit('formitemvaluechange', { name: this.valueitem, value: tempvalue });
}
if (this.name) {
let tempvalue = $event[0][this.deMajorField] ? $event[0][this.deMajorField] : $event[0].srfmajortext;
this.$emit('formitemvaluechange', { name: this.name, value: tempvalue });
}
}else{
let selects: Array<any> = [];
if ($event && Array.isArray($event)) {
$event.forEach((select: any) => {
selects.push({ srfkey: select.srfkey, srfmajortext: select.srfmajortext });
let index = this.items.findIndex((item) => Object.is(item.srfkey, select.srfkey));
if (index < 0) {
this.items.push({ srfmajortext : select.srfmajortext, srfkey: select.srfkey });
}
});
}
if (this.name) {
let value = selects.length > 0 ? JSON.stringify(selects) : '';
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
if (this.valueitem) {
let tempvalue = item[0][this.deMajorField] ? item[0][this.deKeyField] : item[0].srfkey;
this.$emit('formitemvaluechange', { name: this.valueitem, value: item[0][this.deKeyField] });
}
if (this.name) {
let tempvalue = item[0][this.deMajorField] ? item[0][this.deMajorField] : item[0].srfmajortext;
this.$emit('formitemvaluechange', { name: this.name, value: tempvalue });
}
}
......@@ -415,8 +337,11 @@ export default class AppPickerSelectView extends Vue {
* @memberof AppPicker
*/
public openLinkView($event: any): void {
if (this.disabled) {
return;
}
if (!this.data || !this.valueitem || !this.data[this.valueitem]) {
console.error({ title: '错误', desc: '值项异常!' });
this.$Notice.error({ title: '错误', desc: '值项异常!' });
return;
}
// 公共参数处理
......@@ -534,26 +459,6 @@ export default class AppPickerSelectView extends Vue {
}
}
}
/**
* 下拉选中回调
*
* @param {*} selects 当前选中的key值集合
* @memberof AppMpicker
*/
public onSelectChange(selects: any) {
let val: Array<any> = [];
if (selects.length > 0) {
selects.forEach((select: any) => {
let index = this.items.findIndex((item) => Object.is(item[this.deKeyField], select));
if (index >= 0) {
val.push(this.items[index]);
}
});
}
let value = val.length > 0 ? JSON.stringify(val) : '';
this.$emit('formitemvaluechange', { name: this.name, value: value });
}
}
</script>
......
src/components/app-picker/app-picker.vue
浏览文件 @ cbe60b63
......@@ -165,7 +165,7 @@ export default class AppPicker extends Vue {
* @type {string}
* @memberof AppPicker
*/
@Prop() public valueitem!: string;
@Prop() public valueitem?: string;
/**
* 值
......@@ -401,7 +401,6 @@ export default class AppPicker extends Vue {
const view = { ...this.pickupView };
let _context = data.context;
let _param = data.param;
_param.selectedData = [{srfkey: this.data[this.valueitem], srfmajortext: this.curvalue }];
// 判断打开方式
if (view.placement && !Object.is(view.placement, '')) {
if (Object.is(view.placement, 'POPOVER')) {
......@@ -573,8 +572,11 @@ export default class AppPicker extends Vue {
* @memberof AppPicker
*/
public openLinkView($event: any): void {
if (this.disabled) {
return;
}
if (!this.data || !this.valueitem || !this.data[this.valueitem]) {
console.error({ title: '错误', desc: '值项异常!' });
this.$Notice.error({ title: '错误', desc: '值项异常!' });
return;
}
// 公共参数处理
......
src/components/app-span/app-span.vue
浏览文件 @ cbe60b63
......@@ -44,14 +44,6 @@ export default class DropDownList extends Vue {
*/
public text:any = '';
/**
* 编辑器类型
*
* @type {string}
* @memberof AppSpan
*/
@Prop() public editorType?: string;
/**
* 代码表标识
*
......@@ -91,32 +83,23 @@ export default class DropDownList extends Vue {
* @memberof AppSpan
*/
public load(){
if(Object.is(this.editorType,'PICTURE') || Object.is(this.editorType,'PICTURE_ONE') ||Object.is(this.editorType,'FILEUPLOADER')){
let files: any[] = JSON.parse(this.data);
let names: any[] = [];
files.forEach((item:any) => {
names.push(item.name);
});
this.text = names.join(',');
}else{
if(this.tag && Object.is(this.codelistType,"STATIC")){
const codelist = this.$store.getters.getCodeList(this.tag);
if (codelist) {
this.items = [...JSON.parse(JSON.stringify(codelist.items))];
this.setText();
} else {
console.log(`----${this.tag}----代码表不存在`);
}
}else if(this.tag && Object.is(this.codelistType,"DYNAMIC")){
this.codeListService.getItems(this.tag).then((res:any) => {
this.items = res;
this.setText();
}).catch((error:any) => {
console.log(`----${this.tag}----代码表不存在`);
});
}else{
if(this.tag && Object.is(this.codelistType,"STATIC")){
const codelist = this.$store.getters.getCodeList(this.tag);
if (codelist) {
this.items = [...JSON.parse(JSON.stringify(codelist.items))];
this.setText();
} else {
console.log(`----${this.tag}----代码表不存在`);
}
}else if(this.tag && Object.is(this.codelistType,"DYNAMIC")){
this.codeListService.getItems(this.tag).then((res:any) => {
this.items = res;
this.setText();
}).catch((error:any) => {
console.log(`----${this.tag}----代码表不存在`);
});
}else{
this.setText();
}
}
......
src/components/app-tree-picker/app-tree-picker.vue
浏览文件 @ cbe60b63
......@@ -13,7 +13,7 @@
:is="refviewname"
:viewdata="viewdata"
:viewparam="viewparam"
:isShowButton="false"
:ifShowButtons="false"
:viewDefaultUsage="false"
@viewdataschange="setValue"
style="height:100%;">
......
src/engine/view/mpickup-view-engine.ts
浏览文件 @ cbe60b63
......@@ -95,9 +95,6 @@ export default class MPickupViewEngine extends ViewEngine {
});
const _disbaled: boolean = this.view.containerModel[`view_${ctrlName}`].selections.length > 0 ? true : false;
this.view.containerModel.view_rightbtn = _disbaled;
if(!this.view.isShowButton){
this.view.$emit('viewdataschange', [...args]);
}
}
/**
......
src/engine/view/pickup-view-engine.ts
浏览文件 @ cbe60b63
......@@ -82,7 +82,7 @@ export default class PickupViewEngine extends ViewEngine {
this.view.viewSelections = [...args]
const _disabled: boolean = this.view.viewSelections.length > 0 ? false : true;
this.view.containerModel.view_okbtn.disabled = _disabled;
if(!this.view.isShowButton){
if(!this.view.ifShowButtons){
this.view.$emit('viewdataschange', [...args]);
}
}
......
src/mock/upload/upload.ts
浏览文件 @ cbe60b63
......@@ -6,7 +6,7 @@ Mock.mock(RegExp(new RegExp(/^\.\.\/ibizutil\/upload.*$/)),"post",(ops:any) => {
console.log(ops) // 先看一下这个ops是什么
console.log(ops.body)
return {
"filename": "xxx.png",
"fileid": Random.string("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",32)
"name": "xxx.png",
"id": Random.string(128)
};
});
\ No newline at end of file
src/model/chart-detail/chart-line-series.ts 已删除 100644 → 0
浏览文件 @ e8b78796
import { ChartSeries } from './chart-series';
/**
* 折线图序列模型
*
* @export
* @class ChartLineSeries
*/
export class ChartLineSeries extends ChartSeries{
/**
* 分类属性
*
* @type {string}
* @memberof ChartLineSeries
*/
public categorField: string = '';
/**
* 值属性
*
* @type {string}
* @memberof ChartLineSeries
*/
public valueField: string = '';
/**
* 分类代码表
*
* @type {string}
* @memberof ChartLineSeries
*/
public categorCodeList: any = null;
/**
* 维度定义
*
* @type {string}
* @memberof ChartLineSeries
*/
public dimensions:Array<string> = [];
/**
* 维度编码
*
* @type {*}
* @memberof ChartLineSeries
*/
public encode:any = null;
/**
* Creates an instance of ChartLineSeries.
* ChartLineSeries 实例
*
* @param {*} [opts={}]
* @memberof ChartLineSeries
*/
constructor(opts: any = {}) {
super(opts);
this.categorField = !Object.is(opts.categorField, '') ? opts.categorField : '';
this.categorCodeList = opts.categorCodeList ? opts.categorCodeList : null;
this.valueField = !Object.is(opts.valueField, '') ? opts.valueField : '';
this.dimensions = opts.dimensions ? opts.dimensions :'';
this.encode = opts.encode ? opts.encode : null;
}
/**
* 设置分类属性
*
* @param {string} state
* @memberof ChartLineSeries
*/
public setCategorField(state: string): void {
this.categorField = state;
}
/**
* 设置序列名称
*
* @param {string} state
* @memberof ChartLineSeries
*/
public setValueField(state: string): void {
this.valueField = state;
}
/**
* 分类代码表
*
* @param {*} state
* @memberof ChartLineSeries
*/
public setCategorCodeList(state: any): void {
this.categorCodeList = state;
}
/**
* 维度定义
*
* @param {*} state
* @memberof ChartLineSeries
*/
public setDimensions(state: any): void {
this.dimensions = state;
}
/**
* 设置编码
*
* @param {*} state
* @memberof ChartLineSeries
*/
public setEncode(state: any): void {
this.encode = state;
}
}
\ No newline at end of file
src/model/chart-detail/chart-series.ts 已删除 100644 → 0
浏览文件 @ e8b78796
/**
* 图表序列模型
*
* @export
* @class ChartSeries
*/
export class ChartSeries {
/**
* 序列类型
*
* @type {string}
* @memberof ChartSeries
*/
public type: string = '';
/**
* 图表对象
*
* @type {*}
* @memberof ChartSeries
*/
public chart: any = null;
/**
* 序列名称
*
* @type {string}
* @memberof ChartSeries
*/
public name: string = '';
/**
* 序列标题
*
* @type {string}
* @memberof ChartSeries
*/
public caption: string = '';
/**
* 序列名称属性
*
* @type {string}
* @memberof ChartSeries
*/
public seriesField: string = '';
/**
* 对象索引
*
* @type {number}
* @memberof ChartSeries
*/
public index: number = 0;
/**
* 序列映射数据
*
* @type {*}
* @memberof ChartSeries
*/
public dataSet: any = [];
/**
* Creates an instance of ChartSeries.
* ChartSeries 实例
*
* @param {*} [opts={}]
* @memberof ChartSeries
*/
constructor(opts: any = {}) {
this.type = !Object.is(opts.type, '') ? opts.type : '';
this.name = !Object.is(opts.name, '') ? opts.name : '';
this.caption = !Object.is(opts.caption, '') ? opts.caption : '';
this.seriesField = !Object.is(opts.seriesField, '') ? opts.seriesField : '';
this.index = this.index ? this.index : 0;
this.chart = opts.chart ? opts.chart : null;
this.dataSet = opts.dataSet ? opts.dataSet : [];
}
/**
* 设置序列类型
*
* @param {string} state
* @memberof ChartSeries
*/
public setType(state: string): void {
this.type = state;
}
/**
* 设置序列名称
*
* @param {string} state
* @memberof ChartSeries
*/
public setCaption(state: string): void {
this.caption = state;
}
/**
* 设置序列标题
*
* @param {string} state
* @memberof ChartSeries
*/
public setName(state: string): void {
this.name = state;
}
/**
* 设置数据集
*
* @param {*} state
* @memberof ChartSeries
*/
public setDataSet(state: any): void {
this.dataSet = state;
}
/**
* 设置序列映射的图表
*
* @param {*} state
* @memberof ChartSeries
*/
public setChart(state: any): void {
this.chart = state;
}
/**
* 设置序列名称属性
*
* @param {*} state
* @memberof ChartSeries
*/
public setSeriesField(state: any): void {
this.seriesField = state;
}
/**
* 设置对象索引
*
* @param {number} state
* @memberof ChartSeries
*/
public setIndex(state: number): void {
this.index = state;
}
}
\ No newline at end of file
src/model/chart-detail/index.ts 已删除 100644 → 0
浏览文件 @ e8b78796
export { ChartLineSeries } from './chart-line-series';
src/styles/default.less
浏览文件 @ cbe60b63
......@@ -4,62 +4,6 @@
@import '../theme/default.theme.less';
@import './var.css';
.ibiz-page-tag .tags-body .tags-container .ivu-tag.tag-is-active .ivu-tag-text {
color: #1890ff;
}
.ibiz-page-tag .tags-body .tags-container .ivu-tag .ivu-icon-ios-close {
display: none;
}
.ibiz-page-tag .tags-body .tags-container .ivu-tag.tag-is-active .ivu-icon-ios-close,
.ibiz-page-tag .tags-body .tags-container .ivu-tag:hover .ivu-icon-ios-close {
display: inline-block;
}
.ivu-card-head p {
font-size: 14px;
color: #333;
font-weight: 400;
}
.app-app-menu .app-menus .ivu-card .ivu-card-body{
line-height: 22px;
margin-left: 10px;
font-weight: 400;
}
.app-app-menu .app-menus .ivu-card:hover{
box-shadow: none;
}
.ivu-card-body .grid>.el-table .el-table__header-wrapper thead>tr th {
background: rgb(245,245,245);
border-right: 1px solid rgb(250,250,250);
text-align: center;
}
.el-table td, .el-table th.is-leaf {
border-bottom: 1px solid #ebeef5;
}
.el-table th {
padding: 5px 0;
}
.grid .el-table__body-wrapper .el-table__row td{
border-left: 1px solid rgb(245,245,245);
border-top: 1px solid rgb(245,245,245);
text-align: center;
}
.grid .el-table__body-wrapper .grid-selected-row{
background-color: #BADFFF !important;
}
.el-table th .sort-caret.ascending{
border-bottom-color: #f0f2f5;
}
.el-table th.ascending .sort-caret.ascending {
border-bottom-color: #909399;
}
.el-table th .sort-caret.descending{
border-top-color: #f0f2f5;
}
.el-table th.descending .sort-caret.descending {
border-top-color: #909399;
}
.view-container {
height: calc(100% - 38px);
......@@ -71,22 +15,6 @@
height: 100%;
// display: flex;
// flex-direction: column;
> .ivu-card-head{
height: 50px;
border-color: rgb(221, 221, 221);
border-style: solid;
border-width: 0px 0px 1px;
margin: 0px 0px 11px;
padding: 6px 0px;
> p{
height: 50px;
> .caption-info{
line-height: 50px;
font-size: 18px;
color: #1890ff;
}
}
}
> .ivu-card-body {
// height: 50%;
// flex-grow: 1;
......@@ -99,6 +27,9 @@
flex-direction: column;
}
}
>.ivu-card-head{
border:0;
}
}
> .view-card.view-no-caption.view-no-toolbar {
> .ivu-card-body {
......
src/theme/blue.theme.less
浏览文件 @ cbe60b63
/*** BRGIN:默认蓝色主题 ***/
.app_theme_blue {
> header {
background-color: #2d5f8b;
color: #6ba1d1;
.app-theme-icon {
color: #6ba1d1;
}
.page-logo {
color: #fff;
}
.header-right {
.app-header-user {
background: #28547c;
}
> div:hover {
background: #3774aa;
}
}
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #2d5f8b;
color: #6ba1d1;
i {
color: #6ba1d1;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #4276a4;
color: #f1f1f1;
i {
color: #f1f1f1;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #3c6c95;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
}
}
> .ivu-layout {
> .ivu-layout-sider {
background-color: #4276a4;
.sider-top {
.ivu-icon {
background: #2d5f8b;
color: #6ba1d1;
}
}
.app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #d64635;
}
}
}
}
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #4276a4;
.el-menu-item:hover, .el-menu-item.is-active {
background: #3c6c95 !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #3c6c95 !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
}
.el-submenu__title, .el-menu-item {
color: #c9dff5;
i {
color: #c9dff5;
}
}
.el-menu-item {
border-top: 1px solid #4276a4;
background: #4276a4;
}
.el-submenu {
border-top: 1px solid #4276a4;
background: #4276a4;
> .el-menu {
border-top: 1px solid #4276a4;
background: #4276a4;
}
}
}
.ivu-menu-light{
background: #4276a4;
}
.ivu-menu-submenu-title{
color: #f5f5f5;
}
> header {
background-color: #2d5f8b;
color: #6ba1d1;
.app-theme-icon {
color: #6ba1d1;
}
.page-logo {
color: #ffffff;
}
.header-right {
.app-header-user {
background: #28547c;
}
> div:hover {
background: #3774aa;
}
}
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #2d5f8b;
color: #6ba1d1;
i {
color: #6ba1d1;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #4276a4;
color: #f1f1f1;
i {
color: #f1f1f1;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #3c6c95;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
}
}
> .ivu-layout {
> .ivu-layout-sider {
background-color: #4276a4;
.sider-top {
.ivu-icon {
background: #2d5f8b;
color: #6ba1d1;
}
}
.app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #d64635;
}
}
}
}
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #4276a4;
.el-menu-item:hover, .el-menu-item.is-active {
background: #3c6c95 !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #3c6c95 !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
}
.el-submenu__title, .el-menu-item {
color: #c9dff5;
i {
color: #c9dff5;
}
}
.el-menu-item {
border-top: 1px solid #4276a4;
background: #4276a4;
}
.el-submenu {
border-top: 1px solid #4276a4;
background: #4276a4;
> .el-menu {
border-top: 1px solid #4276a4;
background: #4276a4;
}
}
}
.ivu-menu-light{
background: #4276a4;
}
.ivu-menu-submenu-title{
color: #f5f5f5;
}
}
/*** END:默认蓝色主题 ***/
\ No newline at end of file
src/theme/dark-blue.theme.less
浏览文件 @ cbe60b63
/*** BRGIN:默认Dark Blue主题 ***/
.app_theme_darkblue {
> header {
background-color: #2b3643;
color: #606d80;
.app-theme-icon {
color: #606d80;
}
.page-logo {
color: #fff;
}
.header-right {
.app-header-user {
background: #232c37;
}
> div:hover {
background: #3b4a5c;
}
}
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #2b3643;
color: #606d80;
i {
color: #606d80;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #364150;
color: #f1f1f1;
i {
color: #f1f1f1;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #3e4b5c;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
}
}
> .ivu-layout {
> .ivu-layout-sider {
background-color: #364150;
.sider-top {
.ivu-icon {
background: #2b3643;
color: #606d80;
}
}
.app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #1caf9a;
}
}
}
}
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #364150;
.el-menu-item:hover, .el-menu-item.is-active {
background: #3e4b5c !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #3e4b5c !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
}
.el-submenu__title, .el-menu-item {
color: #b4bcc8;
i {
color: #b4bcc8;
}
}
.el-menu-item {
border-top: 1px solid #364150;
background: #364150;
}
.el-submenu {
border-top: 1px solid #364150;
background: #364150;
> .el-menu {
border-top: 1px solid #364150;
background: #364150;
}
}
}
.ivu-menu-light{
background: #364150;
}
.ivu-menu-submenu-title{
color: #fff;
}
> header {
background-color: #2b3643;
color: #606d80;
.app-theme-icon {
color: #606d80;
}
.page-logo {
color: #ffffff;
}
.header-right {
.app-header-user {
background: #232c37;
}
> div:hover {
background: #3b4a5c;
}
}
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #2b3643;
color: #606d80;
i {
color: #606d80;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #364150;
color: #f1f1f1;
i {
color: #f1f1f1;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #3e4b5c;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
}
}
> .ivu-layout {
> .ivu-layout-sider {
background-color: #364150;
.sider-top {
.ivu-icon {
background: #2b3643;
color: #606d80;
}
}
.app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #1caf9a;
}
}
}
}
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #364150;
.el-menu-item:hover, .el-menu-item.is-active {
background: #3e4b5c !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #3e4b5c !important;
color: #f1f1f1 !important;
i {
color: #f1f1f1;
}
}
}
.el-submenu__title, .el-menu-item {
color: #b4bcc8;
i {
color: #b4bcc8;
}
}
.el-menu-item {
border-top: 1px solid #364150;
background: #364150;
}
.el-submenu {
border-top: 1px solid #364150;
background: #364150;
> .el-menu {
border-top: 1px solid #364150;
background: #364150;
}
}
}
.ivu-menu-light{
background: #364150;
}
.ivu-menu-submenu-title{
color: #fff;
}
}
/*** END:默认Dark Blue主题 ***/
\ No newline at end of file
src/theme/default.theme.less
浏览文件 @ cbe60b63
/*** BRGIN:默认亮色主题 ***/
.app-default-theme {
> header {
background-color: #f6f6f6;
color: #aaaaaa;
.app-theme-icon {
color: #aaaaaa;
}
.page-logo {
color: #535c70;
}
.header-right {
.app-header-user {
background: #d9d9d9;
}
> div:hover {
background: #d4d4d4;
}
}
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #e1e1e1;
color: #aaaaaa;
i {
color: #aaaaaa;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #f6f6f6;
color: #666666;
i {
color: #666666;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #e9e9e9;
color: #666666 !important;
i {
color: #666666;
}
}
}
}
> .ivu-layout {
> .ivu-layout-sider {
background-color: #f6f6f6;
.sider-top {
.ivu-icon {
background: #f6f6f6;
color: #aaaaaa;
}
}
.app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #1890ff;
}
}
}
}
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #f6f6f6;
.el-menu-item:hover, .el-menu-item.is-active {
background: #fff !important;
color: #1890ff !important;
i {
color: #1890ff;
}
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #fff !important;
color: #1890ff !important;
i {
color: #1890ff;
}
}
}
.el-submenu__title, .el-menu-item {
color: #666666;
i {
color: #666666;
}
}
.el-menu-item {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
}
.el-submenu {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
> .el-menu {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
}
}
}
.ivu-menu-light{
background: #f6f6f6;
}
.ivu-menu-submenu-title{
color: #000;
}
> header {
background-color: #e1e1e1;
color: #aaaaaa;
.app-theme-icon {
color: #aaaaaa;
}
.page-logo {
color: #535c70;
}
.header-right {
.app-header-user {
background: #d9d9d9;
}
> div:hover {
background: #d4d4d4;
}
}
.el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title {
background: #e1e1e1;
color: #aaaaaa;
i {
color: #aaaaaa;
}
}
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #f6f6f6;
color: #666666;
i {
color: #666666;
}
}
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #e9e9e9;
color: #666666 !important;
i {
color: #666666;
}
}
}
}
> .ivu-layout {
> .ivu-layout-sider {
background-color: #f6f6f6;
.sider-top {
.ivu-icon {
background: #ccd3dd;
color: #fff;
}
}
.app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #3fd5c0;
}
}
}
}
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #f6f6f6;
.el-menu-item:hover, .el-menu-item.is-active {
background: #e9e9e9 !important;
color: #666666 !important;
i {
color: #666666;
}
}
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title {
background: #e9e9e9 !important;
color: #666666 !important;
i {
color: #666666;
}
}
}
.el-submenu__title, .el-menu-item {
color: #666666;
i {
color: #666666;
}
}
.el-menu-item {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
}
.el-submenu {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
> .el-menu {
border-top: 1px solid #f6f6f6;
background: #f6f6f6;
}
}
}
.ivu-menu-light{
background: #f6f6f6;
}
.ivu-menu-submenu-title{
color: #000;
}
}
/*** END:默认亮色主题 ***/
\ No newline at end of file
src/utils/ui-conunter/ui-counter.ts 0 → 100644
浏览文件 @ cbe60b63
import { Http } from './../http/http';
import { Subject } from 'rxjs';
/**
* 计数器对象
*
* @export
* @class UICounter
*/
export class UICounter {
/**
* 定时器时间
*
* @private
* @type {*}
* @memberof UICounter
*/
private timer: number;
/**
* 定时器
*
* @private
* @type {*}
* @memberof UICounter
*/
private timerTag: any = null;
/**
* 计数器id
*
* @private
* @type {*}
* @memberof UICounter
*/
private counterId: string = '';
/**
* 计数器交互数据
*
* @private
* @type {*}
* @memberof UICounter
*/
private data: any = {};
/**
* url
*
* @type {string}
* @memberof UICounter
*/
public url: string = '';
/**
* 请求
*
* @private
* @type {Http}
* @memberof UICounter
*/
private http: Http = Http.getInstance();
/**
* 计数器对象订阅对象
*
* @type {Subject<any>}
* @memberof UICounter
*/
public uiCounterData: Subject<any> = new Subject();
/**
* Creates an instance of UICounter.
* 创建 UICounter 服务对象
*
* @param {*} [config={}]
* @memberof UICounter
*/
constructor(config: any = {}) {
this.counterId = config.counterId;
this.timer = config.timer;
this.url = config.url;
this.load();
}
/**
* 加载定时器
*
* @memberof UICounter
*/
private load(): void {
if (this.timer > 1000) {
this.timerTag = setInterval(() => {
this.reload();
}, this.timer);
}
this.reload();
}
/**
* 刷新计数器
*
* @private
* @param {*} [arg={}]
* @memberof UICounter
*/
public reload(arg: any = {}): void {
this.http.get(this.url).then((response: any) => {
if (!response || response.status !== 200) {
return;
}
const { data: result }= response;
this.setData(result);
}).catch((response: any) => {
});
}
/**
* 处理数据
*
* @private
* @param {*} result
* @memberof UICounter
*/
private setData(result: any): void {
this.data = result;
this.uiCounterData.next(this.data);
}
/**
* 获取数据
*
* @returns {*}
* @memberof UICounter
*/
public getData(): any {
return this.data;
}
/**
* 关闭计数器
*
* @memberof UICounter
*/
public close(): void {
if (this.timerTag !== undefined) {
clearInterval(this.timerTag);
delete this.timer;
}
}
}
\ No newline at end of file
yarn.lock
浏览文件 @ cbe60b63
此差异已折叠。
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或