├── .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 | 
21 |
22 | 
23 |
24 | 
25 |
26 | 
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('- '+o.replace(/[\r\t\n]+/g,"
- ")+"
"),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('");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(['',e.bar1?'- '+c[0]+"
":"",e.bar2?'- '+c[1]+"
":"",'- '+c[2]+"
","
"].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 |
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 |
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 |
--------------------------------------------------------------------------------