├── .babelrc
├── .editorconfig
├── .gitignore
├── .idea
    ├── .name
    ├── ddvue.iml
    ├── encodings.xml
    ├── misc.xml
    ├── modules.xml
    ├── vcs.xml
    ├── watcherTasks.xml
    └── workspace.xml
├── .postcssrc.js
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── dev-client.js
    ├── dev-server.js
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package.json
└── src
    ├── App.vue
    ├── assets
        ├── img
        │   └── TB1mLf6IpXXXXcQXpXXXXXXXXXX.jpg
        └── logo.png
    ├── components
        ├── dragging.vue
        ├── formcanvas.vue
        ├── formsetting.vue
        ├── headActions.vue
        ├── header.vue
        ├── mainLeft.vue
        ├── setting.vue
        └── widgetsettings.vue
    ├── main.js
    └── style
        ├── design.css
        └── style.css


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", { "modules": false }],
 4 |     "stage-2"
 5 |   ],
 6 |   "plugins": ["transform-runtime"],
 7 |   "comments": false,
 8 |   "env": {
 9 |     "test": {
10 |       "presets": ["env", "stage-2"],
11 |       "plugins": [ "istanbul" ]
12 |     }
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 4
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | .idea/
5 | npm-debug.log
6 | yarn-error.log
7 | 


--------------------------------------------------------------------------------
/.idea/.name:
--------------------------------------------------------------------------------
1 | ddvue


--------------------------------------------------------------------------------
/.idea/ddvue.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="WEB_MODULE" version="4">
3 |   <component name="NewModuleRootManager">
4 |     <content url="file://$MODULE_DIR$" />
5 |     <orderEntry type="inheritedJdk" />
6 |     <orderEntry type="sourceFolder" forTests="false" />
7 |   </component>
8 | </module>


--------------------------------------------------------------------------------
/.idea/encodings.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="Encoding">
4 |     <file url="PROJECT" charset="UTF-8" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="JavaScriptSettings">
4 |     <option name="languageLevel" value="ES6" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/ddvue.iml" filepath="$PROJECT_DIR$/.idea/ddvue.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/watcherTasks.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectTasksOptions" suppressed-tasks="Babel" />
4 | </project>


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
1 | // https://github.com/michael-ciniawsky/postcss-load-config
2 | 
3 | module.exports = {
4 |   "plugins": {
5 |     // to edit target browsers: use "browserlist" field in package.json
6 |     "autoprefixer": {}
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ddvue
 2 | 
 3 | > 用vue仿照钉钉的审批设计器 [实例](https://wxjaa.github.io/dingding/)
 4 | ## Build Setup
 5 | 
 6 | ``` bash
 7 | # install dependencies
 8 | npm install
 9 | 
10 | # serve with hot reload at localhost:8080
11 | npm run dev
12 | 
13 | # build for production with minification
14 | npm run build
15 | 
16 | ```
17 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | require('./check-versions')()
 2 | 
 3 | process.env.NODE_ENV = 'production'
 4 | 
 5 | var ora = require('ora')
 6 | var rm = require('rimraf')
 7 | var path = require('path')
 8 | var chalk = require('chalk')
 9 | var webpack = require('webpack')
10 | var config = require('../config')
11 | var webpackConfig = require('./webpack.prod.conf')
12 | 
13 | var spinner = ora('building for production...')
14 | spinner.start()
15 | 
16 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
17 |   if (err) throw err
18 |   webpack(webpackConfig, function (err, stats) {
19 |     spinner.stop()
20 |     if (err) throw err
21 |     process.stdout.write(stats.toString({
22 |       colors: true,
23 |       modules: false,
24 |       children: false,
25 |       chunks: false,
26 |       chunkModules: false
27 |     }) + '\n\n')
28 | 
29 |     console.log(chalk.cyan('  Build complete.\n'))
30 |     console.log(chalk.yellow(
31 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
32 |       '  Opening index.html over file:// won\'t work.\n'
33 |     ))
34 |   })
35 | })
36 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | var chalk = require('chalk')
 2 | var semver = require('semver')
 3 | var packageConfig = require('../package.json')
 4 | 
 5 | function exec (cmd) {
 6 |   return require('child_process').execSync(cmd).toString().trim()
 7 | }
 8 | 
 9 | var versionRequirements = [
10 |   {
11 |     name: 'node',
12 |     currentVersion: semver.clean(process.version),
13 |     versionRequirement: packageConfig.engines.node
14 |   },
15 |   {
16 |     name: 'npm',
17 |     currentVersion: exec('npm --version'),
18 |     versionRequirement: packageConfig.engines.npm
19 |   }
20 | ]
21 | 
22 | module.exports = function () {
23 |   var warnings = []
24 |   for (var i = 0; i < versionRequirements.length; i++) {
25 |     var mod = versionRequirements[i]
26 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
27 |       warnings.push(mod.name + ': ' +
28 |         chalk.red(mod.currentVersion) + ' should be ' +
29 |         chalk.green(mod.versionRequirement)
30 |       )
31 |     }
32 |   }
33 | 
34 |   if (warnings.length) {
35 |     console.log('')
36 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
37 |     console.log()
38 |     for (var i = 0; i < warnings.length; i++) {
39 |       var warning = warnings[i]
40 |       console.log('  ' + warning)
41 |     }
42 |     console.log()
43 |     process.exit(1)
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/build/dev-client.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | require('eventsource-polyfill')
 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
 4 | 
 5 | hotClient.subscribe(function (event) {
 6 |   if (event.action === 'reload') {
 7 |     window.location.reload()
 8 |   }
 9 | })
10 | 


--------------------------------------------------------------------------------
/build/dev-server.js:
--------------------------------------------------------------------------------
 1 | require('./check-versions')()
 2 | 
 3 | var config = require('../config')
 4 | if (!process.env.NODE_ENV) {
 5 |   process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
 6 | }
 7 | 
 8 | var opn = require('opn')
 9 | var path = require('path')
10 | var express = require('express')
11 | var webpack = require('webpack')
12 | var proxyMiddleware = require('http-proxy-middleware')
13 | var webpackConfig = require('./webpack.dev.conf')
14 | 
15 | // default port where dev server listens for incoming traffic
16 | var port = process.env.PORT || config.dev.port
17 | // automatically open browser, if not set will be false
18 | var autoOpenBrowser = !!config.dev.autoOpenBrowser
19 | // Define HTTP proxies to your custom API backend
20 | // https://github.com/chimurai/http-proxy-middleware
21 | var proxyTable = config.dev.proxyTable
22 | 
23 | var app = express()
24 | var compiler = webpack(webpackConfig)
25 | 
26 | var devMiddleware = require('webpack-dev-middleware')(compiler, {
27 |   publicPath: webpackConfig.output.publicPath,
28 |   quiet: true
29 | })
30 | 
31 | var hotMiddleware = require('webpack-hot-middleware')(compiler, {
32 |   log: () => {}
33 | })
34 | // force page reload when html-webpack-plugin template changes
35 | compiler.plugin('compilation', function (compilation) {
36 |   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
37 |     hotMiddleware.publish({ action: 'reload' })
38 |     cb()
39 |   })
40 | })
41 | 
42 | // proxy api requests
43 | Object.keys(proxyTable).forEach(function (context) {
44 |   var options = proxyTable[context]
45 |   if (typeof options === 'string') {
46 |     options = { target: options }
47 |   }
48 |   app.use(proxyMiddleware(options.filter || context, options))
49 | })
50 | 
51 | // handle fallback for HTML5 history API
52 | app.use(require('connect-history-api-fallback')())
53 | 
54 | // serve webpack bundle output
55 | app.use(devMiddleware)
56 | 
57 | // enable hot-reload and state-preserving
58 | // compilation error display
59 | app.use(hotMiddleware)
60 | 
61 | // serve pure static assets
62 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
63 | app.use(staticPath, express.static('./static'))
64 | 
65 | var uri = 'http://localhost:' + port
66 | 
67 | var _resolve
68 | var readyPromise = new Promise(resolve => {
69 |   _resolve = resolve
70 | })
71 | 
72 | console.log('> Starting dev server...')
73 | devMiddleware.waitUntilValid(() => {
74 |   console.log('> Listening at ' + uri + '\n')
75 |   // when env is testing, don't need open it
76 |   if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
77 |     opn(uri)
78 |   }
79 |   _resolve()
80 | })
81 | 
82 | var server = app.listen(port)
83 | 
84 | module.exports = {
85 |   ready: readyPromise,
86 |   close: () => {
87 |     server.close()
88 |   }
89 | }
90 | 


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var config = require('../config')
 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 4 | 
 5 | exports.assetsPath = function (_path) {
 6 |   var assetsSubDirectory = process.env.NODE_ENV === 'production'
 7 |     ? config.build.assetsSubDirectory
 8 |     : config.dev.assetsSubDirectory
 9 |   return path.posix.join(assetsSubDirectory, _path)
10 | }
11 | 
12 | exports.cssLoaders = function (options) {
13 |   options = options || {}
14 | 
15 |   var cssLoader = {
16 |     loader: 'css-loader',
17 |     options: {
18 |       minimize: process.env.NODE_ENV === 'production',
19 |       sourceMap: options.sourceMap
20 |     }
21 |   }
22 | 
23 |   // generate loader string to be used with extract text plugin
24 |   function generateLoaders (loader, loaderOptions) {
25 |     var loaders = [cssLoader]
26 |     if (loader) {
27 |       loaders.push({
28 |         loader: loader + '-loader',
29 |         options: Object.assign({}, loaderOptions, {
30 |           sourceMap: options.sourceMap
31 |         })
32 |       })
33 |     }
34 | 
35 |     // Extract CSS when that option is specified
36 |     // (which is the case during production build)
37 |     if (options.extract) {
38 |       return ExtractTextPlugin.extract({
39 |         use: loaders,
40 |         fallback: 'vue-style-loader'
41 |       })
42 |     } else {
43 |       return ['vue-style-loader'].concat(loaders)
44 |     }
45 |   }
46 | 
47 |   // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
48 |   return {
49 |     css: generateLoaders(),
50 |     postcss: generateLoaders(),
51 |     less: generateLoaders('less'),
52 |     sass: generateLoaders('sass', { indentedSyntax: true }),
53 |     scss: generateLoaders('sass'),
54 |     stylus: generateLoaders('stylus'),
55 |     styl: generateLoaders('stylus')
56 |   }
57 | }
58 | 
59 | // Generate loaders for standalone style files (outside of .vue)
60 | exports.styleLoaders = function (options) {
61 |   var output = []
62 |   var loaders = exports.cssLoaders(options)
63 |   for (var extension in loaders) {
64 |     var loader = loaders[extension]
65 |     output.push({
66 |       test: new RegExp('\\.' + extension + '$'),
67 |       use: loader
68 |     })
69 |   }
70 |   return output
71 | }
72 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | var utils = require('./utils')
 2 | var config = require('../config')
 3 | var isProduction = process.env.NODE_ENV === 'production'
 4 | 
 5 | module.exports = {
 6 |   loaders: utils.cssLoaders({
 7 |     sourceMap: isProduction
 8 |       ? config.build.productionSourceMap
 9 |       : config.dev.cssSourceMap,
10 |     extract: isProduction
11 |   })
12 | }
13 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var utils = require('./utils')
 3 | var config = require('../config')
 4 | var vueLoaderConfig = require('./vue-loader.conf')
 5 | 
 6 | function resolve (dir) {
 7 |   return path.join(__dirname, '..', dir)
 8 | }
 9 | 
10 | module.exports = {
11 |   entry: {
12 |     app: './src/main.js'
13 |   },
14 |   output: {
15 |     path: config.build.assetsRoot,
16 |     filename: '[name].js',
17 |     publicPath: process.env.NODE_ENV === 'production'
18 |       ? config.build.assetsPublicPath
19 |       : config.dev.assetsPublicPath
20 |   },
21 |   resolve: {
22 |     extensions: ['.js', '.vue', '.json'],
23 |     alias: {
24 |       'vue$': 'vue/dist/vue.esm.js',
25 |       '@': resolve('src'),
26 |     }
27 |   },
28 |   module: {
29 |     rules: [
30 |       {
31 |         test: /\.vue$/,
32 |         loader: 'vue-loader',
33 |         options: vueLoaderConfig
34 |       },
35 |       {
36 |         test: /\.js$/,
37 |         loader: 'babel-loader',
38 |         include: [resolve('src'), resolve('test')]
39 |       },
40 |       {
41 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
42 |         loader: 'url-loader',
43 |         query: {
44 |           limit: 10000,
45 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
46 |         }
47 |       },
48 |       {
49 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
50 |         loader: 'url-loader',
51 |         query: {
52 |           limit: 10000,
53 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
54 |         }
55 |       }
56 |     ]
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | var utils = require('./utils')
 2 | var webpack = require('webpack')
 3 | var config = require('../config')
 4 | var merge = require('webpack-merge')
 5 | var baseWebpackConfig = require('./webpack.base.conf')
 6 | var HtmlWebpackPlugin = require('html-webpack-plugin')
 7 | var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 8 | 
 9 | // add hot-reload related code to entry chunks
10 | Object.keys(baseWebpackConfig.entry).forEach(function (name) {
11 |   baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
12 | })
13 | 
14 | module.exports = merge(baseWebpackConfig, {
15 |   module: {
16 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
17 |   },
18 |   // cheap-module-eval-source-map is faster for development
19 |   devtool: '#cheap-module-eval-source-map',
20 |   plugins: [
21 |     new webpack.DefinePlugin({
22 |       'process.env': config.dev.env
23 |     }),
24 |     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
25 |     new webpack.HotModuleReplacementPlugin(),
26 |     new webpack.NoEmitOnErrorsPlugin(),
27 |     // https://github.com/ampedandwired/html-webpack-plugin
28 |     new HtmlWebpackPlugin({
29 |       filename: 'index.html',
30 |       template: 'index.html',
31 |       inject: true
32 |     }),
33 |     new FriendlyErrorsPlugin()
34 |   ]
35 | })
36 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | var path = require('path')
  2 | var utils = require('./utils')
  3 | var webpack = require('webpack')
  4 | var config = require('../config')
  5 | var merge = require('webpack-merge')
  6 | var baseWebpackConfig = require('./webpack.base.conf')
  7 | var CopyWebpackPlugin = require('copy-webpack-plugin')
  8 | var HtmlWebpackPlugin = require('html-webpack-plugin')
  9 | var ExtractTextPlugin = require('extract-text-webpack-plugin')
 10 | var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 11 | 
 12 | var env = config.build.env
 13 | 
 14 | var webpackConfig = merge(baseWebpackConfig, {
 15 |   module: {
 16 |     rules: utils.styleLoaders({
 17 |       sourceMap: config.build.productionSourceMap,
 18 |       extract: true
 19 |     })
 20 |   },
 21 |   devtool: config.build.productionSourceMap ? '#source-map' : false,
 22 |   output: {
 23 |     path: config.build.assetsRoot,
 24 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 25 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 26 |   },
 27 |   plugins: [
 28 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 29 |     new webpack.DefinePlugin({
 30 |       'process.env': env
 31 |     }),
 32 |     new webpack.optimize.UglifyJsPlugin({
 33 |       compress: {
 34 |         warnings: false
 35 |       },
 36 |       sourceMap: true
 37 |     }),
 38 |     // extract css into its own file
 39 |     new ExtractTextPlugin({
 40 |       filename: utils.assetsPath('css/[name].[contenthash].css')
 41 |     }),
 42 |     // Compress extracted CSS. We are using this plugin so that possible
 43 |     // duplicated CSS from different components can be deduped.
 44 |     new OptimizeCSSPlugin({
 45 |       cssProcessorOptions: {
 46 |         safe: true
 47 |       }
 48 |     }),
 49 |     // generate dist index.html with correct asset hash for caching.
 50 |     // you can customize output by editing /index.html
 51 |     // see https://github.com/ampedandwired/html-webpack-plugin
 52 |     new HtmlWebpackPlugin({
 53 |       filename: config.build.index,
 54 |       template: 'index.html',
 55 |       inject: true,
 56 |       minify: {
 57 |         removeComments: true,
 58 |         collapseWhitespace: true,
 59 |         removeAttributeQuotes: true
 60 |         // more options:
 61 |         // https://github.com/kangax/html-minifier#options-quick-reference
 62 |       },
 63 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 64 |       chunksSortMode: 'dependency'
 65 |     }),
 66 |     // split vendor js into its own file
 67 |     new webpack.optimize.CommonsChunkPlugin({
 68 |       name: 'vendor',
 69 |       minChunks: function (module, count) {
 70 |         // any required modules inside node_modules are extracted to vendor
 71 |         return (
 72 |           module.resource &&
 73 |           /\.js$/.test(module.resource) &&
 74 |           module.resource.indexOf(
 75 |             path.join(__dirname, '../node_modules')
 76 |           ) === 0
 77 |         )
 78 |       }
 79 |     }),
 80 |     // extract webpack runtime and module manifest to its own file in order to
 81 |     // prevent vendor hash from being updated whenever app bundle is updated
 82 |     new webpack.optimize.CommonsChunkPlugin({
 83 |       name: 'manifest',
 84 |       chunks: ['vendor']
 85 |     }),
 86 |     // copy custom static assets
 87 |     new CopyWebpackPlugin([
 88 |       {
 89 |         from: path.resolve(__dirname, '../static'),
 90 |         to: config.build.assetsSubDirectory,
 91 |         ignore: ['.*']
 92 |       }
 93 |     ])
 94 |   ]
 95 | })
 96 | 
 97 | if (config.build.productionGzip) {
 98 |   var CompressionWebpackPlugin = require('compression-webpack-plugin')
 99 | 
100 |   webpackConfig.plugins.push(
101 |     new CompressionWebpackPlugin({
102 |       asset: '[path].gz[query]',
103 |       algorithm: 'gzip',
104 |       test: new RegExp(
105 |         '\\.(' +
106 |         config.build.productionGzipExtensions.join('|') +
107 |         ')$'
108 |       ),
109 |       threshold: 10240,
110 |       minRatio: 0.8
111 |     })
112 |   )
113 | }
114 | 
115 | if (config.build.bundleAnalyzerReport) {
116 |   var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
117 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
118 | }
119 | 
120 | module.exports = webpackConfig
121 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | var merge = require('webpack-merge')
2 | var prodEnv = require('./prod.env')
3 | 
4 | module.exports = merge(prodEnv, {
5 |   NODE_ENV: '"development"'
6 | })
7 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | // see http://vuejs-templates.github.io/webpack for documentation.
 2 | var path = require('path')
 3 | 
 4 | module.exports = {
 5 |   build: {
 6 |     env: require('./prod.env'),
 7 |     index: path.resolve(__dirname, '../dist/index.html'),
 8 |     assetsRoot: path.resolve(__dirname, '../dist'),
 9 |     assetsSubDirectory: 'static',
10 |     assetsPublicPath: './',
11 |     productionSourceMap: true,
12 |     // Gzip off by default as many popular static hosts such as
13 |     // Surge or Netlify already gzip all static assets for you.
14 |     // Before setting to `true`, make sure to:
15 |     // npm install --save-dev compression-webpack-plugin
16 |     productionGzip: false,
17 |     productionGzipExtensions: ['js', 'css'],
18 |     // Run the build command with an extra argument to
19 |     // View the bundle analyzer report after build finishes:
20 |     // `npm run build --report`
21 |     // Set to `true` or `false` to always turn it on or off
22 |     bundleAnalyzerReport: process.env.npm_config_report
23 |   },
24 |   dev: {
25 |     env: require('./dev.env'),
26 |     port: 8080,
27 |     autoOpenBrowser: true,
28 |     assetsSubDirectory: 'static',
29 |     assetsPublicPath: '/',
30 |     proxyTable: {},
31 |     // CSS Sourcemaps off by default because relative paths are "buggy"
32 |     // with this option, according to the CSS-Loader README
33 |     // (https://github.com/webpack/css-loader#sourcemaps)
34 |     // In our experience, they generally work as expected,
35 |     // just be aware of this issue when enabling this option.
36 |     cssSourceMap: false
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   NODE_ENV: '"production"'
3 | }
4 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>ddvue</title>
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 |     <!-- built files willbe auto injected -->
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ddvue",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "xj",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "node build/dev-server.js",
 9 |     "build": "node build/build.js"
10 |   },
11 |   "dependencies": {
12 |     "vue": "^2.2.2"
13 |   },
14 |   "devDependencies": {
15 |     "autoprefixer": "^6.7.2",
16 |     "babel-core": "^6.22.1",
17 |     "babel-loader": "^6.2.10",
18 |     "babel-plugin-transform-runtime": "^6.22.0",
19 |     "babel-preset-env": "^1.2.1",
20 |     "babel-preset-stage-2": "^6.22.0",
21 |     "babel-register": "^6.22.0",
22 |     "chalk": "^1.1.3",
23 |     "connect-history-api-fallback": "^1.3.0",
24 |     "copy-webpack-plugin": "^4.0.1",
25 |     "css-loader": "^0.26.1",
26 |     "eventsource-polyfill": "^0.9.6",
27 |     "express": "^4.14.1",
28 |     "extract-text-webpack-plugin": "^2.0.0",
29 |     "file-loader": "^0.10.0",
30 |     "friendly-errors-webpack-plugin": "^1.1.3",
31 |     "function-bind": "^1.1.0",
32 |     "html-webpack-plugin": "^2.28.0",
33 |     "http-proxy-middleware": "^0.17.3",
34 |     "webpack-bundle-analyzer": "^2.2.1",
35 |     "semver": "^5.3.0",
36 |     "opn": "^4.0.2",
37 |     "optimize-css-assets-webpack-plugin": "^1.3.0",
38 |     "ora": "^1.1.0",
39 |     "rimraf": "^2.6.0",
40 |     "url-loader": "^0.5.7",
41 |     "vue-loader": "^11.1.4",
42 |     "vue-style-loader": "^2.0.0",
43 |     "vue-template-compiler": "^2.2.4",
44 |     "webpack": "^2.2.1",
45 |     "webpack-dev-middleware": "^1.10.0",
46 |     "webpack-hot-middleware": "^2.16.1",
47 |     "webpack-merge": "^2.6.1"
48 |   },
49 |   "engines": {
50 |     "node": ">= 4.0.0",
51 |     "npm": ">= 3.0.0"
52 |   },
53 |   "browserslist": [
54 |     "> 1%",
55 |     "last 2 versions",
56 |     "not ie <= 8"
57 |   ]
58 | }
59 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div id="app" class="wf-wrapper" v-on:mouseup="moveend" v-on:mousemove="move">
 3 |         <Header></Header>
 4 |         <div class="wf-main">
 5 |             <mainleft></mainleft>
 6 |             <formcanvas></formcanvas>
 7 |             <setting></setting>
 8 |         </div>
 9 |         <dragging></dragging>
10 |     </div>
11 | </template>
12 | 
13 | <script type="text/ecmascript-6">
14 |     import Header from './components/header'
15 |     import mainleft from './components/mainLeft'
16 |     import formcanvas from './components/formcanvas'
17 |     import setting from './components/setting'
18 |     import dragging from './components/dragging'
19 | 
20 |     export default {
21 |         name: 'app',
22 |         components: {
23 |             Header,
24 |             mainleft,
25 |             formcanvas,
26 |             setting,
27 |             dragging
28 |         },
29 |         data: function () {
30 |             return {
31 |                 isstart: false,
32 |                 componentView: {}
33 |             }
34 |         },
35 |         methods: {
36 |             move: function (e) {
37 |                 if (this.isstart) {
38 |                     document.querySelector('html').classList.add('wf-cursor-move')
39 |                     let obj = {
40 |                         componentName: this.componentView.componentName,
41 |                         clientX: e.clientX,
42 |                         clientY: e.clientY
43 |                     }
44 |                     drag.$emit("moveInCanvas", obj)
45 |                     drag.$emit('move', e)
46 |                 }
47 |             },
48 |             moveend: function (e) {
49 |                 if (this.isstart) {
50 |                     let obj = {
51 |                         componentView: this.componentView
52 |                     }
53 |                     drag.$emit("moveend", obj)
54 |                     this.isstart = false
55 |                 }
56 |             }
57 |         },
58 |         created: function () {
59 |             let self = this
60 |             drag.$on('movestart', function (obj) {
61 |                 self.isstart = true
62 |                 self.componentView = obj.componentView
63 |             })
64 |         },
65 |         mounted: function () {
66 | 
67 |         }
68 |     }
69 | </script>
70 | <style>
71 |     @import "style/design.css";
72 | </style>
73 | <style>
74 |     #app {
75 |         -webkit-font-smoothing: antialiased;
76 |         -moz-osx-font-smoothing: grayscale;
77 |     }
78 | </style>
79 | 


--------------------------------------------------------------------------------
/src/assets/img/TB1mLf6IpXXXXcQXpXXXXXXXXXX.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wxjaa/ddvue/c4aa583a3e7c48987e0fb6b8f26f91f0f50c32c2/src/assets/img/TB1mLf6IpXXXXcQXpXXXXXXXXXX.jpg


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/wxjaa/ddvue/c4aa583a3e7c48987e0fb6b8f26f91f0f50c32c2/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/dragging.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="wf-dragging-proxy" v-bind:style="cc">
 3 |         <div class="proxy-icon">
 4 |             <i class="widgeticon" :class="componentName"></i>
 5 |         </div>
 6 |         <span class="proxy-name">{{componentText}}</span>
 7 |     </div>
 8 | </template>
 9 | <script>
10 |     export default{
11 |         name: 'dragging',
12 |         data: function () {
13 |             return {
14 |                 componentName: '',
15 |                 componentText: '',
16 |                 cc: {},
17 |                 isstart: false
18 |             }
19 |         },
20 |         created: function () {
21 |             let self = this
22 |             drag.$on('movestart', function (obj) {
23 |                 self.cc = Object.assign({}, self.cc, {
24 |                     display: 'none',
25 |                     top: obj.clientY + 'px',
26 |                     left: obj.clientX + 'px'
27 |                 })
28 |                 self.componentName = obj.componentName
29 |                 self.componentText = obj.componentText
30 |                 self.isstart = true
31 |             })
32 |             drag.$on('move', function (obj) {
33 |                 if (!self.isstart) {
34 |                     return
35 |                 }
36 |                 let clientX = obj.clientX
37 |                 let clientY = obj.clientY
38 |                 let startX = parseInt(self.cc.left);
39 |                 let startY = parseInt(self.cc.top);
40 |                 let moveX = clientX - startX + 'px'
41 |                 let moveY = clientY - startY + 'px'
42 |                 self.cc = Object.assign({}, self.cc, {
43 |                     display: 'block',
44 |                     top: startY + 'px',
45 |                     left: startX + 'px',
46 |                     transform: 'translate3d(' + moveX + ',' + moveY + ',0)'
47 |                 })
48 |             })
49 |             drag.$on('dragend', function (obj) {
50 |                 self.isstart = false
51 |                 let startX = self.cc.left;
52 |                 let startY = self.cc.top;
53 |                 self.cc = Object.assign({}, self.cc, {
54 |                     display: 'none',
55 |                     top: startY + 'px',
56 |                     left: startX + 'px'
57 |                 });
58 |                 document.querySelector('html').classList.remove('wf-cursor-move');
59 |             })
60 |         }
61 |     }
62 | </script>
63 | 


--------------------------------------------------------------------------------
/src/components/formcanvas.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |     <div class="wf-formcanvas">
   3 |         <div class="wf-formcanvas-title">{{title}}</div>
   4 |         <div class="wf-formcanvas-inner">
   5 |             <div class="wf-formcanvas-body dropbody" v-bind:class="{empty:isempty}">
   6 |                 <div class="wf-dragging-mark" v-if="InCanvas==0"></div>
   7 | 
   8 |                 <div v-for="(item,index) in components">
   9 |                     <div v-if="item.componentName=='textareafield'">
  10 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
  11 |                              v-on:mouseout="mouseOut"
  12 |                              v-on:mouseover="hover"
  13 |                              :data-index="index"
  14 |                              v-bind:class="index==selected?'active':''"
  15 |                              class="wf-component wf-component-textareafield">
  16 |                             <div class="wf-remove icon icon-close" @click="close"></div>
  17 |                             <div class="wf-overlay"></div>
  18 |                             <div class="wf-componentview">
  19 |                                 <div class="wf-componentview-border"><label
  20 |                                     class="wf-componentview-label">{{item.defaultLable}}</label><span
  21 |                                     class="wf-componentview-placeholder">{{item.defaultProps}}<span
  22 |                                     v-if="item.defaultImportant">（必填）</span></span></div>
  23 |                             </div>
  24 |                         </div>
  25 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
  26 |                     </div>
  27 |                     <div v-if="item.componentName=='textfield'">
  28 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
  29 |                              v-on:mouseout="mouseOut"
  30 |                              v-on:mouseover="hover"
  31 |                              :data-index="index"
  32 |                              v-bind:class="index==selected?'active':''"
  33 |                              class="wf-component wf-component-textfield">
  34 |                             <div class="wf-remove icon icon-close" @click="close"></div>
  35 |                             <div class="wf-overlay"></div>
  36 |                             <div class="wf-componentview">
  37 |                                 <div class="wf-componentview-border"><label
  38 |                                     class="wf-componentview-label">{{item.defaultLable}}</label><span
  39 |                                     class="wf-componentview-placeholder">{{item.defaultProps}}<span
  40 |                                     v-if="item.defaultImportant">（必填）</span></span></div>
  41 |                             </div>
  42 |                         </div>
  43 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
  44 |                     </div>
  45 |                     <div v-if="item.componentName=='numberfield'">
  46 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
  47 |                              v-on:mouseout="mouseOut"
  48 |                              v-on:mouseover="hover"
  49 |                              :data-index="index"
  50 |                              v-bind:class="index==selected?'active':''"
  51 |                              class="wf-component wf-component-numberfield">
  52 |                             <div class="wf-remove icon icon-close" @click="close"></div>
  53 |                             <div class="wf-overlay"></div>
  54 |                             <div class="wf-componentview">
  55 |                                 <div class="wf-componentview-border"><label
  56 |                                     class="wf-componentview-label">{{item.defaultLable}}</label><span
  57 |                                     class="wf-componentview-placeholder">{{item.defaultProps}}<span
  58 |                                     v-if="item.defaultImportant">（必填）</span></span></div>
  59 |                             </div>
  60 |                         </div>
  61 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
  62 |                     </div>
  63 |                     <div v-if="item.componentName=='ddselectfield'">
  64 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
  65 |                              v-on:mouseover="hover"
  66 |                              v-on:mouseout="mouseOut"
  67 |                              :data-index="index"
  68 |                              v-bind:class="index==selected?'active':''"
  69 |                              class="wf-component wf-component-ddselectfield">
  70 |                             <div class="wf-remove icon icon-close" @click="close"></div>
  71 |                             <div class="wf-overlay"></div>
  72 |                             <div class="wf-componentview">
  73 |                                 <div class="wf-componentview-border"><label
  74 |                                     class="wf-componentview-label">{{item.defaultLable}}</label><span
  75 |                                     class="wf-componentview-placeholder">{{item.defaultProps}}<span
  76 |                                     v-if="item.defaultImportant">（必填）</span></span>
  77 |                                     <i class="icon icon-enter"></i>
  78 |                                 </div>
  79 |                             </div>
  80 |                         </div>
  81 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
  82 |                     </div>
  83 |                     <div v-if="item.componentName=='ddmultiselectfield'">
  84 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
  85 |                              v-on:mouseout="mouseOut"
  86 |                              v-on:mouseover="hover"
  87 |                              :data-index="index"
  88 |                              v-bind:class="index==selected?'active':''"
  89 |                              class="wf-component wf-component-ddmultiselectfield">
  90 |                             <div class="wf-remove icon icon-close" @click="close"></div>
  91 |                             <div class="wf-overlay"></div>
  92 |                             <div class="wf-componentview">
  93 |                                 <div class="wf-componentview-border"><label
  94 |                                     class="wf-componentview-label">{{item.defaultLable}}</label><span
  95 |                                     class="wf-componentview-placeholder">{{item.defaultProps}}<span
  96 |                                     v-if="item.defaultImportant">（必填）</span></span>
  97 |                                     <i class="icon icon-enter"></i>
  98 |                                 </div>
  99 |                             </div>
 100 |                         </div>
 101 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
 102 |                     </div>
 103 |                     <div v-if="item.componentName=='dddatefield'">
 104 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 105 |                              v-on:mouseout="mouseOut"
 106 |                              v-on:mouseover="hover"
 107 |                              :data-index="index"
 108 |                              v-bind:class="index==selected?'active':''"
 109 |                              class="wf-component wf-component-dddatefield">
 110 |                             <div class="wf-remove icon icon-close" @click="close"></div>
 111 |                             <div class="wf-overlay"></div>
 112 |                             <div class="wf-componentview">
 113 |                                 <div class="wf-componentview-border"><label
 114 |                                     class="wf-componentview-label">{{item.defaultLable}}</label><span
 115 |                                     class="wf-componentview-placeholder">{{item.defaultProps}}<span
 116 |                                     v-if="item.defaultImportant">（必填）</span></span>
 117 |                                     <i class="icon icon-enter"></i>
 118 |                                 </div>
 119 |                             </div>
 120 |                         </div>
 121 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
 122 |                     </div>
 123 |                     <div v-if="item.componentName=='dddaterangefield'">
 124 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 125 |                              v-on:mouseout="mouseOut"
 126 |                              v-on:mouseover="hover"
 127 |                              :data-index="index"
 128 |                              v-bind:class="index==selected?'active':''"
 129 |                              class="wf-component wf-component-dddaterangefield">
 130 |                             <div class="wf-remove icon icon-close" @click="close"></div>
 131 |                             <div class="wf-overlay"></div>
 132 |                             <div class="wf-componentview">
 133 |                                 <div class="wf-componentview-border"><label
 134 |                                     class="wf-componentview-label">{{item.defaultLable}}</label><span
 135 |                                     class="wf-componentview-placeholder">{{item.defaultProps}}<span
 136 |                                     v-if="item.defaultImportant">（必填）</span></span>
 137 |                                     <i class="icon icon-enter"></i>
 138 |                                 </div>
 139 |                                 <div class="wf-componentview-border"><label
 140 |                                     class="wf-componentview-label">{{item.defaultLable2}}</label><span
 141 |                                     class="wf-componentview-placeholder">{{item.defaultProps2}}<span
 142 |                                     v-if="item.defaultImportant">（必填）</span></span>
 143 |                                     <i class="icon icon-enter"></i>
 144 |                                 </div>
 145 |                                 <div class="wf-componentview-border" v-if="item.defaultAutorekonTime"><label
 146 |                                     class="wf-componentview-label"><span>{{item.defaultSubtitle}}</span><span
 147 |                                 >（天）</span></label><span
 148 |                                     class="wf-componentview-placeholder"></span></div>
 149 |                                 <span></span>
 150 |                             </div>
 151 |                         </div>
 152 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
 153 |                     </div>
 154 |                     <div v-if="item.componentName=='ddphotofield'">
 155 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 156 |                              v-on:mouseout="mouseOut"
 157 |                              v-on:mouseover="hover"
 158 |                              :data-index="index"
 159 |                              v-bind:class="index==selected?'active':''"
 160 |                              class="wf-component wf-component-ddphotofield">
 161 |                             <div class="wf-remove icon icon-close" @click="close"></div>
 162 |                             <div class="wf-overlay"></div>
 163 |                             <div class="wf-componentview">
 164 |                                 <div class="wf-componentview-border"><label
 165 |                                     class="wf-componentview-label">{{item.defaultLable}}</label><span
 166 |                                     class="wf-componentview-placeholder">{{item.defaultProps}}<span
 167 |                                     v-if="item.defaultImportant">（必填）</span></span>
 168 |                                     <i class="icon icon-camera"></i>
 169 |                                 </div>
 170 |                             </div>
 171 |                         </div>
 172 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
 173 |                     </div>
 174 |                     <div v-if="item.componentName=='tablefield'">
 175 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 176 |                              v-on:mouseout="mouseOut"
 177 |                              v-on:mouseover="hover"
 178 |                              :data-index="index"
 179 |                              v-bind:class="index==selected?'active':''"
 180 |                              class="wf-component wf-component-tablefield">
 181 |                             <div class="wf-remove icon icon-close" @click="close"></div>
 182 |                             <div class="wf-overlay"></div>
 183 |                             <div class="wf-componentview">
 184 |                                 <label class="wf-componentview-label">{{item.defaultLable}}</label>
 185 |                                 <div class="wf-componentview-area" v-bind:class="{empty:item.components.length<=0}">
 186 |                                     <span class="emptytip" v-if="item.components.length<=0">可拖入多个组件（不包含明细组件）</span>
 187 |                                     <div class="wf-componentgroup dropbody">
 188 |                                         <div class="wf-dragging-mark" v-if="item.InTableCanvas==0"></div>
 189 |                                         <div v-for="(itemInTable,idx) in item.components">
 190 |                                             <div v-if="itemInTable.componentName=='textareafield'">
 191 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 192 |                                                      v-on:mouseout="mouseOut"
 193 |                                                      v-on:mouseover="hover"
 194 |                                                      :data-index="idx"
 195 |                                                      v-bind:class="idx==item.selected?'active':''"
 196 |                                                      class="wf-component wf-component-textareafield">
 197 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 198 |                                                     <div class="wf-overlay"></div>
 199 |                                                     <div class="wf-componentview">
 200 |                                                         <div class="wf-componentview-border"><label
 201 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable}}</label><span
 202 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps}}<span
 203 |                                                             v-if="item.defaultImportant">（必填）</span></span></div>
 204 |                                                     </div>
 205 |                                                 </div>
 206 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 207 |                                             </div>
 208 |                                             <div v-if="itemInTable.componentName=='textfield'">
 209 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 210 |                                                      v-on:mouseout="mouseOut"
 211 |                                                      v-on:mouseover="hover"
 212 |                                                      :data-index="idx"
 213 |                                                      v-bind:class="idx==item.selected?'active':''"
 214 |                                                      class="wf-component wf-component-textfield">
 215 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 216 |                                                     <div class="wf-overlay"></div>
 217 |                                                     <div class="wf-componentview">
 218 |                                                         <div class="wf-componentview-border"><label
 219 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable}}</label><span
 220 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps}}<span
 221 |                                                             v-if="itemInTable.defaultImportant">（必填）</span></span></div>
 222 |                                                     </div>
 223 |                                                 </div>
 224 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 225 |                                             </div>
 226 |                                             <div v-if="itemInTable.componentName=='numberfield'">
 227 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 228 |                                                      v-on:mouseout="mouseOut"
 229 |                                                      v-on:mouseover="hover"
 230 |                                                      :data-index="idx"
 231 |                                                      v-bind:class="idx==item.selected?'active':''"
 232 |                                                      class="wf-component wf-component-numberfield">
 233 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 234 |                                                     <div class="wf-overlay"></div>
 235 |                                                     <div class="wf-componentview">
 236 |                                                         <div class="wf-componentview-border"><label
 237 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable}}</label><span
 238 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps}}<span
 239 |                                                             v-if="itemInTable.defaultImportant">（必填）</span></span></div>
 240 |                                                     </div>
 241 |                                                 </div>
 242 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 243 |                                             </div>
 244 |                                             <div v-if="itemInTable.componentName=='ddselectfield'">
 245 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 246 |                                                      v-on:mouseover="hover"
 247 |                                                      v-on:mouseout="mouseOut"
 248 |                                                      :data-index="idx"
 249 |                                                      v-bind:class="idx==item.selected?'active':''"
 250 |                                                      class="wf-component wf-component-ddselectfield">
 251 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 252 |                                                     <div class="wf-overlay"></div>
 253 |                                                     <div class="wf-componentview">
 254 |                                                         <div class="wf-componentview-border"><label
 255 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable}}</label><span
 256 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps}}<span
 257 |                                                             v-if="itemInTable.defaultImportant">（必填）</span></span>
 258 |                                                             <i class="icon icon-enter"></i>
 259 |                                                         </div>
 260 |                                                     </div>
 261 |                                                 </div>
 262 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 263 |                                             </div>
 264 |                                             <div v-if="itemInTable.componentName=='ddmultiselectfield'">
 265 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 266 |                                                      v-on:mouseout="mouseOut"
 267 |                                                      v-on:mouseover="hover"
 268 |                                                      :data-index="idx"
 269 |                                                      v-bind:class="idx==item.selected?'active':''"
 270 |                                                      class="wf-component wf-component-ddmultiselectfield">
 271 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 272 |                                                     <div class="wf-overlay"></div>
 273 |                                                     <div class="wf-componentview">
 274 |                                                         <div class="wf-componentview-border"><label
 275 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable}}</label><span
 276 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps}}<span
 277 |                                                             v-if="itemInTable.defaultImportant">（必填）</span></span>
 278 |                                                             <i class="icon icon-enter"></i>
 279 |                                                         </div>
 280 |                                                     </div>
 281 |                                                 </div>
 282 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 283 |                                             </div>
 284 |                                             <div v-if="itemInTable.componentName=='dddatefield'">
 285 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 286 |                                                      v-on:mouseout="mouseOut"
 287 |                                                      v-on:mouseover="hover"
 288 |                                                      :data-index="idx"
 289 |                                                      v-bind:class="idx==item.selected?'active':''"
 290 |                                                      class="wf-component wf-component-dddatefield">
 291 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 292 |                                                     <div class="wf-overlay"></div>
 293 |                                                     <div class="wf-componentview">
 294 |                                                         <div class="wf-componentview-border"><label
 295 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable}}</label><span
 296 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps}}<span
 297 |                                                             v-if="itemInTable.defaultImportant">（必填）</span></span>
 298 |                                                             <i class="icon icon-enter"></i>
 299 |                                                         </div>
 300 |                                                     </div>
 301 |                                                 </div>
 302 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 303 |                                             </div>
 304 |                                             <div v-if="itemInTable.componentName=='dddaterangefield'">
 305 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 306 |                                                      v-on:mouseout="mouseOut"
 307 |                                                      v-on:mouseover="hover"
 308 |                                                      :data-index="idx"
 309 |                                                      v-bind:class="idx==item.selected?'active':''"
 310 |                                                      class="wf-component wf-component-dddaterangefield">
 311 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 312 |                                                     <div class="wf-overlay"></div>
 313 |                                                     <div class="wf-componentview">
 314 |                                                         <div class="wf-componentview-border"><label
 315 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable}}</label><span
 316 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps}}<span
 317 |                                                             v-if="itemInTable.defaultImportant">（必填）</span></span>
 318 |                                                             <i class="icon icon-enter"></i>
 319 |                                                         </div>
 320 |                                                         <div class="wf-componentview-border"><label
 321 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable2}}</label><span
 322 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps2}}<span
 323 |                                                             v-if="itemInTable.defaultImportant">（必填）</span></span>
 324 |                                                             <i class="icon icon-enter"></i>
 325 |                                                         </div>
 326 |                                                         <div class="wf-componentview-border"
 327 |                                                              v-if="itemInTable.defaultAutorekonTime"><label
 328 |                                                             class="wf-componentview-label"><span>{{itemInTable.defaultSubtitle}}</span><span
 329 |                                                         >（天）</span></label><span
 330 |                                                             class="wf-componentview-placeholder"></span></div>
 331 |                                                         <span></span>
 332 |                                                     </div>
 333 |                                                 </div>
 334 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 335 |                                             </div>
 336 |                                             <div v-if="itemInTable.componentName=='ddphotofield'">
 337 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 338 |                                                      v-on:mouseout="mouseOut"
 339 |                                                      v-on:mouseover="hover"
 340 |                                                      :data-index="idx"
 341 |                                                      v-bind:class="idx==item.selected?'active':''"
 342 |                                                      class="wf-component wf-component-ddphotofield">
 343 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 344 |                                                     <div class="wf-overlay"></div>
 345 |                                                     <div class="wf-componentview">
 346 |                                                         <div class="wf-componentview-border"><label
 347 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable}}</label><span
 348 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps}}<span
 349 |                                                             v-if="itemInTable.defaultImportant">（必填）</span></span>
 350 |                                                             <i class="icon icon-camera"></i>
 351 |                                                         </div>
 352 |                                                     </div>
 353 |                                                 </div>
 354 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 355 |                                             </div>
 356 |                                             <div v-if="itemInTable.componentName=='textnote'">
 357 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 358 |                                                      v-on:mouseout="mouseOut"
 359 |                                                      v-on:mouseover="hover"
 360 |                                                      :data-index="idx"
 361 |                                                      v-bind:class="idx==item.selected?'active':''"
 362 |                                                      class="wf-component wf-component-textnote">
 363 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 364 |                                                     <div class="wf-overlay"></div>
 365 |                                                     <div class="wf-componentview">
 366 |                                                         <div class="wf-componentview-content">
 367 |                                                             {{item.defaultProps}}<span
 368 |                                                             v-if="itemInTable.defaultImportant">（必填）</span>
 369 |                                                         </div>
 370 |                                                     </div>
 371 |                                                 </div>
 372 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 373 |                                             </div>
 374 |                                             <div v-if="itemInTable.componentName=='moneyfield'">
 375 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 376 |                                                      v-on:mouseout="mouseOut"
 377 |                                                      v-on:mouseover="hover"
 378 |                                                      :data-index="idx"
 379 |                                                      v-bind:class="idx==item.selected?'active':''"
 380 |                                                      class="wf-component wf-component-moneyfield">
 381 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 382 |                                                     <div class="wf-overlay"></div>
 383 |                                                     <div class="wf-componentview">
 384 |                                                         <div class="wf-componentview-border"><label
 385 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable}}</label><span
 386 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps}}<span
 387 |                                                             v-if="itemInTable.defaultImportant">（必填）</span></span>
 388 |                                                         </div>
 389 |                                                         <div class="cnformat" v-if="itemInTable.defaultTranslate">
 390 |                                                             大写：壹万元整（示例）
 391 |                                                         </div>
 392 |                                                     </div>
 393 |                                                 </div>
 394 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 395 |                                             </div>
 396 |                                             <div v-if="itemInTable.componentName=='ddattachment'">
 397 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 398 |                                                      v-on:mouseout="mouseOut"
 399 |                                                      v-on:mouseover="hover"
 400 |                                                      :data-index="idx"
 401 |                                                      v-bind:class="idx==item.selected?'active':''"
 402 |                                                      class="wf-component wf-component-ddattachment">
 403 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 404 |                                                     <div class="wf-overlay"></div>
 405 |                                                     <div class="wf-componentview">
 406 |                                                         <div class="wf-componentview-border"><label
 407 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable}}</label><span
 408 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps}}<span
 409 |                                                             v-if="itemInTable.defaultImportant">（必填）</span></span>
 410 |                                                         </div>
 411 |                                                         <i class="icon icon-chakanfujian"></i>
 412 |                                                     </div>
 413 |                                                 </div>
 414 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 415 |                                             </div>
 416 |                                             <div v-if="itemInTable.componentName=='externalcontactfield'">
 417 |                                                 <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 418 |                                                      v-on:mouseout="mouseOut"
 419 |                                                      v-on:mouseover="hover"
 420 |                                                      :data-index="idx"
 421 |                                                      v-bind:class="idx==item.selected?'active':''"
 422 |                                                      class="wf-component wf-component-externalcontactfield">
 423 |                                                     <div class="wf-remove icon icon-close" @click="close"></div>
 424 |                                                     <div class="wf-overlay"></div>
 425 |                                                     <div class="wf-componentview">
 426 |                                                         <div class="wf-componentview-border"><label
 427 |                                                             class="wf-componentview-label">{{itemInTable.defaultLable}}</label><span
 428 |                                                             class="wf-componentview-placeholder">{{itemInTable.defaultProps}}<span
 429 |                                                             v-if="itemInTable.defaultImportant">（必填）</span></span>
 430 |                                                         </div>
 431 |                                                         <i class="icon icon-enter"></i>
 432 |                                                     </div>
 433 |                                                 </div>
 434 |                                                 <div class="wf-dragging-mark" v-if="item.InTableCanvas==idx+1"></div>
 435 |                                             </div>
 436 |                                         </div>
 437 |                                     </div>
 438 |                                 </div>
 439 |                                 <div class="wf-componentview-adddetail">
 440 |                                     {{item.defaultAction}}
 441 |                                 </div>
 442 |                             </div>
 443 |                         </div>
 444 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
 445 |                     </div>
 446 |                     <div v-if="item.componentName=='textnote'">
 447 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 448 |                              v-on:mouseout="mouseOut"
 449 |                              v-on:mouseover="hover"
 450 |                              :data-index="index"
 451 |                              v-bind:class="index==selected?'active':''"
 452 |                              class="wf-component wf-component-textnote">
 453 |                             <div class="wf-remove icon icon-close" @click="close"></div>
 454 |                             <div class="wf-overlay"></div>
 455 |                             <div class="wf-componentview">
 456 |                                 <div class="wf-componentview-content">
 457 |                                     {{item.defaultProps}}<span
 458 |                                     v-if="item.defaultImportant">（必填）</span>
 459 |                                 </div>
 460 |                             </div>
 461 |                         </div>
 462 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
 463 |                     </div>
 464 |                     <div v-if="item.componentName=='moneyfield'">
 465 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 466 |                              v-on:mouseout="mouseOut"
 467 |                              v-on:mouseover="hover"
 468 |                              :data-index="index"
 469 |                              v-bind:class="index==selected?'active':''"
 470 |                              class="wf-component wf-component-moneyfield">
 471 |                             <div class="wf-remove icon icon-close" @click="close"></div>
 472 |                             <div class="wf-overlay"></div>
 473 |                             <div class="wf-componentview">
 474 |                                 <div class="wf-componentview-border"><label
 475 |                                     class="wf-componentview-label">{{item.defaultLable}}</label><span
 476 |                                     class="wf-componentview-placeholder">{{item.defaultProps}}<span
 477 |                                     v-if="item.defaultImportant">（必填）</span></span>
 478 |                                 </div>
 479 |                                 <div class="cnformat" v-if="item.defaultTranslate">大写：壹万元整（示例）</div>
 480 |                             </div>
 481 |                         </div>
 482 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
 483 |                     </div>
 484 |                     <div v-if="item.componentName=='ddattachment'">
 485 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 486 |                              v-on:mouseout="mouseOut"
 487 |                              v-on:mouseover="hover"
 488 |                              :data-index="index"
 489 |                              v-bind:class="index==selected?'active':''"
 490 |                              class="wf-component wf-component-ddattachment">
 491 |                             <div class="wf-remove icon icon-close" @click="close"></div>
 492 |                             <div class="wf-overlay"></div>
 493 |                             <div class="wf-componentview">
 494 |                                 <div class="wf-componentview-border"><label
 495 |                                     class="wf-componentview-label">{{item.defaultLable}}</label><span
 496 |                                     class="wf-componentview-placeholder">{{item.defaultProps}}<span
 497 |                                     v-if="item.defaultImportant">（必填）</span></span>
 498 |                                 </div>
 499 |                                 <i class="icon icon-chakanfujian"></i>
 500 |                             </div>
 501 |                         </div>
 502 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
 503 |                     </div>
 504 |                     <div v-if="item.componentName=='externalcontactfield'">
 505 |                         <div @mousedown="mouseDown" draggable="true" v-on:dragstart="movestart"
 506 |                              v-on:mouseout="mouseOut"
 507 |                              v-on:mouseover="hover"
 508 |                              :data-index="index"
 509 |                              v-bind:class="index==selected?'active':''"
 510 |                              class="wf-component wf-component-externalcontactfield">
 511 |                             <div class="wf-remove icon icon-close" @click="close"></div>
 512 |                             <div class="wf-overlay"></div>
 513 |                             <div class="wf-componentview">
 514 |                                 <div class="wf-componentview-border"><label
 515 |                                     class="wf-componentview-label">{{item.defaultLable}}</label><span
 516 |                                     class="wf-componentview-placeholder">{{item.defaultProps}}<span
 517 |                                     v-if="item.defaultImportant">（必填）</span></span>
 518 |                                 </div>
 519 |                                 <i class="icon icon-enter"></i>
 520 |                             </div>
 521 |                         </div>
 522 |                         <div class="wf-dragging-mark" v-if="InCanvas==index+1"></div>
 523 |                     </div>
 524 |                 </div>
 525 |             </div>
 526 |         </div>
 527 |     </div>
 528 | </template>
 529 | <script>
 530 |     //  import draggable from 'vuedraggable'
 531 |     export default{
 532 |         name: 'formcanvas',
 533 |         data: function () {
 534 |             return {
 535 |                 title: '请假',
 536 |                 description: '',
 537 |                 icon: '//gw.alicdn.com/tps/TB1zXtqOpXXXXa6XXXXXXXXXXXX-102-102.png',
 538 |                 isempty: true,
 539 |                 left: 0,
 540 |                 top: 0,
 541 |                 width: 0,
 542 |                 height: 0,
 543 |                 InCanvas: null,
 544 |                 components: [],
 545 |                 selected: null,
 546 |                 domArr: [],
 547 |                 isDrag: false,
 548 |                 dragIndex: null,
 549 |                 tabIndex: null,
 550 |                 //拖动的时候 明细组件的index
 551 |                 parNodeIndex: null
 552 |             }
 553 |         },
 554 |         /* components: {
 555 |          draggable
 556 |          },*/
 557 |         methods: {
 558 |             hover: function (e) {
 559 |                 e.stopPropagation();
 560 |                 e.preventDefault()
 561 |                 e.currentTarget.classList.add('hover')
 562 |             },
 563 |             mouseOut: function (e) {
 564 |                 e.stopPropagation();
 565 |                 e.preventDefault()
 566 |                 e.currentTarget.classList.remove('hover')
 567 |             },
 568 |             close: function (e) {
 569 |                 e.preventDefault();
 570 |                 e.stopPropagation();
 571 |                 let dom = e.currentTarget.parentNode;
 572 |                 let parNode = dom.parentNode.parentNode.parentNode.parentNode;
 573 |                 let index = dom.getAttribute('data-index');
 574 |                 if (parNode.className.indexOf('wf-componentview-area') >= 0) {
 575 |                     let parNodeIndex = parNode.parentNode.parentNode.getAttribute('data-index');
 576 |                     this.components[parNodeIndex].components.splice(index, 1)
 577 |                     if (parNode.className.indexOf('active') > 0) {
 578 |                         drag.$emit("changeTab", false)
 579 |                         this.selected = null;
 580 |                         this.components[parNodeIndex].selected = null
 581 |                     }
 582 |                 } else {
 583 |                     this.components.splice(index, 1)
 584 |                     if (dom.className.indexOf('active') > 0) {
 585 |                         drag.$emit("changeTab", false)
 586 |                         this.selected = null;
 587 |                     }
 588 |                     if (this.components.length <= 0) {
 589 |                         this.isempty = true
 590 |                     }
 591 |                 }
 592 |             },
 593 |             mouseDown: function (e) {
 594 |                 e.stopPropagation();
 595 |                 let dom = e.currentTarget;
 596 |                 let index = dom.getAttribute('data-index');
 597 |                 let parNode = dom.parentNode.parentNode.parentNode.parentNode;
 598 |                 let obj;
 599 |                 if (parNode.className.indexOf('wf-componentview-area') >= 0) {
 600 |                     let parNodeIndex = parNode.parentNode.parentNode.getAttribute('data-index');
 601 | 
 602 |                     obj = this.components[parNodeIndex].components[index];
 603 |                     if (this.selected == index && this.parNodeIndex != parNodeIndex || this.selected !== index) {
 604 |                         this.parNodeIndex = parNodeIndex;
 605 |                         this.selected = null;
 606 |                         this.components[parNodeIndex].selected = index;
 607 |                         drag.$emit("selectComponent", obj)
 608 |                         drag.$emit('changeTab', true)
 609 |                     }
 610 |                 } else {
 611 |                     this.parNodeIndex = null;
 612 |                     for (let i = 0, l = this.components.length; i < l; i++) {
 613 |                         this.components[i].selected = null;
 614 |                     }
 615 |                     obj = this.components[index];
 616 |                     if (this.selected !== index) {
 617 |                         this.selected = index
 618 |                         drag.$emit("selectComponent", obj)
 619 |                         drag.$emit('changeTab', true)
 620 |                     }
 621 |                 }
 622 |             },
 623 |             movestart: function (e) {
 624 |                 e.preventDefault()
 625 |                 e.stopPropagation()
 626 |                 let obj = {}
 627 |                 let dom = e.currentTarget
 628 |                 dom.classList.add('draging')
 629 |                 let index = dom.getAttribute('data-index');
 630 |                 let actualLeft = dom.offsetLeft;
 631 |                 let current = dom.offsetParent;
 632 |                 while (current !== null) {
 633 |                     actualLeft += current.offsetLeft;
 634 |                     current = current.offsetParent;
 635 |                 }
 636 |                 let actualTop = dom.offsetTop;
 637 |                 while (current !== null) {
 638 |                     actualTop += current.offsetTop;
 639 |                     current = current.offsetParent;
 640 |                 }
 641 |                 obj.clientX = e.clientX;
 642 |                 obj.clientY = e.clientY;
 643 |                 obj.isstart = true;
 644 |                 let parNode = dom.parentNode.parentNode.parentNode.parentNode;
 645 |                 if (parNode.className.indexOf('wf-componentview-area') >= 0) {
 646 |                     let parNodeIndex = parNode.parentNode.parentNode.getAttribute('data-index');
 647 |                     obj.componentView = this.components[parNodeIndex].components[index];
 648 |                     obj.componentName = this.components[parNodeIndex].components[index].componentName;
 649 |                     obj.componentText = this.components[parNodeIndex].components[index].name;
 650 |                 } else {
 651 |                     obj.componentView = this.components[index];
 652 |                     obj.componentName = this.components[index].componentName;
 653 |                     obj.componentText = this.components[index].name;
 654 |                 }
 655 |                 this.isDrag = true;
 656 |                 this.dragIndex = index;
 657 |                 console.log(obj)
 658 |                 drag.$emit("movestart", obj)
 659 |             },
 660 |             queryDomByIndex: function (parentNode, index) {
 661 |                 let dom = parentNode.querySelectorAll('.wf-component');
 662 |                 for (let i = 0, l = dom.length; i < l; i++) {
 663 |                     let obj = dom[i];
 664 |                     if (obj.getAttribute('data-index') == index) {
 665 |                         return obj
 666 |                     }
 667 |                 }
 668 |             },
 669 |             getcomponents: function () {
 670 |                 let count = 0;
 671 |                 for (let i = 0, l = this.domArr.length; i < l; i++) {
 672 |                     count++;
 673 |                     if (Object.prototype.toString.call(this.domArr[i].domArr).slice(8, -1) === "Array") {
 674 |                         for (let m = 0, n = this.domArr[i].domArr.length; m < n; m++) {
 675 |                             count++
 676 |                         }
 677 |                     }
 678 |                 }
 679 |                 return count
 680 |             }
 681 |         },
 682 |         created: function () {
 683 |             let self = this
 684 |             drag.$on("moveInCanvas", function (obj) {
 685 |                 //当鼠标在中间可拖动区域
 686 |                 if (obj.clientX >= self.left && obj.clientY >= self.top && obj.clientX <= self.left + self.width && obj.clientY <= self.top + self.height) {
 687 |                     //鼠标距离可拖动区域顶部的距离
 688 |                     let topInCanvas = obj.clientY - self.top;
 689 | 
 690 |                     if (self.domArr.length <= 0) {
 691 |                         self.InCanvas = 0;
 692 |                         self.tabIndex = null;
 693 |                     } else if (self.domArr.length === 1) {
 694 |                         if (obj.componentName == 'tablefield') {
 695 |                             if (topInCanvas <= self.domArr[0].middle) {
 696 |                                 self.InCanvas = 0;
 697 |                                 self.tabIndex = null;
 698 |                             } else if (topInCanvas > self.domArr[0].middle) {
 699 |                                 self.InCanvas = 1;
 700 |                                 self.tabIndex = null;
 701 |                             }
 702 |                         } else {
 703 |                             if (topInCanvas <= self.domArr[0].middle_top) {
 704 |                                 self.InCanvas = 0;
 705 |                                 self.tabIndex = null;
 706 |                             } else if (topInCanvas > self.domArr[0].middle_lower) {
 707 |                                 self.InCanvas = 1;
 708 |                                 self.tabIndex = null;
 709 |                             } else if (topInCanvas <= self.domArr[0].middle_lower && topInCanvas > self.domArr[0].middle_top) {
 710 |                                 let item = self.domArr[0];
 711 |                                 self.InCanvas = null;
 712 |                                 self.tabIndex = 0;
 713 |                                 if (item.domArr.length <= 0 || topInCanvas <= item.domArr[0].middle_top) {
 714 |                                     self.components[0].InTableCanvas = 0
 715 |                                 } else if (topInCanvas > item.domArr[item.domArr.length - 1].middle_lower) {
 716 |                                     self.components[0].InTableCanvas = item.domArr.length
 717 |                                 } else if (item.domArr.length > 1) {
 718 |                                     for (let m = 0, n = item.domArr.length - 1; m < n; m++) {
 719 |                                         if (topInCanvas > item.domArr[m].middle_lower && topInCanvas <= item.domArr[m + 1].middle_top) {
 720 |                                             self.components[0].InTableCanvas = m + 1
 721 |                                         }
 722 |                                     }
 723 |                                 }
 724 |                             }
 725 |                         }
 726 |                     } else {
 727 |                         //中间已有组件数量大于1
 728 |                         if (obj.componentName == 'tablefield') {
 729 |                             if (topInCanvas <= self.domArr[0].middle) {
 730 |                                 self.InCanvas = 0;
 731 |                                 self.tabIndex = null;
 732 |                             } else if (topInCanvas > self.domArr[self.domArr.length - 1].middle) {
 733 |                                 self.InCanvas = self.domArr.length;
 734 |                                 self.tabIndex = null;
 735 |                             } else {
 736 |                                 for (let i = 0, l = self.domArr.length; i < l - 1; i++) {
 737 |                                     let item = self.domArr[i];
 738 |                                     let nextItem = self.domArr[i + 1];
 739 |                                     if (topInCanvas > item.middle && topInCanvas <= nextItem.middle) {
 740 |                                         self.InCanvas = i + 1;
 741 |                                         self.tabIndex = null;
 742 |                                         self.components[i].InTableCanvas = null
 743 |                                     }
 744 |                                 }
 745 |                                 /* //当最后一个组件是明细组件时
 746 |                                  if (topInCanvas <= self.domArr[self.domArr.length - 1].middle_lower && topInCanvas > self.domArr[self.domArr.length - 1].middle_top) {
 747 |                                  let item = self.domArr[self.domArr.length - 1];
 748 |                                  self.InCanvas = null;
 749 |                                  self.tabIndex = self.domArr.length - 1;
 750 |                                  if (item.domArr.length <= 0 || topInCanvas <= item.domArr[0].middle_top) {
 751 |                                  self.components[self.domArr.length - 1].InTableCanvas = 0
 752 |                                  } else if (topInCanvas > item.domArr[item.domArr.length - 1].middle_lower) {
 753 |                                  self.components[self.domArr.length - 1].InTableCanvas = item.domArr.length
 754 |                                  } else {
 755 |                                  for (let m = 0, n = item.domArr.length - 1; m < n; m++) {
 756 |                                  if (topInCanvas > item.domArr[m].middle_lower && topInCanvas <= item.domArr[m + 1].middle_top) {
 757 |                                  self.components[i].InTableCanvas = m + 1
 758 |                                  }
 759 |                                  }
 760 |                                  }
 761 |                                  }*/
 762 |                             }
 763 |                         } else {
 764 |                             if (topInCanvas <= self.domArr[0].middle_top) {
 765 |                                 self.InCanvas = 0;
 766 |                                 self.tabIndex = null;
 767 |                             } else if (topInCanvas > self.domArr[self.domArr.length - 1].middle_lower) {
 768 |                                 self.InCanvas = self.domArr.length;
 769 |                                 self.tabIndex = null;
 770 |                             }
 771 |                             else {
 772 |                                 for (let i = 0, l = self.domArr.length; i < l - 1; i++) {
 773 |                                     let item = self.domArr[i];
 774 |                                     let nextItem = self.domArr[i + 1];
 775 |                                     //在明细组件里面
 776 |                                     if (topInCanvas > item.middle_top && topInCanvas <= item.middle_lower) {
 777 |                                         self.InCanvas = null;
 778 |                                         self.tabIndex = i;
 779 |                                         if (item.domArr.length <= 0 || topInCanvas <= item.domArr[0].middle_top) {
 780 |                                             self.components[i].InTableCanvas = 0
 781 |                                         } else if (topInCanvas > item.domArr[item.domArr.length - 1].middle_lower) {
 782 |                                             self.components[i].InTableCanvas = item.domArr.length
 783 |                                         } else {
 784 |                                             for (let m = 0, n = item.domArr.length - 1; m < n; m++) {
 785 |                                                 if (topInCanvas > item.domArr[m].middle_lower && topInCanvas <= item.domArr[m + 1].middle_top) {
 786 |                                                     self.components[i].InTableCanvas = m + 1
 787 |                                                 }
 788 |                                             }
 789 |                                         }
 790 |                                     } else if (topInCanvas > item.middle_lower && topInCanvas <= nextItem.middle_top) {
 791 |                                         self.InCanvas = i + 1;
 792 |                                         self.tabIndex = null;
 793 |                                         self.components[i].InTableCanvas = null
 794 |                                     }
 795 | 
 796 |                                 }
 797 |                                 //当最后一个组件是明细组件时
 798 |                                 if (topInCanvas <= self.domArr[self.domArr.length - 1].middle_lower && topInCanvas > self.domArr[self.domArr.length - 1].middle_top) {
 799 |                                     let item = self.domArr[self.domArr.length - 1];
 800 |                                     self.InCanvas = null;
 801 |                                     self.tabIndex = self.domArr.length - 1;
 802 |                                     if (item.domArr.length <= 0 || topInCanvas <= item.domArr[0].middle_top) {
 803 |                                         self.components[self.domArr.length - 1].InTableCanvas = 0
 804 |                                     } else if (topInCanvas > item.domArr[item.domArr.length - 1].middle_lower) {
 805 |                                         self.components[self.domArr.length - 1].InTableCanvas = item.domArr.length
 806 |                                     } else {
 807 |                                         for (let m = 0, n = item.domArr.length - 1; m < n; m++) {
 808 |                                             if (topInCanvas > item.domArr[m].middle_lower && topInCanvas <= item.domArr[m + 1].middle_top) {
 809 |                                                 self.components[m].InTableCanvas = m + 1
 810 |                                             }
 811 |                                         }
 812 |                                     }
 813 |                                 }
 814 |                             }
 815 |                         }
 816 |                     }
 817 | 
 818 |                     if (self.tabIndex != null) {
 819 |                         self.InCanvas = null
 820 |                     } else {
 821 |                         self.InCanvas = self.InCanvas || 0
 822 |                     }
 823 |                     if (self.InCanvas != null) {
 824 |                         for (let i = 0, l = self.components.length; i < l; i++) {
 825 |                             self.components[i].InTableCanvas = null
 826 |                         }
 827 |                     }
 828 |                 }
 829 |                 else {
 830 |                     self.InCanvas = null;
 831 |                     self.tabIndex = null;
 832 |                     for (let i = 0, l = self.components.length; i < l; i++) {
 833 |                         self.components[i].InTableCanvas = null
 834 |                     }
 835 |                 }
 836 |             })
 837 |             drag.$on("moveend", function (obj) {
 838 |                 let component = JSON.stringify(obj);
 839 |                 component = JSON.parse(component);
 840 |                 let componentsLength = self.getcomponents();
 841 |                 console.log(componentsLength)
 842 |                 drag.$emit("dragend", obj);
 843 |                 //拖动到非明细组件里面
 844 |                 if (self.InCanvas != null) {
 845 |                     //拖动现在已有组件
 846 |                     if (self.isDrag) {
 847 |                         self.dragIndex = self.dragIndex >> 0;
 848 |                         //如果以前在明细组件里面
 849 |                         if (self.parNodeIndex != null) {
 850 |                             let dragItem = self.components[self.parNodeIndex].components[self.dragIndex];
 851 |                             self.components[self.parNodeIndex].components.splice(self.dragIndex, 1);
 852 |                             self.components.splice(self.InCanvas, 0, dragItem);
 853 |                             self.selected = self.components.indexOf(dragItem);
 854 |                         } else {
 855 |                             if (self.dragIndex != self.InCanvas - 1 && self.dragIndex != self.InCanvas) {
 856 |                                 let dragItem = self.components[self.dragIndex];
 857 |                                 self.components.splice(self.dragIndex, 1);
 858 |                                 self.components.splice(self.InCanvas, 0, dragItem);
 859 |                                 self.selected = self.components.indexOf(dragItem);
 860 |                             } else {
 861 |                                 let dom = self.queryDomByIndex(document, self.dragIndex);
 862 |                                 dom.classList.remove('draging');
 863 |                             }
 864 |                         }
 865 |                         self.dragIndex = null;
 866 |                         self.isDrag = false;
 867 |                     } else {
 868 |                         //添加新组件
 869 |                         let idx = 0;
 870 |                         for (let i = 0; i < self.components.length; i++) {
 871 |                             let item = self.components[i];
 872 |                             if (item.name == component.componentView.name) {
 873 |                                 idx++;
 874 |                             }
 875 |                         }
 876 |                         component.componentView.idx = componentsLength;
 877 |                         if (idx > 0) {
 878 |                             component.componentView.defaultLable = component.componentView.defaultLable + "（" + idx + "）";
 879 |                         }
 880 |                         if (self.InCanvas > 0) {
 881 |                             self.components.splice(self.InCanvas, 0, component.componentView);
 882 |                         } else if (self.InCanvas == 0) {
 883 |                             self.components.unshift(component.componentView);
 884 |                         }
 885 |                         self.selected = self.components.indexOf(component.componentView);
 886 |                         drag.$emit('changeTab', true);
 887 |                         drag.$emit("selectComponent", component.componentView)
 888 |                     }
 889 |                     self.InCanvas = null;
 890 |                     //拖动到明细组件里面
 891 |                 } else if (self.tabIndex != null) {
 892 |                     //拖动现有组件
 893 |                     if (self.isDrag) {
 894 |                         //在明细组件里面的位置
 895 |                         let inTabIndex = self.components[self.tabIndex].InTableCanvas >> 0;
 896 |                         self.dragIndex = self.dragIndex >> 0;
 897 |                         //  self.parNodeIndex = self.parNodeIndex >> 0;
 898 |                         //如果从明细组件里面拖到外面
 899 |                         if (self.parNodeIndex == null) {
 900 |                             let dragItem = self.components[self.dragIndex];
 901 |                             self.components[self.tabIndex].components.splice(inTabIndex, 0, dragItem);
 902 |                             self.components[self.tabIndex].selected = inTabIndex;
 903 |                             self.components.splice(self.dragIndex, 1);
 904 |                             self.selected = null;
 905 |                         } else {
 906 |                             if ((self.parNodeIndex == self.tabIndex && self.dragIndex != inTabIndex && self.dragIndex != inTabIndex - 1) || self.parNodeIndex != self.tabIndex) {
 907 |                                 let dragItem = self.components[self.parNodeIndex].components[self.dragIndex];
 908 |                                 self.components[self.parNodeIndex].components.splice(self.dragIndex, 1)
 909 |                                 if (inTabIndex > 0) {
 910 |                                     self.components[self.tabIndex].components.splice(inTabIndex, 0, dragItem);
 911 |                                 } else if (inTabIndex == 0) {
 912 |                                     self.components[self.tabIndex].components.unshift(dragItem);
 913 |                                 }
 914 |                                 /*
 915 |                                  self.components[self.parNodeIndex].components.splice(self.dragIndex, 1);
 916 |                                  self.components[self.tabIndex].components.splice(inTabIndex, 0, dragItem);*/
 917 |                                 self.selected = null;
 918 |                                 self.components[self.tabIndex].selected = inTabIndex;
 919 |                             } else {
 920 |                                 let dom = self.queryDomByIndex(self.queryDomByIndex(document, self.parNodeIndex), self.dragIndex);
 921 |                                 dom.classList.remove('draging');
 922 |                             }
 923 |                         }
 924 |                         self.dragIndex = null;
 925 |                         self.isDrag = false;
 926 |                     } else {
 927 |                         //添加新组件
 928 |                         let idx = 0;
 929 |                         for (let i = 0; i < self.components[self.tabIndex].components.length; i++) {
 930 |                             let item = self.components[self.tabIndex].components[i];
 931 |                             if (item.name == component.componentView.name) {
 932 |                                 idx++;
 933 |                             }
 934 |                         }
 935 |                         component.componentView.idx = componentsLength;
 936 |                         if (idx > 0) {
 937 |                             component.componentView.defaultLable = component.componentView.defaultLable + "（" + idx + "）";
 938 |                         }
 939 |                         if (self.components[self.tabIndex].InTableCanvas > 0) {
 940 |                             self.components[self.tabIndex].components.splice(self.components[self.tabIndex].InTableCanvas, 0, component.componentView);
 941 |                         } else if (self.components[self.tabIndex].InTableCanvas == 0) {
 942 |                             self.components[self.tabIndex].components.unshift(component.componentView);
 943 |                         }
 944 | 
 945 |                         drag.$emit('changeTab', true);
 946 |                         drag.$emit("selectComponent", component.componentView)
 947 |                     }
 948 |                     for (let i = 0, l = self.components.length; i < l; i++) {
 949 |                         self.components[i].InTableCanvas = null;
 950 |                     }
 951 |                 }
 952 |                 if (self.components.length <= 0) {
 953 |                     self.isempty = true
 954 |                 } else {
 955 |                     self.isempty = false
 956 |                 }
 957 |             })
 958 |             drag.$on("changeComponent", function (obj) {
 959 |                 for (let i = 0; i < self.components.length; i++) {
 960 |                     let item = self.components[i];
 961 |                     if (item.idx == obj.idx) {
 962 |                         self.components.splice(i, 1, obj)
 963 |                     } else if (item.componentName == 'tablefield') {
 964 |                         for (let m = 0, n = item.components.length; m < n; m++) {
 965 |                             if (obj.idx == item.components[m].idx) {
 966 |                                 self.components[i].components.splice(m, 1, obj)
 967 |                             }
 968 |                         }
 969 |                     }
 970 |                 }
 971 |             })
 972 |             drag.$on("changeInfo", function (obj) {
 973 |                 self.title = obj.title;
 974 |                 self.description = obj.description;
 975 |                 self.icon = obj.icon;
 976 |             })
 977 |             drag.$on('save', function () {
 978 |                 let obj={
 979 |                     title:self.title,
 980 |                     description:self.description,
 981 |                     icon:self.icon,
 982 |                     components:self.components
 983 |                 }
 984 |                 console.log(obj)
 985 |             })
 986 |         },
 987 |         mounted: function () {
 988 |             let dom = document.querySelector('.wf-formcanvas-inner')
 989 |             var actualLeft = dom.offsetLeft;
 990 |             var current = dom.offsetParent;
 991 |             while (current !== null) {
 992 |                 actualLeft += current.offsetLeft;
 993 |                 current = current.offsetParent;
 994 |             }
 995 |             var actualTop = dom.offsetTop;
 996 |             var current = dom.offsetParent;
 997 |             while (current !== null) {
 998 |                 actualTop += current.offsetTop;
 999 |                 current = current.offsetParent;
1000 |             }
1001 |             this.left = actualLeft
1002 |             this.top = actualTop
1003 |             this.width = dom.offsetWidth
1004 |             this.height = dom.offsetHeight
1005 |         },
1006 |         updated: function () {
1007 |             this.domArr = []
1008 |             let domArr = document.querySelectorAll('.wf-formcanvas-body>div>div>.wf-component')
1009 |             for (let i = 0, l = domArr.length; i < l; i++) {
1010 |                 let obj = domArr[i];
1011 |                 if (obj.className.indexOf('wf-component-tablefield') >= 0) {
1012 |                     let middleDomArr = [];
1013 |                     let objTop = obj.offsetTop;
1014 |                     let middleDom = obj.querySelectorAll('.wf-component')
1015 |                     for (let m = 0, n = middleDom.length; m < n; m++) {
1016 |                         let item = middleDom[m];
1017 |                         middleDomArr.push({
1018 |                             height: item.offsetHeight,
1019 |                             middle_top: (objTop + 18 + item.offsetTop + item.offsetHeight / 2) >> 0,
1020 |                             middle_lower: (objTop + 18 + item.offsetTop + item.offsetHeight / 2) >> 0,
1021 |                             top: item.offsetTop + objTop
1022 |                         })
1023 |                     }
1024 |                     this.domArr.push({
1025 |                         height: obj.offsetHeight,
1026 |                         middle_top: (obj.offsetTop + 18) >> 0,
1027 |                         middle: (obj.offsetTop + obj.offsetHeight / 2) >> 0,
1028 |                         middle_lower: (obj.offsetTop + obj.offsetHeight - 23) >> 0,
1029 |                         top: objTop,
1030 |                         domArr: middleDomArr
1031 |                     })
1032 |                 } else {
1033 |                     this.domArr.push({
1034 |                         height: obj.offsetHeight,
1035 |                         middle: (obj.offsetTop + obj.offsetHeight / 2) >> 0,
1036 |                         middle_top: (obj.offsetTop + obj.offsetHeight / 2) >> 0,
1037 |                         middle_lower: (obj.offsetTop + obj.offsetHeight / 2) >> 0,
1038 |                         top: obj.offsetTop
1039 |                     })
1040 |                 }
1041 | 
1042 |             }
1043 |         }
1044 |     }
1045 | </script>
1046 | 


--------------------------------------------------------------------------------
/src/components/formsetting.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="wf-form wf-formsettings">
  3 |         <div class="wf-field wf-setting-title">
  4 |             <div class="fieldname">
  5 |                 <span>审批名称</span>
  6 |                 <span class="fieldinfo">最多10个字</span>
  7 |             </div>
  8 |             <div class="fieldblock">
  9 |                 <input type="text" @input="changeInfo" maxlength="10" v-model="title">
 10 |             </div>
 11 |         </div>
 12 |         <div class="wf-field wf-setting-description">
 13 |             <div class="fieldname">
 14 |                 <span>审批说明</span>
 15 |                 <span class="fieldinfo">最多100个字</span>
 16 |             </div>
 17 |             <div class="fieldblock">
 18 |                 <textarea type="text" @input="changeInfo" maxlength="100" v-model="description"></textarea>
 19 |             </div>
 20 |         </div>
 21 |         <div class="wf-field wf-setting-icon">
 22 |             <div class="fieldname">
 23 |                 图标
 24 |             </div>
 25 |             <div class="fieldblock">
 26 |                 <div class="wf-iconselect">
 27 |                     <label @click="selectIcon" :data-index="index" :data-icon="item.value" v-for="(item,index) in icons"
 28 |                            class="iconitem"
 29 |                            v-bind:class="index==selected?'seltected':''">
 30 |                         <i class="icon icon-checked" v-if="index==selected"></i>
 31 |                         <img :src="item.value">
 32 | 
 33 |                     </label>
 34 |                 </div>
 35 |             </div>
 36 |         </div>
 37 |     </div>
 38 | </template>
 39 | <script>
 40 |     export default{
 41 |         name: "formsetting",
 42 |         data: function () {
 43 |             return {
 44 |                 title: '',
 45 |                 description: '',
 46 |                 icons: [
 47 |                     {
 48 |                         name: "common",
 49 |                         value: "//gw.alicdn.com/tps/TB1zXtqOpXXXXa6XXXXXXXXXXXX-102-102.png"
 50 |                     },
 51 |                     {
 52 |                         name: "trip",
 53 |                         value: "//gw.alicdn.com/tps/TB1Ez8XOpXXXXa5XpXXXXXXXXXX-102-102.png"
 54 |                     }, {
 55 |                         name: "out",
 56 |                         value: "//gw.alicdn.com/tps/TB1C1XhOpXXXXaKXpXXXXXXXXXX-102-102.png"
 57 |                     },
 58 |                     {
 59 |                         name: "goods",
 60 |                         value: "//gw.alicdn.com/tps/TB1tm.TOXXXXXchaXXXXXXXXXXX-102-102.png"
 61 |                     }, {
 62 |                         name: "biz",
 63 |                         value: "//gw.alicdn.com/tps/TB1Y57ZOXXXXXXwaXXXXXXXXXXX-102-102.png"
 64 |                     },
 65 |                     {
 66 |                         name: "leave",
 67 |                         value: "//gw.alicdn.com/tps/TB1hcBoOpXXXXbPXXXXXXXXXXXX-102-102.png"
 68 |                     }, {
 69 |                         name: "message",
 70 |                         value: "//gw.alicdn.com/tps/TB1TOZQOXXXXXXVaXXXXXXXXXXX-102-102.png"
 71 |                     },
 72 |                     {
 73 |                         name: "favorite",
 74 |                         value: "//gw.alicdn.com/tps/TB1jjpoOpXXXXbHXXXXXXXXXXXX-102-102.png"
 75 |                     }, {
 76 |                         name: "datacurve",
 77 |                         value: "//gw.alicdn.com/tps/TB1.vAMOXXXXXXmaFXXXXXXXXXX-102-102.png"
 78 |                     },
 79 |                     {
 80 |                         name: "timefades",
 81 |                         value: "//gw.alicdn.com/tps/TB1UEoTOXXXXXbCaXXXXXXXXXXX-102-102.png"
 82 |                     }, {
 83 |                         name: "official",
 84 |                         value: "//gw.alicdn.com/tps/TB1NA.SOXXXXXbSaXXXXXXXXXXX-102-102.png"
 85 |                     },
 86 |                     {
 87 |                         name: "fly",
 88 |                         value: "//gw.alicdn.com/tps/TB12R3NOXXXXXcwaXXXXXXXXXXX-102-102.png"
 89 |                     }, {
 90 |                         name: "house",
 91 |                         value: "//gw.alicdn.com/tps/TB1ESwQOXXXXXbaaXXXXXXXXXXX-102-102.png"
 92 |                     },
 93 |                     {
 94 |                         name: "datapie",
 95 |                         value: "//gw.alicdn.com/tps/TB1q5U5OXXXXXXPXVXXXXXXXXXX-102-102.png"
 96 |                     }, {
 97 |                         name: "tag",
 98 |                         value: "//gw.alicdn.com/tps/TB1Pb4eOpXXXXcGXpXXXXXXXXXX-102-102.png"
 99 |                     },
100 |                     {
101 |                         name: "love",
102 |                         value: "//gw.alicdn.com/tps/TB1GCw.OXXXXXbOXFXXXXXXXXXX-102-102.png"
103 |                     }, {
104 |                         name: "daily",
105 |                         value: "//gw.alicdn.com/tps/TB1J20kOpXXXXc1XpXXXXXXXXXX-102-102.png"
106 |                     },
107 |                     {
108 |                         name: "weekly",
109 |                         value: "//gw.alicdn.com/tps/TB14v8rOpXXXXXYXpXXXXXXXXXX-102-102.png"
110 |                     }, {
111 |                         name: "monthly",
112 |                         value: "//gw.alicdn.com/tps/TB1NI0nOpXXXXX2XpXXXXXXXXXX-102-102.png"
113 |                     },
114 |                     {
115 |                         name: "promotion",
116 |                         value: "//gw.alicdn.com/tps/TB1Nb.3OXXXXXalaXXXXXXXXXXX-102-102.png"
117 |                     }, {
118 |                         name: "visiting",
119 |                         value: "//gw.alicdn.com/tps/TB1_Y.5OXXXXXcEXVXXXXXXXXXX-102-102.png"
120 |                     }, {
121 |                         name: "behavior",
122 |                         value: "//gw.alicdn.com/tps/TB15DEPOXXXXXXTaFXXXXXXXXXX-102-102.png"
123 |                     }, {
124 |                         name: "warehouse",
125 |                         value: "//gw.alicdn.com/tps/TB13Bw.OXXXXXXQXVXXXXXXXXXX-102-102.png"
126 |                     }, {
127 |                         name: "schoolAttendance",
128 |                         value: "//gw.alicdn.com/tps/TB1zhc.OXXXXXa4XVXXXXXXXXXX-102-102.png"
129 |                     }, {
130 |                         name: "schoolLog",
131 |                         value: "//gw.alicdn.com/tps/TB1i4ldOpXXXXaHXFXXXXXXXXXX-102-102.png"
132 |                     }, {
133 |                         name: "schoolStatement",
134 |                         value: "//gw.alicdn.com/tps/TB1Ons_OXXXXXbpXVXXXXXXXXXX-102-102.png"
135 |                     }, {
136 |                         name: "meeting",
137 |                         value: "//gw.alicdn.com/tps/TB1mZhiOpXXXXccXpXXXXXXXXXX-102-102.png"
138 |                     }, {
139 |                         name: "temporaryNotice",
140 |                         value: "//gw.alicdn.com/tps/TB118RbOpXXXXahXVXXXXXXXXXX-102-102.png"
141 |                     }, {
142 |                         name: "dutyLog",
143 |                         value: "//gw.alicdn.com/tps/TB18D0zOpXXXXXbXXXXXXXXXXXX-102-102.png"
144 |                     }, {
145 |                         name: "propaganda",
146 |                         value: "//gw.alicdn.com/tps/TB1a.VeOpXXXXc1XVXXXXXXXXXX-102-102.png"
147 |                     }, {
148 |                         name: "jobs",
149 |                         value: "//gw.alicdn.com/tps/TB1FXVmOpXXXXbGXFXXXXXXXXXX-102-102.png"
150 |                     }, {
151 |                         name: "recruitment",
152 |                         value: "//gw.alicdn.com/tps/TB1i7lmOpXXXXbvXFXXXXXXXXXX-102-102.png"
153 |                     }, {
154 |                         name: "inchapter",
155 |                         value: "//gw.alicdn.com/tps/TB1HXRxOpXXXXbbXpXXXXXXXXXX-102-102.png"
156 |                     }, {
157 |                         name: "class",
158 |                         value: "//gw.alicdn.com/tps/TB1Tv0GOpXXXXX7XXXXXXXXXXXX-102-102.png"
159 |                     }, {
160 |                         name: "department",
161 |                         value: "//gw.alicdn.com/tps/TB1E2NEOpXXXXaHXXXXXXXXXXXX-102-102.png"
162 |                     }, {
163 |                         name: "conference",
164 |                         value: "//gw.alicdn.com/tps/TB19xFfOpXXXXbBXVXXXXXXXXXX-102-102.png"
165 |                     }, {
166 |                         name: "gas",
167 |                         value: "//gw.alicdn.com/tps/TB13G0EOpXXXXbuXXXXXXXXXXXX-102-102.png"
168 |                     }, {
169 |                         name: "salary",
170 |                         value: "//gw.alicdn.com/tps/TB1QWA7OXXXXXb9aXXXXXXXXXXX-102-102.png"
171 |                     }, {
172 |                         name: "discount",
173 |                         value: "//gw.alicdn.com/tps/TB1_Lw6OXXXXXcCaXXXXXXXXXXX-102-102.png"
174 |                     }, {
175 |                         name: "pay",
176 |                         value: "//gw.alicdn.com/tps/TB1L8xjOpXXXXbYXFXXXXXXXXXX-102-102.png"
177 |                     }, {
178 |                         name: "contract",
179 |                         value: "//gw.alicdn.com/tps/TB1MLxpOpXXXXbeXFXXXXXXXXXX-102-102.png"
180 |                     }, {
181 |                         name: "collection",
182 |                         value: "//gw.alicdn.com/tps/TB1XQdaOpXXXXbwaXXXXXXXXXXX-102-102.png"
183 |                     }, {
184 |                         name: "cashier",
185 |                         value: "//gw.alicdn.com/tps/TB1z4I6OXXXXXX3apXXXXXXXXXX-102-102.png"
186 |                     }, {
187 |                         name: "departure",
188 |                         value: "//gw.alicdn.com/tps/TB19RptOpXXXXXQXFXXXXXXXXXX-102-102.png"
189 |                     }, {
190 |                         name: "courier",
191 |                         value: "//gw.alicdn.com/tps/TB1k6Z0OXXXXXcyapXXXXXXXXXX-102-102.png"
192 |                     }, {
193 |                         name: "procurement",
194 |                         value: "//gw.alicdn.com/tps/TB14X4tOpXXXXX2XFXXXXXXXXXX-102-102.png"
195 |                     }, {
196 |                         name: "attendance_supplementary",
197 |                         value: "//gw.alicdn.com/tps/TB13Rg5OXXXXXcgaXXXXXXXXXXX-102-102.png"
198 |                     }, {
199 |                         name: "positive",
200 |                         value: "//gw.alicdn.com/tps/TB1Rp0eOpXXXXayaXXXXXXXXXXX-102-102.png"
201 |                     }, {
202 |                         name: "work_instructions",
203 |                         value: "//gw.alicdn.com/tps/TB1eMBJOpXXXXXAXXXXXXXXXXXX-102-102.png"
204 |                     }, {
205 |                         name: "repeat_order",
206 |                         value: "//gw.alicdn.com/tps/TB1GxBnOpXXXXcbXFXXXXXXXXXX-102-102.png"
207 |                     }, {
208 |                         name: "follow",
209 |                         value: "//gw.alicdn.com/tps/TB1fJo3OXXXXXa8apXXXXXXXXXX-102-102.png"
210 |                     }, {
211 |                         name: "general_log",
212 |                         value: "//gw.alicdn.com/tps/TB1E9BoOpXXXXcHXFXXXXXXXXXX-102-102.png"
213 |                     }, {
214 |                         name: "business",
215 |                         value: "//gw.alicdn.com/tps/TB13336OXXXXXcGapXXXXXXXXXX-102-102.png"
216 |                     }],
217 |                 selected: 0
218 |             }
219 |         },
220 |         methods: {
221 |             selectIcon: function (e) {
222 |                 this.selected = e.currentTarget.getAttribute('data-index')
223 |                 let obj = {
224 |                     title: this.title,
225 |                     icon: e.currentTarget.getAttribute('data-icon'),
226 |                     description: this.description
227 |                 }
228 |                 drag.$emit("changeInfo", obj)
229 |             },
230 |             changeInfo: function () {
231 |                 let obj = {
232 |                     title: this.title,
233 |                     icon: this.icons[this.selected].value,
234 |                     description: this.description
235 |                 }
236 |                 drag.$emit("changeInfo", obj)
237 |             }
238 |         }
239 |     }
240 | </script>
241 | 


--------------------------------------------------------------------------------
/src/components/headActions.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="head-actions" v-bind:class="{disabled:isdisable}">
 3 |         <button class="wf-button wf-button-green">预览</button>
 4 |         <button @click="save" class="wf-button wf-button-cyan">保存</button>
 5 |         <button class="wf-button wf-button-blue">保存并启用</button>
 6 |     </div>
 7 | </template>
 8 | <script>
 9 |     export default{
10 |         name: "head-actions",
11 |         data: function () {
12 |             return {
13 |                 isdisable: false
14 |             }
15 |         },
16 |         methods: {
17 |             save: function () {
18 |                 drag.$emit('save')
19 |             }
20 |         }
21 |     }
22 | </script>
23 | 


--------------------------------------------------------------------------------
/src/components/header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="wf-header">
 3 |         <div class="head-title">
 4 |             <a href="javascript:;">
 5 |                 <img class="navbar-logo" src="//gtms01.alicdn.com/tps/i1/TB17dLlLXXXXXXAXVXX4e0PNFXX-336-78.png"
 6 |                      alt="返回审批管理" data-reactid=".0.0.0.0.0">
 7 |                 <span class="navbar-head">设计器</span>
 8 |             </a>
 9 |         </div>
10 |         <headactions></headactions>
11 |     </div>
12 | </template>
13 | <script type="text/ecmascript-6">
14 |     import headactions from "@/components/headActions"
15 |     export default{
16 |         name: 'header',
17 |         data(){
18 |             return {}
19 |         },
20 |         components:{
21 |             headactions
22 |         }
23 |     }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/src/components/mainLeft.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="wf-panel wf-widgetspanel">
  3 |         <div class="wf-panel-tab">
  4 |             <a href="javascript:;" class="tabitem current">控件</a>
  5 |         </div>
  6 |         <div class="wf-panel-body">
  7 |             <div v-for="(item,index) in components"
  8 |                  class="wf-widgetsitem" v-bind:data-index="index" v-bind:data-type="item.componentName"
  9 |                  v-on:mousedown="start">
 10 |                 <label>
 11 |                     {{item.name}}
 12 |                 </label>
 13 |                 <i class="widgeticon" v-bind:class="item.componentName"></i>
 14 |             </div>
 15 | 
 16 |         </div>
 17 |     </div>
 18 |     </div>
 19 | </template>
 20 | <script type="text/ecmascript-6">
 21 |     export default {
 22 |         name: 'mainleft',
 23 |         data(){
 24 |             return {
 25 |                 components: [
 26 |                     {
 27 |                         name: '单行输入框',
 28 |                         defaultLable: '单行输入框',
 29 |                         defaultProps: '请输入',
 30 |                         defaultImportant: false,
 31 |                         defaultPrint: false,
 32 |                         componentName: 'textfield',
 33 |                         supportSetting: ['label', 'placeholder', 'required', 'important', 'print']
 34 |                     },
 35 |                     {
 36 |                         name: '多行输入框',
 37 |                         defaultLable: '多行输入框',
 38 |                         defaultProps: '请输入',
 39 |                         defaultImportant: false,
 40 |                         defaultPrint: false,
 41 |                         componentName: 'textareafield',
 42 |                         supportSetting: ['label', 'placeholder', 'required', 'important', 'print']
 43 |                     },
 44 |                     {
 45 |                         name: '数字输入框',
 46 |                         defaultLable: '数字输入框',
 47 |                         defaultProps: '请输入',
 48 |                         defaultImportant: false,
 49 |                         defaultPrint: false,
 50 |                         componentName: 'numberfield',
 51 |                         supportSetting: ['label', 'placeholder', 'required', 'important', 'print', 'uint']
 52 |                     },
 53 |                     {
 54 |                         name: '单选框',
 55 |                         defaultLable: '单选框',
 56 |                         defaultProps: '请选择',
 57 |                         defaultImportant: false,
 58 |                         defaultSync: false,
 59 |                         defaultPrint: false,
 60 |                         defaultOptions: [
 61 |                             {idx: 1, text: '选项1'},
 62 |                             {idx: 2, 'text': '选项2'},
 63 |                             {idx: 3, text: '选项3'}
 64 |                         ],
 65 |                         componentName: 'ddselectfield',
 66 |                         supportSetting: ['label', 'placeholder', 'options', 'sync', 'required', 'important', 'print']
 67 |                     },
 68 |                     {
 69 |                         name: '多选框',
 70 |                         defaultLable: '多选框',
 71 |                         defaultProps: '请选择',
 72 |                         defaultImportant: false,
 73 |                         defaultPrint: false,
 74 |                         defaultOptions: [
 75 |                             {idx: 1, text: '选项1'},
 76 |                             {idx: 2, 'text': '选项2'},
 77 |                             {idx: 3, text: '选项3'}
 78 |                         ],
 79 |                         componentName: 'ddmultiselectfield',
 80 |                         supportSetting: ['label', 'placeholder', 'options', 'required', 'important', 'print']
 81 |                     },
 82 |                     {
 83 |                         name: '日期',
 84 |                         defaultLable: '日期',
 85 |                         defaultProps: '请选择',
 86 |                         defaultImportant: false,
 87 |                         defaultPrint: false,
 88 |                         defaultFormat: 'yyyy-MM-dd',
 89 |                         componentName: 'dddatefield',
 90 |                         supportSetting: ['label', 'placeholder', 'dateformat', 'required', 'important', 'print']
 91 |                     },
 92 |                     {
 93 |                         name: '日期区间',
 94 |                         defaultLable: '开始时间',
 95 |                         defaultLable2: '结束时间',
 96 |                         defaultProps: '请选择',
 97 |                         defaultProps2: '请选择',
 98 |                         defaultImportant: false,
 99 |                         defaultPrint: false,
100 |                         defaultAutorekonTime: false,
101 |                         defaultFormat: 'yyyy-MM-dd',
102 |                         defaultSubtitle: '时长',
103 |                         componentName: 'dddaterangefield',
104 |                         supportSetting: [
105 |                             'label',
106 |                             'label2',
107 |                             'placeholder',
108 |                             'placeholder2',
109 |                             'dateformat',
110 |                             'required',
111 |                             'important',
112 |                             'autorekonTime',
113 |                             'subtitle',
114 |                             'print']
115 |                     },
116 |                     {
117 |                         name: '图片',
118 |                         defaultLable: '图片',
119 |                         defaultImportant: false,
120 |                         defaultPrint: false,
121 |                         componentName: 'ddphotofield',
122 |                         supportSetting: ['label', 'required', 'important', 'print']
123 |                     },
124 |                     {
125 |                         name: '明细',
126 |                         defaultLable: '明细',
127 |                         defaultAction: '增加明细',
128 |                         components: [],
129 |                         selected:null,
130 |                         defaultPrint: false,
131 |                         InTableCanvas:null,
132 |                         componentName: 'tablefield',
133 |                         supportSetting: ['label', 'action', 'required']
134 |                     },
135 |                     {
136 |                         name: '说明文字',
137 |                         defaultLable: '说明文字',
138 |                         defaultImportant: false,
139 |                         defaultProps: '请输入说明文字',
140 |                         defaultShow: false,
141 |                         defaultPrint: false,
142 |                         defaultHref: '',
143 |                         componentName: 'textnote',
144 |                         supportSetting: ['textnote', 'required', 'href', 'print', 'show', 'important']
145 |                     },
146 |                     {
147 |                         name: '金额',
148 |                         defaultLable: '金额（元）',
149 |                         defaultProps: '请输入',
150 |                         defaultImportant: false,
151 |                         defaultTranslate: false,
152 |                         defaultPrint: false,
153 |                         componentName: 'moneyfield',
154 |                         supportSetting: ['label', 'placeholder', 'translate', 'required', 'important', 'print']
155 |                     },
156 |                     {
157 |                         name: '附件',
158 |                         defaultLable: '附件',
159 |                         defaultImportant: false,
160 |                         defaultPrint: false,
161 |                         componentName: 'ddattachment',
162 |                         supportSetting: ['label', 'required', 'important', 'print']
163 |                     },
164 |                     {
165 |                         name: '外部联系人',
166 |                         defaultLable: '外部联系人',
167 |                         defaultProps: '请选择',
168 |                         defaultPrint: false,
169 |                         defaultImportant: false,
170 |                         componentName: 'externalcontactfield',
171 |                         supportSetting: ['label', 'placeholder', 'required', 'important', 'print']
172 |                     }
173 |                 ]
174 |             }
175 |         },
176 |         methods: {
177 |             start: function (e) {
178 |                 let obj = {}
179 |                 let dom = e.currentTarget
180 |                 let index = dom.getAttribute('data-index')
181 |                 let actualLeft = dom.offsetLeft;
182 |                 let current = dom.offsetParent;
183 |                 let actualTop = dom.offsetTop;
184 |                 while (current !== null) {
185 |                     actualLeft += current.offsetLeft;
186 |                     actualTop += current.offsetTop;
187 |                     current = current.offsetParent;
188 |                 }
189 |                 obj.componentName = dom.getAttribute("data-type")
190 |                 obj.componentText = dom.querySelector('label').innerText
191 |                 obj.clientX = e.clientX
192 |                 obj.clientY = e.clientY
193 |                 obj.isstart = true
194 |                 obj.componentView = this.components[index]
195 |                 console.log(obj)
196 |                 drag.$emit("movestart", obj)
197 |             }
198 |         }
199 |     }
200 | </script>
201 | 


--------------------------------------------------------------------------------
/src/components/setting.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="wf-panel wf-settingpanel">
 3 |         <div class="wf-panel-tab">
 4 |             <a href="javascript:;" @click="clickTab" data-tabname="component" class="tabitem"
 5 |                v-bind:class="[component?'current':'']">控件设置</a>
 6 |             <a href="javascript:;" @click="clickTab" data-tabname="form" class="tabitem "
 7 |                v-bind:class="[component?'':'current']">审批设置</a>
 8 |         </div>
 9 |         <formsetting v-show="!component"></formsetting>
10 |         <widgetsettings v-show="component"></widgetsettings>
11 |     </div>
12 | 
13 | </template>
14 | <script type="text/ecmascript-6">
15 |     import formsetting from "@/components/formsetting"
16 |     import widgetsettings from "@/components/widgetsettings"
17 |     export default{
18 |         name: 'setting',
19 |         data(){
20 |             return {
21 |                 component: false
22 |             }
23 |         },
24 |         components: {
25 |             formsetting,
26 |             widgetsettings
27 |         },
28 |         methods: {
29 |             clickTab: function (e) {
30 |                 if (e.currentTarget.getAttribute('data-tabName') === 'component') {
31 |                     this.component = true
32 |                 } else {
33 |                     this.component = false
34 |                 }
35 |             }
36 |         },
37 |         created: function () {
38 |             let self = this
39 |             drag.$on("changeTab", function (bool) {
40 |                 self.component = bool
41 |             })
42 |            /* drag.$on("selectComponent", function (obj) {
43 |                 self.supportSetting = Object.assign({}, self.supportSetting, obj)
44 |                 console.log(self.supportSetting)
45 |             })*/
46 |         }
47 |     }
48 | </script>
49 | 


--------------------------------------------------------------------------------
/src/components/widgetsettings.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="wf-form wf-widgetsettings">
  3 |         <div v-if="supportSetting.label" class="wf-field wf-setting-label">
  4 |             <div class="fieldname">
  5 |                 <span>标题</span>
  6 |                 <span class="fieldinfo">最多10个字</span>
  7 |             </div>
  8 |             <div class="fieldblock">
  9 |                 <input type="text" @input="changeComponent" maxlength="10" v-model="supportSetting.defaultLable">
 10 |             </div>
 11 |         </div>
 12 |         <div v-if="supportSetting.label2" class="wf-field wf-setting-label">
 13 |             <div class="fieldname">
 14 |                 <span>标题2</span>
 15 |                 <span class="fieldinfo">最多10个字</span>
 16 |             </div>
 17 |             <div class="fieldblock">
 18 |                 <input type="text" @input="changeComponent" maxlength="10" v-model="supportSetting.defaultLable2">
 19 |             </div>
 20 |         </div>
 21 |         <div v-if="supportSetting.action" class="wf-field wf-setting-label">
 22 |             <div class="fieldname">
 23 |                 <span>动作名称</span>
 24 |                 <span class="fieldinfo">最多10个字</span>
 25 |             </div>
 26 |             <div class="fieldblock">
 27 |                 <input type="text" @input="changeComponent" maxlength="10" v-model="supportSetting.defaultAction">
 28 |             </div>
 29 |         </div>
 30 |         <div v-if="supportSetting.textnote" class="wf-field wf-setting-content">
 31 |             <div class="fieldname">
 32 |                 <span>说明文字</span>
 33 |                 <span class="fieldinfo">最多5000个字</span>
 34 |             </div>
 35 |             <div class="fieldblock">
 36 |                 <textarea type="text" @input="changeComponent" maxlength="5000" v-model="supportSetting.defaultProps">
 37 |                     请输入说明文字
 38 |                 </textarea>
 39 |             </div>
 40 |         </div>
 41 |         <div v-if="supportSetting.placeholder" class="wf-field wf-setting-placeholder">
 42 |             <div class="fieldname">
 43 |                 <span>提示文字</span>
 44 |                 <span class="fieldinfo">最多20个字</span>
 45 |             </div>
 46 |             <div class="fieldblock">
 47 |                 <input type="text" @input="changeComponent" maxlength="20" v-model="supportSetting.defaultProps">
 48 |             </div>
 49 |         </div>
 50 |         <div v-if="supportSetting.placeholder2" class="wf-field wf-setting-placeholder">
 51 |             <div class="fieldname">
 52 |                 <span>提示文字</span>
 53 |                 <span class="fieldinfo">最多20个字</span>
 54 |             </div>
 55 |             <div class="fieldblock">
 56 |                 <input type="text" @input="changeComponent" maxlength="20" v-model="supportSetting.defaultProps2">
 57 |             </div>
 58 |         </div>
 59 |         <div v-if="supportSetting.href" class="wf-field wf-setting-display">
 60 |             <div class="fieldname">
 61 |                 <span>可以输入链接跳转地址</span>
 62 |             </div>
 63 |             <div class="fieldblock">
 64 |                 <textarea type="text" @input="changeComponent"  v-model="supportSetting.defaultHref">
 65 |                 </textarea>
 66 |             </div>
 67 |         </div>
 68 |         <div v-if="supportSetting.dateformat" class="wf-field wf-setting-placeholder">
 69 |             <div class="fieldname">
 70 |                 <span>日期类型</span>
 71 |             </div>
 72 |             <div class="fieldname">
 73 |                 <label class="fieldblock">
 74 |                     <input type="radio" name="dateformat" v-model="supportSetting.defaultFormat"
 75 |                            value="yyyy-MM-dd HH:mm">
 76 |                     <span class="verticalmiddle">年-月-日 时:分</span>
 77 |                 </label>
 78 |                 <label class="fieldblock">
 79 |                     <input type="radio" name="dateformat" v-model="supportSetting.defaultFormat" value="yyyy-MM-dd">
 80 |                     <span class="verticalmiddle">年-月-日</span>
 81 |                 </label>
 82 |             </div>
 83 |         </div>
 84 |         <div v-if="supportSetting.uint" class="wf-field wf-setting-placeholder">
 85 |             <div class="fieldname">
 86 |                 <span>单位</span>
 87 |                 <span class="fieldinfo">最多20个字</span>
 88 |             </div>
 89 |             <div class="fieldblock">
 90 |                 <input type="text" @input="changeComponent" v-model="supportSetting.defaulUint">
 91 |             </div>
 92 |         </div>
 93 |         <div v-if="supportSetting.defaultOptions" class="wf-field wf-setting-options">
 94 |             <div class="fieldname">
 95 |                 <span>选项</span>
 96 |                 <span class="fieldinfo">最多200项,每项最多20个字</span>
 97 |             </div>
 98 |             <div
 99 |                 v-bind:class="{limitdel:supportSetting.defaultOptions.length<=1,limitadd:supportSetting.defaultOptions.length>=200}">
100 |                 <div v-for="(n,index) in supportSetting.defaultOptions" class="fieldblock wf-setting-options">
101 |                     <input type="text" maxlength="20" v-model="n.text">
102 |                     <a @click="del" v-bind:data-index="index" class="action action-del">
103 |                         <i class="icon icon-minus"></i>
104 |                     </a>
105 |                     <a @click="add" v-bind:data-index="index" class="action action-add">
106 |                         <i class="icon icon-plus"></i>
107 |                     </a>
108 |                 </div>
109 |             </div>
110 |         </div>
111 |         <div v-if="supportSetting.important" class="wf-field wf-setting-required">
112 |             <div class="fieldname">验证</div>
113 |             <label class="fieldblock">
114 |                 <input type="checkbox" @change="changeComponent" value="1"
115 |                        v-model="supportSetting.defaultImportant">
116 |                 <span class="verticalmiddle">必填</span>
117 |             </label>
118 |         </div>
119 |         <div v-if="supportSetting.translate" class="wf-field wf-setting-conformat">
120 |             <div class="fieldname">大写</div>
121 |             <label class="fieldblock">
122 |                 <input type="checkbox" @change="changeComponent" value="1"
123 |                        v-model="supportSetting.defaultTranslate">
124 |                 <span class="verticalmiddle">显示大写</span>
125 |                 <span class="verticalmiddle fieldinfo">（数字输入后自动显示大写）</span>
126 |             </label>
127 |         </div>
128 |         <div v-if="supportSetting.autorekonTime" class="wf-field-group">
129 |             <div class="wf-field">
130 |                 <div class="fieldname">自动计算时长</div>
131 |             </div>
132 |             <div class="wf-field wf-setting-duration">
133 |                 <label class="fieldblock">
134 |                     <input type="checkbox" @change="changeComponent" value="1"
135 |                            v-model="supportSetting.defaultAutorekonTime">
136 |                     <span class="verticalmiddle">开启</span>
137 |                 </label>
138 |             </div>
139 |             <div class="wf-setting-duration-label" v-if="supportSetting.defaultAutorekonTime">
140 |                 <div class="wf-field wf-setting-label">
141 |                     <div class="fieldname">
142 |                         <span>标题</span>
143 |                         <span class="fieldinfo">最多10个字</span>
144 |                     </div>
145 |                     <div class="fieldblock">
146 |                         <input type="text" maxlength="10" v-model="supportSetting.defaultSubtitle">
147 |                     </div>
148 |                 </div>
149 |             </div>
150 | 
151 |         </div>
152 |         <div v-if="supportSetting.sync" class="wf-field wf-setting-required">
153 |             <div class="fieldname">同步到考勤</div>
154 |             <label class="fieldblock">
155 |                 <input type="checkbox" @change="changeComponent" value="1"
156 |                        v-model="supportSetting.defaultSync">
157 |                 <span class="verticalmiddle">开启</span>
158 |             </label>
159 | 
160 |         </div>
161 |         <div v-if="supportSetting.print" class="wf-field wf-setting-print">
162 |             <div class="fieldname">打印</div>
163 |             <label class="fieldblock">
164 |                 <input type="checkbox"  @change="changeComponent" value="1" v-model="supportSetting.defaultPrint">
165 |                 <span class="verticalmiddle">参与打印</span>
166 |                 <span class="verticalmiddle">（如不勾选打印时，不显示此项）</span>
167 |             </label>
168 |         </div>
169 |     </div>
170 | </template>
171 | <script>
172 |     export default{
173 |         data: function () {
174 |             return {
175 |                 supportSetting: {}
176 |             }
177 |         },
178 |         methods: {
179 |             add: function (e) {
180 |                 e.stopPropagation()
181 |                 e.preventDefault()
182 |                 let index = e.currentTarget.getAttribute('data-index');
183 |                 for (let i = 0, l = this.supportSetting.defaultOptions.length; i < l; i++) {
184 |                     let has = false;
185 |                     for (let item in this.supportSetting.defaultOptions) {
186 |                         if (this.supportSetting.defaultOptions[item].idx == (i + 1)) {
187 |                             has = true
188 |                         }
189 |                     }
190 |                     if (!has) {
191 |                         this.supportSetting.defaultOptions.splice((+index + 1), 0, {idx: i + 1, text: '选项' + (i + 1)})
192 |                         return
193 |                     }
194 |                 }
195 |                 if (index == this.supportSetting.defaultOptions.length - 1) {
196 |                     this.supportSetting.defaultOptions.push({
197 |                         idx: (this.supportSetting.defaultOptions.length + 1),
198 |                         text: '选项' + (this.supportSetting.defaultOptions.length + 1)
199 |                     })
200 |                 } else {
201 |                     this.supportSetting.defaultOptions.splice((+index + 1), 0, {
202 |                         idx: (this.supportSetting.defaultOptions.length + 1),
203 |                         text: '选项' + (this.supportSetting.defaultOptions.length + 1)
204 |                     })
205 |                 }
206 |             },
207 |             del: function (e) {
208 |                 e.stopPropagation()
209 |                 e.preventDefault()
210 |                 let index = e.currentTarget.getAttribute('data-index');
211 |                 this.supportSetting.defaultOptions.splice(index, 1)
212 |             },
213 |             changeComponent: function () {
214 |                 drag.$emit("changeComponent", this.supportSetting);
215 |             }
216 |         },
217 | 
218 |         created: function () {
219 |             let self = this
220 |             drag.$on("selectComponent", function (obj) {
221 |                 self.supportSetting = {}
222 |                 for (let i = 0; i < obj.supportSetting.length; i++) {
223 |                     self.supportSetting[obj.supportSetting[i]] = true
224 |                 }
225 |                 self.supportSetting = Object.assign({}, self.supportSetting, obj)
226 |             })
227 |         },
228 |         updated: function () {
229 |         }
230 |     }
231 | </script>
232 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | 
 6 | Vue.config.productionTip = false
 7 | window.drag = new Vue();
 8 | 
 9 | /* eslint-disable no-new */
10 | new Vue({
11 |     el: '#app',
12 |     template: '<App/>',
13 |     components: {App}
14 | })
15 | 


--------------------------------------------------------------------------------
/src/style/design.css:
--------------------------------------------------------------------------------
   1 | html,
   2 | body,
   3 | div,
   4 | span,
   5 | applet,
   6 | object,
   7 | iframe,
   8 | h1,
   9 | h2,
  10 | h3,
  11 | h4,
  12 | h5,
  13 | h6,
  14 | p,
  15 | blockquote,
  16 | pre,
  17 | a,
  18 | abbr,
  19 | acronym,
  20 | address,
  21 | big,
  22 | cite,
  23 | code,
  24 | del,
  25 | dfn,
  26 | em,
  27 | img,
  28 | ins,
  29 | kbd,
  30 | q,
  31 | s,
  32 | samp,
  33 | small,
  34 | strike,
  35 | strong,
  36 | sub,
  37 | sup,
  38 | tt,
  39 | var,
  40 | b,
  41 | u,
  42 | i,
  43 | center,
  44 | dl,
  45 | dt,
  46 | dd,
  47 | ol,
  48 | ul,
  49 | li,
  50 | fieldset,
  51 | form,
  52 | label,
  53 | legend,
  54 | table,
  55 | caption,
  56 | tbody,
  57 | tfoot,
  58 | thead,
  59 | tr,
  60 | th,
  61 | td,
  62 | article,
  63 | aside,
  64 | canvas,
  65 | details,
  66 | figcaption,
  67 | figure,
  68 | footer,
  69 | header,
  70 | hgroup,
  71 | menu,
  72 | nav,
  73 | section,
  74 | summary,
  75 | time,
  76 | mark,
  77 | audio,
  78 | video {
  79 |   margin: 0;
  80 |   padding: 0;
  81 |   border: 0;
  82 |   outline: 0;
  83 |   font-size: 100%;
  84 |   vertical-align: baseline;
  85 |     -webkit-user-select: none; /* Chrome, Opera, Safari */
  86 |     -moz-user-select: none; /* Firefox 2+ */
  87 |     -ms-user-select: none; /* IE 10+ */
  88 |     user-select: none; /* Standard syntax */
  89 | }
  90 | *,
  91 | *:before,
  92 | *:after {
  93 |   -webkit-box-sizing: border-box;
  94 |   -moz-box-sizing: border-box;
  95 |   box-sizing: border-box;
  96 | }
  97 | html {
  98 |   font-family: sans-serif; /* 1 */
  99 |   -ms-text-size-adjust: 100%; /* 2 */
 100 |   -webkit-text-size-adjust: 100%; /* 2 */
 101 | }
 102 | body {
 103 |   font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "STHeitiSC-Light", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
 104 |   font-size: 14px;
 105 |   line-height: 1;
 106 |   background-color: #fff;
 107 |   position: static !important;
 108 | }
 109 | ul,
 110 | ol {
 111 |   list-style-type: none;
 112 | }
 113 | b,
 114 | strong {
 115 |   font-weight: bold;
 116 | }
 117 | img {
 118 |   border: 0;
 119 | }
 120 | button,
 121 | input,
 122 | select,
 123 | textarea {
 124 |   font-family: inherit;
 125 |   font-size: 100%;
 126 |   margin: 0;
 127 | }
 128 | a {
 129 |   text-decoration: none;
 130 |   cursor: pointer;
 131 | }
 132 | a:active,
 133 | a:hover {
 134 |   outline: 0;
 135 | }
 136 | @font-face {
 137 |   font-family: 'iconfont';
 138 |   src: url("//at.alicdn.com/t/font_1449632746_779643.eot");
 139 |   src: url("//at.alicdn.com/t/font_1449632746_779643.eot?#iefix") format('embedded-opentype'), url("//at.alicdn.com/t/font_1449632746_779643.woff") format('woff'), url("//at.alicdn.com/t/font_1449632746_779643.ttf") format('truetype'), url("//at.alicdn.com/t/font_1449632746_779643.svg#iconfont") format('svg');
 140 | }
 141 | .icon {
 142 |   font-family: "iconfont" !important;
 143 |   font-size: 16px;
 144 |   font-style: normal;
 145 |   vertical-align: middle;
 146 |   -webkit-font-smoothing: antialiased;
 147 |   -webkit-text-stroke-width: 0.2px;
 148 |   -moz-osx-font-smoothing: grayscale;
 149 | }
 150 | .icon-selected:before {
 151 |   content: "\e600";
 152 | }
 153 | .icon-checked:before {
 154 |   content: "\e60b";
 155 | }
 156 | .icon-add:before {
 157 |   content: "\e604";
 158 | }
 159 | .icon-del:before {
 160 |   content: "\e602";
 161 | }
 162 | .icon-remove:before {
 163 |   content: "\e605";
 164 | }
 165 | .icon-close:before {
 166 |   content: "\e603";
 167 | }
 168 | .icon-error:before {
 169 |   content: "\e601";
 170 | }
 171 | .icon-success:before {
 172 |   content: "\e600";
 173 | }
 174 | .icon-plus:before {
 175 |   content: "\e608";
 176 | }
 177 | .icon-minus:before {
 178 |   content: "\e609";
 179 | }
 180 | .icon-camera:before {
 181 |   content: "\e606";
 182 | }
 183 | .icon-enter:before {
 184 |   content: "\e607";
 185 | }
 186 | .icon-chakanfujian:before {
 187 |   content: "\e60d";
 188 | }
 189 | .widgeticon {
 190 |   background: url("//gw.alicdn.com/tps/TB17MD0LFXXXXXFXFXXXXXXXXXX-24-300.png") no-repeat;
 191 |   height: 24px;
 192 |   width: 24px;
 193 |   display: inline-block;
 194 | }
 195 | .widgeticon.textfield {
 196 |   background-position: 0 -24px;
 197 | }
 198 | .widgeticon.textareafield {
 199 |   background-position: 0 0;
 200 | }
 201 | .widgeticon.ddselectfield {
 202 |   background-position: 0 -48px;
 203 | }
 204 | .widgeticon.dddatefield {
 205 |   background-position: 0 -72px;
 206 | }
 207 | .widgeticon.dddaterangefield {
 208 |   background-position: 0 -96px;
 209 | }
 210 | .widgeticon.numberfield {
 211 |   background-position: 0 -120px;
 212 | }
 213 | .widgeticon.ddphotofield {
 214 |   background-position: 0 -144px;
 215 | }
 216 | .widgeticon.tablefield {
 217 |   background-position: 0 -168px;
 218 | }
 219 | .widgeticon.externalcontactfield {
 220 |   background: url("https://gw.alicdn.com/tps/TB13a6_PpXXXXaOXFXXXXXXXXXX-24-24.png");
 221 | }
 222 | .widgeticon.ddattachment {
 223 |   background-position: 0 -192px;
 224 | }
 225 | .widgeticon.textnote {
 226 |   background-position: 0 -216px;
 227 | }
 228 | .widgeticon.moneyfield {
 229 |   background-position: 0 -240px;
 230 | }
 231 | .widgeticon.ddmultiselectfield {
 232 |   background-position: 0 -264px;
 233 | }
 234 | @-webkit-keyframes spining {
 235 |   from {
 236 |     -webkit-transform: rotate(0deg);
 237 |   }
 238 |   to {
 239 |     -webkit-transform: rotate(360deg);
 240 |   }
 241 | }
 242 | .wf-button {
 243 |   margin: 0 5px;
 244 |   border: none;
 245 |   border-radius: 2px;
 246 |   padding: 4px 23px;
 247 |   color: #fff;
 248 |   font-size: 12px;
 249 |   outline: none;
 250 |   cursor: pointer;
 251 |   line-height: normal;
 252 | }
 253 | .wf-button.wf-button-blue {
 254 |   background: #3f9af9;
 255 | }
 256 | .wf-button.wf-button-blue:hover {
 257 |   background: #2786e8;
 258 | }
 259 | .wf-button.wf-button-cyan {
 260 |   background: #5db4cf;
 261 | }
 262 | .wf-button.wf-button-cyan:hover {
 263 |   background: #429dba;
 264 | }
 265 | .wf-button.wf-button-green {
 266 |   background: #41b543;
 267 | }
 268 | .wf-button.wf-button-green:hover {
 269 |   background: #39a03b;
 270 | }
 271 | .wf-button.wf-button-white {
 272 |   color: #fff;
 273 |   background: #aaa;
 274 | }
 275 | .wf-button.wf-button-white:hover {
 276 |   color: #fff;
 277 |   background: #f90;
 278 | }
 279 | .wf-storyboard {
 280 |   overflow: visible;
 281 |   position: fixed;
 282 |   top: 0;
 283 |   right: 0;
 284 |   left: 0;
 285 |   bottom: 0;
 286 |   pointer-events: none;
 287 |   z-index: 999;
 288 | }
 289 | .wf-storyboard.mask {
 290 |   pointer-events: auto;
 291 |   background: rgba(0,0,0,0.2);
 292 | }
 293 | .wf-spinning {
 294 |   background-repeat: no-repeat;
 295 |   background-position: center;
 296 |   background-image: url("data:image/gif;base64,R0lGODlhIAAgAOZHAPn5+fPz8+zs7P7+/u/v7/f39+np6f9mAPT09PHx8efn5/b29u7u7urq6vv7+//ZwP/28P9vEP+zgPCugfiGOf/PsP/j0PKmc/eOR/+WUOfe1//s4P1uDv+fYP+MQP+8kOzGrO2+nu+2j/vx6/SeZP+CMP/GoPyJPP2xfvrUu/p+K/27jvqHO/95IOrOuvTEpPTXxPqaW/bZxvmsefque/rBm/Tr5PLMs/SxhOnWyfbPtviiaft/LO3Hrurh2vt2HPWWVvzWvPrey/zfzP7Xvu3Rvubm5v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MDIxQkZGMUVFMjYxMUUzQkYzN0ZGQzRENzlGRDZEMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MDIxQkZGMkVFMjYxMUUzQkYzN0ZGQzRENzlGRDZEMyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwMjFCRkVGRUUyNjExRTNCRjM3RkZDNEQ3OUZENkQzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQwMjFCRkYwRUUyNjExRTNCRjM3RkZDNEQ3OUZENkQzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkECQAARwAsAAAAACAAIAAAB/+AR4KDhIWGh4iGAwABAo6PAQADiZQLBkaYmZoGC5SGCJeaopsInkcDCZoNAQUArgAFAQ2aCZOJBJkCAJQAApkEt5kBpoIBwocFx8TFRhogQRCEAwqYwMuDBBgHBxmExkYGttdHD9vbD4OhBeODFuYHFoLJRg3shB/bE+tHqUal9oMQYEogyJeRXQAFAcAkQFCmhIQeHpEIcSImhxcrWjSCkaNGiQYRJlxopCE/TP8SCjRC8Mg8kwkN7jtCzYiDhA4wKfDGMCamToOmYRrG7psBQ/OMAF22IJNIQriqLYtqhOghqgxuJnLA4JenlZgYFBB3qkDXTCl5hRo1ysBTTwMRAtRka0RBALLLFlH9JUkjwEAAIfkECQAARwAsAAAAACAAIAAAB/+AR4KDhIWGh4iGAwABAo6PAQADiZQLBkaYmZoGC5SGCJeaopsInkcDCZoNAQUArgAFAQ2aCZOJBJkCAJQAApkEt5kBpoIBwocFx8TFmbuEAwqYwMuDuEYGtszX2dQDocODoQXUhcnXg+YN5IazRuNHqUal64QImAmCvkbO9IIjFxdeCMrUj1CHAwc4WDhCsKAghAglMMTkUFAJiBUmGql4BAIGCiLyYeLXDwAmAYLizStozwi+I+ZQOtT37kg0Iw4KOsCkgJAxIzLp6es0CBomcOR+GjBkzgjRZQuaHbJmZJopqkgNUWWQM5EDBr88tcTEoAC3AQXAZlrJK9SoUQYVSHoaEODmWyMKAnBbtojqL0kc+wUCACH5BAkAAEcALAAAAAAgACAAAAf/gEeCg4SFhoeIhgMAAQKOjwEAA4mUCwZGmJmaBguUhgiXmqKbCJ5HAwmaDQEFAK4ABQENmgmTiQSZAgCUAAKZBLeZAaaCAcKHBcfExZm7hAMKmMDLg7hGBrbM19nUA6HDg6EF1IXJ14PmDeSGs0bjR6lGpeuECJgJgr5GzvSCAJgCBGXqV2jgEYMEBWJSaCThIIMIExrUx6/fPyMB4WGa1w8CjQsh8B0xl7FfhwMHOAgZFM2IA4IoUUoYZAwjQR4xKwyChgkcuQAaMLAwUS5TJ2oLmh2yZmSaKaY+DTFl8DKRAwa/PNnLxKAAtwEFsGbiyCvUqFEGKnoaEKDlWSMKDAJwW7aI6S9JDgkGAgAh+QQJAABHACwAAAAAIAAgAAAH/4BHgoOEhYaHiIYDAAECjo8BAAOJlAsGRpiZmgYLlIYIl5qimwieRwMJmg0BBQCuAAUBDZoJk4kEmQIAlAACmQS3mQGmggHChwXHxMWZu4QDCpjAy4O4Rga2zNfZ1AOhw4OhBdSFydeD5g3khrNG40epRqXrhAiYCYK+Rs70ggCYAgRl6ldo4BGDBAViUmgk4SCDCBMa1Mev3z8jAeFhmkfQnhF8R8xlJKjv3ZFoRhwQdIBJASFjGEli6jQIGiZw5GAaMGTOCE1iEjxQyLHvkDUj0zxVOMBUBU5DRxmoTORgBlOmnjxiYlCA24ACDIy44MC0gykAoUaNKiLhw7IBARBQqjWiIAC3twCO/pLkkGAgACH5BAkAAEcALAAAAAAgACAAAAf/gEeCg4SFhoeIhgMAAQKOjwEAA4mUCwZGmJmaBguUhgiXmqKbCJ5HAwmaDQEFAK4ABQENmgmTiQSZAgCUAAKZBLeZAaaCAcKHBcfExZm7hAMKmMDLg7hGBrbM19nUA6HDg6EF1IXJ14PmDeSGs0bjR6lGpeuECJgJgr5GzvSCAJgCBGXqV2jgEYMEBWJSaCThIIMIExrUx6/fPyMB4WGaR9CeEXxHzGUkqO/dkWhGHBB0gEkBIWMYSWLqNAgaJnDkYBowZM4IzWULmh2yZmSaKaI4DRFloDKRAwa/PHnExKBANggRDkTQkIkjr1CjMBwYi+FaRU8DAqDURGHsARYBE7gtW0TUCAgOWh84NLThwQZPgQAAIfkECQAARwAsAAAAACAAIAAAB/+AR4KDhIWGh4iGAwABAo6PAQADiZQLBkaYmZoGC5SGCJeaopsInkcDCZoNAQUArgAFAQ2aCZOJBJkCAJQAApkEt5kBpoIBwocFx8TFmbuEAwqYwMuDuEYGtszX2dQDocODoQXUhcnXg+YN5IazRuNHqUal64QImAmCvkbO9IIAmAIEZepXaOARgwQFYlJoJOEggwgTGtTHr98/IwHhYZpH0J4RfEfMZSSo792RaEYcEHSASQEhYxhJYuo0CBomcORgGjBkzgjNZQuaHbJmZJopojgNEWWgMpEDBr88ecTEIIOHDDULQM3EkVcoEgfCkhh1raKnAQEUUAh7gIIoBQEQuC0bsILthF+SHFaQUGFdIAAh+QQJAABHACwAAAAAIAAgAAAH/4BHgoOEhYaHiIYDAAECjo8BAAOJlAsGRpiZmgYLlIYIl5qimwieRwMJmg0BBQCuAAUBDZoJk4kEmQIAlAACmQS3mQGmggHChwXHxMWZu4QDCpjAy4O4Rga2zNfZ1AOhw4OhBdSFydeD5g3khrNG40epRqXrhAiYCYK+Rs70ggCYAgRl6ldo4BGDBAViUmgk4SCDCBMa1Mev3z8jAeFhmkfQnhF8R8xlJKjv3ZFoRhwQdIBJASFjGEli6jQIGiZw5GAaMGROQ4oHEJYtaHYIF4YDBzIQs2YEpyEdSJESoeSAwS9KFqIecMGgALcBBaxm4pjoA9IJo9IaqOhpQACUaQ6NKAjAbdkipr8kOSQYCAAh+QQJAABHACwAAAAAIAAgAAAH/4BHgoOEhYaHiIYDAAECjo8BAAOJlAsGRpiZmgYLlIYIl5qimwieRwMJmg0BBQCuAAUBDZoJk4kEmQIAlAACmQS3mQGmggHChwXHxMWZu4QDCpjAy4O4Rga2zNfZ1AOhw4OhBdSFydeD5g3khrNG40epRqXrhAiYCYK+Rs70ggCYAgRl6ldo4BGDBAViUmgk4SCDCBMa1Mev3z8jAeFhmkfQnhF8RwqEoHCiQkJ97zZwOHAgwoZ+DjApGPSAJcsH/fR1EgShBcsfNugZO0cIAooLGozsXLag2SFrRqaZggruaSYGDig5YPDLk0dMDApwG1CAayaOvEKNGmWgoqcBAQ+irZUZgNuyRVB/SXJIMBAAIfkECQAARwAsAAAAACAAIAAAB/+AR4KDhIWGh4iGAwABAo6PAQADiZQLBkaYmZoGC5SGCJeaopsInkcDCZoNAQUArgAFAQ2aCZOJBJkCAJQAApkEt5kBpoIBwocFx8TFmbuEAwqYwMuDuEYGtszX2dQDocODoQXUhcnXg+YN5IazRuNHqUal64QImAmCvkbO9IIAmAIETbgwoV+hTEdMHFhowuAghB4WHvDgUBDCDhI7VDyC8MgOCiT49ftnJCA8TPMM2jOC74g5kwb1vTsSzYgDgw4wKSBkrGRMTJ0GQcMEjlxPA4bMGQm6bEGzQ9aMTDMVtaihqAxuJnLA4JenlZgYFOA2oEDXTCl5hRo1yoBITwMRAtRka0RBAG7LFkX9JWljv0AAIfkECQAARwAsAAAAACAAIAAAB/+AR4KDhIWGh4iGAwABAo6PAQADiZQLBkaYmZoGC5SGCJeaopsInkcDCZoNAQUArgAFAQ2aCZOJBJkCAJQAApkEt5kBpoIBwocFx8TFmbuEGz0gRsDLg7hGBrZHEC0HBzja1QOhw4IS3t7VhcnYgyvoEeqFs0YFgglABxEW8oQImAkE+TLirJ8gAJgECMpksBDDIw8bLsQ00YjEQQ8jSnw4sKBBhEYUHkllpJTEf0YCHmEnsuFAe4IUYHLQ0AEmBYSMhXSJqdOgATKNlFOn04AhdkZ8LlvQ7NC1acueDjX0lAHNRA4Y/PKEEhODAuEGFNCayaQnAKFGjTLg0dOAAEEP1RpRECDcskVPf0m62DAQACH5BAkAAEcALAAAAAAgACAAAAf/gEeCg4SFhoeIhgMAAQKOjwEAA4mUCwZGmJmaBguUhBAPKT6apKQGCJ5HGQcHGJgNAQUAswAFAQ2aCZOID6ysNwCUAAKZBIkwvgcWqUcBmQGHBUYTrB/Mgs6YwYQDCpjG14MEmAa72OTm4QOXRtCD7AXhhdJGBoP0DfKGuEbxRwmYUOkjhABTAkHEjGwbKAgAJgGCMjEsJPFIxYkRMWU0gnFQxYsYKyZcyNChEYj/AnYsaOTgEXooJyb0d8SbEQcTHWBSQChbTH0JOw3qhsmdvGz25mUSem1BJpLiil0bVzQRVSMMcCZywEAqJZaYGBRIN6BA10wCPQFgV6qUAaiUEwYEsNnWiIIA6a4tulpMUseJgQAAIfkECQAARwAsAAAAACAAIAAAB/+AR4KDhIWGh4iGDwcHJwKPjwEAA4mVCxGMBxNGnJ0GC5WGCAZGmQcXnalGBgihRwMJnSKMJSMAtwUBDakJlIkEnQIAFg8QhwACnQS/nQGuggHNhwXSz9CdAIUDCpzL1oPAq77X4t+DA6RGzoPpBeaE1KuD8Q3vhbtG7kexRq32gwg4JRCUzEi2f4IAcBIgqBNCQg6PRHwokVNDixQrGrm4MWPEggcRKjTCcB8nfwgDGhl4JF5JhAX1HeFmxAFCB5wUEIpGEiYnUOdorjPH04CheEaAWluA7VA4I95cPR1q6CkDm4kcMFAWSiUnBgXGvSqwtRPKSgDSqVq7KqSrAQERaLI1oiCAWGsDADxVNinjv0AAIfkECQAARwAsAAAAACAAIAAAB/+AR4KDhIVHEBISFYaMjUcDAAECkzEHBxFDA46bCwZGn5+WlhcGC5uGCJ6goCqiIZ8GCKePCasNAQUAACMZHjUNqwmajgSgAgCbAAKgBMSgAbOCAc+MBdTR0qDIhAMKn83Yg8VGBsPZ5ObhA6rQg6oF4YXW5IPzDfGGwEbwR7VGsvgIIfiUQNAyI9sCCgLwSYAgUAoLQTwyMeLDTxeNWBw0saLFiQcTKmRoxGG/TwAjDjRS8Mg8kxEP8jvizYiDiA4+KSA0rWTMT6YGdfvULl5PA4bmGQmKbYE2RuOMgJsVtaihqAxuOnLAgNmplZ8YFEg3oEBXUCmTqVrFFpQBkacTBgSo2VZngHTYIEVlBgDvxnCBAAAh+QQFAABHACwAAAAAIAAgAAAH/4BHgoOEhYaHiIYDAAECjo8BAAOJlAsGRpiZmgYLlIYIl5qimRQHBw+eAwmaDQEFALAABQENE6YHEZOJBJkCAJQotwcEu5kBnkcQJaYiRseGBcbIghAPMpm/hAMKmMTThLxGBrqCAZjj39qhz4KhBemF0eKD8g3whg2Y70erRgj3hRBgSiBIAKZsAAUBwCRAUKaEhR4ekQjRISaLRioOkkixokSDRhAmXGikIT9M/yoKNELwiDyTEEHuO8LNiAOIDjApIGSuZExMnQZtw8QuXU8D0DIF/bYA26FwRrwhg1q0EFQGNxM5YJBJKqKVmBgUIHdkQAGumVJ6AhBq1CgDIhNTBajp1oiCAGS/LYLaVZJGiIEAADs=");
 297 | }
 298 | .wf-popup {
 299 |   position: absolute;
 300 |   pointer-events: auto;
 301 |   overflow: hidden;
 302 |   background: #fff;
 303 |   top: 50%;
 304 |   left: 50%;
 305 |   -webkit-transform: translate(-50%, -50%) scale(0.9);
 306 |   transform: translate(-50%, -50%) scale(0.9);
 307 |   -webkit-transition: -webkit-transform 0.15s ease-out;
 308 |   transition: transform 0.15s ease-out;
 309 | }
 310 | .wf-popup.visible {
 311 |   -webkit-transform: translate(-50%, -50%) scale(1);
 312 |   transform: translate(-50%, -50%) scale(1);
 313 | }
 314 | .wf-popup.wf-preview {
 315 |   top: 150px;
 316 |   -webkit-transform: translate(-50%, -15px);
 317 |   transform: translate(-50%, -15px);
 318 | }
 319 | .wf-popup.wf-preview.visible {
 320 |   -webkit-transform: translate(-50%, 0);
 321 |   transform: translate(-50%, 0);
 322 | }
 323 | .wf-popup.wf-message {
 324 |   background: rgba(0,0,0,0.7);
 325 |   border-radius: 5px;
 326 |   color: #fff;
 327 |   top: 2px;
 328 |   left: 50%;
 329 |   -webkit-transform: translate(-50%, -120%);
 330 |   transform: translate(-50%, -120%);
 331 | }
 332 | .wf-popup.wf-message.visible {
 333 |   -webkit-transform: translate(-50%, 0);
 334 |   transform: translate(-50%, 0);
 335 | }
 336 | .wf-popup input[type="text"],
 337 | .wf-popup textarea {
 338 |   border: 1px solid #ccc;
 339 |   color: #666;
 340 |   padding: 5px 10px;
 341 |   width: 400px;
 342 |   border-radius: 2px;
 343 |   font-size: 12px;
 344 |   outline: none;
 345 | }
 346 | .wf-popup input[type="text"]:focus,
 347 | .wf-popup textarea:focus {
 348 |   border-color: #3f9af9;
 349 | }
 350 | .wf-popup .wf-popup-title {
 351 |   font-size: 20px;
 352 |   font-weight: bold;
 353 |   color: #333;
 354 |   padding: 15px;
 355 |   border-bottom: 1px dashed #ced1d2;
 356 | }
 357 | .wf-popup .wf-popup-content {
 358 |   padding: 20px;
 359 | }
 360 | .wf-popup .wf-popup-actions {
 361 |   margin: 5px 0;
 362 |   text-align: center;
 363 | }
 364 | .wf-loading {
 365 |   position: absolute;
 366 |   text-align: center;
 367 |   font-size: 14px;
 368 |   padding: 15px 30px !important;
 369 |   background: rgba(0,0,0,0.7);
 370 |   overflow: hidden;
 371 |   top: 38%;
 372 |   left: 50%;
 373 |   -webkit-transform: translate(-50%, -50%);
 374 |   transform: translate(-50%, -50%);
 375 |   border-radius: 5px;
 376 |   color: #fff;
 377 | }
 378 | .wf-loading .ani-loading {
 379 |   background: url("//img.alicdn.com/tps/TB1vGw5IFXXXXaQaXXXXXXXXXXX.svg") no-repeat;
 380 |   background-size: contain;
 381 |   height: 30px;
 382 |   width: 30px;
 383 |   display: inline-block;
 384 |   vertical-align: middle;
 385 |   margin-right: 5px;
 386 |   -webkit-animation: spining 1.2s infinite linear;
 387 |   animation: spining 1.2s infinite linear;
 388 | }
 389 | .wf-loading .text {
 390 |   vertical-align: middle;
 391 | }
 392 | .wf-popup-close {
 393 |   position: absolute;
 394 |   right: 8px;
 395 |   top: 8px;
 396 |   font-size: 16px;
 397 |   color: #999;
 398 |   cursor: pointer;
 399 | }
 400 | .wf-popup-close:hover {
 401 |   color: #666;
 402 | }
 403 | .wf-message .wf-popup-close:hover {
 404 |   color: #fff;
 405 | }
 406 | .wf-message .wf-popup-content {
 407 |   text-align: center;
 408 |   font-size: 14px;
 409 |   padding: 15px !important;
 410 | }
 411 | .wf-message .wf-popup-content .icon {
 412 |   margin-right: 5px;
 413 | }
 414 | .wf-message .wf-popup-content .text {
 415 |   vertical-align: middle;
 416 | }
 417 | .wf-message .wf-popup-content.success .icon {
 418 |   color: #39a03b;
 419 | }
 420 | .wf-message .wf-popup-content.error .icon {
 421 |   color: #fda533;
 422 | }
 423 | .wf-confirm .wf-popup-content {
 424 |   padding: 20px;
 425 |   text-align: center;
 426 |   font-size: 14px;
 427 | }
 428 | .wf-confirm .wf-popup-content .icon {
 429 |   margin-right: 5px;
 430 |   color: #fda533;
 431 | }
 432 | .wf-confirm .wf-popup-content .icon-color-green {
 433 |   margin-right: 5px;
 434 |   color: #39a03b;
 435 | }
 436 | .wf-confirm .wf-popup-content .text {
 437 |   vertical-align: middle;
 438 | }
 439 | .wf-confirm .wf-popup-content .detail {
 440 |   color: #ccc;
 441 |   font-size: 12px;
 442 |   margin: 15px 0 5px;
 443 | }
 444 | .wf-confirm .wf-popup-content .wf-popup-actions {
 445 |   margin: 15px 0 5px;
 446 | }
 447 | .wf-field-group {
 448 |   margin: 5px 0 30px;
 449 | }
 450 | .wf-field-group .wf-field {
 451 |   margin: 10px 0 0;
 452 | }
 453 | .wf-field {
 454 |   display: block;
 455 |   margin: 5px 0 30px;
 456 | }
 457 | .wf-field .fieldname {
 458 |   display: block;
 459 |   font-weight: bold;
 460 |   font-size: 12px;
 461 |   color: #666;
 462 |   margin-bottom: 12px;
 463 |   padding-left: 2px;
 464 | }
 465 | .wf-field .fieldname span {
 466 |   font-size: 12px;
 467 | }
 468 | .wf-field .fieldinfo {
 469 |   color: #ccc;
 470 |   font-size: 12px !important;
 471 |   margin-left: 8px;
 472 |   font-weight: normal;
 473 |   opacity: 0.9;
 474 | }
 475 | .wf-field .fieldinfo.error-empty,
 476 | .wf-field .fieldinfo.error-duplicate,
 477 | .wf-field .fieldinfo.error-toolong {
 478 |   color: #ff4500 !important;
 479 | }
 480 | .wf-field .fieldinfo.error-warn {
 481 |   color: #ff8c00 !important;
 482 | }
 483 | .wf-field input[type="text"].error-empty,
 484 | .wf-field input[type="text"].error-duplicate,
 485 | .wf-field input[type="text"].error-toolong {
 486 |   border-color: #ff4500 !important;
 487 | }
 488 | .wf-field input[type="text"].error-warn {
 489 |   border-color: #ff8c00 !important;
 490 | }
 491 | .wf-field .fieldblock {
 492 |   display: block;
 493 |   margin: 5px 0;
 494 |   line-height: normal;
 495 | }
 496 | .wf-field .verticalmiddle {
 497 |   vertical-align: middle;
 498 | }
 499 | .wf-qrcode h2 {
 500 |   text-align: center;
 501 |   font-size: 18px;
 502 |   font-weight: bold;
 503 |   color: #999;
 504 |   margin: 10px 0;
 505 | }
 506 | .wf-qrcode img,
 507 | .wf-qrcode .wf-spinning {
 508 |   display: block;
 509 |   height: 200px;
 510 |   width: 200px;
 511 |   margin: 0 auto;
 512 | }
 513 | .wf-setting-short {
 514 |   height: 200px;
 515 |   overflow-y: auto;
 516 | }
 517 | @-moz-keyframes spining {
 518 |   from {
 519 |     transform: rotate(0deg);
 520 |   }
 521 |   to {
 522 |     transform: rotate(360deg);
 523 |   }
 524 | }
 525 | @-webkit-keyframes spining {
 526 |   from {
 527 |     transform: rotate(0deg);
 528 |   }
 529 |   to {
 530 |     transform: rotate(360deg);
 531 |   }
 532 | }
 533 | @-o-keyframes spining {
 534 |   from {
 535 |     transform: rotate(0deg);
 536 |   }
 537 |   to {
 538 |     transform: rotate(360deg);
 539 |   }
 540 | }
 541 | @keyframes spining {
 542 |   from {
 543 |     transform: rotate(0deg);
 544 |   }
 545 |   to {
 546 |     transform: rotate(360deg);
 547 |   }
 548 | }
 549 | html.wf-cursor-move,
 550 | html.wf-cursor-move * {
 551 |   cursor: move !important;
 552 | }
 553 | body,
 554 | html {
 555 |   display: block;
 556 |   height: 100%;
 557 |   -webkit-box-sizing: border-box;
 558 |   -moz-box-sizing: border-box;
 559 |   box-sizing: border-box;
 560 | }
 561 | body {
 562 |   background: #717171 url("../assets/img/TB1mLf6IpXXXXcQXpXXXXXXXXXX.jpg") no-repeat;
 563 |   background-attachment: fixed;
 564 |   background-position: top center;
 565 |   background-size: cover;
 566 | }
 567 | .browsers-guide {
 568 |   position: absolute;
 569 |   left: 50%;
 570 |   width: 800px;
 571 |   margin-left: -400px;
 572 |   top: 100px;
 573 |   height: auto;
 574 | }
 575 | .browsers-guide .headline {
 576 |   font-family: "PingHei", "Lucida Grande", "Lucida Sans Unicode", "STHeitiSC", "Helvetica", "Arial", "Verdana", "sans-serif";
 577 |   font-size: 24px;
 578 |   font-weight: normal;
 579 |   line-height: 40px;
 580 |   cursor: default;
 581 |   color: #fff;
 582 |   text-align: center;
 583 | }
 584 | .browsers-guide .dock {
 585 |   margin-top: 60px;
 586 |   overflow: hidden;
 587 | }
 588 | .browsers-guide .browser {
 589 |   display: block;
 590 |   float: left;
 591 |   width: 200px;
 592 |   text-align: center;
 593 | }
 594 | .browsers-guide .browser img {
 595 |   border: none;
 596 |   width: 90px;
 597 |   height: 90px;
 598 | }
 599 | .browsers-guide .browser span {
 600 |   display: block;
 601 |   font-size: 14px;
 602 |   margin-top: 30px;
 603 |   padding: 0 10px;
 604 |   height: 30px;
 605 |   line-height: 30px;
 606 |   color: #fff;
 607 | }
 608 | .browsers-guide .browser:hover span {
 609 |   color: #ff4500;
 610 | }
 611 | #body.blur {
 612 |   -webkit-filter: blur(3px);
 613 |   filter: blur(3px);
 614 | }
 615 | #body,
 616 | .wf-wrapper {
 617 |   height: 100%;
 618 | }
 619 | .wf-header {
 620 |   height: 40px;
 621 |   width: 1200px;
 622 |   margin: 0 auto;
 623 |   position: relative;
 624 | }
 625 | .wf-header .head-title {
 626 |   position: absolute;
 627 |   left: 0;
 628 |   color: #fff;
 629 |   font-size: 18px;
 630 |   line-height: 37px;
 631 |   text-align: center;
 632 | }
 633 | .wf-header .head-title-font {
 634 |   font-size: 25px;
 635 |   color: #fff;
 636 |   padding: 0px 10px;
 637 | }
 638 | .wf-header .navbar-single-logo {
 639 |   position: relative;
 640 |   top: 5px;
 641 | }
 642 | .wf-header .head-actions {
 643 |   position: absolute;
 644 |   right: 0;
 645 |   line-height: 37px;
 646 |   height: 37px;
 647 |   padding: 0 5px;
 648 |   text-align: center;
 649 |   background: rgba(0,0,0,0.3);
 650 | }
 651 | .wf-header .head-actions.disabled > .wf-button {
 652 |   background: #aaa !important;
 653 |   pointer-events: none;
 654 | }
 655 | .wf-main {
 656 |   position: fixed;
 657 |   top: 40px;
 658 |   left: 50%;
 659 |   width: 1200px;
 660 |   margin-left: -600px;
 661 |   bottom: 0;
 662 | }
 663 | .navbar-logo {
 664 |   height: 45px;
 665 |   vertical-align: -20px;
 666 | }
 667 | .navbar-head {
 668 |   left: 100%;
 669 |   top: 50%;
 670 |   margin-top: -12px;
 671 |   padding-left: 10px;
 672 |   line-height: 26px;
 673 |   height: 26px;
 674 |   position: absolute;
 675 |   border-left: 1px solid #ccc;
 676 |   color: #fff;
 677 |   max-width: 500px;
 678 |   overflow: hidden;
 679 |   text-overflow: ellipsis;
 680 |   white-space: nowrap;
 681 | }
 682 | .wf-dragging-proxy {
 683 |   position: fixed;
 684 |   pointer-events: none;
 685 |   width: 148px;
 686 |   height: 42px;
 687 |   background: rgba(0,0,0,0.6);
 688 |   text-align: left;
 689 |   padding-left: 15px;
 690 |   font-size: 12px;
 691 |   line-height: 42px;
 692 |   color: #fff;
 693 |   margin-top: -21px;
 694 |   margin-left: -75px;
 695 |   display: none;
 696 | }
 697 | .wf-dragging-proxy .widgeticon {
 698 |   position: absolute;
 699 |   right: 10px;
 700 |   top: 9px;
 701 | }
 702 | .wf-dragging-mark {
 703 |   background: #ff4500;
 704 |   height: 2px;
 705 |   overflow: visible;
 706 |   position: relative;
 707 |   margin: 3px 0;
 708 | }
 709 | .wf-dragging-mark:before,
 710 | .wf-dragging-mark:after {
 711 |   position: absolute;
 712 |   content: '';
 713 |   display: block;
 714 |   height: 0;
 715 |   width: 0;
 716 |   border-style: solid;
 717 |   border-color: transparent;
 718 |   border-width: 4px 8px;
 719 |   top: -3px;
 720 | }
 721 | .wf-dragging-mark:before {
 722 |   left: 0px;
 723 |   border-left-color: #ff4500;
 724 | }
 725 | .wf-dragging-mark:after {
 726 |   right: 0px;
 727 |   border-right-color: #ff4500;
 728 | }
 729 | .wf-panel {
 730 |   position: absolute;
 731 | }
 732 | .wf-panel-tab {
 733 |   height: 32px;
 734 | }
 735 | .wf-panel-tab .tabitem {
 736 |   display: inline-block;
 737 |   width: 99px;
 738 |   height: 28px;
 739 |   line-height: 28px;
 740 |   font-size: 15px;
 741 |   text-align: center;
 742 |   border-radius: 2px;
 743 |   color: #fff;
 744 | }
 745 | .wf-panel-tab .tabitem.current {
 746 |   position: relative;
 747 |   background: rgba(0,0,0,0.5);
 748 | }
 749 | .wf-panel-tab .tabitem.current:after {
 750 |   content: '';
 751 |   display: block;
 752 |   overflow: hidden;
 753 |   position: absolute;
 754 |   height: 0;
 755 |   width: 0;
 756 |   border: 4px solid transparent;
 757 |   border-top-color: rgba(0,0,0,0.5);
 758 |   bottom: -8px;
 759 |   margin-left: -4px;
 760 |   left: 50%;
 761 | }
 762 | .wf-panel-body {
 763 |   overflow: hidden;
 764 | }
 765 | .wf-formcanvas {
 766 |   position: absolute;
 767 |   left: 50%;
 768 |   top: 0;
 769 |   height: 100%;
 770 |   width: 492px;
 771 |   margin-left: -251px;
 772 |   background: url("//img.alicdn.com/tps/TB1LeMSIpXXXXcYXpXXXXXXXXXX.png") no-repeat top center;
 773 | }
 774 | .wf-formcanvas-inner {
 775 |   position: absolute;
 776 |   overflow-x: hidden;
 777 |   overflow-y: auto;
 778 |   left: 47px;
 779 |   top: 106px;
 780 |   right: 46px;
 781 |   bottom: 0;
 782 |   max-height: 688px;
 783 |   background: #f0eff4;
 784 | }
 785 | .wf-formcanvas-title {
 786 |   height: 50px;
 787 |   line-height: 50px;
 788 |   text-align: center;
 789 |   font-size: 16px;
 790 |   color: #fff;
 791 |   margin-top: -34px;
 792 | }
 793 | .wf-formcanvas-body {
 794 |   overflow: hidden;
 795 |   padding-bottom: 30px;
 796 | }
 797 | .wf-formcanvas-body.empty {
 798 |   background: url("//img.alicdn.com/tps/TB1FRPmHVXXXXb.XFXXXXXXXXXX-249-145.png") no-repeat center;
 799 |   min-height: 300px;
 800 | }
 801 | .wf-component {
 802 |   margin: 15px 0;
 803 |   overflow: hidden;
 804 |   position: relative;
 805 | }
 806 | .wf-remove {
 807 |   position: absolute;
 808 |   right: 0;
 809 |   top: 0;
 810 |   font-size: 12px;
 811 |   color: #eee;
 812 |   display: none;
 813 |   cursor: pointer;
 814 |   z-index: 10;
 815 |   background: #ff5400;
 816 |   padding: 3px 2px 2px 3px;
 817 | }
 818 | .wf-overlay {
 819 |   position: absolute;
 820 |   top: 0;
 821 |   right: 0;
 822 |   bottom: 0;
 823 |   left: 0;
 824 |   cursor: move;
 825 |   z-index: 9;
 826 |   border: 1px dashed transparent;
 827 | }
 828 | .wf-remove:hover {
 829 |   color: #fff;
 830 | }
 831 | html:not(.wf-cursor-move) .wf-component.hover > .wf-remove {
 832 |   display: block;
 833 | }
 834 | html:not(.wf-cursor-move) .wf-component.hover > .wf-overlay {
 835 |   border-color: #ff5400;
 836 | }
 837 | html:not(.wf-cursor-move) .wf-component.active > .wf-overlay {
 838 |   border-width: 1px;
 839 |   border-style: solid;
 840 |   border-color: #ff5400;
 841 | }
 842 | .wf-component.areaactive > .wf-overlay {
 843 |   border-width: 1px;
 844 |   border-style: solid;
 845 |   border-color: rgba(255,84,0,0.3);
 846 | }
 847 | .wf-component.draging {
 848 |   pointer-events: none;
 849 |   -webkit-filter: blur(1px);
 850 |   filter: blur(1px);
 851 | }
 852 | .wf-component.draging > .wf-overlay {
 853 |   border-width: 1px;
 854 |   border-color: #666;
 855 |   border-style: dashed;
 856 |   background: #ccc;
 857 |   opacity: 0.8;
 858 | }
 859 | .wf-componentview {
 860 |   position: relative;
 861 | /*
 862 |   &.important-field .wf-componentview-placeholder
 863 |     color #f93
 864 | 
 865 |   &.important-field .wf-componentview-content
 866 |     background #f93
 867 |     color white
 868 |   */
 869 | }
 870 | .wf-componentview .wf-componentview-label {
 871 |   font-size: 16px;
 872 |   color: #858e99;
 873 |   display: block;
 874 |   padding: 10px 15px;
 875 |   white-space: normal;
 876 |   word-break: break-word;
 877 |   vertical-align: top;
 878 | }
 879 | .wf-componentview >.wf-componentview-border {
 880 |   border-width: 1px 0;
 881 |   border-style: solid;
 882 |   border-color: #c8c8ca transparent;
 883 |   background: #fff;
 884 |   padding: 15px;
 885 |   white-space: nowrap;
 886 | }
 887 | .wf-componentview >.wf-componentview-border >.wf-componentview-label {
 888 |   display: inline-block;
 889 |   width: 5.5em;
 890 |   padding: 0 8px 0 0;
 891 |   color: #222;
 892 | }
 893 | .wf-componentview .wf-componentview-placeholder {
 894 |   color: #ccc;
 895 |   font-size: 15px;
 896 |   vertical-align: top;
 897 | }
 898 | .wf-componentview .wf-componentview-adddetail {
 899 |   color: #008cee;
 900 |   text-align: center;
 901 |   padding: 15px;
 902 |   background: #f7f9ff;
 903 |   border-bottom: 1px solid rgba(200,200,202,0.5);
 904 |   vertical-align: middle;
 905 | }
 906 | .wf-componentview .wf-componentview-adddetail:before {
 907 |   font-family: "iconfont";
 908 |   font-size: 16px;
 909 |   font-style: normal;
 910 |   content: "\e608";
 911 |   display: inline-block;
 912 |   margin: 0 3px 0 0;
 913 | }
 914 | .wf-componentview .wf-componentview-content {
 915 |   padding: 15px;
 916 |   color: #858e99;
 917 | }
 918 | .wf-componentview .wf-componentview-area {
 919 |   min-height: 90px;
 920 |   background: #ddeff3;
 921 |   position: relative;
 922 | }
 923 | .wf-componentview .wf-componentview-area .emptytip {
 924 |   position: absolute;
 925 |   left: 50%;
 926 |   top: 50%;
 927 |   white-space: nowrap;
 928 |   color: #ccc;
 929 |   -webkit-transform: translate(-50%, -50%);
 930 |   transform: translate(-50%, -50%);
 931 | }
 932 | .wf-componentgroup {
 933 |   margin: 0;
 934 |   padding: 0;
 935 |   border-width: 1px 0;
 936 |   border-style: solid;
 937 |   border-color: #c8c8ca transparent;
 938 | }
 939 | .wf-componentgroup >.wf-component {
 940 |   padding: 0;
 941 |   margin: 0;
 942 |   background: #fff;
 943 | }
 944 | .wf-componentgroup >.wf-component .wf-componentview-border {
 945 |   border-width: 0 0 1px;
 946 |   margin-left: 15px;
 947 |   padding-left: 0;
 948 | }
 949 | .wf-componentgroup >.wf-component:last-child .wf-componentview-border:last-child {
 950 |   border-width: 0;
 951 | }
 952 | .empty .wf-componentgroup {
 953 |   border-width: 0;
 954 | }
 955 | .wf-componentview-stats {
 956 |   padding: 3px 10px;
 957 | }
 958 | .wf-componentview-stats .wf-componentview-statitem {
 959 |   color: #858e99;
 960 |   font-size: 14px;
 961 |   text-align: left;
 962 |   line-height: 20px;
 963 |   margin: 2px 0;
 964 | }
 965 | .wf-component-textareafield .wf-componentview-placeholder {
 966 |   height: 50px;
 967 |   display: inline-block;
 968 | }
 969 | .wf-component-ddselectfield .icon-enter,
 970 | .wf-component-ddmultiselectfield .icon-enter,
 971 | .wf-component-dddatefield .icon-enter,
 972 | .wf-component-dddaterangefield .icon-enter {
 973 |   position: absolute;
 974 |   font-size: 24px;
 975 |   right: 15px;
 976 |   top: 12px;
 977 |   color: #e0e0e0;
 978 | }
 979 | .wf-component-ddselectfield .wf-componentview-placeholder,
 980 | .wf-component-ddmultiselectfield .wf-componentview-placeholder,
 981 | .wf-component-dddatefield .wf-componentview-placeholder,
 982 | .wf-component-dddaterangefield .wf-componentview-placeholder {
 983 |   position: absolute;
 984 |   right: 50px;
 985 |   top: 16px;
 986 |   color: #929292;
 987 | }
 988 | .wf-component-dddaterangefield .wf-componentview-border {
 989 |   position: relative;
 990 | }
 991 | .wf-component-dddaterangefield .wf-componentview-border:not(:first-child) {
 992 |   border-top: none;
 993 | }
 994 | .wf-component-externalcontactfield .wf-componentview-border {
 995 |   position: relative;
 996 | }
 997 | .wf-component-externalcontactfield .wf-componentview-border:not(:first-child) {
 998 |   border-top: none;
 999 | }
1000 | .wf-component-externalcontactfield .icon-enter {
1001 |   position: absolute;
1002 |   font-size: 24px;
1003 |   right: 15px;
1004 |   top: 12px;
1005 |   color: #e0e0e0;
1006 | }
1007 | .wf-component-externalcontactfield .wf-componentview-placeholder {
1008 |   position: absolute;
1009 |   right: 50px;
1010 |   top: 16px;
1011 |   color: #929292;
1012 | }
1013 | .wf-componentview-tip-icon {
1014 |   border: 0;
1015 |   width: 30px;
1016 |   position: relative;
1017 |   float: right;
1018 |   top: -6px;
1019 | }
1020 | .wf-component-ddphotofield .icon-camera {
1021 |   position: absolute;
1022 |   font-size: 24px;
1023 |   right: 15px;
1024 |   top: 12px;
1025 |   color: #858e99;
1026 | }
1027 | .wf-component-ddattachment .icon-chakanfujian {
1028 |   position: absolute;
1029 |   font-size: 24px;
1030 |   right: 15px;
1031 |   top: 12px;
1032 |   color: #858e99;
1033 | }
1034 | .wf-component-textnote {
1035 |   padding: 0;
1036 |   margin: 0;
1037 | }
1038 | .wf-component-moneyfield .cnformat {
1039 |   color: #858e99;
1040 |   font-size: 14px;
1041 |   padding: 5px 15px;
1042 | }
1043 | .wf-iconselect {
1044 |   overflow: auto;
1045 |   height: 300px;
1046 | }
1047 | .wf-iconselect .iconitem {
1048 |   width: 50px;
1049 |   height: 50px;
1050 |   display: block;
1051 |   float: left;
1052 |   margin: 5px;
1053 |   border-radius: 5px;
1054 |   cursor: pointer;
1055 |   border: 1px solid transparent;
1056 |   overflow: hidden;
1057 |   position: relative;
1058 | }
1059 | .wf-iconselect .iconitem.selected {
1060 |   border-color: #3f9af9;
1061 | }
1062 | .wf-iconselect .iconitem img {
1063 |   max-width: 100%;
1064 |   max-height: 100%;
1065 |   padding: 10px;
1066 |   background: #fff;
1067 |   border-radius: 30%;
1068 | }
1069 | .wf-iconselect .iconitem .icon {
1070 |   position: absolute;
1071 |   display: block;
1072 |   border-radius: 50%;
1073 |   bottom: 1px;
1074 |   right: 1px;
1075 |   color: #fff;
1076 |   padding: 3px 2px 2px 3px;
1077 |   font-size: 14px;
1078 |   background: #3f9af9;
1079 | }
1080 | .wf-icon {
1081 |   width: 40px;
1082 |   height: 40px;
1083 |   margin-left: 8px;
1084 |   margin-right: 8px;
1085 | }
1086 | .wf-icon-item {
1087 |   display: inline-block;
1088 |   text-align: center;
1089 |   position: relative;
1090 | }
1091 | .wf-icon-item .tabitem {
1092 |   display: none;
1093 |   width: 250px;
1094 |   height: 28px;
1095 |   line-height: 28px;
1096 |   font-size: 11px;
1097 |   text-align: left;
1098 |   border-radius: 2px;
1099 |   color: #fff;
1100 |   position: absolute;
1101 |   text-align: center;
1102 |   left: 10px;
1103 |   top: -32px;
1104 | }
1105 | .wf-icon-item .tabitem.current {
1106 |   background: rgba(0,0,0,0.5);
1107 | }
1108 | .wf-icon-item .tabitem.current:after {
1109 |   content: '';
1110 |   display: block;
1111 |   overflow: hidden;
1112 |   position: absolute;
1113 |   height: 0;
1114 |   width: 0;
1115 |   border: 4px solid transparent;
1116 |   border-top-color: rgba(0,0,0,0.5);
1117 |   bottom: -8px;
1118 |   margin-left: -4px;
1119 |   left: 20px;
1120 | }
1121 | .wf-setting-duration-label {
1122 |   padding-left: 18px;
1123 | }
1124 | .wf-push-app {
1125 |   position: relative;
1126 |   padding-top: 10px;
1127 |   padding-bottom: 10px;
1128 | }
1129 | .wf-icon-group {
1130 |   position: relative;
1131 |   top: 20px;
1132 | }
1133 | .wf-app-push {
1134 |   position: absolute;
1135 |   top: 10px;
1136 | }
1137 | .wf-icon-name {
1138 |   display: block;
1139 |   color: #fff;
1140 |   font-size: 11px;
1141 | }
1142 | .wf-pushinfo {
1143 |   font-size: 14px;
1144 |   color: #fff;
1145 |   margin-left: 4px;
1146 | }
1147 | .wf-item-group {
1148 |   padding-left: 18px;
1149 | }
1150 | .wf-setting-push-radio {
1151 |   margin-left: 10px;
1152 | }
1153 | .wf-tips {
1154 |   width: 15px;
1155 |   height: 15px;
1156 |   margin-left: 4px;
1157 |   position: relative;
1158 |   top: 3px;
1159 | }
1160 | .wf-input-tips {
1161 |   color: #f4f4f4;
1162 |   font-size: 12px;
1163 | }
1164 | .wf-settingpanel {
1165 |   width: 320px;
1166 |   right: 0;
1167 |   top: 84px;
1168 |   bottom: 0;
1169 | }
1170 | .wf-settingpanel input[type="text"],
1171 | .wf-settingpanel textarea {
1172 |   background: rgba(255,255,255,0.1);
1173 |   border: 1px solid rgba(255,255,255,0.6);
1174 |   color: #fff;
1175 |   padding: 6px 10px;
1176 |   width: 290px;
1177 |   border-radius: 2px;
1178 |   outline: none;
1179 |   font-size: 12px;
1180 | }
1181 | .wf-settingpanel input[type="text"]:focus,
1182 | .wf-settingpanel textarea:focus {
1183 |   border-color: #3f9af9;
1184 |   background: transparent;
1185 | }
1186 | .wf-settingpanel ::-webkit-input-placeholder {
1187 |   color: #fff;
1188 | }
1189 | .wf-settingpanel .wf-form {
1190 |   position: absolute;
1191 |   top: 40px;
1192 |   bottom: 0;
1193 |   overflow-y: auto;
1194 |   left: 0;
1195 |   right: 0;
1196 |   padding: 19px 0;
1197 | }
1198 | .wf-settingpanel .wf-field .fieldname {
1199 |   color: #fff;
1200 | }
1201 | .wf-settingpanel .wf-field .fieldinfo {
1202 |   color: #f4f4f4;
1203 | }
1204 | .wf-settingpanel .wf-field .wf-conditionwarn {
1205 |   font-size: 12px;
1206 |   color: #fff;
1207 |   line-height: 16px;
1208 | }
1209 | .wf-settingpanel .wf-field .wf-conditionwarn .icon-error {
1210 |   color: #ff8415;
1211 |   vertical-align: baseline;
1212 | }
1213 | .wf-settingpanel .wf-field[class*="wf-setting-"] {
1214 |   color: #fff;
1215 | }
1216 | .wf-settingpanel .wf-field[class*="wf-setting-"] input[type="checkbox"] {
1217 |   margin-right: 5px;
1218 |   margin-left: 2px;
1219 |   vertical-align: middle;
1220 | }
1221 | .wf-settingpanel .wf-field.wf-setting-dateformat {
1222 |   color: #fff;
1223 | }
1224 | .wf-settingpanel .wf-field.wf-setting-dateformat input[type="radio"] {
1225 |   margin-right: 5px;
1226 |   margin-left: 2px;
1227 |   vertical-align: middle;
1228 | }
1229 | .wf-settingpanel .wf-field.wf-setting-push {
1230 |   color: #fff;
1231 |   margin-top: 24px;
1232 |   margin-left: 5px;
1233 | }
1234 | .wf-settingpanel .wf-field.wf-setting-push input[type="radio"] {
1235 |   margin-right: 5px;
1236 |   margin-left: 2px;
1237 |   vertical-align: middle;
1238 | }
1239 | .wf-settingpanel .wf-field.wf-setting-daterangelabel .fieldblock:not(:last-child) {
1240 |   margin-bottom: 30px;
1241 | }
1242 | .wf-settingpanel .wf-field.wf-setting-options input[type="text"] {
1243 |   width: 200px;
1244 | }
1245 | .wf-settingpanel .wf-field.wf-setting-options .action {
1246 |   margin-left: 5px;
1247 |   display: inline-block;
1248 |   opacity: 0.6;
1249 |   text-align: center;
1250 | }
1251 | .wf-settingpanel .wf-field.wf-setting-options .action .icon {
1252 |   background: #000;
1253 |   border-radius: 50%;
1254 |   color: #fff;
1255 |   padding: 3px 2px 3px 3px;
1256 |   font-size: 12px;
1257 | }
1258 | .wf-settingpanel .wf-field.wf-setting-options .action:hover {
1259 |   opacity: 0.9;
1260 | }
1261 | .wf-settingpanel .wf-field.wf-setting-options .limitadd .action-add,
1262 | .wf-settingpanel .wf-field.wf-setting-options .limitdel .action-del {
1263 |   opacity: 0.2;
1264 |   pointer-events: none;
1265 | }
1266 | .wf-settingpanel .wf-field.wf-setting-content textarea {
1267 |   min-height: 7.5em;
1268 | }
1269 | .wf-widgetspanel {
1270 |   width: 350px;
1271 |   bottom: 0;
1272 |   left: 0;
1273 |   top: 84px;
1274 | }
1275 | .wf-widgetspanel .wf-panel-body {
1276 |   margin: 30px -15px 0 0;
1277 | }
1278 | .wf-widgetsitem {
1279 |   border: 1px dashed rgba(255,255,255,0.6);
1280 |   background: rgba(255,255,255,0.1);
1281 |   margin: 0 15px 15px 0;
1282 |   width: 148px;
1283 |   height: 42px;
1284 |   float: left;
1285 |   font-size: 12px;
1286 |   line-height: 42px;
1287 |   text-align: left;
1288 |   padding-left: 15px;
1289 |   cursor: move;
1290 |   color: #fff;
1291 |   position: relative;
1292 |   overflow: hidden;
1293 | }
1294 | .wf-widgetsitem.new:after {
1295 |   position: absolute;
1296 |   content: 'new';
1297 |   font-family: Helvetica, Arial, sans-serif;
1298 |   background: #fc0;
1299 |   display: inline-block;
1300 |   padding: 7px 20px 1px;
1301 |   top: 0;
1302 |   left: 0;
1303 |   font-size: 12px;
1304 |   line-height: normal;
1305 |   -webkit-transform-origin: center top;
1306 |   transform-origin: center top;
1307 |   -webkit-transform: translateX(-50%) rotate(-45deg) scale(0.7);
1308 |   transform: translateX(-50%) rotate(-45deg) scale(0.7);
1309 | }
1310 | .wf-widgetsitem:hover {
1311 |   background: rgba(255,255,255,0.2);
1312 | }
1313 | .wf-widgetsitem .widgeticon {
1314 |   position: absolute;
1315 |   right: 10px;
1316 |   top: 9px;
1317 | }
1318 | .wf-widgetsitem * {
1319 |   cursor: move;
1320 | }
1321 | 
1322 | /*# sourceMappingURL=design.css.map */
1323 | 


--------------------------------------------------------------------------------
/src/style/style.css:
--------------------------------------------------------------------------------
1 | ul,li{
2 | 	list-style: none;
3 | }
4 | 
5 | 


--------------------------------------------------------------------------------