From 46f79b491173d284a4900d19e7aecf7509481438 Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期五, 21 一月 2022 17:21:25 +0800 Subject: [PATCH] 2022-01-21 --- src/templates/modalconfig/editcard/index.jsx | 5 src/templates/zshare/modalform/index.jsx | 1001 +- src/templates/zshare/editcard/index.jsx | 5 src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx | 19 src/tabviews/custom/components/chart/antv-scatter/index.scss | 20 src/tabviews/formtab/index.jsx | 8 src/menu/components/timeline/normal-timeline/index.jsx | 20 src/templates/sharecomponent/cardcomponent/index.scss | 4 src/tabviews/scriptmanage/config.jsx | 4 src/menu/components/chart/antv-scatter/chartcompile/index.jsx | 2 src/tabviews/verupmanage/index.scss | 2 src/templates/sharecomponent/cardcomponent/dragdetail/card.jsx | 7 src/locales/zh-CN/model.js | 74 src/menu/components/chart/antv-scatter/index.jsx | 18 src/mob/components/navbar/normal-navbar/menus/index.jsx | 196 src/views/interface/workspace/index.jsx | 7 src/menu/components/chart/antv-dashboard/chartcompile/formconfig.jsx | 30 src/templates/sharecomponent/tabscomponent/tabdragelement/card.jsx | 11 src/templates/menuconfig/editthdmenu/preview/index.scss | 2 src/tabviews/zshare/actionList/changeuserbutton/index.jsx | 58 src/menu/datasource/verifycard/index.jsx | 90 src/mob/components/navbar/normal-navbar/menus/menuform/index.jsx | 24 src/mob/searchconfig/groupdragelement/index.scss | 2 src/components/header/index.scss | 2 src/menu/components/card/cardcellcomponent/index.jsx | 59 src/mob/components/navbar/normal-navbar/menus/drags/card.jsx | 64 src/menu/components/form/tab-form/index.jsx | 35 src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx | 36 src/menu/components/carousel/prop-card/index.jsx | 22 src/mob/searchconfig/searchdragelement/card.jsx | 54 src/menu/components/search/main-search/dragsearch/card.jsx | 28 src/menu/components/card/cardcomponent/index.jsx | 84 src/menu/components/chart/antv-pie/index.jsx | 16 src/menu/components/share/mobPagination/index.scss | 39 src/tabviews/zshare/topSearch/dategroup/quarterpicker/index.jsx | 1 src/menu/components/editor/braft-editor/editorcontent/index.jsx | 7 src/menu/components/table/edit-table/columns/index.scss | 2 src/views/menudesign/index.scss | 3 src/menu/components/card/prop-card/index.jsx | 22 src/templates/zshare/customscript/index.jsx | 10 src/templates/sharecomponent/treesettingcomponent/index.jsx | 5 src/templates/zshare/modalform/modaleditable/index.jsx | 204 src/menu/components/tabs/paste/index.jsx | 5 src/menu/components/table/edit-table/columns/index.jsx | 32 src/templates/sharecomponent/searchcomponent/searcheditable/index.jsx | 19 src/menu/datasource/verifycard/utils.jsx | 21 src/menu/components/card/cardsimplecomponent/node-wrap/index.jsx | 6 src/tabviews/custom/components/chart/antv-bar-line/index.jsx | 72 package-lock.json | 593 + src/assets/css/viewstyle.scss | 58 src/tabviews/custom/components/chart/antv-dashboard/index.jsx | 51 src/views/login/loginform.jsx | 3 src/menu/components/share/actioncomponent/dragaction/card.jsx | 39 src/tabviews/zshare/topSearch/index.jsx | 41 src/templates/comtableconfig/index.jsx | 41 src/templates/sharecomponent/searchcomponent/dragsearch/card.jsx | 9 src/menu/components/chart/chart-custom/index.jsx | 16 src/tabviews/custom/components/table/edit-table/index.jsx | 3 src/menu/modulesource/dragsource/index.jsx | 4 src/templates/sharecomponent/columncomponent/dragcolumn/index.jsx | 11 src/views/printTemplate/print.js | 25 src/mob/components/formdragelement/index.scss | 5 src/mob/searchconfig/groupform/index.jsx | 5 src/templates/sharecomponent/cardcomponent/index.jsx | 27 src/mob/mobshell/card.jsx | 6 src/templates/zshare/codemirror/index.jsx | 9 src/menu/sysinterface/index.jsx | 17 src/mob/components/search/single-search/index.jsx | 161 src/tabviews/custom/components/card/prop-card/index.scss | 23 src/pc/transfer/settingform/index.jsx | 1 src/pc/bgcontroller/index.jsx | 47 src/views/pcdesign/index.jsx | 204 src/menu/datasource/verifycard/settingform/index.jsx | 31 src/templates/sharecomponent/tabscomponent/tabform/index.jsx | 30 src/templates/sharecomponent/searchcomponent/dragsearch/index.jsx | 5 src/menu/components/share/actioncomponent/index.jsx | 5 src/templates/menuconfig/menuelement/card.jsx | 11 src/menu/components/card/cardsimplecomponent/index.jsx | 21 src/templates/modalconfig/source.jsx | 5 src/components/404/index.jsx | 8 src/menu/components/share/copycomponent/index.jsx | 5 src/views/printTemplate/dragelement/source.jsx | 5 src/menu/components/form/dragtitle/card.jsx | 7 src/templates/zshare/editTable/index.jsx | 39 src/templates/zshare/modalform/fieldtable/index.jsx | 15 src/menu/components/group/paste/index.jsx | 5 src/mob/components/tabs/antv-tabs/index.jsx | 33 src/tabviews/custom/components/tree/antd-tree/index.jsx | 56 src/tabviews/zshare/actionList/popupbutton/index.jsx | 73 src/components/mk-icon/index.scss | 0 src/templates/sharecomponent/chartgroupcomponent/dragchartview/card.jsx | 11 src/tabviews/custom/components/tabs/antv-tabs/index.jsx | 38 src/tabviews/zshare/normalTable/index.jsx | 39 src/menu/components/share/searchcomponent/index.jsx | 14 src/pc/components/navbar/normal-navbar/menusetting/index.jsx | 5 src/templates/menuconfig/editthdmenu/preview/index.jsx | 3 src/templates/treepageconfig/index.jsx | 33 src/components/mkIcon/index.scss | 19 src/menu/datasource/index.jsx | 6 src/tabviews/zshare/automatic/index.jsx | 9 src/menu/components/form/formaction/index.jsx | 17 src/menu/components/tree/antd-tree/index.jsx | 32 src/views/billprint/index.jsx | 28 src/templates/formtabconfig/dragelement/card.jsx | 15 src/locales/en-US/main.js | 3 src/tabviews/subtabtable/index.jsx | 16 src/views/imdesign/index.scss | 351 + src/tabviews/zshare/actionList/normalbutton/index.jsx | 157 src/views/menudesign/index.jsx | 98 src/menu/modulesource/option.jsx | 14 src/tabviews/custom/components/card/data-card/index.jsx | 155 src/tabviews/formtab/index.scss | 2 src/views/appmanage/index.scss | 4 src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx | 10 src/templates/sharecomponent/actioncomponent/actionform/index.jsx | 948 +- src/templates/calendarconfig/index.jsx | 34 src/views/login/logincloudform.jsx | 7 src/router/index.js | 2 src/menu/pastecontroller/index.jsx | 5 src/menu/components/card/data-card/index.jsx | 69 src/templates/menuconfig/editthdmenu/index.scss | 2 src/mob/searchconfig/settingform/index.jsx | 16 src/tabviews/scriptmanage/index.scss | 2 src/menu/components/chart/antv-dashboard/index.jsx | 13 src/views/appmanage/index.jsx | 80 src/views/design/header/versions/index.jsx | 11 src/tabviews/verupmanage/index.jsx | 8 src/menu/components/tabs/antv-tabs/index.jsx | 34 src/tabviews/home/defaulthome/index.jsx | 19 src/components/tabview/index.scss | 34 src/templates/sharecomponent/settingcomponent/index.jsx | 5 src/views/imdesign/menuform/index.scss | 25 src/templates/subtableconfig/source.jsx | 3 src/menu/components/share/sourcecomponent/inputform/index.jsx | 5 src/menu/components/table/normal-table/options.jsx | 49 src/menu/components/tree/antd-tree/index.scss | 13 src/components/header/index.jsx | 9 src/tabviews/custom/components/chart/antv-bar-line/index.scss | 19 src/mob/modulesource/dragsource/index.jsx | 6 src/templates/formtabconfig/index.jsx | 20 src/menu/padcontroller/index.jsx | 14 src/templates/zshare/unattended/index.jsx | 3 src/tabviews/zshare/chartcomponent/index.jsx | 3 src/pc/components/navbar/normal-navbar/menusetting/menutable/index.jsx | 20 src/assets/mobimg/singlesearch.png | 0 src/mob/components/topbar/normal-navbar/options.jsx | 32 src/templates/zshare/editcomponent/index.jsx | 9 src/views/rolemanage/index.jsx | 79 src/templates/menuconfig/editfirstmenu/dragelement/index.jsx | 5 src/templates/sharecomponent/fieldscomponent/index.jsx | 25 src/menu/components/code/sandbox/index.jsx | 17 src/tabviews/zshare/mutilform/mkSelect/index.jsx | 12 src/mob/components/navbar/normal-navbar/menus/drags/index.scss | 0 src/menu/components/chart/chart-custom/chartcompile/index.jsx | 7 src/components/normalform/modalform/mkTable/index.jsx | 440 + src/menu/components/table/normal-table/columns/index.scss | 2 src/tabviews/custom/components/tree/antd-tree/index.scss | 9 src/components/paste/index.jsx | 5 src/menu/bgcontroller/index.jsx | 3 src/templates/sharecomponent/settingcalcomponent/index.jsx | 5 src/templates/calendarconfig/calcomponent/index.jsx | 5 src/menu/components/card/balcony/index.jsx | 24 src/tabviews/zshare/actionList/tabbutton/index.jsx | 60 src/mob/components/search/single-search/options.jsx | 115 src/templates/modalconfig/index.scss | 2 src/components/normalform/modalform/index.jsx | 36 src/menu/stylecontroller/index.jsx | 128 src/menu/components/chart/antv-pie/chartcompile/index.jsx | 2 src/templates/zshare/verifycard/index.jsx | 45 src/menu/components/share/sourcecomponent/index.jsx | 7 src/mob/components/navbar/normal-navbar/index.scss | 52 src/templates/formtabconfig/actionform/index.jsx | 8 src/tabviews/zshare/actionList/printbutton/index.jsx | 87 src/tabviews/custom/components/table/edit-table/normalTable/index.scss | 2 src/menu/components/card/cardcellcomponent/formconfig.jsx | 53 src/assets/img/back.jpg | 0 src/templates/comtableconfig/index.scss | 2 src/templates/sharecomponent/actioncomponent/index.jsx | 6 src/menu/components/editor/braft-editor/index.jsx | 20 src/components/normalform/modalform/mkTable/index.scss | 108 package.json | 2 src/menu/stylecombcontrolbutton/index.jsx | 3 src/tabviews/zshare/fileupload/index.jsx | 7 src/tabviews/zshare/actionList/popupbutton/index.scss | 13 src/tabviews/zshare/topSearch/advanceform/index.jsx | 4 src/templates/subtableconfig/menuform/index.jsx | 4 src/menu/components/share/markcomponent/markform/index.jsx | 4 src/menu/components/card/cardsimplecomponent/node-wrap/menus/index.jsx | 4 src/menu/components/chart/antv-bar/chartcompile/index.jsx | 24 src/mob/searchconfig/index.jsx | 33 src/menu/components/share/markcomponent/index.jsx | 71 src/mob/components/tabs/antv-tabs/options.jsx | 26 src/menu/components/card/cardcellcomponent/index.scss | 9 src/assets/mobimg/slider-thumb.svg | 14 src/menu/components/card/cardcellcomponent/dragaction/action.jsx | 33 src/menu/components/card/cardcellcomponent/elementform/index.jsx | 30 src/pc/components/navbar/normal-navbar/linksetting/index.jsx | 5 src/templates/sharecomponent/actioncomponent/verifyprint/editable/index.jsx | 12 src/menu/components/share/actioncomponent/dragaction/index.jsx | 10 src/templates/sharecomponent/columncomponent/markcolumn/index.jsx | 18 src/menu/stylecontroller/index.scss | 23 src/templates/modalconfig/index.jsx | 73 public/admin.html | 10 src/templates/sharecomponent/tablecomponent/index.jsx | 4 src/templates/menuconfig/editthdmenu/index.jsx | 11 src/tabviews/zshare/actionList/newpagebutton/index.jsx | 60 src/templates/sharecomponent/settingcalcomponent/verifycard/index.jsx | 7 src/views/design/sidemenu/index.jsx | 13 src/mob/modalconfig/index.jsx | 36 src/templates/menuconfig/editfirstmenu/dragelement/card.jsx | 7 src/menu/stylecombcontroller/index.jsx | 110 src/tabviews/commontable/index.jsx | 25 src/components/header/loginform.jsx | 12 src/components/mk-icon/index.jsx | 478 + src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx | 12 src/templates/sharecomponent/actioncomponent/dragaction/card.jsx | 13 src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx | 17 src/views/imdesign/menuform/index.jsx | 77 src/tabviews/custom/components/card/cardcellList/index.jsx | 262 src/tabviews/custom/components/card/prop-card/index.jsx | 101 src/menu/components/card/data-card/options.jsx | 154 src/mob/components/menubar/normal-menubar/index.jsx | 18 src/mob/components/search/single-search/index.scss | 53 src/tabviews/custom/components/table/normal-table/index.jsx | 54 src/views/interface/history/index.scss | 4 src/templates/sharecomponent/actioncomponent/verifyexcelout/columnform/index.jsx | 2 src/tabviews/zshare/topSearch/dategroup/yearpicker/index.jsx | 1 src/menu/components/tabs/antv-tabs/options.jsx | 57 src/mob/components/menubar/normal-menubar/menucomponent/options.jsx | 22 src/tabviews/custom/components/chart/antv-pie/index.jsx | 44 src/tabviews/custom/components/timeline/normal-timeline/index.jsx | 6 src/tabviews/home/defaulthome/index.scss | 2 src/templates/subtableconfig/index.jsx | 35 src/components/mkIcon/index.jsx | 33 src/tabviews/custom/components/table/edit-table/normalTable/index.jsx | 159 src/components/header/resetpwd/index.jsx | 2 src/tabviews/zshare/topSearch/dategroup/index.jsx | 5 src/components/breadview/index.jsx | 14 src/tabviews/zshare/mutilform/index.jsx | 50 src/tabviews/commontable/index.scss | 2 src/menu/components/share/actioncomponent/actionform/index.jsx | 1163 +-- src/tabviews/custom/index.jsx | 23 src/menu/components/table/normal-table/columns/index.jsx | 32 src/views/appmanage/submutilform/index.jsx | 127 src/tabviews/zshare/cardcomponent/index.jsx | 5 src/menu/popview/index.jsx | 2 src/tabviews/treepage/index.jsx | 16 src/menu/components/share/logcomponent/index.jsx | 9 src/pc/components/navbar/normal-navbar/index.jsx | 17 src/tabviews/custom/components/chart/antv-dashboard/index.scss | 72 src/tabviews/custom/components/chart/antv-scatter/index.jsx | 46 src/menu/components/chart/antv-dashboard/chartcompile/index.jsx | 3 src/mob/components/navbar/normal-navbar/menus/drags/index.jsx | 56 src/views/design/header/index.jsx | 19 src/views/printTemplate/index.jsx | 17 src/mob/components/navbar/normal-navbar/menus/menuform/index.scss | 0 src/menu/components/card/cardcellcomponent/dragaction/index.jsx | 7 src/menu/components/form/normal-form/index.jsx | 35 src/tabviews/custom/components/card/cardcellList/asyncButtonComponent.jsx | 7 src/tabviews/zshare/actionList/exceloutbutton/index.jsx | 83 src/menu/components/card/cardcellcomponent/dragaction/card.jsx | 15 src/menu/components/chart/antv-scatter/chartcompile/formconfig.jsx | 14 src/pc/modulesource/dragsource/index.jsx | 4 src/menu/components/chart/antv-bar/index.jsx | 28 src/tabviews/zshare/actionList/index.jsx | 19 src/tabviews/subtable/index.jsx | 21 src/views/appmanage/submutilform/index.scss | 5 src/utils/asyncIconComponent.jsx | 4 src/menu/components/table/edit-table/index.jsx | 36 src/templates/sharecomponent/tabscomponent/index.jsx | 4 src/menu/components/carousel/data-card/index.jsx | 18 src/templates/sharecomponent/actioncomponent/verifyprint/index.jsx | 2 src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx | 24 src/mob/components/menubar/normal-menubar/menucomponent/index.jsx | 18 src/tabviews/zshare/mutilform/mkCheckCard/index.jsx | 100 src/menu/components/share/actioncomponent/index.scss | 19 src/menu/components/share/normalheader/index.jsx | 7 src/templates/modalconfig/settingform/index.jsx | 17 src/pc/components/login/normal-login/loginform.jsx | 27 src/templates/comtableconfig/source.jsx | 3 src/templates/sharecomponent/columncomponent/dragcolumn/card.jsx | 15 src/menu/components/search/main-search/index.jsx | 28 src/mob/components/topbar/normal-navbar/index.jsx | 39 src/views/login/index.scss | 2 src/tabviews/scriptmanage/index.jsx | 2 src/templates/sharecomponent/actioncomponent/dragaction/index.jsx | 4 src/menu/components/table/edit-table/columns/tableIn/customscript/index.jsx | 4 src/components/sidemenu/index.jsx | 8 src/tabviews/zshare/settingcomponent/editTable/index.jsx | 8 src/pc/components/login/normal-login/index.scss | 11 src/templates/zshare/modalform/modaleditable/index.scss | 2 src/views/login/index.jsx | 8 src/pc/transfer/index.jsx | 8 src/tabviews/zshare/mutilform/mkRadio/index.jsx | 124 src/templates/zshare/transferform/index.scss | 8 src/menu/components/card/cardsimplecomponent/node-wrap/menus/columnform/index.jsx | 4 src/mob/components/navbar/normal-navbar/index.jsx | 59 src/mob/searchconfig/groupdragelement/card.jsx | 10 src/utils/utils-datamanage.js | 52 src/menu/picturecontroller/index.jsx | 33 src/menu/sysinterface/settingform/simplescript/index.jsx | 13 src/menu/components/table/edit-table/columns/tableIn/index.jsx | 39 src/templates/sharecomponent/settingcomponent/settingform/simplescript/index.jsx | 10 src/menu/components/card/table-card/index.jsx | 44 src/mob/modulesource/option.jsx | 4 src/menu/picturecontroller/index.scss | 2 src/tabviews/custom/components/share/normalTable/index.scss | 24 src/templates/sharecomponent/fieldscomponent/editcard/index.jsx | 5 src/tabviews/zshare/actionList/excelInbutton/index.jsx | 66 src/views/interface/workspace/editTable/index.jsx | 5 public/options.json | 2 src/menu/components/share/searchcomponent/dragsearch/card.jsx | 23 src/pc/components/login/normal-login/options.jsx | 112 src/views/pcdesign/index.scss | 18 src/templates/formtabconfig/source.jsx | 3 src/mob/searchconfig/settingform/index.scss | 5 src/menu/components/share/markcomponent/markform/index.scss | 5 src/templates/calendarconfig/source.jsx | 3 src/templates/modalconfig/dragelement/card.jsx | 17 src/views/mobdesign/index.jsx | 259 src/mob/searchconfig/searchdragelement/index.scss | 48 src/views/interface/history/index.jsx | 11 src/mob/colorsketch/index.jsx | 6 src/templates/zshare/modalform/datatable/index.jsx | 71 src/menu/components/share/actioncomponent/formconfig.jsx | 250 src/views/design/sidemenu/config.jsx | 14 src/menu/versions/index.jsx | 4 src/templates/sharecomponent/columncomponent/gridbtnform/index.jsx | 30 src/templates/zshare/createinterface/index.jsx | 4 src/mob/colorsketch/index.scss | 12 src/templates/zshare/modalform/datatable/index.scss | 5 src/menu/components/share/clockcomponent/index.jsx | 8 src/views/imdesign/index.jsx | 568 + src/menu/components/table/normal-table/index.jsx | 52 src/menu/components/code/sandbox/editorcode/index.jsx | 5 src/menu/components/card/cardcomponent/options.jsx | 55 src/menu/components/group/normal-group/index.jsx | 16 src/tabviews/zshare/normalTable/index.scss | 24 src/templates/sharecomponent/searchcomponent/searchform/index.jsx | 889 +- src/views/imdesign/options.jsx | 29 src/components/tabview/index.jsx | 10 src/menu/components/table/normal-table/columns/editColumn/formconfig.jsx | 9 src/mob/components/navbar/normal-navbar/menus/index.scss | 0 src/views/design/header/index.scss | 2 src/templates/zshare/transferform/index.jsx | 8 src/views/printTemplate/index.scss | 2 src/views/mobdesign/menuform/index.jsx | 51 src/menu/stylecombcontroller/index.scss | 23 src/mob/searchconfig/index.scss | 14 src/tabviews/custom/components/chart/antv-pie/index.scss | 58 src/templates/sharecomponent/searchcomponent/index.jsx | 3 src/menu/components/share/mobPagination/index.jsx | 30 src/templates/formtabconfig/dragelement/index.jsx | 5 src/templates/sharecomponent/columncomponent/index.jsx | 7 src/templates/sharecomponent/columncomponent/colspanform/index.jsx | 14 src/locales/en-US/model.js | 74 src/views/mobdesign/index.scss | 50 src/tabviews/custom/components/share/normalTable/index.jsx | 139 src/tabviews/iframe/index.jsx | 29 src/components/breadview/index.scss | 26 src/pc/components/navbar/normal-navbar/linksetting/linktable/index.jsx | 7 src/tabviews/custom/components/card/data-card/index.scss | 56 src/menu/components/search/main-search/index.scss | 9 src/utils/utils.js | 77 src/index.js | 32 src/menu/components/share/usercomponent/index.jsx | 8 src/menu/components/search/main-search/dragsearch/index.jsx | 4 src/menu/components/share/pastecomponent/index.jsx | 5 src/templates/comtableconfig/menuform/index.jsx | 2 src/templates/zshare/createfunc/index.jsx | 2 src/locales/zh-CN/main.js | 3 src/tabviews/rolemanage/index.jsx | 10 src/templates/zshare/formconfig.jsx | 350 src/templates/menuconfig/menuform/index.jsx | 30 src/menu/replaceField/index.jsx | 2 src/pc/createview/index.jsx | 6 src/mob/components/formdragelement/card.jsx | 34 src/pc/components/login/normal-login/index.jsx | 25 /dev/null | 97 src/templates/menuconfig/editsecmenu/index.jsx | 29 src/menu/modalconfig/index.jsx | 24 src/tabviews/custom/components/card/cardcellList/index.scss | 7 src/utils/option.js | 161 src/templates/sharecomponent/chartgroupcomponent/index.jsx | 7 384 files changed, 11,258 insertions(+), 6,169 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1c2efcb..8a03d23 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,15 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@ahooksjs/use-request": { + "version": "2.8.15", + "resolved": "https://registry.npmjs.org/@ahooksjs/use-request/-/use-request-2.8.15.tgz", + "integrity": "sha512-xhVaM4fyIiAMdVFuuU5i3CFUdFa/IblF+fvITVMFaUEO3w/V5tVCAF6WIA3T03n1/RPuzRkA7Ao1PFtSGtGelw==", + "requires": { + "lodash.debounce": "^4.0.8", + "lodash.throttle": "^4.1.1" + } + }, "@ant-design/colors": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-3.2.2.tgz", @@ -2284,6 +2293,55 @@ "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-4.10.1.tgz", "integrity": "sha512-ael2f1onoPF3vF7YqHGWy7NnafzGu+yp88BbFbP0ydoCP2xGSUzmZVw0zakPTC040Id+JQ9WeFczujMkDy6jYQ==" }, + "@react-spring/animated": { + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.3.1.tgz", + "integrity": "sha512-23YaERZ++BwZ8F8PxPFqrpOwp/JZun1Pj6aHZtPAU42j5LycBRasT9XMw7Eyr7zNFhT+rl3R3wFfd4WX6Ax+UA==", + "requires": { + "@react-spring/shared": "~9.3.0", + "@react-spring/types": "~9.3.0" + } + }, + "@react-spring/core": { + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.3.1.tgz", + "integrity": "sha512-8rmfmEHLHGtF1CUiXRn64YJqsXNxv2cGX8oNnBnsuoE33c48Zc34t2VIMB4R9q5zwIUCvDBGfiEenA8ZAPxqOQ==", + "requires": { + "@react-spring/animated": "~9.3.0", + "@react-spring/shared": "~9.3.0", + "@react-spring/types": "~9.3.0" + } + }, + "@react-spring/rafz": { + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.3.1.tgz", + "integrity": "sha512-fEBMCarGVl+/2kdO+g6Zig4F+3ymwmcGN8S71gb1c7Cbbxb87kviPz8EhshfIHoiLeJPGlqwcuGbxNmZbBamvA==" + }, + "@react-spring/shared": { + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.3.1.tgz", + "integrity": "sha512-jhPpxzURGo6Nty90ex1lkxmZae7w/VAbnGmb/nXcYoZwSoNR+W2aAd00iXsh2ZGz6MgoJOsc495JeG3uC7Am8A==", + "requires": { + "@react-spring/rafz": "~9.3.0", + "@react-spring/types": "~9.3.0" + } + }, + "@react-spring/types": { + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.3.1.tgz", + "integrity": "sha512-W/YMJMX35XgGGzX0gKORBTwnvQ+1loDOFN3XlZkW5fgpEY+7VkRUpPyqPWXQr3n6lHrsLmHIGdpznqZi54ACTQ==" + }, + "@react-spring/web": { + "version": "9.3.1", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.3.1.tgz", + "integrity": "sha512-sisZIgFGva/Z+xKWPSfXpukF0AP3kR9ALTxlHL87fVotMUCJX5vtH/YlVcywToEFwTHKt3MpI5Wy2M+vgVEeaw==", + "requires": { + "@react-spring/animated": "~9.3.0", + "@react-spring/core": "~9.3.0", + "@react-spring/shared": "~9.3.0", + "@react-spring/types": "~9.3.0" + } + }, "@svgr/babel-plugin-add-jsx-attribute": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz", @@ -2582,6 +2640,11 @@ "@types/istanbul-lib-report": "*" } }, + "@types/js-cookie": { + "version": "2.2.7", + "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.7.tgz", + "integrity": "sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==" + }, "@types/json-schema": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.3.tgz", @@ -2634,6 +2697,11 @@ "requires": { "reselect": "*" } + }, + "@types/resize-observer-browser": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz", + "integrity": "sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg==" }, "@types/shallowequal": { "version": "1.1.1", @@ -2714,6 +2782,19 @@ "requires": { "codemirror": "^5.50.2", "prop-types": "^15.7.2" + } + }, + "@use-gesture/core": { + "version": "10.2.4", + "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.2.4.tgz", + "integrity": "sha512-fk1LjCBj43BKb8NE05qkdtPOR0ngA7PwgvEqfFap/h+s7QHi+JTv4/mtDQ4wI9zzem+Ry5EKrHS/cVdBehI4wA==" + }, + "@use-gesture/react": { + "version": "10.2.4", + "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.2.4.tgz", + "integrity": "sha512-CbqyRj+qNbRBOGmS8OWtaOa29fxEr7bKTYHvPuMQ1wsgQDh2/DqQxbp7cFxAg6WZ8oZjppDj/EkWnw22WpIIWQ==", + "requires": { + "@use-gesture/core": "10.2.4" } }, "@webassemblyjs/ast": { @@ -3003,6 +3084,30 @@ "resolved": "https://registry.npmjs.org/agentframework/-/agentframework-0.9.22.tgz", "integrity": "sha512-LKQwcxVWbfJj+gtdHYeq+nqUIg3+NkYS7LCMZ3hMk1eZkFjJqG5RiPsXiYZV5vOQESUZwoY0e9k9Kz/GfhoVEw==" }, + "ahooks": { + "version": "2.10.14", + "resolved": "https://registry.npmjs.org/ahooks/-/ahooks-2.10.14.tgz", + "integrity": "sha512-axWa7VoAgu7bxA56dDl0CXW4rvaQmDBiov/d3tAy0x1YNYywYMKokL8TdLgJ5zO/oXGiWmG7BxlGOQGkqE/zkQ==", + "requires": { + "@ahooksjs/use-request": "^2.8.14", + "@types/js-cookie": "^2.2.6", + "dayjs": "^1.9.1", + "intersection-observer": "^0.7.0", + "js-cookie": "^2.2.1", + "lodash.debounce": "^4.0.8", + "lodash.isequal": "^4.5.0", + "lodash.throttle": "^4.1.1", + "resize-observer-polyfill": "^1.5.1", + "screenfull": "^5.0.0" + }, + "dependencies": { + "dayjs": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz", + "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==" + } + } + }, "ajv": { "version": "6.10.2", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz", @@ -3221,80 +3326,113 @@ } }, "antd-mobile": { - "version": "2.3.3", - "resolved": "https://registry.npmjs.org/antd-mobile/-/antd-mobile-2.3.3.tgz", - "integrity": "sha512-ZBnkWV+9F+CQA1pvt7zzFVTF1SlNQwJCJCnWafVvG5q8OCkOxm9uVHgsNI+v9yDpo03FABZk0Tgq6U8NaybLWw==", + "version": "5.0.0-rc.6", + "resolved": "https://registry.npmjs.org/antd-mobile/-/antd-mobile-5.0.0-rc.6.tgz", + "integrity": "sha512-D4y/Ofo8nyG1OZwpEbwPH9k4cY5DdBXhZIxZafQ58VGC8ZY792qS1ykml75KfY/57YXn0sBgdbFkoet4TiLPZg==", "requires": { - "array-tree-filter": "~2.1.0", - "babel-runtime": "6.x", - "classnames": "^2.2.1", - "normalize.css": "^7.0.0", - "rc-checkbox": "~2.0.0", - "rc-collapse": "~1.9.1", - "rc-slider": "~8.2.0", - "rc-swipeout": "~2.0.0", - "rmc-calendar": "^1.0.0", - "rmc-cascader": "~5.0.0", - "rmc-date-picker": "^6.0.8", - "rmc-dialog": "^1.0.1", - "rmc-drawer": "^0.4.11", - "rmc-feedback": "^2.0.0", - "rmc-input-number": "^1.0.0", - "rmc-list-view": "^0.11.0", - "rmc-notification": "~1.0.0", - "rmc-nuka-carousel": "~3.0.0", - "rmc-picker": "~5.0.0", - "rmc-pull-to-refresh": "~1.0.1", - "rmc-steps": "~1.0.0", - "rmc-tabs": "~1.2.0", - "rmc-tooltip": "~1.0.0" + "@react-spring/web": "^9.3.1", + "@types/resize-observer-browser": "^0.1.6", + "@use-gesture/react": "^10.2.4", + "ahooks": "^2.10.14", + "antd-mobile-icons": "^0.2.2", + "antd-mobile-v5-count": "^1.0.1", + "classnames": "^2.3.1", + "dayjs": "^1.10.7", + "lodash": "^4.17.21", + "rc-field-form": "^1.22.0", + "rc-tooltip": "^5.1.1", + "staged-components": "^1.1.2", + "use-async-memo": "^1.2.3" }, "dependencies": { - "rc-checkbox": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-2.0.3.tgz", - "integrity": "sha1-Q2qdUIlI4iSYDwU16nOLSBd6jyU=", + "@babel/runtime": { + "version": "7.16.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz", + "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==", "requires": { - "babel-runtime": "^6.23.0", + "regenerator-runtime": "^0.13.4" + } + }, + "classnames": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz", + "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==" + }, + "dayjs": { + "version": "1.10.7", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.7.tgz", + "integrity": "sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==" + }, + "lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "rc-align": { + "version": "4.0.11", + "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.11.tgz", + "integrity": "sha512-n9mQfIYQbbNTbefyQnRHZPWuTEwG1rY4a9yKlIWHSTbgwI+XUMGRYd0uJ5pE2UbrNX0WvnMBA1zJ3Lrecpra/A==", + "requires": { + "@babel/runtime": "^7.10.1", "classnames": "2.x", - "prop-types": "15.x", - "rc-util": "^4.0.4" + "dom-align": "^1.7.0", + "lodash": "^4.17.21", + "rc-util": "^5.3.0", + "resize-observer-polyfill": "^1.5.1" } }, - "rc-collapse": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-1.9.3.tgz", - "integrity": "sha512-8cG+FzudmgFCC9zRGKXJZA36zoI9Dmyjp6UDi8N80sXUch0JOpsZDxgcFzw4HPpPpK/dARtTilEe9zyuspnW0w==", + "rc-tooltip": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-5.1.1.tgz", + "integrity": "sha512-alt8eGMJulio6+4/uDm7nvV+rJq9bsfxFDCI0ljPdbuoygUscbsMYb6EQgwib/uqsXQUvzk+S7A59uYHmEgmDA==", "requires": { - "classnames": "2.x", - "css-animation": "1.x", - "prop-types": "^15.5.6", - "rc-animate": "2.x" + "@babel/runtime": "^7.11.2", + "rc-trigger": "^5.0.0" } }, - "rc-slider": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-8.2.0.tgz", - "integrity": "sha1-rjfRcUTK1g4dpurA7k/8/qCwpug=", + "rc-trigger": { + "version": "5.2.10", + "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.2.10.tgz", + "integrity": "sha512-FkUf4H9BOFDaIwu42fvRycXMAvkttph9AlbCZXssZDVzz2L+QZ0ERvfB/4nX3ZFPh1Zd+uVGr1DEDeXxq4J1TA==", "requires": { - "babel-runtime": "6.x", - "classnames": "^2.2.5", - "prop-types": "^15.5.4", - "rc-tooltip": "^3.4.2", - "rc-util": "^4.0.4", - "shallowequal": "^1.0.1", - "warning": "^3.0.0" + "@babel/runtime": "^7.11.2", + "classnames": "^2.2.6", + "rc-align": "^4.0.0", + "rc-motion": "^2.0.0", + "rc-util": "^5.5.0" } }, - "warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "rc-util": { + "version": "5.16.1", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.16.1.tgz", + "integrity": "sha512-kSCyytvdb3aRxQacS/71ta6c+kBWvM1v8/2h9d/HaNWauc3qB8pLnF20PJ8NajkNN8gb+rR1l0eWO+D4Pz+LLQ==", "requires": { - "loose-envify": "^1.0.0" + "@babel/runtime": "^7.12.5", + "react-is": "^16.12.0", + "shallowequal": "^1.1.0" } + }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "regenerator-runtime": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" } } + }, + "antd-mobile-icons": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/antd-mobile-icons/-/antd-mobile-icons-0.2.2.tgz", + "integrity": "sha512-iquIc7EsQTndk5nMv9pQQv+/OY5YnjVIPhtCFo7W7JL+Gjqzq/YJ/HO2WxUxyCgYha2NsTTNAb2vPa/M4zAi2g==" + }, + "antd-mobile-v5-count": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/antd-mobile-v5-count/-/antd-mobile-v5-count-1.0.1.tgz", + "integrity": "sha512-YGsiEDCPUDz3SzfXi6gLZn/HpeSMW+jgPc4qiYUr1fSopg3hkUie2TnooJdExgfiETHefH3Ggs58He0OVfegLA==" }, "anymatch": { "version": "2.0.0", @@ -8420,11 +8558,6 @@ } } }, - "exenv": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", - "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" - }, "exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -10555,6 +10688,11 @@ "ipaddr.js": "^1.9.0" } }, + "intersection-observer": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.7.0.tgz", + "integrity": "sha512-Id0Fij0HsB/vKWGeBe9PxeY45ttRiBmhFyyt/geBdDHBYNctMRTE3dC1U3ujzz3lap+hVXlEcVaB56kZP/eEUg==" + }, "invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -11850,6 +11988,11 @@ "version": "2.5.1", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz", "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==" + }, + "js-cookie": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz", + "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==" }, "js-levenshtein": { "version": "1.1.6", @@ -14096,11 +14239,6 @@ "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz", "integrity": "sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==" }, - "normalize.css": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-7.0.0.tgz", - "integrity": "sha1-q/sd2CRwZ04DIrU86xqvQSk45L8=" - }, "npm-run-path": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz", @@ -16314,6 +16452,51 @@ } } }, + "rc-field-form": { + "version": "1.22.0", + "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.22.0.tgz", + "integrity": "sha512-IQBNeF4i64lBNLz8HbfXqUpAnrpBtfu2xU6q/wXMfdQm1AfKjiHyMNOxmiA5ZKMOOQPi+YOSzDbictfQP94hUA==", + "requires": { + "@babel/runtime": "^7.8.4", + "async-validator": "^4.0.2", + "rc-util": "^5.8.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.16.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz", + "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "async-validator": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz", + "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ==" + }, + "rc-util": { + "version": "5.16.1", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.16.1.tgz", + "integrity": "sha512-kSCyytvdb3aRxQacS/71ta6c+kBWvM1v8/2h9d/HaNWauc3qB8pLnF20PJ8NajkNN8gb+rR1l0eWO+D4Pz+LLQ==", + "requires": { + "@babel/runtime": "^7.12.5", + "react-is": "^16.12.0", + "shallowequal": "^1.1.0" + } + }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "regenerator-runtime": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" + } + } + }, "rc-form": { "version": "2.4.11", "resolved": "https://registry.npmjs.org/rc-form/-/rc-form-2.4.11.tgz", @@ -16346,14 +16529,6 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" } - } - }, - "rc-gesture": { - "version": "0.0.22", - "resolved": "https://registry.npmjs.org/rc-gesture/-/rc-gesture-0.0.22.tgz", - "integrity": "sha512-6G6qrCE0MUTXyjh/powj91XkjRjoFL4HiJLPU5lALXHvGX+/efcUjGYUrHrrw0mwQdmrmg4POqnY/bibns+G3g==", - "requires": { - "babel-runtime": "6.x" } }, "rc-hammerjs": { @@ -16437,6 +16612,46 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } + } + }, + "rc-motion": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.4.4.tgz", + "integrity": "sha512-ms7n1+/TZQBS0Ydd2Q5P4+wJTSOrhIrwNxLXCZpR7Fa3/oac7Yi803HDALc2hLAKaCTQtw9LmQeB58zcwOsqlQ==", + "requires": { + "@babel/runtime": "^7.11.1", + "classnames": "^2.2.1", + "rc-util": "^5.2.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.16.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz", + "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==", + "requires": { + "regenerator-runtime": "^0.13.4" + } + }, + "rc-util": { + "version": "5.16.1", + "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.16.1.tgz", + "integrity": "sha512-kSCyytvdb3aRxQacS/71ta6c+kBWvM1v8/2h9d/HaNWauc3qB8pLnF20PJ8NajkNN8gb+rR1l0eWO+D4Pz+LLQ==", + "requires": { + "@babel/runtime": "^7.12.5", + "react-is": "^16.12.0", + "shallowequal": "^1.1.0" + } + }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "regenerator-runtime": { + "version": "0.13.9", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz", + "integrity": "sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==" } } }, @@ -16555,17 +16770,6 @@ "classnames": "^2.2.3", "lodash": "^4.17.5", "prop-types": "^15.5.7" - } - }, - "rc-swipeout": { - "version": "2.0.11", - "resolved": "https://registry.npmjs.org/rc-swipeout/-/rc-swipeout-2.0.11.tgz", - "integrity": "sha512-d37Lgn4RX4OOQyuA2BFo0rGlUwrmZk5q83srH3ixJ1Y1jidr2GKjgJDbNeGUVZPNfYBL91Elu6+xfVGftWf4Lg==", - "requires": { - "babel-runtime": "6.x", - "classnames": "2.x", - "rc-gesture": "~0.0.22", - "react-native-swipeout": "^2.2.2" } }, "rc-switch": { @@ -17456,16 +17660,6 @@ } } }, - "react-native-swipeout": { - "version": "2.3.6", - "resolved": "https://registry.npmjs.org/react-native-swipeout/-/react-native-swipeout-2.3.6.tgz", - "integrity": "sha512-t9suUCspzck4vp2pWggWe0frS/QOtX6yYCawHnEes75A7dZCEE74bxX2A1bQzGH9cUMjq6xsdfC94RbiDKIkJg==", - "requires": { - "create-react-class": "^15.6.0", - "prop-types": "^15.5.10", - "react-tween-state": "^0.1.5" - } - }, "react-redux": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.1.1.tgz", @@ -17535,15 +17729,6 @@ "json2mq": "^0.2.0", "lodash.debounce": "^4.0.8", "resize-observer-polyfill": "^1.5.0" - } - }, - "react-tween-state": { - "version": "0.1.5", - "resolved": "https://registry.npmjs.org/react-tween-state/-/react-tween-state-0.1.5.tgz", - "integrity": "sha1-6YsGZVHvuTy5LdG+FJlcLj3q4zk=", - "requires": { - "raf": "^3.1.0", - "tween-functions": "^1.0.1" } }, "reactcss": { @@ -18027,64 +18212,6 @@ "inherits": "^2.0.1" } }, - "rmc-align": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/rmc-align/-/rmc-align-1.0.0.tgz", - "integrity": "sha512-3gEa5/+hqqoEVoeQ25KoRc8DOsXIdSaVpaBq1zQFaV941LR3xvZIRTlxTDT/IagYwoGM1KZea/jd7cNMYP34Rg==", - "requires": { - "babel-runtime": "6.x", - "dom-align": "1.x", - "rc-util": "4.x" - } - }, - "rmc-calendar": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/rmc-calendar/-/rmc-calendar-1.1.4.tgz", - "integrity": "sha512-xxQZaPFDnpHt4IFO8mukYrXSgC1W8LcNVp+EoX4iyeOJFimungOKB/iP5/cy+st8yXq8lUgk9TXsHNtM6Xo6ZA==", - "requires": { - "babel-runtime": "^6.26.0", - "rc-animate": "^2.4.4", - "rmc-date-picker": "^6.0.8" - } - }, - "rmc-cascader": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/rmc-cascader/-/rmc-cascader-5.0.3.tgz", - "integrity": "sha512-PxDhMjWViDdG4SMZqoXtAthGwgDyYnyxxZEE17IDDYsiCHpWtOhoIL8nsI+/hZ212UT/XF2LpqCsOlMoJiYk+w==", - "requires": { - "array-tree-filter": "2.1.x", - "babel-runtime": "6.x", - "rmc-picker": "~5.0.0" - } - }, - "rmc-date-picker": { - "version": "6.0.10", - "resolved": "https://registry.npmjs.org/rmc-date-picker/-/rmc-date-picker-6.0.10.tgz", - "integrity": "sha512-/9+I6lm3EDEl6M7862V6++zFuxwsM0UEq8wSHbotYIPPmyB/65gx1cviblghOv2QfB0O9+U2w3qEJlRP/WsMrA==", - "requires": { - "babel-runtime": "6.x", - "rmc-picker": "~5.0.0" - } - }, - "rmc-dialog": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/rmc-dialog/-/rmc-dialog-1.1.1.tgz", - "integrity": "sha512-28aJqtPTX6v13Z/aU1WBy1AFIXkE74PxZXde7JvtEIy9hQDTjH8fqOi822BpzAbXCyNE7jF9iFomy3H2ClsDJA==", - "requires": { - "babel-runtime": "6.x", - "rc-animate": "2.x" - } - }, - "rmc-drawer": { - "version": "0.4.11", - "resolved": "https://registry.npmjs.org/rmc-drawer/-/rmc-drawer-0.4.11.tgz", - "integrity": "sha512-YfB9XEJ8iM0MMuLWAK4313uOxSM8NAljC8Cqun1KamXutglYTuRviUuTLNSOzV8HHPp5kNpsVduvPCGLWXvThw==", - "requires": { - "babel-runtime": "6.x", - "classnames": "^2.2.4", - "prop-types": "^15.5.10" - } - }, "rmc-feedback": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/rmc-feedback/-/rmc-feedback-2.0.0.tgz", @@ -18092,118 +18219,6 @@ "requires": { "babel-runtime": "6.x", "classnames": "^2.2.5" - } - }, - "rmc-input-number": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/rmc-input-number/-/rmc-input-number-1.0.5.tgz", - "integrity": "sha512-prPkEtoOVde77GnEnEaBeWjBobMOPgGqU5bd0gxfp1kt1pUN740mMpVAcH7uxpJjVfmw+kuGWtiz4S7CueagSg==", - "requires": { - "babel-runtime": "6.x", - "classnames": "^2.2.0", - "rmc-feedback": "^2.0.0" - } - }, - "rmc-list-view": { - "version": "0.11.5", - "resolved": "https://registry.npmjs.org/rmc-list-view/-/rmc-list-view-0.11.5.tgz", - "integrity": "sha512-eMOC5394tLNawcdEEhF7boMpQgpjJGDdL5lS+LblAWdBec7Q4EYkUdnrKNbt+O9k5RGM6nSLAGZK5oB4FN85Lg==", - "requires": { - "babel-runtime": "6.x", - "classnames": "^2.2.5", - "fbjs": "^0.8.3", - "prop-types": "^15.5.8", - "warning": "^3.0.0", - "zscroller": "~0.4.0" - }, - "dependencies": { - "warning": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", - "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", - "requires": { - "loose-envify": "^1.0.0" - } - } - } - }, - "rmc-notification": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/rmc-notification/-/rmc-notification-1.0.0.tgz", - "integrity": "sha512-9sPxjltFvtRLt2v312Hu7OXwk53pHkBYgINRDmnJ3A5NF1qtJeCCcdN0Xr0fzJ6sbQvtGju822tWHdzYA9u7Vw==", - "requires": { - "babel-runtime": "6.x", - "classnames": "2.x", - "prop-types": "^15.5.8", - "rc-animate": "2.x", - "rc-util": "^4.0.4" - } - }, - "rmc-nuka-carousel": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/rmc-nuka-carousel/-/rmc-nuka-carousel-3.0.1.tgz", - "integrity": "sha512-w2EPTERMUUZqcUSKFuejjin7xsMlhrLrtS0A/igTXpFJGq3kemDKcRi7q3pSYDuZBHYBl5iV4UqsLLkjdFtrYA==", - "requires": { - "exenv": "^1.2.0", - "raf": "^3.3.2" - } - }, - "rmc-picker": { - "version": "5.0.10", - "resolved": "https://registry.npmjs.org/rmc-picker/-/rmc-picker-5.0.10.tgz", - "integrity": "sha512-KZ70+WjcaZHnG5GyCxWCPFWAZ12s6NqyrbW73LeqH0WEqaTMMs0sOrk2f4mQAZ/CGT0XcFN6VZLw7Ozoxfn7LA==", - "requires": { - "babel-runtime": "6.x", - "classnames": "^2.2.6", - "rmc-dialog": "^1.1.1", - "rmc-feedback": "^2.0.0" - } - }, - "rmc-pull-to-refresh": { - "version": "1.0.12", - "resolved": "https://registry.npmjs.org/rmc-pull-to-refresh/-/rmc-pull-to-refresh-1.0.12.tgz", - "integrity": "sha512-OQPRY5RzhRNi0amyvwIrENqQHQRJh7bF8Hdcn/wqTSKsC5Cn1pGJ4bNG1+iL9w1N+PoKt+ESvL2ap8fVqwuH1w==", - "requires": { - "babel-runtime": "6.x", - "classnames": "^2.2.5" - } - }, - "rmc-steps": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/rmc-steps/-/rmc-steps-1.0.0.tgz", - "integrity": "sha512-VuQEPC2P4PQ7DdZDCIbGfFTfzzTwLAyey+fSJUolc4qheIE7bN4oogH2xDZurM2TTpAQHg2aMMv4E6JYyVbUqA==", - "requires": { - "babel-runtime": "^6.23.0", - "classnames": "^2.2.3" - } - }, - "rmc-tabs": { - "version": "1.2.29", - "resolved": "https://registry.npmjs.org/rmc-tabs/-/rmc-tabs-1.2.29.tgz", - "integrity": "sha512-wiJS9WSJi9JH9GQO+FqncX+zaHP31qHa/S8nDW9UXUx0qbCX294QcJEnvfB+WmsfUws7rXjs6sOQp5EDiObnHg==", - "requires": { - "babel-runtime": "6.x", - "rc-gesture": "~0.0.18" - } - }, - "rmc-tooltip": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/rmc-tooltip/-/rmc-tooltip-1.0.1.tgz", - "integrity": "sha512-fSDArf2BlMVrHExmBiqb2TkCRJHshvXFJQ/7tMraLellwaJLNiwrxtWpW329k3S+zTtoVG8UxFS1TjBGEsMzRg==", - "requires": { - "babel-runtime": "6.x", - "rmc-trigger": "1.x" - } - }, - "rmc-trigger": { - "version": "1.0.12", - "resolved": "https://registry.npmjs.org/rmc-trigger/-/rmc-trigger-1.0.12.tgz", - "integrity": "sha512-AccQniX7PX7Pm8hBhHEsnf3JU6CA61Xc7fAt2WbO+oXrGaI/jqN8C3COhhOXG54S5iTOjLS26j858zshwAxR9A==", - "requires": { - "babel-runtime": "6.x", - "rc-animate": "2.x", - "rc-util": "4.x", - "rmc-align": "~1.0.0" } }, "rsvp": { @@ -18376,6 +18391,11 @@ "ajv-errors": "^1.0.0", "ajv-keywords": "^3.1.0" } + }, + "screenfull": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.2.0.tgz", + "integrity": "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==" }, "scss-tokenizer": { "version": "0.2.3", @@ -19221,6 +19241,11 @@ "type-fest": "^0.7.1" } }, + "staged-components": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/staged-components/-/staged-components-1.1.2.tgz", + "integrity": "sha512-Fzf0qhYau/zn1pEsZSZml0b8vvGvdC+xo71jM0TE8vtM/2VjRCGLWaPb3vH3csaLv4qcoXVMMcRIeSO+HTHehQ==" + }, "static-extend": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz", @@ -19935,11 +19960,6 @@ "safe-buffer": "^5.0.1" } }, - "tween-functions": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz", - "integrity": "sha1-GuOlDnxguz3vd06scHrLynO7w/8=" - }, "tweetnacl": { "version": "0.14.5", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", @@ -20452,6 +20472,11 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==" + }, + "use-async-memo": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/use-async-memo/-/use-async-memo-1.2.3.tgz", + "integrity": "sha512-AjZ1Wy1vfOSlaxohqoLIpauV+jwph/p0N72PBzxeEcjrZ4Mf/4o1Vav4bLaAPYuHLJZo+4M/4TIcAk7XC6H98g==" }, "use-subscription": { "version": "1.4.1", @@ -21369,14 +21394,6 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" } - } - }, - "zscroller": { - "version": "0.4.8", - "resolved": "https://registry.npmjs.org/zscroller/-/zscroller-0.4.8.tgz", - "integrity": "sha512-G5NiNLKx2+QhhvZi2yV1jjVXY50otktxkseX2hG2N/eixohOUk0AY8ZpbAxNqS9oJS/NxItCsowupy2tsXxAMw==", - "requires": { - "babel-runtime": "6.x" } } } diff --git a/package.json b/package.json index 3cd5c8f..7ceec02 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@typescript-eslint/parser": "1.13.0", "@uiw/react-codemirror": "^2.2.1", "antd": "^3.26.20", - "antd-mobile": "^2.3.3", + "antd-mobile": "^5.0.0-rc.6", "axios": "^0.19.0", "babel-eslint": "10.0.2", "babel-jest": "^24.8.0", diff --git a/public/admin.html b/public/admin.html index 41254bc..7a8f45d 100644 --- a/public/admin.html +++ b/public/admin.html @@ -22,10 +22,12 @@ } else { var url = window.location.href.split(/(index.html)+/ig)[0] var appPort = 'admin/index.html' - if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { - appPort = 'mob/index.html' - } else if (config.defaultApp) { - appPort = 'pc/index.html' + if (config.defaultApp) { + if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { + appPort = 'mob/index.html#/index' + } else { + appPort = 'pc/index.html#/index' + } } window.location.replace(url + appPort) } diff --git a/public/options.json b/public/options.json index 3a794e0..20cd20a 100644 --- a/public/options.json +++ b/public/options.json @@ -6,7 +6,7 @@ "externalDatabase": "mkdata_kress_test", "lineColor": "", "filter": "false", - "defaultApp": "", + "defaultApp": "mkindustry", "defaultLang": "zh-CN", "WXAppID": "", "debugger": false, diff --git a/src/assets/css/viewstyle.scss b/src/assets/css/viewstyle.scss index 83b2b59..588eb0a 100644 --- a/src/assets/css/viewstyle.scss +++ b/src/assets/css/viewstyle.scss @@ -82,7 +82,7 @@ .header-setting span { color: $font1; } - > .header-collapse i { + > .header-collapse .anticon { color: $font1; } > .header-menu { @@ -196,41 +196,45 @@ } } .custom-data-card-box, .custom-prop-card-box { - .data-zoom.radio, .data-zoom.checkbox { - .card-row-list > .ant-col:not(.active):not(.backFont):not(.font):not(.selected):not(.extend-card):hover > .card-item-box { - border-color: $color4 !important; - box-shadow: 0 0 4px $color4 !important; + .data-zoom.radio.active, .data-zoom.checkbox.active { + .mk-card:not(.active):not(.selected):hover { + > .card-item-box { + border-color: $color4 !important; + box-shadow: 0 0 4px $color4 !important; + } } - } - .card-row-list.radio, .card-row-list.checkbox { - >.ant-col:not(.active):not(.backFont):not(.font):not(.selected):hover { - >.card-item-box { + .mk-card.active { + > .card-item-box { + border-color: $color6!important; + box-shadow: 0 0 4px $color6!important; + } + } + .mk-card.selected { + > .card-item-box { border-color: $color4!important; box-shadow: 0 0 4px $color4!important; } } } - .card-row-list { - >.active >.card-item-box { - border-color: $color6!important; - box-shadow: 0 0 4px $color6!important; - } - >.backFont >.card-item-box { - border-color: $color6!important; - background-color: $color1!important; - .ant-mk-text { - color: $color6; + .data-zoom.radio.backFont, .data-zoom.checkbox.backFont { + .mk-card:hover, .mk-card.active, .mk-card.selected { + > .card-item-box { + border-color: $color6!important; + background-color: $color1!important; + .ant-mk-text, .ant-mk-date { + color: $color6; + } } } - >.font >.card-item-box { - border-color: $color6!important; - .ant-mk-text { - color: $color6; + } + .data-zoom.radio.font, .data-zoom.checkbox.font { + .mk-card:hover, .mk-card.active, .mk-card.selected { + > .card-item-box { + border-color: $color6!important; + .ant-mk-text, .ant-mk-date { + color: $color6; + } } - } - >.selected >.card-item-box { - border-color: $color4!important; - box-shadow: 0 0 4px $color4!important; } } } diff --git a/src/assets/img/back.jpg b/src/assets/img/back.jpg new file mode 100644 index 0000000..d06b32b --- /dev/null +++ b/src/assets/img/back.jpg Binary files differ diff --git a/src/assets/mobimg/singlesearch.png b/src/assets/mobimg/singlesearch.png new file mode 100644 index 0000000..a264877 --- /dev/null +++ b/src/assets/mobimg/singlesearch.png Binary files differ diff --git a/src/assets/mobimg/slider-thumb.svg b/src/assets/mobimg/slider-thumb.svg new file mode 100644 index 0000000..b3d5a46 --- /dev/null +++ b/src/assets/mobimg/slider-thumb.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g transform="translate(-604.000000, -656.000000)" fill="#999999"> + <g transform="translate(592.000000, 644.000000)"> + <g transform="translate(12.000000, 12.000000)"> + <polygon points="0 3.33333333 2.22222222 3.33333333 2.22222222 17.7777778 0 17.7777778"></polygon> + <polygon points="17.7777778 3.33333333 20 3.33333333 20 17.7777778 17.7777778 17.7777778"></polygon> + <path d="M10.8888889,0 L9.11111111,0 C8.98888889,0 8.88888889,0.107142857 8.88888889,0.238095238 L8.88888889,19.7619048 C8.88888889,19.8928571 8.98888889,20 9.11111111,20 L10.8888889,20 C11.0111111,20 11.1111111,19.8928571 11.1111111,19.7619048 L11.1111111,0.238095238 C11.1111111,0.107142857 11.0111111,0 10.8888889,0 Z"></path> + </g> + </g> + </g> + </g> +</svg> diff --git a/src/components/404/index.jsx b/src/components/404/index.jsx index 4f3ac7d..3177018 100644 --- a/src/components/404/index.jsx +++ b/src/components/404/index.jsx @@ -1,10 +1,6 @@ -import React, {Component} from 'react' +import React, { Component } from 'react' import Lostsvg from '@/components/lostsvg' -import zhCN from '@/locales/zh-CN/main.js' -import enUS from '@/locales/en-US/main.js' import './index.scss' - -const _dict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS class NotFound extends Component { render () { @@ -15,7 +11,7 @@ <Lostsvg /> </div> <div className="ant-result-title">404</div> - <div className="ant-result-subtitle">{this.props.msg ? this.props.msg : _dict['main.view.notFound']}</div> + <div className="ant-result-subtitle">{this.props.msg ? this.props.msg : '鎶辨瓑锛屾偍璁块棶鐨勯〉闈笉瀛樺湪锛岃鑱旂郴绠$悊鍛樸��'}</div> </div> </main> ) diff --git a/src/components/breadview/index.jsx b/src/components/breadview/index.jsx index a772bb6..9f1a97d 100644 --- a/src/components/breadview/index.jsx +++ b/src/components/breadview/index.jsx @@ -1,14 +1,13 @@ import React, {Component} from 'react' import {connect} from 'react-redux' -import { BackTop, Breadcrumb, Icon, notification} from 'antd' +import { BackTop, Breadcrumb, notification} from 'antd' +import { HomeOutlined, RightOutlined, RedoOutlined } from '@ant-design/icons' import moment from 'moment' import 'moment/locale/zh-cn' import asyncComponent from '@/utils/asyncLoadComponent' import NotFount from '@/components/404' import options from '@/store/options.js' -import mzhCN from '@/locales/zh-CN/main.js' -import menUS from '@/locales/en-US/main.js' import MKEmitter from '@/utils/events.js' import { initActionPermission } from '@/store/action' import Api from '@/api' @@ -34,7 +33,6 @@ class BreadView extends Component { state = { tabview: null, // 鏍囩 - dict: sessionStorage.getItem('lang') !== 'en-US' ? mzhCN : menUS, hasNavBar: window.GLOB.navBar === 'linkage_navigation' } @@ -171,17 +169,17 @@ <section id="mk-breadview-wrap" className="mk-breadview-wrap"> {hasNavBar && tabview ? <Breadcrumb separator=""> <Breadcrumb.Item> - <Icon type="home" onClick={this.gotoHome} /> + <HomeOutlined onClick={this.gotoHome} /> </Breadcrumb.Item> {tabview.ParentNames && tabview.ParentNames[0] ? <Breadcrumb.Item>{tabview.ParentNames[0]}</Breadcrumb.Item> : null} {tabview.ParentNames && tabview.ParentNames[0] ? - <Breadcrumb.Separator children={<Icon type="right" />} /> : null} + <Breadcrumb.Separator children={<RightOutlined />} /> : null} {tabview.ParentNames && tabview.ParentNames[1] ? <Breadcrumb.Item>{tabview.ParentNames[1]}</Breadcrumb.Item> : null} {tabview.ParentNames && tabview.ParentNames[1] ? - <Breadcrumb.Separator children={<Icon type="right" />} /> : null} - <Breadcrumb.Item><Icon type="redo" onClick={this.refreshTabview}/>{tabview.MenuName}</Breadcrumb.Item> + <Breadcrumb.Separator children={<RightOutlined />} /> : null} + <Breadcrumb.Item><RedoOutlined onClick={this.refreshTabview}/>{tabview.MenuName}</Breadcrumb.Item> </Breadcrumb> : null} {tabview ? this.selectcomponent(tabview) : null} <BackTop> diff --git a/src/components/breadview/index.scss b/src/components/breadview/index.scss index 6abee24..52d908d 100644 --- a/src/components/breadview/index.scss +++ b/src/components/breadview/index.scss @@ -35,32 +35,6 @@ border: 0; margin-top: 16px; } - .main-copy { - position: fixed; - z-index: 20; - bottom: 65px; - right: 30px; - width: 40px; - height: 40px; - i { - font-size: 18px; - } - } - .main-copy.ifr-copy { - bottom: 65px; - right: 40px; - width: 30px; - height: 32px; - border: 2px solid #687991; - opacity: 0.6; - i { - font-size: 14px; - color: #687991; - } - } - .main-copy.ifr-copy:hover { - opacity: 1; - } .ant-back-top { bottom: 10px; right: 20px; diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx index c086846..dca77b8 100644 --- a/src/components/header/index.jsx +++ b/src/components/header/index.jsx @@ -4,7 +4,8 @@ import {connect} from 'react-redux' import { is, fromJS } from 'immutable' import moment from 'moment' -import { Dropdown, Menu, Icon, Modal, Form, notification, Switch, Input } from 'antd' +import { Dropdown, Menu, Modal, Form, notification, Switch, Input } from 'antd' +import { SearchOutlined, DownOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons' import { toggleCollapse, @@ -701,7 +702,7 @@ <header className="header-container ant-menu-dark" id="main-header-container"> <div className={'header-logo ' + (collapse && navBar !== 'topmenu' ? 'collapse' : '')}><img src={this.state.logourl} alt=""/></div> <div className={'header-collapse ' + (collapse && navBar !== 'topmenu' ? 'collapse' : '')}> - {navBar !== 'topmenu' ? <Icon type={collapse ? 'menu-unfold' : 'menu-fold'} onClick={this.handleCollapse}/> : null} + {navBar !== 'topmenu' ? (collapse ? <MenuUnfoldOutlined onClick={this.handleCollapse}/> : <MenuFoldOutlined onClick={this.handleCollapse}/>) : null} </div> {/* 姝e父鑿滃崟 */} {navBar !== 'topmenu' && menulist ? @@ -801,7 +802,7 @@ <div> <img src={this.state.avatar || avatar} alt=""/> <span> - <span className="username">{this.state.userName}</span> <Icon type="down" /> + <span className="username">{this.state.userName}</span> <DownOutlined /> </span> </div> </Dropdown> @@ -838,7 +839,7 @@ </div> </div> } trigger={['click']} className="search-menu" placement="bottomRight" onVisibleChange={this.dropdownMenuChange}> - <Icon className="search-menu" type="search" /> + <SearchOutlined className="search-menu" /> </Dropdown> : null } {/* 淇敼瀵嗙爜 */} diff --git a/src/components/header/index.scss b/src/components/header/index.scss index 6ddedb5..78fb275 100644 --- a/src/components/header/index.scss +++ b/src/components/header/index.scss @@ -35,7 +35,7 @@ padding-left: 10px; margin: 0 10px; transition: padding-left 0.15s; - i { + .anticon { cursor: pointer; position: relative; top: 3px; diff --git a/src/components/header/loginform.jsx b/src/components/header/loginform.jsx index 8057388..be94096 100644 --- a/src/components/header/loginform.jsx +++ b/src/components/header/loginform.jsx @@ -1,6 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Icon, Input, Checkbox } from 'antd' +import { Form, Input, Checkbox } from 'antd' +import { UserOutlined, LockOutlined } from '@ant-design/icons' + import zhCN from '@/locales/zh-CN/login.js' import enUS from '@/locales/en-US/login.js' import './index.scss' @@ -89,20 +91,20 @@ return ( <Form style={{margin: '0px 10px'}}> - <Form.Item> + <Form.Item style={{marginBottom: '0px', height: '60px'}}> {getFieldDecorator('username', { rules: [{ required: true, message: this.state.dict['login.username.empty'] }], initialValue: username, })( <Input - prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} + prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }}/>} placeholder={this.state.dict['login.username']} autoComplete="off" onPressEnter={(e) => {this.handleSubmit(e, 'password')}} /> )} </Form.Item> - <Form.Item style={{marginBottom: '15px'}}> + <Form.Item style={{marginBottom: '0px', height: '55px'}}> {getFieldDecorator('password', { initialValue: password, rules: [ @@ -111,7 +113,7 @@ message: this.state.dict['login.password.empty'], } ] - })(<Input.Password onPressEnter={(e) => {this.handleSubmit(e, 'username')}} placeholder={this.state.dict['login.password']} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} />)} + })(<Input.Password onPressEnter={(e) => {this.handleSubmit(e, 'username')}} placeholder={this.state.dict['login.password']} prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />)} </Form.Item> <Form.Item style={{marginBottom: '10px'}}> {getFieldDecorator('remember', { diff --git a/src/components/header/resetpwd/index.jsx b/src/components/header/resetpwd/index.jsx index 70a6cc2..5db93ce 100644 --- a/src/components/header/resetpwd/index.jsx +++ b/src/components/header/resetpwd/index.jsx @@ -91,7 +91,7 @@ }, wrapperCol: { xs: { span: 24 }, - sm: { span: 16 } + sm: { span: 14 } } } diff --git a/src/components/mk-icon/index.jsx b/src/components/mk-icon/index.jsx new file mode 100644 index 0000000..eae7087 --- /dev/null +++ b/src/components/mk-icon/index.jsx @@ -0,0 +1,478 @@ +import React, {Component} from 'react' +import { + ArrowUpOutlined, + ArrowDownOutlined, + ArrowLeftOutlined, + ArrowRightOutlined, + DownOutlined, + UpOutlined, + LeftOutlined, + RightOutlined, + UploadOutlined, + DownloadOutlined, + StepBackwardOutlined, + StepForwardOutlined, + FastBackwardOutlined, + FastForwardOutlined, + DoubleRightOutlined, + DoubleLeftOutlined, + ForwardOutlined, + BackwardOutlined, + RollbackOutlined, + EnterOutlined, + RetweetOutlined, + SwapOutlined, + SwapLeftOutlined, + SwapRightOutlined, + PlayCircleOutlined, + LoginOutlined, + LogoutOutlined, + FullscreenOutlined, + FullscreenExitOutlined, + QuestionOutlined, + QuestionCircleOutlined, + PlusOutlined, + PlusCircleOutlined, + PauseCircleOutlined, + MinusOutlined, + MinusCircleOutlined, + InfoCircleOutlined, + ExclamationCircleOutlined, + CloseOutlined, + CloseCircleOutlined, + CheckOutlined, + CheckCircleOutlined, + ClockCircleOutlined, + WarningOutlined, + StopOutlined, + EditOutlined, + FormOutlined, + CopyOutlined, + ScissorOutlined, + DeleteOutlined, + SnippetsOutlined, + HighlightOutlined, + RedoOutlined, + UndoOutlined, + ZoomInOutlined, + ZoomOutOutlined, + DashOutlined, + SortAscendingOutlined, + SortDescendingOutlined, + AreaChartOutlined, + PieChartOutlined, + BarChartOutlined, + DotChartOutlined, + LineChartOutlined, + RadarChartOutlined, + FallOutlined, + RiseOutlined, + StockOutlined, + AppleOutlined, + DingdingOutlined, + WeiboOutlined, + WechatOutlined, + TaobaoOutlined, + QqOutlined, + AlipayOutlined, + UserOutlined, + AccountBookOutlined, + AlertOutlined, + ApiOutlined, + AppstoreOutlined, + AudioOutlined, + BankOutlined, + BellOutlined, + ScanOutlined, + BugOutlined, + CalendarOutlined, + CameraOutlined, + CloudOutlined, + CompassOutlined, + CreditCardOutlined, + CustomerServiceOutlined, + DashboardOutlined, + EllipsisOutlined, + MoreOutlined, + DatabaseOutlined, + DislikeOutlined, + EnvironmentOutlined, + EyeOutlined, + EyeInvisibleOutlined, + FileOutlined, + FilterOutlined, + FireOutlined, + FlagOutlined, + FolderAddOutlined, + FolderOutlined, + FolderOpenOutlined, + HeartOutlined, + HomeOutlined, + HourglassOutlined, + IdcardOutlined, + LikeOutlined, + LockOutlined, + MailOutlined, + MessageOutlined, + MobileOutlined, + PhoneOutlined, + PictureOutlined, + RedEnvelopeOutlined, + SettingOutlined, + ToolOutlined, + SmileOutlined, + StarOutlined, + ThunderboltOutlined, + UnlockOutlined, + BarcodeOutlined, + KeyOutlined, + ManOutlined, + WomanOutlined, + TeamOutlined, + PoweroffOutlined, + SearchOutlined, + ShoppingCartOutlined, + LinkOutlined, + AimOutlined, + ApartmentOutlined, + AppstoreAddOutlined, + AudioMutedOutlined, + AuditOutlined, + BarsOutlined, + BlockOutlined, + BookOutlined, + BulbOutlined, + BorderOutlined, + NumberOutlined, + BranchesOutlined, + BuildOutlined, + CalculatorOutlined, + CarOutlined, + CarryOutOutlined, + CiOutlined, + ClearOutlined, + CloudDownloadOutlined, + CloudServerOutlined, + CloudSyncOutlined, + CloudUploadOutlined, + ClusterOutlined, + CodeOutlined, + CoffeeOutlined, + CommentOutlined, + CompressOutlined, + ControlOutlined, + CopyrightOutlined, + CrownOutlined, + DeleteColumnOutlined, + DeleteRowOutlined, + DeliveredProcedureOutlined, + DeploymentUnitOutlined, + DesktopOutlined, + DisconnectOutlined, + DollarOutlined, + EuroOutlined, + ExpandOutlined, + ExportOutlined, + FileAddOutlined, + FileDoneOutlined, + FileImageOutlined, + FilePdfOutlined, + FilePptOutlined, + FileTextOutlined, + FileUnknownOutlined, + FileWordOutlined, + FileZipOutlined, + ForkOutlined, + FrownOutlined, + FunnelPlotOutlined, + GatewayOutlined, + GifOutlined, + GiftOutlined, + GlobalOutlined, + GoldOutlined, + ImportOutlined, + LaptopOutlined, + LoadingOutlined, + MedicineBoxOutlined, + MehOutlined, + MenuOutlined, + PaperClipOutlined, + PartitionOutlined, + PayCircleOutlined, + PrinterOutlined, + PushpinOutlined, + QrcodeOutlined, + ReloadOutlined, + RestOutlined, + RobotOutlined, + RotateLeftOutlined, + RotateRightOutlined, + SafetyCertificateOutlined, + SaveOutlined, + SendOutlined, + ShakeOutlined, + ShareAltOutlined, + ShopOutlined, + ShoppingOutlined, + SoundOutlined, + SyncOutlined, + TagOutlined, + TagsOutlined, + TrademarkOutlined, + TrophyOutlined, + UsbOutlined, + UserAddOutlined, + UserDeleteOutlined, + UserSwitchOutlined, + VideoCameraOutlined, + WifiOutlined, + TableOutlined +} from '@ant-design/icons' + +const MkIcons = { + 'arrow-up': (props) => <ArrowUpOutlined {...props} />, + 'arrow-down': (props) => <ArrowDownOutlined {...props} />, + 'arrow-left': (props) => <ArrowLeftOutlined {...props} />, + 'arrow-right': (props) => <ArrowRightOutlined {...props} />, + 'down': (props) => <DownOutlined {...props} />, + 'up': (props) => <UpOutlined {...props} />, + 'left': (props) => <LeftOutlined {...props} />, + 'right': (props) => <RightOutlined {...props} />, + 'upload': (props) => <UploadOutlined {...props} />, + 'download': (props) => <DownloadOutlined {...props} />, + 'step-backward': (props) => <StepBackwardOutlined {...props} />, + 'step-forward': (props) => <StepForwardOutlined {...props} />, + 'fast-backward': (props) => <FastBackwardOutlined {...props} />, + 'fast-forward': (props) => <FastForwardOutlined {...props} />, + 'double-right': (props) => <DoubleRightOutlined {...props} />, + 'double-left': (props) => <DoubleLeftOutlined {...props} />, + 'forward': (props) => <ForwardOutlined {...props} />, + 'backward': (props) => <BackwardOutlined {...props} />, + 'rollback': (props) => <RollbackOutlined {...props} />, + 'enter': (props) => <EnterOutlined {...props} />, + 'retweet': (props) => <RetweetOutlined {...props} />, + 'swap': (props) => <SwapOutlined {...props} />, + 'swap-left': (props) => <SwapLeftOutlined {...props} />, + 'swap-right': (props) => <SwapRightOutlined {...props} />, + 'play-circle': (props) => <PlayCircleOutlined {...props} />, + 'login': (props) => <LoginOutlined {...props} />, + 'logout': (props) => <LogoutOutlined {...props} />, + 'fullscreen': (props) => <FullscreenOutlined {...props} />, + 'fullscreen-exit': (props) => <FullscreenExitOutlined {...props} />, + + 'question': (props) => <QuestionOutlined {...props} />, + 'question-circle': (props) => <QuestionCircleOutlined {...props} />, + 'plus': (props) => <PlusOutlined {...props} />, + 'plus-circle': (props) => <PlusCircleOutlined {...props} />, + 'pause-circle': (props) => <PauseCircleOutlined {...props} />, + 'minus': (props) => <MinusOutlined {...props} />, + 'minus-circle': (props) => <MinusCircleOutlined {...props} />, + 'info-circle': (props) => <InfoCircleOutlined {...props} />, + 'exclamation-circle': (props) => <ExclamationCircleOutlined {...props} />, + 'close': (props) => <CloseOutlined {...props} />, + 'close-circle': (props) => <CloseCircleOutlined {...props} />, + 'check': (props) => <CheckOutlined {...props} />, + 'check-circle': (props) => <CheckCircleOutlined {...props} />, + 'clock-circle': (props) => <ClockCircleOutlined {...props} />, + 'warning': (props) => <WarningOutlined {...props} />, + 'stop': (props) => <StopOutlined {...props} />, + + 'edit': (props) => <EditOutlined {...props} />, + 'form': (props) => <FormOutlined {...props} />, + 'copy': (props) => <CopyOutlined {...props} />, + 'scissor': (props) => <ScissorOutlined {...props} />, + 'delete': (props) => <DeleteOutlined {...props} />, + 'snippets': (props) => <SnippetsOutlined {...props} />, + 'highlight': (props) => <HighlightOutlined {...props} />, + 'redo': (props) => <RedoOutlined {...props} />, + 'undo': (props) => <UndoOutlined {...props} />, + 'zoom-in': (props) => <ZoomInOutlined {...props} />, + 'zoom-out': (props) => <ZoomOutOutlined {...props} />, + 'dash': (props) => <DashOutlined {...props} />, + 'sort-ascending': (props) => <SortAscendingOutlined {...props} />, + 'sort-descending': (props) => <SortDescendingOutlined {...props} />, + + 'area-chart': (props) => <AreaChartOutlined {...props} />, + 'pie-chart': (props) => <PieChartOutlined {...props} />, + 'bar-chart': (props) => <BarChartOutlined {...props} />, + 'dot-chart': (props) => <DotChartOutlined {...props} />, + 'line-chart': (props) => <LineChartOutlined {...props} />, + 'radar-chart': (props) => <RadarChartOutlined {...props} />, + 'fall': (props) => <FallOutlined {...props} />, + 'rise': (props) => <RiseOutlined {...props} />, + 'stock': (props) => <StockOutlined {...props} />, + + 'apple': (props) => <AppleOutlined {...props} />, + 'dingding': (props) => <DingdingOutlined {...props} />, + 'weibo': (props) => <WeiboOutlined {...props} />, + 'wechat': (props) => <WechatOutlined {...props} />, + 'taobao': (props) => <TaobaoOutlined {...props} />, + 'qq': (props) => <QqOutlined {...props} />, + 'alipay': (props) => <AlipayOutlined {...props} />, + + 'user': (props) => <UserOutlined {...props} />, + 'account-book': (props) => <AccountBookOutlined {...props} />, + 'alert': (props) => <AlertOutlined {...props} />, + 'api': (props) => <ApiOutlined {...props} />, + 'appstore': (props) => <AppstoreOutlined {...props} />, + 'audio': (props) => <AudioOutlined {...props} />, + 'bank': (props) => <BankOutlined {...props} />, + 'bell': (props) => <BellOutlined {...props} />, + 'scan': (props) => <ScanOutlined {...props} />, + 'bug': (props) => <BugOutlined {...props} />, + 'calendar': (props) => <CalendarOutlined {...props} />, + 'camera': (props) => <CameraOutlined {...props} />, + 'cloud': (props) => <CloudOutlined {...props} />, + 'compass': (props) => <CompassOutlined {...props} />, + 'credit-card': (props) => <CreditCardOutlined {...props} />, + 'customer-service': (props) => <CustomerServiceOutlined {...props} />, + 'dashboard': (props) => <DashboardOutlined {...props} />, + 'ellipsis': (props) => <EllipsisOutlined {...props} />, + 'more': (props) => <MoreOutlined {...props} />, + 'database': (props) => <DatabaseOutlined {...props} />, + 'dislike': (props) => <DislikeOutlined {...props} />, + 'environment': (props) => <EnvironmentOutlined {...props} />, + 'eye-invisible': (props) => <EyeInvisibleOutlined {...props} />, + 'eye': (props) => <EyeOutlined {...props} />, + 'file': (props) => <FileOutlined {...props} />, + 'filter': (props) => <FilterOutlined {...props} />, + 'fire': (props) => <FireOutlined {...props} />, + 'flag': (props) => <FlagOutlined {...props} />, + 'folder-add': (props) => <FolderAddOutlined {...props} />, + 'folder': (props) => <FolderOutlined {...props} />, + 'folder-open': (props) => <FolderOpenOutlined {...props} />, + 'heart': (props) => <HeartOutlined {...props} />, + 'home': (props) => <HomeOutlined {...props} />, + 'hourglass': (props) => <HourglassOutlined {...props} />, + 'idcard': (props) => <IdcardOutlined {...props} />, + 'like': (props) => <LikeOutlined {...props} />, + 'lock': (props) => <LockOutlined {...props} />, + 'mail': (props) => <MailOutlined {...props} />, + 'message': (props) => <MessageOutlined {...props} />, + 'mobile': (props) => <MobileOutlined {...props} />, + 'phone': (props) => <PhoneOutlined {...props} />, + 'picture': (props) => <PictureOutlined {...props} />, + 'red-envelope': (props) => <RedEnvelopeOutlined {...props} />, + 'setting': (props) => <SettingOutlined {...props}/>, + 'tool': (props) => <ToolOutlined {...props} />, + 'smile': (props) => <SmileOutlined {...props} />, + 'star': (props) => <StarOutlined {...props} />, + 'thunderbolt': (props) => <ThunderboltOutlined {...props} />, + 'unlock': (props) => <UnlockOutlined {...props} />, + 'barcode': (props) => <BarcodeOutlined {...props} />, + 'key': (props) => <KeyOutlined {...props} />, + 'man': (props) => <ManOutlined {...props} />, + 'woman': (props) => <WomanOutlined {...props} />, + 'team': (props) => <TeamOutlined {...props} />, + 'poweroff': (props) => <PoweroffOutlined {...props} />, + 'search': (props) => <SearchOutlined {...props} />, + 'shopping-cart': (props) => <ShoppingCartOutlined {...props} />, + 'link': (props) => <LinkOutlined {...props} />, + 'aim': (props) => <AimOutlined {...props} />, + 'apartment': (props) => <ApartmentOutlined {...props} />, + 'appstore-add': (props) => <AppstoreAddOutlined {...props} />, + 'audio-mute': (props) => <AudioMutedOutlined {...props} />, + 'audit': (props) => <AuditOutlined {...props} />, + 'bars': (props) => <BarsOutlined {...props} />, + 'block': (props) => <BlockOutlined {...props} />, + 'book': (props) => <BookOutlined {...props} />, + 'bulb': (props) => <BulbOutlined {...props} />, + 'border': (props) => <BorderOutlined {...props} />, + 'number': (props) => <NumberOutlined {...props} />, + 'branches': (props) => <BranchesOutlined {...props} />, + 'build': (props) => <BuildOutlined {...props} />, + 'calculator': (props) => <CalculatorOutlined {...props} />, + 'car': (props) => <CarOutlined {...props} />, + 'carry-out': (props) => <CarryOutOutlined {...props} />, + 'ci': (props) => <CiOutlined {...props} />, + 'clear': (props) => <ClearOutlined {...props} />, + 'cloud-download': (props) => <CloudDownloadOutlined {...props} />, + 'cloud-server': (props) => <CloudServerOutlined {...props} />, + 'cloud-sync': (props) => <CloudSyncOutlined {...props} />, + 'cloud-upload': (props) => <CloudUploadOutlined {...props} />, + 'cluster': (props) => <ClusterOutlined {...props} />, + 'code': (props) => <CodeOutlined {...props} />, + 'coffee': (props) => <CoffeeOutlined {...props} />, + 'comment': (props) => <CommentOutlined {...props} />, + 'compress': (props) => <CompressOutlined {...props} />, + 'control': (props) => <ControlOutlined {...props} />, + 'copyright': (props) => <CopyrightOutlined {...props} />, + 'crown': (props) => <CrownOutlined {...props} />, + 'delete-column': (props) => <DeleteColumnOutlined {...props} />, + 'delete-row': (props) => <DeleteRowOutlined {...props} />, + 'delivered-procedure': (props) => <DeliveredProcedureOutlined {...props} />, + 'deployment-unit': (props) => <DeploymentUnitOutlined {...props} />, + 'desktop': (props) => <DesktopOutlined {...props} />, + 'disconnect': (props) => <DisconnectOutlined {...props} />, + 'dollar': (props) => <DollarOutlined {...props} />, + 'euro': (props) => <EuroOutlined {...props} />, + 'expand': (props) => <ExpandOutlined {...props} />, + 'export': (props) => <ExportOutlined {...props} />, + 'file-add': (props) => <FileAddOutlined {...props} />, + 'file-done': (props) => <FileDoneOutlined {...props} />, + 'file-image': (props) => <FileImageOutlined {...props} />, + 'file-pdf': (props) => <FilePdfOutlined {...props} />, + 'file-ppt': (props) => <FilePptOutlined {...props} />, + 'file-text': (props) => <FileTextOutlined {...props} />, + 'file-unknown': (props) => <FileUnknownOutlined {...props} />, + 'file-word': (props) => <FileWordOutlined {...props} />, + 'file-zip': (props) => <FileZipOutlined {...props} />, + 'fork': (props) => <ForkOutlined {...props} />, + 'frown': (props) => <FrownOutlined {...props} />, + 'funnel-plot': (props) => <FunnelPlotOutlined {...props} />, + 'gateway': (props) => <GatewayOutlined {...props} />, + 'gif': (props) => <GifOutlined {...props} />, + 'gift': (props) => <GiftOutlined {...props} />, + 'global': (props) => <GlobalOutlined {...props} />, + 'gold': (props) => <GoldOutlined {...props} />, + 'import': (props) => <ImportOutlined {...props} />, + 'laptop': (props) => <LaptopOutlined {...props} />, + 'loading': (props) => <LoadingOutlined {...props} />, + 'medicine-box': (props) => <MedicineBoxOutlined {...props} />, + 'meh': (props) => <MehOutlined {...props} />, + 'menu': (props) => <MenuOutlined {...props} />, + 'paper-clip': (props) => <PaperClipOutlined {...props} />, + 'partition': (props) => <PartitionOutlined {...props} />, + 'pay-circle': (props) => <PayCircleOutlined {...props} />, + 'printer': (props) => <PrinterOutlined {...props} />, + 'pushpin': (props) => <PushpinOutlined {...props} />, + 'qrcode': (props) => <QrcodeOutlined {...props} />, + 'reload': (props) => <ReloadOutlined {...props} />, + 'rest': (props) => <RestOutlined {...props} />, + 'robot': (props) => <RobotOutlined {...props} />, + 'rotate-left': (props) => <RotateLeftOutlined {...props} />, + 'rotate-right': (props) => <RotateRightOutlined {...props} />, + 'safety-certificate': (props) => <SafetyCertificateOutlined {...props} />, + 'save': (props) => <SaveOutlined {...props} />, + 'send': (props) => <SendOutlined {...props} />, + 'shake': (props) => <ShakeOutlined {...props} />, + 'share-alt': (props) => <ShareAltOutlined {...props} />, + 'shop': (props) => <ShopOutlined {...props} />, + 'shopping': (props) => <ShoppingOutlined {...props} />, + 'sound': (props) => <SoundOutlined {...props} />, + 'sync': (props) => <SyncOutlined {...props} />, + 'tag': (props) => <TagOutlined {...props} />, + 'tags': (props) => <TagsOutlined {...props} />, + 'trademark': (props) => <TrademarkOutlined {...props} />, + 'trophy': (props) => <TrophyOutlined {...props} />, + 'usb': (props) => <UsbOutlined {...props} />, + 'user-add': (props) => <UserAddOutlined {...props} />, + 'user-delete': (props) => <UserDeleteOutlined {...props} />, + 'user-switch': (props) => <UserSwitchOutlined {...props} />, + 'video-camera': (props) => <VideoCameraOutlined {...props} />, + 'wifi': (props) => <WifiOutlined {...props} />, + 'table': (props) => <TableOutlined {...props} />, +} + +class MkIcon extends Component { + render() { + const { type, ...resProps } = this.props + + if (!type || !MkIcons[type]) return null + + return ( + MkIcons[type](resProps) + ) + } +} +export default MkIcon \ No newline at end of file diff --git a/src/menu/baseScript/settingform/index.scss b/src/components/mk-icon/index.scss similarity index 100% rename from src/menu/baseScript/settingform/index.scss rename to src/components/mk-icon/index.scss diff --git a/src/components/mkIcon/index.jsx b/src/components/mkIcon/index.jsx index c1c7c13..dcb0684 100644 --- a/src/components/mkIcon/index.jsx +++ b/src/components/mkIcon/index.jsx @@ -1,12 +1,16 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Modal, Icon, Row, Col, Button } from 'antd' +import { Modal, Row, Col, Button } from 'antd' +import { CloseCircleFilled } from '@ant-design/icons' import { minkeIconSystem } from '@/utils/option.js' +import MkIcon from '@/components/mk-icon' import './index.scss' -class MkIcon extends Component { +// ['direction', 'edit', 'normal', 'data', 'hint'] + +class MkEditIcon extends Component { static propTpyes = { onChange: PropTypes.func } @@ -14,17 +18,28 @@ state = { selectIcon: '', allowClear: false, - icons: [...minkeIconSystem.direction, ...minkeIconSystem.edit, ...minkeIconSystem.normal, ...minkeIconSystem.trademark, ...minkeIconSystem.data, ...minkeIconSystem.hint], + icons: [], visible: false } UNSAFE_componentWillMount () { + const { options } = this.props let val = '' if (this.props['data-__meta']) { val = this.props['data-__meta'].initialValue || '' } - this.setState({selectIcon: val, allowClear: this.props.allowClear === true}) + let icons = [] + + if (options) { + options.forEach(item => { + icons.push(...minkeIconSystem[item]) + }) + } else { + icons = [...minkeIconSystem.direction, ...minkeIconSystem.edit, ...minkeIconSystem.normal, ...minkeIconSystem.data, ...minkeIconSystem.hint] + } + + this.setState({selectIcon: val, allowClear: this.props.allowClear === true, icons}) } shouldComponentUpdate (nextProps, nextState) { @@ -41,9 +56,9 @@ return ( <div className="mk-icon-box"> - {selectIcon ? <Icon type={selectIcon}/> : <Icon style={{opacity: 0}} type="plus"/>} - <Icon className="trigger" onClick={() => this.setState({visible: true})} type="swap"/> - {allowClear && selectIcon ? <Icon className="close" onClick={() => this.checkIcon('')} theme="filled" type="close-circle"/> : null} + {selectIcon ? <MkIcon type={selectIcon}/> : <span style={{color: '#bcbcbc'}}>璇烽�夋嫨</span>} + <MkIcon className="trigger" onClick={() => this.setState({visible: true})} type="swap"/> + {allowClear && selectIcon ? <CloseCircleFilled className="close" onClick={() => this.checkIcon('')}/> : null} <Modal wrapClassName="popview-modal mk-icon-wrap" title={'鍥炬爣閫夋嫨'} @@ -58,7 +73,7 @@ > <Row> {icons.map(icon => <Col className={icon === selectIcon ? 'active' : ''} key={icon} span={4}> - <Icon onClick={() => this.checkIcon(icon)} type={icon} /> + <MkIcon onClick={() => this.checkIcon(icon)} type={icon} /> </Col>)} </Row> </Modal> @@ -67,4 +82,4 @@ } } -export default MkIcon \ No newline at end of file +export default MkEditIcon \ No newline at end of file diff --git a/src/components/mkIcon/index.scss b/src/components/mkIcon/index.scss index 0cc28b6..ebbd502 100644 --- a/src/components/mkIcon/index.scss +++ b/src/components/mkIcon/index.scss @@ -5,6 +5,7 @@ border-radius: 4px; line-height: 32px; padding: 0px 0px 0px 10px; + transition: all 0.3s; .anticon.trigger { float: right; @@ -12,15 +13,28 @@ padding: 0 10px; border-left: 1px solid #d9d9d9; } + .anticon.trigger::after { + content: ' '; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } .close.anticon { + position: relative; + z-index: 1; float: right; margin-top: 8px; margin-right: 8px; background: #fff; - color: rgba(0, 0, 0, 0.45); + color: #bcbcbc; font-size: 12px; opacity: 0; transition: opacity 0.3s; + } + .close.anticon:hover { + color: #959595; } } .mk-icon-box:hover { @@ -35,6 +49,9 @@ clear: both; } .mk-icon-wrap { + .ant-modal { + top: 50px!important; + } .ant-col { text-align: center; line-height: 55px; diff --git a/src/components/normalform/modalform/index.jsx b/src/components/normalform/modalform/index.jsx index ebf07cb..7162b0c 100644 --- a/src/components/normalform/modalform/index.jsx +++ b/src/components/normalform/modalform/index.jsx @@ -13,11 +13,12 @@ const { TextArea } = Input const MKRadio = asyncComponent(() => import('./mkRadio')) +const MKTable = asyncComponent(() => import('./mkTable')) const MKCheckbox = asyncComponent(() => import('./mkCheckbox')) const StyleInput = asyncComponent(() => import('./styleInput')) const MKFileUpload = asyncComponent(() => import('@/tabviews/zshare/fileupload')) const MKColor = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkColor')) -const MkIcon = asyncComponent(() => import('@/components/mkIcon')) +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent')) class ModalForm extends Component { @@ -66,13 +67,19 @@ validator: (rule, value, callback) => this.handleConfirmPassword(rule, value, callback, item) }] } else if (item.type === 'textarea') { - let _rules = [ + item.rules = [ { required: item.required, message: item.label + '涓嶅彲涓虹┖!' } ] - item.rules = _rules + } else if (item.type === 'table') { + item.rules = [ + { + required: item.required, + message: '璇锋坊鍔�' + item.label + '!' + } + ] } else { item.rules = [ { @@ -109,6 +116,8 @@ if (vals.length === new Set(vals).size) { cell.hidden = true } + } else if (item.notNull) { + cell.hidden = !supItem.initval || JSON.stringify(supItem.initval) === '[]' } else if (!item.values.includes(supItem.initval)) { cell.hidden = true } @@ -177,6 +186,8 @@ } else { m.hidden = true } + } else if (cell.notNull) { + m.hidden = !val || JSON.stringify(val) === '[]' } else { m.hidden = !cell.values.includes(val) } @@ -197,10 +208,17 @@ this.setState({ formlist: this.state.formlist.map(cell => { - if (cell.field) { - return map.get(cell.field) + if (!cell.field) return cell + + let item = map.get(cell.field) + + if (item && item.linkField) { + let supInitVal = this.record[item.linkField] || '' + + item.options = item.oriOptions.filter(option => option.ParentID === supInitVal) } - return cell + + return item || cell }) }) } @@ -235,13 +253,15 @@ } else if (item.type === 'fileupload') { content = (<MKFileUpload config={item} onChange={(val) => this.recordChange({[item.field]: val})} />) } else if (item.type === 'cascader') { - content = (<Cascader allowClear={!!item.allowClear} options={item.options} expandTrigger="hover" placeholder="" />) + content = (<Cascader allowClear={!!item.allowClear} onChange={(val) => this.recordChange({[item.field]: val}, item)} options={item.options} expandTrigger="hover" placeholder="" />) } else if (item.type === 'textarea') { content = (<TextArea rows={item.rows || 2} placeholder=""/>) } else if (item.type === 'mkicon') { - content = (<MkIcon allowClear={item.allowClear}/>) + content = (<MkEditIcon allowClear={item.allowClear}/>) } else if (item.type === 'source') { content = (<SourceComponent type="" placement="right"/>) + } else if (item.type === 'table') { + content = (<MKTable columns={item.columns || []}/>) } if (!content) return diff --git a/src/components/normalform/modalform/mkTable/index.jsx b/src/components/normalform/modalform/mkTable/index.jsx new file mode 100644 index 0000000..2760640 --- /dev/null +++ b/src/components/normalform/modalform/mkTable/index.jsx @@ -0,0 +1,440 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { fromJS } from 'immutable' +import { DndProvider, DragSource, DropTarget } from 'react-dnd' +import { Table, Input, InputNumber, Popconfirm, Form, Select, Radio, Cascader, notification, Typography, Button } from 'antd' +import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons' + +import Utils from '@/utils/utils.js' +import ColorSketch from '@/mob/colorsketch' +import asyncComponent from '@/utils/asyncComponent' +import './index.scss' + +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) +const EditableContext = React.createContext() +let dragingIndex = -1 +const { Paragraph } = Typography + +class BodyRow extends React.Component { + render() { + const { isOver, moveAble, connectDragSource, connectDropTarget, moveRow, ...restProps } = this.props + + let { className } = restProps + if (isOver && moveAble) { + if (restProps.index > dragingIndex) { + className += ' drop-over-downward' + } + if (restProps.index < dragingIndex) { + className += ' drop-over-upward' + } + } + + if (moveAble) { + return connectDragSource( + connectDropTarget(<tr {...restProps} className={className} style={{ ...restProps.style, cursor: 'move' }} />), + ) + } else { + return (<tr {...restProps} className={className} style={restProps.style} />) + } + } +} + +const rowSource = { + beginDrag(props) { + dragingIndex = props.index + return { + index: props.index, + } + } +} + +const rowTarget = { + drop(props, monitor) { + const dragIndex = monitor.getItem().index + const hoverIndex = props.index + + if (dragIndex === hoverIndex) { + return + } + + props.moveRow(dragIndex, hoverIndex) + + monitor.getItem().index = hoverIndex + }, +} + +const DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({ + connectDropTarget: connect.dropTarget(), + isOver: monitor.isOver(), +}))( + DragSource('row', rowSource, connect => ({ + connectDragSource: connect.dragSource(), + }))(BodyRow), +) + +class EditableCell extends Component { + getInput = (form) => { + const { inputType, options, min, max, unlimit } = this.props + + if (inputType === 'number' && unlimit) { + return <InputNumber onPressEnter={() => this.getValue(form)} /> + } else if (inputType === 'number') { + return <InputNumber min={min} max={max} precision={0} onPressEnter={() => this.getValue(form)} /> + } else if (inputType === 'color') { + return <ColorSketch /> + } else if (inputType === 'icon') { + return <MkEditIcon allowClear/> + } else if (inputType === 'select') { + return ( + <Select> + {options.map((item, i) => (<Select.Option key={i} value={item.field || item.value}> {item.label || item.text} </Select.Option>))} + </Select> + ) + } else if (inputType === 'multiStr') { + return ( + <Select mode="multiple"> + {options.map((item, i) => (<Select.Option key={i} value={item.field || item.value}> {item.label || item.text} </Select.Option>))} + </Select> + ) + } else if (inputType === 'cascader') { + return ( + <Cascader options={options} placeholder=""/> + ) + } else if (inputType === 'radio') { + return ( + <Radio.Group> + {options.map((item, i) => (<Radio key={i} value={item.field || item.value}> {item.label || item.text} </Radio>))} + </Radio.Group> + ) + } else { + return <Input onPressEnter={() => this.getValue(form)}/> + } + } + + getValue = (form) => { + form.validateFields((error, row) => { + if (error) { + return + } + this.props.onSave(row) + }) + } + + renderCell = (form) => { + const { getFieldDecorator } = form + const { editing, dataIndex, title, record, children, className, required, inputType } = this.props + + return ( + <td className={className}> + {editing ? ( + <Form.Item style={{ margin: 0 }}> + {getFieldDecorator(dataIndex, { + rules: [ + { + required: required, + message: ['number', 'text', 'input'].includes(inputType) ? `璇疯緭鍏� ${title}!` : `璇烽�夋嫨 ${title}!`, + } + ], + initialValue: inputType === 'multiStr' ? (record[dataIndex] ? record[dataIndex].split(',') : []) : record[dataIndex], + })(this.getInput(form))} + </Form.Item> + ) : ( + children + )} + </td> + ) + } + + render() { + return <EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer> + } +} + +class EditTable extends Component { + static propTpyes = { + columns: PropTypes.array, // 鏄剧ず鍒� + onChange: PropTypes.func // 鏁版嵁鍙樺寲 + } + + state = { + data: [], + editLine: null, + editingKey: '', + visible: false, + columns: [] + } + + UNSAFE_componentWillMount () { + let columns = fromJS(this.props.columns).toJS() + + let operation = { + title: '鎿嶄綔', + dataIndex: 'operation', + width: '120px', + render: (text, record) => { + const { editingKey } = this.state + const editable = this.isEditing(record) + return editable ? ( + <div style={{textAlign: 'center', minWidth: '110px'}}> + <EditableContext.Consumer> + {form => ( + <span onClick={() => this.save(form)} style={{ marginRight: 8 , color: '#1890ff', cursor: 'pointer'}}> + 淇濆瓨 + </span> + )} + </EditableContext.Consumer> + <span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>鍙栨秷</span> + </div> + ) : ( + <div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')} style={{minWidth: '110px', whiteSpace: 'nowrap'}}> + <span className="primary" onClick={() => {editingKey === '' && this.edit(record)}}><EditOutlined /></span> + {editingKey === '' ? <Popconfirm + overlayClassName="popover-confirm" + title="纭畾鍒犻櫎鍚�?" + onConfirm={() => this.handleDelete(record.uuid) + }> + <span className="danger"><DeleteOutlined /></span> + </Popconfirm> : null} + {editingKey !== '' ? <span className="danger"><DeleteOutlined /></span> : null} + </div> + ) + } + } + + columns.push(operation) + + this.setState({ + data: fromJS(this.props.value || []).toJS(), + operation, + columns + }) + } + + // shouldComponentUpdate (nextProps, nextState) { + // return !is(fromJS(this.state), fromJS(nextState)) + // } + + isEditing = record => record.uuid === this.state.editingKey + + cancel = () => { + this.setState({ editingKey: '', data: this.state.data.filter(item => !item.isnew) }) + } + + handleDelete = (uuid) => { + const { data } = this.state + let _data = data.filter(item => uuid !== item.uuid) + + this.setState({ + data: _data + }, () => { + this.props.onChange(_data) + }) + } + + save(form) { + form.validateFields((error, row) => { + if (error) { + return; + } + this.execSave(row) + }) + } + + execSave = (row) => { + const { columns, editLine } = this.state + + let newData = [...this.state.data] + let record = {...editLine, ...row} + let index = newData.findIndex(item => record.uuid === item.uuid) + + if (index === -1) return + + let unique = true + columns.forEach(col => { + if (col.unique !== true || !unique) return + + let _index = newData.findIndex(item => record.uuid !== item.uuid && record[col.dataIndex] === item[col.dataIndex]) + + if (_index > -1) { + notification.warning({ + top: 92, + message: col.title + '涓嶅彲閲嶅锛�', + duration: 5 + }) + unique = false + } + }) + + if (!unique) return + + columns.forEach(col => { + if (!col.extends) return + + if (col.extends === 'Menu') { + let menu = record[col.dataIndex] + let fId = menu[0] || '' + let sId = menu[1] || '' + let tId = menu[2] || '' + let label = '' + + col.options.forEach(f => { + if (!fId || fId !== f.value) return + label = f.label + + f.children.forEach(s => { + if (!sId || sId !== s.value) return + label += ' / ' + s.label + + s.children.forEach(t => { + if (!tId || tId !== t.value) return + label += ' / ' + t.label + + record.MenuID = t.MenuID + record.MenuName = t.MenuName + record.MenuNo = t.MenuNo + record.tabType = t.type + record.label = label + }) + }) + }) + } else if (col.inputType === 'cascader') { + let keys = record[col.dataIndex] + let _options = [] + let rematch = (options, level) => { + options.some(m => { + if (!m.value || m.value !== keys[level]) return false + + _options.push(m) + + if (m.children && keys[level + 1]) { + rematch(m.children, level + 1) + } + return true + }) + } + + rematch(col.options, 0) + + if (_options.length) { + col.extends.forEach(n => { + record[n.value] = _options.map(o => o[n.key]).join(' / ') + }) + } + } else { + let key = record[col.dataIndex] + let option = col.options.filter(m => m.value === key)[0] + + if (option) { + col.extends.forEach(n => { + record[n.value] = option[n.key] + }) + } + } + }) + + delete record.isnew + + newData.splice(index, 1, record) + this.setState({ data: newData, editingKey: '', editLine: null }, () => { + this.props.onChange(newData) + }) + } + + edit(item) { + this.setState({ editLine: item, editingKey: item.uuid }) + } + + addline = () => { + let item = { + uuid: Utils.getuuid(), + isnew: true + } + + this.setState({ data: [...this.state.data, item], editingKey: '' }, () => { + this.setState({ editLine: item, editingKey: item.uuid }) + }) + } + + moveRow = (dragIndex, hoverIndex) => { + const { editingKey } = this.state + let _data = fromJS(this.state.data).toJS() + + if (editingKey) return + + _data.splice(hoverIndex, 0, ..._data.splice(dragIndex, 1)) + + this.setState({ + data: _data + }, () => { + this.props.onChange(_data) + }) + } + + render() { + let components = { + body: { + cell: EditableCell + } + } + + let moveprops = {} + components.body.row = DragableBodyRow + moveprops.moveAble = !this.state.editingKey + moveprops.moveRow = this.moveRow + + let columns = this.state.columns.map(col => { + if (col.copy) { + col.render = (text) => (<Paragraph copyable>{text}</Paragraph>) + } + if (!col.editable) return col + return { + ...col, + onCell: record => ({ + record, + inputType: col.inputType, + dataIndex: col.dataIndex, + options: col.options || [], + min: col.min || 0, + max: col.max || 500, + unlimit: col.unlimit, + required: col.required !== false ? true : false, + title: col.title, + editing: this.isEditing(record), + onSave: this.execSave, + }), + } + }) + + const data = this.state.data.map((item, index) => { + item.$index = index + 1 + + return item + }) + + return ( + <EditableContext.Provider value={this.props.form}> + <div className="modal-editable-table"> + <Button disabled={!!this.state.editingKey} type="link" onClick={this.addline}><PlusOutlined style={{}}/></Button> + <DndProvider> + <Table + bordered + rowKey="uuid" + size="middle" + components={components} + dataSource={data} + columns={columns} + rowClassName="editable-row" + pagination={false} + onRow={(record, index) => ({ + index, + ...moveprops + })} + /> + </DndProvider> + </div> + </EditableContext.Provider> + ) + } +} + +export default Form.create()(EditTable) \ No newline at end of file diff --git a/src/components/normalform/modalform/mkTable/index.scss b/src/components/normalform/modalform/mkTable/index.scss new file mode 100644 index 0000000..d4bba52 --- /dev/null +++ b/src/components/normalform/modalform/mkTable/index.scss @@ -0,0 +1,108 @@ +.modal-editable-table { + position: relative; + margin-bottom: 5px; + + >.ant-btn { + position: absolute; + right: 0px; + top: -26px; + font-size: 18px; + color: #26C281; + z-index: 1; + height: 28px; + } + .editable-row { + .ant-form-explain { + position: absolute; + font-size: 12px; + margin-top: -4px; + } + .color-sketch-block { + width: 200px; + position: relative; + top: 8px; + } + .ant-select { + width: 100%; + } + > td { + padding: 14px 10px; + } + > td:last-child { + padding: 0px; + } + } + .mk-index { + text-align: center; + white-space: nowrap; + } + + thead tr th:last-child { + text-align: center; + } + .edit-operation-btn { + display: block; + text-align: center; + span { + margin-right: 10px; + cursor: pointer; + font-size: 16px; + padding: 5px; + } + .primary { + color: #1890ff; + } + .copy { + color: #26C281; + } + .danger { + color: #ff4d4f; + } + span:last-child { + margin-right: 0px; + } + } + .edit-operation-btn.disabled { + cursor: default; + span { + cursor: default; + } + .primary { + color: rgba(0, 0, 0, .25); + } + .danger { + color: rgba(0, 0, 0, .25); + } + .copy { + color: rgba(0, 0, 0, .25); + } + } + .ant-empty { + margin: 0; + } + tr.drop-over-downward td { + border-bottom: 2px dashed #1890ff; + } + tr.drop-over-upward td { + border-top: 2px dashed #1890ff; + } + .copy-control { + display: inline-block; + position: absolute; + right: 10px; + top: 2px; + + .anticon-copy { + margin-right: 7px; + color: #26C281; + } + .anticon-snippets { + color: purple; + } + .anticon-delete { + margin-left: 7px; + color: #ff4d4f; + } + } +} + diff --git a/src/components/paste/index.jsx b/src/components/paste/index.jsx index 5efc6b6..7fc8904 100644 --- a/src/components/paste/index.jsx +++ b/src/components/paste/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Icon, Modal, notification } from 'antd' +import { Modal, notification } from 'antd' +import { SnippetsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' @@ -51,7 +52,7 @@ return ( <div style={{display: 'inline-block'}}> - <Icon type="snippets" style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} /> + <SnippetsOutlined style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} /> <Modal title="绮樿创" visible={visible} diff --git a/src/components/preview/index.jsx b/src/components/preview/index.jsx deleted file mode 100644 index 0e12ebc..0000000 --- a/src/components/preview/index.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import { Button} from 'antd' -import './index.scss' - -class Preview extends Component { - static propTpyes = { - preview: PropTypes.any, - cancel: PropTypes.func - } - - state = { - show: false, - url: '' - } - - UNSAFE_componentWillReceiveProps (nextProps) { - if (nextProps.preview) { - this.setState({ - url: nextProps.preview - }) - setTimeout(() => { - this.setState({ - show: true - }) - }, 10) - } else { - this.setState({ - show: false - }) - setTimeout(() => { - this.setState({ - url: '' - }) - }, 500) - } - } - - close = () => { - this.props.cancel() - } - - render () { - return ( - <div> - {this.state.url && - <div className={'preview-box ' + (this.state.show ? 'active' : '')} onClick={this.close}> - <Button shape="circle" icon="close" /> - {this.state.url && <img src={this.state.url} alt=""/>} - </div> - } - </div> - ) - } -} - -export default Preview \ No newline at end of file diff --git a/src/components/preview/index.scss b/src/components/preview/index.scss deleted file mode 100644 index ea0d380..0000000 --- a/src/components/preview/index.scss +++ /dev/null @@ -1,26 +0,0 @@ -.preview-box { - position: fixed; - z-index: 1100; - left: 0; - right: 0px; - top: 0px; - bottom: 0px; - background: rgba($color: #000000, $alpha: 0.6); - line-height: 100vh; - text-align: center; - opacity: 0; - transition: opacity 0.5s; - cursor: zoom-out; - img { - max-width: 80vw; - max-height: 90vh; - } - button { - position: absolute; - top: 4vh; - right: 4vw; - } -} -.active { - opacity: 1; -} \ No newline at end of file diff --git a/src/components/sidemenu/index.jsx b/src/components/sidemenu/index.jsx index fcbc8f2..4df598a 100644 --- a/src/components/sidemenu/index.jsx +++ b/src/components/sidemenu/index.jsx @@ -2,11 +2,10 @@ import PropTypes from 'prop-types' import { connect } from 'react-redux' import { is, fromJS } from 'immutable' -import { Menu, Icon } from 'antd' +import { Menu } from 'antd' import MKEmitter from '@/utils/events.js' -import zhCN from '@/locales/zh-CN/main.js' -import enUS from '@/locales/en-US/main.js' +import MkIcon from '@/components/mk-icon' import './index.scss' const { SubMenu } = Menu @@ -17,7 +16,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, subMenulist: [], // 浜岀骇鑿滃崟 rootSubmenuKeys: null, openKeys: null, @@ -105,7 +103,7 @@ key={item.MenuID} title={ <span> - <Icon type={item.PageParam.Icon} /> + <MkIcon type={item.PageParam.Icon} /> <span>{item.MenuName}</span> </span> } diff --git a/src/components/tabview/index.jsx b/src/components/tabview/index.jsx index 199b2a6..d5320f5 100644 --- a/src/components/tabview/index.jsx +++ b/src/components/tabview/index.jsx @@ -2,7 +2,8 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import { fromJS } from 'immutable' -import {Tabs, Icon, BackTop, notification} from 'antd' +import {Tabs, BackTop, notification} from 'antd' +import { RedoOutlined, CloseOutlined } from '@ant-design/icons' import moment from 'moment' import 'moment/locale/zh-cn' @@ -10,8 +11,6 @@ import asyncComponent from '@/utils/asyncLoadComponent' import NotFount from '@/components/404' import options from '@/store/options.js' -import mzhCN from '@/locales/zh-CN/main.js' -import menUS from '@/locales/en-US/main.js' import MKEmitter from '@/utils/events.js' import Api from '@/api' import './index.scss' @@ -45,7 +44,6 @@ activeId: '', tabviews: null, // 鏍囩闆� iFrameHeight: 0, - dict: sessionStorage.getItem('lang') !== 'en-US' ? mzhCN : menUS, } // 鍏抽棴tab椤碉紝閲嶆柊閫夋嫨鏄剧ず椤� @@ -281,12 +279,12 @@ <Tabs.TabPane tab={ <span className="tab-control"> - <Icon type="redo" onClick={(e) => {this.refreshTabview(e, view)}}/> + <RedoOutlined onClick={(e) => {this.refreshTabview(e, view)}}/> <span className="tab-name" onClick={(e) => {this.changeTab(e, view)}}> {view.MenuName} </span> {view.type !== 'Home' ? - <Icon type="close" onClick={(e) => {e.stopPropagation();this.closeTabView(view.MenuID)}}/> : null + <CloseOutlined onClick={(e) => {e.stopPropagation();this.closeTabView(view.MenuID)}}/> : null } </span> } diff --git a/src/components/tabview/index.scss b/src/components/tabview/index.scss index 332f6ad..6f2fee2 100644 --- a/src/components/tabview/index.scss +++ b/src/components/tabview/index.scss @@ -16,7 +16,7 @@ padding: 18px 16px 6px 6px; margin-right: 20px; cursor: default; - span.tab-control i.anticon-close { + span.tab-control .anticon-close { position: absolute; right: -7px; top: 10px; @@ -26,7 +26,7 @@ cursor: pointer; display: none; } - span.tab-control i.anticon-redo { + span.tab-control .anticon-redo { position: absolute; left: -2px; top: 18px; @@ -47,12 +47,12 @@ } } .ant-tabs-tab:hover { - span.tab-control i.anticon-close { + span.tab-control .anticon-close { display: inline-block; } } .ant-tabs-tab-active.ant-tabs-tab:hover { - span.tab-control i.anticon-redo { + span.tab-control .anticon-redo { display: inline-block; } } @@ -73,32 +73,6 @@ border: 0; margin-top: 16px; } - } - .main-copy { - position: fixed; - z-index: 20; - bottom: 65px; - right: 30px; - width: 40px; - height: 40px; - i { - font-size: 18px; - } - } - .main-copy.ifr-copy { - bottom: 65px; - right: 40px; - width: 30px; - height: 32px; - border: 2px solid #687991; - opacity: 0.6; - i { - font-size: 14px; - color: #687991; - } - } - .main-copy.ifr-copy:hover { - opacity: 1; } .ant-back-top { bottom: 10px; diff --git a/src/index.js b/src/index.js index b75a85e..fd5d16d 100644 --- a/src/index.js +++ b/src/index.js @@ -10,9 +10,7 @@ import '@/assets/css/minkeicon.css' import '@/assets/css/viewstyle.scss' -if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { - window.location.replace(window.location.href.split(/(index.html)+/ig)[0] + 'mob/index.html') -} else if (window.location.href.indexOf('#/design') > -1) { // 缂栬緫椤甸潰鍒锋柊鏃讹紝璺宠浆鑷充富椤� +if (window.location.href.indexOf('#/design') > -1) { // 缂栬緫椤甸潰鍒锋柊鏃讹紝璺宠浆鑷充富椤� window.location.replace(window.location.href.replace(/design/ig, 'main')) } @@ -36,7 +34,7 @@ })()) } -const render = Component => { +const render = Component => { ReactDOM.render( <Provider store={store}> <Component/> @@ -81,6 +79,13 @@ }) .then(config => { if (!config) return + + if (config.defaultApp) { + if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { + window.location.replace(window.location.href.split(/(index.html)+/ig)[0].replace('admin/', '') + 'mob/index.html#/index') + return + } + } let GLOB = {} GLOB.appId = config.appId || '' @@ -146,12 +151,6 @@ let _href = window.location.href.split('#')[0] - if (localStorage.getItem(_href + 'lang')) { - sessionStorage.setItem('lang', localStorage.getItem(_href + 'lang')) - } else { - sessionStorage.setItem('lang', config.defaultLang !== 'en-US' ? 'zh-CN' : 'en-US') - } - let _systemMsg = localStorage.getItem(_href + 'system') if (_systemMsg) { @@ -211,6 +210,19 @@ GLOB.service = config.service } + let mark = sessionStorage.getItem('system_mark') + let _mark = `sys_${GLOB.service.replace('/', '') || 'service'}` + if (mark && mark !== _mark) { + sessionStorage.clear() + } + sessionStorage.setItem('system_mark', _mark) + + if (localStorage.getItem(_href + 'lang')) { + sessionStorage.setItem('lang', localStorage.getItem(_href + 'lang')) + } else { + sessionStorage.setItem('lang', config.defaultLang !== 'en-US' ? 'zh-CN' : 'en-US') + } + Object.defineProperty(GLOB, 'appId', { writable: false, value: GLOB.appId diff --git a/src/locales/en-US/main.js b/src/locales/en-US/main.js index 56ae0f9..2a9103e 100644 --- a/src/locales/en-US/main.js +++ b/src/locales/en-US/main.js @@ -6,12 +6,10 @@ 'main.submit': 'Submit', 'main.return': 'Return', 'main.close': 'Close', - 'main.all': 'All', 'main.cancel': 'Cancel', 'main.logout': 'Logout', 'main.doc': '鏂囨。涓績', 'main.logout.hint': 'Are you sure you want to log out?', - 'main.verup': 'Version upgrade', 'main.password': 'Change the password', 'main.login.develop': 'Login developer', 'main.revert.default': 'Restore default Settings', @@ -46,7 +44,6 @@ 'main.form.link.error': '鑱斿姩鑿滃崟璁剧疆閿欒锛�', 'main.form.picture.check': '鏌ョ湅鍥剧墖', 'main.role.title': 'The role list', - 'main.view.notFound': '鎶辨瓑锛屾偍璁块棶鐨勯〉闈笉瀛樺湪锛岃鑱旂郴绠$悊鍛樸��', 'form.required.input': 'Please enter the ', 'form.required.select': 'Please select a ' } \ No newline at end of file diff --git a/src/locales/en-US/model.js b/src/locales/en-US/model.js index ea0c882..4421fbf 100644 --- a/src/locales/en-US/model.js +++ b/src/locales/en-US/model.js @@ -46,57 +46,34 @@ 'model.menu.basemsg': 'Please complete the basic information !', 'header.menu.basedata': 'The basic information', 'header.menu.table.add': 'Add tables', - 'header.menu.table.placeholder': 'Please select a table', 'header.menu.config.placeholder': 'Configuration has been modified, do you want to save configuration information ?', 'header.menu.config.notsave': 'The menu has not been saved, please save the menu configuration first锛�', 'header.menu.config.update': 'Menu configuration has been modified, please save锛�', - 'model.menu.template.empty': 'Menu template is missing, please select template again锛�', 'model.menu.presave': 'Menu order has been adjusted, Please save!', 'header.menu.form': 'The form', - 'header.menu.form.add': 'Add form', - 'header.menu.form.configurable': 'Configuration of forms', 'header.menu.group.add': 'Add a group', - 'header.menu.group.manage': 'Group management', 'header.menu.search': 'Search', - 'header.menu.search.add': 'Add searches', 'header.menu.action': 'Button', - 'header.menu.action.configurable': 'Button Configurable', - 'header.menu.tab.configurable': 'Tab Configurable', 'header.menu.column': 'Column', - 'model.menu.column.add': 'Add columns', - 'model.menu.field.add': 'Add fields', - 'header.menu.page.configurable': 'Configuration Page', - 'header.menu.viewName': 'The name of the page', 'header.menu.tabName': 'Tag name', 'header.menu.Remark': 'Note', - 'header.menu.func.create': 'Create stored procedures', - 'header.menu.interface.create': 'Create the interface', 'header.menu.tab': 'Tab', 'model.menu.tab.subtable': 'Child table', 'header.menu.datasource': 'The data source', 'header.menu.maintable': 'The main table', 'header.menu.query': 'The query', - 'model.form.tabType': 'The tag type', - 'header.form.search.placeholder': 'Please add search criteria', 'header.form.modal.placeholder': 'Please add the form', - 'header.form.action.placeholder': 'Please add buttons', - 'header.form.column.placeholder': 'Please add columns', 'model.form.width': 'Width', 'header.form.title': 'Title', 'model.form.field': 'Field', 'header.form.innerFunc': 'Internal func', 'header.form.outerFunc': 'External function', 'header.form.callbackFunc': 'Callback function', - 'header.form.position': 'Position', 'model.form.afterSuccess': 'Success', 'model.form.afterError': 'Failure', - 'header.form.messageTip': 'Message', 'header.form.refresh': 'Refresh', 'header.form.refresh.never': 'Don\'t refresh', 'header.form.refresh.grid': 'Refresh the table', - 'header.form.refresh.maingrid': 'Refresh the main table', - 'header.form.refresh.equaltab': 'Refresh sibling tag', - 'header.form.refresh.subgrid': 'Refresh the child table', 'header.form.popClose': 'Label closing', 'header.form.toolbar': 'The toolbar', 'header.form.grid': 'Table', @@ -116,7 +93,6 @@ 'model.form.picture': 'Picture', 'model.form.number': 'Number', 'header.form.letter': '瀛楁瘝', - 'header.form.letter&number': '瀛楁瘝+鏁板瓧', 'model.form.colspan': 'The columns of the merger', 'model.form.select': 'Select', 'model.form.multiselect': 'Multi-select', @@ -132,7 +108,6 @@ 'header.form.initval': 'Initial Value', 'header.form.decimal': '灏忔暟浣�', 'header.form.format': '鏍煎紡鍖�', - 'header.form.thdSeparator': '鍗冨垎浣�', 'header.form.prefix': '鍓嶇紑', 'header.form.postfix': '鍚庣紑', 'header.form.isRequired': '琛岃缃�', @@ -163,8 +138,6 @@ 'model.form.alignRight': 'The Right', 'model.form.alignCenter': 'The center', 'model.form.columnWidth': 'Column width', - 'header.form.setAll': '璁剧疆鍏ㄩ儴椤�', - 'header.form.resourceType': '閫夐」鏉ユ簮', 'header.form.custom': '鑷畾涔�', 'header.form.datasource': '鏁版嵁婧�', 'model.form.tablename': 'Table name', @@ -172,74 +145,27 @@ 'header.form.action.insert': '娣诲姞', 'header.form.action.update': '淇敼', 'header.form.action.audit': '瀹℃牳', - 'header.form.action.insertOrUpdate': '娣诲姞鎴栦慨鏀�', - 'header.form.action.LogicDelete': '閫昏緫鍒犻櫎', - 'header.form.action.delete': '鐗╃悊鍒犻櫎', - 'header.form.valueField': '鍊悸峰瓧娈�', - 'header.form.valueText': '鏂囨湰路瀛楁', - 'header.form.orderBy': '鎺掑簭路瀛楁', - 'header.form.orderType': '鎺掑簭鏂瑰紡', 'header.form.match': '鍖归厤妯″紡', 'header.form.matchVal': '鍖归厤鍊�', 'header.form.asc': '姝e簭', 'header.form.desc': '鍊掑簭', - 'header.form.linkField': '鍏宠仈瀛楁', 'header.form.dropdown': '涓嬫媺鑿滃崟', 'header.form.button': '鎸夐挳', 'model.form.style': '椋庢牸', 'model.form.color': 'Color', - 'header.form.order': '鎺掑垪', - 'header.form.horizontal': '妯悜', - 'header.form.vertical': '绾靛悜', - 'header.form.vertical2': '绾靛悜(2鍒�)', - 'header.form.topPicBottomText': '涓婂浘涓嬫枃', - 'header.form.leftPicRightText': '宸﹀浘鍙虫枃', - 'model.form.selectItem.error': '涓嬫媺閫夐」璁剧疆閿欒锛�', - 'header.form.readonly': '鍙', - 'header.form.queryType': '鏌ヨ绫诲瀷', - 'header.form.query': '鏌ヨ', - 'header.form.statistics': '缁熻', - 'header.form.database': '鏁版嵁搴�', - 'header.form.database.local': '鏈湴', - 'header.form.database.sso': '绯荤粺', - 'header.form.linkMain': '鍏宠仈涓昏〃', 'model.query.delete': '纭畾鍒犻櫎鍚�?', - 'header.form.up': '涓婄Щ', - 'header.form.down': '涓嬬Щ', 'header.form.status.change': '鐘舵�佸垏鎹�', 'model.status.forbidden': '绂佺敤', 'model.status.open': '鍚敤', - 'header.form.readin': '鑷姩濉厖', - 'header.form.pagination': '鍒嗛〉', - 'header.form.regular': '姝e垯鏍¢獙', - 'header.form.quickadd': '蹇嵎娣诲姞', 'model.form.funcbutton': 'Function button', - 'header.form.funcType': '鍔熻兘绫诲瀷', - 'header.form.func.changeuser': '鍒囨崲鐢ㄦ埛', - 'header.form.func.print': '鎵撳嵃', 'model.form.execMode': 'Mode', - 'header.form.thawbutton': '瑙e喕鎸夐挳', - 'header.form.maxRows': '鏈�澶ц鏁�', 'header.form.paste': '绮樿创', 'header.form.ratio': '姣斾緥', 'header.form.blacklist': '榛戝悕鍗�', 'model.form.linkmenu': 'Association', - 'header.form.clickscale': '鐐瑰嚮缂╂斁', - 'header.form.easyCode': 'EasyCode', - 'header.modal.form.edit': '琛ㄥ崟-缂栬緫', 'model.action': '鎸夐挳', - 'header.modal.action.copy': '鎸夐挳-澶嶅埗', - 'header.modal.form.copy': '琛ㄥ崟-澶嶅埗', - 'header.modal.column.edit': '鏄剧ず鍒�-缂栬緫', - 'header.modal.gridbtn.edit': '鎿嶄綔鍒�-缂栬緫', - 'header.modal.tabs.edit': '鏍囩-缂栬緫', 'form.required.input': 'Please enter the ', 'form.required.select': 'Please select a ', 'form.required.add': 'Please add ', - 'model.tooltip.table.guide': '姝ゅ鍙互娣诲姞椤甸潰閰嶇疆鐩稿叧鐨勫父鐢ㄨ〃锛屽彲閫氳繃宸ュ叿鏍忎腑鐨勬坊鍔犳寜閽紝鍙壒閲忔坊鍔犺〃鏍肩浉鍏冲瓧娈点��', - 'model.tooltip.search.guide': '鍦ㄥ乏渚у伐鍏锋爮銆婃悳绱€�嬩腑锛岄�夋嫨瀵瑰簲鎼滅储妗嗘嫋鑷虫澶勬坊鍔狅紱鎴栫偣鍑绘寜閽�婃坊鍔犳悳绱㈡潯浠躲�嬫壒閲忔坊鍔狅紝閫夋嫨鎵归噺娣诲姞鏃讹紝闇�鎻愬墠閫夋嫨浣跨敤琛ㄣ��', - 'model.tooltip.action.guide': '鍦ㄥ乏渚у伐鍏锋爮銆婃寜閽�嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬寜閽嫋鑷虫澶勬坊鍔狅紝濡傞�夋嫨鎸夐挳绫诲瀷涓鸿〃鍗曘�佹柊鏍囩椤电瓑鍚湁閰嶇疆椤甸潰鐨勬寜閽紝鍙湪宸︿晶宸ュ叿鏍�-鎸夐挳-鍙厤缃寜閽锛岀偣鍑绘寜閽畬鎴愮浉鍏抽厤缃�傛敞锛氬綋璁剧疆鎸夐挳鏄剧ず浣嶇疆涓鸿〃鏍兼椂锛屾樉绀哄垪浼氬鍔犳搷浣滃垪銆�', - 'model.tooltip.column.guide': '鍦ㄥ乏渚у伐鍏锋爮銆婃樉绀哄垪銆嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬樉绀哄垪鎷栬嚦姝ゅ娣诲姞锛涙垨鐐瑰嚮銆婃坊鍔犳樉绀哄垪銆嬫寜閽壒閲忔坊鍔狅紝閫夋嫨鎵归噺娣诲姞鏃讹紝闇�鎻愬墠閫夋嫨浣跨敤琛ㄣ�傛敞锛氭坊鍔犲悎骞跺垪鏃讹紝闇�璁剧疆鍙�夊垪銆�', - 'model.tooltip.tabs.guide': '鍦ㄥ乏渚у伐鍏锋爮銆婃爣绛鹃〉銆嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬爣绛鹃〉鎷栬嚦姝ゅ娣诲姞銆�', 'model.tooltip.func.innerface': '鍑芥暟鍚嶇О闇�浠ableField绛夊瓧绗﹀紑濮�;', } \ No newline at end of file diff --git a/src/locales/zh-CN/main.js b/src/locales/zh-CN/main.js index f2404cb..db616d0 100644 --- a/src/locales/zh-CN/main.js +++ b/src/locales/zh-CN/main.js @@ -6,12 +6,10 @@ 'main.submit': '鎻愪氦', 'main.return': '杩斿洖', 'main.close': '鍏抽棴', - 'main.all': '鍏ㄩ儴', 'main.cancel': '鍙栨秷', 'main.logout': '閫�鍑�', 'main.doc': '鏂囨。涓績', 'main.logout.hint': '鎮ㄧ‘瀹氳閫�鍑哄悧?', - 'main.verup': '鐗堟湰鍗囩骇', 'main.password': '淇敼瀵嗙爜', 'main.login.develop': '鐧诲綍寮�鍙戞満', 'main.revert.default': '鎭㈠榛樿璁剧疆', @@ -46,7 +44,6 @@ 'main.form.link.error': '鑱斿姩鑿滃崟璁剧疆閿欒锛�', 'main.form.picture.check': '鏌ョ湅鍥剧墖', 'main.role.title': '瑙掕壊鍒楄〃', - 'main.view.notFound': '鎶辨瓑锛屾偍璁块棶鐨勯〉闈笉瀛樺湪锛岃鑱旂郴绠$悊鍛樸��', 'form.required.input': '璇疯緭鍏�', 'form.required.select': '璇烽�夋嫨' } \ No newline at end of file diff --git a/src/locales/zh-CN/model.js b/src/locales/zh-CN/model.js index cddbf3b..0cc3079 100644 --- a/src/locales/zh-CN/model.js +++ b/src/locales/zh-CN/model.js @@ -46,57 +46,34 @@ 'model.menu.basemsg': '璇峰畬鍠勮彍鍗曞熀鏈俊鎭紒', 'header.menu.basedata': '鍩烘湰淇℃伅', 'header.menu.table.add': '娣诲姞琛ㄥ悕', - 'header.menu.table.placeholder': '璇烽�夋嫨琛ㄥ悕', 'header.menu.config.placeholder': '閰嶇疆宸蹭慨鏀癸紝鏄惁淇濆瓨閰嶇疆淇℃伅锛�', 'header.menu.config.notsave': '鑿滃崟灏氭湭淇濆瓨锛岃鍏堜繚瀛樿彍鍗曢厤缃紒', 'header.menu.config.update': '鑿滃崟閰嶇疆宸蹭慨鏀癸紝璇蜂繚瀛橈紒', - 'model.menu.template.empty': '鑿滃崟妯℃澘涓㈠け锛岃閲嶆柊閫夋嫨妯℃澘锛�', 'model.menu.presave': '鑿滃崟椤哄簭宸茶皟鏁达紝璇蜂繚瀛橈紒', 'header.menu.form': '琛ㄥ崟', - 'header.menu.form.add': '娣诲姞琛ㄥ崟', - 'header.menu.form.configurable': '琛ㄥ崟閰嶇疆', 'header.menu.group.add': '娣诲姞鍒嗙粍', - 'header.menu.group.manage': '鍒嗙粍绠$悊', 'header.menu.search': '鎼滅储', - 'header.menu.search.add': '娣诲姞鎼滅储鏉′欢', 'header.menu.action': '鎸夐挳', - 'header.menu.action.configurable': '鎸夐挳閰嶇疆', - 'header.menu.tab.configurable': '鏍囩閰嶇疆', 'header.menu.column': '鏄剧ず鍒�', - 'model.menu.column.add': '娣诲姞鏄剧ず鍒�', - 'model.menu.field.add': '娣诲姞瀛楁', - 'header.menu.page.configurable': '椤甸潰閰嶇疆', - 'header.menu.viewName': '椤甸潰鍚嶇О', 'header.menu.tabName': '鏍囩鍚嶇О', 'header.menu.Remark': '澶囨敞', - 'header.menu.func.create': '鍒涘缓瀛樺偍杩囩▼', - 'header.menu.interface.create': '鍒涘缓鎺ュ彛', 'header.menu.tab': '鏍囩椤�', 'model.menu.tab.subtable': '瀛愯〃', 'header.menu.datasource': '鏁版嵁鏉ユ簮', 'header.menu.maintable': '涓昏〃', 'header.menu.query': '鏌ヨ', - 'model.form.tabType': '鏍囩绫诲瀷', - 'header.form.search.placeholder': '璇锋坊鍔犳悳绱㈡潯浠�', 'header.form.modal.placeholder': '璇锋坊鍔犺〃鍗�', - 'header.form.action.placeholder': '璇锋坊鍔犳寜閽�', - 'header.form.column.placeholder': '璇锋坊鍔犳樉绀哄垪', 'model.form.width': '瀹藉害', 'header.form.title': '鏍囬', 'model.form.field': '瀛楁', 'header.form.innerFunc': '鍐呴儴鍑芥暟', 'header.form.outerFunc': '澶栭儴鍑芥暟', 'header.form.callbackFunc': '鍥炶皟鍑芥暟', - 'header.form.position': '鏄剧ず浣嶇疆', 'model.form.afterSuccess': '鎴愬姛鍚�', 'model.form.afterError': '澶辫触鍚�', - 'header.form.messageTip': '淇℃伅鎻愮ず', 'header.form.refresh': '鍒锋柊', 'header.form.refresh.never': '涓嶅埛鏂�', 'header.form.refresh.grid': '鍒锋柊琛ㄦ牸', - 'header.form.refresh.maingrid': '鍒锋柊涓昏〃锛堣锛�', - 'header.form.refresh.equaltab': '鍒锋柊鍚岀骇鏍囩', - 'header.form.refresh.subgrid': '鍒锋柊瀛愯〃', 'header.form.popClose': '鍏抽棴鍚�', 'header.form.toolbar': '宸ュ叿鏍�', 'header.form.grid': '琛ㄦ牸', @@ -116,7 +93,6 @@ 'model.form.picture': '鍥剧墖', 'model.form.number': '鏁板瓧', 'header.form.letter': '瀛楁瘝', - 'header.form.letter&number': '瀛楁瘝+鏁板瓧', 'model.form.colspan': '鍚堝苟鍒�', 'model.form.select': '涓嬫媺閫夋嫨', 'model.form.multiselect': '涓嬫媺澶氶��', @@ -132,7 +108,6 @@ 'header.form.initval': '鍒濆鍊�', 'header.form.decimal': '灏忔暟浣�', 'header.form.format': '鏍煎紡鍖�', - 'header.form.thdSeparator': '鍗冨垎浣�', 'header.form.prefix': '鍓嶇紑', 'header.form.postfix': '鍚庣紑', 'header.form.isRequired': '琛岃缃�', @@ -163,8 +138,6 @@ 'model.form.alignRight': '鍙冲榻�', 'model.form.alignCenter': '灞呬腑', 'model.form.columnWidth': '鍒楀', - 'header.form.setAll': '璁剧疆鍏ㄩ儴', - 'header.form.resourceType': '閫夐」鏉ユ簮', 'header.form.custom': '鑷畾涔�', 'header.form.datasource': '鏁版嵁婧�', 'model.form.tablename': '琛ㄥ悕', @@ -172,74 +145,27 @@ 'header.form.action.insert': '娣诲姞', 'header.form.action.update': '淇敼', 'header.form.action.audit': '瀹℃牳', - 'header.form.action.insertOrUpdate': '娣诲姞鎴栦慨鏀�', - 'header.form.action.LogicDelete': '閫昏緫鍒犻櫎', - 'header.form.action.delete': '鐗╃悊鍒犻櫎', - 'header.form.valueField': '鍊悸峰瓧娈�', - 'header.form.valueText': '鏂囨湰路瀛楁', - 'header.form.orderBy': '鎺掑簭路瀛楁', - 'header.form.orderType': '鎺掑簭鏂瑰紡', 'header.form.match': '鍖归厤妯″紡', 'header.form.matchVal': '鍖归厤鍊�', 'header.form.asc': '姝e簭', 'header.form.desc': '鍊掑簭', - 'header.form.linkField': '鍏宠仈瀛楁', 'header.form.dropdown': '涓嬫媺鑿滃崟', 'header.form.button': '鎸夐挳', 'model.form.style': '椋庢牸', 'model.form.color': '棰滆壊', - 'header.form.order': '鎺掑垪', - 'header.form.horizontal': '妯悜', - 'header.form.vertical': '绾靛悜', - 'header.form.vertical2': '绾靛悜(2鍒�)', - 'header.form.topPicBottomText': '涓婂浘涓嬫枃', - 'header.form.leftPicRightText': '宸﹀浘鍙虫枃', - 'model.form.selectItem.error': '涓嬫媺閫夐」璁剧疆閿欒锛�', - 'header.form.readonly': '鍙', - 'header.form.queryType': '鏌ヨ绫诲瀷', - 'header.form.query': '鏌ヨ', - 'header.form.statistics': '缁熻', - 'header.form.database': '鏁版嵁搴�', - 'header.form.database.local': '鏈湴', - 'header.form.database.sso': '绯荤粺', - 'header.form.linkMain': '鍏宠仈涓昏〃', 'model.query.delete': '纭畾鍒犻櫎鍚�?', - 'header.form.up': '涓婄Щ', - 'header.form.down': '涓嬬Щ', 'header.form.status.change': '鐘舵�佸垏鎹�', 'model.status.forbidden': '绂佺敤', 'model.status.open': '鍚敤', - 'header.form.readin': '鑷姩濉厖', - 'header.form.pagination': '鍒嗛〉', - 'header.form.regular': '姝e垯鏍¢獙', - 'header.form.quickadd': '蹇嵎娣诲姞', 'model.form.funcbutton': '鍔熻兘鎸夐挳', - 'header.form.funcType': '鍔熻兘绫诲瀷', - 'header.form.func.changeuser': '鍒囨崲鐢ㄦ埛', - 'header.form.func.print': '鎵撳嵃', 'model.form.execMode': '鎵ц鏂瑰紡', - 'header.form.thawbutton': '瑙e喕鎸夐挳', - 'header.form.maxRows': '鏈�澶ц鏁�', 'header.form.paste': '绮樿创', 'header.form.ratio': '姣斾緥', 'header.form.blacklist': '榛戝悕鍗�', 'model.form.linkmenu': '鍏宠仈鑿滃崟', - 'header.form.clickscale': '鐐瑰嚮缂╂斁', - 'header.form.easyCode': '鍔╄鐮�', - 'header.modal.form.edit': '琛ㄥ崟-缂栬緫', 'model.action': '鎸夐挳', - 'header.modal.action.copy': '鎸夐挳-澶嶅埗', - 'header.modal.form.copy': '琛ㄥ崟-澶嶅埗', - 'header.modal.column.edit': '鏄剧ず鍒�-缂栬緫', - 'header.modal.gridbtn.edit': '鎿嶄綔鍒�-缂栬緫', - 'header.modal.tabs.edit': '鏍囩-缂栬緫', 'form.required.input': '璇疯緭鍏�', 'form.required.select': '璇烽�夋嫨', 'form.required.add': '璇锋坊鍔�', - 'model.tooltip.table.guide': '娣诲姞椤甸潰閰嶇疆鐩稿叧鐨勫父鐢ㄨ〃锛屽彲閫氳繃甯哥敤琛ㄥ瓧娈垫壒閲忔坊鍔犳悳绱㈡潯浠躲�佹樉绀哄垪銆佹暟鎹簮瀛楁闆嗙瓑銆�', - 'model.tooltip.search.guide': '鍦ㄥ乏渚у伐鍏锋爮銆婃悳绱€�嬩腑锛岄�夋嫨瀵瑰簲鎼滅储妗嗘嫋鑷虫澶勬坊鍔狅紱鎴栫偣鍑绘寜閽�婃坊鍔犳悳绱㈡潯浠躲�嬫壒閲忔坊鍔狅紝閫夋嫨鎵归噺娣诲姞鏃讹紝闇�鎻愬墠閫夋嫨浣跨敤琛ㄣ��', - 'model.tooltip.action.guide': '鍦ㄥ乏渚у伐鍏锋爮銆婃寜閽�嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬寜閽嫋鑷虫澶勬坊鍔狅紝濡傞�夋嫨鎸夐挳绫诲瀷涓鸿〃鍗曘�佹柊鏍囩椤电瓑鍚湁閰嶇疆椤甸潰鐨勬寜閽紝鍙湪宸︿晶宸ュ叿鏍�-鎸夐挳-鍙厤缃寜閽锛岀偣鍑绘寜閽畬鎴愮浉鍏抽厤缃�傛敞锛氬綋璁剧疆鎸夐挳鏄剧ず浣嶇疆涓鸿〃鏍兼椂锛屾樉绀哄垪浼氬鍔犳搷浣滃垪銆�', - 'model.tooltip.column.guide': '鍦ㄥ乏渚у伐鍏锋爮銆婃樉绀哄垪銆嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬樉绀哄垪鎷栬嚦姝ゅ娣诲姞锛涙垨鐐瑰嚮銆婃坊鍔犳樉绀哄垪銆嬫寜閽壒閲忔坊鍔狅紝閫夋嫨鎵归噺娣诲姞鏃讹紝闇�鎻愬墠閫夋嫨浣跨敤琛ㄣ�傛敞锛氭坊鍔犲悎骞跺垪鏃讹紝闇�璁剧疆鍙�夊垪銆�', - 'model.tooltip.tabs.guide': '鍦ㄥ乏渚у伐鍏锋爮銆婃爣绛鹃〉銆嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬爣绛鹃〉鎷栬嚦姝ゅ娣诲姞銆�', 'model.tooltip.func.innerface': '鍑芥暟鍚嶇О闇�浠ableField绛夊瓧绗﹀紑濮�;', } \ No newline at end of file diff --git a/src/menu/baseScript/index.jsx b/src/menu/baseScript/index.jsx deleted file mode 100644 index 696dc32..0000000 --- a/src/menu/baseScript/index.jsx +++ /dev/null @@ -1,75 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import { is, fromJS } from 'immutable' -import { Modal, Button, notification } from 'antd' - -import SettingForm from './settingform' -import './index.scss' - -class BaseScript extends Component { - static propTpyes = { - config: PropTypes.object, - updateConfig: PropTypes.func - } - - state = { - visible: false, - baseSql: null - } - - shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.state), fromJS(nextState)) - } - - trigger = () => { - const { config } = this.props - - this.setState({ - baseSql: config.baseSql || {enable: true, sql: ''}, - visible: true - }) - } - - submit = () => { - let config = fromJS(this.props.config).toJS() - - this.settingRef.handleConfirm().then(res => { - if (res.enable && (!res.sql || /^\s+$/ig.test(res.sql))) { - notification.warning({ - top: 92, - message: '鍚敤鍩虹SQL鏃讹紝璇峰畬鍠剆ql璇彞銆�', - duration: 5 - }) - return - } - - config.baseSql = res - this.props.updateConfig(config) - this.setState({ visible: false }) - }) - } - - render() { - const { visible, baseSql } = this.state - - return ( - <div style={{display: 'inline-block'}}> - <Button className="mk-border-danger" icon="database" onClick={this.trigger}>鍩虹SQL</Button> - <Modal - title="鍩虹SQL" - wrapClassName="base-script-modal" - visible={visible} - width={800} - maskClosable={false} - onOk={this.submit} - onCancel={() => { this.setState({ visible: false })}} - destroyOnClose - > - <SettingForm baseSql={baseSql} wrappedComponentRef={(inst) => this.settingRef = inst}/> - </Modal> - </div> - ) - } -} - -export default BaseScript \ No newline at end of file diff --git a/src/menu/baseScript/index.scss b/src/menu/baseScript/index.scss deleted file mode 100644 index 377efe2..0000000 --- a/src/menu/baseScript/index.scss +++ /dev/null @@ -1,8 +0,0 @@ -.base-script-modal { - .ant-modal { - top: 70px; - } - .ant-modal-body { - min-height: 150px; - } -} \ No newline at end of file diff --git a/src/menu/baseScript/settingform/index.jsx b/src/menu/baseScript/settingform/index.jsx deleted file mode 100644 index fbcc584..0000000 --- a/src/menu/baseScript/settingform/index.jsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import { Form, Row, Col, Switch } from 'antd' - -import CodeMirror from '@/templates/zshare/codemirror' -// import './index.scss' - -class SettingForm extends Component { - static propTpyes = { - baseSql: PropTypes.object - } - - state = { - enable: this.props.baseSql.enable - } - - handleConfirm = () => { - // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� - return new Promise((resolve, reject) => { - this.props.form.validateFieldsAndScroll((err, values) => { - if (!err) { - values.enable = this.state.enable - resolve(values) - } else { - reject(err) - } - }) - }) - } - - render() { - const { baseSql } = this.props - const { getFieldDecorator } = this.props.form - - const formItemLayout = { - labelCol: { - xs: { span: 24 }, - sm: { span: 3 } - }, - wrapperCol: { - xs: { span: 24 }, - sm: { span: 21 } - } - } - - return ( - <Form {...formItemLayout}> - <Row gutter={24}> - <Col span={24}> - <Form.Item label="鏄惁鍚敤"> - <Switch defaultChecked={baseSql.enable} onChange={(val) => {this.setState({enable: val})}} checkedChildren="鏄�" unCheckedChildren="鍚�" /> - </Form.Item> - </Col> - <Col span={24}> - <Form.Item label="SQL"> - {getFieldDecorator('sql', { - initialValue: baseSql.sql || '' - })( - <CodeMirror /> - )} - </Form.Item> - </Col> - </Row> - </Form> - ) - } -} - -export default Form.create()(SettingForm) \ No newline at end of file diff --git a/src/menu/bgcontroller/index.jsx b/src/menu/bgcontroller/index.jsx index 7018a0c..ef3cdd6 100644 --- a/src/menu/bgcontroller/index.jsx +++ b/src/menu/bgcontroller/index.jsx @@ -3,8 +3,6 @@ import { is, fromJS } from 'immutable' import { Form, Select } from 'antd' -import zhCN from '@/locales/zh-CN/mob.js' -import enUS from '@/locales/en-US/mob.js' import asyncComponent from '@/utils/asyncComponent' import './index.scss' @@ -19,7 +17,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, backgroundColor: '', backgroundImage: '', backgroundSize: '', diff --git a/src/menu/components/card/balcony/index.jsx b/src/menu/components/card/balcony/index.jsx index bd38d08..cd956c7 100644 --- a/src/menu/components/card/balcony/index.jsx +++ b/src/menu/components/card/balcony/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Checkbox } from 'antd' +import { Popover, Checkbox } from 'antd' +import { PlusOutlined, PlusSquareOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined, SettingOutlined, ToolOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -9,8 +10,6 @@ import MKEmitter from '@/utils/events.js' import Utils from '@/utils/utils.js' import getWrapForm from './options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) @@ -29,7 +28,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, back: false } @@ -65,6 +63,10 @@ _card.wrap = config.wrap _card.wrap.name = card.name _card.style = config.style + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts _card.elements = _card.elements.map(elem => { elem.uuid = Utils.getuuid() @@ -210,22 +212,22 @@ <div className="menu-balcony-edit-box" style={_style} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍏冪礌" onClick={this.addElement} type="plus" /> - <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> + <PlusOutlined className="plus" title="娣诲姞鍏冪礌" onClick={this.addElement} /> + <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} /> <NormalForm title="娴姩鍗¤缃�" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="balcony" card={card}/> <PasteComponent options={['action', 'customCardElement']} updateConfig={this.pasteComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} /> <ClockComponent config={card} updateConfig={this.updateComponent}/> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} - {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} + {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> {card.wrap.checkAll === 'show' ? <div className="check-all"><Checkbox>鍏ㄩ��</Checkbox></div> : null} <CardCellComponent cards={card} cardCell={card} elements={card.elements} updateElement={this.updateCard}/> diff --git a/src/menu/components/card/cardcellcomponent/dragaction/action.jsx b/src/menu/components/card/cardcellcomponent/dragaction/action.jsx index 60cf952..364400e 100644 --- a/src/menu/components/card/cardcellcomponent/dragaction/action.jsx +++ b/src/menu/components/card/cardcellcomponent/dragaction/action.jsx @@ -1,8 +1,10 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover, Button } from 'antd' +import { Popover, Button, Switch, Checkbox } from 'antd' +import { EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined, ProfileOutlined } from '@ant-design/icons' import { resetStyle } from '@/utils/utils-custom.js' +import MkIcon from '@/components/mk-icon' import './index.scss' const Card = ({ id, card, moveCard, findCard, editCard, copyCard, delCard, profileCard, changeStyle, doubleClickCard }) => { @@ -28,7 +30,7 @@ }) let hasProfile = false - if (['pop', 'prompt', 'exec'].includes(card.OpenType)) { + if (['pop', 'prompt', 'exec', 'form'].includes(card.OpenType)) { hasProfile = true } else if (card.OpenType === 'excelIn' || card.OpenType === 'excelOut') { hasProfile = true @@ -38,26 +40,33 @@ let btnElement = null let _style = resetStyle(card.style) - if (card.show === 'icon') { - btnElement = (<Button style={_style} type="link"><Icon type={card.icon}/></Button>) + + if (card.OpenType === 'form') { + if (card.formType === 'switch') { + btnElement = (<Switch style={_style} size={card.size} checkedChildren={card.openText || ''} unCheckedChildren={card.closeText || ''}/>) + } else { + btnElement = (<Checkbox style={_style}></Checkbox>) + } + } else if (card.show === 'icon') { + btnElement = (<Button style={_style} type="link"><MkIcon type={card.icon}/></Button>) } else if (card.show === 'link') { - btnElement = (<Button style={_style} type="link">{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button>) + btnElement = (<Button style={_style} type="link">{card.label}{card.icon ? <MkIcon type={card.icon}/> : null}</Button>) } else { - btnElement = (<Button style={_style}> {card.icon ? <Icon type={card.icon}/> : null}{card.label} </Button>) + btnElement = (<Button style={_style}> {card.icon ? <MkIcon type={card.icon}/> : null}{card.label} </Button>) } return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => editCard(id)} /> - <Icon className="copy" title="澶嶅埗" type="copy" onClick={() => copyCard(id)} /> - <Icon className="close" title="鍒犻櫎" type="close" onClick={() => delCard(id)} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => changeStyle(id)} type="font-colors" /> - {hasProfile ? <Icon className="profile" title="setting" type="profile" onClick={() => profileCard(id)} /> : null} + <EditOutlined className="edit" title="缂栬緫" onClick={() => editCard(id)} /> + <CopyOutlined className="copy" title="澶嶅埗" onClick={() => copyCard(id)} /> + <CloseOutlined className="close" title="鍒犻櫎" onClick={() => delCard(id)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => changeStyle(id)} /> + {hasProfile ? <ProfileOutlined className="profile" title="setting" onClick={() => profileCard(id)} /> : null} </div> } trigger="hover"> <div ref={node => drag(drop(node))} className={'ant-col card-button-cell ant-col-' + card.width} onDoubleClick={(e) => {e.stopPropagation(); doubleClickCard(id)}}> - <div style={{opacity: isDragging ? 0 : 1}}> + <div style={{opacity: isDragging ? 0 : 1, ...card.wrapStyle}}> {btnElement} </div> </div> diff --git a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx index a4147f1..9b75923 100644 --- a/src/menu/components/card/cardcellcomponent/dragaction/card.jsx +++ b/src/menu/components/card/cardcellcomponent/dragaction/card.jsx @@ -1,6 +1,9 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { EditOutlined, CopyOutlined, CloseOutlined, FontColorsOutlined } from '@ant-design/icons' + +import MkIcon from '@/components/mk-icon' import moment from 'moment' import demo1 from '@/assets/img/demo1.jpg' @@ -75,7 +78,7 @@ <div className={'ant-mk-text line' + (card.height || '')} style={{height: card.innerHeight || 'auto'}}>{val}</div> ) } else if (card.eleType === 'icon') { - return (<Icon type={card.icon}/>) + return (<MkIcon type={card.icon}/>) } else if (card.eleType === 'slider') { let val = card.value ? (card.value / card.maxValue) * 100 : 30 return <MkProgress value={val} config={card}/> @@ -162,10 +165,10 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => editCard(id)} /> - <Icon className="copy" title="澶嶅埗" type="copy" onClick={() => copyCard(id)} /> - <Icon className="close" title="鍒犻櫎" type="close" onClick={() => delCard(id)} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => changeStyle(id)} type="font-colors" /> + <EditOutlined className="edit" title="缂栬緫" onClick={() => editCard(id)} /> + <CopyOutlined className="copy" title="澶嶅埗" onClick={() => copyCard(id)} /> + <CloseOutlined className="close" title="鍒犻櫎" onClick={() => delCard(id)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => changeStyle(id)}/> {['text', 'number', 'slider', 'sequence', 'formula'].includes(card.eleType) ? <MarkColumn columns={fields} type={card.eleType} marks={card.marks} onSubmit={(vals) => updateMarks({...card, marks: vals})} /> : null } </div> } trigger="hover"> diff --git a/src/menu/components/card/cardcellcomponent/dragaction/index.jsx b/src/menu/components/card/cardcellcomponent/dragaction/index.jsx index bc62df0..abb9604 100644 --- a/src/menu/components/card/cardcellcomponent/dragaction/index.jsx +++ b/src/menu/components/card/cardcellcomponent/dragaction/index.jsx @@ -47,6 +47,13 @@ let _val = fromJS(copycard).toJS() + if (_val.control) { + _val.control = '' + + delete _val.controlField + delete _val.controlVal + } + copycard.uuid = Utils.getuuid() copycard.originCard = card diff --git a/src/menu/components/card/cardcellcomponent/elementform/index.jsx b/src/menu/components/card/cardcellcomponent/elementform/index.jsx index 4f24969..5a4fad8 100644 --- a/src/menu/components/card/cardcellcomponent/elementform/index.jsx +++ b/src/menu/components/card/cardcellcomponent/elementform/index.jsx @@ -1,7 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Row, Col, Input, Select, Icon, Radio, Tooltip, InputNumber } from 'antd' +import { Form, Row, Col, Input, Select, Radio, Tooltip, InputNumber } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' import { formRule } from '@/utils/option.js' @@ -11,7 +11,7 @@ const { TextArea } = Input const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent')) -const MkIcon = asyncComponent(() => import('@/components/mkIcon')) +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) const cardTypeOptions = { sequence: ['eleType', 'width'], @@ -79,9 +79,9 @@ item.label = '鍊�' } else if (item.key === 'format') { if (card.eleType === 'text') { - item.options = item.oriOptions.filter(op => op.value !== 'percent' && op.value !== 'thdSeparator') + item.options = item.oriOptions.filter(op => !['percent', 'thdSeparator', 'abs'].includes(op.value)) } else if (card.eleType === 'number') { - item.options = item.oriOptions.filter(op => op.value !== 'YYYY-MM-DD') + item.options = item.oriOptions.filter(op => !op.value || ['percent', 'thdSeparator', 'abs'].includes(op.value)) } } else if (item.key === 'url') { item.required = card.eleType !== 'qrcode' @@ -98,7 +98,7 @@ getOptions = (eleType, datatype, link, showType, showInfo) => { let _options = fromJS(cardTypeOptions[eleType]).toJS() // 閫夐」鍒楄〃 - if (['text', 'number', 'picture', 'link', 'slider', 'barcode', 'qrcode', 'video'].includes(eleType)) { + if (['text', 'number', 'picture', 'slider', 'barcode', 'qrcode', 'video'].includes(eleType)) { if (datatype === 'dynamic') { _options.push('field') } else if (eleType === 'picture' || eleType === 'video') { @@ -108,13 +108,9 @@ } if (['text', 'picture'].includes(eleType) && link) { - if (link === 'dynamic' || link === 'static' || link === 'custom') { - _options.push('linkurl', 'joint') - } else if (link === 'page') { - _options.push('copyMenuId', 'joint', 'open') - } else if (link === 'linkpage') { - _options.push('linkmenu', 'joint', 'open') - } + // if (link === 'dynamic' || link === 'static') { + _options.push('linkurl', 'joint', 'linkType') + // } } else if (eleType === 'picture' && !link) { _options.push('scale') } else if (eleType === 'slider') { @@ -177,9 +173,9 @@ } } else if (item.key === 'format') { if (value === 'text') { - item.options = item.oriOptions.filter(op => op.value !== 'percent' && op.value !== 'thdSeparator') + item.options = item.oriOptions.filter(op => !['percent', 'thdSeparator', 'abs'].includes(op.value)) } else if (value === 'number') { - item.options = item.oriOptions.filter(op => op.value !== 'YYYY-MM-DD') + item.options = item.oriOptions.filter(op => !op.value || ['percent', 'thdSeparator', 'abs'].includes(op.value)) } } else if (item.key === 'url') { item.required = value !== 'qrcode' @@ -200,6 +196,8 @@ this.props.form.setFieldsValue({width: 24, color: '#1890ff'}) } else if (value === 'splitline') { this.props.form.setFieldsValue({width: 24, color: '#e8e8e8'}) + } else if (value === 'qrcode') { + this.props.form.setFieldsValue({color: '#000000'}) } else if (value === 'text' || value === 'number') { this.props.form.setFieldsValue({format: ''}) } @@ -385,7 +383,7 @@ > {item.options.map((option, index) => <Select.Option id={`${index}`} title={option.text} key={`${index}`} value={option.value}> - {item.key === 'icon' && option.value && <Icon type={option.value} />} {option.text} + {option.text} </Select.Option> )} </Select> @@ -409,7 +407,7 @@ message: this.props.dict['form.required.select'] + item.label + '!' }] })( - <MkIcon /> + <MkEditIcon /> )} </Form.Item> </Col> diff --git a/src/menu/components/card/cardcellcomponent/formconfig.jsx b/src/menu/components/card/cardcellcomponent/formconfig.jsx index ac90789..c101166 100644 --- a/src/menu/components/card/cardcellcomponent/formconfig.jsx +++ b/src/menu/components/card/cardcellcomponent/formconfig.jsx @@ -136,7 +136,15 @@ { value: '', text: '鏃�' }, { value: 'percent', text: '鐧惧垎鏁�' }, { value: 'thdSeparator', text: '鍗冨垎浣�' }, - { value: 'YYYY-MM-DD', text: 'YYYY-MM-DD' } + { value: 'abs', text: '缁濆鍊�' }, + { value: 'YYYY-MM-DD', text: 'YYYY-MM-DD' }, + { value: 'MM鏈圖D鏃�', text: 'MM鏈圖D鏃�' }, + { value: 'YYYY骞碝M鏈圖D鏃�', text: 'YYYY骞碝M鏈圖D鏃�' }, + { value: 'HH:mm', text: '鏃跺垎锛堜緥锛�16:57锛�' }, + { value: 'ahh:mm', text: '鑷畾涔�1锛堜緥锛氫笂鍗�10:57锛�' }, + { value: 'MM鏈圖D鏃� ahh:mm', text: '鑷畾涔�2锛堜緥锛�12鏈�17鏃� 涓婂崍10:57锛�' }, + { value: 'calendar1', text: '鑷畾涔�3锛堜緥锛氫粖澶� 涓婂崍10:57锛�' }, + { value: 'calendar2', text: '鑷畾涔�4锛堜緥锛氬垰鍒氥�佹槰澶┿��5澶╁墠锛�' }, ] }, { @@ -190,7 +198,8 @@ { type: 'color', key: 'color', - label: '杩涘害鏉¢鑹�', + label: '棰滆壊', + tooltip: '杩涘害鏉″畬鎴愬尯鍩熴�佸垎鍓茬嚎鎴栦簩缁寸爜鐨勯鑹层��', initVal: card.color || '#1890ff', required: true }, @@ -394,7 +403,7 @@ initVal: card.link || '', tooltip: '鍔ㄦ�佸湴鍧�涓虹粦瀹氬瓧娈靛�笺��', required: false, - forbid: isApp, + // forbid: isApp, options: [ { value: '', text: '鏃�' }, { value: 'dynamic', text: '鍔ㄦ��' }, @@ -403,15 +412,15 @@ }, { type: 'radio', - key: 'link', - label: '閾炬帴', - initVal: card.link || '', + key: 'linkType', + label: '閾炬帴绫诲瀷', + initVal: card.linkType || 'other', required: false, - forbid: !isApp, + // forbid: isApp, options: [ - { value: '', text: '鏃�' }, - { value: 'linkpage', text: '鍏宠仈鑿滃崟' }, - { value: 'custom', text: '閾炬帴' } + { value: 'tel', text: '鐢佃瘽' }, + { value: 'email', text: '閭' }, + { value: 'other', text: '鍏朵粬' } ] }, { @@ -434,18 +443,18 @@ forbid: !isApp, options: appMenus }, - { - type: 'radio', - key: 'open', - label: '鎵撳紑鏂瑰紡', - initVal: card.open || 'blank', - required: false, - forbid: !isApp, - options: [ - { value: 'blank', text: '鏂伴〉闈�' }, - { value: 'self', text: '褰撳墠椤甸潰' } - ] - }, + // { + // type: 'radio', + // key: 'open', + // label: '鎵撳紑鏂瑰紡', + // initVal: card.open || 'blank', + // required: false, + // forbid: !isApp, + // options: [ + // { value: 'blank', text: '鏂伴〉闈�' }, + // { value: 'self', text: '褰撳墠椤甸潰' } + // ] + // }, // { // type: 'select', // key: 'copyMenuId', diff --git a/src/menu/components/card/cardcellcomponent/index.jsx b/src/menu/components/card/cardcellcomponent/index.jsx index 7686036..db7b2ed 100644 --- a/src/menu/components/card/cardcellcomponent/index.jsx +++ b/src/menu/components/card/cardcellcomponent/index.jsx @@ -145,7 +145,14 @@ let options = ['font', 'border', 'padding', 'margin', 'background'] if (element.eleType === 'button') { - options.push('width', 'float') + if (element.OpenType === 'form') { + options = ['margin', 'float'] + } else { + options.push('width', 'minHeight', 'float') + } + if (element.wrapStyle) { + _style.float = element.wrapStyle.textAlign || 'left' + } } else if (element.eleType === 'picture') { options = ['border', 'margin'] } else if (element.eleType === 'slider') { @@ -167,11 +174,11 @@ if (comIds.length !== 3 || comIds[0] !== cards.uuid || comIds[1] !== cardCell.uuid || !card) return - if (card.eleType === 'button') { - if ((style.paddingLeft || style.paddingRight) && !style.width) { - style.width = 'auto' - } - } + // if (card.eleType === 'button') { + // if ((style.paddingLeft || style.paddingRight) && !style.width) { + // style.width = 'auto' + // } + // } let _card = this.resetCardStyle(card, style) @@ -229,7 +236,12 @@ _card.innerHeight = _card.barHeight + (_card.displayValue === 'true' ? fontSize + 2 : 0) } else if (_card.eleType === 'button') { // 鎷嗗垎style - _card.style = style + _card.style = fromJS(style).toJS() + + if (style.float) { + _card.wrapStyle = {textAlign: style.float} + delete _card.style.float + } } else { _card.style = style } @@ -406,9 +418,13 @@ } delete res.focus - let style = {} - if (res.class !== cell.class || res.show !== cell.show || !res.style) { + if (res.OpenType === 'form') { + if (cell.OpenType !== 'form') { + res.style = {} + } + } else if (res.class !== cell.class || res.show !== cell.show || !res.style) { + let style = {} if (res.show === 'link' || res.show === 'icon') { style.color = color[res.class] style.backgroundColor = 'transparent' @@ -416,8 +432,8 @@ style.color = '#ffffff' style.backgroundColor = color[res.class] } + res.style = {...res.style, ...style} } - res.style = {...res.style, ...style} return res } @@ -591,6 +607,25 @@ let btn = cards.action[index] btn.eleType = 'button' + if (!btn.width) { + btn.width = 12 + } + if (btn.color) { + btn.style = btn.style || {} + btn.style.color = '#ffffff' + if (btn.color === 'primary') { + btn.style.backgroundColor = '#1677ff' + } else if (btn.color === 'danger') { + btn.style.backgroundColor = '#ff3141' + } else if (btn.color === 'warning') { + btn.style.backgroundColor = '#ff8f1f' + } else if (btn.color === 'success') { + btn.style.backgroundColor = '#00b578' + } else if (btn.color === 'light') { + btn.style.backgroundColor = '#cccccc' + } + } + let _elements = [...this.state.elements, btn] this.setState({ @@ -622,9 +657,9 @@ <div onDoubleClick={(e) => e.stopPropagation()}> {/* 缂栬緫鎸夐挳锛氬鍒躲�佺紪杈� */} <Modal - title={'缂栬緫鍏冪礌'} + title="缂栬緫鍏冪礌" visible={visible} - width={800} + width={850} maskClosable={false} onCancel={this.editModalCancel} onOk={this.handleSubmit} diff --git a/src/menu/components/card/cardcellcomponent/index.scss b/src/menu/components/card/cardcellcomponent/index.scss index 855eaae..df43e0a 100644 --- a/src/menu/components/card/cardcellcomponent/index.scss +++ b/src/menu/components/card/cardcellcomponent/index.scss @@ -6,7 +6,7 @@ .card-button-cell { float: left; - button { + button:not(.ant-switch) { width: 100%; background-size: cover; background-position: center center; @@ -14,14 +14,19 @@ min-height: 28px; text-align: center; border-width: 0; + padding: 0; + overflow: hidden; span { font-style: inherit; text-decoration: inherit; font-weight: inherit; } } + .ant-checkbox .ant-checkbox-inner { + border-radius: 15px; + } } .card-cell:hover, .card-button-cell:hover { - box-shadow: 0px 0px 1px #1890ff; + box-shadow: 0px 0px 2px #1890ff; } } diff --git a/src/menu/components/card/cardcomponent/index.jsx b/src/menu/components/card/cardcomponent/index.jsx index 4b43fef..7e36906 100644 --- a/src/menu/components/card/cardcomponent/index.jsx +++ b/src/menu/components/card/cardcomponent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Popover, Icon, Switch, Col, Modal, Button } from 'antd' +import { Popover, Switch, Col, Modal, Button } from 'antd' +import { PlusOutlined, PlusSquareOutlined, EditOutlined, ArrowLeftOutlined, ArrowRightOutlined, SwapOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -13,7 +14,6 @@ const NormalForm = asyncIconComponent(() => import('@/components/normalform')) const CardCellComponent = asyncComponent(() => import('../cardcellcomponent')) -const CardMenus = asyncComponent(() => import('./menus-wrap')) const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent')) const PasteController = asyncIconComponent(() => import('@/components/paste')) @@ -194,7 +194,7 @@ } }) } - return getSettingForm(card.setting, cards.subtype, buttons, card.$cardType, cards.columns) + return getSettingForm(card.setting, cards.subtype, buttons, card.$cardType, cards.columns, card.menus) } updateSetting = (res) => { @@ -220,18 +220,28 @@ }) } + let _card = {...card, setting: res} + + if (res.menus) { + _card.menus = res.menus + + delete res.menus + } else { + delete _card.menus + } + this.setState({ - card: {...card, setting: res} + card: _card }) if (side === 'back' && res.type === 'simple') { this.setState({ side: 'front', - elements: fromJS(card.elements).toJS() + elements: fromJS(_card.elements).toJS() }) } - this.props.updateElement({...card, setting: res}) + this.props.updateElement(_card) } paste = (element, resolve) => { @@ -271,20 +281,42 @@ const { card, appType } = this.state if (card.setting.click === 'menu' && card.setting.menu) { - MKEmitter.emit('changeEditMenu', {MenuID: card.setting.menu}) - } else if (card.setting.click === 'menus' && card.menus && card.menus.length > 0 && cards.subtype === 'datacard' && card.$cardType !== 'extendCard' && (appType === 'mob' || appType === 'pc')) { + if (['IM'].includes(card.setting.menu)) { + if (!sessionStorage.getItem('instantMessage')) return + + let param = { + MenuID: sessionStorage.getItem('instantMessage'), + copyMenuId: '', + type: 'view' + } + + param = window.btoa(window.encodeURIComponent(JSON.stringify(param))) + + MKEmitter.emit('changeEditMenu', {routerUrl: '/imdesign/' + param}) + } else { + MKEmitter.emit('changeEditMenu', {MenuID: card.setting.menu}) + } + } else if (card.setting.click === 'menus' && card.menus && card.menus.length > 0 && cards.subtype === 'datacard' && appType) { this.setState({visible: true}) } } - updateMenus = (res) => { - const { card } = this.state + changeMenu = (MenuId) => { + if (MenuId === 'IM') { + if (!sessionStorage.getItem('instantMessage')) return - this.setState({ - card: {...card, menus: res} - }) - - this.props.updateElement({...card, menus: res}) + let param = { + MenuID: sessionStorage.getItem('instantMessage'), + copyMenuId: '', + type: 'view' + } + + param = window.btoa(window.encodeURIComponent(JSON.stringify(param))) + + MKEmitter.emit('changeEditMenu', {routerUrl: '/imdesign/' + param}) + } else { + MKEmitter.emit('changeEditMenu', {MenuID: MenuId}) + } } render() { @@ -312,29 +344,27 @@ <div className="card-control" onDoubleClick={(e) => e.stopPropagation()}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍏冪礌" onClick={this.addElement} type="plus" /> - <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> + <PlusOutlined className="plus" title="娣诲姞鍏冪礌" onClick={this.addElement} /> + <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} /> <NormalForm title="鍗$墖璁剧疆" width={800} update={this.updateSetting} getForms={this.getSettingForms}> - <Icon type="edit" className="edit" title="缂栬緫"/> + <EditOutlined className="edit" title="缂栬緫"/> </NormalForm> - {cards.subtype === 'datacard' && card.$cardType !== 'extendCard' && card.setting.click === 'menus' ? - <CardMenus card={card} updateMenus={this.updateMenus}/> : null} <CopyComponent type="cardcell" card={card}/> <PasteController options={['action', 'customCardElement']} updateConfig={this.paste} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} /> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="鍓嶇Щ" type="arrow-left" onClick={() => this.props.move(card, 'left')} /> - <Icon className="close" title="鍚庣Щ" type="arrow-right" onClick={() => this.props.move(card, 'right')} /> + <ArrowLeftOutlined className="plus" title="鍓嶇Щ" onClick={() => this.props.move(card, 'left')} /> + <ArrowRightOutlined className="close" title="鍚庣Щ" onClick={() => this.props.move(card, 'right')} /> </div> } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}> - <Icon type="swap" id={card.uuid + 'swap'}/> + <SwapOutlined id={card.uuid + 'swap'}/> </Popover> - {cards.subtype === 'propcard' || card.$cardType === 'extendCard' ? <Icon className="close" title="鍒犻櫎鍗$墖" type="delete" onClick={() => this.props.deleteElement(card)} /> : null} + {cards.subtype === 'propcard' || card.$cardType === 'extendCard' ? <DeleteOutlined className="close" title="鍒犻櫎鍗$墖" onClick={() => this.props.deleteElement(card)} /> : null} {card.setting.type === 'multi' ? <Switch size="small" onClick={this.changeSide} defaultChecked /> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> </div> </div> @@ -359,7 +389,7 @@ <div className="sort">{index + 1}</div> <div className="sign">{item.sign}</div> <div className="name">{item.label}</div> - <div className="action"><span onClick={() => MKEmitter.emit('changeEditMenu', {MenuID: item.menu})}>璇︽儏</span></div> + <div className="action"><span onClick={() => this.changeMenu(item.menu)}>璇︽儏</span></div> </div> })} </Modal> diff --git a/src/menu/components/card/cardcomponent/menus-wrap/index.jsx b/src/menu/components/card/cardcomponent/menus-wrap/index.jsx deleted file mode 100644 index bbd6530..0000000 --- a/src/menu/components/card/cardcomponent/menus-wrap/index.jsx +++ /dev/null @@ -1,95 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import { is, fromJS } from 'immutable' -import { Modal, Icon } from 'antd' - -import MenusForm from './menus' -import './index.scss' - -class MenusWrap extends Component { - static propTpyes = { - card: PropTypes.object, - updateMenus: PropTypes.func - } - - state = { - visible: false, - menus: [], - } - - shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.state), fromJS(nextState)) - } - - trigger = () => { - const { card } = this.props - - let appType = sessionStorage.getItem('appType') || '' - let menulist = [] - - if (appType) { - menulist = sessionStorage.getItem('appMenus') - if (menulist) { - try { - menulist = JSON.parse(menulist) - } catch (e) { - menulist = [] - } - } else { - menulist = [] - } - } else { - menulist = sessionStorage.getItem('fstMenuList') - if (menulist) { - try { - menulist = JSON.parse(menulist) - } catch (e) { - menulist = [] - } - } else { - menulist = [] - } - } - this.setState({ - appType, - menulist, - visible: true, - menus: card.menus || [] - }) - } - - submit = () => { - this.setState({ - visible: false - }) - this.props.updateMenus(this.state.menus) - } - - update = (menus) => { - this.setState({menus}) - } - - render() { - const { visible, menus, appType, menulist } = this.state - - return ( - <> - <Icon type="menu" title="鑿滃崟缁�" onClick={this.trigger}/> - <Modal - title="鑿滃崟缁�" - wrapClassName="menus-field-modal" - visible={visible} - width={900} - maskClosable={false} - onOk={this.submit} - onCancel={() => { this.setState({ visible: false })}} - destroyOnClose - > - <MenusForm menus={menus} appType={appType} menulist={menulist} update={this.update}/> - </Modal> - </> - ) - } -} - -export default MenusWrap \ No newline at end of file diff --git a/src/menu/components/card/cardcomponent/menus-wrap/index.scss b/src/menu/components/card/cardcomponent/menus-wrap/index.scss deleted file mode 100644 index 52caa86..0000000 --- a/src/menu/components/card/cardcomponent/menus-wrap/index.scss +++ /dev/null @@ -1,9 +0,0 @@ -.menus-field-modal { - .ant-modal { - top: 70px; - } - .ant-modal-body { - min-height: 150px; - padding-top: 40px; - } -} \ No newline at end of file diff --git a/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.jsx b/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.jsx deleted file mode 100644 index dd9adcd..0000000 --- a/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.jsx +++ /dev/null @@ -1,120 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import { Form, Row, Col, Button, Input, Select, Cascader, notification } from 'antd' -// import './index.scss' - -class MenusColumn extends Component { - static propTpyes = { - menus: PropTypes.array, - appType: PropTypes.string, - menulist: PropTypes.array, - columnChange: PropTypes.func - } - - handleConfirm = () => { - const { appType, menus, menulist } = this.props - // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� - this.props.form.validateFieldsAndScroll((err, values) => { - if (!err) { - if (menus.filter(item => item.sign === values.sign).length > 0) { - notification.warning({ - top: 92, - message: '鏍囪瘑宸插瓨鍦紒', - duration: 2 - }) - return - } - - if (!appType) { - let fId = values.menu[0] || '' - let sId = values.menu[1] || '' - let tId = values.menu[2] || '' - let label = '' - - menulist.forEach(f => { - if (!fId || fId !== f.value) return - label = f.label - - f.children.forEach(s => { - if (!sId || sId !== s.value) return - label += ' / ' + s.label - - s.children.forEach(t => { - if (!tId || tId !== t.value) return - label += ' / ' + t.label - - values.MenuID = t.MenuID - values.MenuName = t.MenuName - values.MenuNo = t.MenuNo - values.tabType = t.type - values.label = label - }) - }) - }) - } else { - menulist.forEach(f => { - if (values.menu !== f.value) return - values.label = f.label - }) - } - - this.props.columnChange(values) - this.props.form.setFieldsValue({ - sign: '', - menu: appType ? '' : [] - }) - } - }) - } - - render() { - const { appType, menulist } = this.props - const { getFieldDecorator } = this.props.form - const formItemLayout = { - labelCol: { - xs: { span: 24 }, - sm: { span: 8 } - }, - wrapperCol: { - xs: { span: 24 }, - sm: { span: 16 } - } - } - - return ( - <Form {...formItemLayout} className="verify-form"> - <Row gutter={24}> - <Col span={10}> - <Form.Item label="鏍囪瘑"> - {getFieldDecorator('sign', { - initialValue: '' - })(<Input placeholder="" autoComplete="off" />)} - </Form.Item> - </Col> - <Col span={10}> - <Form.Item label="鑿滃崟"> - {getFieldDecorator('menu', { - initialValue: appType ? '' : [], - rules: [ - { - required: true, - message: '璇烽�夋嫨鑿滃崟!' - } - ] - })(appType ? <Select> - {menulist.map((item, i) => (<Select.Option key={i} value={item.value}> {item.label || item.text} </Select.Option>))} - </Select> : <Cascader options={menulist} placeholder=""/>)} - </Form.Item> - </Col> - <Col span={4} className="add"> - <Button onClick={this.handleConfirm} type="primary" className="mk-green"> - 娣诲姞 - </Button> - </Col> - </Row> - </Form> - ) - } -} - -export default Form.create()(MenusColumn) \ No newline at end of file diff --git a/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.scss b/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.scss deleted file mode 100644 index e69de29..0000000 --- a/src/menu/components/card/cardcomponent/menus-wrap/menus/columnform/index.scss +++ /dev/null diff --git a/src/menu/components/card/cardcomponent/menus-wrap/menus/index.jsx b/src/menu/components/card/cardcomponent/menus-wrap/menus/index.jsx deleted file mode 100644 index a37b890..0000000 --- a/src/menu/components/card/cardcomponent/menus-wrap/menus/index.jsx +++ /dev/null @@ -1,125 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import { is, fromJS } from 'immutable' - -import Utils from '@/utils/utils.js' -import ColumnForm from './columnform' -import asyncComponent from '@/utils/asyncComponent' -// import './index.scss' - -const EditTable = asyncComponent(() => import('@/templates/zshare/editTable')) - -class CardMenus extends Component { - static propTpyes = { - appType: PropTypes.string, - menulist: PropTypes.array, - menus: PropTypes.array, - update: PropTypes.func - } - - state = { - columns: [ - { - title: '鏍囪瘑', - dataIndex: 'sign', - inputType: 'input', - editable: true, - unique: true, - required: false, - width: '35%' - }, - { - title: '鑿滃崟', - dataIndex: 'menu', - inputType: !this.props.appType ? 'cascader' : 'select', - editable: true, - required: true, - width: '35%', - render: (text, record) => record.label, - options: this.props.menulist - } - ] - } - - UNSAFE_componentWillMount() { - const { menus } = this.props - - this.setState({ - menus: fromJS(menus).toJS() - }) - } - - columnChange = (values) => { - const { menus } = this.state - values.uuid = Utils.getuuid() - let _menus = [...menus, values] - - this.setState({menus: _menus}) - this.props.update(_menus) - } - - changeColumns = (columns) => { - const { appType, menulist } = this.props - const { menus } = this.state - - let m = {} - menus.forEach(item => { - m[item.uuid] = item - }) - - columns = columns.map(col => { - let ori = m[col.uuid] - if (ori && is(fromJS({...col, $index: 1}), fromJS({...ori, $index: 1}))) return col - if (!appType) { - let fId = col.menu[0] || '' - let sId = col.menu[1] || '' - let tId = col.menu[2] || '' - let label = '' - - menulist.forEach(f => { - if (!fId || fId !== f.value) return - label = f.label - - f.children.forEach(s => { - if (!sId || sId !== s.value) return - label += ' / ' + s.label - - s.children.forEach(t => { - if (!tId || tId !== t.value) return - label += ' / ' + t.label - - col.MenuID = t.MenuID - col.MenuName = t.MenuName - col.MenuNo = t.MenuNo - col.tabType = t.type - col.label = label - }) - }) - }) - } else { - menulist.forEach(f => { - if (col.menu !== f.value) return - col.label = f.label - }) - } - return col - }) - - this.setState({menus: columns}) - this.props.update(columns) - } - - render() { - const { appType, menulist } = this.props - const { menus, columns } = this.state - - return ( - <div style={{minHeight: '250px'}}> - <ColumnForm appType={appType} menus={menus} menulist={menulist} columnChange={this.columnChange}/> - <EditTable actions={['edit', 'move', 'copy', 'del']} type={appType + 'cardmenus'} data={menus} columns={columns} onChange={this.changeColumns}/> - </div> - ) - } -} - -export default CardMenus \ No newline at end of file diff --git a/src/menu/components/card/cardcomponent/options.jsx b/src/menu/components/card/cardcomponent/options.jsx index 96aa457..b4bdd99 100644 --- a/src/menu/components/card/cardcomponent/options.jsx +++ b/src/menu/components/card/cardcomponent/options.jsx @@ -1,23 +1,27 @@ /** * @description Setting琛ㄥ崟閰嶇疆淇℃伅 */ -export default function (setting, subtype, buttons = [], cardType, columns) { +export default function (setting, subtype, buttons = [], cardType, columns, menus = []) { let appType = sessionStorage.getItem('appType') let hasMenus = subtype === 'datacard' && cardType !== 'extendCard' let menulist = [] - let appmenulist = [] if (appType) { - appmenulist = sessionStorage.getItem('appMenus') - if (appmenulist) { + menulist = sessionStorage.getItem('appMenus') + if (menulist) { try { - appmenulist = JSON.parse(appmenulist) + menulist = JSON.parse(menulist) } catch (e) { - appmenulist = [] + menulist = [] } } else { - appmenulist = [] + menulist = [] + } + if (appType === 'mob' && (subtype === 'datacard' || subtype === 'propcard') && cardType !== 'extendCard') { // 鏁版嵁鍗″彲鎵撳紑鍗虫椂閫氫俊 + menulist.push({ + value: 'IM', label: '鍗虫椂閫氫俊锛堢郴缁熼〉锛�' + }) } } else { menulist = sessionStorage.getItem('fstMenuList') @@ -86,9 +90,9 @@ { type: 'text', field: 'primaryId', - label: '涓婚敭鍊�', + label: '闈欐�佷富閿��', initval: setting.primaryId || '', - tooltip: '璁剧疆涓�涓睘鎬у崱闈欐�両D锛屽悜鍏朵粬缁勪欢浼犻�掔殑鎸囧畾闈欐�両D鍊�', + tooltip: '璁剧疆涓�涓睘鎬у崱闈欐�両D锛屽悜鍏朵粬缁勪欢浼犻�掔殑鎸囧畾闈欐�両D鍊硷紝涓婚敭涓哄姩鎬佸�兼椂鏃犳晥銆�', required: false, forbid: subtype !== 'propcard' }, @@ -113,6 +117,7 @@ {field: 'joint', values: ['menu', 'link', 'menus']}, {field: 'linkbtn', values: ['button']}, {field: 'menuType', values: ['menus']}, + {field: 'menus', values: ['menus']}, ] }, { @@ -129,7 +134,7 @@ label: '鍏宠仈鑿滃崟', initval: setting.menu || (appType ? '' : []), required: true, - options: appType ? appmenulist : menulist, + options: menulist, }, { type: 'textarea', @@ -183,6 +188,36 @@ {value: 'hover', label: '鎮诞鏄剧ず'}, ], forbid: appType === 'mob' + }, + { + type: 'table', + field: 'menus', + label: '鑿滃崟缁�', + initval: menus, + required: true, + span: 24, + columns: [ + { + title: '鏍囪瘑', + dataIndex: 'sign', + inputType: 'input', + editable: true, + unique: true, + required: false, + width: '35%' + }, + { + title: '鑿滃崟', + dataIndex: 'menu', + inputType: !appType ? 'cascader' : 'select', + editable: true, + required: true, + extends: !appType ? 'Menu' : [{key: 'label', value: 'label'}], + width: '35%', + render: (text, record) => record.label, + options: menulist + } + ] } ] diff --git a/src/menu/components/card/cardsimplecomponent/index.jsx b/src/menu/components/card/cardsimplecomponent/index.jsx index f77a254..07f6588 100644 --- a/src/menu/components/card/cardsimplecomponent/index.jsx +++ b/src/menu/components/card/cardsimplecomponent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Popover, Icon } from 'antd' +import { Popover } from 'antd' +import { PlusOutlined, PlusSquareOutlined, EditOutlined, ArrowLeftOutlined, ArrowRightOutlined, SwapOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -219,25 +220,25 @@ <div className="card-control"> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍏冪礌" onClick={this.addElement} type="plus" /> - <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> + <PlusOutlined className="plus" title="娣诲姞鍏冪礌" onClick={this.addElement}/> + <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton}/> {cards.type !== 'timeline' ? <NormalForm title="鍗$墖璁剧疆" width={800} update={this.updateSetting} getForms={this.getSettingForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> : <NodesWrap card={card} updateMenus={this.updateNodes}/>} {cards.type !== 'timeline' ? <CopyComponent type="cardcell" card={card}/> : null} - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> {control ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="鍓嶇Щ" type="arrow-left" onClick={() => this.props.move(card, 'left')} /> - <Icon className="close" title="鍚庣Щ" type="arrow-right" onClick={() => this.props.move(card, 'right')} /> + <ArrowLeftOutlined className="plus" title="鍓嶇Щ" onClick={() => this.props.move(card, 'left')} /> + <ArrowRightOutlined className="close" title="鍚庣Щ" onClick={() => this.props.move(card, 'right')} /> </div> } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}> - <Icon type="swap" id={card.uuid + 'swap'}/> + <SwapOutlined id={card.uuid + 'swap'}/> </Popover> : null} - {control ? <Icon className="close" title="鍒犻櫎鍗$墖" type="delete" onClick={() => this.props.deleteElement(card)} /> : null} + {control ? <DeleteOutlined className="close" title="鍒犻櫎鍗$墖" onClick={() => this.props.deleteElement(card)} /> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined/> </Popover> </div> </div> diff --git a/src/menu/components/card/cardsimplecomponent/node-wrap/index.jsx b/src/menu/components/card/cardsimplecomponent/node-wrap/index.jsx index 3c11bc4..e39387d 100644 --- a/src/menu/components/card/cardsimplecomponent/node-wrap/index.jsx +++ b/src/menu/components/card/cardsimplecomponent/node-wrap/index.jsx @@ -1,7 +1,9 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Modal, Icon } from 'antd' +import { Modal } from 'antd' +import { MoreOutlined } from '@ant-design/icons' + import MenusForm from './menus' import './index.scss' @@ -46,7 +48,7 @@ return ( <> - <Icon type="more" style={{color: '#1890ff'}} title="鑺傜偣缁�" onClick={this.trigger}/> + <MoreOutlined style={{color: '#1890ff'}} title="鑺傜偣缁�" onClick={this.trigger}/> <Modal title="鑺傜偣缁�" wrapClassName="nodes-field-modal" diff --git a/src/menu/components/card/cardsimplecomponent/node-wrap/menus/columnform/index.jsx b/src/menu/components/card/cardsimplecomponent/node-wrap/menus/columnform/index.jsx index 5ddc9fe..478ed52 100644 --- a/src/menu/components/card/cardsimplecomponent/node-wrap/menus/columnform/index.jsx +++ b/src/menu/components/card/cardsimplecomponent/node-wrap/menus/columnform/index.jsx @@ -5,7 +5,7 @@ import asyncComponent from '@/utils/asyncComponent' const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) -const MkIcon = asyncComponent(() => import('@/components/mkIcon')) +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) class MenusColumn extends Component { static propTpyes = { @@ -76,7 +76,7 @@ {getFieldDecorator('icon', { initialValue: '' })( - <MkIcon allowClear/> + <MkEditIcon allowClear/> )} </Form.Item> </Col> diff --git a/src/menu/components/card/cardsimplecomponent/node-wrap/menus/index.jsx b/src/menu/components/card/cardsimplecomponent/node-wrap/menus/index.jsx index 13259aa..13230b0 100644 --- a/src/menu/components/card/cardsimplecomponent/node-wrap/menus/index.jsx +++ b/src/menu/components/card/cardsimplecomponent/node-wrap/menus/index.jsx @@ -1,8 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Icon } from 'antd' +import MkIcon from '@/components/mk-icon' import Utils from '@/utils/utils.js' import ColumnForm from './columnform' import asyncComponent from '@/utils/asyncComponent' @@ -44,7 +44,7 @@ editable: true, required: false, width: '35%', - render: (text, record) => record.icon ? <Icon type={record.icon}/> : '' + render: (text, record) => record.icon ? <MkIcon type={record.icon}/> : '' } ] } diff --git a/src/menu/components/card/data-card/index.jsx b/src/menu/components/card/data-card/index.jsx index 236ce8a..335e3f9 100644 --- a/src/menu/components/card/data-card/index.jsx +++ b/src/menu/components/card/data-card/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal, Pagination, notification } from 'antd' +import { Popover, Modal, Pagination, notification } from 'antd' +import { PlusOutlined, PlusCircleOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -9,8 +10,6 @@ import MKEmitter from '@/utils/events.js' import Utils from '@/utils/utils.js' import getWrapForm from './options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) @@ -34,7 +33,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, appType: sessionStorage.getItem('appType'), back: false @@ -90,6 +88,10 @@ _card.style = config.style _card.headerStyle = config.headerStyle + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts + _card.subcards = config.subcards.map(scard => { scard.uuid = Utils.getuuid() scard.elements = scard.elements.map(elem => { @@ -117,11 +119,31 @@ }) this.props.updateConfig(_card) } else { - card.action = card.action || [] // 鍏煎 - card.search = card.search || [] // 鍏煎 + let _card = fromJS(card).toJS() + _card.action = _card.action || [] // 鍏煎 + _card.search = _card.search || [] // 鍏煎 + + if (appType === 'mob') { + _card.action = _card.action.map(item => { + if (!item.color) { + if (item.sqlType === 'LogicDelete' || item.sqlType === 'delete') { + item.color = 'danger' + } else if (item.sqlType === 'insert') { + item.color = 'success' + } else if (item.sqlType === 'update' || item.sqlType === 'insertOrUpdate' || item.sqlType === 'custom') { + item.color = 'primary' + } else if (item.sqlType === 'audit') { + item.color = 'warning' + } else { + item.color = 'weak' + } + } + return item + }) + } this.setState({ - card: fromJS(card).toJS() + card: _card }) } } @@ -275,7 +297,6 @@ newcard.type = 'select' newcard.resourceType = '0' newcard.options = [] - newcard.setAll = 'false' newcard.orderType = 'asc' newcard.match = '=' } @@ -457,11 +478,25 @@ getWrapForms = () => { const { card } = this.state - return getWrapForm(card.wrap, card.subtype) + return getWrapForm(card.wrap, card.subtype, card.columns, card.uuid, card.supNodes) } updateWrap = (res) => { - this.updateComponent({...this.state.card, wrap: res}) + let _card = {...this.state.card, wrap: res} + + if (res.supNodes) { + _card.supNodes = res.supNodes + _card.supNodes = _card.supNodes.map(item => { + item.componentId = item.nodes[item.nodes.length - 1] + return item + }) + + delete res.supNodes + } else { + delete _card.supNodes + } + + this.updateComponent(_card) } pasteComponent = (res, resolve) => { @@ -623,22 +658,22 @@ <NormalHeader config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍗$墖" onClick={() => this.addCard()} type="plus" /> - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={() => this.addSearch()} type="plus-circle" /> : null} - <Icon className="plus" title="娣诲姞鎸夐挳" onClick={() => this.addButton()} type="plus-square" /> + <PlusOutlined className="plus" title="娣诲姞鍗$墖" onClick={() => this.addCard()}/> + {appType !== 'mob' ? <PlusCircleOutlined className="plus" title="娣诲姞鎼滅储" onClick={() => this.addSearch()}/> : null} + <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={() => this.addButton()}/> <NormalForm title="鏁版嵁鍗¤缃�" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="datacard" card={card}/> <PasteComponent options={['action', 'search', 'form', 'cardcell']} updateConfig={this.pasteComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <ActionComponent config={card} type="datacard" setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> {card.subcards.map((subcard, index) => (<CardComponent key={subcard.uuid} offset={!index ? offset : 0} cards={card} card={subcard} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} diff --git a/src/menu/components/card/data-card/options.jsx b/src/menu/components/card/data-card/options.jsx index b449ed9..33b8ebc 100644 --- a/src/menu/components/card/data-card/options.jsx +++ b/src/menu/components/card/data-card/options.jsx @@ -4,7 +4,7 @@ /** * @description Wrap琛ㄥ崟閰嶇疆淇℃伅 */ -export default function (wrap, subtype, columns, id) { +export default function (wrap, subtype, columns = [], id = '', supNodes = []) { let appType = sessionStorage.getItem('appType') let MenuType = '' let menu = fromJS(window.GLOB.customMenu).toJS() @@ -13,7 +13,7 @@ MenuType = 'billPrint' } let modules = [] - if (subtype === 'propcard') { + if (subtype === 'propcard' || subtype === 'datacard') { modules = MenuUtils.getSupModules(menu.components, id) || [] } @@ -64,9 +64,10 @@ tooltip: '閫夋嫨闈欐�佸�硷紝鏃犻渶閰嶇疆鏁版嵁婧愩��', required: false, options: [ - {value: 'dynamic', label: '鍔ㄦ��'}, - {value: 'static', label: '闈欐��'}, + {value: 'dynamic', label: '鍔ㄦ��', priKeyType: 'static'}, + {value: 'static', label: '闈欐��', priKeyType: 'static'}, ], + linkFields: ['priKeyType'], controlFields: [ {field: 'goback', values: ['dynamic']}, {field: 'supModule', values: ['static']}, @@ -102,8 +103,25 @@ {field: 'checkAll', values: ['checkbox']}, {field: 'selected', values: ['radio', 'checkbox']}, {field: 'selStyle', values: ['radio', 'checkbox']}, + // {field: 'priKeyType', values: ['radio', 'checkbox']}, ], forbid: subtype === 'tablecard' + }, + { + type: 'radio', + field: 'priKeyType', + label: '涓婚敭', + initval: wrap.priKeyType || 'static', + tooltip: '鎷兼帴鍊间负鍔ㄦ�佷富閿笌鐢ㄦ埛鑷畾涔夌殑闈欐�佷富閿娇鐢ㄩ�楀彿鎷兼帴銆�', + required: false, + linkField: 'datatype', + options: [ + {ParentID: 'static', value: 'static', label: '闈欐�佸��'}, + {ParentID: 'dynamic', value: 'static', label: '闈欐�佸��'}, + {ParentID: 'dynamic', value: 'dynamic', label: '鍔ㄦ�佸��'}, + {ParentID: 'dynamic', value: 'joint', label: '鎷兼帴鍊�'}, + ], + forbid: subtype !== 'propcard' }, { type: 'radio', @@ -114,35 +132,37 @@ options: [ {value: 'false', label: '鏃�'}, {value: 'init', label: '鍒濆鍖�'}, - {value: 'always', label: '鏁版嵁鍔犺浇', disabled: subtype === 'propcard'}, + {value: 'always', label: '鏁版嵁鍔犺浇'}, ] }, { - type: 'radio', + type: 'select', field: 'selStyle', label: '閫変腑椋庢牸', initval: wrap.selStyle || 'active', tooltip: '瀛樺湪杈规鏃讹紝杈规浼氫娇鐢ㄧ郴缁熻壊銆�', required: false, options: [ + {value: 'none', label: '鏃�'}, {value: 'active', label: '澶栭槾褰�'}, {value: 'backFont', label: '鑳屾櫙+鏂囧瓧'}, {value: 'font', label: '鏂囧瓧'}, - ], - forbid: subtype !== 'propcard' + ...(subtype === 'datacard' && appType === 'mob' ? [{value: 'check', label: '鍕鹃��'}] : []) + ] + // forbid: subtype !== 'propcard' }, - { - type: 'radio', - field: 'checkAll', - label: '鍏ㄩ��', - initval: wrap.checkAll || 'hidden', - required: false, - options: [ - {value: 'hidden', label: '闅愯棌'}, - {value: 'show', label: '鏄剧ず'}, - ], - forbid: subtype !== 'datacard' || appType !== 'mob' - }, + // { + // type: 'radio', + // field: 'checkAll', + // label: '鍏ㄩ��', + // initval: wrap.checkAll || 'hidden', + // required: false, + // options: [ + // {value: 'hidden', label: '闅愯棌'}, + // {value: 'show', label: '鏄剧ず'}, + // ], + // forbid: subtype !== 'datacard' || appType !== 'mob' + // }, { type: 'radio', field: 'cardFloat', @@ -207,6 +227,32 @@ forbid: subtype !== 'propcard' || appType !== 'mob' }, { + type: 'radio', + field: 'empty', + label: '绌哄�奸殣钘�', + initval: wrap.empty || 'show', + tooltip: '褰撴煡璇㈡暟鎹负绌烘椂锛岄殣钘忚缁勪欢銆�', + required: false, + options: [ + {value: 'show', label: '鍚�'}, + {value: 'hidden', label: '鏄�'}, + ], + forbid: subtype !== 'datacard' + }, + { + type: 'radio', + field: 'supKey', + label: '涓婄骇涓婚敭', + initval: wrap.supKey || 'true', + tooltip: '褰撹缃笂绾х粍浠舵椂锛屼笂绾т富閿�间负绌烘槸鍚﹁繘琛屾暟鎹煡璇€��', + required: false, + options: [ + {value: 'true', label: '楠岃瘉'}, + {value: 'false', label: '蹇界暐'}, + ], + forbid: subtype !== 'datacard' + }, + { type: 'cascader', field: 'supModule', label: '涓婄骇缁勪欢', @@ -217,6 +263,45 @@ forbid: subtype !== 'propcard' }, { + type: 'select', + field: 'controlField', + label: '绂佺敤瀛楁', + initval: wrap.controlField || '', + tooltip: '鐢ㄤ簬鎺у埗琛屾暟鎹槸鍚﹀彲閫夋嫨銆�', + required: false, + allowClear: true, + options: columns, + controlFields: [ + {field: 'controlVal', notNull: true}, + ], + forbid: subtype !== 'datacard' + }, + { + type: 'text', + field: 'controlVal', + label: '鎺у埗鍊�', + initval: wrap.controlVal || '', + tooltip: '褰撳瓧娈靛�间笌鎺у埗鍊肩浉绛夋椂锛岃鏁版嵁浼氱鐢紝澶氫釜鍊肩敤閫楀彿鍒嗛殧銆�', + required: false, + forbid: subtype !== 'datacard' + }, + { + type: 'radio', + field: 'supType', + label: '涓婄骇绫诲瀷', + initval: wrap.supType || 'single', + tooltip: '涓婄骇缁勪欢涓哄崟涓�缁勪欢鎴栧涓粍浠躲��', + required: false, + forbid: subtype !== 'datacard' || appType === 'mob', + options: [ + {value: 'single', label: '鍗曠粍浠�'}, + {value: 'multi', label: '澶氱粍浠�'}, + ], + controlFields: [ + {field: 'supNodes', values: ['multi']}, + ] + }, + { type: 'multiselect', field: 'blacklist', label: '榛戝悕鍗�', @@ -225,6 +310,35 @@ options: roleList, forbid: !!appType }, + { + type: 'table', + field: 'supNodes', + label: '涓婄骇缁勪欢', + initval: supNodes, + required: true, + forbid: subtype !== 'datacard' || appType === 'mob', + span: 24, + columns: [ + { + title: '搴忓彿', + dataIndex: '$index', + editable: false, + required: false, + width: '20%' + }, + { + title: '鑿滃崟', + dataIndex: 'nodes', + inputType: 'cascader', + editable: true, + required: true, + extends: [{key: 'label', value: 'label'}], + width: '50%', + render: (text, record) => record.label, + options: modules + } + ] + } ] return cardWrapForm.map(item => { diff --git a/src/menu/components/card/prop-card/index.jsx b/src/menu/components/card/prop-card/index.jsx index 9ece805..96e0fd7 100644 --- a/src/menu/components/card/prop-card/index.jsx +++ b/src/menu/components/card/prop-card/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal, notification } from 'antd' +import { Popover, Modal, notification } from 'antd' +import { PlusOutlined, SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -9,8 +10,6 @@ import MKEmitter from '@/utils/events.js' import Utils from '@/utils/utils.js' import getWrapForm from '../data-card/options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) @@ -33,7 +32,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, appType: sessionStorage.getItem('appType'), card: null, back: false @@ -85,6 +83,10 @@ _card.wrap.name = card.name _card.style = config.style _card.headerStyle = config.headerStyle + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts _card.subcards = config.subcards.map(scard => { scard.uuid = Utils.getuuid() @@ -481,22 +483,22 @@ <NormalHeader config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍗$墖" onClick={() => this.addCard()} type="plus" /> + <PlusOutlined className="plus" title="娣诲姞鍗$墖" onClick={() => this.addCard()} /> <NormalForm title="灞炴�у崱璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="propcard" card={card}/> <PasteComponent options={['cardcell']} updateConfig={this.pasteComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> <ClockComponent config={card} updateConfig={this.updateComponent}/> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} - {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} + {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> {card.subcards.map((subcard, index) => (<CardComponent key={subcard.uuid} offset={!index ? offset : 0} cards={card} card={subcard} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} </div> diff --git a/src/menu/components/card/table-card/index.jsx b/src/menu/components/card/table-card/index.jsx index aa04e92..6470b65 100644 --- a/src/menu/components/card/table-card/index.jsx +++ b/src/menu/components/card/table-card/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal, Pagination, notification } from 'antd' +import { Popover, Modal, Pagination, notification } from 'antd' +import { PlusOutlined, PlusCircleOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -9,8 +10,6 @@ import MKEmitter from '@/utils/events.js' import Utils from '@/utils/utils.js' import getWrapForm from '../data-card/options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) @@ -34,7 +33,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, appType: sessionStorage.getItem('appType'), back: false @@ -84,6 +82,10 @@ _card.style = config.style _card.headerStyle = config.headerStyle + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts + _card.subcards = config.subcards.map(scard => { scard.uuid = Utils.getuuid() scard.elements = scard.elements.map(elem => { @@ -111,6 +113,25 @@ let _card = fromJS(card).toJS() if (!_card.action) { _card.action = [] + } + + if (this.state.appType === 'mob') { + _card.action = _card.action.map(item => { + if (!item.color) { + if (item.sqlType === 'LogicDelete' || item.sqlType === 'delete') { + item.color = 'danger' + } else if (item.sqlType === 'insert') { + item.color = 'success' + } else if (item.sqlType === 'update' || item.sqlType === 'insertOrUpdate' || item.sqlType === 'custom') { + item.color = 'primary' + } else if (item.sqlType === 'audit') { + item.color = 'warning' + } else { + item.color = 'weak' + } + } + return item + }) } this.setState({ card: _card @@ -289,7 +310,6 @@ newcard.type = 'select' newcard.resourceType = '0' newcard.options = [] - newcard.setAll = 'false' newcard.orderType = 'asc' newcard.match = '=' } @@ -522,22 +542,22 @@ <NormalHeader config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍗$墖" onClick={() => this.addCard()} type="plus" /> - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={() => this.addSearch()} type="plus-circle" /> : null} - <Icon className="plus" title="娣诲姞鎸夐挳" onClick={() => this.addButton()} type="plus-square" /> + <PlusOutlined className="plus" title="娣诲姞鍗$墖" onClick={() => this.addCard()}/> + {appType !== 'mob' ? <PlusCircleOutlined className="plus" title="娣诲姞鎼滅储" onClick={() => this.addSearch()}/> : null} + <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={() => this.addButton()} /> <NormalForm title="琛ㄦ牸璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="tablecard" card={card}/> <PasteComponent options={['cardcell', 'search', 'form']} updateConfig={this.pasteComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <ActionComponent config={card} type="datacard" setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> <div style={{minHeight: 'calc(100% - 90px)'}}> diff --git a/src/menu/components/carousel/data-card/index.jsx b/src/menu/components/carousel/data-card/index.jsx index 2144877..61806d1 100644 --- a/src/menu/components/carousel/data-card/index.jsx +++ b/src/menu/components/carousel/data-card/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal, notification } from 'antd' +import { Popover, Modal, notification } from 'antd' +import { EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -9,8 +10,6 @@ import MKEmitter from '@/utils/events.js' import Utils from '@/utils/utils.js' import getWrapForm from './options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) @@ -30,7 +29,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, appType: sessionStorage.getItem('appType'), card: null, back: false @@ -75,6 +73,10 @@ _card.wrap = config.wrap _card.wrap.name = card.name _card.style = config.style + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts _card.subcards = config.subcards.map(scard => { scard.uuid = Utils.getuuid() @@ -277,17 +279,17 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="杞挱-鍔ㄦ�佹暟鎹�" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="datacard" card={card}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors"/> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog}/> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)}/> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)}/> <SettingComponent config={card} updateConfig={this.updateComponent}/> </div> } trigger="hover"> - <Icon type="tool"/> + <ToolOutlined/> </Popover> <CardSimpleComponent cards={card} card={card.subcards[0]} updateElement={this.updateCard} deleteElement={this.deleteCard}/> </div> diff --git a/src/menu/components/carousel/prop-card/index.jsx b/src/menu/components/carousel/prop-card/index.jsx index dd686fb..b9d3a01 100644 --- a/src/menu/components/carousel/prop-card/index.jsx +++ b/src/menu/components/carousel/prop-card/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal, notification, Carousel } from 'antd' +import { Popover, Modal, notification, Carousel } from 'antd' +import { PlusOutlined, SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -9,8 +10,6 @@ import MKEmitter from '@/utils/events.js' import Utils from '@/utils/utils.js' import getWrapForm from '../data-card/options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) @@ -31,7 +30,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, appType: sessionStorage.getItem('appType'), card: null, back: false @@ -74,6 +72,10 @@ _card.wrap = config.wrap _card.wrap.name = card.name _card.style = config.style + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts _card.subcards = config.subcards.map(scard => { scard.uuid = Utils.getuuid() @@ -353,21 +355,21 @@ <div className="menu-prop-carousel-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍗$墖" onClick={this.addCard} type="plus" /> + <PlusOutlined className="plus" title="娣诲姞鍗$墖" onClick={this.addCard}/> <NormalForm title="杞挱-闈欐�佹暟鎹�" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="propcard" card={card}/> <PasteComponent config={card} options={['cardcell']} updateConfig={this.updateComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} - {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} + {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined/> </Popover> {card.subcards.length > 0 ? <Carousel dotPosition={card.wrap.dotPosition || 'bottom'} effect={card.wrap.effect || 'scrollx'}> {card.subcards.map((subcard) => (<CardSimpleComponent key={subcard.uuid} cards={card} card={subcard} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} diff --git a/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx b/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx index f3b35e2..05158b6 100644 --- a/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx +++ b/src/menu/components/chart/antv-bar/chartcompile/formconfig.jsx @@ -167,8 +167,8 @@ tooltip: '缁熻鍥捐〃閫傜敤浜庡睍绀烘暟鎹被鍨嬩负鍔ㄦ�佸�笺��', required: false, options: [ - { value: 'query', text: Formdict['header.form.query'] }, - { value: 'statistics', text: Formdict['header.form.statistics'] } + { value: 'query', text: '鏌ヨ' }, + { value: 'statistics', text: '缁熻' } ] }, { type: 'select', @@ -274,12 +274,12 @@ }, { type: 'radio', key: 'show', - label: '鏍煎紡鍖�', + label: '鏄剧ず', initVal: card.show || 'value', required: false, options: [{ value: 'value', - text: '鏃�' + text: '鏁板��' }, { value: 'percent', text: '鐧惧垎姣�' @@ -405,6 +405,20 @@ text: '闅愯棌' }] }, { + type: 'radio', + key: 'download', + label: '瀵煎嚭鍥剧墖', + initVal: card.download || 'forbid', + required: false, + forbid: appType === 'mob', + options: [{ + value: 'forbid', + text: '绂佺敤' + }, { + value: 'enable', + text: '鍚敤' + }] + }, { type: 'number', key: 'barSize', label: '鏌卞舰瀹藉害', @@ -460,7 +474,7 @@ key: 'selectColor', label: '閫変腑棰滆壊', initVal: card.selectColor || '', - tooltip: '閫変腑鏌卞舰鍥剧殑棰滆壊锛屽湪浜や簰鏁堟灉銆婂厓绱犻�変腑锛堝閫夛級銆嬪拰銆婂厓绱犻�変腑锛堝崟閫夛級銆嬩腑鏈夋晥锛岃嚜瀹氫箟璁剧疆涓棤鏁堛��', + tooltip: '閫変腑鏌卞舰鍥剧殑棰滆壊锛屽湪浜や簰鏁堟灉銆婂厓绱犻�変腑锛堝閫夛級銆嬪拰銆婂厓绱犻�変腑锛堝崟閫夛級銆嬩腑鏈夋晥锛屽惎鐢ㄨ嚜瀹氫箟璁剧疆鏃舵棤鏁堛��', forbid: !['bar'].includes(card.chartType), allowClear: true, required: false diff --git a/src/menu/components/chart/antv-bar/chartcompile/index.jsx b/src/menu/components/chart/antv-bar/chartcompile/index.jsx index ee2421e..942c0cf 100644 --- a/src/menu/components/chart/antv-bar/chartcompile/index.jsx +++ b/src/menu/components/chart/antv-bar/chartcompile/index.jsx @@ -206,6 +206,7 @@ dataIndex: 'title', inputType: 'select', editable: true, + required: false, width: '12%', options: [ { value: 'true', text: '鏄剧ず'}, @@ -213,7 +214,23 @@ ], render: (text, record) => { let trans = {'true': '鏄剧ず', 'false': '闅愯棌'} - return trans[text] || '鏄剧ず' + return trans[text] || '' + } + }, + { + title: '鏄剧ず', + dataIndex: 'show', + inputType: 'select', + editable: true, + required: false, + width: '12%', + options: [ + { value: 'value', text: '鏁板��'}, + { value: 'percent', text: '鐧惧垎姣�'} + ], + render: (text, record) => { + let trans = {'value': '鏁板��', 'percent': '鐧惧垎姣�'} + return trans[text] || '' } }, { @@ -601,6 +618,7 @@ } render() { + const { config } = this.props const { view, visible, datatype, plot, ramp, colorColumns, rampColorColumns, statColorColumns, rampStatColorColumns, cusColumns, baseFormlist } = this.state const formItemLayout = { labelCol: { @@ -618,7 +636,7 @@ <EditOutlined title="缂栬緫" onClick={this.showDrawer}/> <Modal wrapClassName="popview-modal menu-chart-edit-modal" - title="鍥捐〃缂栬緫" + title={config.type === 'bar' ? '鏌辩姸鍥剧紪杈�' : '鎶樼嚎鍥剧紪杈�'} visible={visible} width={950} maskClosable={false} @@ -685,7 +703,7 @@ </Form> </Col> <Col style={{fontSize: '12px', color: '#757575', paddingLeft: '10px'}} span={24}>娉細浣跨敤鑷畾涔夎缃椂锛屾樉绀虹殑鍧愭爣杞寸涓�涓湪宸︿晶锛岀浜屼釜鍦ㄥ彸渚э紝澶氫綑鐨勪笉鐢熸晥銆�</Col> - <EditTable actions={['edit', 'move']} data={plot.customs || []} columns={cusColumns} onChange={this.changeCustom}/> + <EditTable indexShow={false} actions={['edit', 'move']} data={plot.customs || []} columns={cusColumns} onChange={this.changeCustom}/> </TabPane> : null} </Tabs> </Modal> diff --git a/src/menu/components/chart/antv-bar/index.jsx b/src/menu/components/chart/antv-bar/index.jsx index f06a656..56af912 100644 --- a/src/menu/components/chart/antv-bar/index.jsx +++ b/src/menu/components/chart/antv-bar/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, notification } from 'antd' +import { Popover, notification } from 'antd' +import { PlusCircleOutlined, PlusSquareOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import { Chart } from '@antv/g2' import DataSet from '@antv/data-set' @@ -101,6 +102,9 @@ _card.plot.name = card.name _card.style = config.style _card.headerStyle = config.headerStyle + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts _card.action = config.action.map(col => { col.uuid = Utils.getuuid() @@ -472,6 +476,7 @@ item.name = transfield[item.type] || item.type item.chartType = item.shape ? (item.shape[0] || 'bar') : 'bar' item.shape = item.shape ? (item.shape[1] || '') : '' + item.show = item.show || plot.show if (colors.has(item.name)) { item.color = colors.get(item.name) @@ -549,7 +554,7 @@ }) let padding = [10, 30, 30, 30] - if (plot.mutilBar === 'overlap') { + if (plot.mutilBar === 'overlap' || Bar_axis.length === 1) { Bar_axis = [] } @@ -811,7 +816,7 @@ .color(item.color) .shape(item.shape) .tooltip(`${item.name}`, (value) => { - if (plot.show === 'percent') { + if (item.show === 'percent') { value = value + '%' } return { @@ -825,7 +830,7 @@ } if (item.label !== 'false') { _chart.label(item.name, (value) => { - if (plot.show === 'percent') { + if (item.show === 'percent') { value = value + '%' } @@ -857,7 +862,7 @@ .color(item.color) .shape(item.shape) .tooltip(`${item.name}`, (value) => { - if (plot.show === 'percent') { + if (item.show === 'percent') { value = value + '%' } return { @@ -868,7 +873,7 @@ if (item.label !== 'false') { _chart.label(item.name, (value) => { - if (plot.show === 'percent') { + if (item.show === 'percent') { value = value + '%' } let _color = color @@ -1240,7 +1245,6 @@ newcard.type = 'select' newcard.resourceType = '0' newcard.options = [] - newcard.setAll = 'false' newcard.orderType = 'asc' newcard.match = '=' @@ -1333,20 +1337,20 @@ <div className="menu-line-chart-edit-box" style={{..._style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null} - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> : null} + {appType !== 'mob' ? <PlusCircleOutlined className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch}/> : null} + {appType !== 'mob' ? <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton}/> : null} <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/> <CopyComponent type="line" card={card}/> <PasteComponent config={card} options={['action']} updateConfig={this.updateComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> <ClockComponent config={card} updateConfig={this.updateComponent}/> <UserComponent config={card}/> - <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent}/> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined/> </Popover> <NormalHeader config={card} updateComponent={this.updateComponent}/> <div className="canvas" id={card.uuid + 'canvas'} ref={ref => this.wrap = ref}></div> diff --git a/src/menu/components/chart/antv-dashboard/chartcompile/formconfig.jsx b/src/menu/components/chart/antv-dashboard/chartcompile/formconfig.jsx index 222db5a..9a90e00 100644 --- a/src/menu/components/chart/antv-dashboard/chartcompile/formconfig.jsx +++ b/src/menu/components/chart/antv-dashboard/chartcompile/formconfig.jsx @@ -75,6 +75,7 @@ * @param {Array} columns // 鏄剧ず鍒� */ export function getOptionForm (card, columns) { + let appType = sessionStorage.getItem('appType') let yfields = columns.filter(item => /^(Int|Decimal)/ig.test(item.datatype)) return [ @@ -128,6 +129,20 @@ value: 'false', text: '涓嶄娇鐢�' }] + }, { + type: 'radio', + key: 'download', + label: '瀵煎嚭鍥剧墖', + initVal: card.download || 'forbid', + required: false, + forbid: appType === 'mob', + options: [{ + value: 'forbid', + text: '绂佺敤' + }, { + value: 'enable', + text: '鍚敤' + }] }, { type: 'color', @@ -152,6 +167,7 @@ * @param {Array} columns // 鏄剧ず鍒� */ export function getRadioOptionForm (card, columns) { + let appType = sessionStorage.getItem('appType') let xfields = columns.filter(item => /^Nvarchar/ig.test(item.datatype)) let yfields = columns.filter(item => /^(Int|Decimal)/ig.test(item.datatype)) @@ -216,6 +232,20 @@ value: 'false', text: '涓嶄娇鐢�' }] + }, { + type: 'radio', + key: 'download', + label: '瀵煎嚭鍥剧墖', + initVal: card.download || 'forbid', + required: false, + forbid: appType === 'mob', + options: [{ + value: 'forbid', + text: '绂佺敤' + }, { + value: 'enable', + text: '鍚敤' + }] }, { type: 'color', diff --git a/src/menu/components/chart/antv-dashboard/chartcompile/index.jsx b/src/menu/components/chart/antv-dashboard/chartcompile/index.jsx index 3e526c1..09bf509 100644 --- a/src/menu/components/chart/antv-dashboard/chartcompile/index.jsx +++ b/src/menu/components/chart/antv-dashboard/chartcompile/index.jsx @@ -283,6 +283,7 @@ } render() { + const { config } = this.props const { visible, plot, colorColumns, view, baseFormlist } = this.state const formItemLayout = { labelCol: { @@ -300,7 +301,7 @@ <EditOutlined title="缂栬緫" onClick={this.showDrawer} /> <Modal wrapClassName="popview-modal menu-chart-edit-modal" - title="鍥捐〃缂栬緫" + title={config.subtype === 'ratioboard' ? '鍗犳瘮鍥剧紪杈�' : '浠〃鐩樼紪杈�'} visible={visible} width={850} maskClosable={false} diff --git a/src/menu/components/chart/antv-dashboard/index.jsx b/src/menu/components/chart/antv-dashboard/index.jsx index 58f608b..f26312a 100644 --- a/src/menu/components/chart/antv-dashboard/index.jsx +++ b/src/menu/components/chart/antv-dashboard/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import { Chart, registerShape } from '@antv/g2' import MKEmitter from '@/utils/events.js' @@ -142,6 +143,10 @@ _card.plot.name = card.name _card.style = config.style _card.headerStyle = config.headerStyle + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts } this.props.updateConfig(_card) @@ -519,14 +524,14 @@ <div className="mk-popover-control"> <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/> <CopyComponent type="dashboard" card={card}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <ClockComponent config={card} updateConfig={this.updateComponent}/> <UserComponent config={card}/> - <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent}/> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined/> </Popover> <NormalHeader hideSearch="true" config={card} updateComponent={this.updateComponent}/> <div className="canvas" id={card.uuid + 'dashboard'} ref={ref => this.wrap = ref}></div> diff --git a/src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx b/src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx index a4d79f5..aaa4b33 100644 --- a/src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx +++ b/src/menu/components/chart/antv-pie/chartcompile/formconfig.jsx @@ -1,8 +1,3 @@ -// import zhCN from '@/locales/zh-CN/model.js' -// import enUS from '@/locales/en-US/model.js' - -// const Formdict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS - /** * @description 鑾峰彇鍥捐〃瑙嗗浘閰嶇疆琛ㄥ崟 * @param {object} card // 鍥捐〃瀵硅薄 @@ -287,6 +282,20 @@ text: '绱姞' }] }, { + type: 'radio', + key: 'download', + label: '瀵煎嚭鍥剧墖', + initVal: card.download || 'forbid', + required: false, + forbid: appType === 'mob', + options: [{ + value: 'forbid', + text: '绂佺敤' + }, { + value: 'enable', + text: '鍚敤' + }] + }, { type: 'number', key: 'splitLine', label: '鍒嗛殧绾�', diff --git a/src/menu/components/chart/antv-pie/chartcompile/index.jsx b/src/menu/components/chart/antv-pie/chartcompile/index.jsx index e9ec92e..be8bb9a 100644 --- a/src/menu/components/chart/antv-pie/chartcompile/index.jsx +++ b/src/menu/components/chart/antv-pie/chartcompile/index.jsx @@ -326,7 +326,7 @@ <EditOutlined title="缂栬緫" onClick={this.showDrawer} /> <Modal wrapClassName="popview-modal menu-chart-edit-modal" - title="鍥捐〃缂栬緫" + title="楗煎浘缂栬緫" visible={visible} width={850} maskClosable={false} diff --git a/src/menu/components/chart/antv-pie/index.jsx b/src/menu/components/chart/antv-pie/index.jsx index 836e1b8..14f1db8 100644 --- a/src/menu/components/chart/antv-pie/index.jsx +++ b/src/menu/components/chart/antv-pie/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { ToolOutlined, DeleteOutlined, FontColorsOutlined, PlusCircleOutlined } from '@ant-design/icons' import { Chart } from '@antv/g2' import DataSet, { DataView } from '@antv/data-set' @@ -92,6 +93,10 @@ _card.plot.name = card.name _card.style = config.style _card.headerStyle = config.headerStyle + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts _card.search = config.search.map(col => { col.uuid = Utils.getuuid() @@ -630,7 +635,6 @@ newcard.type = 'select' newcard.resourceType = '0' newcard.options = [] - newcard.setAll = 'false' newcard.orderType = 'asc' newcard.match = '=' @@ -669,17 +673,17 @@ <div className="menu-pie-chart-edit-box" style={{..._style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - {!ismob ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null} + {!ismob ? <PlusCircleOutlined className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch}/> : null} <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/> <CopyComponent type="pie" card={card}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <ClockComponent config={card} updateConfig={this.updateComponent}/> <UserComponent config={card}/> - <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent}/> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <NormalHeader config={card} updateComponent={this.updateComponent}/> <div className="canvas" id={card.uuid + 'canvas'} ref={ref => this.wrap = ref}></div> diff --git a/src/menu/components/chart/antv-scatter/chartcompile/formconfig.jsx b/src/menu/components/chart/antv-scatter/chartcompile/formconfig.jsx index bd73720..cf6c5da 100644 --- a/src/menu/components/chart/antv-scatter/chartcompile/formconfig.jsx +++ b/src/menu/components/chart/antv-scatter/chartcompile/formconfig.jsx @@ -127,6 +127,20 @@ value: 'false', text: '闅愯棌' }] + }, { + type: 'radio', + key: 'download', + label: '瀵煎嚭鍥剧墖', + initVal: card.download || 'forbid', + required: false, + forbid: appType === 'mob', + options: [{ + value: 'forbid', + text: '绂佺敤' + }, { + value: 'enable', + text: '鍚敤' + }] }, { type: 'text', diff --git a/src/menu/components/chart/antv-scatter/chartcompile/index.jsx b/src/menu/components/chart/antv-scatter/chartcompile/index.jsx index 9658562..5a82c37 100644 --- a/src/menu/components/chart/antv-scatter/chartcompile/index.jsx +++ b/src/menu/components/chart/antv-scatter/chartcompile/index.jsx @@ -245,7 +245,7 @@ <EditOutlined title="缂栬緫" onClick={this.showDrawer} /> <Modal wrapClassName="popview-modal menu-chart-edit-modal" - title="鍥捐〃缂栬緫" + title="鏁g偣鍥剧紪杈�" visible={visible} width={850} maskClosable={false} diff --git a/src/menu/components/chart/antv-scatter/index.jsx b/src/menu/components/chart/antv-scatter/index.jsx index 30b127c..2cca38a 100644 --- a/src/menu/components/chart/antv-scatter/index.jsx +++ b/src/menu/components/chart/antv-scatter/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, notification } from 'antd' +import { Popover, notification } from 'antd' +import { ToolOutlined, DeleteOutlined, FontColorsOutlined, PlusCircleOutlined, PlusSquareOutlined } from '@ant-design/icons' import { Chart } from '@antv/g2' import MKEmitter from '@/utils/events.js' @@ -88,6 +89,10 @@ _card.plot.name = card.name _card.style = config.style _card.headerStyle = config.headerStyle + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts _card.action = config.action.map(col => { col.uuid = Utils.getuuid() @@ -278,7 +283,6 @@ newcard.type = 'select' newcard.resourceType = '0' newcard.options = [] - newcard.setAll = 'false' newcard.orderType = 'asc' newcard.match = '=' @@ -371,20 +375,20 @@ <div className="menu-scatter-chart-edit-box" style={{..._style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle"/> : null} - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> : null} + {appType !== 'mob' ? <PlusCircleOutlined className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch}/> : null} + {appType !== 'mob' ? <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton}/> : null} <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/> <CopyComponent type="line" card={card}/> <PasteComponent config={card} options={['action']} updateConfig={this.updateComponent}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors"/> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog}/> <ClockComponent config={card} updateConfig={this.updateComponent}/> <UserComponent config={card}/> - <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)}/> + <DeleteOutlined className="close" title="delete" onClick={() => this.props.deletecomponent(card.uuid)}/> <SettingComponent config={card} updateConfig={this.updateComponent}/> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined/> </Popover> <NormalHeader config={card} updateComponent={this.updateComponent}/> <div className="canvas" id={card.uuid + 'canvas'} ref={ref => this.wrap = ref}></div> diff --git a/src/menu/components/chart/chart-custom/chartcompile/index.jsx b/src/menu/components/chart/chart-custom/chartcompile/index.jsx index e59b022..1ac9de4 100644 --- a/src/menu/components/chart/chart-custom/chartcompile/index.jsx +++ b/src/menu/components/chart/chart-custom/chartcompile/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Modal, Form, Icon, Tabs } from 'antd' +import { Modal, Form, Tabs } from 'antd' +import { EditOutlined } from '@ant-design/icons' import { getBaseForm } from './formconfig' import asyncComponent from '@/utils/asyncComponent' @@ -90,10 +91,10 @@ return ( <> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫" onClick={this.showDrawer} /> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫" onClick={this.showDrawer} /> <Modal wrapClassName="popview-modal custom-chart-edit-modal" - title="鍥捐〃缂栬緫" + title="鑷畾涔夊浘琛ㄧ紪杈�" visible={visible} width={950} maskClosable={false} diff --git a/src/menu/components/chart/chart-custom/index.jsx b/src/menu/components/chart/chart-custom/index.jsx index 39dd831..929d17c 100644 --- a/src/menu/components/chart/chart-custom/index.jsx +++ b/src/menu/components/chart/chart-custom/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, notification } from 'antd' +import { Popover, notification } from 'antd' +import { ToolOutlined, DeleteOutlined, FontColorsOutlined, PlusCircleOutlined } from '@ant-design/icons' import { Chart } from '@antv/g2' import DataSet from '@antv/data-set' import * as echarts from 'echarts' @@ -80,6 +81,10 @@ _card.plot.name = card.name _card.style = config.style _card.headerStyle = config.headerStyle + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts _card.search = config.search.map(col => { col.uuid = Utils.getuuid() @@ -208,7 +213,6 @@ newcard.type = 'select' newcard.resourceType = '0' newcard.options = [] - newcard.setAll = 'false' newcard.orderType = 'asc' newcard.match = '=' @@ -247,16 +251,16 @@ <div className="menu-custom-chart-edit-box" style={{..._style, height: card.plot.height || 400}} onClick={this.clickComponent} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null} + {appType !== 'mob' ? <PlusCircleOutlined className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch}/> : null} <ChartCompileForm config={card} dict={this.state.dict} plotchange={this.updateComponent}/> <CopyComponent type="line" card={card}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <ClockComponent config={card} updateConfig={this.updateComponent}/> - <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent}/> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <NormalHeader config={card} updateComponent={this.updateComponent}/> <div className="canvas" id={card.uuid + 'canvas'} ref={ref => this.wrap = ref}></div> diff --git a/src/menu/components/code/sandbox/editorcode/index.jsx b/src/menu/components/code/sandbox/editorcode/index.jsx index 5a51a66..a1de4bf 100644 --- a/src/menu/components/code/sandbox/editorcode/index.jsx +++ b/src/menu/components/code/sandbox/editorcode/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal, Tabs, message } from 'antd' +import { Modal, Tabs, message } from 'antd' +import { FormOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -78,7 +79,7 @@ return ( <div style={{display: 'inline-block'}}> - <Icon title="浠g爜缂栬緫" style={{color: 'purple'}} type="form" onClick={() => this.trigger()} /> + <FormOutlined title="浠g爜缂栬緫" style={{color: 'purple'}} onClick={() => this.trigger()} /> <Modal wrapClassName="popview-modal code-sand-box-code-editor" title="鍐呭缂栬緫" diff --git a/src/menu/components/code/sandbox/index.jsx b/src/menu/components/code/sandbox/index.jsx index aba18e0..ba13288 100644 --- a/src/menu/components/code/sandbox/index.jsx +++ b/src/menu/components/code/sandbox/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -69,6 +70,10 @@ _card.html = config.html _card.css = config.css _card.js = config.js + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts } this.setState({ @@ -170,18 +175,18 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="鑷畾涔夌粍浠惰缃�" width={700} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="normaltable" card={card}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> <EditorCode config={card} updateConfig={this.updateComponent}/> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} - {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} + {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <CodeContent name={card.name} html={card.html} css={card.css} js={card.js}/> </div> diff --git a/src/menu/components/editor/braft-editor/editorcontent/index.jsx b/src/menu/components/editor/braft-editor/editorcontent/index.jsx index d1d288b..40aa871 100644 --- a/src/menu/components/editor/braft-editor/editorcontent/index.jsx +++ b/src/menu/components/editor/braft-editor/editorcontent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal } from 'antd' +import { Modal } from 'antd' +import { FormOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -59,8 +60,8 @@ return ( <div className="model-menu-edit-content-wrap"> - {config.wrap.datatype === 'static' ? <Icon title="鍐呭缂栬緫" type="form" onClick={() => this.trigger()} /> : null} - {config.wrap.datatype !== 'static' ? <Icon title="鍐呭缂栬緫" style={{color: '#eeeeee', cursor: 'not-allowed'}} type="form"/> : null} + {config.wrap.datatype === 'static' ? <FormOutlined title="鍐呭缂栬緫" onClick={() => this.trigger()} /> : + <FormOutlined title="鍐呭缂栬緫" style={{color: '#eeeeee', cursor: 'not-allowed'}}/>} <Modal wrapClassName="popview-modal model-menu-edit-content-form" title="鍐呭缂栬緫" diff --git a/src/menu/components/editor/braft-editor/index.jsx b/src/menu/components/editor/braft-editor/index.jsx index 85c223b..ac8dd29 100644 --- a/src/menu/components/editor/braft-editor/index.jsx +++ b/src/menu/components/editor/braft-editor/index.jsx @@ -1,14 +1,13 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' import getWrapForm from './options' import MKEmitter from '@/utils/events.js' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' @@ -28,7 +27,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, back: false } @@ -67,6 +65,10 @@ _card.style = config.style _card.headerStyle = config.headerStyle _card.html = config.html + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts } this.setState({ @@ -168,18 +170,18 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="瀵屾枃鏈缃�" width={700} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="normaltable" card={card}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> <EditorContent config={card} updateConfig={this.updateComponent}/> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} - {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} + {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <BraftContent value={card.wrap.datatype !== 'static' ? '<p class="empty-content">瀵屾枃鏈�</p>' : card.html} diff --git a/src/menu/components/form/dragtitle/card.jsx b/src/menu/components/form/dragtitle/card.jsx index 0ebb97b..78301dd 100644 --- a/src/menu/components/form/dragtitle/card.jsx +++ b/src/menu/components/form/dragtitle/card.jsx @@ -1,7 +1,8 @@ import React from 'react' import { fromJS } from 'immutable' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { CloseOutlined, EditOutlined } from '@ant-design/icons' import getForm from './options' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -70,9 +71,9 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="鍒嗙粍缂栬緫" width={850} update={updateSetting} getForms={getForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> - <Icon className="close" type="close" onClick={close} /> + <CloseOutlined className="close" type="close" onClick={close} /> </div> } trigger="hover"> <div className={'page-card ' + (active ? 'active' : '')} onClick={select} style={{ opacity: opacity}}> diff --git a/src/menu/components/form/formaction/index.jsx b/src/menu/components/form/formaction/index.jsx index b3a1f9e..12cc00f 100644 --- a/src/menu/components/form/formaction/index.jsx +++ b/src/menu/components/form/formaction/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Modal, Button, Popover, Icon } from 'antd' +import { Modal, Button, Popover } from 'antd' +import { FontColorsOutlined, EditOutlined, ProfileOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -197,25 +198,25 @@ <div className="mk-form-action"> {group.prevButton && group.prevButton.enable !== 'false' && group.sort !== 1 ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => this.handleAction(group.prevButton)} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => this.handleStyle(group.prevButton)} type="font-colors" /> + <EditOutlined className="edit" title="缂栬緫" onClick={() => this.handleAction(group.prevButton)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => this.handleStyle(group.prevButton)}/> </div> } trigger="hover"> <Button type="link" className="prev" style={resetStyle(group.prevButton.style)}>{group.prevButton.label}</Button> </Popover> : null} <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => this.handleAction(group.subButton)} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => this.handleStyle(group.subButton)} type="font-colors" /> - <Icon className="profile" title="setting" type="profile" onClick={() => this.profileAction()} /> + <EditOutlined className="edit" title="缂栬緫" onClick={() => this.handleAction(group.subButton)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => this.handleStyle(group.subButton)}/> + <ProfileOutlined className="profile" title="setting" onClick={() => this.profileAction()} /> </div> } trigger="hover"> <Button type="link" className="submit mk-primary" onDoubleClick={this.changeMenu} style={resetStyle(group.subButton.style)}>{group.subButton.label}</Button> </Popover> {group.nextButton && group.nextButton.enable !== 'false' && group.sort !== config.subcards.length ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => this.handleAction(group.nextButton)} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => this.handleStyle(group.nextButton)} type="font-colors" /> + <EditOutlined className="edit" title="缂栬緫" onClick={() => this.handleAction(group.nextButton)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => this.handleStyle(group.nextButton)}/> </div> } trigger="hover"> <Button type="link" className="skip" style={resetStyle(group.nextButton.style)}>{group.nextButton.label}</Button> diff --git a/src/menu/components/form/normal-form/index.jsx b/src/menu/components/form/normal-form/index.jsx index 16de6bf..47d8a42 100644 --- a/src/menu/components/form/normal-form/index.jsx +++ b/src/menu/components/form/normal-form/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal, Button, Switch, notification } from 'antd' +import { Popover, Modal, Button, Switch, notification } from 'antd' +import { PlusOutlined, SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -91,6 +92,10 @@ _card.wrap = config.wrap _card.wrap.name = card.name _card.style = config.style + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts _card.subcards = config.subcards.map(scard => { scard.uuid = Utils.getuuid() @@ -393,7 +398,6 @@ initval: '', type: 'text', resourceType: '0', - setAll: 'false', span: span, labelwidth: 33.3, options: [], @@ -429,10 +433,7 @@ let _inputfields = [] let _tabfields = [] let _linkableFields = [] - let _linksupFields = [{ - field: '', - label: '绌�' - }] + let _linksupFields = [] let standardform = null let uniq = new Map() @@ -471,8 +472,16 @@ _tabIndex++ } } + + if (item.type === 'switch') { + _linksupFields.push({ + field: item.field, + label: _linkIndex + '銆�' + item.label + }) + } if (!['select', 'link', 'radio', 'checkcard'].includes(item.type)) return + if (item.type === 'checkcard' && item.multiple === 'true') return // 閫夐」鍗″閫� if (item.field && !uniq.has(item.field)) { uniq.set(item.field, true) @@ -660,20 +669,20 @@ <div className="menu-normal-form-edit-box" style={resetStyle(card.style)} onClick={this.clickComponent} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍒嗙粍" onClick={this.addCard} type="plus" /> + <PlusOutlined className="plus" title="娣诲姞鍒嗙粍" onClick={this.addCard}/> <NormalForm title="琛ㄥ崟璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="stepform" card={card}/> <PasteComponent config={card} options={['form']} updateConfig={this.pasteForm} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} - {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} + {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <FormTitle list={card.subcards} @@ -684,7 +693,7 @@ selectGroup={this.selectGroup} /> {group ? <div className="form-area"> - <Icon className="plus" title="娣诲姞琛ㄥ崟" onClick={this.addForm} type="plus" /> + <PlusOutlined className="plus" title="娣诲姞琛ㄥ崟" onClick={this.addForm}/> <FieldsComponent config={group} type="form" plusFields={this.plusFields} /> <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} /> {appType !== 'mob' ? <Button className="mk-cols-change" onClick={() => this.changecols(1)}>1鍒�</Button> : null} diff --git a/src/menu/components/form/tab-form/index.jsx b/src/menu/components/form/tab-form/index.jsx index 016a12c..5939b12 100644 --- a/src/menu/components/form/tab-form/index.jsx +++ b/src/menu/components/form/tab-form/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal, Button, Switch, notification } from 'antd' +import { Popover, Modal, Button, Switch, notification } from 'antd' +import { PlusOutlined, SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -89,6 +90,10 @@ _card.wrap = config.wrap _card.wrap.name = card.name _card.style = config.style + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts _card.subcards = config.subcards.map(scard => { scard.uuid = Utils.getuuid() @@ -385,7 +390,6 @@ initval: '', type: 'text', resourceType: '0', - setAll: 'false', span: span, labelwidth: 33.3, options: [], @@ -421,10 +425,7 @@ let _inputfields = [] let _tabfields = [] let _linkableFields = [] - let _linksupFields = [{ - field: '', - label: '绌�' - }] + let _linksupFields = [] let standardform = null let uniq = new Map() @@ -463,8 +464,16 @@ _tabIndex++ } } + + if (item.type === 'switch') { + _linksupFields.push({ + field: item.field, + label: _linkIndex + '銆�' + item.label + }) + } if (!['select', 'link', 'radio', 'checkcard'].includes(item.type)) return + if (item.type === 'checkcard' && item.multiple === 'true') return // 閫夐」鍗″閫� if (item.field && !uniq.has(item.field)) { uniq.set(item.field, true) @@ -653,20 +662,20 @@ <div className="menu-normal-form-edit-box" style={resetStyle(card.style)} onClick={this.clickComponent} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍒嗙粍" onClick={this.addCard} type="plus" /> + <PlusOutlined className="plus" title="娣诲姞鍒嗙粍" onClick={this.addCard}/> <NormalForm title="琛ㄥ崟璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="tabform" card={card}/> <PasteComponent config={card} options={['form']} updateConfig={this.pasteForm} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} - {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} + {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <FormTitle list={card.subcards} @@ -678,7 +687,7 @@ selectGroup={this.selectGroup} /> {group ? <div className="form-area"> - <Icon className="plus" title="娣诲姞琛ㄥ崟" onClick={this.addForm} type="plus" /> + <PlusOutlined className="plus" title="娣诲姞琛ㄥ崟" onClick={this.addForm}/> <FieldsComponent config={group} type="form" plusFields={this.plusFields} /> <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} /> {appType !== 'mob' ? <Button className="mk-cols-change" onClick={() => this.changecols(1)}>1鍒�</Button> : null} diff --git a/src/menu/components/group/normal-group/index.jsx b/src/menu/components/group/normal-group/index.jsx index 41dc6ed..2c087bc 100644 --- a/src/menu/components/group/normal-group/index.jsx +++ b/src/menu/components/group/normal-group/index.jsx @@ -1,15 +1,14 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Button } from 'antd' +import { Popover, Button } from 'antd' +import { EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined, PrinterOutlined } from '@ant-design/icons' import MKEmitter from '@/utils/events.js' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' import { resetStyle } from '@/utils/utils-custom.js' import getSettingForm from './options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const NormalForm = asyncIconComponent(() => import('@/components/normalform')) @@ -25,7 +24,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, group: null, editab: null, } @@ -187,17 +185,17 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="鍒嗙粍璁剧疆" width={700} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="tabs" card={group}/> <PasteComponent insert={this.insert} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(group.uuid)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + <DeleteOutlined className="close" title="delete" onClick={() => this.props.deletecomponent(group.uuid)} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> - {group.setting && group.setting.print === 'true' ? <Button className="print-button" icon="printer" onClick={this.print}></Button> : null} + {group.setting && group.setting.print === 'true' ? <Button className="print-button" onClick={this.print}><PrinterOutlined /></Button> : null} <GroupComponents config={group} handleList={this.updateComponent} deleteCard={this.deleteCard} /> </div> ) diff --git a/src/menu/components/group/paste/index.jsx b/src/menu/components/group/paste/index.jsx index 7c5e52a..65ad511 100644 --- a/src/menu/components/group/paste/index.jsx +++ b/src/menu/components/group/paste/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Icon, Modal, notification } from 'antd' +import { Modal, notification } from 'antd' +import { SnippetsOutlined } from '@ant-design/icons' import MenuUtils from '@/utils/utils-custom.js' import MKEmitter from '@/utils/events.js' @@ -81,7 +82,7 @@ return ( <div style={{display: 'inline-block'}}> - <Icon type="snippets" style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} /> + <SnippetsOutlined style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} /> <Modal title="绮樿创" visible={visible} diff --git a/src/menu/components/search/main-search/dragsearch/card.jsx b/src/menu/components/search/main-search/dragsearch/card.jsx index d5f7835..3ab0c51 100644 --- a/src/menu/components/search/main-search/dragsearch/card.jsx +++ b/src/menu/components/search/main-search/dragsearch/card.jsx @@ -1,6 +1,7 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Select, DatePicker, Input, Popover, Form } from 'antd' +import { Select, DatePicker, Input, Popover, Form } from 'antd' +import { CopyOutlined, EditOutlined, CloseOutlined } from '@ant-design/icons' import moment from 'moment' import asyncComponent from '@/utils/asyncComponent' @@ -10,7 +11,6 @@ const { MonthPicker, WeekPicker, RangePicker } = DatePicker const { Search } = Input const CheckCard = asyncComponent(() => import('@/templates/modalconfig/checkCard')) -const appType = sessionStorage.getItem('appType') const Card = ({ id, card, showField, moveCard, copyCard, findCard, editCard, delCard }) => { const originalIndex = findCard(id).index @@ -37,15 +37,11 @@ let _defaultValue = '' // 涓嬫媺鎼滅储銆佹椂闂磋寖鍥寸被鍨嬶紝鍒濆鍊奸渶瑕侀澶勭悊 if (card.type === 'multiselect' || card.type === 'select' || card.type === 'link') { - if (card.initval) { - let _option = card.options.filter(option => option.Value === card.initval)[0] - if (_option) { - _defaultValue = _option.Text || '' - } else { - _defaultValue = '' - } - } else if (card.setAll === 'true') { - _defaultValue = 'All' + let _option = card.options.filter(option => option.Value === card.initval)[0] + if (_option) { + _defaultValue = _option.Text || '' + } else { + _defaultValue = '' } } else if (card.type === 'daterange') { _defaultValue = [null, null] @@ -72,10 +68,6 @@ } } else if (card.type === 'multiselect' || card.type === 'select' || card.type === 'link') { formItem = (<Select value={_defaultValue}></Select>) - } else if (card.type === 'date' && appType === 'mob') { - formItem = (<div className="mob-list-item">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD') : '璇烽�夋嫨'}<Icon type="right" /></div>) - } else if (card.type === 'datemonth' && appType === 'mob') { - formItem = (<div className="mob-list-item">{card.initval ? moment().subtract(card.initval, 'month').format('YYYY-MM') : '璇烽�夋嫨'}<Icon type="right" /></div>) } else if (card.type === 'date') { formItem = (<Input style={{marginTop: '4px'}} placeholder={card.labelShow === 'false' ? card.label : ''} value={card.initval} />) } else if (card.type === 'dateweek') { @@ -98,9 +90,9 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="edit" type="edit" onClick={() => editCard(id)} /> - <Icon className="copy" title="copy" type="copy" onClick={() => copyCard(id)} /> - <Icon className="close" title="delete" type="close" onClick={() => delCard(id)} /> + <EditOutlined className="edit" onClick={() => editCard(id)} /> + <CopyOutlined className="copy" onClick={() => copyCard(id)} /> + <CloseOutlined className="close" onClick={() => delCard(id)} /> </div> } trigger="hover"> <div className={'page-card ' + card.labelShow + ' ' + card.type} style={{ opacity: opacity}}> diff --git a/src/menu/components/search/main-search/dragsearch/index.jsx b/src/menu/components/search/main-search/dragsearch/index.jsx index ad3fb82..36b39dc 100644 --- a/src/menu/components/search/main-search/dragsearch/index.jsx +++ b/src/menu/components/search/main-search/dragsearch/index.jsx @@ -7,7 +7,7 @@ import Card from './card' import './index.scss' -const Container = ({list, showField, placeholder, handleList, handleMenu, deleteMenu }) => { +const Container = ({list, showField, handleList, handleMenu, deleteMenu }) => { const [cards, setCards] = useState(list) const moveCard = (id, atIndex) => { const { card, index } = findCard(id) @@ -119,7 +119,7 @@ </Col> : null} {cards.length === 0 ? <div className="common-drawarea-placeholder"> - {placeholder} + 璇锋坊鍔犳悳绱㈡潯浠� </div> : null } </div> diff --git a/src/menu/components/search/main-search/index.jsx b/src/menu/components/search/main-search/index.jsx index dd3f54d..618db11 100644 --- a/src/menu/components/search/main-search/index.jsx +++ b/src/menu/components/search/main-search/index.jsx @@ -1,7 +1,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Modal, notification, Popover, Icon, Switch } from 'antd' +import { Modal, notification, Popover, Switch } from 'antd' +import { PlusOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -168,12 +169,14 @@ let linkableFields = [] card.search.forEach(item => { - if (item.uuid !== cell.uuid && (item.type === 'select' || item.type === 'link')) { - linkableFields.push({ - value: item.field, - text: item.label - }) - } + if (item.uuid === card.uuid) return + if (!['select', 'link', 'checkcard'].includes(item.type)) return + if (item.type === 'checkcard' && item.multiple === 'true') return + + linkableFields.push({ + value: item.field, + text: item.label + }) }) this.setState({ @@ -423,21 +426,20 @@ handleList={this.handleList} handleMenu={this.handleSearch} deleteMenu={this.deleteElement} - placeholder={dict['header.form.search.placeholder']} /> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞" onClick={this.addSearch} type="plus" /> + <PlusOutlined className="plus" title="娣诲姞" onClick={this.addSearch}/> <NormalForm title="鎼滅储璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="mainsearch" card={card}/> <PasteComponent config={card} options={['search', 'form']} updateConfig={this.checkComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(card.uuid)} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> {/* 缂栬緫鎼滅储鏉′欢 */} <Modal diff --git a/src/menu/components/search/main-search/index.scss b/src/menu/components/search/main-search/index.scss index d7eb2f7..e3fa843 100644 --- a/src/menu/components/search/main-search/index.scss +++ b/src/menu/components/search/main-search/index.scss @@ -93,15 +93,6 @@ .check-card-edit-box { margin-top: 5px!important; } - .mob-list-item { - text-align: right; - line-height: 40px; - white-space: nowrap; - padding-right: 5px; - i { - margin-left: 5px; - } - } .quickly-add { position: absolute; z-index: 3; diff --git a/src/menu/components/share/actioncomponent/actionform/index.jsx b/src/menu/components/share/actioncomponent/actionform/index.jsx index 00c691a..d9bb436 100644 --- a/src/menu/components/share/actioncomponent/actionform/index.jsx +++ b/src/menu/components/share/actioncomponent/actionform/index.jsx @@ -3,23 +3,24 @@ import { fromJS } from 'immutable' import { Form, Row, Col, Input, Select, Radio, notification, Tooltip, InputNumber, Cascader } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' -import { btnCustomClasses, formRule } from '@/utils/option.js' +import { formRule } from '@/utils/option.js' import asyncComponent from '@/utils/asyncComponent' import './index.scss' const { TextArea } = Input -const MkIcon = asyncComponent(() => import('@/components/mkIcon')) -const actionTypeOptions = { - pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'output', 'refreshTab', 'reload'], - prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'output', 'refreshTab', 'reload'], - exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'icon', 'class', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'output', 'refreshTab', 'reload'], - excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'sheet', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width'], - excelOut: ['label', 'OpenType', 'intertype', 'show', 'icon', 'class', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'resetPageIndex', 'pagination', 'search', 'width'], - popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'popClose', 'resetPageIndex', 'width', 'display', 'ratio', 'placement', 'syncComponent'], - tab: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'linkmenu', 'width'], - innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'show', 'icon', 'class', 'width', 'open'], - funcbutton: ['label', 'OpenType', 'funcType', 'show', 'icon', 'class', 'width'] +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) +const acTyOptions = { + pop: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'refreshTab'], + prompt: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'refreshTab'], + exec: ['label', 'OpenType', 'intertype', 'Ot', 'show', 'swipe', 'icon', 'class', 'color', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width', 'openmenu', 'open', 'refreshTab'], + excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'show', 'icon', 'class', 'color', 'sheet', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'switchTab', 'width'], + excelOut: ['label', 'OpenType', 'intertype', 'show', 'icon', 'class', 'color', 'execSuccess', 'execError', 'syncComponent', 'switchTab', 'resetPageIndex', 'pagination', 'search', 'width'], + popview: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'color', 'popClose', 'resetPageIndex', 'width', 'display', 'ratio', 'syncComponent', 'clickouter'], + tab: ['label', 'Ot', 'OpenType', 'show', 'icon', 'class', 'color', 'linkmenu', 'width'], + innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'show', 'swipe', 'icon', 'class', 'color', 'width', 'open'], + funcbutton: ['label', 'OpenType', 'funcType', 'show', 'swipe', 'icon', 'class', 'color', 'width'], + form: ['label', 'OpenType', 'formType', 'intertype', 'Ot', 'execSuccess', 'execError', 'resetPageIndex', 'syncComponent', 'width', 'open', 'refreshTab', 'title'] } class ActionForm extends Component { @@ -34,46 +35,27 @@ state = { formlist: null, // 琛ㄥ崟淇℃伅 - openType: null, // 鎵撳紑鏂瑰紡 - interType: null, // 鎺ュ彛绫诲瀷锛氬唴閮ㄣ�佸閮� - funcType: null, // 鍔熻兘绫诲瀷 - procMode: null, // 鍙傛暟鏂瑰紡 - control: '', - pageTemplate: null, appType: sessionStorage.getItem('appType'), - Ot: null, - requireOptions: [{ - value: 'notRequired', - text: this.props.dict['header.form.notRequired'] - }, { - value: 'requiredSgl', - text: this.props.dict['header.form.requiredSgl'] - }, { - value: 'required', - text: this.props.dict['header.form.required'] - }, { - value: 'requiredOnce', - text: this.props.dict['header.form.requiredOnce'] - }], + requireOptions: [], insertUpdateOptions: [{ value: 'insert', - text: this.props.dict['header.form.action.insert'] + text: '娣诲姞' }, { value: 'update', - text: this.props.dict['header.form.action.update'] + text: '淇敼' }, { value: 'audit', - text: this.props.dict['header.form.action.audit'] + text: '瀹℃牳' }], deleteOptions: [{ value: 'LogicDelete', - text: this.props.dict['header.form.action.LogicDelete'] + text: '閫昏緫鍒犻櫎' }, { value: 'delete', - text: this.props.dict['header.form.action.delete'] + text: '鐗╃悊鍒犻櫎' }, { value: 'custom', - text: this.props.dict['header.form.custom'] + text: '鑷畾涔�' }], interTypeOptions: [{ value: 'system', @@ -90,153 +72,327 @@ }] } + record = {} UNSAFE_componentWillMount () { - const { card, type } = this.props + const { type, dict } = this.props - let _opentype = card.OpenType // 鎵撳紑鏂瑰紡 - let _intertype = card.intertype || 'system' // 鎺ュ彛绫诲瀷 - let _funcType = card.funcType || '' // 鍔熻兘鎸夐挳榛樿绫诲瀷 - let _procMode = card.procMode || 'system' - let _Ot = card.Ot - let _pageTemplate = card.pageTemplate || '' - let control = card.control || '' + let requireOptions = [ + { value: 'notRequired', text: dict['header.form.notRequired'] }, + { value: 'requiredSgl', text: dict['header.form.requiredSgl'] }, + { value: 'required', text: dict['header.form.required'] }, + { value: 'requiredOnce', text: dict['header.form.requiredOnce'] } + ] - let _options = this.getOptions(_opentype, _intertype, _funcType, _pageTemplate, _procMode, _Ot, control) + if (type === 'card') { + requireOptions = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) + } + + let hasclass = true + this.props.formlist.forEach(item => { + this.record[item.key] = item.initVal + + if (item.key === 'class') { + hasclass = item.forbid !== true + } + }) + + let { shows, reOptions, reTypes, reTooltip, reRequired, reReadonly } = this.getMutilOptions(requireOptions) this.setState({ - Ot: _Ot, - control: control, - openType: _opentype, - interType: _intertype, - procMode: _procMode, - funcType: _funcType, - pageTemplate: _pageTemplate, + hasclass, + requireOptions: requireOptions, formlist: this.props.formlist.map(item => { - if (item.key === 'class') { - item.options = btnCustomClasses - } else if (item.key === 'innerFunc' && _procMode === 'inner') { - item.required = true - } else if (item.key === 'linkmenu') { - if (_opentype === 'funcbutton' && _funcType === 'scan') { - item.required = false - item.tooltip = '浣跨敤鎵爜鐧诲綍鍔熻兘鎴栬彍鍗曡烦杞姛鑳芥椂锛岄渶閫夋嫨璺宠浆鐨勮彍鍗曘��' - } else { - item.tooltip = '' - item.required = true - } - } else if (item.key === 'intertype') { - let iscustom = ['pop', 'prompt', 'exec'].includes(_opentype) - item.options = this.state.interTypeOptions.filter(op => (iscustom || op.value !== 'custom')) - } else if (item.key === 'Ot') { - if (card.sqlType === 'insert') { - item.options = this.state.requireOptions.filter(op => ['notRequired'].includes(op.value)) - } else if (type === 'card') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - } else if (_pageTemplate === 'pay') { // 琛岀骇鎸夐挳銆佹敮浠樻寜閽紝鍙兘閫夊崟琛� - item.options = this.state.requireOptions.filter(op => ['requiredSgl'].includes(op.value)) - } else if (['innerpage', 'tab', 'popview', 'excelIn'].includes(_opentype)) { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - } else { - item.options = this.state.requireOptions - } - } else if (item.key === 'sqlType') { - if (['prompt', 'exec'].includes(_opentype)) { - item.options = this.state.deleteOptions - } else { - item.options = this.state.insertUpdateOptions - } - } else if (item.key === 'OpenType') { - item.initVal = _opentype + item.hidden = !shows.includes(item.key) + item.initVal = this.record[item.key] + + if (reOptions[item.key]) { + item.options = reOptions[item.key] + } + if (reTypes[item.key]) { + item.type = reTypes[item.key] + } + if (reTooltip[item.key] !== undefined) { + item.tooltip = reTooltip[item.key] + } + if (reRequired[item.key] !== undefined) { + item.required = reRequired[item.key] + } + if (reReadonly[item.key] !== undefined) { + item.readonly = reReadonly[item.key] } - item.hidden = !_options.includes(item.key) return item }) }) - } - - getOptions = (_opentype, _intertype, _funcType, _pageTemplate, _procMode, _Ot, _control) => { - let _options = actionTypeOptions[_opentype] ? fromJS(actionTypeOptions[_opentype]).toJS() : [] // 閫夐」鍒楄〃 - - if (_opentype === 'innerpage') { // 鏂伴〉闈紝鍙�夋ā鏉�(鑷畾涔夋椂锛屽彲濉叆澶栭儴閾炬帴) - if (_pageTemplate === 'custom') { - _options.push('url', 'joint') - } else if (_pageTemplate === 'page') { - _options.push('copyMenuId', 'joint') - } else if (_pageTemplate === 'linkpage') { - _options.push('linkmenu', 'joint') - } - } else if (_opentype === 'excelOut') { // 瀵煎叆瀵煎嚭 - if (_intertype === 'outer') { - _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc') - } else if (_intertype === 'inner') { - _options.push('innerFunc') - } - } else if (_opentype === 'excelIn') { // 瀵煎叆瀵煎嚭 - if (_intertype === 'outer') { - _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') - } else if (_intertype === 'inner') { - _options.push('innerFunc') - } - } else if (_opentype === 'funcbutton') { - if (_funcType === 'print') { - _options.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError', 'resetPageIndex') - if (_intertype === 'outer') { - _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') - } else if (_intertype === 'inner') { - _options.push('innerFunc') - } - } else if (_funcType === 'mkBinding' || _funcType === 'mkUnBinding') { - _options.push('execSuccess', 'execError') - } else if (_funcType === 'closetab') { - _options.push('refreshTab') - } else if (_funcType === 'scan') { - _options.push('linkmenu') - } else if (_funcType === 'goBack') { - _options.push('reload') - } - } else if (_opentype !== 'popview' && _opentype !== 'tab') { - if (_intertype === 'custom') { - _options = _options.filter(m => m !== 'output') - _options.push('procMode', 'interface', 'callbackType', 'cbTable', 'proInterface', 'method', 'cross') - if (_procMode === 'system') { - _options.push('sql', 'sqlType') - } else { - _options.push('innerFunc') - } - } else if (_intertype === 'outer') { - _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') - } else if (_intertype === 'inner') { - _options.push('innerFunc') - } else { - _options.push('sql', 'sqlType') - } - } - - if (_Ot !== 'notRequired' && _opentype !== 'excelOut') { - _options.push('control') - if (_control) { - _options.push('controlField', 'controlVal') - } - } - if (_Ot === 'requiredSgl' && ['pop', 'prompt', 'exec'].includes(_opentype)) { - _options.push('swipe') - } - - return _options } componentDidMount () { const { card } = this.props if (card.focus) { - try { - let _form = document.getElementById('label') - _form && _form.select() - } catch (e) { - console.warn('琛ㄥ崟focus澶辫触锛�') + setTimeout(() => { + try { + let _form = document.getElementById('label') + _form && _form.select() + } catch (e) { + console.warn('琛ㄥ崟focus澶辫触锛�') + } + }, 100) + } + } + + getMutilOptions = (requireOptions) => { + const { appType } = this.state + + let openType = this.record.OpenType + let Ot = this.record.Ot + let shows = fromJS(acTyOptions[openType] || []).toJS() + let reOptions = {} + let reTypes = {} + let reTooltip = {} + let reRequired = {} + let reReadonly = {} + + if (openType === 'pop' || openType === 'prompt' || openType === 'exec') { + let intertype = this.record.intertype + + reOptions.intertype = this.state.interTypeOptions + + if (intertype === 'custom') { + shows.push('procMode', 'interface', 'callbackType', 'cbTable', 'proInterface', 'method', 'cross') + if (this.record.procMode === 'system') { + shows.push('sql', 'sqlType') + } else { + reRequired.innerFunc = true + shows.push('innerFunc') + } + reReadonly.interface = false + reRequired.interface = true + } else if (intertype === 'outer') { + shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc', 'output') + reRequired.innerFunc = false + + if (this.record.sysInterface === 'false') { + reReadonly.interface = false + reRequired.interface = true + } else { + reReadonly.interface = true + reRequired.interface = false + } + } else if (intertype === 'inner') { + shows.push('innerFunc', 'output') + reRequired.innerFunc = true + } else { + shows.push('sql', 'sqlType', 'output') } + + if (this.record.sqlType === 'insert') { + reOptions.Ot = requireOptions.filter(op => op.value === 'notRequired') + } else { + reOptions.Ot = requireOptions + } + + if (openType === 'prompt' || openType === 'exec') { + reOptions.sqlType = this.state.deleteOptions + } else { + reOptions.sqlType = this.state.insertUpdateOptions + } + if (this.record.execSuccess === 'goback') { + shows.push('reload') + } + } else if (openType === 'form') { + let intertype = this.record.intertype + + if (this.record.formType === 'switch') { + shows.push('field', 'size', 'openVal', 'closeVal', 'openText', 'closeText') + } else { + shows.push('field', 'openVal', 'closeVal') + } + + reOptions.intertype = this.state.interTypeOptions.filter(item => item.value !== 'custom') + + if (intertype === 'outer') { + shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') + reRequired.innerFunc = false + + if (this.record.sysInterface === 'false') { + reReadonly.interface = false + reRequired.interface = true + } else { + reReadonly.interface = true + reRequired.interface = false + } + } else if (intertype === 'inner') { + shows.push('innerFunc') + reRequired.innerFunc = true + } else { + shows.push('sql', 'sqlType') + } + + if (this.record.execSuccess === 'goback') { + shows.push('reload') + } + + reOptions.Ot = requireOptions + reOptions.sqlType = [{ + value: 'update', + text: '淇敼' + }, { + value: 'custom', + text: '鑷畾涔�' + }] + } else if (openType === 'excelIn') { + reOptions.intertype = this.state.interTypeOptions.filter(op => op.value !== 'custom') + reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) + + if (this.record.intertype === 'outer') { + shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') + reRequired.innerFunc = false + + if (this.record.sysInterface === 'false') { + reReadonly.interface = false + reRequired.interface = true + } else { + reReadonly.interface = true + reRequired.interface = false + } + } else if (this.record.intertype === 'inner') { + shows.push('innerFunc') + reRequired.innerFunc = true + } + } else if (openType === 'excelOut') { + reOptions.intertype = this.state.interTypeOptions.filter(op => op.value !== 'custom') + + if (this.record.intertype === 'outer') { + shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc') + reRequired.innerFunc = false + + if (this.record.sysInterface === 'false') { + reReadonly.interface = false + reRequired.interface = true + } else { + reReadonly.interface = true + reRequired.interface = false + } + } else if (this.record.intertype === 'inner') { + shows.push('innerFunc') + reRequired.innerFunc = true + } + } else if (openType === 'popview') { + reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) + + if (this.record.display === 'drawer') { + shows.push('placement') + } + } else if (openType === 'tab') { + reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) + + reRequired.linkmenu = true + reTooltip.linkmenu = '' + } else if (openType === 'innerpage') { + reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) + + if (this.record.pageTemplate === 'custom') { + shows.push('url', 'joint') + } else if (this.record.pageTemplate === 'linkpage') { + shows.push('linkmenu', 'joint') + + reRequired.linkmenu = true + reTooltip.linkmenu = '' + } else if (this.record.pageTemplate === 'billprint') { + shows.push('printTemp') + reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value)) + } else if (this.record.pageTemplate === 'pay') { + reOptions.Ot = requireOptions.filter(op => op.value === 'requiredSgl') + } + } else if (openType === 'funcbutton') { + reOptions.intertype = this.state.interTypeOptions.filter(op => op.value !== 'custom') + reOptions.Ot = requireOptions + + let _funcType = this.record.funcType + + if (_funcType === 'print') { + shows.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError', 'resetPageIndex') + if (this.record.intertype === 'outer') { + shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') + reRequired.innerFunc = false + + if (this.record.sysInterface === 'false') { + reReadonly.interface = false + reRequired.interface = true + } else { + reReadonly.interface = true + reRequired.interface = false + } + } else if (this.record.intertype === 'inner') { + shows.push('innerFunc') + reRequired.innerFunc = true + } + } else if (_funcType === 'mkBinding' || _funcType === 'mkUnBinding') { + shows.push('execSuccess', 'execError') + } else if (_funcType === 'closetab') { + shows.push('refreshTab') + } else if (_funcType === 'scan') { + shows.push('linkmenu') + + reRequired.linkmenu = false + reTooltip.linkmenu = '浣跨敤鎵爜鐧诲綍鍔熻兘鎴栬彍鍗曡烦杞姛鑳芥椂锛岄渶閫夋嫨璺宠浆鐨勮彍鍗曘��' + } else if (_funcType === 'goBack') { + shows.push('reload') + } + } + + if (appType === 'mob') { + if (Ot !== 'notRequired') { + shows.push('control') + reOptions.control = [ + { value: '', text: '鏃�' }, + { value: 'disabled', text: '绂佺敤' }, + { value: 'hidden', text: '闅愯棌' }, + ] + if (this.record.control) { + shows.push('controlField', 'controlVal') + } + } + } else { + if (Ot !== 'notRequired') { + reOptions.control = [ + { value: '', text: '鏃�' }, + { value: 'disabled', text: '绂佺敤' }, + { value: 'hidden', text: '闅愯棌' }, + { value: 'parent', text: '涓婄骇' } + ] + } else { + reOptions.control = [ + { value: '', text: '鏃�' }, + { value: 'parent', text: '涓婄骇' } + ] + } + shows.push('control') + if (this.record.control === 'parent') { + reTypes.controlField = 'text' + } else { + reTypes.controlField = 'select' + } + if (this.record.control) { + shows.push('controlField', 'controlVal') + } + } + + if (this.record.show === 'icon') { + reRequired.icon = true + } else { + reRequired.icon = false + } + + return { + shows, + reOptions, + reTypes, + reTooltip, + reRequired, + reReadonly } } @@ -247,255 +403,179 @@ * 3銆佸垏鎹㈡爣绛剧被鍨嬶紝閲嶇疆鍙�夋爣绛� */ optionChange = (key, value) => { - const { type } = this.props - const { openType, procMode, Ot, pageTemplate, control } = this.state + const { hasclass, appType, requireOptions } = this.state + + this.record[key] = value + let _fieldval = {} if (key === 'OpenType') { - let _options = this.getOptions(value, 'system', this.state.funcType, '', 'system', Ot, control) + this.record.intertype = 'system' + this.record.procMode = 'system' + this.record.display = 'modal' + this.record.pageTemplate = '' + this.record.funcType = '' + this.record.sqlType = '' - let _fieldval = {} - let _formlist = this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) + if (value === 'pop' || value === 'prompt' || value === 'exec') { + _fieldval.intertype = 'system' + _fieldval.sqlType = '' + + } else if (value === 'form') { + _fieldval.Ot = 'requiredSgl' - if (item.key === 'intertype') { - let iscustom = ['pop', 'prompt', 'exec'].includes(value) - item.options = this.state.interTypeOptions.filter(op => (iscustom || op.value !== 'custom')) - } else if (item.key === 'control') { - item.initVal = control - } + this.record.Ot = 'requiredSgl' + } else if (value === 'excelIn') { + _fieldval.intertype = 'system' + _fieldval.Ot = 'notRequired' + + _fieldval.label = this.props.dict['model.form.excelIn'] + _fieldval.class = 'dgreen' + this.record.Ot = 'notRequired' + this.record.label = this.props.dict['model.form.excelIn'] + this.record.class = 'dgreen' + + + } else if (value === 'excelOut') { + _fieldval.intertype = 'system' + _fieldval.label = this.props.dict['model.form.excelOut'] + _fieldval.class = 'dgreen' + this.record.Ot = 'notRequired' + this.record.label = this.props.dict['model.form.excelOut'] + this.record.class = 'dgreen' + + } else if (value === 'popview') { + _fieldval.display = 'modal' + _fieldval.Ot = 'requiredSgl' + _fieldval.popClose = 'grid' + this.record.display = 'modal' + this.record.Ot = 'requiredSgl' + this.record.popClose = 'grid' + + } else if (value === 'tab') { + _fieldval.Ot = 'requiredSgl' + this.record.Ot = 'requiredSgl' + + } else if (value === 'innerpage') { + _fieldval.Ot = 'requiredSgl' + this.record.Ot = 'requiredSgl' + + } else if (value === 'funcbutton') { + // _fieldval.funcType = '' + + } + if (value === 'excelIn') { + _fieldval.label = this.props.dict['model.form.excelIn'] + _fieldval.class = 'dgreen' + } else if (value === 'excelOut') { + _fieldval.label = this.props.dict['model.form.excelOut'] + _fieldval.class = 'dgreen' + _fieldval.control = '' + this.record.control = '' + } - if (item.hidden) return item - - if (item.key === 'intertype') { - _fieldval.intertype = 'system' - } else if (item.key === 'popClose' && value === 'popview') { - _fieldval.popClose = 'grid' - } else if (item.key === 'Ot') { - if (type === 'card') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - } else if (['innerpage', 'tab', 'popview'].includes(value)) { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - _fieldval.Ot = 'requiredSgl' - } else if (value === 'excelIn') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - _fieldval.Ot = 'notRequired' - } else { - item.options = this.state.requireOptions - } - } else if (item.key === 'sqlType') { - if (['prompt', 'exec'].includes(value)) { - item.options = this.state.deleteOptions - } else { - item.options = this.state.insertUpdateOptions - } - _fieldval.sqlType = '' - } else if (item.key === 'pageTemplate') { - item.initVal = '' - } else if (item.key === 'linkmenu') { - if (value === 'funcbutton' && this.state.funcType === 'scan') { - item.required = false - item.tooltip = '浣跨敤鎵爜鐧诲綍鍔熻兘鎴栬彍鍗曡烦杞姛鑳芥椂锛岄渶閫夋嫨璺宠浆鐨勮彍鍗曘��' - } else { - item.tooltip = '' - item.required = true - } - } - - return item - }) - - this.setState({ - openType: value, - intertype: 'system', - procMode: 'system', - pageTemplate: '', - formlist: _formlist - }, () => { - if (value === 'excelIn') { - _fieldval.label = this.props.dict['model.form.excelIn'] - _fieldval.class = 'dgreen' - } else if (value === 'excelOut') { - _fieldval.label = this.props.dict['model.form.excelOut'] - _fieldval.class = 'dgreen' - } - - this.props.form.setFieldsValue(_fieldval) - }) + if (appType !== 'mob' && _fieldval.Ot === 'notRequired') { + this.record.control = '' + _fieldval.control = '' + } } else if (key === 'funcType') { - let _options = this.getOptions(openType, this.state.interType, value, pageTemplate, procMode, Ot, control) - let _fieldval = {} - if (value === 'print') { _fieldval.label = '鎵撳嵃' } else if (value === 'closetab') { _fieldval.label = '鍏抽棴' } - - this.setState({ - funcType: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - - if (item.hidden) return item - - if (item.key === 'intertype') { - _fieldval.intertype = this.state.interType - } else if (item.key === 'Ot' && value === 'print') { - if (type === 'card') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - } else { - item.options = this.state.requireOptions - } - } else if (item.key === 'linkmenu') { - if (value === 'scan') { - item.required = false - item.tooltip = '浣跨敤鎵爜鐧诲綍鍔熻兘鎴栬彍鍗曡烦杞姛鑳芥椂锛岄渶閫夋嫨璺宠浆鐨勮彍鍗曘��' - } else { - item.tooltip = '' - item.required = true - } - } - - return item - }) - }, () => { - this.props.form.setFieldsValue(_fieldval) - }) } else if (key === 'sqlType') { - let _fieldval = {} - this.setState({ - formlist: this.state.formlist.map(item => { - if (item.key === 'Ot') { - if (value === 'insert') { - item.options = this.state.requireOptions.filter(op => ['notRequired'].includes(op.value)) - } else if (type === 'card') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - } else { - item.options = this.state.requireOptions - } - } - return item - }) - }, () => { - if (value === 'insert') { - _fieldval.label = '娣诲姞' + if (value === 'insert') { + _fieldval.label = '娣诲姞' + _fieldval.Ot = 'notRequired' + if (hasclass) { _fieldval.class = 'green' - _fieldval.Ot = 'notRequired' - } else if (value === 'update') { - _fieldval.label = '淇敼' - _fieldval.class = 'purple' - _fieldval.Ot = 'requiredSgl' - } else if (value === 'audit') { - _fieldval.label = '瀹℃牳' - _fieldval.class = 'primary' - _fieldval.Ot = 'requiredSgl' - } else if (value === 'LogicDelete' || value === 'delete') { - _fieldval.label = '鍒犻櫎' - _fieldval.class = 'danger' - _fieldval.Ot = 'requiredSgl' + } else { + _fieldval.color = 'success' } - - this.props.form.setFieldsValue(_fieldval) - }) - } else if (key === 'pageTemplate') { - let _fieldval = {} - let _options = this.getOptions(openType, this.state.interType, this.state.funcType, value, procMode, Ot, control) - - this.setState({ - pageTemplate: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - - if (item.key === 'Ot') { - if (value === 'pay') { - item.options = this.state.requireOptions.filter(op => ['requiredSgl'].includes(op.value)) - _fieldval.Ot = 'requiredSgl' - } else if (type === 'card') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - } else { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - } + } else if (value === 'update') { + _fieldval.label = '淇敼' + _fieldval.Ot = 'requiredSgl' + if (this.record.OpenType !== 'form') { + if (hasclass) { + _fieldval.class = 'purple' + } else { + _fieldval.color = 'primary' } - - return item - }) - }, () => { - this.props.form.setFieldsValue(_fieldval) - }) - } else if (key === 'intertype') { - let _options = this.getOptions(openType, value, this.state.funcType, pageTemplate, procMode, Ot, control) + } + } else if (value === 'audit') { + _fieldval.label = '瀹℃牳' + _fieldval.Ot = 'requiredSgl' + if (hasclass) { + _fieldval.class = 'primary' + } else { + _fieldval.color = 'warning' + } + } else if (value === 'LogicDelete' || value === 'delete') { + _fieldval.label = '鍒犻櫎' + _fieldval.Ot = 'requiredSgl' + if (hasclass) { + _fieldval.class = 'danger' + } else { + _fieldval.color = 'danger' + } + } - this.setState({ - interType: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) + this.record.label = _fieldval.label || this.record.label || '' + this.record.Ot = _fieldval.Ot || this.record.Ot || '' + this.record.class = _fieldval.class || this.record.class || '' + this.record.color = _fieldval.color || this.record.color || '' - if (item.key === 'interface') { - item.readonly = false - } else if (item.key === 'sysInterface') { - item.initVal = 'false' - } else if (item.key === 'Ot') { - if (type === 'card') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - } else { - item.options = this.state.requireOptions - } - } - return item - }) - }) - } else if (key === 'procMode') { - let _options = this.getOptions(openType, this.state.interType, this.state.funcType, pageTemplate, value, Ot, control) - - this.setState({ - procMode: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - - if (item.key === 'innerFunc') { - item.required = true - } - return item - }) - }) + if (appType !== 'mob' && _fieldval.Ot === 'notRequired') { + this.record.control = '' + _fieldval.control = '' + } } else if (key === 'Ot') { - let _options = this.getOptions(openType, this.state.interType, this.state.funcType, pageTemplate, procMode, value, control) - - this.setState({ - Ot: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - return item - }) - }) - } else if (key === 'control') { - let _options = this.getOptions(openType, this.state.interType, this.state.funcType, pageTemplate, procMode, Ot, value) - - this.setState({ - control: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - return item - }) - }) + if (appType !== 'mob' && value === 'notRequired') { + this.record.control = '' + _fieldval.control = '' + } + } else if (key === 'pageTemplate') { + if (value === 'pay') { + _fieldval.Ot = 'requiredSgl' + this.record.Ot = 'requiredSgl' + } + } else if (key === 'intertype') { + this.record.sysInterface = 'false' } else if (key === 'sysInterface') { if (value === 'true') { - this.props.form.setFieldsValue({ - interface: window.GLOB.mainSystemApi || '' - }) + _fieldval.interface = window.GLOB.mainSystemApi || '' + this.record.interface = window.GLOB.mainSystemApi || '' } - this.setState({ - formlist: this.state.formlist.map(item => { - if (item.key === 'interface' && value === 'true') { - item.readonly = true - } else if (item.key === 'interface') { - item.readonly = false - } - - return item - }) - }) } + + let { shows, reOptions, reTypes, reTooltip, reRequired, reReadonly } = this.getMutilOptions(requireOptions) + + this.setState({ + formlist: this.state.formlist.map(item => { + item.hidden = !shows.includes(item.key) + item.initVal = this.record[item.key] + + if (reOptions[item.key]) { + item.options = reOptions[item.key] + } + if (reTypes[item.key]) { + item.type = reTypes[item.key] + } + if (reTooltip[item.key] !== undefined) { + item.tooltip = reTooltip[item.key] + } + if (reRequired[item.key] !== undefined) { + item.required = reRequired[item.key] + } + if (reReadonly[item.key] !== undefined) { + item.readonly = reReadonly[item.key] + } + + return item + }) + }, () => { + this.props.form.setFieldsValue(_fieldval) + }) } handleSubmit = (e) => { @@ -507,212 +587,119 @@ } getFields() { + const { dict } = this.props const { getFieldDecorator } = this.props.form const fields = [] this.state.formlist.forEach((item, index) => { if (item.hidden || item.forbid) return - if (item.type === 'text') { // 鏂囨湰鎼滅储 - let _rules = [] + let span = 12 + let rules = [] + let className = '' + let content = null + let initVal = item.initVal || '' + + if (item.type === 'splitLine') { + fields.push( + <Col span={24} key={index}> + <p style={{borderBottom: '1px solid #e9e9e9', color: '#1890ff', textAlign: 'center'}}>{item.label}</p> + </Col> + ) + return + } + if (item.type === 'text') { + rules = [ + { required: item.required, message: dict['form.required.input'] + item.label + '!' } + ] + if (item.key === 'innerFunc') { let str = '^(' + item.fields.join('|') + ')' let _patten = new RegExp(str + formRule.func.innerPattern + '$', 'g') - _rules = [{ - pattern: _patten, - message: formRule.func.innerMessage - }, { - max: formRule.func.max, - message: formRule.func.maxMessage - }] + rules.push( + { pattern: _patten, message: formRule.func.innerMessage }, + { max: formRule.func.max, message: formRule.func.maxMessage } + ) } else if (item.key === 'outerFunc' || item.key === 'callbackFunc') { - _rules = [{ - pattern: formRule.func.pattern, - message: formRule.func.message - }, { - max: formRule.func.max, - message: formRule.func.maxMessage - }] + rules.push( + { pattern: formRule.func.pattern, message: formRule.func.message }, + { max: formRule.func.max, message: formRule.func.maxMessage } + ) } else { - _rules = [{ - max: formRule.input.max, - message: formRule.input.message - }] + rules.push({ max: formRule.input.max, message: formRule.input.message }) } - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal || '', - rules: [ - { - required: item.readonly ? false : !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - }, - ..._rules - ] - })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)} - </Form.Item> - </Col> - ) - } else if (item.type === 'tip') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.label}> - {item} - </Form.Item> - </Col> - ) + + content = <Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} /> } else if (item.type === 'number') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: item.readonly ? false : !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - } - ] - })(<InputNumber min={0} max={10000} precision={0} />)} - </Form.Item> - </Col> - ) + rules = [ + { required: item.required, message: dict['form.required.input'] + item.label + '!' } + ] + + content = <InputNumber min={item.min} max={item.max} precision={item.precision} /> } else if (item.type === 'select') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal || '', - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Select - showSearch - allowClear={item.allowClear === true} - filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} - onChange={(value) => {this.optionChange(item.key, value)}} - getPopupContainer={() => document.getElementById('winter')} - > - {item.options.map((option, index) => - <Select.Option key={index} value={(option.value || option.field)}> - {(option.text || option.label)} - </Select.Option> - )} - </Select> - )} - </Form.Item> - </Col> - ) + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <Select + showSearch + allowClear={item.allowClear === true} + filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} + onChange={(value) => {this.optionChange(item.key, value)}} + getPopupContainer={() => document.getElementById('winter')} + > + {item.options.map((option, index) => + <Select.Option key={index} value={(option.value || option.field)}> + {(option.text || option.label)} + </Select.Option> + )} + </Select> } else if (item.type === 'radio') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Radio.Group onChange={(e) => {this.optionChange(item.key, e.target.value)}} disabled={item.readonly}> - { - item.options.map(option => { - return ( - <Radio key={option.value} value={option.value}>{option.text}</Radio> - ) - }) - } - </Radio.Group> - )} - </Form.Item> - </Col> - ) - } else if (item.type === 'textarea') { - fields.push( - <Col span={24} key={index}> - <Form.Item label={item.label} className="textarea"> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: item.readonly ? false : !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - } - ] - })(<TextArea rows={2} readOnly={item.readonly}/>)} - </Form.Item> - </Col> - ) + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <Radio.Group onChange={(e) => {this.optionChange(item.key, e.target.value)}}> + {item.options.map(option => <Radio key={option.value} value={option.value}>{option.text}</Radio>)} + </Radio.Group> } else if (item.type === 'cascader') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal || [], - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Cascader options={item.options || []} expandTrigger="hover" placeholder=""/> - )} - </Form.Item> - </Col> - ) + initVal = item.initVal || [] + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <Cascader options={item.options || []} expandTrigger="hover" placeholder=""/> } else if (item.type === 'icon') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.label}> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <MkIcon allowClear/> - )} - </Form.Item> - </Col> - ) + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <MkEditIcon options={['edit', 'hint', 'direction', 'normal', 'data']} allowClear/> + } else if (item.type === 'textarea') { + span = 24 + className = 'textarea' + rules = [ + { required: item.readonly ? false : item.required, message: dict['form.required.input'] + item.label + '!' } + ] + + content = <TextArea rows={2} readOnly={item.readonly}/> } + + fields.push( + <Col span={span} key={index}> + <Form.Item className={className} label={item.tooltip ? + <Tooltip placement="topLeft" title={item.tooltip}> + <QuestionCircleOutlined className="mk-form-tip" /> + {item.label} + </Tooltip> : item.label + }> + {getFieldDecorator(item.key, { + initialValue: initVal, + rules: rules + })(content)} + </Form.Item> + </Col> + ) }) return fields } @@ -727,18 +714,16 @@ values.verify = card.verify || null values.modal = card.modal || null - if (values.show === 'icon' && !values.icon) { - notification.warning({ - top: 92, - message: '璇烽�夋嫨鍥炬爣锛�', - duration: 5 - }) - return + if (values.OpenType === 'form') { + if (/^(0|[1-9]\d*)$/.test(values.openVal) && /^(0|[1-9]\d*)$/.test(values.closeVal)) { + values.openVal = +values.openVal + values.closeVal = +values.closeVal + } } else if (values.OpenType === 'excelOut') { if (values.intertype === 'system' && setting.interType !== 'system') { notification.warning({ top: 92, - message: '琛ㄦ牸鏁版嵁鏌ヨ鏈娇鐢ㄦ暟鎹簮锛屽鍑篍xcel浣跨敤鍐呴儴鎺ュ彛鏃讹紝闇�鑷畾涔夊唴閮ㄥ嚱鏁帮紒', + message: '琛ㄦ牸鏁版嵁鏌ヨ鏈娇鐢ㄧ郴缁熷嚱鏁帮紝瀵煎嚭Excel涓嶅彲浣跨敤绯荤粺鍑芥暟锛�', duration: 5 }) return diff --git a/src/menu/components/share/actioncomponent/dragaction/card.jsx b/src/menu/components/share/actioncomponent/dragaction/card.jsx index 4a6e8b5..d9219b1 100644 --- a/src/menu/components/share/actioncomponent/dragaction/card.jsx +++ b/src/menu/components/share/actioncomponent/dragaction/card.jsx @@ -1,10 +1,13 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Button, Popover } from 'antd' +import { Button, Popover } from 'antd' +import { CopyOutlined, EditOutlined, FontColorsOutlined, CloseOutlined, ProfileOutlined } from '@ant-design/icons' + +import MkIcon from '@/components/mk-icon' import { resetStyle } from '@/utils/utils-custom.js' import './index.scss' -const Card = ({ id, card, moveCard, findCard, editCard, delCard, copyCard, changeStyle, profileCard, doubleClickCard }) => { +const Card = ({ id, card, type, moveCard, findCard, editCard, delCard, copyCard, changeStyle, profileCard, doubleClickCard }) => { const originalIndex = findCard(id).index const [{ isDragging }, drag] = useDrag({ item: { type: 'action', id, originalIndex }, @@ -38,32 +41,40 @@ let btnElement = null let _style = resetStyle(card.style) + let _class = '' + let show = card.show + if (type === 'datacard') { + _style = null + _class = 'swiper swiper-' + card.color + show = 'button' + } - if (card.show === 'icon') { + if (show === 'icon') { btnElement = ( <Button type="link" - icon={card.icon} style={_style} + className={_class} onDoubleClick={() => doubleClickCard(id)} - >{card.icon ? '' : card.label}</Button> + >{card.icon ? <MkIcon type={card.icon}/> : card.label}</Button> ) - } else if (card.show === 'link') { + } else if (show === 'link') { btnElement = ( <Button type="link" style={_style} + className={_class} onDoubleClick={() => doubleClickCard(id)} - >{card.label}{card.icon ? <Icon type={card.icon}/> : null}</Button> + >{card.label}{card.icon ? <MkIcon type={card.icon}/> : null}</Button> ) } else { btnElement = ( <Button - icon={card.icon} style={_style} + className={_class} onDoubleClick={() => doubleClickCard(id)} > - {card.label} + <MkIcon type={card.icon}/>{card.label} </Button> ) } @@ -71,11 +82,11 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => editCard(id)} /> - <Icon className="copy" title="澶嶅埗" type="copy" onClick={() => copyCard(id)} /> - <Icon className="close" title="鍒犻櫎" type="close" onClick={() => delCard(id)} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => changeStyle(id)} type="font-colors" /> - {hasProfile ? <Icon className="profile" title="楠岃瘉" type="profile" onClick={() => profileCard(id)} /> : null} + <EditOutlined className="edit" onClick={() => editCard(id)} /> + <CopyOutlined className="copy" onClick={() => copyCard(id)} /> + <CloseOutlined className="close" onClick={() => delCard(id)} /> + {type !== 'datacard' ? <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => changeStyle(id)}/> : ''} + {hasProfile ? <ProfileOutlined className="profile" title="楠岃瘉" onClick={() => profileCard(id)} /> : null} </div> } trigger="hover"> <div className="page-card" style={{ opacity: opacity}}> diff --git a/src/menu/components/share/actioncomponent/dragaction/index.jsx b/src/menu/components/share/actioncomponent/dragaction/index.jsx index b2fdd05..e834be6 100644 --- a/src/menu/components/share/actioncomponent/dragaction/index.jsx +++ b/src/menu/components/share/actioncomponent/dragaction/index.jsx @@ -7,7 +7,7 @@ import Card from './card' import './index.scss' -const Container = ({list, handleList, handleMenu, deleteMenu, profileMenu, changeBtnStyle, dropButton, doubleClickCard }) => { +const Container = ({list, type, handleList, handleMenu, deleteMenu, profileMenu, changeBtnStyle, dropButton, doubleClickCard }) => { const [cards, setCards] = useState(list) const moveCard = (id, atIndex) => { const { card, index } = findCard(id) @@ -63,6 +63,13 @@ let _val = fromJS(copycard).toJS() + if (_val.control) { + _val.control = '' + + delete _val.controlField + delete _val.controlVal + } + copycard.uuid = Utils.getuuid() copycard.originCard = card @@ -105,6 +112,7 @@ id={card.uuid} key={card.uuid} card={card} + type={type} moveCard={moveCard} copyCard={copyCard} editCard={editCard} diff --git a/src/menu/components/share/actioncomponent/formconfig.jsx b/src/menu/components/share/actioncomponent/formconfig.jsx index 559c61c..2516398 100644 --- a/src/menu/components/share/actioncomponent/formconfig.jsx +++ b/src/menu/components/share/actioncomponent/formconfig.jsx @@ -1,5 +1,6 @@ import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' +import { btnCustomClasses } from '@/utils/option.js' const Formdict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS @@ -14,6 +15,8 @@ export function getActionForm (card, functip, config, usefulFields, type, menulist = [], modules = []) { let appType = sessionStorage.getItem('appType') let viewType = sessionStorage.getItem('editMenuType') // 寮圭獥 popview + let printTemps = sessionStorage.getItem('printTemps') + printTemps = printTemps ? JSON.parse(printTemps) : [] let setting = config.setting || {} let columns = config.columns || [] let appMenus = [] @@ -82,7 +85,7 @@ const isApp = ['pc', 'mob'].includes(appType) let funTypes = [ - { value: 'changeuser', text: Formdict['header.form.func.changeuser'] }, + { value: 'changeuser', text: '鍒囨崲鐢ㄦ埛' }, { value: 'print', text: '鏍囩鎵撳嵃' }, { value: 'closetab', text: '鏍囩鍏抽棴' }, ] @@ -98,34 +101,32 @@ } else { appMenus = [] } - - if (appType === 'mob') { - opentypes = opentypes.filter(item => ['pop', 'prompt', 'exec', 'innerpage', 'funcbutton'].includes(item.value)) - funTypes = [ - { value: 'scan', text: '鎵爜' }, - { value: 'logout', text: '閫�鍑�' }, - { value: 'mkBinding', text: '寮�閫氭壂鐮佺櫥褰�' }, - { value: 'mkUnBinding', text: '鐢ㄦ埛瑙g粦' }, - { value: 'reAuth', text: '鍒囨崲绯荤粺锛堟竻绌虹紦瀛�-灏忕▼搴忥級' }, - { value: 'goBack', text: '杩斿洖' }, - ] - pageTemps = [ - { value: 'linkpage', text: '鍏宠仈鑿滃崟' }, - // { value: 'pay', text: Formdict['model.pay'] }, - { value: 'custom', text: '閾炬帴' } - ] - } else { - pageTemps = [ - { value: 'linkpage', text: '鍏宠仈鑿滃崟' }, - { value: 'billprint', text: '鍗曟嵁鎵撳嵃' }, - { value: 'pay', text: Formdict['model.pay'] }, - { value: 'custom', text: '閾炬帴' } - ] - funTypes = [ - { value: 'changeuser', text: Formdict['header.form.func.changeuser'] }, - ] - opentypes = opentypes.filter(item => item.value !== 'tab') - } + } + if (appType === 'mob') { + opentypes = opentypes.filter(item => ['pop', 'prompt', 'exec', 'innerpage', 'funcbutton'].includes(item.value)) + funTypes = [ + { value: 'scan', text: '鎵爜' }, + { value: 'logout', text: '閫�鍑�' }, + { value: 'mkBinding', text: '寮�閫氭壂鐮佺櫥褰�' }, + { value: 'mkUnBinding', text: '鐢ㄦ埛瑙g粦' }, + { value: 'reAuth', text: '鍒囨崲绯荤粺锛堟竻绌虹紦瀛�-灏忕▼搴忥級' }, + { value: 'goBack', text: '杩斿洖' }, + ] + pageTemps = [ + { value: 'linkpage', text: '鍏宠仈鑿滃崟' }, + { value: 'custom', text: '閾炬帴' } + ] + } else if (appType === 'pc') { + opentypes = opentypes.filter(item => item.value !== 'tab') + funTypes = [ + { value: 'changeuser', text: '鍒囨崲鐢ㄦ埛' }, + ] + pageTemps = [ + { value: 'linkpage', text: '鍏宠仈鑿滃崟' }, + { value: 'billprint', text: '鍗曟嵁鎵撳嵃' }, + { value: 'pay', text: Formdict['model.pay'] }, + { value: 'custom', text: '閾炬帴' } + ] } if (type === 'chart' && appType !== 'mob') { @@ -136,13 +137,27 @@ if (viewType === 'popview') { // 寮圭獥鏍囩 opentypes = opentypes.filter(item => item.value !== 'popview' && item.value !== 'funcbutton') refresh.push({ - value: 'popclose', + value: 'closepoptab', // 鍏抽棴寮圭獥鏍囩 + text: '鍏抽棴寮圭獥' + }) + refresh.push({ + value: 'popclose', // 鎵ц寮圭獥鍏抽棴鏃剁殑鍒锋柊 text: '鍒锋柊婧愮粍浠�' + }) + } + + if (type === 'card') { + opentypes.push({ + value: 'form', + text: '琛ㄥ崟' }) } if (!card.control && card.controlField) { card.control = 'disabled' + } + if (appType === 'mob' && card.control === 'parent') { + card.control = '' } let forms = [ @@ -157,10 +172,24 @@ { type: 'select', key: 'funcType', - label: Formdict['header.form.funcType'], + label: '鍔熻兘绫诲瀷', initVal: card.funcType || '', required: true, options: funTypes + }, + { + type: 'radio', + key: 'formType', + label: '琛ㄥ崟绫诲瀷', + initVal: card.formType || 'switch', + required: true, + options: [{ + value: 'switch', + text: '寮�鍏�' + }, { + value: 'radio', + text: '鍕鹃�夋' + }] }, { type: 'select', @@ -193,7 +222,6 @@ label: '鎸夐挳鍚嶇О', initVal: card.label, required: true, - readonly: false }, { type: 'radio', @@ -231,9 +259,7 @@ initVal: card.innerFunc || '', tooltip: functip, fields: usefulFields, - tooltipClass: 'middle', required: false, - readonly: false }, { type: 'select', @@ -245,12 +271,19 @@ }, { type: 'select', + key: 'printTemp', + label: '鎵撳嵃妯℃澘', + initVal: card.printTemp || '', + required: true, + options: printTemps + }, + { + type: isApp ? 'select' : 'cascader', key: 'linkmenu', label: '鍏宠仈鑿滃崟', - initVal: card.linkmenu || '', + initVal: card.linkmenu || (isApp ? '' : []), required: true, - forbid: !isApp, - options: appMenus + options: isApp ? appMenus : menulist }, { type: 'textarea', @@ -279,7 +312,6 @@ label: Formdict['header.form.outerFunc'], initVal: card.outerFunc || '', required: false, - readonly: false }, { type: 'textarea', @@ -354,7 +386,6 @@ label: Formdict['header.form.callbackFunc'], initVal: card.callbackFunc || '', required: false, - readonly: false }, { type: 'select', @@ -363,15 +394,6 @@ initVal: card.Ot || (card.sqlType === 'insert' ? 'notRequired' : 'requiredSgl'), required: true, options: [] - }, - { - type: 'cascader', - key: 'linkmenu', - label: Formdict['model.form.linkmenu'], - initVal: card.linkmenu || [], - required: true, - forbid: isApp, - options: menulist }, { type: 'select', @@ -394,7 +416,7 @@ text: '鍒锋柊涓婄骇缁勪欢 - 琛�' }, { value: !appType ? 'closetab' : 'goback', - text: !appType ? '鍏抽棴寮圭獥' : '杩斿洖锛堜笂涓�涓〉闈級' + text: !appType ? '鍏抽棴鏍囩' : '杩斿洖锛堜笂涓�涓〉闈級' }, ...refresh] }, @@ -469,6 +491,7 @@ label: '鏄剧ず涓�', initVal: card.show || 'button', required: true, + forbid: type === 'datacard' && appType === 'mob', // 绉诲姩绔紝婊戝姩鏄剧ず鐨勬寜閽彧鏄剧ず鏂囧瓧 options: [{ value: 'icon', text: '鍥炬爣' @@ -484,13 +507,13 @@ type: 'radio', key: 'swipe', label: "婊戝姩鏄剧ず", - initVal: card.swipe || 'false', + initVal: card.swipe === 'false' ? 'left' : (card.swipe || 'left'), // 绉诲姩绔粎淇濈暀婊戝姩鏄剧ず鎸夐挳 required: false, forbid: (type !== 'datacard' || appType !== 'mob'), options: [{ - value: 'false', - text: '鍚�' - }, { + // value: 'false', + // text: '鍚�' + // }, { value: 'left', text: '宸︽粦' }, { @@ -504,6 +527,7 @@ label: Formdict['model.icon'], initVal: card.icon, required: false, + forbid: type === 'datacard' && appType === 'mob', // 绉诲姩绔紝婊戝姩鏄剧ず鐨勬寜閽彧鏄剧ず鏂囧瓧 options: [] }, { @@ -513,7 +537,32 @@ initVal: card.class, tooltip: '姝ら鑹蹭负鎸夐挳鍒濆鍖栭鑹诧紝鍙湪鏍峰紡璋冩暣涓慨鏀广��', required: false, - options: [] + forbid: type === 'datacard' && appType === 'mob', // 绉诲姩绔紝婊戝姩鏄剧ず鐨勬寜閽笉璁剧疆閫氱敤棰滆壊 + options: btnCustomClasses + }, + { + type: 'radio', + key: 'color', + label: Formdict['model.form.color'], + initVal: card.color || 'primary', + required: false, + forbid: (type !== 'datacard' || appType !== 'mob'), // 绉诲姩绔紝婊戝姩鏄剧ず鐨勬寜閽彧鍙缃浐瀹氶鑹� + options: [{ + value: 'primary', + text: '钃�' + }, { + value: 'danger', + text: '绾�' + }, { + value: 'warning', + text: '姗�' + }, { + value: 'success', + text: '缁�' + }, { + value: 'light', + text: '鐏�' + }] }, { type: 'radio', @@ -539,7 +588,7 @@ { type: 'radio', key: 'pagination', - label: Formdict['header.form.pagination'], + label: '鍒嗛〉', initVal: card.pagination || 'false', required: false, options: [{ @@ -590,15 +639,6 @@ tooltip: '鎵ц鎴愬姛鍚庯紙鎴栧姛鑳芥寜閽腑鏍囩鍏抽棴绫诲瀷锛夛紝闇�瑕佸悓姝ュ埛鏂扮殑鑿滃崟', required: false, forbid: isApp || viewType === 'popview', - options: menulist - }, - { - type: 'cascader', - key: 'linkmenu', - label: Formdict['model.form.linkmenu'], - initVal: card.linkmenu || [], - required: true, - forbid: isApp, options: menulist }, { @@ -654,7 +694,7 @@ type: 'number', key: 'ratio', min: 1, - max: 24, + max: 3000, precision: 0, label: '姣斾緥', initVal: card.ratio || 85, @@ -666,7 +706,6 @@ key: 'placement', label: '鎶藉眽鏂瑰悜', initVal: card.placement || 'right', - tooltip: '浣跨敤鎶藉眽鏃舵湁鏁堛��', required: false, options: [{ value: 'right', @@ -684,10 +723,24 @@ }, { type: 'radio', + key: 'clickouter', + label: '鐐瑰嚮钂欏眰', + initVal: card.clickouter || 'unclose', + required: false, + options: [{ + value: 'unclose', + text: '涓嶅叧闂�' + }, { + value: 'close', + text: '鍏抽棴' + }] + }, + { + type: 'radio', key: 'reload', label: '杩斿洖鍚�', initVal: card.reload || 'false', - tooltip: '鎸夐挳鎴愬姛鍚庤繑鍥炰笂涓�椤甸潰鎴栦娇鐢ㄥ姛鑳芥寜閽�-杩斿洖鍔熻兘鏃讹紝杩斿洖鍚庢槸鍚﹀埛鏂版暟鎹�傛敞锛氬湪鏄庣浜慳pp涓紙搴旂敤妯″紡涓篴pp锛夋湁鏁堛��', + tooltip: '杩斿洖鍚庢槸鍚﹀埛鏂版暟鎹�傛敞锛氬湪鏄庣浜慉PP鎴栧皬绋嬪簭涓湁鏁堛��', forbid: appType !== 'mob', options: [{ value: 'false', @@ -702,6 +755,7 @@ key: 'control', label: '鎸夐挳鎺у埗', initVal: card.control || (card.controlField ? 'disabled' : ''), + tooltip: '褰撻�夋嫨绂佺敤鎴栭殣钘忥紝涓斿瓧娈靛�间笌鎺у埗鍊肩浉绛夋椂锛屾寜閽細闅愯棌鎴栫鐢ㄣ�傚綋閫夋嫨涓婄骇锛屼富琛ㄥ瓧娈靛�间笌鎺у埗鍊肩浉绛夋垨涓昏〃瀛楁鍊间笉瀛樺湪鏃讹紝鎸夐挳浼氶殣钘忋�傛敞锛氬涓�肩敤閫楀彿鍒嗛殧', required: false, options: [{ value: '', @@ -712,13 +766,15 @@ }, { value: 'hidden', text: '闅愯棌' + }, { + value: 'parent', + text: '涓婄骇' }] }, { type: 'select', key: 'controlField', label: '鎺у埗瀛楁', - tooltip: '鎺у埗瀛楁锛屽彲鏍规嵁鏁版嵁鎺у埗鎸夐挳鐨勯殣钘忔垨绂佺敤銆�', initVal: card.controlField || '', required: true, allowClear: true, @@ -728,10 +784,66 @@ type: 'text', key: 'controlVal', label: '鎺у埗鍊�', - tooltip: '褰撻�夋嫨鎺у埗瀛楁锛屼笖瀛楁鍊间笌鎺у埗鍊肩浉绛夋椂锛屾寜閽細闅愯棌鎴栫鐢紝澶氫釜鍊肩敤閫楀彿鍒嗛殧銆�', initVal: card.controlVal || '', required: false }, + { + type: 'splitLine', + key: 'title', + label: '琛ㄥ崟', + initVal: '' + }, + { + type: 'text', + key: 'field', + label: Formdict['model.form.field'], + initVal: card.field || '', + required: true, + readonly: false + }, + { + type: 'radio', + key: 'size', + label: '寮�鍏冲昂瀵�', + initVal: card.size || 'default', + options: [{ + value: 'default', + text: '澶�' + }, { + value: 'small', + text: '灏�' + }] + }, + { + type: 'text', + key: 'openVal', + label: '寮�鍚��', + initVal: card.openVal === undefined ? '' : card.openVal + '', + tooltip: '褰撳紑鍚笌鍏抽棴鍊煎潎涓烘鏁存暟鏃讹紝榛樿杞崲涓篒NT绫诲瀷銆�', + required: false + }, + { + type: 'text', + key: 'closeVal', + label: '鍏抽棴鍊�', + initVal: card.closeVal === undefined ? '' : card.closeVal + '', + tooltip: '褰撳紑鍚笌鍏抽棴鍊煎潎涓烘鏁存暟鏃讹紝榛樿杞崲涓篒NT绫诲瀷銆�', + required: false + }, + { + type: 'text', + key: 'openText', + label: '寮�鍚彁绀�', + initVal: card.openText || '', + required: false, + }, + { + type: 'text', + key: 'closeText', + label: '鍏抽棴鎻愮ず', + initVal: card.closeText || '', + required: false, + }, ] return forms diff --git a/src/menu/components/share/actioncomponent/index.jsx b/src/menu/components/share/actioncomponent/index.jsx index c7718dc..a924679 100644 --- a/src/menu/components/share/actioncomponent/index.jsx +++ b/src/menu/components/share/actioncomponent/index.jsx @@ -449,13 +449,14 @@ } render() { - const { config } = this.props - const { actionlist, visible, card, dict, profVisible } = this.state + const { config, type } = this.props + const { actionlist, visible, appType, card, dict, profVisible } = this.state return ( <div className={'model-menu-action-list'}> <DragElement list={actionlist} + type={appType === 'mob' ? (type || '') : ''} handleList={this.handleList} dropButton={this.dropButton} handleMenu={this.handleAction} diff --git a/src/menu/components/share/actioncomponent/index.scss b/src/menu/components/share/actioncomponent/index.scss index 6141b32..370fdee 100644 --- a/src/menu/components/share/actioncomponent/index.scss +++ b/src/menu/components/share/actioncomponent/index.scss @@ -30,6 +30,25 @@ font-weight: inherit; } } + .swiper { + margin-left: 10px; + color: #ffffff; + } + .swiper-primary { + background-color: #1677ff; + } + .swiper-danger { + background-color: #ff3141; + } + .swiper-warning { + background-color: #ff8f1f; + } + .swiper-success { + background-color: #00b578; + } + .swiper-light { + background-color: #cccccc; + } } } diff --git a/src/menu/components/share/clockcomponent/index.jsx b/src/menu/components/share/clockcomponent/index.jsx index c73e5ab..25da4eb 100644 --- a/src/menu/components/share/clockcomponent/index.jsx +++ b/src/menu/components/share/clockcomponent/index.jsx @@ -1,10 +1,9 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal } from 'antd' +import { Modal } from 'antd' +import { ClockCircleOutlined } from '@ant-design/icons' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import ClockForm from './settingform' import './index.scss' @@ -14,7 +13,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, visible: false } @@ -45,7 +43,7 @@ return ( <div className="clock-component-wrap"> - <Icon type="clock-circle" title="瀹氭椂鍣�" onClick={this.trigger} /> + <ClockCircleOutlined title="瀹氭椂鍣�" onClick={this.trigger} /> <Modal title="瀹氭椂鍣ㄨ缃�" visible={visible} diff --git a/src/menu/components/share/copycomponent/index.jsx b/src/menu/components/share/copycomponent/index.jsx index 8c34118..2ed4914 100644 --- a/src/menu/components/share/copycomponent/index.jsx +++ b/src/menu/components/share/copycomponent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Icon, message } from 'antd' +import { message } from 'antd' +import { CopyOutlined } from '@ant-design/icons' import './index.scss' class CopyComponent extends Component { @@ -38,7 +39,7 @@ render () { return ( - <Icon type="copy" title="澶嶅埗" style={{color: '#26C281'}} onClick={this.trigger} /> + <CopyOutlined title="澶嶅埗" style={{color: '#26C281'}} onClick={this.trigger} /> ) } } diff --git a/src/menu/components/share/logcomponent/index.jsx b/src/menu/components/share/logcomponent/index.jsx index 403d3bc..fb617ec 100644 --- a/src/menu/components/share/logcomponent/index.jsx +++ b/src/menu/components/share/logcomponent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal, Button, Popconfirm, Table } from 'antd' +import { Modal, Button, Popconfirm, Table } from 'antd' +import { RedoOutlined, CloseOutlined, RollbackOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -44,14 +45,14 @@ title="纭畾鎭㈠璁板綍鍚楋紵" onConfirm={() => this.revert(record)} > - <span title="鎭㈠" style={{color: '#26C281', fontSize: '16px', marginRight: '5px', cursor: 'pointer', padding: '5px'}}><Icon type="redo" /></span> + <span title="鎭㈠" style={{color: '#26C281', fontSize: '16px', marginRight: '5px', cursor: 'pointer', padding: '5px'}}><RedoOutlined /></span> </Popconfirm> <Popconfirm overlayClassName="popover-confirm" title="纭畾娓呴櫎璁板綍鍚楋紵" onConfirm={() => this.handleDelete(record)} > - <span title="娓呴櫎" style={{color: '#ff4d4f', fontSize: '16px', cursor: 'pointer', padding: '5px'}}><Icon type="close" /></span> + <span title="娓呴櫎" style={{color: '#ff4d4f', fontSize: '16px', cursor: 'pointer', padding: '5px'}}><CloseOutlined /></span> </Popconfirm> </div>) } @@ -106,7 +107,7 @@ return ( <div className="btn-log-wrap"> - <Icon type="rollback" title="瑙i櫎鍐荤粨" onClick={this.trigger} /> + <RollbackOutlined title="瑙i櫎鍐荤粨" onClick={this.trigger} /> <Modal wrapClassName="popview-modal" title="鍘嗗彶璁板綍" diff --git a/src/menu/components/share/markcomponent/index.jsx b/src/menu/components/share/markcomponent/index.jsx index 2a736fe..1da2ecd 100644 --- a/src/menu/components/share/markcomponent/index.jsx +++ b/src/menu/components/share/markcomponent/index.jsx @@ -1,16 +1,18 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Icon, Modal, Col } from 'antd' +import { Modal, Col } from 'antd' +import { AntDesignOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import asyncComponent from '@/utils/asyncComponent' import MarkForm from './markform' -import './index.scss' +import MkIcon from '@/components/mk-icon' import { minkeIconSystem } from '@/utils/option.js' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' import '@/assets/css/table.scss' +import './index.scss' const EditTable = asyncComponent(() => import('@/templates/zshare/editTable')) const { confirm } = Modal @@ -82,15 +84,17 @@ options: [], render: text => { let sign = { - 'font': '鏂囧瓧棰滆壊', + 'font': '鏂囧瓧', 'background': '鑳屾櫙', 'underline': '涓嬪垝绾�', 'line-through': '涓垝绾�', - 'icon': '鍥炬爣' + 'icon': '鍥炬爣', + 'iconfront': '鍥炬爣', + 'iconback': '鍥炬爣', } return ( - <div>{sign[text[0]]} {text[3] ? <Icon type={text[3]} /> : null}</div> + <div>{sign[text[0]]} {text[2] ? <MkIcon type={text[text.length - 1]} /> : null}</div> ) } } @@ -164,7 +168,7 @@ children: minkeIconSystem.direction.map(cell => { return { value: cell, - label: (<Icon type={cell} />) + label: (<MkIcon type={cell} />) } }) }, @@ -174,7 +178,7 @@ children: minkeIconSystem.hint.map(cell => { return { value: cell, - label: (<Icon type={cell} />) + label: (<MkIcon type={cell} />) } }) }, @@ -184,7 +188,7 @@ children: minkeIconSystem.edit.map(cell => { return { value: cell, - label: (<Icon type={cell} />) + label: (<MkIcon type={cell} />) } }) }, @@ -194,17 +198,7 @@ children: minkeIconSystem.data.map(cell => { return { value: cell, - label: (<Icon type={cell} />) - } - }) - }, - { - value: 'trademark', - label: '鍝佺墝鍜屾爣璇�', - children: minkeIconSystem.trademark.map(cell => { - return { - value: cell, - label: (<Icon type={cell} />) + label: (<MkIcon type={cell} />) } }) }, @@ -214,7 +208,7 @@ children: minkeIconSystem.normal.map(cell => { return { value: cell, - label: (<Icon type={cell} />) + label: (<MkIcon type={cell} />) } }) } @@ -222,7 +216,7 @@ let signs = [ { value: 'font', - label: '鏂囧瓧棰滆壊' + label: '鏂囧瓧' }, { value: 'background', @@ -237,24 +231,19 @@ label: '涓垝绾�' }, { - value: 'icon', - label: '鍥炬爣', - children: [ - { - value: 'front', - label: '鍐呭鍓�', - children: icons - }, - { - value: 'back', - label: '鍐呭鍚�', - children: icons - } - ] + value: 'iconfront', + label: '鍥炬爣锛堝墠锛�', + children: icons + }, + { + value: 'iconback', + label: '鍥炬爣锛堝悗锛�', + children: icons } ] if (type === 'line' || type === 'sequence') { + signs.pop() signs.pop() } else if (type === 'slider') { markColumns = markColumns.filter(col => { @@ -264,9 +253,17 @@ signs = [] } + let _marks = marks ? fromJS(marks).toJS() : [] + _marks = _marks.map(item => { + if (item.signType && item.signType[0] === 'icon') { + item.signType = [item.signType[0] + item.signType[1], item.signType[2], item.signType[3]] + } + return item + }) + this.setState({ visible: true, - marks: marks ? fromJS(marks).toJS() : [], + marks: _marks, markColumns: markColumns.map(col => { if (col.dataIndex === 'field') { col.options = options @@ -332,7 +329,7 @@ return ( <div style={{display: 'inline-block'}}> - <Icon className="profile" title="鏍囪" type="ant-design" onClick={this.resetMark} /> + <AntDesignOutlined className="profile" title="鏍囪" onClick={this.resetMark} /> <Modal wrapClassName="model-table-column-mark-modal" title={'鏍囪璁剧疆'} diff --git a/src/menu/components/share/markcomponent/markform/index.jsx b/src/menu/components/share/markcomponent/markform/index.jsx index 5c437a6..560f22d 100644 --- a/src/menu/components/share/markcomponent/markform/index.jsx +++ b/src/menu/components/share/markcomponent/markform/index.jsx @@ -51,7 +51,7 @@ } ] })( - <Cascader options={columns} placeholder=""/> + <Cascader className="mark-type" options={columns} placeholder=""/> )} </Form.Item> </Col> @@ -113,7 +113,7 @@ } ] })( - <Cascader options={signs} placeholder=""/> + <Cascader popupClassName="mark-type" options={signs} placeholder=""/> )} </Form.Item> </Col> : null} diff --git a/src/menu/components/share/markcomponent/markform/index.scss b/src/menu/components/share/markcomponent/markform/index.scss index 8fd198c..8510e4c 100644 --- a/src/menu/components/share/markcomponent/markform/index.scss +++ b/src/menu/components/share/markcomponent/markform/index.scss @@ -9,4 +9,9 @@ display: none; } } +} +.mark-type { + .ant-cascader-menu { + height: 200px; + } } \ No newline at end of file diff --git a/src/menu/components/share/mobPagination/index.jsx b/src/menu/components/share/mobPagination/index.jsx index e6fdc37..b4dbb09 100644 --- a/src/menu/components/share/mobPagination/index.jsx +++ b/src/menu/components/share/mobPagination/index.jsx @@ -1,20 +1,26 @@ -import {Component} from 'react' -// import { Icon, Pagination } from 'antd-mobile' +import React, {Component} from 'react' +import { RightOutlined, LeftOutlined } from '@ant-design/icons' import './index.scss' class MobPagination extends Component { render () { - return null - // return ( - // <Pagination className="mob-pagination" total={5} - // current={1} - // locale={{ - // prevText: (<span><Icon type="left" />涓婁竴椤�</span>), - // nextText: (<span>涓嬩竴椤�<Icon type="right" /></span>), - // }} - // /> - // ) + return ( + <div className="normal-pagination"> + <div className="mk-flexbox"> + <div className="mk-flexbox-item mk-flexbox-item-prev disabled"> + <LeftOutlined /> 涓婁竴椤� + </div> + <div className="mk-flexbox-item"> + <span className="mk-system-color">1</span>/ + <span>5</span> + </div> + <div className="mk-flexbox-item mk-flexbox-item-next"> + 涓嬩竴椤� <RightOutlined /> + </div> + </div> + </div> + ) } } diff --git a/src/menu/components/share/mobPagination/index.scss b/src/menu/components/share/mobPagination/index.scss index 2537123..cb28ded 100644 --- a/src/menu/components/share/mobPagination/index.scss +++ b/src/menu/components/share/mobPagination/index.scss @@ -1,14 +1,31 @@ -.mob-pagination { - .am-button::before { - display: none; +.normal-pagination { + margin: 25px 0px 10px; + font-size: 15px; + .mk-flexbox { + overflow: hidden; + display: flex; + align-items: center; } - .am-button { - border: none; - font-size: 16px; - background: transparent; - .am-icon { - position: relative; - top: 5px; - } + .mk-flexbox-item { + box-sizing: border-box; + flex: 1 1; + margin-left: 8px; + min-width: 10px; + text-align: center; + height: 40px; + line-height: 40px; + } + .mk-flexbox-item-prev { + margin-left: 0px; + text-align: left; + padding-left: 15px; + } + .mk-flexbox-item-next { + text-align: right; + padding-right: 15px; + } + .mk-flexbox-item.disabled { + color: rgba(0, 0, 0, 0.3); + opacity: 0.6; } } \ No newline at end of file diff --git a/src/menu/components/share/normalheader/index.jsx b/src/menu/components/share/normalheader/index.jsx index dc85e5b..72a5d5e 100644 --- a/src/menu/components/share/normalheader/index.jsx +++ b/src/menu/components/share/normalheader/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Popover, Icon } from 'antd' +import { Popover } from 'antd' +import { FontColorsOutlined, SearchOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import MKEmitter from '@/utils/events.js' @@ -80,12 +81,12 @@ <div className={'normal-header' + (!show ? ' hidden' : '') + (config.wrap && config.wrap.searchable === 'true' ? ' tree-search' : '')} style={_style}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> </div> } trigger="hover"> <span className="title">{title}</span> </Popover> - {config.wrap && config.wrap.searchable === 'true' ? <span className="ant-input-search ant-input-affix-wrapper"><span className="ant-input-suffix"><Icon type="search" /></span></span> : null} + {config.wrap && config.wrap.searchable === 'true' ? <span className="ant-input-search ant-input-affix-wrapper"><span className="ant-input-suffix"><SearchOutlined /></span></span> : null} {hideSearch !== 'true' && config.search ? <SearchComponent config={config} updatesearch={this.props.updateComponent}/> : null} </div> ) diff --git a/src/menu/components/share/pastecomponent/index.jsx b/src/menu/components/share/pastecomponent/index.jsx index c6df7d3..b0c79bb 100644 --- a/src/menu/components/share/pastecomponent/index.jsx +++ b/src/menu/components/share/pastecomponent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Icon, Modal, notification } from 'antd' +import { Modal, notification } from 'antd' +import { SnippetsOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import MKEmitter from '@/utils/events.js' @@ -220,7 +221,7 @@ return ( <div style={{display: 'inline-block'}}> - <Icon type="snippets" style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} /> + <SnippetsOutlined style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} /> <Modal title="绮樿创" visible={visible} diff --git a/src/menu/components/share/searchcomponent/dragsearch/card.jsx b/src/menu/components/share/searchcomponent/dragsearch/card.jsx index 7ba8496..19b27ed 100644 --- a/src/menu/components/share/searchcomponent/dragsearch/card.jsx +++ b/src/menu/components/share/searchcomponent/dragsearch/card.jsx @@ -1,6 +1,7 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Select, DatePicker, Input, Popover, Form } from 'antd' +import { Select, DatePicker, Input, Popover, Form } from 'antd' +import { EditOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons' import moment from 'moment' import DateGroup from '@/menu/components/search/main-search/dategroup' @@ -35,15 +36,11 @@ let _defaultValue = '' // 涓嬫媺鎼滅储銆佹椂闂磋寖鍥寸被鍨嬶紝鍒濆鍊奸渶瑕侀澶勭悊 if (card.type === 'multiselect' || card.type === 'select' || card.type === 'link') { - if (card.initval) { - let _option = card.options.filter(option => option.Value === card.initval)[0] - if (_option) { - _defaultValue = _option.Text || '' - } else { - _defaultValue = '' - } - } else if (card.setAll === 'true') { - _defaultValue = '鍏ㄩ儴' + let _option = card.options.filter(option => option.Value === card.initval)[0] + if (_option) { + _defaultValue = _option.Text || '' + } else { + _defaultValue = '' } } else if (card.type === 'daterange') { _defaultValue = [null, null] @@ -64,9 +61,9 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => editCard(id)} /> - <Icon className="copy" title="澶嶅埗" type="copy" onClick={() => copyCard(id)} /> - <Icon className="close" title="鍒犻櫎" type="close" onClick={() => delCard(id)} /> + <EditOutlined className="edit" title="缂栬緫" onClick={() => editCard(id)} /> + <CopyOutlined className="copy" title="澶嶅埗" onClick={() => copyCard(id)} /> + <CloseOutlined className="close" title="鍒犻櫎" onClick={() => delCard(id)} /> </div> } trigger="hover"> <div className={'page-card ' + (card.labelShow || '')} style={{ opacity: opacity}}> diff --git a/src/menu/components/share/searchcomponent/index.jsx b/src/menu/components/share/searchcomponent/index.jsx index 5aa9876..5c18abf 100644 --- a/src/menu/components/share/searchcomponent/index.jsx +++ b/src/menu/components/share/searchcomponent/index.jsx @@ -102,12 +102,14 @@ let linkableFields = [] searchlist.forEach(item => { - if (item.uuid !== card.uuid && (item.type === 'select' || item.type === 'link')) { - linkableFields.push({ - value: item.field, - text: item.label - }) - } + if (item.uuid === card.uuid) return + if (!['select', 'link', 'checkcard'].includes(item.type)) return + if (item.type === 'checkcard' && item.multiple === 'true') return + + linkableFields.push({ + value: item.field, + text: item.label + }) }) this.setState({ diff --git a/src/menu/components/share/sourcecomponent/index.jsx b/src/menu/components/share/sourcecomponent/index.jsx index a2f45e3..012c84e 100644 --- a/src/menu/components/share/sourcecomponent/index.jsx +++ b/src/menu/components/share/sourcecomponent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Radio, Icon, Modal } from 'antd' +import { Radio, Modal } from 'antd' +import { PaperClipOutlined, DeleteOutlined } from '@ant-design/icons' import InputForm from './inputform' import './index.scss' @@ -69,9 +70,9 @@ <Radio.Button value="system" size="small" onClick={() => this.handleChange('system')}>绯荤粺</Radio.Button> </Radio.Group> : null} {url ? <div className={'mk-source-item-info' + (type !== 'video' ? ' picture' : '')}> - {type === 'video' ? <Icon type="paper-clip" /> : <img src={url} alt="" />} + {type === 'video' ? <PaperClipOutlined /> : <img src={url} alt="" />} <a target="_blank" rel="noopener noreferrer" href={url}>{name}</a> - <Icon title="鍒犻櫎鏂囦欢" type="delete" onClick={this.deleteUrl}/> + <DeleteOutlined title="鍒犻櫎鏂囦欢" onClick={this.deleteUrl}/> </div> : null} <Modal visible={!!visible} diff --git a/src/menu/components/share/sourcecomponent/inputform/index.jsx b/src/menu/components/share/sourcecomponent/inputform/index.jsx index 7518cf2..729dda2 100644 --- a/src/menu/components/share/sourcecomponent/inputform/index.jsx +++ b/src/menu/components/share/sourcecomponent/inputform/index.jsx @@ -2,6 +2,7 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { Input, Form, Row, Col, Pagination, Empty, Button, Modal, notification } from 'antd' +import { PlusOutlined } from '@ant-design/icons' import Api from '@/api' import Utils from '@/utils/utils.js' @@ -174,8 +175,8 @@ </Form.Item> : null} {keyword === 'system' ? <Search value={searchKey} placeholder="" onChange={(e) => this.setState({searchKey: e.target.value})} onSearch={this.changeSearch} enterButton/> : null} - {keyword === 'system' ? <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: type})}> - 娣诲姞 + {keyword === 'system' ? <Button className="picture-plus mk-green" onClick={() => this.handleSource({typecharone: type})}> + <PlusOutlined /> 娣诲姞 </Button> : null} {keyword === 'system' && list.length ? <Row gutter={16} style={{minHeight: '250px'}}> diff --git a/src/menu/components/share/usercomponent/index.jsx b/src/menu/components/share/usercomponent/index.jsx index e10fa99..c8d4d93 100644 --- a/src/menu/components/share/usercomponent/index.jsx +++ b/src/menu/components/share/usercomponent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal, notification } from 'antd' +import { Modal, notification } from 'antd' +import { UserOutlined } from '@ant-design/icons' import html2canvas from 'html2canvas' import Api from '@/api' @@ -145,7 +146,8 @@ document.getElementsByClassName('menu-view')[0].classList.add('saving') this.setState({loading: true}) setTimeout(() => { - let template = this.getUserComponent() + // let template = this.getUserComponent() + let template = fromJS(config).toJS() html2canvas(document.getElementById(config.uuid)).then(canvas => { let param = { Base64Img: canvas.toDataURL('image/png') // 鑾峰彇鐢熸垚鐨勫浘鐗� @@ -210,7 +212,7 @@ return ( <div className="user-component-wrap"> - <Icon type="user" title="鐢熸垚鑷畾涔夌粍浠�" onClick={this.trigger} /> + <UserOutlined title="鐢熸垚鑷畾涔夌粍浠�" onClick={this.trigger} /> <Modal title="鑷畾涔夌粍浠�" visible={visible} diff --git a/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx b/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx index ff20115..dc695ac 100644 --- a/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx +++ b/src/menu/components/table/edit-table/columns/editColumn/formconfig.jsx @@ -228,17 +228,17 @@ }, { type: 'number', - key: 'max', - label: '鏈�澶у��', - initVal: card.max, + key: 'min', + label: '鏈�灏忓��', + initVal: card.min, unlimit: true, required: false }, { type: 'number', - key: 'min', - label: '鏈�灏忓��', - initVal: card.min, + key: 'max', + label: '鏈�澶у��', + initVal: card.max, unlimit: true, required: false }, @@ -252,10 +252,13 @@ text: Formdict['model.empty'] }, { value: 'thdSeparator', - text: Formdict['header.form.thdSeparator'] + text: '鍗冨垎浣�' }, { value: 'percent', text: '鐧惧垎姣�' + }, { + value: 'abs', + text: '缁濆鍊�' }], required: false }, diff --git a/src/menu/components/table/edit-table/columns/index.jsx b/src/menu/components/table/edit-table/columns/index.jsx index 4b57040..4ed5e10 100644 --- a/src/menu/components/table/edit-table/columns/index.jsx +++ b/src/menu/components/table/edit-table/columns/index.jsx @@ -2,7 +2,8 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { DndProvider, DragSource, DropTarget } from 'react-dnd' -import { Table, Popover, Icon, Modal, message, Button } from 'antd' +import { Table, Popover, Modal, message, Button } from 'antd' +import { PlusOutlined, FileSyncOutlined, EditOutlined, CopyOutlined, DeleteOutlined, FontColorsOutlined, CloseCircleOutlined, AntDesignOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -57,11 +58,11 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> {column && ['custom', 'action'].includes(column.type) ? - <Icon className="plus" title="娣诲姞" type="plus" onClick={() => this.props.addElement(column)} /> : null + <PlusOutlined className="plus" title="娣诲姞" onClick={() => this.props.addElement(column)} /> : null } - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => this.props.editColumn(column)} /> - {column && column.type === 'custom' ? <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => this.props.changeStyle(column)} type="font-colors" /> : null} - <Icon className="close" title="鍒犻櫎" type="delete" onClick={this.deleteCol} /> + <EditOutlined className="edit" title="缂栬緫" onClick={() => this.props.editColumn(column)} /> + {column && column.type === 'custom' ? <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => this.props.changeStyle(column)}/> : null} + <DeleteOutlined className="close" title="鍒犻櫎" onClick={this.deleteCol} /> {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } </div> } trigger="hover"> @@ -148,8 +149,8 @@ return ( <td style={{...style, minWidth: column.Width || 100}} className={className}> {val} - {column.Hide === 'true' ? <Icon style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}} type="close-circle" /> : null} - {column.marks && column.marks.length ? <Icon className="profile" type="ant-design"/> : null} + {column.Hide === 'true' ? <CloseCircleOutlined style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}}/> : null} + {column.marks && column.marks.length ? <AntDesignOutlined className="profile"/> : null} </td> ) } else { @@ -280,7 +281,7 @@ let column = fromJS(col).toJS() if (column.type === 'custom') { - let newcard = {uuid: Utils.getuuid(), focus: true, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}} + let newcard = {uuid: Utils.getuuid(), focus: true, width: 24, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}} // 娉ㄥ唽浜嬩欢-娣诲姞鍏冪礌 MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard) @@ -429,7 +430,7 @@ let cell = { uuid: Utils.getuuid(), label: item.label, field: item.field, Align: 'left', Hide: 'false', IsSort: 'false', Width: 120, blacklist: [], postfix: '', prefix: '', linkmenu: [], marks: [], perspective: 'linkmenu' } - if (/Nvarchar/ig.test(item.datatype)) { + if (/Nvarchar|date/ig.test(item.datatype)) { cell.type = 'text' cell.rowspan = 'false' cell.textFormat = 'none' @@ -438,6 +439,7 @@ cell.format = 'none' cell.sum = 'false' cell.decimal = item.decimal || 0 + cell.Width = 80 } columns.push(cell) @@ -512,7 +514,7 @@ const columns = this.state.columns.map((col, index) => { let title = col.label if (col.editable === 'true') { - title = <span>{col.label}<Icon style={{position: 'absolute', bottom: 0, right: 0, color: '#1890ff'}} type="edit" /></span> + title = <span>{col.label}<EditOutlined style={{position: 'absolute', bottom: 0, right: 0, color: '#1890ff'}}/></span> } return { title: title, @@ -553,16 +555,16 @@ <div className="col-control"> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => this.setState({visible: true})} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeSubmitStyle} type="font-colors" /> + <EditOutlined className="edit" title="缂栬緫" onClick={() => this.setState({visible: true})} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeSubmitStyle}/> </div> } trigger="hover"> <Button className="submit-btn" style={config.submit.style} onDoubleClick={() => this.setState({visible: true})} type="primary">鎻愪氦</Button> </Popover> - <Icon title="澶嶅埗鏄剧ず鍒�" type="copy" onClick={this.copycolumn} /> + <CopyOutlined title="澶嶅埗鏄剧ず鍒�" onClick={this.copycolumn} /> <MarkColumn columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} /> - <Icon title="鍚屾瀛楁闆�" type="file-sync" onClick={this.syncfield} /> - <Icon title="娓呯┖鏄剧ず鍒�" type="delete" onClick={this.clear}/> + <FileSyncOutlined title="鍚屾瀛楁闆�" onClick={this.syncfield} /> + <DeleteOutlined title="娓呯┖鏄剧ず鍒�" onClick={this.clear}/> </div> <DndProvider> <Table diff --git a/src/menu/components/table/edit-table/columns/index.scss b/src/menu/components/table/edit-table/columns/index.scss index 320709e..2934fd7 100644 --- a/src/menu/components/table/edit-table/columns/index.scss +++ b/src/menu/components/table/edit-table/columns/index.scss @@ -67,7 +67,7 @@ z-index: 2; right: 0; top: -25px; - >i, >div > i { + >.anticon, >div > .anticon { font-size: 16px; margin-right: 10px; cursor: pointer; diff --git a/src/menu/components/table/edit-table/columns/tableIn/customscript/index.jsx b/src/menu/components/table/edit-table/columns/tableIn/customscript/index.jsx index d0b5dd8..1c83631 100644 --- a/src/menu/components/table/edit-table/columns/tableIn/customscript/index.jsx +++ b/src/menu/components/table/edit-table/columns/tableIn/customscript/index.jsx @@ -36,7 +36,7 @@ fields.push('jskey') - let _sql = `Declare @${btn.sheet} table (${usefulfields.map(item => item.field + ' ' + item.type).join(',')},jskey nvarchar(50) ) + let _sql = `Declare @${btn.sheet} table (${usefulfields.map(item => item.field + ' ' + item.type).join(',')},jskey nvarchar(50),data_type nvarchar(50),BID nvarchar(50)) Declare @UserName nvarchar(50),@FullName nvarchar(50),@RoleID nvarchar(512),@mk_departmentcode nvarchar(50),@mk_organization nvarchar(50),@login_city nvarchar(50),@ErrorCode nvarchar(50), @retmsg nvarchar(4000),@tbid Nvarchar(512) Select @ErrorCode='', @retmsg='' ` @@ -274,7 +274,7 @@ </Col> {usefulfields ? <Col span={24} className="sqlfield"> <Form.Item label={'鍙敤瀛楁'}> - BID, ID, LoginUID, SessionUid, UserID, Appkey, UserName, FullName, RoleID, mk_departmentcode, mk_organization, login_city, {usefulfields} + BID, ID, LoginUID, SessionUid, UserID, Appkey, UserName, FullName, RoleID, mk_departmentcode, mk_organization, login_city, {usefulfields},data_type锛堟敞锛歫skey涓轰富閿�硷紝鏂板鏃跺墠绔敓鎴愶紱data_type涓烘搷浣滅被鍨嬶紝鏂板 - add銆佷慨鏀� - upt銆佸垹闄� - del锛� </Form.Item> </Col> : null} <Col span={8} style={{whiteSpace: 'nowrap'}}> diff --git a/src/menu/components/table/edit-table/columns/tableIn/index.jsx b/src/menu/components/table/edit-table/columns/tableIn/index.jsx index 8079458..633ae38 100644 --- a/src/menu/components/table/edit-table/columns/tableIn/index.jsx +++ b/src/menu/components/table/edit-table/columns/tableIn/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Tabs, Row, Col, Input, Button, Table, Popconfirm, Icon, notification, Modal, message, InputNumber, Radio, Typography } from 'antd' +import { Form, Tabs, Row, Col, Input, Button, Table, Popconfirm, notification, Modal, message, InputNumber, Radio, Typography } from 'antd' +import { StopTwoTone, CheckCircleTwoTone, EditOutlined, ArrowUpOutlined, ArrowDownOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -80,13 +81,13 @@ ( <div> {this.props.dict['model.status.forbidden']} - <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" /> + <StopTwoTone style={{marginLeft: '5px'}} twoToneColor="#ff4d4f" /> </div> ) : ( <div> {this.props.dict['model.status.open']} - <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" /> + <CheckCircleTwoTone style={{marginLeft: '5px'}} twoToneColor="#52c41a" /> </div> ) }, @@ -133,13 +134,13 @@ ( <div> {this.props.dict['model.status.forbidden']} - <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" /> + <StopTwoTone style={{marginLeft: '5px'}} twoToneColor="#ff4d4f" /> </div> ) : ( <div> {this.props.dict['model.status.open']} - <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" /> + <CheckCircleTwoTone style={{marginLeft: '5px'}} twoToneColor="#52c41a" /> </div> ) }, @@ -150,16 +151,16 @@ dataIndex: 'operation', render: (text, record) => (<div> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'scripts')} style={{color: '#1890ff'}}><Icon type="edit" /></span> - <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'scripts', 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span> - <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'scripts', 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span> - <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record, 'scripts')} style={{color: '#8E44AD'}}><Icon type="swap" /></span> + <span className="operation-btn" onClick={() => this.handleEdit(record, 'scripts')} style={{color: '#1890ff'}}><EditOutlined /></span> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'scripts', 'up')} style={{color: '#1890ff'}}><ArrowUpOutlined /></span> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'scripts', 'down')} style={{color: '#ff4d4f'}}><ArrowDownOutlined /></span> + <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record, 'scripts')} style={{color: '#8E44AD'}}><SwapOutlined /></span> <Popconfirm overlayClassName="popover-confirm" title={this.props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record, 'scripts') }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> + <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> </Popconfirm> </div>) } @@ -167,26 +168,26 @@ } UNSAFE_componentWillMount() { - const { columns, cols, card, setting } = this.props + const { columns, card, setting } = this.props let _verify = fromJS(card).toJS() _verify.sheet = _verify.sheet || setting.tableName let fieldLabel = {} - let _columns = [] - let _fields = {} + // let _columns = [] + // let _fields = {} columns.forEach(col => { fieldLabel[col.field] = col.label - _fields[col.field] = col + // _fields[col.field] = col }) - cols.forEach(col => { - if (!col.field || col.type === 'index' || !_fields[col.field]) return + // cols.forEach(col => { + // if (!col.field || col.type === 'index' || !_fields[col.field]) return - _columns.push(_fields[col.field]) - }) + // _columns.push(_fields[col.field]) + // }) this.setState({ - fields: _columns, + fields: fromJS(columns).toJS().filter(item => item.field !== setting.primaryKey), fieldLabel, verify: _verify }, () => { diff --git a/src/menu/components/table/edit-table/index.jsx b/src/menu/components/table/edit-table/index.jsx index 92b66e2..5ac87be 100644 --- a/src/menu/components/table/edit-table/index.jsx +++ b/src/menu/components/table/edit-table/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { PlusOutlined, PlusCircleOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -81,6 +82,10 @@ _card.style = config.style _card.headerStyle = config.headerStyle + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts + let oriUids = {} _card.action = config.action.map(item => { let _uuid = Utils.getuuid() @@ -128,6 +133,7 @@ componentDidMount () { MKEmitter.addListener('submitStyle', this.getStyle) MKEmitter.addListener('submitModal', this.handleSave) + MKEmitter.addListener('completeSave', this.completeSave) } shouldComponentUpdate (nextProps, nextState) { @@ -143,6 +149,20 @@ } MKEmitter.removeListener('submitStyle', this.getStyle) MKEmitter.removeListener('submitModal', this.handleSave) + MKEmitter.removeListener('completeSave', this.completeSave) + } + + completeSave = () => { + const { card } = this.state + + if (card.isNew) { + let item = fromJS(card).toJS() + item.cols = item.cols.filter(a => !a.origin) + + delete item.isNew + + this.setState({card: item}) + } } filterOrigin = (component) => { @@ -310,21 +330,21 @@ <NormalHeader hideSearch="true" config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍒�" onClick={this.addColumns} type="plus" /> - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null} - <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> + <PlusOutlined className="plus" title="娣诲姞鍒�" onClick={this.addColumns}/> + {appType !== 'mob' ? <PlusCircleOutlined className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch}/> : null} + <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton}/> <NormalForm title="琛ㄦ牸璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="normaltable" card={card}/> <PasteComponent config={card} options={['action', 'search', 'form', 'cols']} updateConfig={this.updateComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <SearchComponent config={card} updatesearch={this.updateconfig}/> <ActionComponent type="editable" config={card} setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> diff --git a/src/menu/components/table/normal-table/columns/editColumn/formconfig.jsx b/src/menu/components/table/normal-table/columns/editColumn/formconfig.jsx index a703766..b861cf1 100644 --- a/src/menu/components/table/normal-table/columns/editColumn/formconfig.jsx +++ b/src/menu/components/table/normal-table/columns/editColumn/formconfig.jsx @@ -230,10 +230,13 @@ text: Formdict['model.empty'] }, { value: 'thdSeparator', - text: Formdict['header.form.thdSeparator'] + text: '鍗冨垎浣�' }, { value: 'percent', text: '鐧惧垎姣�' + }, { + value: 'abs', + text: '缁濆鍊�' }], required: false }, @@ -319,8 +322,8 @@ { type: 'radio', key: 'scale', - label: Formdict['header.form.clickscale'], - initVal: card.scale || 'false', + label: '鐐瑰嚮缂╂斁', + initVal: card.scale || 'true', required: false, options: [{ value: 'true', diff --git a/src/menu/components/table/normal-table/columns/index.jsx b/src/menu/components/table/normal-table/columns/index.jsx index 80f4594..6baf48a 100644 --- a/src/menu/components/table/normal-table/columns/index.jsx +++ b/src/menu/components/table/normal-table/columns/index.jsx @@ -2,7 +2,8 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { DndProvider, DragSource, DropTarget } from 'react-dnd' -import { Table, Popover, Icon, Modal, message } from 'antd' +import { Table, Popover, Modal, message } from 'antd' +import { PlusOutlined, FileSyncOutlined, EditOutlined, CopyOutlined, DeleteOutlined, FontColorsOutlined, CloseCircleOutlined, AntDesignOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -58,11 +59,11 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> {column && ['custom', 'colspan', 'action'].includes(column.type) ? - <Icon className="plus" title="娣诲姞" type="plus" onClick={() => this.props.addElement(column)} /> : null + <PlusOutlined className="plus" title="娣诲姞" onClick={() => this.props.addElement(column)} /> : null } - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => this.props.editColumn(column)} /> - {column && column.type === 'custom' ? <Icon className="style" title="璋冩暣鏍峰紡" onClick={() => this.props.changeStyle(column)} type="font-colors" /> : null} - <Icon className="close" title="鍒犻櫎" type="delete" onClick={this.deleteCol} /> + <EditOutlined className="edit" title="缂栬緫" onClick={() => this.props.editColumn(column)} /> + {column && column.type === 'custom' ? <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={() => this.props.changeStyle(column)}/> : null} + <DeleteOutlined className="close" title="鍒犻櫎" onClick={this.deleteCol} /> {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } </div> } trigger="hover"> @@ -76,10 +77,10 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> {column && ['custom', 'colspan'].includes(column.type) ? - <Icon className="plus" title="娣诲姞" type="plus" onClick={() => this.props.addElement(column)} /> : null + <PlusOutlined className="plus" title="娣诲姞" onClick={() => this.props.addElement(column)} /> : null } - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => this.props.editColumn(column)} /> - <Icon className="close" title="鍒犻櫎" type="delete" onClick={this.deleteCol} /> + <EditOutlined className="edit" title="缂栬緫" onClick={() => this.props.editColumn(column)} /> + <DeleteOutlined className="close" title="鍒犻櫎" onClick={this.deleteCol} /> {column && ['text', 'number', 'formula'].includes(column.type) ? <MarkColumn columns={fields} marks={column.marks} onSubmit={this.updateMarks} /> : null } </div> } trigger="hover"> @@ -169,8 +170,8 @@ return ( <td style={{...style, minWidth: column.Width || 100}} className={className}> {val} - {column.Hide === 'true' ? <Icon style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}} type="close-circle" /> : null} - {column.marks && column.marks.length ? <Icon className="profile" type="ant-design"/> : null} + {column.Hide === 'true' ? <CloseCircleOutlined style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}}/> : null} + {column.marks && column.marks.length ? <AntDesignOutlined className="profile"/> : null} </td> ) } else { @@ -316,7 +317,7 @@ }) this.updateCol(column) } else if (column.type === 'custom') { - let newcard = {uuid: Utils.getuuid(), focus: true, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}} + let newcard = {uuid: Utils.getuuid(), focus: true, width: 24, eleType: 'text', datatype: 'dynamic', style: {paddingLeft: '4px'}} // 娉ㄥ唽浜嬩欢-娣诲姞鍏冪礌 MKEmitter.emit('cardAddElement', [config.uuid, column.uuid], newcard) @@ -496,7 +497,7 @@ let cell = { uuid: Utils.getuuid(), label: item.label, field: item.field, Align: 'left', Hide: 'false', IsSort: 'true', Width: 120, blacklist: [], postfix: '', prefix: '', linkmenu: [], marks: [], perspective: 'linkmenu' } - if (/Nvarchar/ig.test(item.datatype)) { + if (/Nvarchar|date/ig.test(item.datatype)) { cell.type = 'text' cell.rowspan = 'false' cell.textFormat = 'none' @@ -505,6 +506,7 @@ cell.format = 'none' cell.sum = 'false' cell.decimal = item.decimal || 0 + cell.Width = 80 } columns.push(cell) @@ -576,10 +578,10 @@ return ( <div className={`normal-table-columns ${config.setting.laypage} ${config.wrap.tableType} ${config.wrap.mode || ''}`} id={tableId}> <div className="col-control"> - <Icon title="澶嶅埗鏄剧ず鍒�" type="copy" onClick={this.copycolumn} /> + <CopyOutlined title="澶嶅埗鏄剧ず鍒�" onClick={this.copycolumn} /> <MarkColumn columns={fields} type="line" marks={lineMarks} onSubmit={this.updateLineMarks} /> - <Icon title="鍚屾瀛楁闆�" type="file-sync" onClick={this.syncfield} /> - <Icon title="娓呯┖鏄剧ず鍒�" type="delete" onClick={this.clear}/> + <FileSyncOutlined title="鍚屾瀛楁闆�" onClick={this.syncfield} /> + <DeleteOutlined title="娓呯┖鏄剧ず鍒�" onClick={this.clear}/> </div> <DndProvider> <Table diff --git a/src/menu/components/table/normal-table/columns/index.scss b/src/menu/components/table/normal-table/columns/index.scss index f376b55..0261f7d 100644 --- a/src/menu/components/table/normal-table/columns/index.scss +++ b/src/menu/components/table/normal-table/columns/index.scss @@ -58,7 +58,7 @@ z-index: 2; right: 0; top: -25px; - >i, >div > i { + >.anticon, >div > .anticon { font-size: 16px; margin-right: 10px; cursor: pointer; diff --git a/src/menu/components/table/normal-table/index.jsx b/src/menu/components/table/normal-table/index.jsx index 2aaef69..17a55c8 100644 --- a/src/menu/components/table/normal-table/index.jsx +++ b/src/menu/components/table/normal-table/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, notification } from 'antd' +import { Popover, notification } from 'antd' +import { PlusOutlined, PlusCircleOutlined, PlusSquareOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -9,8 +10,6 @@ import MKEmitter from '@/utils/events.js' import getWrapForm from './options' import Utils from '@/utils/utils.js' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' @@ -33,7 +32,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, appType: sessionStorage.getItem('appType'), card: null, back: false @@ -88,6 +86,10 @@ _card.wrap.name = card.name _card.style = config.style _card.headerStyle = config.headerStyle + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts let oriUids = {} _card.action = config.action.map(item => { @@ -149,6 +151,7 @@ MKEmitter.addListener('submitStyle', this.getStyle) MKEmitter.addListener('submitModal', this.handleSave) MKEmitter.addListener('logButton', this.logButton) + MKEmitter.addListener('completeSave', this.completeSave) } shouldComponentUpdate (nextProps, nextState) { @@ -165,6 +168,22 @@ MKEmitter.removeListener('submitStyle', this.getStyle) MKEmitter.removeListener('submitModal', this.handleSave) MKEmitter.removeListener('logButton', this.logButton) + MKEmitter.removeListener('completeSave', this.completeSave) + } + + completeSave = () => { + const { card } = this.state + + if (card.isNew) { + let item = fromJS(card).toJS() + item.search = item.search.filter(a => !a.origin) + item.action = item.action.filter(a => !a.origin) + item.cols = item.cols.filter(a => !a.origin) + + delete item.isNew + + this.setState({card: item}, () => { MKEmitter.emit('revert') }) + } } loopCol = (col) => { @@ -385,9 +404,16 @@ } getWrapForms = () => { - const { wrap, action } = this.state.card + const { wrap, action, columns, cols } = this.state.card - return getWrapForm(wrap, action) + let _actions = [...action] + + cols.forEach(col => { + if (col.type !== 'action') return + _actions.push(...col.elements) + }) + + return getWrapForm(wrap, _actions, columns) } updateWrap = (res) => { @@ -415,22 +441,22 @@ <NormalHeader hideSearch="true" config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鍒�" onClick={this.addColumns} type="plus" /> - {appType !== 'mob' ? <Icon className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch} type="plus-circle" /> : null} - <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> + <PlusOutlined className="plus" title="娣诲姞鍒�" onClick={this.addColumns}/> + {appType !== 'mob' ? <PlusCircleOutlined className="plus" title="娣诲姞鎼滅储" onClick={this.addSearch}/> : null} + <PlusSquareOutlined className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton}/> <NormalForm title="琛ㄦ牸璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="normaltable" card={card}/> <PasteComponent config={card} options={options} updateConfig={this.updateComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <LogComponent btnlog={card.btnlog || []} handlelog={this.handleLog} /> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <SearchComponent config={card} updatesearch={this.updateconfig}/> <ActionComponent config={card} setSubConfig={this.setSubConfig} updateaction={this.updateComponent}/> diff --git a/src/menu/components/table/normal-table/options.jsx b/src/menu/components/table/normal-table/options.jsx index 5ce6944..22d3d39 100644 --- a/src/menu/components/table/normal-table/options.jsx +++ b/src/menu/components/table/normal-table/options.jsx @@ -1,7 +1,7 @@ /** * @description Wrap琛ㄥ崟閰嶇疆淇℃伅 */ -export default function (wrap, action = []) { +export default function (wrap, action = [], columns = []) { let roleList = sessionStorage.getItem('sysRoles') let appType = sessionStorage.getItem('appType') @@ -101,7 +101,7 @@ {value: 'true', label: '鏄�'}, {value: 'false', label: '鍚�'}, ], - forbid: appType === 'mob' + forbid: appType === 'mob' || appType === 'pc' }, { type: 'radio', @@ -202,6 +202,51 @@ forbid: appType === 'mob' }, { + type: 'select', + field: 'controlField', + label: '绂佺敤瀛楁', + initval: wrap.controlField || '', + tooltip: '鐢ㄤ簬鎺у埗琛屾暟鎹槸鍚﹀彲閫夋嫨銆�', + required: false, + allowClear: true, + options: columns, + controlFields: [ + {field: 'controlVal', notNull: true}, + ] + }, + { + type: 'text', + field: 'controlVal', + label: '鎺у埗鍊�', + initval: wrap.controlVal || '', + tooltip: '褰撳瓧娈靛�间笌鎺у埗鍊肩浉绛夋椂锛岃鏁版嵁浼氱鐢紝澶氫釜鍊肩敤閫楀彿鍒嗛殧銆�', + required: false + }, + { + type: 'radio', + field: 'empty', + label: '绌哄�奸殣钘�', + initval: wrap.empty || 'show', + tooltip: '褰撴煡璇㈡暟鎹负绌烘椂锛岄殣钘忚缁勪欢銆�', + required: false, + options: [ + {value: 'show', label: '鍚�'}, + {value: 'hidden', label: '鏄�'}, + ], + }, + { + type: 'radio', + field: 'supKey', + label: '涓婄骇涓婚敭', + initval: wrap.supKey || 'true', + tooltip: '褰撹缃笂绾х粍浠舵椂锛屼笂绾т富閿�间负绌烘槸鍚﹁繘琛屾暟鎹煡璇€��', + required: false, + options: [ + {value: 'true', label: '楠岃瘉'}, + {value: 'false', label: '蹇界暐'}, + ], + }, + { type: 'multiselect', field: 'blacklist', label: '榛戝悕鍗�', diff --git a/src/menu/components/tabs/antv-tabs/index.jsx b/src/menu/components/tabs/antv-tabs/index.jsx index ffa7b25..e85c5fb 100644 --- a/src/menu/components/tabs/antv-tabs/index.jsx +++ b/src/menu/components/tabs/antv-tabs/index.jsx @@ -1,18 +1,18 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Tabs, Icon, Popover, Modal } from 'antd' +import { Tabs, Popover, Modal } from 'antd' +import { PlusOutlined, CloseOutlined, EditOutlined, DeleteOutlined, FontColorsOutlined, ToolOutlined } from '@ant-design/icons' import MKEmitter from '@/utils/events.js' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' +import MkIcon from '@/components/mk-icon' import DraggableTabs from './dragabletabs' import { resetStyle } from '@/utils/utils-custom.js' import MenuUtils from '@/utils/utils-custom.js' import Utils from '@/utils/utils.js' import { getTabForm, getTabsSetForm } from './options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const NormalForm = asyncIconComponent(() => import('@/components/normalform')) @@ -31,7 +31,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, appType: sessionStorage.getItem('appType'), tabs: null, editab: null, @@ -317,7 +316,8 @@ editab.label = res.label editab.icon = res.icon - editab.hasSearch = res.hasSearch || '' + // editab.hasSearch = res.hasSearch || '' + editab.controlVal = res.controlVal || '' editab.blacklist = res.blacklist if (editab.uuid) { @@ -344,7 +344,7 @@ getTabsForms = () => { const { tabs } = this.state - return getTabsSetForm(tabs.setting) + return getTabsSetForm(tabs.setting, tabs.uuid) } updateTabs = (res) => { @@ -357,7 +357,7 @@ } render() { - const { tabs, appType, defaultActiveKey } = this.state + const { tabs, defaultActiveKey } = this.state let _style = resetStyle(tabs.style) return ( @@ -368,17 +368,17 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="鏍囩缂栬緫" width={600} update={this.updateTab} getForms={() => this.getTabForms(tab)}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <PasteComponent Tab={tab} insert={this.insert} /> - <Icon className="close" title="delete" type="close" onClick={() => this.delTab(tab)} /> + <CloseOutlined className="close" onClick={() => this.delTab(tab)} /> </div> } trigger="hover"> - <span>{tab.icon ? <Icon type={tab.icon} /> : null}{tab.label}</span> + <span>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span> </Popover> } key={tab.uuid}> - {appType === 'mob' && tabs.setting.position === 'top' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ? - <Icon className="search-icon" onDoubleClick={() => this.setSearch(tab)} type="search" /> : null} + {/* {appType === 'mob' && tabs.setting.position === 'top' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ? + <SearchOutlined className="search-icon" onDoubleClick={() => this.setSearch(tab)}/> : null} */} <TabComponents config={tab} handleList={this.updateTabComponent} deleteCard={this.deleteCard} /> </TabPane> ))} @@ -386,17 +386,17 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="娣诲姞鏍囩" width={600} update={this.updateTab} getForms={() => this.getTabForms()}> - <Icon type="plus" className="plus" title="娣诲姞鏍囩"/> + <PlusOutlined className="plus" title="娣诲姞鏍囩"/> </NormalForm> <NormalForm title="鏍囩椤佃缃�" width={700} update={this.updateTabs} getForms={this.getTabsForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="tabs" card={tabs}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(tabs.uuid)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(tabs.uuid)} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> </div> ) diff --git a/src/menu/components/tabs/antv-tabs/options.jsx b/src/menu/components/tabs/antv-tabs/options.jsx index 23f7108..3132c06 100644 --- a/src/menu/components/tabs/antv-tabs/options.jsx +++ b/src/menu/components/tabs/antv-tabs/options.jsx @@ -1,3 +1,5 @@ +import MenuUtils from '@/utils/utils-custom.js' + /** * @description tab琛ㄥ崟閰嶇疆淇℃伅 */ @@ -34,17 +36,27 @@ allowClear: true, span: 22 }, + // { + // type: 'radio', + // field: 'hasSearch', + // label: '鎼滅储', + // initval: tab.hasSearch || 'false', + // required: false, + // options: [ + // {value: 'false', label: '鏃�'}, + // {value: 'icon', label: '鏈�'}, + // ], + // forbid: appType !== 'mob' || setting.position !== 'top' || setting.display !== 'inline-block', + // span: 22 + // }, { - type: 'radio', - field: 'hasSearch', - label: '鎼滅储', - initval: tab.hasSearch || 'false', + type: 'text', + field: 'controlVal', + label: '闅愯棌鏍囪', + initval: tab.controlVal || '', + tooltip: '褰撶鐢ㄥ瓧娈靛�间笌闅愯棌鏍囪鐩哥瓑鏃讹紝鏍囩椤典細闅愯棌銆�', required: false, - options: [ - {value: 'false', label: '鏃�'}, - {value: 'icon', label: '鏈�'}, - ], - forbid: appType !== 'mob' || setting.position !== 'top' || setting.display !== 'inline-block', + forbid: appType === 'mob', span: 22 }, { @@ -65,9 +77,11 @@ /** * @description tabs琛ㄥ崟閰嶇疆淇℃伅 */ -export function getTabsSetForm(setting) { +export function getTabsSetForm(setting, uuid) { let appType = sessionStorage.getItem('appType') let roleList = sessionStorage.getItem('sysRoles') + + let modules = MenuUtils.getSupModules(window.GLOB.customMenu.components, uuid) || [] if (roleList) { try { @@ -165,6 +179,29 @@ ] }, { + type: 'cascader', + field: 'supModule', + label: '涓婄骇缁勪欢', + initval: setting.supModule || [], + tooltip: '鏍囩缁勫彲浠ラ�夋嫨涓婄骇缁勪欢锛屽~鍏ョ鐢ㄥ瓧娈碉紝鐢ㄤ簬鎺у埗鏍囩闅愯棌銆�', + required: false, + allowClear: true, + options: modules, + controlFields: [ + {field: 'controlField', notNull: true}, + ], + forbid: appType === 'mob', + }, + { + type: 'text', + field: 'controlField', + label: '绂佺敤瀛楁', + initval: setting.controlField || '', + tooltip: '鐢ㄤ簬鎺у埗鏍囩闅愯棌鐨勫瓧娈碉紝鍦ㄦ爣绛句腑濉叆闅愯棌鏍囪銆�', + required: true, + forbid: appType === 'mob', + }, + { type: 'multiselect', field: 'blacklist', label: '榛戝悕鍗�', diff --git a/src/menu/components/tabs/paste/index.jsx b/src/menu/components/tabs/paste/index.jsx index a18fd27..59eb081 100644 --- a/src/menu/components/tabs/paste/index.jsx +++ b/src/menu/components/tabs/paste/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Icon, Modal, notification } from 'antd' +import { Modal, notification } from 'antd' +import { SnippetsOutlined } from '@ant-design/icons' import MenuUtils from '@/utils/utils-custom.js' import MKEmitter from '@/utils/events.js' @@ -129,7 +130,7 @@ return ( <div style={{display: 'inline-block'}}> - <Icon type="snippets" style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} /> + <SnippetsOutlined style={{color: 'purple'}} onClick={() => {this.setState({visible: true})}} /> <Modal title="绮樿创" visible={visible} diff --git a/src/menu/components/timeline/normal-timeline/index.jsx b/src/menu/components/timeline/normal-timeline/index.jsx index 441a556..416d62d 100644 --- a/src/menu/components/timeline/normal-timeline/index.jsx +++ b/src/menu/components/timeline/normal-timeline/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -9,8 +10,6 @@ import MKEmitter from '@/utils/events.js' import Utils from '@/utils/utils.js' import getWrapForm from './options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) @@ -28,7 +27,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, back: false } @@ -71,6 +69,10 @@ _card.wrap = config.wrap _card.wrap.name = card.name _card.style = config.style + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts _card.subcards = config.subcards.map(scard => { scard.uuid = Utils.getuuid() @@ -177,19 +179,17 @@ <div className="menu-timeline-edit-box" style={_style} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - {/* <Icon className="plus" title="娣诲姞鍏冪礌" onClick={this.addElement} type="plus" /> */} - {/* <Icon className="plus" title="娣诲姞鎸夐挳" onClick={this.addButton} type="plus-square" /> */} <NormalForm title="鏃堕棿杞磋缃�" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="timeline" card={card}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <NormalHeader hideSearch="true" config={card} updateComponent={this.updateComponent}/> {card.subcards.map(subcard => (<CardSimpleComponent key={subcard.uuid} cards={card} card={subcard} updateElement={this.updateCard}/>))} diff --git a/src/menu/components/tree/antd-tree/index.jsx b/src/menu/components/tree/antd-tree/index.jsx index 06040f1..5911a79 100644 --- a/src/menu/components/tree/antd-tree/index.jsx +++ b/src/menu/components/tree/antd-tree/index.jsx @@ -1,15 +1,14 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Tree } from 'antd' +import { Popover, Tree } from 'antd' +import { EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined, FileOutlined, FolderOpenOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' import { resetStyle } from '@/utils/utils-custom.js' import MKEmitter from '@/utils/events.js' import getWrapForm from './options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' @@ -30,7 +29,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, back: false } @@ -67,6 +65,10 @@ _card.wrap.name = card.name _card.style = config.style _card.headerStyle = config.headerStyle + + _card.setting = config.setting + _card.columns = config.columns + _card.scripts = config.scripts } this.setState({ @@ -164,32 +166,32 @@ let _style = resetStyle(card.style) return ( - <div className="menu-editor-sand-box" style={_style} onClick={this.clickComponent} id={card.uuid}> + <div className="menu-tree-box" style={_style} onClick={this.clickComponent} id={card.uuid}> <NormalHeader config={card} updateComponent={this.updateComponent}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="鍩烘湰璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="normaltable" card={card}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <ClockComponent config={card} updateConfig={this.updateComponent}/> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> <SettingComponent config={card} updateConfig={this.updateComponent} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <div className="tree-box"> <Tree defaultExpandAll={true} blockNode showIcon={card.wrap.showIcon === 'true'} showLine={card.wrap.showLine === 'true'} > - <TreeNode icon={<Icon type="folder-open" />} title="parent 0" key="0-0"> - <TreeNode icon={<Icon type="file" />} title="leaf 0-0" key="0-0-0" isLeaf /> - <TreeNode icon={<Icon type="file" />} title="leaf 0-1" key="0-0-1" isLeaf /> + <TreeNode icon={<FolderOpenOutlined />} title="parent 0" key="0-0"> + <TreeNode icon={<FileOutlined />} title="leaf 0-0" key="0-0-0" isLeaf /> + <TreeNode icon={<FileOutlined />} title="leaf 0-1" key="0-0-1" isLeaf /> </TreeNode> - <TreeNode icon={<Icon type="folder-open" />} title="parent 1" key="0-1"> - <TreeNode icon={<Icon type="file" />} title="leaf 1-0" key="0-1-0" isLeaf /> - <TreeNode icon={<Icon type="file" />} title="leaf 1-1" key="0-1-1" isLeaf /> + <TreeNode icon={<FolderOpenOutlined />} title="parent 1" key="0-1"> + <TreeNode icon={<FileOutlined />} title="leaf 1-0" key="0-1-0" isLeaf /> + <TreeNode icon={<FileOutlined />} title="leaf 1-1" key="0-1-1" isLeaf /> </TreeNode> </Tree> </div> diff --git a/src/menu/components/tree/antd-tree/index.scss b/src/menu/components/tree/antd-tree/index.scss index c096ca8..ff7b7fb 100644 --- a/src/menu/components/tree/antd-tree/index.scss +++ b/src/menu/components/tree/antd-tree/index.scss @@ -1,11 +1,12 @@ -.menu-editor-sand-box { +.menu-tree-box { position: relative; box-sizing: border-box; background: #ffffff; background-position: center center; background-repeat: no-repeat; background-size: cover; - min-height: 30px; + min-height: 50px; + overflow-y: auto; .anticon-tool { position: absolute; @@ -25,12 +26,16 @@ color: #bcbcbc; } } -.menu-editor-sand-box::after { +.menu-tree-box::after { display: block; content: ' '; clear: both; } -.menu-editor-sand-box:hover { +.menu-tree-box:hover { z-index: 1; box-shadow: 0px 0px 4px #1890ff; } +.menu-tree-box::-webkit-scrollbar { + display: none; +} + diff --git a/src/menu/datasource/index.jsx b/src/menu/datasource/index.jsx index 42e66df..f7964eb 100644 --- a/src/menu/datasource/index.jsx +++ b/src/menu/datasource/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal } from 'antd' +import { Modal } from 'antd' +import { SettingOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -226,7 +227,7 @@ return ( <div className="model-datasource"> - <Icon type="setting" title="鏁版嵁婧�" onClick={() => this.editDataSource()} /> + <SettingOutlined title="鏁版嵁婧�" onClick={() => this.editDataSource()} /> <Modal wrapClassName="popview-modal" title={'鏁版嵁婧愰厤缃�'} @@ -241,7 +242,6 @@ > <VerifyCard dict={dict} - menu={window.GLOB.customMenu} mainSearch={mainSearch} config={config} wrappedComponentRef={(inst) => this.verifyRef = inst} diff --git a/src/menu/datasource/verifycard/index.jsx b/src/menu/datasource/verifycard/index.jsx index 095b693..549d3fa 100644 --- a/src/menu/datasource/verifycard/index.jsx +++ b/src/menu/datasource/verifycard/index.jsx @@ -1,8 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Tabs, Popconfirm, Icon, notification, Modal, Typography, Spin, message } from 'antd' -import { StopOutlined, CheckCircleOutlined } from '@ant-design/icons' +import { Form, Tabs, Popconfirm, notification, Modal, Typography, Spin, message } from 'antd' +import { StopOutlined, CheckCircleOutlined, EditOutlined, SwapOutlined, DeleteOutlined, CopyOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -24,7 +24,6 @@ class VerifyCard extends Component { static propTpyes = { dict: PropTypes.object, // 瀛楀吀椤� - menu: PropTypes.object, // 鑿滃崟閰嶇疆淇℃伅 config: PropTypes.object, // 缁勪欢閰嶇疆淇℃伅 } @@ -137,14 +136,14 @@ dataIndex: 'operation', render: (text, record) => (<div style={{textAlign: 'center'}}> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span> - <span className="operation-btn" title={this.props.dict['model.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><Icon type="swap" /></span> + <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><EditOutlined /></span> + <span className="operation-btn" title={this.props.dict['model.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><SwapOutlined /></span> <Popconfirm overlayClassName="popover-confirm" title={this.props.dict['model.query.delete']} onConfirm={() => this.deleteScript(record) }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> + <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> </Popconfirm> </div>) } @@ -152,7 +151,7 @@ } UNSAFE_componentWillMount() { - const { config, mainSearch, menu } = this.props + const { config, mainSearch } = this.props let search = config.search || [] @@ -160,47 +159,8 @@ search = [...search, ...mainSearch] } - let Marks = [] - let getcomponentmarks = (box, conf) => { - if (!conf.parentId && box.Template === 'CustomPage') { - box.components.forEach(item => { - if (item.type === 'group') { - item.components.forEach(cell => { - if (cell.uuid !== conf.uuid && cell.setting && cell.setting.varMark) { - Marks.push(cell.setting.varMark.toLowerCase()) - } - }) - } else if (item.uuid !== conf.uuid && item.setting && item.setting.varMark) { - Marks.push(item.setting.varMark.toLowerCase()) - } - }) - } else if (conf.parentId === box.parentId && conf.tabId === box.uuid) { - box.components.forEach(item => { - if (item.type === 'group') { - item.components.forEach(cell => { - if (cell.uuid !== conf.uuid && cell.setting && cell.setting.varMark) { - Marks.push(cell.setting.varMark.toLowerCase()) - } - }) - } else if (item.uuid !== conf.uuid && item.setting && item.setting.varMark) { - Marks.push(item.setting.varMark.toLowerCase()) - } - }) - } else { - box.components.forEach(item => { - if (item.type !== 'tabs') return - - item.subtabs.forEach(tab => { - getcomponentmarks(tab, conf) - }) - }) - } - } - - getcomponentmarks(menu, config) - let _setting = fromJS(config.setting).toJS() - let scripts = fromJS(config.scripts).toJS() + let scripts = config.scripts ? fromJS(config.scripts).toJS() : [] if (window.GLOB.funcs && window.GLOB.funcs.length > 0) { window.GLOB.funcs.forEach(m => { @@ -222,11 +182,10 @@ this.setState({ scripts, - columns: fromJS(config.columns).toJS(), + columns: config.columns ? fromJS(config.columns).toJS() : [], setting: _setting, searches: search, - defaultSearch: _search, - varMarks: Marks + defaultSearch: _search }) this.getsysScript() @@ -376,7 +335,7 @@ changeTab = (val) => { const { config, mainSearch } = this.props - const { activeKey, varMarks } = this.state + const { activeKey } = this.state this.setState({loading: true}) if (activeKey === 'setting') { @@ -385,18 +344,6 @@ if (res.useMSearch === 'true') { // 浣跨敤涓绘悳绱㈡潯浠� search = [...search, ...mainSearch] - } - - if (res.varMark && varMarks.includes(res.varMark.toLowerCase())) { - notification.warning({ - top: 92, - message: '鍙橀噺鏍囪瘑涓嶅彲閲嶅锛�', - duration: 5 - }) - this.setState({ - loading: false - }) - return } let _search = this.formatSearch(search) @@ -529,7 +476,7 @@ submitDataSource = () => { const { config, mainSearch } = this.props - const { activeKey, setting, columns, scripts, varMarks } = this.state + const { activeKey, setting, columns, scripts } = this.state return new Promise((resolve, reject) => { if (activeKey === 'setting') { @@ -538,16 +485,6 @@ if (res.useMSearch === 'true') { // 浣跨敤涓绘悳绱㈡潯浠� search = [...search, ...mainSearch] - } - - if (res.varMark && varMarks.includes(res.varMark.toLowerCase())) { - notification.warning({ - top: 92, - message: '鍙橀噺鏍囪瘑涓嶅彲閲嶅锛�', - duration: 5 - }) - reject() - return } let _search = this.formatSearch(search) @@ -708,7 +645,7 @@ } render() { - const { menu, config } = this.props + const { config } = this.props const { columns, setting, scripts, colColumns, scriptsColumns, activeKey, loading, searches, defaultsql } = this.state return ( @@ -717,7 +654,6 @@ <Tabs activeKey={activeKey} className="data-source-card-box" onChange={this.changeTab}> <TabPane tab="鏁版嵁婧�" key="setting"> <SettingForm - menu={menu} dict={this.props.dict} config={config} columns={columns} @@ -733,7 +669,7 @@ type="fields" updatefield={this.updatefields} /> - <Icon type="copy" title="浠ラ�楀彿鎷兼帴褰㈠紡澶嶅埗瀛楁" onClick={this.copyColumns} style={{position: 'absolute', cursor: 'pointer', zIndex: 1, top: '-35px', right: '0px', color: '#1890ff'}} /> + <CopyOutlined title="浠ラ�楀彿鎷兼帴褰㈠紡澶嶅埗瀛楁" onClick={this.copyColumns} style={{position: 'absolute', cursor: 'pointer', zIndex: 1, top: '-35px', right: '0px', color: '#1890ff'}} /> <EditTable actions={['edit', 'move', 'copy', 'del', 'clear']} type="datasourcefield" data={columns} columns={colColumns} onChange={(columns) => this.setState({columns})}/> </TabPane> <TabPane tab={ diff --git a/src/menu/datasource/verifycard/settingform/index.jsx b/src/menu/datasource/verifycard/settingform/index.jsx index 4d61040..fe0d88c 100644 --- a/src/menu/datasource/verifycard/settingform/index.jsx +++ b/src/menu/datasource/verifycard/settingform/index.jsx @@ -14,7 +14,6 @@ class SettingForm extends Component { static propTpyes = { dict: PropTypes.object, // 瀛楀吀椤� - menu: PropTypes.any, // 鑿滃崟閰嶇疆淇℃伅 config: PropTypes.object, // 缁勪欢閰嶇疆 setting: PropTypes.object, // 鏁版嵁婧愰厤缃� modules: PropTypes.array, // 鍙粦瀹氱殑涓婄骇缁勪欢 @@ -32,9 +31,9 @@ } UNSAFE_componentWillMount () { - const { menu, config } = this.props + const { config } = this.props - let modules = MenuUtils.getSupModules(menu.components, config.uuid) || [] + let modules = MenuUtils.getSupModules(window.GLOB.customMenu.components, config.uuid) || [] modules.unshift({ value: 'empty', @@ -228,28 +227,6 @@ </Radio.Group>)} </Form.Item> </Col> : null} - {interType === 'system' ? <Col span={8}> - <Form.Item label={ - <Tooltip placement="topLeft" title={'鑷畾涔夎剼鏈腑鐨勫彉閲忥紙闄ゆ姤閿欏強鍙敤瀛楁澶栵級锛岄渶浠ユ鏍囪瘑寮�澶淬��'}> - <QuestionCircleOutlined className="mk-form-tip" /> - 鍙橀噺鏍囪瘑 - </Tooltip> - }> - {getFieldDecorator('varMark', { - initialValue: setting.varMark || '', - rules: [ - { - pattern: /^[a-zA-Z_]*$/ig, - message: '璇蜂娇鐢ㄥ瓧姣嶆垨_' - }, - { - max: 3, - message: '鏈�澶氫笁涓瓧绗︺��' - } - ] - })(<Input placeholder={''} autoComplete="off" />)} - </Form.Item> - </Col> : null} {interType === 'inner' ? <Col span={8}> <Form.Item label={tooltip ? <Tooltip placement="topLeft" title={tooltip}> @@ -371,7 +348,7 @@ </Radio.Group>)} </Form.Item> </Col> : null} - {!['navbar', 'balcony', 'menubar'].includes(config.type) ? <Col span={8}> + {!['navbar', 'balcony', 'menubar'].includes(config.type) && (!config.wrap || config.wrap.supType !== 'multi') ? <Col span={8}> <Form.Item label={ <Tooltip placement="topLeft" title={'璇ョ粍浠跺鏋滃彈鍏朵粬缁勪欢鎺у埗锛岃閫夐」鐩稿簲鐨勭粍浠讹紝娌℃湁鏃堕�夆�滄棤鈥濄��'}> <QuestionCircleOutlined className="mk-form-tip" /> @@ -422,7 +399,7 @@ </Form.Item> </Col> : null} {/* 1銆佷笉鍒嗛〉涓斾笉瀛樺湪涓婄骇妯″潡 */} - {!['navbar', 'menubar'].includes(config.type) && (!config.pageable || (config.pageable && laypage === 'false')) && (!supModule || supModule.length === 0 || supModule[0] === 'empty') ? <Col span={8}> + {!['navbar'].includes(config.type) && (!config.pageable || (config.pageable && laypage === 'false')) && (!supModule || supModule.length === 0 || supModule[0] === 'empty') ? <Col span={8}> <Form.Item label={ <Tooltip placement="topLeft" title={'鍒濆鍖栧姞杞芥椂锛屾槸鍚︿笌鍏朵粬缁勪欢涓�鍚屽姞杞芥暟鎹紝娉細浠呭湪浣跨敤绯荤粺鍑芥暟锛屼笖鍒濆鍖栧姞杞芥暟鎹椂鏈夋晥锛屽垎椤佃姹傛椂鏃犳晥銆�'}> <QuestionCircleOutlined className="mk-form-tip" /> diff --git a/src/menu/datasource/verifycard/utils.jsx b/src/menu/datasource/verifycard/utils.jsx index d3a042f..7537ed2 100644 --- a/src/menu/datasource/verifycard/utils.jsx +++ b/src/menu/datasource/verifycard/utils.jsx @@ -156,27 +156,6 @@ _customScript = _customScript.replace(item.reg, '0') originscript = originscript.replace(item.reg, '0') }) - - if (setting.varMark) { - originscript = originscript.replace(/@ErrorCode/ig, '') - originscript = originscript.replace(/@retmsg/ig, '') - originscript = originscript.replace(/@UserName@/ig, '').replace(/@UserName/ig, '') - originscript = originscript.replace(/@FullName@/ig, '').replace(/@FullName/ig, '') - originscript = originscript.replace(/@login_city@/ig, '').replace(/@login_city/ig, '') - originscript = originscript.replace(/@id@/ig, '').replace(/@id/ig, '') - originscript = originscript.replace(/@bid@/ig, '').replace(/@bid/ig, '') - originscript = originscript.replace(/@loginuid@/ig, '').replace(/@loginuid/ig, '') - originscript = originscript.replace(/@sessionuid@/ig, '').replace(/@sessionuid/ig, '') - originscript = originscript.replace(/@userid@/ig, '').replace(/@userid/ig, '') - originscript = originscript.replace(/@appkey@/ig, '').replace(/@appkey/ig, '') - originscript = originscript.replace(/@time_id@/ig, '').replace(/@time_id/ig, '') - - originscript = originscript.replace(new RegExp('@' + setting.varMark, 'ig'), '') - - if (/@/ig.test(originscript)) { - error = '浣跨敤浜嗗彉閲忔爣璇嗗鐨勫瓧娈碉紒' - } - } } let sumSql = '' diff --git a/src/menu/modalconfig/index.jsx b/src/menu/modalconfig/index.jsx index c58d00f..2d63246 100644 --- a/src/menu/modalconfig/index.jsx +++ b/src/menu/modalconfig/index.jsx @@ -4,7 +4,8 @@ import { DndProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' import moment from 'moment' -import { Button, Card, Modal, Collapse, notification, Icon, Switch } from 'antd' +import { Button, Card, Modal, Collapse, notification, Switch } from 'antd' +import { SettingOutlined } from '@ant-design/icons' import Api from '@/api' import Utils from '@/utils/utils.js' @@ -113,10 +114,7 @@ let _inputfields = [] let _tabfields = [] let _linkableFields = [] - let _linksupFields = [{ - field: '', - label: '绌�' - }] + let _linksupFields = [] let standardform = null let uniq = new Map() @@ -146,7 +144,15 @@ _tabIndex++ } + if (item.type === 'switch') { + _linksupFields.push({ + field: item.field, + label: _linkIndex + '銆�' + item.label + }) + } + if (!['select', 'link', 'radio', 'checkcard'].includes(item.type)) return + if (item.type === 'checkcard' && item.multiple === 'true') return // 閫夐」鍗″閫� if (item.field && !uniq.has(item.field)) { uniq.set(item.field, true) @@ -463,16 +469,16 @@ </Collapse> </div> <div className="setting"> - <Card title={dict['header.menu.form.configurable']} bordered={false} extra={ + <Card title="琛ㄥ崟閰嶇疆" bordered={false} extra={ <div> <Button type="danger" onClick={this.clearConfig}>娓呯┖</Button> <EditComponent dict={dict} options={['form']} config={this.state.config} plusFields={this.plusFields}/> - <Button type="primary" loading={saving} onClick={this.submitConfig}>淇濆瓨</Button> + <Button type="primary" id="save-modal-config" loading={saving} onClick={this.submitConfig}>淇濆瓨</Button> <Button onClick={this.cancelConfig}>杩斿洖</Button> </div> } style={{ width: '100%' }}> - <Icon type="setting" onClick={this.changeSetting} /> - <div className="ant-modal-content" style={{width: config.setting.width + '%'}}> + <SettingOutlined onClick={this.changeSetting} /> + <div className="ant-modal-content" style={{width: config.setting.width > 100 ? config.setting.width : config.setting.width + '%'}}> <div className="ant-modal-header"> <div className="ant-modal-title">{config.setting.title}</div> <Button className="mk-cols-change" onClick={() => this.changecols(1)}>1鍒�</Button> diff --git a/src/menu/modulesource/dragsource/index.jsx b/src/menu/modulesource/dragsource/index.jsx index 0f13372..7b5a6ea 100644 --- a/src/menu/modulesource/dragsource/index.jsx +++ b/src/menu/modulesource/dragsource/index.jsx @@ -1,13 +1,13 @@ import React from 'react' import { useDrag } from 'react-dnd' -import { Icon } from 'antd' +import { CloseCircleOutlined } from '@ant-design/icons' import './index.scss' const MobSourceElement = ({item, triggerDel}) => { const [, drag] = useDrag({ item }) return ( <div className="menu-source-item"> - <div className="property"><span>{item.title}</span>{item.config ? <Icon onClick={() => triggerDel(item)} type="close-circle" /> : null}</div> + <div className="property"><span>{item.title}</span>{item.config ? <CloseCircleOutlined onClick={() => triggerDel(item)}/> : null}</div> <img ref={drag} src={item.url} alt=""/> </div> ) diff --git a/src/menu/modulesource/option.jsx b/src/menu/modulesource/option.jsx index 4425e8f..c9a112a 100644 --- a/src/menu/modulesource/option.jsx +++ b/src/menu/modulesource/option.jsx @@ -32,16 +32,16 @@ { type: 'menu', url: Mainsearch, component: 'search', subtype: 'mainsearch', title: '鎼滅储鏉′欢', width: 24, forbid: ['billPrint'] }, { type: 'menu', url: card1, component: 'card', subtype: 'datacard', title: '鏁版嵁鍗�', width: 24 }, { type: 'menu', url: card2, component: 'card', subtype: 'propcard', title: '灞炴�у崱', width: 24 }, - { type: 'menu', url: card2, component: 'balcony', subtype: 'balcony', title: '娴姩鍗�', width: 24 }, - { type: 'menu', url: form, component: 'form', subtype: 'stepform', title: '琛ㄥ崟锛堝垎姝ワ級', width: 24 }, - { type: 'menu', url: tabForm, component: 'form', subtype: 'tabform', title: '琛ㄥ崟锛坱ab椤碉級', width: 24 }, + { type: 'menu', url: card2, component: 'balcony', subtype: 'balcony', title: '娴姩鍗�', width: 24, forbid: ['billPrint'] }, + { type: 'menu', url: form, component: 'form', subtype: 'stepform', title: '琛ㄥ崟锛堝垎姝ワ級', width: 24, forbid: ['billPrint'] }, + { type: 'menu', url: tabForm, component: 'form', subtype: 'tabform', title: '琛ㄥ崟锛坱ab椤碉級', width: 24, forbid: ['billPrint'] }, { type: 'menu', url: Carousel, component: 'carousel', subtype: 'datacard', title: '杞挱-鍔ㄦ�佹暟鎹�', width: 24, forbid: ['billPrint'] }, { type: 'menu', url: Carousel1, component: 'carousel', subtype: 'propcard', title: '杞挱-闈欐�佹暟鎹�', width: 24, forbid: ['billPrint'] }, { type: 'menu', url: NormalTable, component: 'table', subtype: 'normaltable', title: '甯哥敤琛�', width: 24 }, - { type: 'menu', url: NormalTable, component: 'table', subtype: 'editable', title: '琛ㄦ牸锛堝彲缂栬緫锛�', width: 24 }, + { type: 'menu', url: NormalTable, component: 'table', subtype: 'editable', title: '琛ㄦ牸锛堝彲缂栬緫锛�', width: 24, forbid: ['billPrint'] }, { type: 'menu', url: TableCard, component: 'table', subtype: 'tablecard', title: '琛ㄦ牸锛堝崱鐗囷級', width: 12 }, { type: 'menu', url: timeline, component: 'timeline', subtype: 'timeline', title: '鏃堕棿杞�', width: 12 }, - { type: 'menu', url: tree, component: 'tree', subtype: 'normaltree', title: '鏍戝舰鍒楄〃', width: 12 }, + { type: 'menu', url: tree, component: 'tree', subtype: 'normaltree', title: '鏍戝舰鍒楄〃', width: 12, forbid: ['billPrint'] }, { type: 'menu', url: line, component: 'line', subtype: 'line', title: '鎶樼嚎鍥�', width: 24 }, { type: 'menu', url: line1, component: 'line', subtype: 'line1', title: '闃舵鎶樼嚎鍥�', width: 24 }, { type: 'menu', url: bar, component: 'bar', subtype: 'bar', title: '鏌辩姸鍥�', width: 24 }, @@ -53,8 +53,8 @@ { type: 'menu', url: dashboard, component: 'dashboard', subtype: 'dashboard', title: '浠〃鐩�', width: 12 }, { type: 'menu', url: ratioboard, component: 'dashboard', subtype: 'ratioboard', title: '鍗犳瘮鍥�', width: 12 }, { type: 'menu', url: scatter, component: 'scatter', subtype: 'scatter', title: '鏁g偣鍥�', width: 24 }, - { type: 'menu', url: chart, component: 'chart', subtype: 'custom', title: '鑷畾涔夊浘琛�', width: 24 }, - { type: 'menu', url: Editor, component: 'editor', subtype: 'brafteditor', title: '瀵屾枃鏈�', width: 24 }, + { type: 'menu', url: chart, component: 'chart', subtype: 'custom', title: '鑷畾涔夊浘琛�', width: 24, forbid: ['billPrint'] }, + { type: 'menu', url: Editor, component: 'editor', subtype: 'brafteditor', title: '瀵屾枃鏈�', width: 24, forbid: ['billPrint'] }, { type: 'menu', url: SandBox, component: 'code', subtype: 'sandbox', title: '鑷畾涔�', width: 24 }, { type: 'menu', url: group, component: 'group', subtype: 'normalgroup', title: '鍒嗙粍', width: 24, forbid: ['billPrint'] }, ] diff --git a/src/menu/padcontroller/index.jsx b/src/menu/padcontroller/index.jsx index 8bca837..3ade9f2 100644 --- a/src/menu/padcontroller/index.jsx +++ b/src/menu/padcontroller/index.jsx @@ -1,10 +1,9 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Form, Col, Icon } from 'antd' +import { Form, Col } from 'antd' +import { ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons' -import zhCN from '@/locales/zh-CN/mob.js' -import enUS from '@/locales/en-US/mob.js' import StyleInput from '../stylecontroller/styleInput' import './index.scss' @@ -15,7 +14,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, paddingTop: '', paddingBottom: '', paddingLeft: '', @@ -59,7 +57,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + label={<ArrowUpOutlined title="涓婅竟璺�"/>} > <StyleInput defaultValue={config.style.paddingTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingTop')}/> </Form.Item> @@ -67,7 +65,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + label={<ArrowDownOutlined title="涓嬭竟璺�"/>} > <StyleInput defaultValue={config.style.paddingBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingBottom')}/> </Form.Item> @@ -75,7 +73,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} > <StyleInput defaultValue={config.style.paddingLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingLeft')}/> </Form.Item> @@ -83,7 +81,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + label={<ArrowRightOutlined title="鍙宠竟璺�"/>} > <StyleInput defaultValue={config.style.paddingRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingRight')}/> </Form.Item> diff --git a/src/menu/pastecontroller/index.jsx b/src/menu/pastecontroller/index.jsx index eb105f6..858866b 100644 --- a/src/menu/pastecontroller/index.jsx +++ b/src/menu/pastecontroller/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { Modal, Button, notification } from 'antd' +import { SnippetsOutlined } from '@ant-design/icons' import MenuUtils from '@/utils/utils-custom.js' import MKEmitter from '@/utils/events.js' @@ -108,8 +109,8 @@ const { visible } = this.state return ( - <div style={{display: 'inline-block'}}> - <Button style={{borderColor: '#40a9ff', color: '#40a9ff'}} icon="snippets" onClick={() => {this.setState({visible: true})}}>绮樿创</Button> + <div className="mk-view-paste" style={{display: 'inline-block'}}> + <Button style={{borderColor: '#40a9ff', color: '#40a9ff'}} onClick={() => {this.setState({visible: true})}}><SnippetsOutlined />绮樿创</Button> <Modal title="绮樿创" visible={visible} diff --git a/src/menu/picturecontroller/index.jsx b/src/menu/picturecontroller/index.jsx index ca809f7..acf10d8 100644 --- a/src/menu/picturecontroller/index.jsx +++ b/src/menu/picturecontroller/index.jsx @@ -1,5 +1,6 @@ import React, {Component} from 'react' -import { Modal, Button, Row, Col, Input, Icon, message, Tabs, Empty, Pagination, notification } from 'antd' +import { Modal, Button, Row, Col, Input, message, Tabs, Empty, Pagination, notification } from 'antd' +import { PlusOutlined, CopyOutlined, EditOutlined, DeleteOutlined, PictureOutlined } from '@ant-design/icons' import Api from '@/api' import Utils from '@/utils/utils.js' @@ -235,7 +236,7 @@ return ( <div style={{display: 'inline-block'}}> - <Button className="mk-border-purple" icon="picture" onClick={this.trigger}>璧勬簮绠$悊</Button> + <Button className="mk-border-purple" onClick={this.trigger}><PictureOutlined /> 璧勬簮绠$悊</Button> <Modal title="绮樿创" wrapClassName="picture-control-model" @@ -257,8 +258,8 @@ <Search placeholder="" value={imageKey} onChange={(e) => this.setState({imageKey: e.target.value})} onSearch={this.filterPicture} enterButton /> </Col> <Col span={16}> - <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'image'})}> - 娣诲姞 + <Button className="picture-plus mk-green" onClick={() => this.handleSource({typecharone: 'image'})}> + <PlusOutlined /> 娣诲姞 </Button> </Col> </Row> @@ -270,9 +271,9 @@ <Image url={item.linkurl} /> </div> <div className="image-video-control"> - <Icon type="copy" onClick={() => this.copySource(item)}/> - <Icon type="edit" onClick={() => this.handleSource(item)}/> - <Icon type="delete" onClick={() => this.deleteSource(item)}/> + <CopyOutlined onClick={() => this.copySource(item)}/> + <EditOutlined onClick={() => this.handleSource(item)}/> + <DeleteOutlined onClick={() => this.deleteSource(item)}/> </div> </div> <p className="image-video-remark">{item.remark}</p> @@ -288,8 +289,8 @@ <Search placeholder="" value={videoKey} onChange={e => this.setState({videoKey: e.target.value})} onSearch={this.filterVideo} enterButton /> </Col> <Col span={16}> - <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'video'})}> - 娣诲姞 + <Button className="picture-plus mk-green" onClick={() => this.handleSource({typecharone: 'video'})}> + <PlusOutlined /> 娣诲姞 </Button> </Col> </Row> @@ -301,9 +302,9 @@ <Video value={item.linkurl} /> </div> <div className="image-video-control"> - <Icon type="copy" onClick={() => this.copySource(item)}/> - <Icon type="edit" onClick={() => this.handleSource(item)}/> - <Icon type="delete" onClick={() => this.deleteSource(item)}/> + <CopyOutlined onClick={() => this.copySource(item)}/> + <EditOutlined onClick={() => this.handleSource(item)}/> + <DeleteOutlined onClick={() => this.deleteSource(item)}/> </div> </div> <p className="image-video-remark">{item.remark}</p> @@ -317,8 +318,8 @@ <Row style={{marginBottom: '15px'}}> <Col span={24}> 鍙坊鍔犲簲鐢ㄤ腑甯哥敤鐨勯鑹诧紝鍙互鏄嫳鏂囦唬鐮併�丠EX鏍煎紡銆丷GB鏍煎紡锛屾渶澶氬彲娣诲姞25绉嶃�� - {colorlist.length < 25 ? <Button className="picture-plus mk-green" icon="plus" onClick={() => this.handleSource({typecharone: 'color'})}> - 娣诲姞 + {colorlist.length < 25 ? <Button className="picture-plus mk-green" onClick={() => this.handleSource({typecharone: 'color'})}> + <PlusOutlined /> 娣诲姞 </Button> : null} </Col> </Row> @@ -329,8 +330,8 @@ <div className="image-video-box-body" style={{background: item.linkurl}}> </div> <div className="image-video-control"> - <Icon type="copy" onClick={() => this.copySource(item)}/> - <Icon type="delete" onClick={() => this.deleteSource(item)}/> + <CopyOutlined onClick={() => this.copySource(item)}/> + <DeleteOutlined onClick={() => this.deleteSource(item)}/> </div> </div> <p className="image-video-remark">{item.remark}</p> diff --git a/src/menu/picturecontroller/index.scss b/src/menu/picturecontroller/index.scss index 35b9200..c059029 100644 --- a/src/menu/picturecontroller/index.scss +++ b/src/menu/picturecontroller/index.scss @@ -43,7 +43,7 @@ text-align: center; opacity: 0; transition: all 0.3s; - i { + .anticon { font-size: 20px; cursor: pointer; } diff --git a/src/menu/popview/index.jsx b/src/menu/popview/index.jsx index 413f6e9..7e90b9a 100644 --- a/src/menu/popview/index.jsx +++ b/src/menu/popview/index.jsx @@ -666,7 +666,7 @@ <StyleCombControlButton menu={config} /> <PasteController insert={this.insert} /> {config ? <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config.enabled} onChange={this.onEnabledChange} /> : null} - <Button type="primary" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> + <Button type="primary" id="save-pop-config" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> <Button type="default" onClick={this.closeView}>{dict['mob.return']}</Button> </div> } style={{ width: '100%' }}> diff --git a/src/menu/replaceField/index.jsx b/src/menu/replaceField/index.jsx index d965cba..74e0380 100644 --- a/src/menu/replaceField/index.jsx +++ b/src/menu/replaceField/index.jsx @@ -358,7 +358,7 @@ const { visible, loadingTable, tables, confirming } = this.state return ( - <div style={{display: 'inline-block'}}> + <div className="mk-replace-field" style={{display: 'inline-block'}}> <Button className="mk-border-yellow" icon="swap" loading={loadingTable} onClick={this.trigger}>瀛楁鏇挎崲</Button> <Modal title="瀛楁鏇挎崲" diff --git a/src/menu/stylecombcontrolbutton/index.jsx b/src/menu/stylecombcontrolbutton/index.jsx index b644e5b..3beaaf4 100644 --- a/src/menu/stylecombcontrolbutton/index.jsx +++ b/src/menu/stylecombcontrolbutton/index.jsx @@ -2,6 +2,7 @@ import PropTypes from 'prop-types' import { fromJS } from 'immutable' import { Button } from 'antd' +import { FontColorsOutlined } from '@ant-design/icons' import MKEmitter from '@/utils/events.js' import './index.scss' @@ -148,7 +149,7 @@ render() { const { label } = this.state return ( - <Button className="style-control-button" icon="font-colors" title="鎵归噺璋冩暣鏍峰紡" onClick={this.triggerStyleChange}>{label}</Button> + <Button className="style-control-button" title="鎵归噺璋冩暣鏍峰紡" onClick={this.triggerStyleChange}><FontColorsOutlined/> {label}</Button> ) } } diff --git a/src/menu/stylecombcontroller/index.jsx b/src/menu/stylecombcontroller/index.jsx index 6a9d18a..c26c17d 100644 --- a/src/menu/stylecombcontroller/index.jsx +++ b/src/menu/stylecombcontroller/index.jsx @@ -1,11 +1,35 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Collapse, Form, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd' +import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd' +import { + ColumnHeightOutlined, + FontSizeOutlined, + BoldOutlined, + LineHeightOutlined, + ColumnWidthOutlined, + FontColorsOutlined, + ItalicOutlined, + AlignLeftOutlined, + AlignCenterOutlined, + AlignRightOutlined, + UnderlineOutlined, + StrikethroughOutlined, + BgColorsOutlined, + BorderOutlined, + BorderOuterOutlined, + BorderLeftOutlined, + BorderRightOutlined, + BorderTopOutlined, + BorderBottomOutlined, + RadiusSettingOutlined, + ArrowUpOutlined, + ArrowDownOutlined, + ArrowLeftOutlined, + ArrowRightOutlined, +} from '@ant-design/icons' import MKEmitter from '@/utils/events.js' -import zhCN from '@/locales/zh-CN/mob.js' -import enUS from '@/locales/en-US/mob.js' import ColorSketch from '@/mob/colorsketch' import StyleInput from './styleInput' import './index.scss' @@ -20,7 +44,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, options: [], style: {}, borposition: 'outer' @@ -257,7 +280,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="楂樺害" type="column-height" />} + label={<ColumnHeightOutlined title="楂樺害" />} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/> @@ -266,12 +289,12 @@ </Panel> : null} {options.includes('font') ? <Panel header="瀛椾綋" key="font"> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛椾綋澶у皬" type="font-size" />}> + <Form.Item colon={false} label={<FontSizeOutlined title="瀛椾綋澶у皬"/>}> <InputNumber defaultValue={''} min={12} max={100} precision={0} onChange={this.changeFontSize} /> </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛椾綋绮楃粏" type="bold" />}> + <Form.Item colon={false} label={<BoldOutlined title="瀛椾綋绮楃粏"/>}> <Select defaultValue={''} onChange={this.boldChange}> <Option value="normal">normal</Option> <Option value="bold">bold</Option> @@ -290,19 +313,19 @@ </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="琛岄珮" type="line-height" />}> + <Form.Item colon={false} label={<LineHeightOutlined title="琛岄珮" />}> <InputNumber defaultValue={''} min={1} max={10} precision={1} onChange={this.changeLineHeight} /> </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛楅棿璺�" type="column-width" />}> + <Form.Item colon={false} label={<ColumnWidthOutlined title="瀛楅棿璺�"/>}> <InputNumber defaultValue={''} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/> </Form.Item> </Col> <Col span={24}> <Form.Item colon={false} - label={<Icon title="瀛椾綋棰滆壊" type="font-colors" />} + label={<FontColorsOutlined title="瀛椾綋棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <ColorSketch onChange={this.changeFontColor} /> @@ -316,7 +339,7 @@ > <Radio.Group defaultValue={''} onChange={this.changeFontStyle}> <Radio.Button value="normal"><span title="鏍囧噯">N</span></Radio.Button> - <Radio.Button value="italic"><Icon title="鏂滀綋" type="italic" /></Radio.Button> + <Radio.Button value="italic"><ItalicOutlined title="鏂滀綋"/></Radio.Button> <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="鍊炬枩">B</span></Radio.Button> </Radio.Group> </Form.Item> @@ -328,9 +351,9 @@ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <Radio.Group className="text-align" defaultValue={''} onChange={this.changeTextAlign}> - <Radio.Button value="left"><Icon title="宸﹀榻�" type="align-left" /></Radio.Button> - <Radio.Button value="center"><Icon title="灞呬腑瀵归綈" type="align-center" /></Radio.Button> - <Radio.Button value="right"><Icon title="鍙冲榻�" type="align-right" /></Radio.Button> + <Radio.Button value="left"><AlignLeftOutlined title="宸﹀榻�"/></Radio.Button> + <Radio.Button value="center"><AlignCenterOutlined title="灞呬腑瀵归綈"/></Radio.Button> + <Radio.Button value="right"><AlignRightOutlined title="鍙冲榻�"/></Radio.Button> </Radio.Group> </Form.Item> </Col> @@ -342,8 +365,8 @@ > <Radio.Group className="text-decoration" defaultValue={''} onChange={this.changeTextDecoration}> <Radio.Button value="none"><span title="鏍囧噯">N</span></Radio.Button> - <Radio.Button value="underline"><Icon title="涓嬪垝绾�" type="underline" /></Radio.Button> - <Radio.Button value="line-through"><Icon title="涓垝绾�" type="strikethrough" /></Radio.Button> + <Radio.Button value="underline"><UnderlineOutlined title="涓嬪垝绾�"/></Radio.Button> + <Radio.Button value="line-through"><StrikethroughOutlined title="涓垝绾�"/></Radio.Button> <Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="涓婂垝绾�">O</span></Radio.Button> </Radio.Group> </Form.Item> @@ -353,7 +376,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鑳屾櫙棰滆壊" type="bg-colors" />} + label={<BgColorsOutlined title="鑳屾櫙棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <ColorSketch onChange={this.changeBackgroundColor} /> @@ -364,22 +387,22 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规浣嶇疆" type="border" />} + label={<BorderOutlined title="杈规浣嶇疆"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <Radio.Group className="border-position" defaultValue={'outer'} onChange={(e) => this.setState({borposition: e.target.value})}> - <Radio value="outer"><Icon title="澶栬竟妗�" type="border-outer" /></Radio> - <Radio value="left"><Icon title="宸﹁竟妗�" type="border-left" /></Radio> - <Radio value="right"><Icon title="鍙宠竟妗�" type="border-right" /></Radio> - <Radio value="top"><Icon title="涓婅竟妗�" type="border-top" /></Radio> - <Radio value="bottom"><Icon title="涓嬭竟妗�" type="border-bottom" /></Radio> + <Radio value="outer"><BorderOuterOutlined title="澶栬竟妗�"/></Radio> + <Radio value="left"><BorderLeftOutlined title="宸﹁竟妗�"/></Radio> + <Radio value="right"><BorderRightOutlined title="鍙宠竟妗�"/></Radio> + <Radio value="top"><BorderTopOutlined title="涓婅竟妗�"/></Radio> + <Radio value="bottom"><BorderBottomOutlined title="涓嬭竟妗�"/></Radio> </Radio.Group> </Form.Item> </Col> <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规鏍峰紡" type="border-outer" />} + label={<BorderOuterOutlined title="杈规鏍峰紡"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > {borposition === 'outer' ? <Select defaultValue={'solid'} onChange={this.changeBorderStyle}> @@ -417,7 +440,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规瀹藉害" type="column-width" />} + label={<ColumnWidthOutlined title="杈规瀹藉害"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > {borposition === 'outer' ? <StyleInput defaultValue={''} options={['px']} onChange={this.changeBorderWidth}/> : null} @@ -430,7 +453,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规棰滆壊" type="bg-colors" />} + label={<BgColorsOutlined title="杈规棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > {borposition === 'outer' ? <ColorSketch onChange={this.changeBorderColor} /> : null} @@ -443,7 +466,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍦嗚" type="radius-setting" />} + label={<RadiusSettingOutlined title="鍦嗚"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={'0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/> @@ -454,7 +477,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="闃村奖棰滆壊" type="bg-colors" />} + label={<BgColorsOutlined title="闃村奖棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <ColorSketch onChange={this.changeShadowColor} /> @@ -465,7 +488,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + label={<ArrowUpOutlined title="涓婅竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/> @@ -474,7 +497,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + label={<ArrowDownOutlined title="涓嬭竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/> @@ -483,7 +506,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/> @@ -492,7 +515,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + label={<ArrowRightOutlined title="鍙宠竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/> @@ -503,7 +526,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + label={<ArrowUpOutlined title="涓婅竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/> @@ -512,7 +535,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + label={<ArrowDownOutlined title="涓嬭竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/> @@ -521,7 +544,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/> @@ -530,25 +553,10 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + label={<ArrowRightOutlined title="鍙宠竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={''} options={['px', 'vh', 'vw']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/> - </Form.Item> - </Col> - </Panel> : null} - {options.includes('float') ? <Panel header="娴姩" key="float"> - <Col span={24}> - <Form.Item - colon={false} - label={<Icon title="娴姩" type="swap" />} - labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } - > - <Radio.Group defaultValue={''} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}> - <Radio value="left">宸︽诞鍔�</Radio> - <Radio value="right">鍙虫诞鍔�</Radio> - <Radio value="none">涓嶆诞鍔�</Radio> - </Radio.Group> </Form.Item> </Col> </Panel> : null} diff --git a/src/menu/stylecombcontroller/index.scss b/src/menu/stylecombcontroller/index.scss index 1350691..7c91c4a 100644 --- a/src/menu/stylecombcontroller/index.scss +++ b/src/menu/stylecombcontroller/index.scss @@ -107,29 +107,6 @@ } } } - .fileupload-form-container { - .ant-btn { - height: 28px; - } - .ant-upload-list-item { - .ant-upload-list-item-info { - background: transparent; - color: rgba(255, 255, 255, 0.85); - i { - color: rgba(255, 255, 255, 0.85); - } - } - .anticon-close { - color: rgba(255, 255, 255, 0.85); - } - .anticon-close:hover { - color: rgba(255, 255, 255, 0.85); - } - } - .ant-upload-list-item:hover .ant-upload-list-item-info { - background: transparent; - } - } } } } diff --git a/src/menu/stylecontroller/index.jsx b/src/menu/stylecontroller/index.jsx index d1c5585..a6143e6 100644 --- a/src/menu/stylecontroller/index.jsx +++ b/src/menu/stylecontroller/index.jsx @@ -1,11 +1,37 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Collapse, Form, Col, Icon, InputNumber, Select, Radio, Drawer, Button } from 'antd' +import { Collapse, Form, Col, InputNumber, Select, Radio, Drawer, Button } from 'antd' +import { + ColumnHeightOutlined, + FontSizeOutlined, + BoldOutlined, + LineHeightOutlined, + ColumnWidthOutlined, + FontColorsOutlined, + ItalicOutlined, + AlignLeftOutlined, + AlignCenterOutlined, + AlignRightOutlined, + UnderlineOutlined, + StrikethroughOutlined, + BgColorsOutlined, + PictureOutlined, + BorderOutlined, + BorderOuterOutlined, + BorderLeftOutlined, + BorderRightOutlined, + BorderTopOutlined, + BorderBottomOutlined, + RadiusSettingOutlined, + ArrowUpOutlined, + ArrowDownOutlined, + ArrowLeftOutlined, + ArrowRightOutlined, + SwapOutlined, +} from '@ant-design/icons' import MKEmitter from '@/utils/events.js' -import zhCN from '@/locales/zh-CN/mob.js' -import enUS from '@/locales/en-US/mob.js' import asyncComponent from '@/utils/asyncComponent' import StyleInput from './styleInput' import './index.scss' @@ -22,7 +48,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, comIds: [], backgroundImage: '', @@ -384,7 +409,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="瀹藉害" type="column-width" />} + label={<ColumnWidthOutlined title="瀹藉害"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.width || ''} options={['px', 'vh', 'vw', '%']} onChange={this.changeWidth}/> @@ -395,7 +420,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="楂樺害" type="column-height" />} + label={<ColumnHeightOutlined title="楂樺害"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.height || ''} options={['px', 'vh', 'vw']} onChange={this.changeHeight}/> @@ -404,12 +429,12 @@ </Panel> : null} {options.includes('font') ? <Panel header="瀛椾綋" key="font"> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛椾綋澶у皬" type="font-size" />}> + <Form.Item colon={false} label={<FontSizeOutlined title="瀛椾綋澶у皬"/>}> <InputNumber defaultValue={card.fontSize || 14} min={12} max={100} precision={0} onChange={this.changeFontSize} /> </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛椾綋绮楃粏" type="bold" />}> + <Form.Item colon={false} label={<BoldOutlined title="瀛椾綋绮楃粏"/>}> <Select defaultValue={card.fontWeight || 'normal'} onChange={this.boldChange}> <Option value="normal">normal</Option> <Option value="bold">bold</Option> @@ -428,19 +453,19 @@ </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="琛岄珮" type="line-height" />}> + <Form.Item colon={false} label={<LineHeightOutlined title="琛岄珮"/>}> <InputNumber defaultValue={card.lineHeight || 1.5} min={1} max={10} precision={1} onChange={this.changeLineHeight} /> </Form.Item> </Col> <Col span={12}> - <Form.Item colon={false} label={<Icon title="瀛楅棿璺�" type="column-width" />}> + <Form.Item colon={false} label={<ColumnWidthOutlined title="瀛楅棿璺�"/>}> <InputNumber defaultValue={card.letterSpacing || 0} min={0} max={100} precision={0} onChange={this.changeLetterSpacing}/> </Form.Item> </Col> <Col span={24}> <Form.Item colon={false} - label={<Icon title="瀛椾綋棰滆壊" type="font-colors" />} + label={<FontColorsOutlined title="瀛椾綋棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <ColorSketch value={card.color || 'rgba(0, 0, 0, 0.85)'} onChange={this.changeFontColor} /> @@ -454,7 +479,7 @@ > <Radio.Group defaultValue={card.fontStyle || 'normal'} onChange={this.changeFontStyle}> <Radio.Button value="normal"><span title="鏍囧噯">N</span></Radio.Button> - <Radio.Button value="italic"><Icon title="鏂滀綋" type="italic" /></Radio.Button> + <Radio.Button value="italic"><ItalicOutlined title="鏂滀綋"/></Radio.Button> <Radio.Button value="oblique" style={{fontStyle: 'oblique'}}><span title="鍊炬枩">B</span></Radio.Button> </Radio.Group> </Form.Item> @@ -466,9 +491,9 @@ labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <Radio.Group className="text-align" defaultValue={card.textAlign || 'left'} onChange={this.changeTextAlign}> - <Radio.Button value="left"><Icon title="宸﹀榻�" type="align-left" /></Radio.Button> - <Radio.Button value="center"><Icon title="灞呬腑瀵归綈" type="align-center" /></Radio.Button> - <Radio.Button value="right"><Icon title="鍙冲榻�" type="align-right" /></Radio.Button> + <Radio.Button value="left"><AlignLeftOutlined title="宸﹀榻�"/></Radio.Button> + <Radio.Button value="center"><AlignCenterOutlined title="灞呬腑瀵归綈"/></Radio.Button> + <Radio.Button value="right"><AlignRightOutlined title="鍙冲榻�"/></Radio.Button> </Radio.Group> </Form.Item> </Col> @@ -480,8 +505,8 @@ > <Radio.Group className="text-decoration" defaultValue={card.textDecoration || 'none'} onChange={this.changeTextDecoration}> <Radio.Button value="none"><span title="鏍囧噯">N</span></Radio.Button> - <Radio.Button value="underline"><Icon title="涓嬪垝绾�" type="underline" /></Radio.Button> - <Radio.Button value="line-through"><Icon title="涓垝绾�" type="strikethrough" /></Radio.Button> + <Radio.Button value="underline"><UnderlineOutlined title="涓嬪垝绾�"/></Radio.Button> + <Radio.Button value="line-through"><StrikethroughOutlined title="涓垝绾�"/></Radio.Button> <Radio.Button value="overline" style={{textDecoration: 'overline'}}><span title="涓婂垝绾�">O</span></Radio.Button> </Radio.Group> </Form.Item> @@ -491,7 +516,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鑳屾櫙棰滆壊" type="bg-colors" />} + label={<BgColorsOutlined title="鑳屾櫙棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <ColorSketch value={card.backgroundColor || '#ffffff'} onChange={this.changeBackgroundColor} /> @@ -500,7 +525,7 @@ {!options.includes('backgroundColor') ? <Col span={24}> <Form.Item colon={false} - label={<Icon title="鑳屾櫙鍥剧墖" type="picture" />} + label={<PictureOutlined title="鑳屾櫙鍥剧墖"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <SourceComponent value={backgroundImage} type="" placement="right" onChange={this.imgChange}/> @@ -555,22 +580,22 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规浣嶇疆" type="border" />} + label={<BorderOutlined title="杈规浣嶇疆"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <Radio.Group className="border-position" defaultValue={'outer'} onChange={(e) => this.setState({borposition: e.target.value})}> - <Radio value="outer"><Icon title="澶栬竟妗�" type="border-outer" /></Radio> - <Radio value="left"><Icon title="宸﹁竟妗�" type="border-left" /></Radio> - <Radio value="right"><Icon title="鍙宠竟妗�" type="border-right" /></Radio> - <Radio value="top"><Icon title="涓婅竟妗�" type="border-top" /></Radio> - <Radio value="bottom"><Icon title="涓嬭竟妗�" type="border-bottom" /></Radio> + <Radio value="outer"><BorderOuterOutlined title="澶栬竟妗�"/></Radio> + <Radio value="left"><BorderLeftOutlined title="宸﹁竟妗�"/></Radio> + <Radio value="right"><BorderRightOutlined title="鍙宠竟妗�"/></Radio> + <Radio value="top"><BorderTopOutlined title="涓婅竟妗�"/></Radio> + <Radio value="bottom"><BorderBottomOutlined title="涓嬭竟妗�"/></Radio> </Radio.Group> </Form.Item> </Col> <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规鏍峰紡" type="border-outer" />} + label={<BorderOuterOutlined title="杈规鏍峰紡"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > {borposition === 'outer' ? <Select defaultValue={card.borderStyle || 'solid'} onChange={this.changeBorderStyle}> @@ -608,7 +633,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规瀹藉害" type="column-width" />} + label={<ColumnWidthOutlined title="杈规瀹藉害"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > {borposition === 'outer' ? <StyleInput defaultValue={card.borderWidth || '0px'} options={['px']} onChange={this.changeBorderWidth}/> : null} @@ -621,7 +646,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="杈规棰滆壊" type="bg-colors" />} + label={<BgColorsOutlined title="杈规棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > {borposition === 'outer' ? <ColorSketch defaultValue={card.borderColor || 'transparent'} onChange={this.changeBorderColor} /> : null} @@ -634,7 +659,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍦嗚" type="radius-setting" />} + label={<RadiusSettingOutlined title="鍦嗚"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.borderRadius || '0px'} options={['px', '%']} onChange={(val) => this.changeNormalStyle(val, 'borderRadius')}/> @@ -645,7 +670,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="闃村奖棰滆壊" type="bg-colors" />} + label={<BgColorsOutlined title="闃村奖棰滆壊"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <ColorSketch value={card.shadowColor || 'transparent'} onChange={this.changeShadowColor} /> @@ -654,7 +679,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="妯$硦璺濈" type="column-width" />} + label={<ColumnWidthOutlined title="妯$硦璺濈"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.shadowBlur || '0px'} options={['px']} onChange={this.changeShadowBlur}/> @@ -663,7 +688,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="姘村钩浣嶇疆" type="arrow-right" />} + label={<ArrowRightOutlined title="姘村钩浣嶇疆"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.hShadow || '0px'} options={['px']} onChange={this.changeHShadow}/> @@ -672,7 +697,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍨傜洿浣嶇疆" type="arrow-down" />} + label={<ArrowDownOutlined title="鍨傜洿浣嶇疆"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.vShadow || '0px'} options={['px']} onChange={this.changeVShadow}/> @@ -683,7 +708,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + label={<ArrowUpOutlined title="涓婅竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.marginTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginTop')}/> @@ -692,7 +717,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + label={<ArrowDownOutlined title="涓嬭竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.marginBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginBottom')}/> @@ -701,7 +726,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.marginLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginLeft')}/> @@ -710,7 +735,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + label={<ArrowRightOutlined title="鍙宠竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.marginRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'marginRight')}/> @@ -721,7 +746,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + label={<ArrowUpOutlined title="涓婅竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.paddingTop || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingTop')}/> @@ -730,7 +755,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + label={<ArrowDownOutlined title="涓嬭竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.paddingBottom || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingBottom')}/> @@ -739,7 +764,7 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.paddingLeft || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingLeft')}/> @@ -748,28 +773,39 @@ <Col span={24}> <Form.Item colon={false} - label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + label={<ArrowRightOutlined title="鍙宠竟璺�"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <StyleInput defaultValue={card.paddingRight || '0px'} options={['px', 'vh', 'vw', '%']} onChange={(val) => this.changeNormalStyle(val, 'paddingRight')}/> </Form.Item> </Col> </Panel> : null} - {options.includes('float') ? <Panel header="娴姩" key="float"> + {options.includes('float') ? <Panel header="瀵归綈鏂瑰紡" key="float"> <Col span={24}> <Form.Item colon={false} - label={<Icon title="娴姩" type="swap" />} + label={<SwapOutlined title="瀵归綈"/>} labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } > <Radio.Group style={{whiteSpace: 'nowrap'}} defaultValue={card.float || 'left'} onChange={(e) => this.changeNormalStyle(e.target.value, 'float')}> - <Radio value="left">宸︽诞鍔�</Radio> - <Radio value="right">鍙虫诞鍔�</Radio> - <Radio value="none">涓嶆诞鍔�</Radio> + <Radio value="left">宸�</Radio> + <Radio value="center">灞呬腑</Radio> + <Radio value="right">鍙�</Radio> </Radio.Group> </Form.Item> </Col> </Panel> : null} + {options.includes('minHeight') ? <Panel header="鏈�灏忛珮搴�" key="minHeight"> + <Col span={24}> + <Form.Item + colon={false} + label={<ColumnHeightOutlined title="鏈�灏忛珮搴�"/>} + labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } + > + <StyleInput defaultValue={card.minHeight || '28px'} options={['px']} onChange={(val) => this.changeNormalStyle(val, 'minHeight')}/> + </Form.Item> + </Col> + </Panel> : null} </Collapse> : null} </Form> <div style={{textAlign: 'right'}}> diff --git a/src/menu/stylecontroller/index.scss b/src/menu/stylecontroller/index.scss index 43a8e7c..514e0b1 100644 --- a/src/menu/stylecontroller/index.scss +++ b/src/menu/stylecontroller/index.scss @@ -119,29 +119,6 @@ } } } - .fileupload-form-container { - .ant-btn { - height: 28px; - } - .ant-upload-list-item { - .ant-upload-list-item-info { - background: transparent; - color: rgba(255, 255, 255, 0.85); - i { - color: rgba(255, 255, 255, 0.85); - } - } - .anticon-close { - color: rgba(255, 255, 255, 0.85); - } - .anticon-close:hover { - color: rgba(255, 255, 255, 0.85); - } - } - .ant-upload-list-item:hover .ant-upload-list-item-info { - background: transparent; - } - } } } } diff --git a/src/menu/sysinterface/index.jsx b/src/menu/sysinterface/index.jsx index 0837130..bec6e8a 100644 --- a/src/menu/sysinterface/index.jsx +++ b/src/menu/sysinterface/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Modal, Button, Icon, Popconfirm, message } from 'antd' +import { Modal, Button, Popconfirm, message } from 'antd' +import { StopTwoTone, ApiOutlined, CopyOutlined, EditOutlined, CheckCircleTwoTone, DeleteOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import asyncComponent from '@/utils/asyncComponent' @@ -35,13 +36,13 @@ ( <div> 绂佺敤 - <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" /> + <StopTwoTone style={{marginLeft: '5px'}} twoToneColor="#ff4d4f" /> </div> ) : ( <div> 鍚敤 - <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" /> + <CheckCircleTwoTone style={{marginLeft: '5px'}} twoToneColor="#52c41a" /> </div> ) }, @@ -52,14 +53,14 @@ dataIndex: 'operation', render: (text, record) => (<div style={{textAlign: 'center'}}> - <span onClick={() => this.handleEdit(record)} style={{color: '#1890ff', cursor: 'pointer', fontSize: '16px', marginRight: '15px'}}><Icon type="edit" /></span> - <span onClick={() => {this.copy(record)}} style={{color: '#26C281', cursor: 'pointer', fontSize: '16px', marginRight: '15px'}}><Icon type="copy" /></span> + <span onClick={() => this.handleEdit(record)} style={{color: '#1890ff', cursor: 'pointer', fontSize: '16px', marginRight: '15px'}}><EditOutlined /></span> + <span onClick={() => {this.copy(record)}} style={{color: '#26C281', cursor: 'pointer', fontSize: '16px', marginRight: '15px'}}><CopyOutlined /></span> <Popconfirm overlayClassName="popover-confirm" title="纭畾鍒犻櫎锛�" onConfirm={() => this.deleteScript(record) }> - <span style={{color: '#ff4d4f', cursor: 'pointer', fontSize: '16px'}}><Icon type="delete" /></span> + <span style={{color: '#ff4d4f', cursor: 'pointer', fontSize: '16px'}}><DeleteOutlined /></span> </Popconfirm> </div>) } @@ -176,8 +177,8 @@ const { visible, setvisible, columns, interfaces, card } = this.state return ( - <div style={{display: 'inline-block'}}> - <Button className="mk-border-green" icon="api" onClick={this.trigger}>鎺ュ彛绠$悊</Button> + <div className="mk-sys-interface" style={{display: 'inline-block'}}> + <Button className="mk-border-green" onClick={this.trigger}><ApiOutlined /> 鎺ュ彛绠$悊</Button> <Modal title="鎺ュ彛绠$悊" wrapClassName="interface-controller-modal" diff --git a/src/menu/sysinterface/settingform/simplescript/index.jsx b/src/menu/sysinterface/settingform/simplescript/index.jsx index 0e3f3ef..5b6a80f 100644 --- a/src/menu/sysinterface/settingform/simplescript/index.jsx +++ b/src/menu/sysinterface/settingform/simplescript/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Row, Col, Icon, Button, notification, Select, Popconfirm, Typography, Modal, Radio } from 'antd' +import { Form, Row, Col, Button, notification, Select, Popconfirm, Typography, Modal, Radio } from 'antd' +import { StopTwoTone, SwapOutlined, EditOutlined, CheckCircleTwoTone, DeleteOutlined } from '@ant-design/icons' import moment from 'moment' import Utils from '@/utils/utils.js' @@ -66,13 +67,13 @@ ( <div> {this.props.dict['model.status.forbidden']} - <Icon style={{marginLeft: '5px'}} type="stop" theme="twoTone" twoToneColor="#ff4d4f" /> + <StopTwoTone style={{marginLeft: '5px'}} twoToneColor="#ff4d4f" /> </div> ) : ( <div> {this.props.dict['model.status.open']} - <Icon style={{marginLeft: '5px'}} type="check-circle" theme="twoTone" twoToneColor="#52c41a" /> + <CheckCircleTwoTone style={{marginLeft: '5px'}} twoToneColor="#52c41a" /> </div> ) }, @@ -83,14 +84,14 @@ dataIndex: 'operation', render: (text, record) => (<div style={{textAlign: 'center'}}> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span> - <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><Icon type="swap" /></span> + <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><EditOutlined /></span> + <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><SwapOutlined /></span> <Popconfirm overlayClassName="popover-confirm" title={this.props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record) }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> + <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> </Popconfirm> </div>) } diff --git a/src/menu/versions/index.jsx b/src/menu/versions/index.jsx index da697a0..1eb76b9 100644 --- a/src/menu/versions/index.jsx +++ b/src/menu/versions/index.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { Modal, Button, notification } from 'antd' -import { QuestionCircleOutlined } from '@ant-design/icons' +import { QuestionCircleOutlined, CalendarOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -130,7 +130,7 @@ return ( <div style={{display: 'inline-block'}}> - <Button style={{borderColor: '#40a9ff', color: '#40a9ff'}} icon="calendar" onClick={this.trigger}>鐗堟湰绠$悊</Button> + <Button style={{borderColor: '#40a9ff', color: '#40a9ff'}} onClick={this.trigger}><CalendarOutlined /> 鐗堟湰绠$悊</Button> <Modal title="" wrapClassName="version-modal" diff --git a/src/mob/colorsketch/index.jsx b/src/mob/colorsketch/index.jsx index afa975a..c7ea1a8 100644 --- a/src/mob/colorsketch/index.jsx +++ b/src/mob/colorsketch/index.jsx @@ -1,8 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -// import { is, fromJS } from 'immutable' import { SketchPicker } from 'react-color' -import { Popover, Icon } from 'antd' +import { Popover } from 'antd' +import { CloseCircleFilled } from '@ant-design/icons' import './index.scss' @@ -90,7 +90,7 @@ <div className="color-sketch-block-inner" style={ {background: color} }></div> </div> </Popover> - <div className="color-sketch-value">{color}{allowClear && color ? <Icon onClick={this.clear} type="close"/> : null}</div> + <div className="color-sketch-value">{color}{allowClear && color ? <CloseCircleFilled onClick={this.clear}/> : null}</div> </div> ) } diff --git a/src/mob/colorsketch/index.scss b/src/mob/colorsketch/index.scss index ce226de..9aa1fc3 100644 --- a/src/mob/colorsketch/index.scss +++ b/src/mob/colorsketch/index.scss @@ -29,21 +29,25 @@ white-space: nowrap; overflow: visible; - .anticon-close { + .anticon-close-circle { position: relative; right: -10px; - font-size: 10px; + font-size: 12px; padding: 3px; - background: #eeeeee; border-radius: 50%; cursor: pointer; opacity: 0; transition: opacity 0.3s; + background: #fff; + color: #bcbcbc; + } + .anticon-close-circle:hover { + color: #959595; } } } .color-sketch-block:hover { - .anticon-close { + .anticon-close-circle { opacity: 1; } } diff --git a/src/mob/components/formdragelement/card.jsx b/src/mob/components/formdragelement/card.jsx index dddd925..4bfe3dd 100644 --- a/src/mob/components/formdragelement/card.jsx +++ b/src/mob/components/formdragelement/card.jsx @@ -1,9 +1,11 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Button, Popover, Switch, Checkbox, Form, Rate } from 'antd' +import { Button, Popover, Switch, Checkbox, Form, Rate } from 'antd' +import { ScanOutlined, RightOutlined, PlusOutlined, StarFilled, EditOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons' import moment from 'moment' import asyncComponent from '@/utils/asyncComponent' +import MkIcon from '@/components/mk-icon' import './index.scss' const CheckCard = asyncComponent(() => import('@/templates/modalconfig/checkCard')) @@ -53,24 +55,22 @@ } else { selectval = '' } - } else if (card.setAll === 'true') { - selectval = card.emptyText || '绌�' } } let formItem = null if (card.type === 'text' || card.type === 'number') { - formItem = (<div className={'am-list-item ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval ? card.initval : <span style={{color: '#bcbcbc'}}>{card.placeholder || ''}</span> }</div>{card.scan && card.scan !== 'false' ? <div className="am-list-extra"><Icon type="scan" /></div> : null}</div></div>) + formItem = (<div className={'am-list-item ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval ? card.initval : <span style={{color: '#bcbcbc'}}>{card.placeholder || ''}</span> }</div>{card.scan && card.scan !== 'false' ? <div className="am-list-extra"><ScanOutlined /></div> : null}</div></div>) } else if (card.type === 'number') { formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className={'am-input-control ' + card.cursor}>{card.initval}</div></div></div>) } else if (card.type === 'select' || card.type === 'link') { - formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{selectval || '璇烽�夋嫨'}</div><div className="am-list-extra"><Icon type="right" /></div></div></div>) + formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{selectval || '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) } else if (card.type === 'date') { - formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD') : '璇烽�夋嫨'}</div><div className="am-list-extra"><Icon type="right" /></div></div></div>) + formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD') : '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) } else if (card.type === 'datemonth') { - formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'month').format('YYYY-MM') : '璇烽�夋嫨'}</div><div className="am-list-extra"><Icon type="right" /></div></div></div>) + formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'month').format('YYYY-MM') : '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) } else if (card.type === 'datetime') { - formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD HH:mm') : '璇烽�夋嫨'}</div><div className="am-list-extra"><Icon type="right" /></div></div></div>) + formItem = (<div className="am-list-item"><div className="am-list-line"><div className="am-input-label">{card.label}</div><div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD HH:mm') : '璇烽�夋嫨'}</div><div className="am-list-extra"><RightOutlined /></div></div></div>) } else if (card.type === 'textarea') { let height = (card.maxRows || 2) * 25 formItem = (<div className="am-list-item check-card"> @@ -86,7 +86,7 @@ </div>) } else if (card.type === 'rate') { formItem = (<div className={'am-list-item ' + (card.place || '')}><div className="am-list-line"><div className="am-input-label">{card.label}</div><div style={{textAlign: 'left'}} className={'am-input-control ' + (card.place === 'up_down' ? 'left' : '')}> - <Rate value={card.initval || 0} count={card.rateCount || 5} character={card.character ? <Icon type={card.character}/> : <Icon type="star" theme="filled"/>} allowHalf={card.allowHalf === 'true'} /> + <Rate value={card.initval || 0} count={card.rateCount || 5} character={card.character ? <MkIcon type={card.character}/> : <StarFilled />} allowHalf={card.allowHalf === 'true'} /> </div></div></div>) } else if (card.type === 'fileupload') { formItem = ( @@ -94,9 +94,7 @@ <div className="am-list-line"> <div className="am-input-label">{card.label}</div> <div className="am-input-control" style={{textAlign: 'left'}}> - {/* {card.fileType !== 'picture-card' ? <Icon type="upload" style={{position: 'absolute', right: '10px', top: '10px'}} /> : null} */} - {/* {card.fileType === 'picture-card' ? <Button style={{width: '100px', marginBottom: '10px', height: '100px', fontSize: '50px', color: '#d9d9d9'}}><Icon type="plus" /></Button> : null} */} - <Button style={{width: '100px', marginBottom: '10px', height: '100px', fontSize: '50px', color: '#d9d9d9'}}><Icon type="plus" /></Button> + <Button style={{width: '100px', marginBottom: '10px', height: '100px', fontSize: '50px', color: '#d9d9d9'}}><PlusOutlined /></Button> </div> </div> </div> @@ -184,19 +182,21 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" type="edit" onClick={edit} /> - <Icon className="copy" type="copy" onClick={copy} /> - <Icon className="close" type="close" onClick={close} /> + <EditOutlined className="edit" onClick={edit} /> + <CopyOutlined className="copy" onClick={copy} /> + <CloseOutlined className="close" onClick={close} /> </div> } trigger="hover"> <div className="page-card" style={{ opacity: opacity}}> - <div ref={node => drag(drop(node))} style={{ border: '0.5px solid transparent'}}> + <div ref={node => drag(drop(node))} style={{ border: '0.5px solid transparent'}} onDoubleClick={edit}> {card.type === 'split' ? formItem : <Form.Item style={{marginTop: card.marginTop || 0, marginBottom: card.marginBottom || 0}} className={'ant-form-item' + (card.required === 'true' ? ' required' : '') + (card.splitline === 'false' ? ' no-boder' : '')} > {formItem} - {showField ? <div className="field-name">{card.field}{card.hidden === 'true' ? '(闅愯棌)' : ''}</div> : ''} + {showField ? <div className="field-name" style={card.writein === 'false' ? {color: 'orange'} : {}}> + {card.field}{card.hidden === 'true' ? '锛堥殣钘忥級' : ''}{card.readonly === 'true' ? '锛堝彧璇伙級' : ''} + </div> : ''} </Form.Item>} </div> </div> diff --git a/src/mob/components/formdragelement/index.scss b/src/mob/components/formdragelement/index.scss index b8673a5..4438434 100644 --- a/src/mob/components/formdragelement/index.scss +++ b/src/mob/components/formdragelement/index.scss @@ -60,7 +60,7 @@ width: 15px; height: 15px; margin-left: 8px; - i { + .anticon { vertical-align: top; } } @@ -93,6 +93,9 @@ .check-card-edit-box { margin-top: 0!important; } + .am-input-label { + width: auto; + } } } .am-list-item.hint { diff --git a/src/mob/components/menubar/normal-menubar/index.jsx b/src/mob/components/menubar/normal-menubar/index.jsx index 43d1e85..93d9aff 100644 --- a/src/mob/components/menubar/normal-menubar/index.jsx +++ b/src/mob/components/menubar/normal-menubar/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Modal } from 'antd' +import { Popover, Modal } from 'antd' +import { ToolOutlined, PlusOutlined, SettingOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import asyncIconComponent from '@/utils/asyncIconComponent' @@ -9,8 +10,6 @@ import MKEmitter from '@/utils/events.js' import Utils from '@/utils/utils.js' import getWrapForm from './options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const NormalForm = asyncIconComponent(() => import('@/components/normalform')) @@ -31,7 +30,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, back: false } @@ -273,20 +271,20 @@ {card.wrap.title ? <NormalHeader config={card} updateComponent={this.updateComponent}/> : null} <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="娣诲姞鑿滃崟" onClick={this.addMenu} type="plus" /> + <PlusOutlined className="plus" title="娣诲姞鑿滃崟" onClick={this.addMenu}/> <NormalForm title="鑿滃崟璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="menubar" card={card}/> <PasteComponent config={card} options={['menucell']} updateConfig={this.updateComponent} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} /> <UserComponent config={card}/> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> {card.wrap.datatype === 'dynamic' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} - {card.wrap.datatype !== 'dynamic' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} + {card.wrap.datatype !== 'dynamic' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> {card.subMenus.map((menu, index) => (<MenuComponent key={menu.uuid} offset={!index ? offset : 0} cards={card} card={menu} move={this.move} updateElement={this.updateCard} deleteElement={this.deleteCard}/>))} </div> diff --git a/src/mob/components/menubar/normal-menubar/menucomponent/index.jsx b/src/mob/components/menubar/normal-menubar/menucomponent/index.jsx index 4999373..2fe6362 100644 --- a/src/mob/components/menubar/normal-menubar/menucomponent/index.jsx +++ b/src/mob/components/menubar/normal-menubar/menucomponent/index.jsx @@ -1,12 +1,14 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Popover, Icon, Col } from 'antd' +import { Popover, Col } from 'antd' +import { SwapOutlined, ArrowLeftOutlined, ArrowRightOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined } from '@ant-design/icons' import asyncIconComponent from '@/utils/asyncIconComponent' import Utils from '@/utils/utils.js' import getSettingForm from './options' import { resetStyle } from '@/utils/utils-custom.js' +import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import './index.scss' @@ -127,24 +129,24 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="鑿滃崟缂栬緫" width={900} update={this.updateSetting} getForms={this.getSettingForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="menucell" card={card}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="plus" title="宸︾Щ" type="arrow-left" onClick={() => this.props.move(card, 'left')} /> - <Icon className="close" title="鍙崇Щ" type="arrow-right" onClick={() => this.props.move(card, 'right')} /> + <ArrowLeftOutlined className="plus" title="宸︾Щ" onClick={() => this.props.move(card, 'left')} /> + <ArrowRightOutlined className="close" title="鍙崇Щ" onClick={() => this.props.move(card, 'right')} /> </div> } trigger="hover" getPopupContainer={() => document.getElementById(card.uuid + 'swap')}> - <Icon type="swap" id={card.uuid + 'swap'}/> + <SwapOutlined id={card.uuid + 'swap'}/> </Popover> - <Icon className="close" title="鍒犻櫎鑿滃崟" type="delete" onClick={() => this.props.deleteElement(card)} /> + <DeleteOutlined className="close" title="鍒犻櫎鑿滃崟" onClick={() => this.props.deleteElement(card)} /> </div> } trigger="hover"> <div className="menu-item" onDoubleClick={() => this.changeMenu()} style={_style}> {card.setting.sign === 'icon' ? <div className="menu-sign"> - <Icon style={{ + <MkIcon style={{ fontSize: card.setting.iconFont || 20, padding: card.setting.padding, background: card.setting.background, diff --git a/src/mob/components/menubar/normal-menubar/menucomponent/options.jsx b/src/mob/components/menubar/normal-menubar/menucomponent/options.jsx index 00a1b26..fd5ce24 100644 --- a/src/mob/components/menubar/normal-menubar/menucomponent/options.jsx +++ b/src/mob/components/menubar/normal-menubar/menucomponent/options.jsx @@ -41,7 +41,7 @@ required: true }, { - type: 'select', + type: 'radio', field: 'type', label: '鑿滃崟灞炴��', initval: setting.type || 'menu', @@ -49,11 +49,9 @@ options: [ {value: 'menu', label: '鑿滃崟'}, {value: 'linkmenu', label: '鍏宠仈鑿滃崟'}, - {value: 'sysmenu', label: '绯荤粺椤�'}, {value: 'link', label: '閾炬帴'}, ], controlFields: [ - {field: 'sysmenu', values: ['sysmenu']}, {field: 'copyMenuId', values: ['menu']}, {field: 'linkMenuId', values: ['linkmenu']}, {field: 'linkurl', values: ['link']}, @@ -61,20 +59,10 @@ }, { type: 'select', - field: 'sysmenu', - label: '绯荤粺椤甸潰', - initval: setting.sysmenu || '', - required: true, - options: [ - {value: 'AIService', label: '鏅鸿兘瀹㈡湇'}, - ] - }, - { - type: 'select', field: 'copyMenuId', label: '澶嶅埗鑿滃崟', initval: setting.copyMenuId || '', - tooltip: '澶嶅埗鑿滃崟浠呭湪褰撳墠鑿滃崟鍒濆鍖栨椂鏈夋晥銆�', + tooltip: '澶嶅埗鑿滃崟浠呭湪褰撳墠鑿滃崟鍒涘缓鏃舵湁鏁堛��', required: false, options: menulist }, @@ -84,7 +72,11 @@ label: '鍏宠仈鑿滃崟', initval: setting.linkMenuId || '', required: true, - options: menulist + options: [ + ...menulist, + // {value: 'IM', label: '鍗虫椂閫氫俊锛堢郴缁熼〉锛�'}, + {value: 'AIService', label: '鏅鸿兘瀹㈡湇锛堢郴缁熼〉锛�'} + ] }, { type: 'textarea', diff --git a/src/mob/components/navbar/normal-navbar/index.jsx b/src/mob/components/navbar/normal-navbar/index.jsx index 21cf498..680cd0a 100644 --- a/src/mob/components/navbar/normal-navbar/index.jsx +++ b/src/mob/components/navbar/normal-navbar/index.jsx @@ -1,18 +1,16 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { SettingOutlined, EditOutlined, ToolOutlined, DeleteOutlined, FontColorsOutlined, PlusOutlined } from '@ant-design/icons' import asyncIconComponent from '@/utils/asyncIconComponent' - import MKEmitter from '@/utils/events.js' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import getWrapForm from './options' import './index.scss' const NormalForm = asyncIconComponent(() => import('@/components/normalform')) -const MenuComponent = asyncIconComponent(() => import('./menusetting')) +const MenuComponent = asyncIconComponent(() => import('./menus')) const SettingComponent = asyncIconComponent(() => import('@/menu/datasource')) class NormalNavbar extends Component { @@ -23,7 +21,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, back: false } @@ -120,26 +117,6 @@ MKEmitter.emit('changeStyle', [card.uuid], ['font', 'background', 'border', 'padding', 'shadow'], card.style) } - clickComponent = (e) => { - if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { - e.stopPropagation() - MKEmitter.emit('clickComponent', this.state.card) - } - } - - changeMenu = (menu) => { - if (menu.property === 'link') { - window.open(menu.link) - } else { - MKEmitter.emit('changeEditMenu', { - MenuID: menu.property === 'linkmenu' ? menu.linkMenuId : menu.MenuID, - copyMenuId: menu.property === 'menu' ? menu.copyMenuId : '', - MenuNo: menu.MenuNo, - MenuName: menu.name, - }) - } - } - getWrapForms = () => { const { wrap } = this.state.card @@ -157,36 +134,22 @@ _style.height = card.wrap.height return ( - <div className="normal-navbar-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}> + <div className="normal-navbar-edit-box" style={_style} id={card.uuid}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <MenuComponent config={card} updateConfig={this.updateComponent} /> + <PlusOutlined className="plus" title="娣诲姞鑿滃崟" onClick={() => MKEmitter.emit('addmobmenu')}/> <NormalForm title="鑿滃崟鏍忚缃�" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} /> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> {card.wrap.datatype !== 'static' ? <SettingComponent config={card} updateConfig={this.updateComponent} /> : null} - {card.wrap.datatype === 'static' ? <Icon style={{color: '#eeeeee', cursor: 'not-allowed'}} type="setting"/> : null} + {card.wrap.datatype === 'static' ? <SettingOutlined style={{color: '#eeeeee', cursor: 'not-allowed'}}/> : null} </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> - <div className="menu"> - {card.menus.map(menu => { - return ( - <div key={menu.MenuID} className="am-tab-bar-tab" onDoubleClick={() => this.changeMenu(menu)}> - {menu.icon ? <div className="am-tab-bar-tab-icon"> - <span className="am-badge am-tab-bar-tab-badge tab-badge"> - <Icon type={menu.icon} /> - {menu.tip ? <sup className="am-badge-text"></sup> : null} - </span> - </div> : null} - <p className="am-tab-bar-tab-title">{menu.name}</p> - </div> - ) - })} - </div> + <MenuComponent menus={card.menus} columns={card.columns} updateConfig={(menus) => this.updateComponent({...card, menus: menus})}/> </div> ) } diff --git a/src/mob/components/navbar/normal-navbar/index.scss b/src/mob/components/navbar/normal-navbar/index.scss index cebf6d4..592454e 100644 --- a/src/mob/components/navbar/normal-navbar/index.scss +++ b/src/mob/components/navbar/normal-navbar/index.scss @@ -24,6 +24,10 @@ .anticon { font-size: 150%; } + .am-tab-bar-tab-title:first-child { + font-size: 14px; + line-height: 40px; + } .am-badge-text { position: absolute; top: -2px; @@ -48,54 +52,6 @@ cursor: pointer; padding: 5px; background: rgba(255, 255, 255, 0.55); - } - - .card-item { - overflow: hidden; - position: relative; - background-color: #ffffff; - background-position: center center; - background-repeat: no-repeat; - background-size: cover; - min-height: 20px; - } - - .card-item:hover { - box-shadow: 0px 0px 2px #1890ff; - } - - .model-menu-card-cell-list .card-detail-row > .anticon-plus { - position: absolute; - right: -30px; - font-size: 16px; - } - .model-menu-action-list { - line-height: 40px; - .ant-row > .anticon-plus { - position: absolute; - right: -30px; - font-size: 16px; - } - } - .card-add-button { - text-align: right; - clear: left; - .anticon-plus { - font-size: 20px; - color: #26C281; - padding: 5px; - margin-right: 10px; - } - } - .ant-pagination { - float: right; - margin: 10px; - } - - .model-menu-action-list { - .page-card { - line-height: 55px; - } } } .normal-navbar-edit-box::after { diff --git a/src/mob/components/navbar/normal-navbar/menus/drags/card.jsx b/src/mob/components/navbar/normal-navbar/menus/drags/card.jsx new file mode 100644 index 0000000..11e395f --- /dev/null +++ b/src/mob/components/navbar/normal-navbar/menus/drags/card.jsx @@ -0,0 +1,64 @@ +import React from 'react' +import { useDrag, useDrop } from 'react-dnd' +import { Popover } from 'antd' +import { EditOutlined, CloseOutlined } from '@ant-design/icons' + +import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' +import './index.scss' + +const Card = ({ id, card, moveCard, findCard, editCard, delCard }) => { + const originalIndex = findCard(id).index + const [{ isDragging }, drag] = useDrag({ + item: { type: 'mobmenu', id, originalIndex }, + collect: monitor => ({ + isDragging: monitor.isDragging(), + }), + }) + const [, drop] = useDrop({ + accept: 'mobmenu', + canDrop: () => true, + drop({ id: draggedId }) { + if (!draggedId || draggedId === id) return + + const { index: originIndex } = findCard(draggedId) + if (originIndex === -1) return + + const { index: overIndex } = findCard(id) + moveCard(draggedId, overIndex) + }, + }) + + const doubleClickCard = () => { + if (card.property === 'link') { + window.open(card.link) + } else { + MKEmitter.emit('changeEditMenu', { + MenuID: card.property === 'linkmenu' ? card.linkMenuId : card.MenuID, + copyMenuId: card.property === 'menu' ? card.copyMenuId : '', + MenuNo: card.MenuNo, + MenuName: card.name + }) + } + } + + return ( + <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ + <div className="mk-popover-control" onDoubleClick={(e) => e.stopPropagation()}> + <EditOutlined className="edit" title="缂栬緫" onClick={() => editCard(id)} /> + <CloseOutlined className="close" title="鍒犻櫎" onClick={() => delCard(id)} /> + </div> + } trigger="hover"> + <div ref={node => drag(drop(node))} className="am-tab-bar-tab" style={{opacity: isDragging ? 0 : 1}} onDoubleClick={doubleClickCard}> + {card.icon ? <div className="am-tab-bar-tab-icon"> + <span className="am-badge am-tab-bar-tab-badge tab-badge"> + <MkIcon type={card.icon} /> + {card.tip ? <sup className="am-badge-text"></sup> : null} + </span> + </div> : null} + <p className="am-tab-bar-tab-title">{card.name}</p> + </div> + </Popover> + ) +} +export default Card diff --git a/src/mob/components/navbar/normal-navbar/menus/drags/index.jsx b/src/mob/components/navbar/normal-navbar/menus/drags/index.jsx new file mode 100644 index 0000000..fbb83ea --- /dev/null +++ b/src/mob/components/navbar/normal-navbar/menus/drags/index.jsx @@ -0,0 +1,56 @@ +import React, { useState } from 'react' +import { is, fromJS } from 'immutable' +import update from 'immutability-helper' + +import Card from './card' +// import './index.scss' + +const Container = ({ list, handleList, handleMenu, deleteMenu }) => { + const [cards, setCards] = useState(list) + const moveCard = (id, atIndex) => { + const { card, index } = findCard(id) + const _cards = update(cards, { $splice: [[index, 1], [atIndex, 0, card]] }) + handleList(_cards) + } + + if (!is(fromJS(cards), fromJS(list))) { + setCards(list) + } + + const findCard = id => { + const card = cards.filter(c => c.MenuID === id)[0] + return { + card, + index: cards.indexOf(card), + } + } + + const editCard = id => { + const { card } = findCard(id) + handleMenu(card) + } + + const delCard = id => { + const { card } = findCard(id) + deleteMenu(card) + } + + return ( + <div className="menu"> + {cards.map(card => { + return ( + <Card + id={card.MenuID} + key={card.MenuID} + card={card} + moveCard={moveCard} + editCard={editCard} + delCard={delCard} + findCard={findCard} + /> + ) + })} + </div> + ) +} +export default Container diff --git a/src/menu/baseScript/settingform/index.scss b/src/mob/components/navbar/normal-navbar/menus/drags/index.scss similarity index 100% copy from src/menu/baseScript/settingform/index.scss copy to src/mob/components/navbar/normal-navbar/menus/drags/index.scss diff --git a/src/mob/components/navbar/normal-navbar/menus/index.jsx b/src/mob/components/navbar/normal-navbar/menus/index.jsx new file mode 100644 index 0000000..43e0e28 --- /dev/null +++ b/src/mob/components/navbar/normal-navbar/menus/index.jsx @@ -0,0 +1,196 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' +import { Modal } from 'antd' + +import MKEmitter from '@/utils/events.js' +import Utils from '@/utils/utils.js' +import ElementForm from './menuform' +import DragElement from './drags' +// import './index.scss' + +const { confirm } = Modal + +class MenusComponent extends Component { + static propTpyes = { + menus: PropTypes.array, // 鑿滃崟鍒楄〃 + columns: PropTypes.array, // 瀛楁闆� + updateConfig: PropTypes.func // 鑿滃崟閰嶇疆鏇存柊 + } + + state = { + menus: [], + columns: [], + visible: false + } + + /** + * @description 鍒濆鍖� + */ + UNSAFE_componentWillMount () { + const { menus } = this.props + + this.setState({ + menus: fromJS(menus).toJS() + }) + } + + componentDidMount () { + MKEmitter.addListener('addmobmenu', this.addmobmenu) + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.state), fromJS(nextState)) + } + + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊锛屾竻闄ゅ揩鎹烽敭璁剧疆 + */ + componentWillUnmount () { + this.setState = () => { + return + } + MKEmitter.removeListener('addmobmenu', this.addmobmenu) + } + + addmobmenu = () => { + let _menu = { + name: '鑿滃崟', + property: 'menu' + } + + this.setState({editMenu: _menu, visible: true}) + } + + /** + * @description 椤哄簭璋冩暣 + */ + handleList = (list) => { + this.setState({menus: list}, () => { + this.props.updateConfig(list) + }) + } + + /** + * @description 鍏冪礌缂栬緫 + */ + handleElement = (menu) => { + this.setState({ + visible: true, + editMenu: menu + }) + } + + /** + * @description 鍙栨秷淇濆瓨锛屽鏋滃厓绱犱负鏂版坊鍏冪礌锛屽垯浠庡簭鍒椾腑鍒犻櫎 + */ + editModalCancel = () => { + this.setState({ + editMenu: null, + visible: false + }) + } + + /** + * @description 鍏冪礌淇敼鍚庢彁浜や繚瀛� + */ + handleSubmit = () => { + const { menus, editMenu } = this.state + + this.menuFormRef.handleConfirm().then(res => { + let _menus = fromJS(menus).toJS() + + if (editMenu.MenuID) { + res.MenuID = editMenu.MenuID + + _menus = _menus.map(item => { + if (item.MenuID === res.MenuID) return res + return item + }) + } else { + res.MenuID = Utils.getuuid() + + _menus.push(res) + } + + if (editMenu.MenuID && editMenu.property === 'menu' && res.property !== 'menu') { + const _this = this + confirm({ + content: '鑿滃崟灏嗚閲嶇疆锛岀‘瀹氫慨鏀瑰悧锛�', + onOk() { + _menus = _menus.map(item => { + if (item.MenuID === res.MenuID) { + item.MenuID = Utils.getuuid() + } + return item + }) + _this.setState({menus: _menus, editMenu: null, visible: false}, () => { + _this.props.updateConfig(_menus) + }) + }, + onCancel() {} + }) + } else { + this.setState({menus: _menus, editMenu: null, visible: false}, () => { + this.props.updateConfig(_menus) + }) + } + }) + } + + /** + * @description 鎸夐挳鍒犻櫎 + */ + deleteElement = (card) => { + const { menus } = this.state + let _this = this + + confirm({ + content: `纭畾鍒犻櫎銆�${card.name}銆嬪悧锛焋, + onOk() { + let _menus = menus.filter(item => item.MenuID !== card.MenuID) + + _this.setState({ + menus: _menus + }, () => { + _this.props.updateConfig(_menus) + }) + }, + onCancel() {} + }) + } + + render() { + const { columns } = this.props + const { menus, visible, editMenu } = this.state + + return ( + <> + <DragElement + list={menus} + handleList={this.handleList} + handleMenu={this.handleElement} + deleteMenu={this.deleteElement} + /> + <Modal + title={editMenu && !editMenu.MenuID ? '娣诲姞鑿滃崟' : '缂栬緫鑿滃崟'} + visible={visible} + width={800} + maskClosable={false} + onCancel={this.editModalCancel} + onOk={this.handleSubmit} + destroyOnClose + > + <ElementForm + menu={editMenu} + cols={columns} + inputSubmit={this.handleSubmit} + wrappedComponentRef={(inst) => this.menuFormRef = inst} + /> + </Modal> + </> + ) + } +} + +export default MenusComponent \ No newline at end of file diff --git a/src/menu/components/card/cardcomponent/menus-wrap/menus/index.scss b/src/mob/components/navbar/normal-navbar/menus/index.scss similarity index 100% rename from src/menu/components/card/cardcomponent/menus-wrap/menus/index.scss rename to src/mob/components/navbar/normal-navbar/menus/index.scss diff --git a/src/mob/components/navbar/normal-navbar/menusetting/menuform/index.jsx b/src/mob/components/navbar/normal-navbar/menus/menuform/index.jsx similarity index 89% rename from src/mob/components/navbar/normal-navbar/menusetting/menuform/index.jsx rename to src/mob/components/navbar/normal-navbar/menus/menuform/index.jsx index fd4048a..441de0a 100644 --- a/src/mob/components/navbar/normal-navbar/menusetting/menuform/index.jsx +++ b/src/mob/components/navbar/normal-navbar/menus/menuform/index.jsx @@ -7,7 +7,7 @@ import './index.scss' const { TextArea } = Input -const MkIcon = asyncComponent(() => import('@/components/mkIcon')) +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) class SettingForm extends Component { static propTpyes = { @@ -122,7 +122,7 @@ {getFieldDecorator('icon', { initialValue: menu.icon || '' })( - <MkIcon allowClear /> + <MkEditIcon options={['normal', 'data', 'direction', 'edit', 'hint']} allowClear /> )} </Form.Item> </Col> @@ -150,7 +150,6 @@ <Radio.Group onChange={this.changeProperty} className="over"> <Radio value="menu">鑿滃崟</Radio> <Radio value="linkmenu">鍏宠仈鑿滃崟</Radio> - <Radio value="sysmenu">绯荤粺椤�</Radio> <Radio value="link">閾炬帴</Radio> </Radio.Group> )} @@ -168,21 +167,6 @@ )} </Form.Item> </Col> - {property === 'sysmenu' ? <Col span={12}> - <Form.Item label="绯荤粺椤甸潰"> - {getFieldDecorator('sysmenu', { - initialValue: menu.sysmenu || '', - rules: [{ - required: true, - message: '璇烽�夋嫨绯荤粺椤甸潰!' - }] - })( - <Select> - <Select.Option value="AIService">鏅鸿兘瀹㈡湇</Select.Option> - </Select> - )} - </Form.Item> - </Col> : null} {property === 'link' ? <Col span={24}> <Form.Item label="閾炬帴鍦板潃" className="textarea"> {getFieldDecorator('link', { @@ -210,13 +194,15 @@ })( <Select> {appMenus.map(item => (<Select.Option key={item.MenuID} value={item.MenuID}>{item.MenuName}</Select.Option>))} + {/* <Select.Option key="IM" value="IM">鍗虫椂閫氫俊锛堢郴缁熼〉锛�</Select.Option> */} + <Select.Option key="AIService" value="AIService">鏅鸿兘瀹㈡湇锛堢郴缁熼〉锛�</Select.Option> </Select> )} </Form.Item> </Col> : null} {property === 'menu' ? <Col span={12}> <Form.Item label={ - <Tooltip placement="topLeft" title="澶嶅埗鑿滃崟浠呭湪褰撳墠鑿滃崟涓嶅瓨鍦ㄦ椂鏈夋晥銆�"> + <Tooltip placement="topLeft" title="澶嶅埗鑿滃崟浠呭湪鑿滃崟鍒涘缓鏃舵湁鏁堛��"> <QuestionCircleOutlined className="mk-form-tip" /> 澶嶅埗鑿滃崟 </Tooltip> diff --git a/src/mob/components/navbar/normal-navbar/menusetting/menuform/index.scss b/src/mob/components/navbar/normal-navbar/menus/menuform/index.scss similarity index 100% rename from src/mob/components/navbar/normal-navbar/menusetting/menuform/index.scss rename to src/mob/components/navbar/normal-navbar/menus/menuform/index.scss diff --git a/src/mob/components/navbar/normal-navbar/menusetting/index.jsx b/src/mob/components/navbar/normal-navbar/menusetting/index.jsx deleted file mode 100644 index 633fff4..0000000 --- a/src/mob/components/navbar/normal-navbar/menusetting/index.jsx +++ /dev/null @@ -1,63 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import { is, fromJS } from 'immutable' -import { Icon, Modal } from 'antd' - -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' -import MenuTable from './menutable' -import './index.scss' - -class DataSource extends Component { - static propTpyes = { - config: PropTypes.any, - updateConfig: PropTypes.func - } - - state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, - visible: false - } - - shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) - } - - verifySubmit = () => { - const { config } = this.props - let menus = this.mTable.state.data || [] - - this.props.updateConfig({...config, menus}) - this.setState({visible: false}) - } - - render () { - const { config } = this.props - const { visible, dict } = this.state - - return ( - <div className="model-menu-setting-wrap"> - <Icon type="menu" title="鑿滃崟" onClick={() => this.setState({ visible: true })}/> - <Modal - wrapClassName="popview-modal" - title="鑿滃崟缂栬緫" - visible={visible} - width={950} - maskClosable={false} - okText={dict['model.submit']} - onOk={this.verifySubmit} - onCancel={() => { this.setState({ visible: false }) }} - destroyOnClose - > - <MenuTable - menus={config.menus} - cols={config.columns} - ref={(ref) => { this.mTable = ref }} - /> - </Modal> - </div> - ) - } -} - -export default DataSource \ No newline at end of file diff --git a/src/mob/components/navbar/normal-navbar/menusetting/index.scss b/src/mob/components/navbar/normal-navbar/menusetting/index.scss deleted file mode 100644 index 3a906d8..0000000 --- a/src/mob/components/navbar/normal-navbar/menusetting/index.scss +++ /dev/null @@ -1,11 +0,0 @@ -.model-menu-setting-wrap { - display: inline-block; - - >.anticon-menu { - color: purple; - } - - >.anticon-edit { - color: #1890ff; - } -} \ No newline at end of file diff --git a/src/mob/components/navbar/normal-navbar/menusetting/menutable/index.jsx b/src/mob/components/navbar/normal-navbar/menusetting/menutable/index.jsx deleted file mode 100644 index 25a5ee3..0000000 --- a/src/mob/components/navbar/normal-navbar/menusetting/menutable/index.jsx +++ /dev/null @@ -1,198 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import { is, fromJS } from 'immutable' -import { Table, Button, Modal, Icon } from 'antd' - -import MenuForm from '../menuform' -import Utils from '@/utils/utils.js' -// import MKEmitter from '@/utils/events.js' -import './index.scss' - -const { confirm } = Modal - -class MenuTable extends Component { - static propTpyes = { - menus: PropTypes.array, // 鍗$墖琛屼俊鎭� - cols: PropTypes.array, // 瀛楁闆� - } - - state = { - data: [], - editMenu: null, - columns: [ - { title: '鑿滃崟鍚嶇О', dataIndex: 'name', key: 'name' }, - { title: '鑿滃崟鍙傛暟', dataIndex: 'MenuNo', key: 'MenuNo' }, - { title: '鑿滃崟灞炴��', dataIndex: 'property', key: 'property', render: text => { - const trans = {menu: '鑿滃崟', link: '閾炬帴', linkmenu: '鍏宠仈鑿滃崟', sysmenu: '绯荤粺椤�'} - - return trans[text] - }}, - { title: '鍥炬爣', dataIndex: 'icon', key: 'icon', render: (text, record) => { - return text ? <Icon type={text} /> : '' - }}, - { title: '鏄惁闅愯棌', dataIndex: 'hidden', key: 'hidden', render: (text, record) => { - const trans = {'true': '鏄�', 'false': '鍚�'} - return trans[text] || '鍚�' - }}, - { title: '鎿嶄綔', key: 'operation', align: 'center', width: '190px', render: (text, record) => - (<div> - <Button type="link" style={{padding: '0 5px', marginRight: '5px'}} onClick={() => this.editMenu(record)}>缂栬緫</Button> - <Button type="link" style={{color: '#ff4d4f', padding: '0 5px', marginRight: '5px'}} onClick={() => this.delMenu(record)}>鍒犻櫎</Button> - <Icon type="arrow-up" style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/> - <Icon type="arrow-down" style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/> - </div>) - } - ] - } - - UNSAFE_componentWillMount () { - const { menus } = this.props - - this.setState({data: fromJS(menus).toJS()}) - } - - shouldComponentUpdate (nextProps, nextState) { - return !is(fromJS(this.state), fromJS(nextState)) - } - - moveUp = (record) => { - let data = fromJS(this.state.data).toJS() - - let dragIndex = data.findIndex(c => c.MenuID === record.MenuID) - let hoverIndex = dragIndex - 1 - - if (hoverIndex === -1) return - - data.splice(hoverIndex, 0, ...data.splice(dragIndex, 1)) - this.setState({data}) - } - - moveDown = (record) => { - let data = fromJS(this.state.data).toJS() - - let dragIndex = data.findIndex(c => c.MenuID === record.MenuID) - let hoverIndex = dragIndex + 1 - - if (hoverIndex === data.length) return - - data.splice(hoverIndex, 0, ...data.splice(dragIndex, 1)) - this.setState({data}) - } - - delMenu = (record) => { - const { data } = this.state - const _this = this - - confirm({ - title: '纭畾鍒犻櫎鍚楋紵', - content: '', - onOk() { - _this.setState({data: data.filter(item => item.MenuID !== record.MenuID)}) - }, - onCancel() {} - }) - } - - editMenu = (record) => { - this.setState({editMenu: record, visible: true}) - } - - plusMenu = () => { - let _menu = { - name: '鑿滃崟', - property: 'menu' - } - - this.setState({editMenu: _menu, visible: true}) - } - - menuSubmit = () => { - const { editMenu, data } = this.state - - this.menuRef.handleConfirm().then(res => { - let _menu = {...editMenu, ...res} - let _data = fromJS(data).toJS() - - if (!_menu.MenuID) { - _menu.MenuID = Utils.getuuid() - _data.push(_menu) - } else { - _data = _data.map(item => { - if (item.MenuID === _menu.MenuID) { - return _menu - } else { - return item - } - }) - } - - if (editMenu.MenuID && editMenu.property === 'menu' && _menu.property !== 'menu') { - const _this = this - confirm({ - content: '鑿滃崟灏嗚閲嶇疆锛岀‘瀹氫慨鏀瑰悧锛�', - onOk() { - _data = _data.map(item => { - if (item.MenuID === _menu.MenuID) { - item.MenuID = Utils.getuuid() - } - return item - }) - _this.setState({data: _data, editMenu: null, visible: false}) - }, - onCancel() {} - }) - } else { - this.setState({data: _data, editMenu: null, visible: false}) - } - }) - } - - menuUpdate = (res) => { - const { data } = this.state - - this.setState({ - data: data.map(item => { - if (item.MenuID === res.MenuID) { - return res - } else { - return item - } - }) - }) - } - - render() { - const { cols } = this.props - const { columns, data, visible, editMenu } = this.state - - return ( - <div className="menu-control-wrap"> - <Button className="menu-plus mk-green" onClick={this.plusMenu}>娣诲姞</Button> - <Table - rowKey="MenuID" - columns={columns} - dataSource={data} - pagination={false} - /> - <Modal - title="缂栬緫" - visible={visible} - width={900} - maskClosable={false} - onOk={this.menuSubmit} - onCancel={() => { this.setState({ visible: false }) }} - destroyOnClose - > - <MenuForm - menu={editMenu} - cols={cols} - inputSubmit={this.menuSubmit} - wrappedComponentRef={(inst) => this.menuRef = inst} - /> - </Modal> - </div> - ) - } -} - -export default MenuTable \ No newline at end of file diff --git a/src/mob/components/navbar/normal-navbar/menusetting/menutable/index.scss b/src/mob/components/navbar/normal-navbar/menusetting/menutable/index.scss deleted file mode 100644 index 725a1d5..0000000 --- a/src/mob/components/navbar/normal-navbar/menusetting/menutable/index.scss +++ /dev/null @@ -1,23 +0,0 @@ -.menu-control-wrap { - position: relative; - - .menu-plus { - float: right; - position: relative; - z-index: 1; - margin-bottom: 5px; - } - .ant-empty { - margin: 5px 0; - } - thead tr { - background: #fbfbfb; - } - tbody > tr { - background: #ffffff; - } - - .ant-table-body { - margin: 0!important; - } -} \ No newline at end of file diff --git a/src/mob/components/search/single-search/index.jsx b/src/mob/components/search/single-search/index.jsx new file mode 100644 index 0000000..6f11afb --- /dev/null +++ b/src/mob/components/search/single-search/index.jsx @@ -0,0 +1,161 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' +import { Popover, Input, Button } from 'antd' +import { ToolOutlined, ScanOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons' + +import zhCN from '@/locales/zh-CN/model.js' +import enUS from '@/locales/en-US/model.js' +import { resetStyle } from '@/utils/utils-custom.js' +import asyncIconComponent from '@/utils/asyncIconComponent' +import getWrapForm from './options' +import MKEmitter from '@/utils/events.js' +import './index.scss' + +const NormalForm = asyncIconComponent(() => import('@/components/normalform')) + +class SingleSearchComponent extends Component { + static propTpyes = { + card: PropTypes.object, + updateConfig: PropTypes.func, + deletecomponent: PropTypes.func + } + + state = { + dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, + sqlVerifing: false, // sql楠岃瘉涓� + visible: false, // 妯℃�佹鎺у埗 + showField: false, + editcard: null // 缂栬緫涓厓绱� + } + + /** + * @description 鎼滅储鏉′欢鍒濆鍖� + */ + UNSAFE_componentWillMount () { + const { card } = this.props + + if (card.isNew) { + let _card = { + uuid: card.uuid, + type: card.type, + floor: card.floor, + tabId: card.tabId || '', + parentId: card.parentId || '', + width: 24, + name: card.name, + subtype: card.subtype, + wrap: { name: card.name, width: 24, label: '鎼滅储', field: '', show: 'text' }, + style: { + marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px', + paddingLeft: '10px', paddingRight: '10px', paddingTop: '10px', paddingBottom: '10px', + } + } + this.setState({ + card: _card + }) + this.props.updateConfig(_card) + } else { + this.setState({ + card: fromJS(card).toJS() + }) + } + } + + componentDidMount () { + MKEmitter.addListener('submitStyle', this.getStyle) + } + + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 + */ + componentWillUnmount () { + this.setState = () => { + return + } + MKEmitter.removeListener('submitStyle', this.getStyle) + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.state), fromJS(nextState)) + } + + getStyle = (comIds, style) => { + const { card } = this.state + + if (comIds.length !== 1 || comIds[0] !== card.uuid) return + + let _card = {...card, style} + + this.setState({ + card: _card + }) + + this.props.updateConfig(_card) + } + + changeStyle = () => { + const { card } = this.state + + MKEmitter.emit('changeStyle', [card.uuid], ['background', 'border', 'padding', 'margin', 'shadow'], card.style) + } + + /** + * @description 鍗$墖琛屽灞備俊鎭洿鏂帮紙鏁版嵁婧愶紝鏍峰紡绛夛級 + */ + updateComponent = (component) => { + this.setState({ + card: component + }) + + component.width = component.wrap.width + component.name = component.wrap.name + + this.props.updateConfig(component) + } + + getWrapForms = () => { + const { wrap } = this.state.card + + return getWrapForm(wrap) + } + + updateWrap = (res) => { + this.updateComponent({...this.state.card, wrap: res}) + } + + clickComponent = (e) => { + if (sessionStorage.getItem('style-control') === 'true' || sessionStorage.getItem('style-control') === 'component') { + e.stopPropagation() + MKEmitter.emit('clickComponent', this.state.card) + } + } + + render() { + const { card } = this.state + let _style = resetStyle(card.style) + + return ( + <div className="single-search-edit-list" onClick={this.clickComponent} id={card.uuid} style={_style}> + <div className="search-wrap" style={{borderRadius: card.wrap.borderRadius || 0, height: card.wrap.height || 32}}> + <Input placeholder={card.wrap.label} value={card.wrap.initval || ''} /> + {card.wrap.scan === 'show' ? <ScanOutlined style={{lineHeight: `${card.wrap.height || 32}px`}} /> : null} + {card.wrap.show === 'text' ? <Button type="primary">鎼滅储</Button> : <Button type="primary"><SearchOutlined/></Button>} + </div> + <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ + <div className="mk-popover-control"> + <NormalForm title="鎼滅储璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> + </NormalForm> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(card.uuid)} /> + </div> + } trigger="hover"> + <ToolOutlined /> + </Popover> + </div> + ) + } +} + +export default SingleSearchComponent \ No newline at end of file diff --git a/src/mob/components/search/single-search/index.scss b/src/mob/components/search/single-search/index.scss new file mode 100644 index 0000000..a62d8fb --- /dev/null +++ b/src/mob/components/search/single-search/index.scss @@ -0,0 +1,53 @@ +.single-search-edit-list { + min-height: 50px; + position: relative; + background: #ffffff; + + >.anticon-tool { + position: absolute; + z-index: 3; + font-size: 16px; + right: 1px; + top: 1px; + cursor: pointer; + padding: 5px; + background: rgba(255, 255, 255, 0.55); + } + .ant-input, .ant-input:hover, .ant-input:focus { + border: none; + box-shadow: none; + } + .search-wrap { + border: 1px solid #d9d9d9; + display: flex; + background: #ffffff; + overflow: hidden; + .ant-input { + flex: 1; + border-radius: 0; + height: 100%; + } + .anticon-scan { + font-size: 18px; + padding: 0px 10px; + color: #959595; + } + .ant-btn { + border-radius: 0; + position: relative; + right: -1px; + min-width: 45px; + height: 100%; + } + } +} + +.single-search-edit-list::after { + display: block; + content: ' '; + clear: both; +} +.single-search-edit-list:hover { + z-index: 1; + box-shadow: 0px 0px 4px #1890ff; +} \ No newline at end of file diff --git a/src/mob/components/search/single-search/options.jsx b/src/mob/components/search/single-search/options.jsx new file mode 100644 index 0000000..8b31c35 --- /dev/null +++ b/src/mob/components/search/single-search/options.jsx @@ -0,0 +1,115 @@ +/** + * @description Wrap琛ㄥ崟閰嶇疆淇℃伅 + */ +export default function (wrap) { + const wrapForm = [ + { + type: 'text', + field: 'name', + label: '缁勪欢鍚嶇О', + initval: wrap.name || '', + tooltip: '鐢ㄤ簬缁勪欢闂寸殑鍖哄垎銆�', + required: true + }, + { + type: 'number', + field: 'width', + label: '瀹藉害', + initval: wrap.width || 24, + tooltip: '鏍呮牸甯冨眬锛屾瘡琛岀瓑鍒嗕负24鍒椼��', + min: 1, + max: 24, + precision: 0, + required: true + }, + { + type: 'text', + field: 'field', + label: '鎼滅储瀛楁', + initval: wrap.field || '', + tooltip: '澶氫釜瀛楁鍙敤閫楀彿鎷兼帴銆�', + required: true + }, + { + type: 'text', + field: 'label', + label: '鎻愮ず鏂囧瓧', + initval: wrap.label || '', + required: false + }, + { + type: 'text', + field: 'initval', + label: '鍒濆鍊�', + initval: wrap.initval || '', + required: false + }, + { + type: 'radio', + field: 'required', + label: '蹇呭~', + initval: wrap.required || 'false', + required: false, + options: [ + {value: 'true', label: '鏄�'}, + {value: 'false', label: '鍚�'}, + ] + }, + { + type: 'radio', + field: 'match', + label: '鍖归厤鏂瑰紡', + initval: wrap.match || 'like', + required: true, + options: [ + {value: 'like', label: 'like'}, + {value: 'not like', label: 'not like'}, + {value: '=', label: '='}, + ] + }, + { + type: 'radio', + field: 'show', + label: '鎼滅储鏍峰紡', + initval: wrap.show || 'text', + required: false, + options: [ + {value: 'text', label: '鏂囧瓧'}, + {value: 'icon', label: '鍥炬爣'}, + ] + }, + { + type: 'radio', + field: 'scan', + label: '鎵爜', + initval: wrap.scan || 'hidden', + required: false, + options: [ + {value: 'hidden', label: '闅愯棌'}, + {value: 'show', label: '鏄剧ず'}, + ] + }, + { + type: 'number', + field: 'borderRadius', + label: '鍦嗚', + min: 0, + max: 500, + precision: 0, + initval: wrap.borderRadius || 0, + required: false + }, + { + type: 'number', + field: 'height', + label: '楂樺害', + min: 28, + max: 150, + precision: 0, + initval: wrap.height || 32, + required: false + } + ] + + return wrapForm +} \ No newline at end of file diff --git a/src/mob/components/tabs/antv-tabs/index.jsx b/src/mob/components/tabs/antv-tabs/index.jsx index 4d9f345..c644570 100644 --- a/src/mob/components/tabs/antv-tabs/index.jsx +++ b/src/mob/components/tabs/antv-tabs/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Tabs, Icon, Popover, Modal } from 'antd' +import { Tabs, Popover, Modal } from 'antd' +import { ToolOutlined, PlusOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined, CloseOutlined } from '@ant-design/icons' import MKEmitter from '@/utils/events.js' import asyncComponent from '@/utils/asyncComponent' @@ -11,8 +12,7 @@ import MenuUtils from '@/utils/utils-custom.js' import Utils from '@/utils/utils.js' import { getTabForm, getTabsSetForm } from './options' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' +import MkIcon from '@/components/mk-icon' import './index.scss' const NormalForm = asyncIconComponent(() => import('@/components/normalform')) @@ -31,7 +31,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, appType: sessionStorage.getItem('appType'), tabs: null, editab: null, @@ -331,7 +330,7 @@ editab.label = res.label editab.icon = res.icon - editab.hasSearch = res.hasSearch || '' + // editab.hasSearch = res.hasSearch || '' editab.blacklist = res.blacklist if (editab.uuid) { @@ -378,7 +377,7 @@ } render() { - const { tabs, appType, defaultActiveKey } = this.state + const { tabs, defaultActiveKey } = this.state let _style = resetStyle(tabs.style) let _tabStyle = resetStyle(tabs.tabStyle) @@ -390,18 +389,18 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="鏍囩缂栬緫" width={600} update={this.updateTab} getForms={() => this.getTabForms(tab)}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <PasteComponent Tab={tab} insert={this.insert} /> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeTabStyle} type="font-colors" /> - <Icon className="close" title="delete" type="close" onClick={() => this.delTab(tab)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeTabStyle}/> + <CloseOutlined className="close" onClick={() => this.delTab(tab)} /> </div> } trigger="hover"> - <span style={_tabStyle}>{tab.icon ? <Icon type={tab.icon} /> : null}{tab.label}</span> + <span style={_tabStyle}>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span> </Popover> } key={tab.uuid}> - {appType === 'mob' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ? - <Icon className="search-icon" onDoubleClick={() => this.setSearch(tab)} type="search" /> : null} + {/* {appType === 'mob' && tabs.setting.display === 'inline-block' && tab.hasSearch === 'icon' ? + <SearchOutlined className="search-icon" onDoubleClick={() => this.setSearch(tab)}/> : null} */} <TabComponents config={tab} handleList={this.updateTabComponent} deleteCard={this.deleteCard} /> </TabPane> ))} @@ -409,17 +408,17 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="娣诲姞鏍囩" width={600} update={this.updateTab} getForms={() => this.getTabForms()}> - <Icon type="plus" className="plus" title="娣诲姞鏍囩"/> + <PlusOutlined className="plus" title="娣诲姞鏍囩"/> </NormalForm> <NormalForm title="鏍囩椤佃缃�" width={700} update={this.updateTabs} getForms={this.getTabsForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="tabs" card={tabs}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="delete" type="delete" onClick={() => this.props.deletecomponent(tabs.uuid)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + <DeleteOutlined className="close" onClick={() => this.props.deletecomponent(tabs.uuid)} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> </div> ) diff --git a/src/mob/components/tabs/antv-tabs/options.jsx b/src/mob/components/tabs/antv-tabs/options.jsx index 7d7782b..43ac1d4 100644 --- a/src/mob/components/tabs/antv-tabs/options.jsx +++ b/src/mob/components/tabs/antv-tabs/options.jsx @@ -34,19 +34,19 @@ allowClear: true, span: 22 }, - { - type: 'radio', - field: 'hasSearch', - label: '鎼滅储', - initval: tab.hasSearch || 'false', - required: false, - options: [ - {value: 'false', label: '鏃�'}, - {value: 'icon', label: '鏈�'}, - ], - forbid: appType !== 'mob' || setting.display !== 'inline-block', - span: 22 - }, + // { + // type: 'radio', + // field: 'hasSearch', + // label: '鎼滅储', + // initval: tab.hasSearch || 'false', + // required: false, + // options: [ + // {value: 'false', label: '鏃�'}, + // {value: 'icon', label: '鏈�'}, + // ], + // forbid: appType !== 'mob' || setting.display !== 'inline-block', + // span: 22 + // }, { type: 'multiselect', field: 'blacklist', diff --git a/src/mob/components/topbar/normal-navbar/index.jsx b/src/mob/components/topbar/normal-navbar/index.jsx index fc6c79b..3473c20 100644 --- a/src/mob/components/topbar/normal-navbar/index.jsx +++ b/src/mob/components/topbar/normal-navbar/index.jsx @@ -1,14 +1,12 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover } from 'antd' -import { ExpandOutlined, ReloadOutlined } from '@ant-design/icons' +import { Popover } from 'antd' +import { ExpandOutlined, ReloadOutlined, EllipsisOutlined, LogoutOutlined, ToolOutlined, ScanOutlined, LeftOutlined, EditOutlined, FontColorsOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons' import asyncIconComponent from '@/utils/asyncIconComponent' import getWrapForm from './options' import MKEmitter from '@/utils/events.js' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import './index.scss' const NormalForm = asyncIconComponent(() => import('@/components/normalform')) @@ -22,7 +20,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, back: false } @@ -37,7 +34,7 @@ floor: card.floor, width: 24, subtype: card.subtype, - wrap: { type: 'navbar', height: 50, title: 'NavBar', back: 'true', search: 'false', logout: 'false' }, + wrap: { type: 'navbar', height: 50, title: 'NavBar', back: 'true', logout: 'false' }, style: {boxShadow: '0 0 3px #D9D9D9', shadowColor: '#D9D9D9', shadowBlur: '3px', paddingLeft: '10px', paddingRight: '10px', lineHeight: '2.8', fontSize: '18px' }, searchStyle: {} } @@ -54,8 +51,12 @@ }) this.props.updateConfig(_card) } else { + let _card = fromJS(card).toJS() + if (_card.wrap.type === 'navbar' && _card.wrap.search === 'true') { + _card.wrap.type = 'searchIcon' + } this.setState({ - card: fromJS(card).toJS() + card: _card }) } } @@ -161,7 +162,7 @@ if (!card.search) { card.search = { floor: 1, - setting: { type: 'title', field: '', title: '', focus: 'true', btn: 'hidden' }, + setting: { type: 'title', field: '', title: '', focus: 'true', btn: 'hidden', backgroundColor: sessionStorage.getItem('sysBgColor') }, groups: [], fields: [] } @@ -198,13 +199,13 @@ let right = null if (card.wrap.logout === 'true') { - right = <Icon type="logout" /> + right = <LogoutOutlined /> } if (card.wrap.scan === 'true') { - right = !right ? <ExpandOutlined onDoubleClick={this.skip}/> : <Icon type="ellipsis" /> + right = !right ? <ExpandOutlined onDoubleClick={this.skip}/> : <EllipsisOutlined /> } if (card.wrap.refresh === 'true') { - right = !right ? <ReloadOutlined /> : <Icon type="ellipsis" onDoubleClick={this.skip}/> + right = !right ? <ReloadOutlined /> : <EllipsisOutlined onDoubleClick={this.skip}/> } return ( @@ -212,35 +213,35 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="瀵艰埅鏍忚缃�" width={750} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> <CopyComponent type="topbar" card={card}/> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <div className="am-navbar"> <div className="am-navbar-left"> - {card.wrap.back !== 'false' ? <Icon type="left" /> : null} + {card.wrap.back !== 'false' ? <LeftOutlined /> : null} </div> {card.wrap.type !== 'search' ? <div className="am-navbar-title">{card.wrap.title || ''}</div> : <div className="am-navbar-search" onDoubleClick={this.setSearch}> <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeSearchStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeSearchStyle}/> </div> } trigger="hover"> <div style={card.searchStyle} className="search-bar"> - {card.search && card.search.setting.scan === 'true' ? <Icon type="scan" /> : <Icon type="search" />} + {card.search && card.search.setting.scan === 'true' ? <ScanOutlined /> : <SearchOutlined />} </div> </Popover> </div> } <div className="am-navbar-right"> - {card.wrap.search === 'true' ? <Icon type="search" onDoubleClick={this.setSearch}/> : null} + {card.wrap.type === 'searchIcon' ? <SearchOutlined onDoubleClick={this.setSearch}/> : null} {right} </div> </div> diff --git a/src/mob/components/topbar/normal-navbar/options.jsx b/src/mob/components/topbar/normal-navbar/options.jsx index 5af02e8..3185952 100644 --- a/src/mob/components/topbar/normal-navbar/options.jsx +++ b/src/mob/components/topbar/normal-navbar/options.jsx @@ -23,18 +23,16 @@ required: false, options: [ {value: 'navbar', label: '瀵艰埅鏍�'}, - {value: 'search', label: '鎼滅储鏍�'}, + {value: 'search', label: '鎼滅储妗�'}, + {value: 'searchIcon', label: '鎼滅储鏍�'}, ], - controlFields: [ - {field: 'search', values: ['navbar']}, - ] }, { type: 'text', field: 'title', label: '鏍囬', initval: wrap.title || '', - tooltip: '浣跨敤鎼滅储鏍忔椂锛屾爣棰樼敤浜庢悳绱㈡潯浠堕殣钘忔椂鏄剧ず銆�', + tooltip: '浣跨敤鎼滅储妗嗘椂锛屾爣棰樼敤浜庢悳绱㈡潯浠堕殣钘忔椂锛堝綋鍚敤榛戝悕鍗曪紝鐧诲綍鐢ㄦ埛鏃犳潈闄愭椂锛夋樉绀恒��', required: false }, { @@ -51,17 +49,17 @@ {field: 'reload', values: ['true']}, ] }, - { - type: 'radio', - field: 'search', - label: '鎼滅储', - initval: wrap.search || 'false', - required: false, - options: [ - {value: 'true', label: '鏄剧ず'}, - {value: 'false', label: '闅愯棌'}, - ] - }, + // { + // type: 'radio', + // field: 'search', + // label: '鎼滅储', + // initval: wrap.search || 'false', + // required: false, + // options: [ + // {value: 'true', label: '鏄剧ず'}, + // {value: 'false', label: '闅愯棌'}, + // ] + // }, { type: 'radio', field: 'logout', @@ -114,7 +112,7 @@ field: 'reload', label: '杩斿洖鍚�', initval: wrap.reload || 'false', - tooltip: '杩斿洖鍚庢槸鍚﹀埛鏂版暟鎹�傛敞锛氬湪鏄庣浜慳pp涓紙搴旂敤妯″紡涓篴pp锛夋湁鏁堛��', + tooltip: '杩斿洖鍚庢槸鍚﹀埛鏂版暟鎹�傛敞锛氬湪鏄庣浜慉PP涓湁鏁堛��', required: false, options: [{ value: 'false', diff --git a/src/mob/mobshell/card.jsx b/src/mob/mobshell/card.jsx index b9bb62b..b03a40f 100644 --- a/src/mob/mobshell/card.jsx +++ b/src/mob/mobshell/card.jsx @@ -5,7 +5,7 @@ import './index.scss' const AntvBar = asyncComponent(() => import('@/menu/components/chart/antv-bar')) -// const MainSearch = asyncComponent(() => import('@/menu/components/search/main-search')) +const MainSearch = asyncComponent(() => import('@/mob/components/search/single-search')) const AntvPie = asyncComponent(() => import('@/menu/components/chart/antv-pie')) const AntvDashboard = asyncComponent(() => import('@/menu/components/chart/antv-dashboard')) const AntvScatter = asyncComponent(() => import('@/menu/components/chart/antv-scatter')) @@ -81,8 +81,8 @@ const getCardComponent = () => { if (card.type === 'bar' || card.type === 'line') { return (<AntvBar card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) - // } else if (card.type === 'search') { - // return (<MainSearch card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) + } else if (card.type === 'search') { + return (<MainSearch card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) } else if (card.type === 'pie') { return (<AntvPie card={card} updateConfig={updateConfig} deletecomponent={delCard}/>) } else if (card.type === 'dashboard') { diff --git a/src/mob/modalconfig/index.jsx b/src/mob/modalconfig/index.jsx index 8f2b651..2aaddfc 100644 --- a/src/mob/modalconfig/index.jsx +++ b/src/mob/modalconfig/index.jsx @@ -4,7 +4,8 @@ import { DndProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' import moment from 'moment' -import { Button, Modal, Collapse, notification, Switch, Icon } from 'antd' +import { Button, Modal, Collapse, notification, Switch } from 'antd' +import { LeftOutlined } from '@ant-design/icons' import Api from '@/api' import Utils from '@/utils/utils.js' @@ -116,10 +117,7 @@ let _inputfields = [] let _tabfields = [] let _linkableFields = [] - let _linksupFields = [{ - field: '', - label: '绌�' - }] + let _linksupFields = [] let standardform = null let uniq = new Map() @@ -149,7 +147,15 @@ _tabIndex++ } + if (item.type === 'switch') { + _linksupFields.push({ + field: item.field, + label: _linkIndex + '銆�' + item.label + }) + } + if (!['select', 'link', 'radio', 'checkcard'].includes(item.type)) return + if (item.type === 'checkcard' && item.multiple === 'true') return // 閫夐」鍗″閫� if (item.field && !uniq.has(item.field)) { uniq.set(item.field, true) @@ -399,6 +405,19 @@ }) } + clearConfig = () => { + const _this = this + let _config = {...this.state.config, fields: []} + + confirm({ + content: '纭畾娓呯┖琛ㄥ崟鍚楋紵', + onOk() { + _this.setState({ config: _config }) + }, + onCancel() {} + }) + } + render () { const { config, dict, saving } = this.state @@ -419,16 +438,17 @@ </div> <div className="modal-control"> <Button icon="setting" onClick={this.changeSetting}>璁剧疆</Button> - <Button type="primary" loading={saving} onClick={this.submitConfig}>淇濆瓨</Button> + <Button type="primary" id="save-modal-config" loading={saving} onClick={this.submitConfig}>淇濆瓨</Button> <Button onClick={this.cancelConfig}>杩斿洖</Button> <PasteComponent config={config} updateConfig={this.insert} /> + <Button type="danger" onClick={this.clearConfig}>娓呯┖</Button> <Switch checkedChildren={dict['model.switch.open']} unCheckedChildren={dict['model.switch.close']} defaultChecked={this.state.showField} onChange={(val) => this.setState({showField: val})} /> </div> <div className="setting"> <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}> <div className="mob-shell-inner"> <div className="am-navbar"> - <Icon type="left" /> + <LeftOutlined /> <div className="am-navbar-title">{config.setting.title}</div> {config.setting.btnPosition === 'top' ? <Button className="modal-submit-top">{config.setting.btnName || '纭畾'}</Button> : null} </div> @@ -468,7 +488,7 @@ <Modal title={this.state.dict['model.edit']} visible={this.state.settingVisible} - width={850} + width={900} maskClosable={false} onOk={this.settingSave} onCancel={() => { this.setState({ settingVisible: false }) }} diff --git a/src/mob/modulesource/dragsource/index.jsx b/src/mob/modulesource/dragsource/index.jsx index 0f13372..5e00912 100644 --- a/src/mob/modulesource/dragsource/index.jsx +++ b/src/mob/modulesource/dragsource/index.jsx @@ -1,13 +1,13 @@ import React from 'react' import { useDrag } from 'react-dnd' -import { Icon } from 'antd' +import { CloseCircleOutlined } from '@ant-design/icons' import './index.scss' const MobSourceElement = ({item, triggerDel}) => { const [, drag] = useDrag({ item }) return ( - <div className="menu-source-item"> - <div className="property"><span>{item.title}</span>{item.config ? <Icon onClick={() => triggerDel(item)} type="close-circle" /> : null}</div> + <div className={'menu-source-item ' + item.component + '-' + item.subtype}> + <div className="property"><span>{item.title}</span>{item.config ? <CloseCircleOutlined onClick={() => triggerDel(item)}/> : null}</div> <img ref={drag} src={item.url} alt=""/> </div> ) diff --git a/src/mob/modulesource/option.jsx b/src/mob/modulesource/option.jsx index 9b9efc5..0869dff 100644 --- a/src/mob/modulesource/option.jsx +++ b/src/mob/modulesource/option.jsx @@ -13,7 +13,7 @@ import SandBox from '@/assets/mobimg/sandbox.png' import Pie1 from '@/assets/mobimg/ring.png' import Pie2 from '@/assets/mobimg/nightingale.png' -// import Mainsearch from '@/assets/mobimg/mainsearch.png' +import singlesearch from '@/assets/mobimg/singlesearch.png' import Navbar from '@/assets/mobimg/navbar-mob.png' import Carousel from '@/assets/mobimg/carousel.png' import Carousel1 from '@/assets/mobimg/carousel1.png' @@ -32,7 +32,7 @@ { type: 'menu', url: Navbar, component: 'navbar', subtype: 'tabbar', title: '鑿滃崟鏍�' }, { type: 'menu', url: MenuBar, component: 'menubar', subtype: 'menubar', title: '鑿滃崟' }, { type: 'menu', url: tabs, component: 'tabs', subtype: 'tabs', title: '鏍囩椤�', width: 24 }, - // { type: 'menu', url: Mainsearch, component: 'search', subtype: 'mainsearch', title: '鎼滅储鏉′欢', width: 24 }, + { type: 'menu', url: singlesearch, component: 'search', subtype: 'mainsearch', title: '鎼滅储鏉′欢', width: 24 }, { type: 'menu', url: card1, component: 'card', subtype: 'datacard', title: '鏁版嵁鍗�', width: 24 }, { type: 'menu', url: card2, component: 'card', subtype: 'propcard', title: '灞炴�у崱', width: 24 }, { type: 'menu', url: card2, component: 'balcony', subtype: 'balcony', title: '娴姩鍗�', width: 24 }, diff --git a/src/mob/searchconfig/groupdragelement/card.jsx b/src/mob/searchconfig/groupdragelement/card.jsx index b0e56e2..16db7b0 100644 --- a/src/mob/searchconfig/groupdragelement/card.jsx +++ b/src/mob/searchconfig/groupdragelement/card.jsx @@ -1,7 +1,9 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { EditOutlined, CloseOutlined } from '@ant-design/icons' +import MkIcon from '@/components/mk-icon' import './index.scss' const Card = ({ id, card, moveCard, findCard, editCard, closeCard, changeGroup }) => { @@ -41,14 +43,14 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" type="edit" onClick={edit} /> - <Icon className="close" type="close" onClick={close} /> + <EditOutlined className="edit" onClick={edit} /> + <CloseOutlined className="close" onClick={close} /> </div> } trigger="hover"> <div className="page-card" onDoubleClick={change} style={{ opacity: opacity}}> <div ref={node => drag(drop(node))}> {card.wrap.icon ? <div className="icon"> - <Icon type={card.wrap.icon} /> + <MkIcon type={card.wrap.icon} /> </div> : null} <div className="name"> {card.wrap.name} diff --git a/src/mob/searchconfig/groupdragelement/index.scss b/src/mob/searchconfig/groupdragelement/index.scss index bf9d07a..a400b7a 100644 --- a/src/mob/searchconfig/groupdragelement/index.scss +++ b/src/mob/searchconfig/groupdragelement/index.scss @@ -6,7 +6,7 @@ margin-bottom: 15px; .page-card { float: left; - width: 13.333%; + width: 16.666%; text-align: center; padding: 5px; .icon { diff --git a/src/mob/searchconfig/groupform/index.jsx b/src/mob/searchconfig/groupform/index.jsx index 44598bc..81219b4 100644 --- a/src/mob/searchconfig/groupform/index.jsx +++ b/src/mob/searchconfig/groupform/index.jsx @@ -5,11 +5,10 @@ import asyncComponent from '@/utils/asyncComponent' import './index.scss' -const MkIcon = asyncComponent(() => import('@/components/mkIcon')) +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) class SettingForm extends Component { static propTpyes = { - dict: PropTypes.object, // 瀛楀吀椤� config: PropTypes.object, // 琛ㄥ崟閰嶇疆淇℃伅 inputSubmit: PropTypes.any // 鍥炶溅鎻愪氦浜嬩欢 } @@ -77,7 +76,7 @@ {getFieldDecorator('icon', { initialValue: config.wrap.icon })( - <MkIcon allowClear/> + <MkEditIcon options={['normal', 'data', 'direction', 'edit', 'hint']} allowClear/> )} </Form.Item> </Col> diff --git a/src/mob/searchconfig/index.jsx b/src/mob/searchconfig/index.jsx index 2ad5662..127b319 100644 --- a/src/mob/searchconfig/index.jsx +++ b/src/mob/searchconfig/index.jsx @@ -4,7 +4,8 @@ import { DndProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' import moment from 'moment' -import { Button, Modal, Collapse, notification, Switch, Icon } from 'antd' +import { Button, Modal, Collapse, notification, Switch } from 'antd' +import { SettingOutlined, LeftOutlined, SearchOutlined, PlusOutlined } from '@ant-design/icons' import Api from '@/api' import Utils from '@/utils/utils.js' @@ -143,12 +144,25 @@ * @description 琛ㄥ崟缂栬緫 */ handleForm = (_card) => { + const { group } = this.state let card = fromJS(_card).toJS() + let linkableFields = [] + + group.fields.forEach(item => { + if (item.uuid === card.uuid) return + if (!['select', 'link', 'checkcard'].includes(item.type)) return + if (item.type === 'checkcard' && item.multiple === 'true') return + + linkableFields.push({ + value: item.field, + text: item.label + }) + }) this.setState({ visible: true, card: card, - formlist: getSearchForm(card, []) + formlist: getSearchForm(card, linkableFields) }) } @@ -406,7 +420,7 @@ let _g = { uuid: Utils.getuuid(), wrap: { name: 'name', icon: '' }, - setting: { type: 'title', field: '', title: '', focus: 'true', btn: 'hidden' }, + setting: { type: 'title', field: '', title: '', focus: 'true', btn: 'hidden', backgroundColor: sessionStorage.getItem('sysBgColor') }, fields: [] } @@ -495,16 +509,17 @@ </div> <div className="setting"> <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}> - <div className="mob-shell-inner"> - <Icon className="setting-group" onClick={this.changeSetting} type="setting" /> + <div className="mob-shell-inner" style={{backgroundColor: group.setting.backgroundColor || '#ffffff'}}> + <SettingOutlined className="setting-group" onClick={this.changeSetting}/> {group.setting.type === 'title' ? <div className="am-navbar"> - <Icon type="left" /> + <LeftOutlined /> <div className="am-navbar-title">{group.setting.title}</div> </div> : <div className="am-navbar"> - <Icon type="left" /> - <div className="search-bar"><Icon type="search" /></div> + {/* <LeftOutlined /> */} + <div className="search-bar"><SearchOutlined /></div> + <Button >鍙栨秷</Button> </div>} - {group.floor === 1 ? <Icon className="plus-group" type="plus" onClick={this.plusGroup} /> : null} + {group.floor === 1 ? <PlusOutlined className="plus-group" onClick={this.plusGroup} /> : null} <div style={{minHeight: 'calc(100% - 100px)'}}> {group.floor === 1 && group.groups.length > 0 ? <GDragElement list={group.groups} diff --git a/src/mob/searchconfig/index.scss b/src/mob/searchconfig/index.scss index 934712f..9eb6275 100644 --- a/src/mob/searchconfig/index.scss +++ b/src/mob/searchconfig/index.scss @@ -154,13 +154,23 @@ height: 45px; line-height: 45px; position: relative; - border-bottom: 1px solid #f0f0f0; margin-bottom: 10px; .anticon-close, .anticon-left { position: absolute; line-height: 45px; font-size: 18px; left: 10px; + } + .ant-btn { + position: absolute; + right: 20px; + border: none; + top: 6px; + color: #1890ff; + background-color: transparent; + cursor: default; + font-size: 16px; + box-shadow: none; } .am-navbar-title { font-size: 16px; @@ -178,7 +188,7 @@ position: relative; top: 50%; transform: translateY(-50%); - margin: 0 30px 0 35px; + margin: 0 80px 0 10px; } } .search-btn { diff --git a/src/mob/searchconfig/searchdragelement/card.jsx b/src/mob/searchconfig/searchdragelement/card.jsx index b21d66f..df3e2c6 100644 --- a/src/mob/searchconfig/searchdragelement/card.jsx +++ b/src/mob/searchconfig/searchdragelement/card.jsx @@ -1,7 +1,7 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover, Form } from 'antd' -// import { Range } from 'antd-mobile' +import { Popover, Form } from 'antd' +import { EditOutlined, RightOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons' import moment from 'moment' import asyncComponent from '@/utils/asyncComponent' @@ -51,7 +51,7 @@ <div className="am-list-line"> {card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null} <div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'days').format('YYYY-MM-DD') : '璇烽�夋嫨'}</div> - <div className="am-list-extra"><Icon type="right" /></div> + <div className="am-list-extra"><RightOutlined /></div> </div> </div>) } else if (card.type === 'datemonth') { @@ -59,28 +59,30 @@ <div className="am-list-line"> {card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null} <div className="am-input-control">{card.initval ? moment().subtract(card.initval, 'month').format('YYYY-MM') : '璇烽�夋嫨'}</div> - <div className="am-list-extra"><Icon type="right" /></div> + <div className="am-list-extra"><RightOutlined /></div> </div> </div>) } else if (card.type === 'range') { - // let value = [(card.minValue || 0), (card.maxValue || 20)] - if (card.initval) { - // value = card.initval.split(',') - // value = [+value[0], +value[1]] - } - formItem = <div></div> - // formItem = (<div className="am-list-item slider"> - // <div className="am-list-line"> - // {card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null} - // <div className="am-input-control"> - // <Range - // min={card.minValue || 0} - // max={card.maxValue || 20} - // value={value} - // /> - // </div> - // </div> - // </div>) + formItem = (<div className="am-list-item slider"> + <div className="am-list-line"> + {card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null} + <div className="am-input-control"> + <div className="adm-slider"> + <div className="adm-slider-track-container"> + <div className="adm-slider-track"> + <div className="adm-slider-fill" style={{width: '44%', left: '13%'}}></div> + <div className="adm-slider-thumb-container" style={{left: '13%', right: 'auto'}}> + <div className="adm-slider-thumb"></div> + </div> + <div className="adm-slider-thumb-container" style={{left: '58%', right: 'auto'}}> + <div className="adm-slider-thumb"></div> + </div> + </div> + </div> + </div> + </div> + </div> + </div>) // } else if (card.type === 'daterange') { // let value = '璇烽�夋嫨' // if (card.initval === 'week') { @@ -99,7 +101,7 @@ // <div className="am-list-line"> // {card.labelShow !== 'false' ? <div className="am-input-label">{card.label}</div> : null} // <div className="am-input-control">{value}</div> - // <div className="am-list-extra"><Icon type="right" /></div> + // <div className="am-list-extra"><RightOutlined /></div> // </div> // </div>) } else if (card.type === 'checkcard') { @@ -116,9 +118,9 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" type="edit" onClick={edit} /> - <Icon className="copy" type="copy" onClick={copy} /> - <Icon className="close" type="close" onClick={close} /> + <EditOutlined className="edit" onClick={edit} /> + <CopyOutlined className="copy" onClick={copy} /> + <CloseOutlined className="close" onClick={close} /> </div> } trigger="hover"> <div className="page-card" style={{ opacity: opacity}}> diff --git a/src/mob/searchconfig/searchdragelement/index.scss b/src/mob/searchconfig/searchdragelement/index.scss index 0a803c7..491a00f 100644 --- a/src/mob/searchconfig/searchdragelement/index.scss +++ b/src/mob/searchconfig/searchdragelement/index.scss @@ -15,7 +15,7 @@ display: flex; height: 44px; min-height: 44px; - background-color: #fff; + background-color: transparent; vertical-align: middle; overflow: hidden; transition: background-color 200ms; @@ -58,7 +58,7 @@ width: 15px; height: 15px; margin-left: 8px; - i { + .anticon { vertical-align: top; } } @@ -96,10 +96,50 @@ align-items: start; display: block; .am-input-control { - height: 25px; - padding-top: 10px; + height: 30px; padding-left: 12px; } + .adm-slider { + padding: 4px 0px; + list-style: none; + user-select: none; + .adm-slider-track-container { + padding: 8px 0; + .adm-slider-track { + position: relative; + width: 100%; + height: 4px; + background-color: #f5f5f5; + } + .adm-slider-fill { + position: absolute; + height: 4px; + background-color: #1890ff; + } + .adm-slider-thumb-container { + touch-action: none; + position: absolute; + width: 32px; + height: 32px; + border-radius: 50%; + top: 50%; + transform: translate(-50%, -50%); + } + .adm-slider-thumb { + touch-action: none; + position: absolute; + width: 22px; + height: 22px; + border-radius: 50%; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + background: #fff url('../../../assets/mobimg/slider-thumb.svg') no-repeat center center; + background-size: 10px 10px; + box-shadow: 0 3px 5px 0 #d9d9d9, 0 1.5px 3px -2px #d9d9d9; + } + } + } } } diff --git a/src/mob/searchconfig/settingform/index.jsx b/src/mob/searchconfig/settingform/index.jsx index 7f27665..5dbc386 100644 --- a/src/mob/searchconfig/settingform/index.jsx +++ b/src/mob/searchconfig/settingform/index.jsx @@ -2,12 +2,15 @@ import PropTypes from 'prop-types' import { Form, Row, Col, Input, Radio, Select, Tooltip } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' + +import asyncComponent from '@/utils/asyncComponent' import { formRule } from '@/utils/option.js' import './index.scss' +const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) + class SettingForm extends Component { static propTpyes = { - dict: PropTypes.object, // 瀛楀吀椤� config: PropTypes.object, // 琛ㄥ崟閰嶇疆淇℃伅 inputSubmit: PropTypes.any // 鍥炶溅鎻愪氦浜嬩欢 } @@ -86,7 +89,7 @@ </Col> <Col span={12}> <Form.Item label={ - <Tooltip placement="topLeft" title="浣跨敤鎼滅储鏍忔椂锛屾爣棰樼敤浜庢悳绱㈡潯浠堕殣钘忔椂鏄剧ず銆�"> + <Tooltip placement="topLeft" title="浣跨敤鎼滅储鏍忔椂锛屾爣棰樼敤浜庢悳绱㈡潯浠堕殣钘忔椂锛堝綋鍚敤榛戝悕鍗曪紝鐧诲綍鐢ㄦ埛鏃犳潈闄愭椂锛夋樉绀恒��"> <QuestionCircleOutlined className="mk-form-tip" /> 鏍囬 </Tooltip> @@ -209,6 +212,15 @@ )} </Form.Item> </Col> : null} + <Col span={12}> + <Form.Item className="sys-bgcolor" label="鑳屾櫙鑹�"> + {getFieldDecorator('backgroundColor', { + initialValue: config.setting.backgroundColor || '#ffffff' + })( + <ColorSketch/> + )} + </Form.Item> + </Col> {type === 'search' ? <Col span={12}> <Form.Item label="榛戝悕鍗�"> {getFieldDecorator('blacklist', { diff --git a/src/mob/searchconfig/settingform/index.scss b/src/mob/searchconfig/settingform/index.scss index 0bfd8f4..cd7da53 100644 --- a/src/mob/searchconfig/settingform/index.scss +++ b/src/mob/searchconfig/settingform/index.scss @@ -12,4 +12,9 @@ float: none; vertical-align: top; } + .sys-bgcolor { + .ant-form-item-children { + padding-top: 7px; + } + } } \ No newline at end of file diff --git a/src/pc/bgcontroller/index.jsx b/src/pc/bgcontroller/index.jsx index b77b775..9b149f7 100644 --- a/src/pc/bgcontroller/index.jsx +++ b/src/pc/bgcontroller/index.jsx @@ -1,10 +1,9 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Form, Icon, Select } from 'antd' +import { Form, Select } from 'antd' +import { ArrowUpOutlined, ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons' -import zhCN from '@/locales/zh-CN/mob.js' -import enUS from '@/locales/en-US/mob.js' import asyncComponent from '@/utils/asyncComponent' import './index.scss' @@ -20,12 +19,11 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, backgroundColor: '', backgroundImage: '', backgroundSize: '', backgroundRepeat: '', - backgroundPositon: '', + backgroundPosition: '', opacity: '', } @@ -44,7 +42,7 @@ backgroundImage: bgImg, backgroundSize: config.style.backgroundSize || '100%', backgroundRepeat: config.style.backgroundRepeat || 'repeat', - backgroundPositon: config.style.backgroundPositon || 'center' + backgroundPosition: config.style.backgroundPosition || 'center' }) } @@ -116,18 +114,18 @@ backgroundPositonChange = (val) => { this.setState({ - backgroundPositon: val + backgroundPosition: val }) let config = fromJS(this.props.config).toJS() - config.style.backgroundPositon = val + config.style.backgroundPosition = val this.props.updateConfig(config) } render () { const { config } = this.props - const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPositon } = this.state + const { backgroundColor, backgroundImage, backgroundSize, backgroundRepeat, backgroundPosition } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, @@ -145,6 +143,7 @@ <Form.Item colon={false} label="瀹藉害" + className="normal-view" > <StyleInput defaultValue={config.style.width || '100%'} options={['px', '%', 'vw']} onChange={(val) => this.changePadding(val, 'width')}/> </Form.Item> @@ -172,59 +171,67 @@ </Select> </Form.Item> <Form.Item colon={false} label="浣嶇疆"> - <Select defaultValue={backgroundPositon} onChange={this.backgroundPositonChange}> + <Select defaultValue={backgroundPosition} onChange={this.backgroundPositonChange}> <Option value="center">center</Option> <Option value="top">top</Option> <Option value="bottom">bottom</Option> </Select> </Form.Item> - <p style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>鍐呰竟璺�</p> + <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>鍐呰竟璺�</p> <Form.Item colon={false} - label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + className="normal-view" + label={<ArrowUpOutlined title="涓婅竟璺�"/>} > <StyleInput defaultValue={config.style.paddingTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingTop')}/> </Form.Item> <Form.Item colon={false} - label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + className="normal-view" + label={<ArrowDownOutlined title="涓嬭竟璺�"/>} > <StyleInput defaultValue={config.style.paddingBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingBottom')}/> </Form.Item> <Form.Item colon={false} - label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + className="normal-view" + label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} > <StyleInput defaultValue={config.style.paddingLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingLeft')}/> </Form.Item> <Form.Item colon={false} - label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + className="normal-view" + label={<ArrowRightOutlined title="鍙宠竟璺�"/>} > <StyleInput defaultValue={config.style.paddingRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'paddingRight')}/> </Form.Item> - <p style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>澶栬竟璺�</p> + <p className="normal-view" style={{borderBottom: '1px solid #eaeaea', color: '#40a9ff'}}>澶栬竟璺�</p> <Form.Item colon={false} - label={<Icon title="涓婅竟璺�" type="arrow-up"/>} + className="normal-view" + label={<ArrowUpOutlined title="涓婅竟璺�"/>} > <StyleInput defaultValue={config.style.marginTop || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginTop')}/> </Form.Item> <Form.Item colon={false} - label={<Icon title="涓嬭竟璺�" type="arrow-down"/>} + className="normal-view" + label={<ArrowDownOutlined title="涓嬭竟璺�"/>} > <StyleInput defaultValue={config.style.marginBottom || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginBottom')}/> </Form.Item> <Form.Item colon={false} - label={<Icon title="宸﹁竟璺�" type="arrow-left"/>} + className="normal-view" + label={<ArrowLeftOutlined title="宸﹁竟璺�"/>} > <StyleInput defaultValue={config.style.marginLeft || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginLeft')}/> </Form.Item> <Form.Item colon={false} - label={<Icon title="鍙宠竟璺�" type="arrow-right"/>} + className="normal-view" + label={<ArrowRightOutlined title="鍙宠竟璺�"/>} > <StyleInput defaultValue={config.style.marginRight || '0px'} options={['px', 'vh', 'vw']} onChange={(val) => this.changePadding(val, 'marginRight')}/> </Form.Item> diff --git a/src/pc/components/login/normal-login/index.jsx b/src/pc/components/login/normal-login/index.jsx index 1ffb207..48d29f8 100644 --- a/src/pc/components/login/normal-login/index.jsx +++ b/src/pc/components/login/normal-login/index.jsx @@ -1,14 +1,13 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { EditOutlined, FontColorsOutlined, ToolOutlined, DeleteOutlined } from '@ant-design/icons' import asyncIconComponent from '@/utils/asyncIconComponent' import asyncComponent from '@/utils/asyncComponent' import MKEmitter from '@/utils/events.js' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import { resetStyle } from '@/utils/utils-custom.js' import getWrapForm from './options' import './index.scss' @@ -24,7 +23,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, back: false } @@ -76,6 +74,9 @@ let _card = fromJS(card).toJS() if (_card.loginWays.length === 2) { _card.loginWays.push({type: 'app_scan', label: '鎵爜鐧诲綍'}) + } + if (_card.wrap.link && _card.wrap.link === 'menu') { + _card.wrap.linkmenu = _card.uuid } this.setState({ card: _card @@ -143,9 +144,9 @@ } getWrapForms = () => { - const { wrap } = this.state.card + const { card } = this.state - return getWrapForm(wrap) + return getWrapForm(card.wrap) } updateWrap = (res) => { @@ -161,7 +162,7 @@ } render() { - const { card, dict } = this.state + const { card } = this.state let style = resetStyle(card.style) if (card.wrap.maxWidth) { style.maxWidth = card.wrap.maxWidth @@ -179,15 +180,15 @@ <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> <NormalForm title="鐧诲綍璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> - <LoginForm loginWays={card.loginWays} wrap={card.wrap} menuId={card.uuid} dict={dict} /> + <LoginForm loginWays={card.loginWays} wrap={card.wrap} /> </div> ) } diff --git a/src/pc/components/login/normal-login/index.scss b/src/pc/components/login/normal-login/index.scss index 5eb7460..95e396e 100644 --- a/src/pc/components/login/normal-login/index.scss +++ b/src/pc/components/login/normal-login/index.scss @@ -85,11 +85,20 @@ overflow: hidden; padding-bottom: 10px; cursor: pointer; - i { + .anticon { transform-origin: 0 0; transform: rotate(45deg); } } + .protocol-wrap { + padding: 0 20px 15px; + span { + font-size: 13px; + } + .protocol { + color: #1890ff; + } + } .login-ways { padding: 0 20px 25px; span { diff --git a/src/pc/components/login/normal-login/loginform.jsx b/src/pc/components/login/normal-login/loginform.jsx index 536b883..0ca5d72 100644 --- a/src/pc/components/login/normal-login/loginform.jsx +++ b/src/pc/components/login/normal-login/loginform.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Form, Icon, Input, Button, Checkbox } from 'antd' +import { Form, Input, Button, Checkbox, notification } from 'antd' +import { QrcodeOutlined, UserOutlined, LockOutlined } from '@ant-design/icons' import asyncElementComponent from '@/utils/asyncComponent' import MKEmitter from '@/utils/events.js' @@ -11,8 +12,6 @@ class LoginTabForm extends Component { static propTpyes = { - dict: PropTypes.object, - menuId: PropTypes.string, loginWays: PropTypes.array, wrap: PropTypes.array, } @@ -80,10 +79,19 @@ } changeMenu = () => { - const { wrap, menuId } = this.props + const { wrap } = this.props + + if (!wrap.linkmenu) { + notification.warning({ + top: 92, + message: '璇疯缃叧鑱旇彍鍗曪紒', + duration: 5 + }) + return + } MKEmitter.emit('changeEditMenu', { - MenuID: wrap.link === 'linkmenu' ? wrap.linkmenu : menuId, + MenuID: wrap.linkmenu, copyMenuId: '', MenuNo: '', MenuName: '' @@ -105,17 +113,17 @@ return ( <Form className="login-edit-form"> <div className="login-way-title">{activeWay.label}</div> - {scanWay && activeWay.type !== 'app_scan' ? <div className="scan-icon" onClick={() => this.onChangeTab(scanWay)}><Icon type="qrcode" /></div> : null} + {scanWay && activeWay.type !== 'app_scan' ? <div className="scan-icon" onClick={() => this.onChangeTab(scanWay)}><QrcodeOutlined /></div> : null} {activeWay.type === 'uname_pwd' ? <div className={'form-item-wrap ' + (activeWay.shortcut === 'none' ? 'no-short' : '')}> <Form.Item> <Input - prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} + prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="鐢ㄦ埛鍚�" autoComplete="off" /> </Form.Item> <Form.Item> - <Input.Password placeholder="瀵嗙爜" prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} /> + <Input.Password placeholder="瀵嗙爜" prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} /> </Form.Item> {!activeWay.shortcut || activeWay.shortcut === 'remember' ? <Form.Item className="minline"> <Checkbox>璁颁綇瀵嗙爜</Checkbox> @@ -159,6 +167,9 @@ </div> 璇蜂娇鐢ㄥ鎴风鎵竴鎵櫥褰� </div> : null} + {/* {wrap.protocol === 'true' ? <div className={'protocol-wrap '}> + <Checkbox>{wrap.tip}</Checkbox>{wrap.groups.map((item, i) => (<span className="protocol" key={i}>銆妠item.label}銆�</span>))} + </div> : null} */} <div className={'login-ways ' + (activeWay.type === 'app_scan' ? 'center' : '')}> {loginWays.map(item => { if (item.type === 'app_scan' || activeWay.type === item.type) return null diff --git a/src/pc/components/login/normal-login/options.jsx b/src/pc/components/login/normal-login/options.jsx index 4d5b6aa..bcdbea9 100644 --- a/src/pc/components/login/normal-login/options.jsx +++ b/src/pc/components/login/normal-login/options.jsx @@ -57,6 +57,23 @@ ] }, { + type: 'select', + field: 'linkmenu', + label: '鍏宠仈鑿滃崟', + initval: wrap.linkmenu || '', + required: true, + options: menulist + }, + { + type: 'select', // $楠岃瘉鐮�$ $mob$ $send_type$ + field: 'tempId', + label: '鐭俊妯℃澘', + initval: wrap.tempId || '', + tooltip: '鐭俊妯℃澘鍙湪 浜戠郴缁�->搴旂敤鏈嶅姟->寮�鍙戣�呬腑蹇�->鐭俊妯℃澘 澶勬坊鍔犮��', + required: true, + options: msgTemps + }, + { type: 'number', field: 'width', label: '瀹藉害', @@ -87,37 +104,20 @@ required: false, options: ['px', 'vh', 'vw', '%'] }, - { - type: 'radio', - field: 'link', - label: '閾炬帴', - initval: wrap.link || 'menu', - required: false, - options: [ - {value: 'menu', label: '鑿滃崟'}, - {value: 'linkmenu', label: '鍏宠仈鑿滃崟'}, - ], - controlFields: [ - {field: 'linkmenu', values: ['linkmenu']} - ] - }, - { - type: 'select', - field: 'linkmenu', - label: '鍏宠仈鑿滃崟', - initval: wrap.linkmenu || '', - required: true, - options: menulist - }, - { - type: 'select', // $楠岃瘉鐮�$ $mob$ $send_type$ - field: 'tempId', - label: '鐭俊妯℃澘', - initval: wrap.tempId || '', - tooltip: '鐭俊妯℃澘鍙湪绠$悊绯荤粺 HS-濂囦簯鐭俊妯℃澘 澶勬坊鍔犮��', - required: true, - options: msgTemps - }, + // { + // type: 'radio', + // field: 'link', + // label: '閾炬帴', + // initval: wrap.link || 'menu', + // required: false, + // options: [ + // {value: 'menu', label: '鑿滃崟'}, + // {value: 'linkmenu', label: '鍏宠仈鑿滃崟'}, + // ], + // controlFields: [ + // {field: 'linkmenu', values: ['linkmenu']} + // ] + // }, { type: 'radio', field: 'shortcut', @@ -131,6 +131,56 @@ {value: 'autologon', label: '鑷姩鐧诲綍'}, ] }, + // { + // type: 'radio', + // field: 'protocol', + // label: '鍗忚', + // initval: wrap.protocol || 'false', + // required: false, + // options: [ + // {value: 'false', label: '鏃�'}, + // {value: 'true', label: '鏈�'}, + // ], + // controlFields: [ + // {field: 'tip', values: ['true']}, + // {field: 'groups', values: ['true']}, + // ] + // }, + // { + // type: 'text', + // field: 'tip', + // label: '鎻愮ず鏂囧瓧', + // initval: wrap.tip || '鎴戝凡闃呰骞跺悓鎰�', + // required: true + // }, + // { + // type: 'table', + // field: 'groups', + // label: '鍗忚缁�', + // initval: wrap.groups || [], + // required: true, + // span: 24, + // columns: [ + // { + // title: '鏂囨湰', + // dataIndex: 'label', + // inputType: 'input', + // editable: true, + // unique: true, + // required: true, + // width: '35%' + // }, + // { + // title: '閾炬帴', + // dataIndex: 'link', + // inputType: 'input', + // editable: true, + // unique: true, + // required: true, + // width: '40%' + // }, + // ] + // } ] return wrapForm diff --git a/src/pc/components/navbar/normal-navbar/index.jsx b/src/pc/components/navbar/normal-navbar/index.jsx index 6e1d078..4c560c4 100644 --- a/src/pc/components/navbar/normal-navbar/index.jsx +++ b/src/pc/components/navbar/normal-navbar/index.jsx @@ -1,13 +1,11 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Popover, Menu, Button } from 'antd' +import { Popover, Menu, Button } from 'antd' +import { EditOutlined, FontColorsOutlined, DeleteOutlined, ToolOutlined } from '@ant-design/icons' import asyncIconComponent from '@/utils/asyncIconComponent' - import MKEmitter from '@/utils/events.js' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import getWrapForm from './options' import './index.scss' @@ -25,7 +23,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, card: null, back: false } @@ -182,18 +179,18 @@ <MenuComponent config={card} updateConfig={this.updateComponent} /> <LinkComponent config={card} updateConfig={this.updateComponent} /> <NormalForm title="瀵艰埅鏍忚缃�" width={800} update={this.updateWrap} getForms={this.getWrapForms}> - <Icon type="edit" style={{color: '#1890ff'}} title="缂栬緫"/> + <EditOutlined style={{color: '#1890ff'}} title="缂栬緫"/> </NormalForm> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle} type="font-colors" /> - <Icon className="close" title="鍒犻櫎缁勪欢" type="delete" onClick={() => this.props.deletecomponent(card.uuid)} /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeStyle}/> + <DeleteOutlined className="close" title="鍒犻櫎缁勪欢" onClick={() => this.props.deletecomponent(card.uuid)} /> </div> } trigger="hover"> - <Icon type="tool" /> + <ToolOutlined /> </Popover> <div className="navbar-wrap" style={{width: card.wrap.width + 'px', height: card.wrap.height + 'px', lineHeight: card.wrap.height + 'px'}}> {card.wrap.logo ? <Popover overlayClassName="mk-popover-control-wrap top-menu-popover" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="style" title="璋冩暣鏍峰紡" onClick={this.changeLogoStyle} type="font-colors" /> + <FontColorsOutlined className="style" title="璋冩暣鏍峰紡" onClick={this.changeLogoStyle}/> </div> } trigger="hover"> <div className={'logo' + (card.wrap.logolink ? ' pointer' : '')} style={card.logoStyle} onDoubleClick={this.changeLogoMenu}><img src={card.wrap.logo} alt=""/></div> diff --git a/src/pc/components/navbar/normal-navbar/linksetting/index.jsx b/src/pc/components/navbar/normal-navbar/linksetting/index.jsx index 28bc15c..fa5449b 100644 --- a/src/pc/components/navbar/normal-navbar/linksetting/index.jsx +++ b/src/pc/components/navbar/normal-navbar/linksetting/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal } from 'antd' +import { Modal } from 'antd' +import { LinkOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -36,7 +37,7 @@ return ( <div className="model-link-setting-wrap"> - <Icon type="link" title="閾炬帴" onClick={() => this.setState({ visible: true })}/> + <LinkOutlined title="閾炬帴" onClick={() => this.setState({ visible: true })}/> <Modal wrapClassName="popview-modal" title="閾炬帴缂栬緫" diff --git a/src/pc/components/navbar/normal-navbar/linksetting/linktable/index.jsx b/src/pc/components/navbar/normal-navbar/linksetting/linktable/index.jsx index f4a693c..6a2d85a 100644 --- a/src/pc/components/navbar/normal-navbar/linksetting/linktable/index.jsx +++ b/src/pc/components/navbar/normal-navbar/linksetting/linktable/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Table, Button, Modal, Icon } from 'antd' +import { Table, Button, Modal } from 'antd' +import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons' import LinkForm from '../linkform' import Utils from '@/utils/utils.js' @@ -34,8 +35,8 @@ (<div> <Button type="link" style={{padding: '0 5px', marginRight: '5px'}} onClick={() => this.editMenu(record)}>缂栬緫</Button> <Button type="link" style={{color: '#ff4d4f', padding: '0 5px', marginRight: '5px'}} onClick={() => this.delMenu(record)}>鍒犻櫎</Button> - <Icon type="arrow-up" style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/> - <Icon type="arrow-down" style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/> + <ArrowUpOutlined style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/> + <ArrowDownOutlined style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/> </div>) } ] diff --git a/src/pc/components/navbar/normal-navbar/menusetting/index.jsx b/src/pc/components/navbar/normal-navbar/menusetting/index.jsx index 18f00b1..f965b23 100644 --- a/src/pc/components/navbar/normal-navbar/menusetting/index.jsx +++ b/src/pc/components/navbar/normal-navbar/menusetting/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal } from 'antd' +import { Modal } from 'antd' +import { MenuOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -37,7 +38,7 @@ return ( <div className="model-menu-setting-wrap"> - <Icon type="menu" title="鑿滃崟" onClick={() => this.setState({ visible: true })}/> + <MenuOutlined title="鑿滃崟" onClick={() => this.setState({ visible: true })}/> <Modal wrapClassName="popview-modal" title="鑿滃崟缂栬緫" diff --git a/src/pc/components/navbar/normal-navbar/menusetting/menutable/index.jsx b/src/pc/components/navbar/normal-navbar/menusetting/menutable/index.jsx index 26f5f43..8891018 100644 --- a/src/pc/components/navbar/normal-navbar/menusetting/menutable/index.jsx +++ b/src/pc/components/navbar/normal-navbar/menusetting/menutable/index.jsx @@ -1,11 +1,11 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Table, Button, Modal, Icon } from 'antd' +import { Table, Button, Modal } from 'antd' +import { PlusOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons' import MenuForm from '../menuform' import Utils from '@/utils/utils.js' -// import MKEmitter from '@/utils/events.js' import './index.scss' const { confirm } = Modal @@ -42,8 +42,8 @@ (<div> <Button type="link" style={{padding: '0 5px', marginRight: '5px'}} onClick={() => this.editMenu(record)}>缂栬緫</Button> <Button type="link" style={{color: '#ff4d4f', padding: '0 5px', marginRight: '5px'}} onClick={() => this.delMenu(record)}>鍒犻櫎</Button> - <Icon type="arrow-up" style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/> - <Icon type="arrow-down" style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/> + <ArrowUpOutlined style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/> + <ArrowDownOutlined style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/> </div>) } ] @@ -164,7 +164,7 @@ return ( <div className="thdmenu-control-wrap"> - <Icon type="plus" style={{color: '#26C281', padding: '5px', fontSize: '16px'}} onClick={this.plusMenu}/> + <PlusOutlined style={{color: '#26C281', padding: '5px', fontSize: '16px'}} onClick={this.plusMenu}/> <Table rowKey="MenuID" size="small" @@ -224,8 +224,8 @@ (<div> <Button type="link" style={{padding: '0 5px', marginRight: '5px'}} onClick={() => this.editMenu(record)}>缂栬緫</Button> <Button type="link" style={{color: '#ff4d4f', padding: '0 5px', marginRight: '5px'}} onClick={() => this.delMenu(record)}>鍒犻櫎</Button> - <Icon type="arrow-up" style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/> - <Icon type="arrow-down" style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/> + <ArrowUpOutlined style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/> + <ArrowDownOutlined style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/> </div>) } ] @@ -362,7 +362,7 @@ return ( <div className="submenu-control-wrap"> - <Icon type="plus" style={{color: '#26C281', padding: '5px', fontSize: '16px'}} onClick={this.plusMenu}/> + <PlusOutlined style={{color: '#26C281', padding: '5px', fontSize: '16px'}} onClick={this.plusMenu}/> <Table size="middle" rowKey="MenuID" @@ -423,8 +423,8 @@ (<div> <Button type="link" style={{padding: '0 5px', marginRight: '5px'}} onClick={() => this.editMenu(record)}>缂栬緫</Button> <Button type="link" style={{color: '#ff4d4f', padding: '0 5px', marginRight: '5px'}} onClick={() => this.delMenu(record)}>鍒犻櫎</Button> - <Icon type="arrow-up" style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/> - <Icon type="arrow-down" style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/> + <ArrowUpOutlined style={{color: '#26C281', cursor: 'pointer', padding: '0 5px', marginRight: '5px'}} onClick={() => this.moveUp(record)}/> + <ArrowDownOutlined style={{color: '#ff4d4f', cursor: 'pointer', padding: '0 5px'}} onClick={() => this.moveDown(record)}/> </div>) } ] diff --git a/src/pc/createview/index.jsx b/src/pc/createview/index.jsx index a297cd1..bff41f3 100644 --- a/src/pc/createview/index.jsx +++ b/src/pc/createview/index.jsx @@ -71,7 +71,10 @@ tables: [], components: [], viewType: 'menu', - style: {} + statusBarbgColor: sessionStorage.getItem('sysBgColor') || '#ffffff', + style: { + backgroundColor: sessionStorage.getItem('sysBgColor') || '#ffffff' + } } let param = { @@ -163,6 +166,7 @@ config.components = MenuUtils.resetConfig(_config.components) config.tables = _config.tables || [] config.style = _config.style || {} + config.statusBarbgColor = _config.statusBarbgColor || '' } param.LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(config))) diff --git a/src/pc/modulesource/dragsource/index.jsx b/src/pc/modulesource/dragsource/index.jsx index 0f13372..7b5a6ea 100644 --- a/src/pc/modulesource/dragsource/index.jsx +++ b/src/pc/modulesource/dragsource/index.jsx @@ -1,13 +1,13 @@ import React from 'react' import { useDrag } from 'react-dnd' -import { Icon } from 'antd' +import { CloseCircleOutlined } from '@ant-design/icons' import './index.scss' const MobSourceElement = ({item, triggerDel}) => { const [, drag] = useDrag({ item }) return ( <div className="menu-source-item"> - <div className="property"><span>{item.title}</span>{item.config ? <Icon onClick={() => triggerDel(item)} type="close-circle" /> : null}</div> + <div className="property"><span>{item.title}</span>{item.config ? <CloseCircleOutlined onClick={() => triggerDel(item)}/> : null}</div> <img ref={drag} src={item.url} alt=""/> </div> ) diff --git a/src/pc/transfer/index.jsx b/src/pc/transfer/index.jsx index 655e0a9..8cb6de5 100644 --- a/src/pc/transfer/index.jsx +++ b/src/pc/transfer/index.jsx @@ -3,8 +3,6 @@ import { is, fromJS } from 'immutable' import { Button, Modal, notification } from 'antd' -import zhCN from '@/locales/zh-CN/model.js' -import enUS from '@/locales/en-US/model.js' import SettingForm from './settingform' import Api from '@/api' @@ -14,7 +12,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, visible: false, loading: false, translist: [] @@ -101,7 +98,7 @@ } render () { - const { visible, dict, loading, translist } = this.state + const { visible, loading, translist } = this.state return ( <div className="transfer-wrap"> @@ -111,14 +108,13 @@ visible={visible} width={500} maskClosable={false} - okText={dict['model.submit']} + okText="鎻愪氦" onOk={this.verifySubmit} onCancel={() => { this.setState({ visible: false }) }} confirmLoading={loading} destroyOnClose > <SettingForm - dict={dict} translist={translist} wrappedComponentRef={(inst) => this.verifyRef = inst} /> diff --git a/src/pc/transfer/settingform/index.jsx b/src/pc/transfer/settingform/index.jsx index 614887c..d4698f1 100644 --- a/src/pc/transfer/settingform/index.jsx +++ b/src/pc/transfer/settingform/index.jsx @@ -6,7 +6,6 @@ class SettingForm extends Component { static propTpyes = { - dict: PropTypes.object, translist: PropTypes.array, } diff --git a/src/router/index.js b/src/router/index.js index 78c75a3..204b72b 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -16,6 +16,7 @@ const AppCheck = asyncLoadComponent(() => import('@/views/appcheck')) const PCDesign = asyncLoadComponent(() => import('@/views/pcdesign')) const MobDesign = asyncLoadComponent(() => import('@/views/mobdesign')) +const ImDesign = asyncLoadComponent(() => import('@/views/imdesign')) const MenuDesign = asyncLoadComponent(() => import('@/views/menudesign')) const BillPrint = asyncLoadComponent(() => import('@/views/billprint')) const PrintT = asyncLoadComponent(() => import('@/views/printTemplate')) @@ -33,6 +34,7 @@ {path: '/appcheck', name: 'appcheck', component: AppCheck, auth: true}, {path: '/pcdesign/:param', name: 'pcdesign', component: PCDesign, auth: true}, {path: '/mobdesign/:param', name: 'mobdesign', component: MobDesign, auth: true}, + {path: '/imdesign/:param', name: 'imdesign', component: ImDesign, auth: true}, {path: '/menudesign/:param', name: 'menudesign', component: MenuDesign, auth: true}, {path: '/billprint/:param', name: 'billprint', component: BillPrint, auth: true}, {path: '/paramsmain/:param', name: 'pmain', component: Main, auth: true}, diff --git a/src/tabviews/commontable/index.jsx b/src/tabviews/commontable/index.jsx index a330fc1..c11195d 100644 --- a/src/tabviews/commontable/index.jsx +++ b/src/tabviews/commontable/index.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { notification, Spin, Tabs, Icon, Switch, Row, Col } from 'antd' +import { notification, Spin, Tabs, Switch, Row, Col } from 'antd' import Api from '@/api' import zhCN from '@/locales/zh-CN/main.js' @@ -13,6 +13,7 @@ import { updateCommonTable } from '@/utils/utils-update.js' import asyncComponent from '@/utils/asyncComponent' import asyncSpinComponent from '@/utils/asyncSpinComponent' +import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import NotFount from '@/components/404' import './index.scss' @@ -399,6 +400,14 @@ }) } + if (config.setting.controlField) { + if (config.setting.controlVal) { + config.setting.controlVal = config.setting.controlVal.split(',') + } else { + config.setting.controlVal = [''] + } + } + this.setState({ pageSize: config.setting.pageSize || 10, loadingview: false, @@ -731,8 +740,15 @@ item.key = index item.$$uuid = item[setting.primaryKey] || '' + item.$$key = '' + item.key + item.$$uuid item.$$BID = BID || '' item.$Index = start + index + '' + + if (setting.controlField) { + if (setting.controlVal.includes(item[setting.controlField])) { + item.$disabled = true + } + } return item }), @@ -798,6 +814,7 @@ data = data.map(item => { if (item.$$uuid === _data.$$uuid) { _data.key = item.key + _data.$$key = '' + item.key + item.$$uuid _data.$Index = item.$Index return _data } else { @@ -955,7 +972,7 @@ reloadview = () => { this.setState({ loadingview: true, viewlost: false, config: {}, setting: null, data: null, total: 0, loading: false, pageIndex: 1, shortcuts: null, - pageSize: 10, orderBy: '', search: '', BIDs: {}, pickup: false + pageSize: 10, orderBy: '', search: '', BIDs: {}, pickup: false, searchlist: null }, () => { this.loadconfig() }) @@ -1114,7 +1131,7 @@ {/* 瑙嗗浘缁� */} {!config.expand ? <Tabs activeKey={chartId} onChange={this.changeChart}> {config.charts.map(item => ( - <TabPane tab={<Icon type={item.icon} />} key={item.uuid}></TabPane> + <TabPane tab={<MkIcon type={item.icon} />} key={item.uuid}></TabPane> ))} </Tabs> : null} {config.charts.map(item => { @@ -1196,7 +1213,7 @@ return ( <TabPane tab={ <span id={_tab.uuid}> - {_tab.icon ? <Icon type={_tab.icon} /> : null} + {_tab.icon ? <MkIcon type={_tab.icon} /> : null} {_tab.label} </span> } key={_tab.uuid}> diff --git a/src/tabviews/commontable/index.scss b/src/tabviews/commontable/index.scss index b35a9f4..242cdf2 100644 --- a/src/tabviews/commontable/index.scss +++ b/src/tabviews/commontable/index.scss @@ -49,7 +49,7 @@ padding: 0 10px; font-size: 15px; border-bottom: 1px solid #1890ff; - i { + .anticon { margin-right: 10px; } } diff --git a/src/tabviews/custom/components/card/cardcellList/asyncButtonComponent.jsx b/src/tabviews/custom/components/card/cardcellList/asyncButtonComponent.jsx index 9c160c8..b4313e8 100644 --- a/src/tabviews/custom/components/card/cardcellList/asyncButtonComponent.jsx +++ b/src/tabviews/custom/components/card/cardcellList/asyncButtonComponent.jsx @@ -1,6 +1,4 @@ import React, {Component} from 'react' -import { Button } from 'antd' - /** * @description 寮傛鍔犺浇妯″潡 * @param {*} importComponent @@ -24,11 +22,8 @@ // <Button className="loading-skeleton" disabled={true}></Button> // 楠ㄦ灦鎸夐挳 render() { const C = this.state.component - const btn = this.props.btn || {} - return C ? - <C {...this.props} /> : - <Button className={'mk-btn mk-' + btn.class} type={btn.show !== 'button' ? 'link' : ''} icon={btn.icon} disabled={true} >{btn.label}</Button> + return C ? <C {...this.props} /> : null } } } \ No newline at end of file diff --git a/src/tabviews/custom/components/card/cardcellList/index.jsx b/src/tabviews/custom/components/card/cardcellList/index.jsx index a1160b1..5608b31 100644 --- a/src/tabviews/custom/components/card/cardcellList/index.jsx +++ b/src/tabviews/custom/components/card/cardcellList/index.jsx @@ -1,12 +1,13 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Col, Tooltip, notification } from 'antd' +import { Col, Tooltip, notification } from 'antd' import moment from 'moment' import asyncComponent from './asyncButtonComponent' import asyncElementComponent from '@/utils/asyncComponent' - +import { getMark } from '@/utils/utils.js' +import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import LostPng from '@/assets/img/lost.png' import './index.scss' @@ -90,6 +91,19 @@ return } + if (card.linkType === 'tel') { + window.open('tel:' + url) + return + } else if (card.linkType === 'email') { + let _url = 'mailto:' + url + let fullName = sessionStorage.getItem('Full_Name') || '' + if (fullName) { + _url = _url + `?subject=鏉ヨ嚜${fullName}鐨勯偖浠禶 + } + window.open(_url) + return + } + if (/^sso$/ig.test(url)) { if (!data.LinkUrl1) { notification.warning({ @@ -139,79 +153,6 @@ window.open(url) } - getMark = (marks, style, content) => { - const { data } = this.props - - marks.some(mark => { - let originVal = data[mark.field[0]] + '' - let contrastVal = '' - let result = false - - if (mark.field[1] === 'static') { - contrastVal = mark.contrastValue + '' - } else { - contrastVal = data[mark.field[2]] + '' - } - - if (mark.match === '=') { - result = originVal === contrastVal - } else if (mark.match === '!=') { - result = originVal !== contrastVal - } else if (mark.match === 'like') { - result = originVal.indexOf(contrastVal) > -1 - } else if (mark.match === '>') { - try { - originVal = parseFloat(originVal) - contrastVal = parseFloat(contrastVal) - } catch (e) { - originVal = NaN - } - - if (!isNaN(originVal) && !isNaN(contrastVal) && originVal > contrastVal) { - result = true - } - } else if (mark.match === '<') { - try { - originVal = parseFloat(originVal) - contrastVal = parseFloat(contrastVal) - } catch (e) { - originVal = NaN - } - - if (!isNaN(originVal) && !isNaN(contrastVal) && originVal < contrastVal) { - result = true - } - } - - if (result && mark.signType) { - if (mark.signType[0] === 'font') { - style.color = mark.color - } else if (mark.signType[0] === 'background') { - style.background = mark.color - if (mark.fontColor) { - style.color = mark.fontColor - } - } else if (mark.signType[0] === 'underline') { - style.textDecoration = 'underline' - style.color = mark.color - } else if (mark.signType[0] === 'line-through') { - style.textDecoration = 'line-through' - style.color = mark.color - } else if (mark.signType[0] === 'icon') { - let icon = (<Icon style={{color: mark.color}} type={mark.signType[3]} />) - if (mark.signType[1] === 'front') { - content = <span>{icon} {content}</span> - } else { - content = <span>{content} {icon}</span> - } - } - } - return result - }) - - return content - } - getColor = (marks) => { const { data } = this.props let color = '' @@ -234,27 +175,9 @@ } else if (mark.match === 'like') { result = originVal.indexOf(contrastVal) > -1 } else if (mark.match === '>') { - try { - originVal = parseFloat(originVal) - contrastVal = parseFloat(contrastVal) - } catch (e) { - originVal = NaN - } - - if (!isNaN(originVal) && !isNaN(contrastVal) && originVal > contrastVal) { - result = true - } + result = parseFloat(originVal) > parseFloat(contrastVal) } else if (mark.match === '<') { - try { - originVal = parseFloat(originVal) - contrastVal = parseFloat(contrastVal) - } catch (e) { - originVal = NaN - } - - if (!isNaN(originVal) && !isNaN(contrastVal) && originVal < contrastVal) { - result = true - } + result = parseFloat(originVal) < parseFloat(contrastVal) } if (result) { @@ -275,7 +198,10 @@ _style.width = card.innerHeight _style.height = card.innerHeight _style.lineHeight = card.innerHeight + 'px' - this.getMark(card.marks, _style) + + let mark = getMark(card.marks, data, _style) + + _style = mark.style } return ( <Col key={card.uuid} span={card.width}> @@ -305,8 +231,61 @@ } if (val !== '' && card.format) { - if (card.format === 'YYYY-MM-DD' && /^[1-9]\d{3}(-|\/)(0[1-9]|1[0-2])(-|\/)(0[1-9]|[1-2][0-9]|3[0-1])/.test(val)) { - val = `${val.substr(0, 4)}-${val.substr(5, 2)}-${val.substr(8, 2)}` + let _val = null + + if (card.format === 'calendar1') { + _val = moment(val).calendar(null, { + sameDay: '[浠婂ぉ] ahh:mm', + nextDay: '[鏄庡ぉ] ahh:mm', + nextWeek: 'MM鏈圖D鏃� ahh:mm', + lastDay: '[鏄ㄥぉ] ahh:mm', + lastWeek: 'dddd ahh:mm', + sameElse: 'MM鏈圖D鏃� ahh:mm' + }) + } else if (card.format === 'calendar2') { + let time = new Date(val).getTime() + if (!isNaN(time)) { + time = parseInt(time / 60000) // 鏃堕棿鍊� + let now = parseInt(new Date().getTime() / 60000) // 褰撳墠鏃堕棿鍊� + let start = new Date(new Date().toDateString()).getTime() / 60000 // 浠婂ぉ闆剁偣鏃堕棿鍊� + let split = now - time + + if (split < 0) { // 鏃堕棿鍊煎湪褰撳墠鏃堕棿涔嬪悗 + _val = moment(val).format('MM鏈圖D鏃� HH:mm') + } else if (split < 3) { + _val = '鍒氬垰' + } else if (split < 5) { + _val = '3鍒嗛挓鍓�' + } else if (split < 10) { + _val = '5鍒嗛挓鍓�' + } else if (split < 20) { + _val = '10鍒嗛挓鍓�' + } else if (split < 30) { + _val = '20鍒嗛挓鍓�' + } else if (split < 60) { + _val = '30鍒嗛挓鍓�' + } else if (split < 420 || time > start) { // 7灏忔椂鍐呮垨鏃堕棿鍊煎湪浠婂ぉ闆剁偣鍚� + _val = parseInt(split / 60) + '灏忔椂鍓�' + } else { // 鏃堕棿鍊煎湪浠婂ぉ闆剁偣涔嬪墠 + let _day = parseInt((start - time) / (24 * 60)) + 1 + if (_day === 1) { + _val = '鏄ㄥぉ' + } else if (_day <= 30) { + _val = _day + '澶╁墠' + } else { + _val = moment(val).format('MM鏈圖D鏃� HH:mm') + } + } + } + } else { + _val = moment(val).format(card.format) + } + + // if (card.format === 'YYYY-MM-DD' && /^[1-9]\d{3}(-|\/)(0[1-9]|1[0-2])(-|\/)(0[1-9]|[1-2][0-9]|3[0-1])/.test(val)) { + // val = `${val.substr(0, 4)}-${val.substr(5, 2)}-${val.substr(8, 2)}` + // } + if (_val && _val !== 'Invalid date') { + val = _val } } @@ -315,7 +294,17 @@ } if (card.marks) { - val = this.getMark(card.marks, _style, val) + let mark = getMark(card.marks, data, _style) + + _style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + val = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {val}</span> + } else { + val = <span>{val} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } if (card.link) { @@ -339,9 +328,11 @@ val = data[card.field] } - if (val !== '' && typeof(val) === 'number') { + if (typeof(val) === 'number') { if (card.format === 'percent') { val = val * 100 + } else if (card.format === 'abs') { + val = Math.abs(val) } if (card.col && card.col.type === 'number') { @@ -371,7 +362,17 @@ } if (card.marks) { - val = this.getMark(card.marks, _style, val) + let mark = getMark(card.marks, data, _style) + + _style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + val = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {val}</span> + } else { + val = <span>{val} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } return ( @@ -394,8 +395,8 @@ <Col key={card.uuid} span={card.width}> <div style={card.style}> {val ? <Tooltip title={val}> - <Icon type={card.icon}/> - </Tooltip> : <Icon type={card.icon}/>} + <MkIcon type={card.icon}/> + </Tooltip> : <MkIcon type={card.icon}/>} </div> </Col> ) @@ -628,7 +629,17 @@ } if (card.marks) { - val = this.getMark(card.marks, _style, val) + let mark = getMark(card.marks, data, _style) + + _style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + val = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {val}</span> + } else { + val = <span>{val} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } return ( @@ -648,18 +659,22 @@ let _data = [data] - if (data.$$type === 'extendCard' || data.$$empty) { + if (data.$$type === 'extendCard') { + _data = data.$$selectedData || [] + } else if (data.$$empty) { _data = [] } else if (card.$sync) { _data = this.props.syncData } - if (['exec', 'prompt', 'pop'].includes(card.OpenType)) { + if (['exec', 'prompt', 'pop', 'form'].includes(card.OpenType)) { return ( - <Col key={card.uuid} className="mk-cell-btn" span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> <NormalButton BID={data.$$BID} BData={data.$$BData || ''} + disabled={data.$disabled} + lineId={data.$$key || ''} btn={card} show={card.show} style={card.style} @@ -671,9 +686,12 @@ ) } else if (card.OpenType === 'excelIn') { return ( - <Col key={card.uuid} className="mk-cell-btn" span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> <ExcelInButton BID={data.$$BID} + BData={data.$$BData || ''} + disabled={data.$disabled} + lineId={data.$$key || ''} btn={card} show={card.show} style={card.style} @@ -684,9 +702,12 @@ ) } else if (card.OpenType === 'excelOut') { return ( - <Col key={card.uuid} className="mk-cell-btn" span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> <ExcelOutButton BID={data.$$BID} + BData={data.$$BData || ''} + lineId={data.$$key || ''} + disabled={data.$disabled} btn={card} show={card.show} style={card.style} @@ -696,10 +717,12 @@ ) } else if (card.OpenType === 'popview') { return ( - <Col key={card.uuid} className="mk-cell-btn" span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> <PopupButton BID={data.$$BID} BData={data.$$BData || ''} + disabled={data.$disabled} + lineId={data.$$key || ''} btn={card} show={card.show} style={card.style} @@ -710,8 +733,11 @@ ) } else if (card.OpenType === 'tab') { return ( - <Col key={card.uuid} className="mk-cell-btn" span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> <TabButton + BData={data.$$BData || ''} + disabled={data.$disabled} + lineId={data.$$key || ''} btn={card} show={card.show} style={card.style} @@ -722,8 +748,11 @@ ) } else if (card.OpenType === 'innerpage') { return ( - <Col key={card.uuid} className="mk-cell-btn" span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> <NewPageButton + BData={data.$$BData || ''} + disabled={data.$disabled} + lineId={data.$$key || ''} btn={card} show={card.show} style={card.style} @@ -735,9 +764,12 @@ } else if (card.OpenType === 'funcbutton') { if (card.funcType === 'changeuser' || card.funcType === 'closetab') { return ( - <Col key={card.uuid} className="mk-cell-btn" span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> <ChangeUserButton BID={data.$$BID} + BData={data.$$BData || ''} + disabled={data.$disabled} + lineId={data.$$key || ''} btn={card} show={card.show} style={card.style} @@ -748,10 +780,12 @@ ) } else if (card.funcType === 'print') { return ( - <Col key={card.uuid} className="mk-cell-btn" span={card.width}> + <Col key={card.uuid} className="mk-cell-btn" style={card.wrapStyle} span={card.width}> <PrintButton BID={data.$$BID} BData={data.$$BData || ''} + disabled={data.$disabled} + lineId={data.$$key || ''} btn={card} show={card.show} style={card.style} diff --git a/src/tabviews/custom/components/card/cardcellList/index.scss b/src/tabviews/custom/components/card/cardcellList/index.scss index 0a10c7a..f48154a 100644 --- a/src/tabviews/custom/components/card/cardcellList/index.scss +++ b/src/tabviews/custom/components/card/cardcellList/index.scss @@ -59,11 +59,16 @@ } .mk-cell-btn { > div {width: 100%;max-width: 100%;} - button { + button:not(.ant-switch) { width: 100%; max-width: 100%; height: auto; min-height: 28px; + padding: 0; + overflow: hidden; + } + .ant-checkbox-inner, .ant-checkbox-checked::after { + border-radius: 15px; } } .ant-mk-slider { diff --git a/src/tabviews/custom/components/card/data-card/index.jsx b/src/tabviews/custom/components/card/data-card/index.jsx index 5b91693..704b8bc 100644 --- a/src/tabviews/custom/components/card/data-card/index.jsx +++ b/src/tabviews/custom/components/card/data-card/index.jsx @@ -41,7 +41,9 @@ total: null, precards: [], nextcards: [], - selected: 'false' + selected: 'false', + supNodes: [], + supComs: null } UNSAFE_componentWillMount () { @@ -51,6 +53,14 @@ let _card = null let precards = [] let nextcards = [] + + if (_config.wrap.controlField) { + if (_config.wrap.controlVal) { + _config.wrap.controlVal = _config.wrap.controlVal.split(',') + } else { + _config.wrap.controlVal = [''] + } + } _config.subcards.forEach(item => { if (item.setting.click === 'button' && !item.setting.linkbtn) { @@ -114,6 +124,12 @@ item.$$BID = BID || '' item.$$BData = BData || '' item.$Index = index + 1 + '' + + if (_config.wrap.controlField) { + if (_config.wrap.controlVal.includes(item[_config.wrap.controlField])) { + item.$disabled = true + } + } return item }) @@ -144,7 +160,18 @@ return item }) + let supComs = null + if (_config.wrap.supType === 'multi') { + supComs = _config.supNodes.map(item => item.componentId) + } + + _config.wrap.selStyle = _config.wrap.selStyle || 'active' + _config.wrap.scale = _config.wrap.scale === 'true' ? 'scale' : '' + + _config.wrap.wrapClass = `${_config.wrap.selStyle} ${_config.wrap.cardType || ''} ${_config.wrap.scale}` + this.setState({ + supComs, selected, precards, nextcards, @@ -188,6 +215,13 @@ item.$$BID = BID || '' item.$$BData = BData || '' item.$Index = index + 1 + '' + + if (config.wrap.controlField) { + if (config.wrap.controlVal.includes(item[config.wrap.controlField])) { + item.$disabled = true + } + } + return item }) @@ -227,7 +261,7 @@ * @param {*} btn // 鎵ц鐨勬寜閽� */ refreshByButtonResult = (menuId, position, btn, id, lines) => { - const { config, BID } = this.state + const { config, BID, supComs, supNodes } = this.state if (config.uuid !== menuId) return @@ -243,22 +277,45 @@ this.loadData() } - if (btn.syncComponentId && btn.syncComponentId !== config.uuid && btn.syncComponentId !== config.setting.supModule) { - MKEmitter.emit('reloadData', btn.syncComponentId) // 鍚岀骇鏍囩鍒锋柊 - } - if (position === 'mainline' && config.setting.supModule) { // 涓昏〃琛屽埛鏂� - MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) - } else if (position === 'popclose') { // 鏍囩鍏抽棴鍒锋柊 - config.setting.supModule && MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) - btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId) + if (supComs) { + if (btn.syncComponentId && btn.syncComponentId !== config.uuid && !supComs.includes(btn.syncComponentId)) { + MKEmitter.emit('reloadData', btn.syncComponentId) // 鍚岀骇鏍囩鍒锋柊 + } + + if (position === 'mainline' || position === 'popclose') { // 涓昏〃琛屽埛鏂� + let supNode = supNodes[supNodes.length - 1] + supComs.forEach((item, i) => { + setTimeout(() => { + if (supNode && supNode.key === item) { + MKEmitter.emit('reloadData', item, supNode.value) + } else { + MKEmitter.emit('reloadData', item) + } + }, i * 10) + }) + if (position === 'popclose') { // 鏍囩鍏抽棴鍒锋柊 + btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId) + } + } + } else { + if (btn.syncComponentId && btn.syncComponentId !== config.uuid && btn.syncComponentId !== config.setting.supModule) { + MKEmitter.emit('reloadData', btn.syncComponentId) // 鍚岀骇鏍囩鍒锋柊 + } + + if (position === 'mainline' && config.setting.supModule) { // 涓昏〃琛屽埛鏂� + MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) + } else if (position === 'popclose') { // 鏍囩鍏抽棴鍒锋柊 + config.setting.supModule && MKEmitter.emit('reloadData', config.setting.supModule, (BID || 'empty')) + btn.$tabId && MKEmitter.emit('refreshPopButton', btn.$tabId) + } } } checkTopLine = () => { const { config, data } = this.state - if (!data || data.length === 0) { + if (!data || data.length === 0 || data[0].$disabled) { this.setState({ activeKey: '', selectKeys: [], @@ -327,13 +384,34 @@ } resetParentParam = (MenuID, id, data) => { - const { config } = this.state + const { config, supComs } = this.state - if (!config.setting.supModule || config.setting.supModule !== MenuID) return - if (id !== this.state.BID || id !== '') { - this.setState({ BID: id, BData: data, pageIndex: 1 }, () => { - this.loadData() - }) + if (supComs) { + if (!supComs.includes(MenuID)) return + let supNodes = this.state.supNodes.filter(item => item.key !== MenuID) + let bid = '' + let _data = null + + if (id) { + supNodes.push({key: MenuID, value: id, data}) + } + if (supNodes.length > 0) { + bid = supNodes[supNodes.length - 1].value + _data = supNodes[supNodes.length - 1].data + } + + if (bid !== this.state.BID || bid !== '') { + this.setState({ BID: bid, BData: _data, pageIndex: 1 }, () => { + this.loadData() + }) + } + } else { + if (!config.setting.supModule || config.setting.supModule !== MenuID) return + if (id !== this.state.BID || id !== '') { + this.setState({ BID: id, BData: data, pageIndex: 1 }, () => { + this.loadData() + }) + } } } @@ -368,7 +446,7 @@ const { mainSearch, menuType } = this.props const { config, arr_field, pageIndex, search, BID, BData, selected } = this.state - if (config.setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� + if (config.setting.supModule && !BID && config.wrap.supKey !== 'false') { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� this.setState({ activeKey: '', selectKeys: [], @@ -448,6 +526,13 @@ item.$$BID = BID || '' item.$$BData = BData || '' item.$Index = index + start + '' + + if (config.wrap.controlField) { + if (config.wrap.controlVal.includes(item[config.wrap.controlField])) { + item.$disabled = true + } + } + return item }), total: result.total, @@ -575,6 +660,7 @@ const { config, selectKeys, selectedData, activeKey, data } = this.state if (!config.wrap.cardType) return + if (item.$disabled) return let _selectKeys = [] let _selectedData = [] @@ -585,12 +671,12 @@ _selectKeys = selectKeys.filter(key => key !== index) _selectedData = selectedData.filter(cell => cell.key !== index) _activeKey = _selectKeys.slice(-1)[0] - _item = selectedData.slice(-1)[0] || '' + _item = _selectedData.slice(-1)[0] || '' } else if (selectKeys.indexOf(index) > -1) { _selectKeys = selectKeys.filter(key => key !== index) _selectedData = selectedData.filter(cell => cell.key !== index) _activeKey = activeKey - _item = selectedData.filter(cell => cell.key === activeKey)[0] || '' + _item = _selectedData.filter(cell => cell.key === activeKey)[0] || '' } else { _selectKeys = [...selectKeys, index] _selectedData = [...selectedData, item] @@ -617,6 +703,8 @@ render() { const { config, precards, nextcards, loading, data, pageIndex, total, card, activeKey, BID, BData, selectedData, selectKeys } = this.state + + if (config.wrap.empty === 'hidden' && (!data || data.length === 0)) return null let _total = 0 let switchable = false @@ -655,23 +743,34 @@ selectedData={selectedData} /> : null } - <div className={`data-zoom ${config.wrap.cardType || ''} ${config.wrap.scale || ''}`}> + <div className={`data-zoom ${config.wrap.wrapClass}`}> {switchable ? <div className={'prev-page ' + (pageIndex === 1 ? 'disabled' : '')} onClick={this.prevPage}><div><div><img src={preImg} alt=""/></div></div></div> : null} <Row className="card-row-list"> {offset ? <Col span={offset} style={{height: '10px'}}> </Col> : null} {precards.map((item, index) => ( <Col key={'pre' + index} className="extend-card" span={item.setting.width || 6}> - <CardItem card={item} cards={config} data={{$$BID: BID, $$BData: BData, $$type: 'extendCard'}}/> + <CardItem card={item} cards={config} data={{$$BID: BID, $$BData: BData, $$selectedData: selectedData, $$type: 'extendCard'}}/> </Col> ))} - {data && data.map((item, index) => ( - <Col className={(activeKey === index ? ' active' : (selectKeys.indexOf(index) > -1 ? ' selected' : '')) + (card.setting.click ? ' pointer' : '')} key={index} span={card.setting.width} onClick={() => {this.changeCard(index, item)}}> - <CardItem card={card} cards={config} data={item}/> - </Col> - ))} + {data && data.map((item, index) => { + let className = card.setting.click ? 'mk-card pointer ' : 'mk-card ' + if (item.$disabled) { + className = 'mk-disabled' + } else if (activeKey === index) { + className += 'active' + } else if (selectKeys.indexOf(index) > -1) { + className += 'selected' + } + + return ( + <Col className={className} key={index} span={card.setting.width} onClick={() => {this.changeCard(index, item)}}> + <CardItem card={card} cards={config} data={item}/> + </Col> + ) + })} {nextcards.map((item, index) => ( <Col key={'next' + index} className="extend-card" span={item.setting.width || 6}> - <CardItem card={item} cards={config} data={{$$BID: BID, $$BData: BData, $$type: 'extendCard'}}/> + <CardItem card={item} cards={config} data={{$$BID: BID, $$BData: BData, $$selectedData: selectedData, $$type: 'extendCard'}}/> </Col> ))} </Row> diff --git a/src/tabviews/custom/components/card/data-card/index.scss b/src/tabviews/custom/components/card/data-card/index.scss index 580c5b8..3cfc493 100644 --- a/src/tabviews/custom/components/card/data-card/index.scss +++ b/src/tabviews/custom/components/card/data-card/index.scss @@ -20,26 +20,39 @@ .data-zoom { display: flex; position: relative; - } - .data-zoom.radio, .data-zoom.checkbox { - .card-row-list { - >.ant-col:not(.active):not(.selected):not(.extend-card):hover { - >.card-item-box { - border-color: #69c0ff!important; - box-shadow: 0 0 4px #69c0ff!important; + .mk-disabled { + >.card-item-box { + cursor: not-allowed; + color: #bcbcbc; + .ant-mk-text, .ant-mk-date, .anticon { + color: #bcbcbc!important; } } } } - .data-zoom.true { + .data-zoom.scale { .card-row-list { - >.ant-col:not(.extend-card):hover { + .mk-card:hover { >.card-item-box { z-index: 1; transform: scale(1.05); } } } + } + .card-row-list { + flex: 10; + .mk-card.pointer { + cursor: pointer; + } + } + .card-item-box { + position: relative; + background-color: #ffffff; + transition: all 0.3s; + background-position: center center; + background-repeat: no-repeat; + background-size: cover; } .prev-page { width: 20px; @@ -68,31 +81,6 @@ content: ' '; display: block; clear: both; - } - .card-row-list { - flex: 10; - - .card-item-box { - position: relative; - background-color: #ffffff; - transition: all 0.3s; - } - >.pointer { - cursor: pointer; - } - >.active >.card-item-box { - border-color: #1890ff!important; - box-shadow: 0 0 4px #1890ff; - } - >.selected >.card-item-box { - border-color: #69c0ff!important; - box-shadow: 0 0 4px #69c0ff; - } - } - .card-item-box { - background-position: center center; - background-repeat: no-repeat; - background-size: cover; } .ant-empty { diff --git a/src/tabviews/custom/components/card/prop-card/index.jsx b/src/tabviews/custom/components/card/prop-card/index.jsx index bbd7e78..e4dc898 100644 --- a/src/tabviews/custom/components/card/prop-card/index.jsx +++ b/src/tabviews/custom/components/card/prop-card/index.jsx @@ -31,7 +31,8 @@ sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁 data: {}, // 鏁版嵁 timer: null, // 瀹氭椂鍣ㄦ椂闂撮棿闅� - BData: '' + BData: '', + selected: 'false', } UNSAFE_componentWillMount () { @@ -42,7 +43,7 @@ let _data = { $$empty: true } let _sync = false - if (_config.setting && _config.wrap.datatype !== 'static') { + if (_config.wrap.datatype !== 'static') { _sync = _config.setting.sync === 'true' if (_sync && data) { @@ -63,6 +64,9 @@ if (_data) { _data.$$BID = BID || '' _data.$$BData = BData || '' + if (_config.setting.primaryKey) { + _data.$$uuid = _data[_config.setting.primaryKey] || '' + } } _config.columns.forEach(item => { @@ -97,7 +101,7 @@ }) let offset = 0 - if (_config.wrap.cardFloat && _config.wrap.cardFloat !== 'left' && _config.subcards[0] && _width < 24) { + if (_config.wrap.cardFloat && _config.wrap.cardFloat !== 'left' && _width < 24) { offset = 24 - _width if (_config.wrap.cardFloat === 'center') { offset = Math.floor(offset / 2) @@ -105,15 +109,16 @@ _config.subcards[0].offset = offset } - if (_config.subcards[0] && (_config.wrap.selected === 'always' || _config.wrap.selected === 'init')) { - setTimeout(() => { - this.checkTopLine() - }, 200) - } + let selected = _config.wrap.selected || 'false' _config.wrap.selStyle = _config.wrap.selStyle || 'active' + _config.wrap.priKeyType = _config.wrap.priKeyType || 'static' + _config.wrap.scale = _config.wrap.scale === 'true' ? 'scale' : '' + + _config.wrap.wrapClass = `${_config.wrap.selStyle} ${_config.wrap.cardType || ''} ${_config.wrap.scale || ''}` this.setState({ + selected, sync: _sync, data: _data, BID: BID || '', @@ -121,8 +126,12 @@ config: _config, arr_field: _config.columns.map(col => col.field).join(','), }, () => { - if (_config.wrap.datatype !== 'static' && _config.setting && _config.setting.sync !== 'true' && _config.setting.onload === 'true') { + if (_config.wrap.datatype !== 'static' && _config.setting.sync !== 'true' && _config.setting.onload === 'true') { this.loadData() + } else if ((!_sync || _config.wrap.priKeyType === 'static') && selected !== 'false') { + setTimeout(() => { + this.checkTopLine() + }, 200) } }) } @@ -152,23 +161,28 @@ * @description 鍥捐〃鏁版嵁鏇存柊锛屽埛鏂板唴瀹� */ UNSAFE_componentWillReceiveProps (nextProps) { - const { sync, config, BID, BData } = this.state + const { sync, config, BID, BData, selected } = this.state if (sync && !is(fromJS(this.props.data), fromJS(nextProps.data))) { let _data = { $$empty: true } if (nextProps.data && nextProps.data[config.dataName]) { - _data = nextProps.data[config.dataName] - if (_data && Array.isArray(_data)) { - _data = _data[0] + _data = nextProps.data[config.dataName] || {} + if (Array.isArray(_data)) { + _data = _data[0] || {} } } - if (_data) { - _data.$$BID = BID || '' - _data.$$BData = BData || '' - } + _data.$$BID = BID || '' + _data.$$BData = BData || '' + _data.$$uuid = _data[config.setting.primaryKey] || '' - this.setState({sync: false, data: _data}) + this.setState({sync: false, data: _data}, () => { + if (config.wrap.priKeyType !== 'static' && selected !== 'false') { + setTimeout(() => { + this.checkTopLine() + }, 200) + } + }) } else if ( config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { this.setState({}, () => { this.loadData() @@ -177,13 +191,21 @@ } checkTopLine = () => { - const { config, data } = this.state + const { config, data, selected } = this.state this.setState({ - activeKey: 0 + activeKey: 0, + selected: selected === 'init' ? 'false' : selected }) - MKEmitter.emit('resetSelectLine', config.uuid, (config.subcards[0].setting.primaryId || ''), data) + let primaryId = config.subcards[0].setting.primaryId || '' + if (config.wrap.priKeyType === 'dynamic') { + primaryId = data.$$uuid || '' + } else if (config.wrap.priKeyType === 'joint') { + primaryId = (data.$$uuid || '') + ',' + primaryId + } + + MKEmitter.emit('resetSelectLine', config.uuid, primaryId, data) } handleTimer = () => { @@ -264,7 +286,7 @@ resetParentParam = (MenuID, id, data) => { const { config } = this.state - if (!config.setting || !config.setting.supModule || config.setting.supModule !== MenuID) return + if (!config.setting.supModule || config.setting.supModule !== MenuID) return if (id !== this.state.BID || id !== '') { this.setState({ BID: id, BData: data }, () => { this.loadData() @@ -282,7 +304,7 @@ async loadData (hastimer) { const { mainSearch, menuType } = this.props - const { config, arr_field, BID, BData } = this.state + const { config, arr_field, BID, BData, selected } = this.state if (config.wrap.datatype === 'static') { this.setState({ @@ -324,10 +346,15 @@ _data.$$BID = BID || '' _data.$$BData = BData + _data.$$uuid = _data[config.setting.primaryKey] || '' this.setState({ data: _data, loading: false + }, () => { + if (config.wrap.priKeyType !== 'static' && selected !== 'false') { + this.checkTopLine() + } }) if (config.timer && config.clearField) { @@ -358,7 +385,14 @@ activeKey: index }) - MKEmitter.emit('resetSelectLine', config.uuid, (item.setting.primaryId || ''), data) + let primaryId = item.setting.primaryId || '' + if (config.wrap.priKeyType === 'dynamic') { + primaryId = data.$$uuid || '' + } else if (config.wrap.priKeyType === 'joint') { + primaryId = (data.$$uuid || '') + ',' + primaryId + } + + MKEmitter.emit('resetSelectLine', config.uuid, primaryId, data) } render() { @@ -373,12 +407,19 @@ </div> : null } <NormalHeader config={config}/> - <Row className={`card-row-list ${config.wrap.cardType || ''} ${config.wrap.scale || ''}`}> - {config.subcards.map((item, index) => ( - <Col className={(activeKey === index ? config.wrap.selStyle : '') + (item.setting.click ? ' pointer' : '')} key={index} span={item.setting.width || 6} offset={item.offset || 0} onClick={() => {this.changeCard(index, item)}}> - <CardItem card={item} cards={config} data={data}/> - </Col> - ))} + <Row className={`card-row-list data-zoom ${config.wrap.wrapClass}`}> + {config.subcards.map((item, index) => { + let className = item.setting.click ? 'mk-card pointer ' : 'mk-card ' + if (activeKey === index) { + className += 'active' + } + + return ( + <Col className={className} key={index} span={item.setting.width || 6} offset={item.offset || 0} onClick={() => {this.changeCard(index, item)}}> + <CardItem card={item} cards={config} data={data}/> + </Col> + ) + })} </Row> </div> ) diff --git a/src/tabviews/custom/components/card/prop-card/index.scss b/src/tabviews/custom/components/card/prop-card/index.scss index 12c5e88..7d7e25b 100644 --- a/src/tabviews/custom/components/card/prop-card/index.scss +++ b/src/tabviews/custom/components/card/prop-card/index.scss @@ -13,28 +13,12 @@ } .card-row-list { - .card-item-box { - background-color: #ffffff; - transition: all 0.3s; - } - >.pointer { + .mk-card.pointer { cursor: pointer; } - >.active >.card-item-box { - border-color: #1890ff!important; - box-shadow: 0 0 4px #1890ff; - } } - .card-row-list.radio, .card-row-list.checkbox { - >.ant-col:not(.active):not(.selected):hover { - >.card-item-box { - border-color: #69c0ff!important; - box-shadow: 0 0 4px #69c0ff!important; - } - } - } - .card-row-list.true { - >.ant-col:hover { + .card-row-list.scale { + .mk-card:hover { >.card-item-box { z-index: 1; transform: scale(1.05); @@ -44,6 +28,7 @@ .card-item-box { position: relative; + background-color: #ffffff; background-position: center center; background-repeat: no-repeat; background-size: cover; diff --git a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx index cb6fb7f..b83a695 100644 --- a/src/tabviews/custom/components/chart/antv-bar-line/index.jsx +++ b/src/tabviews/custom/components/chart/antv-bar-line/index.jsx @@ -4,6 +4,7 @@ import { Chart } from '@antv/g2' import DataSet from '@antv/data-set' import { Spin, Empty, notification } from 'antd' +import { DownloadOutlined } from '@ant-design/icons' import moment from 'moment' import asyncComponent from './asyncButtonComponent' @@ -41,6 +42,7 @@ search: null, // 鎼滅储鏉′欢 vFields: [], // 鏁板�煎瓧娈� vstFields: null, // 缁熻鏁版嵁鍊煎瓧娈典俊鎭� + chart: null } UNSAFE_componentWillMount () { @@ -124,7 +126,7 @@ _config.plot.hasBar = Bar_axis.length > 0 - if (_config.plot.mutilBar !== 'overlap') { + if (_config.plot.mutilBar !== 'overlap' && Bar_axis.length > 1) { _config.plot.Bar_axis = Bar_axis } } else { @@ -235,7 +237,8 @@ let axisIndex = 0 let fields = [] let legends = [] - + let vFieldsShow = {} + _config.plot.customs.forEach(item => { if (colors.has(item.name)) { item.color = colors.get(item.name) @@ -292,10 +295,19 @@ name: item.name, marker: { symbol: item.chartType === 'bar' ? 'square' : 'hyphen', style: { stroke: item.color,fill: item.color, r: 5, lineWidth: 2 } } }) + + if ((!_config.plot.Bar_axis || item.chartType !== 'bar') && item.show) { // 鎶樼嚎鍥炬垨閲嶅彔涓嬬殑鏌辩姸鍥惧彲鍗曠嫭璁剧疆鏄剧ず绫诲瀷 + vFieldsShow[item.type] = item.show + } }) _config.plot.customs = fields _config.plot.legends = legends _config.plot.axisIndex = axisIndex + vFields.forEach(item => { + if (vFieldsShow[item.field]) { + item.show = vFieldsShow[item.field] + } + }) } this.setState({ @@ -1059,6 +1071,8 @@ } chart.render() + + this.setState({chart}) } /** @@ -1310,7 +1324,7 @@ view2.data(dv.rows) view2.legend(false) - plot.customs.forEach((item, i) => { + plot.customs.forEach(item => { if (item.chartType === 'bar' && !plot.Bar_axis) { view2.axis(item.name, item.axis) @@ -1335,7 +1349,7 @@ .tooltip(`${item.name}`, (value) => { return { name: item.name, - value: plot.show === 'percent' ? value + '%' : value + value: item.show === 'percent' ? value + '%' : value } }) @@ -1344,7 +1358,7 @@ } if (item.label !== 'false') { _chart.label(item.name, (value) => { - if (plot.show === 'percent') { + if (item.show === 'percent') { value = value + '%' } if (plot.label === 'true' && plot.labelColor === 'custom' && item.color) { @@ -1386,13 +1400,13 @@ .tooltip(`${item.name}`, (value) => { return { name: item.name, - value: plot.show === 'percent' ? value + '%' : value + value: item.show === 'percent' ? value + '%' : value } }) if (item.label === 'true') { _chart.label(item.name, (value) => { - if (plot.show === 'percent') { + if (item.show === 'percent') { value = value + '%' } return { @@ -1424,6 +1438,8 @@ } chart.render() + + this.setState({chart}) } /** @@ -1697,12 +1713,51 @@ } chart.render() + + this.setState({chart}) } refreshSearch = (list) => { this.setState({search: list}, () => { this.loadData() }) + } + + downloadImage = () => { + const { chart, config } = this.state + const link = document.createElement('a'); + const filename = `${config.name}${moment().format('YYYY-MM-DD HH_mm_ss')}.png`; + const canvas = chart.getCanvas(); + canvas.get('timeline').stopAllAnimations(); + + setTimeout(() => { + const canvas = chart.getCanvas(); + const canvasDom = canvas.get('el'); + const dataURL = canvasDom.toDataURL('image/png'); + + if (window.Blob && window.URL) { + const arr = dataURL.split(','); + const mime = arr[0].match(/:(.*?);/)[1]; + const bstr = atob(arr[1]); + let n = bstr.length; + const u8arr = new Uint8Array(n); + while (n--) { + u8arr[n] = bstr.charCodeAt(n); + } + const blobObj = new Blob([u8arr], { type: mime }); + if (window.navigator.msSaveBlob) { + window.navigator.msSaveBlob(blobObj, filename); + } else { + link.addEventListener('click', () => { + link.download = filename; + link.href = window.URL.createObjectURL(blobObj); + }); + } + } + const e = document.createEvent('MouseEvents'); + e.initEvent('click', false, false); + link.dispatchEvent(e); + }, 16); } render() { @@ -1718,7 +1773,8 @@ } <NormalHeader config={config} BID={BID} menuType={this.props.menuType} refresh={this.refreshSearch} /> <div className="canvas-wrap" ref={ref => this.wrap = ref}> - <div className="chart-action"> + {config.plot.download === 'enable' && this.state.chart && !empty ? <DownloadOutlined onClick={this.downloadImage} className="system-color download"/> : null} + <div className={'chart-action' + (config.plot.download === 'enable' ? ' downable' : '')}> {config.action.map(item => { if (item.OpenType === 'excelOut') { return ( diff --git a/src/tabviews/custom/components/chart/antv-bar-line/index.scss b/src/tabviews/custom/components/chart/antv-bar-line/index.scss index 093ce92..04b5487 100644 --- a/src/tabviews/custom/components/chart/antv-bar-line/index.scss +++ b/src/tabviews/custom/components/chart/antv-bar-line/index.scss @@ -21,12 +21,31 @@ float: right; } } + .download { + position: absolute; + z-index: 1; + right: 10px; + top: 8px; + opacity: 0; + transition: opacity 0.3s; + cursor: pointer; + font-size: 16px; + } + .chart-action.downable { + right: 35px; + } + } + .canvas-wrap:hover { + .download { + opacity: 1; + } } .canvas { margin: 0; padding: 15px 10px 10px; letter-spacing: 0px; + height: 100%; } .canvas.empty { div { diff --git a/src/tabviews/custom/components/chart/antv-dashboard/index.jsx b/src/tabviews/custom/components/chart/antv-dashboard/index.jsx index df4fba4..63d21b7 100644 --- a/src/tabviews/custom/components/chart/antv-dashboard/index.jsx +++ b/src/tabviews/custom/components/chart/antv-dashboard/index.jsx @@ -3,17 +3,15 @@ import { is, fromJS } from 'immutable' import { Chart, registerShape } from '@antv/g2' import { Spin, notification } from 'antd' +import { DownloadOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' import Utils from '@/utils/utils.js' -// import asyncComponent from '@/utils/asyncComponent' import UtilsDM from '@/utils/utils-datamanage.js' import MKEmitter from '@/utils/events.js' import NormalHeader from '@/tabviews/custom/components/share/normalheader' import './index.scss' - -// const NormalHeader = asyncComponent(() => import('@/tabviews/custom/components/share/normalheader')) registerShape('point', 'pointer', { draw(cfg, container) { @@ -70,6 +68,7 @@ sync: false, // 鏄惁缁熶竴璇锋眰鏁版嵁 plot: null, // 鍥捐〃璁剧疆 data: {}, // 鏁版嵁 + chart: null } UNSAFE_componentWillMount () { @@ -436,6 +435,8 @@ } }) chart.render() + + this.setState({chart}) } /** @@ -594,10 +595,49 @@ } chart.render() + + this.setState({chart}) + } + + downloadImage = () => { + const { chart, config } = this.state + const link = document.createElement('a'); + const filename = `${config.name}${moment().format('YYYY-MM-DD HH_mm_ss')}.png`; + const canvas = chart.getCanvas(); + canvas.get('timeline').stopAllAnimations(); + + setTimeout(() => { + const canvas = chart.getCanvas(); + const canvasDom = canvas.get('el'); + const dataURL = canvasDom.toDataURL('image/png'); + + if (window.Blob && window.URL) { + const arr = dataURL.split(','); + const mime = arr[0].match(/:(.*?);/)[1]; + const bstr = atob(arr[1]); + let n = bstr.length; + const u8arr = new Uint8Array(n); + while (n--) { + u8arr[n] = bstr.charCodeAt(n); + } + const blobObj = new Blob([u8arr], { type: mime }); + if (window.navigator.msSaveBlob) { + window.navigator.msSaveBlob(blobObj, filename); + } else { + link.addEventListener('click', () => { + link.download = filename; + link.href = window.URL.createObjectURL(blobObj); + }); + } + } + const e = document.createEvent('MouseEvents'); + e.initEvent('click', false, false); + link.dispatchEvent(e); + }, 16); } render() { - const { config, loading, empty } = this.state + const { config, loading } = this.state return ( <div className="custom-dashboard-plot-box" style={config.style}> @@ -609,7 +649,8 @@ } <NormalHeader config={config} /> <div className="canvas-wrap" ref={ref => this.wrap = ref}> - <div className={'canvas' + (empty ? ' empty' : '')} id={this.state.chartId}></div> + {config.plot.download === 'enable' && this.state.chart ? <DownloadOutlined onClick={this.downloadImage} className="system-color download"/> : null} + <div className="canvas" id={this.state.chartId}></div> </div> </div> ) diff --git a/src/tabviews/custom/components/chart/antv-dashboard/index.scss b/src/tabviews/custom/components/chart/antv-dashboard/index.scss index 10db44d..89aa840 100644 --- a/src/tabviews/custom/components/chart/antv-dashboard/index.scss +++ b/src/tabviews/custom/components/chart/antv-dashboard/index.scss @@ -12,14 +12,21 @@ margin: 0 0px; position: relative; flex: 1; - .chart-action { + .download { position: absolute; - top: 2px; - right: 5px; z-index: 1; + right: 10px; + top: 10px; + opacity: 0; + transition: opacity 0.3s; + cursor: pointer; + font-size: 16px; } - .chart-action.with-title { - top: 35px; + } + + .canvas-wrap:hover { + .download { + opacity: 1; } } @@ -27,21 +34,9 @@ margin: 0; padding: 15px; letter-spacing: 0px; + height: 100%; } - .canvas.empty { - div { - opacity: 0; - } - } - .ant-empty { - position: absolute; - top: calc(50% - 34px); - left: calc(50% - 92px); - .ant-empty-image { - height: 60px; - } - } .loading-mask { position: absolute; left: 0px; @@ -60,47 +55,6 @@ height: 100%; opacity: 0.5; background: #ffffff; - } - } - > .ant-select { - width: 150px; - float: right; - position: relative; - z-index: 1; - .ant-select-selection { - min-height: 24px; - height: 28px; - li { - background: unset; - border: 0; - width: 99%; - padding: 0; - margin-right: 0; - cursor: pointer; - - .type-label { - overflow: hidden; - word-break: break-word; - white-space: nowrap; - text-overflow: ellipsis; - } - } - li + li { - margin-top: 0; - width: 1%; - opacity: 0; - } - } - } - > .ant-select.ant-select-focused { - .ant-select-selection { - li { - width: 50%; - } - li + li { - width: 49%; - opacity: 1; - } } } .g2-tooltip-list{ diff --git a/src/tabviews/custom/components/chart/antv-pie/index.jsx b/src/tabviews/custom/components/chart/antv-pie/index.jsx index 51eb7ce..e5aa7e7 100644 --- a/src/tabviews/custom/components/chart/antv-pie/index.jsx +++ b/src/tabviews/custom/components/chart/antv-pie/index.jsx @@ -5,6 +5,7 @@ import { connect } from 'react-redux' import DataSet, { DataView } from '@antv/data-set' import { Spin, Empty, notification } from 'antd' +import { DownloadOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -35,6 +36,7 @@ plot: null, // 鍥捐〃璁剧疆 data: null, // 鏁版嵁 search: null, // 鎼滅储鏉′欢 + chart: null } UNSAFE_componentWillMount () { @@ -728,6 +730,8 @@ }) } chart.render() + + this.setState({chart}) } /** @@ -989,12 +993,51 @@ }) } chart.render() + + this.setState({chart}) } refreshSearch = (list) => { this.setState({search: list}, () => { this.loadData() }) + } + + downloadImage = () => { + const { chart, config } = this.state + const link = document.createElement('a'); + const filename = `${config.name}${moment().format('YYYY-MM-DD HH_mm_ss')}.png`; + const canvas = chart.getCanvas(); + canvas.get('timeline').stopAllAnimations(); + + setTimeout(() => { + const canvas = chart.getCanvas(); + const canvasDom = canvas.get('el'); + const dataURL = canvasDom.toDataURL('image/png'); + + if (window.Blob && window.URL) { + const arr = dataURL.split(','); + const mime = arr[0].match(/:(.*?);/)[1]; + const bstr = atob(arr[1]); + let n = bstr.length; + const u8arr = new Uint8Array(n); + while (n--) { + u8arr[n] = bstr.charCodeAt(n); + } + const blobObj = new Blob([u8arr], { type: mime }); + if (window.navigator.msSaveBlob) { + window.navigator.msSaveBlob(blobObj, filename); + } else { + link.addEventListener('click', () => { + link.download = filename; + link.href = window.URL.createObjectURL(blobObj); + }); + } + } + const e = document.createEvent('MouseEvents'); + e.initEvent('click', false, false); + link.dispatchEvent(e); + }, 16); } render() { @@ -1010,6 +1053,7 @@ } <NormalHeader config={config} BID={BID} menuType={this.props.menuType} refresh={this.refreshSearch} /> <div className="canvas-wrap" ref={ref => this.wrap = ref}> + {config.plot.download === 'enable' && this.state.chart && !empty ? <DownloadOutlined onClick={this.downloadImage} className="system-color download"/> : null} <div className={'canvas' + (empty ? ' empty' : '')} id={this.state.chartId}></div> </div> {empty ? <Empty description={false}/> : null} diff --git a/src/tabviews/custom/components/chart/antv-pie/index.scss b/src/tabviews/custom/components/chart/antv-pie/index.scss index 5db4d2f..223d368 100644 --- a/src/tabviews/custom/components/chart/antv-pie/index.scss +++ b/src/tabviews/custom/components/chart/antv-pie/index.scss @@ -12,14 +12,20 @@ margin: 0 0px; position: relative; flex: 1; - .chart-action { + .download { position: absolute; - top: 2px; - right: 5px; z-index: 1; + right: 10px; + top: 10px; + opacity: 0; + transition: opacity 0.3s; + cursor: pointer; + font-size: 16px; } - .chart-action.with-title { - top: 35px; + } + .canvas-wrap:hover { + .download { + opacity: 1; } } @@ -27,6 +33,7 @@ margin: 0; padding: 15px; letter-spacing: 0px; + height: 100%; } .canvas.empty { div { @@ -60,47 +67,6 @@ height: 100%; opacity: 0.5; background: #ffffff; - } - } - > .ant-select { - width: 150px; - float: right; - position: relative; - z-index: 1; - .ant-select-selection { - min-height: 24px; - height: 28px; - li { - background: unset; - border: 0; - width: 99%; - padding: 0; - margin-right: 0; - cursor: pointer; - - .type-label { - overflow: hidden; - word-break: break-word; - white-space: nowrap; - text-overflow: ellipsis; - } - } - li + li { - margin-top: 0; - width: 1%; - opacity: 0; - } - } - } - > .ant-select.ant-select-focused { - .ant-select-selection { - li { - width: 50%; - } - li + li { - width: 49%; - opacity: 1; - } } } .g2-tooltip-list{ diff --git a/src/tabviews/custom/components/chart/antv-scatter/index.jsx b/src/tabviews/custom/components/chart/antv-scatter/index.jsx index 99fb8fb..074d4ea 100644 --- a/src/tabviews/custom/components/chart/antv-scatter/index.jsx +++ b/src/tabviews/custom/components/chart/antv-scatter/index.jsx @@ -3,18 +3,17 @@ import { is, fromJS } from 'immutable' import { Chart } from '@antv/g2' import { Spin, Empty, notification } from 'antd' +import { DownloadOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' import Utils from '@/utils/utils.js' -// import asyncComponent from '@/utils/asyncComponent' import asyncBtnComponent from './asyncButtonComponent' import UtilsDM from '@/utils/utils-datamanage.js' import MKEmitter from '@/utils/events.js' import NormalHeader from '@/tabviews/custom/components/share/normalheader' import './index.scss' -// const NormalHeader = asyncComponent(() => import('@/tabviews/custom/components/share/normalheader')) const ExcelOutButton = asyncBtnComponent(() => import('@/tabviews/zshare/actionList/exceloutbutton')) const ExcelInButton = asyncBtnComponent(() => import('@/tabviews/zshare/actionList/excelInbutton')) @@ -37,6 +36,7 @@ plot: null, // 鍥捐〃璁剧疆 data: null, // 鏁版嵁 search: null, // 鎼滅储鏉′欢 + chart: null } UNSAFE_componentWillMount () { @@ -376,12 +376,51 @@ }) } chart.render() + + this.setState({chart}) } refreshSearch = (list) => { this.setState({search: list}, () => { this.loadData() }) + } + + downloadImage = () => { + const { chart, config } = this.state + const link = document.createElement('a'); + const filename = `${config.name}${moment().format('YYYY-MM-DD HH_mm_ss')}.png`; + const canvas = chart.getCanvas(); + canvas.get('timeline').stopAllAnimations(); + + setTimeout(() => { + const canvas = chart.getCanvas(); + const canvasDom = canvas.get('el'); + const dataURL = canvasDom.toDataURL('image/png'); + + if (window.Blob && window.URL) { + const arr = dataURL.split(','); + const mime = arr[0].match(/:(.*?);/)[1]; + const bstr = atob(arr[1]); + let n = bstr.length; + const u8arr = new Uint8Array(n); + while (n--) { + u8arr[n] = bstr.charCodeAt(n); + } + const blobObj = new Blob([u8arr], { type: mime }); + if (window.navigator.msSaveBlob) { + window.navigator.msSaveBlob(blobObj, filename); + } else { + link.addEventListener('click', () => { + link.download = filename; + link.href = window.URL.createObjectURL(blobObj); + }); + } + } + const e = document.createEvent('MouseEvents'); + e.initEvent('click', false, false); + link.dispatchEvent(e); + }, 16); } render() { @@ -397,7 +436,8 @@ } <NormalHeader config={config} BID={BID} menuType={this.props.menuType} refresh={this.refreshSearch} /> <div className="canvas-wrap" ref={ref => this.wrap = ref}> - <div className="chart-action"> + {config.plot.download === 'enable' && this.state.chart && !empty ? <DownloadOutlined onClick={this.downloadImage} className="system-color download"/> : null} + <div className={'chart-action' + (config.plot.download === 'enable' ? ' downable' : '')}> {config.action.map(item => { if (item.OpenType === 'excelOut') { return ( diff --git a/src/tabviews/custom/components/chart/antv-scatter/index.scss b/src/tabviews/custom/components/chart/antv-scatter/index.scss index 1f52198..eaad237 100644 --- a/src/tabviews/custom/components/chart/antv-scatter/index.scss +++ b/src/tabviews/custom/components/chart/antv-scatter/index.scss @@ -21,12 +21,32 @@ float: right; } } + .download { + position: absolute; + z-index: 1; + right: 10px; + top: 8px; + opacity: 0; + transition: opacity 0.3s; + cursor: pointer; + font-size: 16px; + } + .chart-action.downable { + right: 35px; + } + } + + .canvas-wrap:hover { + .download { + opacity: 1; + } } .canvas { margin: 0; padding: 15px 10px 10px; letter-spacing: 0px; + height: 100%; } .canvas.empty { div { diff --git a/src/tabviews/custom/components/share/normalTable/index.jsx b/src/tabviews/custom/components/share/normalTable/index.jsx index cadff9e..4a50717 100644 --- a/src/tabviews/custom/components/share/normalTable/index.jsx +++ b/src/tabviews/custom/components/share/normalTable/index.jsx @@ -3,9 +3,11 @@ import md5 from 'md5' import { connect } from 'react-redux' import { is, fromJS } from 'immutable' -import { Table, Typography, Icon, Col, Switch, message } from 'antd' +import { Table, Typography, Col, Switch, message } from 'antd' import asyncComponent from '@/utils/asyncComponent' +import { getMark } from '@/utils/utils.js' +import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import zhCN from '@/locales/zh-CN/main.js' import enUS from '@/locales/en-US/main.js' @@ -27,6 +29,10 @@ render() { let { lineMarks, onDoubleClick, data, className, ...resProps } = this.props let style = {} + + if (data && data.$disabled) { + className = className + ' mk-disabled ' + } if (lineMarks && lineMarks.length > 0) { lineMarks.some(mark => { @@ -78,7 +84,7 @@ if (mark.fontColor) { style.color = mark.fontColor } - className += className + ' background' + className = className + ' background' } else if (mark.signType[0] === 'underline') { style.textDecoration = 'underline' style.color = mark.color @@ -97,77 +103,6 @@ } class BodyCell extends React.Component { - getMark = (record, marks, style, content) => { - marks.some(mark => { - let originVal = record[mark.field[0]] + '' - let contrastVal = '' - let result = false - - if (mark.field[1] === 'static') { - contrastVal = mark.contrastValue + '' - } else { - contrastVal = record[mark.field[2]] + '' - } - - if (mark.match === '=') { - result = originVal === contrastVal - } else if (mark.match === '!=') { - result = originVal !== contrastVal - } else if (mark.match === 'like') { - result = originVal.indexOf(contrastVal) > -1 - } else if (mark.match === '>') { - try { - originVal = parseFloat(originVal) - contrastVal = parseFloat(contrastVal) - } catch (e) { - originVal = NaN - } - - if (!isNaN(originVal) && !isNaN(contrastVal) && originVal > contrastVal) { - result = true - } - } else if (mark.match === '<') { - try { - originVal = parseFloat(originVal) - contrastVal = parseFloat(contrastVal) - } catch (e) { - originVal = NaN - } - - if (!isNaN(originVal) && !isNaN(contrastVal) && originVal < contrastVal) { - result = true - } - } - - if (result) { - if (mark.signType[0] === 'font') { - style.color = mark.color - } else if (mark.signType[0] === 'background') { - style.background = mark.color - if (mark.fontColor) { - style.color = mark.fontColor - } - } else if (mark.signType[0] === 'underline') { - style.textDecoration = 'underline' - style.color = mark.color - } else if (mark.signType[0] === 'line-through') { - style.textDecoration = 'line-through' - style.color = mark.color - } else if (mark.signType[0] === 'icon') { - let icon = (<Icon style={{color: mark.color}} type={mark.signType[3]} />) - if (mark.signType[1] === 'front') { - content = <span>{icon} {content}</span> - } else { - content = <span>{content} {icon}</span> - } - } - } - return result - }) - - return content - } - shouldComponentUpdate (nextProps, nextState) { return !nextProps.record || !is(fromJS(this.props.record), fromJS(nextProps.record)) } @@ -194,8 +129,17 @@ } if (col.marks) { - style = style || {} - content = this.getMark(record, col.marks, style, content) + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } if (col.blur) { content = md5(content) @@ -205,7 +149,7 @@ resProps.rowSpan = record['$$' + col.field] } - if (col.linkThdMenu || col.linkurl) { + if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { content = ( <div> <div className="link-menu" onDoubleClick={(e) => triggerLink(e, col, record)}></div> @@ -231,6 +175,8 @@ if (col.format === 'percent') { content = content * 100 decimal = decimal > 2 ? decimal - 2 : 0 + } else if (col.format === 'abs') { + content = Math.abs(content) } content = content.toFixed(decimal) @@ -243,8 +189,17 @@ } if (col.marks) { - style = style || {} - content = this.getMark(record, col.marks, style, content) + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } if (col.blur) { @@ -255,7 +210,7 @@ resProps.rowSpan = record['$$' + col.field] } - if (col.linkThdMenu || col.linkurl) { + if (!record.$disabled && (col.linkThdMenu || col.linkurl)) { content = ( <div> <div className="link-menu" onDoubleClick={(e) => triggerLink(e, col, record)}></div> @@ -346,6 +301,10 @@ content = md5(content) } + if (_href && /^https/.test(window.location.protocol)) { // https杞崲 + _href = _href.replace(/^http:/ig, 'https:') + } + resProps.children = ( <div> {content && _href ? <a href={_href} target="_blank" rel="noopener noreferrer">{content}</a> : null } @@ -379,8 +338,17 @@ } if (col.marks) { - style = style || {} - content = this.getMark(record, col.marks, style, content) + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } resProps.children = content @@ -564,6 +532,7 @@ const { MenuID, data, setting } = this.props if (MenuID !== menuId || !data || data.length === 0) return + if (data[0].$disabled) return this.changedata(0) this.setState({ selectedRowKeys: [0], activeIndex: 0 }) @@ -687,7 +656,7 @@ this.setState({ selectedRowKeys, activeIndex: _activeIndex }) - let selects = this.props.data.filter((item, _index) => selectedRowKeys.includes(_index)) + let selects = this.props.data.filter((item, _index) => selectedRowKeys.includes(_index) && !item.$disabled) this.props.chgSelectData(selects) if (setting.$hasSyncModule) { @@ -702,6 +671,7 @@ const { setting, MenuID, data } = this.props if (!setting.tableType || this.state.pickup) return + if (record.$disabled) return let newkeys = fromJS(this.state.selectedRowKeys).toJS() @@ -726,7 +696,7 @@ this.setState({ selectedRowKeys: newkeys, activeIndex: _index !== '' ? _index : null }) } - let selects = this.props.data.filter((item, _index) => newkeys.includes(_index)) + let selects = this.props.data.filter((item, _index) => newkeys.includes(_index) && !item.$disabled) this.props.chgSelectData(selects) @@ -761,6 +731,8 @@ _id = data[index][setting.primaryKey] || '' _data = data[index] || '' } + + if (_data && _data.$disabled) return MKEmitter.emit('resetSelectLine', MenuID, _id, _data) } @@ -850,6 +822,7 @@ const { setting } = this.props if (!setting.doubleClick) return + if (record.$disabled) return MKEmitter.emit('triggerBtnId', setting.doubleClick, [record]) } diff --git a/src/tabviews/custom/components/share/normalTable/index.scss b/src/tabviews/custom/components/share/normalTable/index.scss index 1ded89d..b6e48cb 100644 --- a/src/tabviews/custom/components/share/normalTable/index.scss +++ b/src/tabviews/custom/components/share/normalTable/index.scss @@ -19,6 +19,30 @@ font-size: inherit; } + .mk-disabled { + color: #bcbcbc; + cursor: not-allowed; + .ant-btn { + cursor: not-allowed; + } + .ant-table-selection-column { + > span::after { + content: ' '; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + } + } + .ant-checkbox-checked .ant-checkbox-inner { + background-color: #fff!important; + border-color: #d9d9d9!important; + } + } + table { max-width: 100%; width: 100%; diff --git a/src/tabviews/custom/components/table/edit-table/index.jsx b/src/tabviews/custom/components/table/edit-table/index.jsx index f21e91a..083affa 100644 --- a/src/tabviews/custom/components/table/edit-table/index.jsx +++ b/src/tabviews/custom/components/table/edit-table/index.jsx @@ -6,8 +6,6 @@ import Api from '@/api' import Utils from '@/utils/utils.js' -import zhCN from '@/locales/zh-CN/main.js' -import enUS from '@/locales/en-US/main.js' import UtilsDM from '@/utils/utils-datamanage.js' import asyncComponent from '@/utils/asyncComponent' import MKEmitter from '@/utils/events.js' @@ -29,7 +27,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, BID: '', // 涓婄骇ID BData: '', // 涓婄骇缁勪欢琛屾暟鎹� config: {}, // 椤甸潰閰嶇疆淇℃伅锛屽寘鎷寜閽�佹悳绱€�佹樉绀哄垪銆佹爣绛剧瓑 diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx index 19a7ed6..1464bfa 100644 --- a/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx +++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.jsx @@ -1,12 +1,14 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Table, Typography, Icon, Switch, Modal, Input, InputNumber, Tooltip, Button, notification, message } from 'antd' +import { Table, Typography, Switch, Modal, Input, InputNumber, Tooltip, Button, notification, message } from 'antd' +import { ExclamationCircleOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' import asyncComponent from '@/utils/asyncComponent' -import Utils, { getEditTableSql } from '@/utils/utils.js' +import Utils, { getEditTableSql, getMark } from '@/utils/utils.js' +import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import zhCN from '@/locales/zh-CN/main.js' import enUS from '@/locales/en-US/main.js' @@ -97,77 +99,6 @@ state = { editing: false, err: null - } - - getMark = (record, marks, style, content) => { - marks.some(mark => { - let originVal = record[mark.field[0]] + '' - let contrastVal = '' - let result = false - - if (mark.field[1] === 'static') { - contrastVal = mark.contrastValue + '' - } else { - contrastVal = record[mark.field[2]] + '' - } - - if (mark.match === '=') { - result = originVal === contrastVal - } else if (mark.match === '!=') { - result = originVal !== contrastVal - } else if (mark.match === 'like') { - result = originVal.indexOf(contrastVal) > -1 - } else if (mark.match === '>') { - try { - originVal = parseFloat(originVal) - contrastVal = parseFloat(contrastVal) - } catch (e) { - originVal = NaN - } - - if (!isNaN(originVal) && !isNaN(contrastVal) && originVal > contrastVal) { - result = true - } - } else if (mark.match === '<') { - try { - originVal = parseFloat(originVal) - contrastVal = parseFloat(contrastVal) - } catch (e) { - originVal = NaN - } - - if (!isNaN(originVal) && !isNaN(contrastVal) && originVal < contrastVal) { - result = true - } - } - - if (result) { - if (mark.signType[0] === 'font') { - style.color = mark.color - } else if (mark.signType[0] === 'background') { - style.background = mark.color - if (mark.fontColor) { - style.color = mark.fontColor - } - } else if (mark.signType[0] === 'underline') { - style.textDecoration = 'underline' - style.color = mark.color - } else if (mark.signType[0] === 'line-through') { - style.textDecoration = 'line-through' - style.color = mark.color - } else if (mark.signType[0] === 'icon') { - let icon = (<Icon style={{color: mark.color}} type={mark.signType[3]} />) - if (mark.signType[1] === 'front') { - content = <span>{icon} {content}</span> - } else { - content = <span>{content} {icon}</span> - } - } - } - return result - }) - - return content } shouldComponentUpdate (nextProps, nextState) { @@ -295,15 +226,24 @@ } if (col.marks) { - style = style || {} - content = this.getMark(record, col.marks, style, content) + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } if (col.editable === 'true') { if (editing) { return (<td className="editing_table_cell"> <Input id={col.uuid + record.$Index} defaultValue={value} onChange={(e) => this.onChange(e.target.value)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> - {err ? <Tooltip title={err}><Icon type="exclamation-circle" /></Tooltip> : null} + {err ? <Tooltip title={err}><ExclamationCircleOutlined /></Tooltip> : null} </td>) } else { return (<td className={className + ' pointer'} style={style}><div className="mk-mask" onClick={this.focus}></div>{content}</td>) @@ -327,6 +267,8 @@ if (col.format === 'percent') { content = content * 100 decimal = decimal > 2 ? decimal - 2 : 0 + } else if (col.format === 'abs') { + content = Math.abs(content) } content = content.toFixed(decimal) @@ -339,15 +281,24 @@ } if (col.marks) { - style = style || {} - content = this.getMark(record, col.marks, style, content) + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } if (col.editable === 'true') { if (editing) { return (<td className="editing_table_cell"> <InputNumber id={col.uuid + record.$Index} defaultValue={value} onChange={(val) => this.onChange(val)} onPressEnter={this.enterPress} onBlur={this.onBlur}/> - {err ? <Tooltip title={err}><Icon type="exclamation-circle" /></Tooltip> : null} + {err ? <Tooltip title={err}><ExclamationCircleOutlined /></Tooltip> : null} </td>) } else { return (<td className={className + ' pointer'} style={style}><div className="mk-mask" onClick={this.focus}></div>{content}</td>) @@ -398,8 +349,17 @@ } if (col.marks) { - style = style || {} - content = this.getMark(record, col.marks, style, content) + let mark = getMark(col.marks, record, style) + + style = mark.style + + if (mark.icon) { + if (mark.position === 'front') { + content = <span><MkIcon style={{color: mark.color}} type={mark.icon} /> {content}</span> + } else { + content = <span>{content} <MkIcon style={{color: mark.color}} type={mark.icon} /></span> + } + } } children = content @@ -514,7 +474,7 @@ _copy.sorter = false if (item.editable === 'true') { - _copy.title = <span>{item.label}<Icon className="system-color" style={{position: 'absolute', bottom: 0, right: 0}} type="edit" /></span> + _copy.title = <span>{item.label}<EditOutlined className="system-color" style={{position: 'absolute', bottom: '2px', right: '5px'}}/></span> } edColumns.push(_copy) } @@ -568,24 +528,24 @@ } componentDidMount () { - const { fields, columns } = this.props + const { fields, setting } = this.props const { data, editable } = this.state - let _fields = [] + // let _fields = [] // 瀹氫箟鍏ㄩ儴瀛楁锛屼笉鍦ㄤ粠鍙紪杈戝垪涓�夊彇 - let fieldType = {} - fields.forEach(item => { - fieldType[item.field] = item.datatype - }) + // let fieldType = {} + // fields.forEach(item => { + // fieldType[item.field] = item.datatype + // }) - columns.forEach(col => { - if (!col.field || col.type === 'index') return + // columns.forEach(col => { + // if (!col.field || col.type === 'index') return - _fields.push({...col, datatype: fieldType[col.field] || 'Nvarchar(50)'}) - }) + // _fields.push({...col, datatype: fieldType[col.field] || 'Nvarchar(50)'}) + // }) this.setState({ - fields: _fields, + fields: fields.filter(item => item.field !== setting.primaryKey), }) if (editable === 'true' && data && data.length > 0) { @@ -655,8 +615,6 @@ item.$Index = item.key + 1 + '' fields.forEach(col => { - item[col.field] = item[col.field] !== undefined ? item[col.field] : '' - if (col.initval !== '$copy') { item[col.field] = col.initval } @@ -665,6 +623,9 @@ if (isNaN(item[col.field])) { item[col.field] = 0 } + } + if (item[col.field] === undefined) { + item[col.field] = '' } }) @@ -735,8 +696,6 @@ } fields.forEach(col => { - item[col.field] = item[col.field] !== undefined ? item[col.field] : '' - if (col.initval !== '$copy') { item[col.field] = col.initval } @@ -745,6 +704,10 @@ if (isNaN(item[col.field])) { item[col.field] = 0 } + } + + if (item[col.field] === undefined) { + item[col.field] = '' } }) @@ -1106,7 +1069,7 @@ pagination={_pagination} /> {_footer ? <div className={'normal-table-footer ' + (_pagination ? 'pagination' : '')}>{_footer}</div> : null} - {pickup && setting.addable === 'true' ? <Button onClick={this.addLine} style={{display: 'block', width: '100%', color: '#26C281', border: '1px solid #dddddd', borderRadius: 0}} icon="plus" type="link"></Button> : null} + {pickup && setting.addable === 'true' ? <Button onClick={this.addLine} style={{display: 'block', width: '100%', color: '#26C281', border: '1px solid #dddddd', borderRadius: 0}} type="link"><PlusOutlined /></Button> : null} </div> ) } diff --git a/src/tabviews/custom/components/table/edit-table/normalTable/index.scss b/src/tabviews/custom/components/table/edit-table/normalTable/index.scss index ee3ebc1..027503b 100644 --- a/src/tabviews/custom/components/table/edit-table/normalTable/index.scss +++ b/src/tabviews/custom/components/table/edit-table/normalTable/index.scss @@ -172,7 +172,7 @@ .ant-input { padding: 0px; } - i { + .anticon { color: #ff4d4f; position: absolute; right: 3px; diff --git a/src/tabviews/custom/components/table/normal-table/index.jsx b/src/tabviews/custom/components/table/normal-table/index.jsx index 2f53d2c..72585ec 100644 --- a/src/tabviews/custom/components/table/normal-table/index.jsx +++ b/src/tabviews/custom/components/table/normal-table/index.jsx @@ -6,8 +6,6 @@ import Api from '@/api' import Utils from '@/utils/utils.js' -import zhCN from '@/locales/zh-CN/main.js' -import enUS from '@/locales/en-US/main.js' import UtilsDM from '@/utils/utils-datamanage.js' import asyncComponent from '@/utils/asyncComponent' import MKEmitter from '@/utils/events.js' @@ -31,7 +29,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, BID: '', // 涓婄骇ID BData: '', // 涓婄骇缁勪欢琛屾暟鎹� config: {}, // 椤甸潰閰嶇疆淇℃伅锛屽寘鎷寜閽�佹悳绱€�佹樉绀哄垪銆佹爣绛剧瓑 @@ -61,6 +58,15 @@ let _cols = new Map() let _data = null let _sync = _config.setting.sync === 'true' + + if (_config.wrap.controlField) { + if (_config.wrap.controlVal) { + _config.wrap.controlVal = _config.wrap.controlVal.split(',') + } else { + _config.wrap.controlVal = [''] + } + } + let setting = {..._config.setting, ..._config.wrap, style: {}} if (setting.selected !== 'always' && setting.selected !== 'init') { @@ -79,9 +85,17 @@ _data = _data.map((item, index) => { item.key = index item.$$uuid = item[_config.setting.primaryKey] || '' + item.$$key = '' + item.key + item.$$uuid item.$$BID = BID || '' item.$$BData = BData || '' item.$Index = index + 1 + '' + + if (setting.controlField) { + if (setting.controlVal.includes(item[setting.controlField])) { + item.$disabled = true + } + } + return item }) @@ -123,6 +137,8 @@ _config.wrap.title = _config.wrap.title || ' ' } + _config.style = _config.style || {} + this.setState({ pageSize: setting.pageSize || 10, BID: BID || '', @@ -156,7 +172,7 @@ const { mainSearch } = this.props const { setting, config, arr_field, search, orderBy, BID, pageIndex, pageSize, BData } = this.state - if (setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� + if (setting.supModule && !BID && setting.supKey !== 'false') { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� this.setState({ data: [], selectedData: [], @@ -219,9 +235,17 @@ data: result.data.map((item, index) => { item.key = index item.$$uuid = item[setting.primaryKey] || '' + item.$$key = '' + item.key + item.$$uuid item.$$BID = BID || '' item.$$BData = BData || '' item.$Index = start + index + '' + + if (setting.controlField) { + if (setting.controlVal.includes(item[setting.controlField])) { + item.$disabled = true + } + } + return item }), selectedData: [], @@ -277,6 +301,7 @@ data = data.map(item => { if (item.$$uuid === _data.$$uuid) { _data.key = item.key + _data.$$key = '' + item.key + item.$$uuid _data.$Index = item.$Index return _data } else { @@ -318,7 +343,7 @@ const { mainSearch } = this.props const { setting, config, search, BID, orderBy } = this.state - if (setting.supModule && !BID) { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� + if (setting.supModule && !BID && setting.supKey !== 'false') { // BID 涓嶅瓨鍦ㄦ椂锛屼笉鍋氭煡璇� this.setState({ statFValue: [] }) @@ -537,9 +562,17 @@ _data = _data.map((item, index) => { item.key = index item.$$uuid = item[config.setting.primaryKey] || '' + item.$$key = '' + item.key + item.$$uuid item.$$BID = BID || '' item.$$BData = BData || '' item.$Index = index + 1 + '' + + if (setting.controlField) { + if (setting.controlVal.includes(item[setting.controlField])) { + item.$disabled = true + } + } + return item }) @@ -586,10 +619,15 @@ } render() { - const { BID, setting, searchlist, actions, config, columns, selectedData, BData } = this.state + const { BID, setting, searchlist, actions, config, columns, selectedData, BData, data } = this.state + + let style = {...config.style} + if (config.wrap.empty === 'hidden' && (!data || data.length === 0)) { + style.display = 'none' + } return ( - <div className="custom-normal-table" style={config.style}> + <div className="custom-normal-table" style={style}> {config.wrap.collapse === 'true' ? <Collapse bordered={false} defaultActiveKey="1" expandIconPosition="right"> <Panel forceRender={true} header={<NormalHeader config={config}/>} key="1"> {searchlist && searchlist.length ? @@ -608,7 +646,7 @@ setting={setting} columns={columns} MenuID={config.uuid} - data={this.state.data} + data={data} fields={config.columns} total={this.state.total} lineMarks={config.lineMarks} diff --git a/src/tabviews/custom/components/tabs/antv-tabs/index.jsx b/src/tabviews/custom/components/tabs/antv-tabs/index.jsx index 6ad66b0..4b8ef58 100644 --- a/src/tabviews/custom/components/tabs/antv-tabs/index.jsx +++ b/src/tabviews/custom/components/tabs/antv-tabs/index.jsx @@ -1,9 +1,10 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Tabs, Icon } from 'antd' +import { Tabs } from 'antd' import asyncComponent from '@/utils/asyncComponent' +import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' import './index.scss' @@ -28,8 +29,9 @@ UNSAFE_componentWillMount () { const { config, bids } = this.props + this.setState({ - tabs: config, + tabs: fromJS(config).toJS(), parentIds: config.parentIds || [], bids: bids ? bids : {} }) @@ -60,13 +62,33 @@ } resetParentParam = (MenuID, id, data) => { - const { parentIds, bids } = this.state + const { parentIds, bids, tabs } = this.state - if (!parentIds.includes(MenuID)) return + if (parentIds.includes(MenuID)) { + this.setState({ + bids: {...bids, [MenuID]: id, [MenuID + '_data']: data} + }) + } - this.setState({ - bids: {...bids, [MenuID]: id, [MenuID + '_data']: data} - }) + if (tabs.setting.supModule === MenuID) { + if (!data || data[tabs.setting.controlField] === undefined) { + this.setState({ + tabs: {...tabs, subtabs: this.props.config.subtabs} + }) + } else { + let val = data[tabs.setting.controlField] + this.setState({ + tabs: {...tabs, subtabs: this.props.config.subtabs.filter(tab => { + if (tab.controlVal === val) { + return false + } else if (/,/ig.test(tab.controlVal)) { + return tab.controlVal.split(',').includes(val) + } + return true + })} + }) + } + } } autoSwitch = (interval) => { @@ -101,7 +123,7 @@ <div className={'menu-antv-tabs-wrap ' + tabs.setting.tabLabel} style={tabs.style}> <Tabs defaultActiveKey="1" tabPosition={tabs.setting.position} type={tabs.setting.tabStyle}> {tabs.subtabs.map(tab => ( - <TabPane tab={<span id={'tab' + tab.uuid}>{tab.icon ? <Icon type={tab.icon} /> : null}{tab.label}</span>} key={tab.uuid}> + <TabPane tab={<span id={'tab' + tab.uuid}>{tab.icon ? <MkIcon type={tab.icon} /> : null}{tab.label}</span>} key={tab.uuid}> <TabTransfer BID={BID} config={tab} bids={bids} mainSearch={mainSearch}/> </TabPane> ))} diff --git a/src/tabviews/custom/components/timeline/normal-timeline/index.jsx b/src/tabviews/custom/components/timeline/normal-timeline/index.jsx index 750a4a9..d49100c 100644 --- a/src/tabviews/custom/components/timeline/normal-timeline/index.jsx +++ b/src/tabviews/custom/components/timeline/normal-timeline/index.jsx @@ -1,10 +1,10 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Spin, notification, Timeline, Empty, Icon } from 'antd' +import { Spin, notification, Timeline, Empty } from 'antd' import Api from '@/api' -// import Utils from '@/utils/utils.js' +import MkIcon from '@/components/mk-icon' import asyncComponent from '@/utils/asyncComponent' import UtilsDM from '@/utils/utils-datamanage.js' import MKEmitter from '@/utils/events.js' @@ -288,7 +288,7 @@ color = item.color if (item.icon) { - dot = <Icon type={item.icon} style={{color}}/> + dot = <MkIcon type={item.icon} style={{color}}/> } return true } diff --git a/src/tabviews/custom/components/tree/antd-tree/index.jsx b/src/tabviews/custom/components/tree/antd-tree/index.jsx index fc666d5..e9d7bc7 100644 --- a/src/tabviews/custom/components/tree/antd-tree/index.jsx +++ b/src/tabviews/custom/components/tree/antd-tree/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Spin, Empty, notification, Input, Tree, Icon } from 'antd' +import { Spin, Empty, notification, Input, Tree } from 'antd' +import { FolderOpenOutlined, FolderOutlined, FileOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -33,6 +34,7 @@ treeNodes: null, // 鍒楄〃鏁版嵁闆� expandedKeys: [], // 灞曞紑鐨勬爲鑺傜偣 selectedKeys: [], // 閫変腑鐨勬爲鑺傜偣 + selected: false // 閫変腑棣栬 } UNSAFE_componentWillMount () { @@ -49,7 +51,10 @@ _sync = false } + _config.wrap.contentHeight = config.wrap.title || config.wrap.searchable === 'true' ? 'calc(100% - 45px)' : '100%' + this.setState({ + selected: _config.wrap.selected === 'true', config: _config, data: _data, BID: BID || '', @@ -57,9 +62,9 @@ sync: _sync }, () => { if (config.setting.sync !== 'true' && config.setting.onload === 'true') { - this.loadData(null, 'init') + this.loadData(null) } else if (config.setting.sync === 'true' && _data) { - this.handleData('init') + this.handleData() } }) } @@ -77,7 +82,7 @@ } this.setState({sync: false, data: _data}, () => { - this.handleData('init') + this.handleData() }) } else if (config.setting.syncRefresh && nextProps.mainSearch && !is(fromJS(this.props.mainSearch), fromJS(nextProps.mainSearch))) { this.setState({}, () => { @@ -180,7 +185,7 @@ /** * @description 鏁版嵁鍔犺浇 */ - async loadData (hastimer, type) { + async loadData (hastimer) { const { mainSearch, menuType } = this.props const { config, arr_field, BID } = this.state @@ -215,7 +220,7 @@ data: result.data, loading: false }, () => { - this.handleData(type) + this.handleData() }) } else { this.setState({ @@ -230,24 +235,41 @@ } } - handleData = (type) => { - const { data, searchkey, config } = this.state + handleData = () => { + const { data, searchkey, config, selectedKeys, selected } = this.state if (!data || data.length === 0) { this.setState({ + selectedKeys: [], + expandedKeys: [], treedata: [], treeNodes: [], }) + + MKEmitter.emit('resetSelectLine', config.uuid, '', '') return } let parentNodes = [] let _options = [] let logMap = new Map() + let selectKey = selectedKeys[0] || '' + let selectData = '' + let hasSelectKey = false data.forEach(item => { let pval = item[config.wrap.parentField] let val = item[config.wrap.valueField] if (!val || logMap.has(val)) return + + if (selectKey && selectKey === val) { + hasSelectKey = true + selectData = { + ...item, + $title: item[config.wrap.labelField] || '', + $key: val, + $parentId: '' + } + } logMap.set(val, true) if (pval === config.wrap.mark) { @@ -282,14 +304,22 @@ treeNodes: _treeNodes, }) - if (type === 'init' && _treeNodes[0] && config.wrap.selected === 'true') { + if (selected && !hasSelectKey && _treeNodes[0]) { this.setState({ selectedKeys: [_treeNodes[0].$key] }) setTimeout(() => { - MKEmitter.emit('resetSelectLine', config.uuid, _treeNodes[0].$key, '') + MKEmitter.emit('resetSelectLine', config.uuid, _treeNodes[0].$key, _treeNodes[0]) }, 200) + } else if (!hasSelectKey && selectKey) { + this.setState({ + selectedKeys: [] + }) + + MKEmitter.emit('resetSelectLine', config.uuid, '', '') + } else if (hasSelectKey) { + MKEmitter.emit('resetSelectLine', config.uuid, selectKey, selectData) } } @@ -363,12 +393,12 @@ return nodes.map(item => { if (item.children) { return ( - <TreeNode icon={<span><Icon type="folder-open" /><Icon type="folder" /></span>} title={item.$title} key={item.$key} dataRef={item}> + <TreeNode icon={<span><FolderOpenOutlined /><FolderOutlined /></span>} title={item.$title} key={item.$key} dataRef={item}> {this.renderTreeNodes(item.children)} </TreeNode> ) } - return <TreeNode icon={<Icon type="file" />} key={item.$key} title={item.$title} dataRef={item} isLeaf /> + return <TreeNode icon={<FileOutlined />} key={item.$key} title={item.$title} dataRef={item} isLeaf /> }) } @@ -441,7 +471,7 @@ <span className="title">{config.wrap.title}</span> {config.wrap.searchable === 'true' ? <Search allowClear onSearch={this.treeFilter} /> : null} </div> : null} - {treeNodes && treeNodes.length > 0 ? <div className="tree-box"> + {treeNodes && treeNodes.length > 0 ? <div className="tree-box" style={{height: config.wrap.contentHeight}}> <Tree blockNode onSelect={this.selectTreeNode} diff --git a/src/tabviews/custom/components/tree/antd-tree/index.scss b/src/tabviews/custom/components/tree/antd-tree/index.scss index 5c43bad..e60ec78 100644 --- a/src/tabviews/custom/components/tree/antd-tree/index.scss +++ b/src/tabviews/custom/components/tree/antd-tree/index.scss @@ -4,7 +4,7 @@ background-position: center center; background-repeat: no-repeat; background-size: cover; - min-height: 180px; + min-height: 50px; .tree-header { position: relative; @@ -41,7 +41,7 @@ } } .tree-box { - overflow-x: auto; + overflow: auto; padding-bottom: 10px; .ant-tree-node-content-wrapper-close > span > span > .anticon-folder-open { @@ -51,8 +51,9 @@ display: none; } } + .tree-box::-webkit-scrollbar { - height: 10px; + width: 7px; } .tree-box::-webkit-scrollbar-thumb { border-radius: 5px; @@ -61,7 +62,7 @@ } .tree-box::-webkit-scrollbar-track {/*婊氬姩鏉¢噷闈㈣建閬�*/ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); - border-radius: 3px; + border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.07); background: rgba(0, 0, 0, 0); } diff --git a/src/tabviews/custom/index.jsx b/src/tabviews/custom/index.jsx index d4bc44a..b7262d9 100644 --- a/src/tabviews/custom/index.jsx +++ b/src/tabviews/custom/index.jsx @@ -737,7 +737,15 @@ } } - if (item.setting && item.setting.supModule) { + if (item.wrap && item.wrap.supType === 'multi') { // 鏁版嵁鍗″涓婄骇缁勪欢 + if (item.supNodes && item.supNodes[0]) { + item.setting.supModule = item.supNodes[0].componentId + } else { + item.wrap.supType = 'single' + item.supNodes = null + item.setting.supModule = '' + } + } else if (item.setting && item.setting.supModule) { let pid = item.setting.supModule.pop() if (pid && pid !== 'empty') { item.setting.supModule = pid @@ -745,12 +753,13 @@ item.setting.supModule = '' } } - if (item.wrap && item.wrap.doubleClick) { - let index = item.action.findIndex((btn) => btn.uuid === item.wrap.doubleClick) - if (index === -1) { - item.wrap.doubleClick = '' - } - } + + // if (item.wrap && item.wrap.doubleClick) { + // let index = item.action.findIndex((btn) => btn.uuid === item.wrap.doubleClick) + // if (index === -1) { + // item.wrap.doubleClick = '' + // } + // } return true }) diff --git a/src/tabviews/formtab/index.jsx b/src/tabviews/formtab/index.jsx index f831a71..b16b3c7 100644 --- a/src/tabviews/formtab/index.jsx +++ b/src/tabviews/formtab/index.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { notification, Spin, Tabs, Icon} from 'antd' +import { notification, Spin, Tabs} from 'antd' import moment from 'moment' import Api from '@/api' @@ -12,7 +12,7 @@ import options from '@/store/options.js' import asyncComponent from '@/utils/asyncLoadComponent' import MKEmitter from '@/utils/events.js' - +import MkIcon from '@/components/mk-icon' import FormGroup from './formgroup' import FormAction from './actionList' import NotFount from '@/components/404' @@ -185,7 +185,7 @@ item.options.unshift({ key: Utils.getuuid(), Value: '', - Text: this.state.dict['main.all'] + Text: '鍏ㄩ儴' }) } @@ -631,7 +631,7 @@ return ( <TabPane tab={ <span> - {_tab.icon ? <Icon type={_tab.icon} /> : null} + {_tab.icon ? <MkIcon type={_tab.icon} /> : null} {_tab.label} </span> } key={`${index}`}> diff --git a/src/tabviews/formtab/index.scss b/src/tabviews/formtab/index.scss index ca82262..b5c70bb 100644 --- a/src/tabviews/formtab/index.scss +++ b/src/tabviews/formtab/index.scss @@ -85,7 +85,7 @@ padding: 0 10px; font-size: 15px; border-bottom: 1px solid #1890ff; - i { + .anticon { margin-right: 10px; } } diff --git a/src/tabviews/home/defaulthome/index.jsx b/src/tabviews/home/defaulthome/index.jsx index 77f61be..9358fd9 100644 --- a/src/tabviews/home/defaulthome/index.jsx +++ b/src/tabviews/home/defaulthome/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import { Chart } from '@antv/g2' -import { Icon, Tabs, Progress } from 'antd' +import { Tabs, Progress } from 'antd' +import { InfoCircleOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons' import './index.scss' const { TabPane } = Tabs @@ -58,7 +59,7 @@ <span>缁翠慨鎬绘暟</span> </span> <span className="antd-action"> - <Icon type="info-circle-o" /> + <InfoCircleOutlined /> </span> </div> <div className="antd-total"> @@ -74,7 +75,7 @@ <span className="antd-trend-text">10%</span> </span> <span className="antd-trend-up"> - <Icon type="caret-up" /> + <CaretUpOutlined /> </span> </div> <div className="antd-trend-item"> @@ -83,7 +84,7 @@ <span className="antd-trend-text">10%</span> </span> <span className="antd-trend-down"> - <Icon type="caret-down" /> + <CaretDownOutlined /> </span> </div> </div> @@ -111,7 +112,7 @@ <span>瓒呮椂宸ュ崟</span> </span> <span className="antd-action"> - <Icon type="info-circle-o" /> + <InfoCircleOutlined /> </span> </div> <div className="antd-total"> @@ -147,7 +148,7 @@ <span>鍏冲崟</span> </span> <span className="antd-action"> - <Icon type="info-circle-o" /> + <InfoCircleOutlined /> </span> </div> <div className="antd-total"> @@ -183,7 +184,7 @@ <span>鍘熶欢閭瘎</span> </span> <span className="antd-action"> - <Icon type="info-circle-o" /> + <InfoCircleOutlined /> </span> </div> <div className="antd-total"> @@ -203,7 +204,7 @@ <span className="antd-trend-text">10%</span> </span> <span className="antd-trend-up"> - <Icon type="caret-up" /> + <CaretUpOutlined /> </span> </div> <div className="antd-trend-item"> @@ -212,7 +213,7 @@ <span className="antd-trend-text">10%</span> </span> <span className="antd-trend-down"> - <Icon type="caret-down" /> + <CaretDownOutlined /> </span> </div> </div> diff --git a/src/tabviews/home/defaulthome/index.scss b/src/tabviews/home/defaulthome/index.scss index 794aadc..ec0d0d0 100644 --- a/src/tabviews/home/defaulthome/index.scss +++ b/src/tabviews/home/defaulthome/index.scss @@ -51,7 +51,7 @@ top: 4px; right: 0; line-height: 1; - cursor: pointer; + cursor: default; } } .antd-total { diff --git a/src/tabviews/iframe/index.jsx b/src/tabviews/iframe/index.jsx index 391c0de..c1186d4 100644 --- a/src/tabviews/iframe/index.jsx +++ b/src/tabviews/iframe/index.jsx @@ -1,9 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Button, message } from 'antd' import MKEmitter from '@/utils/events.js' -import mzhCN from '@/locales/zh-CN/main.js' -import menUS from '@/locales/en-US/main.js' class Iframe extends Component { static propTypes = { @@ -14,9 +11,7 @@ } state = { - visible: true, - dict: sessionStorage.getItem('lang') !== 'en-US' ? mzhCN : menUS, - debug: sessionStorage.getItem('debug') === 'true' + visible: true } componentDidMount () { @@ -43,31 +38,11 @@ }) } - copyMenuNo = (e) => { - const { MenuNo } = this.props - - e.stopPropagation() - let oInput = document.createElement('input') - oInput.value = MenuNo || '' - document.body.appendChild(oInput) - oInput.select() - document.execCommand('Copy') - oInput.className = 'oInput' - oInput.style.display = 'none' - message.success(this.state.dict['main.copy.success']) - } - render () { - const { visible, debug } = this.state + const { visible } = this.state return (<div> {visible ? <iframe title={this.props.title} src={this.props.url} /> : null} - {debug ? <Button - icon="copy" - shape="circle" - className={'main-copy ifr-copy'} - onClick={this.copyMenuNo} - /> : null} </div>) } } diff --git a/src/tabviews/rolemanage/index.jsx b/src/tabviews/rolemanage/index.jsx index 36c6c16..a856b86 100644 --- a/src/tabviews/rolemanage/index.jsx +++ b/src/tabviews/rolemanage/index.jsx @@ -1,15 +1,14 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Card, Col, Row, Icon, Menu, notification, Spin, Input, Tabs, Button, Tree, Empty, Select } from 'antd' +import { Card, Col, Row, Menu, notification, Spin, Input, Tabs, Button, Tree, Empty, Select } from 'antd' +import { BankOutlined } from '@ant-design/icons' import md5 from 'md5' import Api from '@/api' import options from '@/store/options.js' import Utils from '@/utils/utils.js' import MKEmitter from '@/utils/events.js' -import zhCN from '@/locales/zh-CN/main.js' -import enUS from '@/locales/en-US/main.js' import './index.scss' const { Search } = Input @@ -26,7 +25,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, loading: true, loadingTree: false, loadingAppTree: false, @@ -860,7 +858,7 @@ className="role-list" title={ <span className="role-title"> - <Icon type="bank" /> + <BankOutlined /> <span className="title">瑙掕壊</span> <Search placeholder="" value={primarykey} onChange={e => this.setState({primarykey: e.target.value})} onSearch={this.filterRole} /> </span> @@ -927,7 +925,7 @@ className="role-list" title={ <span className="role-title"> - <Icon type="bank" /> + <BankOutlined /> <span className="title">瑙掕壊</span> <Search placeholder="" value={primarykey} onChange={e => this.setState({primarykey: e.target.value})} onSearch={this.filterRole} /> </span> diff --git a/src/tabviews/scriptmanage/config.jsx b/src/tabviews/scriptmanage/config.jsx index 493937d..ec8e807 100644 --- a/src/tabviews/scriptmanage/config.jsx +++ b/src/tabviews/scriptmanage/config.jsx @@ -47,7 +47,7 @@ type: "Modal", setting: { "title":"娣诲姞", - "width":60, + "width": 80, "focus":"func", "cols":"2", "finish":"close", @@ -69,7 +69,7 @@ type: "Modal", setting: { "title":"淇敼", - "width":60, + "width": 80, "focus":"func", "cols":"2", "finish":"close", diff --git a/src/tabviews/scriptmanage/index.jsx b/src/tabviews/scriptmanage/index.jsx index 06d760a..1773ebd 100644 --- a/src/tabviews/scriptmanage/index.jsx +++ b/src/tabviews/scriptmanage/index.jsx @@ -323,7 +323,7 @@ <div className="main-table-box"> {this.state.data && this.state.data.length > 0 ? <div className="pickchange"> - <Switch title="鏀惰捣" checkedChildren="寮�" unCheckedChildren="鍏�" defaultChecked={pickup} onChange={this.pickupChange} /> + <Switch title="鏀惰捣" checkedChildren="寮�" unCheckedChildren="鍏�" checked={pickup} onChange={this.pickupChange} /> </div> : null } <MainTable diff --git a/src/tabviews/scriptmanage/index.scss b/src/tabviews/scriptmanage/index.scss index 7575443..7068f22 100644 --- a/src/tabviews/scriptmanage/index.scss +++ b/src/tabviews/scriptmanage/index.scss @@ -44,7 +44,7 @@ padding: 0 10px; font-size: 15px; border-bottom: 1px solid #1890ff; - i { + .anticon { margin-right: 10px; } } diff --git a/src/tabviews/subtable/index.jsx b/src/tabviews/subtable/index.jsx index 6067557..d872d45 100644 --- a/src/tabviews/subtable/index.jsx +++ b/src/tabviews/subtable/index.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { notification, Spin, Switch, Row, Col, Icon, Tabs} from 'antd' +import { notification, Spin, Switch, Row, Col, Tabs} from 'antd' import Api from '@/api' import zhCN from '@/locales/zh-CN/main.js' @@ -13,6 +13,7 @@ import { updateSubTable } from '@/utils/utils-update.js' import asyncComponent from '@/utils/asyncComponent' import asyncSpinComponent from '@/utils/asyncSpinComponent' +import MkIcon from '@/components/mk-icon' import NotFount from '@/components/404' import MKEmitter from '@/utils/events.js' @@ -318,6 +319,14 @@ config.setting.selected = 'false' } else if (config.setting.selected === 'init' && config.setting.onload === 'false') { config.setting.selected = 'false' + } + + if (config.setting.controlField) { + if (config.setting.controlVal) { + config.setting.controlVal = config.setting.controlVal.split(',') + } else { + config.setting.controlVal = [''] + } } this.setState({ @@ -629,8 +638,15 @@ } item.key = index item.$$uuid = item[setting.primaryKey] || '' + item.$$key = '' + item.key + item.$$uuid item.$$BID = BID || '' item.$Index = start + index + '' + + if (setting.controlField) { + if (setting.controlVal.includes(item[setting.controlField])) { + item.$disabled = true + } + } return item }), @@ -694,6 +710,7 @@ data = data.map(item => { if (item.$$uuid === _data.$$uuid) { _data.key = item.key + _data.$$key = '' + item.key + item.$$uuid _data.$Index = item.$Index return _data } else { @@ -979,7 +996,7 @@ {/* 瑙嗗浘缁� */} {!config.expand ? <Tabs activeKey={chartId} onChange={this.changeChart}> {config.charts.map(item => ( - <TabPane tab={<Icon type={item.icon} />} key={item.uuid}></TabPane> + <TabPane tab={<MkIcon type={item.icon} />} key={item.uuid}></TabPane> ))} </Tabs> : null} {config.charts.map(item => { diff --git a/src/tabviews/subtabtable/index.jsx b/src/tabviews/subtabtable/index.jsx index c3d2df2..2daa24c 100644 --- a/src/tabviews/subtabtable/index.jsx +++ b/src/tabviews/subtabtable/index.jsx @@ -282,6 +282,14 @@ config.setting.selected = 'false' } + if (config.setting.controlField) { + if (config.setting.controlVal) { + config.setting.controlVal = config.setting.controlVal.split(',') + } else { + config.setting.controlVal = [''] + } + } + this.setState({ pageSize: config.setting.pageSize || 10, loadingview: false, @@ -570,8 +578,15 @@ } item.key = index item.$$uuid = item[setting.primaryKey] || '' + item.$$key = '' + item.key + item.$$uuid item.$$BID = BID || '' item.$Index = start + index + '' + + if (setting.controlField) { + if (setting.controlVal.includes(item[setting.controlField])) { + item.$disabled = true + } + } return item }), @@ -674,6 +689,7 @@ data = data.map(item => { if (item.$$uuid === _data.$$uuid) { _data.key = item.key + _data.$$key = '' + item.key + item.$$uuid _data.$Index = item.$Index return _data } else { diff --git a/src/tabviews/treepage/index.jsx b/src/tabviews/treepage/index.jsx index b80863d..936dac9 100644 --- a/src/tabviews/treepage/index.jsx +++ b/src/tabviews/treepage/index.jsx @@ -2,7 +2,8 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { notification, Spin, Tabs, Icon, Tree, Row, Col, Card, Input, Empty } from 'antd' +import { notification, Spin, Tabs, Tree, Row, Col, Card, Input, Empty } from 'antd' +import { FolderOpenOutlined, FolderOutlined, FileOutlined } from '@ant-design/icons' import Api from '@/api' import zhCN from '@/locales/zh-CN/main.js' @@ -12,6 +13,7 @@ import MKEmitter from '@/utils/events.js' import asyncComponent from '@/utils/asyncComponent' import asyncSpinComponent from '@/utils/asyncSpinComponent' +import MkIcon from '@/components/mk-icon' import NotFount from '@/components/404' import './index.scss' @@ -49,7 +51,8 @@ revertLoading: false, // 鎭㈠榛樿璁剧疆 expandedKeys: [], // 灞曞紑鐨勬爲鑺傜偣 selectedKeys: [], // 閫変腑鐨勬爲鑺傜偣 - shortcuts: null // 蹇嵎閿� + shortcuts: null, // 蹇嵎閿� + searchKey: '' } /** @@ -362,12 +365,12 @@ return nodes.map(item => { if (item.children) { return ( - <TreeNode icon={<span><Icon type="folder-open" /><Icon type="folder" /></span>} title={item.title} key={item.key} dataRef={item}> + <TreeNode icon={<span><FolderOpenOutlined /><FolderOutlined /></span>} title={item.title} key={item.key} dataRef={item}> {this.renderTreeNodes(item.children)} </TreeNode> ) } - return <TreeNode icon={<Icon type="file" />} key={item.key} title={item.title} dataRef={item} isLeaf /> + return <TreeNode icon={<FileOutlined />} key={item.key} title={item.title} dataRef={item} isLeaf /> }) } @@ -468,7 +471,8 @@ BIDs: {}, shortcuts: null, expandedKeys: [], - selectedKeys: [] + selectedKeys: [], + searchKey: '' }, () => { this.loadconfig() }) @@ -609,7 +613,7 @@ return ( <TabPane tab={ <span id={_tab.uuid}> - {_tab.icon ? <Icon type={_tab.icon} /> : null} + {_tab.icon ? <MkIcon type={_tab.icon} /> : null} {_tab.label} </span> } key={_tab.uuid}> diff --git a/src/tabviews/verupmanage/index.jsx b/src/tabviews/verupmanage/index.jsx index 57d29bb..22c47a4 100644 --- a/src/tabviews/verupmanage/index.jsx +++ b/src/tabviews/verupmanage/index.jsx @@ -1,7 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { notification, Tabs, Icon, Switch } from 'antd' +import { notification, Tabs, Switch } from 'antd' import moment from 'moment' import Api from '@/api' @@ -12,8 +12,8 @@ import asyncComponent from '@/utils/asyncComponent' import asyncSpinComponent from '@/utils/asyncSpinComponent' import { verupMainTable, buttonConfig } from './config' +import MkIcon from '@/components/mk-icon' import MKEmitter from '@/utils/events.js' - import MainAction from './actionList' import './index.scss' @@ -470,7 +470,7 @@ <div className="main-table-box"> {this.state.data && this.state.data.length > 0 ? <div className="pickchange"> - <Switch title="鏀惰捣" checkedChildren="寮�" unCheckedChildren="鍏�" defaultChecked={pickup} onChange={this.pickupChange} /> + <Switch title="鏀惰捣" checkedChildren="寮�" unCheckedChildren="鍏�" checked={pickup} onChange={this.pickupChange} /> </div> : null } <MainTable @@ -494,7 +494,7 @@ return ( <TabPane tab={ <span> - {_tab.icon ? <Icon type={_tab.icon} /> : null} + {_tab.icon ? <MkIcon type={_tab.icon} /> : null} {_tab.label} </span> } key={`${index}`}> diff --git a/src/tabviews/verupmanage/index.scss b/src/tabviews/verupmanage/index.scss index 1027137..68df191 100644 --- a/src/tabviews/verupmanage/index.scss +++ b/src/tabviews/verupmanage/index.scss @@ -44,7 +44,7 @@ padding: 0 10px; font-size: 15px; border-bottom: 1px solid #1890ff; - i { + .anticon { margin-right: 10px; } } diff --git a/src/tabviews/zshare/actionList/changeuserbutton/index.jsx b/src/tabviews/zshare/actionList/changeuserbutton/index.jsx index 07ca866..6e36e79 100644 --- a/src/tabviews/zshare/actionList/changeuserbutton/index.jsx +++ b/src/tabviews/zshare/actionList/changeuserbutton/index.jsx @@ -1,12 +1,13 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Button, notification, Modal, Icon } from 'antd' +import { Button, notification, Modal } from 'antd' import Api from '@/api' import zhCN from '@/locales/zh-CN/main.js' import enUS from '@/locales/en-US/main.js' import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' // import './index.scss' const { confirm } = Modal @@ -14,12 +15,14 @@ class NewPageButton extends Component { static propTpyes = { show: PropTypes.any, // 鎸夐挳鏄剧ず鏍峰紡鎺у埗 - position: PropTypes.any, // 鎸夐挳浣嶇疆锛屽伐鍏锋爮涓簍oolbar MenuID: PropTypes.any, // 鑿滃崟ID + BData: PropTypes.any, // 涓昏〃鏁版嵁 BID: PropTypes.string, // 涓昏〃ID btn: PropTypes.object, // 鎸夐挳 selectedData: PropTypes.any, // 瀛愯〃涓�夋嫨鏁版嵁 setting: PropTypes.any, // 椤甸潰閫氱敤璁剧疆 + disabled: PropTypes.any, // 琛屾寜閽鐢� + lineId: PropTypes.any, // 琛岀储寮�+涓婚敭鍊硷紝鐢ㄤ簬琛屾寜閽弻鍑� } state = { @@ -30,7 +33,7 @@ } UNSAFE_componentWillMount () { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props let disabled = false if (btn.controlField && selectedData && selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� @@ -40,7 +43,22 @@ disabled = true } }) - this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + this.setState({hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent') { + if (!BData || !BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (this.props.disabled || disabled) { + this.setState({disabled: true}) } } @@ -53,11 +71,10 @@ } UNSAFE_componentWillReceiveProps (nextProps) { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props + let disabled = false if (btn.controlField && !is(fromJS(nextProps.selectedData || []), fromJS(selectedData || []))) { - let disabled = false - if (nextProps.selectedData && nextProps.selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� nextProps.selectedData.forEach(item => { let s = item[btn.controlField] + '' @@ -67,6 +84,23 @@ }) } this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent' && !is(fromJS(nextProps.BData || {}), fromJS(BData || {}))) { + if (!nextProps.BData || !nextProps.BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = nextProps.BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (nextProps.disabled || disabled) { + this.setState({disabled: true}) + } else { + this.setState({disabled: false}) } } @@ -84,7 +118,13 @@ const { setting, selectedData, btn, MenuID } = this.props const { loading, disabled } = this.state - if ((triggerId && btn.uuid !== triggerId) || loading || disabled) return + if (loading || disabled) return + if (triggerId) { + if (btn.uuid !== triggerId) return + if (this.props.lineId && record && record[0] && this.props.lineId !== record[0].$$key) { + return + } + } if (btn.funcType === 'closetab') { MKEmitter.emit('closeTabView', MenuID || btn.$MenuID) @@ -229,7 +269,7 @@ label = btn.label icon = btn.icon || '' } else if (show === 'link') { - label = <span>{btn.label}{btn.icon ? <Icon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> + label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> icon = '' } else if (show === 'icon') { icon = btn.icon || '' diff --git a/src/tabviews/zshare/actionList/excelInbutton/index.jsx b/src/tabviews/zshare/actionList/excelInbutton/index.jsx index 0961633..dc4e82e 100644 --- a/src/tabviews/zshare/actionList/excelInbutton/index.jsx +++ b/src/tabviews/zshare/actionList/excelInbutton/index.jsx @@ -3,7 +3,7 @@ import moment from 'moment' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { Button, Modal, notification, message, Icon } from 'antd' +import { Button, Modal, notification, message } from 'antd' import ExcelIn from './excelin' import Utils, { getExcelInSql } from '@/utils/utils.js' @@ -12,17 +12,20 @@ import zhCN from '@/locales/zh-CN/main.js' import enUS from '@/locales/en-US/main.js' import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' // import './index.scss' class ExcelInButton extends Component { static propTpyes = { show: PropTypes.any, // 鏄剧ず鏍峰紡 - position: PropTypes.any, // 鎸夐挳浣嶇疆锛屽伐鍏锋爮涓簍oolbar BID: PropTypes.string, // 涓昏〃ID + BData: PropTypes.any, // 涓昏〃鏁版嵁 selectedData: PropTypes.any, // 瀛愯〃涓�夋嫨鏁版嵁 Tab: PropTypes.any, // 濡傛灉褰撳墠鍏冪礌涓烘爣绛炬椂锛宼ab涓烘爣绛句俊鎭� btn: PropTypes.object, // 鎸夐挳 setting: PropTypes.any, // 椤甸潰閫氱敤璁剧疆 + disabled: PropTypes.any, // 琛屾寜閽鐢� + lineId: PropTypes.any, // 琛岀储寮�+涓婚敭鍊硷紝鐢ㄤ簬琛屾寜閽弻鍑� } state = { @@ -35,7 +38,7 @@ } UNSAFE_componentWillMount () { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props let disabled = false if (btn.controlField && selectedData && selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� @@ -45,7 +48,22 @@ disabled = true } }) - this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + this.setState({hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent') { + if (!BData || !BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (this.props.disabled || disabled) { + this.setState({disabled: true}) } } @@ -58,11 +76,10 @@ } UNSAFE_componentWillReceiveProps (nextProps) { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props + let disabled = false if (btn.controlField && !is(fromJS(nextProps.selectedData || []), fromJS(selectedData || []))) { - let disabled = false - if (nextProps.selectedData && nextProps.selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� nextProps.selectedData.forEach(item => { let s = item[btn.controlField] + '' @@ -72,6 +89,23 @@ }) } this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent' && !is(fromJS(nextProps.BData || {}), fromJS(BData || {}))) { + if (!nextProps.BData || !nextProps.BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = nextProps.BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (nextProps.disabled || disabled) { + this.setState({disabled: true}) + } else { + this.setState({disabled: false}) } } @@ -89,7 +123,13 @@ const { setting, Tab, BID, btn, selectedData } = this.props const { loading, disabled } = this.state - if ((triggerId && btn.uuid !== triggerId) || loading || disabled) return + if (loading || disabled) return + if (triggerId) { + if (btn.uuid !== triggerId) return + if (this.props.lineId && record && record[0] && this.props.lineId !== record[0].$$key) { + return + } + } if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { notification.warning({ @@ -169,7 +209,9 @@ loading: false }) - if (btn.execSuccess !== 'never') { + if (btn.execSuccess === 'closepoptab') { + MKEmitter.emit('popclose') + } else if (btn.execSuccess !== 'never') { MKEmitter.emit('refreshByButtonResult', btn.$menuId, btn.execSuccess, btn, '', this.state.selines) } if (btn.switchTab && btn.switchTab.length > 0) { @@ -213,7 +255,9 @@ loading: false }) - if (btn.execError !== 'never') { + if (btn.execError === 'closepoptab') { + MKEmitter.emit('popclose') + } else if (btn.execError !== 'never') { MKEmitter.emit('refreshByButtonResult', btn.$menuId, btn.execError, btn, '', this.state.selines) } } @@ -462,7 +506,7 @@ label = btn.label icon = btn.icon || '' } else if (show === 'link') { - label = <span>{btn.label}{btn.icon ? <Icon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> + label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> icon = '' } else if (show === 'icon') { icon = btn.icon || 'upload' diff --git a/src/tabviews/zshare/actionList/exceloutbutton/index.jsx b/src/tabviews/zshare/actionList/exceloutbutton/index.jsx index 376dcc8..891cd34 100644 --- a/src/tabviews/zshare/actionList/exceloutbutton/index.jsx +++ b/src/tabviews/zshare/actionList/exceloutbutton/index.jsx @@ -3,7 +3,7 @@ import moment from 'moment' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { Button, Modal, notification, message, Icon } from 'antd' +import { Button, Modal, notification, message } from 'antd' import * as XLSX from 'xlsx' import Utils from '@/utils/utils.js' @@ -12,24 +12,50 @@ import zhCN from '@/locales/zh-CN/main.js' import enUS from '@/locales/en-US/main.js' import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' // import './index.scss' class ExcelOutButton extends Component { static propTpyes = { BID: PropTypes.string, // 涓昏〃ID - position: PropTypes.any, // 鎸夐挳浣嶇疆锛屽伐鍏锋爮涓簍oolbar + BData: PropTypes.any, // 涓昏〃鏁版嵁 show: PropTypes.any, // 鏄剧ず鏍峰紡 Tab: PropTypes.any, // 濡傛灉褰撳墠鍏冪礌涓烘爣绛炬椂锛宼ab涓烘爣绛句俊鎭� btn: PropTypes.object, // 鎸夐挳 setting: PropTypes.any, // 椤甸潰閫氱敤璁剧疆 updateStatus: PropTypes.func, // 鎸夐挳鐘舵�佹洿鏂� + disabled: PropTypes.any, // 琛屾寜閽鐢� + lineId: PropTypes.any, // 琛岀储寮�+涓婚敭鍊硷紝鐢ㄤ簬琛屾寜閽弻鍑� } state = { dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, excelName: '', // 鏂囦欢鍚� search: '', // 鎼滅储鏉′欢 - loading: false // 瀵煎嚭涓� + loading: false, // 瀵煎嚭涓� + hidden: false, + disabled: false + } + + UNSAFE_componentWillMount () { + const { btn, BData, disabled } = this.props + + if (btn.control === 'parent') { + if (!BData || !BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (disabled) { + this.setState({disabled: true}) + } } shouldComponentUpdate (nextProps, nextState) { @@ -39,6 +65,29 @@ componentDidMount () { MKEmitter.addListener('triggerBtnId', this.actionTrigger) MKEmitter.addListener('returnModuleParam', this.triggerExcelout) + } + + UNSAFE_componentWillReceiveProps (nextProps) { + const { btn, BData } = this.props + + if (btn.control === 'parent' && !is(fromJS(nextProps.BData || {}), fromJS(BData || {}))) { + if (!nextProps.BData || !nextProps.BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = nextProps.BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (nextProps.disabled) { + this.setState({disabled: true}) + } else { + this.setState({disabled: false}) + } } componentWillUnmount () { @@ -68,11 +117,17 @@ /** * @description 瑙﹀彂鎸夐挳鎿嶄綔 */ - actionTrigger = (triggerId) => { + actionTrigger = (triggerId, record) => { const { setting, Tab, BID, btn } = this.props - const { loading } = this.state + const { loading, disabled } = this.state - if ((triggerId && btn.uuid !== triggerId) || loading) return + if (loading || disabled) return + if (triggerId) { + if (btn.uuid !== triggerId) return + if (this.props.lineId && record && record[0] && this.props.lineId !== record[0].$$key) { + return + } + } if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { notification.warning({ @@ -819,7 +874,9 @@ loading: false }) - if (btn.execSuccess !== 'never') { + if (btn.execSuccess === 'closepoptab') { + MKEmitter.emit('popclose') + } else if (btn.execSuccess !== 'never') { MKEmitter.emit('refreshByButtonResult', btn.$menuId, btn.execSuccess, btn, '', []) } if (btn.switchTab && btn.switchTab.length > 0) { @@ -863,20 +920,25 @@ loading: false }) - if (btn.execError !== 'never') { + if (btn.execError === 'closepoptab') { + MKEmitter.emit('popclose') + } else if (btn.execError !== 'never') { MKEmitter.emit('refreshByButtonResult', btn.$menuId, btn.execError, btn, '', []) } } render() { const { btn, show } = this.props - const { loading } = this.state + const { loading, hidden, disabled } = this.state + + if (hidden) return null if (show === 'actionList') { return ( <Button className={'mk-btn mk-' + btn.class} icon={btn.icon} + disabled={disabled} onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} loading={loading} >{btn.label}</Button> @@ -889,7 +951,7 @@ label = btn.label icon = btn.icon || '' } else if (show === 'link') { - label = <span>{btn.label}{btn.icon ? <Icon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> + label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> icon = '' } else if (show === 'icon') { icon = btn.icon || 'download' @@ -903,6 +965,7 @@ type="link" title={show === 'icon' ? btn.label : ''} loading={loading} + disabled={disabled} style={btn.style} icon={icon} onClick={(e) => {e.stopPropagation(); this.actionTrigger()}} diff --git a/src/tabviews/zshare/actionList/index.jsx b/src/tabviews/zshare/actionList/index.jsx index 3c7d4e1..068783c 100644 --- a/src/tabviews/zshare/actionList/index.jsx +++ b/src/tabviews/zshare/actionList/index.jsx @@ -4,8 +4,6 @@ import { Affix } from 'antd' import asyncComponent from './asyncButtonComponent' -import zhCN from '@/locales/zh-CN/main.js' -import enUS from '@/locales/en-US/main.js' import './index.scss' const NormalButton = asyncComponent(() => import('./normalbutton')) @@ -30,9 +28,7 @@ ContainerId: PropTypes.any // tab椤甸潰ID锛岀敤浜庡脊绐楁帶鍒� } - state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS - } + state = {} shouldComponentUpdate (nextProps, nextState) { return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState)) @@ -53,7 +49,6 @@ BData={BData} setting={setting} columns={columns} - position="toolbar" ContainerId={ContainerId} selectedData={selectedData} /> @@ -66,8 +61,8 @@ BID={BID} Tab={Tab} btn={item} + BData={BData} setting={setting} - position="toolbar" selectedData={selectedData} /> ) @@ -79,8 +74,8 @@ BID={BID} Tab={Tab} btn={item} + BData={BData} setting={setting} - position="toolbar" /> ) } else if (item.OpenType === 'popview') { @@ -93,7 +88,6 @@ btn={item} BData={BData} setting={setting} - position="toolbar" selectedData={selectedData} /> ) @@ -103,9 +97,9 @@ key={item.uuid} show={item.show || 'actionList'} btn={item} + BData={BData} MenuID={MenuID} setting={setting} - position="toolbar" selectedData={selectedData} /> ) @@ -115,8 +109,8 @@ key={item.uuid} show="actionList" btn={item} + BData={BData} setting={setting} - position="toolbar" selectedData={selectedData} /> ) @@ -128,9 +122,9 @@ show={item.show || 'actionList'} BID={BID} btn={item} + BData={BData} MenuID={MenuID} setting={setting} - position="toolbar" selectedData={selectedData} /> ) @@ -144,7 +138,6 @@ btn={item} BData={BData} setting={setting} - position="toolbar" ContainerId={ContainerId} selectedData={selectedData} /> diff --git a/src/tabviews/zshare/actionList/newpagebutton/index.jsx b/src/tabviews/zshare/actionList/newpagebutton/index.jsx index 6f7b8cb..8914d39 100644 --- a/src/tabviews/zshare/actionList/newpagebutton/index.jsx +++ b/src/tabviews/zshare/actionList/newpagebutton/index.jsx @@ -1,11 +1,12 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Button, notification, Modal, Icon } from 'antd' +import { Button, notification, Modal } from 'antd' import zhCN from '@/locales/zh-CN/main.js' import enUS from '@/locales/en-US/main.js' import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' import './index.scss' const { confirm } = Modal @@ -13,10 +14,12 @@ class NewPageButton extends Component { static propTpyes = { show: PropTypes.any, // 鎸夐挳鏄剧ず鏍峰紡鎺у埗 - position: PropTypes.any, // 鎸夐挳浣嶇疆锛屽伐鍏锋爮涓簍oolbar + BData: PropTypes.any, // 涓昏〃鏁版嵁 btn: PropTypes.object, // 鎸夐挳 selectedData: PropTypes.any, // 瀛愯〃涓�夋嫨鏁版嵁 setting: PropTypes.any, // 椤甸潰閫氱敤璁剧疆 + disabled: PropTypes.any, // 琛屾寜閽鐢� + lineId: PropTypes.any, // 琛岀储寮�+涓婚敭鍊硷紝鐢ㄤ簬琛屾寜閽弻鍑� } state = { @@ -27,7 +30,7 @@ } UNSAFE_componentWillMount () { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props let disabled = false if (btn.controlField && selectedData && selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� @@ -37,7 +40,22 @@ disabled = true } }) - this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + this.setState({hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent') { + if (!BData || !BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (this.props.disabled || disabled) { + this.setState({disabled: true}) } } @@ -50,11 +68,10 @@ } UNSAFE_componentWillReceiveProps (nextProps) { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props + let disabled = false if (btn.controlField && !is(fromJS(nextProps.selectedData || []), fromJS(selectedData || []))) { - let disabled = false - if (nextProps.selectedData && nextProps.selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� nextProps.selectedData.forEach(item => { let s = item[btn.controlField] + '' @@ -63,7 +80,24 @@ } }) } - this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + this.setState({hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent' && !is(fromJS(nextProps.BData || {}), fromJS(BData || {}))) { + if (!nextProps.BData || !nextProps.BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = nextProps.BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (nextProps.disabled || disabled) { + this.setState({disabled: true}) + } else { + this.setState({disabled: false}) } } @@ -81,7 +115,13 @@ const { setting, btn, selectedData } = this.props const { disabled } = this.state - if ((triggerId && btn.uuid !== triggerId) || disabled) return + if (disabled) return + if (triggerId) { + if (btn.uuid !== triggerId) return + if (this.props.lineId && record && record[0] && this.props.lineId !== record[0].$$key) { + return + } + } if (type === 'linkbtn' && selectedData && selectedData.length === 1) { if (record[0].$Index !== selectedData[0].$Index) { @@ -215,7 +255,7 @@ label = btn.label icon = btn.icon || '' } else if (show === 'link') { - label = <span>{btn.label}{btn.icon ? <Icon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> + label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> icon = '' } else if (show === 'icon') { icon = btn.icon || '' diff --git a/src/tabviews/zshare/actionList/normalbutton/index.jsx b/src/tabviews/zshare/actionList/normalbutton/index.jsx index 7278fd3..4b71efb 100644 --- a/src/tabviews/zshare/actionList/normalbutton/index.jsx +++ b/src/tabviews/zshare/actionList/normalbutton/index.jsx @@ -3,7 +3,7 @@ import moment from 'moment' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { Button, Modal, notification, message, Drawer, Icon } from 'antd' +import { Button, Modal, notification, message, Drawer, Switch, Checkbox } from 'antd' import Api from '@/api' import Utils, { getSysDefaultSql } from '@/utils/utils.js' @@ -13,6 +13,7 @@ import asyncSpinComponent from '@/utils/asyncSpinComponent' import { updateForm } from '@/utils/utils-update.js' import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' // import './index.scss' const MutilForm = asyncSpinComponent(() => import('@/tabviews/zshare/mutilform')) @@ -31,6 +32,8 @@ columns: PropTypes.any, // 瀛楁鍒� setting: PropTypes.any, // 椤甸潰閫氱敤璁剧疆 ContainerId: PropTypes.any, // tab椤甸潰ID锛岀敤浜庡脊绐楁帶鍒� + disabled: PropTypes.any, // 琛屾寜閽鐢� + lineId: PropTypes.any, // 琛岀储寮�+涓婚敭鍊硷紝鐢ㄤ簬琛屾寜閽弻鍑� } state = { @@ -45,13 +48,14 @@ disabled: false, hidden: false, checkParam: null, - autoMatic: false + autoMatic: false, + check: false } moduleParams = null UNSAFE_componentWillMount () { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props let disabled = false if (btn.controlField && selectedData && selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� @@ -61,7 +65,26 @@ disabled = true } }) - this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + this.setState({hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent') { + if (!BData || !BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + if (this.props.disabled || disabled) { + this.setState({disabled: true}) + } + + if (btn.OpenType === 'form') { + let data = selectedData && selectedData[0] ? selectedData[0] : null + this.setState({check: data && data[btn.field] === btn.openVal}) } } @@ -84,11 +107,10 @@ } UNSAFE_componentWillReceiveProps (nextProps) { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props + let disabled = false if (btn.controlField && !is(fromJS(nextProps.selectedData || []), fromJS(selectedData || []))) { - let disabled = false - if (nextProps.selectedData && nextProps.selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� nextProps.selectedData.forEach(item => { let s = item[btn.controlField] + '' @@ -97,7 +119,29 @@ } }) } - this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + this.setState({hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent' && !is(fromJS(nextProps.BData || {}), fromJS(BData || {}))) { + if (!nextProps.BData || !nextProps.BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = nextProps.BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (nextProps.disabled || disabled) { + this.setState({disabled: true}) + } else { + this.setState({disabled: false}) + } + + if (btn.OpenType === 'form') { + let data = nextProps.selectedData && nextProps.selectedData[0] ? nextProps.selectedData[0] : null + this.setState({check: data && data[btn.field] === btn.openVal}) } } @@ -155,7 +199,13 @@ const { Tab, BID, btn, selectedData, setting } = this.props const { loading, disabled } = this.state - if ((triggerId && btn.uuid !== triggerId) || loading || disabled) return + if (loading || disabled) return + if (triggerId) { + if (btn.uuid !== triggerId) return + if (this.props.lineId && record && record[0] && this.props.lineId !== record[0].$$key) { + return + } + } if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { notification.warning({ @@ -280,6 +330,31 @@ }, () => { this.improveAction() }) + } else if (btn.OpenType === 'form') { + this.setState({ + loading: true, + check: !this.state.check + }, () => { + let type = 'text' + let fieldlen = 50 + let value = this.state.check ? btn.openVal : btn.closeVal + + if (typeof(value) === 'number') { + type = 'number' + fieldlen = 0 + } + + let item = { + type: type, + readonly: false, + readin: true, + writein: true, + fieldlen: fieldlen, + key: btn.field, + value: value + } + this.execSubmit(data, () => { this.setState({loading: false})}, [item]) + }) } if (window.GLOB.systemType === 'production') { @@ -349,7 +424,7 @@ } param.LText = Utils.formatOptions(param.LText) - } else if (btn.OpenType === 'pop' || btn.OpenType === 'formSubmit') { // 琛ㄥ崟 + } else if (btn.OpenType === 'pop' || btn.OpenType === 'formSubmit' || btn.OpenType === 'form') { // 琛ㄥ崟 if (btn.sqlType === 'insert') { // 绯荤粺鍑芥暟娣诲姞鏃讹紝鐢熸垚uuid primaryId = '' @@ -597,7 +672,7 @@ param[setting.primaryKey] = primaryId // 璁剧疆涓婚敭鍙傛暟 } - if (btn.OpenType === 'pop' || btn.OpenType === 'formSubmit') { // 琛ㄥ崟 + if (btn.OpenType === 'pop' || btn.OpenType === 'formSubmit' || btn.OpenType === 'form') { // 琛ㄥ崟 formdata.forEach(_data => { param[_data.key] = _data.value }) @@ -772,7 +847,7 @@ param.BID = this.props.BID } - if ((btn.OpenType === 'pop' || btn.OpenType === 'formSubmit') && formdata) { // 琛ㄥ崟 + if ((btn.OpenType === 'pop' || btn.OpenType === 'formSubmit' || btn.OpenType === 'form') && formdata) { // 琛ㄥ崟 formdata.forEach(_data => { param[_data.key] = _data.value }) @@ -1413,6 +1488,8 @@ if (btn.execSuccess === 'closetab') { MKEmitter.emit('closeTabView', btn.$MenuID) + } else if (btn.execSuccess === 'closepoptab') { + MKEmitter.emit('popclose') } else if (btn.execSuccess !== 'never') { MKEmitter.emit('refreshByButtonResult', btn.$menuId, btn.execSuccess, btn, id, this.state.selines) } @@ -1645,8 +1722,13 @@ MKEmitter.emit('mkFC', 'focus', btnconfig.setting.errFocus) } - if (btn.execError !== 'never') { + if (btn.execError === 'closepoptab') { + MKEmitter.emit('popclose') + } else if (btn.execError !== 'never') { MKEmitter.emit('refreshByButtonResult', btn.$menuId, btn.execError, btn, '', this.state.selines) + } else if (btn.OpenType === 'form') { + let data = this.props.selectedData && this.props.selectedData[0] ? this.props.selectedData[0] : null + this.setState({check: data && data[btn.field] === btn.openVal}) } } @@ -1692,7 +1774,7 @@ const { btnconfig, autoMatic } = this.state if (btnconfig) { - if (!autoMatic && btnconfig.setting.display === 'prompt') { // 濡傛灉琛ㄥ崟浠ユ槸鍚︽灞曠ず + if (!autoMatic && (btnconfig.setting.display === 'prompt' || btnconfig.setting.display === 'exec')) { // 濡傛灉琛ㄥ崟浠ユ槸鍚︽灞曠ず this.modelconfirm() } else { this.setState({ @@ -1736,7 +1818,7 @@ this.setState({ btnconfig: _LongParam }, () => { - if (!autoMatic && _LongParam.setting.display === 'prompt') { // 濡傛灉琛ㄥ崟浠ユ槸鍚︽灞曠ず + if (!autoMatic && (_LongParam.setting.display === 'prompt' || _LongParam.setting.display === 'exec')) { // 濡傛灉琛ㄥ崟浠ユ槸鍚︽灞曠ず this.modelconfirm() } else { this.setState({ @@ -1845,17 +1927,21 @@ }) }) - confirm({ - title: this.state.dict['main.action.confirm.tip'], - onOk() { - return new Promise(resolve => { - _this.execSubmit(selines, resolve, result) - }) - }, - onCancel() { - _this.setState({ loading: false }) - } - }) + if (btnconfig.setting.display === 'exec') { + this.execSubmit(selines, () => {}, result) + } else { + confirm({ + title: this.state.dict['main.action.confirm.tip'], + onOk() { + return new Promise(resolve => { + _this.execSubmit(selines, resolve, result) + }) + }, + onCancel() { + _this.setState({ loading: false }) + } + }) + } } /** @@ -1868,14 +1954,14 @@ if (!btnconfig || !btnconfig.setting) return null let title = btnconfig.setting.title - let width = btnconfig.setting.width + 'vw' + let width = btnconfig.setting.width > 100 ? btnconfig.setting.width : btnconfig.setting.width + 'vw' let clickouter = btnconfig.setting.clickouter === 'close' if (btnconfig.setting.display === 'drawer') { let height = '100vh' if (btnconfig.setting.placement === 'top' || btnconfig.setting.placement === 'bottom') { width = '100vw' - height = btnconfig.setting.width + 'vh' + height = btnconfig.setting.width > 100 ? btnconfig.setting.width : btnconfig.setting.width + 'vh' } return ( <Drawer @@ -1916,7 +2002,7 @@ (setting.tabType === 'main' && btnconfig.setting.container === 'tab' && this.props.ContainerId) || (btnconfig.setting.container === 'tab' && btn.ContainerId) ) { - width = btnconfig.setting.width + '%' + width = btnconfig.setting.width > 100 ? btnconfig.setting.width : btnconfig.setting.width + '%' container = () => document.getElementById(this.props.ContainerId || btn.ContainerId) } return ( @@ -1949,11 +2035,17 @@ render() { const { btn, show, style } = this.props - const { loadingNumber, loading, disabled, hidden } = this.state + const { loadingNumber, loading, disabled, hidden, check } = this.state if (hidden) return null - if (show === 'actionList') { + if (btn.OpenType === 'form') { + if (btn.formType === 'switch') { + return <Switch loading={loading} checked={check} disabled={disabled || loading} onChange={(val,e) => {e.stopPropagation();this.actionTrigger()}} style={style} size={btn.size} checkedChildren={btn.openText || ''} unCheckedChildren={btn.closeText || ''}/> + } else { + return <Checkbox disabled={disabled || loading} checked={check} onChange={(e) => {e.stopPropagation();this.actionTrigger()}} style={style}></Checkbox> + } + } else if (show === 'actionList') { return <div style={{display: 'inline-block'}} onClick={(e) => e.stopPropagation()}> <Button style={style} @@ -1984,11 +2076,10 @@ label = btn.label icon = btn.icon || '' } else if (show === 'link') { - label = <span>{btn.label}{btn.icon ? <Icon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> + label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> icon = '' } else if (show === 'icon') { icon = btn.icon || '' - // } else if (show === 'text') { } else { label = btn.label } diff --git a/src/tabviews/zshare/actionList/popupbutton/index.jsx b/src/tabviews/zshare/actionList/popupbutton/index.jsx index 4c1fe85..f1b9b3b 100644 --- a/src/tabviews/zshare/actionList/popupbutton/index.jsx +++ b/src/tabviews/zshare/actionList/popupbutton/index.jsx @@ -1,12 +1,13 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Button, Modal, notification, Icon, Drawer } from 'antd' +import { Button, Modal, notification, Drawer } from 'antd' import asyncSpinComponent from '@/utils/asyncSpinComponent' import zhCN from '@/locales/zh-CN/main.js' import enUS from '@/locales/en-US/main.js' import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' import './index.scss' const SubTabTable = asyncSpinComponent(() => import('@/tabviews/subtabtable')) @@ -15,7 +16,6 @@ class PopupButton extends Component { static propTpyes = { show: PropTypes.any, // 鎸夐挳鏄剧ず鏍峰紡鎺у埗 - position: PropTypes.any, // 鎸夐挳浣嶇疆锛屽伐鍏锋爮涓簍oolbar BID: PropTypes.string, // 涓昏〃ID BData: PropTypes.any, // 涓昏〃鏁版嵁 selectedData: PropTypes.any, // 瀛愯〃涓�夋嫨鏁版嵁 @@ -23,6 +23,8 @@ MenuID: PropTypes.string, // 鑿滃崟ID btn: PropTypes.object, // 鎸夐挳 setting: PropTypes.any, // 椤甸潰閫氱敤璁剧疆 + disabled: PropTypes.any, // 琛屾寜閽鐢� + lineId: PropTypes.any, // 琛岀储寮�+涓婚敭鍊硷紝鐢ㄤ簬琛屾寜閽弻鍑� } state = { @@ -36,7 +38,7 @@ } UNSAFE_componentWillMount () { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props let disabled = false if (btn.controlField && selectedData && selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� @@ -47,6 +49,21 @@ } }) this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent') { + if (!BData || !BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (this.props.disabled || disabled) { + this.setState({disabled: true}) } } @@ -55,18 +72,17 @@ } componentDidMount () { - MKEmitter.addListener('popclose', this.popclose) + MKEmitter.addListener('popclose', this.syspopclose) MKEmitter.addListener('triggerBtnId', this.actionTrigger) MKEmitter.addListener('openNewTab', this.openNewTab) MKEmitter.addListener('refreshPopButton', this.refreshPopButton) } UNSAFE_componentWillReceiveProps (nextProps) { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props + let disabled = false if (btn.controlField && !is(fromJS(nextProps.selectedData || []), fromJS(selectedData || []))) { - let disabled = false - if (nextProps.selectedData && nextProps.selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� nextProps.selectedData.forEach(item => { let s = item[btn.controlField] + '' @@ -75,7 +91,24 @@ } }) } - this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + this.setState({hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent' && !is(fromJS(nextProps.BData || {}), fromJS(BData || {}))) { + if (!nextProps.BData || !nextProps.BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = nextProps.BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (nextProps.disabled || disabled) { + this.setState({disabled: true}) + } else { + this.setState({disabled: false}) } } @@ -83,7 +116,7 @@ this.setState = () => { return } - MKEmitter.removeListener('popclose', this.popclose) + MKEmitter.removeListener('popclose', this.syspopclose) MKEmitter.removeListener('openNewTab', this.openNewTab) MKEmitter.removeListener('triggerBtnId', this.actionTrigger) MKEmitter.removeListener('refreshPopButton', this.refreshPopButton) @@ -124,7 +157,13 @@ const { setting, Tab, BID, btn, selectedData } = this.props const { loading, disabled } = this.state - if ((triggerId && btn.uuid !== triggerId) || loading || disabled) return + if (loading || disabled) return + if (triggerId) { + if (btn.uuid !== triggerId) return + if (this.props.lineId && record && record[0] && this.props.lineId !== record[0].$$key) { + return + } + } if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { notification.warning({ @@ -178,6 +217,12 @@ } } + syspopclose = () => { + if (!this.state.visible) return + + this.popclose() + } + /** * @description 寮圭獥鍏抽棴 */ @@ -210,7 +255,7 @@ className={'popview-modal ' + (btn.$view === 'CustomPage' ? 'custom-popview' : '')} title={btn.label} width={ratio} - maskClosable={false} + maskClosable={btn.clickouter === 'close'} visible={visible} onCancel={this.popclose} footer={[ @@ -251,10 +296,10 @@ return ( <Drawer title={btn.label} - className={btn.$view === 'CustomPage' ? 'custom-drawer-popview' : ''} + className={btn.$view === 'CustomPage' ? 'custom-drawer-popview' : 'table-drawer-popview'} width={width} height={height} - maskClosable={false} + maskClosable={btn.clickouter === 'close'} onClose={this.popclose} visible={visible} placement={btn.placement || 'right'} @@ -291,7 +336,7 @@ label = btn.label icon = btn.icon || '' } else if (show === 'link') { - label = <span>{btn.label}{btn.icon ? <Icon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> + label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> icon = '' } else if (show === 'icon') { icon = btn.icon || '' diff --git a/src/tabviews/zshare/actionList/popupbutton/index.scss b/src/tabviews/zshare/actionList/popupbutton/index.scss index e115405..23b691d 100644 --- a/src/tabviews/zshare/actionList/popupbutton/index.scss +++ b/src/tabviews/zshare/actionList/popupbutton/index.scss @@ -6,6 +6,19 @@ } } } +.table-drawer-popview { + .close-drawer { + position: absolute; + z-index: 3; + right: 0; + bottom: 0; + width: 100%; + padding: 8px 16px; + background: #fff; + text-align: right; + box-shadow: 0 0 3px #cbcbcb; + } +} .custom-drawer-popview { .ant-drawer-content { .ant-drawer-header { diff --git a/src/tabviews/zshare/actionList/printbutton/index.jsx b/src/tabviews/zshare/actionList/printbutton/index.jsx index e16fd39..90ae0dd 100644 --- a/src/tabviews/zshare/actionList/printbutton/index.jsx +++ b/src/tabviews/zshare/actionList/printbutton/index.jsx @@ -3,7 +3,7 @@ import moment from 'moment' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { Button, Modal, notification, message, Icon } from 'antd' +import { Button, Modal, notification, message } from 'antd' import Api from '@/api' import Utils from '@/utils/utils.js' @@ -13,6 +13,7 @@ import asyncSpinComponent from '@/utils/asyncSpinComponent' import { updateForm } from '@/utils/utils-update.js' import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' // import './index.scss' const MutilForm = asyncSpinComponent(() => import('@/tabviews/zshare/mutilform')) @@ -22,7 +23,6 @@ class PrintButton extends Component { static propTpyes = { show: PropTypes.any, // 鎸夐挳鏄剧ず鏍峰紡鎺у埗 - position: PropTypes.any, // 鎸夐挳浣嶇疆锛屽伐鍏锋爮涓簍oolbar BID: PropTypes.string, // 涓昏〃ID BData: PropTypes.any, // 涓昏〃鏁版嵁 selectedData: PropTypes.any, // 瀛愯〃涓�夋嫨鏁版嵁 @@ -31,6 +31,8 @@ btn: PropTypes.object, // 鎸夐挳 setting: PropTypes.any, // 椤甸潰閫氱敤璁剧疆 ContainerId: PropTypes.any, // tab椤甸潰ID锛岀敤浜庡脊绐楁帶鍒� + disabled: PropTypes.any, // 琛屾寜閽鐢� + lineId: PropTypes.any, // 琛岀储寮�+涓婚敭鍊硷紝鐢ㄤ簬琛屾寜閽弻鍑� } state = { @@ -47,7 +49,7 @@ } UNSAFE_componentWillMount () { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props let disabled = false if (btn.controlField && selectedData && selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� @@ -57,7 +59,22 @@ disabled = true } }) - this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + this.setState({hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent') { + if (!BData || !BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (this.props.disabled || disabled) { + this.setState({disabled: true}) } } @@ -76,11 +93,10 @@ } UNSAFE_componentWillReceiveProps (nextProps) { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props + let disabled = false if (btn.controlField && !is(fromJS(nextProps.selectedData || []), fromJS(selectedData || []))) { - let disabled = false - if (nextProps.selectedData && nextProps.selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� nextProps.selectedData.forEach(item => { let s = item[btn.controlField] + '' @@ -90,6 +106,23 @@ }) } this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent' && !is(fromJS(nextProps.BData || {}), fromJS(BData || {}))) { + if (!nextProps.BData || !nextProps.BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = nextProps.BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (nextProps.disabled || disabled) { + this.setState({disabled: true}) + } else { + this.setState({disabled: false}) } } @@ -116,7 +149,13 @@ const { Tab, BID, btn, selectedData, setting } = this.props const { loading, disabled } = this.state - if ((triggerId && btn.uuid !== triggerId) || loading || disabled) return + if (loading || disabled) return + if (triggerId) { + if (btn.uuid !== triggerId) return + if (this.props.lineId && record && record[0] && this.props.lineId !== record[0].$$key) { + return + } + } if (((Tab && Tab.supMenu) || setting.supModule) && !BID) { notification.warning({ @@ -1349,7 +1388,7 @@ const { btnconfig, autoMatic } = this.state if (btnconfig) { - if (!autoMatic && btnconfig.setting.display === 'prompt') { // 濡傛灉琛ㄥ崟浠ユ槸鍚︽灞曠ず + if (!autoMatic && (btnconfig.setting.display === 'prompt' || btnconfig.setting.display === 'exec')) { // 濡傛灉琛ㄥ崟浠ユ槸鍚︽灞曠ず this.modelconfirm() } else { this.setState({ @@ -1393,7 +1432,7 @@ this.setState({ btnconfig: _LongParam }, () => { - if (!autoMatic && _LongParam.setting.display === 'prompt') { // 濡傛灉琛ㄥ崟浠ユ槸鍚︽灞曠ず + if (!autoMatic && (_LongParam.setting.display === 'prompt' || _LongParam.setting.display === 'exec')) { // 濡傛灉琛ㄥ崟浠ユ槸鍚︽灞曠ず this.modelconfirm() } else { this.setState({ @@ -1500,15 +1539,19 @@ }) }) - confirm({ - title: this.state.dict['main.action.confirm.tip'], - onOk() { - _this.triggerPrint(selines, result) - }, - onCancel() { - _this.setState({ loading: false }) - } - }) + if (btnconfig.setting.display === 'exec') { + this.execSubmit(selines, () => {}, result) + } else { + confirm({ + title: this.state.dict['main.action.confirm.tip'], + onOk() { + _this.triggerPrint(selines, result) + }, + onCancel() { + _this.setState({ loading: false }) + } + }) + } } /** @@ -1521,7 +1564,7 @@ if (!this.state.visible || !btnconfig || !btnconfig.setting) return null let title = btnconfig.setting.title - let width = btnconfig.setting.width + 'vw' + let width = btnconfig.setting.width > 100 ? btnconfig.setting.width : btnconfig.setting.width + 'vw' let clickouter = false let container = document.body @@ -1529,7 +1572,7 @@ (setting.tabType === 'main' && btnconfig.setting.container === 'tab' && this.props.ContainerId) || (btnconfig.setting.container === 'tab' && btn.ContainerId) ) { - width = btnconfig.setting.width + '%' + width = btnconfig.setting.width > 100 ? btnconfig.setting.width : btnconfig.setting.width + '%' container = () => document.getElementById(this.props.ContainerId || btn.ContainerId) } @@ -1588,7 +1631,7 @@ label = btn.label icon = btn.icon || '' } else if (show === 'link') { - label = <span>{btn.label}{btn.icon ? <Icon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> + label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> icon = '' } else if (show === 'icon') { icon = btn.icon || '' diff --git a/src/tabviews/zshare/actionList/tabbutton/index.jsx b/src/tabviews/zshare/actionList/tabbutton/index.jsx index 3d77644..42774f4 100644 --- a/src/tabviews/zshare/actionList/tabbutton/index.jsx +++ b/src/tabviews/zshare/actionList/tabbutton/index.jsx @@ -2,21 +2,24 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { Button, notification, Icon } from 'antd' +import { Button, notification } from 'antd' import zhCN from '@/locales/zh-CN/main.js' import enUS from '@/locales/en-US/main.js' import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' // import './index.scss' class TabButton extends Component { static propTpyes = { show: PropTypes.any, // 鎸夐挳鏄剧ず鏍峰紡鎺у埗 - position: PropTypes.any, // 鎸夐挳浣嶇疆锛屽伐鍏锋爮涓簍oolbar + BData: PropTypes.any, // 涓昏〃鏁版嵁 MenuID: PropTypes.string, // 鑿滃崟ID btn: PropTypes.object, // 鎸夐挳 selectedData: PropTypes.any, // 瀛愯〃涓�夋嫨鏁版嵁 setting: PropTypes.any, // 椤甸潰閫氱敤璁剧疆 + disabled: PropTypes.any, // 琛屾寜閽鐢� + lineId: PropTypes.any, // 琛岀储寮�+涓婚敭鍊硷紝鐢ㄤ簬琛屾寜閽弻鍑� } state = { @@ -27,7 +30,7 @@ } UNSAFE_componentWillMount () { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props let disabled = false if (btn.controlField && selectedData && selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� @@ -37,7 +40,22 @@ disabled = true } }) - this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + this.setState({hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent') { + if (!BData || !BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (this.props.disabled || disabled) { + this.setState({disabled: true}) } } @@ -50,11 +68,10 @@ } UNSAFE_componentWillReceiveProps (nextProps) { - const { btn, selectedData } = this.props + const { btn, selectedData, BData } = this.props + let disabled = false if (btn.controlField && !is(fromJS(nextProps.selectedData || []), fromJS(selectedData || []))) { - let disabled = false - if (nextProps.selectedData && nextProps.selectedData.length > 0) { // 琛ㄦ牸涓寜閽殣钘忔帶鍒� nextProps.selectedData.forEach(item => { let s = item[btn.controlField] + '' @@ -63,7 +80,24 @@ } }) } - this.setState({disabled, hidden: disabled && btn.control === 'hidden'}) + this.setState({hidden: disabled && btn.control === 'hidden'}) + } else if (btn.control === 'parent' && !is(fromJS(nextProps.BData || {}), fromJS(BData || {}))) { + if (!nextProps.BData || !nextProps.BData.hasOwnProperty(btn.controlField)) { + this.setState({hidden: true}) + } else { + let s = nextProps.BData[btn.controlField] + '' + if (s === btn.controlVal || (btn.controlVal && btn.controlVal.split(',').includes(s))) { + this.setState({hidden: true}) + } else { + this.setState({hidden: false}) + } + } + } + + if (nextProps.disabled || disabled) { + this.setState({disabled: true}) + } else { + this.setState({disabled: false}) } } @@ -81,7 +115,13 @@ const { setting, btn, selectedData } = this.props const { disabled } = this.state - if ((triggerId && btn.uuid !== triggerId) || disabled) return + if (disabled) return + if (triggerId) { + if (btn.uuid !== triggerId) return + if (this.props.lineId && record && record[0] && this.props.lineId !== record[0].$$key) { + return + } + } if (type === 'linkbtn' && selectedData && selectedData.length === 1) { if (record[0].$Index !== selectedData[0].$Index) { @@ -189,7 +229,7 @@ label = btn.label icon = btn.icon || '' } else if (show === 'link') { - label = <span>{btn.label}{btn.icon ? <Icon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> + label = <span>{btn.label}{btn.icon ? <MkIcon style={{marginLeft: '8px'}} type={btn.icon}/> : ''}</span> icon = '' } else if (show === 'icon') { icon = btn.icon || '' diff --git a/src/tabviews/zshare/automatic/index.jsx b/src/tabviews/zshare/automatic/index.jsx index 1ebc33a..6644e5e 100644 --- a/src/tabviews/zshare/automatic/index.jsx +++ b/src/tabviews/zshare/automatic/index.jsx @@ -110,6 +110,15 @@ if (!this.state.running || MenuID !== config.MenuID) return + if (data.$disabled) { + this.setState({line: this.state.line + 1}, () => { + setTimeout(() => { + MKEmitter.emit('autoQueryData', config.MenuID, this.state.line) + }, 100) + }) + return + } + setTimeout(() => { MKEmitter.emit('triggerBtnId', autoMatic.action, [data], 'autoMatic') if (['prompt', 'pop'].includes(autoMatic.OpenType)) { diff --git a/src/tabviews/zshare/cardcomponent/index.jsx b/src/tabviews/zshare/cardcomponent/index.jsx index df34ca4..0480ba8 100644 --- a/src/tabviews/zshare/cardcomponent/index.jsx +++ b/src/tabviews/zshare/cardcomponent/index.jsx @@ -1,11 +1,12 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Card, Spin, Empty } from 'antd' +import { Card, Spin, Empty } from 'antd' import asyncComponent from '@/utils/asyncComponent' import asyncExcelComponent from './asyncButtonComponent' import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' import '@/assets/css/table.scss' import './index.scss' @@ -273,7 +274,7 @@ if (mark.position === 'front') { position = 'front' } - icon = <Icon className={'font ' + className} type={mark.icon} /> + icon = <MkIcon className={'font ' + className} type={mark.icon} /> className = '' } diff --git a/src/tabviews/zshare/chartcomponent/index.jsx b/src/tabviews/zshare/chartcomponent/index.jsx index 231654d..058b831 100644 --- a/src/tabviews/zshare/chartcomponent/index.jsx +++ b/src/tabviews/zshare/chartcomponent/index.jsx @@ -7,8 +7,6 @@ import asyncComponent from './asyncButtonComponent' import Utils from '@/utils/utils.js' -import zhCN from '@/locales/zh-CN/main.js' -import enUS from '@/locales/en-US/main.js' import './index.scss' const ExcelOutButton = asyncComponent(() => import('@/tabviews/zshare/actionList/exceloutbutton')) @@ -25,7 +23,6 @@ } state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, // 瀛楀吀 empty: true, // 鍥捐〃鏁版嵁涓虹┖ actions: [], // 鍥捐〃缁戝畾鐨勬寜閽粍 chartId: Utils.getuuid(), // 鍥捐〃Id diff --git a/src/tabviews/zshare/fileupload/index.jsx b/src/tabviews/zshare/fileupload/index.jsx index 3ef6469..1e71103 100644 --- a/src/tabviews/zshare/fileupload/index.jsx +++ b/src/tabviews/zshare/fileupload/index.jsx @@ -2,7 +2,8 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import moment from 'moment' -import { Upload, Button, Icon, Progress, notification } from 'antd' +import { Upload, Button, Progress, notification } from 'antd' +import { UploadOutlined } from '@ant-design/icons' import SparkMD5 from 'spark-md5' import Api from '@/api' import './index.scss' @@ -454,10 +455,10 @@ return ( <Upload {...props}> {fileType !== 'picture-card' ? <Button> - <Icon type="upload" /> 鐐瑰嚮涓婁紶 + <UploadOutlined /> 鐐瑰嚮涓婁紶 </Button> : null} {fileType === 'picture-card' ? <span style={{whiteSpace: 'nowrap'}}> - <Icon type="upload" /> 鐐瑰嚮涓婁紶 + <UploadOutlined /> 鐐瑰嚮涓婁紶 </span> : null} {showprogress ? <Progress percent={percent} size="small" /> : null} </Upload> diff --git a/src/tabviews/zshare/mutilform/checkCard/index.jsx b/src/tabviews/zshare/mutilform/checkCard/index.jsx deleted file mode 100644 index b7b30ed..0000000 --- a/src/tabviews/zshare/mutilform/checkCard/index.jsx +++ /dev/null @@ -1,133 +0,0 @@ -import React, {Component} from 'react' -import PropTypes from 'prop-types' -import { Col, Row } from 'antd' - -import MKEmitter from '@/utils/events.js' -import './index.scss' - -class CheckCard extends Component { - static propTpyes = { - card: PropTypes.bool, // 鍗$墖淇℃伅 - onChange: PropTypes.func // 鏁版嵁鍒囨崲 - } - - state = { - selectKeys: null - } - - UNSAFE_componentWillMount() { - const { card } = this.props - - if (card.multiple === 'true') { - this.setState({ - selectKeys: card.initval ? card.initval.split(',') : [] - }) - } else { - this.setState({ - selectKeys: card.initval - }) - } - } - - changeCard = (item) => { - const { card } = this.props - const { selectKeys } = this.state - - if (card.readonly || item.$disabled) return - - if (card.multiple === 'true') { - let keys = [] - if (selectKeys.includes(item.$value)) { - keys = selectKeys.filter(key => key !== item.$value) - } else { - keys = [...selectKeys, item.$value] - } - - this.setState({ - selectKeys: keys - }, () => { - this.props.onChange && this.props.onChange(keys.join(',')) - }) - } else if (selectKeys !== item.$value) { - card.linkFields && card.linkFields.forEach((m, i) => { - setTimeout(() => { - MKEmitter.emit('mkSP', m.uuid, item.$value, 0) - }, (i + 1) * 10) - }) - - this.setState({ - selectKeys: item.$value - }, () => { - this.props.onChange && this.props.onChange(item.$value) - }) - } - } - - getCards = () => { - const { display, width, options, fields, ratio, multiple, backgroundColor, borderColor } = this.props.card - const { selectKeys } = this.state - - let paddingTop = '100%' - if (ratio === '4:3') { - paddingTop = '75%' - } else if (ratio === '3:2') { - paddingTop = '66.7%' - } else if (ratio === '16:9') { - paddingTop = '56.25%' - } - - let style = borderColor ? {borderColor} : {} - let _style = backgroundColor ? {backgroundColor} : null - - if (!options || options.length === 0) { - return null - } else if (display !== 'picture') { - if (!fields || fields.length === 0) { - return null - } - - return options.map(item => { - let _active = false - if (multiple === 'true' && selectKeys.includes(item.$value)) { - _active = true - } else if (multiple !== 'true' && selectKeys === item.$value) { - _active = true - } - - return <Col span={width} key={item.key}> - <div className={'card-cell' + (_active ? ' active' : '') + (_style ? ' bg-control' : '')} style={style} onClick={() => this.changeCard(item)}> - <div className="bg-mask" style={_style}></div> - {fields.map(col => { - return <span key={col.key} style={{color: col.color, fontSize: col.fontSize + 'px', height: col.fontSize * 1.5 + 'px', textAlign: col.align}}>{item[col.field]}</span> - })} - </div> - </Col> - }) - } else { - return options.map(item => { - let _active = false - if (multiple === 'true' && selectKeys.includes(item.$value)) { - _active = true - } else if (multiple !== 'true' && selectKeys === item.$value) { - _active = true - } - - return <Col span={width} key={item.key}> - <div className={'card-pic-cell ' + (_active ? 'active' : '')} onClick={() => this.changeCard(item)} style={{...style, paddingTop, backgroundImage: `url(${item.$url})`}}> - </div> - </Col> - }) - } - } - - render() { - const { card } = this.props - return ( - <div className={'check-card-search-box' + (card.readonly ? ' readonly' : '')}> - <Row gutter={12}>{this.getCards()}</Row> - </div> - ) - } -} - -export default CheckCard \ No newline at end of file diff --git a/src/tabviews/zshare/mutilform/checkCard/index.scss b/src/tabviews/zshare/mutilform/checkCard/index.scss deleted file mode 100644 index ce51901..0000000 --- a/src/tabviews/zshare/mutilform/checkCard/index.scss +++ /dev/null @@ -1,97 +0,0 @@ -.check-card-search-box { - margin-top: 10px; - margin-bottom: -10px; - .card-cell { - position: relative; - border: 1px solid #bcbcbc; - border-radius: 4px; - padding: 6px; - margin-bottom: 12px; - line-height: 1.5; - cursor: pointer; - transition: all 0.3s; - span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - position: relative; - z-index: 1; - } - .bg-mask { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0.3; - border-radius: 4px; - background-color: transparent; - transition: opacity 0.3s; - } - } - .card-cell:not(.bg-control).active { - border-color: #1890ff; - background: #1890ff; - span { - color: #ffffff!important; - } - } - .card-cell.bg-control.active { - .bg-mask { - opacity: 1; - } - } - .card-pic-cell { - position: relative; - border: 1px solid #bcbcbc; - border-radius: 4px; - background-size: cover; - background-position: center; - margin-bottom: 12px; - line-height: 1.5; - cursor: pointer; - transition: all 0.3s; - } - .card-pic-cell.active { - border-color: #1890ff; - box-shadow: 0px 0px 4px #1890ff; - } - - .card-cell:not(.bg-control).active::after { - content: ' '; - position: absolute; - display: table; - border: 2px solid #ffffff; - border-top: 0; - border-left: 0; - bottom: 0; - right: 12px; - width: 6px; - height: 12px; - transform: rotate(45deg) scale(1) translate(-50%, -50%); - } -} -.check-card-search-box:not(.readonly) { - .card-cell:not(.bg-control):hover { - border-color: #1890ff; - background: #1890ff; - span { - color: #ffffff!important; - } - } - .card-cell.bg-control:not(.active):hover { - .bg-mask { - opacity: 0.7; - } - } - .card-pic-cell:hover { - border-color: #1890ff; - box-shadow: 0px 0px 4px #1890ff; - } -} -.check-card-search-box.readonly { - .card-cell, .card-pic-cell { - cursor: not-allowed; - } -} \ No newline at end of file diff --git a/src/tabviews/zshare/mutilform/index.jsx b/src/tabviews/zshare/mutilform/index.jsx index 5e054e8..9c61db0 100644 --- a/src/tabviews/zshare/mutilform/index.jsx +++ b/src/tabviews/zshare/mutilform/index.jsx @@ -1,8 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Row, Col, notification, Tooltip, Icon, Rate } from 'antd' -import { QuestionCircleOutlined } from '@ant-design/icons' +import { Form, Row, Col, notification, Tooltip, Rate } from 'antd' +import { QuestionCircleOutlined, StarFilled } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -14,6 +14,7 @@ import MKInput from './mkInput' import MKNumberInput from './mkNumberInput' import MKSelect from './mkSelect' +import MkIcon from '@/components/mk-icon' import './index.scss' const MKCheckCard = asyncComponent(() => import('./mkCheckCard')) @@ -30,7 +31,6 @@ static propTpyes = { menuType: PropTypes.object, // 鑿滃崟绫诲瀷锛屾槸鍚︿负HS action: PropTypes.object, // 鎸夐挳淇℃伅銆佽〃鍗曞垪琛� - dict: PropTypes.object, // 瀛楀吀椤� data: PropTypes.any, // 琛ㄦ牸鏁版嵁 BID: PropTypes.any, // 涓昏〃ID BData: PropTypes.any, // 涓昏〃鏁版嵁 @@ -56,18 +56,23 @@ let check = action.setting.formType === 'check' formlist = formlist.filter(item => { - if (item.supField && item.supvalue) { // 澶氬眰琛ㄥ崟鎺у埗 + if (item.supField) { // 澶氬眰琛ㄥ崟鎺у埗 let supvals = [] - item.supvalue.split(',').forEach(val => { - supvals.push(val) - if (/^([-]?(0|[1-9][0-9]*)(\.[0-9]+)?)$/.test(val)) { - supvals.push(+val) - } - }) + if (item.supvalue) { + item.supvalue.split(',').forEach(val => { + supvals.push(val) + if (/^([-]?(0|[1-9][0-9]*)(\.[0-9]+)?)$/.test(val)) { + supvals.push(+val) + } + }) + } else { + supvals.push('') + } controlFields[item.supField] = controlFields[item.supField] || [] controlFields[item.supField].push({field: item.field, values: supvals}) } - if (item.type === 'link') { + // if (item.type === 'link') { + if (item.linkField) { linkFields[item.linkField] = linkFields[item.linkField] || [] linkFields[item.linkField].push({field: item.field, uuid: item.uuid}) } @@ -317,7 +322,8 @@ if (!cell.field || !fieldMap.has(cell.field)) return cell let item = fieldMap.get(cell.field) - if (item.type === 'link') { + // if (item.type === 'link') { + if (item.linkField) { item.supInitVal = '' if (fieldMap.has(item.linkField)) { @@ -376,7 +382,9 @@ if (item.enter === 'tab' || item.enter === 'sub') { if (fieldMap.has(item.tabField)) { item.tabUuid = fieldMap.get(item.tabField).uuid - } else { + } else if (item.enter === 'tab') { + item.enter = 'false' + } else if (item.enter === 'sub') { item.tabUuid = item.uuid } } @@ -583,7 +591,7 @@ _cell = {..._cell, ...cell} } - if (item.type === 'link') { + if (item.linkField) { _cell.ParentID = cell[item.linkField] === undefined ? '' : cell[item.linkField] } if (item.subFields) { @@ -601,9 +609,11 @@ item.oriOptions = [...item.oriOptions, ...options] - if (item.type === 'link') { + // if (item.type === 'link') { + if (item.linkField) { item.options = item.oriOptions.filter(option => option.ParentID === item.supInitVal || option.value === '') - } else if (['select', 'radio', 'checkbox', 'checkcard', 'multiselect'].includes(item.type)) { + // } else if (['select', 'radio', 'checkbox', 'checkcard', 'multiselect'].includes(item.type)) { + } else { item.options = item.oriOptions } } @@ -694,7 +704,7 @@ } else if (item.type === 'hint') { fields.push( <Col span={item.span || 24} key={index}> - <Form.Item className="hint" colon={!!item.label} label={item.label} labelCol={item.labelCol} wrapperCol={item.wrapperCol}> + <Form.Item className="hint" colon={!!item.label} label={item.label || ' '} labelCol={item.labelCol} wrapperCol={item.wrapperCol}> <div className="message">{item.message}</div> </Form.Item> </Col> @@ -716,11 +726,11 @@ className = 'checkcard' content = (<MKCheckCard config={item} onChange={(val, other) => this.recordChange({[item.field]: val, ...other}, item)}/>) } else if (item.type === 'switch') { - content = (<MKSwitch config={item} onChange={(val) => this.recordChange({[item.field]: val})}/>) + content = (<MKSwitch config={item} onChange={(val) => this.recordChange({[item.field]: val}, item)}/>) } else if (item.type === 'checkbox') { content = (<MKCheckbox config={item} onChange={(val) => this.recordChange({[item.field]: val})}/>) } else if (item.type === 'radio') { - content = (<MKRadio config={item} onChange={(val) => this.recordChange({[item.field]: val}, item)}/>) + content = (<MKRadio config={item} onChange={(val, other) => this.recordChange({[item.field]: val, ...other}, item)}/>) } else if (item.type === 'date' || item.type === 'datemonth' || item.type === 'datetime') { content = (<MKDatePicker config={item} onChange={(val) => this.recordChange({[item.field]: val})} />) } else if (item.type === 'fileupload') { @@ -730,7 +740,7 @@ } else if (item.type === 'textarea') { content = (<MKTextArea config={item} onChange={(val, defer) => !defer && this.recordChange({[item.field]: val})}/>) } else if (item.type === 'rate') { - content = (<Rate count={item.rateCount} disabled={item.readonly} onChange={(val) => this.recordChange({[item.field]: val})} character={item.character ? <Icon type={item.character}/> : <Icon type="star" theme="filled"/>} allowHalf={item.allowHalf}/>) + content = (<Rate count={item.rateCount} disabled={item.readonly} onChange={(val) => this.recordChange({[item.field]: val})} character={item.character ? <MkIcon type={item.character}/> : <StarFilled />} allowHalf={item.allowHalf}/>) } else if (item.type === 'brafteditor') { content = (<MKEditor config={item} onChange={(val) => this.recordChange({[item.field]: val})}/>) label = item.hidelabel !== 'true' ? label : '' diff --git a/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx b/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx index 4c5a527..9014cbb 100644 --- a/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx +++ b/src/tabviews/zshare/mutilform/mkCheckCard/index.jsx @@ -1,5 +1,6 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' import { Col, Row } from 'antd' import MKEmitter from '@/utils/events.js' @@ -12,26 +13,103 @@ } state = { - selectKeys: null + selectKeys: null, + config: null, + options: [] } UNSAFE_componentWillMount() { const { config } = this.props + let selectKeys = config.initval if (config.multiple === 'true') { + selectKeys = config.initval ? config.initval.split(',') : [] + } + + this.setState({ + config: fromJS(config).toJS(), + options: fromJS(config.options).toJS(), + selectKeys: selectKeys + }) + } + + componentDidMount () { + const { config } = this.state + + if (config.linkField) { + MKEmitter.addListener('mkFP', this.mkFormHandle) + } + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.state), fromJS(nextState)) + } + + UNSAFE_componentWillReceiveProps (nextProps) { + const { config } = this.props + + if (!is(fromJS(config.oriOptions), fromJS(nextProps.config.oriOptions))) { this.setState({ - selectKeys: config.initval ? config.initval.split(',') : [] - }) - } else { - this.setState({ - selectKeys: config.initval + config: fromJS(nextProps.config).toJS(), + options: fromJS(nextProps.config.options).toJS() }) } } + componentWillUnmount () { + this.setState = () => { + return + } + MKEmitter.removeListener('mkFP', this.mkFormHandle) + } + + mkFormHandle = (uuid, parentId, level) => { + if (uuid !== this.state.config.uuid) return + + const { config } = this.state + + let options = config.oriOptions.filter(option => option.ParentID === parentId) + + if (config.multiple === 'true') { + this.setState({ + options, + selectKeys: [] + }) + this.props.onChange('') + } else { + let _option = options[0] && !options[0].$disabled ? options[0] : null + let val = _option ? _option.$value : '' + + this.setState({ + options, + selectKeys: val + }) + + let other = {} + + if (config.subFields && _option) { + config.subFields.forEach((n, i) => { + other[n.field] = _option[n.field] + setTimeout(() => { + MKEmitter.emit('mkFC', 'input', n.uuid, _option[n.field]) + }, i * 5) + }) + } + + this.props.onChange(val, other) + + if (level < 7 && config.linkFields) { + config.linkFields.forEach((m, i) => { + setTimeout(() => { + MKEmitter.emit('mkFP', m.uuid, val, level + 1) + }, (i + 1) * 70) + }) + } + } + } + changeCard = (item) => { - const { config } = this.props - const { selectKeys } = this.state + const { selectKeys, config } = this.state if (config.readonly || item.$disabled) return @@ -71,8 +149,8 @@ } getCards = () => { - const { display, width, options, fields, ratio, multiple, backgroundColor, borderColor } = this.props.config - const { selectKeys } = this.state + const { selectKeys, options, config } = this.state + const { display, width, fields, ratio, multiple, backgroundColor, borderColor } = config let paddingTop = '100%' if (ratio === '4:3') { @@ -127,7 +205,7 @@ } render() { - const { config } = this.props + const { config } = this.state return ( <div className={'check-card-form-box' + (config.readonly ? ' readonly' : '')}> diff --git a/src/tabviews/zshare/mutilform/mkRadio/index.jsx b/src/tabviews/zshare/mutilform/mkRadio/index.jsx index 6ce1ef3..9bb5800 100644 --- a/src/tabviews/zshare/mutilform/mkRadio/index.jsx +++ b/src/tabviews/zshare/mutilform/mkRadio/index.jsx @@ -1,6 +1,9 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' +import { is, fromJS } from 'immutable' import { Radio } from 'antd' + +import MKEmitter from '@/utils/events.js' class MKRadio extends Component { static propTpyes = { @@ -9,27 +12,132 @@ } state = { - defaultValue: this.props.config.initval + value: '', + config: null, + options: [] } - onChange = (e) => { - let value = e.target.value - this.props.onChange(value) + UNSAFE_componentWillMount () { + const { config } = this.props + let value = config.initval + + if (value) { + let option = null + option= config.oriOptions[0] + if (typeof(value) === 'string' && option && typeof(option.value) === 'number') { + value = +value + if (isNaN(value)) { + value = config.initval + } + } + } + + this.setState({ + config: fromJS(config).toJS(), + options: fromJS(config.options).toJS(), + value, + }) + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.state), fromJS(nextState)) + } + + UNSAFE_componentWillReceiveProps (nextProps) { + const { config } = this.state + + if (!is(fromJS(config.oriOptions), fromJS(nextProps.config.oriOptions))) { + this.setState({ + config: fromJS(nextProps.config).toJS(), + options: fromJS(nextProps.config.options).toJS() + }) + + if (typeof(config.initval) === 'string' && config.initval.indexOf('$first') > -1) { + this.setState({ + value: nextProps.config.initval, + }) + } + } + } + + componentDidMount () { + MKEmitter.addListener('mkFP', this.mkFormHandle) } componentWillUnmount () { this.setState = () => { return } + MKEmitter.removeListener('mkFP', this.mkFormHandle) + } + + mkFormHandle = (uuid, parentId, level) => { + if (uuid !== this.state.config.uuid) return + + const { config } = this.state + + let options = config.oriOptions.filter(option => option.ParentID === parentId || option.value === '') + let _option = options[0] && !options[0].$disabled ? options[0] : null + let val = _option ? _option.value : '' + + this.setState({ + options, + value: val + }) + + let other = {} + + if (config.subFields && _option) { + config.subFields.forEach((n, i) => { + other[n.field] = _option[n.field] + setTimeout(() => { + MKEmitter.emit('mkFC', 'input', n.uuid, _option[n.field]) + }, i * 5) + }) + } + + this.props.onChange(val, other) + + if (level < 7 && config.linkFields) { + config.linkFields.forEach((m, i) => { + setTimeout(() => { + MKEmitter.emit('mkFP', m.uuid, val, level + 1) + }, (i + 1) * 70) + }) + } + } + + onChange = (val) => { + const { config } = this.state + let other = {} + + if (config.subFields) { + let option = this.state.options.filter(m => m.value === val)[0] + option && config.subFields.forEach((n, i) => { + other[n.field] = option[n.field] + setTimeout(() => { + MKEmitter.emit('mkFC', 'input', n.uuid, option[n.field]) + }, i * 5) + }) + } + if (config.linkFields) { + config.linkFields.forEach((m, i) => { + setTimeout(() => { + MKEmitter.emit('mkFP', m.uuid, val, 0) + }, (i + 1) * 100) + }) + } + + this.props.onChange(val, other) + this.setState({value: val}) } render() { - const { config } = this.props - const { defaultValue } = this.state + const { value, options, config } = this.state return ( - <Radio.Group defaultValue={defaultValue} disabled={config.readonly} onChange={this.onChange}> - {config.options.map(option => <Radio key={option.key} disabled={option.$disabled} value={option.value}>{option.label}</Radio>)} + <Radio.Group value={value} disabled={config.readonly} onChange={(e) => this.onChange(e.target.value)}> + {options.map(option => <Radio key={option.key} disabled={option.$disabled} value={option.value}>{option.label}</Radio>)} </Radio.Group> ) } diff --git a/src/tabviews/zshare/mutilform/mkSelect/index.jsx b/src/tabviews/zshare/mutilform/mkSelect/index.jsx index 86ff5c5..54c46f4 100644 --- a/src/tabviews/zshare/mutilform/mkSelect/index.jsx +++ b/src/tabviews/zshare/mutilform/mkSelect/index.jsx @@ -19,11 +19,7 @@ } } else if (value) { let option = null - if (config.setAll === 'true') { - option= config.oriOptions[1] - } else { - option= config.oriOptions[0] - } + option= config.oriOptions[0] if (typeof(value) === 'string' && option && typeof(option.value) === 'number') { value = +value if (isNaN(value)) { @@ -67,11 +63,7 @@ }) } else { let option = null - if (config.setAll === 'true') { - option= nextProps.config.oriOptions[1] - } else { - option= nextProps.config.oriOptions[0] - } + option= nextProps.config.oriOptions[0] if (option && typeof(option.value) === 'number') { let val = +value if (!isNaN(val)) { diff --git a/src/tabviews/zshare/normalTable/index.jsx b/src/tabviews/zshare/normalTable/index.jsx index 339d1f3..bc497d5 100644 --- a/src/tabviews/zshare/normalTable/index.jsx +++ b/src/tabviews/zshare/normalTable/index.jsx @@ -3,10 +3,11 @@ import md5 from 'md5' import { connect } from 'react-redux' import { is, fromJS } from 'immutable' -import { Table, Affix, Typography, Icon } from 'antd' +import { Table, Affix, Typography } from 'antd' import asyncComponent from '@/utils/asyncComponent' import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' import '@/assets/css/table.scss' import './index.scss' @@ -268,7 +269,7 @@ if (id !== this.props.MenuID) return if (this.props.data.length > 0) { - this.changeRow(null, 0) + this.changeRow(this.props.data[0], 0) } } @@ -280,7 +281,7 @@ let i = index - (pageIndex - 1) * pageSize - 1 if (this.props.data[i]) { - this.changeRow(null, i) + this.changeRow(this.props.data[i], i) MKEmitter.emit('autoTransSelectData', this.props.MenuID, this.props.data[i]) } else { MKEmitter.emit('autoMaticOver', this.props.MenuID) @@ -428,7 +429,7 @@ if (mark.position === 'front') { position = 'front' } - icon = <Icon className={'font ' + className} type={mark.icon} /> + icon = <MkIcon className={'font ' + className} type={mark.icon} /> className = '' } @@ -480,7 +481,7 @@ content = md5(content) } - if (item.linkThdMenu || item.linkurl) { + if (!record.$disabled && (item.linkThdMenu || item.linkurl)) { if (item.rowspan === 'true') { return { children: ( @@ -579,7 +580,7 @@ content = md5(content) } - if (item.linkThdMenu || item.linkurl) { + if (!record.$disabled && (item.linkThdMenu || item.linkurl)) { if (item.rowspan === 'true') { return { children: ( @@ -699,6 +700,10 @@ _href += '?' + _param } + if (_href && /^https/.test(window.location.protocol)) { // https杞崲 + _href = _href.replace(/^http:/ig, 'https:') + } + if (item.blur) { content = md5(content) } @@ -720,6 +725,8 @@ key={btn.uuid} btn={btn} BID={record.$$BID} + disabled={record.$disabled} + lineId={record.$$key || ''} selectedData={[record]} BData={this.props.BData} setting={this.props.setting} @@ -733,6 +740,8 @@ key={btn.uuid} btn={btn} BID={record.$$BID} + disabled={record.$disabled} + lineId={record.$$key || ''} selectedData={[record]} BData={this.props.BData} setting={this.props.setting} @@ -743,7 +752,10 @@ <TabButton key={btn.uuid} btn={btn} + disabled={record.$disabled} + lineId={record.$$key || ''} selectedData={[record]} + BData={this.props.BData} MenuID={this.props.MenuID} setting={this.props.setting} /> @@ -753,7 +765,10 @@ <NewPageButton key={btn.uuid} btn={btn} + disabled={record.$disabled} + lineId={record.$$key || ''} selectedData={[record]} + BData={this.props.BData} setting={this.props.setting} /> ) @@ -882,6 +897,10 @@ } _href += '?' + _param + } + + if (_href && /^https/.test(window.location.protocol)) { // https杞崲 + _href = _href.replace(/^http:/ig, 'https:') } if (item.blur) { @@ -1018,7 +1037,7 @@ this.setState({ selectedRowKeys, activeIndex: _activeIndex }) - let selects = this.props.data.filter((item, _index) => selectedRowKeys.includes(_index)) + let selects = this.props.data.filter((item, _index) => selectedRowKeys.includes(_index) && !item.$disabled) this.props.chgSelectData(selects) } @@ -1028,6 +1047,7 @@ */ changeRow = (record, index) => { if (!this.props.setting.tableType || this.props.pickup) return + if (record.$disabled) return let newkeys = fromJS(this.state.selectedRowKeys).toJS() @@ -1160,6 +1180,7 @@ const { setting } = this.props if (!setting.doubleClick) return + if (record.$disabled) return MKEmitter.emit('triggerBtnId', setting.doubleClick, [record]) } @@ -1270,7 +1291,9 @@ dataSource={_data} rowClassName={(record) => { let className = '' - if ((setting.tableType === 'checkbox' || setting.tableType === 'radio') && record.key === activeIndex) { + if (record.$disabled) { + className = 'mk-disabled ' + } else if ((setting.tableType === 'checkbox' || setting.tableType === 'radio') && record.key === activeIndex) { className = 'mk-row-active ' } diff --git a/src/tabviews/zshare/normalTable/index.scss b/src/tabviews/zshare/normalTable/index.scss index abfca41..ebc746e 100644 --- a/src/tabviews/zshare/normalTable/index.scss +++ b/src/tabviews/zshare/normalTable/index.scss @@ -23,6 +23,30 @@ } } + .mk-disabled { + color: #bcbcbc; + cursor: not-allowed; + .ant-btn { + cursor: not-allowed; + } + .ant-table-selection-column { + > span::after { + content: ' '; + display: block; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1; + } + } + .ant-checkbox-checked .ant-checkbox-inner { + background-color: #fff!important; + border-color: #d9d9d9!important; + } + } + table { max-width: 100%; width: 100%; diff --git a/src/tabviews/zshare/settingcomponent/editTable/index.jsx b/src/tabviews/zshare/settingcomponent/editTable/index.jsx index f12eace..818744c 100644 --- a/src/tabviews/zshare/settingcomponent/editTable/index.jsx +++ b/src/tabviews/zshare/settingcomponent/editTable/index.jsx @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -// import { fromJS } from 'immutable' -import { Table, Form, Icon, Select, Cascader } from 'antd' +import { Table, Form, Select, Cascader } from 'antd' +import { EditOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -111,7 +111,7 @@ </div> ) : ( <div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')} style={{minWidth: '110px'}}> - <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><Icon type="edit" /></span> + <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><EditOutlined /></span> </div> ) } @@ -149,7 +149,7 @@ </div> ) : ( <div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')} style={{minWidth: '110px'}}> - <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><Icon type="edit" /></span> + <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><EditOutlined /></span> </div> ) } diff --git a/src/tabviews/zshare/topSearch/advanceform/index.jsx b/src/tabviews/zshare/topSearch/advanceform/index.jsx index d5c4c88..8680e75 100644 --- a/src/tabviews/zshare/topSearch/advanceform/index.jsx +++ b/src/tabviews/zshare/topSearch/advanceform/index.jsx @@ -6,7 +6,7 @@ import asyncComponent from '@/utils/asyncComponent' import './index.scss' -const MKCheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/checkCard')) +const MKCheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkCheckCard')) const MKSelect = asyncComponent(() => import('../mkSelect')) const MKDatePicker = asyncComponent(() => import('../mkDatePicker')) @@ -47,7 +47,7 @@ } else if (item.type === 'date' || item.type === 'datemonth' || item.type === 'dateweek' || item.type === 'daterange') { content = (<MKDatePicker config={item}/>) } else if (item.type === 'checkcard') { - content = <MKCheckCard card={item}/> + content = <MKCheckCard config={item}/> } if (content) { diff --git a/src/tabviews/zshare/topSearch/dategroup/index.jsx b/src/tabviews/zshare/topSearch/dategroup/index.jsx index ab2b3a2..f37691b 100644 --- a/src/tabviews/zshare/topSearch/dategroup/index.jsx +++ b/src/tabviews/zshare/topSearch/dategroup/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { DatePicker, Tooltip, Icon } from 'antd' +import { DatePicker, Tooltip } from 'antd' +import { CloseCircleOutlined } from '@ant-design/icons' import moment from 'moment' import Utils from '@/utils/utils.js' @@ -128,7 +129,7 @@ {dateRange ? <div className="table-search-date-group-value"> {dateRange.replace(',', ' ~ ')} - <Icon type="close-circle" onClick={this.clearTime} className="ant-calendar-picker-clear" /> + <CloseCircleOutlined onClick={this.clearTime} className="ant-calendar-picker-clear" /> </div> : null} </div> ) diff --git a/src/tabviews/zshare/topSearch/dategroup/quarterpicker/index.jsx b/src/tabviews/zshare/topSearch/dategroup/quarterpicker/index.jsx index d81e866..07c9cdd 100644 --- a/src/tabviews/zshare/topSearch/dategroup/quarterpicker/index.jsx +++ b/src/tabviews/zshare/topSearch/dategroup/quarterpicker/index.jsx @@ -6,7 +6,6 @@ class QuarterPicker extends Component { static propTpyes = { - dict: PropTypes.object, // 瀛楀吀椤� card: PropTypes.object, // 鎼滅储閰嶇疆 onChange: PropTypes.func } diff --git a/src/tabviews/zshare/topSearch/dategroup/yearpicker/index.jsx b/src/tabviews/zshare/topSearch/dategroup/yearpicker/index.jsx index 94c2bf6..f01b64e 100644 --- a/src/tabviews/zshare/topSearch/dategroup/yearpicker/index.jsx +++ b/src/tabviews/zshare/topSearch/dategroup/yearpicker/index.jsx @@ -6,7 +6,6 @@ class QuarterPicker extends Component { static propTpyes = { - dict: PropTypes.object, // 瀛楀吀椤� card: PropTypes.object, // 鎼滅储閰嶇疆 onChange: PropTypes.func } diff --git a/src/tabviews/zshare/topSearch/index.jsx b/src/tabviews/zshare/topSearch/index.jsx index cbb6432..8f02a8b 100644 --- a/src/tabviews/zshare/topSearch/index.jsx +++ b/src/tabviews/zshare/topSearch/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Form, Row, Col, Button, notification, Modal, Icon } from 'antd' +import { Form, Row, Col, Button, notification, Modal } from 'antd' +import { CloseOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -15,7 +16,7 @@ import './index.scss' const MutilForm = asyncSpinComponent(() => import('./advanceform')) -const MKCheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/checkCard')) +const MKCheckCard = asyncComponent(() => import('@/tabviews/zshare/mutilform/mkCheckCard')) const MKSelect = asyncComponent(() => import('./mkSelect')) const DateGroup = asyncComponent(() => import('./dategroup')) const MKDatePicker = asyncComponent(() => import('./mkDatePicker')) @@ -94,7 +95,8 @@ } _searchlist.forEach(item => { - if (item.type === 'link') { + // if (item.type === 'link') { + if (item.linkField) { linkFields[item.linkField] = linkFields[item.linkField] || [] linkFields[item.linkField].push({field: item.field, uuid: item.uuid}) } @@ -130,7 +132,8 @@ item.options.unshift({ key: Utils.getuuid(), Value: '', - Text: this.state.dict['main.all'] + Text: '鍏ㄩ儴', + ParentID: '' }) } @@ -164,11 +167,11 @@ let _list = _searchlist.map(item => { if (item.hidden) return item - if (linkFields[item.field]) { + if (linkFields[item.field] && (item.type === 'select' || item.type === 'link' || (item.type === 'checkcard' && item.multiple !== 'true'))) { item.linkFields = linkFields[item.field] } - if (item.type === 'link') { + if (item.linkField) { let supItem = fieldMap.get(item.linkField) if (!supItem) { @@ -387,7 +390,7 @@ _item = {..._item, ...cell} } - if (item.type === 'link') { + if (item.linkField) { _item.ParentID = cell[item.linkField] } @@ -397,13 +400,13 @@ item.oriOptions = [...item.oriOptions, ...options] } - if (item.type === 'link') { + if (item.linkField) { if (item.supInitVal) { item.options = item.oriOptions.filter(option => option.ParentID === item.supInitVal || option.Value === '') } else { item.options = item.oriOptions } - } else if (item.type === 'select' || item.type === 'multiselect' || item.type === 'checkcard') { + } else if (item.oriOptions) { item.options = item.oriOptions } @@ -425,7 +428,9 @@ this.handleSubmit() }, 1000) } else { - this.handleSubmit() + setTimeout(() => { + this.handleSubmit() + }, 10) } } @@ -434,6 +439,16 @@ this.record[item.field] = type this.handleSubmit() + } + + cardChange = (val, item) => { + this.record[item.field] = val + + if (!item.linkFields) { + setTimeout(() => { + this.handleSubmit() + }, 10) + } } getFields() { @@ -468,7 +483,7 @@ content = <DateGroup position={index} config={item} onChange={(val, type) => this.dateGroupChange(val, type, item)} /> } else if (item.type === 'checkcard') { className = 'checkcard' - content = <MKCheckCard card={item} onChange={this.handleSubmit} /> + content = <MKCheckCard config={item} onChange={(val) => this.cardChange(val, item)} /> } if (content) { @@ -519,7 +534,7 @@ this.setState({}, () => { this.props.form.validateFields((err, values) => { if (err) return - + let { searches, error } = this.getFieldsValues(values) if (error) { @@ -708,7 +723,7 @@ <div key={index}> <span>{item.label}: </span> <span className="advance-value">{item.value}</span> - <Icon type="close" onClick={() => this.closeAdvanceForm(item)} /> + <CloseOutlined onClick={() => this.closeAdvanceForm(item)} /> </div>) })} </div> : null} diff --git a/src/templates/calendarconfig/calcomponent/index.jsx b/src/templates/calendarconfig/calcomponent/index.jsx index 92d1a73..fd2343c 100644 --- a/src/templates/calendarconfig/calcomponent/index.jsx +++ b/src/templates/calendarconfig/calcomponent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal } from 'antd' +import { Modal } from 'antd' +import { EditOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -69,7 +70,7 @@ return ( <div className="model-calendar-setting"> - <Icon type="edit" onClick={this.handleTab} /> + <EditOutlined onClick={this.handleTab} /> {/* 璁剧疆鍏ㄥ眬閰嶇疆鍙婂垪琛ㄦ暟鎹簮 */} <Modal wrapClassName="model-calendar-setting-modal" diff --git a/src/templates/calendarconfig/index.jsx b/src/templates/calendarconfig/index.jsx index 828cef0..8f8f352 100644 --- a/src/templates/calendarconfig/index.jsx +++ b/src/templates/calendarconfig/index.jsx @@ -4,7 +4,8 @@ import { is, fromJS } from 'immutable' import { DndProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' -import { Button, Card, Modal, Collapse, notification, Spin, Icon, Switch } from 'antd' +import { Button, Card, Modal, Collapse, notification, Spin, Switch } from 'antd' +import { RedoOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -109,6 +110,32 @@ */ componentDidMount () { this.reloadTab(false) + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } + if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (_shortcut === 'ctrl+83') { + let node = document.getElementById('save-config') + if (node && node.click) { + node.click() + } + return false + } + } } getMockData = (year) => { @@ -210,6 +237,7 @@ this.setState = () => { return } + document.onkeydown = () => {} } // 椤甸潰杩斿洖 @@ -765,13 +793,13 @@ <Card title={ <div> 鏃ュ巻椤甸潰閰嶇疆 - <Icon type="redo" style={{marginLeft: '10px'}} title="鍒锋柊鏍囩鍒楄〃" onClick={() => this.reloadTab(true)} /> + <RedoOutlined style={{marginLeft: '10px'}} title="鍒锋柊鏍囩鍒楄〃" onClick={() => this.reloadTab(true)} /> </div> } bordered={false} extra={ <div> <EditComponent dict={this.state.dict} type="table" options={['search', 'form']} config={this.state.config}/> <Switch className="big" checkedChildren="鍚�" unCheckedChildren="鍋�" checked={this.state.config.enabled} onChange={this.onEnabledChange} /> - <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['model.save']}</Button> + <Button type="primary" id="save-config" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['model.save']}</Button> <Button onClick={this.cancelConfig}>{this.state.dict['model.back']}</Button> </div> } style={{ width: '100%' }}> diff --git a/src/templates/calendarconfig/source.jsx b/src/templates/calendarconfig/source.jsx index 1fdbb8e..fb3bceb 100644 --- a/src/templates/calendarconfig/source.jsx +++ b/src/templates/calendarconfig/source.jsx @@ -44,7 +44,6 @@ initval: '', type: 'text', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', match: 'like', @@ -56,7 +55,6 @@ initval: '', type: 'select', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', match: 'equal', @@ -68,7 +66,6 @@ initval: '', type: 'date', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', match: 'greater', diff --git a/src/templates/comtableconfig/index.jsx b/src/templates/comtableconfig/index.jsx index 9481ddd..8117f1c 100644 --- a/src/templates/comtableconfig/index.jsx +++ b/src/templates/comtableconfig/index.jsx @@ -149,6 +149,33 @@ */ componentDidMount () { this.reloadTab(false) + + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } + if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (_shortcut === 'ctrl+83') { + let node = document.getElementById('save-config') + if (node && node.click) { + node.click() + } + return false + } + } } /** @@ -158,6 +185,7 @@ this.setState = () => { return } + document.onkeydown = () => {} } /** @@ -290,6 +318,11 @@ return tab }) }) + } + + // 鎸夐挳涓嶅瓨鍦ㄦ椂锛屽幓鎺夌粦瀹氱殑鍙屽嚮鎸夐挳 + if (_config.setting.doubleClick && _config.action.findIndex((item) => item.uuid === _config.setting.doubleClick) === -1) { + _config.setting.doubleClick = '' } // 鏈缃暟鎹簮鎴栨爣绛句笉鍚堟硶鏃讹紝鍚敤鐘舵�佷负false @@ -1153,7 +1186,7 @@ <Tooltip placement="topLeft" title="鐐瑰嚮鎸夐挳锛屽彲瀹屾垚鎴栨煡鐪嬫寜閽厤缃俊鎭��"> <QuestionCircleOutlined className="mk-form-tip"/> </Tooltip> - {this.state.dict['header.menu.action.configurable']} + 鎸夐挳閰嶇疆 </p> : null } </div> @@ -1187,7 +1220,7 @@ <Tooltip placement="topLeft" title="鐐瑰嚮鎸夐挳锛屽彲瀹屾垚鎴栨煡鐪嬫爣绛鹃厤缃俊鎭��"> <QuestionCircleOutlined className="mk-form-tip"/> </Tooltip> - {this.state.dict['header.menu.tab.configurable']} + 鏍囩閰嶇疆 </p> : null } {configTabs.map((item, index) => { @@ -1208,7 +1241,7 @@ <div className="setting"> <Card title={ <div> - {this.state.dict['header.menu.page.configurable']} + 椤甸潰閰嶇疆 <RedoOutlined style={{marginLeft: '10px'}} title="鍒锋柊鏍囩鍒楄〃" onClick={() => this.reloadTab(true)} /> </div> } bordered={false} extra={ @@ -1218,7 +1251,7 @@ <ReplaceField type="table" config={config} updateConfig={this.updateconfig}/> <EditComponent dict={this.state.dict} type="table" options={['search', 'form', 'action', 'columns']} config={this.state.config} MenuID={this.props.menu.MenuID} thawButtons={this.state.thawButtons} refresh={this.editConfig}/> <Switch className="big" checkedChildren={this.state.dict['model.enable']} unCheckedChildren={this.state.dict['model.disable']} checked={this.state.config.enabled} onChange={this.onEnabledChange} /> - <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['model.save']}</Button> + <Button type="primary" id="save-config" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['model.save']}</Button> <Button onClick={this.cancelConfig}>{this.state.dict['model.back']}</Button> </div> } style={{ width: '100%' }}> diff --git a/src/templates/comtableconfig/index.scss b/src/templates/comtableconfig/index.scss index 70828ad..05862cb 100644 --- a/src/templates/comtableconfig/index.scss +++ b/src/templates/comtableconfig/index.scss @@ -68,7 +68,7 @@ top: 0px; padding: 0px; cursor: pointer; - i { + .anticon { font-size: 16px; color: #1890ff; } diff --git a/src/templates/comtableconfig/menuform/index.jsx b/src/templates/comtableconfig/menuform/index.jsx index 6461cc3..cbf66a2 100644 --- a/src/templates/comtableconfig/menuform/index.jsx +++ b/src/templates/comtableconfig/menuform/index.jsx @@ -207,7 +207,7 @@ </Form.Item> </Col> <Col span={24}> - <Form.Item label={dict['header.form.easyCode']}> + <Form.Item label="鍔╄鐮�"> {getFieldDecorator('easyCode', { initialValue: config.easyCode, rules: [ diff --git a/src/templates/comtableconfig/source.jsx b/src/templates/comtableconfig/source.jsx index 07b053a..781963e 100644 --- a/src/templates/comtableconfig/source.jsx +++ b/src/templates/comtableconfig/source.jsx @@ -36,7 +36,6 @@ initval: '', type: 'text', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', match: 'like', @@ -48,7 +47,6 @@ initval: '', type: 'select', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', match: 'equal', @@ -60,7 +58,6 @@ initval: '', type: 'date', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', match: 'greater', diff --git a/src/templates/formtabconfig/actionform/index.jsx b/src/templates/formtabconfig/actionform/index.jsx index 42bba10..503b392 100644 --- a/src/templates/formtabconfig/actionform/index.jsx +++ b/src/templates/formtabconfig/actionform/index.jsx @@ -1,10 +1,10 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Input, Select, Icon, Radio, notification, Tooltip, InputNumber } from 'antd' +import { Form, Row, Col, Input, Select, Radio, notification, Tooltip, InputNumber } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' import { btnIcons, btnClasses, formRule } from '@/utils/option.js' -// import Utils from '@/utils/utils.js' +import MkIcon from '@/components/mk-icon' import './index.scss' const { TextArea } = Input @@ -30,7 +30,7 @@ text: this.props.dict['header.form.action.update'] }, { value: 'insertOrUpdate', - text: this.props.dict['header.form.action.insertOrUpdate'] + text: '娣诲姞鎴栦慨鏀�' }], returnoptions: [{ // 杩斿洖鍚�-涓嶅埛鏂般�佸埛鏂伴〉闈€�佸埛鏂拌〃鏍� value: 'never', @@ -331,7 +331,7 @@ > {item.options.map((option, index) => <Select.Option id={`${index}`} title={option.text} key={`${index}`} value={option.value}> - {item.key === 'icon' && option.value && <Icon type={option.value} />} {option.text} + {item.key === 'icon' && option.value && <MkIcon type={option.value} />} {option.text} </Select.Option> )} </Select> diff --git a/src/templates/formtabconfig/dragelement/card.jsx b/src/templates/formtabconfig/dragelement/card.jsx index 7648091..db147f1 100644 --- a/src/templates/formtabconfig/dragelement/card.jsx +++ b/src/templates/formtabconfig/dragelement/card.jsx @@ -1,6 +1,7 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Button, Select, DatePicker, Input, InputNumber, Popover } from 'antd' +import { Button, Select, DatePicker, Input, InputNumber, Popover } from 'antd' +import { EditOutlined, CopyOutlined, ProfileOutlined, CloseOutlined, UploadOutlined, TableOutlined } from '@ant-design/icons' import moment from 'moment' import ItemTypes from './itemtypes' import './index.scss' @@ -95,12 +96,12 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="缂栬緫" type="edit" onClick={edit} /> - {type === 'search' ? <Icon className="edit copy" title="澶嶅埗" type="copy" onClick={copy} /> : null} + <EditOutlined className="edit" title="缂栬緫" onClick={edit} /> + {type === 'search' ? <CopyOutlined className="edit copy" title="澶嶅埗" onClick={copy} /> : null} {type === 'action' && card.btnType !== 'cancel' ? - <Icon className="edit profile" title="鏍¢獙瑙勫垯" type="profile" onClick={profile} /> : null + <ProfileOutlined className="edit profile" title="鏍¢獙瑙勫垯" onClick={profile} /> : null } - {type === 'search' || (type === 'action' && card.btnType !== 'confirm' && card.btnType !== 'cancel') ? <Icon className="edit close" title="鍒犻櫎" type="close" onClick={del} /> : null} + {type === 'search' || (type === 'action' && card.btnType !== 'confirm' && card.btnType !== 'cancel') ? <CloseOutlined className="edit close" title="鍒犻櫎" onClick={del} /> : null} </div> } trigger="hover"> <div className="page-card" style={{ opacity: opacity}}> @@ -137,7 +138,7 @@ } {card.type === 'fileupload' ? <Button> - <Icon type="upload" /> 鐐瑰嚮涓婁紶 + <UploadOutlined /> 鐐瑰嚮涓婁紶 </Button> : null } </div> @@ -149,7 +150,7 @@ icon={card.icon} key={card.uuid} > - {card.label}{card.position === 'grid' && <Icon type="table" />} + {card.label}{card.position === 'grid' && <TableOutlined />} </Button> : null } </div> diff --git a/src/templates/formtabconfig/dragelement/index.jsx b/src/templates/formtabconfig/dragelement/index.jsx index 827f7d0..4816521 100644 --- a/src/templates/formtabconfig/dragelement/index.jsx +++ b/src/templates/formtabconfig/dragelement/index.jsx @@ -8,7 +8,7 @@ import ItemTypes from './itemtypes' import './index.scss' -const Container = ({list, type, groupId, setting, placeholder, handleList, handleMenu, deleteMenu, profileMenu }) => { +const Container = ({list, type, groupId, setting, handleList, handleMenu, deleteMenu, profileMenu }) => { const [cards, setCards] = useState(list) const moveCard = (id, atIndex) => { const { card, index } = findCard(id) @@ -115,7 +115,6 @@ newcard.type = item.subType newcard.resourceType = '0' newcard.options = [] - newcard.setAll = 'false' newcard.orderType = 'asc' newcard.match = _match } else if (item.type === 'action') { @@ -184,7 +183,7 @@ ))} {cards.length === 0 && <div className="common-drawarea-placeholder"> - {placeholder} + {type === 'action' ? '璇锋坊鍔犳寜閽�' : '璇锋坊鍔犺〃鍗�'} </div> } </div> diff --git a/src/templates/formtabconfig/index.jsx b/src/templates/formtabconfig/index.jsx index ae8ce10..297b37b 100644 --- a/src/templates/formtabconfig/index.jsx +++ b/src/templates/formtabconfig/index.jsx @@ -430,10 +430,7 @@ let _inputfields = [] let _tabfields = [] let _linkableFields = [] - let _linksupFields = [{ - value: '', - text: '绌�' - }] + let _linksupFields = [] let _formfields = [] // 璁剧疆涓嬫媺鑿滃崟鍙叧鑱斿瓧娈� @@ -1327,7 +1324,6 @@ initval: '', type: item.type, resourceType: '0', - setAll: 'false', options: [], orderType: 'asc' } @@ -1802,7 +1798,7 @@ className="tables" style={{ width: '100%' }} optionFilterProp="children" - value={this.state.dict['header.menu.table.placeholder']} + value="璇烽�夋嫨琛ㄥ悕" onChange={this.onTableChange} showArrow={false} getPopupContainer={() => document.getElementById('common-basedata')} @@ -1833,7 +1829,7 @@ return (<SourceElement key={index} content={item}/>) })} </div> - <Button type="primary" block onClick={() => this.queryField('search')}>{this.state.dict['header.menu.form.add']}</Button> + <Button type="primary" block onClick={() => this.queryField('search')}>鎵归噺娣诲姞</Button> </Panel> {/* 鎸夐挳娣诲姞 */} <Panel header={this.state.dict['header.menu.action']} key="2"> @@ -1855,7 +1851,7 @@ <Tooltip placement="topLeft" title="鐐瑰嚮鎸夐挳锛屽彲瀹屾垚鎴栨煡鐪嬫爣绛鹃厤缃俊鎭��"> <QuestionCircleOutlined className="mk-form-tip" /> </Tooltip> - {this.state.dict['header.menu.tab.configurable']} + 鏍囩閰嶇疆 </p> : null } {configTabs.map((item, index) => { @@ -1876,7 +1872,7 @@ <div className="setting"> <Card title={ <div> - {this.state.dict['header.menu.page.configurable']} + 椤甸潰閰嶇疆 <RedoOutlined style={{marginLeft: '10px'}} title="鍒锋柊鏍囩鍒楄〃" onClick={this.reloadTab} /> </div> } bordered={false} extra={ @@ -1915,7 +1911,6 @@ setting={config.setting} handleMenu={this.handleSearch} deleteMenu={this.deleteElement} - placeholder={this.state.dict['header.form.modal.placeholder']} /> </Panel> ))} @@ -1931,7 +1926,6 @@ handleMenu={this.handleAction} deleteMenu={this.deleteElement} profileMenu={this.profileAction} - placeholder={this.state.dict['header.form.action.placeholder']} /> </div> {/* 鏍囩缁� */} @@ -1946,7 +1940,7 @@ </DndProvider> {/* 缂栬緫琛ㄥ崟 */} <Modal - title={this.state.card && this.state.card.iscopy ? this.state.dict['header.modal.form.copy'] : this.state.dict['header.modal.form.edit']} + title={this.state.card && this.state.card.iscopy ? '琛ㄥ崟-澶嶅埗' : '琛ㄥ崟-缂栬緫'} visible={modaltype === 'search'} width={700} maskClosable={false} @@ -2081,7 +2075,7 @@ {this.state.dict['header.menu.config.placeholder']} </Modal> <Modal - title={this.state.dict['header.menu.group.manage']} + title="鍒嗙粍绠$悊" visible={this.state.groupVisible} width={700} maskClosable={false} diff --git a/src/templates/formtabconfig/source.jsx b/src/templates/formtabconfig/source.jsx index 94de283..e5ddf6c 100644 --- a/src/templates/formtabconfig/source.jsx +++ b/src/templates/formtabconfig/source.jsx @@ -29,7 +29,6 @@ initval: '', type: 'text', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc' }, { @@ -40,7 +39,6 @@ initval: '', type: 'select', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc' }, { @@ -51,7 +49,6 @@ initval: '', type: 'date', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc' } diff --git a/src/templates/menuconfig/editfirstmenu/dragelement/card.jsx b/src/templates/menuconfig/editfirstmenu/dragelement/card.jsx index 6a51699..b278434 100644 --- a/src/templates/menuconfig/editfirstmenu/dragelement/card.jsx +++ b/src/templates/menuconfig/editfirstmenu/dragelement/card.jsx @@ -1,6 +1,7 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { EditOutlined, CloseOutlined } from '@ant-design/icons' import ItemTypes from './itemtypes' import './index.scss' @@ -35,8 +36,8 @@ return ( <Popover overlayClassName="mk-popover-control-wrap header-menu" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" type="edit" onClick={edit} /> - <Icon className="close" type="close" onClick={del} /> + <EditOutlined className="edit" onClick={edit} /> + <CloseOutlined className="close" onClick={del} /> </div> } trigger="hover"> <div className="card" style={{ opacity }}> diff --git a/src/templates/menuconfig/editfirstmenu/dragelement/index.jsx b/src/templates/menuconfig/editfirstmenu/dragelement/index.jsx index bf3872f..44aa6ac 100644 --- a/src/templates/menuconfig/editfirstmenu/dragelement/index.jsx +++ b/src/templates/menuconfig/editfirstmenu/dragelement/index.jsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' import { useDrop } from 'react-dnd' -import { Icon, Button } from 'antd' +import { Button } from 'antd' +import { PlusOutlined } from '@ant-design/icons' import { is, fromJS } from 'immutable' import update from 'immutability-helper' import Card from './card' @@ -73,7 +74,7 @@ /> ))} <div className="card-add" onClick={add}> - <Icon type="plus" /> + <PlusOutlined /> </div> <Button type="primary" onClick={thawmenu}>{dict['model.thaw'] + dict['model.menu']}</Button> <Button type="primary" onClick={confirm}>{dict['model.confirm']}</Button> diff --git a/src/templates/menuconfig/editsecmenu/index.jsx b/src/templates/menuconfig/editsecmenu/index.jsx index 10f3d70..c93ba0e 100644 --- a/src/templates/menuconfig/editsecmenu/index.jsx +++ b/src/templates/menuconfig/editsecmenu/index.jsx @@ -3,7 +3,8 @@ import { is, fromJS } from 'immutable' import { DndProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' -import { notification, Modal, Button, Spin, Icon } from 'antd' +import { notification, Modal, Button, Spin } from 'antd' +import { PlusOutlined } from '@ant-design/icons' import moment from 'moment' import TransferForm from '@/templates/zshare/basetransferform' import Utils from '@/utils/utils.js' @@ -109,18 +110,11 @@ readonly: false }, { // 鑿滃崟鍥炬爣 - type: 'select', + type: 'icon', key: 'icon', label: dict['model.icon'], - initVal: menu.card.PageParam.Icon, - required: true, - options: [{ - MenuID: 'folder', - text: 'folder' - }, { - MenuID: 'api', - text: 'api' - }] + initVal: menu.card.PageParam.Icon || 'folder', + required: true } ] }) @@ -154,18 +148,11 @@ readonly: false }, { // 鑿滃崟鍥炬爣 - type: 'select', + type: 'icon', key: 'icon', label: dict['model.icon'], initVal: 'folder', - required: true, - options: [{ - MenuID: 'folder', - text: 'folder' - }, { - MenuID: 'api', - text: 'api' - }] + required: true } ] }) @@ -433,7 +420,7 @@ /> : null} </DndProvider> <div className="menu-add" onClick={() => {this.handleSubBtn('add')}}> - <Icon type="plus" /> + <PlusOutlined /> </div> <div className="menu-btn"> <Button type="primary" onClick={() => {this.handleSubBtn('thaw')}}>{dict['model.thaw'] + dict['model.menu']}</Button> diff --git a/src/templates/menuconfig/editthdmenu/index.jsx b/src/templates/menuconfig/editthdmenu/index.jsx index 8ec7b43..1c9c99f 100644 --- a/src/templates/menuconfig/editthdmenu/index.jsx +++ b/src/templates/menuconfig/editthdmenu/index.jsx @@ -5,7 +5,8 @@ import { DndProvider } from 'react-dnd' import { withRouter } from 'react-router-dom' import HTML5Backend from 'react-dnd-html5-backend' -import { notification, Modal, Button, Spin, Icon, Col, Card, Tabs, Row, Input } from 'antd' +import { notification, Modal, Button, Spin, Col, Card, Tabs, Row, Input } from 'antd' +import { PlusOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -16,7 +17,7 @@ import treepage from '@/assets/img/treepage.jpg' import calendar from '@/assets/img/calendar.jpg' import customImg from '@/assets/img/custom.jpg' - +import MkIcon from '@/components/mk-icon' import Preview from './preview' import MenuForm from './menuform' import TransferForm from '@/templates/zshare/basetransferform' @@ -192,7 +193,7 @@ if (_Template.length === 0) { notification.warning({ top: 92, - message: this.state.dict['model.menu.template.empty'], + message: '鑿滃崟妯℃澘涓㈠け锛岃閲嶆柊閫夋嫨妯℃澘锛�', duration: 5 }) @@ -800,7 +801,7 @@ </div> : null } <div className="cus-submenu-title"> - <Icon type={this.props.supMenu.PageParam.Icon} /> + <MkIcon type={this.props.supMenu.PageParam.Icon} /> <span>{this.props.supMenu.MenuName}</span> </div> <DndProvider backend={HTML5Backend}> @@ -811,7 +812,7 @@ /> </DndProvider> <div className="menu-add" onClick={() => {this.handleSubBtn('add')}}> - <Icon type="plus" /> + <PlusOutlined /> </div> <div className="menu-btn"> <Button type="primary" onClick={() => {this.handleSubBtn('thaw')}}>{dict['model.thaw'] + dict['model.menu']}</Button> diff --git a/src/templates/menuconfig/editthdmenu/index.scss b/src/templates/menuconfig/editthdmenu/index.scss index 53a842c..05931e0 100644 --- a/src/templates/menuconfig/editthdmenu/index.scss +++ b/src/templates/menuconfig/editthdmenu/index.scss @@ -89,7 +89,7 @@ font-size: 14px; white-space: nowrap; text-overflow: ellipsis; - i { + .anticon { margin-right: 10px; } } diff --git a/src/templates/menuconfig/editthdmenu/preview/index.jsx b/src/templates/menuconfig/editthdmenu/preview/index.jsx index dfb97ce..569a6e9 100644 --- a/src/templates/menuconfig/editthdmenu/preview/index.jsx +++ b/src/templates/menuconfig/editthdmenu/preview/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { Button } from 'antd' +import { CloseOutlined } from '@ant-design/icons' import './index.scss' class Preview extends Component { @@ -53,7 +54,7 @@ <div> {this.state.url && this.props.template && <div className={'preview-box ' + (this.state.show ? 'active' : '')} onClick={this.close}> - <Button shape="circle" icon="close"></Button> + <Button shape="circle"><CloseOutlined /></Button> <Button type="primary" onClick={() => {this.props.confirm(this.props.template, type)}}>浣跨敤妯℃澘</Button> {this.state.url && <img src={this.state.url} alt=""/>} </div> diff --git a/src/templates/menuconfig/editthdmenu/preview/index.scss b/src/templates/menuconfig/editthdmenu/preview/index.scss index 1a52608..69852a3 100644 --- a/src/templates/menuconfig/editthdmenu/preview/index.scss +++ b/src/templates/menuconfig/editthdmenu/preview/index.scss @@ -3,7 +3,7 @@ z-index: 1100; left: 0; right: 0px; - top: 0px; + top: 40px; bottom: 0px; background: rgba($color: #000000, $alpha: 0.6); line-height: 100vh; diff --git a/src/templates/menuconfig/menuelement/card.jsx b/src/templates/menuconfig/menuelement/card.jsx index 36a5981..6153de3 100644 --- a/src/templates/menuconfig/menuelement/card.jsx +++ b/src/templates/menuconfig/menuelement/card.jsx @@ -1,7 +1,8 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon } from 'antd' +import { EditOutlined, CloseOutlined } from '@ant-design/icons' import ItemTypes from './itemtypes' +import MkIcon from '@/components/mk-icon' import './index.scss' const Card = ({ id, card, moveCard, findCard, editCard, closeCard }) => { @@ -47,13 +48,13 @@ return ( <div className="side-card" style={{ opacity }}> <div ref={node => drag(drop(node))}> - {card.PageParam && card.PageParam.Icon && <Icon type={card.PageParam.Icon} />} + {card.PageParam && card.PageParam.Icon && <MkIcon type={card.PageParam.Icon} />} {card.MenuName} </div> {/* 鑷畾涔夋ā鏉匡紝鍦ㄦ柊椤甸潰缂栬緫 */} - {!card.forbidden && card.type !== 'CustomPage' ? <Icon className="edit" type="edit" onClick={edit} /> : null} - {card.type === 'CustomPage' ? <Icon className="edit" onClick={() => {window.open(`#/menudesign/${_param}`)}} type="edit" /> : null} - <Icon className="close" type="close" onClick={close} /> + {!card.forbidden && card.type !== 'CustomPage' ? <EditOutlined className="edit" onClick={edit} /> : null} + {card.type === 'CustomPage' ? <EditOutlined className="edit" onClick={() => {window.open(`#/menudesign/${_param}`)}}/> : null} + <CloseOutlined className="close" onClick={close} /> </div> ) } diff --git a/src/templates/menuconfig/menuform/index.jsx b/src/templates/menuconfig/menuform/index.jsx index c2de7f5..b7de0a9 100644 --- a/src/templates/menuconfig/menuform/index.jsx +++ b/src/templates/menuconfig/menuform/index.jsx @@ -1,7 +1,11 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Input, Select, Icon } from 'antd' +import { Form, Row, Col, Input, Select } from 'antd' + +import asyncComponent from '@/utils/asyncComponent' import './index.scss' + +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) class MainSearch extends Component { static propTpyes = { @@ -35,7 +39,7 @@ const { getFieldDecorator } = this.props.form const fields = [] this.props.formlist.forEach((item, index) => { - if (item.type === 'text') { // 鏂囨湰鎼滅储 + if (item.type === 'text') { fields.push( <Col span={24} key={index}> <Form.Item label={item.label}> @@ -51,7 +55,7 @@ </Form.Item> </Col> ) - } else if (item.type === 'select') { // 涓嬫媺鎼滅储 + } else if (item.type === 'select') { fields.push( <Col span={24} key={index}> <Form.Item label={item.label}> @@ -72,7 +76,7 @@ > {item.options.map(option => <Select.Option id={option.MenuID} key={option.MenuID} value={option.MenuID}> - {item.key === 'icon' && <Icon type={option.text} />} {option.text || option.MenuName} + {option.text || option.MenuName} </Select.Option> )} </Select> @@ -80,6 +84,24 @@ </Form.Item> </Col> ) + } else if (item.type === 'icon') { + fields.push( + <Col span={24} key={index}> + <Form.Item label={item.label}> + {getFieldDecorator(item.key, { + initialValue: item.initVal || '', + rules: [ + { + required: !!item.required, + message: this.props.dict['form.required.select'] + item.label + '!' + } + ] + })( + <MkEditIcon options={['normal', 'data', 'direction', 'edit', 'hint']} /> + )} + </Form.Item> + </Col> + ) } }) return fields diff --git a/src/templates/modalconfig/dragelement/card.jsx b/src/templates/modalconfig/dragelement/card.jsx index a2245e2..662a035 100644 --- a/src/templates/modalconfig/dragelement/card.jsx +++ b/src/templates/modalconfig/dragelement/card.jsx @@ -1,10 +1,11 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Select, DatePicker, Input, InputNumber, Button, Popover, Switch, Radio, Checkbox, Form, Rate, Icon } from 'antd' -import { QuestionCircleOutlined, UploadOutlined, EditOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons' +import { Select, DatePicker, Input, InputNumber, Button, Popover, Switch, Radio, Checkbox, Form, Rate } from 'antd' +import { QuestionCircleOutlined, UploadOutlined, EditOutlined, CopyOutlined, CloseOutlined, StarFilled } from '@ant-design/icons' import moment from 'moment' import asyncComponent from '@/utils/asyncComponent' +import MkIcon from '@/components/mk-icon' import './index.scss' const { MonthPicker } = DatePicker @@ -91,7 +92,7 @@ } else if (card.type === 'linkMain') { formItem = (<Input style={{marginTop: '4px'}} />) } else if (card.type === 'rate') { - formItem = (<Rate value={card.initval || 0} count={card.rateCount || 5} character={card.character ? <Icon type={card.character}/> : <Icon type="star" theme="filled"/>} allowHalf={card.allowHalf === 'true'} />) + formItem = (<Rate value={card.initval || 0} count={card.rateCount || 5} character={card.character ? <MkIcon type={card.character}/> : <StarFilled />} allowHalf={card.allowHalf === 'true'} />) } else if (card.type === 'switch') { formItem = (<Switch checkedChildren={card.openText || ''} unCheckedChildren={card.closeText || ''} style={{marginTop: '8px'}} checked={card.initval}/>) } else if (card.type === 'radio') { @@ -123,11 +124,15 @@ } let _label = card.label + let colon = !!card.label if (card.tooltip) { _label = <span><QuestionCircleOutlined className="mk-form-tip" />{card.label}</span> } if (card.type === 'brafteditor' && card.hidelabel === 'true') { _label = null + colon = false + } else if (card.type === 'hint') { + _label = _label || ' ' } return ( @@ -142,7 +147,7 @@ <div ref={node => drag(drop(node))} onDoubleClick={edit}> {card.type === 'split' ? formItem : <Form.Item className={className} - colon={!!_label} + colon={colon} label={_label} required={card.required === 'true'} extra={card.extra || null} @@ -150,7 +155,9 @@ wrapperCol={card.labelwidth ? {style: {width: (100 - card.labelwidth) + '%'}} : null} > {formItem} - {showField ? <div className="field-name">{card.field}{card.hidden === 'true' ? '(闅愯棌)' : ''}</div> : ''} + {showField ? <div className="field-name" style={card.writein === 'false' ? {color: 'orange'} : {}}> + {card.field}{card.hidden === 'true' ? '锛堥殣钘忥級' : ''}{card.readonly === 'true' ? '锛堝彧璇伙級' : ''} + </div> : ''} </Form.Item>} </div> </div> diff --git a/src/templates/modalconfig/editcard/index.jsx b/src/templates/modalconfig/editcard/index.jsx index 476d7b3..393a27c 100644 --- a/src/templates/modalconfig/editcard/index.jsx +++ b/src/templates/modalconfig/editcard/index.jsx @@ -1,5 +1,6 @@ import React, {Component} from 'react' -import { Row, Col, Icon, Radio, Input } from 'antd' +import { Row, Col, Radio, Input } from 'antd' +import { CheckOutlined } from '@ant-design/icons' import './index.scss' const { Search } = Input @@ -37,7 +38,7 @@ return ( <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '')} > <div className="base" onClick={this.changeSelect}> - <Icon type="check" /> + <CheckOutlined /> <p title={card.field}>瀛楁锛� <span>{card.field}</span></p> <p title={card.label}>鍚嶇О锛� <span>{card.label}</span></p> </div> diff --git a/src/templates/modalconfig/index.jsx b/src/templates/modalconfig/index.jsx index 8c690fb..6b01727 100644 --- a/src/templates/modalconfig/index.jsx +++ b/src/templates/modalconfig/index.jsx @@ -5,7 +5,8 @@ import { DndProvider } from 'react-dnd' import HTML5Backend from 'react-dnd-html5-backend' import moment from 'moment' -import { Button, Card, Modal, Collapse, notification, Icon, Switch } from 'antd' +import { Button, Card, Modal, Collapse, notification, Switch } from 'antd' +import { SettingOutlined } from '@ant-design/icons' import Api from '@/api' import Utils from '@/utils/utils.js' @@ -127,6 +128,35 @@ }) } + componentDidMount() { + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } + if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (_shortcut === 'ctrl+83') { + let node = document.getElementById('save-config') + if (node && node.click) { + node.click() + } + return false + } + } + } + /** * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 */ @@ -134,6 +164,7 @@ this.setState = () => { return } + document.onkeydown = () => {} } // 椤甸潰杩斿洖 @@ -194,10 +225,7 @@ let _inputfields = [] let _tabfields = [] let _linkableFields = [] - let _linksupFields = [{ - field: '', - label: '绌�' - }] + let _linksupFields = [] let standardform = null let uniq = new Map() @@ -227,7 +255,15 @@ _tabIndex++ } - if (!['select', 'link', 'radio', ''].includes(item.type)) return + if (item.type === 'switch') { + _linksupFields.push({ + field: item.field, + label: _linkIndex + '銆�' + item.label + }) + } + + if (!['select', 'link', 'radio', 'checkcard'].includes(item.type)) return + if (item.type === 'checkcard' && item.multiple === 'true') return // 閫夐」鍗″閫� if (item.field && !uniq.has(item.field)) { uniq.set(item.field, true) @@ -670,6 +706,20 @@ }) } + clearConfig = () => { + const _this = this + let _config = {...this.state.config, fields: []} + + confirm({ + content: '纭畾娓呯┖琛ㄥ崟鍚楋紵', + onOk() { + _this.setState({ config: _config }) + }, + onCancel() {} + }) + } + + render () { const { editAction } = this.props const { config, dict, openEdition } = this.state @@ -704,17 +754,18 @@ </Collapse> </div> <div className="setting"> - <Card title={dict['header.menu.form.configurable']} bordered={false} extra={ + <Card title="琛ㄥ崟閰嶇疆" bordered={false} extra={ <div> + <Button type="danger" onClick={this.clearConfig}>娓呯┖</Button> <Versions MenuId={editAction.uuid} open_edition={openEdition} updateConfig={this.refreshConfig}/> <ReplaceField type="form" config={config} updateConfig={this.updateconfig}/> <EditComponent dict={dict} options={['form']} config={this.state.config} plusFields={this.plusFields}/> - <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{dict['model.save']}</Button> + <Button type="primary" id="save-config" onClick={this.submitConfig} loading={this.state.menuloading}>{dict['model.save']}</Button> <Button onClick={this.cancelConfig}>{dict['model.back']}</Button> </div> } style={{ width: '100%' }}> - <Icon type="setting" onClick={this.changeSetting} /> - <div className="ant-modal-content" style={{width: config.setting.width + '%'}}> + <SettingOutlined onClick={this.changeSetting} /> + <div className="ant-modal-content" style={{width: config.setting.width > 100 ? config.setting.width : config.setting.width + '%'}}> <div className="ant-modal-header"> <div className="ant-modal-title">{config.setting.title}</div> <Button className="mk-cols-change" onClick={() => this.changecols(1)}>1鍒�</Button> @@ -773,7 +824,7 @@ <Modal title={dict['model.edit']} visible={this.state.settingVisible} - width={850} + width={900} maskClosable={false} onOk={this.settingSave} onCancel={() => { this.setState({ settingVisible: false }) }} diff --git a/src/templates/modalconfig/index.scss b/src/templates/modalconfig/index.scss index 24849c9..55a0a3d 100644 --- a/src/templates/modalconfig/index.scss +++ b/src/templates/modalconfig/index.scss @@ -135,7 +135,7 @@ position: relative; z-index: 10; background: transparent; - min-height: 50px; + height: 55px; padding-right: 75px; .ant-modal-title { display: inline-block; diff --git a/src/templates/modalconfig/settingform/index.jsx b/src/templates/modalconfig/settingform/index.jsx index d2eea85..3b1efa7 100644 --- a/src/templates/modalconfig/settingform/index.jsx +++ b/src/templates/modalconfig/settingform/index.jsx @@ -96,14 +96,14 @@ })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)} </Form.Item> </Col> - {appType !== 'mob' ? <Col span={12}> + {/* {appType !== 'mob' ? <Col span={12}> <Form.Item label="瀹藉害锛�%锛�"> {getFieldDecorator('width', { initialValue: config.setting.width - })(<InputNumber min={10} max={90} precision={0} onPressEnter={this.handleSubmit}/>)} + })(<InputNumber min={10} max={2000} precision={0} onPressEnter={this.handleSubmit}/>)} </Form.Item> - </Col> : null} - {appType === 'mob' ? <Col span={12}> + </Col> : null} */} + <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title="瀹藉害灏忎簬100鏃朵负鐧惧垎鐜囷紝澶т簬100鏃朵负缁濆鍊笺��"> <QuestionCircleOutlined className="mk-form-tip" /> @@ -114,7 +114,7 @@ initialValue: config.setting.width })(<InputNumber min={10} max={2000} precision={0} onPressEnter={this.handleSubmit}/>)} </Form.Item> - </Col> : null} + </Col> <Col span={12}> <Form.Item label="鍒濆鐒︾偣"> {getFieldDecorator('focus', { @@ -183,13 +183,13 @@ </Form.Item> </Col> {appType !== 'mob' ? <Col span={12}> - <Form.Item label="鐐瑰嚮绌虹櫧澶�"> + <Form.Item label="鐐瑰嚮钂欏眰"> {getFieldDecorator('clickouter', { initialValue: config.setting.clickouter || 'unclose' })( <Radio.Group> - <Radio value="close">鍏抽棴</Radio> <Radio value="unclose">涓嶅叧闂�</Radio> + <Radio value="close">鍏抽棴</Radio> </Radio.Group> )} </Form.Item> @@ -223,8 +223,9 @@ })( <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => this.setState({display: e.target.value})}> {appType !== 'mob' ? <Radio value="modal">妯℃�佹</Radio> : null} - <Radio value="prompt">鏄惁妗�</Radio> <Radio value="drawer">鎶藉眽</Radio> + <Radio value="prompt">鏄惁妗�</Radio> + <Radio value="exec">鐩存帴鎵ц</Radio> </Radio.Group> )} </Form.Item> diff --git a/src/templates/modalconfig/source.jsx b/src/templates/modalconfig/source.jsx index 8a514cd..0f50944 100644 --- a/src/templates/modalconfig/source.jsx +++ b/src/templates/modalconfig/source.jsx @@ -26,7 +26,6 @@ initval: '', type: 'text', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', decimal: 0, @@ -44,7 +43,6 @@ initval: '', type: 'select', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', decimal: 0, @@ -62,7 +60,6 @@ initval: '', type: 'date', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', decimal: 0, @@ -179,7 +176,7 @@ }, { type: 'form', - label: CommonDict['header.form.linkMain'], + label: '鍏宠仈涓昏〃', subType: 'linkMain', } ] diff --git a/src/templates/sharecomponent/actioncomponent/actionform/index.jsx b/src/templates/sharecomponent/actioncomponent/actionform/index.jsx index efdf7db..2dae98e 100644 --- a/src/templates/sharecomponent/actioncomponent/actionform/index.jsx +++ b/src/templates/sharecomponent/actioncomponent/actionform/index.jsx @@ -1,12 +1,15 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Row, Col, Input, Select, Icon, Radio, notification, Tooltip, InputNumber, Cascader } from 'antd' +import { Form, Row, Col, Input, Select, Radio, notification, Tooltip, InputNumber, Cascader } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' -import { btnIcons, btnClasses, formRule } from '@/utils/option.js' +import { formRule } from '@/utils/option.js' +import asyncComponent from '@/utils/asyncComponent' import Utils from '@/utils/utils.js' import './index.scss' + +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) const { TextArea } = Input const actionTypeOptions = { @@ -15,8 +18,8 @@ exec: ['label', 'position', 'OpenType', 'intertype', 'Ot', 'icon', 'class', 'execSuccess', 'execError', 'openmenu', 'output'], excelIn: ['label', 'Ot', 'OpenType', 'intertype', 'icon', 'class', 'sheet', 'execSuccess', 'execError'], excelOut: ['label', 'OpenType', 'intertype', 'icon', 'class', 'execSuccess', 'execError', 'pagination', 'search'], - popview: ['label', 'Ot', 'OpenType', 'icon', 'class', 'position', 'tabType', 'linkTab', 'popClose', 'display', 'ratio', 'placement'], - tab: ['label', 'Ot', 'OpenType', 'icon', 'class', 'position'], + popview: ['label', 'Ot', 'OpenType', 'icon', 'class', 'position', 'tabType', 'linkTab', 'popClose', 'display', 'ratio', 'clickouter'], + tab: ['label', 'Ot', 'OpenType', 'icon', 'class', 'position', 'linkmenu'], innerpage: ['label', 'Ot', 'OpenType', 'pageTemplate', 'icon', 'class', 'position'], funcbutton: ['label', 'OpenType', 'funcType', 'icon', 'class'] } @@ -27,20 +30,11 @@ setting: PropTypes.object, // 椤甸潰璁剧疆 formlist: PropTypes.any, // 琛ㄥ崟淇℃伅 card: PropTypes.any, // 鎸夐挳淇℃伅 - tabs: PropTypes.array, // 鎵�鏈夋爣绛鹃〉 inputSubmit: PropTypes.any // 鍥炶溅鎻愪氦浜嬩欢 } state = { formlist: null, // 琛ㄥ崟淇℃伅 - openType: null, // 鎵撳紑鏂瑰紡 - interType: null, // 鎺ュ彛绫诲瀷锛氬唴閮ㄣ�佸閮� - funcType: null, // 鍔熻兘绫诲瀷 - position: null, // 鎸夐挳浣嶇疆 - procMode: null, // 澶栭儴鎺ュ彛鍙傛暟澶勭悊鏂瑰紡 - control: '', - pageTemplate: null, - Ot: null, requireOptions: [{ value: 'notRequired', text: this.props.dict['header.form.notRequired'] @@ -66,10 +60,10 @@ }], deleteOptions: [{ value: 'LogicDelete', - text: this.props.dict['header.form.action.LogicDelete'] + text: '閫昏緫鍒犻櫎' }, { value: 'delete', - text: this.props.dict['header.form.action.delete'] + text: '鐗╃悊鍒犻櫎' }, { value: 'custom', text: this.props.dict['header.form.custom'] @@ -89,77 +83,33 @@ }] } + record = {} UNSAFE_componentWillMount () { - const { card } = this.props + this.props.formlist.forEach(item => { + this.record[item.key] = item.initVal + }) - let _opentype = card.OpenType // 鎵撳紑鏂瑰紡 - // let _tabType = card.tabType || 'SubTable' // 鎸夐挳涓哄脊绐楋紙鏍囩锛夋椂锛屾爣绛剧殑绫诲瀷 - let _intertype = card.intertype || 'system' // 鎺ュ彛绫诲瀷 - let _procMode = card.procMode || 'system' // 鍙傛暟澶勭悊鏂瑰紡 - let _funcType = card.funcType || '' // 鍔熻兘鎸夐挳榛樿绫诲瀷 - let _pageTemplate = card.pageTemplate // 鏂伴〉闈㈢被鍨� - let _Ot = card.Ot || 'requiredSgl' - let control = card.control || '' + let { shows, reOptions, reTypes, reRequired, reReadonly } = this.getMutilOptions() - if (_opentype === 'outerpage') { - card.pageTemplate = 'custom' - _opentype = 'innerpage' - } - - let _tabs = this.props.tabs.filter(tab => tab.type === 'SubTable') - let _options = this.getOptions(_opentype, _intertype, _funcType, _pageTemplate, _procMode, _Ot, control) - this.setState({ - control: control, - Ot: _Ot, - openType: _opentype, - pageTemplate: _pageTemplate, - interType: _intertype, - procMode: _procMode, - position: card.position || 'toolbar', - funcType: _funcType, formlist: this.props.formlist.map(item => { - if (item.key === 'class') { - item.options = btnClasses - } else if (item.key === 'innerFunc' && _procMode === 'inner') { - item.required = true - } else if (item.key === 'icon') { - item.options = btnIcons - } else if (item.key === 'intertype') { - let iscustom = ['pop', 'prompt', 'exec'].includes(_opentype) - item.options = this.state.interTypeOptions.filter(op => (iscustom || op.value !== 'custom')) - } else if (item.key === 'Ot') { - if (card.position === 'grid' || _pageTemplate === 'pay') { // 琛岀骇鎸夐挳銆佹敮浠樻寜閽紝鍙兘閫夊崟琛� - item.options = this.state.requireOptions.filter(op => ['requiredSgl'].includes(op.value)) - } else if (_opentype === 'innerpage' && _pageTemplate === 'billprint') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value)) - } else if (['innerpage', 'tab', 'popview', 'excelIn'].includes(_opentype)) { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - } else if (card.sqlType === 'insert') { - item.options = this.state.requireOptions.filter(op => ['notRequired'].includes(op.value)) - } else { - item.options = this.state.requireOptions - } - } else if (item.key === 'sqlType') { - if (['prompt', 'exec'].includes(_opentype)) { - item.options = this.state.deleteOptions - } else { - item.options = this.state.insertUpdateOptions - } - } else if (item.key === 'linkTab') { - item.options = [ - { - value: '', - text: '鏂板缓' - }, - ..._tabs - ] - } else if (item.key === 'OpenType') { - item.initVal = _opentype + item.hidden = !shows.includes(item.key) + item.initVal = this.record[item.key] + + if (reOptions[item.key]) { + item.options = reOptions[item.key] + } + if (reTypes[item.key]) { + item.type = reTypes[item.key] + } + if (reRequired[item.key] !== undefined) { + item.required = reRequired[item.key] + } + if (reReadonly[item.key] !== undefined) { + item.readonly = reReadonly[item.key] } - item.hidden = !_options.includes(item.key) return item }) }) @@ -178,325 +128,344 @@ } } - getOptions = (_opentype, _intertype, _funcType, _pageTemplate, _procMode, _Ot, _control) => { - let _options = fromJS(actionTypeOptions[_opentype]).toJS() // 閫夐」鍒楄〃 - - if (_opentype === 'innerpage') { // 鏂伴〉闈紝鍙�夋ā鏉�(鑷畾涔夋椂锛屽彲濉叆澶栭儴閾炬帴) - if (_pageTemplate === 'custom') { - _options.push('url', 'joint') - } else if (_pageTemplate === 'billprint') { - _options.push('printTemp') + getMutilOptions = () => { + const { requireOptions } = this.state + + let openType = this.record.OpenType + let Ot = this.record.Ot + let shows = fromJS(actionTypeOptions[openType] || []).toJS() + let reOptions = {} + let reTypes = {} + let reRequired = {} + let reReadonly = {} + + if (openType === 'pop' || openType === 'prompt' || openType === 'exec') { + let intertype = this.record.intertype + + reOptions.intertype = this.state.interTypeOptions + + if (intertype === 'custom') { + shows.push('procMode', 'interface', 'callbackType', 'cbTable', 'proInterface', 'method', 'cross') + if (this.record.procMode === 'system') { + shows.push('sql', 'sqlType') + } else { + reRequired.innerFunc = true + shows.push('innerFunc') + } + reReadonly.interface = false + reRequired.interface = true + } else if (intertype === 'outer') { + shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc', 'output') + reRequired.innerFunc = false + + if (this.record.sysInterface === 'false') { + reReadonly.interface = false + reRequired.interface = true + } else { + reReadonly.interface = true + reRequired.interface = false + } + } else if (intertype === 'inner') { + shows.push('innerFunc', 'output') + reRequired.innerFunc = true + } else { + shows.push('sql', 'sqlType', 'output') } - } else if (_opentype === 'tab') { // 鏍囩椤� - if (this.props.card.tabTemplate !== 'FormTab') { - _options.push('linkmenu') + + if (this.record.sqlType === 'insert') { + reOptions.Ot = requireOptions.filter(op => op.value === 'notRequired') + } else { + reOptions.Ot = requireOptions } - } else if (_opentype === 'excelOut') { // 瀵煎叆瀵煎嚭 - if (_intertype === 'outer') { - _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc') - } else if (_intertype === 'inner') { - _options.push('innerFunc') + + if (openType === 'prompt' || openType === 'exec') { + reOptions.sqlType = this.state.deleteOptions + } else { + reOptions.sqlType = this.state.insertUpdateOptions } - } else if (_opentype === 'excelIn') { // 瀵煎叆瀵煎嚭 - if (_intertype === 'outer') { - _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') - } else if (_intertype === 'inner') { - _options.push('innerFunc') + } else if (openType === 'excelIn') { + reOptions.intertype = this.state.interTypeOptions.filter(op => op.value !== 'custom') + reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) + + if (this.record.intertype === 'outer') { + shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') + reRequired.innerFunc = false + + if (this.record.sysInterface === 'false') { + reReadonly.interface = false + reRequired.interface = true + } else { + reReadonly.interface = true + reRequired.interface = false + } + } else if (this.record.intertype === 'inner') { + shows.push('innerFunc') + reRequired.innerFunc = true } - } else if (_opentype === 'funcbutton') { + } else if (openType === 'excelOut') { + reOptions.intertype = this.state.interTypeOptions.filter(op => op.value !== 'custom') + + if (this.record.intertype === 'outer') { + shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc') + reRequired.innerFunc = false + + if (this.record.sysInterface === 'false') { + reReadonly.interface = false + reRequired.interface = true + } else { + reReadonly.interface = true + reRequired.interface = false + } + } else if (this.record.intertype === 'inner') { + shows.push('innerFunc') + reRequired.innerFunc = true + } + } else if (openType === 'popview') { + reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) + + if (this.record.display === 'drawer') { + shows.push('placement') + } + } else if (openType === 'tab') { + reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) + + reRequired.linkmenu = true + } else if (openType === 'innerpage') { + reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) + + if (this.record.pageTemplate === 'custom') { + shows.push('url', 'joint') + } else if (this.record.pageTemplate === 'billprint') { + shows.push('printTemp') + reOptions.Ot = requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value)) + } else if (this.record.pageTemplate === 'pay' || this.record.pageTemplate === 'print' || this.record.pageTemplate === 'billprintTemp') { + reOptions.Ot = requireOptions.filter(op => op.value === 'requiredSgl') + } + } else if (openType === 'funcbutton') { + reOptions.intertype = this.state.interTypeOptions.filter(op => op.value !== 'custom') + reOptions.Ot = requireOptions + + let _funcType = this.record.funcType + if (_funcType === 'print') { - _options.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError') - if (_intertype === 'outer') { - _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') - } else if (_intertype === 'inner') { - _options.push('innerFunc') + shows.push('execMode', 'intertype', 'Ot', 'execSuccess', 'execError', 'resetPageIndex') + if (this.record.intertype === 'outer') { + shows.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') + reRequired.innerFunc = false + + if (this.record.sysInterface === 'false') { + reReadonly.interface = false + reRequired.interface = true + } else { + reReadonly.interface = true + reRequired.interface = false + } + } else if (this.record.intertype === 'inner') { + shows.push('innerFunc') + reRequired.innerFunc = true } } else if (_funcType === 'closetab') { - _options.push('refreshTab') - } - } else if (_opentype !== 'popview') { // 鎵撳紑鏂瑰紡涓嶆槸寮圭獥椤甸潰鏃� - if (_intertype === 'custom') { - _options.push('procMode', 'interface', 'callbackType', 'cbTable', 'proInterface', 'method', 'cross') - if (_procMode === 'system') { - _options.push('sql', 'sqlType') - } else { - _options.push('innerFunc') - } - } else if (_intertype === 'outer') { - _options.push('innerFunc', 'sysInterface', 'interface', 'proInterface', 'outerFunc', 'callbackFunc') - } else if (_intertype === 'inner') { - _options.push('innerFunc', 'preFunc') - } else { - _options.push('sql', 'sqlType') + shows.push('refreshTab') } } - if (_options.includes('execSuccess') || _options.includes('popClose')) { - _options.push('resetPageIndex') + if (this.record.position === 'grid') { // 琛ㄦ牸涓寜閽彧鑳介�夊崟琛� + reOptions.Ot = requireOptions.filter(op => op.value === 'requiredSgl') + } + + if (Ot !== 'notRequired') { + reOptions.control = [ + { value: '', text: '鏃�' }, + { value: 'disabled', text: '绂佺敤' }, + { value: 'hidden', text: '闅愯棌' }, + { value: 'parent', text: '涓婄骇' } + ] + } else { + reOptions.control = [ + { value: '', text: '鏃�' }, + { value: 'parent', text: '涓婄骇' } + ] + } + shows.push('control') + if (this.record.control === 'parent') { + reTypes.controlField = 'text' + } else { + reTypes.controlField = 'select' + } + if (this.record.control) { + shows.push('controlField', 'controlVal') } - if (_Ot !== 'notRequired' && _opentype !== 'excelOut') { - _options.push('control') - if (_control) { - _options.push('controlField', 'controlVal') - } + return { + shows, + reOptions, + reTypes, + reRequired, + reReadonly } - - return _options } /** * @description 鍒囨崲 */ optionChange = (key, value) => { - const { openType, funcType, procMode, Ot, control } = this.state - const { card } = this.props + this.record[key] = value + let _fieldval = {} if (key === 'OpenType') { - let _options = this.getOptions(value, 'system', '', this.state.pageTemplate, 'system', Ot, control) - let _fieldval = {} - let _formlist = this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) + this.record.intertype = 'system' + this.record.procMode = 'system' + this.record.display = 'modal' + this.record.position = 'toolbar' + this.record.pageTemplate = '' + this.record.funcType = '' + this.record.sqlType = '' - if (item.key === 'intertype') { - let iscustom = ['pop', 'prompt', 'exec'].includes(value) - item.options = this.state.interTypeOptions.filter(op => (iscustom || op.value !== 'custom')) - } else if (item.key === 'control') { - item.initVal = control - } + if (value === 'pop' || value === 'prompt' || value === 'exec') { + _fieldval.intertype = 'system' + _fieldval.sqlType = '' + + } else if (value === 'excelIn') { + _fieldval.intertype = 'system' + _fieldval.Ot = 'notRequired' + + _fieldval.label = this.props.dict['model.form.excelIn'] + _fieldval.class = 'dgreen' + this.record.Ot = 'notRequired' + this.record.label = this.props.dict['model.form.excelIn'] + this.record.class = 'dgreen' + + + } else if (value === 'excelOut') { + _fieldval.intertype = 'system' + _fieldval.label = this.props.dict['model.form.excelOut'] + _fieldval.class = 'dgreen' + this.record.Ot = 'notRequired' + this.record.label = this.props.dict['model.form.excelOut'] + this.record.class = 'dgreen' + + } else if (value === 'popview') { + _fieldval.display = 'modal' + _fieldval.Ot = 'requiredSgl' + _fieldval.popClose = 'grid' + this.record.display = 'modal' + this.record.Ot = 'requiredSgl' + this.record.popClose = 'grid' + + } else if (value === 'tab') { + _fieldval.Ot = 'requiredSgl' + this.record.Ot = 'requiredSgl' + + } else if (value === 'innerpage') { + _fieldval.Ot = 'requiredSgl' + this.record.Ot = 'requiredSgl' + + } + + if (value === 'excelIn') { + _fieldval.label = this.props.dict['model.form.excelIn'] + _fieldval.class = 'border-dgreen' + } else if (value === 'excelOut') { + _fieldval.label = this.props.dict['model.form.excelOut'] + _fieldval.class = 'dgreen' + _fieldval.control = '' + this.record.control = '' + } - if (item.hidden) return item + if (_fieldval.Ot === 'notRequired') { + this.record.control = '' + _fieldval.control = '' + } - if (item.key === 'intertype') { - _fieldval.intertype = 'system' - } else if (item.key === 'Ot') { - if (this.state.position === 'grid' || this.state.pageTemplate === 'pay') { - item.options = this.state.requireOptions.filter(op => ['requiredSgl'].includes(op.value)) - _fieldval.Ot = 'requiredSgl' - } else if (value === 'innerpage' && this.state.pageTemplate === 'billprint') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value)) - _fieldval.Ot = 'requiredSgl' - } else if (['innerpage', 'tab', 'popview'].includes(value)) { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - _fieldval.Ot = 'requiredSgl' - } else if (value === 'excelIn') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - _fieldval.Ot = 'notRequired' - } else { - item.options = this.state.requireOptions - } - } else if (item.key === 'sqlType') { - if (['prompt', 'exec'].includes(value)) { - item.options = this.state.deleteOptions - } else { - item.options = this.state.insertUpdateOptions - } - _fieldval.sqlType = '' - } - - return item - }) - - this.setState({ - openType: value, - funcType: '', - intertype: 'system', - procMode: 'system', - formlist: _formlist - }, () => { - if (value === 'excelIn') { - _fieldval.label = this.props.dict['model.form.excelIn'] - _fieldval.class = 'border-dgreen' - } else if (value === 'excelOut') { - _fieldval.label = this.props.dict['model.form.excelOut'] - _fieldval.class = 'dgreen' - } - - this.props.form.setFieldsValue(_fieldval) - }) + if (!['funcbutton', 'excelIn', 'excelOut'].includes(value)) { + _fieldval.position = 'toolbar' + } } else if (key === 'position') { - let _fieldval = {} - - this.setState({ - position: value, - formlist: this.state.formlist.map(item => { - if (item.key === 'Ot') { - if (value === 'grid' || this.state.pageTemplate === 'pay') { - item.options = this.state.requireOptions.filter(op => ['requiredSgl'].includes(op.value)) - _fieldval.Ot = 'requiredSgl' - } else if (openType === 'innerpage' && this.state.pageTemplate === 'billprint') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value)) - _fieldval.Ot = 'requiredSgl' - } else if (['innerpage', 'tab', 'popview'].includes(openType)) { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - _fieldval.Ot = 'requiredSgl' - } else { - item.options = this.state.requireOptions - } - } - return item - }) - }, () => { - this.props.form.setFieldsValue(_fieldval) - }) + if (value === 'grid') { + _fieldval.Ot = 'requiredSgl' + this.record.Ot = 'requiredSgl' + } else if (['pop', 'prompt', 'exec'].includes(this.record.OpenType) && this.record.sqlType === 'insert') { + _fieldval.Ot = 'notRequired' + this.record.Ot = 'notRequired' + } } else if (key === 'funcType') { - let _options = this.getOptions('funcbutton', this.state.interType, value, card.pageTemplate, procMode, Ot, control) - let _fieldval = {} - if (value === 'print') { _fieldval.label = '鎵撳嵃' } else if (value === 'closetab') { _fieldval.label = '鍏抽棴' } - - this.setState({ - funcType: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - - if (item.hidden) return item - - if (item.key === 'intertype') { - _fieldval.intertype = this.state.interType - } else if (item.key === 'Ot' && value === 'print') { - item.options = this.state.requireOptions - } - - return item - }) - }, () => { - this.props.form.setFieldsValue(_fieldval) - }) } else if (key === 'sqlType') { - let _fieldval = {} - this.setState({ - formlist: this.state.formlist.map(item => { - if (item.key === 'Ot' && value === 'insert') { - item.options = this.state.requireOptions.filter(op => ['notRequired'].includes(op.value)) - } else if (item.key === 'Ot') { - item.options = this.state.requireOptions - } - return item - }) - }, () => { - if (value === 'insert') { - _fieldval.label = '娣诲姞' - _fieldval.class = 'green' - _fieldval.Ot = 'notRequired' - } else if (value === 'update') { - _fieldval.label = '淇敼' - _fieldval.class = 'purple' - _fieldval.Ot = 'requiredSgl' - } else if (value === 'audit') { - _fieldval.label = '瀹℃牳' - _fieldval.class = 'primary' - _fieldval.Ot = 'requiredSgl' - } else if (value === 'LogicDelete' || value === 'delete') { - _fieldval.label = '鍒犻櫎' - _fieldval.class = 'danger' - _fieldval.Ot = 'required' - } + if (value === 'insert') { + _fieldval.label = '娣诲姞' + _fieldval.Ot = 'notRequired' + _fieldval.class = 'green' + } else if (value === 'update') { + _fieldval.label = '淇敼' + _fieldval.Ot = 'requiredSgl' + _fieldval.class = 'purple' + } else if (value === 'audit') { + _fieldval.label = '瀹℃牳' + _fieldval.Ot = 'requiredSgl' + _fieldval.class = 'primary' + } else if (value === 'LogicDelete' || value === 'delete') { + _fieldval.label = '鍒犻櫎' + _fieldval.Ot = 'requiredSgl' + _fieldval.class = 'danger' + } - this.props.form.setFieldsValue(_fieldval) - }) + if (this.record.position === 'grid') { + _fieldval.Ot = 'requiredSgl' + } + + this.record.label = _fieldval.label + this.record.Ot = _fieldval.Ot + this.record.class = _fieldval.class || '' + + if (_fieldval.Ot === 'notRequired') { + this.record.control = '' + _fieldval.control = '' + } + } else if (key === 'pageTemplate') { - let _options = this.getOptions('innerpage', this.state.interType, this.state.funcType, value, procMode, Ot, control) - let _fieldval = {} - - this.setState({ - pageTemplate: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - - if (item.key === 'Ot') { - if (value === 'pay') { - item.options = this.state.requireOptions.filter(op => ['requiredSgl'].includes(op.value)) - _fieldval.Ot = 'requiredSgl' - } else if (value === 'billprint') { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl', 'required'].includes(op.value)) - _fieldval.Ot = 'requiredSgl' - } else { - item.options = this.state.requireOptions.filter(op => ['notRequired', 'requiredSgl'].includes(op.value)) - } - } - - return item - }) - }, () => { - this.props.form.setFieldsValue(_fieldval) - }) + if (value === 'pay') { + _fieldval.Ot = 'requiredSgl' + } else if (value === 'billprint') { + _fieldval.Ot = 'requiredSgl' + } } else if (key === 'intertype') { - let _options = this.getOptions(openType, value, funcType, '', procMode, Ot, control) - - this.setState({ - interType: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - - if (item.key === 'innerFunc') { - item.required = value === 'inner' - } else if (item.key === 'interface') { - item.readonly = false - } else if (item.key === 'sysInterface') { - item.initVal = 'false' - } else if (item.key === 'Ot') { - item.options = this.state.requireOptions - } - return item - }) - }) - } else if (key === 'procMode') { - let _options = this.getOptions(openType, this.state.interType, funcType, '', value, Ot, control) - - this.setState({ - procMode: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - - if (item.key === 'innerFunc') { - item.required = true - } - return item - }) - }) - } else if (key === 'Ot') { - let _options = this.getOptions(openType, this.state.interType, funcType, this.state.pageTemplate, procMode, value, control) - - this.setState({ - Ot: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - return item - }) - }) - } else if (key === 'control') { - let _options = this.getOptions(openType, this.state.interType, funcType, this.state.pageTemplate, procMode, Ot, value) - - this.setState({ - control: value, - formlist: this.state.formlist.map(item => { - item.hidden = !_options.includes(item.key) - return item - }) - }) + this.record.sysInterface = 'false' } else if (key === 'sysInterface') { if (value === 'true') { - this.props.form.setFieldsValue({ - interface: window.GLOB.mainSystemApi || '' - }) + _fieldval.interface = window.GLOB.mainSystemApi || '' + this.record.interface = window.GLOB.mainSystemApi || '' } - this.setState({ - formlist: this.state.formlist.map(item => { - if (item.key === 'interface' && value === 'true') { - item.readonly = true - } else if (item.key === 'interface') { - item.readonly = false - } - - return item - }) - }) } + + let { shows, reOptions, reTypes, reRequired, reReadonly } = this.getMutilOptions() + + this.setState({ + formlist: this.state.formlist.map(item => { + item.hidden = !shows.includes(item.key) + item.initVal = this.record[item.key] + + if (reOptions[item.key]) { + item.options = reOptions[item.key] + } + if (reTypes[item.key]) { + item.type = reTypes[item.key] + } + if (reRequired[item.key] !== undefined) { + item.required = reRequired[item.key] + } + if (reReadonly[item.key] !== undefined) { + item.readonly = reReadonly[item.key] + } + + return item + }) + }, () => { + this.props.form.setFieldsValue(_fieldval) + }) } handleSubmit = (e) => { @@ -508,186 +477,111 @@ } getFields() { + const { dict } = this.props const { getFieldDecorator } = this.props.form const fields = [] this.state.formlist.forEach((item, index) => { if (item.hidden) return - if (item.type === 'text') { // 鏂囨湰鎼滅储 - let _rules = [] - if (item.key === 'innerFunc' || item.key === 'preFunc') { + let span = 12 + let rules = [] + let className = '' + let content = null + let initVal = item.initVal || '' + + if (item.type === 'text') { + rules = [ + { required: item.required, message: dict['form.required.input'] + item.label + '!' } + ] + + if (item.key === 'innerFunc') { let str = '^(' + item.fields.join('|') + ')' let _patten = new RegExp(str + formRule.func.innerPattern + '$', 'g') - _rules = [{ - pattern: _patten, - message: formRule.func.innerMessage - }, { - max: formRule.func.max, - message: formRule.func.maxMessage - }] + rules.push( + { pattern: _patten, message: formRule.func.innerMessage }, + { max: formRule.func.max, message: formRule.func.maxMessage } + ) } else if (item.key === 'outerFunc' || item.key === 'callbackFunc') { - _rules = [{ - pattern: formRule.func.pattern, - message: formRule.func.message - }, { - max: formRule.func.max, - message: formRule.func.maxMessage - }] + rules.push( + { pattern: formRule.func.pattern, message: formRule.func.message }, + { max: formRule.func.max, message: formRule.func.maxMessage } + ) } else { - _rules = [{ - max: formRule.input.max, - message: formRule.input.message - }] + rules.push({ max: formRule.input.max, message: formRule.input.message }) } - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal || '', - rules: [ - { - required: item.readonly ? false : !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - }, - ..._rules - ] - })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)} - </Form.Item> - </Col> - ) + + content = <Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} /> } else if (item.type === 'number') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: item.readonly ? false : !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - } - ] - })(<InputNumber min={0} max={10000} precision={0} onPressEnter={this.handleSubmit}/>)} - </Form.Item> - </Col> - ) - } else if (item.type === 'select') { // 涓嬫媺鎼滅储 - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal || '', - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Select - showSearch - filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0} - onChange={(value) => {this.optionChange(item.key, value)}} - allowClear={item.key === 'icon'} - getPopupContainer={() => document.getElementById('winter')} - > - {item.options.map((option, index) => - <Select.Option id={`${index}`} title={option.text} key={`${index}`} value={option.value || option.field}> - {item.key === 'icon' && option.value ? <Icon type={option.value} /> : null} {option.text || option.label} - </Select.Option> - )} - </Select> - )} - </Form.Item> - </Col> - ) + rules = [ + { required: item.required, message: dict['form.required.input'] + item.label + '!' } + ] + + content = <InputNumber min={item.min} max={item.max} precision={item.precision} /> + } else if (item.type === 'select') { + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <Select + showSearch + allowClear={item.allowClear === true} + filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} + onChange={(value) => {this.optionChange(item.key, value)}} + getPopupContainer={() => document.getElementById('winter')} + > + {item.options.map((option, index) => + <Select.Option key={index} value={(option.value || option.field || '')}> + {(option.text || option.label)} + </Select.Option> + )} + </Select> } else if (item.type === 'radio') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Radio.Group onChange={(e) => {this.optionChange(item.key, e.target.value)}} disabled={item.readonly}> - { - item.options.map(option => { - return ( - <Radio key={option.value} value={option.value}>{option.text}</Radio> - ) - }) - } - </Radio.Group> - )} - </Form.Item> - </Col> - ) + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <Radio.Group onChange={(e) => {this.optionChange(item.key, e.target.value)}}> + {item.options.map(option => <Radio key={option.value} value={option.value}>{option.text}</Radio>)} + </Radio.Group> + } else if (item.type === 'cascader') { + initVal = item.initVal || [] + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <Cascader options={item.options || []} expandTrigger="hover" placeholder=""/> + } else if (item.type === 'icon') { + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <MkEditIcon options={['edit', 'hint', 'direction', 'normal', 'data']} allowClear/> } else if (item.type === 'textarea') { - fields.push( - <Col span={24} key={index}> - <Form.Item label={item.label} className="textarea"> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: item.readonly ? false : !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - } - ] - })(<TextArea rows={2} readOnly={item.readonly} />)} - </Form.Item> - </Col> - ) - } else if (item.type === 'cascader') { // 澶氶�� - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal || [], - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Cascader allowClear options={item.options || []} placeholder="" /> - )} - </Form.Item> - </Col> - ) + span = 24 + className = 'textarea' + rules = [ + { required: item.readonly ? false : item.required, message: dict['form.required.input'] + item.label + '!' } + ] + + content = <TextArea rows={2} readOnly={item.readonly}/> } + + fields.push( + <Col span={span} key={index}> + <Form.Item className={className} label={item.tooltip ? + <Tooltip placement="topLeft" title={item.tooltip}> + <QuestionCircleOutlined className="mk-form-tip" /> + {item.label} + </Tooltip> : item.label + }> + {getFieldDecorator(item.key, { + initialValue: initVal, + rules: rules + })(content)} + </Form.Item> + </Col> + ) }) return fields } @@ -700,10 +594,9 @@ if (!err) { values.uuid = card.uuid values.verify = card.verify || null + values.position = values.position || 'toolbar' - if (values.OpenType === 'excelIn') { - values.position = 'toolbar' - } else if (values.OpenType === 'excelOut') { + if (values.OpenType === 'excelOut') { if (values.intertype === 'system' && setting.interType !== 'system') { // 瀵煎嚭excel闇�浣跨敤鏌ヨ鏁版嵁婧� notification.warning({ top: 92, @@ -713,12 +606,9 @@ return } - values.position = 'toolbar' values.Ot = 'notRequired' } else if (values.OpenType === 'popview' && !values.linkTab) { // 娌℃湁鍏宠仈鏍囩锛堟柊寤烘椂锛夛紝鍒涘缓鏂版爣绛綢d values.linkTab = Utils.getuuid() - } else if (values.OpenType === 'funcbutton') { // 杞崲鎵撳嵃鏃舵墦寮�鏂瑰紡 - values.position = 'toolbar' } else if (['pop', 'prompt', 'exec'].includes(values.OpenType) && values.verify) { if ((values.Ot === 'requiredOnce' || card.Ot === 'requiredOnce') && card.Ot !== values.Ot) { values.verify.uniques = [] diff --git a/src/templates/sharecomponent/actioncomponent/dragaction/card.jsx b/src/templates/sharecomponent/actioncomponent/dragaction/card.jsx index 6fde75c..d1d61c5 100644 --- a/src/templates/sharecomponent/actioncomponent/dragaction/card.jsx +++ b/src/templates/sharecomponent/actioncomponent/dragaction/card.jsx @@ -1,6 +1,7 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Button, Popover } from 'antd' +import { Button, Popover } from 'antd' +import { EditOutlined, CopyOutlined, ProfileOutlined, CloseOutlined, TableOutlined, DisconnectOutlined } from '@ant-design/icons' import './index.scss' const Card = ({ id, card, moveCard, findCard, editCard, delCard, copyCard, profileCard, doubleClickCard }) => { @@ -46,10 +47,10 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="edit" type="edit" onClick={() => editCard(id)} /> - <Icon className="copy" title="copy" type="copy" onClick={() => copyCard(id)} /> - <Icon className="close" title="close" type="close" onClick={() => delCard(id)} /> - {hasProfile ? <Icon className="profile" title="setting" type="profile" onClick={() => profileCard(id)} /> : null} + <EditOutlined className="edit" onClick={() => editCard(id)} /> + <CopyOutlined className="copy" onClick={() => copyCard(id)} /> + <CloseOutlined className="close" onClick={() => delCard(id)} /> + {hasProfile ? <ProfileOutlined className="profile" onClick={() => profileCard(id)} /> : null} </div> } trigger="hover"> <div className="page-card" style={{ opacity: opacity}}> @@ -60,7 +61,7 @@ key={card.uuid} onDoubleClick={() => doubleClickCard(id)} > - {card.label}{card.position === 'grid' && <Icon type="table" />}{forbidSql && <Icon type="disconnect" />} + {card.label}{card.position === 'grid' && <TableOutlined />}{forbidSql && <DisconnectOutlined />} </Button> </div> </div> diff --git a/src/templates/sharecomponent/actioncomponent/dragaction/index.jsx b/src/templates/sharecomponent/actioncomponent/dragaction/index.jsx index c956d28..ff79592 100644 --- a/src/templates/sharecomponent/actioncomponent/dragaction/index.jsx +++ b/src/templates/sharecomponent/actioncomponent/dragaction/index.jsx @@ -6,7 +6,7 @@ import Card from './card' import './index.scss' -const Container = ({list, setting, placeholder, handleList, handleMenu, deleteMenu, profileMenu, doubleClickCard }) => { +const Container = ({list, setting, handleList, handleMenu, deleteMenu, profileMenu, doubleClickCard }) => { const [cards, setCards] = useState(list) const moveCard = (id, atIndex) => { const { card, index } = findCard(id) @@ -162,7 +162,7 @@ {cards.length === 0 ? <div className="common-drawarea-placeholder"> - {placeholder} + 璇锋坊鍔犳寜閽� </div> : null } </div> diff --git a/src/templates/sharecomponent/actioncomponent/index.jsx b/src/templates/sharecomponent/actioncomponent/index.jsx index 635027e..b1ff516 100644 --- a/src/templates/sharecomponent/actioncomponent/index.jsx +++ b/src/templates/sharecomponent/actioncomponent/index.jsx @@ -185,7 +185,7 @@ this.setState({ visible: true, card: card, - formlist: getActionForm(card, this.props.config, usefulFields, this.props.type, menulist, this.state.printTemps) + formlist: getActionForm(card, this.props.config, usefulFields, this.props.type, menulist, this.state.printTemps, this.props.tabs) }) } @@ -864,7 +864,7 @@ return ( <div className="model-table-action-list" style={config.charts.length > 1 ? {paddingTop: 25} : null}> - <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.action.guide']}> + <Tooltip placement="bottomLeft" overlayClassName="middle" title="鍦ㄥ乏渚у伐鍏锋爮銆婃寜閽�嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬寜閽嫋鑷虫澶勬坊鍔狅紝濡傞�夋嫨鎸夐挳绫诲瀷涓鸿〃鍗曘�佹柊鏍囩椤电瓑鍚湁閰嶇疆椤甸潰鐨勬寜閽紝鍙湪宸︿晶宸ュ叿鏍�-鎸夐挳-鍙厤缃寜閽锛岀偣鍑绘寜閽畬鎴愮浉鍏抽厤缃�傛敞锛氬綋璁剧疆鎸夐挳鏄剧ず浣嶇疆涓鸿〃鏍兼椂锛屾樉绀哄垪浼氬鍔犳搷浣滃垪銆�"> <QuestionCircleOutlined style={{color: '#c49f47', position: 'absolute', left: '5px', top: '5px'}} /> </Tooltip> <DragElement @@ -875,7 +875,6 @@ deleteMenu={this.deleteElement} profileMenu={this.profileAction} doubleClickCard={this.btnDoubleClick} - placeholder={dict['header.form.action.placeholder']} /> {/* 缂栬緫鎸夐挳锛氬鍒躲�佺紪杈� */} <Modal @@ -896,7 +895,6 @@ <ActionForm dict={dict} card={card} - tabs={this.props.tabs} formlist={this.state.formlist} inputSubmit={this.handleSubmit} setting={config.setting} diff --git a/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx b/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx index 1328845..c2bf0ab 100644 --- a/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx +++ b/src/templates/sharecomponent/actioncomponent/verifyexcelin/index.jsx @@ -1,8 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Tabs, Row, Col, Input, Button, Popconfirm, Icon, Tooltip, notification, Modal, message, InputNumber, Radio, Typography } from 'antd' -import { QuestionCircleOutlined, StopOutlined, CheckCircleOutlined } from '@ant-design/icons' +import { Form, Tabs, Row, Col, Input, Button, Popconfirm, Tooltip, notification, Modal, message, InputNumber, Radio, Typography } from 'antd' +import { EditOutlined, QuestionCircleOutlined, StopOutlined, CheckCircleOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -223,14 +223,14 @@ dataIndex: 'operation', render: (text, record) => (<div style={{textAlign: 'center'}}> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'scripts')} style={{color: '#1890ff'}}><Icon type="edit" /></span> - <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record, 'scripts')} style={{color: '#8E44AD'}}><Icon type="swap" /></span> + <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record, 'scripts')} style={{color: '#1890ff'}}><EditOutlined /></span> + <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record, 'scripts')} style={{color: '#8E44AD'}}><SwapOutlined /></span> <Popconfirm overlayClassName="popover-confirm" title={this.props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record, 'scripts') }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> + <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> </Popconfirm> </div>) } @@ -246,6 +246,8 @@ _columns = _columns.map(col => { col.required = col.required || 'true' col.type = col.type || 'Nvarchar(50)' + col.import = col.import || 'true' + col.required = col.required || 'true' if (/^Nvarchar/ig.test(col.type)) { col.limit = col.type.match(/\d+/)[0] diff --git a/src/templates/sharecomponent/actioncomponent/verifyexcelout/columnform/index.jsx b/src/templates/sharecomponent/actioncomponent/verifyexcelout/columnform/index.jsx index d050d57..bb1de82 100644 --- a/src/templates/sharecomponent/actioncomponent/verifyexcelout/columnform/index.jsx +++ b/src/templates/sharecomponent/actioncomponent/verifyexcelout/columnform/index.jsx @@ -84,7 +84,7 @@ {getFieldDecorator('type', { initialValue: 'text' })( - <Radio.Group> + <Radio.Group style={{whiteSpace: 'nowrap'}}> <Radio value="text">鏂囨湰</Radio> <Radio value="image">鍥剧墖</Radio> </Radio.Group> diff --git a/src/templates/sharecomponent/actioncomponent/verifyprint/editable/index.jsx b/src/templates/sharecomponent/actioncomponent/verifyprint/editable/index.jsx index 54b7ec4..bf99d3c 100644 --- a/src/templates/sharecomponent/actioncomponent/verifyprint/editable/index.jsx +++ b/src/templates/sharecomponent/actioncomponent/verifyprint/editable/index.jsx @@ -1,5 +1,6 @@ import React, {Component} from 'react' -import { Table, Input, Popconfirm, Form, Icon } from 'antd' +import { Table, Input, Popconfirm, Form } from 'antd' +import { ArrowUpOutlined, ArrowDownOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import './index.scss' @@ -114,14 +115,13 @@ render: (text, record) => this.state.dataSource.length >= 1 ? ( <div> - <span className="operation-btn" title={props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span> - <span className="operation-btn" title={props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><ArrowUpOutlined /></span> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><ArrowDownOutlined /></span> <Popconfirm overlayClassName="popover-confirm" - title={props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record.key) }> - <span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span> + <span style={{color: '#1890ff', cursor: 'pointer'}}><DeleteOutlined /></span> </Popconfirm> </div> ) : null, @@ -221,7 +221,7 @@ }) return ( <div className="print-verify-edit-table"> - <Icon className="add-row" type="plus" onClick={this.handleAdd} /> + <PlusOutlined className="add-row" onClick={this.handleAdd} /> <Table components={components} rowClassName={() => 'editable-row'} diff --git a/src/templates/sharecomponent/actioncomponent/verifyprint/index.jsx b/src/templates/sharecomponent/actioncomponent/verifyprint/index.jsx index 7b796c3..5f7e68e 100644 --- a/src/templates/sharecomponent/actioncomponent/verifyprint/index.jsx +++ b/src/templates/sharecomponent/actioncomponent/verifyprint/index.jsx @@ -353,7 +353,7 @@ </Form.Item> </Col> <Col span={24}> - <EditTable data={verify.printerTypeList} dict={this.props.dict} ref="editTable"/> + <EditTable data={verify.printerTypeList} ref="editTable"/> </Col> </Row> </Form> diff --git a/src/templates/sharecomponent/cardcomponent/dragdetail/card.jsx b/src/templates/sharecomponent/cardcomponent/dragdetail/card.jsx index db22571..0cd8dbc 100644 --- a/src/templates/sharecomponent/cardcomponent/dragdetail/card.jsx +++ b/src/templates/sharecomponent/cardcomponent/dragdetail/card.jsx @@ -1,6 +1,7 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { EditOutlined, CloseOutlined } from '@ant-design/icons' import './index.scss' const Card = ({ id, card, moveCard, findCard, editCard, delCard }) => { @@ -30,8 +31,8 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="缂栬緫" type="edit" onClick={() => editCard(card)} /> - <Icon className="edit close" title="鍒犻櫎" type="close" onClick={() => delCard(card)} /> + <EditOutlined className="edit" title="缂栬緫" onClick={() => editCard(card)} /> + <CloseOutlined className="edit close" title="鍒犻櫎" onClick={() => delCard(card)} /> </div> } trigger="hover"> <div ref={node => drag(drop(node))} className={'mk-card-meta-item ' + card.align} style={{opacity: opacity, width: card.width + '%'}}> diff --git a/src/templates/sharecomponent/cardcomponent/index.jsx b/src/templates/sharecomponent/cardcomponent/index.jsx index f893b7c..00e2f78 100644 --- a/src/templates/sharecomponent/cardcomponent/index.jsx +++ b/src/templates/sharecomponent/cardcomponent/index.jsx @@ -1,13 +1,14 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal, Popover } from 'antd' +import { Modal, Popover } from 'antd' +import { EditOutlined, CloseOutlined, PlusOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' import { getCardDetailForm } from '@/templates/zshare/formconfig' - +import MkIcon from '@/components/mk-icon' import DragDetail from './dragdetail' import CardDetailForm from './carddetailform' import avatar from '@/assets/img/avatar.png' @@ -381,8 +382,8 @@ {card.subelement.includes('header') ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="Edit" type="edit" onClick={this.editHeader} /> - <Icon className="close" title="close" type="close" onClick={() => this.deleteElem('header')} /> + <EditOutlined className="edit" onClick={this.editHeader} /> + <CloseOutlined className="close" onClick={() => this.deleteElem('header')} /> </div> } trigger="hover"> <div className="ant-card-head"> @@ -391,7 +392,7 @@ {card.header.actions && card.header.actions.length > 0 ? <div className="ant-card-extra"> <span> - {['icon', 'all'].includes(card.header.show) ? <Icon type={card.header.actions[0].icon || 'dash'}/> : null} + {['icon', 'all'].includes(card.header.show) ? <MkIcon type={card.header.actions[0].icon || 'dash'}/> : null} {['text', 'all'].includes(card.header.show) ? card.header.actions[0].text : null} </span> </div> : null @@ -402,18 +403,18 @@ } <div className="ant-card-body"> <div className="ant-card-meta" style={metastyle}> - <Icon type="plus" onClick={() => this.editdetail()} /> + <PlusOutlined onClick={() => this.editdetail()} /> {card.subelement.includes('avatar') ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="Edit" type="edit" onClick={this.editAvatar} /> - <Icon className="close" title="close" type="close" onClick={() => this.deleteElem('avatar')} /> + <EditOutlined className="edit" onClick={this.editAvatar} /> + <CloseOutlined className="close" onClick={() => this.deleteElem('avatar')} /> </div> } trigger="hover"> <div className="ant-card-meta-avatar" style={card.avatar.type === 'icon' ? {width: card.avatar.width, paddingTop: card.avatar.width} : {width: card.avatar.width + '%', paddingTop: card.avatar.width + '%'}}> <span className="ant-avatar ant-avatar-circle ant-avatar-image" style={{borderRadius: card.avatar.radius === 'true' ? '50%' : 0}}> {card.avatar.type === 'picture' ? <img src={avatar} alt=""/> : null} - {card.avatar.type === 'icon' ? <Icon className={'font ' + card.avatar.color} style={{fontSize: card.avatar.size + 'px'}} type={card.avatar.icon} /> : null} + {card.avatar.type === 'icon' ? <MkIcon className={'font ' + card.avatar.color} style={{fontSize: card.avatar.size + 'px'}} type={card.avatar.icon} /> : null} </span> </div> </Popover> : null @@ -431,14 +432,14 @@ {card.subelement.includes('bottom') ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="Edit" type="edit" onClick={this.editBottom} /> - <Icon className="close" title="close" type="close" onClick={() => this.deleteElem('bottom')} /> + <EditOutlined className="edit" onClick={this.editBottom} /> + <CloseOutlined className="close" onClick={() => this.deleteElem('bottom')} /> </div> } trigger="hover"> <ul className="ant-card-actions"> {card.bottom.actions.map((item, i) => (<li key={i} style={{width: _width}}> <span> - {['icon', 'all'].includes(card.bottom.show) ? <Icon type={item.icon || 'dash'}/> : null} + {['icon', 'all'].includes(card.bottom.show) ? <MkIcon type={item.icon || 'dash'}/> : null} {['text', 'all'].includes(card.bottom.show) ? item.text : null} </span> </li>))} @@ -448,7 +449,7 @@ </div> {card.extraAction ? <div className={'ant-card chart-card chart-card-insert ' + outclass} style={{ width: cardwidth, height: cardheight }} > - <Icon type="plus" style={cardwidth > cardheight ? {fontSize: cardheight / 2 + 'px', lineHeight: cardheight + 'px'} : {fontSize: cardwidth / 2 + 'px', lineHeight: cardheight + 'px'}} /> + <PlusOutlined style={cardwidth > cardheight ? {fontSize: cardheight / 2 + 'px', lineHeight: cardheight + 'px'} : {fontSize: cardwidth / 2 + 'px', lineHeight: cardheight + 'px'}} /> </div> : null } {/* 鏄剧ず鍒楃紪杈� */} diff --git a/src/templates/sharecomponent/cardcomponent/index.scss b/src/templates/sharecomponent/cardcomponent/index.scss index e457e80..4971023 100644 --- a/src/templates/sharecomponent/cardcomponent/index.scss +++ b/src/templates/sharecomponent/cardcomponent/index.scss @@ -19,7 +19,7 @@ } .ant-card-extra { color: #1890ff; - i { + .anticon { margin-right: 5px; } } @@ -30,7 +30,7 @@ } .chart-card-insert { text-align: center; - i { + .anticon { color: #1890ff; } } diff --git a/src/templates/sharecomponent/chartgroupcomponent/dragchartview/card.jsx b/src/templates/sharecomponent/chartgroupcomponent/dragchartview/card.jsx index 814950b..533197b 100644 --- a/src/templates/sharecomponent/chartgroupcomponent/dragchartview/card.jsx +++ b/src/templates/sharecomponent/chartgroupcomponent/dragchartview/card.jsx @@ -1,6 +1,9 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { EditOutlined, CloseOutlined } from '@ant-design/icons' + +import MkIcon from '@/components/mk-icon' import './index.scss' const Card = ({ id, card, moveCard, findCard, editCard, delCard }) => { @@ -38,13 +41,13 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="缂栬緫" type="edit" onClick={edit} /> - {card.chartType !== 'table' ? <Icon className="edit close" title="鍒犻櫎" type="close" onClick={del} /> : null} + <EditOutlined className="edit" title="缂栬緫" onClick={edit} /> + {card.chartType !== 'table' ? <CloseOutlined className="edit close" title="鍒犻櫎" onClick={del} /> : null} </div> } trigger="hover"> <div className="chart-tab" style={{ opacity: opacity}}> <div ref={node => drag(drop(node))}> - <Icon type={card.icon} /> + <MkIcon type={card.icon} /> </div> </div> </Popover> diff --git a/src/templates/sharecomponent/chartgroupcomponent/index.jsx b/src/templates/sharecomponent/chartgroupcomponent/index.jsx index 796264e..7dd78e8 100644 --- a/src/templates/sharecomponent/chartgroupcomponent/index.jsx +++ b/src/templates/sharecomponent/chartgroupcomponent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal } from 'antd' +import { Modal } from 'antd' +import { DownOutlined, UpOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import zhCN from '@/locales/zh-CN/model.js' @@ -259,8 +260,8 @@ return ( <div className="model-table-chartview-list"> - {/* <Icon type="plus" onClick={() => this.handleChart()} /> */} - {chartlist.length > 1 ? <Icon type={config.expand ? 'up' : 'down'} title="灞曞紑/鍚堝苟" onClick={this.onChartChange} /> : null} + {/* <PlusOutlined onClick={() => this.handleChart()} /> */} + {chartlist.length > 1 ? (config.expand ? <UpOutlined onClick={this.onChartChange} /> : <DownOutlined onClick={this.onChartChange} />) : null} {chartlist.length > 1 ? <DragChartView activeKey={chartview} list={chartlist} diff --git a/src/templates/sharecomponent/columncomponent/colspanform/index.jsx b/src/templates/sharecomponent/columncomponent/colspanform/index.jsx index 5a7f9b8..0c9be7e 100644 --- a/src/templates/sharecomponent/columncomponent/colspanform/index.jsx +++ b/src/templates/sharecomponent/columncomponent/colspanform/index.jsx @@ -179,22 +179,22 @@ </Form.Item> </Col> <Col span={12}> - <Form.Item label={this.props.dict['header.form.order']}> + <Form.Item label="鎺掑垪"> {getFieldDecorator('order', { initialValue: card.order, rules: [ { required: true, - message: this.props.dict['form.required.select'] + this.props.dict['header.form.order'] + '!' + message: this.props.dict['form.required.select'] + '鎺掑垪!' } ] })( <Select getPopupContainer={() => document.getElementById('columncolspan')} > - <Select.Option value="vertical">{this.props.dict['header.form.vertical']}</Select.Option> - <Select.Option value="horizontal">{this.props.dict['header.form.horizontal']}</Select.Option> - <Select.Option value="vertical2">{this.props.dict['header.form.vertical2']}</Select.Option> - <Select.Option value="topPicBottomText">{this.props.dict['header.form.topPicBottomText']}</Select.Option> - <Select.Option value="leftPicRightText">{this.props.dict['header.form.leftPicRightText']}</Select.Option> + <Select.Option value="vertical">绾靛悜</Select.Option> + <Select.Option value="horizontal">妯悜</Select.Option> + <Select.Option value="vertical2">绾靛悜(2鍒�)</Select.Option> + <Select.Option value="topPicBottomText">涓婂浘涓嬫枃</Select.Option> + <Select.Option value="leftPicRightText">宸﹀浘鍙虫枃</Select.Option> </Select> )} </Form.Item> diff --git a/src/templates/sharecomponent/columncomponent/dragcolumn/card.jsx b/src/templates/sharecomponent/columncomponent/dragcolumn/card.jsx index 308dfd4..91ff3d3 100644 --- a/src/templates/sharecomponent/columncomponent/dragcolumn/card.jsx +++ b/src/templates/sharecomponent/columncomponent/dragcolumn/card.jsx @@ -1,6 +1,7 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { EditOutlined, CloseOutlined, AntDesignOutlined, CaretUpOutlined, CaretDownOutlined, CloseCircleOutlined } from '@ant-design/icons' import './index.scss' const Card = ({ id, card, showfield, moveCard, findCard, editCard, delCard, markCard }) => { @@ -31,9 +32,9 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="edit" type="edit" onClick={() => editCard(id)} /> - <Icon className="close" title="delete" type="close" onClick={() => delCard(id)} /> - {['text', 'number'].includes(card.type) && !card.origin ? <Icon className="profile" title="mark" type="ant-design" onClick={() => markCard(id)} /> : null} + <EditOutlined className="edit" onClick={() => editCard(id)} /> + <CloseOutlined className="close" onClick={() => delCard(id)} /> + {['text', 'number'].includes(card.type) && !card.origin ? <AntDesignOutlined className="profile" title="鏍囪" onClick={() => markCard(id)} /> : null} </div> } trigger="hover"> <div className="page-card" style={{ flex: card.Width, opacity: opacity}}> @@ -43,15 +44,15 @@ <span className="ant-table-column-title">{card.label}</span> {card.IsSort === 'true' ? <span className="ant-table-column-sorter"> - <Icon type="caret-up" /> - <Icon type="caret-down" /> + <CaretUpOutlined /> + <CaretDownOutlined /> </span> : null } </div> {showfield ? <div className="ant-table-column-fields"> <span className="ant-table-column-title">{card.type === 'colspan' ? card.subfield : card.field}</span> - {card.Hide === 'true' ? <Icon style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}} type="close-circle" /> : null} + {card.Hide === 'true' ? <CloseCircleOutlined style={{marginLeft: '5px', color: 'orange', fontSize: '12px'}}/> : null} </div> : null } </span> diff --git a/src/templates/sharecomponent/columncomponent/dragcolumn/index.jsx b/src/templates/sharecomponent/columncomponent/dragcolumn/index.jsx index 1fa8a7c..c364c6d 100644 --- a/src/templates/sharecomponent/columncomponent/dragcolumn/index.jsx +++ b/src/templates/sharecomponent/columncomponent/dragcolumn/index.jsx @@ -2,12 +2,13 @@ import { useDrop } from 'react-dnd' import { is, fromJS } from 'immutable' import update from 'immutability-helper' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { EditOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import Card from './card' import './index.scss' -const Container = ({list, setting, gridBtn, showfield, placeholder, handleList, handleMenu, handleGridBtn, deleteMenu, markMenu }) => { +const Container = ({list, setting, gridBtn, showfield, handleList, handleMenu, handleGridBtn, deleteMenu, markMenu }) => { const [cards, setCards] = useState(list) const moveCard = (id, atIndex) => { const { card, index } = findCard(id) @@ -63,7 +64,7 @@ newcard.contrastType = 'static' newcard.IsSort = 'true' newcard.type = item.subType - newcard.Width = 120 + newcard.Width = item.subType === 'number' ? 80 : 120 if (item.subType === 'colspan') { newcard.sublist = [] newcard.subfield = [] @@ -146,7 +147,7 @@ {i === (columns.length - 1) && gridBtn && gridBtn.display ? <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" type="edit" onClick={handleGridBtn}/> + <EditOutlined className="edit" onClick={handleGridBtn}/> </div> } trigger="hover"> <div className="page-card" style={{flex: gridBtn.Width}}> @@ -165,7 +166,7 @@ {cards.length === 0 ? <div className="common-drawarea-placeholder"> - {placeholder} + 璇锋坊鍔犳樉绀哄垪 </div> : null } </div> diff --git a/src/templates/sharecomponent/columncomponent/gridbtnform/index.jsx b/src/templates/sharecomponent/columncomponent/gridbtnform/index.jsx index 17b5968..6d701af 100644 --- a/src/templates/sharecomponent/columncomponent/gridbtnform/index.jsx +++ b/src/templates/sharecomponent/columncomponent/gridbtnform/index.jsx @@ -44,35 +44,7 @@ label: this.props.dict['model.form.columnWidth'], initVal: this.props.card.Width, required: true - }, - // { - // type: 'select', - // key: 'style', - // label: this.props.dict['model.form.style'], - // initVal: this.props.card.style, - // required: true, - // options: [{ - // MenuID: 'button', - // text: this.props.dict['header.form.button'] - // }, { - // MenuID: 'text', - // text: this.props.dict['model.form.href'] - // }] - // }, - // { - // type: 'select', - // key: 'show', - // label: this.props.dict['header.form.order'], - // initVal: this.props.card.show, - // required: true, - // options: [{ - // MenuID: 'horizontal', - // text: this.props.dict['header.form.horizontal'] - // }, { - // MenuID: 'vertical', - // text: this.props.dict['header.form.vertical'] - // }] - // } + } ] } diff --git a/src/templates/sharecomponent/columncomponent/index.jsx b/src/templates/sharecomponent/columncomponent/index.jsx index ac3da97..2648a81 100644 --- a/src/templates/sharecomponent/columncomponent/index.jsx +++ b/src/templates/sharecomponent/columncomponent/index.jsx @@ -501,7 +501,7 @@ return ( <div className="model-table-column-list"> - <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.column.guide']}> + <Tooltip placement="bottomLeft" overlayClassName="middle" title="鍦ㄥ乏渚у伐鍏锋爮銆婃樉绀哄垪銆嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬樉绀哄垪鎷栬嚦姝ゅ娣诲姞锛涙垨鐐瑰嚮銆婃坊鍔犳樉绀哄垪銆嬫寜閽壒閲忔坊鍔狅紝閫夋嫨鎵归噺娣诲姞鏃讹紝闇�鎻愬墠閫夋嫨浣跨敤琛ㄣ�傛敞锛氭坊鍔犲悎骞跺垪鏃讹紝闇�璁剧疆鍙�夊垪銆�"> <QuestionCircleOutlined style={{color: '#c49f47', position: 'relative', left: '-15px', top: '5px'}} /> </Tooltip> {columnlist && columnlist.length > 0 ? @@ -518,11 +518,10 @@ markMenu={this.markElement} handleGridBtn={this.handleGridBtn} showfield={this.state.showField} - placeholder={this.state.dict['header.form.column.placeholder']} /> {/* 鏄剧ず鍒楃紪杈� */} <Modal - title={dict['header.modal.column.edit']} + title="鏄剧ず鍒�-缂栬緫" visible={modaltype === 'columns'} width={800} maskClosable={false} @@ -559,7 +558,7 @@ </Modal> {/* 鎿嶄綔鍒楃紪杈� */} <Modal - title={dict['header.modal.gridbtn.edit']} + title="鎿嶄綔鍒�-缂栬緫" visible={modaltype === 'gridbtn'} width={800} maskClosable={false} diff --git a/src/templates/sharecomponent/columncomponent/markcolumn/index.jsx b/src/templates/sharecomponent/columncomponent/markcolumn/index.jsx index f98be64..a7ab159 100644 --- a/src/templates/sharecomponent/columncomponent/markcolumn/index.jsx +++ b/src/templates/sharecomponent/columncomponent/markcolumn/index.jsx @@ -1,11 +1,12 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Table, Popconfirm, Icon } from 'antd' +import { Table, Popconfirm } from 'antd' +import { EditOutlined, DeleteOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' - import MarkForm from './markform' +import MkIcon from '@/components/mk-icon' import './index.scss' import '@/assets/css/table.scss' @@ -92,9 +93,9 @@ content = '鏁堟灉鍦ㄥ崱鐗囦腑鍙' } else if (record.signType === 'icon') { if (record.position === 'front') { - content = <div><Icon className={'font ' + record.color[1]} type={record.icon} /> {content} </div> + content = <div><MkIcon className={'font ' + record.color[1]} type={record.icon} /> {content} </div> } else { - content = <div> {content} <Icon className={'font ' + record.color[1]} type={record.icon} /> </div> + content = <div> {content} <MkIcon className={'font ' + record.color[1]} type={record.icon} /> </div> } } @@ -113,15 +114,14 @@ render: (text, record) => ( <div> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span> - <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span> - <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span> + <span className="operation-btn" onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><EditOutlined /></span> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><ArrowUpOutlined /></span> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><ArrowDownOutlined /></span> <Popconfirm overlayClassName="popover-confirm" - title={this.props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record) }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> + <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> </Popconfirm> </div> ) diff --git a/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx b/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx index 5785dd4..e98fb1e 100644 --- a/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx +++ b/src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx @@ -1,8 +1,9 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Select, Button, Input, Radio, Icon, Cascader } from 'antd' +import { Form, Row, Col, Select, Button, Input, Radio, Cascader } from 'antd' import { minkeColorSystem, minkeIconSystem } from '@/utils/option.js' +import MkIcon from '@/components/mk-icon' import './index.scss' class UniqueForm extends Component { @@ -53,7 +54,7 @@ selectIcon: record.icon || '', options: this.state.options.map(option => { option.children = option.children.map(cell => { - cell.label = <div className={_type + cell.value}>{record.icon ? <Icon type={record.icon} /> : cell.value}</div> + cell.label = <div className={_type + cell.value}>{record.icon ? <MkIcon type={record.icon} /> : cell.value}</div> return cell }) @@ -145,7 +146,7 @@ selectIcon: val, options: this.state.options.map(option => { option.children = option.children.map(cell => { - cell.label = <div className={'font ' + cell.value}><Icon type={val} /></div> + cell.label = <div className={'font ' + cell.value}><MkIcon type={val} /></div> return cell }) @@ -314,7 +315,6 @@ <Select.Option value="hint">鎻愮ず寤鸿鎬у浘鏍�</Select.Option> <Select.Option value="edit">缂栬緫绫诲浘鏍�</Select.Option> <Select.Option value="data">鏁版嵁绫诲浘鏍�</Select.Option> - <Select.Option value="trademark">鍝佺墝鍜屾爣璇�</Select.Option> <Select.Option value="normal">缃戠珯閫氱敤鍥炬爣</Select.Option> </Select> )} @@ -332,7 +332,7 @@ ] })( <Select onChange={this.changeIcon} getPopupContainer={() => document.getElementById('model-mark-form-box')}> - {icons.map(icon => <Select.Option key={icon} value={icon}><Icon type={icon} /></Select.Option>)} + {icons.map(icon => <Select.Option key={icon} value={icon}><MkIcon type={icon} /></Select.Option>)} </Select> )} </Form.Item> diff --git a/src/templates/sharecomponent/fieldscomponent/editcard/index.jsx b/src/templates/sharecomponent/fieldscomponent/editcard/index.jsx index c5d19f5..c6d82e3 100644 --- a/src/templates/sharecomponent/fieldscomponent/editcard/index.jsx +++ b/src/templates/sharecomponent/fieldscomponent/editcard/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import { is, fromJS } from 'immutable' -import { Row, Col, Icon, Radio, Input, Button } from 'antd' +import { Row, Col, Radio, Input, Button } from 'antd' +import { CheckOutlined } from '@ant-design/icons' import './index.scss' const { Search } = Input @@ -69,7 +70,7 @@ return ( <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '') + (card.origin ? ' fixed' : '')} > <div className="base" onClick={this.changeSelect}> - <Icon type="check" /> + <CheckOutlined /> <p title={card.field}>瀛楁锛� <span>{card.field}</span></p> <p title={card.label}>鍚嶇О锛� <span>{card.label}</span></p> </div> diff --git a/src/templates/sharecomponent/fieldscomponent/index.jsx b/src/templates/sharecomponent/fieldscomponent/index.jsx index c7630d7..26c4cf0 100644 --- a/src/templates/sharecomponent/fieldscomponent/index.jsx +++ b/src/templates/sharecomponent/fieldscomponent/index.jsx @@ -126,7 +126,6 @@ initval: initval, type: item.type, resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', match: _match, @@ -146,7 +145,7 @@ Hide: 'false', IsSort: item.type === 'picture' ? 'false' : 'true', type: item.type, - Width: 120 + Width: item.type === 'number' ? 80 : 120 } if (item.type === 'number') { @@ -189,7 +188,6 @@ initval: item.type === 'number' ? 0 : '', type: item.type, resourceType: '0', - setAll: 'false', span: span, labelwidth: 33.3, options: [], @@ -200,6 +198,27 @@ required: 'true' } + if (item.type === 'text' && item.length >= 256) { + newcard.type = 'textarea' + newcard.fieldlength = item.length + if (lastItem && lastItem.type === newcard.type) { + newcard.span = lastItem.span + newcard.labelwidth = lastItem.labelwidth + } else if (lastItem) { + newcard.span = 24 + if (lastItem.span === 12) { + newcard.labelwidth = 16.2 + } else if (lastItem.span === 8) { + newcard.labelwidth = 10.5 + } else if (lastItem.span === 8) { + newcard.labelwidth = 7.7 + } + } else { + newcard.span = 24 + newcard.labelwidth = 16.2 + } + } + items.push(newcard) keys.push(item.field.toLowerCase()) }) diff --git a/src/templates/sharecomponent/searchcomponent/dragsearch/card.jsx b/src/templates/sharecomponent/searchcomponent/dragsearch/card.jsx index b0c3855..e8f7af2 100644 --- a/src/templates/sharecomponent/searchcomponent/dragsearch/card.jsx +++ b/src/templates/sharecomponent/searchcomponent/dragsearch/card.jsx @@ -1,6 +1,7 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Select, DatePicker, Input, Popover, Form } from 'antd' +import { Select, DatePicker, Input, Popover, Form } from 'antd' +import { EditOutlined, CopyOutlined, CloseOutlined } from '@ant-design/icons' import moment from 'moment' import DateGroup from '../dategroup' @@ -97,9 +98,9 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" title="edit" type="edit" onClick={() => editCard(id)} /> - <Icon className="copy" title="copy" type="copy" onClick={() => copyCard(id)} /> - <Icon className="close" title="delete" type="close" onClick={() => delCard(id)} /> + <EditOutlined className="edit" onClick={() => editCard(id)} /> + <CopyOutlined className="copy" onClick={() => copyCard(id)} /> + <CloseOutlined className="close" onClick={() => delCard(id)} /> </div> } trigger="hover"> <div className={'page-card ' + (card.labelShow || '') + ' ' + type} style={{ opacity: opacity}}> diff --git a/src/templates/sharecomponent/searchcomponent/dragsearch/index.jsx b/src/templates/sharecomponent/searchcomponent/dragsearch/index.jsx index 4a4910c..504ef5f 100644 --- a/src/templates/sharecomponent/searchcomponent/dragsearch/index.jsx +++ b/src/templates/sharecomponent/searchcomponent/dragsearch/index.jsx @@ -7,7 +7,7 @@ import Card from './card' import './index.scss' -const Container = ({list, show, placeholder, showField, handleList, handleMenu, deleteMenu }) => { +const Container = ({list, show, showField, handleList, handleMenu, deleteMenu }) => { const [cards, setCards] = useState(list) const moveCard = (id, atIndex) => { const { card, index } = findCard(id) @@ -89,7 +89,6 @@ newcard.type = item.subType newcard.resourceType = '0' newcard.options = [] - newcard.setAll = 'false' newcard.orderType = 'asc' let _match = 'like' @@ -156,7 +155,7 @@ </Col> : null} {cards.length === 0 ? <div className="common-drawarea-placeholder"> - {placeholder} + 璇锋坊鍔犳悳绱㈡潯浠� </div> : null } </div> diff --git a/src/templates/sharecomponent/searchcomponent/index.jsx b/src/templates/sharecomponent/searchcomponent/index.jsx index 18643d9..4f45d34 100644 --- a/src/templates/sharecomponent/searchcomponent/index.jsx +++ b/src/templates/sharecomponent/searchcomponent/index.jsx @@ -342,7 +342,7 @@ return ( <div className={'model-table-search-list length' + searchlist.length}> - <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.search.guide']}> + <Tooltip placement="bottomLeft" overlayClassName="middle" title="鍦ㄥ乏渚у伐鍏锋爮銆婃悳绱€�嬩腑锛岄�夋嫨瀵瑰簲鎼滅储妗嗘嫋鑷虫澶勬坊鍔狅紱鎴栫偣鍑绘寜閽�婃坊鍔犳悳绱㈡潯浠躲�嬫壒閲忔坊鍔狅紝閫夋嫨鎵归噺娣诲姞鏃讹紝闇�鎻愬墠閫夋嫨浣跨敤琛ㄣ��"> <QuestionCircleOutlined style={{color: '#c49f47', position: 'relative', left: '-15px', top: '5px'}} /> </Tooltip> <FieldsComponent config={{uuid: config.uuid, search: searchlist}} type="search" /> @@ -354,7 +354,6 @@ handleList={this.handleList} handleMenu={this.handleSearch} deleteMenu={this.deleteElement} - placeholder={dict['header.form.search.placeholder']} /> {/* 缂栬緫鎼滅储鏉′欢 */} <Modal diff --git a/src/templates/sharecomponent/searchcomponent/searcheditable/index.jsx b/src/templates/sharecomponent/searchcomponent/searcheditable/index.jsx index eb43982..4851b90 100644 --- a/src/templates/sharecomponent/searchcomponent/searcheditable/index.jsx +++ b/src/templates/sharecomponent/searchcomponent/searcheditable/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import { is, fromJS } from 'immutable' -import { Table, Input, Popconfirm, Form, Icon } from 'antd' +import { Table, Input, Popconfirm, Form } from 'antd' +import { ArrowDownOutlined, PlusOutlined, ArrowUpOutlined, DeleteOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import './index.scss' @@ -113,14 +114,13 @@ render: (text, record) => this.state.dataSource.length >= 1 ? ( <div> - <span className="operation-btn" title={props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span> - <span className="operation-btn" title={props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><ArrowDownOutlined /></span> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><ArrowUpOutlined /></span> <Popconfirm overlayClassName="popover-confirm" - title={props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record.key) }> - <span style={{color: '#ff4d4f', cursor: 'pointer'}}><Icon type="delete" /></span> + <span style={{color: '#ff4d4f', cursor: 'pointer'}}><DeleteOutlined /></span> </Popconfirm> </div> ) : null, @@ -227,14 +227,13 @@ render: (text, record) => this.state.dataSource.length >= 1 ? ( <div> - <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span> - <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><ArrowUpOutlined /></span> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><ArrowDownOutlined /></span> <Popconfirm overlayClassName="popover-confirm" - title={this.props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record.key) }> - <span style={{color: '#1890ff', cursor: 'pointer'}}><Icon type="delete" /></span> + <span style={{color: '#1890ff', cursor: 'pointer'}}><DeleteOutlined /></span> </Popconfirm> </div> ) : null, @@ -292,7 +291,7 @@ }) return ( <div className="model-search-edit-table"> - <Icon className="add-row" type="plus" onClick={this.handleAdd} /> + <PlusOutlined className="add-row" onClick={this.handleAdd} /> <Table components={components} rowClassName={() => 'editable-row'} diff --git a/src/templates/sharecomponent/searchcomponent/searchform/index.jsx b/src/templates/sharecomponent/searchcomponent/searchform/index.jsx index db164c5..ced101f 100644 --- a/src/templates/sharecomponent/searchcomponent/searchform/index.jsx +++ b/src/templates/sharecomponent/searchcomponent/searchform/index.jsx @@ -1,11 +1,10 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Row, Col, Input, Select, Icon, Radio, notification, Tooltip, InputNumber, Checkbox, Cascader } from 'antd' +import { Form, Row, Col, Input, Select, Radio, notification, Tooltip, InputNumber, Checkbox, Cascader } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' import { dateOptions, matchReg, formRule } from '@/utils/option.js' -import EditTable from '../searcheditable' import Utils from '@/utils/utils.js' import CodeMirror from '@/templates/zshare/codemirror' import asyncComponent from '@/utils/asyncComponent' @@ -14,6 +13,7 @@ const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) const FieldsTable = asyncComponent(() => import('@/templates/zshare/modalform/fieldtable')) const DataTable = asyncComponent(() => import('@/templates/zshare/modalform/datatable')) +const EditTable = asyncComponent(() => import('@/templates/zshare/modalform/modaleditable')) const groupOptions = [ { @@ -26,8 +26,13 @@ {value: 3, label: '鍓嶄笁澶�'}, {value: 7, label: '鍓嶄竷澶�'}, {value: 30, label: '鍓�30澶�'}, - {value: -1, label: '鏄庡ぉ'}, - {value: -2, label: '鍚庡ぉ'} + {value: 90, text: '鍓�90澶�'}, + {value: -1, text: '鏄庡ぉ'}, + {value: -2, text: '鍚庡ぉ'}, + {value: -3, text: '鍚庝笁澶�'}, + {value: -7, text: '鍚庝竷澶�'}, + {value: -30, text: '鍚�30澶�'}, + {value: -90, text: '鍚�90澶�'}, ] }, { @@ -119,75 +124,37 @@ textTooltip: '瀛楁鍚嶅彲浠ヤ娇鐢ㄩ�楀彿鍒嗛殧锛岃繘琛岀患鍚堟悳绱�', } - /** - * @description 琛ㄥ崟棰勫鐞� - * 1銆佹牴鎹〃鍗曠被鍨嬶紝鏄剧ず琛ㄥ崟鍙紪杈戦」 - * 2銆佷笅鎷夐�夋嫨锛屾牴鎹暟鎹簮绫诲瀷鏄剧ず鐩稿叧閰嶇疆 - */ + record = {} + UNSAFE_componentWillMount () { - const { formlist, dict } = this.props - - let type = '' - let _items = [] - let resourceType = '' - let display = '' - let cFields = [] - let multiple = 'false' - - formlist.forEach(cell => { - if (cell.key === 'type') { - type = cell.initVal - } else if (cell.key === 'items') { - _items = cell.initVal - } else if (cell.key === 'display') { - display = cell.initVal - } else if (cell.key === 'resourceType') { - resourceType = cell.initVal - } else if (cell.key === 'fields') { - cFields = cell.initVal - } else if (cell.key === 'multiple') { - multiple = cell.initVal - } + this.props.formlist.forEach(item => { + this.record[item.key] = item.initVal }) - let _options = this.getOptions(type, resourceType, display) - + let { shows, reOptions, reTypes, reTooltip, reLabel, reRequired } = this.getMutilOptions() + this.setState({ - display, - cFields, - openType: type, - items: _items, - resourceType, - formlist: formlist.map(form => { - // 琛ㄥ崟涓哄垵濮嬪�煎瓧娈碉紝涓旀暟鎹被鍨嬪睘浜庢椂闂寸被鍨嬫椂锛岃缃垵濮嬪�间负涓嬫媺閫夋嫨锛屽苟閲嶇疆閫夋嫨椤� - if (form.key === 'initval' && dateOptions.hasOwnProperty(type)) { - form.options = dateOptions[type] - form.type = 'select' - } else if (form.key === 'initval' && type === 'group') { - form.options = groupOptions.filter(op => _items.includes(op.value)) - form.type = 'cascader' - } else if (form.key === 'match') { // 琛ㄥ崟涓哄尮閰嶅瓧娈垫椂锛屾牴鎹笉鍚岀殑绫诲瀷锛屾樉绀哄搴旂殑鍖归厤瑙勫垯 - if (type === 'text') { - form.options = matchReg.text - } else if (type === 'multiselect' || (type === 'checkcard' && multiple === 'true')) { - form.options = matchReg.multiselect - } else if (type === 'select' || type === 'link' || type === 'checkcard') { - form.options = matchReg.select - } else if (type === 'date') { - form.options = matchReg.date - } else if (type === 'datemonth') { - form.options = matchReg.datemonth - } else if (type === 'dateweek' || type === 'daterange' || type === 'range') { - form.options = matchReg.daterange - } - } else if (form.key === 'field' && (type === 'text' || type === 'select')) { - form.tooltip = this.state.textTooltip - } else if (form.key === 'field' && type === 'group') { - form.tooltip = '鏌ヨ鏁版嵁鏃讹紙鑷畾涔夎剼鏈垨缁熻鏁版嵁婧愶級锛岀被鍨嬪瓧娈靛皢鐢ㄤ綔鏇挎崲鑴氭湰涓殑 @瀛楁@ 锛岀被鍨嬪瓧娈靛搴斿�间负 {"鏃�": "day", "鍛�": "week", "鏈�": "month", "瀛�": "quarter", "骞�": "year", "鑷畾涔�": "customized"}銆�' - form.label = dict['model.form.type'] + dict['model.form.field'] + formlist: this.props.formlist.map(item => { + item.hidden = !shows.includes(item.key) + item.initVal = this.record[item.key] + + if (reOptions[item.key]) { + item.options = reOptions[item.key] } - form.hidden = !_options.includes(form.key) - return form + if (reTypes[item.key]) { + item.type = reTypes[item.key] + } + if (reTooltip[item.key] !== undefined) { + item.tooltip = reTooltip[item.key] + } + if (reLabel[item.key] !== undefined) { + item.label = reLabel[item.key] + } + if (reRequired[item.key] !== undefined) { + item.required = reRequired[item.key] + } + + return item }) }) } @@ -205,182 +172,209 @@ } } - getOptions = (type, resourceType, display) => { - let _options = fromJS(searchTypeOptions[type]).toJS() // 閫夐」鍒楄〃 - - if (['multiselect', 'select', 'link'].includes(type) && resourceType === '0') { // 涓嬫媺閫夋嫨绫诲瀷銆侀�夐」涓鸿嚜瀹氫箟璧勬簮 - _options.push('options') - } else if (['multiselect', 'select', 'link'].includes(type) && resourceType === '1') { // 涓嬫媺閫夋嫨绫诲瀷銆侀�夐」涓哄悗鍙版暟鎹簮涓幏鍙� - _options.push('dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'database') + getMutilOptions = () => { + let type = this.record.type + let shows = fromJS(searchTypeOptions[type]).toJS() + let reOptions = {} + let reTypes = {} + let reTooltip = {} + let reRequired = {} + let reLabel = {} + + if (['multiselect', 'select', 'link'].includes(type)) { + reRequired.linkField = true + if (this.record.resourceType === '0') { // 鑷畾涔夎祫婧� + shows.push('options') + } else if (this.record.resourceType === '1') { // 鏁版嵁婧� + shows.push('dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'database') + } } else if (type === 'checkcard') { - if (display === 'picture') { - if (resourceType === '0') { // 鑷畾涔夎祫婧� - _options.push('options', 'picratio') - } else if (resourceType === '1') { // 鏁版嵁婧� - _options.push('dataSource', 'cardValField', 'urlField', 'orderBy', 'orderType', 'database', 'picratio') + if (this.record.display === 'picture') { + if (this.record.resourceType === '0') { // 鑷畾涔夎祫婧� + shows.push('options', 'picratio') + } else if (this.record.resourceType === '1') { // 鏁版嵁婧� + shows.push('dataSource', 'cardValField', 'urlField', 'orderBy', 'orderType', 'database', 'picratio') } } else { - if (resourceType === '0') { // 鑷畾涔夎祫婧� - _options.push('options', 'fields', 'backgroundColor') - } else if (resourceType === '1') { // 鏁版嵁婧� - _options.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'database', 'backgroundColor') + if (this.record.resourceType === '0') { // 鑷畾涔夎祫婧� + shows.push('options', 'fields', 'backgroundColor') + } else if (this.record.resourceType === '1') { // 鏁版嵁婧� + shows.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'database', 'backgroundColor') } + } + shows.push('linkField') + reRequired.linkField = false + } + + if (dateOptions.hasOwnProperty(type)) { // 鏍规嵁鎼滅储鏉′欢绫诲瀷锛岄�夋嫨鍒濆鍊肩殑绫诲瀷鍙婃暟鎹� + reOptions.initval = dateOptions[type] + reTypes.initval = 'select' + } else if (type === 'group') { + reOptions.initval = groupOptions.filter(op => this.record.items.includes(op.value)) + reTypes.initval = 'cascader' + } else { + reTypes.initval = 'text' + } + + if (type === 'text') { + reOptions.match = matchReg.text + } else if (type === 'multiselect') { + reOptions.match = matchReg.multiselect + } else if (type === 'select' || type === 'link') { + reOptions.match = matchReg.select + } else if (type === 'date') { + reOptions.match = matchReg.date + } else if (type === 'datemonth') { + reOptions.match = matchReg.datemonth + } else if (type === 'dateweek' || type === 'daterange' || type === 'range') { + reOptions.match = matchReg.daterange + } else if (type === 'checkcard') { + if (this.record.multiple === 'false') { + reOptions.match = matchReg.select + } else if (this.record.multiple === 'true') { + reOptions.match = matchReg.multiselect } } - return _options + reTooltip.field = '' + reLabel.field = '瀛楁' + + if (type === 'text' || type === 'select') { + reTooltip.field = '瀛楁鍚嶅彲浠ヤ娇鐢ㄩ�楀彿鍒嗛殧锛岃繘琛岀患鍚堟悳绱€��' + } else if (type === 'group') { + reTooltip.field = '鏌ヨ鏁版嵁鏃讹紙鑷畾涔夎剼鏈垨缁熻鏁版嵁婧愶級锛岀被鍨嬪瓧娈靛皢鐢ㄤ綔鏇挎崲鑴氭湰涓殑 @瀛楁@ 锛岀被鍨嬪瓧娈靛搴斿�间负锛氭棩 -> day锛涘懆 -> week锛涙湀 -> month锛涘 -> quarter锛涘勾 -> year锛涜嚜瀹氫箟 -> customized' + reLabel.field = '绫诲瀷瀛楁' + } + + return { + shows, + reOptions, + reTypes, + reTooltip, + reRequired, + reLabel + } } - /** - * @description 鎼滅储鏉′欢绫诲瀷鍒囨崲 - */ - openTypeChange = (key, value) => { - const { dict } = this.props - const { resourceType, items, display } = this.state + optionChange = (key, value) => { + this.record[key] = value + let _fieldval = {} if (key === 'type') { - let _options = this.getOptions(value, resourceType, display) - let matchs = [] + this.record.initval = '' + _fieldval.initval = '' - this.setState({ - openType: value, - formlist: this.state.formlist.map(form => { - form.hidden = !_options.includes(form.key) // 闅愯棌琛ㄥ崟 + if (value === 'text' || value === 'multiselect') { + this.record.match = 'like' + _fieldval.match = 'like' + } else if (value === 'select' || value === 'link' || value === 'checkcard') { + this.record.match = '=' + _fieldval.match = '=' + } else if (value === 'date') { + this.record.match = '>=' + _fieldval.match = '>=' + } else if (value === 'datemonth' || value === 'dateweek' || value === 'daterange' || value === 'range') { + this.record.match = 'between' + _fieldval.match = 'between' + } - if (form.key === 'initval') { - if (dateOptions.hasOwnProperty(value)) { // 鏍规嵁鎼滅储鏉′欢绫诲瀷锛岄�夋嫨鍒濆鍊肩殑绫诲瀷鍙婃暟鎹� - form.options = dateOptions[value] - form.type = 'select' - } else if (value === 'group') { - form.options = groupOptions.filter(op => items.includes(op.value)) - form.type = 'cascader' - } else { - form.type = 'text' - } - } else if (form.key === 'match') { // 鎼滅储鏉′欢绫诲瀷鍒囨崲鏃讹紝鍖归厤瑙勫垯绫诲瀷瀵瑰簲鍒囨崲 - if (value === 'text') { - form.options = matchReg.text - } else if (value === 'multiselect') { - form.options = matchReg.multiselect - } else if (value === 'select' || value === 'link' || value === 'checkcard') { - form.options = matchReg.select - } else if (value === 'date') { - form.options = matchReg.date - } else if (value === 'datemonth') { - form.options = matchReg.datemonth - } else if (value === 'dateweek' || value === 'daterange' || value === 'range') { - form.options = matchReg.daterange - } - matchs = form.options - } else if (form.key === 'field') { - form.tooltip = '' - form.label = dict['model.form.field'] - if (value === 'text' || value === 'select') { - form.tooltip = this.state.textTooltip - } else if (value === 'group') { - form.tooltip = '鏌ヨ鏁版嵁鏃讹紙鑷畾涔夎剼鏈垨缁熻鏁版嵁婧愶級锛岀被鍨嬪瓧娈靛皢鐢ㄤ綔鏇挎崲鑴氭湰涓殑 @瀛楁@ 锛岀被鍨嬪瓧娈靛搴斿�间负 {"鏃�": "day", "鍛�": "week", "鏈�": "month", "瀛�": "quarter", "骞�": "year", "鑷畾涔�": "customized"}銆�' - form.label = dict['model.form.type'] + dict['model.form.field'] - } + if (value === 'checkcard') { + this.record.multiple = 'false' + _fieldval.multiple = 'false' + } + + if (this.record.options.length > 0) { + if (value === 'checkcard') { + this.record.options = this.record.options.map(cell => { + cell.$value = cell.Value || '' + delete cell.Value + return cell + }) + + if (this.record.options[0].Text) { + let key = Utils.getuuid() + + this.record.fields = [{ + $index: 1, + align: 'left', + color: 'rgba(0, 0, 0, 0.85)', + field: 'Text', + fontSize: 14, + key: key, + uuid: key + }] } - - return form - }) - }, () => { - if (this.props.form.getFieldValue('initval') !== undefined) { - this.props.form.setFieldsValue({initval: ''}) + } else if (['multiselect', 'select', 'link'].includes(value)) { + if (!this.record.options[0].Text && this.record.fields.length > 0) { + let field = this.record.fields[0].field + + this.record.options = this.record.options.map(cell => { + cell.Value = cell.Value || cell.$value || '' + cell.Text = cell[field] || '' + + return cell + }) + } else { + this.record.options = this.record.options.map(cell => { + cell.Value = cell.Value || cell.$value || '' + + return cell + }) + } } - if (this.props.form.getFieldValue('match') !== undefined) { - this.props.form.setFieldsValue({match: matchs[0].value}) - } - if (this.props.form.getFieldValue('multiple') !== undefined) { - this.props.form.setFieldsValue({multiple: 'false'}) - } - }) - } - } - - /** - * @description 鏁版嵁婧愮被鍨嬪垏鎹� - */ - onChange = (e, key) => { - const { openType, display, resourceType } = this.state - let value = e.target.value - - if (key === 'resourceType') { - let _options = this.getOptions(openType, value, display) - - this.setState({ - resourceType: value, - formlist: this.state.formlist.map(form => { - form.hidden = !_options.includes(form.key) - return form - }) - }) - } else if (key === 'display') { - let _options = this.getOptions(openType, resourceType, value) - - this.setState({ - display: value, - formlist: this.state.formlist.map(form => { - form.hidden = !_options.includes(form.key) - return form - }) - }) + } } else if (key === 'multiple') { - let matchs = [] - this.setState({ - formlist: this.state.formlist.map(form => { - if (form.key === 'match') { - if (value === 'true') { - form.options = matchReg.multiselect - } else { - form.options = matchReg.select - } - matchs = form.options - } - - return form - }) - }, () => { - if (this.props.form.getFieldValue('match') !== undefined) { - this.props.form.setFieldsValue({match: matchs[0].value}) - } - }) + if (value === 'false') { + this.record.match = '=' + _fieldval.match = '=' + } else if (value === 'true') { + this.record.match = 'like' + _fieldval.match = 'like' + } + } else if (key === 'items') { + let _initval = this.props.form.getFieldValue('initval') + if (_initval && !value.includes(_initval[0])) { + this.record.initval = '' + _fieldval.initval = '' + } } - } - changeField = (data) => { + let { shows, reOptions, reTypes, reLabel, reTooltip, reRequired } = this.getMutilOptions() + this.setState({ - cFields: data, - formlist: this.state.formlist.map(form => { - if (form.key === 'fields') { - form.initVal = data + formlist: this.state.formlist.map(item => { + item.hidden = !shows.includes(item.key) + item.initVal = this.record[item.key] + + if (reOptions[item.key]) { + item.options = reOptions[item.key] } - return form + if (reTypes[item.key]) { + item.type = reTypes[item.key] + } + if (reTooltip[item.key] !== undefined) { + item.tooltip = reTooltip[item.key] + } + if (reLabel[item.key] !== undefined) { + item.label = reLabel[item.key] + } + if (reRequired[item.key] !== undefined) { + item.required = reRequired[item.key] + } + + return item }) + }, () => { + this.props.form.setFieldsValue(_fieldval) }) } - checkChange = (values, key) => { - const { openType, formlist } = this.state + changeField = (data) => { + this.record.fields = data || [] + } - if (key === 'items') { - this.setState({ - items: values, - formlist: formlist.map(form => { - if (form.key === 'initval' && openType === 'group') { - form.options = groupOptions.filter(op => values.includes(op.value)) - } - - return form - }) - }) - - let _initval = this.props.form.getFieldValue('initval') - if (_initval && !values.includes(_initval[0])) { - this.props.form.setFieldsValue({initval: ''}) - } - } + changeOptions = (data) => { + this.record.options = data || [] } handleSubmit = (e) => { @@ -392,243 +386,147 @@ } getFields() { - const { openType } = this.state const { getFieldDecorator } = this.props.form + const { dict } = this.props + const { formlist } = this.state const fields = [] - this.state.formlist.forEach((item, index) => { + + formlist.forEach((item, index) => { if (item.hidden || item.forbid) return + let span = 12 + let rules = [] + let className = '' + let content = null + let initVal = item.initVal || '' + if (item.type === 'text') { // 鏂囨湰鎼滅储 - let rules = [] + let type = this.record.type + rules = [ + { required: item.required, message: dict['form.required.input'] + item.label + '!' } + ] if (item.key === 'field' || item.key === 'datefield') { - rules = [{ - pattern: (openType === 'text' || openType === 'select') ? formRule.field.multipattern : formRule.field.pattern, + rules.push({ + pattern: (type === 'text' || type === 'select') ? formRule.field.multipattern : formRule.field.pattern, message: formRule.field.message }, { max: formRule.field.max, message: formRule.field.maxMessage - }] + }) } else { - rules = [{ + rules.push({ max: formRule.input.max, message: formRule.input.message - }] + }) } - - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal || '', - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - }, - ...rules - ] - })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)} - </Form.Item> - </Col> - ) + + content = <Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} /> } else if (item.type === 'number') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - } - ] - })(item.max ? - <InputNumber min={item.min} max={item.max} precision={0} onPressEnter={this.handleSubmit}/> : - <InputNumber onPressEnter={this.handleSubmit}/> - )} - </Form.Item> - </Col> - ) - } else if (item.type === 'select') { // 涓嬫媺鎼滅储 - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.label}> - {getFieldDecorator(item.key, { - initialValue: item.initVal || '', - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Select - showSearch - filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0} - onChange={(value) => {this.openTypeChange(item.key, value)}} - getPopupContainer={() => document.getElementById('commontable-search-form-box')} - > - {item.options.map(option => - <Select.Option id={option.value} title={option.text} key={option.value} value={option.value}> - {item.key === 'icon' && <Icon type={option.text} />} {option.text} - </Select.Option> - )} - </Select> - )} - </Form.Item> - </Col> - ) - } else if (item.type === 'radio') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Radio.Group onChange={(e) => {this.onChange(e, item.key)}}> - { - item.options.map(option => { - return ( - <Radio key={option.value} value={option.value}>{option.text}</Radio> - ) - }) - } - </Radio.Group>, - )} - </Form.Item> - </Col> - ) - } else if (item.type === 'textarea') { - fields.push( - <Col span={24} key={index}> - <Form.Item className="text-area" label={item.label}> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - } - ] - })(<CodeMirror />)} - </Form.Item> - </Col> - ) - } else if (item.type === 'options') { - if (openType !== 'checkcard') { - fields.push( - <Col span={24} key={index}> - <Form.Item label={item.label} className="text-area"> - {getFieldDecorator(item.key, { - initialValue: item.initVal - })(<EditTable dict={this.props.dict} type={this.state.openType} data={item.initVal}/>)} - </Form.Item> - </Col> - ) + rules = [ + { required: item.required, message: dict['form.required.input'] + item.label + '!' } + ] + initVal = item.initVal + + if (item.max) { + content = <InputNumber min={item.min} max={item.max} precision={0} onPressEnter={this.handleSubmit}/> } else { - fields.push( - <Col span={24} key={index}> - <Form.Item label={item.label} className="text-area"> - {getFieldDecorator(item.key, { - initialValue: item.initVal - })(<DataTable dict={this.props.dict} type={this.state.display} fields={this.state.cFields}/>)} - </Form.Item> - </Col> - ) + content = <InputNumber onPressEnter={this.handleSubmit}/> + } + } else if (item.type === 'select') { // 涓嬫媺鎼滅储 + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <Select + showSearch + allowClear={item.allowClear === true} + filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0} + onChange={(value) => {this.optionChange(item.key, value)}} + getPopupContainer={() => document.getElementById('commontable-search-form-box')} + > + {item.options.map((option, i) => + <Select.Option key={`${i}`} value={option.value}> + {option.text || option.label} + </Select.Option> + )} + </Select> + } else if (item.type === 'radio') { + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <Radio.Group onChange={(e) => {this.optionChange(item.key, e.target.value)}}> + {item.options.map(option => { + return ( + <Radio key={option.value} value={option.value}>{option.text}</Radio> + ) + })} + </Radio.Group> + } else if (item.type === 'textarea') { + rules = [ + { required: item.required, message: dict['form.required.input'] + item.label + '!' } + ] + span = 24 + className = 'text-area' + + content = <CodeMirror /> + } else if (item.type === 'options') { + span = 24 + className = 'text-area' + + let type = this.record.type + + if (type !== 'checkcard') { + content = <EditTable type={type} transfield={{}} linkSubFields={[]} onChange={this.changeOptions}/> + } else { + if (this.record.linkField) { + type = 'link' + } + content = <DataTable dict={dict} type={type} display={this.record.display} linkSubFields={[]} transfield={{}} fields={this.record.fields || []} onChange={this.changeOptions}/> } } else if (item.type === 'fields') { - fields.push( - <Col span={24} key={index}> - <Form.Item label={item.label} className="text-area"> - {getFieldDecorator(item.key, { - initialValue: item.initVal - })(<FieldsTable dict={this.props.dict} onChange={this.changeField}/>)} - </Form.Item> - </Col> - ) + span = 24 + className = 'text-area' + + content = <FieldsTable dict={dict} onChange={this.changeField}/> } else if (item.type === 'checkbox') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.label}> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Checkbox.Group style={{width: '105%'}} options={item.options} onChange={(values) => this.checkChange(values, item.key)}/> - )} - </Form.Item> - </Col> - ) + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <Checkbox.Group style={{width: '105%'}} options={item.options} onChange={(values) => this.optionChange(item.key, values)}/> } else if (item.type === 'multiselect') { // 澶氶�� - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.label}> - {getFieldDecorator(item.key, { - initialValue: item.initVal || [] - })( - <Select - showSearch - mode="multiple" - filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} - > - {item.options.map((option, i) => - <Select.Option id={i} key={i} value={option.value}>{option.text}</Select.Option> - )} - </Select> - )} - </Form.Item> - </Col> - ) + content = <Select + showSearch + mode="multiple" + filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} + > + {item.options.map((option, i) => + <Select.Option id={i} key={i} value={option.value}>{option.text}</Select.Option> + )} + </Select> } else if (item.type === 'cascader') { // 澶氶�� - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.label}> - {getFieldDecorator(item.key, { - initialValue: item.initVal - })( - <Cascader options={item.options} placeholder="" /> - )} - </Form.Item> - </Col> - ) + content = <Cascader options={item.options} placeholder="" /> } else if (item.type === 'color') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.label} className="color-form-item"> - {getFieldDecorator(item.key, { - initialValue: item.initVal - })(<ColorSketch allowClear={true}/>)} - </Form.Item> - </Col> - ) + className = 'color-form-item' + content = <ColorSketch allowClear={true}/> } + + fields.push( + <Col span={span} key={index}> + <Form.Item className={className} label={item.tooltip ? + <Tooltip placement="topLeft" title={item.tooltip}> + <QuestionCircleOutlined className="mk-form-tip" /> + {item.label} + </Tooltip> : item.label + }> + {getFieldDecorator(item.key, { + initialValue: initVal, + rules: rules + })(content)} + </Form.Item> + </Col> + ) }) return fields @@ -639,23 +537,92 @@ return new Promise((resolve, reject) => { this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { - let isvalid = true values.uuid = this.props.card.uuid // 涓嬫媺鑿滃崟鎴栬仈鍔ㄨ彍鍗� - if (['multiselect', 'select', 'link', 'checkcard'].includes(values.type) && values.resourceType === '0') { - values.options = values.options || [] - values.dataSource = '' - let emptys = [] - if (['multiselect', 'select'].includes(values.type)) { - emptys = values.options.filter(op => !(op.Value && op.Text)) - } else if (values.type === 'link') { - emptys = values.options.filter(op => !(op.Value && op.Text && op.ParentID)) + if (['multiselect', 'select', 'link'].includes(values.type)) { + if (values.resourceType === '0') { + values.options = values.options || [] + values.dataSource = '' + + if (values.options.filter(op => op.Text === '').length > 0) { + notification.warning({ + top: 92, + message: '鎻愮ず鏂囨湰锛圱ext锛変笉鍙负绌猴紒', + duration: 5 + }) + return + } else if (values.options.filter(op => op.Value === '').length > 1) { + notification.warning({ + top: 92, + message: 'Value涓虹┖鏈�澶氬彧鍙坊鍔犱竴琛岋紙鍦ㄥ叧鑱旇彍鍗曚腑锛孷alue涓虹┖鏃朵笉鍖哄垎ParentID锛夛紒', + duration: 5 + }) + return + } else if (values.type === 'link') { + let arr = values.options.map(m => m.ParentID + m.Value) + let _arr = Array.from(new Set(arr)) + if (arr.length > _arr.length) { + notification.warning({ + top: 92, + message: '鍚屼竴ParentID涓紝Value鍊间笉鍙噸澶嶏紒', + duration: 5 + }) + return + } + } else { + let arr = values.options.map(m => m.Value) + let _arr = Array.from(new Set(arr)) + if (arr.length > _arr.length) { + notification.warning({ + top: 92, + message: 'Value鍊间笉鍙噸澶嶏紒', + duration: 5 + }) + return + } + } + } else { + values.options = [] } - if (emptys.length > 0) { - isvalid = false + } else if (values.type === 'checkcard') { + if (values.resourceType === '0') { + values.options = values.options || [] + values.options = values.options.map(m => { + m.ParentID = m.ParentID || '' + return m + }) + + let type = values.type + if (values.linkField) { + type = 'link' + } + + if (type === 'link') { + let arr = values.options.map(m => m.ParentID + m.$value) + let _arr = Array.from(new Set(arr)) + if (arr.length > _arr.length) { + notification.warning({ + top: 92, + message: '鍚屼竴ParentID涓紝Value鍊间笉鍙噸澶嶏紒', + duration: 5 + }) + return + } + } else { + let arr = values.options.map(m => m.$value) + let _arr = Array.from(new Set(arr)) + if (arr.length > _arr.length) { + notification.warning({ + top: 92, + message: 'Value鍊间笉鍙噸澶嶏紒', + duration: 5 + }) + return + } + } + } else { + values.options = [] } - } else if (['multiselect', 'select', 'link', 'checkcard'].includes(values.type) && values.resourceType === '1') { - values.options = [] } if (values.type === 'range') { @@ -699,32 +666,24 @@ } } - if (isvalid) { - ['linkField', 'valueField', 'valueText', 'orderBy'].forEach(item => { - if (values[item]) { - values[item] = values[item].replace(/\s* | \t* | \v* | \r*/ig, '') - } - }) - - let error = Utils.verifySql(values.dataSource) - - if (error) { - notification.warning({ - top: 92, - message: '鏁版嵁婧愪腑涓嶅彲浣跨敤' + error, - duration: 5 - }) - return + ['linkField', 'valueField', 'valueText', 'orderBy'].forEach(item => { + if (values[item]) { + values[item] = values[item].replace(/\s* | \t* | \v* | \r*/ig, '') } + }) - resolve(values) - } else { + let error = Utils.verifySql(values.dataSource) + + if (error) { notification.warning({ top: 92, - message: this.props.dict['model.form.selectItem.error'], + message: '鏁版嵁婧愪腑涓嶅彲浣跨敤' + error, duration: 5 }) + return } + + resolve(values) } else { reject(err) } diff --git a/src/templates/sharecomponent/settingcalcomponent/index.jsx b/src/templates/sharecomponent/settingcalcomponent/index.jsx index 9aa21fa..0054f25 100644 --- a/src/templates/sharecomponent/settingcalcomponent/index.jsx +++ b/src/templates/sharecomponent/settingcalcomponent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal } from 'antd' +import { Modal } from 'antd' +import { SettingOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -69,7 +70,7 @@ return ( <div className="model-datasource"> - <Icon type="setting" onClick={() => this.editDataSource()} /> + <SettingOutlined onClick={() => this.editDataSource()} /> <Modal wrapClassName="popview-modal" title={'鏁版嵁婧愰厤缃�'} diff --git a/src/templates/sharecomponent/settingcalcomponent/verifycard/index.jsx b/src/templates/sharecomponent/settingcalcomponent/verifycard/index.jsx index 8e00256..b87cf16 100644 --- a/src/templates/sharecomponent/settingcalcomponent/verifycard/index.jsx +++ b/src/templates/sharecomponent/settingcalcomponent/verifycard/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Tabs, Table, Popconfirm, Icon, notification, Modal, Spin } from 'antd' +import { Form, Tabs, Table, Popconfirm, notification, Modal, Spin } from 'antd' +import { EditOutlined, DeleteOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -55,13 +56,13 @@ dataIndex: 'operation', render: (text, record) => (<div> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span> + <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><EditOutlined /></span> <Popconfirm overlayClassName="popover-confirm" title={this.props.dict['model.query.delete']} onConfirm={() => this.deleteColumn(record) }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> + <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> </Popconfirm> </div>) } diff --git a/src/templates/sharecomponent/settingcomponent/index.jsx b/src/templates/sharecomponent/settingcomponent/index.jsx index 340c36e..eaf65ba 100644 --- a/src/templates/sharecomponent/settingcomponent/index.jsx +++ b/src/templates/sharecomponent/settingcomponent/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Modal, Button } from 'antd' +import { Modal, Button } from 'antd' +import { SettingOutlined } from '@ant-design/icons' import Utils, { FuncUtils } from '@/utils/utils.js' import zhCN from '@/locales/zh-CN/model.js' @@ -172,7 +173,7 @@ return ( <div className="model-menu-setting"> - <Icon type="setting" onClick={this.changeSetting} /> + <SettingOutlined onClick={this.changeSetting} /> {/* 璁剧疆鍏ㄥ眬閰嶇疆鍙婂垪琛ㄦ暟鎹簮 */} <Modal wrapClassName="model-table-setting-verify-modal" diff --git a/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx b/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx index 1ad7820..e853a54 100644 --- a/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx +++ b/src/templates/sharecomponent/settingcomponent/settingform/datasource/index.jsx @@ -29,6 +29,7 @@ interType: 'system', procMode: 'script', requestMode: 'system', + controlField: '', tableType: '', funcTooltip: '', funcRules: [] @@ -66,6 +67,7 @@ interType: setting.interType || 'system', procMode: setting.procMode || 'script', requestMode: setting.requestMode || 'system', + controlField: setting.controlField || '', tableType: setting.tableType, funcTooltip: tooltip, funcRules: rules @@ -195,7 +197,7 @@ render() { const { setting, dict, menu, config, columns } = this.props const { getFieldDecorator } = this.props.form - const { interType, funcRules, funcTooltip, procMode, requestMode, tableType } = this.state + const { interType, funcRules, funcTooltip, procMode, requestMode, tableType, controlField } = this.state const formItemLayout = { labelCol: { @@ -786,6 +788,38 @@ })(<InputNumber min={12} max={50} precision={0}/>)} </Form.Item> </Col> + <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="鐢ㄤ簬鎺у埗琛屾暟鎹槸鍚﹀彲閫夋嫨銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 绂佺敤瀛楁 + </Tooltip> + }> + {getFieldDecorator('controlField', { + initialValue: setting.controlField || '' + })( + <Select allowClear onChange={(val) => this.setState({controlField: val})}> + {columns.map((option, i) => + <Select.Option key={i} value={option.value}> + {option.text} + </Select.Option> + )} + </Select> + )} + </Form.Item> + </Col> + {controlField ? <Col span={12}> + <Form.Item label={ + <Tooltip placement="topLeft" title="褰撳瓧娈靛�间笌鎺у埗鍊肩浉绛夋椂锛岃鏁版嵁浼氱鐢紝澶氫釜鍊肩敤閫楀彿鍒嗛殧銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 鎺у埗鍊� + </Tooltip> + }> + {getFieldDecorator('controlVal', { + initialValue: setting.controlVal || '' + })(<Input autoComplete="off" />)} + </Form.Item> + </Col> : null} </Row> </Form> </div> diff --git a/src/templates/sharecomponent/settingcomponent/settingform/simplescript/index.jsx b/src/templates/sharecomponent/settingcomponent/settingform/simplescript/index.jsx index 41dce62..44a3d6f 100644 --- a/src/templates/sharecomponent/settingcomponent/settingform/simplescript/index.jsx +++ b/src/templates/sharecomponent/settingcomponent/settingform/simplescript/index.jsx @@ -1,8 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Row, Col, Icon, Button, notification, Select, Popconfirm, Typography, Modal, Radio } from 'antd' -import { StopOutlined, CheckCircleOutlined } from '@ant-design/icons' +import { Form, Row, Col, Button, notification, Select, Popconfirm, Typography, Modal, Radio } from 'antd' +import { StopOutlined, CheckCircleOutlined, EditOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons' import moment from 'moment' import Utils from '@/utils/utils.js' @@ -87,14 +87,14 @@ dataIndex: 'operation', render: (text, record) => (<div style={{textAlign: 'center'}}> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span> - <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><Icon type="swap" /></span> + <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><EditOutlined /></span> + <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><SwapOutlined /></span> <Popconfirm overlayClassName="popover-confirm" title={this.props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record) }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> + <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> </Popconfirm> </div>) } diff --git a/src/templates/sharecomponent/tablecomponent/index.jsx b/src/templates/sharecomponent/tablecomponent/index.jsx index abb58fe..77ed37a 100644 --- a/src/templates/sharecomponent/tablecomponent/index.jsx +++ b/src/templates/sharecomponent/tablecomponent/index.jsx @@ -275,7 +275,7 @@ {/* 琛ㄥ悕娣诲姞 */} <div className="ant-col ant-form-item-label"> <label> - <Tooltip placement="topLeft" title={dict['model.tooltip.table.guide']}> + <Tooltip placement="topLeft" title="姝ゅ鍙互娣诲姞椤甸潰閰嶇疆鐩稿叧鐨勫父鐢ㄨ〃锛屽彲閫氳繃宸ュ叿鏍忎腑鐨勬坊鍔犳寜閽紝鍙壒閲忔坊鍔犺〃鏍肩浉鍏冲瓧娈点��"> <QuestionCircleOutlined className="mk-form-tip" /> {dict['header.menu.table.add']} </Tooltip> @@ -286,7 +286,7 @@ className="tables" style={{ width: '100%' }} optionFilterProp="children" - value={dict['header.menu.table.placeholder']} + value="璇烽�夋嫨琛ㄥ悕" onChange={this.onTableChange} showArrow={false} getPopupContainer={() => containerId ? document.getElementById(containerId) : document.body} diff --git a/src/templates/sharecomponent/tabscomponent/index.jsx b/src/templates/sharecomponent/tabscomponent/index.jsx index 3db153a..43e9a29 100644 --- a/src/templates/sharecomponent/tabscomponent/index.jsx +++ b/src/templates/sharecomponent/tabscomponent/index.jsx @@ -392,7 +392,7 @@ {tabgroups.map((group, index) => { return ( <div key={index} className="tab-line-list"> - {index === 0 ? <Tooltip placement="bottomLeft" overlayClassName="middle" title={dict['model.tooltip.tabs.guide']}> + {index === 0 ? <Tooltip placement="bottomLeft" overlayClassName="middle" title="鍦ㄥ乏渚у伐鍏锋爮銆婃爣绛鹃〉銆嬩腑锛岄�夋嫨瀵瑰簲绫诲瀷鐨勬爣绛鹃〉鎷栬嚦姝ゅ娣诲姞銆�"> <QuestionCircleOutlined style={{color: '#c49f47', position: 'absolute', left: '5px', top: '20px'}} /> </Tooltip> : null} {index !== (tabgroups.length - 1) ? @@ -413,7 +413,7 @@ })} {/* 鏍囩缂栬緫 */} <Modal - title={dict['header.modal.tabs.edit']} + title="鏍囩-缂栬緫" visible={visible} width={750} maskClosable={false} diff --git a/src/templates/sharecomponent/tabscomponent/tabdragelement/card.jsx b/src/templates/sharecomponent/tabscomponent/tabdragelement/card.jsx index dd3bb58..f4017f9 100644 --- a/src/templates/sharecomponent/tabscomponent/tabdragelement/card.jsx +++ b/src/templates/sharecomponent/tabscomponent/tabdragelement/card.jsx @@ -1,6 +1,9 @@ import React from 'react' import { useDrag, useDrop } from 'react-dnd' -import { Icon, Popover } from 'antd' +import { Popover } from 'antd' +import { EditOutlined, CloseOutlined } from '@ant-design/icons' + +import MkIcon from '@/components/mk-icon' import './index.scss' const Card = ({ id, card, moveCard, findCard, doubleClickCard, editCard, delCard }) => { @@ -43,13 +46,13 @@ return ( <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={ <div className="mk-popover-control"> - <Icon className="edit" type="edit" onClick={edit} /> - <Icon className="close" type="close" onClick={del} /> + <EditOutlined className="edit" onClick={edit} /> + <CloseOutlined className="close" onClick={del} /> </div> } trigger="hover"> <div className="page-card" style={{ opacity: opacity}}> <div ref={node => drag(drop(node))} onDoubleClick={doubleClick}> - {card.icon ? <Icon type={card.icon} /> : null} + {card.icon ? <MkIcon type={card.icon} /> : null} {card.label} </div> </div> diff --git a/src/templates/sharecomponent/tabscomponent/tabform/index.jsx b/src/templates/sharecomponent/tabscomponent/tabform/index.jsx index 267c67c..efd6bec 100644 --- a/src/templates/sharecomponent/tabscomponent/tabform/index.jsx +++ b/src/templates/sharecomponent/tabscomponent/tabform/index.jsx @@ -1,11 +1,14 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Input, Select, Icon, Tooltip, Radio, InputNumber, notification } from 'antd' +import { Form, Row, Col, Input, Select, Tooltip, Radio, InputNumber, notification } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' import { formRule } from '@/utils/option.js' import Utils from '@/utils/utils.js' +import asyncComponent from '@/utils/asyncComponent' // import './index.scss' + +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) class MainTab extends Component { static propTpyes = { @@ -189,7 +192,7 @@ > {item.options.map((option, i) => <Select.Option id={'mk' + i} title={option.text} key={'mk' + i} value={option.value}> - {item.key === 'icon' && i !== 0 ? <Icon type={option.text} /> : option.text} + {option.text} </Select.Option> )} </Select> @@ -197,6 +200,29 @@ </Form.Item> </Col> ) + } else if (item.type === 'icon') { // 涓嬫媺鎼滅储 + fields.push( + <Col span={12} key={index}> + <Form.Item label={item.tooltip ? + <Tooltip placement="topLeft" title={item.tooltip}> + <QuestionCircleOutlined className="mk-form-tip" /> + {item.label} + </Tooltip> : item.label + }> + {getFieldDecorator(item.key, { + initialValue: item.initVal || '', + rules: [ + { + required: !!item.required, + message: this.props.dict['form.required.select'] + item.label + '!' + } + ] + })( + <MkEditIcon options={['data', 'normal', 'edit', 'direction', 'hint']} allowClear/> + )} + </Form.Item> + </Col> + ) } else if (item.type === 'mutilselect') { fields.push( <Col span={12} key={index}> diff --git a/src/templates/sharecomponent/treesettingcomponent/index.jsx b/src/templates/sharecomponent/treesettingcomponent/index.jsx index db18c0b..17a1e80 100644 --- a/src/templates/sharecomponent/treesettingcomponent/index.jsx +++ b/src/templates/sharecomponent/treesettingcomponent/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Icon, Modal } from 'antd' +import { Modal } from 'antd' +import { SettingOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' @@ -84,7 +85,7 @@ return ( <div className="model-tree-menu-setting"> - <Icon type="setting" onClick={this.changeSetting} /> + <SettingOutlined onClick={this.changeSetting} /> {/* 璁剧疆鍏ㄥ眬閰嶇疆鍙婂垪琛ㄦ暟鎹簮 */} <Modal wrapClassName="model-tree-setting-verify-modal" diff --git a/src/templates/subtableconfig/index.jsx b/src/templates/subtableconfig/index.jsx index b4a6ebc..c7f9293 100644 --- a/src/templates/subtableconfig/index.jsx +++ b/src/templates/subtableconfig/index.jsx @@ -133,6 +133,32 @@ */ componentDidMount () { this.reloadTab(false) + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } + if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (_shortcut === 'ctrl+83') { + let node = document.getElementById('save-config') + if (node && node.click) { + node.click() + } + return false + } + } } /** @@ -192,6 +218,7 @@ this.setState = () => { return } + document.onkeydown = () => {} } // 椤甸潰杩斿洖 @@ -274,6 +301,10 @@ if (_config.columns[0] && _config.columns[0].origin) { _config.columns = _config.columns.filter(item => !item.origin) } + } + + if (_config.setting.doubleClick && _config.action.findIndex((item) => item.uuid === _config.setting.doubleClick) === -1) { + _config.setting.doubleClick = '' } // 鏈缃暟鎹簮鎴栦富閿椂锛屽惎鐢ㄧ姸鎬佷负false @@ -1023,7 +1054,7 @@ <Tooltip placement="topLeft" title="鐐瑰嚮鎸夐挳锛屽彲瀹屾垚鎴栨煡鐪嬫寜閽厤缃俊鎭��"> <QuestionCircleOutlined className="mk-form-tip" /> </Tooltip> - {this.state.dict['header.menu.action.configurable']} + 鎸夐挳閰嶇疆 </p> : null } </div> @@ -1063,7 +1094,7 @@ <ReplaceField type="table" config={config} updateConfig={this.updateconfig}/> <EditComponent dict={this.state.dict} type="table" options={['search', 'form', 'action', 'columns']} config={config} MenuID={config.uuid} thawButtons={this.state.thawButtons} refresh={this.updateConfig}/> <Switch className="big" checkedChildren="鍚�" unCheckedChildren="鍋�" checked={config.enabled} onChange={this.onEnabledChange} /> - <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['model.save']}</Button> + <Button type="primary" id="save-config" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['model.save']}</Button> <Button onClick={this.cancelConfig}>{this.state.dict['model.back']}</Button> </div> } style={{ width: '100%' }}> diff --git a/src/templates/subtableconfig/menuform/index.jsx b/src/templates/subtableconfig/menuform/index.jsx index bc95bde..72f493f 100644 --- a/src/templates/subtableconfig/menuform/index.jsx +++ b/src/templates/subtableconfig/menuform/index.jsx @@ -61,13 +61,13 @@ <Form {...formItemLayout} className="ant-advanced-search-form" id="subqazxcvbn"> <Row gutter={24}> <Col span={24}> - <Form.Item label={dict['header.menu.viewName']}> + <Form.Item label="椤甸潰鍚嶇О"> {getFieldDecorator('tabName', { initialValue: config.tabName, rules: [ { required: true, - message: dict['form.required.input'] + dict['header.menu.viewName'] + '!' + message: dict['form.required.input'] + '椤甸潰鍚嶇О!' }, { max: formRule.input.max, diff --git a/src/templates/subtableconfig/source.jsx b/src/templates/subtableconfig/source.jsx index e29bb3f..478a464 100644 --- a/src/templates/subtableconfig/source.jsx +++ b/src/templates/subtableconfig/source.jsx @@ -35,7 +35,6 @@ initval: '', type: 'text', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', match: 'like', @@ -47,7 +46,6 @@ initval: '', type: 'select', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', match: 'equal', @@ -59,7 +57,6 @@ initval: '', type: 'date', resourceType: '0', - setAll: 'false', options: [], orderType: 'asc', match: 'greater', diff --git a/src/templates/treepageconfig/index.jsx b/src/templates/treepageconfig/index.jsx index 814810f..cb5a505 100644 --- a/src/templates/treepageconfig/index.jsx +++ b/src/templates/treepageconfig/index.jsx @@ -111,6 +111,32 @@ */ componentDidMount () { this.reloadTab(false) + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } + if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (_shortcut === 'ctrl+83') { + let node = document.getElementById('save-config') + if (node && node.click) { + node.click() + } + return false + } + } } /** @@ -120,6 +146,7 @@ this.setState = () => { return } + document.onkeydown = () => {} } /** @@ -684,7 +711,7 @@ <Tooltip placement="topLeft" title="鐐瑰嚮鎸夐挳锛屽彲瀹屾垚鎴栨煡鐪嬫爣绛鹃厤缃俊鎭��"> <QuestionCircleOutlined className="mk-form-tip" /> </Tooltip> - {this.state.dict['header.menu.tab.configurable']} + 鏍囩閰嶇疆 </p> : null } {configTabs.map((item, index) => { @@ -705,13 +732,13 @@ <div className="setting"> <Card title={ <div> - {this.state.dict['header.menu.page.configurable']} + 椤甸潰閰嶇疆 <RedoOutlined style={{marginLeft: '10px'}} title="鍒锋柊鏍囩鍒楄〃" onClick={() => this.reloadTab(true)} /> </div> } bordered={false} extra={ <div> <Switch className="big" checkedChildren="鍚�" unCheckedChildren="鍋�" checked={this.state.config.enabled} onChange={this.onEnabledChange} /> - <Button type="primary" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['model.save']}</Button> + <Button type="primary" id="save-config" onClick={this.submitConfig} loading={this.state.menuloading}>{this.state.dict['model.save']}</Button> <Button onClick={this.cancelConfig}>{this.state.dict['model.back']}</Button> </div> } style={{ width: '100%' }}> diff --git a/src/templates/zshare/codemirror/index.jsx b/src/templates/zshare/codemirror/index.jsx index edba82c..98b324a 100644 --- a/src/templates/zshare/codemirror/index.jsx +++ b/src/templates/zshare/codemirror/index.jsx @@ -1,7 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Icon, Dropdown, Menu } from 'antd' +import { Dropdown, Menu } from 'antd' +import { FullscreenOutlined, FullscreenExitOutlined, FontSizeOutlined } from '@ant-design/icons' import {UnControlled as CodeMirror} from 'react-codemirror2' import 'codemirror/mode/javascript/javascript' @@ -148,10 +149,10 @@ return ( <div className="code-mirror-wrap" style={fullScreen ? style : null}> - {!fullScreen ? <Icon type="fullscreen" onClick={this.fullScreenChange}/> : null} - {fullScreen ? <Icon type="fullscreen-exit" onClick={this.fullScreenChange}/> : null} + {!fullScreen ? <FullscreenOutlined onClick={this.fullScreenChange}/> : null} + {fullScreen ? <FullscreenExitOutlined onClick={this.fullScreenChange}/> : null} {fullScreen ? <Dropdown overlay={menu} placement="bottomRight"> - <Icon type="font-size" /> + <FontSizeOutlined /> </Dropdown> : null} {display ? <CodeMirror className="code-mirror-area" diff --git a/src/templates/zshare/createfunc/index.jsx b/src/templates/zshare/createfunc/index.jsx index f114886..92e31e1 100644 --- a/src/templates/zshare/createfunc/index.jsx +++ b/src/templates/zshare/createfunc/index.jsx @@ -204,7 +204,7 @@ onClick={this.props.trigger} loading={this.state.loading} > - {this.props.dict['header.menu.func.create']} + 鍒涘缓瀛樺偍杩囩▼ </Button> ) } diff --git a/src/templates/zshare/createinterface/index.jsx b/src/templates/zshare/createinterface/index.jsx index d3ee481..275251a 100644 --- a/src/templates/zshare/createinterface/index.jsx +++ b/src/templates/zshare/createinterface/index.jsx @@ -1112,11 +1112,11 @@ onClick={this.props.trigger} loading={this.state.loading} > - {this.props.dict['header.menu.interface.create']} + 鍒涘缓鎺ュ彛 </Button> {/* 鎺ュ彛閫夐」 */} <Modal - title={this.props.dict['header.menu.interface.create']} + title="鍒涘缓鎺ュ彛" visible={this.state.visible} width={500} maskClosable={false} diff --git a/src/templates/zshare/customscript/index.jsx b/src/templates/zshare/customscript/index.jsx index bf6ddb4..4ddae3f 100644 --- a/src/templates/zshare/customscript/index.jsx +++ b/src/templates/zshare/customscript/index.jsx @@ -1,8 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { fromJS } from 'immutable' -import { Form, Row, Col, Icon, Button, notification, Select, Popconfirm, Typography } from 'antd' -import { StopOutlined, CheckCircleOutlined } from '@ant-design/icons' +import { Form, Row, Col, Button, notification, Select, Popconfirm, Typography } from 'antd' +import { StopOutlined, CheckCircleOutlined, EditOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons' import moment from 'moment' import Utils from '@/utils/utils.js' @@ -74,14 +74,14 @@ dataIndex: 'operation', render: (text, record) => (<div style={{textAlign: 'center'}}> - <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><Icon type="edit" /></span> - <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><Icon type="swap" /></span> + <span className="operation-btn" title={this.props.dict['model.edit']} onClick={() => this.handleEdit(record)} style={{color: '#1890ff'}}><EditOutlined /></span> + <span className="operation-btn" title={this.props.dict['header.form.status.change']} onClick={() => this.handleStatus(record)} style={{color: '#8E44AD'}}><SwapOutlined /></span> <Popconfirm overlayClassName="popover-confirm" title={this.props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record) }> - <span className="operation-btn" style={{color: '#ff4d4f'}}><Icon type="delete" /></span> + <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> </Popconfirm> </div>) } diff --git a/src/templates/zshare/editTable/index.jsx b/src/templates/zshare/editTable/index.jsx index 14c3554..347b021 100644 --- a/src/templates/zshare/editTable/index.jsx +++ b/src/templates/zshare/editTable/index.jsx @@ -2,7 +2,8 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { DndProvider, DragSource, DropTarget } from 'react-dnd' -import { Table, Input, InputNumber, Popconfirm, Form, Icon, Select, Radio, Cascader, notification, message, Modal, Typography } from 'antd' +import { Table, Input, InputNumber, Popconfirm, Form, Select, Radio, Cascader, notification, message, Modal, Typography } from 'antd' +import { CopyOutlined, EditOutlined, DeleteOutlined, SnippetsOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import ColorSketch from '@/mob/colorsketch' @@ -13,7 +14,7 @@ import enUS from '@/locales/en-US/model.js' import './index.scss' -const MkIcon = asyncComponent(() => import('@/components/mkIcon')) +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) let eTDict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS const EditableContext = React.createContext() const { confirm } = Modal @@ -88,7 +89,7 @@ } else if (inputType === 'color') { return <ColorSketch /> } else if (inputType === 'icon') { - return <MkIcon allowClear/> + return <MkEditIcon allowClear/> } else if (inputType === 'switch') { return <CusSwitch /> } else if (inputType === 'select') { @@ -191,9 +192,9 @@ title: (<div> {eTDict['model.operation']} <span className="copy-control"> - {actions.includes('copy') ? <Icon type="copy" title="澶嶅埗" onClick={() => this.copy()} /> : null} - {actions.includes('copy') ? <Icon type="snippets" title="绮樿创" onClick={this.paste} /> : null} - {actions.includes('clear') ? <Icon type="delete" title="娓呯┖" onClick={this.clear} /> : null} + {actions.includes('copy') ? <CopyOutlined title="澶嶅埗" onClick={() => this.copy()} /> : null} + {actions.includes('copy') ? <SnippetsOutlined title="绮樿创" onClick={this.paste} /> : null} + {actions.includes('clear') ? <DeleteOutlined title="娓呯┖" onClick={this.clear} /> : null} </span> </div>), dataIndex: 'operation', @@ -213,17 +214,17 @@ <span style={{ color: '#1890ff', cursor: 'pointer'}} onClick={() => this.cancel(record.uuid)}>{eTDict['model.cancel']}</span> </div> ) : ( - <div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')} style={{minWidth: '110px'}}> - {actions.includes('edit') ? <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><Icon type="edit" /></span> : null} - {actions.includes('copy') ? <span className="copy" onClick={() => {editingKey === '' && this.copy(record)}}><Icon type="copy" /></span> : null} + <div className={'edit-operation-btn' + (editingKey !== '' ? ' disabled' : '')} style={{minWidth: '110px', whiteSpace: 'nowrap'}}> + {actions.includes('edit') ? <span className="primary" onClick={() => {editingKey === '' && this.edit(record.uuid)}}><EditOutlined /></span> : null} + {actions.includes('copy') ? <span className="copy" onClick={() => {editingKey === '' && this.copy(record)}}><CopyOutlined /></span> : null} {actions.includes('del') && editingKey === '' ? <Popconfirm overlayClassName="popover-confirm" title={eTDict['model.query.delete']} onConfirm={() => this.handleDelete(record.uuid) }> - <span className="danger"><Icon type="delete" /></span> + <span className="danger"><DeleteOutlined /></span> </Popconfirm> : null} - {actions.includes('del') && editingKey !== '' ? <span className="danger"><Icon type="delete" /></span> : null} + {actions.includes('del') && editingKey !== '' ? <span className="danger"><DeleteOutlined /></span> : null} </div> ) } @@ -506,7 +507,7 @@ } render() { - const { actions } = this.props + const { actions, indexShow } = this.props let components = { body: { @@ -544,12 +545,14 @@ } }) - columns.unshift({ - title: '搴忓彿', - dataIndex: '$index', - className: 'mk-index', - width: '60px', - }) + if (indexShow !== false) { + columns.unshift({ + title: '搴忓彿', + dataIndex: '$index', + className: 'mk-index', + width: '60px', + }) + } const data = this.state.data.map((item, index) => { item.$index = index + 1 diff --git a/src/templates/zshare/editcard/index.jsx b/src/templates/zshare/editcard/index.jsx index befaacb..b18e19d 100644 --- a/src/templates/zshare/editcard/index.jsx +++ b/src/templates/zshare/editcard/index.jsx @@ -1,5 +1,6 @@ import React, {Component} from 'react' -import { Row, Col, Icon, Radio, Input, Button } from 'antd' +import { Row, Col, Radio, Input, Button } from 'antd' +import { CheckOutlined } from '@ant-design/icons' import './index.scss' const { Search } = Input @@ -52,7 +53,7 @@ return ( <div className={'ant-card ant-card-bordered ' + (card.selected ? 'selected' : '')} > <div className="base" onClick={this.changeSelect}> - <Icon type="check" /> + <CheckOutlined /> <p title={card.field}>{this.props.dict['model.form.field']}锛� <span>{card.field}</span></p> <p title={card.label}>{this.props.dict['model.name']}锛� <span>{card.label}</span></p> </div> diff --git a/src/templates/zshare/editcomponent/index.jsx b/src/templates/zshare/editcomponent/index.jsx index cbc5832..f26d9e3 100644 --- a/src/templates/zshare/editcomponent/index.jsx +++ b/src/templates/zshare/editcomponent/index.jsx @@ -2,6 +2,7 @@ import PropTypes from 'prop-types' import { fromJS } from 'immutable' import { Modal, Spin, notification, Button } from 'antd' +import { UnlockOutlined, SnippetsOutlined } from '@ant-design/icons' import Api from '@/api' import Utils from '@/utils/utils.js' @@ -93,7 +94,7 @@ if (targetKeys.length === 0) { notification.warning({ top: 92, - message: dict['form.required.select'] + dict['header.form.thawbutton'], + message: dict['form.required.select'] + '瑙e喕鎸夐挳', duration: 5 }) } else { @@ -203,11 +204,11 @@ return ( <div style={{display: 'inline-block'}}> - {MenuID ? <Button className="mk-border-green" onClick={this.handleThaw} icon="unlock">{dict['header.form.thawbutton']}</Button> : null} - <Button style={{borderColor: '#40a9ff', color: '#40a9ff'}} onClick={() => this.setState({pasteVisible: true})} icon="snippets">{dict['header.form.paste']}</Button> + {MenuID ? <Button className="mk-border-green" onClick={this.handleThaw}><UnlockOutlined /> 瑙e喕鎸夐挳</Button> : null} + <Button style={{borderColor: '#40a9ff', color: '#40a9ff'}} onClick={() => this.setState({pasteVisible: true})}><SnippetsOutlined /> {dict['header.form.paste']}</Button> {/* 瑙e喕鎸夐挳妯℃�佹 */} <Modal - title={dict['header.form.thawbutton']} + title="瑙e喕鎸夐挳" visible={this.state.thawVisible} onOk={this.thawBtnSubmit} onCancel={() => {this.setState({thawVisible: false, thawbtnlist: null, targetKeys: []})}} diff --git a/src/templates/zshare/formconfig.jsx b/src/templates/zshare/formconfig.jsx index ff31f6c..dfcd692 100644 --- a/src/templates/zshare/formconfig.jsx +++ b/src/templates/zshare/formconfig.jsx @@ -1,6 +1,6 @@ import zhCN from '@/locales/zh-CN/model.js' import enUS from '@/locales/en-US/model.js' -import { formRule } from '@/utils/option.js' +import { formRule, btnClasses } from '@/utils/option.js' const Formdict = sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS @@ -364,23 +364,30 @@ } } + let options = card.options || [] + if (['select', 'link'].includes(card.type) && card.setAll === 'true') { // 鍏煎 + options.unshift({ + key: 'empty', + Value: '', + Text: '鍏ㄩ儴', + ParentID: '' + }) + } + return [ { type: 'text', key: 'label', label: Formdict['model.name'], initVal: card.label || '', - required: true, - readonly: false + required: true }, { type: 'text', key: 'field', label: Formdict['model.form.field'], initVal: card.field || '', - tooltipClass: 'middle', - required: true, - readonly: false + required: true }, { type: 'select', @@ -395,8 +402,7 @@ key: 'datefield', label: '鏃堕棿瀛楁', initVal: card.datefield || '', - required: true, - readonly: false + required: true }, { type: 'text', @@ -409,7 +415,7 @@ { type: 'radio', key: 'resourceType', - label: Formdict['header.form.resourceType'], + label: '閫夐」鏉ユ簮', initVal: card.resourceType || '0', required: true, options: [{ @@ -420,19 +426,19 @@ text: Formdict['header.form.datasource'] }] }, - { - type: 'radio', - key: 'setAll', - label: Formdict['header.form.setAll'], - initVal: card.setAll || 'true', - options: [{ - value: 'true', - text: Formdict['model.true'] - }, { - value: 'false', - text: Formdict['model.false'] - }] - }, + // { + // type: 'radio', + // key: 'setAll', + // label: '璁剧疆鍏ㄩ儴', + // initVal: card.setAll || 'true', + // options: [{ + // value: 'true', + // text: Formdict['model.true'] + // }, { + // value: 'false', + // text: Formdict['model.false'] + // }] + // }, { type: 'radio', key: 'display', @@ -461,18 +467,16 @@ { type: 'text', key: 'cardValField', - label: Formdict['header.form.valueField'], + label: '鍊悸峰瓧娈�', initVal: card.cardValField || 'Value', - required: true, - readonly: false + required: true }, { type: 'text', key: 'urlField', label: '鍦板潃瀛楁', initVal: card.urlField || '', - required: true, - readonly: false + required: true }, { type: 'radio', @@ -499,24 +503,21 @@ key: 'fields', label: '瀛楁闆�', initVal: card.fields || [], - required: true, - readonly: false + required: true }, { type: 'textarea', key: 'dataSource', label: Formdict['header.form.datasource'], initVal: card.dataSource || '', - required: true, - readonly: false + required: true }, { type: 'options', key: 'options', label: '閫夐」', - initVal: card.options || [], - required: true, - readonly: false + initVal: options, + required: true }, { type: 'checkbox', @@ -524,7 +525,6 @@ label: '閫夐」', initVal: card.items || ['day', 'week', 'month', 'quarter', 'year', 'customized'], required: true, - readonly: false, options: [{ value: 'day', label: '鏃�' @@ -546,42 +546,53 @@ }] }, { + type: 'radio', + key: 'multiple', + label: '閫夋嫨褰㈠紡', + initVal: card.multiple || 'false', + required: true, + options: [{ + value: 'false', + text: '鍗曢��' + }, { + value: 'true', + text: '澶氶��' + }] + }, + { type: 'select', key: 'linkField', - label: Formdict['header.form.linkField'], + label: '鍏宠仈瀛楁', initVal: card.linkField || '', required: true, - readonly: false, + allowClear: true, options: linkableFields }, { type: 'text', key: 'valueField', - label: Formdict['header.form.valueField'], + label: '鍊悸峰瓧娈�', initVal: card.valueField || '', - required: true, - readonly: false + required: true }, { type: 'text', key: 'valueText', - label: Formdict['header.form.valueText'], + label: '鏂囨湰路瀛楁', initVal: card.valueText || '', - required: true, - readonly: false + required: true }, { type: 'text', key: 'orderBy', - label: Formdict['header.form.orderBy'], + label: '鎺掑簭路瀛楁', initVal: card.orderBy || '', - required: false, - readonly: false + required: false }, { type: 'select', key: 'orderType', - label: Formdict['header.form.orderType'], + label: '鎺掑簭鏂瑰紡', initVal: card.orderType || 'asc', options: [{ value: 'asc', @@ -617,14 +628,14 @@ { type: 'radio', key: 'database', - label: Formdict['header.form.database'], + label: '鏁版嵁搴�', initVal: card.database || 'local', options: [{ value: 'local', - text: Formdict['header.form.database.local'] + text: '鏈湴' }, { value: 'sso', - text: Formdict['header.form.database.sso'] + text: '绯荤粺' }] }, { @@ -637,20 +648,6 @@ initVal: card.ratio || 6, forbid: appType === 'mob', required: false - }, - { - type: 'radio', - key: 'multiple', - label: '鍙閫�', - initVal: card.multiple || 'false', - required: true, - options: [{ - value: 'true', - text: '鏄�' - }, { - value: 'false', - text: '鍚�' - }] }, { type: 'radio', @@ -820,7 +817,7 @@ * @param {*} usefulFields 瀛樺偍杩囩▼鍙敤鐨勫紑濮嬪瓧娈� * @param {*} type 鎸夐挳绫诲瀷锛岀敤浜庡尯鍒嗗彲閫夌殑鎵撳紑鏂瑰紡 */ -export function getActionForm (card, config, usefulFields, type, menulist = [], printTemps = []) { +export function getActionForm (card, config, usefulFields, type, menulist = [], printTemps = [], tabs = []) { let columns = (config.columns || []).filter(col => col.field) let opentypes = [ @@ -864,6 +861,11 @@ card.popClose = 'grid' } + if (card.OpenType === 'outerpage') { + card.pageTemplate = 'custom' + card.OpenType = 'innerpage' + } + let refresh = [] if (type === 'subtable') { // 瀛愯〃椤甸潰锛屽彲璁剧疆鍒锋柊涓昏〃鍙婂悓绾ф爣绛� @@ -872,10 +874,10 @@ } refresh.push({ value: 'maingrid', - text: Formdict['header.form.refresh.maingrid'] + text: '鍒锋柊涓昏〃锛堣锛�' }, { value: 'equaltab', - text: Formdict['header.form.refresh.equaltab'] + text: '鍒锋柊鍚岀骇鏍囩' }) } @@ -898,12 +900,12 @@ { type: 'select', key: 'funcType', - label: Formdict['header.form.funcType'], + label: '鍔熻兘绫诲瀷', initVal: card.funcType || '', required: true, options: [{ value: 'changeuser', - text: Formdict['header.form.func.changeuser'] + text: '鍒囨崲鐢ㄦ埛' }, { value: 'print', text: '鏍囩鎵撳嵃' @@ -981,7 +983,6 @@ initVal: card.innerFunc || '', tooltip: `鍑芥暟鍚嶇О闇�浠�${usefulFields.join(', ')}绛夊瓧绗﹀紑濮嬨�俙, fields: usefulFields, - tooltipClass: 'middle', required: card.intertype === 'inner', readonly: false }, @@ -991,7 +992,13 @@ label: '鍏宠仈鏍囩', initVal: card.linkTab || '', required: false, - options: [] + options: [ + { + value: '', + text: '鏂板缓' + }, + ...tabs + ] }, { type: 'select', @@ -1131,7 +1138,7 @@ { type: 'radio', key: 'position', - label: Formdict['header.form.position'], + label: '鏄剧ず浣嶇疆', initVal: card.position || 'toolbar', required: true, options: [{ @@ -1234,12 +1241,11 @@ }] }, { - type: 'select', + type: 'icon', key: 'icon', label: Formdict['model.icon'], initVal: card.icon, - required: false, - options: [] + required: false }, { type: 'select', @@ -1247,7 +1253,7 @@ label: Formdict['model.form.color'], initVal: card.class, required: false, - options: [] + options: btnClasses }, { type: 'cascader', @@ -1290,7 +1296,7 @@ { type: 'radio', key: 'pagination', - label: Formdict['header.form.pagination'], + label: '鍒嗛〉', initVal: card.pagination || 'false', required: false, options: [{ @@ -1333,7 +1339,7 @@ type: 'number', key: 'ratio', min: 1, - max: 24, + max: 3000, precision: 0, label: '姣斾緥', initVal: card.ratio || 85, @@ -1345,7 +1351,6 @@ key: 'placement', label: '鎶藉眽鏂瑰悜', initVal: card.placement || 'right', - tooltip: '浣跨敤鎶藉眽鏃舵湁鏁堛��', required: false, options: [{ value: 'right', @@ -1362,13 +1367,26 @@ }] }, { + type: 'radio', + key: 'clickouter', + label: '鐐瑰嚮钂欏眰', + initVal: card.clickouter || 'unclose', + required: false, + options: [{ + value: 'unclose', + text: '涓嶅叧闂�' + }, { + value: 'close', + text: '鍏抽棴' + }] + }, + { type: 'text', key: 'preFunc', label: '鍓嶇疆鍑芥暟', initVal: card.preFunc || '', tooltip: `鍑芥暟鍚嶇О闇�浠�${usefulFields.join(', ')}绛夊瓧绗﹀紑濮嬶紱鍓嶇疆鍑芥暟鎵ц瀹屾垚鍚庯紝缁撴灉浼氫紶鍏ュ唴閮ㄥ嚱鏁颁腑锛屾鏃跺唴閮ㄥ嚱鏁颁細寮傛鎵ц锛涘綋鍓嶇疆鍑芥暟杩斿洖涓璄rrCode绛変簬-1鏃讹紝灏嗕笉鍐嶆墽琛屽唴閮ㄥ嚱鏁般�俙, fields: usefulFields, - tooltipClass: 'middle', required: false, readonly: false }, @@ -1606,7 +1624,7 @@ text: Formdict['model.empty'] }, { value: 'thdSeparator', - text: Formdict['header.form.thdSeparator'] + text: '鍗冨垎浣�' }, { value: 'percent', text: '鐧惧垎姣�' @@ -1665,8 +1683,8 @@ { type: 'radio', key: 'scale', - label: Formdict['header.form.clickscale'], - initVal: card.scale || 'false', + label: '鐐瑰嚮缂╂斁', + initVal: card.scale || 'true', required: false, options: [{ value: 'true', @@ -1946,8 +1964,8 @@ readonly: !(setting.laypage === 'false'), forbid: !['line', 'bar'].includes(card.chartType), options: [ - { value: 'query', text: Formdict['header.form.query'] }, - { value: 'statistics', text: Formdict['header.form.statistics'] } + { value: 'query', text: '鏌ヨ' }, + { value: 'statistics', text: '缁熻' } ] }, { @@ -2268,7 +2286,7 @@ text: '鍒嗛殧绾�' }, { value: 'linkMain', - text: Formdict['header.form.linkMain'] + text: '鍏宠仈涓昏〃' }] let _fieldlength = 50 @@ -2334,6 +2352,23 @@ _fieldlength = 8000 } + let options = card.options || [] + if (['select', 'radio', 'link'].includes(card.type) && card.setAll === 'true') { // 鍏煎 + options.unshift({ + key: 'empty', + Value: '', + Text: card.emptyText || '绌�', + ParentID: '' + }) + } + + let initval = card.initval || '' + if (card.type === 'switch') { + initval = card.initval === true + } else if (card.type === 'number') { + initval = card.initval || 0 + } + return [ { type: 'text', @@ -2363,8 +2398,7 @@ type: 'text', key: 'initval', label: Formdict['header.form.initval'], - tooltip: '涓嬫媺澶氶�変笌澶氶�夋锛屾坊鍔犲涓垵濮嬪�艰浣跨敤鈥�,鈥濆彿鍒嗛殧銆傛敞锛氫笅鎷夐�夋嫨銆佽仈鍔ㄨ彍鍗曟垨鍗曢�夋涓�$first琛ㄧず閫夋嫨绗竴椤�', - initVal: card.initval || '', + initVal: initval, required: false }, { @@ -2394,21 +2428,19 @@ key: 'openText', label: '寮�鍚彁绀�', initVal: card.openText || '', - required: false, - forbid: appType === 'mob' + required: false }, { type: 'text', key: 'closeText', label: '鍏抽棴鎻愮ず', initVal: card.closeText || '', - required: false, - forbid: appType === 'mob' + required: false }, { type: 'radio', key: 'resourceType', - label: Formdict['header.form.resourceType'], + label: '閫夐」鏉ユ簮', initVal: card.resourceType || '0', required: true, options: [{ @@ -2447,7 +2479,7 @@ { type: 'text', key: 'cardValField', - label: Formdict['header.form.valueField'], + label: '鍊悸峰瓧娈�', initVal: card.cardValField || 'Value', required: true, readonly: false @@ -2480,19 +2512,19 @@ text: '16:9' }] }, - { - type: 'radio', - key: 'setAll', - label: '璁剧疆绌哄��', - initVal: card.setAll || 'false', - options: [{ - value: 'true', - text: Formdict['model.true'] - }, { - value: 'false', - text: Formdict['model.false'] - }] - }, + // { + // type: 'radio', + // key: 'setAll', + // label: '璁剧疆绌哄��', + // initVal: card.setAll || 'false', + // options: [{ + // value: 'true', + // text: Formdict['model.true'] + // }, { + // value: 'false', + // text: Formdict['model.false'] + // }] + // }, { type: 'fields', key: 'fields', @@ -2505,7 +2537,7 @@ type: 'options', key: 'options', label: '閫夐」', - initVal: card.options || [], + initVal: options, required: true, readonly: false }, @@ -2518,18 +2550,33 @@ readonly: false }, { + type: 'radio', + key: 'multiple', + label: '閫夋嫨褰㈠紡', + initVal: card.multiple || 'false', + required: true, + options: [{ + value: 'false', + text: '鍗曢��' + }, { + value: 'true', + text: '澶氶��' + }] + }, + { type: 'select', key: 'linkField', - label: Formdict['header.form.linkField'], + label: '鍏宠仈瀛楁', initVal: card.linkField || '', required: true, readonly: false, + allowClear: true, options: linkableFields }, { type: 'text', key: 'valueField', - label: Formdict['header.form.valueField'], + label: '鍊悸峰瓧娈�', initVal: card.valueField || '', required: true, readonly: false @@ -2537,7 +2584,7 @@ { type: 'text', key: 'valueText', - label: Formdict['header.form.valueText'], + label: '鏂囨湰路瀛楁', initVal: card.valueText || '', required: true, readonly: false @@ -2545,7 +2592,7 @@ { type: 'text', key: 'orderBy', - label: Formdict['header.form.orderBy'], + label: '鎺掑簭路瀛楁', initVal: card.orderBy || '', required: false, readonly: false @@ -2553,7 +2600,7 @@ { type: 'select', key: 'orderType', - label: Formdict['header.form.orderType'], + label: '鎺掑簭鏂瑰紡', initVal: card.orderType || 'asc', options: [{ value: 'asc', @@ -2571,20 +2618,6 @@ tooltip: '璁剧疆绂佺敤瀛楁锛屼笖瀛楁鍊间负true鏃讹紝閫夐」涓嶅彲閫夈��', required: false, readonly: false - }, - { - type: 'radio', - key: 'multiple', - label: '鍙閫�', - initVal: card.multiple || 'false', - required: true, - options: [{ - value: 'true', - text: '鏄�' - }, { - value: 'false', - text: '鍚�' - }] }, { type: 'number', @@ -2714,10 +2747,10 @@ type: 'number', key: 'fieldlength', min: 1, - max: 1000000, + max: 100000, precision: 0, label: Formdict['model.form.field'] + Formdict['model.length'], - tooltip: '鏂囨湰銆佷笅鎷夋銆佹棩鏈熺瓑瀛楁榛樿闀垮害涓�50锛屽琛屾枃鏈笌鏂囦欢涓婁紶瀛楁榛樿闀垮害涓�512', + // tooltip: '鏂囨湰銆佷笅鎷夋銆佹棩鏈熺瓑瀛楁榛樿闀垮害涓�50锛屽琛屾枃鏈笌鏂囦欢涓婁紶瀛楁榛樿闀垮害涓�512', initVal: card.fieldlength || _fieldlength, required: false }, @@ -2727,7 +2760,7 @@ min: 1, max: 100, precision: 0, - label: appType === 'mob' ? '琛屾暟' : Formdict['header.form.maxRows'], + label: appType === 'mob' ? '琛屾暟' : '鏈�澶ц鏁�', tooltip: appType === 'mob' ? '琛屾暟涓虹┖鏃讹紝楂樺害鑷�傚簲' : '', initVal: card.maxRows || (appType === 'mob' ? '' : 6), required: false @@ -2735,7 +2768,7 @@ { type: 'select', key: 'regular', - label: Formdict['header.form.regular'], + label: '姝e垯鏍¢獙', initVal: card.regular || '', options: [{ value: '', @@ -2748,7 +2781,7 @@ text: Formdict['header.form.letter'] }, { value: 'letter&number', - text: Formdict['header.form.letter&number'] + text: '瀛楁瘝+鏁板瓧' }, { value: 'phone', text: '鎵嬫満鍙�' @@ -2800,7 +2833,7 @@ { type: 'radio', key: 'readonly', - label: Formdict['header.form.readonly'], + label: '鍙', initVal: card.readonly || 'false', options: [{ value: 'true', @@ -2839,14 +2872,14 @@ { type: 'radio', key: 'database', - label: Formdict['header.form.database'], + label: '鏁版嵁搴�', initVal: card.database || 'local', options: [{ value: 'local', - text: Formdict['header.form.database.local'] + text: '鏈湴' }, { value: 'sso', - text: Formdict['header.form.database.sso'] + text: '绯荤粺' }] }, { @@ -2883,7 +2916,7 @@ { type: 'radio', key: 'readin', - label: Formdict['header.form.readin'], + label: '鑷姩濉厖', tooltip: '鏄惁灏嗚〃鏍奸�変腑鐨勬暟鎹嚜鍔ㄥ~鍏呭埌琛ㄥ崟锛堝瓧娈电浉鍚岋級', initVal: card.readin || 'true', options: [{ @@ -3167,10 +3200,11 @@ type: 'select', key: 'supField', label: '涓婄骇琛ㄥ崟', - tooltip: '涓婄骇琛ㄥ崟涓轰笅鎷夐�夋嫨銆佽仈鍔ㄨ彍鍗曘�佸崟閫夋鍙婂閫夋锛屾坊鍔犲悗璇ヨ〃鍗曟樉绀哄強闅愯棌灏嗗彈涓婄骇琛ㄥ崟鎺у埗锛屾敞锛氬彈鎺у叧绯诲湪璇ヨ〃鍗曢殣钘忔椂澶辨晥銆�', + tooltip: '璇ヨ〃鍗曟樉绀烘垨闅愯棌鍙椾笂绾ц〃鍗曟帶鍒躲��', initVal: card.supField || '', required: false, readonly: false, + allowClear: true, options: linksupFields }, { @@ -3179,7 +3213,7 @@ label: '鏄剧ず鍊�', tooltip: '璇峰~鍐欐樉绀哄�硷紝鍙湁涓婄骇琛ㄥ崟鍊间笌鏄剧ず鍊肩浉鍚屾椂锛岃琛ㄥ崟鎵嶄細鏄剧ず锛屾敞锛�1銆佸涓�肩敤閫楀彿鍒嗛殧锛�2銆佷笂绾ц〃鍗曞垵濮嬪�间负$first鏃舵殏鏈鐞嗐��', initVal: card.supvalue || '', - required: true, + required: false, readonly: false }, { @@ -3208,14 +3242,14 @@ initVal: card.placeholder || '', required: false }, - { - type: 'text', - key: 'emptyText', - label: '绌哄�兼枃鏈�', - tooltip: '绌哄�肩殑鎻愮ず鏂囨湰锛岄�夋嫨璁剧疆绌哄�兼椂鏈夋晥锛岄粯璁ゅ�间负銆婄┖銆嬨��', - initVal: card.emptyText || '', - required: false - }, + // { + // type: 'text', + // key: 'emptyText', + // label: '绌哄�兼枃鏈�', + // tooltip: '绌哄�肩殑鎻愮ず鏂囨湰锛岄�夋嫨璁剧疆绌哄�兼椂鏈夋晥锛岄粯璁ゅ�间负銆婄┖銆嬨��', + // initVal: card.emptyText || '', + // required: false + // }, { type: 'radio', key: 'enter', @@ -3244,8 +3278,8 @@ { type: 'multiselect', key: 'linkSubField', - label: Formdict['model.form.linkform'], - tooltip: '鍦ㄥ垏鎹㈤�夐」鏃朵細鎶婁俊鎭嚜鍔ㄥ~鍏ュ叧鑱旂殑琛ㄥ崟锛堟枃鏈垨鏁板瓧琛ㄥ崟锛変腑銆傛敞锛氫娇鐢ㄩ�夐」鍗′笖璁句负鍙閫夋椂鏃犳晥銆�', + label: '濉厖琛ㄥ崟', + tooltip: '鍦ㄥ垏鎹㈤�夐」鏃朵細鎶婁俊鎭嚜鍔ㄥ~鍏ュ叧鑱旂殑琛ㄥ崟锛堟枃鏈垨鏁板瓧琛ㄥ崟锛変腑銆�', initVal: card.linkSubField || [], options: inputfields }, @@ -3309,27 +3343,11 @@ options: [] }, { - type: 'select', + type: 'icon', key: 'icon', label: Formdict['model.icon'], initVal: card.icon || '', required: false, - options: [{ - value: '', - text: Formdict['model.empty'] - }, { - value: 'table', - text: 'table' - }, { - value: 'bar-chart', - text: 'bar-chart' - }, { - value: 'pie-chart', - text: 'pie-chart' - }, { - value: 'line-chart', - text: 'line-chart' - }], forbid: type === 'CalendarPage' }, { diff --git a/src/templates/zshare/modalform/datatable/index.jsx b/src/templates/zshare/modalform/datatable/index.jsx index 21ae904..2a361f8 100644 --- a/src/templates/zshare/modalform/datatable/index.jsx +++ b/src/templates/zshare/modalform/datatable/index.jsx @@ -2,7 +2,8 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { DndProvider, DragSource, DropTarget } from 'react-dnd' -import { Table, Input, Popconfirm, Form, Icon, notification } from 'antd' +import { Table, Input, Popconfirm, Form, notification } from 'antd' +import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import FileUpload from '@/tabviews/zshare/fileupload' @@ -143,8 +144,11 @@ class EdiDataTable extends Component { static propTpyes = { dict: PropTypes.object, // 瀛楀吀椤� - type: PropTypes.object, // 鏁版嵁绫诲瀷锛屾枃鏈�佸浘鐗� + transfield: PropTypes.object, // 瀛楁鍚嶇О + type: PropTypes.string, // 鏄惁涓哄叧鑱旇〃鍗� + display: PropTypes.string, // 鏁版嵁绫诲瀷锛屾枃鏈�佸浘鐗� fields: PropTypes.array, // 瀛楁闆� + linkSubFields: PropTypes.array, // 濉厖瀛楁 onChange: PropTypes.func // 鏁版嵁鍙樺寲 } @@ -164,7 +168,12 @@ } UNSAFE_componentWillReceiveProps (nextProps) { - if (!is(fromJS(this.props.fields), fromJS(nextProps.fields)) || !is(fromJS(this.props.type), fromJS(nextProps.type))) { + if ( + !is(fromJS(this.props.fields), fromJS(nextProps.fields)) || + !is(fromJS(this.props.linkSubFields), fromJS(nextProps.linkSubFields)) || + this.props.display !== nextProps.display || + this.props.type !== nextProps.type + ) { this.setState({editingKey: ''}, () => { this.setState({ columns: this.getCloumns() @@ -174,15 +183,16 @@ } getCloumns = () => { - const { type, fields } = this.props + const { display, fields, linkSubFields, transfield, type } = this.props let columns = [] + let keys = ['ParentID'] - if (type === 'picture') { + if (display === 'picture') { columns.push({ title: 'url', dataIndex: '$url', inputType: 'file', - width: '40%', + // width: '40%', editable: true, render: (text) => { if (!text) return '' @@ -190,11 +200,26 @@ } }) } else { - columns = fields.map(item => ({ - title: item.field, - dataIndex: item.field, - editable: true, - })) + columns = fields.map(item => { + keys.push(item.field) + return { + title: item.field, + dataIndex: item.field, + editable: true, + } + }) + } + + if (linkSubFields.length > 0) { + linkSubFields.forEach(m => { + if (keys.includes(m)) return + + columns.push({ + title: transfield[m] || m, + dataIndex: m, + editable: true, + }) + }) } columns.unshift({ @@ -202,6 +227,14 @@ dataIndex: '$value', editable: true, }) + + if (type === 'link') { + columns.unshift({ + title: 'ParentID', + dataIndex: 'ParentID', + editable: true, + }) + } columns.push({ title: '鎿嶄綔', @@ -224,15 +257,15 @@ </span> ) : ( <div className={'operation-btn' + (editingKey !== '' ? ' disabled' : '')}> - <span className="primary" onClick={() => {editingKey === '' && this.edit(record.key)}}><Icon type="edit" /></span> + <span className="primary" onClick={() => {editingKey === '' && this.edit(record.key)}}><EditOutlined /></span> {editingKey === '' ? <Popconfirm overlayClassName="popover-confirm" title={this.props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record.key) }> - <span className="danger"><Icon type="delete" /></span> + <span className="danger"><DeleteOutlined /></span> </Popconfirm> : null} - {editingKey !== '' ? <span className="danger"><Icon type="delete" /></span> : null} + {editingKey !== '' ? <span className="danger"><DeleteOutlined /></span> : null} </div> ) } @@ -296,7 +329,7 @@ } handleAdd = () => { - const { fields, type } = this.props + const { fields, display } = this.props if (this.state.data.length >= 100) { notification.warning({ top: 92, @@ -306,9 +339,9 @@ return } - let item = { key: Utils.getuuid(), $value: `${this.state.data.length + 1}` } + let item = { key: Utils.getuuid(), $value: `${this.state.data.length + 1}`, ParentID: '' } - if (type === 'picture') { + if (display === 'picture') { item.$url = '' } else { fields.forEach(f => { @@ -368,7 +401,7 @@ }) let addable = false - if (this.props.type === 'picture') { + if (this.props.display === 'picture') { addable = true } else if (this.props.fields && this.props.fields.length > 0) { addable = true @@ -377,7 +410,7 @@ return ( <EditableContext.Provider value={this.props.form}> <div className="modal-card-data-table"> - {addable ? <Icon className="add-row" type="plus" onClick={this.handleAdd} /> : null} + {addable ? <PlusOutlined className="add-row" onClick={this.handleAdd} /> : null} <DndProvider> <Table components={components} diff --git a/src/templates/zshare/modalform/datatable/index.scss b/src/templates/zshare/modalform/datatable/index.scss index 6d5ee71..4e81d56 100644 --- a/src/templates/zshare/modalform/datatable/index.scss +++ b/src/templates/zshare/modalform/datatable/index.scss @@ -32,9 +32,12 @@ font-size: 16px; text-align: center; span { - margin-right: 15px; + margin-right: 20px; cursor: pointer; } + span:last-child { + margin-right: 0px; + } .primary { color: #1890ff; } diff --git a/src/templates/zshare/modalform/fieldtable/index.jsx b/src/templates/zshare/modalform/fieldtable/index.jsx index ca85936..0a64952 100644 --- a/src/templates/zshare/modalform/fieldtable/index.jsx +++ b/src/templates/zshare/modalform/fieldtable/index.jsx @@ -1,6 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' -import { Icon, notification } from 'antd' +import { notification } from 'antd' +import { PlusOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import Utils from '@/utils/utils.js' @@ -18,6 +19,7 @@ let data = this.props['data-__meta'].initialValue || [] this.setState({ + loading: false, data: data.map(item => { item.uuid = item.uuid || item.key return item @@ -103,21 +105,24 @@ message: '瀛楁鍚嶄笉鍙噸澶嶏紒', duration: 5 }) + this.setState({loading: true}, () => { + this.setState({loading: false}) + }) return } - Array.from(new Set(fields)) + this.setState({ data }, () => { this.props.onChange(data) }) } render() { - const { data, columns } = this.state + const { data, columns, loading } = this.state return ( <div className="modal-card-field-table"> - {data.length < 3 ? <Icon className="add-row" type="plus" onClick={this.handleAdd} /> : null} - <EditTable actions={['edit', 'move', 'del']} data={data} columns={columns} onChange={this.changeData}/> + {data.length < 3 ? <PlusOutlined className="add-row" onClick={this.handleAdd} /> : null} + {!loading ? <EditTable indexShow={false} actions={['edit', 'move', 'del']} data={data} columns={columns} onChange={this.changeData}/> : null} </div> ) } diff --git a/src/templates/zshare/modalform/index.jsx b/src/templates/zshare/modalform/index.jsx index 4860148..711f3e6 100644 --- a/src/templates/zshare/modalform/index.jsx +++ b/src/templates/zshare/modalform/index.jsx @@ -16,15 +16,15 @@ const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) const FieldsTable = asyncComponent(() => import('./fieldtable')) const DataTable = asyncComponent(() => import('./datatable')) -const MkIcon = asyncComponent(() => import('@/components/mkIcon')) +const MkEditIcon = asyncComponent(() => import('@/components/mkIcon')) const modalTypeOptions = { text: ['initval', 'readonly', 'required', 'hidden', 'readin', 'fieldlength', 'regular', 'interception', 'span', 'labelwidth', 'tooltip', 'extra', 'enter', 'cursor', 'scan', 'splitline', 'placeholder', 'place', 'marginTop', 'marginBottom'], number: ['initval', 'readonly', 'hidden', 'decimal', 'min', 'max', 'readin', 'span', 'labelwidth', 'tooltip', 'extra', 'enter', 'cursor', 'splitline', 'place', 'marginTop', 'marginBottom'], select: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkSubField', 'span', 'labelwidth', 'tooltip', 'extra', 'emptyText', 'enter', 'splitline', 'dropdown', 'marginTop', 'marginBottom'], - checkbox: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'span', 'labelwidth', 'tooltip', 'extra', 'splitline', 'arrange', 'marginTop', 'marginBottom'], + checkbox: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'fieldlength', 'span', 'labelwidth', 'tooltip', 'extra', 'splitline', 'arrange', 'marginTop', 'marginBottom'], radio: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'span', 'labelwidth', 'tooltip', 'extra', 'setAll', 'emptyText', 'splitline', 'arrange', 'marginTop', 'marginBottom'], - checkcard: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'linkSubField', 'fieldlength', 'span', 'labelwidth', 'display', 'tooltip', 'extra', 'width', 'multiple', 'borderColor', 'splitline', 'marginTop', 'marginBottom'], + checkcard: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'fieldlength', 'span', 'labelwidth', 'display', 'tooltip', 'extra', 'width', 'multiple', 'borderColor', 'splitline', 'marginTop', 'marginBottom'], multiselect: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'fieldlength', 'span', 'labelwidth', 'tooltip', 'extra', 'marginTop', 'marginBottom'], link: ['initval', 'readonly', 'required', 'hidden', 'readin', 'resourceType', 'setAll', 'linkField', 'linkSubField', 'span', 'labelwidth', 'tooltip', 'extra', 'emptyText', 'enter', 'splitline', 'dropdown', 'marginTop', 'marginBottom'], fileupload: ['readonly', 'required', 'readin', 'fieldlength', 'maxfile', 'fileType', 'span', 'labelwidth', 'tooltip', 'extra', 'compress', 'splitline', 'marginTop', 'marginBottom'], @@ -52,98 +52,46 @@ } state = { - openType: null, - resourceType: null, - supField: '', - compress: 'false', - display: 'text', - enter: '', - cFields: [], - formlist: null, - linkSubFields: null + transfield: {}, + formlist: null } - UNSAFE_componentWillMount () { - let formlist = fromJS(this.props.formlist).toJS() - let type = '' - let resourceType = '' - let supField = '' - let display = '' - let compress = 'false' - let enter = '' - let cFields = [] - let linkSubFields = [] + record = {} - formlist.forEach(cell => { - if (cell.key === 'type') { - type = cell.initVal - } else if (cell.key === 'compress') { - compress = cell.initVal - } else if (cell.key === 'display') { - display = cell.initVal - } else if (cell.key === 'enter') { - enter = cell.initVal - } else if (cell.key === 'fields') { - cFields = cell.initVal - } else if (cell.key === 'resourceType') { - resourceType = cell.initVal - } else if (cell.key === 'linkSubField') { - let arr = [] - linkSubFields = cell.options.filter(option => { - if (!['Value', 'Text'].includes(option.field) && cell.initVal.includes(option.field) && !arr.includes(option.field)) { - arr.push(option.field) - return true - } else { - return false - } + UNSAFE_componentWillMount () { + let transfield = {} + this.props.formlist.forEach(item => { + this.record[item.key] = item.initVal + + if (item.key === 'linkSubField') { + item.options.forEach(cell => { + transfield[cell.field] = cell.label }) - } else if (cell.key === 'supField') { - supField = cell.initVal } }) - - let _options = this.getOptions(type, resourceType, supField, display, enter, compress) + + let { shows, reOptions, reTypes, reRequired, reTooltip } = this.getMutilOptions() this.setState({ - enter: enter, - compress: compress, - openType: type, - supField: supField, - display: display, - cFields: cFields, - resourceType: resourceType, - linkSubFields: linkSubFields, - formlist: formlist.map(form => { - if (form.key === 'initval') { - if (dateOptions.hasOwnProperty(type)) { - form.options = dateOptions[type] - form.type = 'select' - } else if (type === 'switch') { - form.initVal = !!form.initVal - form.options = [ - {value: true, text: '寮�'}, - {value: false, text: '鍏�'} - ] - form.type = 'radio' - } - if (type === 'number') { - form.type = 'number' - form.initVal = form.initVal || 0 - form.required = true - } else if (type === 'rate') { - form.type = 'number' - form.initVal = form.initVal || 0 - form.required = false - } - } else if (form.key === 'label') { - form.required = true - if (type === 'hint') { - form.required = false - } + transfield, + formlist: this.props.formlist.map(item => { + item.show = shows.includes(item.key) + item.initVal = this.record[item.key] + + if (reOptions[item.key]) { + item.options = reOptions[item.key] + } + if (reTypes[item.key]) { + item.type = reTypes[item.key] + } + if (reRequired[item.key] !== undefined) { + item.required = reRequired[item.key] + } + if (reTooltip[item.key] !== undefined) { + item.tooltip = reTooltip[item.key] } - form.show = _options.includes(form.key) - return form + return item }) }) } @@ -161,252 +109,258 @@ } } - getOptions = (type, resourceType, supField, display, enter, compress) => { - let _options = ['label', 'field', 'type', 'blacklist', 'writein', ...fromJS(modalTypeOptions[type]).toJS()] + getMutilOptions = () => { + let type = this.record.type + let shows = ['label', 'field', 'type', 'blacklist', 'writein', 'supField', ...fromJS(modalTypeOptions[type] || []).toJS()] + let reOptions = {} + let reTypes = {} + let reRequired = {} + let reTooltip = {} - if (type === 'hint') { - _options = fromJS(modalTypeOptions[type]).toJS() - } else if (type === 'split') { - return fromJS(modalTypeOptions[type]).toJS() + if (type === 'hint' || type === 'split') { + shows = fromJS(modalTypeOptions[type]).toJS() + } + + // text number select multiselect link switch checkbox radio checkcard fileupload date datemonth datetime textarea + // rate color brafteditor funcvar hint split linkMain + + // 閫氱敤璁剧疆 + reTypes.initval = 'text' + reRequired.initval = false + reRequired.label = true + reRequired.linkField = true + reTooltip.initval = '' + + if (type === 'text') { + if (this.record.enter === 'tab' || this.record.enter === 'sub') { + shows.push('tabField') + } + } else if (type === 'number') { + reTypes.initval = 'number' + reRequired.initval = true + if (this.record.enter === 'tab' || this.record.enter === 'sub') { + shows.push('tabField') + } } else if (['multiselect', 'select', 'link', 'radio', 'checkbox'].includes(type)) { - if (resourceType === '0') { // 鑷畾涔夎祫婧� - _options.push('options') - } else if (resourceType === '1') { // 鏁版嵁婧� - _options.push('dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'disableField', 'database') + if (this.record.resourceType === '0') { // 鑷畾涔夎祫婧� + shows.push('options') + } else if (this.record.resourceType === '1') { // 鏁版嵁婧� + shows.push('dataSource', 'valueField', 'valueText', 'orderBy', 'orderType', 'disableField', 'database') + } + if (type === 'select' || type === 'link') { + if (this.record.enter === 'tab' || this.record.enter === 'sub') { + shows.push('tabField') + } + } else if (type === 'radio') { + shows.push('linkField') + reRequired.linkField = false } } else if (type === 'checkcard') { - if (display === 'picture') { - if (resourceType === '0') { // 鑷畾涔夎祫婧� - _options.push('options', 'ratio') - } else if (resourceType === '1') { // 鏁版嵁婧� - _options.push('dataSource', 'cardValField', 'urlField', 'orderBy', 'orderType', 'disableField', 'database', 'ratio') + if (this.record.display === 'picture') { + if (this.record.resourceType === '0') { // 鑷畾涔夎祫婧� + shows.push('options', 'ratio') + } else if (this.record.resourceType === '1') { // 鏁版嵁婧� + shows.push('dataSource', 'cardValField', 'urlField', 'orderBy', 'orderType', 'disableField', 'database', 'ratio') } } else { - if (resourceType === '0') { // 鑷畾涔夎祫婧� - _options.push('options', 'fields', 'backgroundColor') - } else if (resourceType === '1') { // 鏁版嵁婧� - _options.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'disableField', 'database', 'backgroundColor') + if (this.record.resourceType === '0') { // 鑷畾涔夎祫婧� + shows.push('options', 'fields', 'backgroundColor') + } else if (this.record.resourceType === '1') { // 鏁版嵁婧� + shows.push('dataSource', 'cardValField', 'fields', 'orderBy', 'orderType', 'disableField', 'database', 'backgroundColor') } } + + if (this.record.multiple === 'false') { + shows.push('linkSubField') + } else { + reTooltip.initval = '娣诲姞澶氫釜鍒濆鍊艰浣跨敤閫楀彿鍒嗛殧銆�' + } + + shows.push('linkField') + reRequired.linkField = false if (sessionStorage.getItem('appType') === 'mob') { - _options.push('hidelabel') + shows.push('hidelabel') } + } else if (['date', 'datemonth', 'datetime'].includes(type)) { + reOptions.initval = dateOptions[type] + reTypes.initval = 'select' + } else if (type === 'switch') { + reOptions.initval = [ + {value: true, text: '寮�'}, + {value: false, text: '鍏�'} + ] + reTypes.initval = 'radio' + } else if (type === 'rate') { + reTypes.initval = 'number' + } else if (type === 'hint') { + reRequired.label = false } else if (type === 'fileupload') { - if (compress === 'true') { - _options.push('limit', 'rduri', 'proRduri') + if (this.record.compress === 'true') { + shows.push('limit', 'rduri', 'proRduri') } else { - _options.push('suffix') + shows.push('suffix') } } - if (type === 'text' || type === 'number' || type === 'select' || type === 'link') { - if (enter === 'tab' || enter === 'sub') { - _options.push('tabField') - } + if (['multiselect', 'checkbox'].includes(type)) { + reTooltip.initval = '娣诲姞澶氫釜鍒濆鍊艰浣跨敤閫楀彿鍒嗛殧銆�' + } else if (['select', 'link', 'radio'].includes(type)) { + reTooltip.initval = '浣跨敤$first琛ㄧず榛樿閫夋嫨绗竴椤广��' } - if (type !== 'funcvar' && type !== 'linkMain') { - if (supField) { - _options.push('supField', 'supvalue') - } else { - _options.push('supField') - } + if (this.record.supField) { + shows.push('supvalue') } - return _options + return { + shows, + reOptions, + reTypes, + reRequired, + reTooltip + } } - openTypeChange = (key, value) => { + optionChange = (key, value) => { + let _fieldval = {} + if (key === 'type') { - let enter = 'false' - let fieldValue = {} + this.record.enter = 'false' + this.record.initval = '' + this.record.fieldlength = 50 + _fieldval.initval = '' if (value === 'text' || value === 'number') { - enter = 'sub' - fieldValue.enter = 'sub' + this.record.enter = 'sub' + _fieldval.enter = 'sub' } else if (value === 'select' || value === 'link') { - fieldValue.enter = 'false' + _fieldval.enter = 'false' } - let _options = this.getOptions(value, this.state.resourceType, this.state.supField, this.state.display, enter, this.state.compress) - - this.setState({ - openType: value, - enter: enter, - formlist: this.state.formlist.map(form => { - form.show = _options.includes(form.key) - if (form.key === 'initval') { - form.required = false - form.initVal = '' - if (dateOptions.hasOwnProperty(value)) { - form.options = dateOptions[value] - form.type = 'select' - } else if (value === 'switch') { - form.initVal = false - form.options = [ - {value: true, text: '寮�'}, - {value: false, text: '鍏�'} - ] - form.type = 'radio' - } else if (value === 'number') { - form.type = 'number' - form.required = true - form.initVal = 0 - } else if (value === 'rate') { - form.type = 'number' - form.required = false - form.initVal = 0 - } else { - form.type = 'text' - } + if (value === 'number' || value === 'rate') { + this.record.initval = 0 + _fieldval.initval = 0 + } else if (value === 'switch') { + this.record.initval = false + _fieldval.initval = false + } - if (form.show) { - fieldValue.initval = form.initVal - } - } else if (form.key === 'fieldlength') { - form.initVal = 50 - if (value === 'textarea' || value === 'brafteditor') { - form.initVal = 8000 - } else if (value === 'fileupload' || value === 'multiselect' || value === 'checkbox') { - form.initVal = 512 - } + if (['hint', 'split', 'brafteditor', 'funcvar', 'linkMain', 'fileupload'].includes(value)) { + delete _fieldval.initval + } - if (form.show) { - fieldValue.fieldlength = form.initVal - } - } else if (form.key === 'resourceType') { - form.initVal = this.state.resourceType + if (value === 'text' || value === 'linkMain' || value === 'checkcard') { + _fieldval.fieldlength = 50 + } else if (value === 'textarea' || value === 'brafteditor') { + this.record.fieldlength = 8000 + _fieldval.fieldlength = 8000 + } else if (value === 'fileupload' || value === 'multiselect' || value === 'checkbox') { + this.record.fieldlength = 512 + _fieldval.fieldlength = 512 + } - if (form.show) { - fieldValue.resourceType = form.initVal - } - } else if (form.key === 'linkSubField') { - form.initVal = this.state.linkSubFields.map(_field => _field.field) + if (value === 'brafteditor') { + this.record.encryption = 'true' + _fieldval.encryption = 'true' + } - if (form.show) { - fieldValue.linkSubField = form.initVal - } - } else if (form.key === 'label') { - form.required = true - if (value === 'hint') { - form.required = false - } - } else if (form.key === 'encryption') { - if (value === 'brafteditor') { - fieldValue.encryption = 'true' - } - } else if (form.key === 'hidden') { - if (value === 'linkMain') { - fieldValue.hidden = 'true' - } + if (value === 'linkMain') { + this.record.hidden = 'true' + _fieldval.hidden = 'true' + } + + if (this.record.options.length > 0) { + if (value === 'checkcard') { + this.record.options = this.record.options.map(cell => { + cell.$value = cell.Value || '' + delete cell.Value + return cell + }) + + if (this.record.options[0].Text) { + let key = Utils.getuuid() + + this.record.fields = [{ + $index: 1, + align: 'left', + color: 'rgba(0, 0, 0, 0.85)', + field: 'Text', + fontSize: 14, + key: key, + uuid: key + }] } - - return form - }) - }, () => { - this.props.form.setFieldsValue(fieldValue) - }) - } else if (key === 'supField') { - this.setState({ - supField: value, - formlist: this.state.formlist.map(form => { - if (form.key === 'supvalue' && value) { - form.show = true - } else if (form.key === 'supvalue' && !value) { - form.show = false + } else if (['multiselect', 'select', 'link', 'radio', 'checkbox'].includes(value)) { + if (!this.record.options[0].Text && this.record.fields.length > 0) { + let field = this.record.fields[0].field + + this.record.options = this.record.options.map(cell => { + cell.Value = cell.Value || cell.$value || '' + cell.Text = cell[field] || '' + + return cell + }) + } else { + this.record.options = this.record.options.map(cell => { + cell.Value = cell.Value || cell.$value || '' + + return cell + }) } - - return form - }) - }) - } - } - - multiselectChange = (key, value, options) => { - if (key === 'linkSubField') { - let arr = [] - let linkSubField = {} - options.forEach(option => { - if (!['Value', 'Text'].includes(option.field) && value.includes(option.field) && !arr.includes(option.field)) { - arr.push(option.field) - linkSubField[option.field] = option } - }) - - let linkSubFields = [] - value.forEach(item => { - if (linkSubField[item]) { - linkSubFields.push(linkSubField[item]) - } - }) - - this.setState({linkSubFields: linkSubFields}) - } - } - - onChange = (e, key) => { - const { openType, compress } = this.state - let value = e.target.value - if (key === 'resourceType') { - let _options = this.getOptions(openType, value, this.state.supField, this.state.display, this.state.enter, compress) - - this.setState({ - resourceType: value, - formlist: this.state.formlist.map(form => { - form.show = _options.includes(form.key) - return form - }) - }) - } else if (key === 'display') { - let _options = this.getOptions(openType, this.state.resourceType, this.state.supField, value, this.state.enter, compress) - - this.setState({ - display: value, - formlist: this.state.formlist.map(form => { - form.show = _options.includes(form.key) - return form - }) - }) - } else if (key === 'compress') { - let _options = this.getOptions(openType, this.state.resourceType, this.state.supField, this.state.display, this.state.enter, value) - - this.setState({ - compress: value, - formlist: this.state.formlist.map(form => { - form.show = _options.includes(form.key) - return form - }) - }) - } else if (key === 'enter') { - let _options = this.getOptions(openType, this.state.resourceType, this.state.supField, this.state.display, value, compress) - - this.setState({ - enter: value, - formlist: this.state.formlist.map(form => { - form.show = _options.includes(form.key) - return form - }) - }) + } } else if (key === 'multiple') { if (value === 'true') { - this.props.form.setFieldsValue({fieldlength: 512}) + this.record.fieldlength = 512 + _fieldval.fieldlength = 512 } else { - this.props.form.setFieldsValue({fieldlength: 50}) + this.record.fieldlength = 50 + _fieldval.fieldlength = 50 } } + + this.record[key] = value + + let { shows, reOptions, reTypes, reRequired, reTooltip } = this.getMutilOptions() + + this.setState({ + formlist: this.state.formlist.map(item => { + item.show = shows.includes(item.key) + item.initVal = this.record[item.key] + + if (reOptions[item.key]) { + item.options = reOptions[item.key] + } + if (reTypes[item.key]) { + item.type = reTypes[item.key] + } + if (reRequired[item.key] !== undefined) { + item.required = reRequired[item.key] + } + if (reTooltip[item.key] !== undefined) { + item.tooltip = reTooltip[item.key] + } + + return item + }) + }, () => { + this.props.form.setFieldsValue(_fieldval) + }) + } + + multiselectChange = (key, value) => { + if (key !== 'linkSubField') return + + this.record[key] = value } changeField = (data) => { - this.setState({ - cFields: data, - formlist: this.state.formlist.map(form => { - if (form.key === 'fields') { - form.initVal = data - } - return form - }) - }) + this.record.fields = data || [] + } + + changeOptions = (data) => { + this.record.options = data || [] } changeVal = (val, type) => { @@ -447,7 +401,6 @@ } } - if (labelwidth) { this.props.form.setFieldsValue({labelwidth}) } @@ -463,285 +416,163 @@ getFields() { const { getFieldDecorator } = this.props.form - const { openType } = this.state + const { dict } = this.props + const { transfield } = this.state const fields = [] this.state.formlist.forEach((item, index) => { if (!item.show || item.forbid) return null - if (item.type === 'text') { // 鏂囨湰鎼滅储 - let rules = [] + let span = 12 + let rules = [] + let className = '' + let content = null + let initVal = item.initVal || '' + + if (item.type === 'text') { + rules = [ + { required: item.required, message: dict['form.required.input'] + item.label + '!' } + ] if (item.key === 'field') { - rules = [{ + rules.push({ pattern: formRule.field.pattern, message: formRule.field.message }, { max: formRule.field.max, message: formRule.field.maxMessage - }] + }) } else { - rules = [ - { - max: formRule.input.max, - message: formRule.input.message - } - ] + rules.push({ + max: formRule.input.max, + message: formRule.input.message + }) } - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal || '', - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - }, - ...rules - ] - })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)} - </Form.Item> - </Col> - ) + + content = <Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} /> } else if (item.type === 'number') { + rules = [ + { required: item.required, message: dict['form.required.input'] + item.label + '!' } + ] + initVal = item.initVal + if (item.max) { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal || 0, - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - } - ] - })(<InputNumber onChange={(value) => this.changeVal(value, item.key)} min={item.min} max={item.max} precision={item.precision} onPressEnter={this.handleSubmit}/>)} - </Form.Item> - </Col> - ) + content = <InputNumber onChange={(value) => this.changeVal(value, item.key)} min={item.min} max={item.max} precision={item.precision} onPressEnter={this.handleSubmit}/> } else { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - } - ] - })(<InputNumber onPressEnter={this.handleSubmit}/>)} - </Form.Item> - </Col> - ) + content = <InputNumber onPressEnter={this.handleSubmit}/> } - } else if (item.type === 'select') { // 涓嬫媺鎼滅储 - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal || '', - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Select - showSearch - filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0} - onChange={(value) => {this.openTypeChange(item.key, value)}} - getPopupContainer={() => document.getElementById('modal-fields-form-box')} - > - {item.options.map((option, i) => - <Select.Option key={`${i}`} value={option.value || option.field || ''}> - {option.text || option.label} - </Select.Option> - )} - </Select> - )} - </Form.Item> - </Col> - ) + } else if (item.type === 'select') { + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + content = <Select + showSearch + allowClear={item.allowClear === true} + filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0} + onChange={(value) => {this.optionChange(item.key, value)}} + getPopupContainer={() => document.getElementById('modal-fields-form-box')} + > + {item.options.map((option, i) => + <Select.Option key={`${i}`} value={option.value || option.field || ''}> + {option.text || option.label} + </Select.Option> + )} + </Select> } else if (item.type === 'multiselect') { // 澶氶�� - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal - })( - <Select - showSearch - mode="multiple" - filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} - onChange={(value) => this.multiselectChange(item.key, value, item.options)} - > - {item.options.map((option, i) => - <Select.Option key={i} value={option.field}>{option.label}</Select.Option> - )} - </Select> - )} - </Form.Item> - </Col> - ) + content = <Select + showSearch + mode="multiple" + filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} + onChange={(value) => this.multiselectChange(item.key, value)} + > + {item.options.map((option, i) => + <Select.Option key={i} value={option.field}>{option.label}</Select.Option> + )} + </Select> } else if (item.type === 'radio') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - } - ] - })( - <Radio.Group onChange={(e) => {this.onChange(e, item.key)}}> - {item.options.map(option => { - return ( - <Radio key={option.value} value={option.value}>{option.text}</Radio> - ) - })} - </Radio.Group> - )} - </Form.Item> - </Col> - ) + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + initVal = item.initVal + + content = <Radio.Group onChange={(e) => {this.optionChange(item.key, e.target.value)}}> + {item.options.map(option => { + return ( + <Radio key={option.value} value={option.value}>{option.text}</Radio> + ) + })} + </Radio.Group> } else if (item.type === 'codemirror') { - fields.push( - <Col span={24} key={index}> - <Form.Item className="text-area" label={item.label}> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - } - ] - })(<CodeMirror />)} - </Form.Item> - </Col> - ) + rules = [ + { required: item.required, message: dict['form.required.input'] + item.label + '!' } + ] + span = 24 + className = 'text-area' + + content = <CodeMirror /> } else if (item.type === 'textarea') { - fields.push( - <Col span={24} key={index}> - <Form.Item className="text-msg" label={item.tooltip ? - <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal, - rules: [ - { - required: !!item.required, - message: this.props.dict['form.required.input'] + item.label + '!' - } - ] - })(<TextArea rows={item.rows || 4} />)} - </Form.Item> - </Col> - ) + span = 24 + className = 'text-msg' + rules = [ + { required: item.required, message: dict['form.required.input'] + item.label + '!' } + ] + + content = <TextArea rows={item.rows || 4}/> } else if (item.type === 'options') { - if (openType !== 'checkcard') { - fields.push( - <Col span={24} key={index}> - <Form.Item label={item.label} className="text-area"> - {getFieldDecorator(item.key, { - initialValue: item.initVal - })(<EditTable dict={this.props.dict} type={openType} linkSubFields={this.state.linkSubFields}/>)} - </Form.Item> - </Col> - ) + span = 24 + className = 'text-area' + + let type = this.record.type + let linkSubFields = this.record.linkSubField || [] + + if (type !== 'checkcard') { + if (!['select', 'radio', 'link'].includes(type)) { + linkSubFields = [] + } + if (type === 'radio' && this.record.linkField) { + type = 'link' + } + content = <EditTable type={type} transfield={transfield} linkSubFields={linkSubFields} onChange={this.changeOptions}/> } else { - fields.push( - <Col span={24} key={index}> - <Form.Item label={item.label} className="text-area"> - {getFieldDecorator(item.key, { - initialValue: item.initVal - })(<DataTable dict={this.props.dict} type={this.state.display} fields={this.state.cFields}/>)} - </Form.Item> - </Col> - ) + if (this.record.multiple === 'true') { + linkSubFields = [] + } + if (this.record.linkField) { + type = 'link' + } + content = <DataTable dict={this.props.dict} type={type} display={this.record.display} linkSubFields={linkSubFields} transfield={transfield} fields={this.record.fields || []} onChange={this.changeOptions}/> } } else if (item.type === 'fields') { - fields.push( - <Col span={24} key={index}> - <Form.Item label={item.label} className="text-area"> - {getFieldDecorator(item.key, { - initialValue: item.initVal - })(<FieldsTable dict={this.props.dict} onChange={this.changeField}/>)} - </Form.Item> - </Col> - ) + span = 24 + className = 'text-area' + + content = <FieldsTable dict={this.props.dict} onChange={this.changeField}/> } else if (item.type === 'color') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.label} className="color-form-item"> - {getFieldDecorator(item.key, { - initialValue: item.initVal - })(<ColorSketch allowClear={true}/>)} - </Form.Item> - </Col> - ) + className = 'color-form-item' + + content = <ColorSketch allowClear={true}/> } else if (item.type === 'icon') { - fields.push( - <Col span={12} key={index}> - <Form.Item label={item.tooltip ? - <Tooltip placement="topLeft" title={item.tooltip}> - <QuestionCircleOutlined className="mk-form-tip" /> - {item.label} - </Tooltip> : item.label - }> - {getFieldDecorator(item.key, { - initialValue: item.initVal || '', - rules: [{ - required: !!item.required, - message: this.props.dict['form.required.select'] + item.label + '!' - }] - })( - <MkIcon allowClear /> - )} - </Form.Item> - </Col> - ) + rules = [ + { required: item.required, message: dict['form.required.select'] + item.label + '!' } + ] + + content = <MkEditIcon allowClear /> } + + fields.push( + <Col span={span} key={index}> + <Form.Item className={className} label={item.tooltip ? + <Tooltip placement="topLeft" title={item.tooltip}> + <QuestionCircleOutlined className="mk-form-tip" /> + {item.label} + </Tooltip> : item.label + }> + {getFieldDecorator(item.key, { + initialValue: initVal, + rules: rules + })(content)} + </Form.Item> + </Col> + ) }) return fields @@ -758,23 +589,91 @@ if (values.resourceType === '0') { values.options = values.options || [] values.dataSource = '' - let empty = false + let type = values.type + if (values.type === 'radio' && values.linkField) { + type = 'link' + } - values.options.forEach(op => { - if (!((op.Value || op.Value === 0) && (op.Text || op.Text === 0))) { - empty = true - } else if (values.type === 'link' && !(op.ParentID || op.ParentID === 0)) { - empty = true - } - }) - - if (empty) { + if (values.options.filter(op => op.Text === '').length > 0) { notification.warning({ top: 92, - message: this.props.dict['model.form.selectItem.error'], + message: '鎻愮ず鏂囨湰锛圱ext锛変笉鍙负绌猴紒', duration: 5 }) return + } else if (values.options.filter(op => op.Value === '').length > 1) { + notification.warning({ + top: 92, + message: 'Value涓虹┖鏈�澶氬彧鍙坊鍔犱竴琛岋紙鍦ㄥ叧鑱旇彍鍗曚腑锛孷alue涓虹┖鏃朵笉鍖哄垎ParentID锛夛紒', + duration: 5 + }) + return + } else if (type === 'link') { + let arr = values.options.map(m => m.ParentID + m.Value) + let _arr = Array.from(new Set(arr)) + if (arr.length > _arr.length) { + notification.warning({ + top: 92, + message: '鍚屼竴ParentID涓紝Value鍊间笉鍙噸澶嶏紒', + duration: 5 + }) + return + } + } else { + let arr = values.options.map(m => m.Value) + let _arr = Array.from(new Set(arr)) + if (arr.length > _arr.length) { + notification.warning({ + top: 92, + message: 'Value鍊间笉鍙噸澶嶏紒', + duration: 5 + }) + return + } + } + } else { + values.options = [] + } + } else if (values.type === 'checkcard') { + if (values.resourceType === '0') { + values.options = values.options || [] + let linkSubFields = values.linkSubField || [] + values.options = values.options.map(m => { + m.ParentID = m.ParentID || '' + + linkSubFields.forEach(n => { + m[n] = m[n] || '' + }) + return m + }) + + let type = values.type + if (values.linkField) { + type = 'link' + } + + if (type === 'link') { + let arr = values.options.map(m => m.ParentID + m.$value) + let _arr = Array.from(new Set(arr)) + if (arr.length > _arr.length) { + notification.warning({ + top: 92, + message: '鍚屼竴ParentID涓紝Value鍊间笉鍙噸澶嶏紒', + duration: 5 + }) + return + } + } else { + let arr = values.options.map(m => m.$value) + let _arr = Array.from(new Set(arr)) + if (arr.length > _arr.length) { + notification.warning({ + top: 92, + message: 'Value鍊间笉鍙噸澶嶏紒', + duration: 5 + }) + return + } } } else { values.options = [] diff --git a/src/templates/zshare/modalform/modaleditable/index.jsx b/src/templates/zshare/modalform/modaleditable/index.jsx index 7944d0c..8670071 100644 --- a/src/templates/zshare/modalform/modaleditable/index.jsx +++ b/src/templates/zshare/modalform/modaleditable/index.jsx @@ -1,7 +1,9 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' -import { Table, Input, Popconfirm, Form, Icon, Radio } from 'antd' +import { Table, Input, Popconfirm, Form, Radio, message } from 'antd' +import { ArrowUpOutlined, ArrowDownOutlined, DeleteOutlined, PlusOutlined, SwapOutlined } from '@ant-design/icons' + import { formRule } from '@/utils/option.js' import Utils from '@/utils/utils.js' import './index.scss' @@ -38,6 +40,9 @@ if (datatype === 'number') { Object.keys(values).forEach(key => { values[key] = parseFloat(values[key]) + if (isNaN(values[key])) { + values[key] = 0 + } }) } handleSave({ ...record, ...values }) @@ -66,8 +71,8 @@ {form.getFieldDecorator(dataIndex, { rules: [ { - required: dataIndex === 'Value' || dataIndex === 'Text', - message: 'NOT NULL.', + required: dataIndex === 'Text', + message: '涓嶅彲涓虹┖.', }, ...rules ], @@ -109,98 +114,28 @@ class EditTable extends Component { static propTpyes = { - dict: PropTypes.object, // 瀛楀吀椤� type: PropTypes.string, // 琛ㄥ崟绫诲瀷 linkSubFields: PropTypes.array, // 鍏宠仈瀛楁 + transfield: PropTypes.object, // 琛ㄥ崟瀛楁鍚嶇О onChange: PropTypes.func // 鏁版嵁鍙樺寲 } state = { columns: [], dataSource: [], - count: 0, - type: null, - linkSubFields: [] + count: 0 } UNSAFE_componentWillMount () { - const { linkSubFields, type, dict } = this.props - let data = this.props['data-__meta'].initialValue + const { linkSubFields, type } = this.props + let data = this.props['data-__meta'].initialValue || [] - if (!data) { - data = [] - } - - let fields = [] - let dataItem = data[0] || '' - - if (type === 'select' || type === 'radio' || type === 'link') { - fields = linkSubFields.map(cell => { - return { - title: cell.label, - dataIndex: cell.field, - editable: true, - datatype: dataItem && typeof(dataItem[cell.field]) === 'number' ? 'number' : 'string' - } - }) - } - - let columns = [ - { - title: 'Value', - dataIndex: 'Value', - editable: true, - datatype: dataItem && typeof(dataItem.Value) === 'number' ? 'number' : 'string' - }, - { - title: 'Text', - dataIndex: 'Text', - editable: true, - datatype: dataItem && typeof(dataItem.Text) === 'number' ? 'number' : 'string' - }, - ...fields, - { - title: '鎿嶄綔', - align: 'center', - width: '20%', - dataIndex: 'operation', - render: (text, record) => - this.state.dataSource.length >= 1 ? ( - <div> - <span className="operation-btn" title={dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span> - <span className="operation-btn" title={dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span> - <Popconfirm - overlayClassName="popover-confirm" - title={dict['model.query.delete']} - onConfirm={() => this.handleDelete(record.key) - }> - <span style={{color: '#ff4d4f', cursor: 'pointer'}}><Icon type="delete" /></span> - </Popconfirm> - </div> - ) : null, - } - ] - - if (type === 'link') { - columns.unshift({ - title: 'ParentID', - dataIndex: 'ParentID', - editable: true, - datatype: dataItem && typeof(dataItem.ParentID) === 'number' ? 'number' : 'string' - }) - } + const { columns } = this.getColumns(type, linkSubFields, data) this.setState({ - columns: columns.map(col => { - if (col.dataIndex !== 'operation') { - col = {...col, ...this.getColumnSearchProps(col)} - } - return col - }), + columns: columns, dataSource: data, - count: data.length, - type: type, - linkSubFields: linkSubFields + count: data.length }) } @@ -218,7 +153,7 @@ </div> ), filterIcon: () => ( - <Icon type="swap" style={{ color: column.datatype === 'number' ? '#1890ff' : undefined}} /> + <SwapOutlined style={{ color: column.datatype === 'number' ? '#1890ff' : ''}} /> ) }) @@ -228,13 +163,9 @@ let _data = dataSource.map(item => { let val = item[column.dataIndex] if (value === 'number') { - try { - val = parseFloat(val) - if (isNaN(val)) { - val = '' - } - } catch (e) { - val = '' + val = parseFloat(val) + if (isNaN(val)) { + val = 0 } } else { val = '' + val @@ -302,15 +233,18 @@ handleAdd = (e) => { e.stopPropagation() - const { type, count, dataSource } = this.state + const { linkSubFields } = this.props + const { count, dataSource } = this.state const newData = { key: Utils.getuuid(), Value: `${count}`, - Text: `${count}` + Text: `${count}`, + ParentID: '' } - if (type === 'link') { - newData.ParentID = `${count}` - } + + linkSubFields.forEach(m => { + newData[m] = newData[m] || '' + }) let _data = [...dataSource, newData] @@ -323,9 +257,21 @@ } handleSave = row => { + const { type } = this.props const newData = [...this.state.dataSource] const index = newData.findIndex(item => row.key === item.key) const item = newData[index] + + if (type === 'link') { + if (newData.filter(m => row.key !== m.key && row.Value === m.Value && row.ParentID === m.ParentID).length > 0) { + message.warning('鐩稿悓ParentID涓嬶紝姝alue鍊煎凡瀛樺湪锛�') + } + } else { + if (newData.filter(m => row.key !== m.key && row.Value === m.Value).length > 0) { + message.warning('姝alue鍊煎凡瀛樺湪锛�') + } + } + newData.splice(index, 1, { ...item, ...row @@ -335,29 +281,35 @@ }) } - resetColumn = (type, linkSubFields) => { - let dataSource = JSON.parse(JSON.stringify(this.state.dataSource)) - let fields = [] + getColumns = (type, linkSubFields, dataSource) => { + const { transfield } = this.props - if ((type === 'select' || type === 'radio') && linkSubFields.length > this.state.linkSubFields) { - let addcol = linkSubFields.slice(-1)[0] - dataSource = dataSource.map(data => { - data[addcol.field] = data.Text + let _dataSource = fromJS(dataSource).toJS() + let fields = [] + let dataItem = '' + let subFields = linkSubFields.filter(m => m !== 'Value' && m !== 'Text') + + if (subFields.length > 0) { + _dataSource = _dataSource.map(data => { + subFields.forEach(n => { + if (data[n] !== undefined) return + data[n] = data.Text || '' + }) return data }) - } - let dataItem = dataSource ? dataSource[0] : '' + dataItem = _dataSource ? _dataSource[0] : '' - if (type === 'select' || type === 'radio' || type === 'link') { - fields = linkSubFields.map(field => { + fields = subFields.map(field => { return { - title: field.label, - dataIndex: field.field, + title: transfield[field] || field, + dataIndex: field, editable: true, - datatype: dataItem && typeof(dataItem[field.field]) === 'number' ? 'number' : 'string' + datatype: dataItem && typeof(dataItem[field]) === 'number' ? 'number' : 'string' } }) + } else { + dataItem = _dataSource ? _dataSource[0] : '' } let columns = [ @@ -381,15 +333,15 @@ dataIndex: 'operation', render: (text, record) => this.state.dataSource.length >= 1 ? ( - <div> - <span className="operation-btn" title={this.props.dict['header.form.up']} onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><Icon type="arrow-up" /></span> - <span className="operation-btn" title={this.props.dict['header.form.down']} onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><Icon type="arrow-down" /></span> + <div style={{fontSize: '15px'}}> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'up')} style={{color: '#1890ff'}}><ArrowUpOutlined /></span> + <span className="operation-btn" onClick={() => this.handleUpDown(record, 'down')} style={{color: '#ff4d4f'}}><ArrowDownOutlined /></span> <Popconfirm + title="纭畾鍒犻櫎鍚楋紵" overlayClassName="popover-confirm" - title={this.props.dict['model.query.delete']} onConfirm={() => this.handleDelete(record.key) }> - <span style={{color: '#ff4d4f', cursor: 'pointer'}}><Icon type="delete" /></span> + <span style={{color: '#ff4d4f', cursor: 'pointer'}}><DeleteOutlined /></span> </Popconfirm> </div> ) : null, @@ -405,18 +357,32 @@ }) } - this.setState({ + return { columns: columns.map(col => { if (col.dataIndex !== 'operation') { col = {...col, ...this.getColumnSearchProps(col)} } return col }), - dataSource: dataSource, - type: type - }, () => { - this.props.onChange(dataSource) - }) + dataSource: _dataSource + } + } + + resetColumn = (type, linkSubFields) => { + const { columns, dataSource } = this.getColumns(type, linkSubFields, this.state.dataSource) + + if (!is(fromJS(dataSource), fromJS(this.state.dataSource))) { + this.setState({ + columns, + dataSource + }, () => { + this.props.onChange(dataSource) + }) + } else { + this.setState({ + columns + }) + } } UNSAFE_componentWillReceiveProps (nextProps) { @@ -451,7 +417,7 @@ }) return ( <div className="common-modal-edit-table"> - <Icon className="add-row" type="plus" onClick={this.handleAdd} /> + <PlusOutlined className="add-row" onClick={this.handleAdd} /> <Table components={components} rowClassName={() => 'editable-row'} diff --git a/src/templates/zshare/modalform/modaleditable/index.scss b/src/templates/zshare/modalform/modaleditable/index.scss index 851a828..010e085 100644 --- a/src/templates/zshare/modalform/modaleditable/index.scss +++ b/src/templates/zshare/modalform/modaleditable/index.scss @@ -37,7 +37,7 @@ } } .operation-btn { - margin-right: 10px; + margin-right: 15px; cursor: pointer; } .ant-form-explain { diff --git a/src/templates/zshare/transferform/index.jsx b/src/templates/zshare/transferform/index.jsx index f788ee9..d56ec33 100644 --- a/src/templates/zshare/transferform/index.jsx +++ b/src/templates/zshare/transferform/index.jsx @@ -1,6 +1,8 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Transfer, Icon } from 'antd' +import { Transfer } from 'antd' +import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons' + import './index.scss' class TransferForm extends Component { @@ -87,8 +89,8 @@ if (targetKeys.includes(item.key)) { return <span title={item.description}> {item.description} - <Icon type="arrow-up" onClick={(e) => {this.changeorder(e, item, 'up')}} /> - <Icon type="arrow-down" onClick={(e) => {this.changeorder(e, item, 'down')}} /> + <ArrowUpOutlined onClick={(e) => {this.changeorder(e, item, 'up')}} /> + <ArrowDownOutlined onClick={(e) => {this.changeorder(e, item, 'down')}} /> </span> } else { return item.description diff --git a/src/templates/zshare/transferform/index.scss b/src/templates/zshare/transferform/index.scss index 8afcf12..6a544ca 100644 --- a/src/templates/zshare/transferform/index.scss +++ b/src/templates/zshare/transferform/index.scss @@ -13,7 +13,7 @@ .ant-transfer-list { width: calc(50% - 20px); height: 250px; - i { + .anticon { display: none; } } @@ -21,14 +21,12 @@ .ant-transfer-list-content-item { padding-right: 50px; position: relative; - - i { - display: inline-block; - } + .anticon { position: absolute; right: 10px; color: #ff4d4f; + display: inline-block; } .anticon-arrow-up { position: absolute; diff --git a/src/templates/zshare/unattended/index.jsx b/src/templates/zshare/unattended/index.jsx index 2a5852a..4b6b8f5 100644 --- a/src/templates/zshare/unattended/index.jsx +++ b/src/templates/zshare/unattended/index.jsx @@ -2,6 +2,7 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { Modal, Button } from 'antd' +import { UserOutlined } from '@ant-design/icons' import SettingForm from './settingform' import './index.scss' @@ -56,7 +57,7 @@ return ( <div style={{display: 'inline-block'}}> - <Button className="mk-border-purple" icon="user" onClick={this.trigger}>鏃犱汉鍊煎畧</Button> + <Button className="mk-border-purple" onClick={this.trigger}><UserOutlined/> 鏃犱汉鍊煎畧</Button> <Modal title="鏃犱汉鍊煎畧" wrapClassName="unattended-field-modal" diff --git a/src/templates/zshare/verifycard/index.jsx b/src/templates/zshare/verifycard/index.jsx index 9d42d79..6a3ecb5 100644 --- a/src/templates/zshare/verifycard/index.jsx +++ b/src/templates/zshare/verifycard/index.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { Form, Tabs, Row, Col, Radio, Button, Select, Popconfirm, notification, Modal, message, InputNumber, Tooltip, Typography } from 'antd' -import { QuestionCircleOutlined, CheckCircleOutlined, StopOutlined, EditOutlined, SwapOutlined, DeleteOutlined } from '@ant-design/icons' +import { QuestionCircleOutlined, CheckCircleOutlined, StopOutlined, EditOutlined, SwapOutlined, DeleteOutlined, ExclamationOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -595,7 +595,14 @@ new Promise(resolve => { let _fields = [] - if (config.Template === 'FormTab') { + if (card.OpenType === 'form') { + _fields.push({ + field: card.field, + label: card.label, + type: 'text' + }) + resolve(_fields) + } else if (config.Template === 'FormTab') { config.groups.forEach(group => { _fields.push(...group.sublist) }) @@ -813,7 +820,11 @@ if (!item.field || item.writein === 'false') return _arr.push(item.field.toLowerCase()) - _form.push(item.field + '=@' + item.field) + if (item.field.toLowerCase() === 'bid' && item.uuid === 'BID') { + _form.push(item.field + '=@BID@') + } else { + _form.push(item.field + '=@' + item.field) + } }) if (this.props.card.sqlType === 'audit') { @@ -1413,30 +1424,9 @@ const { verify, oriVerify } = this.state // 琛ㄥ崟鎻愪氦鏃舵鏌ヨ緭鍏ュ�兼槸鍚︽纭� return new Promise((resolve, reject) => { - let msg = '' - if (this.customForm && this.customForm.state.editItem) { - msg = '鑷畾涔夐獙璇�' - } else if (this.customForm && this.customForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.customForm.props.form.getFieldValue('sql'))) { - msg = '鑷畾涔夐獙璇�' - } else if (this.orderForm && this.orderForm.state.editItem) { - msg = '鍗曞彿鐢熸垚' - } else if (this.scriptsForm && this.scriptsForm.state.editItem) { - msg = '鑷畾涔夎剼鏈�' - } else if (this.scriptsForm && this.scriptsForm.props.form.getFieldValue('sql') && !/^\s+$/.test(this.scriptsForm.props.form.getFieldValue('sql'))) { - msg = '鑷畾涔夎剼鏈�' - } - if (!is(fromJS(verify), fromJS(oriVerify))) { confirm({ content: '楠岃瘉淇℃伅宸蹭慨鏀癸紝纭畾鍙栨秷鍚楋紵', - onOk() { - resolve() - }, - onCancel() {} - }) - } else if (msg) { - confirm({ - content: msg + '鏈繚瀛橈紝纭畾鍙栨秷鍚楋紵', onOk() { resolve() }, @@ -1474,7 +1464,12 @@ return ( <div id="verify-card-box-tab"> <Tabs defaultActiveKey="1" className="verify-card-box"> - {card.intertype === 'system' || (card.intertype === 'custom' && card.procMode === 'system') ? <TabPane tab="鍩虹楠岃瘉" key="1"> + {card.intertype === 'system' || (card.intertype === 'custom' && card.procMode === 'system') ? <TabPane tab={ + <span> + 鍩虹楠岃瘉 + {verify.default === 'false' ? <span className="count-tip"><ExclamationOutlined style={{color: 'orange'}}/></span> : null} + </span> + } key="1"> <Form {...formItemLayout}> <Row gutter={24}> {this.props.card.sqlType !== 'custom' ? <Col span={8}> diff --git a/src/utils/asyncIconComponent.jsx b/src/utils/asyncIconComponent.jsx index 7d89b29..5fe6c82 100644 --- a/src/utils/asyncIconComponent.jsx +++ b/src/utils/asyncIconComponent.jsx @@ -1,5 +1,5 @@ import React, {Component} from 'react' -import { Icon } from 'antd' +import { LoadingOutlined } from '@ant-design/icons' /** * @description 寮傛鍔犺浇妯″潡 @@ -24,7 +24,7 @@ render() { const C = this.state.component - return C ? <C {...this.props} /> : <Icon type="loading" /> + return C ? <C {...this.props} /> : <LoadingOutlined /> } } } \ No newline at end of file diff --git a/src/utils/option.js b/src/utils/option.js index ed22d33..b8b73e7 100644 --- a/src/utils/option.js +++ b/src/utils/option.js @@ -115,8 +115,20 @@ {value: 3, text: '鍓嶄笁澶�'}, {value: 7, text: '鍓嶄竷澶�'}, {value: 30, text: '鍓�30澶�'}, + {value: 90, text: '鍓�90澶�'}, + {value: 7300, text: '鍓�20骞�'}, {value: -1, text: '鏄庡ぉ'}, - {value: -2, text: '鍚庡ぉ'} + {value: -2, text: '鍚庡ぉ'}, + {value: -3, text: '鍚庝笁澶�'}, + {value: -7, text: '鍚庝竷澶�'}, + {value: -30, text: '鍚�30澶�'}, + {value: -90, text: '鍚�90澶�'}, + {value: -180, text: '鍚庡崐骞�'}, + {value: -365, text: '鍚�1骞�'}, + {value: -1095, text: '鍚�3骞�'}, + {value: -1825, text: '鍚�5骞�'}, + {value: -3650, text: '鍚�10骞�'}, + {value: -7300, text: '鍚�20骞�'}, ], dateweek: [ {value: '', text: _dict['model.empty']}, @@ -156,8 +168,20 @@ {value: 3, text: '鍓嶄笁澶�'}, {value: 7, text: '鍓嶄竷澶�'}, {value: 30, text: '鍓�30澶�'}, + {value: 90, text: '鍓�90澶�'}, + {value: 7300, text: '鍓�20骞�'}, {value: -1, text: '鏄庡ぉ'}, - {value: -2, text: '鍚庡ぉ'} + {value: -2, text: '鍚庡ぉ'}, + {value: -3, text: '鍚庝笁澶�'}, + {value: -7, text: '鍚庝竷澶�'}, + {value: -30, text: '鍚�30澶�'}, + {value: -90, text: '鍚�90澶�'}, + {value: -180, text: '鍚庡崐骞�'}, + {value: -365, text: '鍚�1骞�'}, + {value: -1095, text: '鍚�3骞�'}, + {value: -1825, text: '鍚�5骞�'}, + {value: -3650, text: '鍚�10骞�'}, + {value: -7300, text: '鍚�20骞�'}, ] } @@ -675,41 +699,31 @@ 'up', 'left', 'right', - // 'caret-up', - // 'caret-down', - // 'caret-left', - // 'caret-right', + 'download', + 'upload', 'step-backward', 'step-forward', - // 'fast-backward', - // 'fast-forward', 'double-right', 'double-left', - // 'forward', - // 'backward', 'rollback', 'enter', 'retweet', 'swap', - // 'swap-left', - // 'swap-right', 'play-circle', 'login', 'logout', 'search', 'fullscreen', 'fullscreen-exit', - 'download', - 'upload' ], hint: [ - 'question', - 'question-circle', 'plus', 'plus-circle', 'pause-circle', 'minus', 'minus-circle', + 'question', + 'question-circle', 'info-circle', 'exclamation-circle', 'close', @@ -746,20 +760,6 @@ 'fall', 'rise', 'stock', - ], - trademark: [ - 'android', - 'apple', - 'chrome', - 'aliwangwang', - 'dingding', - 'weibo', - 'twitter', - 'wechat', - 'alipay-circle', - 'taobao', - 'qq', - 'alipay', ], normal: [ 'user', @@ -819,6 +819,107 @@ 'poweroff', 'shopping-cart', 'link', + 'aim', + 'apartment', + 'appstore-add', + 'audio-mute', + 'audit', + 'bars', + 'block', + 'book', + 'bulb', + 'border', + 'number', + 'branches', + 'build', + 'calculator', + 'car', + 'carry-out', + 'ci', + 'clear', + 'cloud-download', + 'cloud-server', + 'cloud-sync', + 'cloud-upload', + 'cluster', + 'code', + 'coffee', + 'comment', + 'compress', + 'control', + 'copyright', + 'crown', + 'delete-column', + 'delete-row', + 'delivered-procedure', + 'deployment-unit', + 'desktop', + 'disconnect', + 'dollar', + 'euro', + 'expand', + 'export', + 'file-add', + 'file-done', + 'file-image', + 'file-pdf', + 'file-ppt', + 'file-text', + 'file-unknown', + 'file-word', + 'file-zip', + 'fork', + 'frown', + 'funnel-plot', + 'gateway', + 'gif', + 'gift', + 'global', + 'gold', + 'import', + 'laptop', + 'loading', + 'medicine-box', + 'meh', + 'menu', + 'paper-clip', + 'partition', + 'pay-circle', + 'printer', + 'pushpin', + 'qrcode', + 'reload', + 'rest', + 'robot', + 'rotate-left', + 'rotate-right', + 'safety-certificate', + 'save', + 'send', + 'shake', + 'share-alt', + 'shop', + 'shopping', + 'sound', + 'sync', + 'tag', + 'tags', + 'trademark', + 'trophy', + 'usb', + 'user-add', + 'user-delete', + 'user-switch', + 'video-camera', + 'wifi', + 'table', + 'apple', + 'dingding', + 'weibo', + 'wechat', + 'taobao', + 'qq', + 'alipay', ] } diff --git a/src/utils/utils-datamanage.js b/src/utils/utils-datamanage.js index 2ef1ab7..4b98d65 100644 --- a/src/utils/utils-datamanage.js +++ b/src/utils/utils-datamanage.js @@ -146,18 +146,23 @@ let _search = '' - if (setting.queryType === 'statistics' && _dataresource) { // 缁熻鏁版嵁婧愶紝鍐呭鏇挎崲 - regoptions.forEach(item => { - _dataresource = _dataresource.replace(item.reg, item.value) - }) - } else if (_dataresource && !id) { - _search = Utils.joinMainSearchkey(search) - if (_search) { - _search = 'where ' + _search + if (_dataresource) { + if (setting.queryType === 'statistics') { // 缁熻鏁版嵁婧愶紝鍐呭鏇挎崲 + regoptions.forEach(item => { + _dataresource = _dataresource.replace(item.reg, item.value) + }) + if (id) { + _dataresource = _dataresource + ` where ${setting.primaryKey || 'ID'}='${id}'` + } + } else if (!id) { + _search = Utils.joinMainSearchkey(search) + if (_search) { + _search = 'where ' + _search + } + } else if (id) { + _search = Utils.joinMainSearchkey(search) + _search = `where ${_search ? _search + ' AND ' : ''} ${setting.primaryKey || 'ID'}='${id}'` } - } else if (_dataresource && id) { - _search = Utils.joinMainSearchkey(search) - _search = `where ${_search ? _search + ' AND ' : ''} ${setting.primaryKey || 'ID'}='${id}'` } if (_customScript) { @@ -196,8 +201,8 @@ // 娴嬭瘯绯荤粺鎵撳嵃鏌ヨ璇彞 if ((options.sysType === 'local' && !window.GLOB.systemType) || window.debugger === true) { - _customScript && console.info(`${setting.$name ? `/*${setting.$name} 鑷畾涔夎剼鏈�*/\n` : ''}${LText ? '' : '/*涓嶆墽琛岄粯璁ql*/\n'}${_customScript}`) - LText && console.info(`${setting.$name ? `/*${setting.$name} 鏁版嵁婧�*/\n` : ''}` + LText) + _customScript && console.info(`${setting.$name ? `/*${setting.$name} 鑷畾涔夎剼鏈�*/\n` : ''}${LText ? '' : '/*涓嶆墽琛岄粯璁ql*/\n'}${_customScript}`) + LText && console.info(`${setting.$name ? `/*${setting.$name} 鏁版嵁婧�*/\n` : ''}` + LText) } if (setting.$name) { @@ -207,6 +212,25 @@ param.custom_script = Utils.formatOptions(_customScript) param.LText = Utils.formatOptions(LText) param.DateCount = Utils.formatOptions(DateCount) + + // 澶氬眰缁撴瀯鏁版嵁 + // LText = `SELECT a.id as bid,a.ID,a.workerCode,a.workerName,a.jobName,a.Initials,case when isnull(m.friend_id ,'') ='' then '' + // when isnull(m.status,0)=10 then '宸叉坊鍔�' else '寰呴�氳繃' end as friend_text + // ,case when images='' then 'http://epc.mk9h.cn/Content/images/upload/img/kane.jpg' else images end as icon FROM + // (select friend_id,status from oa_mail_list where userid='sso202004100959326131C0805998B6745F886F9' and Initials=case when right('0',1)='0' then Initials else '0' end + // and status=10 and deleted=0) m + // inner join (select * from BD_workers where + // Initials=case when right('0',1)='0' then Initials else '0' end and deleted=0 ) a + // on a.id=m.friend_id ` + // param.custom_script = '' + // param.LText = Utils.formatOptions(LText) + // param.DateCount = '' + // param.prm_field = 'workerCode' + // param.arr_field = 'workerName,jobName' + // param.tabid = 'ID' + // param.parid = 'BID' + // param.sub_name = 'sub_data' + // param.sub_field = 'BID,friend_text,icon,Initials' // exec_type: 'y' 瑙g爜瀛楁锛歀Text銆丩Text1銆丩Text2銆乧ustom_script銆丏ateCount @@ -672,7 +696,7 @@ // 娴嬭瘯绯荤粺鎵撳嵃鏌ヨ璇彞 if ((options.sysType === 'local' && !window.GLOB.systemType) || window.debugger === true) { - _customScript && console.info(`${setting.$name ? `/*${setting.$name} 鑷畾涔夎剼鏈紙鍚屾鏌ヨ锛�/\n` : ''}${_dataresource ? '' : '/*涓嶆墽琛岄粯璁ql*/\n'}${_customScript}`) + _customScript && console.info(`${setting.$name ? `/*${setting.$name} 鑷畾涔夎剼鏈紙鍚屾鏌ヨ锛�*/\n` : ''}${_dataresource ? '' : '/*涓嶆墽琛岄粯璁ql*/\n'}${_customScript}`) _dataresource && console.info(`${setting.$name ? `/*${setting.$name} 鏁版嵁婧愶紙鍚屾鏌ヨ锛�*/\n` : ''}` + _dataresource) } diff --git a/src/utils/utils.js b/src/utils/utils.js index c777212..e195f6b 100644 --- a/src/utils/utils.js +++ b/src/utils/utils.js @@ -707,14 +707,16 @@ static getSelectQueryOptions (item) { let arrfield = [item.valueField, item.valueText] - if (item.type === 'link') { - arrfield.push(item.linkField) - } else if (item.type === 'checkcard') { + if (item.type === 'checkcard') { arrfield = item.fields.map(f => f.field) arrfield.push(item.cardValField) if (item.urlField) { arrfield.push(item.urlField) } + } + + if (item.linkField) { + arrfield.push(item.linkField) } if (['select', 'radio', 'link', 'checkcard'].includes(item.type) && item.linkSubField && item.linkSubField.length > 0) { arrfield.push(...item.linkSubField) @@ -2040,6 +2042,75 @@ } /** + * @description 鑾峰彇鏍囪淇℃伅 + */ +export function getMark (marks, record, style = {}) { + let icon = null + let color = null + let position = null + + marks.some(mark => { + let originVal = record[mark.field[0]] + '' + let contrastVal = '' + let result = false + + if (mark.field[1] === 'static') { + contrastVal = mark.contrastValue + '' + } else { + contrastVal = record[mark.field[2]] + '' + } + + if (mark.match === '=') { + result = originVal === contrastVal + } else if (mark.match === '!=') { + result = originVal !== contrastVal + } else if (mark.match === 'like') { + result = originVal.indexOf(contrastVal) > -1 + } else if (mark.match === '>') { + result = parseFloat(originVal) > parseFloat(contrastVal) + } else if (mark.match === '<') { + result = parseFloat(originVal) < parseFloat(contrastVal) + } + + if (!result) return false + + let type = mark.signType[0] + + if (type === 'font') { + style.color = mark.color + } else if (type === 'background') { + style.background = mark.color + if (mark.fontColor) { + style.color = mark.fontColor + } + } else if (type === 'underline') { + style.textDecoration = 'underline' + style.color = mark.color + } else if (type === 'line-through') { + style.textDecoration = 'line-through' + style.color = mark.color + } else if (type.indexOf('icon') > -1) { + icon = mark.signType[mark.signType.length - 1] + color = mark.color + if (type === 'iconfront' || mark.signType[1] === 'front') { + position = 'front' + } else { + position = 'back' + } + } + + return true + }) + + return { + style, + icon, + color, + position + } +} + +/** * @description 鐢熸垚鏇挎崲鍑芥暟鍒楄〃 */ export function setGLOBFuncs () { diff --git a/src/views/appmanage/index.jsx b/src/views/appmanage/index.jsx index 9658cb1..a9081be 100644 --- a/src/views/appmanage/index.jsx +++ b/src/views/appmanage/index.jsx @@ -467,12 +467,27 @@ } catch (e) { _param = {} } - cell.copyright = _param.copyright || '' - cell.logo = _param.logo || '' + // cell.copyright = _param.copyright || '' + // cell.logo = _param.logo || '' cell.apptype = _param.apptype || '' cell.delay = _param.delay || 0 cell.statusBarColor = _param.statusBarColor || 'black' - cell.adapter = _param.adapter || 'false' + cell.sysBgColor = _param.sysBgColor || '#ffffff' + cell.adapter = _param.adapter || '' + if (cell.adapter && (cell.adapter === 'true' || cell.adapter === 'false')) { + cell.adapter = '' + } + + cell.userbind = _param.userbind || '' + cell.instantMessage = _param.instantMessage || '' + } + + if (cell.user_binding !== 'true') { + cell.user_binding = 'false' + } + + if (!cell.adapter && cell.apptype) { + cell.adapter = 'app' } return cell @@ -568,6 +583,9 @@ }) _this.getAppList() } else { + if (result.message.indexOf('kei_no宸茶鑿滃崟浣跨敤锛屼笉鍙垹闄�') > -1) { + result.message = 'kei_no宸茶鑿滃崟浣跨敤锛屼笉鍙垹闄�' + } notification.warning({ top: 92, message: result.message, @@ -598,14 +616,23 @@ LText: '' } + param.del_typename = record.typename + param.lang = record.lang param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') param.secretkey = Utils.encrypt('', param.timestamp) let sublist = fromJS(selectApp.sublist).toJS() sublist = sublist.filter(item => item.ID !== record.ID) + sublist = sublist.map(item => { + if (item.typename !== 'pc') { + item.userbind = md5(selectApp.kei_no + item.typename + item.lang).replace(/^.{8}/, 'userbind') + item.instantMessage = md5(selectApp.kei_no + item.typename + item.lang).replace(/^.{14}/, 'instantmessage') + } + return item + }) - // param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}'`) - param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || ''}','${item.sms_id || ''}','${window.btoa(window.encodeURIComponent(JSON.stringify({copyright: item.copyright || '', logo: item.logo || '', apptype: item.apptype || '', delay: item.delay || 0, statusBarColor: item.statusBarColor || 'black', adapter: item.adapter || 'false'})))}'`) + // 瀛愬簲鐢↖D銆乼ypename銆佸簲鐢↖D銆丆loudUserID銆乤ppkey銆乴ogin_types(鏄惁闇�瑕佺櫥褰曪紝宸插純鐢�)銆乴ink_type(鏄惁浣跨敤鐭繛鎺ワ紝宸插純鐢�)銆乺ole_type(鏄惁浣跨敤瑙掕壊绠$悊)銆乴ang銆乧ss(鐨偆)銆乼itle(鏍囬)銆乫avicon(鍥炬爣)銆乽ser_binding(鐢ㄦ埛缁戝畾)銆乻ms_id(鐭俊妯℃澘ID)銆佽嚜瀹氫箟 + param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || 'false'}','','${window.btoa(window.encodeURIComponent(JSON.stringify({userbind: item.userbind || '', instantMessage: item.instantMessage || '', apptype: item.apptype || '', delay: item.delay || 0, statusBarColor: item.statusBarColor || 'black', sysBgColor: item.sysBgColor || '#ffffff', adapter: item.adapter || ''})))}'`) param.LText = param.LText.join(' union all ') param.LText = Utils.formatOptions(param.LText) @@ -828,8 +855,15 @@ param.secretkey = Utils.encrypt('', param.timestamp) if (visible === 'edit') { - // param.LText = selectApp.sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}'`) - param.LText = selectApp.sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || ''}','${item.sms_id || ''}','${window.btoa(window.encodeURIComponent(JSON.stringify({copyright: item.copyright || '', logo: item.logo || '', apptype: item.apptype || '', delay: item.delay || 0, statusBarColor: item.statusBarColor || 'black', adapter: item.adapter || 'false'})))}'`) + selectApp.sublist = selectApp.sublist.map(item => { + if (item.typename !== 'pc') { + item.userbind = md5(selectApp.kei_no + item.typename + item.lang).replace(/^.{8}/, 'userbind') + item.instantMessage = md5(selectApp.kei_no + item.typename + item.lang).replace(/^.{14}/, 'instantmessage') + } + return item + }) + + param.LText = selectApp.sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || 'false'}','','${window.btoa(window.encodeURIComponent(JSON.stringify({userbind: item.userbind || '', instantMessage: item.instantMessage || '', apptype: item.apptype || '', delay: item.delay || 0, statusBarColor: item.statusBarColor || 'black', sysBgColor: item.sysBgColor || '#ffffff', adapter: item.adapter || ''})))}'`) param.LText = param.LText.join(' union all ') param.LText = Utils.formatOptions(param.LText) } @@ -914,8 +948,15 @@ }) } - // param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','${item.login_types || 'true'}','${item.link_type || 'true'}','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}'`) - param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || ''}','${item.sms_id || ''}','${window.btoa(window.encodeURIComponent(JSON.stringify({copyright: item.copyright || '', logo: item.logo || '', apptype: item.apptype || '', delay: item.delay || 0, statusBarColor: item.statusBarColor || 'black', adapter: item.adapter || 'false'})))}'`) + sublist = sublist.map(item => { + if (item.typename !== 'pc') { + item.userbind = md5(selectApp.kei_no + item.typename + item.lang).replace(/^.{8}/, 'userbind') + item.instantMessage = md5(selectApp.kei_no + item.typename + item.lang).replace(/^.{14}/, 'instantmessage') + } + return item + }) + + param.LText = sublist.map(item => `select '${item.ID}','${item.typename}','${selectApp.ID}','${sessionStorage.getItem('CloudUserID') || ''}','${window.GLOB.appkey || ''}','false','false','${item.role_type || 'true'}','${item.lang || 'zh-CN'}','${item.css || ''}','${item.title || ''}','${item.favicon || ''}','${item.user_binding || 'false'}','','${window.btoa(window.encodeURIComponent(JSON.stringify({userbind: item.userbind || '', instantMessage: item.instantMessage || '', apptype: item.apptype || '', delay: item.delay || 0, statusBarColor: item.statusBarColor || 'black', sysBgColor: item.sysBgColor || '#ffffff', adapter: item.adapter || ''})))}'`) param.LText = param.LText.join(' union all ') param.LText = Utils.formatOptions(param.LText) @@ -1033,13 +1074,8 @@ let css = skinStyle[item.css] ? skinStyle[item.css].name : '' let color = skinStyle[item.css] ? skinStyle[item.css].color : '#e8e8e8' let binding = '' - if (item.user_binding) { - if (item.user_binding.indexOf('uname_pwd') > -1) { - binding = '鐢ㄦ埛鍚�' - } - if (item.user_binding.indexOf('sms_vcode') > -1) { - binding = binding ? binding + '锛屾墜鏈哄彿' : '鎵嬫満鍙�' - } + if (item.user_binding === 'true') { + binding = '闇�瑕�' } return ( <div className="sub-app" key={index} style={{borderColor: color}}> @@ -1095,18 +1131,6 @@ <div className="app-item"> <div className="label">缃戠珯澶村儚:</div> <div className="content">{item.favicon ? <img style={{width: '18px', height: '18px'}} src={item.favicon} alt="" /> : '鏃�'}</div> - </div> - </Col> - <Col span={12}> - <div className="app-item"> - <div className="label">鐗堟潈:</div> - <div className="content">{item.copyright || '鏃�'}</div> - </div> - </Col> - <Col span={12}> - <div className="app-item"> - <div className="label">LOGO:</div> - <div className="content">{item.logo ? <img style={{height: '18px'}} src={item.logo} alt="" /> : '鏃�'}</div> </div> </Col> </Row> diff --git a/src/views/appmanage/index.scss b/src/views/appmanage/index.scss index 2594659..65395e4 100644 --- a/src/views/appmanage/index.scss +++ b/src/views/appmanage/index.scss @@ -66,7 +66,7 @@ .sub-app { margin: 10px 10px 25px; border: 1px solid #e8e8e8; - height: 210px; + height: 185px; border-radius: 4px; padding-top: 10px; @@ -95,7 +95,7 @@ .action { text-align: right; padding: 5px 20px; - margin-top: 5px; + margin-top: 10px; border-top: 1px solid #e8e8e8; .ant-typography-copy { diff --git a/src/views/appmanage/submutilform/index.jsx b/src/views/appmanage/submutilform/index.jsx index 96b98d8..bc52f1f 100644 --- a/src/views/appmanage/submutilform/index.jsx +++ b/src/views/appmanage/submutilform/index.jsx @@ -1,11 +1,12 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Select, Radio, Input, Tooltip, notification, InputNumber, Checkbox } from 'antd' +import { Form, Row, Col, Select, Radio, Input, Tooltip, InputNumber, Checkbox } from 'antd' import { QuestionCircleOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import './index.scss' +const ColorSketch = asyncComponent(() => import('@/mob/colorsketch')) const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent')) class MainSearch extends Component { @@ -15,20 +16,19 @@ inputSubmit: PropTypes.func // input鍥炶溅鎻愪氦 } - state = {msgs: [], typename: 'mob', user_binding: []} + state = {typename: 'mob', adapters: []} UNSAFE_componentWillMount() { const { card } = this.props - let msgs = sessionStorage.getItem('msgTemplate') - let user_binding = [] + let adapters = [] let typename = 'mob' if (card) { typename = card.typename || 'mob' - user_binding = card.user_binding ? card.user_binding.split(',') : [] + adapters = card.adapter ? card.adapter.split(',') : [] } - this.setState({msgs: JSON.parse(msgs), typename, user_binding}) + this.setState({typename, adapters}) } /** @@ -38,23 +38,31 @@ return new Promise(resolve => { this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { - values.user_binding = values.user_binding ? values.user_binding.join(',') : '' - if (values.user_binding.indexOf('sms_vcode') > -1 && !values.sms_id) { - notification.warning({ - top: 92, - message: '鎵嬫満鍙风粦瀹氭椂锛岄渶瑕佺煭淇℃ā鏉匡紒', - duration: 5 - }) - return - } + // values.user_binding = values.user_binding ? values.user_binding.join(',') : '' + values.adapter = values.adapter ? values.adapter.join(',') : '' + // if (values.user_binding.indexOf('sms_vcode') > -1 && !values.sms_id) { + // notification.warning({ + // top: 92, + // message: '鎵嬫満鍙风粦瀹氭椂锛岄渶瑕佺煭淇℃ā鏉匡紒', + // duration: 5 + // }) + // return + // } resolve(values) } }) }) } - onChange = (vals) => { - this.setState({user_binding: vals}) + // onChange = (vals) => { + // this.setState({user_binding: vals}) + // } + + onAdapterChange = (vals) => { + this.setState({adapters: vals}) + // if (!vals.includes('weixin') && !vals.includes('wxmini')) { + // this.setState({user_binding: []}) + // } } /** @@ -68,7 +76,7 @@ render() { const { card, type } = this.props const { getFieldDecorator } = this.props.form - const { msgs, typename, user_binding } = this.state + const { typename, adapters } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, @@ -89,7 +97,7 @@ initialValue: typename })( <Select disabled={type === 'edit'} onChange={(val) => this.setState({typename: val})}> - <Select.Option value="mob">绉诲姩绔�(鍖呮嫭android銆乮os)</Select.Option> + <Select.Option value="mob">绉诲姩绔�</Select.Option> <Select.Option value="pad">Pad绔�</Select.Option> <Select.Option value="pc">PC绔�</Select.Option> </Select> @@ -108,18 +116,6 @@ )} </Form.Item> </Col> - {/* <Col span={12}> - <Form.Item label="鐧诲綍"> - {getFieldDecorator('login_types', { - initialValue: card ? card.login_types || 'true' : 'true' - })( - <Radio.Group> - <Radio value="true">闇�瑕�</Radio> - <Radio value="false">涓嶉渶瑕�</Radio> - </Radio.Group> - )} - </Form.Item> - </Col> */} <Col span={12}> <Form.Item label="鏉冮檺绠$悊"> {getFieldDecorator('role_type', { @@ -157,25 +153,37 @@ </Form.Item> </Col> {typename !== 'pc' ? <Col span={12}> - <Form.Item label={ - <Tooltip placement="topLeft" title="浣跨敤鍏紬鍙锋巿鏉冪櫥褰曟垨浣跨敤灏忕▼搴忔椂锛屾槸鍚﹂渶瑕佺粦瀹氱敤鎴枫��"> - <QuestionCircleOutlined className="mk-form-tip" /> - 鐢ㄦ埛缁戝畾 - </Tooltip> - }> - {getFieldDecorator('user_binding', { - initialValue: user_binding + <Form.Item label="閫傞厤"> + {getFieldDecorator('adapter', { + initialValue: adapters })( - <Checkbox.Group onChange={this.onChange}> - <Checkbox value="uname_pwd">璐﹀彿</Checkbox> - <Checkbox value="sms_vcode">鎵嬫満鐭俊</Checkbox> + <Checkbox.Group onChange={this.onAdapterChange}> + <Checkbox value="app">app</Checkbox> + <Checkbox value="weixin">鍏紬鍙�</Checkbox> + <Checkbox value="wxmini">灏忕▼搴�</Checkbox> </Checkbox.Group> )} </Form.Item> </Col> : null} - {typename !== 'pc' && user_binding.includes('sms_vcode') ? <Col span={12}> + {typename !== 'pc' && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={12}> + <Form.Item label="鐢ㄦ埛缁戝畾"> + {getFieldDecorator('user_binding', { + initialValue: card ? card.user_binding : 'false' + })( + <Radio.Group> + <Radio value="true">闇�瑕�</Radio> + <Radio value="false">涓嶉渶瑕�</Radio> + </Radio.Group> + // <Checkbox.Group onChange={this.onChange}> + // <Checkbox value="uname_pwd">璐﹀彿</Checkbox> + // <Checkbox value="sms_vcode">鎵嬫満鐭俊</Checkbox> + // </Checkbox.Group> + )} + </Form.Item> + </Col> : null} + {/* {typename !== 'pc' && user_binding.includes('sms_vcode') ? <Col span={12}> <Form.Item label={ - <Tooltip placement="topLeft" title="鐭俊妯℃澘鍙湪绠$悊绯荤粺 HS-濂囦簯鐭俊妯℃澘 澶勬坊鍔犮��"> + <Tooltip placement="topLeft" title="鐭俊妯℃澘鍙湪 浜戠郴缁�->搴旂敤鏈嶅姟->寮�鍙戣�呬腑蹇�->鐭俊妯℃澘 澶勬坊鍔犮��"> <QuestionCircleOutlined className="mk-form-tip" /> 鐭俊妯℃澘 </Tooltip> @@ -194,7 +202,7 @@ </Select> )} </Form.Item> - </Col> : null} + </Col> : null} */} <Col span={12}> <Form.Item label="鏍囬"> {getFieldDecorator('title', { @@ -211,7 +219,7 @@ )} </Form.Item> </Col> - {typename !== 'pc' && user_binding.length > 0 ? <Col span={12}> + {/* {typename !== 'pc' && user_binding.length > 0 ? <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title="浣跨敤寰俊鎺堟潈鐧诲綍鏃讹紝缁戝畾鐢ㄦ埛椤甸潰鐨勭増鏉冨0鏄庯紝娉細鍙坊鍔爃tml鏍囩銆�"> <QuestionCircleOutlined className="mk-form-tip" /> @@ -236,8 +244,8 @@ <SourceComponent type="picture" placement="right"/> )} </Form.Item> - </Col> : null} - {typename !== 'pc' ? <Col span={12}> + </Col> : null} */} + {typename !== 'pc' && adapters.includes('app') ? <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title="鍦ㄤ娇鐢ㄦ槑绉戜簯APP鏃讹紝椤甸潰鐨勫垏鎹㈡ā寮�"> <QuestionCircleOutlined className="mk-form-tip" /> @@ -256,7 +264,7 @@ </Col> : null} {typename !== 'pc' ? <Col span={12}> <Form.Item label={ - <Tooltip placement="topLeft" title="鍦ㄤ娇鐢ㄦ槑绉戜簯APP鏃讹紝涓斿湪app妯″紡涓棤鏁�"> + <Tooltip placement="topLeft" title="鍦ㄤ娇鐢ㄥ皬绋嬪簭鎴栨槑绉戜簯APP鏃讹紙app妯″紡涓級鏃犳晥"> <QuestionCircleOutlined className="mk-form-tip" /> 寤惰繜鍔犺浇(ms) </Tooltip> @@ -266,7 +274,7 @@ })(<InputNumber min={0} max={5000} precision={0} onPressEnter={this.handleSubmit}/>)} </Form.Item> </Col> : null} - {typename !== 'pc' ? <Col span={12}> + {typename !== 'pc' && adapters.includes('app') ? <Col span={12}> <Form.Item label={ <Tooltip placement="topLeft" title="鍦ㄤ娇鐢ㄦ槑绉戜簯APP鏃讹紝鐘舵�佹爮鐨勫瓧浣撻鑹层��"> <QuestionCircleOutlined className="mk-form-tip" /> @@ -283,23 +291,20 @@ )} </Form.Item> </Col> : null} - {typename !== 'pc' ? <Col span={12}> - <Form.Item label={ - <Tooltip placement="topLeft" title="璇风‘璁ゅ綋鍓嶅簲鐢ㄦ槸鍚﹀湪灏忕▼搴忎腑浣跨敤銆�"> + <Col span={12}> + <Form.Item className="sys-bgcolor" label={ + <Tooltip placement="topLeft" title="瀛愬簲鐢ㄩ�氱敤鐨勮儗鏅壊锛屽瓙搴旂敤椤甸潰鍒涘缓鏃朵細榛樿娣诲姞姝よ儗鏅壊銆�"> <QuestionCircleOutlined className="mk-form-tip" /> - 灏忕▼搴� + 鑳屾櫙鑹� </Tooltip> }> - {getFieldDecorator('adapter', { - initialValue: card ? card.adapter || 'false' : 'false' + {getFieldDecorator('sysBgColor', { + initialValue: card ? card.sysBgColor || '#ffffff' : '#ffffff' })( - <Radio.Group> - <Radio value="false">涓嶉�傞厤</Radio> - <Radio value="true">閫傞厤</Radio> - </Radio.Group> + <ColorSketch/> )} </Form.Item> - </Col> : null} + </Col> </Row> </Form> ) diff --git a/src/views/appmanage/submutilform/index.scss b/src/views/appmanage/submutilform/index.scss index 4adee58..7b121c8 100644 --- a/src/views/appmanage/submutilform/index.scss +++ b/src/views/appmanage/submutilform/index.scss @@ -15,4 +15,9 @@ .ant-form-item-with-help { margin-bottom: 24px; } + .sys-bgcolor { + .ant-form-item-children { + padding-top: 7px; + } + } } \ No newline at end of file diff --git a/src/views/billprint/index.jsx b/src/views/billprint/index.jsx index 7307a3d..a3764b8 100644 --- a/src/views/billprint/index.jsx +++ b/src/views/billprint/index.jsx @@ -17,12 +17,14 @@ // 閫氱敤缁勪欢 const AntvBarAndLine = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-bar-line')) const AntvPie = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-pie')) +const AntvDashboard = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-dashboard')) +const AntvScatter = asyncComponent(() => import('@/tabviews/custom/components/chart/antv-scatter')) const DataCard = asyncComponent(() => import('@/tabviews/custom/components/card/data-card')) const PropCard = asyncComponent(() => import('@/tabviews/custom/components/card/prop-card')) const TableCard = asyncComponent(() => import('@/tabviews/custom/components/card/table-card')) const NormalTable = asyncComponent(() => import('@/tabviews/custom/components/table/normal-table')) -const BraftEditor = asyncComponent(() => import('@/tabviews/custom/components/editor/braft-editor')) const SandBox = asyncComponent(() => import('@/tabviews/custom/components/code/sand-box')) +const TimeLine = asyncComponent(() => import('@/tabviews/custom/components/timeline/normal-timeline')) class BillPrint extends Component { state = { @@ -591,6 +593,18 @@ <AntvPie config={item} initdata={item.data} mainSearch={[]} menuType="" /> </Col> ) + } else if (item.type === 'scatter') { + return ( + <Col span={item.width} key={item.uuid}> + <AntvScatter config={item} initdata={item.data} mainSearch={[]} menuType="" /> + </Col> + ) + } else if (item.type === 'dashboard') { + return ( + <Col span={item.width} key={item.uuid}> + <AntvDashboard config={item} initdata={item.data} mainSearch={[]} menuType="" /> + </Col> + ) } else if (item.type === 'card' && item.subtype === 'datacard') { return ( <Col span={item.width} key={item.uuid}> @@ -615,18 +629,18 @@ <NormalTable config={item} initdata={item.data} mainSearch={[]} menuType="" /> </Col> ) - } else if (item.type === 'editor') { - return ( - <Col span={item.width} key={item.uuid}> - <BraftEditor config={item} initdata={item.data} mainSearch={[]} menuType="" /> - </Col> - ) } else if (item.type === 'code') { return ( <Col span={item.width} key={item.uuid}> <SandBox config={item} initdata={item.data} mainSearch={[]} menuType="" /> </Col> ) + } else if (item.type === 'timeline') { + return ( + <Col span={item.width} key={item.uuid}> + <TimeLine config={item} initdata={item.data} menuType="" /> + </Col> + ) } else { return null } diff --git a/src/views/design/header/index.jsx b/src/views/design/header/index.jsx index fbb0c7b..cf022a1 100644 --- a/src/views/design/header/index.jsx +++ b/src/views/design/header/index.jsx @@ -2,7 +2,8 @@ import { withRouter } from 'react-router-dom' import {connect} from 'react-redux' import { is, fromJS } from 'immutable' -import { Dropdown, Menu, Icon, Modal, notification, Switch, Button } from 'antd' +import { Dropdown, Menu, Modal, notification, Switch, Button } from 'antd' +import { MenuFoldOutlined, EditOutlined, AppstoreOutlined, DownOutlined, HomeOutlined, ApiOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import { @@ -310,7 +311,7 @@ <header className={'sys-header-container ant-menu-dark ' + (['level2', 'level3', 'HS'].includes(editLevel) ? 'mask' : '')} id="main-header-container"> <div className="header-logo"><img src={MainLogo} alt=""/></div> <div className="header-collapse"> - <Icon type="menu-fold"/> + <MenuFoldOutlined/> </div> {/* 姝e父鑿滃崟 */} {editLevel !== 'level1' && menulist ? @@ -331,10 +332,10 @@ } {editLevel === 'HS' ? <Button className="level4-close" type="primary" onClick={this.exitManage}>閫�鍑�</Button> : null} {/* 杩涘叆缂栬緫鎸夐挳 */} - {!editLevel && menulist ? <Icon onClick={this.enterEdit} className="edit-check" type="edit" /> : null} - {!editLevel && options.sysType === 'local' && window.GLOB.systemType !== 'production' ? + {!editLevel && menulist ? <EditOutlined onClick={this.enterEdit} className="edit-check" /> : null} + {!editLevel && options.sysType === 'local' && window.GLOB.systemType !== 'production' && this.props.memberLevel >= 20 ? <div className="app-entrance entrance"> - <div className="icon"><Icon type="appstore" /></div> + <div className="icon"><AppstoreOutlined /></div> <div className="title">搴旂敤绠$悊</div> <div className="detail">鍙垱寤哄強绠$悊PC銆乸ad鍙婄Щ鍔ㄧ绛変笉鍚岃澶囩殑搴旂敤锛屽疄鐜版槑绉戜簯APP銆佸井淇″叕浼楀彿銆佸皬绋嬪簭绛夊骞冲彴鐨勫簲鐢ㄥ叡浜��</div> <Button type="primary" onClick={() => {window.open('#/appmanage')}}> @@ -344,7 +345,7 @@ } {editLevel === 'HS' && options.sysType === 'local' && window.GLOB.systemType === 'production' ? <div className="app-prod-entrance entrance"> - <div className="icon"><Icon type="appstore" /></div> + <div className="icon"><AppstoreOutlined /></div> <div className="title">搴旂敤绠$悊</div> <div className="detail">鍙垱寤哄強绠$悊PC銆乸ad鍙婄Щ鍔ㄧ绛変笉鍚岃澶囩殑搴旂敤锛屽疄鐜版槑绉戜簯APP銆佸井淇″叕浼楀彿銆佸皬绋嬪簭绛夊骞冲彴鐨勫簲鐢ㄥ叡浜��</div> <Button type="primary" onClick={() => {window.open('#/appcheck')}}> @@ -354,7 +355,7 @@ } {!editLevel && options.sysType === 'local' ? <div className="api-entrance entrance"> - <div className="icon"><Icon type="api" /></div> + <div className="icon"><ApiOutlined /></div> <div className="title">鎺ュ彛璋冭瘯</div> <div className="detail">鍙嚜鍔ㄥ鐞嗙櫥褰曟帴鍙g殑鍙傛暟鍔犲瘑锛屼互鍙婁笟鍔℃帴鍙g殑绛惧悕璁$畻锛屾柟渚垮紑鍙戜汉鍛樼殑鎺ュ彛娴嬭瘯宸ヤ綔銆�</div> <Button type="primary" onClick={() => {window.open('#/interface')}}> @@ -365,7 +366,7 @@ {/* window.btoa(window.encodeURIComponent(JSON.stringify({ MenuType: 'home', MenuId: 'home_page_id', MenuName: '棣栭〉' }))) */} {!editLevel && window.GLOB.systemType !== 'production' ? <div className="home-entrance entrance"> - <div className="icon"><Icon type="home" /></div> + <div className="icon"><HomeOutlined /></div> <div className="title">棣栭〉</div> <div className="detail">鍩轰簬鑷畾涔夐〉闈㈢殑棣栭〉璁捐锛屽彲瀹炵幇鐏垫椿鐨勫厓绱犻厤缃強鏍峰紡璋冩暣锛屽睍鐜板綋鍓嶇郴缁熺殑椋庢牸銆�</div> <Button type="primary" onClick={() => {window.open('#/menudesign/JTdCJTIyTWVudVR5cGUlMjIlM0ElMjJob21lJTIyJTJDJTIyTWVudUlkJTIyJTNBJTIyaG9tZV9wYWdlX2lkJTIyJTJDJTIyTWVudU5hbWUlMjIlM0ElMjIlRTklQTYlOTYlRTklQTElQjUlMjIlN0Q=')}}> @@ -392,7 +393,7 @@ <div style={{zIndex: 1, position: 'relative'}}> <img src={this.state.avatar || avatar} alt=""/> <span> - <span className="username">{this.state.userName}</span> <Icon type="down" /> + <span className="username">{this.state.userName}</span> <DownOutlined /> </span> </div> </Dropdown> diff --git a/src/views/design/header/index.scss b/src/views/design/header/index.scss index 03252cd..4da19da 100644 --- a/src/views/design/header/index.scss +++ b/src/views/design/header/index.scss @@ -29,7 +29,7 @@ line-height: 48px; padding-left: 10px; margin: 0 10px; - i { + .anticon { position: relative; top: 3px; font-size: 20px; diff --git a/src/views/design/header/versions/index.jsx b/src/views/design/header/versions/index.jsx index 6013932..b2883da 100644 --- a/src/views/design/header/versions/index.jsx +++ b/src/views/design/header/versions/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import { is, fromJS } from 'immutable' -import { Modal, notification, Timeline, Icon, Button, Typography } from 'antd' +import { Modal, notification, Timeline, Button, Typography } from 'antd' +import { ClockCircleOutlined, SyncOutlined, WarningOutlined, CheckCircleOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/api' @@ -423,14 +424,14 @@ > <Timeline> {versions && versions.map(item => { - let icon = <Icon type="clock-circle-o" style={{ fontSize: '16px' }} /> + let icon = <ClockCircleOutlined style={{ fontSize: '16px' }} /> if (item.status === 'loading') { - icon = <Icon type="sync" spin style={{ fontSize: '16px' }} /> + icon = <SyncOutlined spin style={{ fontSize: '16px' }} /> } else if (item.status === 'done') { if (item.warning) { - icon = <Icon type="warning" style={{ fontSize: '16px', color: 'orange' }}/> + icon = <WarningOutlined style={{ fontSize: '16px', color: 'orange' }}/> } else { - icon = <Icon type="check-circle" style={{ fontSize: '16px', color: '#52c41a' }} /> + icon = <CheckCircleOutlined style={{ fontSize: '16px', color: '#52c41a' }} /> } } return ( diff --git a/src/views/design/sidemenu/config.jsx b/src/views/design/sidemenu/config.jsx index 804b697..a9c12b3 100644 --- a/src/views/design/sidemenu/config.jsx +++ b/src/views/design/sidemenu/config.jsx @@ -185,13 +185,13 @@ // MenuID: '15900310928174dro07ihfckghpb5h13', // MenuNo: 'bd_msn_sms_tempM', // MenuName: '澶т簬鐭俊妯℃澘', - }, { - src: '', - PageParam: {OpenType: 'newtab', Template: 'ManageTable'}, - type: 'ManageTable', - MenuID: '1599613340050c8nu6rbst9d4emnnbsq', - MenuNo: 's_sms_qxM', - MenuName: '濂囦簯鐭俊妯℃澘', + // }, { + // src: '', + // PageParam: {OpenType: 'newtab', Template: 'ManageTable'}, + // type: 'ManageTable', + // MenuID: '1599613340050c8nu6rbst9d4emnnbsq', + // MenuNo: 's_sms_qxM', + // MenuName: '濂囦簯鐭俊妯℃澘', }] }, { MenuID: 'systemPayManage', diff --git a/src/views/design/sidemenu/index.jsx b/src/views/design/sidemenu/index.jsx index 46ef739..06454bb 100644 --- a/src/views/design/sidemenu/index.jsx +++ b/src/views/design/sidemenu/index.jsx @@ -1,16 +1,16 @@ import React, {Component} from 'react' import { connect } from 'react-redux' import { is, fromJS } from 'immutable' -import { Menu, Icon, notification } from 'antd' +import { Menu, notification } from 'antd' +import { EditOutlined } from '@ant-design/icons' import asyncComponent from '@/utils/asyncComponent' import { resetEditLevel, modifyMenuTree, modifyMainMenu } from '@/store/action' import { SySMenuList } from './config' import options from '@/store/options.js' -import zhCN from '@/locales/zh-CN/main.js' -import enUS from '@/locales/en-US/main.js' import Api from '@/api' import MKEmitter from '@/utils/events.js' +import MkIcon from '@/components/mk-icon' import './index.scss' const EditSecMenu = asyncComponent(() => import('@/templates/menuconfig/editsecmenu')) @@ -19,7 +19,6 @@ class Sidemenu extends Component { state = { - dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, subMenulist: [], // 浜岀骇鑿滃崟 editMenu: null, // 缂栬緫涓夌骇鑿滃崟鏃惰缃� rootSubmenuKeys: null, @@ -241,20 +240,20 @@ <aside className="mk-sys-side-menu ant-menu-dark mk-edit"> {!(this.props.editLevel === 'level2' || this.props.editLevel === 'level3') && <Menu openKeys={this.state.openKeys} onOpenChange={this.onOpenChange} mode="inline" theme="dark"> - {!this.props.editLevel && mainMenu ? <li className="sup-menu"><Icon onClick={this.enterSubEdit} className="edit-check" type="edit" /></li> : null} + {!this.props.editLevel && mainMenu ? <li className="sup-menu"><EditOutlined onClick={this.enterSubEdit} className="edit-check"/></li> : null} {this.state.subMenulist && this.state.subMenulist.map((item, index) => { return ( <SubMenu key={item.MenuID} title={ <span className={!this.props.editLevel && index === 0 ? 'edit-control' : ''}> - <Icon type={item.PageParam.Icon} /> + <MkIcon type={item.PageParam.Icon} /> <span>{item.MenuName}</span> </span> } > {!this.props.editLevel ? <li className={'ant-menu-item ' + (item.children.length > 0 ? 'sub-menu' : '')}> - <Icon onClick={(e) => {this.enterThrEdit(e, item)}} className="edit-check" type="edit" /> + <EditOutlined onClick={(e) => {this.enterThrEdit(e, item)}} className="edit-check"/> </li> : null} {item.children.map(cell => { return ( diff --git a/src/views/imdesign/index.jsx b/src/views/imdesign/index.jsx new file mode 100644 index 0000000..d0ee0c7 --- /dev/null +++ b/src/views/imdesign/index.jsx @@ -0,0 +1,568 @@ +import React, { Component } from 'react' +import { withRouter } from 'react-router' +import { is, fromJS } from 'immutable' +import moment from 'moment' +import { ConfigProvider, notification, Modal, Collapse, Button, Spin } from 'antd' +import { DoubleLeftOutlined, DoubleRightOutlined, LeftOutlined, UserOutlined, EllipsisOutlined } from '@ant-design/icons' + +import Api from '@/api' +import Utils from '@/utils/utils.js' +import zhCN from '@/locales/zh-CN/mob.js' +import enUS from '@/locales/en-US/mob.js' +import antdEnUS from 'antd/es/locale/en_US' +import antdZhCN from 'antd/es/locale/zh_CN' +// import MKEmitter from '@/utils/events.js' +import asyncComponent from '@/utils/asyncComponent' +import getWrapForm from './options' + +import './index.scss' + +const { Panel } = Collapse +const { confirm } = Modal + +const Header = asyncComponent(() => import('@/mob/header')) +const MenuForm = asyncComponent(() => import('./menuform')) +const CreateView = asyncComponent(() => import('@/pc/createview')) +const Transfer = asyncComponent(() => import('@/pc/transfer')) +const BgController = asyncComponent(() => import('@/pc/bgcontroller')) +const StyleController = asyncComponent(() => import('@/menu/stylecontroller')) +const NormalForm = asyncComponent(() => import('@/components/normalform')) + +sessionStorage.setItem('isEditState', 'true') +sessionStorage.setItem('appType', 'mob') // 搴旂敤绫诲瀷 +document.body.className = '' +window.GLOB.CacheIndependent = new Map() + +class ImDesign extends Component { + state = { + localedict: sessionStorage.getItem('lang') !== 'en-US' ? antdZhCN : antdEnUS, + dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, + loading: true, + MenuId: '', + MenuName: '', + MenuNo: '', + menuloading: false, + oriConfig: null, + config: null, + direction: 'vertical', + settingshow: true, + controlshow: true, + } + + UNSAFE_componentWillMount() { + try { + let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param))) + + if (param.type === 'app') { + sessionStorage.setItem('appId', param.ID || '') + sessionStorage.setItem('lang', param.lang || 'zh-CN') + sessionStorage.setItem('kei_no', param.kei_no || '') + sessionStorage.setItem('role_type', param.role_type || 'true') + sessionStorage.setItem('login_types', param.login_types || 'false') + sessionStorage.setItem('typename', param.typename || 'mob') + sessionStorage.setItem('adapter', param.adapter || '') + sessionStorage.setItem('sysBgColor', param.sysBgColor || '#ffffff') + sessionStorage.setItem('userbind', param.userbind || '') + sessionStorage.setItem('instantMessage', param.instantMessage || '') + + this.setState({ + localedict: sessionStorage.getItem('lang') !== 'en-US' ? antdZhCN : antdEnUS, + dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS + }) + this.getAppMessage(param.MenuID) + } else if (param.type === 'view') { + window.GLOB.winWidth = 420 + window.GLOB.winHeight = 738 + window.GLOB.shellWidth = 376 + window.GLOB.shellHeight = 680 + + if (sessionStorage.getItem('typename') === 'pad') { + window.GLOB.winWidth = 736 + window.GLOB.winHeight = 945 + window.GLOB.shellWidth = 640 + window.GLOB.shellHeight = 853 + } + + this.setState({ + MenuId: param.MenuID, + }, () => { + this.getMenuParam() + }) + } + } catch (e) { + notification.warning({ + top: 92, + message: '鑿滃崟淇℃伅瑙f瀽閿欒锛�', + duration: 5 + }) + } + } + + shouldComponentUpdate (nextProps, nextState) { + return !is(fromJS(this.state), fromJS(nextState)) + } + + componentDidMount () { + setTimeout(() => { + this.getAppPictures() + }, 1000) + + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } + if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (_shortcut === 'ctrl+83') { + let node = document.getElementById('save-config') + if (node) { + node.click() + } + return false + } + } + } + + /** + * @description 缁勪欢閿�姣侊紝娓呴櫎state鏇存柊 + */ + componentWillUnmount () { + this.setState = () => { + return + } + } + + changeEditMenu = () => { + const { oriConfig, config } = this.state + + if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) { + notification.warning({ + top: 92, + message: '閰嶇疆淇℃伅鏈繚瀛橈紒', + duration: 5 + }) + return + } + + let param = { + MenuID: config.wrap.linkmenu, + copyMenuId: '', + type: 'view' + } + + param = window.btoa(window.encodeURIComponent(JSON.stringify(param))) + + this.props.history.push('/mobdesign/' + param) + } + + getAppMessage = (MenuID) => { + Api.getSystemConfig({ + func: 's_get_keyids', + bid: sessionStorage.getItem('appId') + }).then(res => { + if (!res.status) { + notification.warning({ + top: 92, + message: res.message, + duration: 5 + }) + return + } + + let appViewList = [] + if (res.data && res.data.length > 0) { + appViewList = res.data + } + + sessionStorage.setItem('appViewList', JSON.stringify(appViewList)) + this.props.history.replace('/imdesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({MenuID: MenuID, type: 'view'})))) + window.location.reload() + }) + } + + getAppPictures = () => { + if (sessionStorage.getItem('app_videos') || sessionStorage.getItem('app_pictures')) return + + Api.getSystemConfig({ + func: 's_url_db_adduptdel', + PageIndex: 0, // 0 浠h〃鍏ㄩ儴 + PageSize: 0, // 0 浠h〃鍏ㄩ儴 + typecharone: 'image', + type: 'search' + }).then(res => { + if (res.status) { + sessionStorage.setItem('app_pictures', JSON.stringify(res.data || [])) + } + + Api.getSystemConfig({ + func: 's_url_db_adduptdel', + PageIndex: 0, // 0 浠h〃鍏ㄩ儴 + PageSize: 0, // 0 浠h〃鍏ㄩ儴 + typecharone: 'video', + type: 'search' + }).then(res => { + if (res.status) { + sessionStorage.setItem('app_videos', JSON.stringify(res.data || [])) + } + }) + Api.getSystemConfig({ + func: 's_url_db_adduptdel', + PageIndex: 0, // 0 浠h〃鍏ㄩ儴 + PageSize: 0, // 0 浠h〃鍏ㄩ儴 + typecharone: 'color', + type: 'search' + }).then(res => { + if (res.status) { + sessionStorage.setItem('app_colors', JSON.stringify(res.data || [])) + } + }) + }) + } + + closeView = () => { + const { oriConfig, config } = this.state + + if (!config) { + window.close() + } else if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) { + confirm({ + title: '閰嶇疆淇℃伅鏈繚瀛橈紝纭畾鍏抽棴鍚楋紵', + content: '', + onOk() { + window.close() + }, + onCancel() {} + }) + } else { + window.close() + } + } + + backView = () => { + const { oriConfig, config } = this.state + + if (!config) { + window.history.back() + } else if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) { + confirm({ + title: '閰嶇疆淇℃伅鏈繚瀛橈紝纭畾鍚庨��鍚楋紵', + content: '', + onOk() { + window.history.back() + }, + onCancel() {} + }) + } else { + window.history.back() + } + } + + getMenuParam = () => { + const { MenuId } = this.state + + let param = { + func: 'sPC_Get_LongParam', + TypeCharOne: sessionStorage.getItem('kei_no'), + typename: sessionStorage.getItem('typename'), + MenuID: MenuId + } + + Api.getSystemConfig(param).then(result => { + if (!result.status) { + notification.warning({ + top: 92, + message: result.message, + duration: 5 + }) + this.setState({loading: false}) + return + } + + let config = null + let isCreate = false + + try { + config = result.LongParam ? JSON.parse(window.decodeURIComponent(window.atob(result.LongParam))) : null + } catch (e) { + console.warn('Parse Failure') + config = null + } + + if (!config) { + isCreate = true + config = { + version: 1.0, + // uuid: MenuId, + // MenuID: MenuId, + Template: 'imPage', + enabled: false, + MenuName: '鍗虫椂閫氫俊', + MenuNo: 'im', + tables: [], + components: [], + viewType: 'im', + wrap: {}, + style: { + backgroundColor: '#ededed', backgroundImage: '' + } + } + } + + config.uuid = MenuId + config.MenuID = MenuId + config.open_edition = result.open_edition || '' + + this.setState({ + oriConfig: isCreate ? null : config, + config: fromJS(config).toJS(), + loading: false + }) + }) + this.getAppMenus() + } + + getAppMenus = () => { + let _param = { + func: 's_get_app_menus', + TypeCharOne: sessionStorage.getItem('kei_no'), + typename: sessionStorage.getItem('typename'), + LText: `select '${window.GLOB.appkey}'`, + timestamp: moment().format('YYYY-MM-DD HH:mm:ss') + } + + _param.secretkey = Utils.encrypt(_param.LText, _param.timestamp) + + Api.getSystemConfig(_param).then(res => { + if (!res.status) { + notification.warning({ + top: 92, + message: res.message, + duration: 5 + }) + return + } + + let appIndeList = sessionStorage.getItem('appViewList') + appIndeList = JSON.parse(appIndeList) + appIndeList = appIndeList.map(item => (item.keys_type !== 'index' ? item.keys_id : '')).join(',') + + if (sessionStorage.getItem('userbind')) { + appIndeList = appIndeList + ',' + sessionStorage.getItem('userbind') + } + if (sessionStorage.getItem('instantMessage')) { + appIndeList = appIndeList + ',' + sessionStorage.getItem('instantMessage') + } + + let menus = res.menus.filter(item => appIndeList.indexOf(item.MenuID) === -1) + menus = menus.map(item => { + item.value = item.MenuID + item.label = item.MenuName + return item + }) + sessionStorage.setItem('appMenus', JSON.stringify(menus)) + }) + } + + submitConfig = () => { + let config = fromJS(this.state.config).toJS() + + if (!config.MenuName || !config.MenuNo) { + notification.warning({ + top: 92, + message: '璇峰畬鍠勮彍鍗曞熀鏈俊鎭紒', + duration: 5 + }) + this.setState({ + settingshow: true + }) + return + } + + this.setState({ + menuloading: true + }) + + setTimeout(() => { + let param = { + func: 'sPC_TrdMenu_AddUpt', + FstID: 'mk_app', + SndID: 'mk_app', + ParentID: 'mk_app', + MenuID: config.uuid, + MenuNo: config.MenuNo || '', + EasyCode: '', + Template: 'imPage', + TypeCharOne: sessionStorage.getItem('kei_no'), + Typename: sessionStorage.getItem('typename'), + MenuName: config.MenuName || '', + PageParam: JSON.stringify({Template: 'imPage'}), + open_edition: config.open_edition, + menus_rolelist: window.btoa(window.encodeURIComponent(JSON.stringify({type: 'im', key: config.uuid, title: config.MenuName, children: []}))), + LText: '', + LTexttb: '' + } + + param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + param.secretkey = Utils.encrypt('', param.timestamp) + param.LongParam = window.btoa(window.encodeURIComponent(JSON.stringify(config))) + + Api.getSystemConfig(param).then(res => { + if (!res.status) { + notification.warning({ + top: 92, + message: res.message, + duration: 5 + }) + this.setState({ + menuloading: false + }) + return + } + + config.open_edition = res.open_edition || '' + + this.setState({ + config, + oriConfig: fromJS(config).toJS(), + menuloading: false + }) + + notification.success({ + top: 92, + message: '淇濆瓨鎴愬姛', + duration: 2 + }) + }) + }, 300) + } + + getWrapForms = () => { + const { config } = this.state + + return getWrapForm(config.wrap) + } + + updateWrap = (res) => { + let _config = {...this.state.config, wrap: res} + + this.setState({ + config: _config + }) + } + + // 鏇存柊閰嶇疆淇℃伅 + updateConfig = (config) => { + this.setState({ + config: config + }) + } + + render () { + const { localedict, loading, settingshow, controlshow, dict, MenuId, config, menuloading } = this.state + + return ( + <ConfigProvider locale={localedict}> + <div className="mk-mob-view" id="mk-mob-design-view"> + <Header/> + {loading ? <Spin className="view-spin" size="large" /> : null} + <div className={'menu-setting ' + (!settingshow ? 'hidden' : '')}> + <div className="draw"> + {settingshow ? <DoubleLeftOutlined onClick={() => {this.setState({settingshow: false})}} /> : null} + {!settingshow ? <DoubleRightOutlined onClick={() => {this.setState({settingshow: true})}} /> : null} + </div> + <div className="pc-setting-tools"> + <Collapse accordion defaultActiveKey="basedata" bordered={false}> + {/* 鍩烘湰淇℃伅 */} + <Panel header={dict['mob.basemsg']} forceRender key="basedata"> + {/* 鑿滃崟淇℃伅 */} + {config ? <MenuForm + dict={dict} + config={config} + MenuId={MenuId} + updateConfig={this.updateConfig} + /> : null} + </Panel> + <Panel header={'椤甸潰鏍峰紡'} key="background"> + {config ? <BgController config={config} updateConfig={this.updateConfig} /> : null} + </Panel> + </Collapse> + </div> + </div> + <div className={'menu-control ' + (!controlshow ? 'hidden' : '')}> + <div className="draw"> + {controlshow ? <DoubleRightOutlined onClick={() => {this.setState({controlshow: false})}}/> : null} + {!controlshow ? <DoubleLeftOutlined onClick={() => {this.setState({controlshow: true})}}/> : null} + </div> + <div className="wrap"> + <Button type="primary" onClick={this.submitConfig} id="save-config" loading={menuloading}>{dict['mob.save']}</Button> + <NormalForm title="鍗虫椂閫氫俊璁剧疆" width={800} update={this.updateWrap} getForms={this.getWrapForms}> + <Button type="default" style={{borderColor: 'rgb(64, 169, 255)', color: 'rgb(64, 169, 255)'}}>璁剧疆</Button> + </NormalForm> + <Button type="default" className="mk-border-purple" onClick={this.backView}>鍚庨��</Button> + <CreateView resetmenu={this.getAppMenus} /> + <Transfer MenuID={MenuId} /> + <Button type="default" onClick={this.closeView}>鍏抽棴</Button> + </div> + </div> + <div className={'menu-body menu-view'}> + <div className="mob-shell" style={{width: window.GLOB.shellWidth, height: window.GLOB.shellHeight}}> + <div className="instant-message" style={config ? config.style : null}> + <div className="header"> + <LeftOutlined/> + <span className="title">鏈嬪弸</span> + {config && config.wrap.linkmenu ? <EllipsisOutlined onDoubleClick={this.changeEditMenu}/> : null} + </div> + <div className="mk-content-wrap"> + <div className="line-wrap"> + <div className="time-line">12:34</div> + <div className="line-msg"> + <div className="portrait"> + <div className="img"><UserOutlined /></div> + </div> + <div className="msg"> + <div className="title">鏈嬪弸</div> + <div className="words">鎮ㄥソ</div> + </div> + </div> + </div> + <div className="line-wrap"> + <div className="time-line">12:45</div> + <div className="line-msg right"> + <div className="msg"> + <div className="words"> + 鎮ㄥソ + </div> + </div> + <div className="portrait"> + <div className="img"><UserOutlined /></div> + </div> + </div> + </div> + </div> + <div className="send-wrap"> + <div className="adm-input"></div> + <div className="send"><Button>鍙戦��</Button></div> + </div> + </div> + </div> + </div> + <StyleController /> + </div> + </ConfigProvider> + ) + } +} + +export default withRouter(ImDesign) \ No newline at end of file diff --git a/src/views/imdesign/index.scss b/src/views/imdesign/index.scss new file mode 100644 index 0000000..2ad3e4b --- /dev/null +++ b/src/views/imdesign/index.scss @@ -0,0 +1,351 @@ +.mk-mob-view { + min-height: 100vh; + + .change-view { + display: none; + } + >.view-spin { + position: absolute; + z-index: 3; + left: calc(50% - 16px); + top: calc(50vh - 70px); + } + .modal-form-board { + padding-top: 0; + } + .menu-setting { + position: fixed; + left: 0; + top: 48px; + z-index: 10; + transition: left 0.3s; + + .draw { + position: absolute; + z-index: 1; + background: #ffffff; + right: -20px; + top: 0px; + box-shadow: 0 0 1px #959595; + border-radius: 0 2px 2px 0px; + + .anticon { + padding: 12px 3px; + } + } + + .pc-setting-tools { + height: calc(100vh - 48px); + width: 300px; + background: #ffffff; + overflow-y: auto; + overflow-x: hidden; + padding-bottom: 50px; + + .normal-view { + display: none; + } + + > .ant-collapse { + background-color: #ffffff; + .ant-collapse-item.ant-collapse-item-active { + border-bottom: 1px solid #d9d9d9; + } + .ant-collapse-header { + padding: 11px 16px 10px 40px; + border-bottom: 1px solid #d9d9d9; + background: #1890ff; + color: #ffffff; + } + .ant-collapse-content-box { + .ant-form-item { + margin-bottom: 10px; + } + .model-table-tablemanage-view { + >.ant-list { + margin-top: 20px; + .ant-list-item { + display: -webkit-box; + padding-right: 20px; + position: relative; + padding-left: 5px; + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + min-height: 55px; + width: 100%; + .anticon { + position: absolute; + top: 0px; + right: 0px; + padding: 3px 3px 10px 10px; + cursor: pointer; + } + } + } + >.tables { + width: 66.66666667%!important; + } + >.ant-form-item-label { + width: 33.33333333%; + } + } + } + } + + >.ant-tabs { + >.ant-tabs-bar { + border-bottom: 1px solid #181F29; + margin-bottom: 0px; + min-height: 48px; + .ant-tabs-tab { + padding: 14px 16px; + color: rgba(255, 255, 255, 0.85); + } + .ant-tabs-tab-active.ant-tabs-tab { + color: #1890ff; + } + } + } + } + } + .menu-setting.hidden { + left: -300px; + } + .mob-shell { + margin: 0 auto; + background: #000000; + background-size: 100% 100%; + padding: 25px 13px 40px; + border-radius: 30px; + width: 375px; + height: 680px; + } + .menu-control { + position: fixed; + right: 0; + top: 48px; + height: calc(100vh - 48px); + background: #ffffff; + z-index: 10; + transition: right 0.3s; + width: 145px; + + .draw { + position: absolute; + z-index: 1; + background: #ffffff; + left: -21px; + top: 0px; + box-shadow: 0 0 1px #959595; + border-radius: 0 2px 2px 0px; + + .anticon { + padding: 12px 3px; + } + } + + div:not(.draw), button:not(.ant-switch) { + display: block!important; + margin-bottom: 15px; + width: 100%; + } + .wrap { + height: 100%; + padding: 20px 10px; + } + } + + .menu-control.hidden { + right: -145px; + } + + .menu-body { + width: 100vw; + height: 100vh; + overflow-x: hidden; + position: relative; + background: #959595; + padding: 50px 0px 0px; + overflow-y: auto; + + } + .menu-body::-webkit-scrollbar { + width: 7px; + } + .menu-body::-webkit-scrollbar-thumb { + border-radius: 5px; + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.08); + background: rgba(0, 0, 0, 0.08); + } + .menu-body::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05); + border-radius: 3px; + border: 1px solid rgba(0, 0, 0, 0.07); + background: rgba(0, 0, 0, 0); + } + + .instant-message { + width: 100%; + height: 100%; + background-color: #ededed; + padding-top: 40px; + padding-bottom: 50px; + background-position: center; + position: relative; + + .header { + position: absolute; + top: 0px; + width: 100%; + height: 40px; + line-height: 40px; + background: #ffffff; + box-shadow: 0 0 3px #d9d9d9; + text-align: center; + font-size: 16px; + z-index: 1; + + .anticon-left { + position: absolute; + left: 0px; + padding: 10px 13px; + font-size: 18px; + } + + .anticon-ellipsis { + position: absolute; + right: 0px; + padding: 10px 13px; + font-size: 18px; + cursor: pointer; + } + } + + .mk-content-wrap { + height: calc(100% - 90px); + overflow-y: auto; + padding-bottom: 10px; + padding-top: 5px; + } + .mk-content-wrap.friend { + .line-wrap:not(.right) { + .title { + display: none; + } + .words::after { + top: 10px; + } + } + } + .line-wrap { + margin-bottom: 10px; + .time-line { + text-align: center; + margin-bottom: 10px; + color: #757575; + font-size: 12px; + } + .line-msg { + display: flex; + width: calc(100% - 50px); + .portrait { + width: 50px; + text-align: center; + .img { + width: 32px; + height: 32px; + background-color: #bcbcbc; + display: inline-block; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + line-height: 32px; + font-size: 16px; + } + } + .msg { + flex: 1; + .title { + font-size: 12px; + color: rgba(0,0,0,0.35); + margin-bottom: 3px; + margin-top: -5px; + } + .words { + position: relative; + display: inline-block; + padding: 5px 10px; + background: #ffffff; + border-radius: 3px; + min-height: 32px; + font-size: 14px; + text-align: left; + } + .words::after { + position: absolute; + content: ' '; + display: block; + width: 10px; + height: 10px; + transform: rotate(45deg); + background: #ffffff; + top: 4px; + left: -2px; + } + } + } + } + .line-msg.right { + margin-left: 50px; + .msg { + text-align: right; + .words { + background: #93ED6C; + color: #000000; + } + .words::after { + background: #93ED6C; + top: 10px; + left: auto; + right: -2px; + } + } + } + + .send-wrap { + position: absolute; + bottom: 0; + left: 0; + right: 0; + background-color: #f7f7f7; + border-top: 1px solid #e9e9e9; + height: 50px; + line-height: 50px; + display: flex; + + .adm-input { + padding: 4px 10px; + background: #ffffff; + margin: 7px 10px; + flex: 1; + } + .send { + width: 75px; + } + .ant-btn { + padding: 2px 15px; + height: 32px; + margin: 9px 5px 0px 0px; + border-color: #26C281; + background-color: #26C281; + color: #ffffff; + } + } + } +} + +body { + overflow-y: hidden; +} \ No newline at end of file diff --git a/src/views/imdesign/menuform/index.jsx b/src/views/imdesign/menuform/index.jsx new file mode 100644 index 0000000..0fb6e84 --- /dev/null +++ b/src/views/imdesign/menuform/index.jsx @@ -0,0 +1,77 @@ +import React, {Component} from 'react' +import PropTypes from 'prop-types' +import { Form, Row, Col, Input } from 'antd' + +import './index.scss' + +class CustomMenuForm extends Component { + static propTpyes = { + dict: PropTypes.object, // 瀛楀吀椤� + config: PropTypes.object, + MenuId: PropTypes.string, + adapters: PropTypes.array, + updateConfig: PropTypes.func + } + + state = {} + + // 鑿滃崟鍚嶇О + changeName = (e) => { + this.props.updateConfig({...this.props.config, MenuName: e.target.value}) + } + + // 鑿滃崟鍙傛暟 + changeNo = (e) => { + this.props.updateConfig({...this.props.config, MenuNo: e.target.value}) + } + + render() { + const { dict, config } = this.props + const { getFieldDecorator } = this.props.form + const formItemLayout = { + labelCol: { + xs: { span: 24 }, + sm: { span: 8 } + }, + wrapperCol: { + xs: { span: 24 }, + sm: { span: 16 } + } + } + + return ( + <Form {...formItemLayout} className="custom-menu-form"> + <Row> + <Col span={24}> + <Form.Item label={dict['mob.menu'] + dict['mob.name']}> + {getFieldDecorator('MenuName', { + initialValue: config.MenuName, + rules: [ + { + required: true, + message: dict['mob.required.input'] + dict['mob.menu'] + dict['mob.name'] + '!' + } + ] + })(<Input placeholder="" autoComplete="off" onChange={this.changeName}/>)} + </Form.Item> + </Col> + <Col span={24}> + <Form.Item label={dict['mob.menu'] + dict['mob.param']}> + {getFieldDecorator('MenuNo', { + initialValue: config.MenuNo, + rules: [ + { + required: true, + message: dict['mob.required.input'] + dict['mob.menu'] + dict['mob.param'] + '!' + } + ] + })(<Input placeholder="" autoComplete="off" onChange={this.changeNo}/>)} + </Form.Item> + </Col> + </Row> + </Form> + ) + } +} + +export default Form.create()(CustomMenuForm) \ No newline at end of file diff --git a/src/views/imdesign/menuform/index.scss b/src/views/imdesign/menuform/index.scss new file mode 100644 index 0000000..6bfb57a --- /dev/null +++ b/src/views/imdesign/menuform/index.scss @@ -0,0 +1,25 @@ +.custom-menu-form { + .ant-form-item { + height: 50px; + .ant-form-explain { + font-size: 12px; + } + } + .ant-radio-group { + white-space: nowrap; + } + .mk-source-wrap .mk-source-item-info .anticon-delete { + color: #ff4d4f; + } + .status-bar { + .ant-form-item-control { + padding-top: 7px; + .color-sketch-block-box { + width: calc(100% - 140px); + } + .color-sketch-value { + width: 140px; + } + } + } +} \ No newline at end of file diff --git a/src/views/imdesign/options.jsx b/src/views/imdesign/options.jsx new file mode 100644 index 0000000..4ae841b --- /dev/null +++ b/src/views/imdesign/options.jsx @@ -0,0 +1,29 @@ +/** + * @description Wrap琛ㄥ崟閰嶇疆淇℃伅 + */ +export default function (wrap) { + let menulist = sessionStorage.getItem('appMenus') + + if (menulist) { + try { + menulist = JSON.parse(menulist) + } catch (e) { + menulist = [] + } + } else { + menulist = [] + } + + const WrapForm = [ + { + type: 'select', + field: 'linkmenu', + label: '鍏宠仈鑿滃崟', + initval: wrap.linkmenu || '', + required: false, + options: menulist, + }, + ] + + return WrapForm +} \ No newline at end of file diff --git a/src/views/interface/history/index.jsx b/src/views/interface/history/index.jsx index 96ab292..42fea84 100644 --- a/src/views/interface/history/index.jsx +++ b/src/views/interface/history/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import { fromJS } from 'immutable' -import { Input, Modal, Icon } from 'antd' +import { Input, Modal } from 'antd' +import { DeleteOutlined, RightOutlined } from '@ant-design/icons' import moment from 'moment' import Api from '@/views/interface/api' @@ -257,8 +258,8 @@ <div className="method">POST</div> <div className="inter">{m.interface}</div> <div className="action"> - <Icon type="delete" onClick={() => this.delete(m)} /> - <Icon type="right" onClick={() => this.use(m)} /> + <DeleteOutlined onClick={() => this.delete(m)} /> + <RightOutlined onClick={() => this.use(m)} /> </div> </div> ))} @@ -270,14 +271,14 @@ <div className="method">POST</div> <div className="inter" style={{lineHeight: '40px'}}>dologon / logon</div> <div className="action" style={{paddingLeft: '40px'}}> - <Icon type="right" onClick={this.uselogon} /> + <RightOutlined onClick={this.uselogon} /> </div> </div> <div className="line-item" key="dostars"> <div className="method">POST</div> <div className="inter" style={{lineHeight: '40px'}}>dostars</div> <div className="action" style={{paddingLeft: '40px'}}> - <Icon type="right" onClick={this.usedostars} /> + <RightOutlined onClick={this.usedostars} /> </div> </div> </div> diff --git a/src/views/interface/history/index.scss b/src/views/interface/history/index.scss index 012eebb..b74273d 100644 --- a/src/views/interface/history/index.scss +++ b/src/views/interface/history/index.scss @@ -67,10 +67,10 @@ padding-left: 15px; opacity: 0; transition: all 0.3s; - i { + .anticon { cursor: pointer; } - i:first-child { + .anticon:first-child { margin-right: 12px; } .anticon-delete { diff --git a/src/views/interface/workspace/editTable/index.jsx b/src/views/interface/workspace/editTable/index.jsx index dc5ff0f..0ba382c 100644 --- a/src/views/interface/workspace/editTable/index.jsx +++ b/src/views/interface/workspace/editTable/index.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Table, Input, Form, Icon } from 'antd' +import { Table, Input, Form } from 'antd' +import { CloseOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import './index.scss' @@ -104,7 +105,7 @@ title: '', width: '20px', render: (text, record) => { - return (<Icon type="close" onClick={() => this.delete(record)}/>) + return (<CloseOutlined onClick={() => this.delete(record)}/>) } }] } diff --git a/src/views/interface/workspace/index.jsx b/src/views/interface/workspace/index.jsx index f02ba5d..58c0b71 100644 --- a/src/views/interface/workspace/index.jsx +++ b/src/views/interface/workspace/index.jsx @@ -1,5 +1,6 @@ import React, {Component} from 'react' -import { Icon, Tabs } from 'antd' +import { Tabs } from 'antd' +import { PlusOutlined, CloseOutlined } from '@ant-design/icons' import Utils from '@/utils/utils.js' import MKEmitter from '@/utils/events.js' @@ -92,7 +93,7 @@ return ( <div className="workspace-wrap"> - <Icon className="add-view" type="plus" onClick={this.handleAdd} /> + <PlusOutlined className="add-view" onClick={this.handleAdd} /> <Tabs type="card"> {tabviews.map(view => { return ( @@ -105,7 +106,7 @@ <span className="interface"> {view.interface || 'Untitled Request'} </span> - <Icon type="close" onClick={() => this.handleTabview(view)}/> + <CloseOutlined onClick={() => this.handleTabview(view)}/> </span> } key={view.uuid} diff --git a/src/views/login/index.jsx b/src/views/login/index.jsx index 79278be..50ea083 100644 --- a/src/views/login/index.jsx +++ b/src/views/login/index.jsx @@ -527,6 +527,14 @@ res.indexlogo = res.indexlogo ? res.indexlogo.replace(/:8080/ig, '').replace(/http:/ig, 'https:') : '' res.loginlogo = res.loginlogo ? res.loginlogo.replace(/:8080/ig, '').replace(/http:/ig, 'https:') : '' + if (/^https/.test(window.location.protocol)) { // https杞崲 + res.Banner = res.Banner ? res.Banner.replace(/^http:/ig, 'https:') : '' + res.doclogo = res.doclogo ? res.doclogo.replace(/^http:/ig, 'https:') : '' + res.indexlogo = res.indexlogo ? res.indexlogo.replace(/^http:/ig, 'https:') : '' + res.loginlogo = res.loginlogo ? res.loginlogo.replace(/^http:/ig, 'https:') : '' + res.titlelogo = res.titlelogo ? res.titlelogo.replace(/^http:/ig, 'https:') : '' + } + let _url = window.location.href.split('#')[0] + 'system' let systemMsg = { favicon: res.titlelogo || '', diff --git a/src/views/login/index.scss b/src/views/login/index.scss index 13071e2..6ae0096 100644 --- a/src/views/login/index.scss +++ b/src/views/login/index.scss @@ -75,7 +75,7 @@ overflow: hidden; padding-bottom: 10px; cursor: pointer; - i { + .anticon { transform-origin: 0 0; transform: rotate(45deg); } diff --git a/src/views/login/logincloudform.jsx b/src/views/login/logincloudform.jsx index 0e1008c..a8c70fc 100644 --- a/src/views/login/logincloudform.jsx +++ b/src/views/login/logincloudform.jsx @@ -1,6 +1,7 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Icon, Input } from 'antd' +import { Form, Input } from 'antd' +import { UserOutlined, LockOutlined } from '@ant-design/icons' import zhCN from '@/locales/zh-CN/login.js' import enUS from '@/locales/en-US/login.js' import './index.scss' @@ -61,7 +62,7 @@ initialValue: '', })( <Input - prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} + prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder={this.state.dict['login.username']} autoComplete="off" onPressEnter={(e) => {this.handleSubmit(e, 'cloudpassword')}} @@ -77,7 +78,7 @@ message: this.state.dict['login.password.empty'], } ] - })(<Input.Password onPressEnter={(e) => {this.handleSubmit(e, 'cloudusername')}} placeholder={this.state.dict['login.password']} prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} />)} + })(<Input.Password onPressEnter={(e) => {this.handleSubmit(e, 'cloudusername')}} placeholder={this.state.dict['login.password']} prefix={<LockOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} />)} </Form.Item> </Form> ) diff --git a/src/views/login/loginform.jsx b/src/views/login/loginform.jsx index 8518aae..172aa29 100644 --- a/src/views/login/loginform.jsx +++ b/src/views/login/loginform.jsx @@ -2,6 +2,7 @@ import PropTypes from 'prop-types' import { is, fromJS } from 'immutable' import { Form, Icon, Input, Button, Modal, message } from 'antd' +import { UserOutlined } from '@ant-design/icons' import md5 from 'md5' import moment from 'moment' @@ -308,7 +309,7 @@ initialValue: this.state.username || '', })( <Input - prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} + prefix={<UserOutlined style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder={this.props.dict['login.username']} autoComplete="off" />, diff --git a/src/views/menudesign/index.jsx b/src/views/menudesign/index.jsx index 66ce2e4..66e4dc9 100644 --- a/src/views/menudesign/index.jsx +++ b/src/views/menudesign/index.jsx @@ -36,7 +36,6 @@ const PaddingController = asyncComponent(() => import('@/menu/padcontroller')) const StyleController = asyncComponent(() => import('@/menu/stylecontroller')) const ReplaceField = asyncComponent(() => import('@/menu/replaceField')) -// const BaseScript = asyncComponent(() => import('@/menu/baseScript')) const Versions = asyncComponent(() => import('@/menu/versions')) const SysInterface = asyncComponent(() => import('@/menu/sysinterface')) const UrlFieldComponent = asyncComponent(() => import('@/menu/urlfieldcomponent')) @@ -113,8 +112,43 @@ setTimeout(() => { this.updateCustomComponent() this.getAppPictures() + this.getPrintTemp() setGLOBFuncs() }, 1000) + + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } + if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (_shortcut === 'ctrl+83') { + let node = document.getElementById('save-modal-config') + if (!node) { + node = document.getElementById('save-pop-config') + } + if (!node) { + node = document.getElementById('save-config') + } + + if (node) { + node.click() + } + return false + } + } } /** @@ -137,6 +171,50 @@ if (this.state.visible) return this.submitConfig() + } + + getPrintTemp = () => { + if (!sessionStorage.getItem('printTemps')) { + let _sql = `select ID,Images,PrintTempNO+PrintTempName as PN from sPrintTemplate + where appkey= @appkey@ and Deleted=0 and typechartwo='web_print' + union select ID,Images,a.PrintTempNO+PrintTempName as PN + from (select * from sPrintTemplate where appkey= '' and Deleted=0 and typechartwo='web_print') a + left join (select PrintTempNO from sPrintTemplate where appkey= @appkey@ and Deleted=0 ) b + on a.PrintTempNO=b.PrintTempNO + left join (select Srcid from sPrintTemplate_Log where appkey='' and apicode= @appkey@ and Deleted=0 ) c + on a.ID=c.Srcid where b.PrintTempNO is null and c.Srcid is null` + + let param = { + func: 'sPC_Get_SelectedList', + LText: Utils.formatOptions(_sql), + obj_name: 'data', + arr_field: 'PN,ID,Images' + } + + param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + param.secretkey = Utils.encrypt(param.LText, param.timestamp) + + param.open_key = Utils.encryptOpenKey(param.secretkey, param.timestamp) // 浜戠鏁版嵁楠岃瘉 + + Api.getSystemConfig(param).then(res => { + if (res.status) { + let temps = res.data.map(temp => { + return { + value: temp.ID, + text: temp.PN + } + }) + + sessionStorage.setItem('printTemps', JSON.stringify(temps)) + } else { + notification.warning({ + top: 92, + message: res.message, + duration: 5 + }) + } + }) + } } getAppPictures = () => { @@ -853,7 +931,11 @@ } else if (item.type === 'group') { check(item.components) return + } else if (item.subtype === 'propcard' && item.subcards.length === 0) { + error = `缁勪欢銆�${item.name}銆嬩腑鍗$墖涓嶅彲涓虹┖锛乣 + return } + if (['propcard', 'brafteditor', 'sandbox', 'stepform', 'tabform'].includes(item.subtype) && item.wrap.datatype === 'static') return if (['balcony'].includes(item.type) && item.wrap.datatype === 'static') return @@ -864,7 +946,7 @@ error = `缁勪欢銆�${item.name}銆嬫湭璁剧疆鏁版嵁婧愶紒` } else if (!item.setting.primaryKey) { error = `缁勪欢銆�${item.name}銆嬫湭璁剧疆涓婚敭锛乣 - } else if (!item.setting.supModule && item.type !== 'balcony') { + } else if (!item.setting.supModule && item.type !== 'balcony' && (!item.wrap || item.wrap.supType !== 'multi')) { error = `缁勪欢銆�${item.name}銆嬫湭璁剧疆涓婄骇缁勪欢锛乣 } } @@ -878,6 +960,15 @@ error = `缁勪欢銆�${item.name}銆嬪潗鏍囪酱灏氭湭璁剧疆锛乣 } else if (item.type === 'tree' && (!item.wrap.valueField || !item.wrap.labelField || !item.wrap.parentField)) { error = `缁勪欢銆�${item.name}銆嬪熀鏈俊鎭皻鏈缃紒` + } else if (item.type === 'table' && item.wrap.doubleClick) { + let _actions = [...item.action] + item.cols.forEach(col => { + if (col.type !== 'action') return + _actions.push(...col.elements) + }) + if (_actions.findIndex((m) => m.uuid === item.wrap.doubleClick) === -1) { + error = `缁勪欢銆�${item.name}銆嬬粦瀹氱殑鍙屽嚮鎸夐挳宸插垹闄わ紒` + } } }) } @@ -991,7 +1082,6 @@ <div> {config && config.MenuName} </div> } bordered={false} extra={ <div> - {/* <BaseScript config={config} updateConfig={this.updateConfig}/> */} <Versions MenuId={MenuId} open_edition={config ? config.open_edition : ''}/> <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/> <SysInterface config={config} updateConfig={this.updateConfig}/> @@ -999,7 +1089,7 @@ <StyleCombControlButton menu={config} /> <PasteController insert={this.insert} /> <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config && config.enabled} onChange={this.onEnabledChange} /> - <Button type="primary" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> + <Button type="primary" id="save-config" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> <Button type="default" onClick={this.closeView}>鍏抽棴</Button> </div> } style={{ width: '100%' }}> diff --git a/src/views/menudesign/index.scss b/src/views/menudesign/index.scss index e4f1088..b19dd66 100644 --- a/src/views/menudesign/index.scss +++ b/src/views/menudesign/index.scss @@ -1,3 +1,6 @@ +body { + overflow-x: hidden; +} .pc-menu-view { background: #000; min-height: 100vh; diff --git a/src/views/mobdesign/index.jsx b/src/views/mobdesign/index.jsx index d4474f5..0bac9a5 100644 --- a/src/views/mobdesign/index.jsx +++ b/src/views/mobdesign/index.jsx @@ -5,7 +5,8 @@ import { is, fromJS } from 'immutable' import moment from 'moment' import HTML5Backend from 'react-dnd-html5-backend' -import { ConfigProvider, notification, Modal, Collapse, Switch, Button, message, Spin, Icon, Typography } from 'antd' +import { ConfigProvider, notification, Modal, Collapse, Switch, Button, message, Spin, Typography } from 'antd' +import { DoubleLeftOutlined, DoubleRightOutlined, HomeOutlined, LoginOutlined, RedoOutlined } from '@ant-design/icons' import Api from '@/api' import Utils, { setGLOBFuncs } from '@/utils/utils.js' @@ -16,6 +17,7 @@ import MKEmitter from '@/utils/events.js' import MenuUtils from '@/utils/utils-custom.js' import asyncComponent from '@/utils/asyncComponent' +import backurl from '@/assets/img/back.jpg' import './index.scss' @@ -70,7 +72,9 @@ direction: 'vertical', settingshow: true, controlshow: true, - comloading: false + comloading: false, + adapters: [], + viewType: 'menu' } UNSAFE_componentWillMount() { @@ -85,7 +89,10 @@ sessionStorage.setItem('role_type', param.role_type || 'true') sessionStorage.setItem('login_types', param.login_types || 'false') sessionStorage.setItem('typename', param.typename || 'mob') - sessionStorage.setItem('adapter', param.adapter || 'false') + sessionStorage.setItem('adapter', param.adapter || '') + sessionStorage.setItem('sysBgColor', param.sysBgColor || '#ffffff') + sessionStorage.setItem('userbind', param.userbind || '') + sessionStorage.setItem('instantMessage', param.instantMessage || '') this.setState({ localedict: sessionStorage.getItem('lang') !== 'en-US' ? antdZhCN : antdEnUS, @@ -105,8 +112,17 @@ window.GLOB.shellHeight = 853 } + let adapters = sessionStorage.getItem('adapter') + if (adapters) { + adapters = adapters.split(',') + } else { + adapters = [] + } + this.setState({ - MenuId: param.MenuID + adapters, + MenuId: param.MenuID, + viewType: /^userbind/.test(param.MenuID) ? 'userbind' : 'menu' }, () => { this.getMenuParam(param) }) @@ -145,6 +161,37 @@ this.getSmStemp() setGLOBFuncs() }, 1000) + + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } + if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (_shortcut === 'ctrl+83') { + let node = document.getElementById('save-modal-config') + if (!node) { + node = document.getElementById('save-config') + } + + if (node) { + node.click() + } + return false + } + } } /** @@ -203,6 +250,16 @@ duration: 5 }) return + } else if (['AIService'].includes(menu.MenuID)) { + notification.warning({ + top: 92, + message: '绯荤粺椤甸潰涓嶅彲缂栬緫锛�', + duration: 5 + }) + return + } else if (menu.routerUrl) { + this.props.history.push(menu.routerUrl) + return } let param = { @@ -235,9 +292,9 @@ return } - let homeId = MenuID || '' + let homeId = '' let appViewList = [] - if (!homeId && res.data && res.data.length > 0) { + if (res.data && res.data.length > 0) { appViewList = res.data appViewList.forEach(item => { if (item.keys_type === 'index') { @@ -247,7 +304,7 @@ } if (!homeId) { - homeId = Utils.getuuid() + homeId = MenuID || Utils.getuuid() let param = { func: 's_kei_link_keyids_addupt', @@ -286,7 +343,7 @@ }) } else { sessionStorage.setItem('appViewList', JSON.stringify(appViewList)) - this.props.history.replace('/mobdesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({MenuID: homeId, type: 'view'})))) + this.props.history.replace('/mobdesign/' + window.btoa(window.encodeURIComponent(JSON.stringify({MenuID: MenuID || homeId, type: 'view'})))) } }) } @@ -395,10 +452,7 @@ if (!config) { window.close() - return - } - - if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) { + } else if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) { confirm({ title: '閰嶇疆淇℃伅鏈繚瀛橈紝纭畾鍏抽棴鍚楋紵', content: '', @@ -409,6 +463,25 @@ }) } else { window.close() + } + } + + backView = () => { + const { oriConfig, config } = this.state + + if (!config) { + window.history.back() + } else if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) { + confirm({ + title: '閰嶇疆淇℃伅鏈繚瀛橈紝纭畾鍚庨��鍚楋紵', + content: '', + onOk() { + window.history.back() + }, + onCancel() {} + }) + } else { + window.history.back() } } @@ -444,6 +517,11 @@ config = null } + if (/^userbind/.test(MenuId)) { + this.setUserBindMenu(config, result) + return + } + if (!config) { isCreate = true config = { @@ -457,8 +535,9 @@ tables: [], components: [], viewType: 'menu', + statusBarbgColor: sessionStorage.getItem('sysBgColor') || '#ffffff', style: { - backgroundColor: '#ffffff', backgroundImage: '' + backgroundColor: sessionStorage.getItem('sysBgColor') || '#ffffff', backgroundImage: '' } } } @@ -491,6 +570,88 @@ this.getAppMenus() } + setUserBindMenu = (config, result) => { + const { MenuId } = this.state + let isCreate = !config + + if (!config) { + config = { + version: 1.0, + uuid: MenuId, + MenuID: MenuId, + Template: 'webPage', + enabled: false, + MenuName: '鐢ㄦ埛缁戝畾', + MenuNo: 'user_bind', + tables: [], + components: [], + viewType: 'userbind', + statusBarbgColor: '#ffffff', + style: { + backgroundColor: '#ffffff', backgroundImage: '' + } + } + + config.components.push({ + subcards:[ + { + uuid: Utils.getuuid(), setting: {width:24, primaryId: '', click: ''}, style: {}, backStyle: {}, + elements: [{maxWidth: 120, datatype: 'static', width: 24, marks: null, url: 'http://cloud.mk9h.cn/Content/images/20220120/cb5cd13a-2ef4-41cc-ab6a-a202f1c04da5.png', style: {borderRadius: '50%'}, eleType: 'picture', link: '', uuid: Utils.getuuid(), lenWidRadio: '1:1', $type: ''}], + backElements: [] + } + ], + headerStyle: {}, parentId: '', width: 24, scripts: [], btnlog: [], pageable: false, + wrap: {name: 'logo', width: 24, datatype: 'static', cardType: '', blacklist: []}, + name: 'logo', floor: 1, switchable: true, + setting:{interType: 'system'}, tabId: '', style:{paddingTop: '8vh', paddingBottom: '10vh'}, dataName: Utils.getuuid(), format: 'object', subtype: 'propcard', type: 'card', uuid: Utils.getuuid(), columns: [] + }) + + config.components.push({ + uuid: Utils.getuuid(), + type: 'login', + floor: 1, + tabId: '', + parentId: '', + dataName: '', + width: 24, + name: '鐢ㄦ埛缁戝畾', + subtype: 'bindlogin', + wrap: { name: '鐢ㄦ埛缁戝畾', width: 24, loginWays: ['uname_pwd'], shortcut: 'none', height: '45vh' }, + style: {}, + loginWays: [ + {type: 'uname_pwd', label: '璐﹀彿鐧诲綍', shortcut: 'none'}, + {type: 'sms_vcode', label: '鐭俊鐧诲綍'}, + ] + }) + + config.components.push({ + subcards:[ + { + uuid: Utils.getuuid(), setting: {width:24, primaryId: '', click: ''}, style: {}, backStyle: {}, + elements: [{datatype: 'static', width: 24, marks: null, height: null, value: 'Power by Minkesoft', style: { fontSize: '13px', textAlign: 'center'}, eleType: 'text', link: '', uuid: Utils.getuuid(), $type: ''}], + backElements: [] + } + ], + headerStyle: {}, parentId: '', width: 24, scripts: [], btnlog: [], pageable: false, + wrap: {name: 'Power', width: 24, datatype: 'static', cardType: '', blacklist: []}, + name: 'Power', floor: 1, switchable: true, + setting:{interType: 'system'}, tabId: '', style:{}, dataName: Utils.getuuid(), format: 'object', subtype: 'propcard', type: 'card', uuid: Utils.getuuid(), columns: [] + }) + } + + config.uuid = MenuId + config.MenuID = MenuId + config.open_edition = result.open_edition || '' + + this.setState({ + oriConfig: isCreate ? null : config, + config: fromJS(config).toJS(), + activeKey: isCreate ? 'basedata' : 'component', + loading: false + }) + window.GLOB.customMenu = config + } + getAppMenus = () => { let _param = { func: 's_get_app_menus', @@ -515,6 +676,13 @@ let appIndeList = sessionStorage.getItem('appViewList') appIndeList = JSON.parse(appIndeList) appIndeList = appIndeList.map(item => (item.keys_type !== 'index' ? item.keys_id : '')).join(',') + + if (sessionStorage.getItem('userbind')) { + appIndeList = appIndeList + ',' + sessionStorage.getItem('userbind') + } + if (sessionStorage.getItem('instantMessage')) { + appIndeList = appIndeList + ',' + sessionStorage.getItem('instantMessage') + } let menus = res.menus.filter(item => appIndeList.indexOf(item.MenuID) === -1) menus = menus.map(item => { @@ -908,6 +1076,7 @@ } submitConfig = () => { + const { adapters } = this.state let config = fromJS(this.state.config).toJS() if (!config.MenuName || !config.MenuNo || (config.cacheUseful === 'true' && !config.cacheTime)) { @@ -942,7 +1111,7 @@ config.loginview = false } - if (sessionStorage.getItem('adapter') === 'true') { + if (adapters.includes('wxmini')) { config = this.getMiniStyle(config) } @@ -1024,7 +1193,7 @@ Typename: sessionStorage.getItem('typename'), MenuName: item.name || '', PageParam: JSON.stringify({Template: item.type}), - open_edition: _item.open_edition || '', + open_edition: _item ? (_item.open_edition || '') : '', menus_rolelist: window.btoa(window.encodeURIComponent(JSON.stringify(roles))), LText: '', LTexttb: '' @@ -1196,8 +1365,10 @@ } verifyConfig = (show) => { - const { config } = this.state + const { config, viewType } = this.state let error = '' + let searchSum = 0 + let swipes = [] let check = (components) => { components.forEach(item => { @@ -1212,6 +1383,24 @@ return } else if (item.type === 'navbar' && !item.wrap.MenuNo) { error = `瀵艰埅鏍忋��${item.name}銆嬫湭璁剧疆鑿滃崟鍙傛暟锛乣 + } else if (item.type === 'topbar') { + if (item.wrap.type === 'search' || item.wrap.type === 'searchIcon' || (item.wrap.type === 'navbar' && item.wrap.search === 'true')) { + searchSum += 1 + } + } else if (item.type === 'search') { + searchSum += 1 + if (!item.wrap.field) { + error = `鎼滅储鏉′欢銆�${item.name}銆嬫湭璁剧疆鎼滅储瀛楁锛乣 + } + } else if (item.subtype === 'propcard' && item.subcards.length === 0) { + error = `缁勪欢銆�${item.name}銆嬩腑鍗$墖涓嶅彲涓虹┖锛乣 + return + } else if (item.type === 'login' && !item.wrap.linkmenu && item.wrap.link !== 'menu') { + error = '鐧诲綍缁勪欢鏈缃叧鑱旇彍鍗曪紒' + return + } + if (item.wrap && item.wrap.pagestyle === 'slide') { + swipes.push(item.name) } if (['propcard', 'brafteditor', 'sandbox', 'tabbar', 'stepform', 'tabform'].includes(item.subtype) && item.wrap.datatype === 'static') return @@ -1242,6 +1431,16 @@ } check(config.components) + + if (!error && viewType === 'userbind' && config.components.filter(item => item.type === 'login').length === 0) { + error = '鐢ㄦ埛缁戝畾椤甸潰蹇呴』娣诲姞鐧诲綍銆�' + } + + if (!error && searchSum > 1) { + error = '鎼滅储缁勪欢涓庡鑸爮鐨勬悳绱㈠姛鑳戒笉鍙悓鏃朵娇鐢ㄣ��' + } else if (!error && swipes.length > 1) { + error = `椤甸潰涓笉鍙悓鏃朵娇鐢ㄥ涓粦鍔ㄥ姞杞界粍浠躲�傦紙${swipes.join('銆�')}锛塦 + } if (show && error) { notification.warning({ @@ -1463,28 +1662,29 @@ render () { - const { localedict, comloading, loading, settingshow, controlshow, activeKey, dict, MenuId, config, menuloading, customComponents } = this.state + const { viewType, localedict, comloading, loading, settingshow, controlshow, activeKey, dict, MenuId, config, menuloading, customComponents, adapters } = this.state return ( <ConfigProvider locale={localedict}> - <div className="mk-mob-view" id="mk-mob-design-view"> + <div className={'mk-mob-view ' + viewType} id="mk-mob-design-view"> <Header changeView={this.changeView}/> {loading ? <Spin className="view-spin" size="large" /> : null} <DndProvider backend={HTML5Backend}> <div className={'menu-setting ' + (!settingshow ? 'hidden' : '')}> <div className="draw"> - {settingshow ? <Icon onClick={() => {this.setState({settingshow: false})}} type="double-left" /> : null} - {!settingshow ? <Icon onClick={() => {this.setState({settingshow: true})}} type="double-right" /> : null} + {settingshow ? <DoubleLeftOutlined onClick={() => {this.setState({settingshow: false})}} /> : null} + {!settingshow ? <DoubleRightOutlined onClick={() => {this.setState({settingshow: true})}} /> : null} </div> <div className="pc-setting-tools"> <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> {/* 鍩烘湰淇℃伅 */} - <Panel header={dict['mob.basemsg']} forceRender key="basedata"> + <Panel header={dict['mob.basemsg']} forceRender className="basedata" key="basedata"> {/* 鑿滃崟淇℃伅 */} {config ? <MenuForm dict={dict} config={config} MenuId={MenuId} + adapters={adapters} updateConfig={this.updateConfig} /> : null} {config ? <UrlFieldComponent config={config} updateConfig={this.updateConfig}/> : null} @@ -1493,10 +1693,10 @@ {config ? <Paragraph style={{padding: '15px 0px 0px 18px'}} copyable={{ text: MenuId }}>鑿滃崟ID</Paragraph> : null} </Panel> {/* 缁勪欢娣诲姞 */} - <Panel header={dict['mob.component']} key="component"> + <Panel header={dict['mob.component']} className="component" key="component"> <SourceWrap /> </Panel> - {customComponents && customComponents.length ? <Panel header="鑷畾涔夌粍浠�" key="cuscomponent"> + {customComponents && customComponents.length ? <Panel header="鑷畾涔夌粍浠�" className="cuscomponent" key="cuscomponent"> <SourceWrap components={customComponents} /> </Panel> : null} <Panel header={'椤甸潰鏍峰紡'} key="background"> @@ -1507,24 +1707,25 @@ </div> <div className={'menu-control ' + (!controlshow ? 'hidden' : '')}> <div className="draw"> - {controlshow ? <Icon onClick={() => {this.setState({controlshow: false})}} type="double-right" /> : null} - {!controlshow ? <Icon onClick={() => {this.setState({controlshow: true})}} type="double-left" /> : null} + {controlshow ? <DoubleRightOutlined onClick={() => {this.setState({controlshow: false})}}/> : null} + {!controlshow ? <DoubleLeftOutlined onClick={() => {this.setState({controlshow: true})}}/> : null} </div> <div className="wrap"> - <Button type="primary" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> + <Button type="primary" onClick={this.submitConfig} id="save-config" loading={menuloading}>{dict['mob.save']}</Button> <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config && config.enabled} onChange={this.onEnabledChange} /> + <img title="鍚庨��" className="back-view" onClick={this.backView} src={backurl} alt=""/> <CreateView resetmenu={this.getAppMenus} /> <PasteController insert={this.insert} /> <StyleCombControlButton menu={config} /> <SysInterface config={config} updateConfig={this.updateConfig}/> <PictureController/> <Quotecomponent config={config} updateConfig={this.updateConfig}/> - <Button className="mk-border-green" icon="home" onClick={this.setHomeView}>璁句负棣栭〉</Button> - <Button className="mk-border-purple" icon="login" onClick={this.setLoginView}>璁句负鐧诲綍椤�</Button> + <Button className="mk-border-green set-home" onClick={this.setHomeView}><HomeOutlined /> 璁句负棣栭〉</Button> + <Button className="mk-border-purple set-login" onClick={this.setLoginView}><LoginOutlined /> 璁句负鐧诲綍椤�</Button> <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/> <Transfer MenuID={MenuId} /> <Versions MenuId={MenuId} open_edition={config ? config.open_edition : ''}/> - <Button className="mk-border-danger" icon="redo" onClick={this.refreshView}>寮哄埗鍒锋柊</Button> + <Button className="mk-border-danger" onClick={this.refreshView}><RedoOutlined /> 寮哄埗鍒锋柊</Button> <Button type="default" onClick={this.closeView}>鍏抽棴</Button> </div> </div> diff --git a/src/views/mobdesign/index.scss b/src/views/mobdesign/index.scss index 62efe52..d9f3125 100644 --- a/src/views/mobdesign/index.scss +++ b/src/views/mobdesign/index.scss @@ -7,6 +7,17 @@ left: calc(50% - 16px); top: calc(50vh - 70px); } + .back-view { + width: 28px; + float: right; + margin-right: 10px; + cursor: pointer; + filter: opacity(0.7); + transition: filter 0.3s; + } + .back-view:hover { + filter: opacity(0.9); + } .modal-form-board { padding-top: 0; } @@ -26,7 +37,7 @@ box-shadow: 0 0 1px #959595; border-radius: 0 2px 2px 0px; - i { + .anticon { padding: 12px 3px; } } @@ -164,7 +175,7 @@ box-shadow: 0 0 1px #959595; border-radius: 0 2px 2px 0px; - i { + .anticon { padding: 12px 3px; } } @@ -243,6 +254,41 @@ } } +.mk-mob-view.userbind { + .pc-setting-tools { + .ant-collapse-item.basedata { + .custom-menu-form > .ant-row { + > .ant-col { + display: none; + } + > .ant-col:nth-child(1), > .ant-col:nth-child(2) { + display: block; + } + } + .url-field-component, .model-table-tablemanage-view, .ant-typography { + display: none; + } + } + + .ant-collapse-item.component { + .menu-source-item { + display: none; + } + .menu-source-item.card-propcard, .menu-source-item.balcony-balcony, .menu-source-item.login-normallogin { + display: block; + } + } + .ant-collapse-item.cuscomponent { + display: none; + } + } + .menu-control { + .back-view, .mk-view-paste, .quote-wrap, .mk-sys-interface, .set-home, .set-login, .mk-replace-field { + display: none!important; + } + } +} + body { overflow-y: hidden; } \ No newline at end of file diff --git a/src/views/mobdesign/menuform/index.jsx b/src/views/mobdesign/menuform/index.jsx index 97f4805..95da5b8 100644 --- a/src/views/mobdesign/menuform/index.jsx +++ b/src/views/mobdesign/menuform/index.jsx @@ -15,6 +15,7 @@ dict: PropTypes.object, // 瀛楀吀椤� config: PropTypes.object, MenuId: PropTypes.string, + adapters: PropTypes.array, updateConfig: PropTypes.func } @@ -61,7 +62,7 @@ } render() { - const { dict, config } = this.props + const { dict, config, adapters } = this.props const { getFieldDecorator } = this.props.form const formItemLayout = { labelCol: { @@ -182,6 +183,28 @@ </Form.Item> </Col> : null} <Col span={24}> + <Form.Item label="涓嬫媺鍒锋柊"> + {getFieldDecorator('pullRefresh', { + initialValue: config.pullRefresh || 'false' + })( + <Radio.Group onChange={(e) => {this.selectChange('pullRefresh', e.target.value)}}> + <Radio value="false">鍏抽棴</Radio> + <Radio value="true">寮�鍚�</Radio> + </Radio.Group> + )} + </Form.Item> + </Col> + {adapters.includes('app') || adapters.includes('wxmini') ? <Col span={24}> + <Form.Item className="status-bar" label={ + <Tooltip placement="topLeft" title="鍦ㄦ槑绉戜簯APP鎴栧皬绋嬪簭涓紝鐘舵�佹爮鐨勮儗鏅壊銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 鐘舵�佹爮 + </Tooltip> + }> + <ColorSketch value={config.statusBarbgColor || '#ffffff'} onChange={(val) => {this.selectChange('statusBarbgColor', val)}} /> + </Form.Item> + </Col> : null} + {adapters.includes('app') ? <Col span={24}> <Form.Item label={ <Tooltip placement="topLeft" title="鍦ㄦ槑绉戜簯APP涓湁鏁堛��"> <QuestionCircleOutlined className="mk-form-tip" /> @@ -194,30 +217,8 @@ <SourceComponent type="picture" placement="right" onChange={(val) => {this.selectChange('advertUrl', val)}}/> )} </Form.Item> - </Col> - <Col span={24}> - <Form.Item label="涓嬫媺鍒锋柊"> - {getFieldDecorator('pullRefresh', { - initialValue: config.pullRefresh || 'false' - })( - <Radio.Group onChange={(e) => {this.selectChange('pullRefresh', e.target.value)}}> - <Radio value="false">鍏抽棴</Radio> - <Radio value="true">寮�鍚�</Radio> - </Radio.Group> - )} - </Form.Item> - </Col> - <Col span={24}> - <Form.Item className="status-bar" label={ - <Tooltip placement="topLeft" title="鍦ㄦ槑绉戜簯APP涓紝鐘舵�佹爮鐨勮儗鏅壊銆�"> - <QuestionCircleOutlined className="mk-form-tip" /> - 鐘舵�佹爮 - </Tooltip> - }> - <ColorSketch value={config.statusBarbgColor || '#ffffff'} onChange={(val) => {this.selectChange('statusBarbgColor', val)}} /> - </Form.Item> - </Col> - {config.advertUrl ? <Col span={24}> + </Col> : null} + {adapters.includes('app') && config.advertUrl ? <Col span={24}> <Form.Item label="鍋滅暀(s)"> {getFieldDecorator('advertTime', { initialValue: config.advertTime || 3, diff --git a/src/views/pcdesign/index.jsx b/src/views/pcdesign/index.jsx index 4c94c51..7f0144d 100644 --- a/src/views/pcdesign/index.jsx +++ b/src/views/pcdesign/index.jsx @@ -5,7 +5,8 @@ import { is, fromJS } from 'immutable' import moment from 'moment' import HTML5Backend from 'react-dnd-html5-backend' -import { ConfigProvider, notification, Modal, Collapse, Switch, Button, Icon, message, Spin, Typography } from 'antd' +import { ConfigProvider, notification, Modal, Collapse, Switch, Button, message, Spin, Typography } from 'antd' +import { DoubleLeftOutlined, DoubleRightOutlined, HomeOutlined, LoginOutlined, RedoOutlined } from '@ant-design/icons' import Api from '@/api' import Utils, { setGLOBFuncs } from '@/utils/utils.js' @@ -16,6 +17,7 @@ import MKEmitter from '@/utils/events.js' import MenuUtils from '@/utils/utils-custom.js' import asyncComponent from '@/utils/asyncComponent' +import backurl from '@/assets/img/back.jpg' import './index.scss' @@ -88,6 +90,7 @@ sessionStorage.setItem('kei_no', param.kei_no || '') sessionStorage.setItem('role_type', param.role_type || 'true') sessionStorage.setItem('login_types', param.login_types || 'false') + sessionStorage.setItem('sysBgColor', param.sysBgColor || '#ffffff') this.setState({ localedict: sessionStorage.getItem('lang') !== 'en-US' ? antdZhCN : antdEnUS, @@ -139,6 +142,40 @@ this.getSmStemp() setGLOBFuncs() }, 1000) + + document.onkeydown = (event) => { + let e = event || window.event + let keyCode = e.keyCode || e.which || e.charCode + let preKey = '' + + if (e.ctrlKey) { + preKey = 'ctrl' + } + if (e.shiftKey) { + preKey = 'shift' + } else if (e.altKey) { + preKey = 'alt' + } + + if (!preKey || !keyCode) return + + let _shortcut = `${preKey}+${keyCode}` + + if (_shortcut === 'ctrl+83') { + let node = document.getElementById('save-modal-config') + if (!node) { + node = document.getElementById('save-pop-config') + } + if (!node) { + node = document.getElementById('save-config') + } + + if (node) { + node.click() + } + return false + } + } } /** @@ -266,36 +303,80 @@ } getSmStemp = () => { - let _sql = `select ID,TemplateCode,SignName from (select * from bd_msn_sms_temp where deleted=0 and status=20 ) a - inner join (select openid from sapp where id='${window.GLOB.appkey}') b - on a.openid=b.openid` - - _sql = Utils.formatOptions(_sql) - - let param = { - func: 'sPC_Get_SelectedList', - LText: _sql, - obj_name: 'data', - arr_field: 'ID,TemplateCode,SignName' - } - - param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') - param.secretkey = Utils.encrypt(param.LText, param.timestamp) - param.open_key = Utils.encryptOpenKey(param.secretkey, param.timestamp) // 浜戠鏁版嵁楠岃瘉 - - Api.getSystemConfig(param).then(res => { - let msgs = [] - if (!res.status) { - notification.warning({ - top: 92, - message: res.message, - duration: 5 - }) - } else if (res.data) { - msgs = res.data + if (!sessionStorage.getItem('msgTemplate')) { + let _sql = `select ID,TemplateCode,SignName from (select * from bd_msn_sms_temp where deleted=0 and status=20 ) a + inner join (select openid from sapp where id='${window.GLOB.appkey}') b + on a.openid=b.openid` + + _sql = Utils.formatOptions(_sql) + + let param = { + func: 'sPC_Get_SelectedList', + LText: _sql, + obj_name: 'data', + arr_field: 'ID,TemplateCode,SignName' } - sessionStorage.setItem('msgTemplate', JSON.stringify(msgs)) - }) + + param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + param.secretkey = Utils.encrypt(param.LText, param.timestamp) + param.open_key = Utils.encryptOpenKey(param.secretkey, param.timestamp) // 浜戠鏁版嵁楠岃瘉 + + Api.getSystemConfig(param).then(res => { + let msgs = [] + if (!res.status) { + notification.warning({ + top: 92, + message: res.message, + duration: 5 + }) + } else if (res.data) { + msgs = res.data + sessionStorage.setItem('msgTemplate', JSON.stringify(msgs)) + } + }) + } + + if (!sessionStorage.getItem('printTemps')) { + let _sql = `select ID,Images,PrintTempNO+PrintTempName as PN from sPrintTemplate + where appkey= @appkey@ and Deleted=0 and typechartwo='web_print' + union select ID,Images,a.PrintTempNO+PrintTempName as PN + from (select * from sPrintTemplate where appkey= '' and Deleted=0 and typechartwo='web_print') a + left join (select PrintTempNO from sPrintTemplate where appkey= @appkey@ and Deleted=0 ) b + on a.PrintTempNO=b.PrintTempNO + left join (select Srcid from sPrintTemplate_Log where appkey='' and apicode= @appkey@ and Deleted=0 ) c + on a.ID=c.Srcid where b.PrintTempNO is null and c.Srcid is null` + + let param = { + func: 'sPC_Get_SelectedList', + LText: Utils.formatOptions(_sql), + obj_name: 'data', + arr_field: 'PN,ID,Images' + } + + param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss') + param.secretkey = Utils.encrypt(param.LText, param.timestamp) + + param.open_key = Utils.encryptOpenKey(param.secretkey, param.timestamp) // 浜戠鏁版嵁楠岃瘉 + + Api.getSystemConfig(param).then(res => { + if (res.status) { + let temps = res.data.map(temp => { + return { + value: temp.ID, + text: temp.PN + } + }) + + sessionStorage.setItem('printTemps', JSON.stringify(temps)) + } else { + notification.warning({ + top: 92, + message: res.message, + duration: 5 + }) + } + }) + } } getAppPictures = () => { @@ -466,10 +547,7 @@ if (!config) { window.close() - return - } - - if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) { + } else if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) { confirm({ title: '閰嶇疆淇℃伅鏈繚瀛橈紝纭畾鍏抽棴鍚楋紵', content: '', @@ -480,6 +558,25 @@ }) } else { window.close() + } + } + + backView = () => { + const { oriConfig, config } = this.state + + if (!config) { + window.history.back() + } else if (!oriConfig || !is(fromJS(oriConfig), fromJS(config))) { + confirm({ + title: '閰嶇疆淇℃伅鏈繚瀛橈紝纭畾鍚庨��鍚楋紵', + content: '', + onOk() { + window.history.back() + }, + onCancel() {} + }) + } else { + window.history.back() } } @@ -529,7 +626,7 @@ components: [], viewType: 'menu', style: { - backgroundColor: '#ffffff', backgroundImage: '', paddingLeft: '20px', paddingRight: '20px' + backgroundColor: sessionStorage.getItem('sysBgColor') || '#ffffff', backgroundImage: '', paddingLeft: '20px', paddingRight: '20px' } } } @@ -647,7 +744,7 @@ components: [], viewType: 'menu', style: { - backgroundColor: '#ffffff', backgroundImage: '', paddingLeft: '20px', paddingRight: '20px' + backgroundColor: sessionStorage.getItem('sysBgColor') || '#ffffff', backgroundImage: '', paddingLeft: '20px', paddingRight: '20px' } } } else { @@ -1396,7 +1493,14 @@ } else if (item.type === 'group') { check(item.components) return + } else if (item.subtype === 'propcard' && item.subcards.length === 0) { + error = `缁勪欢銆�${item.name}銆嬩腑鍗$墖涓嶅彲涓虹┖锛乣 + return + } else if (item.type === 'login' && !item.wrap.linkmenu && item.wrap.link !== 'menu') { + error = '鐧诲綍缁勪欢鏈缃叧鑱旇彍鍗曪紒' + return } + if (['propcard', 'brafteditor', 'sandbox', 'stepform', 'tabform'].includes(item.subtype) && item.wrap.datatype === 'static') return if (['balcony'].includes(item.type) && item.wrap.datatype === 'static') return @@ -1407,7 +1511,7 @@ error = `缁勪欢銆�${item.name}銆嬫湭璁剧疆鏁版嵁婧愶紒` } else if (!item.setting.primaryKey) { error = `缁勪欢銆�${item.name}銆嬫湭璁剧疆涓婚敭锛乣 - } else if (!item.setting.supModule && item.type !== 'balcony') { + } else if (!item.setting.supModule && item.type !== 'balcony' && (!item.wrap || item.wrap.supType !== 'multi')) { error = `缁勪欢銆�${item.name}銆嬫湭璁剧疆涓婄骇缁勪欢锛乣 } } @@ -1421,6 +1525,15 @@ error = `缁勪欢銆�${item.name}銆嬪潗鏍囪酱灏氭湭璁剧疆锛乣 } else if (item.type === 'tree' && (!item.wrap.valueField || !item.wrap.labelField || !item.wrap.parentField)) { error = `缁勪欢銆�${item.name}銆嬪熀鏈俊鎭皻鏈缃紒` + } else if (item.type === 'table' && item.wrap.doubleClick) { + let _actions = [...item.action] + item.cols.forEach(col => { + if (col.type !== 'action') return + _actions.push(...col.elements) + }) + if (_actions.findIndex((m) => m.uuid === item.wrap.doubleClick) === -1) { + error = `缁勪欢銆�${item.name}銆嬬粦瀹氱殑鍙屽嚮鎸夐挳宸插垹闄わ紒` + } } }) } @@ -1625,8 +1738,8 @@ {!popBtn && !visible ? <DndProvider backend={HTML5Backend}> <div className={'menu-setting ' + (!settingshow ? 'hidden' : '')}> <div className="draw"> - {settingshow ? <Icon onClick={() => {sessionStorage.setItem('settingshow', 'false'); this.setState({settingshow: false})}} type="double-left" /> : null} - {!settingshow ? <Icon onClick={() => {sessionStorage.setItem('settingshow', 'true'); this.setState({settingshow: true})}} type="double-right" /> : null} + {settingshow ? <DoubleLeftOutlined onClick={() => {sessionStorage.setItem('settingshow', 'false'); this.setState({settingshow: false})}}/> : null} + {!settingshow ? <DoubleRightOutlined onClick={() => {sessionStorage.setItem('settingshow', 'true'); this.setState({settingshow: true})}}/> : null} </div> <div className="pc-setting-tools"> <Collapse accordion activeKey={activeKey} bordered={false} onChange={(key) => this.setState({activeKey: key})}> @@ -1659,24 +1772,25 @@ </div> <div className={'menu-control ' + (!controlshow ? 'hidden' : '')}> <div className="draw"> - {controlshow ? <Icon onClick={() => {sessionStorage.setItem('controlshow', 'false'); this.setState({controlshow: false})}} type="double-right" /> : null} - {!controlshow ? <Icon onClick={() => {sessionStorage.setItem('controlshow', 'true'); this.setState({controlshow: true})}} type="double-left" /> : null} + {controlshow ? <DoubleRightOutlined onClick={() => {sessionStorage.setItem('controlshow', 'false'); this.setState({controlshow: false})}}/> : null} + {!controlshow ? <DoubleLeftOutlined onClick={() => {sessionStorage.setItem('controlshow', 'true'); this.setState({controlshow: true})}}/> : null} </div> <div className="wrap"> - <Button type="primary" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> + <Button type="primary" id="save-config" onClick={this.submitConfig} loading={menuloading}>{dict['mob.save']}</Button> <Switch className="big" checkedChildren={dict['mob.enable']} unCheckedChildren={dict['mob.disable']} checked={config && config.enabled} onChange={this.onEnabledChange} /> + <img title="鍚庨��" className="back-view" onClick={this.backView} src={backurl} alt=""/> <CreateView resetmenu={this.getAppMenus} /> <PasteController insert={this.insert} /> <StyleCombControlButton menu={config} /> <SysInterface config={config} updateConfig={this.updateConfig}/> <PictureController/> <Quotecomponent config={config} updateConfig={this.updateConfig}/> - <Button className="mk-border-green" icon="home" onClick={this.setHomeView}>璁句负棣栭〉</Button> - <Button className="mk-border-purple" icon="login" onClick={this.setLoginView}>璁句负鐧诲綍椤�</Button> + <Button className="mk-border-green" onClick={this.setHomeView}><HomeOutlined /> 璁句负棣栭〉</Button> + <Button className="mk-border-purple" onClick={this.setLoginView}><LoginOutlined/> 璁句负鐧诲綍椤�</Button> <ReplaceField type="custom" config={config} updateConfig={this.resetConfig}/> <Transfer MenuID={MenuId} /> <Versions MenuId={MenuId} open_edition={config ? config.open_edition : ''}/> - <Button className="mk-border-danger" icon="redo" onClick={this.refreshView}>寮哄埗鍒锋柊</Button> + <Button className="mk-border-danger" onClick={this.refreshView}><RedoOutlined /> 寮哄埗鍒锋柊</Button> <Button type="default" onClick={this.closeView}>鍏抽棴</Button> </div> </div> diff --git a/src/views/pcdesign/index.scss b/src/views/pcdesign/index.scss index ff44ef5..c6a8f6a 100644 --- a/src/views/pcdesign/index.scss +++ b/src/views/pcdesign/index.scss @@ -1,3 +1,6 @@ +body { + overflow-x: hidden; +} .mk-pc-view { background: #000; min-height: 100vh; @@ -7,6 +10,17 @@ z-index: 3; left: calc(50% - 16px); top: calc(50vh - 70px); + } + .back-view { + width: 28px; + float: right; + margin-right: 10px; + cursor: pointer; + filter: opacity(0.7); + transition: filter 0.3s; + } + .back-view:hover { + filter: opacity(0.9); } .modal-form-board { padding-top: 0; @@ -27,7 +41,7 @@ box-shadow: 0 0 1px #959595; border-radius: 0 2px 2px 0px; - i { + .anticon { padding: 12px 3px; } } @@ -142,7 +156,7 @@ box-shadow: 0 0 1px #959595; border-radius: 0 2px 2px 0px; - i { + .anticon { padding: 12px 3px; } } diff --git a/src/views/printTemplate/dragelement/source.jsx b/src/views/printTemplate/dragelement/source.jsx index 2341f41..586c200 100644 --- a/src/views/printTemplate/dragelement/source.jsx +++ b/src/views/printTemplate/dragelement/source.jsx @@ -1,6 +1,7 @@ import React from 'react' import { useDrag } from 'react-dnd' -import { Icon } from 'antd' + +import MkIcon from '@/components/mk-icon' import './index.scss' const SourceElement = ({content}) => { @@ -8,7 +9,7 @@ return ( <div ref={drag} className="print-source-item"> {content.label} - <Icon type={content.icon} /> + <MkIcon type={content.icon} /> </div> ) } diff --git a/src/views/printTemplate/index.jsx b/src/views/printTemplate/index.jsx index 3d8dd6c..a477433 100644 --- a/src/views/printTemplate/index.jsx +++ b/src/views/printTemplate/index.jsx @@ -2,7 +2,8 @@ import { DndProvider } from 'react-dnd' import { is, fromJS } from 'immutable' import HTML5Backend from 'react-dnd-html5-backend' -import { Card, notification, Row, Button, Modal, Input, Icon, Switch } from 'antd' +import { Card, notification, Row, Button, Modal, Input, Switch } from 'antd' +import { ArrowUpOutlined, ArrowDownOutlined, CaretRightOutlined, ArrowRightOutlined, ArrowLeftOutlined } from '@ant-design/icons' import DragElement from './dragelement' import MutilForm from './mutilform' import SourceElement from './dragelement/source' @@ -45,7 +46,7 @@ upMinus: 1, leftPlus: 1, leftMinus: 1, - debug: false + debug: true } getclickpoint = (e) => { @@ -891,6 +892,8 @@ } render () { + const { debug } = this.state + return ( <div className="print-template"> <DndProvider backend={HTML5Backend}> @@ -902,12 +905,12 @@ })} </Card> <Card className="move-bar" title="鏁翠綋绉诲姩"> - <Input addonBefore={<Icon title="璺濅笂" type="arrow-up" />} addonAfter={<Icon onClick={() => this.updatePosition('upPlus')} type="plus" />} onChange={(e) => this.change(e, 'upPlus')} value={this.state.upPlus} /> - <Input addonBefore={<Icon title="璺濅笂" type="arrow-up" />} addonAfter={<Icon onClick={() => this.updatePosition('upMinus')} type="minus" />} onChange={(e) => this.change(e, 'upMinus')} value={this.state.upMinus} /> - <Input addonBefore={<Icon title="璺濆乏" type="arrow-left" />} addonAfter={<Icon onClick={() => this.updatePosition('leftPlus')} type="plus" />} onChange={(e) => this.change(e, 'leftPlus')} value={this.state.leftPlus} /> - <Input addonBefore={<Icon title="璺濆乏" type="arrow-left" />} addonAfter={<Icon onClick={() => this.updatePosition('leftMinus')} type="minus" />} onChange={(e) => this.change(e, 'leftMinus')} value={this.state.leftMinus} /> + <Input addonBefore={<ArrowUpOutlined/>} addonAfter={<CaretRightOutlined onClick={() => this.updatePosition('upMinus')}/>} onChange={(e) => this.change(e, 'upMinus')} value={this.state.upMinus} /> + <Input addonBefore={<ArrowDownOutlined/>} addonAfter={<CaretRightOutlined onClick={() => this.updatePosition('upPlus')}/>} onChange={(e) => this.change(e, 'upPlus')} value={this.state.upPlus} /> + <Input addonBefore={<ArrowLeftOutlined/>} addonAfter={<CaretRightOutlined onClick={() => this.updatePosition('leftMinus')}/>} onChange={(e) => this.change(e, 'leftMinus')} value={this.state.leftMinus} /> + <Input addonBefore={<ArrowRightOutlined/>} addonAfter={<CaretRightOutlined onClick={() => this.updatePosition('leftPlus')}/>} onChange={(e) => this.change(e, 'leftPlus')} value={this.state.leftPlus} /> <div style={{marginTop: '10px'}}> - <span>璋冭瘯妯″紡锛�</span><Switch onChange={this.changeDebug} /> + <span>璋冭瘯妯″紡锛�</span><Switch checked={debug} onChange={this.changeDebug} /> </div> </Card> </aside> diff --git a/src/views/printTemplate/index.scss b/src/views/printTemplate/index.scss index efb98b6..cd65a0b 100644 --- a/src/views/printTemplate/index.scss +++ b/src/views/printTemplate/index.scss @@ -55,7 +55,7 @@ input + .ant-input-group-addon { padding: 0; } - .anticon-plus, .anticon-minus { + .anticon-caret-right { cursor: pointer; line-height: 25px; padding-left: 15px; diff --git a/src/views/printTemplate/print.js b/src/views/printTemplate/print.js index 81c5792..de60e3d 100644 --- a/src/views/printTemplate/print.js +++ b/src/views/printTemplate/print.js @@ -36,6 +36,13 @@ element.fontSize = element.fontSize * sizeradio } else if (element.type === 'qrcode') { element.qrcodeWidth = element.qrcodeWidth * ratio + + if (element.qrcodeWidth > element.height) { + element.qrcodeWidth = element.height + } + if (element.qrcodeWidth > element.width) { + element.qrcodeWidth = element.width + } } else if (element.type === 'image') { element.imgWidth = element.imgWidth * ratio element.imgHeight = element.imgHeight * ratio @@ -70,9 +77,15 @@ context.translate(-_cx, -_cy) // 鎭㈠鍘熺偣 } - if (debug || selectId === element.uuid) { // 閫変腑鍏冪礌锛岃缃閮ㄩ槾褰� + if (selectId === element.uuid) { // 閫変腑鍏冪礌锛岃缃閮ㄩ槾褰� context.shadowBlur = 5 context.shadowColor = '#1890ff' + context.fillStyle = 'white' + context.fillRect(element.left, element.top, element.width || 1, element.height || 1) + context.shadowBlur = 0 + } else if (debug) { + context.shadowBlur = 3 + context.shadowColor = 'orange' context.fillStyle = 'white' context.fillRect(element.left, element.top, element.width || 1, element.height || 1) context.shadowBlur = 0 @@ -104,7 +117,7 @@ context.fillRect(element.left, element.top, element.width, element.height) } - if ((debug || selectId === element.uuid) && element.width > 3 * ratio && element.height > 3 * ratio) { // 閫変腑鍏冪礌锛岃缃閮ㄩ槾褰� + if (selectId === element.uuid && element.width > 3 * ratio && element.height > 3 * ratio) { // 閫変腑鍏冪礌锛岃缃閮ㄩ槾褰� context.strokeStyle = '#1890ff' context.beginPath() context.moveTo(element.left + element.width - 7, element.top + element.height - 2) @@ -131,6 +144,14 @@ context.fillStyle = element.fontColor let lines = element.value.split('\n') + + if (!element.value && element.field) { + if (element.field === 'other_field') { + lines = [element.cusfield || ''] + } else { + lines = [element.field] + } + } let _y = element.top + element.padding + element.fontSize + element.borderSize let _left = element.left + element.borderSize + element.padding let _right = element.left + element.width - element.padding - element.borderSize diff --git a/src/views/rolemanage/index.jsx b/src/views/rolemanage/index.jsx index 61acc7f..06a4db8 100644 --- a/src/views/rolemanage/index.jsx +++ b/src/views/rolemanage/index.jsx @@ -34,7 +34,15 @@ align: 'center', render: (text, record) => ( <div> - <Button type="link" onClick={() => this.deleteMenu(record)} style={{color: '#ff4d4f'}}>鍒犻櫎</Button> + {record.type !== 'none' ? + <Button type="link" onClick={() => this.deleteMenu(record)} style={{color: '#ff4d4f'}}>鍒犻櫎</Button> : + <Button type="link" onClick={() => { + notification.warning({ + top: 92, + message: '褰撳墠绯荤粺鑿滃崟灏氭湭鍒涘缓銆�', + duration: 5 + }) + }} style={{color: '#ff4d4f', opacity: '0.5'}}>鍒犻櫎</Button>} <Button type="link" onClick={() => this.jumpApp(record)} style={{color: '#1890ff', marginLeft: '5px'}}>缂栬緫</Button> </div> ), @@ -55,6 +63,7 @@ oriTrees = null UNSAFE_componentWillMount() { + document.body.className = '' let param = JSON.parse(window.decodeURIComponent(window.atob(this.props.match.params.param))) this.setState({app: param}, () => { @@ -111,26 +120,48 @@ Api.getCloudConfig(param).then(result => { if (result.status) { - this.setState({ - menulist: result.menus.map(item => { - item.nodes = '' - item.type = 'view' - if (item.menus_rolelist) { - try { - let pageParam = JSON.parse(window.decodeURIComponent(window.atob(item.menus_rolelist))) - item.nodes = pageParam - if (pageParam.login) { - item.nodes = '' - } else if (pageParam.type === 'navbar') { - item.type = 'navbar' - } - } catch (e) { + let ub = app.user_binding === 'true' && app.userbind ? false : true + let im = app.instantMessage ? false : true + + let menus = result.menus.map(item => { + item.nodes = '' + item.type = 'view' + if (item.menus_rolelist) { + try { + let pageParam = JSON.parse(window.decodeURIComponent(window.atob(item.menus_rolelist))) + item.nodes = pageParam + if (pageParam.login) { + item.nodes = '' + } else if (pageParam.type === 'navbar') { + item.type = 'navbar' + } else if (pageParam.type === 'im') { + item.type = 'im' item.nodes = '' } + } catch (e) { + item.nodes = '' } - - return item - }) + } + + if (!ub && app.userbind === item.MenuID) { + ub = true + } + if (!im && app.instantMessage === item.MenuID) { + im = true + } + + return item + }) + + if (!im) { + menus.push({nodes: '', type: 'none', MenuID: app.instantMessage, MenuName: '鍗虫椂閫氫俊'}) + } + if (!ub) { + menus.push({nodes: '', type: 'none', MenuID: app.userbind, MenuName: '鐢ㄦ埛缁戝畾'}) + } + + this.setState({ + menulist: menus }, () => { if (reset && (!this.oriTrees || this.oriTrees.length === 0)) { this.initMenutree() @@ -808,6 +839,18 @@ if (app.typename === 'pc') { route = 'pcdesign' } + if (item.type === 'navbar') { + notification.warning({ + top: 92, + message: '瀵艰埅鏍忎笉鍙崟鐙紪杈戯紝璇峰湪鍚湁瀵艰埅鏍忕殑椤甸潰涓慨鏀广��', + duration: 5 + }) + return + } + + if (app.instantMessage && item.MenuID === app.instantMessage) { + route = 'imdesign' + } window.open(window.location.href.replace(/#.+/ig, `#/${route}/${window.btoa(window.encodeURIComponent(JSON.stringify({...app, MenuID: item.MenuID, type: 'app'})))}`)) } -- Gitblit v1.8.0