提交 5b1acfcb 编写于 作者: ibizdev's avatar ibizdev

ibizdev提交

上级 c876f2f0
# 系统概览
> 1%
last 2 versions
## 前言
### 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_web
​ |─ ─ 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 配置
```
## 如何贡献
如果你希望参与贡献,欢迎 [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
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
{
"pluginsFile": "tests/e2e/plugins/index.js"
}
module.exports = {
preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
}
{
"name": "app",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"adler-32": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.2.0.tgz",
"integrity": "sha1-aj5r8KY5ALoVZSgIyxXGgT0aXyU=",
"requires": {
"exit-on-epipe": "~1.0.1",
"printj": "~1.1.0"
}
},
"cfb": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/cfb/-/cfb-1.1.4.tgz",
"integrity": "sha512-rwFkl3aFO3f+ljR27YINwC0x8vPjyiEVbYbrTCKzspEf7Q++3THdfHVgJYNUbxNcupJECrLX+L40Mjm9hm/Bgw==",
"requires": {
"adler-32": "~1.2.0",
"commander": "^2.16.0",
"crc-32": "~1.2.0",
"printj": "~1.1.2"
}
},
"codepage": {
"version": "1.14.0",
"resolved": "https://registry.npmjs.org/codepage/-/codepage-1.14.0.tgz",
"integrity": "sha1-jL4lSBMjVZ19MHVxsP/5HnodL5k=",
"requires": {
"commander": "~2.14.1",
"exit-on-epipe": "~1.0.1"
},
"dependencies": {
"commander": {
"version": "2.14.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
"integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
}
}
},
"commander": {
"version": "2.17.1",
"resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
"integrity": "sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg=="
},
"crc-32": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
"integrity": "sha512-1uBwHxF+Y/4yF5G48fwnKq6QsIXheor3ZLPT80yGBV1oEUwpPojlEhQbWKVw1VwcTQyMGHK1/XMmTjmlsmTTGA==",
"requires": {
"exit-on-epipe": "~1.0.1",
"printj": "~1.1.0"
}
},
"exit-on-epipe": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz",
"integrity": "sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw=="
},
"file-saver": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
"integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
},
"frac": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
"integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
},
"printj": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/printj/-/printj-1.1.2.tgz",
"integrity": "sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ=="
},
"raw-loader": {
"version": "0.5.1",
"resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-0.5.1.tgz",
"integrity": "sha1-DD0L6u2KAclm2Xh793goElKpeao=",
"dev": true
},
"script-loader": {
"version": "0.7.2",
"resolved": "https://registry.npmjs.org/script-loader/-/script-loader-0.7.2.tgz",
"integrity": "sha512-UMNLEvgOAQuzK8ji8qIscM3GIrRCWN6MmMXGD4SD5l6cSycgGsCo0tX5xRnfQcoghqct0tjHjcykgI1PyBE2aA==",
"dev": true,
"requires": {
"raw-loader": "~0.5.1"
}
},
"ssf": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/ssf/-/ssf-0.10.3.tgz",
"integrity": "sha512-pRuUdW0WwyB2doSqqjWyzwCD6PkfxpHAHdZp39K3dp/Hq7f+xfMwNAWIi16DyrRg4gg9c/RvLYkJTSawTPTm1w==",
"requires": {
"frac": "~1.1.2"
}
},
"wmf": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
"integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
},
"xlsx": {
"version": "0.15.6",
"resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.15.6.tgz",
"integrity": "sha512-7vD9eutyLs65iDjNFimVN+gk/oDkfkCgpQUjdE82QgzJCrBHC4bGPH7fzKVyy0UPp3gyFVQTQEFJaWaAvZCShQ==",
"requires": {
"adler-32": "~1.2.0",
"cfb": "^1.1.4",
"codepage": "~1.14.0",
"commander": "~2.17.1",
"crc-32": "~1.2.0",
"exit-on-epipe": "~1.0.1",
"ssf": "~0.10.3",
"wmf": "~1.0.1"
}
}
}
}
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service serve --mode test",
"dev-serve": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service serve --mode development",
"build": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service build",
"dev-build": "node --max_old_space_size=8102 ./node_modules/@vue/cli-service/bin/vue-cli-service build --mode development",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@fullcalendar/core": "^4.4.0",
"@fullcalendar/daygrid": "^4.4.0",
"@fullcalendar/interaction": "^4.4.0",
"@fullcalendar/list": "^4.4.0",
"@fullcalendar/timegrid": "^4.4.0",
"@fullcalendar/vue": "^4.4.0",
"axios": "^0.19.1",
"core-js": "^3.4.4",
"echarts": "^4.6.0",
"element-ui": "^2.13.0",
"file-saver": "^2.0.2",
"font-awesome": "^4.7.0",
"interactjs": "^1.9.4",
"moment": "^2.24.0",
"path-to-regexp": "^6.1.0",
"qs": "^6.9.1",
"rxjs": "^6.5.4",
"tinymce": "4.8.5",
"view-design": "^4.1.0",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-grid-layout": "^2.3.7",
"vue-i18n": "^8.15.3",
"vue-property-decorator": "^8.3.0",
"vue-router": "^3.1.3",
"vuex": "^3.1.2",
"xlsx": "^0.15.6"
},
"devDependencies": {
"@types/echarts": "^4.4.3",
"@types/jest": "^24.0.19",
"@types/mockjs": "^1.0.2",
"@types/qs": "^6.9.0",
"@vue/cli-plugin-babel": "^4.1.0",
"@vue/cli-plugin-e2e-cypress": "^4.1.0",
"@vue/cli-plugin-router": "^4.1.0",
"@vue/cli-plugin-typescript": "^4.1.0",
"@vue/cli-plugin-unit-jest": "^4.1.0",
"@vue/cli-plugin-vuex": "^4.1.0",
"@vue/cli-service": "^4.1.0",
"@vue/test-utils": "1.0.0-beta.29",
"axios-mock-adapter": "^1.17.0",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"mockjs": "^1.1.0",
"script-loader": "^0.7.2",
"typescript": "~3.5.3",
"vue-template-compiler": "^2.6.10"
}
}
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<artifactId>ibzdict</artifactId>
<groupId>cn.ibizlab</groupId>
<version>1.0.0.0</version>
</parent>
<artifactId>ibzdict-web</artifactId>
<name>Ibzdict web</name>
<description>Ibzdict web</description>
<dependencies>
</dependencies>
</project>
{
"ibzdictitemgridview": {
"title": "字典项目表格视图",
"caption": "字典项目",
"viewtype": "DEGRIDVIEW",
"viewmodule": "dict",
"viewname": "IBZDictItemGridView",
"viewtag": "47b7df6b047fe705eed95fd2fd500d1f"
},
"ibzdictitemeditview": {
"title": "字典项目编辑视图",
"caption": "字典项目",
"viewtype": "DEEDITVIEW",
"viewmodule": "dict",
"viewname": "IBZDictItemEditView",
"viewtag": "8e2a3a0c6f621484640b51b1408635c4"
},
"ibzdictgridview": {
"title": "实体表格视图",
"caption": "数据字典",
"viewtype": "DEGRIDVIEW",
"viewmodule": "dict",
"viewname": "IBZDictGridView",
"viewtag": "a4f6d040cdb6781cb505ec6b644617d9"
},
"ibzdicteditview": {
"title": "实体编辑视图",
"caption": "数据字典",
"viewtype": "DEEDITVIEW",
"viewmodule": "dict",
"viewname": "IBZDictEditView",
"viewtag": "b5f1416271b6cae0b21902468b267c5e"
},
"appindexview": {
"title": "字典管理",
"caption": "字典管理",
"viewtype": "APPINDEXVIEW",
"viewmodule": "dict",
"viewname": "AppIndexView",
"viewtag": "D394F269-6F97-4ED7-AFE8-F4A2E09BA602"
}
}
.loader {
position: relative;
width: 12.5em;
height: 12.5em;
transform: rotate(165deg);
}
.loader:before, .loader:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 2.5em;
height: 2.5em;
border-radius: 1.25em;
transform: translate(-50%, -50%);
}
.loader:before {
animation: before 2s infinite;
}
.loader:after {
animation: after 2s infinite;
}
@keyframes before {
0% {
width: 2.5em;
box-shadow: 5em -2.5em rgba(88, 163, 243, 0.75), -5em 2.5em rgba(153, 202, 255, 0.75);
}
35% {
width: 12.5em;
box-shadow: 0 -2.5em rgba(88, 163, 243, 0.75), 0 2.5em rgba(153, 202, 255, 0.75);
}
70% {
width: 2.5em;
box-shadow: -5em -2.5em rgba(88, 163, 243, 0.75), 5em 2.5em rgba(153, 202, 255, 0.75);
}
100% {
box-shadow: 5em -2.5em rgba(88, 163, 243, 0.75), -5em 2.5em rgba(153, 202, 255, 0.75);
}
}
@keyframes after {
0% {
height: 2.5em;
box-shadow: 2.5em 5em rgba(224, 224, 224, 0.75), -2.5em -5em rgba(198, 200, 210, 0.75);
}
35% {
height: 12.5em;
box-shadow: 2.5em 0 rgba(224, 224, 224, 0.75), -2.5em 0 rgba(198, 200, 210, 0.75);
}
70% {
height: 2.5em;
box-shadow: 2.5em -5em rgba(224, 224, 224, 0.75), -2.5em 5em rgba(198, 200, 210, 0.75);
}
100% {
box-shadow: 2.5em 5em rgba(224, 224, 224, 0.75), -2.5em -5em rgba(198, 200, 210, 0.75);
}
}
/** * Attempt to center the whole thing! */
html, body {
height: 100%;
}
.loader {
position: absolute;
top: calc(50% - 6.25em);
left: calc(50% - 6.25em);
}
tinymce.addI18n('en_US',{
"Cut": "Cut",
"Heading 5": "Heading 5",
"Header 2": "Header 2",
"Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.": "Your browser doesn't support direct access to the clipboard. Please use the Ctrl+X\/C\/V keyboard shortcuts instead.",
"Heading 4": "Heading 4",
"Div": "Div",
"Heading 2": "Heading 2",
"Paste": "Paste",
"Close": "Close",
"Font Family": "Font Family",
"Pre": "Pre",
"Align right": "Align right",
"New document": "New document",
"Blockquote": "Blockquote",
"Numbered list": "Numbered list",
"Heading 1": "Heading 1",
"Headings": "Headings",
"Increase indent": "Increase indent",
"Formats": "Formats",
"Headers": "Headers",
"Select all": "Select all",
"Header 3": "Header 3",
"Blocks": "Blocks",
"Undo": "Undo",
"Strikethrough": "Strike-through",
"Bullet list": "Bullet list",
"Header 1": "Header 1",
"Superscript": "Superscript",
"Clear formatting": "Clear formatting",
"Font Sizes": "Font Sizes",
"Subscript": "Subscript",
"Header 6": "Header 6",
"Redo": "Redo",
"Paragraph": "Paragraph",
"Ok": "Ok",
"Bold": "Bold",
"Code": "Code",
"Italic": "Italic",
"Align center": "Align centre",
"Header 5": "Header 5",
"Heading 6": "Heading 6",
"Heading 3": "Heading 3",
"Decrease indent": "Decrease indent",
"Header 4": "Header 4",
"Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.": "Paste is now in plain text mode. Contents will now be pasted as plain text until you toggle this option off.",
"Underline": "Underline",
"Cancel": "Cancel",
"Justify": "Justify",
"Inline": "Inline",
"Copy": "Copy",
"Align left": "Align left",
"Visual aids": "Visual aids",
"Lower Greek": "Lower Greek",
"Square": "Square",
"Default": "Default",
"Lower Alpha": "Lower Alpha",
"Circle": "Circle",
"Disc": "Disc",
"Upper Alpha": "Upper Alpha",
"Upper Roman": "Upper Roman",
"Lower Roman": "Lower Roman",
"Id should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.": "ID should start with a letter, followed only by letters, numbers, dashes, dots, colons or underscores.",
"Name": "Name",
"Anchor": "Anchor",
"Id": "ID",
"You have unsaved changes are you sure you want to navigate away?": "You have unsaved changes are you sure you want to navigate away?",
"Restore last draft": "Restore last draft",
"Special character": "Special character",
"Source code": "Source code",
"Language": "Language",
"Insert\/Edit code sample": "Insert\/Edit code sample",
"B": "B",
"R": "R",
"G": "G",
"Color": "Colour",
"Right to left": "Right to left",
"Left to right": "Left to right",
"Emoticons": "Emoticons",
"Robots": "Robots",
"Document properties": "Document properties",
"Title": "Title",
"Keywords": "Keywords",
"Encoding": "Encoding",
"Description": "Description",
"Author": "Author",
"Fullscreen": "Full-screen",
"Horizontal line": "Horizontal line",
"Horizontal space": "Horizontal space",
"Insert\/edit image": "Insert\/edit image",
"General": "General",
"Advanced": "Advanced",
"Source": "Source",
"Border": "Border",
"Constrain proportions": "Constrain proportions",
"Vertical space": "Vertical space",
"Image description": "Image description",
"Style": "Style",
"Dimensions": "Dimensions",
"Insert image": "Insert image",
"Image": "Image",
"Zoom in": "Zoom in",
"Contrast": "Contrast",
"Back": "Back",
"Gamma": "Gamma",
"Flip horizontally": "Flip horizontally",
"Resize": "Resize",
"Sharpen": "Sharpen",
"Zoom out": "Zoom out",
"Image options": "Image options",
"Apply": "Apply",
"Brightness": "Brightness",
"Rotate clockwise": "Rotate clockwise",
"Rotate counterclockwise": "Rotate counterclockwise",
"Edit image": "Edit image",
"Color levels": "Colour levels",
"Crop": "Crop",
"Orientation": "Orientation",
"Flip vertically": "Flip vertically",
"Invert": "Invert",
"Date\/time": "Date\/time",
"Insert date\/time": "Insert date\/time",
"Remove link": "Remove link",
"Url": "URL",
"Text to display": "Text to display",
"Anchors": "Anchors",
"Insert link": "Insert link",
"Link": "Link",
"New window": "New window",
"None": "None",
"The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?": "The URL you entered seems to be an external link. Do you want to add the required http:\/\/ prefix?",
"Paste or type a link": "Paste or type a link",
"Target": "Target",
"The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?": "The URL you entered seems to be an email address. Do you want to add the required mailto: prefix?",
"Insert\/edit link": "Insert\/edit link",
"Insert\/edit video": "Insert\/edit video",
"Media": "Media",
"Alternative source": "Alternative source",
"Paste your embed code below:": "Paste your embed code below:",
"Insert video": "Insert video",
"Poster": "Poster",
"Insert\/edit media": "Insert\/edit media",
"Embed": "Embed",
"Nonbreaking space": "Non-breaking space",
"Page break": "Page break",
"Paste as text": "Paste as text",
"Preview": "Preview",
"Print": "Print",
"Save": "Save",
"Could not find the specified string.": "Could not find the specified string.",
"Replace": "Replace",
"Next": "Next",
"Whole words": "Whole words",
"Find and replace": "Find and replace",
"Replace with": "Replace with",
"Find": "Find",
"Replace all": "Replace all",
"Match case": "Match case",
"Prev": "Prev",
"Spellcheck": "Spell-check",
"Finish": "Finish",
"Ignore all": "Ignore all",
"Ignore": "Ignore",
"Add to Dictionary": "Add to Dictionary",
"Insert row before": "Insert row before",
"Rows": "Rows",
"Height": "Height",
"Paste row after": "Paste row after",
"Alignment": "Alignment",
"Border color": "Border colour",
"Column group": "Column group",
"Row": "Row",
"Insert column before": "Insert column before",
"Split cell": "Split cell",
"Cell padding": "Cell padding",
"Cell spacing": "Cell spacing",
"Row type": "Row type",
"Insert table": "Insert table",
"Body": "Body",
"Caption": "Caption",
"Footer": "Footer",
"Delete row": "Delete row",
"Paste row before": "Paste row before",
"Scope": "Scope",
"Delete table": "Delete table",
"H Align": "H Align",
"Top": "Top",
"Header cell": "Header cell",
"Column": "Column",
"Row group": "Row group",
"Cell": "Cell",
"Middle": "Middle",
"Cell type": "Cell type",
"Copy row": "Copy row",
"Row properties": "Row properties",
"Table properties": "Table properties",
"Bottom": "Bottom",
"V Align": "V Align",
"Header": "Header",
"Right": "Right",
"Insert column after": "Insert column after",
"Cols": "Cols",
"Insert row after": "Insert row after",
"Width": "Width",
"Cell properties": "Cell properties",
"Left": "Left",
"Cut row": "Cut row",
"Delete column": "Delete column",
"Center": "Centre",
"Merge cells": "Merge cells",
"Insert template": "Insert template",
"Templates": "Templates",
"Background color": "Background colour",
"Custom...": "Custom...",
"Custom color": "Custom colour",
"No color": "No colour",
"Text color": "Text colour",
"Table of Contents": "Table of Contents",
"Show blocks": "Show blocks",
"Show invisible characters": "Show invisible characters",
"Words: {0}": "Words: {0}",
"Insert": "Insert",
"File": "File",
"Edit": "Edit",
"Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help": "Rich Text Area. Press ALT-F9 for menu. Press ALT-F10 for toolbar. Press ALT-0 for help",
"Tools": "Tools",
"View": "View",
"Table": "Table",
"Format": "Format"
});
\ No newline at end of file
此差异已折叠。
/* PrismJS 1.14.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.word-wrap{word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.mce-content-body .mce-reset{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;text-decoration:none;color:black;font-family:Arial;font-size:11px;text-shadow:none;float:none;position:static;width:auto;height:auto;white-space:nowrap;cursor:inherit;line-height:normal;font-weight:normal;text-align:left;-webkit-tap-highlight-color:transparent;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;direction:ltr;max-width:none}.mce-object{border:1px dotted #3A3A3A;background:#D5D5D5 url(img/object.gif) no-repeat center}.mce-preview-object{display:inline-block;position:relative;margin:0 2px 0 2px;line-height:0;border:1px solid gray}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-preview-object .mce-shim{position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}figure.align-left{float:left}figure.align-right{float:right}figure.image.align-center{display:table;margin-left:auto;margin-right:auto}figure.image{display:inline-block;border:1px solid gray;margin:0 2px 0 1px;background:#f5f2f0}figure.image img{margin:8px 8px 0 8px}figure.image figcaption{margin:6px 8px 6px 8px;text-align:center}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-pagebreak{cursor:default;display:block;border:0;width:100%;height:5px;border:1px dashed #666;margin-top:15px;page-break-before:always}@media print{.mce-pagebreak{border:0}}.mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px !important;height:9px !important;border:1px dotted #3A3A3A;background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-nbsp,.mce-shy{background:#AAA}.mce-shy::after{content:'-'}.mce-match-marker{background:#AAA;color:#fff}.mce-match-marker-selected{background:#3399ff;color:#fff}.mce-spellchecker-word{border-bottom:2px solid rgba(208,2,27,0.5);cursor:default}.mce-spellchecker-grammar{border-bottom:2px solid #008000;cursor:default}.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{border:1px dashed #BBB}td[data-mce-selected],th[data-mce-selected]{background-color:#2276d2 !important}.mce-edit-focus{outline:1px dotted #333}.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false][data-mce-selected]{outline:2px solid #2276d2}.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,.mce-content-body.mce-content-readonly *[contentEditable=true]:hover{outline:none}.mce-content-body *[data-mce-selected="inline-boundary"]{background:#bfe6ff}.mce-content-body .mce-item-anchor[data-mce-selected]{background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-content-body hr{cursor:default}.mce-content-body table{-webkit-nbsp-mode:normal}.ephox-snooker-resizer-bar{background-color:#2276d2;opacity:0}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:.2}.mce-content-body{line-height:1.3}
\ No newline at end of file
body{background-color:#FFFFFF;color:#000000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px;line-height:1.3;scrollbar-3dlight-color:#F0F0EE;scrollbar-arrow-color:#676662;scrollbar-base-color:#F0F0EE;scrollbar-darkshadow-color:#DDDDDD;scrollbar-face-color:#E0E0DD;scrollbar-highlight-color:#F0F0EE;scrollbar-shadow-color:#F0F0EE;scrollbar-track-color:#F5F5F5}td,th{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:14px}.word-wrap{word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.mce-content-body .mce-reset{margin:0;padding:0;border:0;outline:0;vertical-align:top;background:transparent;text-decoration:none;color:black;font-family:Arial;font-size:11px;text-shadow:none;float:none;position:static;width:auto;height:auto;white-space:nowrap;cursor:inherit;line-height:normal;font-weight:normal;text-align:left;-webkit-tap-highlight-color:transparent;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;direction:ltr;max-width:none}.mce-object{border:1px dotted #3A3A3A;background:#D5D5D5 url(img/object.gif) no-repeat center}.mce-preview-object{display:inline-block;position:relative;margin:0 2px 0 2px;line-height:0;border:1px solid gray}.mce-preview-object[data-mce-selected="2"] .mce-shim{display:none}.mce-preview-object .mce-shim{position:absolute;top:0;left:0;width:100%;height:100%;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)}figure.align-left{float:left}figure.align-right{float:right}figure.image.align-center{display:table;margin-left:auto;margin-right:auto}figure.image{display:inline-block;border:1px solid gray;margin:0 2px 0 1px;background:#f5f2f0}figure.image img{margin:8px 8px 0 8px}figure.image figcaption{margin:6px 8px 6px 8px;text-align:center}.mce-toc{border:1px solid gray}.mce-toc h2{margin:4px}.mce-toc li{list-style-type:none}.mce-pagebreak{cursor:default;display:block;border:0;width:100%;height:5px;border:1px dashed #666;margin-top:15px;page-break-before:always}@media print{.mce-pagebreak{border:0}}.mce-item-anchor{cursor:default;display:inline-block;-webkit-user-select:all;-webkit-user-modify:read-only;-moz-user-select:all;-moz-user-modify:read-only;user-select:all;user-modify:read-only;width:9px !important;height:9px !important;border:1px dotted #3A3A3A;background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-nbsp,.mce-shy{background:#AAA}.mce-shy::after{content:'-'}.mce-match-marker{background:#AAA;color:#fff}.mce-match-marker-selected{background:#3399ff;color:#fff}.mce-spellchecker-word{border-bottom:2px solid rgba(208,2,27,0.5);cursor:default}.mce-spellchecker-grammar{border-bottom:2px solid #008000;cursor:default}.mce-item-table,.mce-item-table td,.mce-item-table th,.mce-item-table caption{border:1px dashed #BBB}td[data-mce-selected],th[data-mce-selected]{background-color:#2276d2 !important}.mce-edit-focus{outline:1px dotted #333}.mce-content-body *[contentEditable=false] *[contentEditable=true]:focus{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false] *[contentEditable=true]:hover{outline:2px solid #2276d2}.mce-content-body *[contentEditable=false][data-mce-selected]{outline:2px solid #2276d2}.mce-content-body.mce-content-readonly *[contentEditable=true]:focus,.mce-content-body.mce-content-readonly *[contentEditable=true]:hover{outline:none}.mce-content-body *[data-mce-selected="inline-boundary"]{background:#bfe6ff}.mce-content-body .mce-item-anchor[data-mce-selected]{background:#D5D5D5 url(img/anchor.gif) no-repeat center}.mce-content-body hr{cursor:default}.mce-content-body table{-webkit-nbsp-mode:normal}.ephox-snooker-resizer-bar{background-color:#2276d2;opacity:0}.ephox-snooker-resizer-cols{cursor:col-resize}.ephox-snooker-resizer-rows{cursor:row-resize}.ephox-snooker-resizer-bar.ephox-snooker-resizer-bar-dragging{opacity:.2}
\ No newline at end of file
.tinymce-mobile-unfocused-selections .tinymce-mobile-unfocused-selection{position:absolute;display:inline-block;background-color:green;opacity:.5}body{-webkit-text-size-adjust:none}body img{max-width:96vw}body table img{max-width:95%}
\ No newline at end of file
<template>
<div id='app'>
<app-debug-actions />
<router-view v-if="isRouterAlive"/>
</div>
</template>
+<script lang='ts'>
import { Vue, Component, Provide } from 'vue-property-decorator';
import store from '@/store';
import { LoadAppData } from '@/utils';
@Component({
})
export default class App extends Vue {
/**
* 控制视图是否显示
*/
public isRouterAlive:boolean = false;
/**
* 向后代注入加载行为
*/
@Provide()
public reload = this.viewreload;
/**
* vue生命周期
*/
public created(){
this.loadAppData();
}
/**
* 视图重新加载
*/
public viewreload () {
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true;
})
}
/**
* 视图加载代码表
*/
public async loadAppData(){
const _store:any = store;
if(_store.state && _store.state.codelists && _store.state.codelists.length >0){
this.isRouterAlive = true;
return;
}else{
await LoadAppData.getInstance().load(store);
this.isRouterAlive = true;
}
}
}
</script>
<style lang='less'>
@import './styles/default.less';
</style>
import { ViewTool } from './utils/view-tool/view-tool';
import { UIActionTool } from './utils/uiaction-tool/uiaction-tool';
import { Verify } from './utils/verify/verify';
import { Util } from './utils/util/util';
import { Http } from './utils/http/http';
import { exportExcel } from './utils/export/export';
import { AppPopover } from './utils/app-popover/app-popover';
import { AppModal } from './utils/app-modal/app-modal';
import { AppDrawer } from './utils/app-drawer/app-drawer';
import { uiServiceRegister } from '@/uiservice/ui-service-register';
import { utilServiceRegister } from '@/utilservice/util-service-register';
import { entityServiceRegister } from '@/service/entity-service-register';
import { counterServiceRegister } from '@/counter/counter-service-register';
import InputBox from './components/input-box/input-box.vue'
import AppKeepAlive from './components/app-keep-alive/app-keep-alive.vue'
import TabPageExp from './components/tab-page-exp/tab-page-exp.vue'
import AppLang from './components/app-lang/app-lang.vue'
import AppTheme from './components/app-theme/app-theme.vue'
import AppUser from './components/app-user/app-user.vue'
import AppForm from './components/app-form/app-form.vue'
import APPAutocomplete from './components/app-autocomplete/app-autocomplete.vue'
import AppFormDruipart from './components/app-form-druipart/app-form-druipart.vue'
import DropdownList from './components/dropdown-list/dropdown-list.vue'
import UploadFile from './components/upload-file/upload-file.vue'
import ContextMenuContainer from './components/context-menu-container/context-menu-container.vue'
import AppCheckboxList from './components/app-checkbox-list/app-checkbox-list.vue'
import AppRadioGroup from './components/app-radio-group/app-radio-group.vue'
import AppEmbedPicker from './components/app-embed-picker/app-embed-picker.vue'
import AppTreePicker from './components/app-tree-picker/app-tree-picker.vue'
import AppRichTextEditor from './components/app-rich-text-editor/app-rich-text-editor.vue'
import AppFileUpload from './components/app-file-upload/app-file-upload.vue'
import AppImageUpload from './components/app-image-upload/app-image-upload.vue'
import PropertyLayout from './components/property-layout/property-layout.vue'
import AppRangeEditor from './components/app-range-editor/app-range-editor.vue'
import AppExportExcel from './components/app-export-excel/app-export-excel.vue'
import AppFormGroup from './components/app-form-group/app-form-group.vue'
import AppFormItem from './components/app-form-item/app-form-item.vue'
import AppPicker from './components/app-picker/app-picker.vue'
import AppMpicker from './components/app-mpicker/app-mpicker.vue'
import AppFormGroup2 from './components/app-form-group2/app-form-group2.vue'
import AppFormItem2 from './components/app-form-item2/app-form-item2.vue'
import CodeList from './components/codelist/codelist.vue'
import AppQuickMenus from './components/app-quick-menus/app-quick-menus.vue'
import AppCheckbox from './components/app-checkbox/app-checkbox.vue'
import AppColumnRender from './components/app-column-render/app-column-render.vue'
import AppPickerSelectView from './components/app-picker-select-view/app-picker-select-view.vue'
import AppSiderMenus from './components/app-sider-menus/app-sider-menus.vue'
import AppSpan from './components/app-span/app-span.vue'
import AppAddressSelection from './components/app-address-selection/app-address-selection.vue'
import DropdownListMpicker from './components/dropdown-list-mpicker/dropdown-list-mpicker.vue'
import AppRate from './components/app-rate/app-rate.vue'
import AppSwitch from './components/app-switch/app-switch.vue'
import AppSlider from './components/app-slider/app-slider.vue'
import AppStepper from './components/app-stepper/app-stepper.vue'
import AppPortalDesign from './components/app-portal-design/app-portal-design.vue'
import DatePickerRange from './components/date-picker-range/date-picker-range.vue'
import AppRangeDate from './components/app-range-date/app-range-date.vue'
import AppActionBar from './components/app-actionbar/app-actionbar.vue'
import AppOrgSector from './components/app-orgsector/app-orgsector.vue'
import AppBuild from './components/app-build/app-build.vue'
import AppStudioAction from './components/app-studioaction/app-studioaction.vue'
import AppDebugActions from './components/app-debug-actions/app-debug-actions.vue'
import AppHeaderMenus from './components/app-header-menus/app-header-menus.vue'
import AppColumnLink from './components/app-column-link/app-column-link.vue'
import AppDataUploadView from './components/app-data-upload/app-data-upload.vue'
import DropDownListDynamic from './components/dropdown-list-dynamic/dropdown-list-dynamic.vue'
import AppImagePreview from './components/app-image-preview/app-image-preview.vue'
import AppFormatData from './components/app-format-data/app-format-data.vue'
import AppUploadFileInfo from './components/app-upload-file-info/app-upload-file-info.vue'
// 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister;
// 全局挂载功能服务注册中心
window['utilServiceRegister'] = utilServiceRegister;
// 全局挂载数据服务注册中心
window['entityServiceRegister'] = entityServiceRegister;
// 全局挂载计数器服务注册中心
window['counterServiceRegister'] = counterServiceRegister;
export const AppComponents = {
install(v: any, opt: any) {
v.prototype.$appdrawer = AppDrawer.getInstance();
v.prototype.$appmodal = AppModal.getInstance();
v.prototype.$apppopover = AppPopover.getInstance();
v.prototype.$http = Http.getInstance();
v.prototype.$export = exportExcel.getInstance();
v.prototype.$util = Util;
v.prototype.$verify = Verify;
v.prototype.$viewTool = ViewTool;
v.prototype.$uiActionTool = UIActionTool;
v.component('input-box', InputBox);
v.component('app-keep-alive',AppKeepAlive);
v.component('tab-page-exp',TabPageExp);
v.component('app-lang',AppLang);
v.component('app-theme',AppTheme);
v.component('app-user',AppUser);
v.component('app-form', AppForm);
v.component('app-autocomplete', APPAutocomplete);
v.component('app-form-druipart', AppFormDruipart);
v.component('dropdown-list', DropdownList);
v.component('upload-file', UploadFile);
v.component('context-menu-container', ContextMenuContainer);
v.component('app-checkbox-list',AppCheckboxList);
v.component('app-radio-group',AppRadioGroup);
v.component('app-embed-picker', AppEmbedPicker);
v.component('app-tree-picker', AppTreePicker);
v.component('app-rich-text-editor',AppRichTextEditor);
v.component('app-file-upload',AppFileUpload);
v.component('app-image-upload',AppImageUpload);
v.component('property-layout',PropertyLayout);
v.component('app-range-editor',AppRangeEditor);
v.component('app-export-excel',AppExportExcel);
v.component('app-form-group',AppFormGroup);
v.component('app-form-item',AppFormItem);
v.component('app-picker', AppPicker);
v.component('app-mpicker', AppMpicker);
v.component('app-form-group2', AppFormGroup2);
v.component('app-form-item2', AppFormItem2);
v.component('codelist', CodeList);
v.component('app-quick-menus', AppQuickMenus);
v.component('app-checkbox',AppCheckbox);
v.component('app-column-render',AppColumnRender);
v.component('app-picker-select-view',AppPickerSelectView);
v.component('app-sider-menus',AppSiderMenus);
v.component('app-span', AppSpan);
v.component('app-address-selection', AppAddressSelection);
v.component('dropdown-list-mpicker', DropdownListMpicker);
v.component('app-rate', AppRate);
v.component('app-switch', AppSwitch);
v.component('app-slider', AppSlider);
v.component('app-stepper', AppStepper);
v.component('app-portal-design',AppPortalDesign);
v.component('date-picker-range',DatePickerRange);
v.component('app-range-date', AppRangeDate);
v.component('app-actionbar', AppActionBar);
v.component('app-orgsector', AppOrgSector);
v.component('app-build', AppBuild);
v.component('app-studioaction', AppStudioAction);
v.component('app-debug-actions', AppDebugActions);
v.component('app-header-menus', AppHeaderMenus);
v.component('app-column-link', AppColumnLink);
v.component('app-data-upload', AppDataUploadView);
v.component('dropdown-list-dynamic', DropDownListDynamic);
v.component('app-image-preview', AppImagePreview);
v.component('app-format-data', AppFormatData);
v.component('app-upload-file-info', AppUploadFileInfo);
},
};
\ No newline at end of file
此差异已折叠。
html, body {
height: 100%;
}
.app-error-view {
height: 100%;
width: 100%;
.app-error-container {
height: 380px;
width: 670px;
position: absolute;
top: calc((100% - 400px) / 2);
left: calc((100% - 670px) / 2);
display: flex;
align-items: center;
.error-text {
padding-left: 20px;
.error-text1 {
font-size: 20px;
margin-bottom: 20px;
}
.error-text2 {
font-size: 14px;
}
}
}
}
\ No newline at end of file
<template>
<div class="app-error-view">
<div class="app-error-container">
<img src="/assets/img/404.png" />
<div class="error-text">
<div class="error-text1">{{$t('components.404.errorText1')}}</div>
<div class="error-text2">{{$t('components.404.errorText2')}} <a @click="gotoIndexView">{{$t('components.404.indexPage')}}</a> {{$t('components.404.continue')}}</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component({
})
export default class Error404 extends Vue {
/**
* 跳转首页
*
* @memberof Error404
*/
public gotoIndexView() {
this.$router.push('/');
}
}
</script>
<style lang='less'>
@import './404.less';
</style>
\ No newline at end of file
html, body {
height: 100%;
}
.app-error-view {
height: 100%;
width: 100%;
.app-error-container {
height: 380px;
width: 670px;
position: absolute;
top: calc((100% - 400px) / 2);
left: calc((100% - 670px) / 2);
display: flex;
align-items: center;
.error-text {
padding-left: 20px;
.error-text1 {
font-size: 20px;
margin-bottom: 20px;
}
.error-text2 {
font-size: 14px;
}
}
}
}
\ No newline at end of file
<template>
<div class="app-error-view">
<div class="app-error-container">
<img src="/assets/img/500.png" />
<div class="error-text">
<div class="error-text1">{{$t('components.500.errorText1')}}</div>
<div class="error-text2">{{$t('components.500.errorText2')}} <a @click="gotoIndexView">{{$t('components.500.indexPage')}}</a> {{$t('components.500.continue')}}</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component({
})
export default class Error404 extends Vue {
/**
* 跳转首页
*
* @memberof Error404
*/
public gotoIndexView() {
this.$router.push('/');
}
}
</script>
<style lang='less'>
@import './500.less';
</style>
\ No newline at end of file
.app-actionbar {
padding: 12px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
.app-actionbar-item{
margin-right:10px;
margin-bottom: 10px;
}
}
\ No newline at end of file
<template>
<div class="app-actionbar">
<div class="app-actionbar-item" v-for="(item,index) in items" :key="index">
<Badge v-if="item.counterService&&item.counterService.counterData" :count="item.counterService.counterData[item.counterId]" type="primary">
<i-button @click="handleClick(item.viewlogicname)">{{item.actionName}}</i-button>
</Badge>
<i-button v-else @click="handleClick(item.viewlogicname)">{{item.actionName}}</i-button>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";
import { Subject } from "rxjs";
@Component({})
export default class AppActionBar extends Vue {
/**
* 传入操作栏模型数据
*
* @type {any}
* @memberof AppActionBar
*/
@Prop() public items!:any;
/**
* 触发界面行为
*
* @memberof AppActionBar
*/
public handleClick($event:any){
this.$emit('itemClick',$event);
}
}
</script>
<style lang='less'>
@import "./app-actionbar.less";
</style>
\ No newline at end of file
<template>
<div class="appAddressSelection">
<el-cascader
:disabled="disabled"
size ="medium"
v-model="CurrentVal"
:options="city">
</el-cascader>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import axios from 'axios';
@Component({})
export default class AppAddressSelection extends Vue {
/**
* 传入值
* @type {any}
* @memberof AppAddressSelection
*/
@Prop() public value?:any;
/**
* 是否禁用
* @type {boolean}
* @memberof AppAddressSelection
*/
@Prop() public disabled?: boolean;
/**
* 当前值
*
* @memberof AppAddressSelection
*/
get CurrentVal() {
return this.value;
}
/**
* 值变化
*
* @memberof AppAddressSelection
*/
set CurrentVal(val: any) {
this.$emit("change", val);
}
/**
* 城市数据
*
* @memberof AppAddressSelection
*/
public city :any = [];
/**
* 获取城市数据
*
* @memberof AppAddressSelection
*/
public getcity() {
axios.get("../../assets/json/city_code.json").then((response: any) => {
this.format(response.data);
}).catch((response: any) => {
console.log("城市数据加载失败");
});
}
/**
* 生命周期
*
* @memberof AppAddressSelection
*/
public created() {
this.getcity();
}
/**
* 数据格式化
*
* @memberof AppAddressSelection
*/
public format(data :any) {
let data1 = JSON.parse(JSON.stringify(data).replace(/city/g, 'children'))
let data2 = JSON.parse(JSON.stringify(data1).replace(/name/g, 'label'))
let data3 = JSON.parse(JSON.stringify(data2).replace(/area/g, 'children'))
let data4 = JSON.parse(JSON.stringify(data3).replace(/code/g, 'value'))
this.city = data4;
}
}
</script>
<style lang='less'>
@import './app-address-selection.less';
</style>
\ No newline at end of file
.ivu-auto-complete {
.ivu-select-dropdown-list {
height: 300px;
}
}
<template>
<el-autocomplete
class='text-value'
:value-key="deMajorField"
:disabled="disabled"
v-model="curvalue"
size='small'
:trigger-on-focus="true"
:fetch-suggestions="onSearch"
@select="onACSelect"
@input="onInput"
@blur="onBlur"
style='width:100%;'>
<template v-slot:suffix>
<i v-if="curvalue && !disabled" class='el-icon-circle-close' @click="onClear"></i>
<i class="el-icon-arrow-down"></i>
</template>
</el-autocomplete>
</template>
<script lang='ts'>
import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
import { Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@Component({
})
export default class AppAutocomplete extends Vue {
/**
* 表单数据
*
* @type {*}
* @memberof AppAutocomplete
*/
@Prop() public data: any;
/**
* 视图上下文
*
* @type {*}
* @memberof AppAutocomplete
*/
@Prop() public context!: any;
/**
* 视图参数
*
* @type {*}
* @memberof AppFormDRUIPart
*/
@Prop() public viewparams!: any;
/**
* AC参数
*
* @type {*}
* @memberof AppFormDRUIPart
*/
@Prop({default: {}}) public acParams?: any;
/**
* 表单服务
*
* @type {*}
* @memberof AppFormDRUIPart
*/
@Prop() public service?: any;
/**
* 应用实体主信息属性名称
*
* @type {string}
* @memberof AppAutocomplete
*/
@Prop({default: 'srfmajortext'}) public deMajorField!: string;
/**
* 应用实体主键属性名称
*
* @type {string}
* @memberof AppAutocomplete
*/
@Prop({default: 'srfkey'}) public deKeyField!: string;
/**
* 是否启用
*
* @type {boolean}
* @memberof AppAutocomplete
*/
@Prop() public disabled?: boolean;
/**
* 属性项名称
*
* @type {string}
* @memberof AppAutocomplete
*/
@Prop() public name!: string;
/**
* 编辑器参数
*
* @type {string}
* @memberof AppAutocomplete
*/
@Prop() public itemParam?: any;
/**
* 值项名称
*
* @type {string}
* @memberof AppAutocomplete
*/
@Prop() public valueitem?: string;
/**
* 值
*
* @type {*}
* @memberof AppPicker
*/
@Model('change') public value?: any;
/**
* 当前值
*
* @type {string}
* @memberof AppPicker
*/
public curvalue: string = '';
/**
* 远程请求url 地址
*
* @type {string}
* @memberof AppAutocomplete
*/
@Prop() public url?: string;
/**
* 数组
*
* @type {any[]}
* @memberof AppAutocomplete
*/
public items: any[] = [];
/**
* 输入状态
*
* @type {boolean}
* @memberof AppAutocomplete
*/
public inputState: boolean = false;
/**
* 值变化
*
* @param {*} newVal
* @param {*} oldVal
* @memberof AppPicker
*/
@Watch('value')
public onValueChange(newVal: any, oldVal: any) {
this.curvalue = newVal;
}
/**
* 执行搜索数据
* @param query
* @param callback
*/
public onSearch(query: any, callback: any): void {
// 处理搜索参数
query = !query ? '' : query;
if (!this.inputState && Object.is(query, this.value)) {
query = '';
}
this.inputState = false;
// 合并视图上下文参数和视图参数
let param: any = JSON.parse(JSON.stringify(this.viewparams));
let context: any = JSON.parse(JSON.stringify(this.context));
Object.assign(param, { query: query });
// 附加参数处理
if (this.itemParam.context) {
let _context = this.$util.formatData(this.data,this.itemParam.context);
Object.assign(context,_context);
}
if (this.itemParam.param) {
let _param = this.$util.formatData(this.data,this.itemParam.param);
Object.assign(param,_param);
}
if (this.itemParam.parentdata) {
let _parentdata = this.$util.formatData(this.data,this.itemParam.parentdata);
Object.assign(param,_parentdata);
}
// 错误信息国际化
let error: string = (this.$t('components.appAutocomplete.error') as any);
let miss: string = (this.$t('components.appAutocomplete.miss') as any);
let requestException: string = (this.$t('components.appAutocomplete.requestException') as any);
if(!this.service){
this.$Notice.error({ title: error, desc: miss+'service' });
} else if(!this.acParams.serviceName) {
this.$Notice.error({ title: error, desc: miss+'serviceName' });
} else if(!this.acParams.interfaceName) {
this.$Notice.error({ title: error, desc: miss+'interfaceName' });
} else {
this.service.getItems(this.acParams.serviceName,this.acParams.interfaceName, context, param).then((response: any) => {
if (!response) {
this.$Notice.error({ title: error, desc: requestException });
} else {
this.items = [...response];
}
if (callback) {
callback(this.items);
}
}).catch((error: any) => {
if (callback) {
callback([]);
}
});
}
}
/**
* 选中数据回调
* @param item
*/
public onACSelect(item: any): void {
if (this.name) {
this.$emit('formitemvaluechange', { name: this.name, value: item[this.deMajorField] });
}
if (this.valueitem) {
this.$emit('formitemvaluechange', { name: this.valueitem, value: item[this.deKeyField] });
}
}
/**
* 输入过程中
*
* @memberof AppAutocomplete
*/
public onInput($event: any) {
if (Object.is($event, this.value)) {
this.inputState = true;
}
}
/**
* 失去焦点事件
* @param e
*/
public onBlur(e: any): void {
let val: string = e.target.value;
if (!Object.is(val, this.value)) {
this.onACSelect({ [this.deMajorField]: val, [this.deKeyField]: '' });
}
this.$forceUpdate();
}
/**
* 清除
*/
public onClear($event: any): void {
if (this.name) {
this.$emit('formitemvaluechange', { name: this.name, value: '' });
}
if (this.valueitem) {
this.$emit('formitemvaluechange', { name: this.valueitem, value: '' });
}
this.$forceUpdate();
}
}
</script>
<style lang='less'>
@import './app-autocomplete.less';
</style>
\ No newline at end of file
.show-type {
text-align: right;
position: absolute;
z-index: 99;
right: 0;
top: 2px;
.ivu-btn-group {
.collapse-btn {
padding: 0;
}
}
}
\ No newline at end of file
<template>
<div class='show-type'>
<button-group v-show="!showTypeDir">
<i-button class="collapse-btn" type="primary" @click="clickCollapse('left')">
<icon type="ios-arrow-back"/>
</i-button>
</button-group>
<button-group v-show="showTypeDir">
<el-tooltip :content="$t('components.appBuild.custom')">
<i-button icon="md-build" type="primary" @click="handleClick"></i-button>
</el-tooltip>
<i-button class="collapse-btn" type="primary" @click="clickCollapse('right')">
<icon type="ios-arrow-forward"/>
</i-button>
</button-group>
</div>
</template>
<script lang="ts">
import {Vue, Component, Prop, Watch} from 'vue-property-decorator';
@Component({
})
export default class AppBuild extends Vue {
/**
* 工具栏伸缩
*
* @protected
* @type {boolean}
* @memberof AppBuild
*/
public showTypeDir: boolean = false;
/**
* 点击伸缩
*
* @param {*} type
* @memberof AppBuild
*/
public clickCollapse(type: string) {
this.showTypeDir = Object.is(type, 'left') ? true : false;
}
/**
* 工具点击
*
*@memberof AppBuild
*/
public handleClick(){
this.$emit("handleClick")
}
}
</script>
<style lang="less">
@import './app-build.less';
</style>
\ No newline at end of file
.app-checkbox-list {
overflow: auto;
}
\ No newline at end of file
<template>
<checkbox-group class="app-checkbox-list" v-model="selectArray">
<checkbox v-for="(item,index) in items" :key="index" :label="item.value" :disabled="isDisabled || item.disabled">
<span>{{Object.is(codelistType,'STATIC') ? $t('codelist.'+tag+'.'+item.value) : item.text}}</span>
</checkbox>
</checkbox-group >
</template>
<script lang="ts">
import { Component, Vue, Prop, Model } from 'vue-property-decorator';
import CodeListService from "@service/app/codelist-service";
@Component({
})
export default class AppCheckBox extends Vue {
/**
* 代码表服务对象
*
* @type {CodeListService}
* @memberof AppCheckBox
*/
public codeListService:CodeListService = new CodeListService({ $store: this.$store });
/**
* 代码表标识
*
* @type {string}
* @memberof AppCheckBox
*/
@Prop() public tag?: string;
/**
* 代码表类型
*
* @type {string}
* @memberof AppCheckBox
*/
@Prop() public codelistType?: string;
/**
* 代码表值分隔符
*
* @type {string}
* @memberof AppCheckBox
*/
@Prop({default:';'}) public valueSeparator?: string;
/**
* 是否禁用
*
* @type {boolean}
* @memberof AppCheckBox
*/
@Prop() disabled?: boolean;
/**
* 获取启用禁用状态
*
* @readonly
* @memberof AppCheckBox
*/
get isDisabled() {
if (this.disabled) {
return true;
} else {
return false;
}
}
/**
* 属性名称
*
* @type {*}
* @memberof AppCheckBox
*/
@Prop() name?: any;
/**
* 模式(数字或者字符串)
*
* @type {*}
* @memberof AppCheckBox
*/
@Prop() mode: any;
/**
* 当前模式
*
* @readonly
* @memberof AppCheckBox
*/
get currentmode() {
if (this.mode) {
return this.mode;
} else {
return 'str';
}
}
/**
* 分隔符
*
* @type {*}
* @memberof AppCheckBox
*/
@Prop() separator: any;
/**
* 获取分隔符
*
* @readonly
* @memberof AppCheckBox
*/
get currentseparator() {
if (this.separator) {
return this.separator;
} else {
return ';';
}
}
/**
* 选中值
*
* @type {*}
* @memberof AppCheckBox
*/
@Model('change') selects?: any;
/**
* 选中数组
*
* @memberof AppCheckBox
*/
get selectArray() {
if (this.selects) {
if (Object.is(this.currentmode, 'num') && this.items) {
let selectsArray: Array<any> = [];
let num: number = parseInt(this.selects, 10);
this.items.forEach((item: any) => {
if ((num & item.value) == item.value) {
selectsArray.push(item.value);
}
});
return selectsArray;
} else if (Object.is(this.currentmode, 'str')) {
if (this.selects !== '') {
return this.selects.split(this.valueSeparator);
}
}
} else {
return [];
}
}
/**
* 设置选中
*
* @memberof AppCheckBox
*/
set selectArray(val: any) {
let value: null | string | number = null;
if (Object.is(this.currentmode, 'num')) {
let temp: number = 0;
val.forEach((item: any) => {
temp = temp | parseInt(item, 10);
});
value = temp;
} else if (Object.is(this.currentmode, 'str')) {
let _datas: string[] = [];
this.items.forEach((item: any) => {
const index = val.findIndex((_key: any) => Object.is(item.value, _key));
if (index === -1) {
return;
}
_datas.push(item.value);
});
value = _datas.join(this.valueSeparator);
}
this.$emit('change', value);
}
/**
* 代码表数组
*
* @type {any[]}
* @memberof AppCheckBox
*/
public items: any[] = [];
/**
* vue 生命周期
*
* @memberof AppCheckBox
*/
public created() {
if(this.tag){
if (Object.is(this.codelistType,"STATIC")) {
const codelist = this.$store.getters.getCodeList(this.tag);
if (codelist) {
this.items = [...JSON.parse(JSON.stringify(codelist.items))];
} else {
console.log(`----${this.tag}----$t('components.appCheckBox.notExist')`);
}
} else if (Object.is(this.codelistType,"DYNAMIC")) {
this.codeListService.getItems(this.tag).then((res:any) => {
this.items = res;
}).catch((error:any) => {
console.log(`----${this.tag}----$t('components.appCheckBox.notExist')`);
});
}
}
}
}
</script>
<style lang='less'>
@import './app-checkbox-list.less';
</style>
\ No newline at end of file
.app-checkbox-list {
overflow: auto;
}
\ No newline at end of file
<template>
<div class="checkbox">
<checkbox v-model="CurrentVal" :disabled="disabled"></checkbox>
</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 AppCheckbox extends Vue {
/**
* 传入值
* @type {any}
* @memberof checkbox
*/
@Prop() public value?:any;
/**
* 是否禁用
* @type {boolean}
* @memberof checkbox
*/
@Prop() public disabled?: boolean;
/**
* 当前值
*
* @memberof checkbox
*/
get CurrentVal() {
if(this.value == 0){
return false;
}else if(this.value ==1){
return true;
}
}
/**
* 值变化
*
* @memberof checkbox
*/
set CurrentVal(val: any) {
this.$emit("change", val?1:0);
}
}
</script>
<style lang='less'>
@import "./app-checkbox.less";
</style>
\ No newline at end of file
.app-column-link{
display: inline-block;
cursor:pointer;
}
\ No newline at end of file
<template>
<a class="app-column-link" @click="openLinkView($event)">
<slot></slot>
</a>
</template>
<script lang="ts">
import { Vue, Component,Prop } from 'vue-property-decorator';
import { Subject } from 'rxjs';
/**
* 表格列链接
*/
@Component({
})
export default class AppColumnLink extends Vue {
/**
* 表格行数据
*
* @type {*}
* @memberof AppColumnLink
*/
@Prop() public data!: any;
/**
* 数据链接视图
*
* @type {*}
* @memberof AppColumnLink
*/
@Prop() public linkview?: any;
/**
* 值项名称
*
* @type {string}
* @memberof AppColumnLink
*/
@Prop() public valueitem?: string;
/**
* 导航上下文
*
* @type {*}
* @memberof AppColumnLink
*/
@Prop({default:{}}) public context?:any;
/**
* 导航参数
*
* @type {*}
* @memberof AppColumnLink
*/
@Prop({default:{}}) public viewparams?:any;
/**
* 应用实体主键属性名称
*
* @type {string}
* @memberof AppColumnLink
*/
@Prop() public deKeyField!:string;
/**
* 打开链接视图
*
* @memberof AppColumnLink
*/
public openLinkView($event: any): void {
$event.stopPropagation();
if (!this.data || !this.valueitem || !this.data[this.valueitem]) {
this.$Notice.error({ title: (this.$t('components.appColumnLink.error') as string), desc: (this.$t('components.appColumnLink.valueItemException') as string) });
return;
}
// 公共参数处理
let data: any = {};
const bcancel: boolean = this.handlePublicParams(data);
if (!bcancel) {
return;
}
// 参数处理
let _context = data.context;
let _param = data.param;
Object.assign(_context, { [this.deKeyField]: this.data[this.valueitem] });
const view = JSON.parse(JSON.stringify(this.linkview));
const viewname2: string = this.$util.srfFilePath2(view.viewname);
view.viewname = viewname2;
if (view.isRedirectView) {
this.openRedirectView($event, view, data);
} else if (Object.is(view.placement, 'INDEXVIEWTAB') || Object.is(view.placement, '')) {
this.openIndexViewTab(view, _context, _param);
} else if (Object.is(view.placement, 'POPOVER')) {
this.openPopOver($event, view, _context, _param);
} else if (Object.is(view.placement, 'POPUPMODAL')) {
this.openPopupModal(view, _context, _param);
} else if (view.placement.startsWith('DRAWER')) {
this.openDrawer(view, _context, _param);
}
}
/**
* 路由模式打开视图
*
* @private
* @param {string} viewpath
* @param {*} data
* @memberof AppColumnLink
*/
private openIndexViewTab(view: any, context: any, param: any): void {
const routePath = this.$viewTool.buildUpRoutePath(this.$route, this.context, view.deResParameters, view.parameters, [context] , param);
this.$router.push(routePath);
}
/**
* 模态模式打开视图
*
* @private
* @param {*} view
* @param {*} data
* @memberof AppColumnLink
*/
private openPopupModal(view: any, context: any, param: any): void {
let container: Subject<any> = this.$appmodal.openModal(view, context, param);
container.subscribe((result: any) => {
if (!result || !Object.is(result.ret, 'OK')) {
return;
}
this.openViewClose(result);
});
}
/**
* 抽屉模式打开视图
*
* @private
* @param {*} view
* @param {*} data
* @memberof AppColumnLink
*/
private openDrawer(view: any, context: any, param: any): void {
let container: Subject<any> = this.$appdrawer.openDrawer(view, context, param);
container.subscribe((result: any) => {
if (!result || !Object.is(result.ret, 'OK')) {
return;
}
this.openViewClose(result);
});
}
/**
* 气泡卡片模式打开
*
* @private
* @param {*} $event
* @param {*} view
* @param {*} data
* @memberof AppColumnLink
*/
private openPopOver($event: any, view: any, context: any, param: any): void {
let container: Subject<any> = this.$apppopover.openPop($event, view, context, param);
container.subscribe((result: any) => {
if (!result || !Object.is(result.ret, 'OK')) {
return;
}
this.openViewClose(result);
});
}
/**
* 独立里面弹出
*
* @private
* @param {string} url
* @memberof AppColumnLink
*/
private openPopupApp(url: string): void {
window.open(url, '_blank');
}
/**
* 打开重定向视图
*
* @private
* @param {*} $event
* @param {*} view
* @param {*} data
* @memberof AppColumnLink
*/
private openRedirectView($event: any, view: any, data: any): void {
this.$http.get(view.url, data).then((response: any) => {
if (!response || response.status !== 200) {
this.$Notice.error({ title: '错误', desc: '请求异常' });
}
if (response.status === 401) {
return;
}
const { data: result } = response;
if (result.viewparams && !Object.is(result.viewparams.srfkey, '')) {
Object.assign(data, { srfkey: result.viewparams.srfkey });
}
if (Object.is(result.openmode, 'POPUPAPP') && result.url && !Object.is(result.url, '')) {
this.openPopupApp(result.url);
} else if (Object.is(result.openmode, 'INDEXVIEWTAB') || Object.is(result.openmode, '')) {
// 所有数据保持在同一级
if (data.srfparentdata) {
Object.assign(data, data.srfparentdata);
delete data.srfparentdata;
}
this.openIndexViewTab(view, null, data);
} else if (Object.is(result.openmode, 'POPUPMODAL')) {
const viewname = this.$util.srfFilePath2(result.viewname);
const view: any = {
viewname: viewname,
title: result.title,
width: result.width,
height: result.height,
}
this.openPopupModal(view, null,data);
} else if (result.openmode.startsWith('DRAWER')) {
const viewname = this.$util.srfFilePath2(result.viewname);
const view: any = {
viewname: viewname,
title: result.title,
width: result.width,
height: result.height,
placement: result.openmode,
}
this.openDrawer(view, null, data);
} else if (Object.is(result.openmode, 'POPOVER')) {
const viewname = this.$util.srfFilePath2(result.viewname);
const view: any = {
viewname: viewname,
title: result.title,
width: result.width,
height: result.height,
placement: result.openmode,
}
this.openPopOver($event, view, null, data);
}
}).catch((response: any) => {
if (!response || !response.status || !response.data) {
this.$Notice.error({ title: '错误', desc: '系统异常!' });
return;
}
if (response.status === 401) {
return;
}
});
}
/**
* 打开页面关闭
*
* @param {*} result
* @memberof AppColumnLink
*/
public openViewClose(result: any) {
let item: any = {};
if (result.datas && Array.isArray(result.datas)) {
Object.assign(item, result.datas[0]);
}
console.log(item);
}
/**
* 公共参数处理
*
* @param {*} arg
* @returns
* @memberof AppColumnLink
*/
public handlePublicParams(arg: any): boolean {
if (!this.data) {
this.$Notice.error({ title: (this.$t('components.appColumnLink.error') as string), desc: (this.$t('components.appColumnLink.rowDataException') as string) });
return false;
}
// 合并表单参数
arg.param = JSON.parse(JSON.stringify(this.viewparams));
arg.context = JSON.parse(JSON.stringify(this.context));
return true;
}
}
</script>
<style lang='less'>
@import './app-column-link.less';
</style>
\ No newline at end of file
.column-render{
.input-unit{
display: inline-block;
}
}
\ No newline at end of file
<template>
<div class="column-render">
{{textValue}}
<template v-if="Object.is(type,'input')">
<input-box :disabled="disabled" v-model="editorvalue" @change="($event)=>{onEditorValueChange($event)}"></input-box>
</template>
<template v-else-if="Object.is(type,'dropdown')">
<i-select v-model="editorvalue" :disabled="disabled" :clearable="true" :placeholder="$t('components.appColumnRender.select')" >
<i-option v-for="(item, index) in codelist" :key="index" :value="item.value">{{item.text}}</i-option>
</i-select>
</template>
<template v-else>
<span>{{type}}{{$t('components.appColumnRender.unsupported')}}</span>
</template>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Model, Emit, Watch } from "vue-property-decorator";
import { Subject } from "rxjs";
import { debounceTime, distinctUntilChanged } from "rxjs/operators";
@Component({
})
export default class AppColumnRender extends Vue {
/**
* 值
* @type {any}
* @memberof AppColumnRender
*/
@Prop() public value?: any;
/**
* 是否禁用
* @type {boolean}
* @memberof AppColumnRender
*/
@Prop() public disabled?: boolean;
/**
* 列字段名称
*
* @type {string}
* @memberof AppColumnRender
*/
@Prop() public name?: string;
/**
* 表格行数据
*
* @type {string}
* @memberof AppColumnRender
*/
@Prop() public row?: any;
/**
* 自定义样式
*
* @type {string}
* @memberof AppColumnRender
*/
@Prop() public customStyle?: string;
/**
* 文本信息
* @type {String}
* @memberof AppColumnRender
*/
public textValue: string = "";
/**
* 编辑器类型
* @type {String}
* @memberof AppColumnRender
*/
public type: string = "";
/**
* 值项名称
*
* @type {string}
* @memberof AppColumnRender
*/
public valueitem: string = "";
/**
* 编辑器值
* @type {any}
* @memberof AppColumnRender
*/
public editorvalue: any = "";
/**
* 代码表选项数组
* @memberof AppColumnRender
*/
public codelist: any = [];
public created(){
this.onValueChange(this.value,"");
}
/**
* 自定义列值监控
*
* @param {*} newVal
* @param {*} oldVal
* @memberof AppColumnRender
*/
@Watch('value')
onValueChange(newVal: any, oldVal: any) {
if (newVal) {
let arrs = newVal.split("%");
this.textValue = arrs[0];
let params = [];
if(arrs[1]){
(arrs[1].split(";")).forEach((item:any)=>{
let temp = item.split("=");
if(Object.is(temp[0], "type")){
this.type = temp[1];
} else if(Object.is(temp[0], "value")) {
this.valueitem = temp[1];
if(this.valueitem && this.row[this.valueitem]){
this.editorvalue = this.row[this.valueitem];
}
} else if(Object.is(temp[0], "codelist")) {
this.codelist = temp[1];
}
});
}
}
}
/**
* 编辑器值变化回调
* @param item
*/
public onEditorValueChange(item: any): void {
if (this.name) {
// this.$emit('griditemvaluechange', { name: this.name, value: item });
}
if (this.valueitem) {
this.$emit('griditemvaluechange', { name: this.valueitem, value: item });
}
}
}
</script>
<style lang='less'>
@import "./app-column-render.less";
</style>
\ No newline at end of file
import { Http } from './../../utils/http/http';
import UtilService from '@/utilservice/util-service';
export default class AppDashboardDesignService {
/**
* 工具服务对象
*
* @protected
* @type {UtilService}
* @memberof AppDashboardDesignService
*/
protected utilService: UtilService = new UtilService();
/**
* 加载数据模型
*
* @param {string} serviceName
* @param {*} context
* @param {*} viewparams
* @memberof AppDashboardDesignService
*/
public loadModel(serviceName: string, context: any, viewparams: any) {
return new Promise((resolve: any, reject: any) => {
this.utilService.getService(serviceName).then((service: any) => {
service.loadModelData(JSON.stringify(context), viewparams).then((response: any) => {
resolve(response);
}).catch((response: any) => {
reject(response);
});
}).catch((response: any) => {
reject(response);
});
});
}
/**
* 保存模型
*
* @param {string} serviceName
* @param {*} context
* @param {*} viewparams
* @returns
* @memberof AppDashboardDesignService
*/
public saveModel(serviceName: string, context: any, viewparams: any) {
return new Promise((resolve: any, reject: any) => {
this.utilService.getService(serviceName).then((service: any) => {
service.saveModelData(JSON.stringify(context), '', viewparams).then((response: any) => {
resolve(response);
}).catch((response: any) => {
reject(response);
});
}).catch((response: any) => {
reject(response);
});
});
}
/**
* 加载门户部件集合
*
* @memberof AppDashboardDesignService
*/
public loadPortletList(context: any, viewparams: any): Promise<any> {
return new Promise((resolve: any, reject: any) => {
Http.getInstance().get('./assets/json/portlet-data.json').then((response: any) => {
if (response && response.status === 200 && response.data && Array.isArray(response.data)) {
const datas: any[] = this.filterData(response.data, viewparams.appdeName);
const list = this.prepareList(datas);
const groups = this.prepareGroup(datas);
resolve({data: datas, result: list.reverse(), groups: groups});
}
}).catch((response: any) => {
console.log(response.status);
});
});
}
/**
* 过滤数据
*
* @param {any[]} datas
* @memberof AppDashboardDesignService
*/
public filterData(datas: any[] = [], dataType: string): any[] {
let items: any[] = [];
datas.forEach((data: any) => {
if(Object.is(data.type, 'app')) {
items.push(data);
}
if(Object.is(data.appCodeName, dataType)) {
items.push(data);
}
});
return items;
}
/**
* 分组集合
*
* @param {any[]} [datas=[]]
* @returns {any[]}
* @memberof AppDashboardDesignService
*/
public prepareGroup(datas: any[] = []): any[] {
let items: any[] = [];
datas.forEach((data: any) => {
let item = items.find((item: any) => Object.is(item.value, data.groupCodeName));
if(item) {
let _item = item.children.find((a: any) => Object.is(a.portletCodeName, data.portletCodeName));
if(!_item) {
item.children.push(data);
}
} else {
items.push({name: data.groupName, value: data.groupCodeName, children: [data]});
}
});
return items;
}
/**
* 准备list集合
*
* @memberof AppDashboardDesignService
*/
public prepareList(datas: any[] = []): any[] {
let list: any[] = [];
datas.forEach((data: any) => {
let item = list.find((item: any) => Object.is(data.type, item.type));
if(!item) {
item = {};
Object.assign(item, {
type: data.type,
name: Object.is(data.type, 'app') ? "全局" : data.appName,
children: []
});
list.push(item);
}
this.prepareList2(item.children, data);
})
return list
}
/**
* 准备list项集合
*
* @param {any[]} [children=[]]
* @param {*} [data={}]
* @memberof AppDashboardDesignService
*/
public prepareList2(children: any[] = [], data: any = {}) {
let item = children.find((item: any) => Object.is(data.groupCodeName, item.type));
if(!item) {
item = {};
Object.assign(item, {
type: data.groupCodeName,
name: data.groupName,
children: []
});
children.push(item);
}
let _item = item.children.find((a: any) => Object.is(a.portletCodeName, data.portletCodeName));
if(!_item) {
item.children.push(data);
}
}
}
\ No newline at end of file
.app-dashboard-design {
width: 100%;
height: 100%;
border: 1px solid #ccc;
display: flex;
.design-tree {
width: 300px;
height: 100%;
padding: 5px;
overflow: auto;
.design-filter {
width: 100%;
}
.design-tree-content {
height: calc(100% - 40px);
overflow: auto;
.el-menu {
width: 100%;
border-right: 0;
.drag-div-item {
height: 40px;
line-height: 40px;
background-color: #f7fafc;
margin-bottom: 5px;
border: 1px dashed transparent;
cursor: move;
}
.drag-div-item:hover {
border-color: #107fff;
}
.el-menu-item.is-active {
color: initial;
}
.is-disable {
background-color: #e8eaef;
color: #c9ccd8;
cursor: no-drop !important;
}
}
}
.drag-tree-item {
opacity: .7;
z-index: 1;
position: fixed;
}
}
.design-panel {
flex-grow: 1;
height: 100%;
overflow: auto;
background: #efefef;
.app-grid-layout {
.app-grid-layout-mask {
height: calc(100% + 180px);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background: -webkit-linear-gradient(top, #ddd 10px, transparent 10px),-webkit-linear-gradient(left, #ddd 10px, transparent 10px);
}
.app-grid-layout-item {
height: 100%;
.el-icon-close {
font-size: 16px;
float: right;
margin-top: 4px;
cursor: pointer;
}
}
}
.layout-draging {
.vue-grid-placeholder {
display: initial !important;
}
}
}
}
\ No newline at end of file
.app-data-upload-view{
width: 100%;
height: 100%;
padding: 16px;
.import-temp{
text-align: right;
vertical-align: middle;
color: #409EFF;
}
.data-info-content{
height: 100%;
width: 100%;
overflow: auto;
}
.font-class{
margin: 0px;
padding: 0px;
font-family: '微软雅黑','黑体','宋体';
font-size: 16px;
}
}
\ No newline at end of file
.app-debug-actions {
position: absolute;
top: 0px;
left: 50%;
z-index: 10000;
text-align: center;
transition: all 0.3s;
margin-top: -32px;
>.actions {
.ivu-btn {
width: 100%;
}
}
>.show-buttons {
width: 100%;
height: 18px;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #8893a7;
text-align: center;
color: #8893a7;
cursor: pointer;
>.button {
margin-top: -5px;
}
}
}
.app-debug-actions:hover {
margin-top: 0px;
}
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册