├── .gitignore ├── demo-screenshot ├── 1.png ├── 2.png ├── 3.png └── 4.png ├── src ├── static │ ├── font │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ ├── iconfont.woff2 │ │ ├── iconfont.json │ │ ├── iconfont.css │ │ └── demo.css │ └── layui │ │ ├── font │ │ ├── iconfont.eot │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ │ ├── images │ │ └── face │ │ │ ├── 0.gif │ │ │ ├── 1.gif │ │ │ ├── 2.gif │ │ │ ├── 3.gif │ │ │ ├── 4.gif │ │ │ ├── 5.gif │ │ │ ├── 6.gif │ │ │ ├── 7.gif │ │ │ ├── 8.gif │ │ │ ├── 9.gif │ │ │ ├── 10.gif │ │ │ ├── 11.gif │ │ │ ├── 12.gif │ │ │ ├── 13.gif │ │ │ ├── 14.gif │ │ │ ├── 15.gif │ │ │ ├── 16.gif │ │ │ ├── 17.gif │ │ │ ├── 18.gif │ │ │ ├── 19.gif │ │ │ ├── 20.gif │ │ │ ├── 21.gif │ │ │ ├── 22.gif │ │ │ ├── 23.gif │ │ │ ├── 24.gif │ │ │ ├── 25.gif │ │ │ ├── 26.gif │ │ │ ├── 27.gif │ │ │ ├── 28.gif │ │ │ ├── 29.gif │ │ │ ├── 30.gif │ │ │ ├── 31.gif │ │ │ ├── 32.gif │ │ │ ├── 33.gif │ │ │ ├── 34.gif │ │ │ ├── 35.gif │ │ │ ├── 36.gif │ │ │ ├── 37.gif │ │ │ ├── 38.gif │ │ │ ├── 39.gif │ │ │ ├── 40.gif │ │ │ ├── 41.gif │ │ │ ├── 42.gif │ │ │ ├── 43.gif │ │ │ ├── 44.gif │ │ │ ├── 45.gif │ │ │ ├── 46.gif │ │ │ ├── 47.gif │ │ │ ├── 48.gif │ │ │ ├── 49.gif │ │ │ ├── 50.gif │ │ │ ├── 51.gif │ │ │ ├── 52.gif │ │ │ ├── 53.gif │ │ │ ├── 54.gif │ │ │ ├── 55.gif │ │ │ ├── 56.gif │ │ │ ├── 57.gif │ │ │ ├── 58.gif │ │ │ ├── 59.gif │ │ │ ├── 60.gif │ │ │ ├── 61.gif │ │ │ ├── 62.gif │ │ │ ├── 63.gif │ │ │ ├── 64.gif │ │ │ ├── 65.gif │ │ │ ├── 66.gif │ │ │ ├── 67.gif │ │ │ ├── 68.gif │ │ │ ├── 69.gif │ │ │ ├── 70.gif │ │ │ └── 71.gif │ │ ├── css │ │ ├── modules │ │ │ ├── layer │ │ │ │ └── default │ │ │ │ │ ├── icon.png │ │ │ │ │ ├── icon-ext.png │ │ │ │ │ ├── loading-0.gif │ │ │ │ │ ├── loading-1.gif │ │ │ │ │ └── loading-2.gif │ │ │ ├── code.css │ │ │ └── laydate │ │ │ │ └── default │ │ │ │ └── laydate.css │ │ └── layui.mobile.css │ │ ├── lay │ │ └── modules │ │ │ ├── code.js │ │ │ ├── laytpl.js │ │ │ ├── flow.js │ │ │ ├── util.js │ │ │ ├── rate.js │ │ │ ├── tree.js │ │ │ ├── carousel.js │ │ │ ├── laypage.js │ │ │ ├── upload.js │ │ │ ├── element.js │ │ │ └── form.js │ │ └── layui.js ├── routers │ ├── FormDesign │ │ └── index.js │ └── index.js ├── styles │ ├── loading.less │ ├── base.less │ └── default.less ├── utils │ ├── resultCode.js │ ├── publicUtils.js │ └── common.js ├── components │ └── form-design │ │ ├── config │ │ ├── Index.jsx │ │ ├── FDSwitch.jsx │ │ ├── FDDate.jsx │ │ ├── FDInput.jsx │ │ ├── FDTextarea.jsx │ │ ├── FDTitle.jsx │ │ ├── FDRadio.jsx │ │ ├── FDSelect.jsx │ │ └── FDCheckbox.jsx │ │ ├── Seed.jsx │ │ ├── Left.jsx │ │ ├── Panel.jsx │ │ ├── Mid.jsx │ │ ├── initialData.js │ │ ├── Preview.jsx │ │ └── Right.jsx ├── container │ └── FormDesign.jsx ├── normalize │ └── index.js ├── index.tmpl.html ├── api │ └── loginService.js ├── store │ └── FormDesign.js └── index.js ├── postcss.config.js ├── .babelrc ├── README.md ├── package.json ├── webpack.production.config.js └── webpack.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_STORE 2 | *.log 3 | node_modules 4 | dist 5 | coverage 6 | .idea/ 7 | .yarn-cache 8 | .vscode -------------------------------------------------------------------------------- /demo-screenshot/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/demo-screenshot/1.png -------------------------------------------------------------------------------- /demo-screenshot/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/demo-screenshot/2.png -------------------------------------------------------------------------------- /demo-screenshot/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/demo-screenshot/3.png -------------------------------------------------------------------------------- /demo-screenshot/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/demo-screenshot/4.png -------------------------------------------------------------------------------- /src/static/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/font/iconfont.eot -------------------------------------------------------------------------------- /src/static/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/font/iconfont.ttf -------------------------------------------------------------------------------- /src/static/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/font/iconfont.woff -------------------------------------------------------------------------------- /src/static/font/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/font/iconfont.woff2 -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | // postcss.config.js 2 | module.exports = { 3 | plugins: [ 4 | require('autoprefixer') 5 | ] 6 | } -------------------------------------------------------------------------------- /src/static/layui/font/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/font/iconfont.eot -------------------------------------------------------------------------------- /src/static/layui/font/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/font/iconfont.ttf -------------------------------------------------------------------------------- /src/static/layui/images/face/0.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/0.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/1.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/2.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/3.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/4.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/5.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/6.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/6.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/7.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/8.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/8.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/9.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/9.gif -------------------------------------------------------------------------------- /src/static/layui/font/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/font/iconfont.woff -------------------------------------------------------------------------------- /src/static/layui/images/face/10.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/10.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/11.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/11.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/12.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/12.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/13.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/13.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/14.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/14.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/15.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/15.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/16.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/16.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/17.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/17.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/18.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/18.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/19.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/19.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/20.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/20.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/21.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/21.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/22.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/22.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/23.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/23.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/24.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/24.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/25.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/25.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/26.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/26.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/27.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/27.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/28.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/28.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/29.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/29.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/30.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/30.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/31.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/31.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/32.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/32.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/33.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/33.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/34.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/34.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/35.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/35.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/36.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/36.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/37.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/37.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/38.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/38.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/39.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/39.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/40.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/40.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/41.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/41.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/42.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/42.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/43.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/43.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/44.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/44.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/45.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/45.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/46.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/46.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/47.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/47.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/48.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/48.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/49.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/49.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/50.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/50.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/51.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/51.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/52.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/52.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/53.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/53.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/54.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/54.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/55.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/55.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/56.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/56.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/57.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/57.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/58.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/58.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/59.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/59.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/60.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/60.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/61.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/61.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/62.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/62.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/63.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/63.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/64.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/64.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/65.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/65.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/66.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/66.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/67.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/67.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/68.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/68.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/69.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/69.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/70.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/70.gif -------------------------------------------------------------------------------- /src/static/layui/images/face/71.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/images/face/71.gif -------------------------------------------------------------------------------- /src/static/layui/css/modules/layer/default/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/css/modules/layer/default/icon.png -------------------------------------------------------------------------------- /src/static/layui/css/modules/layer/default/icon-ext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/css/modules/layer/default/icon-ext.png -------------------------------------------------------------------------------- /src/static/layui/css/modules/layer/default/loading-0.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/css/modules/layer/default/loading-0.gif -------------------------------------------------------------------------------- /src/static/layui/css/modules/layer/default/loading-1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/css/modules/layer/default/loading-1.gif -------------------------------------------------------------------------------- /src/static/layui/css/modules/layer/default/loading-2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TsangTszKin/react-form-design/HEAD/src/static/layui/css/modules/layer/default/loading-2.gif -------------------------------------------------------------------------------- /src/routers/FormDesign/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: your name 3 | * @Date: 2020-06-01 10:37:29 4 | * @LastEditTime: 2020-06-02 14:55:35 5 | * @LastEditors: your name 6 | * @Description: In User Settings Edit 7 | * @FilePath: \react-form-design\src\routers\FormDesign\index.js 8 | */ 9 | import FormDesign from '@/container/FormDesign' 10 | export default FormDesign -------------------------------------------------------------------------------- /src/styles/loading.less: -------------------------------------------------------------------------------- 1 | .Loading_wrap{ 2 | height:100%; 3 | .ant-spin-text{ 4 | letter-spacing:3px; 5 | color: #222222; 6 | } 7 | .ant-spin-dot i{ 8 | background-color: #222222; 9 | } 10 | .ant-spin-blur{ 11 | opacity:0; 12 | } 13 | .ant-spin-spinning{ 14 | background-color: #F0F2F5; 15 | } 16 | } -------------------------------------------------------------------------------- /src/utils/resultCode.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: zengzijian 3 | * @Date: 2018-08-24 14:52:49 4 | * @LastEditors: zengzijian 5 | * @LastEditTime: 2018-08-24 16:07:11 6 | * @Description: 返回码 7 | */ 8 | function resultCode(code) { 9 | switch (code) { 10 | case 1000: 11 | 12 | break; 13 | 14 | default: 15 | break; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/form-design/config/Index.jsx: -------------------------------------------------------------------------------- 1 | import FDInput from "./FDInput"; 2 | import FDTextArea from "./FDTextArea"; 3 | import FDRadio from "./FDRadio"; 4 | import FDCheckbox from "./FDCheckbox"; 5 | import FDSelect from "./FDSelect"; 6 | import FDSwitch from "./FDSwitch"; 7 | import FDDate from "./FDDate"; 8 | import FDTitle from "./FDTitle"; 9 | 10 | export { FDInput, FDTextArea, FDRadio, FDCheckbox, FDSelect, FDSwitch, FDDate, FDTitle } -------------------------------------------------------------------------------- /src/container/FormDesign.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import Panel from '@/components/form-design/Panel' 3 | import { Provider, observer } from 'mobx-react'; 4 | import store from '@/store/FormDesign' 5 | 6 | @observer 7 | class ReactBeautifulTodo extends Component { 8 | constructor(props) { 9 | super(props) 10 | this.store = new store() 11 | } 12 | 13 | render() { 14 | return ( 15 | 16 | 17 | 18 | ) 19 | } 20 | } 21 | export default ReactBeautifulTodo -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react", 5 | [ 6 | "env", 7 | { 8 | "modules": false, 9 | "useBuiltIns": false, 10 | "uglify": true, 11 | "targets": { 12 | "browsers": ["last 2 versions"] 13 | } 14 | } 15 | ] 16 | ], 17 | "plugins": [ 18 | "transform-decorators-legacy", 19 | "transform-class-properties", 20 | "syntax-dynamic-import", 21 | ["transform-runtime",{"polyfill": false}], 22 | ["transform-object-rest-spread",{"useBuiltIns": true}], 23 | ["import", { "libraryName": "antd", "style": true }] 24 | ] 25 | } -------------------------------------------------------------------------------- /src/normalize/index.js: -------------------------------------------------------------------------------- 1 | /* ======================================================== 2 | 3 | ** 浏览器标准化 ** 4 | 5 | 这个文件负责初始化时在浏览器环境中实现规范化,即使最终用户运行的是较老的浏览器,也会有一些特性。 6 | 7 | 填充的 polyfills : 8 | 9 | 1) Object.assign 10 | 2) Promise 11 | 3) Fetch 12 | 13 | ====================================================== */ 14 | 15 | // 1) Object.assign 16 | // ------------------------------------ 17 | Object.assign = require('object-assign') 18 | 19 | // 2) Promise 20 | // ------------------------------------ 21 | if (typeof Promise === 'undefined') { 22 | require('promise/lib/rejection-tracking').enable() 23 | window.Promise = require('promise/lib/es6-extensions.js') 24 | } 25 | 26 | // 3) Fetch 27 | // ------------------------------------ 28 | if (typeof window.fetch === 'undefined') { 29 | require('whatwg-fetch') 30 | } 31 | -------------------------------------------------------------------------------- /src/index.tmpl.html: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 23 | 24 | 动态表单设计 25 | 26 | 27 | 28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/static/layui/css/modules/code.css: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | html #layuicss-skincodecss{display:none;position:absolute;width:1989px}.layui-code-h3,.layui-code-view{position:relative;font-size:12px}.layui-code-view{display:block;margin:10px 0;padding:0;border:1px solid #e2e2e2;border-left-width:6px;background-color:#F2F2F2;color:#333;font-family:Courier New}.layui-code-h3{padding:0 10px;height:32px;line-height:32px;border-bottom:1px solid #e2e2e2}.layui-code-h3 a{position:absolute;right:10px;top:0;color:#999}.layui-code-view .layui-code-ol{position:relative;overflow:auto}.layui-code-view .layui-code-ol li{position:relative;margin-left:45px;line-height:20px;padding:0 5px;border-left:1px solid #e2e2e2;list-style-type:decimal-leading-zero;*list-style-type:decimal;background-color:#fff}.layui-code-view pre{margin:0}.layui-code-notepad{border:1px solid #0C0C0C;border-left-color:#3F3F3F;background-color:#0C0C0C;color:#C2BE9E}.layui-code-notepad .layui-code-h3{border-bottom:none}.layui-code-notepad .layui-code-ol li{background-color:#3F3F3F;border-left:none} -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | ## react-form-design (支持手机模式)(vue版本请查看我的form-design) 13 | - react-form-design是本人基于react、ant-design,react-beautiful-dnd构建开发,实现用拖拉拽和自主配置来实现动态表单设计功能功能,提供一套更优的前端解决方案 14 | - 自主研发,模仿小幺鸡表单设计器(点击查看小幺鸡) 15 | - 支持拖拉拽控件,支持二次拖来拽 16 | - 支持自定义配置和布局 17 | - 支持表单验证和表单预览 18 | 19 | 20 | ![效果图](demo-screenshot/1.png) 21 | 22 | ![效果图](demo-screenshot/2.png) 23 | 24 | ![效果图](demo-screenshot/3.png) 25 | 26 | ![效果图](demo-screenshot/4.png) 27 | 28 | 29 | ---------- 30 | 31 | 32 | ## Quick Start 33 | #### Install 34 | ~~~ 35 | npm install 36 | ~~~ 37 | 38 | #### Build 39 | 第一次运行或者构建生产环境实体文件时,需要打包build,运行一次。 40 | ~~~ 41 | npm run build 42 | ~~~ 43 | 44 | #### Run(本地服务器) 45 | ~~~ 46 | npm run server 47 | ~~~ 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/static/layui/lay/modules/code.js: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | ;layui.define("jquery",function(e){"use strict";var a=layui.$,l="http://www.layui.com/doc/modules/code.html";e("code",function(e){var t=[];e=e||{},e.elem=a(e.elem||".layui-code"),e.about=!("about"in e)||e.about,e.elem.each(function(){t.push(this)}),layui.each(t.reverse(),function(t,i){var c=a(i),o=c.html();(c.attr("lay-encode")||e.encode)&&(o=o.replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&").replace(//g,">").replace(/'/g,"'").replace(/"/g,""")),c.html('
  1. '+o.replace(/[\r\t\n]+/g,"
  2. ")+"
"),c.find(">.layui-code-h3")[0]||c.prepend('

'+(c.attr("lay-title")||e.title||"code")+(e.about?'layui.code':"")+"

");var d=c.find(">.layui-code-ol");c.addClass("layui-box layui-code-view"),(c.attr("lay-skin")||e.skin)&&c.addClass("layui-code-"+(c.attr("lay-skin")||e.skin)),(d.find("li").length/100|0)>0&&d.css("margin-left",(d.find("li").length/100|0)+"px"),(c.attr("lay-height")||e.height)&&d.css("max-height",c.attr("lay-height")||e.height)})})}).addcss("modules/code.css","skincodecss"); -------------------------------------------------------------------------------- /src/api/loginService.js: -------------------------------------------------------------------------------- 1 | import $ from 'jquery' 2 | import { Modal } from 'antd' 3 | import axios from 'axios' 4 | import http from '@/config/http' 5 | const errorHandler = error => { 6 | // message.error("出错了,请稍候再试"); 7 | Modal.error({ 8 | title: '系统提示', 9 | content: error, 10 | }); 11 | console.log("出错信息如下"); 12 | console.log(error); 13 | } 14 | // axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //此处是增加的代码,设置请求头的类型 15 | export default { 16 | test() { 17 | console.log(http); 18 | }, 19 | login(params) { 20 | return 21 | $.ajax({ 22 | type: 'get', 23 | // data: params, 24 | dataType: 'jsonp', 25 | url: "http://www.layui.com/demo/table/user/?page=1&limit=30", 26 | async: false, 27 | success: function (result) { 28 | alert(111); 29 | console.log(result); 30 | } 31 | }); 32 | }, 33 | getData() { 34 | return axios.get(`http://www.layui.com/demo/table/user/?page=1&limit=30`).catch(errorHandler); 35 | }, 36 | getData2() { 37 | return axios.get(`http://121.8.157.140:18211/api/zsapi/dict/datacache/loadDict/ZS_DIFFICULTY`).catch(errorHandler); 38 | } 39 | } -------------------------------------------------------------------------------- /src/routers/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: your name 3 | * @Date: 2020-06-01 09:22:41 4 | * @LastEditTime: 2020-06-04 11:16:44 5 | * @LastEditors: Please set LastEditors 6 | * @Description: In User Settings Edit 7 | * @FilePath: \react-form-design\src\routers\index.js 8 | */ 9 | /* 10 | * @Author: your name 11 | * @Date: 2020-06-01 09:22:41 12 | * @LastEditTime: 2020-06-01 10:41:25 13 | * @LastEditors: Please set LastEditors 14 | * @Description: In User Settings Edit 15 | * @FilePath: \react-form-design\src\routers\index.js 16 | */ 17 | import React, { Component } from 'react' 18 | import { Route, Switch, withRouter } from 'react-router-dom' 19 | import FormDesign from './FormDesign' 20 | import { LocaleProvider } from 'antd'; 21 | import zh_CN from 'antd/lib/locale-provider/zh_CN'; 22 | import 'moment/locale/zh-cn'; 23 | // import "antd/dist/antd.less"; // 引入官方提供的 less 样式入口文件 24 | import "@/styles/default.less"; // 用于覆盖上面定义的变量 25 | 26 | @withRouter 27 | class Routers extends Component { 28 | constructor(props) { 29 | super(props) 30 | } 31 | render() { 32 | return ( 33 | 34 | 35 | 36 | 37 | 38 | ) 39 | } 40 | } 41 | 42 | export default Routers -------------------------------------------------------------------------------- /src/components/form-design/Seed.jsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: your name 3 | * @Date: 2020-06-01 11:42:36 4 | * @LastEditTime: 2020-06-03 10:43:36 5 | * @LastEditors: Please set LastEditors 6 | * @Description: In User Settings Edit 7 | * @FilePath: \react-form-design\src\container\Seed.js 8 | */ 9 | import React, { Component } from 'react' 10 | import { Draggable } from 'react-beautiful-dnd' 11 | 12 | 13 | export default class Seed extends Component { 14 | render() { 15 | return ( 16 | 21 | {(provided, snapshot) => ( 22 |
30 |
31 | 32 | {this.props.data.label} 33 |
34 |
35 | )} 36 |
37 | ) 38 | } 39 | } -------------------------------------------------------------------------------- /src/store/FormDesign.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: zengzijian 3 | * @Date: 2019-08-26 14:17:20 4 | * @LastEditors: Please set LastEditors 5 | * @LastEditTime: 2020-06-05 10:05:28 6 | * @Description: 7 | */ 8 | import { observable, toJS } from 'mobx' 9 | 10 | class store { 11 | 12 | @observable config = { 13 | data: { 14 | layout: 'inline', 15 | labelAlign: 'left', 16 | size: 'default', 17 | }, 18 | get get() { 19 | return toJS(this.data) 20 | }, 21 | set(value) { 22 | this.data = value 23 | }, 24 | update(key, value) { 25 | this.data[key] = value 26 | } 27 | } 28 | 29 | @observable content = { 30 | data: [], 31 | get get() { 32 | return toJS(this.data) 33 | }, 34 | set(value) { 35 | this.data = value 36 | } 37 | } 38 | 39 | @observable activeId = { 40 | value: '', 41 | get get() { 42 | return toJS(this.value) 43 | }, 44 | set(value) { 45 | this.value = value 46 | } 47 | } 48 | 49 | @observable mode = { 50 | value: 'phone', 51 | get get() { 52 | return toJS(this.value) 53 | }, 54 | set(value) { 55 | this.value = value 56 | } 57 | } 58 | 59 | } 60 | export default store -------------------------------------------------------------------------------- /src/styles/base.less: -------------------------------------------------------------------------------- 1 | html, body { 2 | width: 100%; 3 | height: 100%; 4 | font-size: 14px !important; 5 | background-color: #fff; 6 | font-family: '微软雅黑', Helvetica, Arial, sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | html, body, div, span, applet, object, iframe, p, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video { 12 | margin: 0; 13 | padding: 0; 14 | border: 0; 15 | } 16 | 17 | article, aside, details, figcaption, figure, footer, header, menu, nav, section { 18 | display: block; 19 | } 20 | 21 | 22 | ol, ul { 23 | list-style: none; 24 | } 25 | 26 | table { 27 | border-collapse: collapse; 28 | border-spacing: 0; 29 | } 30 | 31 | .P_auto { 32 | position: absolute; 33 | top: 0; 34 | left: 0; 35 | right: 0; 36 | bottom: 0; 37 | margin: auto; 38 | } 39 | 40 | .clear { 41 | zoom: 1; 42 | } 43 | 44 | .clearFix:after { 45 | content: ""; 46 | display: block; 47 | height: 0; 48 | clear: both; 49 | visibility: hidden; 50 | } -------------------------------------------------------------------------------- /src/components/form-design/config/FDSwitch.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Input, Switch } from 'antd' 4 | 5 | class FDSwitch extends Component { 6 | render() { 7 | const { label, code, options } = this.props.item 8 | const { width, defaultValue, required, placeholder } = options 9 | return ( 10 | 11 |
12 |

标题:

13 | this.props.callback('label', e.target.value)} /> 14 |
15 |
16 |

默认值:

17 | this.props.callback('defaultValue', checked)} /> 18 |
19 |
20 |

编码值:

21 | this.props.callback('code', e.target.value)} /> 22 |
23 |
24 |

是否必填:

25 | this.props.callback('required', checked)} /> 26 |
27 |
28 | ); 29 | } 30 | } 31 | 32 | FDSwitch.propTypes = { 33 | item: PropTypes.object, 34 | callback: PropTypes.func 35 | }; 36 | 37 | export default FDSwitch; -------------------------------------------------------------------------------- /src/static/layui/lay/modules/laytpl.js: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | ;layui.define(function(e){"use strict";var r={open:"{{",close:"}}"},c={exp:function(e){return new RegExp(e,"g")},query:function(e,c,t){var o=["#([\\s\\S])+?","([^{#}])*?"][e||0];return n((c||"")+r.open+o+r.close+(t||""))},escape:function(e){return String(e||"").replace(/&(?!#?[a-zA-Z0-9]+;)/g,"&").replace(//g,">").replace(/'/g,"'").replace(/"/g,""")},error:function(e,r){var c="Laytpl Error:";return"object"==typeof console&&console.error(c+e+"\n"+(r||"")),c+e}},n=c.exp,t=function(e){this.tpl=e};t.pt=t.prototype,window.errors=0,t.pt.parse=function(e,t){var o=this,p=e,a=n("^"+r.open+"#",""),l=n(r.close+"$","");e=e.replace(/\s+|\r|\t|\n/g," ").replace(n(r.open+"#"),r.open+"# ").replace(n(r.close+"}"),"} "+r.close).replace(/\\/g,"\\\\").replace(n(r.open+"!(.+?)!"+r.close),function(e){return e=e.replace(n("^"+r.open+"!"),"").replace(n("!"+r.close),"").replace(n(r.open+"|"+r.close),function(e){return e.replace(/(.)/g,"\\$1")})}).replace(/(?="|')/g,"\\").replace(c.query(),function(e){return e=e.replace(a,"").replace(l,""),'";'+e.replace(/\\/g,"")+';view+="'}).replace(c.query(1),function(e){var c='"+(';return e.replace(/\s/g,"")===r.open+r.close?"":(e=e.replace(n(r.open+"|"+r.close),""),/^=/.test(e)&&(e=e.replace(/^=/,""),c='"+_escape_('),c+e.replace(/\\/g,"")+')+"')}),e='"use strict";var view = "'+e+'";return view;';try{return o.cache=e=new Function("d, _escape_",e),e(t,c.escape)}catch(u){return delete o.cache,c.error(u,p)}},t.pt.render=function(e,r){var n,t=this;return e?(n=t.cache?t.cache(e,c.escape):t.parse(t.tpl,e),r?void r(n):n):c.error("no data")};var o=function(e){return"string"!=typeof e?c.error("Template not found"):new t(e)};o.config=function(e){e=e||{};for(var c in e)r[c]=e[c]},o.v="1.2.0",e("laytpl",o)}); -------------------------------------------------------------------------------- /src/static/layui/lay/modules/flow.js: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | ;layui.define("jquery",function(e){"use strict";var l=layui.$,o=function(e){},t='';o.prototype.load=function(e){var o,i,n,r,a=this,c=0;e=e||{};var f=l(e.elem);if(f[0]){var m=l(e.scrollElem||document),u=e.mb||50,s=!("isAuto"in e)||e.isAuto,v=e.end||"没有更多了",y=e.scrollElem&&e.scrollElem!==document,d="加载更多",h=l('
'+d+"
");f.find(".layui-flow-more")[0]||f.append(h);var p=function(e,t){e=l(e),h.before(e),t=0==t||null,t?h.html(v):h.find("a").html(d),i=t,o=null,n&&n()},g=function(){o=!0,h.find("a").html(t),"function"==typeof e.done&&e.done(++c,p)};if(g(),h.find("a").on("click",function(){l(this);i||o||g()}),e.isLazyimg)var n=a.lazyimg({elem:e.elem+" img",scrollElem:e.scrollElem});return s?(m.on("scroll",function(){var e=l(this),t=e.scrollTop();r&&clearTimeout(r),i||(r=setTimeout(function(){var i=y?e.height():l(window).height(),n=y?e.prop("scrollHeight"):document.documentElement.scrollHeight;n-t-i<=u&&(o||g())},100))}),a):a}},o.prototype.lazyimg=function(e){var o,t=this,i=0;e=e||{};var n=l(e.scrollElem||document),r=e.elem||"img",a=e.scrollElem&&e.scrollElem!==document,c=function(e,l){var o=n.scrollTop(),r=o+l,c=a?function(){return e.offset().top-n.offset().top+o}():e.offset().top;if(c>=o&&c<=r&&!e.attr("src")){var m=e.attr("lay-src");layui.img(m,function(){var l=t.lazyimg.elem.eq(i);e.attr("src",m).removeAttr("lay-src"),l[0]&&f(l),i++})}},f=function(e,o){var f=a?(o||n).height():l(window).height(),m=n.scrollTop(),u=m+f;if(t.lazyimg.elem=l(r),e)c(e,f);else for(var s=0;su)break}};if(f(),!o){var m;n.on("scroll",function(){var e=l(this);m&&clearTimeout(m),m=setTimeout(function(){f(null,e)},50)}),o=!0}return f},e("flow",new o)}); -------------------------------------------------------------------------------- /src/components/form-design/Left.jsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: your name 3 | * @Date: 2020-06-01 11:41:44 4 | * @LastEditTime: 2020-06-03 11:35:50 5 | * @LastEditors: Please set LastEditors 6 | * @Description: In User Settings Edit 7 | * @FilePath: \react-form-design\src\container\column.js 8 | */ 9 | 10 | import React, { Component } from 'react' 11 | import Seed from './Seed' 12 | import { Droppable } from 'react-beautiful-dnd' 13 | 14 | 15 | class Left extends Component { 16 | render() { 17 | return ( 18 |
19 | { 20 | this.props.items.map(((el, i) => 21 | 22 |

{el.title}

23 | 24 | {(provided, snapshot) => { 25 | return ( 26 |
32 | {el.items.map((el, index) => ( 33 | 34 | ))} 35 | {provided.placeholder} 36 |
37 | ) 38 | }} 39 |
40 |
41 | )) 42 | } 43 | 44 | 45 |
46 | ) 47 | } 48 | } 49 | 50 | export default Left -------------------------------------------------------------------------------- /src/components/form-design/config/FDDate.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Input, Switch, Select } from 'antd' 4 | 5 | class FDDate extends Component { 6 | render() { 7 | const { label, code, options } = this.props.item 8 | const { required, format } = options 9 | return ( 10 | 11 |
12 |

标题:

13 | this.props.callback('label', e.target.value)} /> 14 |
15 |
16 |

格式化:

17 | 24 |
25 |
26 |

编码值:

27 | this.props.callback('code', e.target.value)} /> 28 |
29 |
30 |

是否必填:

31 | this.props.callback('required', checked)} /> 32 |
33 |
34 | ); 35 | } 36 | } 37 | 38 | FDDate.propTypes = { 39 | item: PropTypes.object, 40 | callback: PropTypes.func 41 | }; 42 | 43 | export default FDDate; -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: zengzijian 3 | * @Date: 2018-07-24 15:45:56 4 | * @LastEditors: Please set LastEditors 5 | * @LastEditTime: 2020-06-02 10:43:55 6 | * @Description: 根节点入口 7 | */ 8 | import React from 'react'; 9 | import { render } from 'react-dom'; 10 | import { HashRouter } from 'react-router-dom'; 11 | import Routers from './routers'; 12 | import "babel-polyfill"; 13 | 14 | class App extends React.Component { 15 | 16 | state = { 17 | isLoading: false, 18 | loadingIndex: 0 19 | } 20 | 21 | componentWillMount() { 22 | console.log('navigator', navigator) 23 | // console.log('app component will mount'); 24 | // console.log("process.env.type ------ =", process.env.type); 25 | let self = this; 26 | var timer = setInterval(function () { 27 | if (window.layui) { 28 | window.layer = window.layui.layer 29 | stop(); 30 | }; 31 | }, 100); 32 | function stop() { 33 | window.clearInterval(timer); 34 | } 35 | } 36 | 37 | componentDidMount() { 38 | console.log('app component did mount'); 39 | let self = this; 40 | React.Component.prototype.$loading = { 41 | show: function () { 42 | self.setState({ 43 | loadingIndex: layer.load(2, { shade: [0.1, '#fff'] }) 44 | }) 45 | let $this = this; 46 | setTimeout(function () { 47 | $this.hide(); 48 | }, 10000) 49 | }, 50 | hide: function () { 51 | layer.closeAll('loading'); //关闭加载层 52 | } 53 | } 54 | 55 | } 56 | 57 | render() { 58 | return ( 59 | 60 | 61 | 62 | ) 63 | } 64 | } 65 | 66 | 67 | render(, document.getElementById('root')) 68 | console.log("module.hot", module.hot); 69 | if (module.hot) { 70 | module.hot.accept(); 71 | } 72 | console.log("module", module); -------------------------------------------------------------------------------- /src/components/form-design/config/FDInput.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Input, Switch } from 'antd' 4 | 5 | class FDInput extends Component { 6 | render() { 7 | const { label, code, options } = this.props.item 8 | const { width, defaultValue, required, placeholder } = options 9 | return ( 10 | 11 |
12 |

标题:

13 | this.props.callback('label', e.target.value)} /> 14 |
15 |
16 |

宽度:

17 | this.props.callback('width', e.target.value)} /> 18 |
19 |
20 |

占位内容:

21 | this.props.callback('placeholder', e.target.value)} /> 22 |
23 |
24 |

默认值:

25 | this.props.callback('defaultValue', e.target.value)} /> 26 |
27 |
28 |

编码值:

29 | this.props.callback('code', e.target.value)} /> 30 |
31 |
32 |

是否必填:

33 | this.props.callback('required', checked)} /> 34 |
35 |
36 | ); 37 | } 38 | } 39 | 40 | FDInput.propTypes = { 41 | item: PropTypes.object, 42 | callback: PropTypes.func 43 | }; 44 | 45 | export default FDInput; -------------------------------------------------------------------------------- /src/components/form-design/config/FDTextarea.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Input, Switch } from 'antd' 4 | 5 | class FDTextArea extends Component { 6 | render() { 7 | const { label, code, options } = this.props.item 8 | const { width, defaultValue, required, placeholder } = options 9 | return ( 10 | 11 |
12 |

标题:

13 | this.props.callback('label', e.target.value)} /> 14 |
15 |
16 |

宽度:

17 | this.props.callback('width', e.target.value)} /> 18 |
19 |
20 |

占位内容:

21 | this.props.callback('placeholder', e.target.value)} /> 22 |
23 |
24 |

默认值:

25 | this.props.callback('defaultValue', e.target.value)} /> 26 |
27 |
28 |

编码值:

29 | this.props.callback('code', e.target.value)} /> 30 |
31 |
32 |

是否必填:

33 | this.props.callback('required', checked)} /> 34 |
35 |
36 | ); 37 | } 38 | } 39 | 40 | FDTextArea.propTypes = { 41 | item: PropTypes.object, 42 | callback: PropTypes.func 43 | }; 44 | 45 | export default FDTextArea; -------------------------------------------------------------------------------- /src/components/form-design/config/FDTitle.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Input, Radio, Switch } from 'antd' 4 | import { SketchPicker } from 'react-color'; 5 | 6 | class FDInput extends Component { 7 | render() { 8 | const { label, code, options } = this.props.item 9 | const { fontSize, color, textAlign, fontWeight } = options 10 | return ( 11 | 12 |
13 |

标题:

14 | this.props.callback('label', e.target.value)} /> 15 |
16 |
17 |

字体大小:

18 | this.props.callback('fontSize', e.target.value)} /> 19 |
20 |
21 |

颜色:

22 | { 23 | console.log(color) 24 | this.props.callback('color', color.hex) 25 | } } /> 26 |
27 |
28 |

对齐方式:

29 | this.props.callback('textAlign', e.target.value)}> 30 | 左对齐 31 | 居中 32 | 右对齐 33 | 34 |
35 |
36 |

是否加粗:

37 | this.props.callback('fontWeight', checked ? 'bold': 'normal')} /> 38 |
39 |
40 | ); 41 | } 42 | } 43 | 44 | FDInput.propTypes = { 45 | item: PropTypes.object, 46 | callback: PropTypes.func 47 | }; 48 | 49 | export default FDInput; -------------------------------------------------------------------------------- /src/static/layui/lay/modules/util.js: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | ;layui.define("jquery",function(e){"use strict";var t=layui.$,i={fixbar:function(e){var i,a,o="layui-fixbar",r="layui-fixbar-top",l=t(document),n=t("body");e=t.extend({showHeight:200},e),e.bar1=e.bar1===!0?"":e.bar1,e.bar2=e.bar2===!0?"":e.bar2,e.bgcolor=e.bgcolor?"background-color:"+e.bgcolor:"";var c=[e.bar1,e.bar2,""],g=t(['"].join("")),u=g.find("."+r),s=function(){var t=l.scrollTop();t>=e.showHeight?i||(u.show(),i=1):i&&(u.hide(),i=0)};t("."+o)[0]||("object"==typeof e.css&&g.css(e.css),n.append(g),s(),g.find("li").on("click",function(){var i=t(this),a=i.attr("lay-type");"top"===a&&t("html,body").animate({scrollTop:0},200),e.click&&e.click.call(this,a)}),l.on("scroll",function(){clearTimeout(a),a=setTimeout(function(){s()},100)}))},countdown:function(e,t,i){var a=this,o="function"==typeof t,r=new Date(e).getTime(),l=new Date(!t||o?(new Date).getTime():t).getTime(),n=r-l,c=[Math.floor(n/864e5),Math.floor(n/36e5)%24,Math.floor(n/6e4)%60,Math.floor(n/1e3)%60];o&&(i=t);var g=setTimeout(function(){a.countdown(e,l+1e3,i)},1e3);return i&&i(n>0?c:[0,0,0,0],t,g),n<=0&&clearTimeout(g),g},timeAgo:function(e,t){var i=this,a=[[],[]],o=(new Date).getTime()-new Date(e).getTime();return o>6912e5?(o=new Date(e),a[0][0]=i.digit(o.getFullYear(),4),a[0][1]=i.digit(o.getMonth()+1),a[0][2]=i.digit(o.getDate()),t||(a[1][0]=i.digit(o.getHours()),a[1][1]=i.digit(o.getMinutes()),a[1][2]=i.digit(o.getSeconds())),a[0].join("-")+" "+a[1].join(":")):o>=864e5?(o/1e3/60/60/24|0)+"天前":o>=36e5?(o/1e3/60/60|0)+"小时前":o>=12e4?(o/1e3/60|0)+"分钟前":o<0?"未来":"刚刚"},digit:function(e,t){var i="";e=String(e),t=t||2;for(var a=e.length;a/g,">").replace(/'/g,"'").replace(/"/g,""")}};e("util",i)}); -------------------------------------------------------------------------------- /src/static/font/iconfont.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "1268923", 3 | "name": "动态表单设计", 4 | "font_family": "iconfont", 5 | "css_prefix_text": "icon-", 6 | "description": "", 7 | "glyphs": [ 8 | { 9 | "icon_id": "7192357", 10 | "name": "复制", 11 | "font_class": "fuzhi", 12 | "unicode": "e720", 13 | "unicode_decimal": 59168 14 | }, 15 | { 16 | "icon_id": "10292039", 17 | "name": "删 除", 18 | "font_class": "shanchu", 19 | "unicode": "e614", 20 | "unicode_decimal": 58900 21 | }, 22 | { 23 | "icon_id": "637485", 24 | "name": "单选框", 25 | "font_class": "danxuankuang", 26 | "unicode": "e69c", 27 | "unicode_decimal": 59036 28 | }, 29 | { 30 | "icon_id": "695127", 31 | "name": "标题", 32 | "font_class": "biaoti", 33 | "unicode": "e62b", 34 | "unicode_decimal": 58923 35 | }, 36 | { 37 | "icon_id": "998821", 38 | "name": "布局", 39 | "font_class": "ai211", 40 | "unicode": "e6c7", 41 | "unicode_decimal": 59079 42 | }, 43 | { 44 | "icon_id": "1120965", 45 | "name": "多选框", 46 | "font_class": "duoxuankuang1", 47 | "unicode": "e61c", 48 | "unicode_decimal": 58908 49 | }, 50 | { 51 | "icon_id": "1766503", 52 | "name": "符号-图片上传", 53 | "font_class": "tupianshangchuan", 54 | "unicode": "e69d", 55 | "unicode_decimal": 59037 56 | }, 57 | { 58 | "icon_id": "1790454", 59 | "name": "多行文本", 60 | "font_class": "duohangwenben", 61 | "unicode": "e6e7", 62 | "unicode_decimal": 59111 63 | }, 64 | { 65 | "icon_id": "2471367", 66 | "name": "开关", 67 | "font_class": "kaiguan", 68 | "unicode": "e673", 69 | "unicode_decimal": 58995 70 | }, 71 | { 72 | "icon_id": "4251758", 73 | "name": "时间选择器", 74 | "font_class": "shijianxuanzeqi", 75 | "unicode": "e64d", 76 | "unicode_decimal": 58957 77 | }, 78 | { 79 | "icon_id": "5881136", 80 | "name": "单行文本", 81 | "font_class": "danhangwenben", 82 | "unicode": "e62a", 83 | "unicode_decimal": 58922 84 | }, 85 | { 86 | "icon_id": "7367534", 87 | "name": "下拉选择", 88 | "font_class": "xialaxuanze", 89 | "unicode": "e617", 90 | "unicode_decimal": 58903 91 | }, 92 | { 93 | "icon_id": "7855698", 94 | "name": "计数标签", 95 | "font_class": "jishubiaoqian", 96 | "unicode": "e620", 97 | "unicode_decimal": 58912 98 | } 99 | ] 100 | } 101 | -------------------------------------------------------------------------------- /src/static/layui/lay/modules/rate.js: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | ;layui.define("jquery",function(e){"use strict";var a=layui.jquery,i={config:{},index:layui.rate?layui.rate.index+1e4:0,set:function(e){var i=this;return i.config=a.extend({},i.config,e),i},on:function(e,a){return layui.onevent.call(this,n,e,a)}},l=function(){var e=this,a=e.config;return{setvalue:function(a){e.setvalue.call(e,a)},config:a}},n="rate",t="layui-rate",o="layui-icon-rate",s="layui-icon-rate-solid",u="layui-icon-rate-half",r="layui-icon-rate-solid layui-icon-rate-half",c="layui-icon-rate-solid layui-icon-rate",f="layui-icon-rate layui-icon-rate-half",v=function(e){var l=this;l.index=++i.index,l.config=a.extend({},l.config,i.config,e),l.render()};v.prototype.config={length:5,text:!1,readonly:!1,half:!1,value:0,theme:""},v.prototype.render=function(){var e=this,i=e.config,l=i.theme?'style="color: '+i.theme+';"':"";i.elem=a(i.elem),parseInt(i.value)!==i.value&&(i.half||(i.value=Math.ceil(i.value)-i.value<.5?Math.ceil(i.value):Math.floor(i.value)));for(var n='
    ",u=1;u<=i.length;u++){var r='
  • ";i.half&&parseInt(i.value)!==i.value&&u==Math.ceil(i.value)?n=n+'
  • ":n+=r}n+="
"+(i.text?''+i.value+"星":"")+"";var c=i.elem,f=c.next("."+t);f[0]&&f.remove(),e.elemTemp=a(n),i.span=e.elemTemp.next("span"),i.setText&&i.setText(i.value),c.html(e.elemTemp),c.addClass("layui-inline"),i.readonly||e.action()},v.prototype.setvalue=function(e){var a=this,i=a.config;i.value=e,a.render()},v.prototype.action=function(){var e=this,i=e.config,l=e.elemTemp,n=l.find("i").width();l.children("li").each(function(e){var t=e+1,v=a(this);v.on("click",function(e){if(i.value=t,i.half){var o=e.pageX-a(this).offset().left;o<=n/2&&(i.value=i.value-.5)}i.text&&l.next("span").text(i.value+"星"),i.choose&&i.choose(i.value),i.setText&&i.setText(i.value)}),v.on("mousemove",function(e){if(l.find("i").each(function(){a(this).addClass(o).removeClass(r)}),l.find("i:lt("+t+")").each(function(){a(this).addClass(s).removeClass(f)}),i.half){var c=e.pageX-a(this).offset().left;c<=n/2&&v.children("i").addClass(u).removeClass(s)}}),v.on("mouseleave",function(){l.find("i").each(function(){a(this).addClass(o).removeClass(r)}),l.find("i:lt("+Math.floor(i.value)+")").each(function(){a(this).addClass(s).removeClass(f)}),i.half&&parseInt(i.value)!==i.value&&l.children("li:eq("+Math.floor(i.value)+")").children("i").addClass(u).removeClass(c)})})},v.prototype.events=function(){var e=this;e.config},i.render=function(e){var a=new v(e);return l.call(a)},e(n,i)}); -------------------------------------------------------------------------------- /src/static/layui/lay/modules/tree.js: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | ;layui.define("jquery",function(e){"use strict";var o=layui.$,a=layui.hint(),i="layui-tree-enter",r=function(e){this.options=e},t={arrow:["",""],checkbox:["",""],radio:["",""],branch:["",""],leaf:""};r.prototype.init=function(e){var o=this;e.addClass("layui-box layui-tree"),o.options.skin&&e.addClass("layui-tree-skin-"+o.options.skin),o.tree(e),o.on(e)},r.prototype.tree=function(e,a){var i=this,r=i.options,n=a||r.nodes;layui.each(n,function(a,n){var l=n.children&&n.children.length>0,c=o('
    '),s=o(["
  • ",function(){return l?''+(n.spread?t.arrow[1]:t.arrow[0])+"":""}(),function(){return r.check?''+("checkbox"===r.check?t.checkbox[0]:"radio"===r.check?t.radio[0]:"")+"":""}(),function(){return'"+(''+(l?n.spread?t.branch[1]:t.branch[0]:t.leaf)+"")+(""+(n.name||"未命名")+"")}(),"
  • "].join(""));l&&(s.append(c),i.tree(c,n.children)),e.append(s),"function"==typeof r.click&&i.click(s,n),i.spread(s,n),r.drag&&i.drag(s,n)})},r.prototype.click=function(e,o){var a=this,i=a.options;e.children("a").on("click",function(e){layui.stope(e),i.click(o)})},r.prototype.spread=function(e,o){var a=this,i=(a.options,e.children(".layui-tree-spread")),r=e.children("ul"),n=e.children("a"),l=function(){e.data("spread")?(e.data("spread",null),r.removeClass("layui-show"),i.html(t.arrow[0]),n.find(".layui-icon").html(t.branch[0])):(e.data("spread",!0),r.addClass("layui-show"),i.html(t.arrow[1]),n.find(".layui-icon").html(t.branch[1]))};r[0]&&(i.on("click",l),n.on("dblclick",l))},r.prototype.on=function(e){var a=this,r=a.options,t="layui-tree-drag";e.find("i").on("selectstart",function(e){return!1}),r.drag&&o(document).on("mousemove",function(e){var i=a.move;if(i.from){var r=(i.to,o('
    '));e.preventDefault(),o("."+t)[0]||o("body").append(r);var n=o("."+t)[0]?o("."+t):r;n.addClass("layui-show").html(i.from.elem.children("a").html()),n.css({left:e.pageX+10,top:e.pageY+10})}}).on("mouseup",function(){var e=a.move;e.from&&(e.from.elem.children("a").removeClass(i),e.to&&e.to.elem.children("a").removeClass(i),a.move={},o("."+t).remove())})},r.prototype.move={},r.prototype.drag=function(e,a){var r=this,t=(r.options,e.children("a")),n=function(){var t=o(this),n=r.move;n.from&&(n.to={item:a,elem:e},t.addClass(i))};t.on("mousedown",function(){var o=r.move;o.from={item:a,elem:e}}),t.on("mouseenter",n).on("mousemove",n).on("mouseleave",function(){var e=o(this),a=r.move;a.from&&(delete a.to,e.removeClass(i))})},e("tree",function(e){var i=new r(e=e||{}),t=o(e.elem);return t[0]?void i.init(t):a.error("layui.tree 没有找到"+e.elem+"元素")})}); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "zzj-webpack-sample-project", 3 | "version": "1.0.0", 4 | "description": "这是我的第一个webpack个人搭建", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "start": "webpack", 8 | "server": "cross-env NODE_ENV=development http_env=development webpack-dev-server --open --mode development", 9 | "build": "cross-env NODE_ENV=production http_env=production webpack --config ./webpack.production.config.js --progress --mode production" 10 | }, 11 | "main": "main.js", 12 | "dependencies": { 13 | "@antv/data-set": "^0.9.6", 14 | "@antv/g2": "^3.2.7", 15 | "antd": "^3.10.8", 16 | "axios": "^0.18.0", 17 | "babel-plugin-transform-object-assign": "^6.22.0", 18 | "babel-polyfill": "^6.26.0", 19 | "codemirror": "^5.40.0", 20 | "crypto-js": "^3.1.9-1", 21 | "extract-text-webpack-plugin": "^4.0.0-beta.0", 22 | "immutability-helper": "^2.8.1", 23 | "jquery": "^3.3.1", 24 | "js-cookie": "^2.2.0", 25 | "layui-layer": "^1.0.9", 26 | "mobx": "^4.1.0", 27 | "mobx-react": "^5.0.0", 28 | "object-assign": "^4.1.1", 29 | "postcss-flexbugs-fixes": "^4.1.0", 30 | "promise": "^8.0.1", 31 | "react": "^16.13.1", 32 | "react-beautiful-dnd": "^10.1.1", 33 | "react-codemirror": "^1.0.0", 34 | "react-codemirror2": "^5.1.0", 35 | "react-color": "^2.18.1", 36 | "react-dnd": "^5.0.0", 37 | "react-dnd-html5-backend": "^5.0.1", 38 | "react-dom": "^16.2.0", 39 | "react-loadable": "^5.3.1", 40 | "react-router-dom": "^4.2.2", 41 | "styled-components": "^5.1.1", 42 | "viser-react": "^2.3.3", 43 | "webpack": "^4.26.0", 44 | "whatwg-fetch": "^2.0.4" 45 | }, 46 | "devDependencies": { 47 | "autoprefixer": "^9.3.1", 48 | "babel-cli": "^6.26.0", 49 | "babel-core": "^6.26.0", 50 | "babel-loader": "^7.1.3", 51 | "babel-plugin-import": "^1.6.6", 52 | "babel-plugin-react-transform": "^3.0.0", 53 | "babel-plugin-syntax-dynamic-import": "^6.18.0", 54 | "babel-plugin-transform-class-properties": "^6.24.1", 55 | "babel-plugin-transform-decorators-legacy": "^1.3.4", 56 | "babel-plugin-transform-object-rest-spread": "^6.26.0", 57 | "babel-plugin-transform-runtime": "^6.23.0", 58 | "babel-preset-env": "^1.6.1", 59 | "babel-preset-es2015": "^6.24.1", 60 | "babel-preset-react": "^6.24.1", 61 | "babel-runtime": "^6.26.0", 62 | "clean-webpack-plugin": "^1.0.0", 63 | "compression": "^1.7.2", 64 | "copy-webpack-plugin": "^4.5.1", 65 | "cross-env": "^5.1.3", 66 | "css-loader": "^0.28.11", 67 | "express": "^4.16.2", 68 | "file-loader": "^1.1.11", 69 | "html-webpack-plugin": "^3.2.0", 70 | "less": "^2.7.3", 71 | "less-loader": "^4.1.0", 72 | "mini-css-extract-plugin": "^0.4.5", 73 | "opn": "^5.2.0", 74 | "ora": "^2.0.0", 75 | "postcss-loader": "^3.0.0", 76 | "rimraf": "^2.6.2", 77 | "style-loader": "^0.21.0", 78 | "url-loader": "^1.0.1", 79 | "webpack-cli": "^3.1.1", 80 | "webpack-dev-middleware": "^3.1.3", 81 | "webpack-dev-server": "^3.1.10", 82 | "webpack-hot-middleware": "^2.22.1" 83 | }, 84 | "author": "Tsang", 85 | "license": "ISC" 86 | } 87 | -------------------------------------------------------------------------------- /src/components/form-design/Panel.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import PropTypes from 'prop-types' 3 | import { DragDropContext } from 'react-beautiful-dnd' 4 | import initialData from './initialData' 5 | import Left from './Left' 6 | import Right from './Right' 7 | import Mid from './Mid' 8 | import common from '@/utils/common' 9 | import '@/styles/form-design' 10 | import { inject, observer } from 'mobx-react'; 11 | 12 | @inject('store') 13 | @observer 14 | class Panel extends Component { 15 | state = initialData 16 | _index = 0 17 | getKey = () => { 18 | return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); 19 | } 20 | onDragEnd = result => { 21 | const { destination, source, draggableId } = result 22 | let content = this.props.store.content.get 23 | 24 | console.warn('destination, source, draggableId', destination, source, draggableId) 25 | 26 | let start 27 | if (source.droppableId.indexOf('seeds') !== -1) { 28 | start = common.deepClone(this.state.seeds[0].items[source.index]) 29 | } 30 | if (source.droppableId.indexOf('content') !== -1) { 31 | start = common.deepClone(content[source.index]) 32 | } 33 | 34 | if (!destination) { // 表单原先为空 35 | start.id = `content-${this.getKey()}---${content.length}` 36 | start.code = `code_${this.getKey()}${this.getKey()}` 37 | delete start.icon 38 | content.splice(0, 0, start) 39 | } else { 40 | if (destination.droppableId.indexOf('seeds') !== -1) return // 任何地方拖放到菜单,不处理 41 | 42 | const finish = common.deepClone(content[destination.index]) // 结束地必是表单面板 43 | const startIndex = source.index 44 | const finishIndex = destination.index 45 | console.warn('finishIndex', finishIndex) 46 | 47 | if (finish && start.id === finish.id) return // 无拖动 48 | 49 | if (source.droppableId.indexOf('content') !== -1) {// 起点在表单面板 50 | console.warn('start', start) 51 | content.splice(startIndex, 1) 52 | content.splice(finishIndex, 0, start) 53 | } else if (source.droppableId.indexOf('seeds') !== -1) {// 起点在菜单 54 | start.id = `content-${this.getKey()}---${content.length}` 55 | start.code = `code_${this.getKey()}${this.getKey()}` 56 | delete start.icon 57 | content.splice(finishIndex, 0, start) 58 | } 59 | } 60 | console.warn('最新content', content) 61 | this.props.store.activeId.set(start.id) 62 | this.props.store.content.set(content) 63 | } 64 | 65 | updateConfig = (type, key, value) => { 66 | console.log('type, key, value', type, key, value) 67 | if (type === '2') {// 更新表单配置 68 | let { config } = this.state 69 | config[key] = value 70 | this.setState({ config }) 71 | } 72 | } 73 | 74 | render() { 75 | return ( 76 | 77 |
    78 | 79 | 80 | 81 |
    82 |
    83 | ); 84 | } 85 | } 86 | 87 | Panel.propTypes = { 88 | content: PropTypes.array, 89 | callback: PropTypes.func 90 | }; 91 | Panel.defaultProps = { 92 | content: [], 93 | callback: () => { } 94 | } 95 | 96 | export default Panel; -------------------------------------------------------------------------------- /src/static/layui/lay/modules/carousel.js: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | ;layui.define("jquery",function(e){"use strict";var i=layui.$,n=(layui.hint(),layui.device(),{config:{},set:function(e){var n=this;return n.config=i.extend({},n.config,e),n},on:function(e,i){return layui.onevent.call(this,t,e,i)}}),t="carousel",a="layui-this",l=">*[carousel-item]>*",o="layui-carousel-left",r="layui-carousel-right",d="layui-carousel-prev",s="layui-carousel-next",u="layui-carousel-arrow",c="layui-carousel-ind",m=function(e){var t=this;t.config=i.extend({},t.config,n.config,e),t.render()};m.prototype.config={width:"600px",height:"280px",full:!1,arrow:"hover",indicator:"inside",autoplay:!0,interval:3e3,anim:"",trigger:"click",index:0},m.prototype.render=function(){var e=this,n=e.config;n.elem=i(n.elem),n.elem[0]&&(e.elemItem=n.elem.find(l),n.index<0&&(n.index=0),n.index>=e.elemItem.length&&(n.index=e.elemItem.length-1),n.interval<800&&(n.interval=800),n.full?n.elem.css({position:"fixed",width:"100%",height:"100%",zIndex:9999}):n.elem.css({width:n.width,height:n.height}),n.elem.attr("lay-anim",n.anim),e.elemItem.eq(n.index).addClass(a),e.elemItem.length<=1||(e.indicator(),e.arrow(),e.autoplay(),e.events()))},m.prototype.reload=function(e){var n=this;clearInterval(n.timer),n.config=i.extend({},n.config,e),n.render()},m.prototype.prevIndex=function(){var e=this,i=e.config,n=i.index-1;return n<0&&(n=e.elemItem.length-1),n},m.prototype.nextIndex=function(){var e=this,i=e.config,n=i.index+1;return n>=e.elemItem.length&&(n=0),n},m.prototype.addIndex=function(e){var i=this,n=i.config;e=e||1,n.index=n.index+e,n.index>=i.elemItem.length&&(n.index=0)},m.prototype.subIndex=function(e){var i=this,n=i.config;e=e||1,n.index=n.index-e,n.index<0&&(n.index=i.elemItem.length-1)},m.prototype.autoplay=function(){var e=this,i=e.config;i.autoplay&&(e.timer=setInterval(function(){e.slide()},i.interval))},m.prototype.arrow=function(){var e=this,n=e.config,t=i(['",'"].join(""));n.elem.attr("lay-arrow",n.arrow),n.elem.find("."+u)[0]&&n.elem.find("."+u).remove(),n.elem.append(t),t.on("click",function(){var n=i(this),t=n.attr("lay-type");e.slide(t)})},m.prototype.indicator=function(){var e=this,n=e.config,t=e.elemInd=i(['
      ',function(){var i=[];return layui.each(e.elemItem,function(e){i.push("")}),i.join("")}(),"
    "].join(""));n.elem.attr("lay-indicator",n.indicator),n.elem.find("."+c)[0]&&n.elem.find("."+c).remove(),n.elem.append(t),"updown"===n.anim&&t.css("margin-top",-(t.height()/2)),t.find("li").on("hover"===n.trigger?"mouseover":n.trigger,function(){var t=i(this),a=t.index();a>n.index?e.slide("add",a-n.index):aa.pages&&(a.curr=a.pages),t<0?t=1:t>a.pages&&(t=a.pages),a.prev="prev"in a?a.prev:"上一页",a.next="next"in a?a.next:"下一页";var n=a.pages>t?Math.ceil((a.curr+(t>1?1:0))/(t>0?t:1)):1,i={prev:function(){return a.prev?''+a.prev+"":""}(),page:function(){var e=[];if(a.count<1)return"";n>1&&a.first!==!1&&0!==t&&e.push(''+(a.first||1)+"");var i=Math.floor((t-1)/2),r=n>1?a.curr-i:1,u=n>1?function(){var e=a.curr+(t-i-1);return e>a.pages?a.pages:e}():t;for(u-r2&&e.push('');r<=u;r++)r===a.curr?e.push('"+r+""):e.push(''+r+"");return a.pages>t&&a.pages>u&&a.last!==!1&&(u+1…'),0!==t&&e.push(''+(a.last||a.pages)+"")),e.join("")}(),next:function(){return a.next?''+a.next+"":""}(),count:'共 '+a.count+" 条",limit:function(){var e=['"}(),refresh:['','',""].join(""),skip:function(){return['到第','','页',""].join("")}()};return['
    ',function(){var e=[];return layui.each(a.layout,function(a,t){i[t]&&e.push(i[t])}),e.join("")}(),"
    "].join("")},u.prototype.jump=function(e,a){if(e){var t=this,i=t.config,r=e.children,u=e[n]("button")[0],l=e[n]("input")[0],p=e[n]("select")[0],c=function(){var e=0|l.value.replace(/\s|\D/g,"");e&&(i.curr=e,t.render())};if(a)return c();for(var o=0,y=r.length;oi.pages||(i.curr=e,t.render())});p&&s.on(p,"change",function(){var e=this.value;i.curr*e>i.count&&(i.curr=Math.ceil(i.count/e)),i.limit=e,t.render()}),u&&s.on(u,"click",function(){c()})}},u.prototype.skip=function(e){if(e){var a=this,t=e[n]("input")[0];t&&s.on(t,"keyup",function(t){var n=this.value,i=t.keyCode;/^(37|38|39|40)$/.test(i)||(/\D/.test(n)&&(this.value=n.replace(/\D/,"")),13===i&&a.jump(e,!0))})}},u.prototype.render=function(e){var n=this,i=n.config,r=n.type(),u=n.view();2===r?i.elem&&(i.elem.innerHTML=u):3===r?i.elem.html(u):a[t](i.elem)&&(a[t](i.elem).innerHTML=u),i.jump&&i.jump(i,e);var s=a[t]("layui-laypage-"+i.index);n.jump(s),i.hash&&!e&&(location.hash="!"+i.hash+"="+i.curr),n.skip(s)};var s={render:function(e){var a=new u(e);return a.index},index:layui.laypage?layui.laypage.index+1e4:0,on:function(e,a,t){return e.attachEvent?e.attachEvent("on"+a,function(a){a.target=a.srcElement,t.call(e,a)}):e.addEventListener(a,t,!1),this}};e(i,s)}); -------------------------------------------------------------------------------- /src/components/form-design/config/FDRadio.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Input, Switch, Icon, Radio } from 'antd' 4 | 5 | class FDRadio extends Component { 6 | render() { 7 | const { label, code, options } = this.props.item 8 | const { defaultValue, required } = options 9 | return ( 10 | 11 |
    12 |

    标题:

    13 | this.props.callback('label', e.target.value)} /> 14 |
    15 |
    16 |

    编码值:

    17 | this.props.callback('code', e.target.value)} /> 18 |
    19 |
    20 |

    是否必填:

    21 | this.props.callback('required', checked)} /> 22 |
    23 |
    24 |

    选项: { 26 | console.warn('options', options) 27 | let _options = options.options 28 | _options.push({ label: `标题${_options.length + 1}`, value: `值${_options.length + 1}`, }) 29 | this.props.callback('options', _options) 30 | }} 31 | />

    32 | { 33 | this.props.callback('defaultValue', e.target.value) 34 | }} value={defaultValue} > 35 | { 36 | options.options.map((el, i) => 37 | 38 |
    39 | 标题: 40 | { 42 | let _options = options.options 43 | _options[i].label = e.target.value 44 | this.props.callback('options', _options) 45 | }} 46 | /> 47 | : 48 | { 50 | let _options = options.options 51 | _options[i].value = e.target.value 52 | this.props.callback('options', _options) 53 | }} 54 | /> 55 | { 57 | let _options = options.options 58 | _options.splice(i, 1) 59 | this.props.callback('options', _options) 60 | }} 61 | /> 62 |
    63 |
    64 | ) 65 | } 66 |
    67 |
    68 |
    69 | ); 70 | } 71 | } 72 | 73 | FDRadio.propTypes = { 74 | item: PropTypes.object, 75 | callback: PropTypes.func 76 | }; 77 | 78 | export default FDRadio; 79 | 80 | const radioStyle = { 81 | display: 'block' 82 | }; -------------------------------------------------------------------------------- /src/components/form-design/config/FDSelect.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Input, Switch, Icon, Radio } from 'antd' 4 | 5 | class FDSelect extends Component { 6 | render() { 7 | const { label, code, options } = this.props.item 8 | const { defaultValue, required } = options 9 | return ( 10 | 11 |
    12 |

    标题:

    13 | this.props.callback('label', e.target.value)} /> 14 |
    15 |
    16 |

    编码值:

    17 | this.props.callback('code', e.target.value)} /> 18 |
    19 |
    20 |

    是否必填:

    21 | this.props.callback('required', checked)} /> 22 |
    23 |
    24 |

    选项: { 26 | console.warn('options', options) 27 | let _options = options.options 28 | _options.push({ label: `标题${_options.length + 1}`, value: `值${_options.length + 1}`, }) 29 | this.props.callback('options', _options) 30 | }} 31 | />

    32 | { 33 | this.props.callback('defaultValue', e.target.value) 34 | }} value={defaultValue} > 35 | { 36 | options.options.map((el, i) => 37 | 38 |
    39 | 标题: 40 | { 42 | let _options = options.options 43 | _options[i].label = e.target.value 44 | this.props.callback('options', _options) 45 | }} 46 | /> 47 | : 48 | { 50 | let _options = options.options 51 | _options[i].value = e.target.value 52 | this.props.callback('options', _options) 53 | }} 54 | /> 55 | { 57 | let _options = options.options 58 | _options.splice(i, 1) 59 | this.props.callback('options', _options) 60 | }} 61 | /> 62 |
    63 |
    64 | ) 65 | } 66 |
    67 |
    68 |
    69 | ); 70 | } 71 | } 72 | 73 | FDSelect.propTypes = { 74 | item: PropTypes.object, 75 | callback: PropTypes.func 76 | }; 77 | 78 | export default FDSelect; 79 | 80 | const radioStyle = { 81 | display: 'block' 82 | }; -------------------------------------------------------------------------------- /src/components/form-design/config/FDCheckbox.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Input, Switch, Icon, Radio } from 'antd' 4 | 5 | class FDCheckbox extends Component { 6 | render() { 7 | const { label, code, options } = this.props.item 8 | const { defaultValue, required } = options 9 | return ( 10 | 11 |
    12 |

    标题:

    13 | this.props.callback('label', e.target.value)} /> 14 |
    15 |
    16 |

    编码值:

    17 | this.props.callback('code', e.target.value)} /> 18 |
    19 |
    20 |

    是否必填:

    21 | this.props.callback('required', checked)} /> 22 |
    23 |
    24 |

    选项: { 26 | console.warn('options', options) 27 | let _options = options.options 28 | _options.push({ label: `标题${_options.length + 1}`, value: `值${_options.length + 1}`, }) 29 | this.props.callback('options', _options) 30 | }} 31 | />

    32 | { 33 | this.props.callback('defaultValue', e.target.value) 34 | }} value={defaultValue} > 35 | { 36 | options.options.map((el, i) => 37 | 38 |
    39 | 标题: 40 | { 42 | let _options = options.options 43 | _options[i].label = e.target.value 44 | this.props.callback('options', _options) 45 | }} 46 | /> 47 | : 48 | { 50 | let _options = options.options 51 | _options[i].value = e.target.value 52 | this.props.callback('options', _options) 53 | }} 54 | /> 55 | { 57 | let _options = options.options 58 | _options.splice(i, 1) 59 | this.props.callback('options', _options) 60 | }} 61 | /> 62 |
    63 |
    64 | ) 65 | } 66 |
    67 |
    68 |
    69 | ); 70 | } 71 | } 72 | 73 | FDCheckbox.propTypes = { 74 | item: PropTypes.object, 75 | callback: PropTypes.func 76 | }; 77 | 78 | export default FDCheckbox; 79 | 80 | const radioStyle = { 81 | display: 'block' 82 | }; -------------------------------------------------------------------------------- /src/components/form-design/Mid.jsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: your name 3 | * @Date: 2020-06-01 11:41:44 4 | * @LastEditTime: 2020-06-05 10:16:32 5 | * @LastEditors: Please set LastEditors 6 | * @Description: In User Settings Edit 7 | * @FilePath: \react-form-design\src\container\column.js 8 | */ 9 | 10 | import React, { Component } from 'react' 11 | import FormItem from './FormItem' 12 | import { Droppable } from 'react-beautiful-dnd' 13 | import { Form, Modal, Switch, Radio } from 'antd' 14 | import { inject, observer } from 'mobx-react'; 15 | import common from '@/utils/common' 16 | import Preview from './Preview' 17 | 18 | @Form.create() 19 | @inject('store') 20 | @observer 21 | class Mid extends Component { 22 | state = { 23 | visible: false 24 | } 25 | handleSubmit = () => { 26 | let self = this 27 | this.refs.Preview.validateFieldsAndScroll((err, values) => { 28 | if (!err) { 29 | Modal.info({ 30 | width: '600px', 31 | title: '动态表单json数据', 32 | content: ( 33 |
    34 |
    35 | 表单配置(config): 36 |

    {JSON.stringify(self.props.store.config.get, null, "\t")}

    37 |
    38 |
    39 | 表单项配置(content): 40 |

    {JSON.stringify(self.props.store.content.get, null, "\t")}

    41 |
    42 |
    43 | ), 44 | onOk() { }, 45 | }); 46 | } 47 | }); 48 | }; 49 | render() { 50 | const config = this.props.store.config.get 51 | const content = this.props.store.content.get 52 | const mode = this.props.store.mode.get 53 | return ( 54 |
    55 |

    表单内容

    56 |

    { 57 | common.isEmpty(content) ? '' : 58 | this.setState({ visible: true })} >点击预览 59 | } 60 | { 61 | this.props.store.mode.set(e.target.value) 62 | }} value={mode}> 63 | PC模式 64 | 手机模式 65 | 66 |

    67 | 68 | {(provided, snapshot) => { 69 | return ( 70 |
    75 |
    76 | { 77 | content.map(((el, i) => 78 | 79 | )) 80 | } 81 | 82 | {provided.placeholder} 83 |
    84 | ) 85 | }} 86 |
    87 | 88 | this.setState({ visible: false })} 93 | destroyOnClose 94 | okText="模拟提交" 95 | > 96 | 97 | 98 | 99 |
    100 | ) 101 | } 102 | } 103 | 104 | export default Mid -------------------------------------------------------------------------------- /src/static/font/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1591253191921'); /* IE9 */ 3 | src: url('iconfont.eot?t=1591253191921#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAkkAAsAAAAAELQAAAjUAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCEaAqRWI40ATYCJAM4Cx4ABCAFhG0HgVYbKA4jESZkVUH2zwSbTt8Ci0gsPIy10rY8WMm7WW3fjJPwQGhf9utQSoKv/dB9d/cBg6AAJcmkML6qQnWiOjUeaHyFrK4i59iI/O9c5kasOc+X7uSpESn0v23gF5KGjtTQ6Sk1ITfh9gN/s/fR8H/iWI1oB6nr18ED0OF35zq4Gng1nbGjh4O5tfnA+f//W2v1xBMbGjZ4u1Cuxr3zmdnl3V90OMw8kUlEHolHSLuYD3iyBM1DwUPpQFtOCGn8iXEmttlDdIJ3YkGD2W+cTaC3L9J7enn/RFYUHgl0eokCyMpbhpIhhDa9JvYt4hOGNr1OlxAf5efHf4NYIaky71zP7i9KcvxLOHmvD68wJdPo+hiMg8i4QBTiGxn5CrvjC0l7qifuDbBpR71J+2uVhBu5IKNkK3P2xcuX8h9hDHQpHdsrCpu+cde4f1oiGdUmg6LXyRrVfPzzRE2hYyx/eauf+CUMQTpJEoARkhtADUkOb1EpEGCAFARQII0C6CFlA3SQSgEypDKABtJZgArSS6TR8lvu3010jvfZRdwg6TvIn3nyCxkp2p2Gi6qvcFK2yUK/wHDhc93cHUiE9WwIs5kTjstwAh+0pVyulMNyk+I45sTOcN+YEybTdvbRE0hrq5bZ3KxBW1ooEiJOVlubDmttTUGJvTc8sIqbXVh7rrtD+uLM0mtRzG8VDYEUNxjrpEBYla73IcFab2p0RchhhgZ9bd5f2iSJt7QMYp1t0zHIWpPXl2ht1VTcNF13T7Cf8GBw8NImgonoShGMCQDNv6SpEcEML1FS1Kqtb36maXlOtb3Utb4o6LS7m+4Ta26O091wf+3V3DwdJTESYUI0QgA8uQkggATaarORfiYJIiSMGxGERHQp90YR5pKSWtJUL9OQJdVHLxDGc4e30zuOnCdNbV7E+v2E8WiBAPgQavKAG01iRAzJIHKlyiwWxszfaBRqtMtRZxFRG0SiDSaJxCyZbDZMZc+RnqHnlOCl1/IGoscxR9cxFEJfZaf1dL1J0gc21NsaEaTXhinjE8eVVAc2nPHetB3KrncyXdQaJGZzx3hoi9DYkM7ddFiKW4/4cBD2xgYO3MhF6kfHio/mtNpDR5lIm1+8eaJqhDHajZvY+aw6HoPbm4dz9RoyC6wmV6TYmLwq/hV2T9X0iROI9U+h9RkFLS+vJZrmVt3v7dpaZiCGYrG9TojSovUi8IZh9rFJzCViHQ9jlidbrfQJSalGLQM1lKImHgetkYpa9Go7xpAIgdT6kUACobvahszFLsZNwkBzI2k6Qjf3rCWp7kEbbKbGiobOSLFLaskm/0DzEl3pANB13mCrl1kOE8aDEWtXCglk8NRpg5CCwchFw+A5MAQGA+EyRDfEnc0RY/MW9uUx5jB4fQv6IgxCNIjOyj75yubgqOTmMXI35hUApaCgII+nVVKQlw9ahdZ5sdxYZRzIo5NGQnwMPvK1sMG/WBTFgxGa2M91jzUxyEhuWHh9QH34PWxkXMyWHb7qMWrfrhdmjHPienGd+ktroXcmbzImxicpkkRi4eRKbrJQLJqknKQZa6+QpJiEi7HJPPA8mX4NF4nwq/g1kfAa4yqjYfya1UQiFlZ/FG9vx48G2v9Hefj//8/u/9vTjyDDo6OHqwSZFY0kyqxZyruPngXZv1WUKndw78Eljr1H9Q7kjeIZ1aPUYZFhVaJbc77xM5iG7lVM4SXBkq6R/PjCUYXPbsx1HH/dxHffMnlO2EXP18HDveWdqIF9VIMGKsIHBHwa2MNBKpdHZtyGvkCH28HKSU/YT1isx8Mfuw17zM5VQj6xP8HdAIvM8uptfOIyF6Xzsrm0MkKhZqr3oIiOrLKJfWiacqKdKFouW9fO5rFp9fmC6nrgUtelEycukyllFuUZEm0CzplYq8xLtqxjZENtJ6q+bvMTd0dVhntoSi+WRXzakSWXfj3BCZ/+ASpVBE2oKuV94RHK7MtCOU0clFXZt4lQPUvo0QMvXpyVhaCBIT17WqUqmdXHJyvXPNZaUZHoBHm5hJBYOiVuSnjl5aIi/fqiy5iv4DLfF1InxCKLF6MxaHRzY9Fw3C9CNBqjhmAHKDQjC9WilOdQqPMn6P64hl15504l+5Izi+V8Sfxh2ALOwl27F7B2kW/fkrvEdSdmfCar1uLzOQ4oD3h8ZACyaFH+wEW/eh+EvDpia6dqYEpO7KXu2C4JqnuijceobAfQY/I45Ri5Xq8Yo1TvQbxifdEYxZ+7V61UTlHRVV+krlYydo1vxJ49wzfjjQ03YoHnz6LQZj/Zwy8iywIkz1xdTwe7G5oErpED3fi+AlaqUfXhs1ge1Sd4QD8Fv6vH2nMuYuMW72ysZayLwoZwuNzVKtHFdqHnVDfhMDEaVeLArpK79IP8fwAAHU0Z95Mx67qAJZ/O0issAwAAo1E7QMejKjG5MDSlAsAa0N0brUQnAXScaz/WlTLSQhPaGDqpLKzvMXA9mL/vjnY6p+d3J/J/ccGd9gP4Z5WyBxqH9kpbiUeiZc8Rz1dwWjkHvMy5uJMbemuJm72yVpfQP4cd64qW/bVVsIYoLLSmDyhp7KGsdaAv5gtUGVyiWusW9c5dHTxYYc2L0uHMl0Bh0TdKZj9RtuhHX8y/qLLuH9UWYx71nofgmIOjwLUBloFnJc2nFAutONl+7db5gYnQgH0NyOgXZh1W0n6SfTZeMcVsHTu4kRh4zym3uqWX4nysaTTtrK5Y4RPpfTdMU07tmBS6JWuesBjg4+QlKjd1RgVN4fN7a18f/4ARggawGaOenF8wloMrp/oSWQH9FVWFRu1LT2dEGPAK42g40NJa1KXCmMav06iOXqvCFLyErFDTGUqV2XhRmrQvt1tdthHH8B7nyBwpcpSooo4m2uiijyHGmGKOBdV9mElcdhJUIcNGCWoSQNXhJcRSjqA9LgIO+v3NMmiyV3/Hhw5BVcBCV0CleV6Kx0zl1CzXgIJot+0kVshXM2MGN7mHFWi3PkFogG61WaGToTFsiioEAAAA') format('woff2'), 5 | url('iconfont.woff?t=1591253191921') format('woff'), 6 | url('iconfont.ttf?t=1591253191921') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1591253191921#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-fuzhi:before { 19 | content: "\e720"; 20 | } 21 | 22 | .icon-shanchu:before { 23 | content: "\e614"; 24 | } 25 | 26 | .icon-danxuankuang:before { 27 | content: "\e69c"; 28 | } 29 | 30 | .icon-biaoti:before { 31 | content: "\e62b"; 32 | } 33 | 34 | .icon-ai211:before { 35 | content: "\e6c7"; 36 | } 37 | 38 | .icon-duoxuankuang1:before { 39 | content: "\e61c"; 40 | } 41 | 42 | .icon-tupianshangchuan:before { 43 | content: "\e69d"; 44 | } 45 | 46 | .icon-duohangwenben:before { 47 | content: "\e6e7"; 48 | } 49 | 50 | .icon-kaiguan:before { 51 | content: "\e673"; 52 | } 53 | 54 | .icon-shijianxuanzeqi:before { 55 | content: "\e64d"; 56 | } 57 | 58 | .icon-danhangwenben:before { 59 | content: "\e62a"; 60 | } 61 | 62 | .icon-xialaxuanze:before { 63 | content: "\e617"; 64 | } 65 | 66 | .icon-jishubiaoqian:before { 67 | content: "\e620"; 68 | } 69 | 70 | -------------------------------------------------------------------------------- /src/components/form-design/initialData.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: your name 3 | * @Date: 2020-06-01 11:43:08 4 | * @LastEditTime: 2020-06-15 11:11:54 5 | * @LastEditors: Please set LastEditors 6 | * @Description: In User Settings Edit 7 | * @FilePath: \react-form-design\src\container\todoData.js 8 | */ 9 | const initialData = { 10 | seeds: [ 11 | { 12 | id: 'seeds', 13 | title: '基础字段', 14 | items: [ 15 | { 16 | id: 'seed-1', label: '单行文本', type: 'input', icon: 'icon-danhangwenben', options: { 17 | width: '100%', 18 | defaultValue: '', 19 | required: false, 20 | disabled: false, 21 | dataType: 'text', 22 | placeholder: '请输入' 23 | }, 24 | code:'' 25 | }, 26 | { 27 | id: 'seed-2', label: '多行文本', type: 'textarea', icon: 'icon-danhangwenben', options: { 28 | width: '100%', 29 | defaultValue: '', 30 | required: false, 31 | disabled: false, 32 | placeholder: '请输入' 33 | }, 34 | code:'' 35 | }, 36 | { 37 | id: 'seed-3', label: '单选框组', type: 'radio', icon: 'icon-danxuankuang', options: { 38 | defaultValue: '', 39 | required: false, 40 | disabled: false, 41 | options: [ 42 | { label: '标题1', value: '值1' }, 43 | { label: '标题2', value: '值2' }, 44 | { label: '标题3', value: '值3' } 45 | ] 46 | }, 47 | code:'' 48 | }, 49 | { 50 | id: 'seed-4', label: '多选框组', type: 'checkbox', icon: 'icon-duoxuankuang1', options: { 51 | defaultValue: '', 52 | required: false, 53 | disabled: false, 54 | options: [ 55 | { label: '标题1', value: '值1' }, 56 | { label: '标题2', value: '值2' }, 57 | { label: '标题3', value: '值3' } 58 | ] 59 | }, 60 | code:'' 61 | }, 62 | { 63 | id: 'seed-5', label: '下拉选择框', type: 'select', icon: 'icon-xialaxuanze', options: { 64 | width: '100%', 65 | defaultValue: '', 66 | required: false, 67 | disabled: false, 68 | options: [ 69 | { label: '标题1', value: '值1' }, 70 | { label: '标题2', value: '值2' }, 71 | { label: '标题3', value: '值3' } 72 | ] 73 | }, 74 | code:'' 75 | }, 76 | { 77 | id: 'seed-6', label: '日期选择器', type: 'date', icon: 'icon-shijianxuanzeqi', options: { 78 | width: '100%', 79 | format: 'YYYY-MM-DD', 80 | required: false, 81 | disabled: false, 82 | options: [ 83 | { label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' }, 84 | { label: 'YYYY-MM-DD HH:mm', value: 'YYYY-MM-DD HH:mm' } 85 | ] 86 | }, 87 | code:'' 88 | }, 89 | { 90 | id: 'seed-7', label: '开关', type: 'switch', icon: 'icon-kaiguan', options: { 91 | defaultValue: '', 92 | required: false, 93 | disabled: false 94 | }, 95 | code:'' 96 | }, 97 | { 98 | id: 'seed-8', label: '标题', type: 'title', icon: 'icon-biaoti', options: { 99 | fontSize: '16px', 100 | color: '#666666', 101 | textAlign: 'left', 102 | fontWeight: 'normal' 103 | } 104 | } 105 | ] 106 | } 107 | ], 108 | config: { 109 | layout: 'vertical', 110 | labelAlign: 'left', 111 | size: 'default', 112 | }, 113 | activeId: '', 114 | content: [ 115 | ] 116 | } 117 | 118 | export default initialData -------------------------------------------------------------------------------- /src/components/form-design/Preview.jsx: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { 4 | Form, 5 | Input, 6 | Radio, 7 | Checkbox, 8 | DatePicker, 9 | Select, 10 | Switch 11 | } from 'antd' 12 | import common from '@/utils/common' 13 | 14 | @Form.create() 15 | class Preview extends Component { 16 | handleSubmit = e => { 17 | e.preventDefault(); 18 | this.props.form.validateFieldsAndScroll((err, values) => { 19 | if (!err) { 20 | console.log('Received values of form: ', values); 21 | } 22 | }); 23 | }; 24 | render() { 25 | const { config, content } = this.props 26 | const { form } = this.props 27 | 28 | const formItemLayout = 29 | config.layout === 'horizontal' 30 | ? { 31 | labelCol: { span: 4 }, 32 | wrapperCol: { span: 14 }, 33 | } 34 | : null; 35 | return ( 36 |
    37 | { 38 | content.map((el, i) => 39 | el.type === 'title' ? 40 |

    {el.label}

    41 | : 42 | 43 | 44 | {form.getFieldDecorator(el.code, { 45 | rules: [ 46 | { 47 | required: el.options.required, 48 | message: '不能为空', 49 | }, 50 | ], 51 | })( 52 | (() => { 53 | 54 | const { defaultValue, placeholder } = el.options 55 | switch (el.type) { 56 | case 'input': 57 | return 58 | case 'textarea': 59 | return 60 | case 'radio': 61 | return ( 62 | 63 | { 64 | el.options.options.map((el2, j) => 65 | {el2.label} 66 | ) 67 | } 68 | 69 | ) 70 | case 'checkbox': 71 | return 72 | case 'select': 73 | return ( 74 | 82 | ) 83 | case 'date': 84 | return 85 | case 'switch': 86 | return 87 | 88 | default: 89 | break; 90 | } 91 | })() 92 | )} 93 | 94 | 95 | ) 96 | } 97 |
    98 | ); 99 | } 100 | } 101 | 102 | Preview.propTypes = { 103 | config: PropTypes.object, 104 | content: PropTypes.array 105 | }; 106 | 107 | export default Preview; -------------------------------------------------------------------------------- /src/components/form-design/Right.jsx: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: your name 3 | * @Date: 2020-06-01 11:41:44 4 | * @LastEditTime: 2020-06-15 10:47:15 5 | * @LastEditors: Please set LastEditors 6 | * @Description: In User Settings Edit 7 | * @FilePath: \react-form-design\src\container\column.js 8 | */ 9 | 10 | import React, { Component } from 'react' 11 | import { Tabs, Radio } from 'antd' 12 | import PropTypes from 'prop-types' 13 | import { FDInput, FDTextArea, FDRadio, FDCheckbox, FDSelect, FDSwitch, FDDate, FDTitle } from '@/components/form-design/config/Index' 14 | import common from '@/utils/common' 15 | import { inject, observer } from 'mobx-react'; 16 | 17 | @inject('store') 18 | @observer 19 | class Right extends Component { 20 | 21 | updateConfig = (key, value) => { 22 | this.props.store.config.update(key, value) 23 | } 24 | 25 | updateItem = (key, value) => { 26 | const activeId = this.props.store.activeId.get 27 | let content = this.props.store.content.get 28 | let target = content.find(el => el.id === activeId) 29 | if (key === 'label') { 30 | target.label = value 31 | } else { 32 | target.options[key] = value 33 | } 34 | this.props.store.content.set(content) 35 | } 36 | 37 | render() { 38 | 39 | const config = this.props.store.config.get 40 | const content = this.props.store.content.get 41 | const activeId = this.props.store.activeId.get 42 | console.warn('activeId, content', activeId, content) 43 | return ( 44 |
    45 |

    表单配置

    46 | 47 | 48 | { 49 | (() => { 50 | if (common.isEmpty(activeId)) return 51 | const target = content.find(el => el.id === activeId) 52 | if (target) 53 | switch (target.type) { 54 | case 'input': 55 | return 56 | case 'textarea': 57 | return 58 | case 'radio': 59 | return 60 | case 'checkbox': 61 | return 62 | case 'select': 63 | return 64 | case 'switch': 65 | return 66 | case 'date': 67 | return 68 | case 'title': 69 | return 70 | default: 71 | break; 72 | } 73 | })() 74 | } 75 | 76 | 77 |
    78 |

    表单布局:

    79 | this.updateConfig('layout', e.target.value)}> 80 | 水平 81 | 垂直 82 | 行内 83 | 84 |
    85 |
    86 |

    标签对齐方式:

    87 | this.updateConfig('labelAlign', e.target.value)}> 88 | 左对齐 89 | 右对齐 90 | 91 |
    92 |
    93 |

    控件大小:

    94 | this.updateConfig('size', e.target.value)}> 95 | 96 | 97 | 98 | 99 |
    100 |
    101 |
    102 |
    103 | ) 104 | } 105 | } 106 | 107 | export default Right 108 | Right.propTypes = { 109 | layout: PropTypes.string, 110 | labelAlign: PropTypes.string, 111 | size: PropTypes.string, 112 | callback: PropTypes.func, 113 | activeId: PropTypes.string, 114 | formItems: PropTypes.array 115 | } -------------------------------------------------------------------------------- /src/static/layui/layui.js: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | ;!function(e){"use strict";var t=document,n={modules:{},status:{},timeout:10,event:{}},o=function(){this.v="2.3.0"},r=function(){var e=t.currentScript?t.currentScript.src:function(){for(var e,n=t.scripts,o=n.length-1,r=o;r>0;r--)if("interactive"===n[r].readyState){e=n[r].src;break}return e||n[o].src}();return e.substring(0,e.lastIndexOf("/")+1)}(),a=function(t){e.console&&console.error&&console.error("Layui hint: "+t)},i="undefined"!=typeof opera&&"[object Opera]"===opera.toString(),u={layer:"modules/layer",laydate:"modules/laydate",laypage:"modules/laypage",laytpl:"modules/laytpl",layim:"modules/layim",layedit:"modules/layedit",form:"modules/form",upload:"modules/upload",tree:"modules/tree",table:"modules/table",element:"modules/element",rate:"modules/rate",carousel:"modules/carousel",flow:"modules/flow",util:"modules/util",code:"modules/code",jquery:"modules/jquery",mobile:"modules/mobile","layui.all":"../layui.all"};o.prototype.cache=n,o.prototype.define=function(e,t){var o=this,r="function"==typeof e,a=function(){var e=function(e,t){layui[e]=t,n.status[e]=!0};return"function"==typeof t&&t(function(o,r){e(o,r),n.callback[o]=function(){t(e)}}),this};return r&&(t=e,e=[]),layui["layui.all"]||!layui["layui.all"]&&layui["layui.mobile"]?a.call(o):(o.use(e,a),o)},o.prototype.use=function(e,o,l){function s(e,t){var o="PLaySTATION 3"===navigator.platform?/^complete$/:/^(complete|loaded)$/;("load"===e.type||o.test((e.currentTarget||e.srcElement).readyState))&&(n.modules[d]=t,f.removeChild(v),function r(){return++m>1e3*n.timeout/4?a(d+" is not a valid module"):void(n.status[d]?c():setTimeout(r,4))}())}function c(){l.push(layui[d]),e.length>1?y.use(e.slice(1),o,l):"function"==typeof o&&o.apply(layui,l)}var y=this,p=n.dir=n.dir?n.dir:r,f=t.getElementsByTagName("head")[0];e="string"==typeof e?[e]:e,window.jQuery&&jQuery.fn.on&&(y.each(e,function(t,n){"jquery"===n&&e.splice(t,1)}),layui.jquery=layui.$=jQuery);var d=e[0],m=0;if(l=l||[],n.host=n.host||(p.match(/\/\/([\s\S]+?)\//)||["//"+location.host+"/"])[0],0===e.length||layui["layui.all"]&&u[d]||!layui["layui.all"]&&layui["layui.mobile"]&&u[d])return c(),y;if(n.modules[d])!function g(){return++m>1e3*n.timeout/4?a(d+" is not a valid module"):void("string"==typeof n.modules[d]&&n.status[d]?c():setTimeout(g,4))}();else{var v=t.createElement("script"),h=(u[d]?p+"lay/":/^\{\/\}/.test(y.modules[d])?"":n.base||"")+(y.modules[d]||d)+".js";h=h.replace(/^\{\/\}/,""),v.async=!0,v.charset="utf-8",v.src=h+function(){var e=n.version===!0?n.v||(new Date).getTime():n.version||"";return e?"?v="+e:""}(),f.appendChild(v),!v.attachEvent||v.attachEvent.toString&&v.attachEvent.toString().indexOf("[native code")<0||i?v.addEventListener("load",function(e){s(e,h)},!1):v.attachEvent("onreadystatechange",function(e){s(e,h)}),n.modules[d]=h}return y},o.prototype.getStyle=function(t,n){var o=t.currentStyle?t.currentStyle:e.getComputedStyle(t,null);return o[o.getPropertyValue?"getPropertyValue":"getAttribute"](n)},o.prototype.link=function(e,o,r){var i=this,u=t.createElement("link"),l=t.getElementsByTagName("head")[0];"string"==typeof o&&(r=o);var s=(r||e).replace(/\.|\//g,""),c=u.id="layuicss-"+s,y=0;return u.rel="stylesheet",u.href=e+(n.debug?"?v="+(new Date).getTime():""),u.media="all",t.getElementById(c)||l.appendChild(u),"function"!=typeof o?i:(function p(){return++y>1e3*n.timeout/100?a(e+" timeout"):void(1989===parseInt(i.getStyle(t.getElementById(c),"width"))?function(){o()}():setTimeout(p,100))}(),i)},n.callback={},o.prototype.factory=function(e){if(layui[e])return"function"==typeof n.callback[e]?n.callback[e]:null},o.prototype.addcss=function(e,t,o){return layui.link(n.dir+"css/"+e,t,o)},o.prototype.img=function(e,t,n){var o=new Image;return o.src=e,o.complete?t(o):(o.onload=function(){o.onload=null,"function"==typeof t&&t(o)},void(o.onerror=function(e){o.onerror=null,"function"==typeof n&&n(e)}))},o.prototype.config=function(e){e=e||{};for(var t in e)n[t]=e[t];return this},o.prototype.modules=function(){var e={};for(var t in u)e[t]=u[t];return e}(),o.prototype.extend=function(e){var t=this;e=e||{};for(var n in e)t[n]||t.modules[n]?a("模块名 "+n+" 已被占用"):t.modules[n]=e[n];return t},o.prototype.router=function(e){var t=this,e=e||location.hash,n={path:[],search:{},hash:(e.match(/[^#](#.*$)/)||[])[1]||""};return/^#\//.test(e)?(e=e.replace(/^#\//,""),n.href="/"+e,e=e.replace(/([^#])(#.*$)/,"$1").split("/")||[],t.each(e,function(e,t){/^\w+=/.test(t)?function(){t=t.split("="),n.search[t[0]]=t[1]}():n.path.push(t)}),n):n},o.prototype.data=function(t,n,o){if(t=t||"layui",o=o||localStorage,e.JSON&&e.JSON.parse){if(null===n)return delete o[t];n="object"==typeof n?n:{key:n};try{var r=JSON.parse(o[t])}catch(a){var r={}}return"value"in n&&(r[n.key]=n.value),n.remove&&delete r[n.key],o[t]=JSON.stringify(r),n.key?r[n.key]:r}},o.prototype.sessionData=function(e,t){return this.data(e,t,sessionStorage)},o.prototype.device=function(t){var n=navigator.userAgent.toLowerCase(),o=function(e){var t=new RegExp(e+"/([^\\s\\_\\-]+)");return e=(n.match(t)||[])[1],e||!1},r={os:function(){return/windows/.test(n)?"windows":/linux/.test(n)?"linux":/iphone|ipod|ipad|ios/.test(n)?"ios":/mac/.test(n)?"mac":void 0}(),ie:function(){return!!(e.ActiveXObject||"ActiveXObject"in e)&&((n.match(/msie\s(\d+)/)||[])[1]||"11")}(),weixin:o("micromessenger")};return t&&!r[t]&&(r[t]=o(t)),r.android=/android/.test(n),r.ios="ios"===r.os,r},o.prototype.hint=function(){return{error:a}},o.prototype.each=function(e,t){var n,o=this;if("function"!=typeof t)return o;if(e=e||[],e.constructor===Object){for(n in e)if(t.call(e[n],n,e[n]))break}else for(n=0;na?1:r"].join("")),o=t.elem.next();(o.hasClass(u)||o.hasClass(c))&&o.remove(),a.ie&&a.ie<10&&t.elem.wrap('
    '),e.isFile()?(e.elemFile=t.elem,t.field=t.elem[0].name):t.elem.after(n),a.ie&&a.ie<10&&e.initIE()},p.prototype.initIE=function(){var e=this,t=e.config,n=i(''),a=i(['
    ',"
    "].join(""));i("#"+f)[0]||i("body").append(n),t.elem.next().hasClass(c)||(e.elemFile.wrap(a),t.elem.next("."+c).append(function(){var e=[];return layui.each(t.data,function(i,t){t="function"==typeof t?t():t,e.push('')}),e.join("")}()))},p.prototype.msg=function(e){return t.msg(e,{icon:2,shift:6})},p.prototype.isFile=function(){var e=this.config.elem[0];if(e)return"input"===e.tagName.toLocaleLowerCase()&&"file"===e.type},p.prototype.preview=function(e){var i=this;window.FileReader&&layui.each(i.chooseFiles,function(i,t){var n=new FileReader;n.readAsDataURL(t),n.onload=function(){e&&e(i,t,this.result)}})},p.prototype.upload=function(e,t){var n,o=this,l=o.config,r=o.elemFile[0],u=function(){var t=0,n=0,a=e||o.files||o.chooseFiles||r.files,u=function(){l.multiple&&t+n===o.fileLength&&"function"==typeof l.allDone&&l.allDone({total:o.fileLength,successful:t,aborted:n})};layui.each(a,function(e,a){var r=new FormData;r.append(l.field,a),layui.each(l.data,function(e,i){i="function"==typeof i?i():i,r.append(e,i)}),i.ajax({url:l.url,type:l.method,data:r,contentType:!1,processData:!1,dataType:"json",headers:l.headers||{},success:function(i){t++,d(e,i),u()},error:function(){n++,o.msg("请求上传接口出现异常"),m(e),u()}})})},c=function(){var e=i("#"+f);o.elemFile.parent().submit(),clearInterval(p.timer),p.timer=setInterval(function(){var i,t=e.contents().find("body");try{i=t.text()}catch(n){o.msg("获取上传后的响应信息出现异常"),clearInterval(p.timer),m()}i&&(clearInterval(p.timer),t.html(""),d(0,i))},30)},d=function(e,i){if(o.elemFile.next("."+s).remove(),r.value="","object"!=typeof i)try{i=JSON.parse(i)}catch(t){return i={},o.msg("请对上传接口返回有效JSON")}"function"==typeof l.done&&l.done(i,e||0,function(e){o.upload(e)})},m=function(e){l.auto&&(r.value=""),"function"==typeof l.error&&l.error(e||0,function(e){o.upload(e)})},h=l.exts,v=function(){var i=[];return layui.each(e||o.chooseFiles,function(e,t){i.push(t.name)}),i}(),g={preview:function(e){o.preview(e)},upload:function(e,i){var t={};t[e]=i,o.upload(t)},pushFile:function(){return o.files=o.files||{},layui.each(o.chooseFiles,function(e,i){o.files[e]=i}),o.files},resetFile:function(e,i,t){var n=new File([i],t);o.files=o.files||{},o.files[e]=n}},y=function(){if("choose"!==t&&!l.auto||(l.choose&&l.choose(g),"choose"!==t))return l.before&&l.before(g),a.ie?a.ie>9?u():c():void u()};if(v=0===v.length?r.value.match(/[^\/\\]+\..+/g)||[]||"":v,0!==v.length){switch(l.accept){case"file":if(h&&!RegExp("\\w\\.("+h+")$","i").test(escape(v)))return o.msg("选择的文件中包含不支持的格式"),r.value="";break;case"video":if(!RegExp("\\w\\.("+(h||"avi|mp4|wma|rmvb|rm|flash|3gp|flv")+")$","i").test(escape(v)))return o.msg("选择的视频中包含不支持的格式"),r.value="";break;case"audio":if(!RegExp("\\w\\.("+(h||"mp3|wav|mid")+")$","i").test(escape(v)))return o.msg("选择的音频中包含不支持的格式"),r.value="";break;default:if(layui.each(v,function(e,i){RegExp("\\w\\.("+(h||"jpg|png|gif|bmp|jpeg$")+")","i").test(escape(i))||(n=!0)}),n)return o.msg("选择的图片中包含不支持的格式"),r.value=""}if(o.fileLength=function(){var i=0,t=e||o.files||o.chooseFiles||r.files;return layui.each(t,function(){i++}),i}(),l.number&&o.fileLength>l.number)return o.msg("同时最多只能上传的数量为:"+l.number);if(l.size>0&&!(a.ie&&a.ie<10)){var F;if(layui.each(o.chooseFiles,function(e,i){if(i.size>1024*l.size){var t=l.size/1024;t=t>=1?t.toFixed(2)+"MB":l.size+"KB",r.value="",F=t}}),F)return o.msg("文件不能超过"+F)}y()}},p.prototype.events=function(){var e=this,t=e.config,o=function(i){e.chooseFiles={},layui.each(i,function(i,t){var n=(new Date).getTime();e.chooseFiles[n+"-"+i]=t})},l=function(i,n){var a=e.elemFile,o=i.length>1?i.length+"个文件":(i[0]||{}).name||a[0].value.match(/[^\/\\]+\..+/g)||[]||"";a.next().hasClass(s)&&a.next().remove(),e.upload(null,"choose"),e.isFile()||t.choose||a.after(''+o+"")};t.elem.off("upload.start").on("upload.start",function(){var a=i(this),o=a.attr("lay-data");if(o)try{o=new Function("return "+o)(),e.config=i.extend({},t,o)}catch(l){n.error("Upload element property lay-data configuration item has a syntax error: "+o)}e.config.item=a,e.elemFile[0].click()}),a.ie&&a.ie<10||t.elem.off("upload.over").on("upload.over",function(){var e=i(this);e.attr("lay-over","")}).off("upload.leave").on("upload.leave",function(){var e=i(this);e.removeAttr("lay-over")}).off("upload.drop").on("upload.drop",function(n,a){var r=i(this),u=a.originalEvent.dataTransfer.files||[];r.removeAttr("lay-over"),o(u),t.auto?e.upload(u):l(u)}),e.elemFile.off("upload.change").on("upload.change",function(){var i=this.files||[];o(i),t.auto?e.upload():l(i)}),t.bindAction.off("upload.action").on("upload.action",function(){e.upload()}),t.elem.data("haveEvents")||(e.elemFile.on("change",function(){i(this).trigger("upload.change")}),t.elem.on("click",function(){e.isFile()||i(this).trigger("upload.start")}),t.drag&&t.elem.on("dragover",function(e){e.preventDefault(),i(this).trigger("upload.over")}).on("dragleave",function(e){i(this).trigger("upload.leave")}).on("drop",function(e){e.preventDefault(),i(this).trigger("upload.drop",e)}),t.bindAction.on("click",function(){i(this).trigger("upload.action")}),t.elem.data("haveEvents",!0))},o.render=function(e){var i=new p(e);return l.call(i)},e(r,o)}); -------------------------------------------------------------------------------- /src/styles/default.less: -------------------------------------------------------------------------------- 1 | // /* 2 | // * @Author: zengzijian 3 | // * @Date: 2018-07-30 11:24:11 4 | // * @LastEditors: zengzijian 5 | // * @LastEditTime: 2018-11-14 15:58:40 6 | // * @Description: 覆盖变量 7 | // */ 8 | 9 | // @primary-color : #E44B4E; 10 | // @primary-shadow-color: rgba(245, 34, 45, 0.2) !important; 11 | // /* 12 | // * 选择器 13 | // */ 14 | 15 | // .ant-select-focused .ant-select-selection { 16 | // border-color: @primary-color; 17 | // box-shadow: 0 0 0 2px @primary-color; 18 | // &:focus { 19 | // border-color: @primary-color; 20 | // box-shadow: 0 0 0 2px @primary-shadow-color; 21 | // } 22 | // } 23 | 24 | // .ant-select-dropdown-menu-item-active { 25 | // background-color: @primary-shadow-color; 26 | // } 27 | 28 | // .ant-select-dropdown-menu-item { 29 | // &:hover { 30 | // background-color: @primary-shadow-color; 31 | // } 32 | // } 33 | 34 | // .ant-select-selection { 35 | // &:hover { 36 | // border-color: @primary-color !important; 37 | // } 38 | // } 39 | 40 | // /* 41 | // * 输入框 42 | // */ 43 | 44 | // .ant-input { 45 | // &:focus { 46 | // border-color: @primary-color; 47 | // box-shadow: 0 0 0 2px @primary-shadow-color; 48 | // } 49 | // &:hover { 50 | // border-color: @primary-color !important; 51 | // } 52 | // } 53 | 54 | // /* 55 | // * 按钮 56 | // */ 57 | 58 | // .ant-btn-primary { 59 | // background-color: @primary-color; 60 | // border-color: @primary-color; 61 | // &:hover { 62 | // background-color: @primary-color; 63 | // border-color: @primary-color; 64 | // } 65 | // &:focus { 66 | // background-color: @primary-color; 67 | // border-color: @primary-color; 68 | // } 69 | // } 70 | 71 | // .ant-btn { 72 | // // background-color: @primary-color; 73 | // // border-color: @primary-color; 74 | // &:hover { 75 | // // background-color: @primary-color; 76 | // // border-color: @primary-color; 77 | // // color: @primary-color; 78 | // } 79 | // &:focus { 80 | // // background-color: @primary-color; 81 | // // border-color: @primary-color; 82 | // // color: @primary-color; 83 | // } 84 | // } 85 | 86 | // /* 87 | // * 分页 88 | // */ 89 | 90 | // .ant-pagination-prev:focus .ant-pagination-item-link, 91 | // .ant-pagination-next:focus .ant-pagination-item-link, 92 | // .ant-pagination-prev:hover .ant-pagination-item-link, 93 | // .ant-pagination-next:hover .ant-pagination-item-link { 94 | // border-color: @primary-color !important; 95 | // color: @primary-color !important; 96 | // } 97 | 98 | // .ant-pagination-options-quick-jumper input:hover { 99 | // border-color: @primary-color !important; 100 | // color: @primary-color !important; 101 | // } 102 | 103 | // /* 104 | // * 开关 105 | // */ 106 | 107 | // .ant-switch-checked { 108 | // background-color: @primary-color !important 109 | // } 110 | 111 | // .ant-switch { 112 | // &:focus { 113 | // box-shadow: 0 0 0 2px @primary-shadow-color; 114 | // } 115 | // } 116 | 117 | // /* 118 | // * 树控件 119 | // */ 120 | 121 | // .ant-tree li .ant-tree-node-content-wrapper.ant-tree-node-selected { 122 | // background-color: #fff !important; 123 | // color: @primary-color; 124 | // } 125 | 126 | // .ant-tree li .ant-tree-node-content-wrapper:hover { 127 | // background-color: #fff !important; 128 | // color: @primary-color; 129 | // } 130 | 131 | // .ant-select-tree-checkbox-input:focus+.ant-select-tree-checkbox-inner, 132 | // .ant-select-tree-checkbox-wrapper:hover .ant-select-tree-checkbox-inner, 133 | // .ant-select-tree-checkbox:hover .ant-select-tree-checkbox-inner { 134 | // border-color: @primary-color !important; 135 | // } 136 | 137 | // .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner { 138 | // background-color: @primary-color !important; 139 | // border-color: @primary-color !important; 140 | // } 141 | 142 | // /* 143 | // * 折叠面板 144 | // */ 145 | 146 | // .ant-collapse>.ant-collapse-item>.ant-collapse-header { 147 | // font-size: 16px; 148 | // font-weight: bold; 149 | // } 150 | 151 | // /* 152 | // * 菜单 153 | // */ 154 | 155 | // .ant-menu-submenu-active { 156 | // color: @primary-color !important; 157 | // } 158 | 159 | // .ant-menu-item-selected { 160 | // background-color: @primary-color !important; 161 | // } 162 | 163 | // /* 164 | // * 单选框 165 | // */ 166 | 167 | // .ant-radio-checked .ant-radio-inner { 168 | // border-color: @primary-color !important; 169 | // &:after { 170 | // background-color: @primary-color !important; 171 | // } 172 | // } 173 | 174 | // .ant-radio-button-wrapper-checked:first-child { 175 | // border-color: @primary-color !important; 176 | // &:after { 177 | // background-color: @primary-color !important; 178 | // } 179 | // } 180 | 181 | // .ant-radio-button-wrapper-checked { 182 | // color: @primary-color !important; 183 | // } 184 | 185 | // .ant-radio-button-wrapper-checked { 186 | // border-color: @primary-color !important; 187 | // box-shadow: 0 0 0 2px @primary-shadow-color; 188 | // } 189 | 190 | // /* 191 | // * 多选框 192 | // */ 193 | 194 | // .ant-checkbox-checked .ant-checkbox-inner, 195 | // .ant-checkbox-indeterminate .ant-checkbox-inner { 196 | // background-color: @primary-color !important; 197 | // border-color: @primary-color !important; 198 | // } 199 | 200 | // .ant-checkbox-indeterminate .ant-checkbox-inner:after { 201 | // background-color: @primary-color !important; 202 | // } 203 | 204 | // /* 205 | // * 下拉按钮 206 | // */ 207 | 208 | // .add-select>div { 209 | // background-color: @primary-color; 210 | // >div>div { 211 | // color: #fff; 212 | // } 213 | // >span { 214 | // color: #fff; 215 | // } 216 | // } 217 | 218 | // /* 219 | // * tabs 220 | // */ 221 | 222 | // .pageContent .ant-tabs-nav-wrap>.ant-tabs-nav-scroll>.ant-tabs-nav { 223 | // float: left !important; 224 | // } 225 | 226 | // .ant-tabs-nav .ant-tabs-tab-active { 227 | // color: @primary-color !important; 228 | // } 229 | 230 | // .ant-tabs-ink-bar { 231 | // background-color: @primary-color !important; 232 | // } 233 | 234 | // /* 235 | // * message 236 | // */ 237 | 238 | // .ant-message-notice-content { 239 | // max-width: 40%; 240 | // } 241 | 242 | // /* 243 | // * 多选下拉选择框 244 | // */ 245 | 246 | // .ant-select-selection__rendered { 247 | // &:focus { 248 | // outline: @primary-color auto 5px; 249 | // } 250 | // } -------------------------------------------------------------------------------- /src/utils/publicUtils.js: -------------------------------------------------------------------------------- 1 | import { message, Modal } from 'antd'; 2 | import common from './common'; 3 | 4 | module.exports = { 5 | verifyConditionTree(conditionVO) { 6 | console.log(conditionVO.conditions); 7 | for (let i = 0; i < conditionVO.conditions.length; i++) { 8 | var element = conditionVO.conditions[i]; 9 | if (element.nodeType == 1) { 10 | if ((!element.expressionVO.varCode && element.expressionVO.varCode !== 0) || (!element.expressionVO.varCode && element.expressionVO.varCode !== 0)) { 11 | console.log("请选择完全您的条件变量"); 12 | message.warning("请选择完全您的条件变量"); 13 | return false 14 | } 15 | if (!element.expressionVO.optType && element.expressionVO.optType !== 0) { 16 | console.log("请选择完全您的变量关系类型"); 17 | message.warning("请选择完全您的变量关系类型"); 18 | return false 19 | } 20 | if (element.expressionVO.varDataType != 12 && element.expressionVO.optType != 8 && element.expressionVO.optType != 9) { 21 | if ((!element.expressionVO.value && element.expressionVO.value !== 0) || (!element.expressionVO.valueCode && element.expressionVO.valueCode !== 0) || (!element.expressionVO.valueType && element.expressionVO.valueType !== 0)) { 22 | console.log("请补充完整变量比较值"); 23 | message.warning("请补充完整变量比较值"); 24 | return false 25 | } 26 | element.expressionVO.valueType = Number(element.expressionVO.valueType); 27 | } else if (element.expressionVO.valueType == 'var') { 28 | console.log("请补充完整变量比较值" + i); 29 | return false 30 | } 31 | element.expressionVO.varType = Number(element.expressionVO.varType); 32 | 33 | } else { 34 | for (let j = 0; j < element.conditions.length; j++) { 35 | let element2 = element.conditions[j]; 36 | if (element2.nodeType === 1) { 37 | if ((!element2.expressionVO.varCode && element2.expressionVO.varCode !== 0) || (!element2.expressionVO.varCode && element2.expressionVO.varCode !== 0)) { 38 | console.log("请选择完全您的条件变量"); 39 | message.warning("请选择完全您的条件变量"); 40 | return false 41 | } 42 | if (!element2.expressionVO.optType && element2.expressionVO.optType !== 0) { 43 | console.log("请选择完全您的变量关系类型"); 44 | message.warning("请选择完全您的变量关系类型"); 45 | return false 46 | } 47 | if (element2.expressionVO.varDataType != 12 && element2.expressionVO.optType != 8 && element2.expressionVO.optType != 9) { 48 | if ((!element2.expressionVO.value && element2.expressionVO.value !== 0) || (!element2.expressionVO.valueCode && element2.expressionVO.valueCode !== 0) || (!element2.expressionVO.valueType && element2.expressionVO.valueType !== 0)) { 49 | console.log("请补充完整变量比较值"); 50 | message.warning("请补充完整变量比较值"); 51 | return false 52 | } 53 | element2.expressionVO.valueType = Number(element2.expressionVO.valueType); 54 | } else if (element2.expressionVO.valueType == 'var') { 55 | console.log("请补充完整变量比较值" + i); 56 | return false 57 | } 58 | 59 | element2.expressionVO.varType = Number(element2.expressionVO.varType); 60 | 61 | } else { 62 | for (let k = 0; k < element2.conditions.length; k++) { 63 | let element3 = element2.conditions[k]; 64 | if (element3.nodeType === 1) { 65 | if ((!element3.expressionVO.varCode && element3.expressionVO.varCode !== 0) || (!element3.expressionVO.varCode && element3.expressionVO.varCode !== 0)) { 66 | console.log("请选择完全您的条件变量"); 67 | message.warning("请选择完全您的条件变量"); 68 | return false 69 | } 70 | if (!element3.expressionVO.optType && element3.expressionVO.optType !== 0) { 71 | console.log("请选择完全您的变量关系类型"); 72 | message.warning("请选择完全您的变量关系类型"); 73 | return false 74 | } 75 | if (element3.expressionVO.varDataType != 12 && element3.expressionVO.optType != 8 && element3.expressionVO.optType != 9) { 76 | if ((!element3.expressionVO.value && element3.expressionVO.value !== 0) || (!element3.expressionVO.valueCode && element3.expressionVO.valueCode !== 0) || (!element3.expressionVO.valueType && element3.expressionVO.valueType !== 0)) { 77 | console.log("请补充完整变量比较值"); 78 | message.warning("请补充完整变量比较值"); 79 | return false 80 | } 81 | element3.expressionVO.valueType = Number(element3.expressionVO.valueType); 82 | } else if (element3.expressionVO.valueType == 'var') { 83 | console.log("请补充完整变量比较值" + i); 84 | return false 85 | } 86 | 87 | element3.expressionVO.varType = Number(element3.expressionVO.varType); 88 | 89 | } 90 | } 91 | } 92 | } 93 | } 94 | } 95 | return true 96 | }, 97 | /** 98 | * resultFul的返回码判断 99 | * @param {*} res 100 | * @returns boolean 101 | */ 102 | isOk(res) { 103 | if (common.isEmpty(res.data)) { 104 | Modal.warning({ 105 | title: '系统提示', 106 | content: "未能获取数据", 107 | }); 108 | return false 109 | } else { 110 | if (res.data.resultCode !== 1000) { 111 | Modal.warning({ 112 | title: '系统提示', 113 | content: res.data.resultMessage, 114 | }); 115 | return false 116 | } else { 117 | return true 118 | } 119 | } 120 | 121 | } 122 | } -------------------------------------------------------------------------------- /src/static/layui/lay/modules/element.js: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | ;layui.define("jquery",function(t){"use strict";var a=layui.$,i=(layui.hint(),layui.device()),e="element",l="layui-this",n="layui-show",s=function(){this.config={}};s.prototype.set=function(t){var i=this;return a.extend(!0,i.config,t),i},s.prototype.on=function(t,a){return layui.onevent.call(this,e,t,a)},s.prototype.tabAdd=function(t,i){var e=".layui-tab-title",l=a(".layui-tab[lay-filter="+t+"]"),n=l.children(e),s=n.children(".layui-tab-bar"),o=l.children(".layui-tab-content"),r='
  • "+(i.title||"unnaming")+"
  • ";return s[0]?s.before(r):n.append(r),o.append('
    '+(i.content||"")+"
    "),f.hideTabMore(!0),f.tabAuto(),this},s.prototype.tabDelete=function(t,i){var e=".layui-tab-title",l=a(".layui-tab[lay-filter="+t+"]"),n=l.children(e),s=n.find('>li[lay-id="'+i+'"]');return f.tabDelete(null,s),this},s.prototype.tabChange=function(t,i){var e=".layui-tab-title",l=a(".layui-tab[lay-filter="+t+"]"),n=l.children(e),s=n.find('>li[lay-id="'+i+'"]');return f.tabClick.call(s[0],null,null,s),this},s.prototype.tab=function(t){t=t||{},b.on("click",t.headerElem,function(i){var e=a(this).index();f.tabClick.call(this,i,e,null,t)})},s.prototype.progress=function(t,i){var e="layui-progress",l=a("."+e+"[lay-filter="+t+"]"),n=l.find("."+e+"-bar"),s=n.find("."+e+"-text");return n.css("width",i),s.text(i),this};var o=".layui-nav",r="layui-nav-item",c="layui-nav-bar",u="layui-nav-tree",d="layui-nav-child",y="layui-nav-more",h="layui-anim layui-anim-upbit",f={tabClick:function(t,i,s,o){o=o||{};var r=s||a(this),i=i||r.parent().children("li").index(r),c=o.headerElem?r.parent():r.parents(".layui-tab").eq(0),u=o.bodyElem?a(o.bodyElem):c.children(".layui-tab-content").children(".layui-tab-item"),d=r.find("a"),y=c.attr("lay-filter");"javascript:;"!==d.attr("href")&&"_blank"===d.attr("target")||(r.addClass(l).siblings().removeClass(l),u.eq(i).addClass(n).siblings().removeClass(n)),layui.event.call(this,e,"tab("+y+")",{elem:c,index:i})},tabDelete:function(t,i){var n=i||a(this).parent(),s=n.index(),o=n.parents(".layui-tab").eq(0),r=o.children(".layui-tab-content").children(".layui-tab-item"),c=o.attr("lay-filter");n.hasClass(l)&&(n.next()[0]?f.tabClick.call(n.next()[0],null,s+1):n.prev()[0]&&f.tabClick.call(n.prev()[0],null,s-1)),n.remove(),r.eq(s).remove(),setTimeout(function(){f.tabAuto()},50),layui.event.call(this,e,"tabDelete("+c+")",{elem:o,index:s})},tabAuto:function(){var t="layui-tab-more",e="layui-tab-bar",l="layui-tab-close",n=this;a(".layui-tab").each(function(){var s=a(this),o=s.children(".layui-tab-title"),r=(s.children(".layui-tab-content").children(".layui-tab-item"),'lay-stope="tabmore"'),c=a('');if(n===window&&8!=i.ie&&f.hideTabMore(!0),s.attr("lay-allowClose")&&o.find("li").each(function(){var t=a(this);if(!t.find("."+l)[0]){var i=a('');i.on("click",f.tabDelete),t.append(i)}}),"string"!=typeof s.attr("lay-unauto"))if(o.prop("scrollWidth")>o.outerWidth()+1){if(o.find("."+e)[0])return;o.append(c),s.attr("overflow",""),c.on("click",function(a){o[this.title?"removeClass":"addClass"](t),this.title=this.title?"":"收缩"})}else o.find("."+e).remove(),s.removeAttr("overflow")})},hideTabMore:function(t){var i=a(".layui-tab-title");t!==!0&&"tabmore"===a(t.target).attr("lay-stope")||(i.removeClass("layui-tab-more"),i.find(".layui-tab-bar").attr("title",""))},clickThis:function(){var t=a(this),i=t.parents(o),n=i.attr("lay-filter"),s=t.parent(),c=t.siblings("."+d),y="string"==typeof s.attr("lay-unselect");"javascript:;"!==t.attr("href")&&"_blank"===t.attr("target")||y||c[0]||(i.find("."+l).removeClass(l),s.addClass(l)),i.hasClass(u)&&(c.removeClass(h),c[0]&&(s["none"===c.css("display")?"addClass":"removeClass"](r+"ed"),"all"===i.attr("lay-shrink")&&s.siblings().removeClass(r+"ed"))),layui.event.call(this,e,"nav("+n+")",t)},collapse:function(){var t=a(this),i=t.find(".layui-colla-icon"),l=t.siblings(".layui-colla-content"),s=t.parents(".layui-collapse").eq(0),o=s.attr("lay-filter"),r="none"===l.css("display");if("string"==typeof s.attr("lay-accordion")){var c=s.children(".layui-colla-item").children("."+n);c.siblings(".layui-colla-title").children(".layui-colla-icon").html(""),c.removeClass(n)}l[r?"addClass":"removeClass"](n),i.html(r?"":""),layui.event.call(this,e,"collapse("+o+")",{title:t,content:l,show:r})}};s.prototype.init=function(t,e){var l=function(){return e?'[lay-filter="'+e+'"]':""}(),s={tab:function(){f.tabAuto.call({})},nav:function(){var t=200,e={},s={},p={},b=function(l,o,r){var c=a(this),f=c.find("."+d);o.hasClass(u)?l.css({top:c.position().top,height:c.children("a").outerHeight(),opacity:1}):(f.addClass(h),l.css({left:c.position().left+parseFloat(c.css("marginLeft")),top:c.position().top+c.height()-l.height()}),e[r]=setTimeout(function(){l.css({width:c.width(),opacity:1})},i.ie&&i.ie<10?0:t),clearTimeout(p[r]),"block"===f.css("display")&&clearTimeout(s[r]),s[r]=setTimeout(function(){f.addClass(n),c.find("."+y).addClass(y+"d")},300))};a(o+l).each(function(i){var l=a(this),o=a(''),h=l.find("."+r);l.find("."+c)[0]||(l.append(o),h.on("mouseenter",function(){b.call(this,o,l,i)}).on("mouseleave",function(){l.hasClass(u)||(clearTimeout(s[i]),s[i]=setTimeout(function(){l.find("."+d).removeClass(n),l.find("."+y).removeClass(y+"d")},300))}),l.on("mouseleave",function(){clearTimeout(e[i]),p[i]=setTimeout(function(){l.hasClass(u)?o.css({height:0,top:o.position().top+o.height()/2,opacity:0}):o.css({width:0,left:o.position().left+o.width()/2,opacity:0})},t)})),h.find("a").each(function(){var t=a(this),i=(t.parent(),t.siblings("."+d));i[0]&&!t.children("."+y)[0]&&t.append(''),t.off("click",f.clickThis).on("click",f.clickThis)})})},breadcrumb:function(){var t=".layui-breadcrumb";a(t+l).each(function(){var t=a(this),i="lay-separator",e=t.attr(i)||"/",l=t.find("a");l.next("span["+i+"]")[0]||(l.each(function(t){t!==l.length-1&&a(this).after(""+e+"")}),t.css("visibility","visible"))})},progress:function(){var t="layui-progress";a("."+t+l).each(function(){var i=a(this),e=i.find(".layui-progress-bar"),l=e.attr("lay-percent");e.css("width",function(){return/^.+\/.+$/.test(l)?100*new Function("return "+l)()+"%":l}()),i.attr("lay-showPercent")&&setTimeout(function(){e.html(''+l+"")},350)})},collapse:function(){var t="layui-collapse";a("."+t+l).each(function(){var t=a(this).find(".layui-colla-item");t.each(function(){var t=a(this),i=t.find(".layui-colla-title"),e=t.find(".layui-colla-content"),l="none"===e.css("display");i.find(".layui-colla-icon").remove(),i.append(''+(l?"":"")+""),i.off("click",f.collapse).on("click",f.collapse)})})}};return s[t]?s[t]():layui.each(s,function(t,a){a()})},s.prototype.render=s.prototype.init;var p=new s,b=a(document);p.render();var v=".layui-tab-title li";b.on("click",v,f.tabClick),b.on("click",f.hideTabMore),a(window).on("resize",f.tabAuto),t(e,p)}); -------------------------------------------------------------------------------- /src/static/layui/css/modules/laydate/default/laydate.css: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | .laydate-set-ym,.layui-laydate,.layui-laydate *,.layui-laydate-list{box-sizing:border-box}html #layuicss-laydate{display:none;position:absolute;width:1989px}.layui-laydate *{margin:0;padding:0}.layui-laydate{position:absolute;z-index:66666666;margin:5px 0;border-radius:2px;font-size:14px;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-name:laydate-upbit;animation-name:laydate-upbit}.layui-laydate-main{width:272px}.layui-laydate-content td,.layui-laydate-header *,.layui-laydate-list li{transition-duration:.3s;-webkit-transition-duration:.3s}@-webkit-keyframes laydate-upbit{from{-webkit-transform:translate3d(0,20px,0);opacity:.3}to{-webkit-transform:translate3d(0,0,0);opacity:1}}@keyframes laydate-upbit{from{transform:translate3d(0,20px,0);opacity:.3}to{transform:translate3d(0,0,0);opacity:1}}.layui-laydate-static{position:relative;z-index:0;display:inline-block;margin:0;-webkit-animation:none;animation:none}.laydate-ym-show .laydate-next-m,.laydate-ym-show .laydate-prev-m{display:none!important}.laydate-ym-show .laydate-next-y,.laydate-ym-show .laydate-prev-y{display:inline-block!important}.laydate-time-show .laydate-set-ym span[lay-type=month],.laydate-time-show .laydate-set-ym span[lay-type=year],.laydate-time-show .layui-laydate-header .layui-icon,.laydate-ym-show .laydate-set-ym span[lay-type=month]{display:none!important}.layui-laydate-header{position:relative;line-height:30px;padding:10px 70px 5px}.laydate-set-ym span,.layui-laydate-header i{padding:0 5px;cursor:pointer}.layui-laydate-header *{display:inline-block;vertical-align:bottom}.layui-laydate-header i{position:absolute;top:10px;color:#999;font-size:18px}.layui-laydate-header i.laydate-prev-y{left:15px}.layui-laydate-header i.laydate-prev-m{left:45px}.layui-laydate-header i.laydate-next-y{right:15px}.layui-laydate-header i.laydate-next-m{right:45px}.laydate-set-ym{width:100%;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.laydate-time-text{cursor:default!important}.layui-laydate-content{position:relative;padding:10px;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.layui-laydate-content table{border-collapse:collapse;border-spacing:0}.layui-laydate-content td,.layui-laydate-content th{width:36px;height:30px;padding:5px;text-align:center}.layui-laydate-content td{position:relative;cursor:pointer}.laydate-day-mark{position:absolute;left:0;top:0;width:100%;height:100%;line-height:30px;font-size:12px;overflow:hidden}.laydate-day-mark::after{position:absolute;content:'';right:2px;top:2px;width:5px;height:5px;border-radius:50%}.layui-laydate-footer{position:relative;height:46px;line-height:26px;padding:10px 20px}.layui-laydate-footer span{margin-right:15px;display:inline-block;cursor:pointer;font-size:12px}.layui-laydate-footer span:hover{color:#5FB878}.laydate-footer-btns{position:absolute;right:10px;top:10px}.laydate-footer-btns span{height:26px;line-height:26px;margin:0 0 0 -1px;padding:0 10px;border:1px solid #C9C9C9;background-color:#fff;white-space:nowrap;vertical-align:top;border-radius:2px}.layui-laydate-list>li,.layui-laydate-range .layui-laydate-main{display:inline-block;vertical-align:middle}.layui-laydate-list{position:absolute;left:0;top:0;width:100%;height:100%;padding:10px;background-color:#fff}.layui-laydate-list>li{position:relative;width:33.3%;height:36px;line-height:36px;margin:3px 0;text-align:center;cursor:pointer}.laydate-month-list>li{width:25%;margin:17px 0}.laydate-time-list>li{height:100%;margin:0;line-height:normal;cursor:default}.laydate-time-list p{position:relative;top:-4px;line-height:29px}.laydate-time-list ol{height:181px;overflow:hidden}.laydate-time-list>li:hover ol{overflow-y:auto}.laydate-time-list ol li{width:130%;padding-left:33px;line-height:30px;text-align:left;cursor:pointer}.layui-laydate-hint{position:absolute;top:115px;left:50%;width:250px;margin-left:-125px;line-height:20px;padding:15px;text-align:center;font-size:12px}.layui-laydate-range{width:546px}.layui-laydate-range .laydate-main-list-0 .laydate-next-m,.layui-laydate-range .laydate-main-list-0 .laydate-next-y,.layui-laydate-range .laydate-main-list-1 .laydate-prev-m,.layui-laydate-range .laydate-main-list-1 .laydate-prev-y{display:none}.layui-laydate-range .laydate-main-list-1 .layui-laydate-content{border-left:1px solid #e2e2e2}.layui-laydate,.layui-laydate-hint{border:1px solid #d2d2d2;box-shadow:0 2px 4px rgba(0,0,0,.12);background-color:#fff;color:#666}.layui-laydate-header{border-bottom:1px solid #e2e2e2}.layui-laydate-header i:hover,.layui-laydate-header span:hover{color:#5FB878}.layui-laydate-content{border-top:none 0;border-bottom:none 0}.layui-laydate-content th{font-weight:400;color:#333}.layui-laydate-content td{color:#666}.layui-laydate-content td.laydate-selected{background-color:#00F7DE}.laydate-selected:hover{background-color:#00F7DE!important}.layui-laydate-content td:hover,.layui-laydate-list li:hover{background-color:#eaeaea;color:#333}.laydate-time-list li ol{margin:0;padding:0;border:1px solid #e2e2e2;border-left-width:0}.laydate-time-list li:first-child ol{border-left-width:1px}.laydate-time-list>li:hover{background:0 0}.layui-laydate-content .laydate-day-next,.layui-laydate-content .laydate-day-prev{color:#d2d2d2}.laydate-selected.laydate-day-next,.laydate-selected.laydate-day-prev{background-color:#f8f8f8!important}.layui-laydate-footer{border-top:1px solid #e2e2e2}.layui-laydate-hint{color:#FF5722}.laydate-day-mark::after{background-color:#5FB878}.layui-laydate-content td.layui-this .laydate-day-mark::after{display:none}.layui-laydate-footer span[lay-type=date]{color:#5FB878}.layui-laydate .layui-this{background-color:#009688!important;color:#fff!important}.layui-laydate .laydate-disabled,.layui-laydate .laydate-disabled:hover{background:0 0!important;color:#d2d2d2!important;cursor:not-allowed!important;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.laydate-theme-molv{border:none}.laydate-theme-molv.layui-laydate-range{width:548px}.laydate-theme-molv .layui-laydate-main{width:274px}.laydate-theme-molv .layui-laydate-header{border:none;background-color:#009688}.laydate-theme-molv .layui-laydate-header i,.laydate-theme-molv .layui-laydate-header span{color:#f6f6f6}.laydate-theme-molv .layui-laydate-header i:hover,.laydate-theme-molv .layui-laydate-header span:hover{color:#fff}.laydate-theme-molv .layui-laydate-content{border:1px solid #e2e2e2;border-top:none;border-bottom:none}.laydate-theme-molv .laydate-main-list-1 .layui-laydate-content{border-left:none}.laydate-theme-grid .laydate-month-list>li,.laydate-theme-grid .laydate-year-list>li,.laydate-theme-grid .layui-laydate-content td,.laydate-theme-grid .layui-laydate-content thead,.laydate-theme-molv .layui-laydate-footer{border:1px solid #e2e2e2}.laydate-theme-grid .laydate-selected,.laydate-theme-grid .laydate-selected:hover{background-color:#f2f2f2!important;color:#009688!important}.laydate-theme-grid .laydate-selected.laydate-day-next,.laydate-theme-grid .laydate-selected.laydate-day-prev{color:#d2d2d2!important}.laydate-theme-grid .laydate-month-list,.laydate-theme-grid .laydate-year-list{margin:1px 0 0 1px}.laydate-theme-grid .laydate-month-list>li,.laydate-theme-grid .laydate-year-list>li{margin:0 -1px -1px 0}.laydate-theme-grid .laydate-year-list>li{height:43px;line-height:43px}.laydate-theme-grid .laydate-month-list>li{height:71px;line-height:71px} -------------------------------------------------------------------------------- /src/static/layui/lay/modules/form.js: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | ;layui.define("layer",function(e){"use strict";var i=layui.$,t=layui.layer,a=layui.hint(),n=layui.device(),l="form",r=".layui-form",s="layui-this",o="layui-hide",c="layui-disabled",u=function(){this.config={verify:{required:[/[\S]+/,"必填项不能为空"],phone:[/^1\d{10}$/,"请输入正确的手机号"],email:[/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,"邮箱格式不正确"],url:[/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/,"链接格式不正确"],number:function(e){if(!e||isNaN(e))return"只能填写数字"},date:[/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/,"日期格式不正确"],identity:[/(^\d{15}$)|(^\d{17}(x|X|\d)$)/,"请输入正确的身份证号"]}}};u.prototype.set=function(e){var t=this;return i.extend(!0,t.config,e),t},u.prototype.verify=function(e){var t=this;return i.extend(!0,t.config.verify,e),t},u.prototype.on=function(e,i){return layui.onevent.call(this,l,e,i)},u.prototype.val=function(e,t){var a=i(r+'[lay-filter="'+e+'"]');a.each(function(e,a){var n=i(this);layui.each(t,function(e,i){var t,a=n.find('[name="'+e+'"]');a[0]&&(t=a[0].type,"checkbox"===t?a[0].checked=i:"radio"===t?a.each(function(){this.value===i&&(this.checked=!0)}):a.val(i))})}),f.render(null,e)},u.prototype.render=function(e,t){var n=this,u=i(r+function(){return t?'[lay-filter="'+t+'"]':""}()),d={select:function(){var e,t="请选择",a="layui-form-select",n="layui-select-title",r="layui-select-none",d="",f=u.find("select"),v=function(t,l){i(t.target).parent().hasClass(n)&&!l||(i("."+a).removeClass(a+"ed "+a+"up"),e&&d&&e.val(d)),e=null},y=function(t,u,f){var y,p=i(this),m=t.find("."+n),k=m.find("input"),g=t.find("dl"),x=g.children("dd"),b=this.selectedIndex;if(!u){var C=function(){var e=t.offset().top+t.outerHeight()+5-h.scrollTop(),i=g.outerHeight();b=p[0].selectedIndex,t.addClass(a+"ed"),x.removeClass(o),y=null,x.eq(b).addClass(s).siblings().removeClass(s),e+i>h.height()&&e>=i&&t.addClass(a+"up")},w=function(e){t.removeClass(a+"ed "+a+"up"),k.blur(),y=null,e||$(k.val(),function(e){e&&(d=g.find("."+s).html(),k&&k.val(d))})};m.on("click",function(e){t.hasClass(a+"ed")?w():(v(e,!0),C()),g.find("."+r).remove()}),m.find(".layui-edge").on("click",function(){k.focus()}),k.on("keyup",function(e){var i=e.keyCode;9===i&&C()}).on("keydown",function(e){var i=e.keyCode;9===i&&w();var t=function(i,a){var n,l;if(e.preventDefault(),a=function(){return a&&a[0]?a:y&&y[0]?y:x.eq(b)}(),l=a[i](),n=a[i]("dd"),l[0]){if(y=a[i](),!n[0]||n.hasClass(c))return t(i,y);n.addClass(s).siblings().removeClass(s);var r=g.children("dd.layui-this"),o=r.position().top,u=g.height(),d=r.height();o>u&&g.scrollTop(o+g.scrollTop()-u+d-5),o<0&&g.scrollTop(o+g.scrollTop())}};38===i&&t("prev"),40===i&&t("next"),13===i&&(e.preventDefault(),g.children("dd."+s).trigger("click"))});var $=function(e,t,a){var n=0;layui.each(x,function(){var t=i(this),l=t.text(),r=l.indexOf(e)===-1;(""===e||"blur"===a?e!==l:r)&&n++,"keyup"===a&&t[r?"addClass":"removeClass"](o)});var l=n===x.length;return t(l),l},T=function(e){var i=this.value,t=e.keyCode;return 9!==t&&13!==t&&37!==t&&38!==t&&39!==t&&40!==t&&($(i,function(e){e?g.find("."+r)[0]||g.append('

    无匹配项

    '):g.find("."+r).remove()},"keyup"),void(""===i&&g.find("."+r).remove()))};f&&k.on("keyup",T).on("blur",function(t){var a=p[0].selectedIndex;e=k,d=i(p[0].options[a]).html(),setTimeout(function(){$(k.val(),function(e){d||k.val("")},"blur")},200)}),x.on("click",function(){var e=i(this),a=e.attr("lay-value"),n=p.attr("lay-filter");return!e.hasClass(c)&&(e.hasClass("layui-select-tips")?k.val(""):(k.val(e.text()),e.addClass(s)),e.siblings().removeClass(s),p.val(a).removeClass("layui-form-danger"),layui.event.call(this,l,"select("+n+")",{elem:p[0],value:a,othis:t}),w(!0),!1)}),t.find("dl>dt").on("click",function(e){return!1}),i(document).off("click",v).on("click",v)}};f.each(function(e,l){var r=i(this),o=r.next("."+a),u=this.disabled,d=l.value,f=i(l.options[l.selectedIndex]),v=l.options[0];if("string"==typeof r.attr("lay-ignore"))return r.show();var h="string"==typeof r.attr("lay-search"),p=v?v.value?t:v.innerHTML||t:t,m=i(['
    ','
    ','','
    ','
    ',function(e){var i=[];return layui.each(e,function(e,a){0!==e||a.value?"optgroup"===a.tagName.toLowerCase()?i.push("
    "+a.label+"
    "):i.push('
    '+a.innerHTML+"
    "):i.push('
    '+(a.innerHTML||t)+"
    ")}),0===i.length&&i.push('
    没有选项
    '),i.join("")}(r.find("*"))+"
    ","
    "].join(""));o[0]&&o.remove(),r.after(m),y.call(this,m,u,h)})},checkbox:function(){var e={checkbox:["layui-form-checkbox","layui-form-checked","checkbox"],_switch:["layui-form-switch","layui-form-onswitch","switch"]},t=u.find("input[type=checkbox]"),a=function(e,t){var a=i(this);e.on("click",function(){var i=a.attr("lay-filter"),n=(a.attr("lay-text")||"").split("|");a[0].disabled||(a[0].checked?(a[0].checked=!1,e.removeClass(t[1]).find("em").text(n[1])):(a[0].checked=!0,e.addClass(t[1]).find("em").text(n[0])),layui.event.call(a[0],l,t[2]+"("+i+")",{elem:a[0],value:a[0].value,othis:e}))})};t.each(function(t,n){var l=i(this),r=l.attr("lay-skin"),s=(l.attr("lay-text")||"").split("|"),o=this.disabled;"switch"===r&&(r="_"+r);var u=e[r]||e.checkbox;if("string"==typeof l.attr("lay-ignore"))return l.show();var d=l.next("."+u[0]),f=i(['
    ",function(){var e=n.title.replace(/\s/g,""),i={checkbox:[e?""+n.title+"":"",''].join(""),_switch:""+((n.checked?s[0]:s[1])||"")+""};return i[r]||i.checkbox}(),"
    "].join(""));d[0]&&d.remove(),l.after(f),a.call(this,f,u)})},radio:function(){var e="layui-form-radio",t=["",""],a=u.find("input[type=radio]"),n=function(a){var n=i(this),s="layui-anim-scaleSpring";a.on("click",function(){var o=n[0].name,c=n.parents(r),u=n.attr("lay-filter"),d=c.find("input[name="+o.replace(/(\.|#|\[|\])/g,"\\$1")+"]");n[0].disabled||(layui.each(d,function(){var a=i(this).next("."+e);this.checked=!1,a.removeClass(e+"ed"),a.find(".layui-icon").removeClass(s).html(t[1])}),n[0].checked=!0,a.addClass(e+"ed"),a.find(".layui-icon").addClass(s).html(t[0]),layui.event.call(n[0],l,"radio("+u+")",{elem:n[0],value:n[0].value,othis:a}))})};a.each(function(a,l){var r=i(this),s=r.next("."+e),o=this.disabled;if("string"==typeof r.attr("lay-ignore"))return r.show();s[0]&&s.remove();var u=i(['
    ',''+t[l.checked?0:1]+"","
    "+function(){var e=l.title||"";return"string"==typeof r.next().attr("lay-radio")&&(e=r.next().html(),r.next().remove()),e}()+"
    ","
    "].join(""));r.after(u),n.call(this,u)})}};return e?d[e]?d[e]():a.error("不支持的"+e+"表单渲染"):layui.each(d,function(e,i){i()}),n};var d=function(){var e=i(this),a=f.config.verify,s=null,o="layui-form-danger",c={},u=e.parents(r),d=u.find("*[lay-verify]"),v=e.parents("form")[0],h=u.find("input,select,textarea"),y=e.attr("lay-filter");if(layui.each(d,function(e,l){var r=i(this),c=r.attr("lay-verify").split("|"),u=r.attr("lay-verType"),d=r.val();if(r.removeClass(o),layui.each(c,function(e,i){var c,f="",v="function"==typeof a[i];if(a[i]){var c=v?f=a[i](d,l):!a[i][0].test(d);if(f=f||a[i][1],c)return"tips"===u?t.tips(f,function(){return"string"==typeof r.attr("lay-ignore")||"select"!==l.tagName.toLowerCase()&&!/^checkbox|radio$/.test(l.type)?r:r.next()}(),{tips:1}):"alert"===u?t.alert(f,{title:"提示",shadeClose:!0}):t.msg(f,{icon:5,shift:6}),n.android||n.ios||l.focus(),r.addClass(o),s=!0}}),s)return s}),s)return!1;var p={};return layui.each(h,function(e,i){if(i.name=(i.name||"").replace(/^\s*|\s*&/,""),i.name){if(/^.*\[\]$/.test(i.name)){var t=i.name.match(/^(.*)\[\]$/g)[0];p[t]=0|p[t],i.name=i.name.replace(/^(.*)\[\]$/,"$1["+p[t]++ +"]")}/^checkbox|radio$/.test(i.type)&&!i.checked||(c[i.name]=i.value)}}),layui.event.call(this,l,"submit("+y+")",{elem:this,form:v,field:c})},f=new u,v=i(document),h=i(window);f.render(),v.on("reset",r,function(){var e=i(this).attr("lay-filter");setTimeout(function(){f.render(null,e)},50)}),v.on("submit",r,d).on("click","*[lay-submit]",d),e(l,f)}); -------------------------------------------------------------------------------- /src/static/layui/css/layui.mobile.css: -------------------------------------------------------------------------------- 1 | /** layui-v2.3.0 MIT License By https://www.layui.com */ 2 | blockquote,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,td,textarea,th,ul{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0)}html{font:12px 'Helvetica Neue','PingFang SC',STHeitiSC-Light,Helvetica,Arial,sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0)}a{text-decoration:none;background:0 0}a:active,a:hover{outline:0}table{border-collapse:collapse;border-spacing:0}li{list-style:none}b,strong{font-weight:700}h1,h2,h3,h4,h5,h6{font-weight:500}address,cite,dfn,em,var{font-style:normal}dfn{font-style:italic}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}img{border:0;vertical-align:bottom}.layui-inline,input,label{vertical-align:middle}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;outline:0}button,select{text-transform:none}select{-webkit-appearance:none;border:none}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}@font-face{font-family:layui-icon;src:url(../font/iconfont.eot?v=1.0.7);src:url(../font/iconfont.eot?v=1.0.7#iefix) format('embedded-opentype'),url(../font/iconfont.woff?v=1.0.7) format('woff'),url(../font/iconfont.ttf?v=1.0.7) format('truetype'),url(../font/iconfont.svg?v=1.0.7#iconfont) format('svg')}.layui-icon{font-family:layui-icon!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.layui-box,.layui-box *{-webkit-box-sizing:content-box!important;-moz-box-sizing:content-box!important;box-sizing:content-box!important}.layui-border-box,.layui-border-box *{-webkit-box-sizing:border-box!important;-moz-box-sizing:border-box!important;box-sizing:border-box!important}.layui-inline{position:relative;display:inline-block;*display:inline;*zoom:1}.layui-edge,.layui-upload-iframe{position:absolute;width:0;height:0}.layui-edge{border-style:dashed;border-color:transparent;overflow:hidden}.layui-elip{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-unselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.layui-disabled,.layui-disabled:active{background-color:#d2d2d2!important;color:#fff!important;cursor:not-allowed!important}.layui-circle{border-radius:100%}.layui-show{display:block!important}.layui-hide{display:none!important}.layui-upload-iframe{border:0;visibility:hidden}.layui-upload-enter{border:1px solid #009E94;background-color:#009E94;color:#fff;-webkit-transform:scale(1.1);transform:scale(1.1)}@-webkit-keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes layui-m-anim-scale{0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.layui-m-anim-scale{animation-name:layui-m-anim-scale;-webkit-animation-name:layui-m-anim-scale}@-webkit-keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes layui-m-anim-up{0%{opacity:0;-webkit-transform:translateY(800px);transform:translateY(800px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}.layui-m-anim-up{-webkit-animation-name:layui-m-anim-up;animation-name:layui-m-anim-up}@-webkit-keyframes layui-m-anim-left{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes layui-m-anim-left{0%{-webkit-transform:translateX(100%);transform:translateX(100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.layui-m-anim-left{-webkit-animation-name:layui-m-anim-left;animation-name:layui-m-anim-left}@-webkit-keyframes layui-m-anim-right{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes layui-m-anim-right{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}.layui-m-anim-right{-webkit-animation-name:layui-m-anim-right;animation-name:layui-m-anim-right}@-webkit-keyframes layui-m-anim-lout{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}@keyframes layui-m-anim-lout{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(-100%);transform:translateX(-100%)}}.layui-m-anim-lout{-webkit-animation-name:layui-m-anim-lout;animation-name:layui-m-anim-lout}@-webkit-keyframes layui-m-anim-rout{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}@keyframes layui-m-anim-rout{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:translateX(100%);transform:translateX(100%)}}.layui-m-anim-rout{-webkit-animation-name:layui-m-anim-rout;animation-name:layui-m-anim-rout}.layui-m-layer{position:relative;z-index:19891014}.layui-m-layer *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.layui-m-layermain,.layui-m-layershade{position:fixed;left:0;top:0;width:100%;height:100%}.layui-m-layershade{background-color:rgba(0,0,0,.7);pointer-events:auto}.layui-m-layermain{display:table;font-family:Helvetica,arial,sans-serif;pointer-events:none}.layui-m-layermain .layui-m-layersection{display:table-cell;vertical-align:middle;text-align:center}.layui-m-layerchild{position:relative;display:inline-block;text-align:left;background-color:#fff;font-size:14px;border-radius:5px;box-shadow:0 0 8px rgba(0,0,0,.1);pointer-events:auto;-webkit-overflow-scrolling:touch;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.2s;animation-duration:.2s}.layui-m-layer0 .layui-m-layerchild{width:90%;max-width:640px}.layui-m-layer1 .layui-m-layerchild{border:none;border-radius:0}.layui-m-layer2 .layui-m-layerchild{width:auto;max-width:260px;min-width:40px;border:none;background:0 0;box-shadow:none;color:#fff}.layui-m-layerchild h3{padding:0 10px;height:60px;line-height:60px;font-size:16px;font-weight:400;border-radius:5px 5px 0 0;text-align:center}.layui-m-layerbtn span,.layui-m-layerchild h3{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layui-m-layercont{padding:50px 30px;line-height:22px;text-align:center}.layui-m-layer1 .layui-m-layercont{padding:0;text-align:left}.layui-m-layer2 .layui-m-layercont{text-align:center;padding:0;line-height:0}.layui-m-layer2 .layui-m-layercont i{width:25px;height:25px;margin-left:8px;display:inline-block;background-color:#fff;border-radius:100%;-webkit-animation:layui-m-anim-loading 1.4s infinite ease-in-out;animation:layui-m-anim-loading 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}.layui-m-layerbtn,.layui-m-layerbtn span{position:relative;text-align:center;border-radius:0 0 5px 5px}.layui-m-layer2 .layui-m-layercont p{margin-top:20px}@-webkit-keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}@keyframes layui-m-anim-loading{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}.layui-m-layer2 .layui-m-layercont i:first-child{margin-left:0;-webkit-animation-delay:-.32s;animation-delay:-.32s}.layui-m-layer2 .layui-m-layercont i.layui-m-layerload{-webkit-animation-delay:-.16s;animation-delay:-.16s}.layui-m-layer2 .layui-m-layercont>div{line-height:22px;padding-top:7px;margin-bottom:20px;font-size:14px}.layui-m-layerbtn{display:box;display:-moz-box;display:-webkit-box;width:100%;height:50px;line-height:50px;font-size:0;border-top:1px solid #D0D0D0;background-color:#F2F2F2}.layui-m-layerbtn span{display:block;-moz-box-flex:1;box-flex:1;-webkit-box-flex:1;font-size:14px;cursor:pointer}.layui-m-layerbtn span[yes]{color:#40AFFE}.layui-m-layerbtn span[no]{border-right:1px solid #D0D0D0;border-radius:0 0 0 5px}.layui-m-layerbtn span:active{background-color:#F6F6F6}.layui-m-layerend{position:absolute;right:7px;top:10px;width:30px;height:30px;border:0;font-weight:400;background:0 0;cursor:pointer;-webkit-appearance:none;font-size:30px}.layui-m-layerend::after,.layui-m-layerend::before{position:absolute;left:5px;top:15px;content:'';width:18px;height:1px;background-color:#999;transform:rotate(45deg);-webkit-transform:rotate(45deg);border-radius:3px}.layui-m-layerend::after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}body .layui-m-layer .layui-m-layer-footer{position:fixed;width:95%;max-width:100%;margin:0 auto;left:0;right:0;bottom:10px;background:0 0}.layui-m-layer-footer .layui-m-layercont{padding:20px;border-radius:5px 5px 0 0;background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn{display:block;height:auto;background:0 0;border-top:none}.layui-m-layer-footer .layui-m-layerbtn span{background-color:rgba(255,255,255,.8)}.layui-m-layer-footer .layui-m-layerbtn span[no]{color:#FD482C;border-top:1px solid #c2c2c2;border-radius:0 0 5px 5px}.layui-m-layer-footer .layui-m-layerbtn span[yes]{margin-top:10px;border-radius:5px}body .layui-m-layer .layui-m-layer-msg{width:auto;max-width:90%;margin:0 auto;bottom:-150px;background-color:rgba(0,0,0,.7);color:#fff}.layui-m-layer-msg .layui-m-layercont{padding:10px 20px} -------------------------------------------------------------------------------- /src/utils/common.js: -------------------------------------------------------------------------------- 1 | /* 2 | * @Author: zengzijian 3 | * @Date: 2018-09-08 10:28:00 4 | * @LastEditors: Please set LastEditors 5 | * @LastEditTime: 2020-06-04 14:06:34 6 | * @Description: 常用工具方法 7 | */ 8 | export default { 9 | /** 10 | * 深度拷贝,适用于任何类型,针对于引用类型如数组,对象,函数(其实函数和数据也属于object,这里描述易于理解和区分) 11 | * PS:对象的简易克隆小技巧:var tmpObj = JSON.parse(JSON.stringify(传入对象)); 把应用类型序列化之后,变成了基本类型,基本类型不具有引用类型的地址引用特性,再把序列化猴的字符串反序列化为对象即可 12 | * @param {*} obj 13 | * @returns 14 | */ 15 | deepClone(obj) { 16 | var o; 17 | if (typeof obj == "object") { 18 | if (obj === null) { 19 | o = null; 20 | } else { 21 | if (obj instanceof Array) { 22 | o = []; 23 | for (var i = 0, len = obj.length; i < len; i++) { 24 | o.push(this.deepClone(obj[i])); 25 | } 26 | } else { 27 | o = {}; 28 | for (var j in obj) { 29 | o[j] = this.deepClone(obj[j]); 30 | } 31 | } 32 | } 33 | } else { 34 | o = obj; 35 | } 36 | return o; 37 | }, 38 | loading: { 39 | show() { 40 | if (window.layer) { 41 | layer.load(2, { 42 | shade: [0.2, '#fff'] 43 | }); 44 | } 45 | }, 46 | hide() { 47 | if (window.layer) { 48 | layer.closeAll('loading'); 49 | } 50 | } 51 | }, 52 | /** 53 | * 下拉选择增加无选项,并列为第一项 54 | * @param {Array} selectData 55 | * @returns 56 | */ 57 | appendSelectData(selectData) { 58 | if (selectData instanceof Array) { 59 | if (selectData.length === 0) { 60 | return [{ code: '', value: '无' }] 61 | } else { 62 | console.log('bingo') 63 | console.log(selectData) 64 | let tempArray = []; 65 | selectData.forEach(element => { 66 | if (selectData.code != '') tempArray.push(element); 67 | }) 68 | console.log(tempArray.splice(0, 0, { code: '', value: '无' })) 69 | // return tempArray.splice(0, 0, { code: '', value: '无' }) 70 | } 71 | } else { 72 | return [{ code: '', value: '无' }] 73 | } 74 | 75 | }, 76 | getGuid() { 77 | function S4() { 78 | return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); 79 | } 80 | return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4()); 81 | }, 82 | /** 83 | * 空判断 84 | * @param {*} value 85 | * @returns 86 | */ 87 | isEmpty(value) { 88 | let result = false; 89 | if (value == null || value == undefined) { 90 | result = true; 91 | } 92 | if (typeof value == 'string' && (value.replace(/\s+/g, "") == "" || value == "")) { 93 | result = true; 94 | } 95 | if (typeof value == "object" && value instanceof Array && value.length === 0) { 96 | result = true; 97 | } 98 | return result; 99 | }, 100 | /** 101 | * code暂支持:GB2312,GBK,GB18030,ISO-8859-1,UTF-8,ASCII,Unicode 102 | * 根据当前编码和字符串,返回字符串对应的字节长度 103 | * @param {*} code 104 | */ 105 | getByteLength(str, code) { 106 | let chineseSeize; 107 | let length; 108 | code = 'UTF-8'; 109 | switch (code) { 110 | case 'GB2312': 111 | chineseSeize = 'aa' 112 | length = str.replace(/[^\u0000-\u00ff]/g, chineseSeize).length; 113 | break; 114 | case 'GBK': 115 | chineseSeize = 'aa' 116 | length = str.replace(/[^\u0000-\u00ff]/g, chineseSeize).length; 117 | break; 118 | case 'GB18030': 119 | chineseSeize = 'aa' 120 | length = str.replace(/[^\u0000-\u00ff]/g, chineseSeize).length; 121 | break; 122 | case 'ISO-8859-1': 123 | chineseSeize = 'a' 124 | length = str.replace(/[^\u0000-\u00ff]/g, chineseSeize).length; 125 | break; 126 | case 'UTF-8': 127 | chineseSeize = 'aaa' 128 | length = str.replace(/[^\u0000-\u00ff]/g, chineseSeize).length; 129 | break; 130 | case 'ASCII': 131 | chineseSeize = 'aa' 132 | length = str.replace(/[^\u0000-\u00ff]/g, chineseSeize).length; 133 | break; 134 | case 'Unicode': 135 | chineseSeize = 'a' 136 | length = str.replace(/[^\u0000-\u00ff]/g, chineseSeize).length * 2; 137 | break; 138 | 139 | default: 140 | break; 141 | } 142 | return length 143 | }, 144 | /** 145 | * 过滤特殊字符 146 | * @param {*} s 147 | * @returns 148 | */ 149 | stripscript(s) { 150 | var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]") 151 | var rs = ""; 152 | for (var i = 0; i < s.length; i++) { 153 | rs = rs + s.substr(i, 1).replace(pattern, ''); 154 | } 155 | return rs; 156 | }, 157 | /** 158 | * 字符串转数组 159 | * @param {*} value 160 | * @returns 161 | */ 162 | stringToArray(value) { 163 | if (this.isEmpty(value)) return [] 164 | if (typeof value !== 'string') return [] 165 | if (value.indexOf(",") < 0) return [value] 166 | let array = value.split(","); 167 | return array 168 | }, 169 | /** 170 | * 数组转字符串 171 | * @param {*} value 172 | * @returns 173 | */ 174 | arrayToString(value) { 175 | if (typeof value == "object" && value instanceof Array) { 176 | if (value.length == 0) return "" 177 | let str = ''; 178 | value.forEach(element => { 179 | str += element + ','; 180 | }) 181 | return str.substr(0, str.length - 1); 182 | } else { 183 | return "" 184 | } 185 | }, 186 | /** 187 | * 格式化时间 时间戳 转 yyyy-MM-dd hh:mm:ss 188 | * @param {*} time 189 | * @returns 190 | */ 191 | formatTime(time) { 192 | // 格式:yyyy-MM-dd hh:mm:ss 193 | let date = new Date(Number(time)); 194 | let Y = date.getFullYear() + '-'; 195 | let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'; 196 | let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '; 197 | let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':'; 198 | let m = date.getMinutes() < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':'; 199 | let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); 200 | return Y + M + D + h + m + s; 201 | }, 202 | format(txt, compress) { 203 | var indentChar = ' '; 204 | if (/^\s*$/.test(txt)) { 205 | console.log('数据为空,无法格式化! '); 206 | return; 207 | } 208 | try { 209 | var data = eval('(' + txt + ')'); 210 | } catch (e) { 211 | console.log('数据源语法错误,格式化失败! 错误信息: ' + e.description, 'err'); 212 | return; 213 | } 214 | var draw = [], 215 | last = false, 216 | This = this, 217 | line = compress ? '' : '\n', 218 | nodeCount = 0, 219 | maxDepth = 0; 220 | 221 | var notify = function (name, value, isLast, indent, formObj) { 222 | nodeCount++; /*节点计数*/ 223 | for (var i = 0, tab = ''; i < indent; i++) 224 | tab += indentChar; /* 缩进HTML */ 225 | tab = compress ? '' : tab; /*压缩模式忽略缩进*/ 226 | maxDepth = ++indent; /*缩进递增并记录*/ 227 | if (value && value.constructor == Array) { 228 | /*处理数组*/ 229 | draw.push( 230 | tab + (formObj ? '"' + name + '":' : '') + '[' + line 231 | ); /*缩进'[' 然后换行*/ 232 | for (var i = 0; i < value.length; i++) 233 | notify(i, value[i], i == value.length - 1, indent, false); 234 | draw.push( 235 | tab + ']' + (isLast ? line : ',' + line) 236 | ); /*缩进']'换行,若非尾元素则添加逗号*/ 237 | } else if (value && typeof value == 'object') { 238 | /*处理对象*/ 239 | draw.push( 240 | tab + (formObj ? '"' + name + '":' : '') + '{' + line 241 | ); /*缩进'{' 然后换行*/ 242 | var len = 0, 243 | i = 0; 244 | for (var key in value) 245 | len++; 246 | for (var key in value) 247 | notify(key, value[key], ++i == len, indent, true); 248 | draw.push( 249 | tab + '}' + (isLast ? line : ',' + line) 250 | ); /*缩进'}'换行,若非尾元素则添加逗号*/ 251 | } else { 252 | if (typeof value == 'string') value = '"' + value + '"'; 253 | draw.push( 254 | tab + 255 | (formObj ? '"' + name + '":' : '') + 256 | value + 257 | (isLast ? '' : ',') + 258 | line 259 | ); 260 | } 261 | }; 262 | var isLast = true, 263 | indent = 0; 264 | notify('', data, isLast, indent, false); 265 | return draw.join(''); 266 | } 267 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require('webpack'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const ExtractTextPlugin = require('extract-text-webpack-plugin'); 4 | const path = require('path'); 5 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 6 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 7 | const autoprefixer = require('autoprefixer'); 8 | const CleanWebpackPlugin = require("clean-webpack-plugin"); 9 | 10 | module.exports = { 11 | devtool: 'eval-source-map', 12 | // entry: __dirname + "/src/index.js",//已多次提及的唯一入口文件 13 | // output: { 14 | // path: __dirname + "/dist",//打包后的文件存放的地方 15 | // filename: "js/bundle.js"//打包后输出文件的文件名 16 | // }, 17 | devServer: { 18 | contentBase: "./dist",//本地服务器所加载的页面所在的目录 19 | historyApiFallback: true,//不跳转 20 | inline: true,//实时刷新 21 | hot: true 22 | }, 23 | resolve: { 24 | alias: { 25 | '@': path.resolve("src") 26 | }, 27 | extensions: ['*', '.js', '.jsx', '.json', '.less', '.css'] 28 | }, 29 | module: { 30 | rules: [ 31 | { 32 | test: /(\.jsx|\.js)$/, 33 | use: { 34 | loader: "babel-loader" 35 | }, 36 | exclude: /node_modules/ 37 | }, 38 | { 39 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 40 | loader: 'url-loader', 41 | options: { 42 | limit: 10000, 43 | outputPath: "images" 44 | } 45 | }, 46 | // //@Lynn 这里我开启自己编写的less文件的css modules功能 除了node_modules库中的less, 47 | // //也就是可以过滤掉antd库中的样式 48 | // { 49 | // test: /\.less$/, 50 | // exclude: /node_modules|antd\.less/, 51 | // use: [ 52 | // require.resolve('style-loader'), 53 | // { 54 | // loader: require.resolve('css-loader'), 55 | // options: { 56 | // // importLoaders: 1, 57 | // modules: true, 58 | // localIdentName: "[name]__[local]___[hash:base64:5]" 59 | // }, 60 | // }, 61 | // { 62 | // loader: require.resolve('postcss-loader'), 63 | // options: { 64 | // ident: 'postcss', 65 | // plugins: () => [ 66 | // require('postcss-flexbugs-fixes'), 67 | // autoprefixer({ 68 | // browsers: [ 69 | // '>1%', 70 | // 'last 4 versions', 71 | // 'Firefox ESR', 72 | // 'not ie < 9', // React doesn't support IE8 anyway 73 | // ], 74 | // flexbox: 'no-2009', 75 | // }), 76 | // ], 77 | // }, 78 | // }, 79 | // { 80 | // loader: require.resolve('less-loader'), // compiles Less to CSS 81 | // }, 82 | // ], 83 | // }, 84 | // { 85 | // test: /\.less$/, 86 | // include: /node_modules|antd\.less/, 87 | // use: [ 88 | // require.resolve('style-loader'), 89 | // { 90 | // loader: require.resolve('css-loader'), 91 | // options: { 92 | // importLoaders: 1, 93 | // }, 94 | // }, 95 | // { 96 | // loader: require.resolve('postcss-loader'), 97 | // options: { 98 | // ident: 'postcss', 99 | // plugins: () => [ 100 | // require('postcss-flexbugs-fixes'), 101 | // autoprefixer({ 102 | // browsers: [ 103 | // '>1%', 104 | // 'last 4 versions', 105 | // 'Firefox ESR', 106 | // 'not ie < 9', // React doesn't support IE8 anyway 107 | // ], 108 | // flexbox: 'no-2009', 109 | // }), 110 | // ], 111 | // }, 112 | // }, 113 | // { 114 | // loader: require.resolve('less-loader'), // compiles Less to CSS 115 | // }, 116 | // ], 117 | // }, 118 | // //@Lynn 这里设置css开启modules支持,node_modules和antd里面的css不开启 119 | // { 120 | // test: /\.css$/, 121 | // exclude: /node_modules|antd\.css/, 122 | // use: [ 123 | // require.resolve('style-loader'), 124 | // { 125 | // loader: require.resolve('css-loader'), 126 | // options: { 127 | // importLoaders: 1, 128 | // // 改动 129 | // modules: true, // 新增对css modules的支持 130 | // localIdentName: '[name]__[local]__[hash:base64:5]', // 131 | // }, 132 | // }, 133 | // { 134 | // loader: require.resolve('postcss-loader'), 135 | // options: { 136 | // ident: 'postcss', 137 | // plugins: () => [ 138 | // require('postcss-flexbugs-fixes'), 139 | // autoprefixer({ 140 | // browsers: [ 141 | // '>1%', 142 | // 'last 4 versions', 143 | // 'Firefox ESR', 144 | // 'not ie < 9', // React doesn't support IE8 anyway 145 | // ], 146 | // flexbox: 'no-2009', 147 | // }), 148 | // ], 149 | // }, 150 | // }, 151 | // ], 152 | // }, 153 | // //@Lynn 然后针对node_modules和antd里面的css写编译配置 154 | // { 155 | // test: /\.css$/, 156 | // include: /node_modules|antd\.css/, 157 | // use: [ 158 | // require.resolve('style-loader'), 159 | // { 160 | // loader: require.resolve('css-loader'), 161 | // options: { 162 | // importLoaders: 1, 163 | // // 改动 164 | // // modules: true, // 新增对css modules的支持 165 | // // localIdentName: '[name]__[local]__[hash:base64:5]', // 166 | // }, 167 | // }, 168 | // { 169 | // loader: require.resolve('postcss-loader'), 170 | // options: { 171 | // ident: 'postcss', 172 | // plugins: () => [ 173 | // require('postcss-flexbugs-fixes'), 174 | // autoprefixer({ 175 | // browsers: [ 176 | // '>1%', 177 | // 'last 4 versions', 178 | // 'Firefox ESR', 179 | // 'not ie < 9', // React doesn't support IE8 anyway 180 | // ], 181 | // flexbox: 'no-2009', 182 | // }), 183 | // ], 184 | // }, 185 | // }, 186 | // ], 187 | // }, 188 | { 189 | test: /(\.less|\.css)$/, 190 | use: [//从下往上来选择解析 191 | MiniCssExtractPlugin.loader, 192 | { 193 | loader: 'css-loader', 194 | options: { 195 | importLoaders: 1, 196 | minimize: { 197 | autoprefixer: { 198 | add: true, 199 | remove: true, 200 | browsers: ['last 2 versions'], 201 | }, 202 | discardComments: { 203 | removeAll: true, 204 | }, 205 | discardUnused: false, 206 | mergeIdents: false, 207 | reduceIdents: false, 208 | safe: true 209 | } 210 | } 211 | }, 212 | { 213 | loader: 'less-loader', 214 | options: { 215 | javascriptEnabled: true 216 | } 217 | } 218 | ] 219 | } 220 | ], 221 | }, 222 | plugins: [ 223 | new webpack.BannerPlugin('版权所有,翻版必究'), 224 | new HtmlWebpackPlugin({//此插件可以配置多入口多页面 225 | template: __dirname + "/src/index.tmpl.html",//一个这个插件的实例,并传入相关的参数 226 | inject: true, 227 | minify: { 228 | collapseWhitespace: true, 229 | } 230 | }), 231 | new webpack.HotModuleReplacementPlugin(),//热加载插件 232 | new webpack.optimize.OccurrenceOrderPlugin(), 233 | // new webpack.optimize.UglifyJsPlugin(), 234 | // new ExtractTextPlugin("style.css"), 235 | new webpack.DefinePlugin({ 236 | 'process.env': { 237 | 'http_env': JSON.stringify(process.env.http_env) 238 | } 239 | }), 240 | new MiniCssExtractPlugin({ 241 | filename: 'css/style.css', 242 | chunkFilename: 'css/style.[contenthash:5].css' 243 | }), 244 | ], 245 | } -------------------------------------------------------------------------------- /src/static/font/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时,垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | --------------------------------------------------------------------------------