Skip to content

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

1

上级 e454b0bd
隐藏空白字符变更
内嵌 并排
正在显示 包含 989 行增加 和 1222 行删除
CHANGELOG.md 已删除 100644 → 0
浏览文件 @ e454b0bd
*2020-3-7*
初始化
README.md 已删除 100644 → 0
浏览文件 @ e454b0bd
## 前言
### 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 已删除 100644 → 0
浏览文件 @ e454b0bd
<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
浏览文件 @ 6a69c2e4
.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
浏览文件 @ 6a69c2e4
<template> <template>
<el-upload <div class="app-file-upload">
:disabled="disabled" <el-row>
:file-list="files" <el-col v-if="rowPreview && files.length > 0" :span="12" class="upload-col">
:action="uploadUrl" <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>
:headers="{}" </el-col>
:before-upload="beforeUpload" <el-col :span="rowPreview ? 12 : 24" class="upload-col">
:before-remove="onRemove" <el-upload
:on-success="onSuccess" :disabled="disabled"
:on-error="onError" :file-list="files"
:on-preview="onDownload" :action="uploadUrl"
:drag="isdrag" :headers="{}"
> :before-upload="beforeUpload"
<el-button v-if="!isdrag" size='small' icon='el-icon-upload' :disabled="disabled">{{this.$t('app.fileUpload.caption')}}</el-button> :before-remove="onRemove"
<i v-if="isdrag" class="el-icon-upload"></i> :on-success="onSuccess"
<div v-if="isdrag" class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> :on-error="onError"
</el-upload> :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>
</template> </template>
<script lang="ts"> <script lang="ts">
...@@ -87,12 +119,8 @@ export default class AppFileUpload extends Vue { ...@@ -87,12 +119,8 @@ export default class AppFileUpload extends Vue {
if (this.ignorefieldvaluechange) { if (this.ignorefieldvaluechange) {
return; return;
} }
if (newval) { this.setFiles(newval)
this.files = JSON.parse(newval); this.dataProcess();
this.dataProcess();
} else {
this.files = [];
}
} }
/** /**
...@@ -188,6 +216,21 @@ export default class AppFileUpload extends Vue { ...@@ -188,6 +216,21 @@ export default class AppFileUpload extends Vue {
*/ */
public appData: any; 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 = [];
}
}
/** /**
* 数据处理 * 数据处理
* *
...@@ -230,9 +273,7 @@ export default class AppFileUpload extends Vue { ...@@ -230,9 +273,7 @@ export default class AppFileUpload extends Vue {
this.formStateEvent = this.formState.subscribe(($event: any) => { this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成 // 表单加载完成
if (Object.is($event.type, 'load')) { if (Object.is($event.type, 'load')) {
if (this.value) { this.setFiles(this.value);
this.files = JSON.parse(this.value);
}
this.dataProcess(); this.dataProcess();
} }
}); });
...@@ -271,12 +312,7 @@ export default class AppFileUpload extends Vue { ...@@ -271,12 +312,7 @@ export default class AppFileUpload extends Vue {
this.export_keys = export_keys; this.export_keys = export_keys;
this.custom_arr = custom_arr; this.custom_arr = custom_arr;
if (this.value) { this.setFiles(this.value);
let _files = JSON.parse(this.value);
if(typeof _files === "object" ){
this.files = _files;
}
}
this.dataProcess(); this.dataProcess();
} }
...@@ -298,7 +334,7 @@ export default class AppFileUpload extends Vue { ...@@ -298,7 +334,7 @@ export default class AppFileUpload extends Vue {
* @memberof AppFileUpload * @memberof AppFileUpload
*/ */
public beforeUpload(file: any) { public beforeUpload(file: any) {
// console.log('上传之前'); console.log(file);
} }
/** /**
...@@ -351,6 +387,9 @@ export default class AppFileUpload extends Vue { ...@@ -351,6 +387,9 @@ export default class AppFileUpload extends Vue {
} }
}); });
let value: any = arr.length > 0 ? JSON.stringify(arr) : null; 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 }); this.$emit('formitemvaluechange', { name: this.name, value: value });
} }
...@@ -364,6 +403,30 @@ export default class AppFileUpload extends Vue { ...@@ -364,6 +403,30 @@ export default class AppFileUpload extends Vue {
window.open(file.url); 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> </script>
......
src/components/app-image-upload/app-image-upload.vue
浏览文件 @ 6a69c2e4
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<ul class='el-upload-list el-upload-list--picture-card'> <ul class='el-upload-list el-upload-list--picture-card'>
<!-- 绘制缩略图 Start --> <!-- 绘制缩略图 Start -->
<li v-for="(file,index) in files" :key="index" class='el-upload-list__item is-success'> <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'> <div slot='error' class='image-slot'>
<i class='el-icon-picture-outline'></i> <i class='el-icon-picture-outline'></i>
</div> </div>
...@@ -119,12 +119,8 @@ export default class AppImageUpload extends Vue { ...@@ -119,12 +119,8 @@ export default class AppImageUpload extends Vue {
if (this.ignorefieldvaluechange) { if (this.ignorefieldvaluechange) {
return; return;
} }
if (newval) { this.setFiles(newval)
this.files = JSON.parse(newval); this.dataProcess();
this.dataProcess();
} else {
this.files = [];
}
} }
/** /**
...@@ -220,6 +216,21 @@ export default class AppImageUpload extends Vue { ...@@ -220,6 +216,21 @@ export default class AppImageUpload extends Vue {
*/ */
public appData: any=""; 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 = [];
}
}
/** /**
* 数据处理 * 数据处理
* *
...@@ -262,10 +273,7 @@ export default class AppImageUpload extends Vue { ...@@ -262,10 +273,7 @@ export default class AppImageUpload extends Vue {
this.formStateEvent = this.formState.subscribe(($event: any) => { this.formStateEvent = this.formState.subscribe(($event: any) => {
// 表单加载完成 // 表单加载完成
if (Object.is($event.type, 'load')) { if (Object.is($event.type, 'load')) {
if (this.value) { this.setFiles(this.value);
// console.log(this.value);
this.files = JSON.parse(this.value);
}
this.dataProcess(); this.dataProcess();
} }
}); });
...@@ -303,12 +311,7 @@ export default class AppImageUpload extends Vue { ...@@ -303,12 +311,7 @@ export default class AppImageUpload extends Vue {
this.export_keys = export_keys; this.export_keys = export_keys;
this.custom_arr = custom_arr; this.custom_arr = custom_arr;
if (this.value) { this.setFiles(this.value);
let _files = JSON.parse(this.value);
if(typeof _files === "object" ){
this.files = _files;
}
}
this.dataProcess(); this.dataProcess();
} }
......
src/components/app-input-number/app-input-number.less 已删除 100644 → 0
浏览文件 @ e454b0bd
.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 已删除 100644 → 0
浏览文件 @ e454b0bd
<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
浏览文件 @ 6a69c2e4
...@@ -232,7 +232,8 @@ export default class AppMpicker extends Vue { ...@@ -232,7 +232,8 @@ export default class AppMpicker extends Vue {
_selectItems[index].srfkey = item[this.deKeyField]; _selectItems[index].srfkey = item[this.deKeyField];
}); });
} }
_context = Object.assign(_context, { srfparentdata: { srfparentkey: this.activeData[this.deKeyField] }, selectedData: [..._selectItems], }); _context = Object.assign(_context, { srfparentdata: { srfparentkey: this.activeData[this.deKeyField] }, });
_viewparams = Object.assign(_viewparams,{ selectedData: [..._selectItems]});
let formdata = this.activeData; let formdata = this.activeData;
const modal: Subject<any> = this.$appmodal.openModal(view, _context, _viewparams) const modal: Subject<any> = this.$appmodal.openModal(view, _context, _viewparams)
modal.subscribe((result: any) => { modal.subscribe((result: any) => {
......
src/components/app-picker-select-view/app-picker-select-view.less
浏览文件 @ 6a69c2e4
...@@ -26,6 +26,8 @@ ...@@ -26,6 +26,8 @@
overflow:inherit; 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
浏览文件 @ 6a69c2e4
<template> <template>
<div class="app-picker-select-view"> <div class="app-picker-select-view">
<Dropdown :visible="visible" trigger="custom" style="left:0px;width: 100%" @on-clickoutside="() => {triggerMenu(false);}" > <Dropdown :visible="visible" trigger="custom" style="left:0px;width: 100%" @on-clickoutside="() => {triggerMenu(false);}" >
<Input v-model="inputValue" class="tree-input" type="text" :placeholder="placeholder" :disabled="disabled" @on-change="OnInputChange" @on-focus="()=>{triggerMenu(true);}" > <Input v-if="isSingleSelect" v-model="queryValue" class="tree-input" type="text" :placeholder="placeholder" :disabled="disabled" @on-change="OnInputChange" @on-focus="()=>{triggerMenu(true);}" >
<template v-slot:suffix> <template v-slot:suffix>
<i v-if="inputValue && !disabled" class='el-icon-circle-close' @click="onClear"></i> <i v-if="queryValue && !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 :type="visible ? 'ios-arrow-up' : 'ios-arrow-down'" class="icon-arrow" @click="() => {triggerMenu();}"></Icon>
<icon v-if="linkview" type="ios-open-outline" @click="openLinkView"/> <icon v-if="linkview" type="ios-open-outline" @click="openLinkView"/>
</template> </template>
</Input> </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"> <DropdownMenu slot="list">
<component <component
:is="pickupView.viewname" :is="pickupView.viewname"
:viewdata="viewdata" :viewdata="viewdata"
:viewparam="viewparam" :viewparam="viewparam"
:ifShowButtons="false" :isShowButton="false"
:viewDefaultUsage="false" :viewDefaultUsage="false"
@viewdataschange="setValue" @viewdataschange="onViewdatasChange"
style="height:100%;"> style="height:100%;">
</component> </component>
</DropdownMenu> </DropdownMenu>
...@@ -46,6 +49,38 @@ export default class AppPickerSelectView extends Vue { ...@@ -46,6 +49,38 @@ export default class AppPickerSelectView extends Vue {
* @memberof AppFormDRUIPart * @memberof AppFormDRUIPart
*/ */
@Prop() public viewparams!: any; @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> = [];
/** /**
* 视图参数 * 视图参数
...@@ -53,7 +88,7 @@ export default class AppPickerSelectView extends Vue { ...@@ -53,7 +88,7 @@ export default class AppPickerSelectView extends Vue {
* @type {string} * @type {string}
* @memberof AppTreePicker * @memberof AppTreePicker
*/ */
public viewparam: any = JSON.stringify(this.viewparams);; public viewparam: any = JSON.stringify(this.viewparams);
/** /**
* 视图上下文 * 视图上下文
...@@ -104,12 +139,12 @@ export default class AppPickerSelectView extends Vue { ...@@ -104,12 +139,12 @@ export default class AppPickerSelectView extends Vue {
@Prop({default: 'srfkey'}) public deKeyField!: string; @Prop({default: 'srfkey'}) public deKeyField!: string;
/** /**
* 输入框值 * 输入框值(搜索值)
* *
* @type {string} * @type {string}
* @memberof AppTreePicker * @memberof AppTreePicker
*/ */
public inputValue: any = ''; public queryValue: any = '';
/** /**
* 值项名称 * 值项名称
...@@ -117,7 +152,7 @@ export default class AppPickerSelectView extends Vue { ...@@ -117,7 +152,7 @@ export default class AppPickerSelectView extends Vue {
* @type {string} * @type {string}
* @memberof AppPicker * @memberof AppPicker
*/ */
@Prop() public valueitem?: string; @Prop() public valueitem!: string;
/** /**
* 关联视图名称 * 关联视图名称
...@@ -182,7 +217,7 @@ export default class AppPickerSelectView extends Vue { ...@@ -182,7 +217,7 @@ export default class AppPickerSelectView extends Vue {
* @memberof AppTreePicker * @memberof AppTreePicker
*/ */
public OnInputChange($event: any){ public OnInputChange($event: any){
let _viewdata = Object.assign({ query: this.inputValue }, JSON.parse(this.viewdata)) ; let _viewdata = Object.assign({ query: this.queryValue }, JSON.parse(this.viewdata)) ;
this.viewdata = JSON.stringify(_viewdata); this.viewdata = JSON.stringify(_viewdata);
} }
...@@ -264,9 +299,35 @@ export default class AppPickerSelectView extends Vue { ...@@ -264,9 +299,35 @@ export default class AppPickerSelectView extends Vue {
* @param {*} oldVal * @param {*} oldVal
* @memberof AppPicker * @memberof AppPicker
*/ */
@Watch('value') @Watch('value', { deep: true })
public onValueChange(newVal: any, oldVal: any) { public onValueChange(newVal: any, oldVal: any) {
this.inputValue = newVal; 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();
} }
/** /**
...@@ -301,19 +362,36 @@ export default class AppPickerSelectView extends Vue { ...@@ -301,19 +362,36 @@ export default class AppPickerSelectView extends Vue {
* @param {*} item * @param {*} item
* @memberof AppTreePicker * @memberof AppTreePicker
*/ */
public setValue(item: any) { public onViewdatasChange($event: any) {
this.visible = false; if($event.length == 0){
if(item.length == 0){
this.onClear(null); this.onClear(null);
return; return;
} }
if (this.valueitem) { if(this.isSingleSelect){
let tempvalue = item[0][this.deMajorField] ? item[0][this.deKeyField] : item[0].srfkey; this.visible = false;
this.$emit('formitemvaluechange', { name: this.valueitem, value: item[0][this.deKeyField] }); if (this.valueitem) {
} let tempvalue = $event[0][this.deKeyField] ? $event[0][this.deKeyField] : $event[0].srfkey;
if (this.name) { this.$emit('formitemvaluechange', { name: this.valueitem, value: tempvalue });
let tempvalue = item[0][this.deMajorField] ? item[0][this.deMajorField] : item[0].srfmajortext; }
this.$emit('formitemvaluechange', { name: this.name, 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 });
}
} }
} }
...@@ -337,11 +415,8 @@ export default class AppPickerSelectView extends Vue { ...@@ -337,11 +415,8 @@ export default class AppPickerSelectView extends Vue {
* @memberof AppPicker * @memberof AppPicker
*/ */
public openLinkView($event: any): void { public openLinkView($event: any): void {
if (this.disabled) {
return;
}
if (!this.data || !this.valueitem || !this.data[this.valueitem]) { if (!this.data || !this.valueitem || !this.data[this.valueitem]) {
this.$Notice.error({ title: '错误', desc: '值项异常!' }); console.error({ title: '错误', desc: '值项异常!' });
return; return;
} }
// 公共参数处理 // 公共参数处理
...@@ -459,6 +534,26 @@ export default class AppPickerSelectView extends Vue { ...@@ -459,6 +534,26 @@ 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> </script>
......
src/components/app-picker/app-picker.vue
浏览文件 @ 6a69c2e4
...@@ -165,7 +165,7 @@ export default class AppPicker extends Vue { ...@@ -165,7 +165,7 @@ export default class AppPicker extends Vue {
* @type {string} * @type {string}
* @memberof AppPicker * @memberof AppPicker
*/ */
@Prop() public valueitem?: string; @Prop() public valueitem!: string;
/** /**
* 值 * 值
...@@ -401,6 +401,7 @@ export default class AppPicker extends Vue { ...@@ -401,6 +401,7 @@ export default class AppPicker extends Vue {
const view = { ...this.pickupView }; const view = { ...this.pickupView };
let _context = data.context; let _context = data.context;
let _param = data.param; let _param = data.param;
_param.selectedData = [{srfkey: this.data[this.valueitem], srfmajortext: this.curvalue }];
// 判断打开方式 // 判断打开方式
if (view.placement && !Object.is(view.placement, '')) { if (view.placement && !Object.is(view.placement, '')) {
if (Object.is(view.placement, 'POPOVER')) { if (Object.is(view.placement, 'POPOVER')) {
...@@ -572,11 +573,8 @@ export default class AppPicker extends Vue { ...@@ -572,11 +573,8 @@ export default class AppPicker extends Vue {
* @memberof AppPicker * @memberof AppPicker
*/ */
public openLinkView($event: any): void { public openLinkView($event: any): void {
if (this.disabled) {
return;
}
if (!this.data || !this.valueitem || !this.data[this.valueitem]) { if (!this.data || !this.valueitem || !this.data[this.valueitem]) {
this.$Notice.error({ title: '错误', desc: '值项异常!' }); console.error({ title: '错误', desc: '值项异常!' });
return; return;
} }
// 公共参数处理 // 公共参数处理
......
src/components/app-span/app-span.vue
浏览文件 @ 6a69c2e4
...@@ -44,6 +44,14 @@ export default class DropDownList extends Vue { ...@@ -44,6 +44,14 @@ export default class DropDownList extends Vue {
*/ */
public text:any = ''; public text:any = '';
/**
* 编辑器类型
*
* @type {string}
* @memberof AppSpan
*/
@Prop() public editorType?: string;
/** /**
* 代码表标识 * 代码表标识
* *
...@@ -83,23 +91,32 @@ export default class DropDownList extends Vue { ...@@ -83,23 +91,32 @@ export default class DropDownList extends Vue {
* @memberof AppSpan * @memberof AppSpan
*/ */
public load(){ public load(){
if(this.tag && Object.is(this.codelistType,"STATIC")){ if(Object.is(this.editorType,'PICTURE') || Object.is(this.editorType,'PICTURE_ONE') ||Object.is(this.editorType,'FILEUPLOADER')){
const codelist = this.$store.getters.getCodeList(this.tag); let files: any[] = JSON.parse(this.data);
if (codelist) { let names: any[] = [];
this.items = [...JSON.parse(JSON.stringify(codelist.items))]; files.forEach((item:any) => {
this.setText(); names.push(item.name);
} 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}----代码表不存在`);
}); });
this.text = names.join(',');
}else{ }else{
this.setText(); 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
浏览文件 @ 6a69c2e4
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
:is="refviewname" :is="refviewname"
:viewdata="viewdata" :viewdata="viewdata"
:viewparam="viewparam" :viewparam="viewparam"
:ifShowButtons="false" :isShowButton="false"
:viewDefaultUsage="false" :viewDefaultUsage="false"
@viewdataschange="setValue" @viewdataschange="setValue"
style="height:100%;"> style="height:100%;">
......
src/engine/view/mpickup-view-engine.ts
浏览文件 @ 6a69c2e4
...@@ -95,6 +95,9 @@ export default class MPickupViewEngine extends ViewEngine { ...@@ -95,6 +95,9 @@ export default class MPickupViewEngine extends ViewEngine {
}); });
const _disbaled: boolean = this.view.containerModel[`view_${ctrlName}`].selections.length > 0 ? true : false; const _disbaled: boolean = this.view.containerModel[`view_${ctrlName}`].selections.length > 0 ? true : false;
this.view.containerModel.view_rightbtn = _disbaled; this.view.containerModel.view_rightbtn = _disbaled;
if(!this.view.isShowButton){
this.view.$emit('viewdataschange', [...args]);
}
} }
/** /**
......
src/engine/view/pickup-view-engine.ts
浏览文件 @ 6a69c2e4
...@@ -82,7 +82,7 @@ export default class PickupViewEngine extends ViewEngine { ...@@ -82,7 +82,7 @@ export default class PickupViewEngine extends ViewEngine {
this.view.viewSelections = [...args] this.view.viewSelections = [...args]
const _disabled: boolean = this.view.viewSelections.length > 0 ? false : true; const _disabled: boolean = this.view.viewSelections.length > 0 ? false : true;
this.view.containerModel.view_okbtn.disabled = _disabled; this.view.containerModel.view_okbtn.disabled = _disabled;
if(!this.view.ifShowButtons){ if(!this.view.isShowButton){
this.view.$emit('viewdataschange', [...args]); this.view.$emit('viewdataschange', [...args]);
} }
} }
......
src/mock/upload/upload.ts
浏览文件 @ 6a69c2e4
...@@ -6,7 +6,7 @@ Mock.mock(RegExp(new RegExp(/^\.\.\/ibizutil\/upload.*$/)),"post",(ops:any) => { ...@@ -6,7 +6,7 @@ Mock.mock(RegExp(new RegExp(/^\.\.\/ibizutil\/upload.*$/)),"post",(ops:any) => {
console.log(ops) // 先看一下这个ops是什么 console.log(ops) // 先看一下这个ops是什么
console.log(ops.body) console.log(ops.body)
return { return {
"name": "xxx.png", "filename": "xxx.png",
"id": Random.string(128) "fileid": Random.string("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",32)
}; };
}); });
\ No newline at end of file
src/model/chart-detail/chart-line-series.ts 0 → 100644
浏览文件 @ 6a69c2e4
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 0 → 100644
浏览文件 @ 6a69c2e4
/**
* 图表序列模型
*
* @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 0 → 100644
浏览文件 @ 6a69c2e4
export { ChartLineSeries } from './chart-line-series';
src/styles/default.less
浏览文件 @ 6a69c2e4
...@@ -4,6 +4,62 @@ ...@@ -4,6 +4,62 @@
@import '../theme/default.theme.less'; @import '../theme/default.theme.less';
@import './var.css'; @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 { .view-container {
height: calc(100% - 38px); height: calc(100% - 38px);
...@@ -15,6 +71,22 @@ ...@@ -15,6 +71,22 @@
height: 100%; height: 100%;
// display: flex; // display: flex;
// flex-direction: column; // 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 { > .ivu-card-body {
// height: 50%; // height: 50%;
// flex-grow: 1; // flex-grow: 1;
...@@ -27,9 +99,6 @@ ...@@ -27,9 +99,6 @@
flex-direction: column; flex-direction: column;
} }
} }
>.ivu-card-head{
border:0;
}
} }
> .view-card.view-no-caption.view-no-toolbar { > .view-card.view-no-caption.view-no-toolbar {
> .ivu-card-body { > .ivu-card-body {
......
src/theme/blue.theme.less
浏览文件 @ 6a69c2e4
/*** BRGIN:默认蓝色主题 ***/ /*** BRGIN:默认蓝色主题 ***/
.app_theme_blue { .app_theme_blue {
> header { > header {
background-color: #2d5f8b; background-color: #2d5f8b;
color: #6ba1d1; color: #6ba1d1;
.app-theme-icon { .app-theme-icon {
color: #6ba1d1; color: #6ba1d1;
} }
.page-logo { .page-logo {
color: #ffffff; color: #fff;
} }
.header-right { .header-right {
.app-header-user { .app-header-user {
background: #28547c; background: #28547c;
} }
> div:hover { > div:hover {
background: #3774aa; background: #3774aa;
} }
} }
.el-menu.el-menu--horizontal { .el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title { > .el-menu-item, > .el-submenu > .el-submenu__title {
background: #2d5f8b; background: #2d5f8b;
color: #6ba1d1; color: #6ba1d1;
i { i {
color: #6ba1d1; color: #6ba1d1;
} }
} }
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title { > .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #4276a4; background-color: #4276a4;
color: #f1f1f1; color: #f1f1f1;
i { i {
color: #f1f1f1; color: #f1f1f1;
} }
} }
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title { > .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #3c6c95; background-color: #3c6c95;
color: #f1f1f1 !important; color: #f1f1f1 !important;
i { i {
color: #f1f1f1; color: #f1f1f1;
} }
} }
} }
} }
> .ivu-layout { > .ivu-layout {
> .ivu-layout-sider { > .ivu-layout-sider {
background-color: #4276a4; background-color: #4276a4;
.sider-top { .sider-top {
.ivu-icon { .ivu-icon {
background: #2d5f8b; background: #2d5f8b;
color: #6ba1d1; color: #6ba1d1;
} }
} }
.app-menu { .app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title { > .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #d64635; border-left: 4px solid #d64635;
} }
} }
} }
} }
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu { > .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #4276a4; background: #4276a4;
.el-menu-item:hover, .el-menu-item.is-active { .el-menu-item:hover, .el-menu-item.is-active {
background: #3c6c95 !important; background: #3c6c95 !important;
color: #f1f1f1 !important; color: #f1f1f1 !important;
i { i {
color: #f1f1f1; color: #f1f1f1;
} }
} }
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active { .el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title { > .el-submenu__title {
background: #3c6c95 !important; background: #3c6c95 !important;
color: #f1f1f1 !important; color: #f1f1f1 !important;
i { i {
color: #f1f1f1; color: #f1f1f1;
} }
} }
} }
.el-submenu__title, .el-menu-item { .el-submenu__title, .el-menu-item {
color: #c9dff5; color: #c9dff5;
i { i {
color: #c9dff5; color: #c9dff5;
} }
} }
.el-menu-item { .el-menu-item {
border-top: 1px solid #4276a4; border-top: 1px solid #4276a4;
background: #4276a4; background: #4276a4;
} }
.el-submenu { .el-submenu {
border-top: 1px solid #4276a4; border-top: 1px solid #4276a4;
background: #4276a4; background: #4276a4;
> .el-menu { > .el-menu {
border-top: 1px solid #4276a4; border-top: 1px solid #4276a4;
background: #4276a4; background: #4276a4;
} }
} }
} }
.ivu-menu-light{ .ivu-menu-light{
background: #4276a4; background: #4276a4;
} }
.ivu-menu-submenu-title{ .ivu-menu-submenu-title{
color: #f5f5f5; color: #f5f5f5;
} }
} }
/*** END:默认蓝色主题 ***/ /*** END:默认蓝色主题 ***/
\ No newline at end of file
src/theme/dark-blue.theme.less
浏览文件 @ 6a69c2e4
/*** BRGIN:默认Dark Blue主题 ***/ /*** BRGIN:默认Dark Blue主题 ***/
.app_theme_darkblue { .app_theme_darkblue {
> header { > header {
background-color: #2b3643; background-color: #2b3643;
color: #606d80; color: #606d80;
.app-theme-icon { .app-theme-icon {
color: #606d80; color: #606d80;
} }
.page-logo { .page-logo {
color: #ffffff; color: #fff;
} }
.header-right { .header-right {
.app-header-user { .app-header-user {
background: #232c37; background: #232c37;
} }
> div:hover { > div:hover {
background: #3b4a5c; background: #3b4a5c;
} }
} }
.el-menu.el-menu--horizontal { .el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title { > .el-menu-item, > .el-submenu > .el-submenu__title {
background: #2b3643; background: #2b3643;
color: #606d80; color: #606d80;
i { i {
color: #606d80; color: #606d80;
} }
} }
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title { > .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #364150; background-color: #364150;
color: #f1f1f1; color: #f1f1f1;
i { i {
color: #f1f1f1; color: #f1f1f1;
} }
} }
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title { > .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #3e4b5c; background-color: #3e4b5c;
color: #f1f1f1 !important; color: #f1f1f1 !important;
i { i {
color: #f1f1f1; color: #f1f1f1;
} }
} }
} }
} }
> .ivu-layout { > .ivu-layout {
> .ivu-layout-sider { > .ivu-layout-sider {
background-color: #364150; background-color: #364150;
.sider-top { .sider-top {
.ivu-icon { .ivu-icon {
background: #2b3643; background: #2b3643;
color: #606d80; color: #606d80;
} }
} }
.app-menu { .app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title { > .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #1caf9a; border-left: 4px solid #1caf9a;
} }
} }
} }
} }
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu { > .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #364150; background: #364150;
.el-menu-item:hover, .el-menu-item.is-active { .el-menu-item:hover, .el-menu-item.is-active {
background: #3e4b5c !important; background: #3e4b5c !important;
color: #f1f1f1 !important; color: #f1f1f1 !important;
i { i {
color: #f1f1f1; color: #f1f1f1;
} }
} }
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active { .el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title { > .el-submenu__title {
background: #3e4b5c !important; background: #3e4b5c !important;
color: #f1f1f1 !important; color: #f1f1f1 !important;
i { i {
color: #f1f1f1; color: #f1f1f1;
} }
} }
} }
.el-submenu__title, .el-menu-item { .el-submenu__title, .el-menu-item {
color: #b4bcc8; color: #b4bcc8;
i { i {
color: #b4bcc8; color: #b4bcc8;
} }
} }
.el-menu-item { .el-menu-item {
border-top: 1px solid #364150; border-top: 1px solid #364150;
background: #364150; background: #364150;
} }
.el-submenu { .el-submenu {
border-top: 1px solid #364150; border-top: 1px solid #364150;
background: #364150; background: #364150;
> .el-menu { > .el-menu {
border-top: 1px solid #364150; border-top: 1px solid #364150;
background: #364150; background: #364150;
} }
} }
} }
.ivu-menu-light{ .ivu-menu-light{
background: #364150; background: #364150;
} }
.ivu-menu-submenu-title{ .ivu-menu-submenu-title{
color: #fff; color: #fff;
} }
} }
/*** END:默认Dark Blue主题 ***/ /*** END:默认Dark Blue主题 ***/
\ No newline at end of file
src/theme/default.theme.less
浏览文件 @ 6a69c2e4
/*** BRGIN:默认亮色主题 ***/ /*** BRGIN:默认亮色主题 ***/
.app-default-theme { .app-default-theme {
> header { > header {
background-color: #e1e1e1; background-color: #f6f6f6;
color: #aaaaaa; color: #aaaaaa;
.app-theme-icon { .app-theme-icon {
color: #aaaaaa; color: #aaaaaa;
} }
.page-logo { .page-logo {
color: #535c70; color: #535c70;
} }
.header-right { .header-right {
.app-header-user { .app-header-user {
background: #d9d9d9; background: #d9d9d9;
} }
> div:hover { > div:hover {
background: #d4d4d4; background: #d4d4d4;
} }
} }
.el-menu.el-menu--horizontal { .el-menu.el-menu--horizontal {
> .el-menu-item, > .el-submenu > .el-submenu__title { > .el-menu-item, > .el-submenu > .el-submenu__title {
background: #e1e1e1; background: #e1e1e1;
color: #aaaaaa; color: #aaaaaa;
i { i {
color: #aaaaaa; color: #aaaaaa;
} }
} }
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title { > .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
background-color: #f6f6f6; background-color: #f6f6f6;
color: #666666; color: #666666;
i { i {
color: #666666; color: #666666;
} }
} }
> .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title { > .el-menu-item:hover, > .el-submenu:hover > .el-submenu__title {
background-color: #e9e9e9; background-color: #e9e9e9;
color: #666666 !important; color: #666666 !important;
i { i {
color: #666666; color: #666666;
} }
} }
} }
} }
> .ivu-layout { > .ivu-layout {
> .ivu-layout-sider { > .ivu-layout-sider {
background-color: #f6f6f6; background-color: #f6f6f6;
.sider-top { .sider-top {
.ivu-icon { .ivu-icon {
background: #ccd3dd; background: #f6f6f6;
color: #fff; color: #aaaaaa;
} }
} }
.app-menu { .app-menu {
> .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title { > .el-menu-item.is-active, > .el-submenu.is-active > .el-submenu__title {
border-left: 4px solid #3fd5c0; border-left: 4px solid #1890ff;
} }
} }
} }
} }
> .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu { > .el-menu , > .ivu-layout > .ivu-layout-sider .app-app-menu > .app-menu {
background: #f6f6f6; background: #f6f6f6;
.el-menu-item:hover, .el-menu-item.is-active { .el-menu-item:hover, .el-menu-item.is-active {
background: #e9e9e9 !important; background: #fff !important;
color: #666666 !important; color: #1890ff !important;
i { i {
color: #666666; color: #1890ff;
} }
} }
.el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active { .el-submenu.is-opened, .el-submenu:hover, .el-submenu.is-active {
> .el-submenu__title { > .el-submenu__title {
background: #e9e9e9 !important; background: #fff !important;
color: #666666 !important; color: #1890ff !important;
i { i {
color: #666666; color: #1890ff;
} }
} }
} }
.el-submenu__title, .el-menu-item { .el-submenu__title, .el-menu-item {
color: #666666; color: #666666;
i { i {
color: #666666; color: #666666;
} }
} }
.el-menu-item { .el-menu-item {
border-top: 1px solid #f6f6f6; border-top: 1px solid #f6f6f6;
background: #f6f6f6; background: #f6f6f6;
} }
.el-submenu { .el-submenu {
border-top: 1px solid #f6f6f6; border-top: 1px solid #f6f6f6;
background: #f6f6f6; background: #f6f6f6;
> .el-menu { > .el-menu {
border-top: 1px solid #f6f6f6; border-top: 1px solid #f6f6f6;
background: #f6f6f6; background: #f6f6f6;
} }
} }
} }
.ivu-menu-light{ .ivu-menu-light{
background: #f6f6f6; background: #f6f6f6;
} }
.ivu-menu-submenu-title{ .ivu-menu-submenu-title{
color: #000; color: #000;
} }
} }
/*** END:默认亮色主题 ***/ /*** END:默认亮色主题 ***/
\ No newline at end of file
src/utils/ui-conunter/ui-counter.ts 已删除 100644 → 0
浏览文件 @ e454b0bd
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
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或