提交 40fdac89 编写于 作者: Mosher's avatar Mosher

init: 同步op远程仓库

上级 bf8295ff
...@@ -128,7 +128,7 @@ $ yarn build ...@@ -128,7 +128,7 @@ $ yarn build
​ |─ ─ XXX-view 视图文件夹 ​ |─ ─ XXX-view 视图文件夹
|─ ─ XXX-view-base.vue 视图基类 |─ ─ XXX-view-base.vue 视图基类
|─ ─ XXX-view.vue 自定义视图文件 |─ ─ XXX-view.vue 自定义视图文件
|─ ─ XXX-view.scss 自定义视图样式文件 |─ ─ XXX-view.less 自定义视图样式文件
​ |─ ─ main.ts 应用主函数入口 ​ |─ ─ main.ts 应用主函数入口
​ |─ ─ page-register.ts 全局视图注册 ​ |─ ─ page-register.ts 全局视图注册
​ |─ ─ router.ts 路由配置文件 ​ |─ ─ router.ts 路由配置文件
...@@ -140,8 +140,8 @@ $ yarn build ...@@ -140,8 +140,8 @@ $ yarn build
|─ ─ YYY-logic.ts 自定义应用实体数据处理逻辑文件 |─ ─ YYY-logic.ts 自定义应用实体数据处理逻辑文件
|─ ─ store 全局状态管理 |─ ─ store 全局状态管理
|─ ─ styles 样式文件夹 |─ ─ styles 样式文件夹
|─ ─ default.scss 默认样式 |─ ─ default.less 默认样式
|─ ─ user.scss 用户自定义样式 |─ ─ user.less 用户自定义样式
|─ ─ theme 主题文件夹 |─ ─ theme 主题文件夹
|─ ─ uiservice 界面服务文件 |─ ─ uiservice 界面服务文件
|─ ─ XXX 应用实体名称 |─ ─ XXX 应用实体名称
...@@ -155,7 +155,7 @@ $ yarn build ...@@ -155,7 +155,7 @@ $ yarn build
​ |─ ─ XXX 部件名称 ​ |─ ─ XXX 部件名称
|─ ─ XXX-base.vue 视图基类 |─ ─ XXX-base.vue 视图基类
|─ ─ XXX.vue 自定义部件文件 |─ ─ XXX.vue 自定义部件文件
|─ ─ XXX.scss 部件样式文件 |─ ─ XXX.less 部件样式文件
​ |─ ─ XXX.model.ts 部件model文件 ​ |─ ─ XXX.model.ts 部件model文件
​ |─ ─ XXX.service.ts 部件服务文件 ​ |─ ─ XXX.service.ts 部件服务文件
|─ ─ app-register.ts 公共组件全局注册 |─ ─ app-register.ts 公共组件全局注册
...@@ -181,4 +181,4 @@ $ yarn build ...@@ -181,4 +181,4 @@ $ yarn build
2.加入钉钉 Vue_R7自助服务群(中文) 2.加入钉钉 Vue_R7自助服务群(中文)
<img src="./imgs/getting-started/vue-r7-group.png" height="400" width="400"> <img src="./imgs/getting-started/vue-r7-group.png" height="400" width="400">
\ No newline at end of file
...@@ -19,11 +19,10 @@ function copyFolder(copiedPath, resultPath, direct) { ...@@ -19,11 +19,10 @@ function copyFolder(copiedPath, resultPath, direct) {
console.log(`form ${ccp} copy to ${crp}`); console.log(`form ${ccp} copy to ${crp}`);
} else { } else {
try { try {
fs.accessSync(crp, fs.constants.F_OK); fs.accessSync(path.join(crp, '..'), fs.constants.W_OK);
} catch (error) {
fs.mkdirSync(crp);
} finally {
copyFolder(ccp, crp, true); copyFolder(ccp, crp, true);
} catch (error) {
console.log('folder write error:', error);
} }
} }
......
{
"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"
}
}
}
}
因为 它太大了无法显示 源差异 。您可以改为 查看blob
此差异已折叠。
<template> <template>
<div id='app'> <div id='app'>
<app-debug-actions />
<router-view v-if="isRouterAlive"/> <router-view v-if="isRouterAlive"/>
</div> </div>
</template> </template>
...@@ -57,7 +58,7 @@ export default class App extends Vue { ...@@ -57,7 +58,7 @@ export default class App extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './styles/default.scss'; @import './styles/default.less';
</style> </style>
...@@ -14,10 +14,9 @@ import { entityServiceRegister } from '@/service/entity-service-register'; ...@@ -14,10 +14,9 @@ import { entityServiceRegister } from '@/service/entity-service-register';
import { counterServiceRegister } from '@/counter/counter-service-register'; import { counterServiceRegister } from '@/counter/counter-service-register';
import { codeListRegister } from '@codelist/codelist-register'; import { codeListRegister } from '@codelist/codelist-register';
import { messageServiceRegister } from '@/message/message-service-register'; import { messageServiceRegister } from '@/message/message-service-register';
import AppIcon from './components/app-icon/app-icon.vue'
import AppCaption from './components/app-caption/app-caption.vue' import AppCascader from './components/app-cascader/app-cascader.vue';
import AppHelp from './components/app-help/app-help.vue' import AppArrayBox from './components/app-array-box/app-array-box.vue'
import AppButton from './components/app-button/app-button.vue'
import InputBox from './components/input-box/input-box.vue' import InputBox from './components/input-box/input-box.vue'
import AppKeepAlive from './components/app-keep-alive/app-keep-alive.vue' import AppKeepAlive from './components/app-keep-alive/app-keep-alive.vue'
import TabPageExp from './components/tab-page-exp/tab-page-exp.vue' import TabPageExp from './components/tab-page-exp/tab-page-exp.vue'
...@@ -62,10 +61,14 @@ import AppSwitch from './components/app-switch/app-switch.vue' ...@@ -62,10 +61,14 @@ import AppSwitch from './components/app-switch/app-switch.vue'
import AppSlider from './components/app-slider/app-slider.vue' import AppSlider from './components/app-slider/app-slider.vue'
import AppStepper from './components/app-stepper/app-stepper.vue' import AppStepper from './components/app-stepper/app-stepper.vue'
import DatePickerRange from './components/date-picker-range/date-picker-range.vue' import DatePickerRange from './components/date-picker-range/date-picker-range.vue'
import AppRangeDate from './components/app-range-date/app-range-date.vue' import AppDateRangePicker from './components/app-date-range-picker/app-date-range-picker.vue'
import AppNumberRangePicker from './components/app-number-range-picker/app-number-range-picker.vue'
import AppActionBar from './components/app-actionbar/app-actionbar.vue' import AppActionBar from './components/app-actionbar/app-actionbar.vue'
import AppOrgSector from './components/app-orgsector/app-orgsector.vue' import AppOrgSector from './components/app-orgsector/app-orgsector.vue'
import AppBuild from './components/app-build/app-build.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 AppColumnLink from './components/app-column-link/app-column-link.vue'
import DropDownListDynamic from './components/dropdown-list-dynamic/dropdown-list-dynamic.vue' import DropDownListDynamic from './components/dropdown-list-dynamic/dropdown-list-dynamic.vue'
import AppImagePreview from './components/app-image-preview/app-image-preview.vue' import AppImagePreview from './components/app-image-preview/app-image-preview.vue'
...@@ -102,7 +105,7 @@ import AppRawItem from './components/app-rawitem/app-rawitem.vue' ...@@ -102,7 +105,7 @@ import AppRawItem from './components/app-rawitem/app-rawitem.vue'
import AppImageRomate from './components/app-image-romate/app-image-romate.vue' import AppImageRomate from './components/app-image-romate/app-image-romate.vue'
import { MenuIcon } from './components/menu-icon/menu-icon' import { MenuIcon } from './components/menu-icon/menu-icon'
import AppVuePivottable from './components/app-vue-pivottable/app-vue-pivottable.vue'; import AppVuePivottable from './components/app-vue-pivottable/app-vue-pivottable.vue';
import AppMapPosition from './components/app-map-position/app-map-position.vue'; import AppMapPicker from './components/app-map-picker/app-map-picker.vue';
import AppSortBar from './components/app-sort-bar/app-sort-bar.vue'; import AppSortBar from './components/app-sort-bar/app-sort-bar.vue';
import AppAfterTime from './components/app-after-time/app-after-time.vue'; import AppAfterTime from './components/app-after-time/app-after-time.vue';
import AppInputIp from './components/app-input-ip/app-input-ip.vue'; import AppInputIp from './components/app-input-ip/app-input-ip.vue';
...@@ -139,22 +142,11 @@ import AppCtrlPos from './components/layout-element/structure/app-ctrl-pos/app-c ...@@ -139,22 +142,11 @@ import AppCtrlPos from './components/layout-element/structure/app-ctrl-pos/app-c
import AppPresetButton from './components/layout-element/interactive/app-preset-button/app-preset-button.vue'; import AppPresetButton from './components/layout-element/interactive/app-preset-button/app-preset-button.vue';
import AppFieldImageDynamic from './components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue'; import AppFieldImageDynamic from './components/layout-element/media/app-field-image-dynamic/app-field-image-dynamic.vue';
import AppTodoList from './components/app-todo-list/app-todo-list.vue'; import AppTodoList from './components/app-todo-list/app-todo-list.vue';
import AppGridPagination from './components/app-grid-pagination/app-grid-pagination.vue';
import AppSearchbar from './components/app-searchbar/app-searchbar.vue';
import AppEYUpload from './components/app-ey-upload/app-ey-upload.vue';
import AppEYMPicker from './components/app-ey-mpicker/app-ey-mpicker.vue';
import ExtendActionTimeline from './components/extend-action-timeline/extend-action-timeline.vue'; import ExtendActionTimeline from './components/extend-action-timeline/extend-action-timeline.vue';
import AppAddressCascader from './components/app-address-cascader/app-address-cascader.vue'; import AppAddressCascader from './components/app-address-cascader/app-address-cascader.vue';
import AppDateRange from './components/app-date-range/app-date-range.vue'; import AppInputIcon from './components/app-input-icon/app-input-icon.vue';
// 布局组件 import AppTreeSelect from './components/app-tree-select/app-tree-select.vue'
import AppIndexViewLayoutLeft from './layout/index-view-layout-left/index-view-layout-left.vue'; import AppFormMdCtrl from './components/app-form-mdctrl/app-form-mdctrl.vue';
import AppIndexViewLayoutTop from './layout/index-view-layout-top/index-view-layout-top.vue';
import AppGridViewLayout from './layout/grid-view-layout/grid-view-layout.vue';
import AppEditViewLayout from './layout/edit-view-layout/edit-view-layout.vue';
import AppMEditViewLayout from './layout/medit-view-layout/medit-view-layout.vue';
import AppPickUpViewLayout from './layout/pickup-view-layout/pickup-view-layout.vue';
import AppMPickUpViewLayout from './layout/mpickup-view-layout/mpickup-view-layout.vue';
import AppPickUpGridViewLayout from './layout/pickup-grid-view-layout/pickup-grid-view-layout.vue';
// 全局挂载UI实体服务注册中心 // 全局挂载UI实体服务注册中心
window['uiServiceRegister'] = uiServiceRegister; window['uiServiceRegister'] = uiServiceRegister;
// 全局挂载实体权限服务注册中心 // 全局挂载实体权限服务注册中心
...@@ -181,15 +173,7 @@ export const AppComponents = { ...@@ -181,15 +173,7 @@ export const AppComponents = {
v.prototype.$verify = Verify; v.prototype.$verify = Verify;
v.prototype.$viewTool = ViewTool; v.prototype.$viewTool = ViewTool;
v.prototype.$uiActionTool = UIActionTool; v.prototype.$uiActionTool = UIActionTool;
v.component('app-icon',AppIcon); v.component('app-cascader',AppCascader);
v.component('app-caption',AppCaption);
v.component('app-help',AppHelp);
v.component('app-button',AppButton);
v.component('app-medit-view-layout',AppMEditViewLayout);
v.component('app-edit-view-layout',AppEditViewLayout);
v.component('app-index-view-layout-top',AppIndexViewLayoutTop);
v.component('app-index-view-layout-left',AppIndexViewLayoutLeft);
v.component('app-grid-view-layout',AppGridViewLayout);
v.component('app-department-personnel',AppDepartmentPersonnel); v.component('app-department-personnel',AppDepartmentPersonnel);
v.component('app-panel-button',AppPanelButton); v.component('app-panel-button',AppPanelButton);
v.component('app-panel-field',AppPanelField); v.component('app-panel-field',AppPanelField);
...@@ -241,10 +225,14 @@ export const AppComponents = { ...@@ -241,10 +225,14 @@ export const AppComponents = {
v.component('app-stepper', AppStepper); v.component('app-stepper', AppStepper);
v.component('app-portal-design', () => import('./components/app-portal-design/app-portal-design.vue')); v.component('app-portal-design', () => import('./components/app-portal-design/app-portal-design.vue'));
v.component('date-picker-range',DatePickerRange); v.component('date-picker-range',DatePickerRange);
v.component('app-range-date', AppRangeDate); v.component('app-date-range-picker', AppDateRangePicker);
v.component('app-number-range-picker', AppNumberRangePicker);
v.component('app-actionbar', AppActionBar); v.component('app-actionbar', AppActionBar);
v.component('app-orgsector', AppOrgSector); v.component('app-orgsector', AppOrgSector);
v.component('app-build', AppBuild); 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-column-link', AppColumnLink);
v.component('app-data-upload', () => import('./components/app-data-upload/app-data-upload.vue')); v.component('app-data-upload', () => import('./components/app-data-upload/app-data-upload.vue'));
v.component('dropdown-list-dynamic', DropDownListDynamic); v.component('dropdown-list-dynamic', DropDownListDynamic);
...@@ -277,7 +265,7 @@ export const AppComponents = { ...@@ -277,7 +265,7 @@ export const AppComponents = {
v.component('app-image-romate', AppImageRomate); v.component('app-image-romate', AppImageRomate);
v.component('menu-icon', MenuIcon); v.component('menu-icon', MenuIcon);
v.component('app-vue-pivottable', AppVuePivottable); v.component('app-vue-pivottable', AppVuePivottable);
v.component('app-map-position', AppMapPosition); v.component('app-map-picker', AppMapPicker);
v.component('app-sort-bar', AppSortBar); v.component('app-sort-bar', AppSortBar);
v.component('app-after-time', AppAfterTime); v.component('app-after-time', AppAfterTime);
v.component('app-input-ip', AppInputIp); v.component('app-input-ip', AppInputIp);
...@@ -314,15 +302,11 @@ export const AppComponents = { ...@@ -314,15 +302,11 @@ export const AppComponents = {
v.component('app-preset-button',AppPresetButton); v.component('app-preset-button',AppPresetButton);
v.component('app-field-image-dynamic', AppFieldImageDynamic); v.component('app-field-image-dynamic', AppFieldImageDynamic);
v.component('app-todo-list',AppTodoList); v.component('app-todo-list',AppTodoList);
v.component('app-grid-pagination',AppGridPagination);
v.component('app-searchbar',AppSearchbar);
v.component('app-ey-upload',AppEYUpload);
v.component('app-ey-mpicker',AppEYMPicker);
v.component('extend-action-timeline',ExtendActionTimeline); v.component('extend-action-timeline',ExtendActionTimeline);
v.component('app-pickup-view-layout',AppPickUpViewLayout);
v.component('app-mpickup-view-layout',AppMPickUpViewLayout);
v.component('app-pickup-grid-view-layout',AppPickUpGridViewLayout);
v.component('app-address-cascader',AppAddressCascader); v.component('app-address-cascader',AppAddressCascader);
v.component('app-date-range',AppDateRange); v.component('app-input-icon', AppInputIcon);
v.component('app-array-box', AppArrayBox);
v.component('app-tree-select', AppTreeSelect);
v.component('app-form-mdctrl', AppFormMdCtrl);
}, },
}; };
\ 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
...@@ -28,6 +28,6 @@ export default class Error404 extends Vue { ...@@ -28,6 +28,6 @@ export default class Error404 extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './404.scss'; @import './404.less';
</style> </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
...@@ -28,6 +28,6 @@ export default class Error404 extends Vue { ...@@ -28,6 +28,6 @@ export default class Error404 extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './500.scss'; @import './500.less';
</style> </style>
\ No newline at end of file
.action-timeline-table {
width: calc(100% - 60px);
margin: 0 30px;
border-collapse:separate;
border-spacing:0px 40px;
.action-timeline-thead {
th:nth-child(1) {
min-width: 200px;
}
th:nth-child(2) {
width: 100%
}
}
.action-timeline-tbody {
tr {
td {
position: relative;
> .date {
display: flex;
width: max-content;
padding: 16px;
font-size: 16px;
border: 2px solid #515a6e;
.arrow {
margin-left: 10px;
}
}
>.date::before {
content: ' ';
display: block;
position: absolute;
right: -20px;
top: 30px;
height: 2px;
width: 20px;
background-color: #515a6e;
}
>.timeline {
padding: 16px;
border: 2px solid #515a6e;
min-height: 68px;
margin-left: 18px;
.action-timeline-wrapper {
padding-left: 115px;
color: var(--view-font-color-bright);
>.action-timeline-item {
position: relative;
height: 30px;
display: list-item;
list-style: none;
top: -6px;
>.timeline-time {
position: absolute;
left: -115px;
top: 5px;
font-size: 12px;
}
>.timeline-content {
padding: 5px;
padding-left: 65px;
}
}
>.action-timeline-item::before {
position: absolute;
top: 17px;
left: 45px;
z-index: 3;
width: 7px;
height: 7px;
background-color: var(--view-button-background-color);
border: 1px solid #515a6e;
content: ' ';
border-radius: 50%;
}
>.action-timeline-item:nth-child(n+2)::after {
position: absolute;
top: -7px;
bottom: 12px;
left: 48px;
z-index: 1;
display: block;
content: ' ';
border-left: 1px solid #515a6e;
}
}
}
}
}
}
}
\ No newline at end of file
...@@ -163,6 +163,6 @@ export default class ActionTimeline extends Vue { ...@@ -163,6 +163,6 @@ export default class ActionTimeline extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './action-timeline.scss'; @import './action-timeline.less';
</style> </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
...@@ -150,6 +150,6 @@ export default class AppActionBar extends Vue { ...@@ -150,6 +150,6 @@ export default class AppActionBar extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import "./app-actionbar.scss"; @import "./app-actionbar.less";
</style> </style>
\ No newline at end of file
...@@ -93,6 +93,6 @@ export default class AppAddressSelection extends Vue { ...@@ -93,6 +93,6 @@ export default class AppAddressSelection extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './app-address-selection.scss'; @import './app-address-selection.less';
</style> </style>
\ No newline at end of file
...@@ -112,7 +112,7 @@ export default class AppAlertGroup extends Vue { ...@@ -112,7 +112,7 @@ export default class AppAlertGroup extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
.view-body-messages { .view-body-messages {
margin-bottom: 6px; margin-bottom: 6px;
} }
......
.el-message {
.el-message__content {
.title {
padding-bottom: 10px;
}
}
}
.app-alert-group {
.el-alert {
margin: 5px 0px;
}
}
\ No newline at end of file
...@@ -230,6 +230,6 @@ export default class AppAlert extends Vue { ...@@ -230,6 +230,6 @@ export default class AppAlert extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import './app-alert.scss'; @import './app-alert.less';
</style> </style>
\ No newline at end of file
.app-array-box {
display: flex;
flex-direction: column;
gap: 5px;
.app-array-box__icon {
width: 32px;
height: 32px;
border-radius: 50%;
text-align: center;
line-height: 32px;
display: inline-block;
cursor: pointer;
margin-left: 5px;
color: white;
font-size: 18px;
}
.ivu-icon-md-add {
background-color: #409EFF;
border-color: #409EFF;
&:hover {
background-color: #66b1ff;
border-color: #66b1ff;
color: #FFF;
}
}
.ivu-icon-md-remove {
background-color: #F56C6C;
border-color: #F56C6C;
&:hover {
background-color: #f78989;
border-color: #f78989;
color: #FFF;
}
}
.app-array-box__item {
display: flex;
>.input-unit{
flex: auto;
}
>.ivu-tooltip {
width: 100%;
flex: auto;
}
.app-array-box__icons {
flex: none;
}
}
.ivu-tooltip-popper {
.el-image, img {
width: 170px;
}
}
&.is-disabled {
.app-array-box__icon {
cursor: not-allowed;
}
}
}
.ivu-form-item-error {
.app-inupt-box--correct {
.ivu-input-number,
.ivu-input {
border-color: #3880ff !important;
&:focus {
box-shadow: 0 0 0 2px #e1ecff !important;
}
}
}
}
\ No newline at end of file
<template>
<div :class="{'app-array-box': true, 'is-disabled': disabled || readonly}">
<template v-if="items.length == 0">
<Icon class="app-array-box__icon" type="md-add" @click="addItem()" />
</template>
<template v-else>
<div v-for="(item, index) in items" :key="item.key" class="app-array-box__item">
<input-box
v-if="Object.is(editorType, 'default')"
:type="type"
:size="size"
:value="item.value"
:placeholder="placeholder"
:class="{'app-inupt-box--correct': item.correct}"
:disabled="disabled || readonly"
@enter="enter"
@blur="blur"
@focus="focus"
@change="(value) => handleChange(value, index)" />
<Tooltip
v-else
:disabled="!item.value || disabled || readonly"
placement="bottom"
trigger="hover">
<input-box
type="text"
:size="size"
:value="item.value"
:placeholder="placeholder"
:disabled="disabled || readonly"
:class="{'app-inupt-box--correct': item.correct}"
:prepend="Object.is(editorType, 'url') ? prepend : null"
:append="Object.is(editorType, 'url') ? append : null"
:maxlength="Object.is(editorType, 'url') ? maxlength : null"
:showWordLimit="Object.is(editorType, 'url') ? showWordLimit : null"
@enter="enter"
@blur="blur"
@focus="focus"
@change="(value) => handleChange(value, index)" />
<template #content>
<el-image v-if="Object.is(editorType, 'img')" :src="item.value">
<div slot='error' class='image-slot'>
<img src="/assets/img/picture.png">
</div>
</el-image>
<el-link v-else type="primary" :href="getUrl(item.value)" :target="target">{{getUrl(item.value)}}</el-link>
</template>
</Tooltip>
<div v-if="!(disabled || readonly)" class="app-array-box__icons">
<Icon v-if="!limit || items.length < limit" class="app-array-box__icon" type="md-add" @click="addItem(index + 1)" />
<Icon class="app-array-box__icon" type="md-remove" @click="removeItem(index)" />
</div>
</div>
</template>
</div>
</template>
<script lang="ts">
import schema from 'async-validator';
import { Vue, Component, Prop, Watch, Emit } from "vue-property-decorator";
@Component({})
export default class AppArrayBox extends Vue {
/**
* 名称
*
* @type {string}
* @memberof AppArrayBox
*/
@Prop() public name!: string;
/**
* 传入值
*
* @type {string[]}
* @memberof AppArrayBox
*/
@Prop() public value?: any[];
/**
* 编辑器类型
*
* @type {'default' | 'img' | 'url'}
* @memberof AppArrayBox
*/
@Prop({ default: 'default' }) public editorType!: 'default' | 'img' | 'url';
/**
* 输入框类型
*
* @type {'text' | 'number'}
* @memberof AppArrayBox
*/
@Prop({ default: 'text' }) type!: 'text' | 'number';
/**
* placeholder值
*
* @type {String}
* @memberof AppArrayBox
*/
@Prop() public placeholder?: string;
/**
* 是否禁用
*
* @type {boolean}
* @memberof AppArrayBox
*/
@Prop() public disabled?: boolean;
/**
* 是否只读
*
* @type {boolean}
* @memberof AppArrayBox
*/
@Prop() public readonly?: boolean;
/**
* 大小
*
* @type {string}
* @memberof AppArrayBox
*/
@Prop() public size?: string;
/**
* 数组大小限制
*
* @type {string}
* @memberof AppArrayBox
*/
@Prop({ default: 0 }) public limit?: number;
/**
* 输入内容最长长度
*
* @type {number}
* @memberof AppArrayBox
*/
@Prop() public maxlength?: number;
/**
* 是否显示输入内容长度
*
* @type {boolean}
* @memberof AppArrayBox
*/
@Prop() public showWordLimit?: boolean;
/**
* 输入内容前缀
*
* @type {string}
* @memberof AppArrayBox
*/
@Prop() public prepend?: any;
/**
* 输入内容后缀
*
* @type {string}
* @memberof AppArrayBox
*/
@Prop() public append?: any;
/**
* 超链接打开方式
*
* @type {'_blank' | '_self' | '_parent' | '_top' | 'framename'}
* @memberof AppArrayBox
*/
@Prop({ default: '_blank' }) public target!: '_blank' | '_self' | '_parent' | '_top' | 'framename';
/**
* 值规则
*
* @type {any[]}
* @memberof AppArrayBox
*/
@Prop() public rules?: any[];
/**
* 输入内容项集合
*
* @type {Array}
* @memberof AppArrayBox
*/
public items: any[] = [];
@Watch('value')
onValueChange(newVal: string[] | number[]) {
if (newVal) {
if (this.items.length == 0) {
const items = newVal.map((value: any) => {return {value, key: this.$util.createUUID()}});
if (Object.is(this.editorType, 'url') && items.length > 0) {
items.forEach((item: any) => {
if (this.prepend && item.value.startsWith(this.prepend)) {
item.value.replace(this.prepend, '');
}
if (this.append && item.value.endsWith(this.append)) {
item.value.replace(this.append, '');
}
});
}
this.items = items;
}
}
}
/**
* 校验值
*
* @param value 值
* @memberof AppArrayBox
*/
public async validate(value: string): Promise<boolean> {
if (this.rules && this.rules.length > 0) {
const validator = new schema({ [this.name]: this.rules });
try {
await validator.validate({ [this.name]: value });
return true;
} catch (error) {
return false
}
}
return true;
}
/**
* 获取Url路径
*
* @param value url值
* @memberof AppArrayBox
*/
public getUrl(value: string): string {
let tempValue = value;
if (tempValue) {
if (this.prepend) {
tempValue = this.prepend + tempValue;
}
if (this.append) {
tempValue = tempValue + this.append;
}
}
return tempValue;
}
/**
* 新增项
*
* @param index 添加索引
* @memberof AppArrayBox
*/
public addItem(index?: number) {
if (this.disabled || this.readonly) {
return;
}
const tempLink = {
key: this.$util.createUUID(),
value: ""
}
if (index) {
this.items.splice(index, 0, tempLink);
} else {
this.items.push(tempLink);
}
this.onEmit();
}
/**
* 删除项
*
* @type {string}
* @memberof AppArrayBox
*/
public removeItem(index: number) {
this.items.splice(index, 1);
this.onEmit();
}
/**
* 处理值改变
*
* @type {string}
* @memberof AppArrayBox
*/
public handleChange(value: string | number, index: number) {
let tempValue = value;
if (Object.is(this.editorType, 'url') && tempValue) {
if (this.prepend) {
tempValue = this.prepend + tempValue;
}
if (this.append) {
tempValue = tempValue + this.append;
}
}
this.items[index].value = value;
this.onEmit();
}
/**
* 抛值
*
* @memberof AppArrayBox
*/
public async onEmit() {
const result = this.items.map((item:any)=>item.value);
this.$emit('change', result);
for (let index = 0; index < this.items.length; index++) {
this.items[index].correct = await this.validate(this.items[index].value);
}
this.$forceUpdate();
}
/**
* 回车事件
*
* @param {*} $event
* @memberof InputBox
*/
@Emit()
public enter($event: any) {
if (!$event || $event.keyCode !== 13) {
return;
}
const result = this.items.map((item:any)=>item.value);
return result;
}
/**
* 失去焦点事件
*
* @param {*} $event
* @memberof InputBox
*/
@Emit()
public blur(event: any) {
const result = this.items.map((item:any)=>item.value);
return result;
}
/**
* 失去焦点事件
*
* @param {*} $event
* @memberof InputBox
*/
@Emit()
public focus(event: any) {
const result = this.items.map((item:any)=>item.value);
return result;
}
}
</script>
<style lang='less'>
@import './app-array-box.less';
</style>
.ivu-auto-complete {
.ivu-select-dropdown-list {
height: 300px;
}
}
...@@ -319,6 +319,6 @@ export default class AppAutocomplete extends Vue { ...@@ -319,6 +319,6 @@ export default class AppAutocomplete extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './app-autocomplete.scss'; @import './app-autocomplete.less';
</style> </style>
\ No newline at end of file
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
.app-breadcrumb.el-breadcrumb {
display: inline-block;
font-size: 14px;
line-height: 50px;
margin-left: 8px;
.no-redirect {
color: #97a8be;
cursor: text;
.curselected{
color: #2196F3;
font-weight: bold;
}
.app-breadcrumb-selected{
cursor: pointer;
}
}
}
\ No newline at end of file
<template> <template>
<el-breadcrumb :class="['app-breadcrumb', breadcrumbs.length === 1 ? 'only-root' : '']" :separator="separator"> <el-breadcrumb class="app-breadcrumb" :separator="separator">
<transition-group name="breadcrumb"> <transition-group name="breadcrumb">
<template v-if="Object.is(this.navModel,'route')"> <template v-if="Object.is(this.navModel,'route')">
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.id"> <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.id">
...@@ -22,8 +22,8 @@ ...@@ -22,8 +22,8 @@
</template> </template>
<template v-if="!Object.is(this.navModel,'route')"> <template v-if="!Object.is(this.navModel,'route')">
<el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path"> <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="item.path">
<span v-if="index === breadcrumbs.length-1" class="no-redirect" >{{ getCaption(item.meta)}}</span> <span v-if="index === breadcrumbs.length-1" class="no-redirect" >{{ $t(item.meta.caption)}}</span>
<a v-else @click.prevent="handleLink(item)" >{{ getCaption(item.meta) }}</a> <a v-else @click.prevent="handleLink(item)" >{{ $t(item.meta.caption) }}</a>
</el-breadcrumb-item> </el-breadcrumb-item>
</template> </template>
</transition-group> </transition-group>
...@@ -113,18 +113,6 @@ export default class Breadcrumb extends Vue { ...@@ -113,18 +113,6 @@ export default class Breadcrumb extends Vue {
} }
} }
/**
* 获取项标题
*
* @memberof Breadcrumb
*/
public getCaption(meta: any): any {
const caption = meta.captionLanResTag ? this.$t(meta.captionLanResTag, meta.caption) : meta.caption;
return meta.info && !Object.is(meta.info, "")
? `${this.$t(caption)} - ${this.$t(meta.info)}`
: this.$t(caption);
}
/** /**
* 获取面包屑数据 * 获取面包屑数据
* *
...@@ -228,6 +216,6 @@ export default class Breadcrumb extends Vue { ...@@ -228,6 +216,6 @@ export default class Breadcrumb extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import "./app-breadcrumb.scss"; @import "./app-breadcrumb.less";
</style> </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
...@@ -55,6 +55,6 @@ export default class AppBuild extends Vue { ...@@ -55,6 +55,6 @@ export default class AppBuild extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import './app-build.scss'; @import './app-build.less';
</style> </style>
\ No newline at end of file
.app-cascader {
width: 100%;
.app-cascader__default,
.app-cascader__tree {
width: 100%;
}
}
.app-cascader__tree__dropdown {
padding: 12px 0 6px;
.el-input {
padding: 0 10px;
}
.el-tree {
padding: 10px 0;
max-height: 200px;
overflow: auto;
}
}
\ No newline at end of file
此差异已折叠。
.app-checkbox-list {
overflow: auto;
}
.app-checkbox-list--button {
.ivu-checkbox-wrapper {
margin: 0;
border-right: 0;
border-radius: 0;
}
.ivu-checkbox {
position: absolute;
opacity: 0;
z-index: -1;
}
.ivu-checkbox-wrapper.ivu-checkbox-wrapper-checked:last-child {
border-right-color: #2d8cf0;
}
.ivu-checkbox-wrapper-checked {
background-color: #2d8cf0;
color: #fff;
}
.ivu-checkbox-wrapper-checked+.ivu-checkbox-wrapper-checked {
border-left: 1px solid #dcdee2;
}
.ivu-checkbox-wrapper:first-child {
border-radius: 4px 0 0 4px;
}
.ivu-checkbox-wrapper:last-child {
border-right: 1px solid #dcdee2;
border-radius: 0 4px 4px 0;
}
}
\ No newline at end of file
<template> <template>
<checkbox-group class="app-checkbox-list" v-model="selectArray"> <checkbox-group class="app-checkbox-list" :class="{'app-checkbox-list--button': button}" :size="size" v-model="selectArray">
<checkbox v-for="(item,index) in items" :key="index" :label="item.value" :disabled="isDisabled || item.disabled"> <checkbox v-for="(item,index) in items" :border="button || border" :key="index" :label="item.value" :disabled="isDisabled || item.disabled">
<span>{{ item.textLanRes ? $t(item.textLanRes, item.text) : item.text }}</span> <span>{{Object.is(codelistType,'STATIC') ? $t('codelist.'+tag+'.'+item.value) : item.text}}</span>
</checkbox> </checkbox>
</checkbox-group > </checkbox-group >
</template> </template>
...@@ -37,6 +37,30 @@ export default class AppCheckBox extends Vue { ...@@ -37,6 +37,30 @@ export default class AppCheckBox extends Vue {
*/ */
@Prop() public codelistType?: string; @Prop() public codelistType?: string;
/**
* 按钮样式
*
* @type {boolean}
* @memberof AppRadioGroup
*/
@Prop() public button?: boolean;
/**
* 边框样式
*
* @type {boolean}
* @memberof AppRadioGroup
*/
@Prop() public border?: boolean;
/**
* 边框样式
*
* @type {boolean}
* @memberof AppRadioGroup
*/
@Prop({default: 'default'}) public size!: 'large' | 'small' | 'default';
/** /**
* 代码表值分隔符 * 代码表值分隔符
* *
...@@ -284,6 +308,6 @@ export default class AppCheckBox extends Vue { ...@@ -284,6 +308,6 @@ export default class AppCheckBox extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './app-checkbox-list.scss'; @import './app-checkbox-list.less';
</style> </style>
\ No newline at end of file
.app-checkbox-list {
overflow: auto;
}
\ No newline at end of file
<template> <template>
<div class="app-checkbox"> <div class="checkbox">
<checkbox v-model="CurrentVal" :disabled="disabled"></checkbox> <checkbox v-model="CurrentVal" :disabled="disabled"></checkbox>
</div> </div>
</template> </template>
...@@ -50,6 +50,6 @@ export default class AppCheckbox extends Vue { ...@@ -50,6 +50,6 @@ export default class AppCheckbox extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import "./app-checkbox.scss"; @import "./app-checkbox.less";
</style> </style>
\ No newline at end of file
.app-color-picker {
.el-color-picker__trigger {
border: none;
left: 6px;
.el-color-picker__color {
border: 0.5px solid #dcdee2;
cursor: pointer;
top: 20px;
width: 77%;
height: 5px;
left: 3px;
.el-icon-close {
display: none;
}
}
}
.ivu-icon {
font-size: 22px;
position: absolute;
top: 2px;
right: -1px;
cursor: pointer;
}
}
\ No newline at end of file
...@@ -179,6 +179,6 @@ export default class AppColorPicker extends Vue { ...@@ -179,6 +179,6 @@ export default class AppColorPicker extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import './app-color-picker.scss'; @import './app-color-picker.less';
</style> </style>
...@@ -152,7 +152,7 @@ export default class AppColorSpan extends Vue { ...@@ -152,7 +152,7 @@ export default class AppColorSpan extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
.text-color{ .text-color{
padding: 2px 8px; padding: 2px 8px;
margin: 6px 6px 6px 0px; margin: 6px 6px 6px 0px;
......
.app-column-format{
display: inline-block;
}
\ No newline at end of file
...@@ -53,6 +53,6 @@ export default class AppColumnFormat extends Vue { ...@@ -53,6 +53,6 @@ export default class AppColumnFormat extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import "./app-column-format.scss"; @import "./app-column-format.less";
</style> </style>
\ No newline at end of file
.app-column-link{
display: inline-block;
cursor:pointer;
}
\ No newline at end of file
...@@ -314,6 +314,6 @@ export default class AppColumnLink extends Vue { ...@@ -314,6 +314,6 @@ export default class AppColumnLink extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './app-column-link.scss'; @import './app-column-link.less';
</style> </style>
\ No newline at end of file
.column-render{
.input-unit{
display: inline-block;
}
}
\ No newline at end of file
...@@ -148,6 +148,6 @@ export default class AppColumnRender extends Vue { ...@@ -148,6 +148,6 @@ export default class AppColumnRender extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import "./app-column-render.scss"; @import "./app-column-render.less";
</style> </style>
\ 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
...@@ -457,6 +457,6 @@ export default class AppDashboardDesign extends Vue { ...@@ -457,6 +457,6 @@ export default class AppDashboardDesign extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "./app-dashboard-design.scss"; @import "./app-dashboard-design.less";
</style> </style>
\ No newline at end of file
// 导入视图样式
.app-data-upload-view{
display: flex;
flex-direction: column;
.main-content{
height: calc(100% - 68px);
background: #FAFAFB;
border-radius: 4px;
border: 1px dashed #D7D7D7;
margin-top: 10px;
// 上传文件区域
.upload-container{
cursor: pointer;
height: 100%;
width: 100%;
text-align: center;
padding-top: 58px;
.icon-import{
display: block;
margin: 0 auto 17px;
}
.select-file-text{
height: 17px;
font-size: 12px;
color: #565656;
line-height: 17px;
}
}
// 信息展示容器
.data-info-container{
padding: 8px 10px 6px;
height: 100%;
width: 100%;
// 进度条
.progress{
margin-bottom: 6px ;
.el-progress-bar__outer{
background-color: #FFFFFF;
}
.el-progress-bar__inner{
background-color: #D7E9FF;
}
}
.message-container{
height: calc(100% - 26px);
display: flex;
justify-content: space-between;
ul li{
list-style-type: none;
padding-left: 20px;
}
.result-list{
height: 100%;
width: 100%;
overflow: auto;
}
//成功信息区
.result-list{
ul .success-item{
background: url("~@/assets/img/icon-success.svg") no-repeat 5px 5px;
background-size: 10px 10px;
}
}
//错误信息区
.result-list{
ul .error-item{
background: url("~@/assets/img/icon-error.svg") no-repeat 5px 5px;
background-size: 10px 10px;
}
}
}
}
}
// 下载模板区
.second-content{
padding: 16px 12px 0;
margin-bottom: 30px;
.import-template-message{
font-size: 12px;
height: 17px;
color: #565656;
line-height: 17px;
}
.import-template{
.icon-link{
width: 12px;
margin-bottom: -1px;
margin-right: 3px;
}
height: 17px;
font-size: 12px;
color: #57A3FD;
line-height: 17px;
}
}
// 底部按钮
.button-container{
text-align: right;
margin: 15px;
height: 28px;
.el-button{
margin: 0 0 0 8px;
padding: 3px 15px;
font-size: 12px;
line-height: 20px;
}
.primary-button{
color: #FFFFFF;
background-color: #57A3FD;
border-color: #57A3FD;
&:hover{
background: #66b1ff;
border-color: #66b1ff;
}
&:disabled{
color: var(--button-font-color-light);
border-color: var(--button-font-color-light);
background-color: var(--button-background-color-light);
}
}
}
}
//模态样式
.view-default.app-data-upload-modal{
.app-data-upload-view{
width: 100%;
height: 100%;
padding: 0 20px 24px 20px;
}
.ivu-modal-content .ivu-modal-body{
height: calc(100% - 58px);
}
// 模态标题
.ivu-modal-header{
padding: 16px;
border: 0;
.ivu-modal-header-inner{
color: #333333;
font-weight: 600;
height: 24px;
line-height: 24px;
}
}
// 关闭图标
.ivu-modal-close .ivu-icon-ios-close{
color: #999999;
font-weight: 600;
}
}
\ No newline at end of file
...@@ -178,6 +178,14 @@ export default class AppDataUploadView extends Vue { ...@@ -178,6 +178,14 @@ export default class AppDataUploadView extends Vue {
*/ */
public allCodeList: any; public allCodeList: any;
/**
* 所有的代码表数据
*
* @type {*}
* @memberof AppDataUploadView
*/
public allCodeListData: Map<string, any[]> = new Map();
/** /**
* 属性Map(用作属性转化) * 属性Map(用作属性转化)
* *
...@@ -403,18 +411,31 @@ export default class AppDataUploadView extends Vue { ...@@ -403,18 +411,31 @@ export default class AppDataUploadView extends Vue {
* @memberof AppDataUploadView * @memberof AppDataUploadView
*/ */
public async importExcel(filename: string, _data: any) { public async importExcel(filename: string, _data: any) {
const tHeader: Array<any> = []; const columns: any[] = [];
let colCodeList: any = {};
this.importDataModel.forEach((item: any) => { this.importDataModel.forEach((item: any) => {
tHeader.push(item.headername); columns.push({
label: item.headername,
name: item.name,
})
if (item.codelist) {
let codelistData: any = this.allCodeListData.get(item.codelist.tag);
const codelistText: any[] = [];
codelistData.forEach((codeListItem: any) => {
codelistText.push(codeListItem.text)
})
colCodeList[item.name] = codelistText.join();
}
}); });
this.$export.exportExcel().then((excel: any) => { this.$export.exportExcel().then((excel: any) => {
excel.export_json_to_excel({ excel.export_data_to_excel({
header: tHeader, //表头 必填 columns, // 列模型 必填
data: [], //具体数据 必填 data: [{}], // 具体数据 必填
filename: filename, //非必填 filename: filename, // 导出文件名,非必填
autoWidth: true, //非必填 colCodeList, // 列代码表数据 非必填
bookType: "xlsx", //非必填 bookType: "xlsx", // 非必填
}); insertRows: 200 // 插入行数
})
}); });
} }
...@@ -445,6 +466,8 @@ export default class AppDataUploadView extends Vue { ...@@ -445,6 +466,8 @@ export default class AppDataUploadView extends Vue {
let xlsxData = XLSX.utils.sheet_to_json(this.workBookData.Sheets[this.workBookData.SheetNames[0]]); let xlsxData = XLSX.utils.sheet_to_json(this.workBookData.Sheets[this.workBookData.SheetNames[0]]);
let list1 = this.getFirstRow(this.workBookData); let list1 = this.getFirstRow(this.workBookData);
xlsxData = this.addXlsxData(xlsxData, list1); xlsxData = this.addXlsxData(xlsxData, list1);
console.log('导入数据', xlsxData);
this.importDataArray = Util.deepCopy(xlsxData); this.importDataArray = Util.deepCopy(xlsxData);
this.promptInfo = this.$t('components.appDataUploadView.read') as string; this.promptInfo = this.$t('components.appDataUploadView.read') as string;
(this.$refs.inputUpLoad as any).value = ""; (this.$refs.inputUpLoad as any).value = "";
...@@ -502,18 +525,22 @@ export default class AppDataUploadView extends Vue { ...@@ -502,18 +525,22 @@ export default class AppDataUploadView extends Vue {
public async getChartAllCodeList() { public async getChartAllCodeList() {
let codeListMap: Map<string, any> = new Map(); let codeListMap: Map<string, any> = new Map();
if (Object.values(this.importDataModel).length > 0) { if (Object.values(this.importDataModel).length > 0) {
await Object.values(this.importDataModel).forEach(async (singleDataModel: any) => { for(const name in this.importDataModel) {
const singleDataModel = this.importDataModel[name];
if (singleDataModel.codelist) { if (singleDataModel.codelist) {
let tempCodeListMap: Map<any, any> = new Map(); let tempCodeListMap: Map<any, any> = new Map();
let codeListTextData: any[] = [];
let res: any = await this.getCodeList(singleDataModel.codelist); let res: any = await this.getCodeList(singleDataModel.codelist);
if (res && res.length > 0) { if (res && res.length > 0) {
res.forEach((codeListItem: any) => { res.forEach((codeListItem: any) => {
codeListTextData.push(codeListItem);
tempCodeListMap.set(codeListItem.value, codeListItem.text); tempCodeListMap.set(codeListItem.value, codeListItem.text);
}); });
} }
codeListMap.set(singleDataModel.codelist.tag, tempCodeListMap); codeListMap.set(singleDataModel.codelist.tag, tempCodeListMap);
} this.allCodeListData.set(singleDataModel.codelist.tag, codeListTextData);
}); }
}
} }
return codeListMap; return codeListMap;
} }
...@@ -607,6 +634,6 @@ export default class AppDataUploadView extends Vue { ...@@ -607,6 +634,6 @@ export default class AppDataUploadView extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "./app-data-upload.scss"; @import "./app-data-upload.less";
</style> </style>
.app-date-range-picker {
.el-date-editor {
width: 100%;
height: 100%;
.el-range-separator {
display: flex;
align-items: center;
width: 6%;
}
}
}
.app-date-range-picker-popper {
.el-picker-panel__footer {
.el-button--text {
border-color: transparent;
color: #409eff;
background: transparent;
padding-left: 0;
padding-right: 0;
}
}
}
\ No newline at end of file
<template>
<div class="app-date-range-picker">
<el-date-picker
v-if="Object.is(mode, 'dateTime')"
v-model="curValue"
:type="type"
:size="size"
popper-class="app-date-range-picker-popper"
:format="format"
:value-format="valueFormat"
:disabled="disabled"
:readonly="readonly"
:unlink-panels="unlinkPanels"
:range-separator="$t('components.appDateRangePicker.separator')"
:start-placeholder="startPlaceholder || $t('components.appDateRangePicker.start')"
:end-placeholder="endPlaceholder || $t('components.appDateRangePicker.end')"
@focus="handleFocus"
@blur="handleBlur"
>
</el-date-picker>
<el-time-picker
v-else-if="Object.is(mode, 'time')"
v-model="curValue"
is-range
:size="size"
popper-class="app-date-range-picker-popper"
:format="format"
:value-format="valueFormat"
:disabled="disabled"
:readonly="readonly"
:range-separator="$t('components.appDateRangePicker.separator')"
:start-placeholder="startPlaceholder || $t('components.appDateRangePicker.start')"
:end-placeholder="endPlaceholder || $t('components.appDateRangePicker.end')"
@focus="handleFocus"
@blur="handleBlur"
>
</el-time-picker>
<el-date-picker
v-else
v-model="curValue"
:type="type"
:size="size"
popper-class="app-date-range-picker-popper"
:format="format"
:value-format="valueFormat"
:disabled="disabled"
:readonly="readonly"
:unlink-panels="unlinkPanels"
:range-separator="$t('components.appDateRangePicker.separator')"
:start-placeholder="startPlaceholder || $t('components.appDateRangePicker.start')"
:end-placeholder="endPlaceholder || $t('components.appDateRangePicker.end')"
@focus="handleFocus"
@blur="handleBlur"
>
</el-date-picker>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit, Model } from "vue-property-decorator";
@Component({})
export default class AppDateRangePicker extends Vue {
/**
* 双向绑定表单项值
*
* @type {*}
* @memberof AppDateRangePicker
*/
@Model("change") public value: any;
/**
* 编辑项名称
*
* @type {string}
* @memberof AppDateRangePicker
*/
@Prop() public name!: string;
/**
* 表单数据
*
* @type {*}
* @memberof AppDateRangePicker
*/
@Prop() public data: any;
/**
* 是否禁用
*
* @type {boolean}
* @memberof AppDateRangePicker
*/
@Prop({ default: false }) public disabled!: boolean;
/**
* 只读
*
* @type {boolean}
* @memberof AppDateRangePicker
*/
@Prop({ default: false }) public readonly?: boolean;
/**
* 类型
*
* @type {string}
* @memberof AppDateRangePicker
*/
@Prop({ default: "daterange" }) public type!: string;
/**
* 类型
*
* @type {'date' | 'time' | 'dateTime'}
* @memberof AppDateRangePicker
*/
@Prop({ default: "date" }) public mode!: "date" | "time" | "dateTime";
/**
* 显示格式化
*
* @type {string}
* @memberof AppDateRangePicker
*/
@Prop() public format?: string;
/**
* 值格式化
*
* @type {string}
* @memberof AppDateRangePicker
*/
@Prop() public valueFormat?: string;
/**
* 开始占位提示
*
* @type {string}
* @memberof AppDateRangePicker
*/
@Prop() public startPlaceholder?: string;
/**
* 结束占位提示
*
* @type {string}
* @memberof AppDateRangePicker
*/
@Prop() public endPlaceholder?: string;
/**
* 大小
*
* @type {string}
* @memberof AppDateRangePicker
*/
@Prop({ default: "small" }) public size?: "large" | "small" | "mini";
/**
* 关系表单项集合
*
* @type {string}
* @memberof AppDateRangePicker
*/
@Prop() public valueItemNames?: string;
/**
* 取消范围联动
*
* @type {boolean}
* @memberof AppDateRangePicker
*/
@Prop({ default: false }) public unlinkPanels!: boolean;
/**
* 值分割符
*
* @type {boolean}
* @memberof AppDateRangePicker
*/
@Prop({ default: "-" }) public valueSeparator?: string;
/**
* 输入框失焦
*
* @memberof AppDateRangePicker
*/
public handleBlur() {
this.$emit("blur", { name: this.name, value: this.value });
}
/**
* 输入框聚焦
*
* @memberof AppDateRangePicker
*/
public handleFocus() {
this.$emit("focus", { name: this.name, value: this.value });
}
get curValue() {
let value: any[] = [];
if (this.valueItemNames) {
this.valueItemNames.split(",").forEach((name: any) => {
if (this.data[name]) {
value.push(this.data[name]);
}
});
} else {
value = this.value.split(this.valueSeparator);
}
return value;
}
set curValue(dates: string[]) {
if (dates) {
this.$emit("formitemvaluechange", { name: this.name, value: dates.join(this.valueSeparator) });
if (this.valueItemNames) {
const valueItemNames: string[] = this.valueItemNames.split(",");
dates.forEach((value: any, index: number) => {
this.$emit("formitemvaluechange", { name: valueItemNames[index], value: value });
});
}
} else {
this.$emit("change", null);
if (this.valueItemNames) {
this.valueItemNames.split(",").forEach((name: any) => {
this.$emit("formitemvaluechange", { name: name, value: null });
});
}
}
}
}
</script>
<style lang="less">
@import "./app-date-range-picker.less";
</style>
.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
<template>
<div class="app-debug-actions" v-if="isShow">
<div class="actions">
<button-group vertical>
<i-button :title="$t('components.appDebugActions.button')" :type="sdc.isShowTool ? 'warning' : 'info'" ghost @click="() => sdc.showToolChange()" :icon="sdc.isShowTool ? 'ios-bug' : 'ios-bug-outline'" ></i-button>
</button-group>
</div>
<div class="show-buttons">
<div class="button"><i class="ivu-icon ivu-icon-ios-arrow-down" /></div>
</div>
</div>
</template>
<script lang = 'ts'>
import { Vue, Component } from 'vue-property-decorator';
import { StudioActionUtil } from '@/utils';
import { Environment } from '@/environments/environment';
/**
* 开发模式控制行为组
*
* @export
* @class AppDebugActions
* @extends {Vue}
*/
@Component({
})
export default class AppDebugActions extends Vue {
/**
* 是否显示
*
* @type {boolean}
* @memberof AppDebugActions
*/
public isShow:boolean = Environment.devMode;
/**
* 配置平台操作控制器
*
* @type {StudioActionController}
* @memberof AppDebugActions
*/
public sdc: StudioActionUtil = StudioActionUtil.getInstance();
}
</script>
<style lang = "less">
@import "./app-debug-actions.less";
</style>
\ No newline at end of file
.app-department-personnel{
position: relative;
.ivu-select-selection{
position: relative;
padding: 0;
.ivu-select-selected-value{
padding-left: 15px;
font-size: 13px;
}
.ivu-tag.ivu-tag-checked{
top: 1px;
font-size: 12px;
height: 24px;
line-height: 22px;
margin: 2px 0px 2px 6px;
padding: 0 3px 0 8px;
background-color: #f4f4f5;
border-color: #e9e9eb;
color: #909399;
.ivu-tag-text{
padding: 0 8px 0 0;
}
}
.ivu-icon.ivu-icon-ios-close{
position: absolute;
width: 10px;
line-height: 10px;
height: 10px;
top: 6px;
margin-left: 8px;
font-size: 4px;
color: #909399;
background-color: #c0c4cc;
border-radius: 50%;
}
.ivu-icon.ivu-icon-ios-close:hover{
color: #fff;
background-color: #909399;
}
.ivu-icon-ios-close:before {
position: absolute;
left: -1px;
}
}
.el-icon-search{
position: absolute;
top: 10px;
right: 27px;
color: #c0c4cc;
}
}
\ No newline at end of file
...@@ -431,6 +431,6 @@ export default class AppDepartmentPersonnel extends Vue { ...@@ -431,6 +431,6 @@ export default class AppDepartmentPersonnel extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import './app-department-personnel.scss'; @import './app-department-personnel.less';
</style> </style>
\ No newline at end of file
.app-department-select{
.ivu-dropdown{
.ivu-dropdown-rel{
.tree-input{
.ivu-input-suffix{
width: auto;
text-align: right;
.icon-arrow{
margin-right: 4px;
}
}
.el-icon-circle-close{
display: none;
}
}
.tree-input:hover{
.el-icon-circle-close{
display: inline-block;
}
}
}
.ivu-select-dropdown{
max-height: 200px;
overflow: scroll;
.tree-contant{
overflow:inherit;
}
}
}
.el-input__inner{
height: 32px;
line-height: 32px
}
.el-input__icon{
line-height: 32px;
}
}
...@@ -283,6 +283,6 @@ export default class AppDepartmentSelect extends Vue { ...@@ -283,6 +283,6 @@ export default class AppDepartmentSelect extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './app-department-select.scss'; @import './app-department-select.less';
</style> </style>
\ No newline at end of file
.app-embed-picker {
.app-embed-value, .app-embed-placeholder {
line-height: 32px;
height: 32px;
}
.app-embed-placeholder {
color: #c1c1c1;
}
> .ivu-card {
> .ivu-card-body {
> .content-container {
margin: 0;
}
}
}
}
\ No newline at end of file
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
:viewdata="viewdata" :viewdata="viewdata"
:viewparam="viewparam" :viewparam="viewparam"
:viewDefaultUsage="false" :viewDefaultUsage="false"
openType="EMBED"
@viewdataschange="setValue($event)" @viewdataschange="setValue($event)"
style="height:100%;"> style="height:100%;">
</component> </component>
...@@ -286,6 +285,6 @@ export default class AppEmbedPicker extends Vue { ...@@ -286,6 +285,6 @@ export default class AppEmbedPicker extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './app-embed-picker.scss'; @import './app-embed-picker.less';
</style> </style>
\ No newline at end of file
...@@ -135,6 +135,6 @@ export default class AppExportExcel extends Vue { ...@@ -135,6 +135,6 @@ export default class AppExportExcel extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './app-export-excel.scss'; @import './app-export-excel.less';
</style> </style>
.app-file-upload{
.upload-col{
.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{
.ivu-modal{
height: 86%;
.ivu-modal-content{
height: 100%;
overflow-y: scroll;
.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
...@@ -513,6 +513,6 @@ export default class AppFileUpload extends Vue { ...@@ -513,6 +513,6 @@ export default class AppFileUpload extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './app-file-upload.scss'; @import './app-file-upload.less';
</style> </style>
\ No newline at end of file
.form-druipart {
position: relative;
}
\ No newline at end of file
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
:viewDefaultUsage="false" :viewDefaultUsage="false"
:formDruipart="formDruipart" :formDruipart="formDruipart"
:isformDruipart="true" :isformDruipart="true"
openType="EMBED"
@mditemsload="mditemsload" @mditemsload="mditemsload"
@drdatasaved="drdatasaved" @drdatasaved="drdatasaved"
@drdatachange="drdatachange" @drdatachange="drdatachange"
...@@ -463,7 +462,7 @@ export default class AppFormDRUIPart extends Vue { ...@@ -463,7 +462,7 @@ export default class AppFormDRUIPart extends Vue {
* @memberof AppFormDRUIPart * @memberof AppFormDRUIPart
*/ */
public drdatasaved($event:any){ public drdatasaved($event:any){
this.$emit('drdatasaved',$event); this.$emit('drdatasaved', {type:'DRUIPART'});
console.log(this.viewname+(this.$t('components.appFormDRUIPart.save') as string)); console.log(this.viewname+(this.$t('components.appFormDRUIPart.save') as string));
} }
...@@ -498,6 +497,6 @@ export default class AppFormDRUIPart extends Vue { ...@@ -498,6 +497,6 @@ export default class AppFormDRUIPart extends Vue {
} }
} }
</script> </script>
<style lang="scss"> <style lang = "less">
@import './app-form-druipart.scss'; @import './app-form-druipart.less';
</style> </style>
\ No newline at end of file
.app-form-group {
>.ivu-card-head {
>p {
i {
margin-right: 8px;
}
img {
height: 100%;
margin-right: 8px;
}
.icon {
vertical-align: middle;
}
}
}
.ivu-card-extra .el-collapse-item__arrow {
margin-left: 8px;
line-height: 20px;
color: #333;
}
>.ivu-card-extra {
.item-extract-mode {
display: flex;
.item {
margin-left: 12px;
}
}
>a {
display: flex;
}
}
}
.app-form-group.app-group-collapse-contant {
.ivu-card-body {
display: none;
}
}
.app-group-flex {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
>.ivu-card-body {
height: calc(100% - 51px);
overflow-y: auto;
overflow-x: hidden;
}
}
\ No newline at end of file
...@@ -12,14 +12,16 @@ ...@@ -12,14 +12,16 @@
</app-form-group2> </app-form-group2>
</template> </template>
<template v-else> <template v-else>
<card v-if="isShowCaption === true" :dis-hover="true"> <card v-if="isShowCaption === true" :bordered="false" :dis-hover="true" :class="classes">
<span class='app-form-group-caption' slot='title'> <p class='' slot='title' @click="clickCollapse">
<icon v-if="titleBarCloseMode !== 0" :type="collapseContent ? 'md-add' : 'md-remove'" class="collapse-icon" <span v-if="iconclass || iconpath" class="icon">
@click="clickCollapse"></icon> <i v-if="iconclass" :class="iconclass" />
<img v-else :src="iconpath" />
</span>
<span :class="titleClass">{{caption}}</span> <span :class="titleClass">{{caption}}</span>
</span> </p>
<template v-if="uiActionGroup"> <template v-if="uiActionGroup">
<template slot='extra'> <a slot='extra'>
<template v-if="uiActionGroup.extractMode && Object.is(uiActionGroup.extractMode, 'ITEMS')"> <template v-if="uiActionGroup.extractMode && Object.is(uiActionGroup.extractMode, 'ITEMS')">
<dropdown :transfer="true" trigger='click'> <dropdown :transfer="true" trigger='click'>
<a href='javascript:void(0)'> <a href='javascript:void(0)'>
...@@ -55,19 +57,38 @@ ...@@ -55,19 +57,38 @@
</dropdown> </dropdown>
</template> </template>
<template v-if="!(uiActionGroup.extractMode && Object.is(uiActionGroup.extractMode, 'ITEMS'))"> <template v-if="!(uiActionGroup.extractMode && Object.is(uiActionGroup.extractMode, 'ITEMS'))">
<template v-if="uiActionGroup.details && Array.isArray(uiActionGroup.details)"> <span class='item-extract-mode'>
<app-button <template v-if="uiActionGroup.details && Array.isArray(uiActionGroup.details)">
v-for="(detail,index) in uiActionGroup.details" <div v-for="(detail,index) in uiActionGroup.details" :key="index">
:key="index" <span v-show="detail.visabled" :style="{'pointer-events':detail.disabled?'none':'auto','color':detail.disabled?'#7b7979':'#2d8cf0'}" class='item' @click="doUIAction($event, detail)">
type="primary" <template v-if="detail.isShowIcon">
:showIcon="detail.isShowIcon" <template v-if="detail.icon && !Object.is(detail.icon, '')">
:iconClass="detail.icon" <i :class="detail.icon" ></i>
@click="doUIAction($event, detail)" </template>
:caption="getCaption(detail)"> <template v-if="!(detail.icon && !Object.is(detail.icon, ''))">
</app-button> <div v-if="detail.img && !Object.is(detail.img, '')">
</template> <img :src="detail.img" />
</div>
</template>
</template>
&nbsp;
<span>
<template v-if="detail.isShowCaption">
<template v-if="uiActionGroup.langbase && !Object.is(uiActionGroup.langbase, '') && detail.uiactiontag && !Object.is(detail.uiactiontag, '')">
{{$t(`${uiActionGroup.langbase}.uiactions.${detail.uiactiontag}`)}}
</template>
<template v-if="!(uiActionGroup.langbase && !Object.is(uiActionGroup.langbase, '') && detail.uiactiontag && !Object.is(detail.uiactiontag, ''))">
{{detail.caption}}
</template>
</template>
</span>
</span>
</div>
</template>
</span>
</template> </template>
</template> <i v-if="titleBarCloseMode !== 0" :class="{'el-collapse-item__arrow el-icon-arrow-right': true, 'is-active': !collapseContant}" @click="clickCollapse"></i>
</a >
</template> </template>
<template v-if="Object.is(layoutType, 'FLEX')"> <template v-if="Object.is(layoutType, 'FLEX')">
<slot></slot> <slot></slot>
...@@ -120,27 +141,30 @@ export default class AppFormGroup extends Vue { ...@@ -120,27 +141,30 @@ export default class AppFormGroup extends Vue {
@Prop() public data!: any; @Prop() public data!: any;
/** /**
* 监听值变化 * 图标路径
* *
* @type {string}
* @memberof AppFormGroup * @memberof AppFormGroup
*/ */
@Watch('data') @Prop() public iconpath?: string;
onSrfupdatedateChange(newVal: any, oldVal: any) {
if((newVal !== oldVal) && this.uiActionGroup.details.length >0){
this.calcActionItemAuthState(newVal,this.uiActionGroup.details,this.uiService);
}
}
/** /**
* 获取标题 * 图标类名
* *
* @type {string}
* @memberof AppFormGroup * @memberof AppFormGroup
*/ */
public getCaption (detail: any) { @Prop() public iconclass?: string;
if (detail.captionLanbase) {
return this.$t(detail.captionLanbase, detail.caption); /**
} else { * 监听值变化
return detail.caption; *
* @memberof AppFormGroup
*/
@Watch('data')
onSrfupdatedateChange(newVal: any, oldVal: any) {
if((newVal !== oldVal) && this.uiActionGroup.details.length >0){
this.calcActionItemAuthState(newVal,this.uiActionGroup.details,this.uiService);
} }
} }
...@@ -278,7 +302,7 @@ export default class AppFormGroup extends Vue { ...@@ -278,7 +302,7 @@ export default class AppFormGroup extends Vue {
* @type {boolean} * @type {boolean}
* @memberof AppFormGroup * @memberof AppFormGroup
*/ */
public collapseContent: boolean = false; public collapseContant: boolean = false;
/** /**
* 计算样式 * 计算样式
...@@ -290,7 +314,7 @@ export default class AppFormGroup extends Vue { ...@@ -290,7 +314,7 @@ export default class AppFormGroup extends Vue {
get classes(): string[] { get classes(): string[] {
return [ return [
'app-form-group', 'app-form-group',
this.isShowCaption && this.collapseContent ? 'app-group-collapse-content' : '', this.isShowCaption && this.collapseContant ? 'app-group-collapse-contant' : '',
this.isInfoGroupMode ? 'app-info-group-mode' : '', this.isInfoGroupMode ? 'app-info-group-mode' : '',
Object.is(this.layoutType, 'FLEX') ? 'app-group-flex': '' Object.is(this.layoutType, 'FLEX') ? 'app-group-flex': ''
]; ];
...@@ -313,7 +337,7 @@ export default class AppFormGroup extends Vue { ...@@ -313,7 +337,7 @@ export default class AppFormGroup extends Vue {
* @memberof AppFormGroup * @memberof AppFormGroup
*/ */
public created() { public created() {
this.collapseContent = this.titleBarCloseMode === 2 ? true : false; this.collapseContant = this.titleBarCloseMode === 2 ? true : false;
} }
/** /**
...@@ -322,7 +346,10 @@ export default class AppFormGroup extends Vue { ...@@ -322,7 +346,10 @@ export default class AppFormGroup extends Vue {
* @memberof AppFormGroup * @memberof AppFormGroup
*/ */
public clickCollapse(): void { public clickCollapse(): void {
this.collapseContent = !this.collapseContent; if (this.titleBarCloseMode !== 0) {
this.collapseContant = !this.collapseContant;
this.$emit('collapseChange',this.collapseContant);
}
} }
/** /**
...@@ -346,6 +373,6 @@ export default class AppFormGroup extends Vue { ...@@ -346,6 +373,6 @@ export default class AppFormGroup extends Vue {
} }
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './app-form-group.scss'; @import './app-form-group.less';
</style> </style>
\ No newline at end of file
...@@ -62,6 +62,6 @@ export default class AppFormGroup2 extends Vue { ...@@ -62,6 +62,6 @@ export default class AppFormGroup2 extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import './app-form-group2.scss'; @import './app-form-group2.less';
</style> </style>
\ No newline at end of file
.app-form-item {
height: 100%;
padding: 0 6px;
.editor {
height: 100%;
.ivu-form-item-content {
height: 100%;
min-height: 36px;
}
}
.app-form-item-label {
line-height: 21px;
padding: 6px 10px 6px 0px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.app-form-item.label-top, .app-form-item.label-bottom {
.app-form-item-label {
display: block;
}
}
.app-form-item.label-left, .app-form-item.label-right {
.app-form-item-label, .editor {
height: 100%;
}
}
.app-form-item.label-left {
.app-form-item-label {
float: left;
text-align: right;
}
}
.app-form-item.label-right {
.app-form-item-label {
float: right;
padding: 6px 0px 6px 10px;
}
}
.app-form-item.label-none {
>.app-form-item-label {
display: none !important;
}
}
\ No newline at end of file
...@@ -30,18 +30,18 @@ ...@@ -30,18 +30,18 @@
:style="labelstyle" :style="labelstyle"
:class="labelclasses" :class="labelclasses"
> >
<span v-show="required" class="required">*</span> <span v-if="required" style="color:red;">* </span>
<span v-if="!isEmptyCaption"> <span v-if="!isEmptyCaption">
<el-tooltip v-if="isShowTip" placement="top" effect="light"> <el-tooltip v-if="isShowTip" placement="top" effect="light">
<span v-html="caption"></span> <span v-html="caption"></span>
<template > <template >
<span slot="content" v-html="caption" ></span> <span slot="content" v-html="caption" ></span>
</template>
</el-tooltip>
<template v-if="!isShowTip">
<span v-html="caption" ></span>
</template> </template>
</el-tooltip> </span>
<template v-if="!isShowTip">
<span v-html="caption" ></span>
</template>
</span>
</span> </span>
<div <div
v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')" v-if="Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')"
...@@ -221,7 +221,9 @@ export default class AppFormItem extends Vue { ...@@ -221,7 +221,9 @@ export default class AppFormItem extends Vue {
* @memberof AppFormItem * @memberof AppFormItem
*/ */
get labelclasses(): string { get labelclasses(): string {
return `app-form-item-label ${this.required ? 'app-form-item-label--required' : ''} ${this.labelStyle || ''}` return this.labelStyle
? this.labelStyle + " app-form-item-label"
: "app-form-item-label";
} }
/** /**
...@@ -286,6 +288,6 @@ export default class AppFormItem extends Vue { ...@@ -286,6 +288,6 @@ export default class AppFormItem extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import "./app-form-item.scss"; @import "./app-form-item.less";
</style> </style>
\ No newline at end of file
.app-form-item2 {
// margin-bottom: 16px;
>.ivu-form-item-label {
text-decoration: none;
display: block;
overflow: hidden;
white-space: nowrap;
}
>.ivu-form-item-content {
min-height: 36px;
display: flex;
.app-editor-contant {
flex-grow: 1;
}
.app-error-tip {
width: 20px;
}
}
.ivu-form-item-error-tip {
display: none;
}
}
.app-form-item-label-top {
>.ivu-form-item-label {
float: none;
display: inline-block;
padding: 0 0 10px;
}
}
\ No newline at end of file
...@@ -211,6 +211,6 @@ export default class AppFormItem2 extends Vue { ...@@ -211,6 +211,6 @@ export default class AppFormItem2 extends Vue {
} }
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import "./app-form-item2.scss"; @import "./app-form-item2.less";
</style> </style>
\ No newline at end of file
.app-form-mdctrl {
.app-form-mdctrl__icon {
width: 32px;
height: 32px;
border-radius: 50%;
text-align: center;
line-height: 32px;
display: inline-block;
cursor: pointer;
margin-left: 5px;
color: white;
font-size: 18px;
}
.ivu-icon-md-add {
background-color: #409EFF;
border-color: #409EFF;
&:hover {
background-color: #66b1ff;
border-color: #66b1ff;
color: #FFF;
}
}
.ivu-icon-ios-trash-outline {
visibility: hidden;
background-color: #F56C6C;
border-color: #F56C6C;
&:hover {
background-color: #f78989;
border-color: #f78989;
color: #FFF;
}
}
.app-form-mdctrl__item {
position: relative;
.app-form {
width: 100%;
}
.ivu-icon-ios-trash-outline {
position: absolute;
right: 0;
top: 10px;
}
&:hover {
.ivu-icon-ios-trash-outline {
visibility: visible;
}
}
&:not(last-child) {
border-bottom: 1px dashed #eee;
}
}
}
\ No newline at end of file
<template>
<div class="app-form-mdctrl">
<Icon class="app-form-mdctrl__icon" type="md-add" @click="addItem()" />
<div class="app-form-mdctrl__item" v-for="(item, index) in items" :key="item.data[deKeyField.toLowerCase()]">
<slot :viewparams="viewparams" :context="item.context" :viewState="MDCtrlState" :formMDCtrlAction="formMDCtrlAction"></slot>
<Icon class="app-form-mdctrl__icon" type="ios-trash-outline" @click="removeItem(item, index)" />
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Subject, Unsubscribable } from 'rxjs';
@Component({})
export default class AppFormMdCtrl extends Vue {
/**
* 视图上下文
*
* @type {*}
* @memberof AppFormMdCtrl
*/
@Prop() public context!: any;
/**
* 视图参数
*
* @type {*}
* @memberof AppFormMdCtrl
*/
@Prop() public viewparams!: any;
/**
* 表单状态
*
* @type {Subject<any>}
* @memberof AppFormMdCtrl
*/
@Prop() public formState!: Subject<any>;
/**
* 实体代码标识
*
* @type {string}
* @memberof AppFormMdCtrl
*/
@Prop() public entityCodeName!: string;
/**
* 应用实体主键属性名称
*
* @type {string}
* @memberof AppFormMdCtrl
*/
@Prop() public deKeyField!: string;
/**
* 部件名称
*
* @type {string}
* @memberof AppFormMdCtrl
*/
@Prop() public ctrlName!: string;
/**
* 多数据部件类型
*
* @type {[多数据部件类型] {LIST:列表、 FORM:表单、 REPEATER:重复器 }}
* @memberof AppFormMdCtrl
*/
@Prop({ default: 'FORM' }) public contentType!: string | 'LIST' | 'FORM' | 'REPEATER';
/**
* 表单状态事件
*
* @private
* @type {(Unsubscribable | undefined)}
* @memberof AppFormMdCtrl
*/
private formStateEvent: Unsubscribable | undefined;
/**
* 视图状态
*
* @type {Subject<any>}
* @memberof AppFormMdCtrl
*/
private MDCtrlState: Subject<ViewState> = new Subject();
/**
* 项数据集
*
* @type {any[]}
* @memberof AppFormMdCtrl
*/
private items: any[] = [];
/**
* 数据服务
*
* @type {any[]}
* @memberof AppFormMdCtrl
*/
private dataService: any;
/**
* 子表单数量
*
* @type {number}
* @memberof AppFormMdCtrl
*/
private childFormCount: number = 0;
/**
* 错误提示数据
*
* @type {number}
* @memberof AppFormMdCtrl
*/
private errorInfoCount: number = 0;
/**
* vue 生命周期
*
* @memberof AppFormMdCtrl
*/
public async created() {
if (this.entityCodeName) {
this.dataService = await window.entityServiceRegister.getService(this.entityCodeName.toLowerCase());
}
this.formStateEvent = this.formState.subscribe(($event: any) => {
if (Object.is($event.type, 'load')) {
this.loadData();
}
if (Object.is($event.type, 'beforesave')) {
if (this.items.length == 0) {
this.mdCtrlDataSaved();
} else {
this.childFormCount = 0;
this.errorInfoCount = 0;
this.MDCtrlState.next({
tag: this.ctrlName,
action: 'save',
data: { showResultInfo: false },
});
}
}
if (Object.is($event.type, 'save') && !Object.is($event.action, 'autoSave')) {
this.loadData();
}
})
}
/**
* 处理请求上下文
*
* @param context 上下文
* @memberof AppFormMdCtrl
*/
private handleRequestContext(context: any): any {
let tempContext = this.$util.deepCopy(this.context);
if(tempContext && tempContext.srfsessionid){
tempContext.srfsessionkey = tempContext.srfsessionid;
delete tempContext.srfsessionid;
}
return tempContext
}
/**
* 加载数据
*
* @memberof AppFormMdCtrl
*/
public async loadData() {
this.items = [];
if (this.contentType == 'FORM' && this.dataService && this.dataService['FetchDefaultTemp'] && this.dataService['FetchDefaultTemp'] instanceof Function) {
const context = this.handleRequestContext(this.context);
const response = await this.dataService['FetchDefaultTemp'](context);
if (response && response.status === 200) {
this.handleData(response.data);
}
}
}
/**
* 处理数据
*
* @param data 数据集
* @memberof AppFormMdCtrl
*/
public handleData(data: any[]) {
data.forEach((_item: any) => {
const context = this.$util.deepCopy(this.context);
Object.assign(context, { [this.entityCodeName.toLowerCase()]: _item[this.deKeyField.toLowerCase()] });
this.items.push({ context, data: _item });
});
}
/**
* 添加项
*
* @memberof AppFormMdCtrl
*/
public async addItem() {
if (this.dataService && this.deKeyField && this.dataService['CreateTemp'] && this.dataService['CreateTemp'] instanceof Function) {
const data = { [this.deKeyField.toLowerCase()]: this.$util.createUUID() };
const context = this.handleRequestContext(this.context);
const response = await this.dataService['CreateTemp'](context, data);
if (response && response.status === 200) {
this.handleData([response.data]);
}
}
}
/**
* 删除项
*
* @param item 项数据
* @param index 索引
* @memberof AppFormMdCtrl
*/
public async removeItem(item: any, index: number) {
if (this.dataService && this.dataService['RemoveTemp'] && this.dataService['RemoveTemp'] instanceof Function) {
const context = this.handleRequestContext(item.context);
const response = await this.dataService['RemoveTemp'](context, item.data);
if (response && response.status === 200) {
this.items.splice(index, 1);
}
}
}
/**
* 表单多数据部件行为
*
* @param action 行为
* @param data 数据
* @memberof AppFormMdCtrl
*/
public formMDCtrlAction(action: string, data: any) {
if (this.contentType === 'FORM') {
if (action === 'save') {
this.childFormCount++;
if (this.childFormCount === this.items.length) {
this.mdCtrlDataSaved(data);
}
}
if (action === 'checkFail') {
if(this.errorInfoCount !== 0){
return;
}
this.errorInfoCount ++;
this.$Notice.error({ title: (this.$t('app.commonWords.wrong') as string), desc: (this.$t('app.formpage.valuecheckex') as string) });
}
}
}
/**
* 多数据部件数据保存完成
*
* @param data 数据
* @memberof AppFormMdCtrl
*/
public mdCtrlDataSaved(data?: any) {
this.$emit('drdatasaved', { type: 'MDCTRL' });
}
/**
* 部件销毁
*
* @memberof AppFormMdCtrl
*/
public destroyed(): void {
if (this.formStateEvent) {
this.formStateEvent.unsubscribe();
}
}
}
</script>
<style lang='less'>
@import './app-form-mdctrl.less';
</style>
\ No newline at end of file
.app-form-part {
display: block;
}
\ No newline at end of file
...@@ -239,6 +239,6 @@ export default class AppFormPart extends Vue { ...@@ -239,6 +239,6 @@ export default class AppFormPart extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang = "less">
@import './app-form-part.scss'; @import './app-form-part.less';
</style> </style>
\ No newline at end of file
.form-detail-show {
display: block;
}
.form-detail-hidden {
display: none;
}
.app-form {
height: 100%;
> .ivu-row {
height: 100%;
> .ivu-tabs {
height: 100%;
> .ivu-tabs-content {
height: calc(100% - 50px);
overflow: auto;
> .ivu-tabs-tabpane {
height: 100%;
overflow: initial;
}
}
}
> .el-tabs {
height: 100%;
> .el-tabs__content {
height: calc(100% - 62px);
> .el-tab-pane {
height: 100%;
overflow: auto;
}
}
.el-tabs__header {
.el-tabs__nav-wrap::after {
background-color: var(--app-border-content);
height: 1px;
}
.el-tabs__item {
height: 36px;
}
}
}
}
}
\ No newline at end of file
...@@ -28,6 +28,6 @@ export default class AppForm extends Vue { ...@@ -28,6 +28,6 @@ export default class AppForm extends Vue {
@Prop() public name?: string; @Prop() public name?: string;
} }
</script> </script>
<style lang="scss"> <style lang = "less">
@import './app-form.scss'; @import './app-form.less';
</style> </style>
\ No newline at end of file
.app-format-data{
display: inline-block;
}
\ No newline at end of file
...@@ -91,6 +91,6 @@ export default class AppFormatData extends Vue { ...@@ -91,6 +91,6 @@ export default class AppFormatData extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import './app-format-data.scss'; @import './app-format-data.less';
</style> </style>
\ No newline at end of file
<template> <template>
<div class="fullscren"> <div class="fullscren">
<Icon :type="fullScren == true ? 'ios-contract' : 'ios-expand'" size="22" @click="handleScreen"/> <Icon :type="fullScren == true ? 'ios-contract' : 'ios-expand'" color="#aaa" size="22" @click="handleScreen"/>
</div> </div>
</template> </template>
<script lang = 'ts'> <script lang = 'ts'>
...@@ -82,7 +82,7 @@ export default class AppFullScren extends Vue{ ...@@ -82,7 +82,7 @@ export default class AppFullScren extends Vue{
} }
</script> </script>
<style lang='scss'> <style lang='less'>
.fullscren{ .fullscren{
cursor:pointer; cursor:pointer;
padding: 0 5px; padding: 0 5px;
......
...@@ -283,7 +283,7 @@ export default class AppGroupPicker extends Vue { ...@@ -283,7 +283,7 @@ export default class AppGroupPicker extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
.ibiz-group-picker{ .ibiz-group-picker{
width: 100%; width: 100%;
height: 100%; height: 100%;
......
.ibiz-group-select {
width: 100%;
display: flex;
border: 1px solid #DCDFE6;
height: 32px;
border-radius: 4px;
.ibiz-group-content {
flex-grow: 1;
height: 32px;
.group-item-text{
padding-left: 15px;
font-size: 13px;
}
.ibiz-group-item {
display: inline-block;
border: 1px solid #bbb;
border-radius: 5px;
font-size: 12px;
height: 24px;
line-height: 22px;
margin: 2px 0px 2px 6px;
padding: 1px 3px 0 8px;
background-color: #f4f4f5;
border-color: #e9e9eb;
color: #909399;
.group-item-multiple{
margin: 0 8px 0 0;
}
.el-icon-close{
color: #909399;
background-color: #c0c4cc;
border-radius: 50%;
top: 0;
}
.el-icon-close:hover{
color: #fff;
background-color: #909399;
}
}
}
.ibiz-group-open {
display: flex;
text-align: center;
align-items: center;
padding: 0 5px;
}
}
.ibiz-group-select:hover {
border-color: #108cee;
}
\ No newline at end of file
...@@ -327,6 +327,6 @@ export default class AppGroupSelect extends Vue { ...@@ -327,6 +327,6 @@ export default class AppGroupSelect extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import './app-group-select.scss'; @import './app-group-select.less';
</style> </style>
\ No newline at end of file
.app-header-menus {
display: flex;
align-items: center;
height: 100%;
line-height: 20px;
>.app-header-menu-item{
height: 24px;
display: flex;
align-items: center;
margin-right: 16px;
color: #8893a7;
border: 1px solid rgba(0, 0, 0, 0);
cursor: pointer;
}
>.app-header-menu-item.icon {
>.app-header-menu-item-icon {
font-size: 20px;
}
>.app-header-menu-item-img {
height: 20px;
width: 20px;
>img {
height: 100%;
width: 100%;
}
}
}
>.app-header-menu-item.icon:hover{
color: #68758e;
text-decoration: none;
}
>.app-header-menu-item.text {
border-radius: 4px;
border: 1px solid #8893a7;
text-align: center;
font-size: 12px;
padding: 2px 4px;
>.app-header-menu-item-icon {
width: 20px;
height: 20px;
overflow: hidden;
font-size: 16px;
margin-right: 3px;
margin-top: -3px;
}
>.app-header-menu-item-img {
height: 16px;
width: 16px;
margin-right: 3px;
>img {
height: 100%;
width: 100%;
}
}
}
>.app-header-menu-item.text:hover {
color: #107fff;
border: 1px solid #107fff;
}
}
.app-header-menus:hover {
background: none !important;
}
\ No newline at end of file
<template>
<div class="app-header-menus" v-if="isShow">
<div v-for="(menu,index) in menus" :key="index" class="app-header-menu-item text" @click="openWindow(menu)">
<div class="app-header-menu-item-icon">
<i :class="menu.iconcls" :aria-hidden="true" />
</div>
<div class="app-header-menu-item-text">{{$t(menu.title)}}</div>
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Model, Emit } from "vue-property-decorator";
import { Subject } from "rxjs";
import { Environment } from '@/environments/environment';
@Component({
})
export default class AppHeaderMenus extends Vue {
/**
* 是否显示
*
* @type {boolean}
* @memberof AppHeaderMenus
*/
public isShow:boolean = Environment.devMode;
/**
* 菜单数据
*
* @type {any}
* @memberof AppHeaderMenus
*/
public menus:any = [
{
name: "ibizlab",
title: "components.appHeaderMenus.ibizlab.title",
url: Environment.ibizlabtUrl,
iconcls: 'fa fa-home',
},
{
name: "publishProject",
title: "components.appHeaderMenus.publishProject.title",
url: Environment.PublishProjectUrl,
iconcls: 'fa fa-folder-open-o',
},
{
name: "ibizstudio",
title: "components.appHeaderMenus.ibizstudio.title",
url: `${Environment.StudioUrl}?#/common_mosindex/srfkeys=${Environment.SysId}`,
iconcls: 'fa fa-wrench',
},
{
name: "ibizbbs",
title: "components.appHeaderMenus.ibizbbs.title",
url: Environment.ibizbbstUrl,
iconcls: 'fa fa-comments-o',
},
];
/**
* 触发界面行为
*
* @memberof AppHeaderMenus
*/
public openWindow(menu:any){
window.open(menu.url, '_blank');
}
}
</script>
<style lang='less'>
@import "./app-header-menus.less";
</style>
\ No newline at end of file
.app-icon-menus{
display: flex;
flex-wrap: wrap;
.el-card{
margin: 6px 8px;
.el-card__body{
padding: 0;
width: 200px;
height: 122px;
margin: 0;
.menuIcon{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
border: 1px rgb(210,238,255) solid;
background-color: rgb(240,249,255);
border-radius: 3px;
cursor: pointer;
&:hover{
border-color: rgb(53,152,220) ;
}
span{
font-size: 40px;
color: rgb(55,155,222);
}
img{
width: 46px;
height: 46px;
// margin-top: 12px;
}
h4{
font-weight: 500;
font-size: 16px;
}
}
}
}
}
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<template v-if="!item.hidden"> <template v-if="!item.hidden">
<div :bordered="false" v-if="item.items && Array.isArray(item.items)" :key="index" :class="item.textcls"> <div :bordered="false" v-if="item.items && Array.isArray(item.items)" :key="index" :class="item.textcls">
<p @click="$emit('menuClick',item.name, [item.name])"> <p @click="$emit('menuClick',item.name, [item.name])">
<span>{{$t(item.cappslanguageres, item.text)}}</span> <span>{{$t('app.menus.' + ctrlName + '.' + item.name)}}</span>
<span class="line"></span> <span class="line"></span>
</p> </p>
<p style=" display: 'flex' "> <p style=" display: 'flex' ">
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
<img :src="item.iconcls" v-else-if="!Object.is(item.iconcls, '')" /> <img :src="item.iconcls" v-else-if="!Object.is(item.iconcls, '')" />
<i class="fa fa-cogs" v-else></i> <i class="fa fa-cogs" v-else></i>
</span> </span>
<h4>{{$t(item.cappslanguageres, item.text)}}</h4> <h4>{{$t('app.menus.' + ctrlName + '.' + item.name)}}</h4>
</div> </div>
</el-card> </el-card>
</template> </template>
...@@ -74,6 +74,6 @@ export default class AppQuickMenus extends Vue { ...@@ -74,6 +74,6 @@ export default class AppQuickMenus extends Vue {
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import "./app-icon-menus.scss"; @import "./app-icon-menus.less";
</style> </style>
\ No newline at end of file
/*** BEGIN:图片上传 ***/
.app-picture-preview {
.preview-file-list-item{
margin: 0 8px 8px 0;
display: inline-block;
position: relative;
}
.preview-file-list-img{
display: inline-block;
position: relative;
width: 148px;
height: 148px;
.el-image{
width: 100%;
height: 100%;
.image-slot{
width: 100%;
height: 100%;
}
}
}
.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;
.action-download{
margin-left: 15px;
}
}
.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;
}
>div{
display: inline;
}
}
.app-image-preview-model {
width: 100%;
height: 100%;
text-align: center;
.ivu-modal{
top: 50%;
transform: translateY(-50%);
display: inline-block;
.ivu-modal-content{
display: inline-block;
.ivu-modal-close{
display: none;
}
.ivu-modal-body{
display: inline-block;
line-height: 0;
.el-image {
width: auto;
height: auto;
line-height: 0;
.image-slot {
width: auto;
height: auto;
line-height: 0;
img{
max-width: 1200px;
max-height: 1600px;
}
}
}
}
}
}
}
/*** END:图片上传 ***/
\ No newline at end of file
...@@ -199,6 +199,6 @@ export default class AppImagePreview extends Vue { ...@@ -199,6 +199,6 @@ export default class AppImagePreview extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang = "less">
@import './app-image-preview.scss'; @import './app-image-preview.less';
</style> </style>
\ No newline at end of file
...@@ -41,7 +41,7 @@ export default class AppImageRomate extends Vue { ...@@ -41,7 +41,7 @@ export default class AppImageRomate extends Vue {
* @type {boolean} * @type {boolean}
* @memberof AppImageRomate * @memberof AppImageRomate
*/ */
@Prop() public disabled: boolean = false; @Prop({ default: false }) public disabled?: boolean;
/** /**
* 预览图片数组 * 预览图片数组
......
/*** BEGIN:图片上传 ***/
.app-picture-upload {
>div{
display: inline;
}
.el-upload-disabled {
.el-upload {
cursor: not-allowed;
}
}
.el-image {
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #f5f7fa;
color: #909399;
font-size: 30px;
}
}
}
.app-image-upload-model {
.el-image {
width: 100%;
height: 100%;
.image-slot {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 300px;
background: #f5f7fa;
color: #909399;
font-size: 30px;
}
}
}
/*** END:图片上传 ***/
\ No newline at end of file
...@@ -503,6 +503,6 @@ export default class AppImageUpload extends Vue { ...@@ -503,6 +503,6 @@ export default class AppImageUpload extends Vue {
} }
} }
</script> </script>
<style lang="scss"> <style lang = "less">
@import './app-image-upload.scss'; @import './app-image-upload.less';
</style> </style>
\ No newline at end of file
.app-input-icon{
.selected-icon{
font-size: 20px;
}
.el-dialog__header{
border-bottom: 1px solid #f0f0f0;
}
}
.app-input-icon--item {
width: 100px;
height: auto;
display: inline-block;
text-align: center;
padding: 20px 20px 0 20px;
transition: all .2s;
line-height: 1;
vertical-align: top;
cursor: pointer;
.item-icon {
>i {
width: 32px;
height: 32px;
font-size: 32px;
vertical-align: baseline;
}
}
.item-class-name {
font-size: 12px;
margin: 5px 0 12px 0;
width: 60px;
}
&:hover {
transform: scale(1.4);
}
}
\ No newline at end of file
<template>
<div class="app-input-icon">
<el-input
placeholder="请选择 图标"
v-model="iconClass"
@focus="openDialog"
:disabled="disabled"
clearable
>
<template slot="append">
<i class="selected-icon" :class="iconClass"></i>
</template>
</el-input>
<el-dialog
title="请选择 图标"
:visible.sync="dialogTableVisible"
width="80%"
>
<el-tabs>
<el-tab-pane
v-for="(item, index) in iconList"
:label="item.label"
:key="index"
class="app-input-icon--tab-pane"
>
<div
class="app-input-icon--item"
v-for="(_item, _index) in item.list"
:key="_index"
@click="selectIcon(_item)"
>
<span class="item-icon">
<i :class="_item"></i>
</span>
<p class="item-class-name">{{ _item }}</p>
</div>
</el-tab-pane>
</el-tabs>
</el-dialog>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
@Component({})
export default class AppInputIcon extends Vue {
/**
* 属性名称
*
* @type {*}
* @memberof AppInputIcon
*/
@Prop() name?: any;
/**
* 传入值
* @type {any}
* @memberof AppInputIcon
*/
@Prop() public value?: any;
/**
* 是否禁用
* @type {boolean}
* @memberof AppInputIcon
*/
@Prop() public disabled?: boolean;
/**
* 图标数据
* @type {any[]}
* @memberof AppInputIcon
*/
@Prop() public iconList?: any[];
/**
* dialog 对话框开关
* @type {boolean}
* @memberof AppInputIcon
*/
public dialogTableVisible: boolean = false;
/**
* 图标类名
* @type {string}
* @memberof AppInputIcon
*/
public iconClass: string = "";
@Watch("value", { immediate: true })
valueChange(val: any) {
if (val) {
this.iconClass = val;
} else {
this.iconClass = "";
}
}
/**
* 打开对话框
* @type {}
* @memberof AppInputIcon
*/
public openDialog() {
if (this.disabled) {
return;
}
this.dialogTableVisible = true;
}
/**
* 选中图标类名
* @type {value:string}
* @memberof AppInputIcon
*/
public selectIcon(value: string) {
this.iconClass = value;
this.dialogTableVisible = false;
this.$emit("change", { name: this.name, value: value });
}
}
</script>
<style lang='less'>
@import "./app-input-icon.less";
</style>
.app-inpu-ip{
display: flex;
flex-wrap: nowrap;
.el-input{
margin-right: 3px;
margin-left: 3px;
}
}
\ No newline at end of file
...@@ -4,21 +4,29 @@ ...@@ -4,21 +4,29 @@
type="text" type="text"
size="small" size="small"
v-model="firstIp" v-model="firstIp"
@focus="focus"
@blur="blur"
maxlength="3" />. maxlength="3" />.
<el-input <el-input
type="text" type="text"
size="small" size="small"
v-model="secIp" v-model="secIp"
@focus="focus"
@blur="blur"
maxlength="3" />. maxlength="3" />.
<el-input <el-input
type="text" type="text"
size="small" size="small"
maxlength="3" maxlength="3"
@focus="focus"
@blur="blur"
v-model="thirdIp" />. v-model="thirdIp" />.
<el-input <el-input
type="text" type="text"
size="small" size="small"
maxlength="3" maxlength="3"
@focus="focus"
@blur="blur"
v-model="forIp" /> v-model="forIp" />
</div> </div>
</template> </template>
...@@ -71,6 +79,23 @@ export default class AppInputIp extends Vue { ...@@ -71,6 +79,23 @@ export default class AppInputIp extends Vue {
*/ */
public CurValue: any[] = []; public CurValue: any[] = [];
/**
* 当前组件是否已获取到焦点
*
* @type {boolean}
* @memberof AppInputIp
*/
public activeElement: boolean = false;
/**
* 当前组件输入框是否全部失焦
*
* @type {string}
* @memberof AppInputIp
*/
public isAllBlur:boolean = true;
/** /**
* 第一段ip * 第一段ip
* *
...@@ -181,9 +206,39 @@ export default class AppInputIp extends Vue { ...@@ -181,9 +206,39 @@ export default class AppInputIp extends Vue {
this.$emit('change',this.firstIp+'.'+this.secIp+'.'+this.thirdIp+'.'+this.forIp); this.$emit('change',this.firstIp+'.'+this.secIp+'.'+this.thirdIp+'.'+this.forIp);
} }
} }
/**
* 输入框获取到焦点时设置该组件已获取到焦点
*
* @memberof AppInputIp
*/
public focus(){
this.activeElement = true;
if(this.isAllBlur){
this.isAllBlur = false;
this.$emit('focus',this.firstIp+'.'+this.secIp+'.'+this.thirdIp+'.'+this.forIp)
}
}
/**
* 失焦事件
*
* @memberof AppInputIp
*/
public blur(){
this.activeElement = false;
// 多个输入框同时失焦则抛出失焦事件
setTimeout(() => {
if(!this.activeElement){
this.isAllBlur = true;
this.$emit('blur',this.firstIp+'.'+this.secIp+'.'+this.thirdIp+'.'+this.forIp)
}
}, 0);
}
} }
</script> </script>
<style lang='scss'> <style lang='less'>
@import './app-input-ip.scss'; @import './app-input-ip.less';
</style> </style>
...@@ -177,7 +177,7 @@ export default { ...@@ -177,7 +177,7 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="less">
</style> </style>
.ivu-dropdown{
cursor: pointer;
}
\ No newline at end of file
<template> <template>
<dropdown class="app-lang" v-if="localList.length > 1" trigger='click' @on-click="selectLang"> <dropdown v-if="localList.length > 1" trigger='click' @on-click="selectLang">
<img src="/assets/img/lang.svg" /> <span>
{{title}}
<icon size='18' type='md-arrow-dropdown'></icon>
</span>
<dropdown-menu slot='list'> <dropdown-menu slot='list'>
<dropdown-item v-for="(item) in localList" :name="item.type" :key="`lang-${item.type}`">{{item.name}}</dropdown-item> <dropdown-item v-for="(item) in localList" :name="item.type" :key="`lang-${item.type}`">{{item.name}}</dropdown-item>
</dropdown-menu> </dropdown-menu>
...@@ -64,6 +67,6 @@ export default class AppLang extends Vue { ...@@ -64,6 +67,6 @@ export default class AppLang extends Vue {
} }
</script> </script>
<style lang="scss"> <style lang="less">
@import './app-lang.scss'; @import './app-lang.less';
</style> </style>
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册