PCS、WMS基础框架和项目资料

dengjunjie

2024-01-16 5884c9023393061afbe6d3d6e709e53e672ddde8

PCS、WMS基础框架和项目资料

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/.babelrc

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,12 @@
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/.editorconfig

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/.gitignore

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,14 @@
.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/.postcssrc.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {}
  }
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/README.md

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,21 @@
# widesea_wmsclient

> wmsclient

## Build Setup

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/build/build.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,41 @@
'use strict'
require('./check-versions')()

process.env.NODE_ENV = 'production'

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

const spinner = ora('building for production...')
spinner.start()

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, (err, stats) => {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,
      chunkModules: false
    }) + '\n\n')

    if (stats.hasErrors()) {
      console.log(chalk.red('  Build failed with errors.\n'))
      process.exit(1)
    }

    console.log(chalk.cyan('  Build complete.\n'))
    console.log(chalk.yellow(
      '  Tip: built files are meant to be served over an HTTP server.\n' +
      '  Opening index.html over file:// won\'t work.\n'
    ))
  })
})

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/build/check-versions.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,54 @@
'use strict'
const chalk = require('chalk')
const semver = require('semver')
const packageConfig = require('../package.json')
const shell = require('shelljs')

function exec (cmd) {
  return require('child_process').execSync(cmd).toString().trim()
}

const versionRequirements = [
  {
    name: 'node',
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  }
]

if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  })
}

module.exports = function () {
  const warnings = []

  for (let i = 0; i < versionRequirements.length; i++) {
    const mod = versionRequirements[i]

    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ': ' +
        chalk.red(mod.currentVersion) + ' should be ' +
        chalk.green(mod.versionRequirement)
      )
    }
  }

  if (warnings.length) {
    console.log('')
    console.log(chalk.yellow('To use this template, you must update following to modules:'))
    console.log()

    for (let i = 0; i < warnings.length; i++) {
      const warning = warnings[i]
      console.log('  ' + warning)
    }

    console.log()
    process.exit(1)
  }
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/build/logo.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/build/utils.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,101 @@
'use strict'
const path = require('path')
const config = require('../config')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const packageConfig = require('../package.json')

exports.assetsPath = function (_path) {
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}

exports.cssLoaders = function (options) {
  options = options || {}

  const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  const postcssLoader = {
    loader: 'postcss-loader',
    options: {
      sourceMap: options.sourceMap
    }
  }

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
}

// Generate loaders for standalone style files (outside of .vue)
exports.styleLoaders = function (options) {
  const output = []
  const loaders = exports.cssLoaders(options)

  for (const extension in loaders) {
    const loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }

  return output
}

exports.createNotifierCallback = () => {
  const notifier = require('node-notifier')

  return (severity, errors) => {
    if (severity !== 'error') return

    const error = errors[0]
    const filename = error.file && error.file.split('!').pop()

    notifier.notify({
      title: packageConfig.name,
      message: severity + ': ' + error.name,
      subtitle: filename || '',
      icon: path.join(__dirname, 'logo.png')
    })
  }
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/build/vue-loader.conf.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,22 @@
'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  }
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/build/webpack.base.conf.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,92 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
})

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/build/webpack.dev.conf.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,95 @@
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/build/webpack.prod.conf.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,145 @@
'use strict'
const path = require('path')
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

const env = require('../config/prod.env')

const webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },
  devtool: config.build.productionSourceMap ? config.build.devtool : false,
  output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      // Setting the following option to `false` will not extract CSS from codesplit chunks.
      // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
      // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
      // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
      allChunks: true,
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
    }),
    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),

    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

if (config.build.productionGzip) {
  const CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}

if (config.build.bundleAnalyzerReport) {
  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}

module.exports = webpackConfig

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/config/buttons.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,95 @@

let buttons = [{
    name: "查 è¯¢",
    value: 'Search',
    icon: 'md-search',
    class: 'dropdown',
    type: 'info',
    onClick: function () {
        this.search();
    }
},
// {
//     name: "重 ç½®",
//     icon: 'md-refresh',
//     class: '',
//     type: 'success',
//     onClick: function () {
//         this.resetSearch();
//     }
// }, 
{
    name: "刷 æ–°",
    icon: 'md-refresh',
    class: '',
    type: 'success',
    onClick: function () {
        this.refresh();
    }
},
{
    name: "新 å»º",
    icon: 'md-add',
    value: 'Add',
    class: '',
    type: 'error',
    onClick: function () {
        this.add();
    }
}, {
    name: "编 è¾‘",
    icon: 'md-create',
    value: 'Update',
    class: '',
    type: 'success',
    onClick: function () {
        this.edit();
    }
}, {
    name: "删 é™¤",
    icon: 'md-close',
    class: '',
    value: 'Delete',
    type: 'error',
    onClick: function () {
        this.del();
    }
}, {
    name: "审 æ ¸",
    icon: 'md-create',
    class: '',
    value: 'Audit',
    type: 'error',
    onClick: function () {
        this.audit();
    }
},
{
    name: "导 å…¥",
    icon: 'md-color-fill',
    class: '',
    value: 'Import',
    onClick: function () {
        this.import();
    }
}, {
    name: "导 å‡º",
    icon: 'md-share-alt',
    class: '',
    value: 'Export',
    onClick: function () {
        this.export();
    }
},
    //  {
    //     name: "数据结构",
    //     icon: 'ios-cog',
    //     class: '',
    //     value: '',
    //     onClick: function () {
    //         this.openViewColumns();
    //     }
    // }
]

export default buttons

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/config/dev.env.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,8 @@
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
  //NODE_ENV: '"production"'
})

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/config/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,76 @@
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    // Use Eslint Loader?
    // If true, your code will be linted during bundling and
    // linting errors and warnings will be shown in the console.
    useEslint: false,
    // If true, eslint errors and warnings will also be shown in the error overlay
    // in the browser.
    showEslintErrorsInOverlay: false,

    /**
     * Source Maps
     */

    // https://webpack.js.org/configuration/devtool/#development
    devtool: 'cheap-module-eval-source-map',

    // If you have problems debugging vue-files in devtools,
    // set this to false - it *may* help
    // https://vue-loader.vuejs.org/en/options.html#cachebusting
    cacheBusting: true,

    cssSourceMap: true
  },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/config/prod.env.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,4 @@
'use strict'
module.exports = {
  NODE_ENV: '"production"'
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/index.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,132 @@
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <!-- <meta id="viewport" name="viewport"
   content="width=device-width,initial-scale=1,minimum-scale=1,
   maximum-scale=1,user-scalable=no,viewport-fit=cover"> -->
  <link rel="icon" type="image/x-icon" href="src/assets/imgs/wcs_x.png">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>WCS</title>
  <style type="text/css">
    #v-loading-container {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: #fff;
      user-select: none;
      z-index: 999999;
      overflow: hidden
    }

    .loading-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -100%)
    }

    .loading-dot {
      animation: antRotate 1.2s infinite linear;
      transform: rotate(45deg);
      position: relative;
      display: inline-block;
      font-size: 64px;
      width: 64px;
      height: 64px;
      box-sizing: border-box
    }

    .loading-dot i {
      width: 20px;
      height: 20px;
      position: absolute;
      display: block;
      background-color: #008dff;
      border-radius: 100%;
      transform: scale(.75);
      transform-origin: 50% 50%;
      opacity: .3;
      animation: antSpinMove 1s infinite linear alternate
    }

    .loading-dot i:nth-child(1) {
      top: 0;
      left: 0
    }

    .loading-dot i:nth-child(2) {
      top: 0;
      right: 0;
      -webkit-animation-delay: .4s;
      animation-delay: .4s
    }

    .loading-dot i:nth-child(3) {
      right: 0;
      bottom: 0;
      -webkit-animation-delay: .8s;
      animation-delay: .8s
    }

    .loading-dot i:nth-child(4) {
      bottom: 0;
      left: 0;
      -webkit-animation-delay: 1.2s;
      animation-delay: 1.2s
    }

    @keyframes antRotate {
      to {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg)
      }
    }

    @-webkit-keyframes antRotate {
      to {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg)
      }
    }

    @keyframes antSpinMove {
      to {
        opacity: 1
      }
    }

    @-webkit-keyframes antSpinMove {
      to {
        opacity: 1
      }
    }

  </style>
</head>

<body style="margin: 0px;">
  <div id="v-loading-container">
    <div class="loading-wrapper">
      <span class="loading-dot loading-spin">
        <i></i>
        <i></i>
        <i></i>
        <i></i>
      </span>
    </div>
  </div>
  <div id="app"></div>
</body>

</html>
<style>
  body html,
  #app {
    height: 100%;
  }

</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/package-lock.json

¶Ô±ÈÐÂÎļþ
ÎļþÌ«´ó

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/package.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,104 @@
{
  "name": "vol-vue",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "jxx <283591387@qq.com>",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit test/e2e/specs",
    "build": "node build/build.js"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "echarts": "^4.2.1",
    "element-ui": "^2.4.11",
    "gemini-scrollbar": "^1.5.3",
    "iview": "^3.2.2",
    "jquery": "^3.6.0",
    "moment": "^2.24.0",
    "nprogress": "^0.2.0",
    "qs": "^6.7.0",
    "vue": "^2.5.2",
    "vue-gemini-scrollbar": "^2.0.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-eslint": "^8.2.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-jest": "^21.0.2",
    "babel-loader": "^7.1.1",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-plugin-transform-vue-jsx": "^3.5.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "chromedriver": "^2.27.2",
    "copy-webpack-plugin": "^4.0.1",
    "cross-spawn": "^5.0.1",
    "css-loader": "^0.28.11",
    "eslint": "^4.15.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",
    "eslint-plugin-vue": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.4",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "jest": "^22.0.4",
    "jest-serializer-vue": "^0.3.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "nightwatch": "^0.9.12",
    "node-notifier": "^5.1.2",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.2.0",
    "portfinder": "^1.0.13",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.8",
    "postcss-url": "^7.2.1",
    "rimraf": "^2.6.0",
    "selenium-server": "^3.0.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "style-loader": "^0.23.1",
    "stylus-loader": "^3.0.2",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-jest": "^1.0.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/App.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,62 @@
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import "./assets/css/common.less";
export default {
  name: "App",
  created() {
    document.getElementById("v-loading-container").style.display = "none";
  },
};
</script>

<style>
.el-loading {
  z-index: 999999;
}
/* è§£å†³element-ui的table表格控件表头与内容列不对齐问题 */
/* .el-table th.gutter{
    display: table-cell !important;
  } */
.el-table th {
  display: table-cell !important;
}
.el-loading .el-loading-spinner {
  padding: 7px;
  background: #ececec;
  width: 200px;
  color: red;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 5px;
  border: 1px solid #a0a0a0;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  /* margin-top: 60px; */
}
#nprogress .bar {
  background: white;
  height: 2px;
  /* filter: blur(0.5px) */
}
.ivu-form .ivu-form-item-label {
  color: #939394;
}
</style>
<style>
html,
body,
#app {
  height: 100%;
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/api/http.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,284 @@
import axios from 'axios'
// import Vue from 'vue'
// npm install qs

axios.defaults.timeout = 50000;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
//axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

//'application/json;charset=utf-8';//
if (process.env.NODE_ENV == 'development') {//开发环境
  axios.defaults.baseURL = 'http://localhost:8099/';//8089   //192.168.12.110
}
else if (process.env.NODE_ENV == 'debug') {
  // axios.defaults.baseURL = 'http://127.0.0.1:8990/';//调试环境
}
else if (process.env.NODE_ENV == 'production') {
  axios.defaults.baseURL = 'http://localhost:8099/';//生产环境
}
let ipAddress = axios.defaults.baseURL;
axios.interceptors.request.use((config) => {
  //axios.defaults.headers[_Authorization] = $httpVue.$store.getters.getToken();

  //console.log(axios.defaults.headers[_Authorization])
  _showLoading && loading.show(_showLoading);
  if (config.method === 'post') {
    //config.data =qs.stringify(config.data);
    //  console.log('post拦截：' + config.data);
  }
  return config;
}, (error) => {
  _showLoading && loading.close();
  return Promise.reject(error);
});

//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) => {
  _showLoading && loading.close();
  //对响应数据做些事
  if (res.data.success) {
    return res;
  }
  return Promise.resolve(res);
}, (error) => {
  _showLoading && loading.close();
  let httpMessage = '';
  if (error.response) {
    if (error.response.data && error.response.data.message) {
      httpMessage = error.response.data.message;
    } else if (error.response.status == '404') {
      httpMessage = "没有找到请求的地址";
    }
  }
  else {
    httpMessage = '网络好像出了点问题~'
  }

  redirect(error.response || {}, httpMessage);
  return Promise.reject(error.response);
});

let $httpVue = null, currentToken = '';
const _Authorization = 'Authorization', _Bearer = 'Bearer ';
function init(vue) {
  $httpVue = vue;
}
let $loading;
let loading = {
  show(obj) {  //可选值为true,string="当前提示的文本"
    let text = '正在处理中.....';
    if (typeof obj == 'string') {
      text = obj;
    }
    $loading && $loading.close();
    $loading = $httpVue.$loading({
      lock: true,
      target: '#loading-container',
      customClass: "el-loading",
      text: text,
      spinner: 'el-icon-loading',
      background: 'rgba(58, 61, 63, 0.32)'
    });
  },
  close() {
    $loading.close();
  }
}
function getToken() {
  if (currentToken) {
    return _Bearer + currentToken;
  }
  return $httpVue.$store.getters.getToken();
}
let _showLoading;
//_showLoading=true异步请求时会显示遮罩层,_showLoading=字符串，异步请求时遮罩层显示当前字符串
function post(url, params, showLoading) {
  _showLoading = showLoading;
  axios.defaults.headers[_Authorization] = getToken();
  return new Promise((resolve, reject) => {
    //  axios.post(url, qs.stringify(params))   //
    axios.post(url, params)
      .then(response => {
        if (response.status == 202) {
          getNewToken(() => { post(url, params, _showLoading); });
          return;
        }
        resolve(response.data);
      }, err => {
      
        if (err.status == 202) {
          getNewToken(() => { post(url, params, _showLoading); });
          return;
        }
        reject(err.data && err.data.message ? err.data.message : '网络好像出了点问题~~');
      })
      .catch((error) => {
        reject(error)
      })
  })
}

//_showLoading=true异步请求时会显示遮罩层,_showLoading=字符串，异步请求时遮罩层显示当前字符串
function get(url, param, showLoading) {
  _showLoading = showLoading;
  axios.defaults.headers[_Authorization] = getToken();
  return new Promise((resolve, reject) => {
    axios.get(url, { params: param })
      .then(response => {
        if (response.status == 202) {
          getNewToken(() => { get(url, param, _showLoading); });
          return;
        }
        resolve(response.data)
      }, err => {
        if (err.status == 202) {
          getNewToken(() => { get(url, param, _showLoading); });
          return;
        }
        redirect(response.data);
        reject(err)
      })
      .catch((error) => {
        reject(error)
      })
  })
}




function createXHR() {
  if (XMLHttpRequest) {
    return new XMLHttpRequest();
  }
  if (ActiveXObject) {
    if (typeof arguments.callee.activeXString != "string") {
      var versions = [
        "MSXML2.XMLHttp.6.0",
        "MSXML2.XMLHttp",
        "MSXML2.XMLHttp.3.0"
      ];
      for (var i = 0; i < versions.length; i++) {
        try {
          new ActiveXObject(versions[i]);
          arguments.callee.activeXString = versions[i];
          break;
        } catch (e) {
          console.log("no");
        }
      }
    }
    return new ActiveXObject(arguments.callee.activeXString);
  }
}

function redirect(responseText, message) {
  try {
    let responseData = typeof responseText == 'string' ? JSON.parse(responseText) : responseText;
    //  $httpVue.$message.error(responseData.message || '~服务器好像出了点问题...')
    if ((responseData.hasOwnProperty('code') && responseData.code == 401)
      || (responseData.data && responseData.data.code == 401)) {
      toLogin();
    } else {
      $httpVue.$message.error(message);
    }
  } catch (error) {
    console.log(error);
    $httpVue.$message.error(responseText)
  }
}
function toLogin() {
  currentToken = "";
  $httpVue.$router.push({ path: '/login', params: { r: Math.random() } });
}
//当前token快要过期时，用现有的token换成一个新的token
function getNewToken(callBack) {
  ajax({
    url: "/api/User/replaceToken",
    param: {},
    json: true,
    success: function (x) {
      if (x.status) {
        let userInfo = $httpVue.$store.getters.getUserInfo();
        userInfo.token = x.data;
        currentToken = x.data;
        $httpVue.$store.commit('setUserInfo', userInfo);
        callBack();
      } else {
        console.log(x.message);
        toLogin();
      }
    },
    errror: function (ex) {
      console.log(ex);
      toLogin();
    },
    type: "post",
    async: false
  });


}

function ajax(param) {
  let httpParam =
    Object.assign({
      url: '', headers: {},
      param: {}, json: true,
      success: function () { },
      errror: function () { },
      type: 'post', async: true
    }, param);

  httpParam.url = axios.defaults.baseURL + httpParam.url.replace(/\/?/, '');
  httpParam.headers[_Authorization] = getToken();
  var xhr = createXHR();
  // console.log(xhr.readyState);
  xhr.onreadystatechange = function () {
    if (xhr.status == 403 || xhr.status == 401) {
      redirect(xhr.responseText);
      return;
    }
    if (xhr.status == 202) {
      getNewToken(() => {
        ajax(param);
      });
      return;
    }
    if (xhr.readyState == 4 && xhr.status == 200) {
      httpParam.success(httpParam.json ? JSON.parse(xhr.responseText) : xhr.responseText);
      return;
    }
    if (xhr.status != 0 && xhr.readyState != 1) {
      httpParam.errror(xhr);
    }
  };
  //初始化请求
  xhr.open(
    httpParam.type,
    httpParam.url,
    httpParam.async
  );
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  for (const key in httpParam.headers) {
    xhr.setRequestHeader(key, httpParam.headers[key]);
  }
  let dataStr = '';
  for (const key in httpParam.param) {
    dataStr += key + "=" + httpParam.param[key];
  }
  try {
    xhr.send(dataStr);
  } catch (error) {
    toLogin();
    //  console.log(error)
  }
}

ajax.post = function (url, param, success, errror) {
  ajax({ url: url, param: param, success: success, error: errror, type: 'post' })
}
ajax.get = function (url, param, success, errror) {
  ajax({ url: url, param: param, success: success, error: errror, type: 'post' })
}
export default { post, get, ajax, init, ipAddress }

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/api/permission.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,50 @@

import http from '@/../src/api/http.js'
import buttons from '@/../config/buttons.js'

// let permission = {
//     install(Vue, config) {
//         Vue.prototype.permission = {

//         }
//     }
// }
//Vue.use(permission);
let $vue = null;
let permission = {
    init(vue) {
        $vue = vue;
    },
    getMenu() {
        return http.get("/api/getTreeMenu");
    }, getButtons(path, extra, table) {//extra自定额外按钮
        //  console.log('grid');
        //table获取指定表的权限
        if (table) {
            table='/'+table;
        }
        let permission = $vue.$store.getters.getPermission(table || path);
        if (!permission) {
            permission = $vue.$store.getters.getPermission(path.substring(1));
            if (!permission) {
                $vue.permission.to401();
                return;
            }
        }

        let permissions = permission.permission;//.split(',');
        let gridButtons = buttons.filter(item => {
            return !item.value || permissions.indexOf(item.value) != -1
        });
        if (extra && extra instanceof Array) {
            gridButtons.push(...extra)
        }
        return gridButtons;
    }, to401() {
        $vue.$router.push({
            path: '/401'
        });
    }
}

export default permission;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/css/ViewContainer.less

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,83 @@

.layout-container {
  // border-top: 1px solid #eee;
  background: #eee;
    // padding: 15px;
    /* margin-bottom: 40px; */
  }
  // .animated {
  //   -webkit-animation-duration: 1s;
  //   animation-duration: 1s;
  //   -webkit-animation-fill-mode: both;
  //   animation-fill-mode: both;
  // }
  // .animated.infinite {
  //   -webkit-animation-iteration-count: infinite;
  //   animation-iteration-count: infinite;
  // }
  // .animated.hinge {
  //   -webkit-animation-duration: 2s;
  //   animation-duration: 2s;
  // }
  // .animated.bounceIn,
  // .animated.bounceOut,
  // .animated.flipOutX,
  // .animated.flipOutY {
  //   -webkit-animation-duration: 0.75s;
  //   animation-duration: 0.75s;
  // }
  // @-webkit-keyframes fadeInDown {
  //   0% {
  //     opacity: 0;
  //     -webkit-transform: translate3d(0, -100%, 0);
  //     transform: translate3d(0, -100%, 0);
  //   }
  //   to {
  //     opacity: 1;
  //     -webkit-transform: none;
  //     transform: none;
  //   }
  // }
  // @keyframes fadeInDown {
  //   0% {
  //     opacity: 0;
  //     -webkit-transform: translate3d(0, -100%, 0);
  //     transform: translate3d(0, -100%, 0);
  //   }
  //   to {
  //     opacity: 1;
  //     -webkit-transform: none;
  //     transform: none;
  //   }
  // }
  // .fadeInDown {
  //   -webkit-animation-name: fadeInDown;
  //   animation-name: fadeInDown;
  // }
  
  // @-webkit-keyframes slideInDown {
  //   0% {
  //     -webkit-transform: translate3d(0, -100%, 0);
  //     transform: translate3d(0, -100%, 0);
  //     visibility: visible;
  //   }
  //   to {
  //     -webkit-transform: translateZ(0);
  //     transform: translateZ(0);
  //   }
  // }
  // @keyframes slideInDown {
  //   0% {
  //     -webkit-transform: translate3d(0, -100%, 0);
  //     transform: translate3d(0, -100%, 0);
  //     visibility: visible;
  //   }
  //   to {
  //     -webkit-transform: translateZ(0);
  //     transform: translateZ(0);
  //   }
  // }
  // .slideInDown {
  //   -webkit-animation-name: slideInDown;
  //   animation-name: slideInDown;
  // }

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/css/ViewGrid.less

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,229 @@
.view-container{
  padding: 15px;
  background: white;
}
.view-header {
    height: 45px;
    position: relative;
    padding-bottom: 11px;
    display: -webkit-flex;
    display: flex;
    .search-line {
        flex: 1;
        margin-left: 50px;
        display: flex;
        text-align: right;
      }
      .search-line > div {
        margin-left: 30px;
        margin-right: 20px;
      }
      .search-line > div > div{
        width: 200px;
        text-align: left;
      }
      .search-line > div:first-child{
        flex: 1;
      }
      .search-line > div .ivu-select-dropdown{
        max-height: 300px;
      }
      // .btn-group > button {
      //   text-align: right;
      // }
      .btn-group{
        white-space: nowrap;
        button {
          margin-left: 10px;
          // padding: 5px 16px;
        }
        .dropdown{
          height: 31px;   
          padding-right: 9px;
          padding-left: 11px;
          border-top-right-radius: 0px;
          border-bottom-right-radius: 0px;
        }
        .r-dropdown{
          height: 31px;
          margin-left: 0px;
          padding-left: 5px;
          padding-right: 5px;
          border-bottom-left-radius: 0px;
          border-left: 1px solid #eee;
          border-top-left-radius: 0;
        }
      }
      // .btn-group button {
      //   margin-left: 10px;
      //   // padding: 5px 16px;
      // }
      // .btn-group .dropdown {
      //   position: relative;
      //   padding: 5px 34px 5px 10px;
      // }
      // .btn-group .dropdown span i.ivu-icon-ios-arrow-down {
      //   top: 0px;
      //   height: 34px;
      //   border-left: 1px solid;
      //   height: 100%;
      //   position: absolute;
      //   margin-left: 10px;
      //   padding: 9px 5px 5px 5px;
      // }
      // .btn-group .dropdown .ivu-dropdown {
      //   bottom: 0;
      //   right: 0;
      //   left: 0;
      //   position: absolute;
      // }
      .btn-group .ivu-dropdown-item {
        text-align: left !important;
      }
      .btn-group .ivu-dropdown-item:not(:last-child) {
        border-bottom: 1px dotted #eee;
      }
      .desc-text {
        margin-top: 5px;
        font-weight: bold;
        margin-bottom: 3px;
        font-size: 15px;
        color: #607d8b;
        white-space: nowrap;
        border-bottom: 2px solid #009688;
      }
      .desc-text .ivu-icon {
        font-size: 20px;
        bottom: 2px;
        position: relative;
      }
      .search-box {
        background: #fefefe;
        margin-top: 45px;
        border: 1px solid #ececec;
        position: absolute;
        z-index: 999;
        left: 0;
        right: 0;
       //  width: 100%;
         padding: 25px 40px;
       padding-bottom: 0;
        box-shadow: 0px 7px 18px -12px #bdc0bb;
      }
      .notice {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
        top: 12px;
        left: 10px;
      }
  }

.table-info-cell-title {
    background-color: #f5f5f5 !important;
  }
.iview-com {
  background: #f3f3f3;
  > div.item{
    // margin-bottom: 10px;
  
    margin-bottom: 12px;
    background: white;
  }
  > div.form-item{
    padding: 8px 16px 7px 16px;
    //box-shadow: 0 1px 7px rgb(199, 199, 199);
  }
  > div.table-item{
    // padding: 0px 16px 12px 16px;
    border: 1px solid #e8e8e8;
    box-shadow: 0 1px 7px rgb(199, 199, 199);
  }
    .v-text{
      line-height: 27px;
    }
    .form-text{
      position: relative;
      /* height: 38px; */
      /* line-height: 38px; */
      /* padding: 0 15px; */
      // border-bottom: 1px solid #e4e4e4; 
      border-bottom: 1px solid #eee;
      /* border-radius: 2px 2px 0 0; */
      font-size: 14px;
      margin-bottom: 14px;
      .title{
        border-bottom: 2px solid #00BCD4;
        color: #009688;
        font-weight: bold;
        letter-spacing: 1px;
        // border-bottom-right-radius: 5px;
        // border-top-left-radius: 5px;
        padding: 6px 0;
        // background: #009688;
        // color: white;
      }
    .icon{
      color: #00BCD4;
      font-size: 19px;
      position: relative;
      top: -1px;
    }
    }
  }

  .form-closex {
    text-align: right;
    padding-bottom: 24px;
  }
  .form-closex button {
    margin-left: 10px;
    padding: 4px 13px;
  }
  .grid-detail{
    // margin-left:16px;
    // // margin-top:-28px;
    // padding-bottom: 16px;
  }
 .toolbar{
  padding: 3px 15px;
  width: 100%;
   display: flex;
  //  padding: 3px;
   border-top: 1px solid #eae9e9;
  // border-top-left-radius: 5px;
  // // background: #37aba0;
  // border-top-right-radius: 5px;
    // border: 1px solid #f1f1f1;
   .title{
    line-height: 28px;
    border-bottom: 2px solid #03A9F4;
    font-size: 14px;
    font-weight: bolder;
    margin-bottom: 0;
    color: #828282;
    .icon{
      color: #009688;
      font-size: 18px;
    }
   }
    .btns{
      line-height: 28px;
      flex: 1;
      text-align: right;
      margin-right: 12px;
      button{
        border: none;
        margin-left:15px;
        border: 0px;
        color: #009688;
      }
      button:hover{
        color: #FF9800;
        border-color: #FF9800;
        border: none;
      }

    }
 }

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/css/common.less

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,75 @@
*{
  box-sizing:border-box;
  -moz-box-sizing:border-box; /* Firefox */
  -webkit-box-sizing:border-box; /* Safari */
}
.el-pager li{
  font-weight: 100;
  margin-right: 9px;
  border: 1px solid #eee;
  border-radius: 3px;
  min-width: 28px;
}
.el-pager li.active,.el-pager li:hover{
  background: #ed4014;
  color: white;
}
.el-pagination__editor.el-input .el-input__inner{
  height: 23px;
}


.animated {
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@media (print), (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
.ivu-message{
  z-index: 999999999 !important;
}
.ivu-form-item-content{
  text-align: left;
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/imgs/error-img.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/imgs/error.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/imgs/favicon.ico

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/imgs/log.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/imgs/wcs_x.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/imgs/widesea.jpg

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/imgs/wms_d.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/imgs/wms_x.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/logo.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/script/common.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2 @@
var test1 = function () { alert(11) }
export { test1 }

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/assets/script/extend.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
//对vue参数进行扩展
var extend = function (param) { 
    console.log(param)
 }
export { extend }

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/Audit.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,42 @@
<template>
  <div>
    <Alert show-icon>当前选中{{auditParam.rows}}条记录待审核..</Alert>
    <Form :label-width="85" style="padding-right: 13px;padding-top: 8px;">
      <FormItem label="审核结果：">
        <RadioGroup v-model="auditParam.status">
          <Radio v-for="item in auditParam.data" :key="item.status" :label="item.status">
            <span>{{item.text}}</span>
          </Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="备 æ³¨ï¼š">
        <Input
          v-model="auditParam.reason"
          type="textarea"
          :autosize="{minRows: 4,maxRows: 10}"
          placeholder="审核备注..."
        ></Input>
      </FormItem>
    </Form>
  </div>
</template>
<script>
export default {
  props: {
    auditParam: {
      type: Object,
      default: () => {
        return {
          auditParam: {
            rows: 0,
            model: false,
            status: -1,
            reason: "",
            data: [], //[{ text: "通过", status: 1 }, { text: "拒绝", status: 2 }]
          },
        };
      },
    },
  },
};
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/Empty.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,2 @@
<template>
</template>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/QuickSearch.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,52 @@
<template>
  <div>
    <Select
      clearable
      v-if="singleSearch.type=='drop'||singleSearch.type=='dropList'||
              singleSearch.type=='select'||singleSearch.type=='selectList'"
      v-model="searchFormFileds[singleSearch.field]"
      :placeholder="'请选择'+singleSearch.title"
    >
      <Option
        v-for="(kv,kvIndex) in singleSearch.data"
        :key="kvIndex"
        :value="kv.key||''"
      >{{kv.value}}</Option>
    </Select>

    <DatePicker
      clearable
      v-else-if="singleSearch.type=='date'||singleSearch.type=='datetime'"
      :type="singleSearch.type+'range'"
      :format="singleSearch.type=='date'? 'yyyy-MM-dd':'yyyy-MM-dd HH:mm:ss'"
      :placeholder="singleSearch.title"
      v-model="searchFormFileds[singleSearch.field]"
    ></DatePicker>

    <Input
      clearable
      v-else
      v-model="searchFormFileds[singleSearch.field]"
      :placeholder="singleSearch.title"
      @on-keypress="tiggerPress"
    />
  </div>
</template>
<script>
export default {
  props: {
    singleSearch: {
      type: Object,
      default: {}
    },
    searchFormFileds: {
      type: Object,
      default: {}
    },
    tiggerPress: {
      type: Function,
      default: () => {}
    }
  }
};
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/RedirectError.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,54 @@
<template>
  <div class="middle-box">
    <div class="text-center animated fadeInDown">
      <h1>{{errorNumber}}</h1>
      <h3 class="font-bold">页面未找到！</h3>
      <slot></slot>
      <div class="error-desc">{{text}}</div>
      <div class="back">
        <Button type="success" @click="backHome" icon="md-arrow-round-back">返回首页</Button>
      </div>
    </div>
  </div>
</template>
  <script>
import { Script } from "vm";
export default {
  props: {
    errorNumber: {
      type: String,
      default: "500",
    },
    text: {
      type: String,
      default: "唉...好像出了点问题~",
    },
  },
  methods: {
    backHome: function () {
      this.$router.push({
        path: "/home",
      });
    },
  },
};
</script>
<style lang="less" scoped>
body {
  background-color: #fff;
}
.middle-box {
  text-align: center;
  padding-top: 80px;
  height: 100%;
  // background: #eee;
  h1 {
    font-size: 140px;
    font-weight: 100;
  }
  .back {
    padding: 10px;
  }
}
</style>


 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/RouterLoading.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,105 @@
<template>
  <div class="router-loading" style="background: #eeeeee5c;">
    <div class="spanner">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>
<style scoped>
.router-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 100px;
  text-align: center;
  padding-top: 200px;
  color: #808080;
  z-index: 9999;
}
.spanner {
  width: 100px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}
.router-loading span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #04d2e7;
  position: absolute;
  animation: r_load 1.04s ease infinite;
}
@keyframes r_load {
  0% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.3);
    opacity: 0.5;
  }
}
.router-loading span:nth-child(1) {
  left: 0;
  top: 50%;
  margin-top: -10px;
  animation-delay: 0.13s;
}
.router-loading span:nth-child(2) {
  left: 14px;
  top: 14px;
  animation-delay: 0.26s;
}
.router-loading span:nth-child(3) {
  left: 50%;
  top: 0;
  margin-left: -10px;
  animation-delay: 0.39s;
}
.router-loading span:nth-child(4) {
  top: 14px;
  right: 14px;
  animation-delay: 0.52s;
}
.router-loading span:nth-child(5) {
  right: 0;
  top: 50%;
  margin-top: -10px;
  animation-delay: 0.65s;
}
.router-loading span:nth-child(6) {
  right: 14px;
  bottom: 14px;
  animation-delay: 0.78s;
}
.router-loading span:nth-child(7) {
  bottom: 0;
  left: 50%;
  margin-left: -10px;
  animation-delay: 0.91s;
}
.router-loading span:nth-child(8) {
  bottom: 14px;
  left: 14px;
  animation-delay: 1.04s;
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/UploadExcel.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,150 @@
<template>
  <div class="upload-container">
    <a :href="template.url" ref="template"></a>
    <div class="button-group">
      <Upload ref="uploadFile" :max-size="maxSize" :before-upload="beforeUpload" :action="url">
        <Button icon="ios-cloud-upload-outline">选择文件</Button>
      </Upload>
      <Button
        v-if="template.url"
        type="info"
        icon="md-arrow-round-down"
        @click="dowloadTemplate"
        :loading="loadingStatus"
      >下载模板</Button>
      <Button type="error" icon="md-arrow-round-up" @click="upload" :loading="loadingStatus">上传文件</Button>
    </div>
    <div class="alert">
      <Alert show-icon>只能上传excel文件,文件大小不超过5M</Alert>
    </div>
    <Divider>文件列表</Divider>
    <div class="file-info" v-if="file!= null">
      <span>文件名：{{file.name}}</span>
      <span>大小{{(file.size / 1024).toFixed(2)}}KB</span>
    </div>
    <slot></slot>
  </div>
</template>
<script>
import { error } from "util";
//目前只支持单个Excel上传，其他功能开发中...
export default {
  components: {},
  props: {
    url: {
      type: String,
      default: ""
    },
    template: {
      //下载模板配置
      type: Object,
      default: () => {
        return {
          url: "", //模板下载路径，如果没有模板路径，则不显示下载模板功能
          fileName: "未定义文件名" //下载模板的文件名
        };
      }
    }
  },
  data() {
    return {
      maxSize: 102 * 5,
      model: true,
      file: null,
      loadingStatus: false
    };
  },
  methods: {
    getFileType() {
      let fileName =
        this.file.name
          .split(".")
          .pop()
          .toLocaleLowerCase() || "";
      if (["numbers", "csv", "xls", "xlsx"].indexOf(fileName) == -1) {
        this.$message.error("只能选择excel文件");
        return false;
      }
      return true;
    },
    beforeUpload(file) {
      this.file = file;
      if (!this.getFileType()) {
        return false;
      }
      return false;
    },
    upload() {
      if (!this.url) {
        return this.$message.error("没有配置好Url");
      }
      if (!this.file) {
        return this.$message.error("请选择文件");
      }
      var forms = new FormData();
      forms.append("fileInput", this.file);
      this.loadingStatus = true;
      this.http.post(this.url, forms).then(
        x => {
          // this.$refs.uploadFile.clearFiles();
          this.loadingStatus = false;
          this.file = null;
          this.$emit('importExcelAfter',x);
          this.$Message[x.status?'success':'error'](x.message);
          //刷新表格数据
        },
        error => {
          this.loadingStatus = false;
        }
      );
    },
    dowloadTemplate() {
      let url = this.template.url;
      let xmlResquest = new XMLHttpRequest();
      xmlResquest.open("GET", url, true);
      xmlResquest.setRequestHeader("Content-type", "application/json");
      xmlResquest.setRequestHeader(
        "Authorization",
        this.$store.getters.getToken()
      );
      let fileName = this.template.fileName + ".xlsx";
      let elink = this.$refs.template;
      xmlResquest.responseType = "blob";
      let $_vue = this;
      this.loadingStatus = true;
      xmlResquest.onload = function(oEvent) {
        $_vue.loadingStatus = false;
        if (xmlResquest.response.type == "application/json") {
          return $_vue.message.error("未找到下载文件");
        }
        let content = xmlResquest.response;
        elink.download = fileName;
        let blob = new Blob([content]);
        elink.href = URL.createObjectURL(blob);
        elink.click();
      };
      xmlResquest.send();
    }
  }
};
</script>
<style lang="less" scoped>
.upload-container {
  display: inline-block;
  width: 100%;
  padding: 10px;
  border: 1px dashed #2d8cf0;
  min-height: 250px;
  border-radius: 5px;
  .alert {
    margin-top: 43px;
  }
  .button-group > * {
    float: left;
    margin-right: 10px;
  }
  .file-info > span {
    margin-right: 20px;
  }
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/UploadImg.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,192 @@
<template>
  <div class="upload-container">
    <a :href="template.url" ref="template"></a>

    <!-- <div class="alert">
      <Alert show-icon>只能上传excel文件,文件大小不超过5M</Alert>
    </div>
    <Divider>文件列表</Divider>-->
    <div class="imgs">
      <div class="item" :width="imgWidth" v-for="(item,index) in imgs" :key="index">
        <!-- <div style="padding:5px;">图片上传功能开发中</div> -->
        <div class="remove">
          <Icon @click="remove(index)" type="md-close" />
        </div>
        <img :width="imgWidth" @click="viewImg(item.src)" v-if="item.src" :src="item.src" />
      </div>
      <div v-show="imgs.length==0" class="img-selector">
        <Upload ref="uploadFile" :max-size="maxSize" :before-upload="beforeUpload" :action="url">
          <div>
            <Icon type="ios-add" />
          </div>
        </Upload>
      </div>
    </div>
    <!-- <div class="file-info" v-if="file!= null">
      <span>文件名：{{file.name}}</span>
      <span>大小{{(file.size / 1024).toFixed(2)}}KB</span>
    </div>-->
    <slot></slot>
  </div>
</template>
<script>
import { error } from "util";
//目前只支持单个Excel上传，其他功能开发中...
export default {
  components: {},
  props: {
    src: {
      type: String,
      default: ""
    },
    url: {
      type: String,
      default: ""
    },
    template: {
      //下载模板配置
      type: Object,
      default: () => {
        return {
          url: "", //模板下载路径，如果没有模板路径，则不显示下载模板功能
          fileName: "未定义文件名" //下载模板的文件名
        };
      }
    },
    width: { //默认图片200宽度
      type: Number,
      default: 200
    }
  },
  data() {
    return {
      imgWidth: this.$props.width,
      imgs: [],
      maxSize: 102 * 5,
      model: true,
      file: null,
      loadingStatus: false
    };
  },
  methods: {
    viewImg(src) {
      window.open(src);
    },
    remove(index) {
      this.imgs.splice(index);
    },
    getFileType() {
      let fileName =
        this.file.name
          .split(".")
          .pop()
          .toLocaleLowerCase() || "";
      if (["jpg", "jpeg", "png"].indexOf(fileName) == -1) {
        this.$message.error("只能选择jpg/jpeg/png图片");
        return false;
      }
      this.imgs.push({ src: window.URL.createObjectURL(this.file) });
      return true;
    },
    beforeUpload(file) {
      this.file = file;
      if (!this.getFileType()) {
        return false;
      }
      return false;
    },
    upload() {
      if (!this.url) {
        return this.$message.error("没有配置好Url");
      }
      if (!this.file) {
        return this.$message.error("请选择文件");
      }
    },
    dowloadTemplate() {}
  },
  created() {
    if (this.src) {
      this.imgs.push({ src: this.src });
    }
  }
};
</script>
<style lang="less" scoped>
.upload-container {
  // display: inline-block;
  // width: 100%;
  // padding: 10px;
  // border: 1px dashed #2d8cf0;
  // min-height: 250px;
  // border-radius: 5px;
  .alert {
    margin-top: 43px;
  }
  .button-group > * {
    float: left;
    margin-right: 10px;
  }
  .file-info > span {
    margin-right: 20px;
  }
  .img-selector {
    // border: 1px dashed #2d8cf0;
    i {
      font-size: 60px;
    }
  }
  .imgs {
    width: 100%;
    display: inline-block;
    .item:hover {
      cursor: pointer;
      .remove {
        display: block;
      }
    }
    > .item {
      position: relative;
      text-align: center;
      float: left;
      // width: 90px;
      line-height: 80px;
      margin-right: 20px;
      // img {
      //   width: 100px;
      // }
      .remove {
        display: none;
        position: absolute;
        top: 0;
        width: 100%;
        line-height: 20px;
        background: #9e9e9e;
        text-align: right;
        padding: 5px 10px;
        opacity: 0.7;
        font-size: 22px;
        color: #f56234;
        i {
          cursor: pointer;
        }
      }
    }
    .img-selector {
      color: #9e9e9e;
      text-align: center;
      float: left;
      // width: 90px;
      // line-height: 80px;
    }
    .img-selector:hover {
      cursor: pointer;
    }
  }
}
</style>
<style scoped>
.img-selector >>> .ivu-upload-select {
  border: 1px dashed #2d8cf0;
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/ViewGrid.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,481 @@
<template>
  <div class="layout-container">
    <a :href="exportHref" ref="export"></a>
    <vol-box :model.sync="viewModel" :height="450" :width="width" :title="table.cnName+'数据结构'">
      <div slot="content">
        <Table :columns="viewColumns" :data="viewData"></Table>
      </div>
    </vol-box>
    <!--审核(异步点击按钮时才加载待完)-->
    <vol-box :model.sync="auditParam.model" :height="300" :width="550" :title="table.cnName+'--审核'">
      <div slot="content">
        <Audit :auditParam="auditParam"></Audit>
      </div>
      <div slot="footer">
        <Button type="success" icon="md-checkmark-circle" @click="saveAudit">审核</Button>
      </div>
    </vol-box>

    <!--导入excel功能-->
    <vol-box
      v-if="upload.url"
      :model.sync="upload.excel"
      :height="285"
      :width="600"
      :title="table.cnName+'--导入'"
    >
      <UploadExcel @importExcelAfter="importAfter" :url="upload.url" :template="upload.template"></UploadExcel>
    </vol-box>

    <!--头部自定义组件-->
    <gridHeader ref="gridHeader" @parentCall="parentCall"></gridHeader>
    <!--主界面查询与table表单布局-->
    <div class="view-container">
      <div class="view-header">
        <div class="desc-text">
          <Icon type="md-apps" />
          <span>{{table.cnName}}</span>
        </div>
        <div class="notice">
          <!-- <Tooltip content="6666666666666666" placement="bottom">
            <a>Bottom Center</a>
          </Tooltip>-->
          <a class="text" :title="extend.text">{{extend.text}}</a>
        </div>
        <!--快速查询字段-->
        <div class="search-line">
          <QuickSearch
            v-if="singleSearch"
            :singleSearch="singleSearch"
            :searchFormFileds="searchFormFileds"
            :tiggerPress="quickSearchKeyPress"
          ></QuickSearch>
        </div>
        <!--操作按钮组-->
        <div class="btn-group">
          <Button
            v-for="(btn,bIndex) in splitButtons"
            :key="bIndex"
            :type="btn.type"
            :class="btn.class"
            @click="onClick(btn.onClick)"
          >
            <Icon :type="btn.icon" />
            {{btn.name}}
          </Button>
          <Dropdown trigger="click" @on-click="changeDropdown" v-if="buttons.length> maxBtnLength">
            <Button type="info" ghost>
              æ›´å¤š
              <Icon type="ios-arrow-down"></Icon>
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem
                :name="item.name"
                v-for="(item,dIndex) in buttons.slice(maxBtnLength,buttons.length)"
                :key="dIndex"
              >
                <Icon :type="item.icon"></Icon>
                {{item.name}}
              </DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>

        <!--查询条件-->
        <div class="search-box" v-show="searchBoxShow">
          <vol-form
            ref="searchForm"
            :label-width="labelWidth"
            :formRules="searchFormOptions"
            :formFileds="searchFormFileds"
          >
            <div class="form-closex" slot="footer">
              <Button size="small" type="info" ghost @click="search">
                <Icon type="md-search" />查询
              </Button>
              <!-- <Icon type="md-close-circle" color="color" size="20" /> -->
              <Button size="small" type="success" ghost @click="resetSearch">
                <Icon type="md-refresh" />重置
              </Button>
              <Button size="small" type="warning" ghost @click="searchBoxShow=!searchBoxShow">
                <Icon type="md-power" />关闭
              </Button>
            </div>
          </vol-form>
        </div>
        <vol-box
          v-if="boxInit"
          :model.sync="boxModel"
          :title="table.cnName+(getCurrentAction())"
          :width="boxOptions.width"
          :height="boxOptions.height"
          :padding="0"
        >
          <!--明细头部自定义组件-->
          <div class="iview-com" slot="content">
            <modelHeader ref="modelHeader" class="model-header" @parentCall="parentCall"></modelHeader>
            <div class="item form-item">
              <div class="form-text v-text">
                <span class="title">
                  <Icon type="ios-create-outline" />
                  {{table.cnName}}
                </span>
              </div>
              <vol-form
                ref="form"
                :label-width="boxOptions.labelWidth"
                :formRules="editFormOptions"
                :formFileds="editFormFileds"
              ></vol-form>
            </div>
            <!--明细body自定义组件-->
            <modelBody class="model-body" ref="modelBody" @parentCall="parentCall"></modelBody>
            <div v-if="detail.columns&&detail.columns.length>0" class="grid-detail table-item item">
              <div class="toolbar">
                <div class="title form-text">
                  <span>
                    <Icon type="md-list-box" />
                    {{detail.cnName}}
                  </span>
                </div>
                <!--明细表格按钮-->
                <div class="btns">
                  <Button
                    v-for="(btn,bIndex) in detailOptions.buttons"
                    :key="bIndex"
                    v-show="!btn.hasOwnProperty('hidden')||!btn.hidden"
                    @click="onClick(btn.onClick)"
                    type="dashed"
                    ghost
                    :icon="btn.icon"
                    size="small"
                  >{{btn.name}}</Button>
                </div>
              </div>
              <vol-table
                ref="detail"
                @loadBefore="loadInternalDetailTableBefore"
                @loadAfter="loadDetailTableAfter"
                @rowChange="detailRowOnChange"
                :url="detailOptions.url"
                :index="detailOptions.edit"
                :tableData="detailOptions.data"
                :columns="detailOptions.columns"
                :pagination="detailOptions.pagination"
                :height="detailOptions.height"
                :single="detailOptions.single"
                :pagination-hide="false"
                :defaultLoadPage="detailOptions.load"
                :doubleEdit="detailOptions.doubleEdit"
                :beginEdit="detailOptions.beginEdit"
                :endEditBefore="detailOptions.endEditBefore"
                :endEditAfter="detailOptions.endEditAfter"
                :summary="detailOptions.summary"
              ></vol-table>
            </div>
            <!--明细footer自定义组件-->
            <modelFooter ref="modelFooter" class="model-footer" @parentCall="parentCall"></modelFooter>
          </div>

          <div slot="footer">
            <Button
              v-for="(btn,bIndex) in boxButtons"
              :key="bIndex"
              :type="btn.type"
              v-show="!btn.hasOwnProperty('hidden')||!btn.hidden"
              :disabled="btn.hasOwnProperty('disabled')&&!!btn.disabled"
              @click="onClick(btn.onClick)"
            >
              <Icon :type="btn.icon" />
              {{btn.name}}
            </Button>
            <Button type="info" @click="boxModel=false">
              <Icon type="md-close" />关闭
            </Button>
          </div>
        </vol-box>
      </div>
      <!--body自定义组件-->
      <gridBody ref="gridBody" @parentCall="parentCall"></gridBody>
      <!--table表格-->
      <div class="grid-container">
        <vol-table
          ref="table"
          :single="single"
          @loadBefore="loadTableBefore"
          @loadAfter="loadTableAfter"
          @rowChange="rowOnChange"
          :tableData="[]"
          :linkView="linkData"
          :columns="columns"
          :pagination="pagination"
          :height="height"
          :max-height="tableMaxHeight"
          :pagination-hide="false"
          :url="url"
          :defaultLoadPage="load"
          :summary="summary"
        ></vol-table>
      </div>
    </div>

    <!--footer自定义组件-->
    <gridFooter ref="gridFooter" @parentCall="parentCall"></gridFooter>
  </div>
</template>

<script>
const _const = {
  EDIT: "update",
  ADD: "Add",
  VIEW: "view",
  PAGE: "getPageData",
  AUDIT: "audit",
  DEL: "del",
  EXPORT: "Export", //导出操作返回加密后的路径
  DOWNLOAD: "DownLoadFile", //导出文件
  DOWNLOADTEMPLATE: "DownLoadTemplate", //下载导入模板
  IMPORT: "Import", //导入(导入表的Excel功能)
  UPLOAD: "Upload", //上传文件
};
const comName = [
  "gridHeader",
  "gridBody",
  "gridFooter",
  "modelHeader",
  "modelBody",
  "modelFooter",
];
import Empty from "@/components/basic/Empty.vue";
var $viewGridVue, $this;
let _components = {
  gridHeader: Empty,
  gridBody: Empty,
  gridFooter: Empty,
  modelHeader: Empty,
  //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
  // modelHeader: {
  //   template: ""//'<Alert type="success">静态页面发布目前主要用于的是移动端</Alert>'
  // },
  // gridHeader: function(resolve, reject) {
  //   setTimeout(function() {
  //     // å‘ `resolve` å›žè°ƒä¼ é€’组件定义
  //     resolve({
  //       template: ""
  //     });
  //   }, 1000);
  // },
  modelBody: Empty,
  modelFooter: Empty,
};
import VolTable from "@/components/basic/VolTable.vue";
var vueParam = {
  components: {
    ..._components,
    VolForm: () => import("@/components/basic/VolForm.vue"),
    VolBoxForm: () => import("@/components/basic/VolBoxForm.vue"),
    VolTable: VolTable, //() => import("@/components/basic/VolTable.vue"),
    VolBox: () => import("@/components/basic/VolBox.vue"),
    QuickSearch: () => import("@/components/basic/QuickSearch.vue"),
    Audit: () => import("@/components/basic/Audit.vue"),
    UploadExcel: () => import("@/components/basic/UploadExcel.vue"),
  },
  props: {},
  data() {
    return {
      _inited: false,
      single: false, //表是否单选
      const: _const, //增删改查导入导出等对应的action
      boxInit: false, //新建或编辑的弹出框初化状态，默认不做初始化，点击新建或编辑才初始化弹出框
      searchBoxShow: false, //高级查询(界面查询后的下拉框点击触发)
      singleSearch: {}, //快速查询字段
      exportHref: "",
      currentAction: _const.ADD, //当新建或编辑时，记录当前的状态:如当前操作是新建
      currentRow: {}, //当前编辑或查看数据的行
      closable: false,
      boxModel: false, //弹出新建、编辑框
      width: 700, //弹出框查看表数据结构
      labelWidth: 100, //高级查询的标签宽度
      viewModel: false, //查看表结构的弹出框
      viewColumns: [], //查看表结构的列数据
      viewData: [], //查看表结构信息
      maxBtnLength: 3, //界面按钮最多显示的个数，超过的数量都显示在更多中
      buttons: [], //查询界面按钮  å¦‚需要其他操作按钮，可在表对应的.js中添加(如:Sys_User.js中buttons添加其他按钮)
      splitButtons: [],
      uploadfiled: [], //上传文件图片的字段
      boxButtons: [], //弹出框按钮 å¦‚需要其他操作按钮，可在表对应的.js中添加
      dicKeys: [], //当前界面所有的下拉框字典编号及数据源
      hasKeyField: [], //有字典数据源的字段
      keyValueType: { _dinit: false },
      url: "", //界面表查询的数据源的url
      hasDetail: false, //是否有从表(明细)表格数据
      initActivated: false,
      load: true, //是否默认加载表数据
      activatedLoad: false, //页面触发actived时是否刷新页面数据
      summary: false, //查询界面table是否显示合计
      //需要从远程绑定数据源的字典编号,如果字典数据源的查询结果较多，请在onInit中将字典编号添加进来
      //只对自定sql有效
      remoteKeys: [],
      // detailUrl: "",
      detailOptions: {
        //弹出框从表(明细)对象
        //从表配置
        buttons: [], //弹出框从表表格操作按钮,目前有删除行，添加行，刷新操作，如需要其他操作按钮，可在表对应的.js中添加
        cnName: "", //从表名称
        key: "", //从表主键名
        data: [], //数据源
        columns: [], //从表列信息
        edit: true, //明细是否可以编辑
        single: false, //明细表是否单选
        load: true,
        delKeys: [], //当编辑时删除当前明细的行主键值
        url: "", //从表加载数据的url
        pagination: { total: 0, size: 100, sortName: "" }, //从表分页配置数据
        height: 0, //默认从表高度
        doubleEdit: true, //使用双击编辑
        currentReadonly: false, //当前用户没有编辑或新建权限时，表单只读(可用于判断用户是否有编辑或新建权限)
        //开启编辑时
        beginEdit: (row, column, index) => {
          return true;
        },
        //结束编辑前
        endEditBefore: (row, column, index) => {
          return true;
        },
        //结束编辑后
        endEditAfter: (row, column, index) => {
          return true;
        },
      },
      auditParam: {
        //审核对象
        rows: 0, //当前选中审核的行数
        model: false, //审核弹出框
        status: -1, //审核结果
        reason: "", //审核原因
        //审核选项(可自行再添加)
        data: [
          { text: "通过", status: 1 },
          { text: "拒绝", status: 2 },
        ],
      },
      upload: {
        //导入上传excel对象
        excel: false, //导入的弹出框是否显示
        url: "", //导入的路径,如果没有值，则不渲染导入功能
        template: {
          //下载模板对象
          url: "", //下载模板路径
          fileName: "", //模板下载的中文名
        },
        init: false, //是否有导入权限，有才渲染导入组件
      },
      height: 0, //表高度
      tableHeight: 0, //查询页面table的高度
      tableMaxHeight: 0, //查询页面table的最大高度
      pagination: { total: 0, size: 30, sortName: "" }, //从分页配置数据
      boxOptions: {
        saveClose: true,
        labelWidth: 100,
        height: 0,
        width: 0,
        summary: false, //弹出框明细table是否显示合计
      }, //saveClose新建或编辑成功后是否关闭弹出框//弹出框的标签宽度labelWidth
    };
  },
  methods: {
    //方法已放到ViewGridConfig文件夹下，加载时会合并ViewGridConfig下的方法到methods中
    mergeComponents() {
      if (this.extend.components) {
        for (const key in this.extend.components) {
          if (this.extend.components[key]) {
            this.$options.components[key] = this.extend.components[key];
          } else {
            this.$options.components[key] = Empty;
          }
        }
      }
    },
  },
  activated() {
    //2020.06.25增加activated方法
    this.onActivated && this.onActivated();
    if (!this._inited) {
      this._inited = true;
      return;
    }
    if (this.activatedLoad) {
      this.refresh();
    }
    this.mergeComponents();
  },
  mounted() {
    this.mounted();
  },
  beforeCreate() {},
  created: function () {
    //在其他方法中如果拿不到this，请使用$viewGridVue或$this
    $viewGridVue = this;
    $this = this;
    //合并扩展组件
    this.mergeComponents();
    //合并自定义业务扩展方法
    if (this.extend.methods) {
      for (const key in this.extend.methods) {
        this[key] = this.extend.methods[key];
      }
    }
    //如果没有指定排序字段，则用主键作为默认排序字段
    this.pagination.sortName = this.table.sortName || this.table.key;
    this.initBoxButtons(); //初始化弹出框与明细表格按钮
    this.onInit(); //初始化前，如果需要做其他处理在扩展方法中覆盖此方法
    //初始编辑框等数据
    this.initBoxHeightWidth();

    this.initDicKeys(); //初始下框数据源

    this.onInited(); //初始化后，如果需要做其他处理在扩展方法中覆盖此方法
    this.splitButtons = this.getButtons();
  },
  beforeUpdate: function () {},
  updated: function () {},
};

import props from "./ViewGridConfig/props.js";
import methods from "./ViewGridConfig/methods.js";

//合并属性
vueParam.props = Object.assign(vueParam.props, props);
//合并方法
vueParam.methods = Object.assign(
  vueParam.methods,
  methods,
  props.extend.methods
);
// vueParam.methods=methods;
export default vueParam;
import "@/assets/css/ViewContainer.less";
import "@/assets/css/ViewGrid.less";
</script>

<style scoped>
.btn-group >>> .ivu-select-dropdown {
  padding: 0px !important;
  right: 3px;
}
.btn-group >>> .ivu-select-dropdown .ivu-dropdown-menu {
  min-width: 100px;
  right: -2px;
  position: absolute;
  background: white;
  width: 130px;
  border-radius: 5px;
  border: 1px solid #e7e5e5;
}
.vertical-center-modal >>> .srcoll-content {
  padding: 0;
}
.view-model-content {
  background: #eee;
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/ViewGridConfig/detailMethods.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,67 @@
//从表方法
let detailMethods = {
    //查询从表前先做内部处理
    loadInternalDetailTableBefore(param, callBack) {//加载明细表数据之前,需要设定查询的主表的ID
        //每次只要加载明细表格数据就重置删除明细的值
        if (this.detailOptions.delKeys.length > 0) {
            this.detailOptions.delKeys = [];
        }
        let key = this.table.key;
        if (this.currentRow && this.currentRow.hasOwnProperty(key)) {
            param.value = this.currentRow[key];
        }
        return this.loadDetailTableBefore(param, callBack);
    },
    detailRowOnChange(row) {
        this.detailRowChange(row);
    },
    detailRowChange(row) {//选中行事件

    },
    resetDetailTable(row) {//编辑和查看明细时重置从表数据
        if (!this.detailOptions.columns || this.detailOptions.columns.length == 0) {
            return;
        }
        let key = this.table.key;
        let query = { value: row ? row[key] : this.currentRow[key] }
        if (this.$refs.detail) {
            this.$refs.detail.reset();
            this.$refs.detail.load(query);
        }
    },
    //从后面加载从表数据
    refreshRow() {
        this.resetDetailTable();
    },
    addRow() {
        this.$refs.detail.addRow({});
        //  this.detailOptions.columns.push({});
    },
    delRow() {
        let rows = this.$refs.detail.getSelected();
        if (!rows || rows.length == 0) {
            return this.$message.error("请选择要删除的行!");
        }
        if (!this.delDetailRow(rows)) {
            return false;
        }
        this.$Modal.confirm({
            title: "删除警告!",
            content:
                '<p style="color: red;font-weight: bold;letter-spacing: 3px;">确认要删除选择的数据吗?</p>',
            onOk: () => {
                rows = this.$refs.detail.delRow();
                let key = this.detailOptions.key;
                //记录删除的行数据
                rows.forEach(x => {
                    if (x.hasOwnProperty(key) && x[key]) {
                        this.detailOptions.delKeys.push(x[key]);
                    }
                })

            }
        });
    }
}

export default detailMethods;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/ViewGridConfig/methods.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1042 @@

import detailMethods from './detailMethods.js'
//业务处理方法,全部可以由开发覆盖
import serviceFilter from './serviceFilter.js'
let methods = {
  //当添加扩展组件gridHeader/gridBody/gridFooter及明细modelHeader/modelBody/modelFooter时，
  //如果要获取父级Vue对象,请使用此方法进行回调
  parentCall(fun) {
    if (typeof fun != 'function') {
      return console.log('扩展组件需要传入一个回调方法才能获取父级Vue对象')
    }
    fun(this);
  },
  getCurrentAction() {
    if (this.currentReadonly) {
      return '';
    }
    return "--" + (this.currentAction == this.const.ADD ? "新增" : "编辑");
  },
  quickSearchKeyPress($event) { //查询字段为input时，按回车查询
    if ($event.keyCode == 13) {
      if (this.searchFormFileds[this.singleSearch.field] != "") {
        this.search();
      }
    }
  },
  getButtons() {//生成ViewGrid界面的操作按钮及更多选项
    let searchIndex = this.buttons.findIndex(x => { return x.value == 'Search'; });
    //添加高级查询
    if (searchIndex != -1) {
      this.buttons.splice(searchIndex + 1, 0, {
        icon: 'ios-arrow-down',
        class: 'r-dropdown',
        name: "",
        type: this.buttons[searchIndex].type,
        onClick: () => {
          this.searchBoxShow = !this.searchBoxShow;
        }
      });
    }
    this.maxBtnLength += (searchIndex == -1 ? 0 : 1);
    if (this.buttons.length <= this.maxBtnLength) return this.buttons;
    let btns = this.buttons.slice(0, this.maxBtnLength);
    btns[this.maxBtnLength - 1].last = true;
    return btns;
  },
  extendBtn(btns, source) {//btns权限按钮，source为扩展按钮
    if (!btns || !(source && source instanceof Array)) { return; }
    //source通过在表的扩展js文件中buttons对应按钮的属性index决定按钮所放位置
    source.forEach((x) => {
      //通过按钮的Index属性，放到指定的位置
      btns.splice(x.index == undefined ? btns.length : x.index, 0, x);
    })
    // if (this.extend.buttons.view) {
    //     this.extend.buttons.view.forEach((x) => {
    //         //通过按钮的Index属性，放到指定的位置
    //         this.buttons.splice(x.index == undefined ? this.buttons.length : x.index, 0, x);
    //     })
    // }
  },
  initBoxButtons() { //初始化ViewGird与弹出框/明细表按钮
    let path = this.$route.path;
    //通过菜单获取用户所对应菜单需要显示的按钮
    let permissionButtons = this.permission.getButtons(path, null, this.extend.tableAction);
    if (permissionButtons) {
      //2020.03.31添加深拷贝按钮组
      permissionButtons.forEach(p => {
        let _obj = {};
        for (const key in p) {
          _obj[key] = p[key];
        }
        this.buttons.push(_obj);
      })
      // this.buttons.push(...permissionButtons);
    }
    if (!this.extend) {
      this.extend = {};
    }
    if (!this.extend.buttons) {
      this.extend.buttons = {};
    }
    //查询界面扩展按钮(扩展按钮可自行通过设置按钮的Index属性显示到具体位置)
    if (this.extend.buttons.view) {
      this.extendBtn(this.buttons, this.extend.buttons.view);
    }

    //弹出框按钮
    let boxButtons = [];

    let saveBtn = this.buttons.some(x => {
      if (x.value && (x.value.toLowerCase() == this.const.ADD.toLowerCase() || x.value.toLowerCase() == this.const.EDIT.toLowerCase())) return true;
    });
    this.currentReadonly = !saveBtn;
    //从表表格操作按钮
    let detailGridButtons = {
      name: "刷新", icon: "md-refresh", onClick() {
        //如果明细表当前的状态为新建时，禁止刷新
        if (this.currentAction == this.const.ADD) {
          return;
        }
        this.refreshRow();
      }
    };

    let importExcel = this.buttons.some(x => {
      if (x.value == this.const.IMPORT) return true;
    });
    //如果有导入权限,则需要初始化导入组件
    if (importExcel) {
      this.upload.url = this.getUrl(this.const.IMPORT);
      //定义下载模板的文件名
      this.upload.template.fileName = this.table.cnName;
      //定义下载模板的Url路径
      this.upload.template.url = this.http.ipAddress + this.getUrl(this.const.DOWNLOADTEMPLATE, true);
    }

    // disabled
    //如果当前角色没有编辑或新建功能，查看明细时字段设置全部只读
    //只有明细表，将明细表也设置为不可能编辑，并且不显示添加行、删除行
    if (!saveBtn) {
      this.editFormOptions.forEach(row => {
        row.forEach(x => {
          x.disabled = true;
        })
      })
      //没有新增编辑权限的，弹出框都设置为只读
      this.detail.columns.forEach(row => {
        if (row.hasOwnProperty('edit')) {
          row['edit'] = false;
        }
      })
      //弹出框扩展按钮
      this.extendBtn(boxButtons, this.extend.buttons.box)
      //弹出弹框按钮(2020.04.21),没有编辑或新建权限时，也可以通过buttons属性添加自定义弹出框按钮
      this.boxButtons.push(...boxButtons);
      this.detailOptions.buttons.push(detailGridButtons);
      //弹出框扩展明细表按钮
      this.extendBtn(this.detailOptions.buttons, this.extend.buttons.detail)

      return boxButtons;
    }

    this.detailOptions.edit = true;
    boxButtons.push(
      ...[
        {
          name: "保 å­˜",
          icon: "md-checkmark",
          type: "error",
          onClick() {
            this.save();
          }
        },
        {
          name: "重 ç½®",
          icon: "md-refresh",
          type: "success",
          onClick() {

            this.resetEdit();
          }
        }
      ]
    );
    //从表表格操作按钮
    this.detailOptions.buttons.push(...[
      {
        name: "添加行",
        icon: "md-add",
        onClick() {
          this.addRow();
        }
      },
      {
        name: "删除行",
        icon: "md-close",
        onClick() {
          this.delRow();
        }
      }
    ]);

    //弹出框扩展按钮
    this.extendBtn(boxButtons, this.extend.buttons.box);

    //弹出框扩展明细表按钮
    this.detailOptions.buttons.push(detailGridButtons);
    this.extendBtn(this.detailOptions.buttons, this.extend.buttons.detail);

    //弹出弹框按钮
    this.boxButtons.push(...boxButtons);

  },
  onClick(click) {
    click.apply(this);
  },
  changeDropdown(btnName, v1) {
    let button = this.buttons.filter(x => {
      return x.name == btnName;
    });
    if (button && button.length > 0) {
      button[0].onClick.apply(this);
    }
  },
  emptyValue(value) {
    return (value === null || value === undefined || value === "");
  },
  getSearchParameters() {//获取查询参数
    this.searchBoxShow = false;
    let query = { wheres: [] };
    for (const key in this.searchFormFileds) {
      let value = this.searchFormFileds[key];
      if (this.emptyValue(value)) continue;
      if (typeof value == 'number') {
        value = value + '';
      }
      let displayType = this.getSearchItem(key);
      if (typeof value == "string" || ["date", "datetime"].indexOf(displayType) == -1) {
        query.wheres.push({
          name: key,
          value: typeof value == "string" || !value ? value : value.join(','),
          displayType: displayType
        });
        continue;
      }
      for (let index = 0; index < value.length; index++) {
        query.wheres.push({
          name: key,
          value: value[index],
          displayType: (() => {
            if (["date", "datetime"].indexOf(displayType) != -1) {
              return index ? "lessorequal" : "thanorequal";
            }
            return displayType;
          })()
        });
      }
    }
    return query;
  },
  search() {//查询
    // let query = this.getSearchParameters();
    // this.$refs.table.load(query, true);
    this.$refs.table.load(null, true);
  },
  loadTableBefore(param, callBack) {//查询前设置查询条件及分页信息
    let query = this.getSearchParameters();
    if (query) {
      param = Object.assign(param, query);
    }
    let status = this.searchBefore(param);
    callBack(status);
  },
  loadTableAfter(data, callBack) {//查询后
    let status = this.searchAfter(data);
    callBack(status);
  },
  loadDetailTableBefore(param, callBack) {//明细查询前
    //新建时禁止加载明细
    if (this.currentAction == this.const.ADD) {
      callBack(false);
      return false;
    }
    let status = this.searchDetailBefore(param);
    callBack(status);
  },
  loadDetailTableAfter(data, callBack) {//明细查询后
    let status = this.searchDetailAfter(data);
    callBack(status);
  },
  getSearchItem(field) {//获取查询的参数
    let data;
    for (let index = 0; index < this.searchFormOptions.length; index++) {
      if (data) return data.type;
      const item = this.searchFormOptions[index];
      data = item.find(x => {
        return x.field == field;
      });
    }
    return data.type;
  },
  resetSearch() {//重置查询对象
    this.resetSearchForm();
  },
  resetEdit() { //重置编辑的数据
    let isEdit = this.currentAction != this.const.ADD;
    //重置之前
    if (!this[isEdit ? 'resetUpdateFormBefore' : 'resetAddFormBefore']()) {
      return;
    }
    let objKey = {};
    //编辑状态下,不需要重置主键,创建时间创建人
    if (isEdit) {
      objKey[this.table.key] = this.editFormFileds[this.table.key];
    }
    this.resetEditForm(objKey);
    //重置之后

    if (!this[isEdit ? 'resetUpdateFormAfter' : 'resetAddFormAfter']()) {
      return;
    }
  },
  resetSearchForm(sourceObj) {
    //重置查询表
    this.resetForm("searchForm", sourceObj);
  },
  resetEditForm(sourceObj) {
    if (this.hasDetail && this.$refs.detail) {
      // this.$refs.detail.rowData.splice(0);
      this.$refs.detail.reset();
    }
    this.resetForm("form", sourceObj);
  },
  getKeyValueType(formData, isEditForm) {
    try {
      let keyLeft = (isEditForm ? 'e' : 's') + '_b_'
      formData.forEach(item => {
        item.forEach(x => {
          if (this.keyValueType.hasOwnProperty(keyLeft + x.field)) {
            return true;
          }
          let data;
          if (x.type == 'switch') {
            this.keyValueType[x.field] = 1;
          }
          else if (x.bind && x.bind.data) {
            data = x.bind.data;
          } else if (x.data) {
            if (x.data instanceof Array) {
              data = x.data;
            } else if (x.data.data && x.data.data instanceof Array) {
              data = x.data.data;
            }
          }
          if (data && data.length > 0 && !this.keyValueType.hasOwnProperty(x.field)) {
            this.keyValueType[x.field] = data[0].key;
            this.keyValueType[keyLeft + x.field] = x.type;
          }
        })
      })
    } catch (error) {
      //console.log(error.message)
    }
  },
  resetForm(formName, sourceObj) {
    //重置表单数据
    if (this.$refs[formName]) {
      this.$refs[formName].reset();
    }

    if (!sourceObj) return;
    let form, keyLeft;
    if (formName == "searchForm") {
      form = this.searchFormFileds;
      keyLeft = 's' + '_b_';
    } else {
      form = this.editFormFileds;
      keyLeft = 'e' + '_b_';
    }
    //获取数据源的data类型，否则如果数据源data的key是数字，重置的值是字符串就无法绑定值
    if (!this.keyValueType._dinit) {
      this.getKeyValueType(this.editFormOptions, true);
      this.getKeyValueType(this.searchFormOptions, false);
      this.keyValueType._dinit = true;
    }
    for (const key in form) {
      if (sourceObj.hasOwnProperty(key)) {
        let newVal = sourceObj[key];
        let kv_type = this.keyValueType[keyLeft + key];

        if (kv_type == 'selectList'
          || kv_type == 'checkbox'
          || kv_type == "cascader") { // 2020.05.31增加iview组件Cascader
          if (newVal != "" && newVal != undefined && typeof newVal == 'string') {
            newVal = newVal.split(',');
          } else if (kv_type == 'checkbox') {
            newVal = [];
          }
        } else if (this.keyValueType.hasOwnProperty(key)
          && typeof (this.keyValueType[key]) == 'number'
          && newVal * 1 == newVal) {
          newVal = newVal * 1;
        } else {
          if (newVal == null || newVal == undefined) {
            newVal = '';
          } else {
            newVal += "";
          }
        }
        form[key] = newVal;
      } else {
        form[key] = form[key] instanceof Array ? [] : "";
      }
    }
  },
  onBtnClick(param) {
    this[param.method](param.data);
  },
  refresh() {//刷新
    this.search();
    // this.$refs.table.load();
  },
  saveBefore(formData) {
    return true;
  },
  saveAfter(formData, result) {
    return true;
  },
  save() {
    //新增或编辑时保存
    // if (!this.$refs.form.validate()) return;
    this.$refs.form.validate(result => {
      if (result) {
        this.saveExecute();
      }
    })
  },
  saveExecute() {
    let editFormFileds = {};
    //上传文件以逗号隔开
    for (const key in this.editFormFileds) {
      if (this.uploadfiled &&
        this.uploadfiled.length > 0
        && this.uploadfiled.indexOf(key) != -1
        && this.editFormFileds[key] instanceof Array) {
        let allPath = this.editFormFileds[key].map(x => {
          return x.path;
        })
        editFormFileds[key] = allPath.join(',');
      } else {
        editFormFileds[key] = this.editFormFileds[key];
      }
    }

    // else {
    //     editFormFileds = this.editFormFileds;
    // }
    //将数组转换成string
    for (const key in editFormFileds) {
      if (editFormFileds[key] instanceof Array) {
        editFormFileds[key] = editFormFileds[key].join(',');
      }
    }
    //console.log(editFormFileds);
    let formData = {
      mainData: editFormFileds,
      detailData: null,
      delKeys: null
    };

    //获取明细数据(前台数据明细未做校验，待完.后台已经校验)
    if (this.hasDetail) {
      formData.detailData = this.$refs.detail.rowData;
    }
    if (this.detailOptions.delKeys.length > 0) {
      formData.delKeys = this.detailOptions.delKeys;
    }
    //保存前拦截
    if (this.currentAction == this.const.ADD) {
      if (!this.addBefore(formData)) return;
    } else {
      if (!this.updateBefore(formData)) return;
    }
    let url = this.getUrl(this.currentAction);
    this.http.post(url, formData, true).then(x => {
      //保存后
      if (this.currentAction == this.const.ADD) {
        if (!this.addAfter(x)) return;
      } else {
        if (!this.updateAfter(x)) return;
      }
      if (!x.status) return this.$error(x.message);
      this.$success(x.message);
      //如果保存成功后需要关闭编辑框，直接返回不处理后面
      if (this.boxOptions.saveClose) {
        this.boxModel = false;
        this.refresh();
        return;
      }
      let resultRow;
      if (typeof x.data == "string" && x.data != "") {
        resultRow = JSON.parse(x.data);
      } else {
        resultRow = x.data;
      }

      if (this.currentAction == this.const.ADD) {
        //  this.currentRow=x.data;
        this.editFormFileds[this.table.key] = "";
        this.currentAction = this.const.EDIT;
        this.currentRow = resultRow.data;
      }
      this.resetEditForm(resultRow.data);
      // console.log(resultRow);
      if (this.hasDetail) {
        this.detailOptions.delKeys = [];
        if (resultRow.list) {
          this.$refs.detail.rowData.push(...resultRow.list)
        }
      }
      this.refresh();
    });
  },
  del() {
    //删除数据
    let rows = this.$refs.table.getSelected();
    if (rows.length == 0) return this.$error("请选择要删除的行!");
    let delKeys = rows.map(x => {
      return x[this.table.key];
    });
    if (!delKeys || delKeys.length == 0)
      return this.$error("没有获取要删除的行数据!");
    //删除前
    if (!this.delBefore(delKeys, rows)) {
      return;
    }
    let tigger = false;
    this.$Modal.confirm({
      title: "删除警告!",
      content:
        '<p style="color: red;font-weight: bold;letter-spacing: 3px;">确认要删除选择的数据吗?</p>',
      onOk: () => {
        if (tigger) return;
        tigger = true;
        let url = this.getUrl(this.const.DEL);
        this.http.post(url, delKeys, "正在删除数据....").then(x => {
          if (!x.status) return this.$error(x.message);
          this.$success(x.message);
          //删除后
          if (!this.delAfter(x)) {
            return;
          }
          this.refresh();
        });
      } //, onCancel: () => {}
    });
  },
  initBox() { //初始化新建、编辑的弹出框
    this.modelOpenBefore(this.currentRow);
    if (!this.boxInit) {
      this.boxInit = true;
      this.boxModel = true;
      // this.detailUrl = this.url;
    }
  },
  setEditForm(row) {
    // if (this.remoteColumns.length == 0 || !rows || rows.length == 0) return;
    let remoteColumns = this.$refs.table.remoteColumns;
    remoteColumns.forEach(column => {
      this.editFormOptions.forEach(option => {
        option.forEach(x => {
          if (x.field == column.field) {
            x.data.data = Object.assign([], x.data, column.bind.data);
          }
        })
      });
    });
    this.editFormFileds
    //重置编辑表单数据
    this.editFormFileds[this.table.key] = row[this.table.key];

    this.resetEditForm(row);
    this.currentAction = this.const.EDIT;
    this.boxModel = true;
  },
  linkData(row, column) {   //点击table单元格快捷链接显示编辑数据
    this.currentAction = this.const.EDIT;
    this.currentRow = row;
    this.initBox();
    this.resetDetailTable(row);
    this.setEditForm(row);
    //设置远程查询表单的默认key/value
    this.getRemoteFormDefaultKeyValue();
    //点击编辑按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
    this.modelOpenProcess(row);
  },
  add() {//新建
    this.currentAction = this.const.ADD;
    this.currentRow = {};
    this.initBox();
    if (this.hasDetail) {
      this.$refs.detail &&
        //  this.$refs.detail.rowData &&
        this.$refs.detail.reset();
    }
    let obj = {};
    //如果有switch标签，默认都设置为是
    this.editFormOptions.forEach(x => {
      x.forEach(item => {
        if (item.type == 'switch') {
          obj[item.field] = 1;
        }
      })
    })
    this.resetEditForm(obj);
    //  this.resetEditForm();
    this.boxModel = true;
    //点击新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
    this.modelOpenProcess();
    // this.modelOpenAfter();
  },
  edit() {//编辑
    let rows = this.$refs.table.getSelected();
    if (rows.length == 0) {
      return this.$error("请选择要编辑的行!");
    }
    if (rows.length > 1) {
      return this.$error("请选择一条数据编辑!");
    }
    //记录当前编辑的行
    this.currentRow = rows[0];
    //初始化弹出框
    this.initBox();
    //重置表单
    this.resetDetailTable();

    //设置当前的数据到表单上
    this.setEditForm(rows[0]);
    //设置远程查询表单的默认key/value
    this.getRemoteFormDefaultKeyValue();
    //点击编辑按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
    this.modelOpenProcess(rows[0]);
    // this.modelOpenAfter(rows[0]);
  },
  getRemoteFormDefaultKeyValue() {
    //设置表单远程数据源的默认key.value
    if (this.currentAction != this.const.EDIT || this.remoteKeys.length == 0) return;
    this.editFormOptions.forEach((x, xIndex) => {
      x.forEach((item, yIndex) => {
        if (item.remote) {
          let column = this.columns.find(x => { return x.bind && x.bind.key == item.dataKey });
          if (!column) return;
          let key = this.currentRow[item.field];
          let obj = column.bind.data.find(x => { return x.key == key });
          // obj ? obj.value : key如果没有查到数据源，直接使用原数据
          item.data = [{ key: key, value: obj ? obj.value : key }];
          this.editFormOptions[xIndex].splice(yIndex, 1, item);
          // this.$set(item, 'data', [{ key: key + '', value: obj.value }])
          //  item.data = [{ key: key + '', value: obj.value }];
        }
      })
    })
  },
  modelOpenProcess(row) {
    this.$nextTick(() => {
      this.modelOpenAfter(row);
    })
    return;
    // if (!this.$refs.form) {
    //     let timeOut = setTimeout(x => {
    //         this.modelOpenAfter(row);
    //     }, 500)
    //     return;
    // }
    // this.modelOpenAfter(row);
  },
  import() { //导入(上传excel),弹出导入组件UploadExcel.vue
    this.upload.excel = true;
  },
  download(url, fileName) { //下载导出的文件
    let xmlResquest = new XMLHttpRequest();
    xmlResquest.open("GET", url, true);
    xmlResquest.setRequestHeader("Content-type", "application/json");
    xmlResquest.setRequestHeader(
      "Authorization",
      this.$store.getters.getToken()
    );
    let elink = this.$refs.export;
    xmlResquest.responseType = "blob";
    xmlResquest.onload = function (oEvent) {

      if (xmlResquest.status != 200) {
        this.$error('下载文件出错了..');
        return
      }
      let content = xmlResquest.response;
      //  let elink = this.$refs.export;//document.createElement("a");
      elink.download = fileName; //+".xlsx";
      // elink.style.display = "none";
      let blob = new Blob([content]);
      elink.href = URL.createObjectURL(blob);
      //  document.body.appendChild(elink);
      elink.click();
      //  document.body.removeChild(elink);
    };
    xmlResquest.send();
  },
  export() {//导出
    //导出
    let url = this.getUrl(this.const.EXPORT);
    let query = this.getSearchParameters();
    let param = { order: this.pagination.order, wheres: query.wheres || [] };
    //2020.06.25增加导出前处理
    if (!this.exportBefore(param)) {
      return;
    }

    if (param.wheres && typeof param.wheres == "object") {
      param.wheres = JSON.stringify(param.wheres);
    }
    let $http = this.http;
    $http.post(url, param, "正在导出数据....").then(result => {
      if (!result.status) {
        return this.$error(result.message);
      }
      let path = this.getUrl(this.const.DOWNLOAD);
      path = path[0] == "/" ? path.substring(1) : path;
      this.download(
        $http.ipAddress + path + "?path=" + result.data,
        this.table.cnName + ".xlsx"// filePath
      );
      ///  window.open($http.ipAddress + path + "?fileName=" + filePath, "_self");
    });
  },
  getSelectRows() {//获取选中的行
    return this.$refs.table.getSelected();
  },
  getDetailSelectRows() {//或获取明细选中的行
    if (!this.$refs.detail) {
      return [];
    }
    return this.$refs.detail.getSelected();
  },
  audit() {//审核弹出框
    let rows = this.$refs.table.getSelected();
    if (rows.length == 0) return this.$error("请选择要审核的行!");
    let checkStatus = rows.every(x => {
      return x.AuditStatus > 0;
    });
    if (checkStatus) return this.$error("只能选择审核中的数据!");
    this.auditParam.rows = rows.length;
    this.auditParam.model = true;
  },
  saveAudit() {//保存审核
    let rows = this.$refs.table.getSelected();
    if (this.auditParam.status == -1)
      return this.$error("请选择审核结果!");

    if (rows.length != this.auditParam.rows)
      return this.$error("所选数据已发生变化,请重新选择审数据!");

    let keys = rows.map(x => {
      return x[this.table.key];
    });
    if (!this.auditBefore(keys, rows)) {
      return;
    }
    let url =
      this.getUrl(this.const.AUDIT) +
      "?auditReason=" +
      this.auditParam.reason +
      "&auditStatus=" +
      this.auditParam.status;
    this.http.post(url, keys, "审核中....").then(x => {
      if (!this.auditAfter(x, rows)) {
        return;
      }
      if (!x.status) return this.$error(x.message);
      this.auditParam.rows = 0;
      this.auditParam.status = -1;
      this.auditParam.reason = '';
      this.auditParam.model = false;
      this.$success(x.message);
      this.refresh();
    });
  },
  openViewColumns() {//查看表结构
    if (this.viewColumns == 0) {
      this.viewColumns.push(
        ...[
          { title: "名称", key: "title" },
          { title: "字段", key: "field" },
          { title: "类型", key: "type" },
          { title: "是否显示", key: "hidden" },
          { title: "绑定数据源", key: "bind" }
        ]
      );
      this.columns.forEach(x => {
        this.viewData.push({
          title: x.title,
          field: x.field,
          type: x.type,
          hidden: x.hidden ? "否" : "是",
          bind: x.bind ? x.bind.dicNo : "--",
          cellClassName: {
            title: "table-info-cell-title"
          }
        });
      });
    }
    this.viewModel = true;
  },
  viewModelCancel() {//查看表结构
    this.viewModel = false;
  },
  initFormOptions(formOptions, keys, formFileds, isEdit) {//初始化查询、编辑对象的下拉框数据源、图片上传链接地址
    //let defaultOption = { key: "", value: "请选择" };
    //有上传的字段
    //2020.05.03新增
    //编辑数据源的类型
    formOptions.forEach(item => {
      item.forEach(d => {
        if (d.type == 'img' || d.type == 'excel' || d.type == 'file' || d.columnType == 'img') {
          d.url = this.http.ipAddress + 'api' + this.table.url + "Upload";
          this.uploadfiled.push(d.field);
        }
        if (!d.dataKey) return true;
        //开启远程搜索
        if (d.remote) {
          this.remoteKeys.push(d.dataKey);
          d.data = [] //{ dicNo: d.dataKey, data: [] };
          return true;
        }
        //2020.05.03增加编辑表单对checkbox的支持
        if (d.type == "checkbox" && !(formFileds[d.field] instanceof Array)) {
          formFileds[d.field] = [];
        }
        if (keys.indexOf(d.dataKey) == -1) {
          //2020.05.03增加记录编辑字段的数据源类型

          keys.push(d.dataKey);
          //2020.05.03修复查询表单与编辑表单type类型变成强一致性的问题
          //this.dicKeys.push({ dicNo: d.dataKey, data: [], type: d.type });
          let _dic = { dicNo: d.dataKey, data: [] };
          if (isEdit) {
            _dic['e_type'] = d.type;
          }
          this.dicKeys.push(_dic);
        }

        //2020.01.30移除内部表单formOptions数据源配置格式data.data，所有参数改为与组件api格式相同
        Object.assign(d, this.dicKeys.filter(f => {
          return f.dicNo == d.dataKey;
        })[0])
      });
    });
  },
  //初始table与明细表的数据源指向dicKeys对象，再去后台加载数据源
  initColumns(scoure, dicKeys, keys) {
    if (!scoure || !(scoure instanceof Array)) return;
    scoure.forEach(item => {
      if (!item.bind || (item.bind.data && item.bind.data.length > 0)) return true;
      let key = item.bind.key || item.bind.dicNo;
      if (this.remoteKeys.indexOf(key) != -1) {
        item.bind.remote = true;
        return true;
      }
      if (this.hasKeyField.indexOf(item.field) == -1) {
        this.hasKeyField.push(item.field);
      }
      var dic = dicKeys.filter(x => {
        return x.dicNo == key;
      });
      if (!dic || dic.length == 0) {
        dicKeys.push({ dicNo: key, config: "", data: [] });
        dic = [dicKeys[dicKeys.length - 1]];
        keys.push(key);
      }
      item.bind = dic[0];
      //2020.05.03优化table数据源checkbox与select类型从编辑列中选取
      item.bind.type = item.bind.e_type || 'string';
    });
  },
  bindOptions(dic) { //绑定下拉框的数据源
    //绑定后台的字典数据
    dic.forEach(d => {
      this.dicKeys.forEach(x => {
        if (x.dicNo != d.dicNo) return true;
        // try {
        //     x.config = eval("(" + d.config + ")");
        // } catch (error) {
        //     x.config = { valueField: '', textField: '' }
        // }
        if (d.data.length > 0 && !d.data[0].hasOwnProperty("key")) {
          let source = d.data,
            newSource = new Array(source.length);
          for (let index = 0; index < source.length; index++) {
            newSource[index] = {
              //默认从字典数据读出来的key都是string类型,但如果数据从sql中查询的可能为非string,否是async-validator需要重置设置格式
              key: source['key'] + '',//source[index][x.config.valueField] + "",
              value: source['value']//source[index][x.config.textField]
            };
          }

          x.data.push(...newSource);
        } else {
          //2020.06.06，如果是selectList数据源使用的自定义sql并且key是数字，强制转换成字符串
          if (x.e_type == "selectList" && d.data.length > 0 && typeof d.data[0].key == "number") {
            d.data.forEach(c => {
              c.key = c.key + "";
            })
          }
          x.data.push(...d.data);
        }
        if (this.singleSearch
          && this.singleSearch.dataKey
          && this.singleSearch.dataKey == x.dicNo) {
          this.singleSearch.data.splice(0, 1, ...x.data);
        }
      });
    });
  },
  getUrl(action, ingorPrefix) {//是否忽略前缀/  èŽ·å–操作的url
    return (!ingorPrefix ? "/" : "") + "api" + this.table.url + action;
  },
  initDicKeys() { //初始化字典数据
    let keys = [];
    this.dicKeys.splice(0);
    //初始化编辑数据源,默认为一个空数组，如果要求必填设置type=number/decimal的最小值
    this.initFormOptions(this.editFormOptions, keys, this.editFormFileds, true);
    //初始化查询数据源,默认为一个空数组
    this.initFormOptions(this.searchFormOptions, keys, this.searchFormFileds, false);
    //查询日期设置为可选开始与结果日期
    this.searchFormOptions.forEach(item => {
      item.forEach(x => {
        if (x.type == "date" || x.type == "datetime") x.range = true;
      });
    });
    //初始化datatable表数据源,默认为一个空数组,dicKeys为界面所有的数据字典编号
    this.initColumns(this.columns, this.dicKeys, keys);
    if (this.detailOptions && this.detailOptions.columns) {
      this.initColumns(this.detailOptions.columns, this.dicKeys, keys)
    }
    //初始化快速查询字段,默认使用代码生成器配置的第一个查询字段
    if (this.searchFormOptions.length > 0) {
      this.singleSearch = {
        dataKey: this.searchFormOptions[0][0].dataKey,
        dicNo: this.searchFormOptions[0][0].dicNo,
        field: this.searchFormOptions[0][0].field,
        title: this.searchFormOptions[0][0].title,
        type: this.searchFormOptions[0][0].type,
        data: []
      };
      // this.singleSearch = this.searchFormOptions[0][0];
    }
    if (keys.length == 0) return;
    let $internalVue = this;
    this.http.post("/api/Sys_Dictionary/GetVueDictionary", keys).then(dic => {
      $internalVue.bindOptions(dic);
    });
  },
  setFiexdColumn(columns, containerWidth) { //计算整个table的宽度，根据宽度决定是否启用第一行显示的列为固定列
    let columnsWidth = 0;
    columns.forEach(x => {
      if (!x.hidden && x.width) {
        columnsWidth += x.width;
      }
    })
    //启用第一列为固定列
    if (columnsWidth > containerWidth) {
      let firstColumn = columns.find(x => !x.hidden);
      if (firstColumn) {
        firstColumn.fixed = true;
      }
    }
  },
  initBoxHeightWidth() { //初始化弹出框的高度与宽度
    let clientHeight = document.documentElement.clientHeight;
    //弹出框高度至少250px
    clientHeight = clientHeight < 250 ? 250 : clientHeight;
    let clientWidth = document.documentElement.clientWidth;

    if (this.boxOptions.height) {
      //如果高度与宽度超过了获取到的可见高宽度，则设为默认的90%高宽
      if (this.boxOptions.height > clientHeight * 0.8) {
        this.boxOptions.height = clientHeight * 0.8
      }
    }
    if (this.boxOptions.width) {
      //如果高度与宽度超过了获取到的可见高宽度，则设为默认的90%高宽
      if (this.boxOptions.width > clientWidth * 0.8) {
        this.boxOptions.width = clientWidth * 0.8
      }
    }
    //计算整个table的宽度，根据宽度决定是否启用第一行显示的列为固定列
    let maxTableWidth = clientWidth - 270;
    this.setFiexdColumn(this.columns, maxTableWidth);

    this.height = this.tableHeight || clientHeight - 210;
    this.url = this.getUrl(this.const.PAGE);
    //计算弹出框的高与宽度
    //如果有明细表，高度与宽带设置为0.9/0.82
    if (this.detail.columns && this.detail.columns.length > 0) {
      this.hasDetail = true;
      clientWidth = clientWidth * 0.8;
      clientHeight = clientHeight * 0.82;
      if (!this.detailOptions.height) {
        this.detailOptions.height =
          clientHeight - this.editFormOptions.length * 57 - 205;
        this.detailOptions.height = this.detailOptions.height < 240 ? 240 : this.detailOptions.height;
      }

      this.detailOptions.columns = this.detail.columns;
      this.detailOptions.pagination.sortName = this.detail.sortName;
      this.detailOptions.cnName = this.detail.cnName;
      this.detailOptions.key = this.detail.key;
      this.detailOptions.url = this.getUrl("getDetailPage");
      //计算弹出框整个table的宽度，根据宽度决定是否启用第一行显示的列为固定列
      this.setFiexdColumn(this.detail.columns, clientWidth);
    } else {
      let maxColumns = 1; //最大列数，根据列计算弹框的宽度
      this.editFormOptions.forEach(x => {
        if (x.length > maxColumns) maxColumns = x.length;
      });
      let maxHeightRate = 0.7, maxWidthRate = 0.5;
      maxWidthRate = maxColumns / 10 + 0.3;
      maxHeightRate = (this.editFormOptions.length || 1) * 0.1 + 0.03;
      maxHeightRate = maxHeightRate > 0.9 ? 0.9 : maxHeightRate;
      clientWidth = clientWidth * maxWidthRate;
      clientHeight = clientHeight * maxHeightRate;
      // this.boxOptions.width = clientWidth * maxWidthRate;
      // this.boxOptions.height = clientHeight * maxHeightRate;
    }
    if (!this.boxOptions.height) {
      this.boxOptions.height = clientHeight;
    }
    if (!this.boxOptions.width) {
      this.boxOptions.width = clientWidth;
    }
  },
  rowOnChange(row) {
    this.rowChange(row);
  },
  rowChange(row) {//选中行事件

  },
  $error(message) {
    this.$Message.error({
      content: message,
      duration: 5
    });
  },
  $success(message) {
    this.$Message.success({
      content: message,
      duration: 3
    });
  }
};
//合并扩展方法
methods = Object.assign(methods, detailMethods, serviceFilter);
export default methods;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/ViewGridConfig/props.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,55 @@
let props = {
  columns: {//当前表的配置信息
    type: Array,
    default: () => {
      return [];
    }
  },
  detail: {//从表明细配置
    type: Object,
    default: () => {
      return {
        columns: [],//从表列
        sortName: ""//从表排序字段
      };
    }
  },
  editFormFileds: {//新建、编辑字段(key/value)
    type: Object,
    default: () => {
      return {};
    }
  },
  editFormOptions: {//新建、编辑配置信息
    type: Array,
    default: () => {
      return [];
    }
  },
  searchFormFileds: {//查询字段(key/value)
    type: Object,
    default: () => {
      return {};
    }
  },
  searchFormOptions: {//查询配置信息(key/value)
    type: Array,
    default: () => {
      return [];
    }
  },
  table: {//表的配置信息：主键、排序等
    type: Object,
    default: () => {
      return {};
    }
  },
  extend: {//表的扩展方法与组件都合并到此属性中
    type: Object,
    default: () => {
      return {};
    }
  }
}

export default props;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/ViewGridConfig/search.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,4 @@
//界面查询相关方法
let search={

}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/ViewGridConfig/serviceFilter.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,85 @@


let serviceFilter = {
    onInit() { //对应created
        //console.log('Create执行前')
    },
    onInited() { //对应created，在onInit与onInited中间会初始化界面数据对象
        // console.log('Create执行后')
    },
    mounted() {
        //console.log('mounted');
    },
    searchBefore(param) { //查询ViewGird表数据前,param查询参数
        // console.log('表' + this.table.cnName + '触发loadTableBefore');
        return true;
    },
    searchAfter(param, result) { //查询ViewGird表数据后param查询参数,result回返查询的结果
        // console.log('表' + this.table.cnName + '触发loadTableAfter');
        return true;
    },
    searchDetailBefore(param) {//查询从表表数据前,param查询参数
        // console.log(this.detailOptions.cnName + '触发loadDetailTableBefore');
        return true;
    },
    searchDetailAfter(param, data) {//查询从表后param查询参数,result回返查询的结果
        //console.log(this.detailOptions.cnName + '触发loadDetailTableAfter');
        return true;
    },
    delBefore(ids, rows) { //查询界面的表删除前 ids为删除的id数组,,rows删除的行
        return true;
    },
    delAfter(result) {//查询界面的表删除后
        return true;
    },
    delDetailRow(rows) { //弹出框删除明细表的行数据(只是对table操作，并没有操作后台)
        return true;
    },
    addBefore(formData) { //新建保存前formData为对象，包括明细表
        return true;
    },
    addAfter(result) {//新建保存后result返回的状态及表单对象
        return true;
    },
    updateBefore(formData) { //编辑保存前formData为对象，包括明细表、删除行的Id
        return true;
    },
    updateAfter(result) {//编辑保存后result返回的状态及表单对象
        return true;
    },
    auditBefore(ids, rows) {//审核前
        return true;
    },
    auditAfter(result, rows) {// å®¡æ ¸åŽ
        return true;
    },
    resetAddFormBefore() { //重置新建表单前的内容
        return true;
    },
    resetAddFormAfter() { //重置新建表单后的内容
        return true;
    },
    resetUpdateFormBefore() { //重置编辑表单前的内容
        return true;
    },
    resetUpdateFormAfter() { //重置编辑表单后的内容
        return true;
    },
    modelOpenBefore(row) { //点击编辑/新建按钮弹出框前，可以在此处写逻辑，如，从后台获取数据

    },
    modelOpenAfter(row) {  //点击编辑/新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据

    },
    importAfter(data) { //导入excel后刷新table表格数据
        this.search();
    },
    reloadDicSource() { //重新加载字典绑定的数据源
        this.initDicKeys();
    },
    exportBefore(param) { //2020.06.25增加导出前处理
        return true;
    }

}
export default serviceFilter;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/VolBox.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,151 @@
<template>
  <!-- :draggable="draggable" -->
  <Modal
    :mask-closable="false"
    :closable="false"
    :mask="mask"
    title="Title"
    :width="width+'px'"
    v-model="model"
    class-name="vertical-center-modal"
  >
    <a class="ivu-modal-close" @click="viewModelCancel">
      <i class="ivu-icon ivu-icon-ios-close"></i>
    </a>
    <p slot="header" class="header">
      <Icon :type="icon"></Icon>
      <span>{{title}}</span>
    </p>
    <div class="view-model-content" :style="{height:height+'px'}">
      <el-scrollbar style="height:100%;">
        <div class="srcoll-content" :style="{padding:padding+'px'}">
          <slot name="content"></slot>
          <slot></slot>
        </div>
      </el-scrollbar>
    </div>
    <div slot="footer" class>
      <slot name="footer"></slot>
      <Button v-if="footer" type="info" @click="viewModelCancel">关闭</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  props: {
    icon: {
      type: String,
      default: "ios-information-circle-outline"
    },
    title: {
      type: String,
      default: "基本信息"
    },
    model: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 200
    },
    width: {
      type: Number,
      default: 650
    },
    padding: {
      type: Number,
      default: 16
    },
    hideMask: {
      type: Boolean,
      default: false
    },
    draggable: {
      type: Boolean,
      default: false
    },
    mask: {
      type: Boolean,
      default: true
    }
  },
  data: function() {
    return {
      footer: true,
      vModel: this.model
    };
  },
  watch: {
    model() {
      this.vModel = this.model;
    }
  },
  mounted() {
    // console.log("cm");
  },
  created() {
    // console.log("c1");
    if (this.$slots.footer) {
      this.footer = false;
    }
  },
  methods: {
    viewModelCancel() {
      this.vModel = false;
      this.$emit("update:model", false);
    }
  }
};
</script>

<style lang="less">
.vertical-center-modal {
  display: flex;
  align-items: center;
  //   justify-content: center;
  .ivu-modal {
    top: 0;
  }
  .ivu-modal-close .ivu-icon-ios-close {
    color: white;
  }
  .view-model-content {
    min-height: 180px;
  }
  .srcoll-content {
    height: 100%;
    word-break: break-all;
    //  padding: 16px;
  }
  .ivu-modal-body {
    padding: 0px;
  }
  .ivu-modal-header {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 12px 15px;
    background-image: linear-gradient(
      135deg,
      rgb(12, 215, 189) 10%,
      #57c5f7 100%
    );
  }
  .ivu-modal-footer {
    padding: 5px 10px;
    button {
      padding: 4px 18px;
    }
  }
  .header {
    color: white;
  }
}
</style>
<style scoped>
.view-model-content >>> .el-scrollbar > .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>



 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/VolBoxForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,76 @@
<template>
  <div>
    <vol-box :options="boxOptions" ref="box">
      <div class="iview-com">
        <vol-form ref="form" :formRules="formOptions" :formFileds="formFileds"></vol-form>
      </div>
    </vol-box>
  </div>
</template>
<script>
import VolBox from "@/components/basic/VolBox.vue";
import VolForm from "@/components/basic/VolForm.vue";
let $vueBoxForm = {
  components: {
    VolBox,
    VolForm
  },
  props: {
    boxOptions: {
      type: Object,
      default: () => {
        return {
          height: "400px",
          width: "700px",
          btn: [
            {
              name: "重置",
              handler: function($vue) {
                //  $vue.box = false;
                // $vue.$props.form.Url = "11";
                //  $vueBoxForm.$refs.form.formFileds.Url = "11";
                $vue.$props.value = false;
              },
              icon: "",
              style: { background: "red" }
            }
          ]
        };
      }
    },
    formOptions: {
      type: Array,
      default: []
    },
    formFileds: {
      type: Object,
      default: {}
    }
  },
  methods: {
    show() {
      this.$refs.box.show();
    },
    close() {
      this.$refs.box.close();
    },
    volBoxFromObject() {
      this.$refs.box.getObject();
    }
  }
};
export default $vueBoxForm;
</script>
<style scoped>
.iview-com {
  padding: 15px 25px 15px 15px;
  /* left: 0;
  position: absolute;
  right: 0;
  max-width: 500px;
  margin: auto;
  margin-top: 13px; */
}
</style>



 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/VolElementMenu.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,116 @@
<template>
  <div class="vol-el-menu">
    <el-menu close="vol-el-menu--vertical"
             :unique-opened="true"
             @select="select"
             :collapse="isCollapse"
             @open="handleOpen"
             @close="handleClose">
      <template v-for="item in treeList">
        <el-submenu :key="item.id"
                    :index="'' + item.id"
                    v-if="item.children.length && item.enable == 1">
          <template slot="title">
            <Icon :type="item.icon || 'ios-aperture'" />
            <span slot="title"> {{ item.name }}</span>
          </template>
          <vol-element-menu-child :list="item.children"></vol-element-menu-child>
        </el-submenu>
        <template v-else>
          <el-menu-item class="menu-item-lv1"
                        v-if="item.enable == 1"
                        :key="item.id"
                        :index="'' + item.id">
            <Icon :type="item.icon || 'ios-aperture'" />
            <span slot="title"> {{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import VolElementMenuChild from "./VolElementMenuChild";
export default {
  components: {
    "vol-element-menu-child": VolElementMenuChild,
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false,
    },
    onSelect: {
      type: Function,
      default: (x) => {
        console.log(x);
      },
    },
    list: {
      type: Array,
      default: [],
    },
    rootId: {
      type: String,
      default: "0",
    },
  },
  data () {
    return {
      treeList: [],
    };
  },
  created () {
    this.treeList = this.convertTree(this.list);
  },
  methods: {
    convertTree (data) {
      var rootId = !isNaN(this.rootId) ? ~~this.rootId : this.rootId;
      var root_data = [];
      data.forEach((x) => {
        if (!x.children) x.children = [];
        if (x.parentId === rootId) {
          x.isRoot = true;
          if (!x.hasOwnProperty("enable")) x.enable = 1;
          root_data.push(x);
          this.getTree(x.id, x, data);
        }
      });
      return root_data;
    },
    getTree (id, node, data) {
      data.forEach((x) => {
        if (!x.hidden && x.parentId == id) {
          if (!node.children) node.children = [];
          node.children.push(x);
          this.getTree(x.id, x, data);
        }
      });
    },
    select (index, indexPath) {
      let _item = this.list.find((x) => {
        return x.id == index;
      });
      this.onSelect(index, _item);
      this.$router.push({ path: _item.path });
    },
    handleOpen () { },
    handleClose () { },
  },
};
</script>
<style scoped>
.vol-el-menu {
  box-sizing: content-box;
  width: 100%;
}
.vol-el-menu >>> .el-menu-item-group__title {
  padding: 0 !important;
}
.vol-el-menu >>> .horizontal-collapse-transition {
  transition: 0s width ease-in-out, 0s padding-left ease-in-out,
    0s padding-right ease-in-out;
}
</style>


 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/VolElementMenuChild.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,40 @@
<template>
  <div class="vol-el-menu-item">
    <template v-for="(item, index) of list">
      <el-menu-item :key="index"
                    :index="''+item.id"
                    v-if="!item.children.length&&item.enable==1">
        <!-- <Icon :type="item.icon" /> -->
        <span slot="title"> {{ item.name }}</span>
      </el-menu-item>
      <el-submenu :key="index"
                  :index="''+item.id"
                  v-if="item.children.length&&item.enable==1">
        <template slot="title">
          <!-- <Icon :type="item.icon||'ios-aperture'" /> -->
          <span> {{ item.name }}</span>
        </template>
        <vol-element-menu-child :list="item.children" />
      </el-submenu>
    </template>
    <!-- <vol-element-menu-child :list="item.children" /> -->
  </div>
</template>

<script>
export default {
  name: 'vol-element-menu-child',
  props: {
    list: Array
  },
}
</script>
<style scoped>
.vol-el-menu-item >>> .el-menu-item {
  height: 42px !important;
  line-height: 42px !important;
}
</style>




 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/VolForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,914 @@
<template>
  <Form
    ref="formValidate"
    :style="{width:width>0?(width+'px'):'100%'}"
    :model="formFileds"
    :label-width="labelWidth"
  >
    <!-- :rules="ruleValidate" -->
    <slot name="header"></slot>
    <Row class="line-row" v-for="(row,findex) in formRules" :key="findex">
      <Col :span="(item.colSize?item.colSize*2:24/span)" v-for="(item,index) in row" :key="index">
        <!-- 2020.06.18增加render渲染自定义内容 -->
        <form-expand v-if="item.render&&typeof item.render=='function'" :render="item.render"></form-expand>
        <FormItem
          v-else
          :rules="getRule(item,formFileds)"
          :label="item.title?(item.title+'：'):''"
          :prop="item.field"
        >
          <template v-if="isReadonlyImgFile(item,formFileds)">
            <div v-if="item.type=='img'||item.columnType=='img'" class="form-imgs">
              <div
                class="img-item"
                v-for="(img,imgIndex) in formFileds[item.field]"
                :key="imgIndex"
              >
                <img :src="getSrc(img.path)" :onerror="errorImg" @click="previewImg(img.path)" />
              </div>
            </div>
            <template v-else>
              <div
                class="form-file-list"
                v-for="(file,fileIndex) in formFileds[item.field]"
                :key="fileIndex"
              >
                <a @click="dowloadFile(formFileds[item.field][fileIndex])">{{file.name}}</a>
              </div>
            </template>
          </template>
          <label
            v-else-if="item.disabled||item.readonly"
            class="readonly-input"
          >{{getText(formFileds,item)}}</label>
          <div v-else :class="{'form-item-extra':item.extra}">
            <div>
              <!--下拉框绑定时如果key为数字，请将key+''转换为字符串-->
              <div
                v-if="item.type=='select'||item.type=='selectList'||item.type=='drop'||item.type=='dropList'"
              >
                <!--select绑定默认值时，如果设置了默认值，数据源也有数据，但没绑定上，问题在于key与默认值类型不一致，如:默认值是字符串，数据源的key是数字，类型不至会导致绑定失败-->
                <template>
                  <!-- {{ item.remote||item.url?"1":"0"}} -->
                  <!-- è¿œç¨‹æœç´¢ -->
                  <!-- ä»ŽåŽå°å­—典搜索remote  -->
                  <Select
                    v-if="item.remote||item.url"
                    :transfer="true"
                    v-model="formFileds[item.field]"
                    filterable
                    remote
                    @on-clear="()=>{onClear(item,formFileds)}"
                    :remote-method="(val)=>{remoteSearch(item,formFileds,val)}"
                    :loading="item.loading"
                    :placeholder="item.placeholder?item.placeholder:( '请选择'+item.title)"
                    @on-change="onRemoteChange(item,formFileds[item.field])"
                    clearable
                  >
                    <Option
                      v-for="(kv,kvIndex) in getData(item)"
                      :key="kvIndex"
                      :value="kv.key"
                    >{{kv.value}}</Option>
                  </Select>
                  <Select
                    v-else
                    :transfer="true"
                    v-model="formFileds[item.field]"
                    :multiple="(item.type=='select'||item.type=='drop')?false:true"
                    :filterable="(item.filter||item.data.length>10)?true:false"
                    :placeholder="item.placeholder?item.placeholder:( '请选择'+item.title)"
                    @on-change="onChange(item,formFileds[item.field])"
                    clearable
                  >
                    <Option
                      v-for="(kv,kvIndex) in item.data"
                      :key="kvIndex"
                      :value="kv.key"
                    >{{kv.value}}</Option>
                  </Select>
                </template>
              </div>
              <i-switch
                v-else-if="item.type=='switch'"
                :true-value="typeof formFileds[item.field]=='boolean' ? true:1"
                :false-value="typeof formFileds[item.field]=='boolean' ? false:0"
                v-model="formFileds[item.field]"
              >
                <span slot="open">是</span>
                <span slot="close">否</span>
              </i-switch>
              <Row
                v-else-if="item.type=='date'||item.type=='datetime'||item.columnType=='datetime'"
              >
                <Col span="24">
                  <FormItem :prop="item.field">
                    <DatePicker
                      :transfer="true"
                      :type="item.range?(item.type+'range'):item.type"
                      :format="item.type=='date'? 'yyyy-MM-dd':'yyyy-MM-dd HH:mm:ss'"
                      :placeholder="item.placeholder||item.title"
                      :value="formFileds[item.field]"
                      @on-change="(time)=>{formFileds[item.field]=time; validateField(item); return time}"
                    ></DatePicker>
                  </FormItem>
                </Col>
              </Row>
              <CheckboxGroup
                @on-change="(arr)=>{item.onChange&&item.onChange(arr)}"
                v-else-if="item.type=='checkbox'"
                v-model="formFileds[item.field]"
              >
                <Checkbox
                  v-for="(kv,kvIndex) in item.data"
                  :key="kvIndex"
                  :label="kv.key"
                >{{kv.value}}</Checkbox>
              </CheckboxGroup>
              <vol-upload
                v-else-if="isFile(item,formFileds)"
                :desc="item.desc"
                :multiple="item.multiple"
                :max-file="item.maxFile"
                :max-size="item.maxSize"
                :autoUpload="item.autoUpload"
                :fileInfo="formFileds[item.field]"
                :url="item.url"
                :img="item.type=='img'||item.columnType=='img'"
                :excel="item.type=='excel'"
                :fileTypes="item.fileTypes?item.fileTypes:[]"
                :upload-before="item.uploadBefore"
                :upload-after="item.uploadAfter"
                :append="item.append?true:false"
                :on-change="item.onChange"
                :file-click="item.fileClick"
                :remove-before="item.removeBefore"
                :down-load="item.downLoad?true:false"
              ></vol-upload>
              <!-- 2020.05.31增加iview组件Cascader -->
              <Cascader
                v-else-if="item.type=='cascader'"
                :load-data="item.loadData"
                :data="item.data"
                filterable
                :render-format="item.formatter"
                v-model="formFileds[item.field]"
              ></Cascader>

              <Input
                v-else-if="item.type=='textarea'"
                v-model="formFileds[item.field]"
                type="textarea"
                @on-keypress="($event)=>{item.onKeyPress&&item.onKeyPress($event)}"
                clearable
                :autosize="{minRows:2,maxRows:item.maxRows||10}"
                :placeholder="item.placeholder?item.placeholder:( '请输入'+item.title)"
                :ref="item.field"
              ></Input>
              <Input
                clearable
                v-else-if="item.type=='password'"
                type="password"
                autocomplete="off"
                v-model.number="formFileds[item.field]"
                @on-keypress="($event)=>{item.onKeyPress&&item.onKeyPress($event)}"
                :placeholder="item.placeholder?item.placeholder:( '请输入'+item.title)"
                :ref="item.field"
              ></Input>
              <Input
                clearable
                v-else
                @on-keypress="($event)=>{item.onKeyPress&&item.onKeyPress($event)}"
                v-model="formFileds[item.field]"
                :placeholder="item.placeholder?item.placeholder:( '请输入'+item.title)"
                :ref="item.field"
              ></Input>
            </div>

            <div class="form-extra" v-if="item.extra">
              <a
                :style="item.extra.style"
                @click="()=>{item.extra.click&&item.extra.click(item,formFileds[item.field])}"
              >
                <Icon v-if="item.extra.icon" :type="item.extra.icon" />
                {{item.extra.text}}
              </a>
            </div>
          </div>
        </FormItem>
      </Col>
    </Row>
    <slot name="footer"></slot>
  </Form>
</template>
<script>
import moment from "moment";
import FormExpand from "./VolForm/VolFormRender";
export default {
  components: {
    FormExpand,
    VolUpload: () => import("@/components/basic/VolUpload.vue"),
  },
  props: {
    loadKey: {
      //是否加载formRules字段配置的数据源
      type: Boolean,
      default: false,
    },
    width: {
      //表单宽度
      type: Number,
      default: 0,
    },
    labelWidth: {
      //表单左边label文字标签的宽度
      type: Number,
      default: 100,
    },
    formRules: {
      //表单配置规则，如字段类型，是否必填
      type: Array,
      default: [],
    },
    formFileds: {
      //表单字段
      type: Object,
      default: {},
    },
  },
  watch: {},
  created() {
    this.initFormRules(true);
  },
  data() {
    return {
      remoteCall: true,
      errorImg: 'this.src="' + require("@/assets/imgs/error-img.png") + '"',
      rule: {
        change: [
          "checkbox",
          "select",
          "date",
          "datetime",
          "drop",
          "radio",
          "cascader",
        ], //2020.05.31增加级联类型
        phone: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
        decimal: /(^[\-0-9][0-9]*(.[0-9]+)?)$/,
        number: /(^[\-0-9][0-9]*([0-9]+)?)$/,
      },
      inputTypeArr: ["text", "string", "mail", "textarea", "password"],
      types: {
        int: "number",
        byte: "number",
        decimal: "number", //"float",
        string: "string",
        bool: "boolean",
        date: "datetime",
        date: "date",
        mail: "email",
      },
      span: 0,
      ruleValidate: {},
    };
  },
  methods: {
    previewImg(url) {
      this.base.previewImg(url, this.http.ipAddress);
    },
    getSrc(path) {
      if (!path) return;
      if (!this.base.isUrl(path) && path.indexOf(".") != -1) {
        return this.http.ipAddress + path;
      }
      return path;
    },
    //是否为图片文件等格式并对字段的转换成数组：[{name:'1.jpg',path:'127.0.0.1/ff/1.jpg'}]
    isFile(item, formFileds) {
      if (
        item.type == "img" ||
        item.columnType == "img" ||
        item.type == "excel" ||
        item.type == "file"
      ) {
        this.convertFileToArray(item, formFileds);
        return true;
      }
      return false;
    },
    isReadonlyImgFile(item, formFileds) {
      if ((item.disabled || item.readonly) && this.isFile(item, formFileds)) {
        return true;
      }
      return false;
    },
    convertFileToArray(item, formFileds) {
      if (!item.maxFile) {
        item.maxFile = 1; //默认只能上传一个文件，可以在onInit中设置
      }

      let fileInfo = formFileds[item.field];
      if (fileInfo instanceof Array) {
        fileInfo.forEach((x) => {
          if (x.hasOwnProperty("path")) {
            if (x.path && !this.base.isUrl(x.path)) {
              //这里修改后死循环?
              // x.path = this.http.ipAddress + x.path;
            }
          }
        });
        return;
      }
      if (fileInfo === null || fileInfo === undefined) {
        formFileds[item.field] = [];
        return;
      }
      //将以逗号隔开的文件分割成数组127.0.0.1/aa/1.jpg,将127.0.0.1/aa/2.jpg
      if (typeof fileInfo == "string") {
        if (fileInfo.trim() === "") {
          formFileds[item.field] = [];
          return;
        }
        //如果文件路径是字符串，则使用，拆分
        fileInfo = fileInfo.replace(/\\/g, "/");
        let files = fileInfo.split(",");
        formFileds[item.field] = [];
        for (let index = 0; index < files.length; index++) {
          let file = files[index];
          let splitFile = file.split("/");
          formFileds[item.field].push({
            name: splitFile.length > 0 ? splitFile[splitFile.length - 1] : file,
            path: file, //this.base.isUrl(file) ? file : this.http.ipAddress + file,
          });
        }
      }
    },
    dowloadFile(file) {
      this.base.dowloadFile(
        file.path,
        file.name,
        {
          Authorization: this.$store.getters.getToken(),
        },
        this.http.ipAddress
      );
    },
    validatorPhone(rule, value, callback) {
      if (!rule.required && !value && value != "0") {
        return callback();
      }
      if (!this.rule.phone.test((value || "").trim())) {
        return callback(new Error("请输入正确的手机号"));
      }
      callback();
    },
    validatorPwd(rule, value, callback) {
      if (!rule.required && !value && value != "0") {
        return callback();
      }
      if ((value + "").trim().length < 6) {
        return callback(new Error("密码长度不能小于6位"));
      }
      callback();
    },
    getText(formFileds, item) {
      //2019.10.24修复表单select组件为只读的属性时没有绑定数据源
      let text = formFileds[item.field];

      if (typeof text == "function") {
        return text(formFileds);
      }
      if (
        text === "null" ||
        text === "" ||
        text === null ||
        text === undefined
      ) {
        return "--";
      }

      if (!item.data) return text;
      let data = item.data;
      // if (item.data.data) {
      //   data = item.data.data;
      // } else {
      //   data = item.data;
      // }
      data.forEach((x) => {
        if (x.key == text) {
          text = x.value;
        }
      });
      return text;
    },
    onClear(item, formFileds) {
      //远程select标签清空选项
      item.data.splice(0);
      // console.log(2);
    },
    onChange(item, value) {
      if (item.onChange && typeof item.onChange == "function") {
        item.onChange(value, item);
      }
    },
    onRemoteChange(item, value) {
      //第二次打开时，默认值成了undefined，待查viewgrid中重置代码
      if (value == undefined && item.data.length > 0) {
        this.formFileds[item.field] = item.data[0].key;
        //  console.log('undefined');
      }
      this.remoteCall = false;
      if (item.onChange && typeof item.onChange == "function") {
        item.onChange(value, item);
      }
    },
    getData(item) {
      return item.data;
    },
    initSource() {
      let keys = [],
        binds = [];
      //初始化字典数据源
      this.formRules.forEach((item) => {
        item.forEach((x) => {
          if (x.dataKey && (!x.data || x.data.length == 0) && !x.remote) {
            // if (!x.data)
            x.data = [];
            binds.push({ key: x.dataKey, data: x.data });
            if (keys.indexOf(x.dataKey) == -1) {
              keys.push(x.dataKey);
            }
          }
        });
      });

      if (keys.length == 0) return;

      this.http
        .post("/api/Sys_Dictionary/GetVueDictionary", keys)
        .then((dic) => {
          this.bindOptions(dic, binds);
        });
    },
    //远程搜索(打开弹出框时应该禁止搜索)
    remoteSearch(item, formFileds, val) {
      if (
        val == "" ||
        (item.data.length == 1 &&
          (val == item.data[0].key || val == item.data[0].value))
      )
        return;
      //弹出框或初始化表单时给data设置数组默认值
      let url = item.remote
        ? "/api/Sys_Dictionary/GetSearchDictionary"
        : item.url;
      this.http
        .post(url + "?dicNo=" + item.dataKey + "&value=" + val)
        .then((dicData) => {
          this.$set(item, "loading", false);
          item.data = dicData;
          this.formRules[item.point.x].splice(item.point.y, 1, item);
        });
    },
    bindOptions(dic, binds) {
      dic.forEach((d) => {
        binds.forEach((x) => {
          if (x.key != d.dicNo) return true;
          //如果有数据的则不查询
          if (x.data.length > 0) return true;
          if (d.data.length > 0 && !d.data[0].hasOwnProperty("key")) {
            let source = d.data,
              newSource = new Array(source.length);
            for (let index = 0; index < source.length; index++) {
              newSource[index] = {
                key: source["key"] + "",
                value: source["value"],
              };
            }
            x.data.push(...newSource);
          } else {
            x.data.push(...d.data);
          }
        });
      });
    },
    getObject(date) {
      if (typeof date == "object") {
        return date;
      }
      return new Date(date);
    },
    validateNumber() {},
    formatTime(time) {
      return moment(time).format("YYYY-MM-DD");
    },
    changeTime(time) {
      console.log(time);
      return time + "";
    },
    reset(sourceObj) {
      //重置表单时，禁用远程查询
      //  this.remoteCall = false;
      this.$refs["formValidate"].resetFields();
      if (!sourceObj) return;
      for (const key in this.formFileds) {
        if (sourceObj.hasOwnProperty(key)) {
          this.formFileds[key] = sourceObj[key];
        }
      }
      //  this.remoteCall = true;
    },
    validate(callback) {
      let result = true;
      this.$refs["formValidate"].validate((valid) => {
        if (!valid) {
          this.$Message.error("数据验证未通过!");
          result = false;
        } else if (typeof callback == "function") {
          callback(valid);
        }
      });
      return result;
    },
    getReuired(rule, item) {},
    initUpload(item, init) {
      if (!init) return;
      if (
        item.type == "img" ||
        item.columnType == "img" ||
        item.type == "excel" ||
        item.type == "file"
      ) {
        //只是没设置是否自动上传的，默认都是选择文件后自动上传
        if (!item.hasOwnProperty("autoUpload")) {
          item.autoUpload = true;
        }
        if (!item.hasOwnProperty("fileList")) {
          item.fileList = true;
        }
        if (!item.hasOwnProperty("downLoad")) {
          item.downLoad = true;
        }
        if (!item.removeBefore) {
          item.removeBefore = (index, file, files) => {
            return true;
          };
        }
        if (!item.fileClick) {
          item.fileClick = (index, file, files) => {
            return true;
          };
        }
        if (!item.onChange) {
          item.onChange = (files) => {
            return true;
          };
        }
        if (!item.uploadAfter) {
          item.uploadAfter = (result, files) => {
            return true;
          };
        }
        if (!item.uploadBefore) {
          //  console.log("111");
          item.uploadBefore = (files) => {
            return true;
          };
        }
      }
    },
    initFormRules(init) {
      if (this.loadKey) {
        this.initSource();
      }
      //  this.ruleValidate={};
      this.formRules.forEach((row, xIndex) => {
        if (row.length > this.span) this.span = row.length;

        row.forEach((item, yIndex) => {
          //目前只支持select单选远程搜索，remote远程从后台字典数据源进行搜索，url从指定的url搜索
          if (item.remote || item.url) {
            // item.remoteData = [];
            item.loading = false;
            item.point = { x: xIndex, y: yIndex };
          }
          //初始化上传文件信息
          this.initUpload(item, init);
          //初始化数据源空对象
          if (item.dataKey) {
            //下拉框都强制设置为字符串类型
            item.columnType = "string";
            if (!item.data) {
              item.data = [];
            }
          }
        });
      });
    },
    getRule(item, formFileds) {
      //用户设置的自定义方法
      if (item.validator && typeof item.validator == "function") {
        return {
          validator: (rule, val, callback) => {
            //用户自定义的方法，如果返回了值，直接显示返回的值，验证不通过
            let message = item.validator(rule, val);
            if (message) return callback(new Error(message + ""));
            return callback();
          },
          required: item.required,
          trigger:
            this.rule.change.indexOf(item.type) != -1 ? "change" : "blur",
        };
      }

      //设置数字的最大值民最小值
      if (
        item.type == "number" ||
        item.columnType == "number" ||
        item.columnType == "int" ||
        item.type == "decimal"
      ) {
        //如果是必填项的数字，设置一个默认最大与最值小
        if (item.required && typeof item.min != "number") {
          if (item.type == "decimal") {
            item.min = 0.1;
          } else {
            item.min = 1;
          }
        }

        return {
          required: item.required,
          message: item.title,
          title: item.title,
          trigger: "blur",
          min: item.min,
          max: item.max,
          type: item.columnType || item.type,
          validator: (rule, value, callback) => {
            if (!rule.min && !rule.max) {
              if (rule.required) {
                if (value == "") {
                  formFileds[rule.field] = 0;
                  return callback();
                }
              }
              if (value == "" || value == undefined) return callback();
            }
            if (rule.type == "number") {
              if (!this.rule.number.test(value)) {
                rule.message = rule.title + "只能是整数";
                return callback(new Error(rule.message));
              }
            } else {
              if (!this.rule.decimal.test(value)) {
                rule.message = rule.title + "只能是数字";
                return callback(new Error(rule.message));
              }
            }
            if (
              rule.min != undefined &&
              typeof rule.min == "number" &&
              value < rule.min
            ) {
              rule.message = rule.title + "不能小于" + rule.min;
              return callback(new Error(rule.message));
            }
            if (
              rule.max != undefined &&
              typeof rule.max == "number" &&
              value > rule.max
            ) {
              rule.message = rule.title + "不能大于" + rule.max;
              return callback(new Error(rule.message));
            }
            return callback();
          },
        };
      }

      //手机验证
      if (item.type == "phone") {
        return {
          validator: this.validatorPhone,
          required: item.required,
          trigger: "blur",
        };
      }

      if (item.type == "password") {
        return {
          validator: this.validatorPwd,
          required: item.required,
          trigger: "blur",
        };
      }

      if (!item.required && item.type != "mail") {
        return {
          required: false,
        };
      }

      if (!item.hasOwnProperty("type")) {
        item.type = "text";
      }

      //inputTypeArr:['text','string','mail','textarea'],
      if (this.inputTypeArr.indexOf(item.type) != -1) {
        let message =
          item.title +
          (this.types[item.columnType] == "number"
            ? "请输入一个有效的数字"
            : item.type == "mail"
            ? "必须是一个邮箱地址"
            : "不能为空");
        let type = item.type == "mail" ? "email" : this.types[item.columnType];
        let _rule = {
          required: true,
          message: message,
          trigger: "blur",
          type: type,
        };
        if (item.type == "mail") {
          _rule.required = item.required;
          return [
            _rule,
            {
              type: type,
              message: message,
              trigger: "blur",
            },
          ];
        }
        if (item.min) {
          _rule.min = item.min;
          _rule.message = item.title + "至少" + item.min + "个字符!";
        }
        if (item.max) {
          return [
            _rule,
            {
              max: item.max,
              required: true,
              message: item.title + "最多" + item.max + "个字符!",
              trigger: "blur",
            },
          ];
        }
        return _rule;
      }

      if (item.type == "radio") {
        return {
          required: item.required,
          message: "请选择" + item.title,
          trigger: "change",
          type: "string",
        };
      }
      if (item.type == "date" || item.type == "datetime") {
        return {
          // required: true, type:  this.types[item.columnType], message:"请选择" + item.title, trigger: 'change'
          required: true,
          message: "请选择" + item.title,
          trigger: "change",
          type: item.range ? "array" : "string",
          //  type: this.types[item.columnType],
          validator: (rule, val, callback) => {
            //用户自定义的方法，如果返回了值，直接显示返回的值，验证不通过
            if (!val || (item.range && val.length == 0)) {
              return callback(new Error("请选择日期"));
            }
            console.log(val);
            // if (message) return callback(new Error(message + ""));
            return callback();
          },
        };
      }

      //if (item.type == "checkbox" || item.type == "select") {
      if (
        item.type == "select" ||
        item.type == "selectList" ||
        item.type == "checkbox" ||
        item.type == "drop" ||
        item.type == "cascader" //2020.05.31增加级联类型
      ) {
        let _rule = {
          required: true,
          message: "请选择" + item.title,
          min: item.min || 1,
          type: "array",
          trigger: "change",
          type: this.types[item.columnType],
          validator: (rule, value, callback) => {
            if (value == undefined || value === "") {
              return callback(new Error(rule.message));
            }
            return callback();
          },
        };

        //    validator: this.validatorPhone,
        if (!item.max) return _rule;
        return [
          _rule,
          {
            message: "最多只能选择" + item.max + "项" + item.title,
            max: item.max,
            type: "array",
            trigger: "change",
          },
        ];
      }
      return {
        required: false,
      };
    },
    getCheckBoxModel(arr) {
      return arr;
      console.log(arr);
      return arr || [];
    },
    validateField(item, callback) {
      //2020.07.17增加对日期onchange时校验
      let fields = this.$refs.formValidate.fields;
      fields.forEach((field) => {
        if (field.prop == item.field) {
          field.validate("", (error) => {
            console.log(error);
          });
        }
      });
      //2020.07.24增加日期onChange事件
      item.onChange && item.onChange(this.formFileds[item.field]);
    },
  },
};
</script>
<style>
.ivu-date-picker {
  width: 100%;
}
/* .ivu-form-item {
  margin-bottom: 20px !important;
} */
</style>
<style scoped>
.readonly-input >>> input {
  box-shadow: none;
  border: 0px;
}
.line-row >>> .ivu-select .ivu-select-dropdown {
  width: 100% !important;
  z-index: 99999;
}

.line-row >>> .ivu-form-item img {
  max-height: 100px;
}
/* .ivu-form-item{

} */
.line-row >>> .ivu-form-item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
<style lang="less" scoped>
.form-imgs {
  display: inline-block;
  .img-item {
    position: relative;
    cursor: pointer;
    margin: 0 10px 10px 0;
    float: left;
    height: 100px;
    border: 1px solid #9e9e9e;
    overflow: hidden;
    border-radius: 5px;
    width: 100px;
  }
  img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.form-item-extra {
  display: flex;
  > div:first-child {
    flex: 1;
  }
  .form-extra {
    margin-left: 10px;
  }
}
</style>



 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/VolForm/VolFormRender.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,11 @@
export default {
  name: "FormExpand",
  functional: true,
  props: {
    render: Function,
  },
  render: (h, ctx) => {
    return ctx.props.render(h, { tt: 11 }); //h();
  }
};


 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/VolItemMenu.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,69 @@
<template>
  <Menu
    :accordion="true"
    @on-open-change="menuOpenChange"
    @on-select="menuSelect"
    :active-name="activeId"
    :theme="theme"
    :open-names="[0]"
  >
    <vol-tree :treeData="trees"></vol-tree>
  </Menu>
</template>
<script>
export default {
  components: {
    VolTree: {
      name: "VolTree",
      template: `<div>
           <div  class="com-menu" v-for="(subItem,subIndex) in treeData">
            <MenuItem v-if="!subItem.children":to="subItem.to||''" :name="subItem.id">{{subItem.name}}</MenuItem>
            <Submenu v-else :name="subItem.id">
              <template slot="title">
                <Icon :type="subItem.icon||'ios-aperture'"/>{{subItem.name}}
              </template>
                <vol-tree :treeData="subItem.children" ></vol-tree>
            </Submenu>
           </div>
           </div>`,
      props: ["treeData"]
    }
  },
  props: {
    trees: { type: Array, default: [] },
    onSelect: {
      type: Function,
      default: x => {
        console.log(x);
      }
    },
    onOpenChange: {
      type: Function,
      default: x => {
        console.log(x);
      }
    },
    theme: { type: String, default: "light" /*light,dark */ }
  },
  render(createElement) {
    console.log(createElement);
  },
  data() {
    return {
      activeId: 0
    };
  },
  methods: {
    menuOpenChange(node) {
      if (node.length == 0) return;
      this.activeId =-999999;
      this.onOpenChange(node);
    },
    menuSelect(node) {
      this.onSelect(node);
    }
  }
};
</script>



 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/VolMenu.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,66 @@
<template>
  <div class="menu-list">
    <vol-item-menu :onOpenChange="onOpenChange" :onSelect="onSelect" :trees="arrayToTree()" :theme="theme"></vol-item-menu>
  </div>
</template>
<script>
import VolItemMenu from "@/components/basic/VolItemMenu.vue";

export default {
  components: {
    VolItemMenu
  },
  props: {
    options: {
      type: Array,
      default: []
    },
    onSelect: {
      type: Function,
      default: x => {
        console.log(x);
      }
    },
    onOpenChange: {
      type: Function,
      default: x => {
        console.log(x);
      }
    },
    theme: { type: String, default: "light" /*light,dark */ }
  },
  methods: {
    convertTree(root, source) {
      var subItems = source.filter(x => {
        return x.parentId == root.id;
      });
      if (subItems.length > 0) {
        root.children = [];
        root.children.push(...subItems);
        root.children.forEach(element => {
          this.convertTree(element, source);
        });
      }
    },
    arrayToTree() {
      // var menuData = [
      //   { id: 1, name: "iview组件", parentId: 0,icon:'ios-aperture' }
      // ];

      var basicRoot = this.options.filter(x => {
        return x.parentId == 0;
      });
      basicRoot.forEach(x => {
        return this.convertTree(x, this.options);
      });

      return basicRoot;
    }
  },
  data() {
    return {};
  }
};
</script>



 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/VolTable.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1106 @@
<template>
  <div>
    <div class="vol-table">
      <div class="mask" v-show="loading"></div>
      <div class="message" v-show="loading">加载中.....</div>
      <el-table
        :show-summary="summary"
        :summary-method="(columns,row)=>{return this.summaryData;}"
        @selection-change="selectionChange"
        @row-click="rowClick"
        @cell-mouse-leave="rowEndEdit"
        ref="table"
        class="v-table"
        @sort-change="sortChange"
        tooltip-effect="dark"
        :height="realHeight"
        :max-height="realMaxHeight"
        :data="url?rowData:tableData"
        border
        :row-class-name="initIndex"
        style="width: 100%"
      >
        <el-table-column v-if="ck" type="selection" width="55"></el-table-column>
        <el-table-column
          v-for="(column,cindex) in filterColumns()"
          :key="cindex"
          :prop="column.field"
          :label="column.title"
          :min-width="column.width"
          :formatter="formatter"
          :fixed="column.fixed"
          :align="column.align"
          :sortable="column.sort||cindex==0?'custom':false"
        >
          <template slot-scope="scope">
            <!-- 2020.06.18增加render渲染自定义内容 -->
            <table-render
              v-if="column.render&&typeof column.render=='function'"
              :row="scope.row"
              :index="scope.$index"
              :column="column"
              :render="column.render"
            ></table-render>
            <!-- å¯ç”¨åŒå‡»ç¼–辑功能，带编辑功能的不会渲染下拉框文本背景颜色 -->
            <!-- @click="rowBeginEdit(scope.$index,cindex)" -->
            <div v-else-if="column.edit" class="edit-el">
              <div v-if="column.edit.keep|| edit.rowIndex==scope.$index" class="e-item">
                <div>
                  <!-- 2020.07.24增加日期onChange事件 -->
                  <DatePicker
                    :transfer="true"
                    v-if="column.edit.type=='date'||column.edit.type=='datetime'"
                    :type="column.edit.type"
                    :format="column.edit.type=='date'? 'yyyy-MM-dd':'yyyy-MM-dd HH:mm:ss'"
                    :placeholder="column.title"
                    :value="scope.row[column.field]"
                    @on-change="(time)=>{scope.row[column.field]=time; column.onChange&&column.onChange(time,column); return time}"
                  ></DatePicker>
                  <i-switch
                    v-else-if="column.edit.type=='switch'"
                    :true-value="typeof scope.row[column.field]=='boolean' ? true:1"
                    :false-value="typeof scope.row[column.field]=='boolean' ? false:0"
                    v-model="scope.row[column.field]"
                    @on-change="(value)=>{column.onChange&&column.onChange(column,scope.row,url?rowData:tableData,value);}"
                  >
                    <span slot="open">是</span>
                    <span slot="close">否</span>
                  </i-switch>
                  <!--如果是1或0请加上属性 true-value="1" false-value="0"
               å¦‚æžœvalue是字符串数字则使用 :true-value="1" :false-value="0"
                  -->
                  <Select
                    :transfer="true"
                    v-else-if="column.edit.type=='select'"
                    v-model="scope.row[column.field]"
                    :filterable="(column.filter||getSelectedOptions(column).length>10)?true:false"
                    :placeholder="'请选择'+column.title"
                    @on-change="column.onChange&&column.onChange(column,scope.row,url?rowData:tableData)"
                    clearable
                  >
                    <Option
                      v-for="(kv,kvIndex) in getSelectedOptions(column)"
                      :key="kvIndex"
                      :value="kv.key===undefined?'':kv.key"
                    >{{kv.value}}</Option>
                  </Select>
                  <Input
                    v-else
                    clearable
                    @on-change="(event)=>{onChange    (scope,scope.row[column.field],event,column);}"
                    v-model="scope.row[column.field]"
                    :placeholder="'请输入'+column.title"
                  ></Input>
                </div>
                <div class="extra" v-if="column.extra&&edit.rowIndex==scope.$index">
                  <a
                    :style="column.extra.style"
                    @click="()=>{column.extra.click&&column.extra.click(column,scope.row,url?rowData:tableData)}"
                  >
                    <Icon v-if="column.extra.icon" :type="column.extra.icon" />
                    {{column.extra.text}}
                  </a>
                </div>
              </div>
              <template v-else>
                <div v-if="column.formatter" v-html="column.formatter(scope.row,column)"></div>
                <div v-else>{{formatter(scope.row,column,true)}}</div>
              </template>
            </div>
            <!--没有编辑功能的直接渲染标签-->
            <div v-else>
              <a
                href="javascript:void(0)"
                @click="link(scope.row,column)"
                v-if="column.link"
                v-text="scope.row[column.field]"
              ></a>
              <img
                v-else-if="column.type=='img'"
                v-for="(file,vIndex ) in  getFilePath(scope.row[column.field])"
                :key="vIndex"
                :onerror="defaultImg"
                @click="viewImg(scope.row,column,file.path)"
                class="table-img"
                :src="file.path"
              />
              <a
                style="margin-right: 15px;"
                v-else-if="column.type=='file'||column.type=='excel'"
                class="t-file"
                v-for="(file,vIndex ) in  getFilePath(scope.row[column.field])"
                :key="vIndex"
                @click="dowloadFile(file)"
              >{{file.name}}</a>
              <Tag v-else-if="column.type=='date'">{{formatterDate(scope.row,column)}}</Tag>
              <div
                v-else-if="column.formatter"
                @click="formatterClick(scope.row,column)"
                v-html="column.formatter(scope.row,column)"
              ></div>
              <div
                v-else-if="column.click"
                @click="formatterClick(scope.row,column)"
              >{{scope.row[column.field]}}</div>
              <Tag
                v-else-if="(column.bind)"
                :color="getColor(scope.row,column)"
              >{{formatter(scope.row,column,true)}}</Tag>
              <div v-else>{{formatter(scope.row,column,true)}}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column v-if="!doubleEdit" :min-width="100" label="操作" fixed="right">
          <template slot-scope="scope">
            <Button type="info" size="small" @click="beginWithButtonEdit(scope)" ghost>编辑</Button>
            <Button type="info" size="small" @click="endWithButtonEdit(scope)" ghost>完成</Button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block pagination" v-if="!paginationHide">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginations.page"
        :page-sizes="paginations.sizes"
        :page-size="paginations.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginations.total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
var $vue;
import VolTableRender from "./VolTable/VolTableRender";
export default {
  components: { "table-render": VolTableRender },
  props: {
    tableData: {
      //表数据源,配置了url就不用传这个参数了
      type: Array,
      default: () => {
        return [];
      },
    },
    columns: {
      type: Array,
      default: [],
      //[ {
      //   field: "columnType",
      //   title: "数据类型",
      //   width: 120,
      //   hidden:false,
      //   edit: { type: "text", status: false, data: [], key: "" }
      // }] //列的的数据格式edit格式： type类型(text,date,datetime,select,switch),status是否默认为编辑状态
      //data如果是select这里data应该有数据源，如果没有数据请设置key字典编号
    },
    height: {
      type: Number,
      default: 0,
    },
    maxHeight: {
      type: Number,
      default: 0,
    },
    linkView: {
      type: Function,
      default: function () {
        return 1;
      },
    },
    pagination: {
      type: Object,
      default: function () {
        return { total: 0, size: 0, sortName: "" };
      },
    },
    url: {
      type: String,
      default: "",
    },
    paginationHide: {
      type: Boolean,
      default: true,
    },
    color: {
      type: Boolean,
      default: true,
    },
    index: {
      //是否创建索引号,如果需要表格编辑功能，这里需要设置为true
      type: Boolean,
      default: false,
    },
    allowEmpty: {
      //表格数据为空时是否默认为--
      type: Boolean,
      default: true,
    },
    defaultLoadPage: {
      //传入了url，是否默认加载表格数据
      type: Boolean,
      default: true,
    },
    loadKey: {
      //是否自动从后台加载数据源,如【审核状态】字段是的值是数字，但要显示对应的文字，1=审核中，2=审核通过
      type: Boolean,
      default: false,
    },
    single: {
      type: Boolean, //是否单选
      default: false,
    },
    doubleEdit: {
      type: Boolean, //是否双击启用编辑功能
      default: true,
    },
    beginEdit: {
      //编辑开始
      type: Function,
      default: function (row, column, index) {
        return true;
      },
    },
    endEditBefore: {
      //结束编辑前
      type: Function,
      default: function (row, column, index) {
        return true;
      },
    },
    endEditAfter: {
      //结束编辑前
      type: Function,
      default: function (row, column, index) {
        return true;
      },
    },
    ck: {
      //是否显示checkbox
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      visiblyColumns: [],
      key: "",
      realHeight: 0,
      realMaxHeight: 0,
      enableEdit: false, //是否启表格用编辑功能
      empty: this.allowEmpty ? "" : "--",
      defaultImg: 'this.src="' + require("@/assets/imgs/error.png") + '"',
      loading: false,
      footer: {},
      total: 0,
      formatConfig: {},
      defaultColor: "default",
      colors: [
        "success",
        "primary",
        "error",
        "warning",
        "magenta",
        "red",
        "volcano",
        "orange",
        "gold",
        "green",
        "cyan",
        "blue",
        "geekblue",
        "#FFA2D3",
        "default",
      ],
      rule: {
        phone: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
        decimal: /(^[\-0-9][0-9]*(.[0-9]+)?)$/,
        number: /(^[\-0-9][0-9]*([0-9]+)?)$/,
      },
      columnNames: [],
      rowData: [],
      paginations: {
        sort: "",
        order: "desc",
        Foots: "",
        total: 0,
        //2020.08.29增加自定义分页条大小
        sizes: [30, 60, 100, 120],
        size: 30, //默认分页大小
        Wheres: [],
        page: 1,
        rows: 30,
      },
      errorFiled: "",
      edit: { columnIndex: -1, rowIndex: -1 }, //当前双击编辑的行与列坐标
      editStatus: {},
      summary: false, //是否显示合计
      //目前只支持从后台返回的summaryData数据
      summaryData: [],
      summaryIndex: {},
      remoteColumns: [], //需要每次刷新或分页后从后台加载字典数据源的列配置
    };
  },
  created() {
    this.realHeight = this.getHeight();
    this.realMaxHeight = this.getMaxHeight();

    //从后台加下拉框的[是否启用的]数据源
    let keys = [];
    let columnBind = [];
    this.summaryData.push("合计");
    this.columns.forEach((x, _index) => {
      if (!x.hidden) {
        this.summaryIndex[x.field] = _index;
        this.summaryData.push("");
      }
      //求和
      if (x.summary && !this.summary) {
        //强制开启选择框
        this.ck = true;
        this.summary = true;
      }
      if (x.bind && x.bind.key && (!x.bind.data || x.bind.data.length == 0)) {
        //写入远程
        if (!x.bind.data) x.bind.data = [];
        if (x.bind.remote) {
          this.remoteColumns.push(x);
        } else if (this.loadKey) {
          keys.push(x.bind.key);
          x.bind.valueTyoe = x.type;
          columnBind.push(x.bind);
        }
      }
    });
    if (keys.length > 0) {
      this.http
        .post("/api/Sys_Dictionary/GetVueDictionary", keys)
        .then((dic) => {
          dic.forEach((x) => {
            columnBind.forEach((c) => {
              //转换数据源的类型与列的类型一致(2020.04.04)
              if (c.valueTyoe == "int" || c.valueTyoe == "sbyte") {
                x.data.forEach((d) => {
                  //2020.09.01增加对数字类型的二次判断
                  if (!isNaN(d.key)) {
                    d.key = ~~d.key;
                  }
                });
              }
              if (c.key == x.dicNo) c.data.push(...x.data);
            });
          });
        });
    }

    this.paginations.sort = this.pagination.sortName;
    //2020.08.29增加自定义分页条大小
    Object.assign(this.paginations, this.pagination);
    if (this.pagination.size) {
      this.paginations.rows = this.pagination.size;
    }
    this.enableEdit = this.columns.some((x) => {
      return x.hasOwnProperty("edit");
    });
    let keyColumn = this.columns.find((x) => {
      return x.isKey;
    });
    if (keyColumn) {
      this.key = keyColumn.field;
    }
    //如果下拉框，判断bind或edit.data是否有数据源，妱果没有则获取数据源bind
    $vue = this;
    // this.$emit
    this.defaultLoadPage && this.load();
  },
  methods: {
    rowClick(row, column) {
      if (!this.doubleEdit) {
        return;
      }
      this.rowBeginEdit(row, column);
    },
    dowloadFile(file) {
      this.base.dowloadFile(
        file.path,
        file.name,
        {
          Authorization: this.$store.getters.getToken(),
        },
        this.http.ipAddress
      );
    },
    getFilePath(pathSring) {
      //获取表的图片与文件显示
      if (!pathSring) return "";
      let filePath = pathSring.replace(/\\/g, "/").split(",");
      let fileInfo = [];
      for (let index = 0; index < filePath.length; index++) {
        let file = filePath[index];
        if (file.indexOf(".") != -1) {
          let splitFile = file.split("/");
          if (splitFile.length > 0) {
            fileInfo.push({
              name: splitFile[splitFile.length - 1],
              path: this.base.isUrl(file) ? file : this.http.ipAddress + file,
            });
          }
        }
      }
      return fileInfo;
    },
    //重置table
    reset() {
      if (this.tableData && this.tableData.length > 0) {
        this.tableData.splice(0);
      }
      if (this.rowData && this.rowData.length > 0) {
        this.rowData.splice(0);
      }
      if (!this.paginationHide) {
        this.paginations.page = 1;
        // this.paginations.rows = 30;
        if (this.paginations.wheres && this.paginations.wheres.length > 0) {
          this.paginations.wheres.splice(0);
        }
      }
      this.errorFiled = "";
      this.edit.columnIndex = -1;
      this.edit.rowIndex = -1;
    },
    getHeight() {
      //没有定义高度与最大高度，使用table默认值
      if (!this.height && !this.maxHeight) {
        return null;
      }
      //定义了最大高度则不使用高度
      if (this.maxHeight) {
        return null;
      }
      //使用当前定义的高度
      return this.height;
    },
    getMaxHeight() {
      //没有定义高度与最大高度，使用table默认值
      if (!this.height && !this.maxHeight) {
        return null;
      }
      //定义了最大高度使用最大高度
      if (this.maxHeight) {
        return this.maxHeight;
      }
      //不使用最大高度
      return null;
    },
    getSelectedOptions(column) {
      if (column.bind && column.bind.data && column.bind.data.length > 0) {
        return column.bind.data;
      }
      return [];
    },
    formatterClick(row, column, event) {
      column.click && column.click(row, column, event);
    },
    initIndex(obj) {
      if (this.index) {
        obj.row.elementIdex = obj.rowIndex;
      }
      return "";
    },
    toggleEdit(event) {},
    setEditStatus(status) {
      this.columns.forEach((x) => {
        if (x.hasOwnProperty("edit")) {
          this.$set(x.edit, "status", status);
        }
      });
    },
    //通过button按钮启用编辑
    beginWithButtonEdit(scope) {
      //url?rowData:tableData
      this.rowBeginEdit(scope.row, this.columns[scope.$index]);
    },
    //通过button结束编辑
    endWithButtonEdit(scope) {
      if (this.edit.rowIndex == -1) return;

      if (
        !this.endEditBefore(scope.row, this.columns[scope.$index], scope.$index)
      )
        return;

      for (let index = 0; index < this.columns.length; index++) {
        let column = this.columns[index];
        if (!column.hidden && (column.required || column.require)) {
          if (!this.validateColum(column, scope.row)) return;
        }
      }
      this.edit.rowIndex = -1;
      if (
        !this.endEditAfter(scope.row, this.columns[scope.$index], scope.$index)
      )
        return;
    },
    rowBeginEdit(row, column) {
      if (this.edit.rowIndex != -1) {
        return;
      }
      if (!this.enableEdit) return;
      //编辑前
      if (!this.beginEdit(row, column, row.elementIdex)) return;
      if (row.hasOwnProperty("elementIdex")) {
        if (this.edit.rowIndex == row.elementIdex) {
          return;
        }
        this.edit.rowIndex = row.elementIdex;
      }
    },
    validateColum(option, data) {
      if (option.hidden || option.bind) return true;
      let val = data[option.field];
      if (option.require || option.required) {
        if (val != "0" && (val == "" || val == undefined)) {
          if (!this.errorFiled) {
            //  event.focus();
            this.$Message.error(option.title + "不能为空");
          }
          return false;
        }
      }
      if (!option.edit) {
        return true;
      }
      let editType = option.edit.type;
      //验证数字
      if (editType == "int" || editType == "decimal" || editType == "number") {
        if (val == "" || val == undefined) return true;
        if (editType == "decimal") {
          if (!this.rule.decimal.test(val)) {
            this.$Message.error(option.title + "只能是数字");
            return false;
          }
        } else if (!this.rule.decimal.test(val)) {
          this.$Message.error(option.title + "只能是整数");
          return false;
        }
        if (
          option.edit.min != undefined &&
          typeof option.edit.min == "number" &&
          val < option.edit.min
        ) {
          this.$Message.error(option.title + "不能小于" + option.edit.min);
          return false;
        }
        if (
          option.edit.max != undefined &&
          typeof option.edit.max == "number" &&
          val > option.edit.max
        ) {
          this.$Message.error(option.title + "不能大于" + option.edit.min);
          return false;
        }
        return true;
      }

      //验证字符串
      if (val && (editType == "text" || editType == "string")) {
        if (
          option.edit.min != undefined &&
          typeof option.edit.min == "number" &&
          val.length < option.edit.min
        ) {
          this.$Message.error(
            option.title + "至少" + option.edit.min + "个字符"
          );
          return false;
        }
        if (
          option.edit.max != undefined &&
          typeof option.edit.max == "number" &&
          val.length > option.edit.max
        ) {
          this.$Message.error(
            option.title + "最多" + option.edit.max + "个字符"
          );
          return false;
        }
        return true;
      }
      return true;
    },
    rowEndEdit(row, column, event) {
      if (!this.enableEdit) {
        if (!this.errorFiled) {
          this.edit.rowIndex = -1;
        }
        return;
      }
      if (!this.doubleEdit && event) {
        return;
      }
      //结束编辑前
      if (!this.endEditBefore(row, column, this.edit.rowIndex)) return;

      if (
        this.edit.rowIndex != -1 &&
        (!this.errorFiled || this.errorFiled == column.property)
      ) {
        let data = (this.url ? this.rowData : this.tableData)[
          this.edit.rowIndex
        ];
        let option = this.columns.find((x) => {
          return x.field == column.property;
        });
        if (!option || !option.edit) {
          return;
        }
        if (
          option.edit.type == "datetime" ||
          option.edit.type == "date" ||
          option.edit.type == "select"
        ) {
          if (this.edit.rowIndex == row.elementIdex) {
            return;
          }
        }
        if (!this.validateColum(option, data)) {
          this.errorFiled = option.field;
          return false;
        } else {
          this.errorFiled = "";
        }
      }
      if (this.errorFiled) {
        return;
      }
      if (!this.endEditAfter(row, column, this.edit.rowIndex)) return;
      //  this.errorFiled = "";
      this.edit.rowIndex = -1;
      //this.edit.columnIndex=-1;
    },
    delRow() {
      let rows = this.getSelected();
      if (rows.length == 0) return this.$Message.error("请选择要删除的行!");

      let data = this.url ? this.rowData : this.tableData;
      let indexArr = this.getSelectedIndex();
      if (indexArr.length == 0) {
        return this.$Message.error(
          "删除操作必须设置VolTable的属性index='true'"
        );
      }
      // if (indexArr.length == 0 || !this.key) {
      //   return this.$message.error(
      //     "请设置index=true属性或指columns的字段为key"
      //   );
      // }
      if (indexArr.length == 0) {
        // let keyValues=[]
        // rows.forEach(x=>{
        //   if (x[this.key]) {
        //   }
        //   keyValues.push(x[this.key])
        // })
        // data.find(x=>)
      } else {
        for (let i = data.length - 1; i >= 0; i--) {
          if (indexArr.indexOf(i) != -1) {
            data.splice(i, 1);
          }
        }
      }
      this.edit.rowIndex = -1;
      return rows;
    },
    addRow(row) {
      if (!row) {
        row = {};
      }
      this.columns.forEach((x) => {
        if (x.edit && x.edit.type == "switch") {
          if (!row.hasOwnProperty(x.field)) {
            row[x.field] = x.type == "bool" ? false : 0;
          }
        }
      });
      if (!this.url) {
        this.tableData.push(row);
        return;
      }
      this.rowData.push(row);
    },
    viewImg(row, column, url) {
      this.base.previewImg(url, this.http.ipAddress);
      // window.open(row[column.field]);
    },
    link(row, column) {
      this.$props.linkView(row, column);
    },
    getSelected() {
      return this.$refs.table.selection;
    },
    getSelectedIndex() {
      if (!this.index) {
        //只有设置了属性index才有索引行
        return [];
      }
      let indexArr = this.$refs.table.selection.map((x) => {
        return x.elementIdex;
      });
      return indexArr ? indexArr : [];
    },
    GetTableDictionary(rows) {
      //分页或刷新或重新绑定数据源
      if (this.remoteColumns.length == 0 || !rows || rows.length == 0) return;
      let remoteInfo = {};
      for (let index = 0; index < this.remoteColumns.length; index++) {
        const column = this.remoteColumns[index];
        //  column.bind.data.splice(0);
        let key = column.bind.key;
        let data = [];
        rows.forEach((row) => {
          if (data.indexOf(row[column.field]) == -1) {
            data.push(row[column.field]);
          }
        });
        if (data.length > 0) {
          remoteInfo[key] = data;
        }
      }
      if (remoteInfo.length == 0) return;
      //ha= Object.assign([], ha, hb)
      this.http
        .post("/api/Sys_Dictionary/GetTableDictionary", remoteInfo)
        .then((dic) => {
          dic.forEach((x) => {
            this.remoteColumns.forEach((column) => {
              if (column.bind.key == x.key) {
                column.bind.data = Object.assign([], column.bind.data, x.data);
                //column.bind.data.push(...x.data);
              }
            });
          });
        });
    },
    load(query, isResetPage) {
      //isResetPage重置分页数据
      if (!this.url) return;
      if (isResetPage) {
        this.resetPage();
      }
      let param = {
        page: this.paginations.page,
        rows: this.paginations.rows,
        sort: this.paginations.sort,
        order: this.paginations.order,
        wheres: [], //查询条件，格式为[{ name: "字段", value: "xx" }]
      };
      let status = true;
      //合并查询信息(包查询分页、排序、查询条件等)
      if (query) {
        param = Object.assign(param, query);
      }
      /*查询前处理(如果需要查询条件，实现组件方法loadBefore方法即可:
        loadBefore=(param, callBack)=>{
          param.wheres = [{ name: "PhoneNo", value: "13419098211" }];
          callBack(true);
        })
      */
      this.$emit("loadBefore", param, (result) => {
        status = result;
      });
      if (!status) return;

      if (param.wheres && param.wheres instanceof Array) {
        param.wheres = JSON.stringify(param.wheres);
      }
      this.loading = true;
      this.http.post(this.url, param).then(
        (data) => {
          this.loading = false;
          //查询返回结果后处理
          this.$emit("loadAfter", data.rows || [], (result) => {
            status = result;
          });
          if (!status) return;
          this.GetTableDictionary(data.rows);
          this.rowData = data.rows || [];
          this.paginations.total = data.total;
          //合计
          this.getSummaries(data);
        },
        (error) => {
          this.loading = false;
          // this.$Message.error(error || "网络异常");
        }
      );
    }, //获取统计
    getSummaries(data) {
      if (!this.summary || !data.summary) return;
      this.summaryData.splice(0);
      //如果有checkbox，应该算作是第一行
      if (this.ck) {
        this.summaryData.push(0);
      }
      this.columns.forEach((col) => {
        if (!col.hidden) {
          if (data.summary.hasOwnProperty(col.field)) {
            this.summaryData.push(data.summary[col.field]);
          } else {
            this.summaryData.push("");
          }
        }
      });
      if (this.summaryData.length > 0 && this.summaryData[0] == "") {
        this.summaryData[0] = "合计";
      }
    },
    getInputChangeSummaries() {},
    filterColumns() {
      return this.columns.filter((x) => {
        return !x.hidden;
      });
    },
    handleSizeChange(val) {
      this.paginations.rows = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.paginations.page = val;
      this.load();
    },
    sortChange(sort) {
      this.paginations.sort = sort.prop;
      this.paginations.order = sort.order == "ascending" ? "asc" : "desc";
      this.load();
    },
    resetPage() {
      //重置查询分页
      // this.paginations.rows = 30;
      this.paginations.page = 1;
    },
    selectionChange(selection) {
      // console.log(selection);
      //选择行事件,只有单选才触发
      if (this.single && selection.length == 1) {
        this.$emit("rowChange", selection[0]); //
      }
      if (this.single && selection.length > 1) {
        this.$refs.table.toggleRowSelection(selection[0]);
      }
      // this.rowChange(selection[0]);
    },
    getColor(row, column) {
      let val = row[column.field];

      // if (val == "" || val == null || val == undefined) {
      //  return "none";
      // }
      if (column.getColor && typeof column.getColor == "function") {
        let _color = column.getColor(row, column);
        if (_color) {
          return _color;
        }
      }
      if (!val && val != "0") {
        return this.defaultColor;
      }
      if (!this.formatConfig[column.field]) {
        this.formatConfig[column.field] = [val];
        return this.colors[0];
      }
      let index = this.formatConfig[column.field].indexOf(val);
      if (index != -1) {
        return this.colors[index];
      }
      if (this.formatConfig[column.field].length > 15) {
        return this.defaultColor;
      }

      if (index == -1) {
        this.formatConfig[column.field].push(val);
        index = this.formatConfig[column.field].length - 1;
      }
      return this.colors[index];
    },
    formatterDate(row, column) {
      return (row[column.field] || "").substr(0, 10);
    },
    formatter(row, column, template) {
      if (!template) return row[column.property];
      let val = row[column.field];
      //是否值
      if (column.edit && column.edit.type == "switch") {
        return val ? "是" : "否";
      }
      if (!column.bind || !column.bind.data) {
        return row[column.field];
      }
      if (!val && val != 0) return val;
      //编辑多选table显示
      if (
        (column.bind.type == "selectList" || column.bind.type == "checkbox") &&
        typeof val == "string" &&
        val.indexOf(",") != -1
      ) {
        return this.getSelectFormatter(column, val);
      }
      let source = column.bind.data.filter((x) => {
        // return x.key != "" && x.key == val;
        //2020.06.06修复单独使用table组件时,key为数字0时转换成文本失败的问题
        return x.key !== "" && x.key !== undefined && x.key + "" === val + "";
      });
      if (source && source.length > 0) val = source[0].value;
      return val;
    },
    getSelectFormatter(column, val) {
      //编辑多选table显示
      let valArr = val.split(",");
      for (let index = 0; index < valArr.length; index++) {
        column.bind.data.forEach((x) => {
          //2020.06.06修复数据源为selectList时,key为数字0时不能转换文本的问题
          if (
            x.key !== "" &&
            x.key !== undefined &&
            x.key + "" == valArr[index] + ""
          ) {
            valArr[index] = x.value;
          }
        });
      }
      return valArr.join(",");
    },
    onChange(scope, val, event, column) {
      let row = scope.row;
      if (row.onChange && !row.onChange(row, val, event)) {
        return;
      }
      //输入框求和实时计算
      this.getInputSummaries(scope, val, event, column);
    },
    //input输入实时求和
    getInputSummaries(scope, val, event, column) {
      //column列设置了summary属性的才计算值
      if (!column.summary) return;
      let sum = 0;
      let _index = 0;
      (this.url ? this.rowData : this.tableData).forEach((x, index) => {
        if (x.hasOwnProperty(column.field) && !isNaN(x[column.field])) {
          _index = index;
          sum += x[column.field] * 1;
        }
      });
      this.$set(this.summaryData, this.summaryIndex[column.field] - 1, sum);
    },
  },
};
</script>
<style lang="less" scoped>
.vol-table {
  position: relative;
  .mask {
    opacity: 0.2;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #d0d0d0;
    z-index: 100;
  }
  .message {
    text-align: center;
    color: #635c5c;
    font-size: 15px;
    font-weight: 600;
    background: #eee;
    transform: translateY(-50%);
    top: 50%;
    position: absolute;
    z-index: 200;
    left: 0;
    right: 0;
    width: 150px;
    margin: 0 auto;
    line-height: 40px;
    border-radius: 4px;
    border: 1px solid #a09e9e;
  }
}
.e-item {
  display: flex;
  > div:first-child {
    flex: 1;
  }
}
</style>


<style scoped>
/*表头错行 .el-table th.gutter{
    display: table-cell!important;
} */
.pagination {
  text-align: right;
  /* margin-top: 8px; */
  padding: 2px 28px;
  border: 1px solid #eee;
  border-top: 0px;
}
.v-table >>> .el-table__header th {
  padding: 1.5px !important;

  background-color: #f8f8f9 !important;
  font-size: 13px;
}
.v-table >>> .el-table__body .cell {
  word-break: inherit !important;
  white-space: nowrap !important;
}
.v-table >>> .el-table__body td {
  padding: 7px 0 !important;
}

.v-table >>> .el-table__footer td {
  padding: 5px 0 !important;
}
.vol-table >>> .el-table th > .cell {
  white-space: inherit !important;
}
.vol-table >>> .el-table__body-wrapper::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.vol-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #ddd;
}
.vol-table .table-img {
  height: 40px;
  border-radius: 5px;
  margin-right: 10px;
  width: 40px;
  object-fit: cover;
}
.vol-table .table-img:hover {
  cursor: pointer;
}
.v-table >>> .ivu-tag-default {
  border: none !important;
  background: none !important;
}
/* .spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .message{
        height: 50px;
        position: relative;
        border: 1px solid #eee;
    } */
</style>


 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/VolTable/VolTableRender.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,16 @@
export default {
  name: "TableExpand",
  functional: true,
  props: {
    render: Function,
    row: {},//当前行的数据
    column: {},//当前行的配置信息
    index: { type: Number, default: 0 }//当前所在行
  },
  render: (h, ctx) => {
    const params = {
      row: ctx.props.row, column: ctx.props.column, index: ctx.props.index
    }
    return ctx.props.render(h, params); //h();
  }
};

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/basic/VolUpload.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,694 @@
<template>
  <div class="upload-container">
    <div>
      <div class="input-btns" style="margin-bottom: 10px;">
        <input
          ref="input"
          type="file"
          style="display:none;"
          @change="handleChange"
          :multiple="multiple"
        />
        <div v-if="img" class="upload-img">
          <!-- v-for="(file,index) in fileInfo.length>0?fileInfo: files" -->
          <div v-for="(file,index) in  files.length>0?files:fileInfo" :key="index" class="img-item">
            <div class="operation">
              <div class="action">
                <Icon type="md-eye" @click="previewImg(index)" class="view"></Icon>
                <Icon type="md-close" @click="removeFile(index)" class="remove"></Icon>
              </div>
              <div class="mask"></div>
            </div>
            <img :src="getImgSrc(file)" :onerror="errorImg" />
          </div>
          <div
            v-show="!autoUpload||(autoUpload&&files.length<maxFile&&fileInfo.length<maxFile)"
            class="img-selector"
            :class="getSelector()"
          >
            <div class="selector" @click="handleClick">
              <Icon type="ios-camera"></Icon>
            </div>
            <div v-if="!autoUpload" class="s-btn" :class="{readonly:changed}" @click="upload">
              <div>{{loadText}}</div>
            </div>
          </div>
        </div>
        <Button v-else @click="handleClick" icon="ios-cloud-upload-outline">选择{{img?'图片':'文件'}}</Button>

        <Button
          v-if="!autoUpload&&!img"
          type="info"
          :disabled="changed"
          icon="md-arrow-round-up"
          @click="upload"
          :loading="loadingStatus"
        >上传文件</Button>
      </div>
      <slot></slot>
      <div v-if="desc">
        <Alert show-icon>{{getText()}}文件大小不超过{{maxSize||3}}M</Alert>
      </div>
      <slot name="content"></slot>
      <div v-if="!img">
        <ul class="upload-list" v-show="fileList">
          <li class="list-file" v-for="(file,index) in  files.length>0?files:fileInfo" :key="index">
            <a>
              <span @click="fileOnClick(index,file)">
                <Icon :type="format(file)"></Icon>
                {{ file.name }}
              </span>
              <!-- <span
              v-show="file.size / 1024>0"
              style="margin-left:15px;"
              >大小{{(file.size / 1024).toFixed(2)}}KB</span>-->
            </a>
            <span @click="removeFile(index)" class="file-remove">
              <Icon type="md-close"></Icon>
            </span>
          </li>
        </ul>
      </div>
      <slot name="tip"></slot>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    desc: {
      //是否显示默认介绍
      //是否多选
      type: Boolean,
      default: false,
    },
    fileInfo: {
      //用于接收上传的文件，也可以加以默认值，显示已上传的文件，用户上传后会覆盖默认值
      type: Array,
      default: () => {
        return [];
      }, //格式[{name:'1.jpg',path:'127.0.01/1.jpg'}]
    },
    downLoad: {
      //是否可以点击文件下载
      type: Boolean,
      default: true,
    },
    multiple: {
      //是否多选
      type: Boolean,
      default: false,
    },
    maxFile: {
      //最多可选文件数量，必须multiple=true，才会生效
      type: Number,
      default: 5,
    },
    maxSize: {
      //文件限制大小3M
      type: Number,
      default: 3,
    },

    autoUpload: {
      //选择文件后是否自动上传
      type: Boolean,
      default: true,
    },
    img: {
      //图片类型  img>excel>fileTypes三种文件类型优先级
      type: Boolean,
      default: false,
    },
    excel: {
      //excel文件
      type: Boolean,
      default: false,
    },
    fileTypes: {
      //指定上传文件的类型
      type: Array,
      default: () => {
        return [];
      },
    },
    url: {
      //上传的url
      type: String,
      default: "",
    },
    uploadBefore: {
      //返回false会中止执行
      //上传前
      type: Function,
      default: (files) => {
        return true;
      },
    },
    uploadAfter: {
      //返回false会中止执行
      //上传后
      type: Function,
      default: (result, files) => {
        return true;
      },
    },
    onChange: {
      //选择文件时  //返回false会中止执行
      type: Function,
      default: (files) => {
        return true;
      },
    },
    // clear: {
    //   //上传完成后是否清空文件列表
    //   type: Boolean,
    //   default: true
    // },
    fileList: {
      //是否显示选择的文件列表
      type: Boolean,
      default: true,
    },
    fileClick: {
      //点击文件事件
      type: Function,
      default: (index, file, files) => {
        return true;
      },
    },
    removeBefore: {
      //移除文件事件
      type: Function,
      default: (index, file, files) => {
        return true;
      },
    },
    append: {
      //多选时，重新选择文件是否追加(默认重选直接用清原数据),逻辑待处理
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      errorImg: 'this.src="' + require("@/assets/imgs/error-img.png") + '"',
      changed: false, //手动上传成功后禁止重复上传，必须重新选择
      model: true,
      files: [],
      bigImg: "",
      loadingStatus: false,
      loadText: "上传文件",
    };
  },
  created() {
    //默认有图片的禁止上传操作
    if (this.fileInfo) {
      this.changed = true;
    }
  },
  methods: {
    previewImg(index) {
      //查看大图预览模式待完
      this.base.previewImg(
        this.getImgSrc(
          (this.files.length > 0 ? this.files : this.fileInfo)[index]
        )
      );
      //  window.open(this.getImgSrc((this.files.length>0?this.files:this.fileInfo)[index]));
    },
    getSelector() {
      if (this.autoUpload) {
        return "auto-selector";
      }
      return "submit-selector";
    },
    getImgSrc(file) {
      if (file.hasOwnProperty("path")) {
        if (this.base.isUrl(file.path)) {
          return file.path;
        }
        if (file.path.substr(0, 1) == "/") {
          file.path = file.path.substr(1);
        }
        return this.http.ipAddress + file.path;
      }
      return window.URL.createObjectURL(file);
    },
    fileOnClick(index, file) {
      if (!this.fileClick(index, file, this.files)) {
        return;
      }
      //点击不下载
      if (!this.downLoad) {
        return;
      }
      if (!file.path) {
        this.$Message.error("请先上传文件");
        return;
      }
      this.base.dowloadFile(
        file.path,
        file.name,
        {
          Authorization: this.$store.getters.getToken(),
        },
        this.http.ipAddress
      );
    },
    getText() {
      if (this.img) {
        return "只能上传图片,";
      } else if (this.excel) {
        return "只能上传excel文件,";
      }
    },
    handleClick() {
      this.$refs.input.click();
    },
    handleChange(e) {
      this.clearFiles();
      var result = this.checkFile(e.target.files);
      if (!result) {
        return;
      }
      this.changed = false;
      //如果传入了FileInfo需要自行处理移除FileInfo
      if (!this.onChange(e.target.files)) {
        return;
      }
      this.files.push(...e.target.files);
      this.$refs.input.value = null;

      if (this.autoUpload && result) {
        this.upload();
      }
    },
    removeFile(index) {
      //如果传入了FileInfo需要自行处理移除FileInfo
      //t移除文件
      let removeFile =
        this.fileInfo.length > 0 ? this.fileInfo[index] : this.files[index];
      if (this.fileInfo.length) {
        this.fileInfo.splice(index, 1);
      } else {
        this.files.splice(index, 1);
      }
      if (!this.removeBefore(index, removeFile, this.fileInfo)) {
        return;
      }
    },
    clearFiles() {
      this.files.splice(0);
    },
    getFiles() {
      return this.files;
    },
    upload() {
      if (!this.checkFile()) return false;
      if (!this.url) {
        return this.$Message.error({ duration: 5, content: "没有配置好Url" });
      }
      if (!this.files || this.files.length == 0) {
        return this.$Message.error({ duration: 5, content: "请选择文件" });
      }
      if (!this.uploadBefore(this.files)) {
        return;
      }
      var forms = new FormData();
      this.files.forEach(function (file) {
        forms.append("fileInput", file, file.name);
      });
      // forms.append("fileInput", this.files);
      this.loadingStatus = true;
      this.loadText = "上传中..";
      this.http
        .post(this.url, forms, this.autoUpload ? "正在上传文件" : "")
        .then(
          (x) => {
            // this.$refs.uploadFile.clearFiles();
            this.loadingStatus = false;
            this.loadText = "上传文件";
            if (!this.uploadAfter(x, this.files)) {
              this.changed = false;
              return;
            } else {
              this.changed = true;
            }
            this.$Message.success({ duration: 5, content: x.message });
            this.changed = x.status;
            if (!x.status) {
              // this.files = null;
              return;
            }
            if (!this.append) {
              this.fileInfo.splice(0);
            }
            this.files.forEach((file) => {
              this.fileInfo.push({ name: file.name, path: x.data + file.name });
            });
            // if (this.clear) {
            this.clearFiles();
            // }
          },
          (error) => {
            this.loadText = "上传文件";
            this.loadingStatus = false;
          }
        );
    },
    format(file, checkFileType) {
      const format = file.name.split(".").pop().toLocaleLowerCase() || "";
      let fileIcon = "ios-document-outline";
      if (this.fileTypes.length > 0 && checkFileType != undefined) {
        if (this.fileTypes.indexOf(format) != -1) {
          return true;
        }
        return false;
      }
      if (
        checkFileType &&
        !(checkFileType instanceof Array) &&
        checkFileType != "img" &&
        checkFileType != "excel"
      ) {
        if (checkFileType.indexOf(format) > -1) {
          return true;
        } else {
          return false;
        }
      }

      if (
        checkFileType == "img" ||
        ["gif", "jpg", "jpeg", "png", "bmp", "webp"].indexOf(format) > -1
      ) {
        if (checkFileType == "img") {
          if (
            ["gif", "jpg", "jpeg", "png", "bmp", "webp"].indexOf(format) > -1
          ) {
            return true;
          } else {
            return false;
          }
        }
        fileIcon = "ios-image";
      }
      if (
        ["mp4", "m3u8", "rmvb", "avi", "swf", "3gp", "mkv", "flv"].indexOf(
          format
        ) > -1
      ) {
        fileIcon = "ios-film";
      }
      if (["mp3", "wav", "wma", "ogg", "aac", "flac"].indexOf(format) > -1) {
        fileIcon = "ios-musical-notes";
      }
      if (["doc", "txt", "docx", "pages", "epub", "pdf"].indexOf(format) > -1) {
        fileIcon = "md-document";
      }
      if (
        checkFileType == "excel" ||
        ["numbers", "csv", "xls", "xlsx"].indexOf(format) > -1
      ) {
        if (checkFileType == "excel") {
          if (["numbers", "csv", "xls", "xlsx"].indexOf(format) > -1) {
            return true;
          } else {
            return false;
          }
        }
        fileIcon = "ios-podium";
      }
      if (["keynote", "ppt", "pptx"].indexOf(format) > -1) {
        fileIcon = "ios-videocam";
      }

      return fileIcon;
    },
    beforeUpload() {},
    checkFile(files) {
      if (!files) {
        files = this.files;
      }
      if (
        this.multiple &&
        files.length + this.fileInfo.length > (this.maxFile || 5)
      ) {
        this.$Message.error({
          duration: 5,
          content:
            "最多只能选【" +
            (this.maxFile || 5) +
            "】" +
            (this.img ? "张图片" : "个文件") +
            "",
        });
        return false;
      }
      let names = [];
      for (let index = 0; index < files.length; index++) {
        const file = files[index];
        if (names.indexOf(file.name) != -1) {
          file.name = "(" + index + ")" + file.name;
        }
        names.push(file.name);
        if (this.img && !this.format(file, "img")) {
          this.$Message.error({
            duration: 5,
            content: "选择的文件【" + file.name + "】只能是图片格式",
          });
          return false;
        }
        if (this.excel && !this.format(file, "excel")) {
          this.$Message.error({
            duration: 5,
            content: "选择的文件【" + file.name + "】只能是excel文件",
          });
          return false;
        }
        if (
          this.fileTypes &&
          this.fileTypes.length > 0 &&
          !this.format(file, this.fileTypes)
        ) {
          this.$Message.error({
            duration: 5,
            content:
              "选择的文件【" +
              file.name +
              "】只能是【" +
              this.fileTypes.join(",") +
              "】格式",
          });
          return false;
        }
        if (file.size > (this.maxSize || 3) * 1024 * 1024) {
          this.$Message.error({
            duration: 5,
            content:
              "选择的文件【" +
              file.name +
              "】不能超过:" +
              (this.maxSize || 3) +
              "M",
          });
          return false;
        }
      }
      return true;
    },
  },
};
</script>
<style lang="less" scoped>
.upload-list {
  list-style: none;
  .list-file {
    padding: 4px;
    color: #515a6e;
    border-radius: 4px;
    transition: background-color 0.2s ease-in-out;
    overflow: hidden;
    position: relative;

    font-size: 13px;
    .file-remove {
      display: none;
      right: 0;
      //  margin-left: 50px;
      color: #0e9286;
    }
  }
  .list-file:hover {
    cursor: pointer;
    .file-remove {
      display: initial;
    }
    color: #2d8cf0;
  }
}
.upload-container {
  display: inline-block;
  width: 100%;
  // padding: 10px;

  // min-height: 250px;
  border-radius: 5px;
  .alert {
    margin-top: 43px;
  }
  .button-group > * {
    float: left;
    margin-right: 10px;
  }
  .file-info > span {
    margin-right: 20px;
  }
}
.upload-img {
  display: inline-block;
  .img-item:hover .operation {
    display: block;
  }
  .img-item,
  .img-selector {
    position: relative;
    cursor: pointer;
    margin: 0 10px 10px 0;
    float: left;
    width: 70px;
    height: 70px;
    border: 1px solid #c7c7c7;
    overflow: hidden;
    border-radius: 5px;
    // width: 100px;
    img {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .operation {
      display: none;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      .action {
        opacity: 0.6;
        text-align: right;
        background: #727779;
        font-size: 17px;
        position: absolute;
        z-index: 90;
        width: 100%;
        bottom: 3px;
        bottom: 0;
        color: #ded5d5;
        padding-right: 7px;
        padding-bottom: 3px;
        line-height: 23px;
        // i {
        //   border-radius: 50%;
        //   background: white;
        // }
      }
      .mask {
        opacity: 0.6;
        background: #9e9e9e;
        top: 0;
        width: 100%;
        height: 100%;
        position: absolute;
      }
    }
  }
  .img-selector {
    font-size: 50px;
    text-align: center;
    i {
      top: -4px;
      position: relative;
    }
  }

  .auto-selector {
    .selector {
      line-height: 64px;
    }
  }
  .selector {
    color: #a0a0a0;
  }
  .submit-selector {
    .s-btn {
      line-height: 22px;
      font-size: 12px;
      top: -7px;
      // padding: 2px;
      position: relative;
      background: #2db7f5;
      color: white;
    }
    .selector {
      line-height: 50px;
    }
    .readonly {
      background: #8c8c8c;
    }
  }
}
.big-model {
  width: 100%;
  height: 100%;
  position: relative;

  .mask {
    position: absolute;
    opacity: 0.6;
    background: #eee;
    top: 0;
    width: 100%;
    height: 100%;
    position: absolute;
  }
}

.auto-upload {
  z-index: 9999999;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  .j-content {
    text-align: center;
    font-size: 17px;
    top: 40%;
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    width: 240px;
    /* height: 100%; */
    margin: auto;
    background: white;
    /* bottom: 30px; */
    line-height: 50px;
    border-radius: 6px;
    border: 1px solid #d2d2d2;
  }
  .mask {
    cursor: pointer;
    opacity: 0.6;
    width: 100%;
    height: 100%;
    background: #101010;
  }
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/components/custom/CustomViewGrid.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,190 @@
<template>
  <div>
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="设备监控" name="first">
        <el-row>
          <div class="grid-content">
            <el-form
              :inline="true"
              :size="formSize"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item label="审批人">
                <el-input
                  v-model="formInline.user"
                  placeholder="审批人"
                ></el-input>
              </el-form-item>
              <el-form-item label="活动区域">
                <el-select v-model="formInline.region" placeholder="活动区域">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-row>
        <el-row>
          <el-table
            ref="filterTable"
            border
            :data="tableData"
            max-height="250px"
            style="width: 100%"
          >
            <el-table-column
              prop="date"
              label="日期"
              sortable
              width="180"
              column-key="date"
              :filters="[
                { text: '2016-05-01', value: '2016-05-01' },
                { text: '2016-05-02', value: '2016-05-02' },
                { text: '2016-05-03', value: '2016-05-03' },
                { text: '2016-05-04', value: '2016-05-04' },
              ]"
              :filter-method="filterHandler"
            >
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址" :formatter="formatter">
            </el-table-column>
            <el-table-column
              prop="tag"
              label="标签"
              width="100"
              :filters="[
                { text: '家', value: '家' },
                { text: '公司', value: '公司' },
              ]"
              :filter-method="filterTag"
              filter-placement="bottom-end"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.tag === '家' ? 'primary' : 'success'"
                  disable-transitions
                  >{{ scope.row.tag }}</el-tag
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row>
          <el-pagination
            @prev-text="handlePrev"
            @next-text="handleNext"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="1"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formSize: "mini",
      formInline: {
        user: "",
        region: "",
      },
    activeName:'first',

      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 å¼„",
          tag: "家",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 å¼„",
          tag: "公司",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 å¼„",
          tag: "家",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 å¼„",
          tag: "公司",
        },
      ],
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    resetDateFilter() {
      this.$refs.filterTable.clearFilter("date");
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    handleClick(){
        
    }
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
  /* &:last-child {
      margin-bottom: 0;
    } */
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.model-backcolor {
  background: rgb(144, 238, 144);
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/extension/system/Sys_Log.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,17 @@
let extension = {
    components: {//动态扩充组件或组件路径
        //表单header、content、footer对应位置扩充的组件
        gridHeader:'',//{ template: "<div>扩展组xx件</div>" },
        gridBody: '',
        gridFooter: '',
        //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
        modelHeader: '',
        modelBody: '',
        modelFooter: ''
    },
    buttons: [],//扩展的按钮
    methods: {//事件扩展

    }
};
export default extension;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/extension/system/Sys_Role.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,50 @@


let extension = {
  components: {//动态扩充组件或组件路径
    //表单header、content、footer对应位置扩充的组件
    gridHeader: '',
    gridBody: '',
    gridFooter: '',
    //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
    modelHeader: '',
    modelBody: '',
    modelFooter: ''
  },
  buttons: [],//扩展的按钮
  methods: {//事件扩展
    onInit() {
      this.columns.forEach(x => {
        if (x.field == 'ParentId') {
          x.title = "上级角色";
          //2020.05.24修改上级角色的绑定数据源,
          //存在问题,非超级管理员，table中上级角色的值没有加载出来
          //注意，如果是2020.05.24之前获取的数据库脚本
          //请在菜单【下拉框绑定设置】添加一个字典编号【t_roles】,除了字典编号，其他内容随便填写
          x.bind = { key: "roles" }
          //console.log(x);
        }
      });
      // let roleId = this.columns.find(r => r.field == "Role_Id");
      // console.log(roleId);
      this.editFormOptions.forEach(x => {
        x.forEach(item => {
          // if (item.field == 'ParentId') {
          //   item.min = 0;
          // }
          if (item.field == 'ParentId') {
            item.min = 0;
            item.title = "上级角色";
            item.type = 'select';
            item.dataKey = "roles";
            //item.data = [{ key:1,value:'超级管理员' }]
          }
        })
      })
      this.maxBtnLength = 6;
    },
    onInited() {
    }
  }
};
export default extension;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/extension/system/Sys_User.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,105 @@
let extension = {
    components: { //动态扩充组件或组件路径
        //表单header、content、footer对应位置扩充的组件
        gridHeader: () =>
            import("./Sys_User/Sys_UserGridHeader.vue"),
        gridBody: '',
        gridFooter: '',
        //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
        modelHeader: '',
        modelBody: '',
        modelFooter: ''
    },
    text: "",//只能看到当前角色下的所有帐号
    buttons: [], //扩展的按钮
    methods: { //事件扩展
        onInit() {
            //没有编辑权限就不显示改密码
            let permissionButtons = this.permission.getButtons(this.$route.path, null, this.extend.tableAction);
            // console.log(permissionButtons.find(r => r.value == "Update"));
            if (null == permissionButtons || null == permissionButtons.find(r => r.value == "Update"))
                return;
            this.boxOptions.height = 530;
            this.columns.push({
                title: '操作',
                fixed: 'right',
                width: 140,
                render: (h, { row, column, index }) => {
                    return h(
                        "div", { style: {} }, [
                        h(
                            "a", {
                            props: {},
                            style: {},
                            on: {
                                click: (e) => {
                                    e.stopPropagation()
                                    this.$refs.gridHeader.open(row);
                                }
                            }
                        },
                            "修改密码"
                        ),
                        // h(
                        //     "Dropdown", {
                        //     props: {},
                        //     style: {
                        //         "margin-left": "10px"
                        //     },
                        //     on: {
                        //         'on-click': (name) => {
                        //             if (name == 'add') {
                        //                 this.add();
                        //             } else if (name == 'update') {
                        //                 this.linkData(row);
                        //             } else {
                        //                 this.$Message.info(name);
                        //             }
                        //         }
                        //     }
                        // }, [h('a', {}, ['更多', h('Icon', { props: { type: 'ios-arrow-down' } })]),
                        // h('DropdownMenu', { slot: "list" }, [h('DropdownItem', { props: { name: 'update' } }, '编辑'),
                        // h('DropdownItem', { props: { name: 'add' } }, '新建'),
                        // ])
                        // ]
                        // )
                    ])
                }
            })
        },
        onInited() { this.maxBtnLength = 6; },
        addAfter(result) { //用户新建后，显示随机生成的密码
            if (!result.status) {
                return true;
            }
            //显示新建用户的密码
            //2020.08.28优化新建成后提示方式
            this.$confirm(result.message, '新建用户成功', {
                confirmButtonText: '确定',
                type: 'success',
                center: true
            }).then(() => { })

            this.boxModel = false;
            this.refresh();
            return false;
        },
        modelOpenAfter() {
            //点击弹出框后，如果是编辑状态，禁止编辑用户名，如果新建状态，将用户名字段设置为可编辑
            let isEDIT = this.currentAction == this.const.EDIT;
            this.editFormOptions.forEach(item => {
                item.forEach(x => {
                    if (x.field == "UserName") {
                        this.$set(x, "disabled", isEDIT)
                    }
                })
                //不是新建，性别默认值设置为男
                if (!isEDIT) {
                    this.editFormFileds.Gender = "0";
                }
            })
        }

    }
};
export default extension;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/extension/system/Sys_User/Sys_UserGridHeader.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,73 @@
<template>
  <div>
    <vol-box :model.sync="model" :padding="30" title="修改密码" :width="450" :height="200">
      <Alert type="info">
        <h3>
          <span>帐号：{{row.UserName}}</span>
          <span>用户：{{row.UserTrueName}}</span>
        </h3>
      </Alert>
      <div>
        <Input
          placeholder="请输入密码"
          v-model="password"
          size="large"
          style="  width: 100%;margin-top: 15px;"
        >
          <Icon type="ios-lock" slot="prefix" />
        </Input>
      </div>
      <div slot="footer">
        <Button type="info" size="large" icon="md-checkmark-circle" @click="savePwd()">修改密码</Button>
        <Button type="info" size="large" icon="md-close" @click="()=>{this.model=false}">关闭</Button>
      </div>
    </vol-box>
  </div>
</template>
<script>
export default {
  components: {
    VolBox: () => import("@/components/basic/VolBox.vue"),
  },
  data() {
    return {
      row: {},
      password: "",
      model: false,
    };
  },
  methods: {
    open(row) {
      this.password = "";
      this.row = row;
      this.model = true;
    },
    savePwd() {
      if (!this.password) return this.$Message.error("请输密码");
      if (this.password.length < 6)
        return this.$Message.error("密码长度至少6位");
      let url =
        "/api/user/modifyUserPwd?password=" +
        this.password +
        "&userName=" +
        this.row.UserName;
      this.http.post(url, {}, true).then((x) => {
        if (!x.status) {
          return this.$message.error(x.message);
        }
        this.model = false;
        this.$Message.success(x.message);
      });
    },
  },
  created() {},
};
</script>
<style lang="less" scoped>
h3 {
  font-weight: 500;
  > span:last-child {
    margin-left: 30px;
  }
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/extension/taskinfo/dt_rgvtaskinfo.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,63 @@
//author:jxx
//此处是对表单的方法，组件，权限操作按钮等进行任意扩展(方法扩展可参照SellOrder.js)
let extension = {
  components: { //动态扩充组件或组件路径
    //表单header、content、footer对应位置扩充的组件
    gridHeader: '', //{ template: "<div>扩展组xx件</div>" },
    gridBody: '',
    gridFooter: '',
    //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
    modelHeader: '',
    modelBody: '',
    modelFooter: ''
  },
  buttons: {
    view: [],
    box: [],
    detail: []
  }, //扩展的按钮
  methods: { //事件扩展
    onInit() {
      let permissionButtons = this.permission.getButtons(this.$route.path, null, this.extend.tableAction);
      // console.log(permissionButtons.find(r => r.value == "Update"));
      if (null == permissionButtons || null == permissionButtons.find(r => r.value == "Update"))
        return;
      this.single = true;
      this.buttons.splice(2, 0, {
        name: "任务重发",
        value: "Update",
        icon: 'md-freed',
        hidden: false,
        type: 'info',
        onClick: function () {

          let rows = this.$refs.table.getSelected();
          if (rows.length == 0) return this.$error("请选择任务行!");

          this.$Modal.confirm({
            title: "提示",
            content: '<p style="color: red;font-weight: bold;letter-spacing: 3px;">确认要重发此任务吗?</p>',
            onOk: () => {

              let params = {
                MainData: {barcode: rows[0].rgvtask_barcode,taskNum:rows[0].rgvtask_tasknumber,Rgv:rows[0].rgvtask_rgv},
                DetailData: rows,
                DelKeys: null
              }
              //let url = this.getUrl(this.const.DEL);
              this.http.post("/api/dt_rgvtaskinfo/RGVTaskResend", params, "正在重发....").then(x => {
                if (!x.status) return this.$error("重发失败："+x.message);
                this.$success("重发任务成功!");

                this.refresh();
              });
            } //, onCancel: () => {}
          });
        }
      });

      //this.$refs.table.getSelected();
    }
  }
};
export default extension;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/extension/taskinfo/dt_rgvtaskinfo_hty.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,21 @@
//author:jxx
//此处是对表单的方法，组件，权限操作按钮等进行任意扩展(方法扩展可参照SellOrder.js)
let extension = {
    components: {//动态扩充组件或组件路径
        //表单header、content、footer对应位置扩充的组件
        gridHeader:'',//{ template: "<div>扩展组xx件</div>" },
        gridBody: '',
        gridFooter: '',
        //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
        modelHeader: '',
        modelBody: '',
        modelFooter: ''
    },
    buttons: {view: [], box:[],  detail:[]},//扩展的按钮
    methods: {//事件扩展
       onInit() {

       }
    }
};
export default extension;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/extension/taskinfo/dt_stacktaskinfo.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,58 @@
//author:jxx
//此处是对表单的方法，组件，权限操作按钮等进行任意扩展(方法扩展可参照SellOrder.js)
let extension = {
    components: {//动态扩充组件或组件路径
        //表单header、content、footer对应位置扩充的组件
        gridHeader:'',//{ template: "<div>扩展组xx件</div>" },
        gridBody: '',
        gridFooter: '',
        //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
        modelHeader: '',
        modelBody: '',
        modelFooter: ''
    },
    buttons: {view: [], box:[],  detail:[]},//扩展的按钮
    methods: {//事件扩展
       onInit() {
        let permissionButtons = this.permission.getButtons(this.$route.path, null, this.extend.tableAction);
            // console.log(permissionButtons.find(r => r.value == "Update"));
            if (null == permissionButtons || null == permissionButtons.find(r => r.value == "Update"))
                return;   
        this.single = true;
        this.buttons.splice(2, 0, {
            name: "任务重发",
            value: "Update",
            icon: 'md-freed',
            hidden: false,
            type: 'info',
            onClick: function () {

                let rows = this.$refs.table.getSelected();
                if (rows.length == 0) return this.$error("请选择任务行!");

                this.$Modal.confirm({
                    title: "提示",
                    content:
                        '<p style="color: red;font-weight: bold;letter-spacing: 3px;">确认要重发此任务吗?</p>',
                    onOk: () => {
                       
                        let params = {
                            MainData: {barcode: rows[0].stacktask_barcode,taskNum:rows[0].stacktask_tasknumber,stacker:rows[0].stacktask_stacker},
                            DetailData: null,
                            DelKeys: null
                        }
                        //let url = this.getUrl(this.const.DEL);
                        this.http.post("/api/dt_stacktaskinfo/StackTaskResend", params, "正在重发....").then(x => {
                            if (!x.status) return this.$error('重发失败：'+x.message);
                            this.$success("重发成功!");

                            this.refresh();
                        });
                    } //, onCancel: () => {}
                });
            }
        });
       }
    }
};
export default extension;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/extension/taskinfo/dt_stacktaskinfo_hty.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,21 @@
//author:jxx
//此处是对表单的方法，组件，权限操作按钮等进行任意扩展(方法扩展可参照SellOrder.js)
let extension = {
    components: {//动态扩充组件或组件路径
        //表单header、content、footer对应位置扩充的组件
        gridHeader:'',//{ template: "<div>扩展组xx件</div>" },
        gridBody: '',
        gridFooter: '',
        //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
        modelHeader: '',
        modelBody: '',
        modelFooter: ''
    },
    buttons: {view: [], box:[],  detail:[]},//扩展的按钮
    methods: {//事件扩展
       onInit() {

       }
    }
};
export default extension;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/extension/taskinfo/dt_wcstaskinfo.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,48 @@
//author:jxx
//此处是对表单的方法，组件，权限操作按钮等进行任意扩展(方法扩展可参照SellOrder.js)
let extension = {
    components: {//动态扩充组件或组件路径
        //表单header、content、footer对应位置扩充的组件
        gridHeader:'',//{ template: "<div>扩展组xx件</div>" },
        gridBody: '',
        gridFooter: '',
        //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
        modelHeader: '',
        modelBody: '',
        modelFooter: ''
    },
    buttons: {view: [], box:[],  detail:[]},//扩展的按钮
    methods: {//事件扩展
       onInit() {
        this.single = true;
        this.buttons.splice(2, 0, {
            name: "任务完成",
            icon: '',
            type: 'info',
            onClick: function () {
                let rows = this.$refs.table.getSelected();
                console.log(rows);
                if (rows.length == 0) {
                    return this.$error("请选择完成的任务!");
                }
                console.log(rows[0].wcstask_tasknumber);
                let param = {
                    MainData: {barcode: rows[0].wcstask_tasknumber},
                    DetailData: null,
                    DelKeys: null
                };
                
                this.http.post("/api/ToWMS/WCSTaskCompleted",param,"任务完成...").then(x=>{
                    if(x.status){
                        this.$Notice.success({title: "任务完成",desc: "任务完成成功!",duration: 2});
                        this.refresh();
                    } else {
                        this.$Notice.error({title: "任务完成",desc: x.message,duration: 2});
                    }
                })
            }
        });
       }
    }
};
export default extension;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/extension/taskinfo/dt_wcstaskinfo_hty.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,21 @@
//author:jxx
//此处是对表单的方法，组件，权限操作按钮等进行任意扩展(方法扩展可参照SellOrder.js)
let extension = {
    components: {//动态扩充组件或组件路径
        //表单header、content、footer对应位置扩充的组件
        gridHeader:'',//{ template: "<div>扩展组xx件</div>" },
        gridBody: '',
        gridFooter: '',
        //弹出框(修改、编辑、查看)header、content、footer对应位置扩充的组件
        modelHeader: '',
        modelBody: '',
        modelFooter: ''
    },
    buttons: {view: [], box:[],  detail:[]},//扩展的按钮
    methods: {//事件扩展
       onInit() {

       }
    }
};
export default extension;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/main.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,43 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import iView from 'iview'
import 'iview/dist/styles/iview.css'
import http from './api/http'
import permission from './api/permission'
import store from './store/index'
import base from './utilities/common'
Vue.use(iView)
Vue.config.productionTip = false
Vue.use(ElementUI)

/* eslint-disable no-new */
var vue = new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})
// Vue.use(permission);
Vue.prototype.http = http;
Vue.prototype.http.init(vue);
Vue.prototype.permission = permission;
Vue.prototype.permission.init(vue);
Vue.prototype.base = base;
/* 2020.07.31增加手动打开tabs*/
Vue.prototype.$tabs = {};
router.beforeEach((to, from, next) => {
  vue.$Loading.start({ color: 'white', height: 2 });
  // NProgress.start();
  next();
})

router.afterEach(() => {
  vue.$Loading.finish();
  // NProgress.done()
})

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/router/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,87 @@
import Vue from 'vue'
import Router from 'vue-router'
import store from '@/store'


// import exampleRouter from './router/examplxe.js'
import redirect from './redirect'
import viewgird from './viewGird'

Vue.use(Router)

const router = new Router({
  history: 'true',
  routes: [
    //...exampleRouter,
    {
      path: '*',
      component: () => import('@/views/redirect/404.vue')
    },
    {
      path: '/',
      name: 'Index',
      component: () => import('@/views/Index'),
      redirect: '/home',
      children: [
        ...viewgird,//代码生成的后配置菜单的路由
        ...redirect,//401,404,500等路由
        {
          path: '/home',
          name: 'home',
          component: () => import('@/views/home.vue')
        },{
          path: '/cargospace',
          name: 'cargospace',
          component: () => import('@/views/cargospace.vue')
        },{
          path: '/UserInfo',
          name: 'UserInfo',
          component: () => import('@/views/system/UserInfo.vue')
        }, {
          path: '/permission',
          name: 'permission',
          component: () => import('@/views/system/Permission.vue')
        }
      ]
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/Login.vue'),
      meta: {
        anonymous: true
      }
    }

  ]
})


router.beforeEach((to, from, next) => {
  if (to.matched.length == 0) return next({ path: '/404' });
  //2020.06.03增加路由切换时加载提示
  store.dispatch("onLoading", true);
  if ((to.hasOwnProperty('meta') && to.meta.anonymous) || store.getters.isLogin()) {
    return next();
  }
  //query产生一个随机数在 login->home->login执行不了
  next({ path: '/login', query: { redirect: Math.random() } });
})

//2020.06.03增加路由切换时加载提示
router.afterEach((to, from) => {
  store.dispatch("onLoading", false);
})
router.onError((error) => {
  const pattern = /Loading chunk (\d)+ failed/g;
  const isChunkLoadFailed = error.message.match(pattern);
  const targetPath = router.history.pending.fullPath;
  console.log(error.message);
  console.log(targetPath);
  if (isChunkLoadFailed) {
    window.location.replace(window.location.href);
    //  router.replace(targetPath);
  }
});

export default router;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/router/redirect.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
let redirect = [{
    path: '/404',
    name: '404',
    component: () => import('@/views/redirect/404.vue'),
    meta: {
        anonymous: true
    }
}, {
    path: '/401',
    name: '401',
    component: () => import('@/views/redirect/401.vue')
}]
export default redirect;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/router/viewGird.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,59 @@
let viewgird = [
  {
    path: "/Sys_Log",
    name: "sys_Log",
    component: () => import("@/views/system/Sys_Log.vue")
  },
  {
    path: "/Sys_User",
    name: "Sys_User",
    component: () => import("@/views/system/Sys_User.vue")
  },
  {
    path: "/Sys_Role",
    name: "Sys_Role",
    component: () => import("@/views/system/Sys_Role.vue")
  }
  ,
  {
    path: "/dt_rgvtaskinfo_hty",
    name: "dt_rgvtaskinfo_hty",
    component: () => import("@/views/taskinfo/dt_rgvtaskinfo_hty.vue")
  }
  ,
  {
    path: "/dt_rgvtaskinfo",
    name: "dt_rgvtaskinfo",
    component: () => import("@/views/taskinfo/dt_rgvtaskinfo.vue")
  }
  ,
  {
    path: "/dt_stacktaskinfo_hty",
    name: "dt_stacktaskinfo_hty",
    component: () => import("@/views/taskinfo/dt_stacktaskinfo_hty.vue")
  }
  ,
  {
    path: "/dt_stacktaskinfo",
    name: "dt_stacktaskinfo",
    component: () => import("@/views/taskinfo/dt_stacktaskinfo.vue")
  }
  ,
  {
    path: "/dt_wcstaskinfo_hty",
    name: "dt_wcstaskinfo_hty",
    component: () => import("@/views/taskinfo/dt_wcstaskinfo_hty.vue")
  }
  ,
  {
    path: "/dt_wcstaskinfo",
    name: "dt_wcstaskinfo",
    component: () => import("@/views/taskinfo/dt_wcstaskinfo.vue")
  },
  // {
  //   path: '/Dt_equipmentErrorInfo',
  //   name: 'Dt_equipmentErrorInfo',
  //   component: () => import('@/views/taskinfo/Dt_equipmentErrorInfo.vue')
  // }
];
export default viewgird;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/store/data.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,27 @@

const data = {
    state: {
        data: {}
    },
    mutations: {
        // setData(state, data) {  //this.$store.commit('setData', data)
        //     state.data = data;
        // },
        clear(state) {
            state.data = {};
        }
    }, getters: {
        getData: (state) => () => {  //调用方式 store.getters.getData()
            return data;
        },
        data: (state) => () => {
            return data;
        }
    }, actions: {
        // setData(context, data) {
        //     context.commit('setData', data); //调用方式 store.dispatch('push')
        // }
    }
};

export default data;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/store/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,113 @@
import Vue from 'vue'
import Vuex from 'vuex'
//import { stat } from 'fs';


Vue.use(Vuex);
const moduleA = {
  state: {
    m: 123
  }, mutations: {

  }, getters: {

  }, actions: {
    toDo(context) {
      return context.Store.m;
    }
  }
};

function getUserInfo(state) {
  if (state.userInfo) return state.userInfo;
  let userInfo = localStorage.getItem(keys.USER);
  if (userInfo) {
    state.userInfo = JSON.parse(userInfo);
  }
  return state.userInfo;
}
//getter ç›¸å½“于 state çš„计算属性，mutation æ˜¯ç”¨æ¥ä¿®æ”¹ state çš„
//使用actions或mutation获取不了state对象
const keys = { USER: 'user' }
//因为分了模块所有属性调试方法都需要加上this.$store.system(system为模块名称)
const system = {
  state: {
    permission: [],
    isLoading: false,//2020.06.03增加路由切换时加载提示
    userInfo: null
  },
  mutations: {
    setPermission(state, data) {  //调用方式 this.$store.commit('setPermission', data)
      if (!data || typeof data != 'object') return;
      if (data instanceof Array) {
        state.permission.push(...data);
      } else {
        state.permission = data;
      }
    }, setUserInfo(state, data) {
      state.userInfo = data;
      localStorage.setItem(keys.USER, JSON.stringify(data));
    },
    clearUserInfo(state) {
      state.permission = [];
      state.userInfo = null;
      localStorage.removeItem(keys.USER);
    },
    test(state) {
      return 113344;
    },
    updateLoadingState(state, flag) {
      state.isLoading = flag
    }
  }, getters: {
    getPermission: (state) => (path) => {  //调用方式 store.getters.getPermission('sys_User')
      if (!path) return state.permission;
      return state.permission.find(x => x.path == path);
    },
    getUserInfo: (state) => () => {
      getUserInfo(state);
      return state.userInfo;
    }, getUserName: (state) => () => {
      getUserInfo(state);
      if (state.userInfo) {
        return state.userInfo.userName;
      }
      return '未获取到登录信息';
    },
    getToken: (state) => () => {
      getUserInfo(state);
      if (state.userInfo) {
        return 'Bearer ' + state.userInfo.token;
      }
      return '';
    },
    isLogin: (state) => () => {
      if (getUserInfo(state)) {
        return true;
      }
      return false;
    },
    isLoading: (state) => () => {
      return state.isLoading;
    }

  }, actions: {
    setPermission(context, data) {
      context.commit('setPermission', data); //调用方式 store.dispatch('push')
    },
    toDo(context) {
      return context.Store.m;
    },
    onLoading(context, flag) {
      context.commit("updateLoadingState", flag);
    }
  }
};
import data from './data.js'
const store = new Vuex.Store({
  modules: {   //分成多个模块
    system,//this.$store.state.system
    data
  }
})
export default store;

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/utilities/common.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,236 @@
let base = {
  isPhone(val) {
    return /^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(val)
  },
  isDecimal(val) {
    return /(^[\-0-9][0-9]*(.[0-9]+)?)$/.test(val);
  },
  isNumber(val) {
    return /(^[\-0-9][0-9]*([0-9]+)?)$/.test(val);
  },
  isMail(val) {
    return /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/.test(val);
  },
  isUrl(url) {
    return this.checkUrl(url);
  },
  checkUrl(url) {
    //url= åè®®://(ftp的登录信息)[IP|域名](:端口号)(/或?请求参数)
    var strRegex =
      "^((https|http|ftp)://)?" + //(https或http或ftp):// å¯æœ‰å¯æ— 
      "(([\\w_!~*'()\\.&=+$%-]+: )?[\\w_!~*'()\\.&=+$%-]+@)?" + //ftp的user@  å¯æœ‰å¯æ— 
      "(([0-9]{1,3}\\.){3}[0-9]{1,3}" + // IP形式的URL- 3位数字.3位数字.3位数字.3位数字
      "|" + // å…è®¸IP和DOMAIN（域名）
      "(localhost)|" + //匹配localhost
      "([\\w_!~*'()-]+\\.)*" + // åŸŸå- è‡³å°‘一个[英文或数字_!~*\'()-]加上.
      "\\w+\\." + // ä¸€çº§åŸŸå -英文或数字  åŠ ä¸Š.
      "[a-zA-Z]{1,6})" + // é¡¶çº§åŸŸå- 1-6位英文
      "(:[0-9]{1,5})?" + // ç«¯å£- :80 ,1-5位数字
      "((/?)|" + // url无参数结尾 - æ–œæ†æˆ–这没有
      "(/[\\w_!~*'()\\.;?:@&=+$,%#-]+)+/?)$"; //请求参数结尾- è‹±æ–‡æˆ–æ•°å­—å’Œ[]内的各种字符
    var re = new RegExp(strRegex, "i"); //i不区分大小写
    //将url做uri转码后再匹配，解除请求参数中的中文和空字符影响
    if (re.test(encodeURI(url))) {
      return true;
    }
    return false;
  },
  matchUrlIp(url, ip) { //url使用是否使用的当前ip
    if (!url || !ip) {
      return false;
    }
    return url.indexOf(ip.replace('https://', '').replace('http://', '')) >= 0
  },
  getImgSrc(src, httpUrl) {
    if (this.isUrl(src)) {
      return src;
    }
    if (httpUrl) {
      return httpUrl + src;
    }
    return src;
  },
  previewImg(src, httpUrl) { //图片预览，目前只支持单图片预览
    if (src && !this.isUrl(src) && httpUrl) {
      if (src.substr(0, 1) == "/" && httpUrl.substr(httpUrl.length - 1, 1) == "/") {
        src = src.substr(1)
      }
      src = (httpUrl + src);
    }
    let id = "vol-preview";
    let $div = document.getElementById(id);
    if (!$div) {
      $div = document.createElement("div");
      $div.setAttribute("id", "vol-preview");
      let $mask = document.createElement("div");
      $mask.style.position = "absolute";
      $mask.style.width = "100%";
      $mask.style.height = "100%";
      $mask.style.background = "black"
      $mask.style.opacity = "0.6";
      $div.appendChild($mask);
      $div.style.position = "fixed";
      $div.style.width = "100%";
      $div.style.height = "100%";
      // $div.style.overflow = "scroll";
      $div.style.top = 0;
      $div.style['z-index'] = 9999999;
      let $img = document.createElement("img");
      $img.setAttribute("class", "vol-preview-img");
      $img.style.position = "absolute";
      $img.style.top = "50%";
      $img.style.left = "50%";
      $img.style['max-width'] = "90%";
      $img.style['max-height'] = "90%";
      $img.style.transform = "translate(-50%,-50%)";
      // $img.src = src;
      $img.setAttribute("src", src);
      $div.appendChild($img);
      $div.addEventListener("click", function () {
        this.style.display = "none";
      })
      document.body.appendChild($div);
      return;
    }
    let $img1 = document.body.appendChild($div).querySelector(".vol-preview-img");
    // img.src = src;
    $img1.setAttribute("src", src);
    $div.style.display = "block";
  },
  //下载文件 $element æ ‡ç­¾, url完整url, fileName æ–‡ä»¶å, header ä»¥key/value传值
  //backGroundUrl åŽå°url，如果后台url直接从后台下载，其他全部通过点击a标签下载
  dowloadFile(url, fileName, header, backGroundUrl) {
    if (!url) {
      alert('此文件没有url不能下载')
      return;
    }
    let $element = document.getElementById('dowonloadfile-a');
    if (!$element) {
      $element = document.createElement('a');
      $element.setAttribute("id", "dowonloadfile-a");
      document.body.append($element);
    }
    //url为一个完整的地址，并且不是后台api的地址，直接点击a标签下载
    // if (this.isUrl(url) && !this.matchUrlIp(url, backGroundUrl)) {
    // $element.href = url;
    // $element.click();
    // return;
    //  }

    if (!this.isUrl(url)) {
      if (!this.isUrl(backGroundUrl + url)) {
        console.log("文件路径不正确");
        alert('文件路径不正确')
        return;
      }
      url = backGroundUrl + url;
    }
    $element.href = url;
    $element.click();
    return;

    //通过后台api服务器下载
    if (!this.isUrl(url)) {
      if (!this.isUrl(backGroundUrl + url)) {
        alert('当前下载的文件url【' + url + '】不正确')
        return;
      }
      url = backGroundUrl + url;
    }
    let xmlResquest = new XMLHttpRequest();
    xmlResquest.open("GET", url, true);
    xmlResquest.setRequestHeader("Content-type", "application/json");
    if (header && typeof header == 'object') {
      for (const key in header) {
        xmlResquest.setRequestHeader(
          key,
          header[key]
        );
      }
    }

    xmlResquest.responseType = "blob";
    xmlResquest.onload = function (oEvent) {
      if (xmlResquest.status != 200) {
        return alert('没有下载到此文件的信息')
      }
      let content = xmlResquest.response;
      $element.download = fileName;
      let blob = new Blob([content]);
      $element.href = URL.createObjectURL(blob);
      $element.click();
    };
    xmlResquest.send();
  },
  downloadImg(data) {
    if (!data.url || !data.callback || typeof data.callback != 'function') {
      return;
    }
    //url, backGroundUrl, header, callback
    if (this.isUrl(data.url) && !this.matchUrlIp(data.url, data.backGroundUrl)) {
      return data.url;
    }
    //通过后台api服务器下载
    if (!this.isUrl(data.url)) {
      if (!this.isUrl(data.backGroundUrl + data.url)) {
        return;
      }
      data.url = data.backGroundUrl + data.url;
    }
    var xmlResquest = new XMLHttpRequest();
    xmlResquest.open("get", data.url, true);
    xmlResquest.responseType = "blob";
    xmlResquest.setRequestHeader("Content-Type", "application/json");
    if (data.header && typeof data.header == 'object') {
      for (const key in data.header) {
        xmlResquest.setRequestHeader(
          key,
          data.header[key]
        );
      }
    }
    xmlResquest.onload = function () {
      if (this.status == 200) {
        var blob = this.response;
        callback(window.URL.createObjectURL(blob));
      }
    };
    xmlResquest.send();
  },
  //2020.06.01增加通用方法，将普通对象转换为tree结构
  //data数据格式[
  //     { name: 'tree1', id: 1, parentId: 0 },
  //     { name: 'tree2', id: 2, parentId: 0 }]

  //1、id与parentId这两个字段必须有
  //2、树形tree需要注意Id与parentId循环依赖的问题
  //3、callback每次生成一新的节点的时回调的方法
  convertTree(data, callback) {
    var root_data = [];
    data.forEach(x => {
      if (!x.hidden && (x.id === x.parentId || !data.some(s => { return x.parentId == s.id }))) {
        x.children = [];
        x.isRoot = true;
        callback && callback(x, data, true);
        root_data.push(x);
        getTree(x.id, x, data, callback);
      }
    });
    return root_data;
  }

}
export default base;

//2020.06.01增加通用方法，将普通对象转换为tree结构
function getTree(id, node, data, callback) {
  data.forEach(x => {
    if (!x.hidden && x.parentId == id) {
      if (!node.children) node.children = [];
      callback && callback(x, node, false);
      node.children.push(x);
      getTree(x.id, x, data,callback);
    }
  });
}


 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/Home.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,3659 @@
<!--已注释：新增手动任务，单机操作-->
<template>
  <div>
    <!-- è¾“送线弹窗 -->
                  <el-dialog
                    title="设备信息查看"
                    :visible.sync="dialogVisible"
                    width="50%">
                    <div style="margin-top:-20px">
                      <el-button size="mini" @click="clearForm()">清除PLC数据</el-button>
                    </div>
                    <div style="margin-top:10px"></div>
                    <el-tabs type="border-card">
                    <el-tab-pane label="输送线设备信息">
                      <div style="display:flex" class="">
                        <div class="" style="width:50%;">
                          <img src="static/lines.jpg" style="width:540px"></img>
                        </div>
                        <div class="" style="width:50%;background-color:#C8CFCE;padding:10px">
                          <el-row>
                    <el-col :span="12">
                      <div>线体编号：{{Id}}</div>
                      </el-col>
                    <el-col :span="12">
                      <div >
                        <div >任务号：{{formData.R_Line_JobId}}</div>
                        </div>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <div >托盘号：{{formData.R_Line_Barcode}}</div>
                      </el-col>
                    <el-col :span="12">
                      <div >目标位置：{{formData.R_Line_Target}}</div>
                      </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <h3 style="color:red">故障信息：</h3>
                      <div style="height:163px;background-color:black;color:red;padding:10px">{{formData.R_Line_State}}</div>
                      </el-col>
                  </el-row>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="修改输送线设备信息">
                      <el-row>
                    <el-col :span="10">
                      çº¿ä½“编号：<el-input v-model="Id" disabled></el-input>
                      </el-col>
                    <el-col :span="10" style="margin-left:50px">
                        ä»»åŠ¡å·ï¼š <el-input type="text" v-model="formData.R_Line_JobId" ></el-input> 
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="10">
                      æ‰˜ç›˜å·ï¼š<el-input type="text" v-model="formData.R_Line_Barcode" ></el-input>
                      </el-col>
                    <el-col :span="10" style="margin-left:50px">
                        ç›®æ ‡ä½ç½®ï¼š
                        <el-input type="text" v-model="formData.R_Line_Target" ></el-input>
                      </el-col>
                  </el-row>
                     <el-button @click="updateEquipInfo()" type="primary" >修改</el-button>
                    </el-tab-pane>
                  </el-tabs>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">关 é—­</el-button>
                    </span>
                  </el-dialog>
    <!-- å †åž›æœºå¼¹çª— -->
                  <el-dialog
                    title="堆垛机信息"
                    :visible.sync="dialogTableVisible"
                    width="50%">
                    <div style="margin-top:-20px" >
                        <el-button size="mini" @click="updateEquipStatus(equipNum,equipStatus)">{{equipStatus=='Disenable'?'禁用':'启用'}}</el-button>
                    </div>
                    <div style="margin-top:10px"></div>
                    <el-tabs type="border-card">
                    <el-tab-pane label="堆垛机设备信息">
                      <div style="display:flex" class="">
                        <div class="" style="width:50%;">
                          <img src="static/stacker.jpg" style="width:540px"></img>
                        </div>
                        <div class="" style="width:50%;background-color:#C8CFCE;padding:10px">
                          <el-row>
                            <el-col :span="12">
                              <div v-if="sc1">设备名称：SC1</div>
                            <div v-if="sc2">设备名称：SC2</div>
                            </el-col>
                            <el-col :span="12"><div>任务号：{{equipNumData.taskNum}}</div></el-col>
                          </el-row>
                          <el-row>
                    <el-col :span="12"><div>当前行：{{equipNumData.currentLine}}</div></el-col>
                    <el-col :span="12"><div>当前列：{{equipNumData.currentCol}}</div></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12"><div>当前层：{{equipNumData.currentLayer}}</div></el-col>
                    <el-col :span="12"><div>任务类型：{{equipNumData.currentTaskType}}</div></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12"><div>故障代码：{{equipNumData.errorCode}}</div></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <h3 style="color:red">故障信息：</h3>
                       <div style="height:163px;background-color:black;color:red;padding:10px">{{equipNumData.errorInfo}}</div>
                      </el-col>
                  </el-row>
                        </div>
                      </div>
                    </el-tab-pane>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
                  </el-tabs>
                    <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogTableVisible = false">关 é—­</el-button>
                    </span>
                  </el-dialog>
    <!-- RGV弹窗 -->
                  <el-dialog
                            title="RGV信息"
                            :visible.sync="dialogFormVisible "
                            width="50%">
                            <div style="margin-top:-20px">
                              <el-button size="mini" @click="updateEquipStatus(equipNum,equipStatus)">{{equipStatus=='Disenable'?'启用':'禁用'}}</el-button>
                            </div>
                            <div style="margin-top:10px"></div>
                            <el-tabs type="border-card">
                            <el-tab-pane label="RGV设备信息">
                              <div style="display:flex" class="">
                                <div class="" style="width:50%;">
                                  <img src="static/RGV.png" style="width:500px;height:300px"></img>
                                </div>
                                <div class="" style="width:50%;background-color:#C8CFCE;padding:10px">
                                  <el-row>
                             <el-col :span="12" ><div v-if="RGV1">设备名称：RGV1</div></el-col>
                             <el-col :span="12" ><div v-if="RGV2">设备名称：RGV2</div></el-col>
                             <el-col :span="12"><div>任务号：{{equipNumData.taskNum}}</div></el-col>
                          </el-row>
                                  <el-row>
                            <el-col :span="12"><div>当前行：{{equipNumData.currentLine}}</div></el-col>
                            <el-col :span="12"><div>当前列：{{equipNumData.currentCol}}</div></el-col>
                          </el-row>
                         <el-row>
                    <el-col :span="12"><div>当前层：{{equipNumData.currentLayer}}</div></el-col>
                    <el-col :span="12"><div>任务类型：{{equipNumData.currentTaskType}}</div></el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12"><div>故障代码：{{equipNumData.errorCode}}</div></el-col>
                  </el-row>
                          <el-row>
                            <el-col :span="24">
                              <h3 style="color:red">故障信息：</h3>
                              <div style="height:163px;background-color:black;color:red;padding:10px">{{equipNumData.errorInfo}}</div>
                              </el-col>
                          </el-row>
                                </div>
                              </div>
                            </el-tab-pane>
                          </el-tabs>
                            <span slot="footer" class="dialog-footer">
                              <el-button @click="dialogFormVisible  = false">关 é—­</el-button>
                            </span>
                  </el-dialog>

    <div class="content">
      <div class="content-top">
         <div  class="" style="margin:20px">
          <Button
            size="small"
            id="openService"
            @click="OpenService"
            type="primary"
            style="margin-left: 20px"
            >开启服务</Button
          >
          <Button type="success" size="small" @click="onUrl">查看货位</Button>
        </div>

        <div class="tag-group">
            <black  v-for="(item, index) in list0"
            :key="index" >
              <Tag
              class="box"
              :class="[item.classhide, item.margin_right0]"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference">
              <div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.imgs" class="arrow"></img>
              </div>
              </Tag>
            </black>
        </div>

        <div class="tag-group">
          <black v-for="(item, index) in list1"
            :key="index">
             <Tag
              class="box"
              :class="item.classhide"
              :color="item.color"
               @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference" >
              <div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow"></img>
              </div>
            </Tag>
          </black>
        </div>  

        <div class="tag-group">
         <black v-for="(item, index) in list2"
            :key="index">
            <Tag
              class="box"
              :class="[item.classhide, item.margin_right2]"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference">
              <div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow" ></img>
              </div>
              </Tag> 
          </black>
        </div>

        <div class="tag-group">
          <black v-for="(item, index) in list3"
            :key="index">
            <Tag  
              class="box"
              :class="[item.classhide, item.margin_right2]"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference">
             <div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow" ></img>
              </div>
              </Tag>
          </black>
        </div>
      
        <div class="tag-group">
         <black v-for="(item,index) in list4" :key="index">
            <Tag
              class="box"
              :class="[item.classhide, item.margin_right2, item.margin_left4]"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference"
              >
               <div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow" ></img>
              </div>
              </Tag>
          </black>
        </div>

        <div class="tag-group">
          <black v-for="(item,index) in list5" :key="index">
            <Tag
              class="box"
              :class="[item.classhide]"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference"
              >
              <div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow"></img>
              </div>
              </Tag>
            </black>
        </div>

        <div class="tag-group">
          <black v-for="(item,index) in list6" :key="index">
            <Tag
              class="box"
              :class="item.classhide"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference"
              ><div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow"></img>
              </div></Tag></black>
        </div>

        <div class="tag-group">
          <black v-for="(item,index) in list7" :key="index">
            <Tag
              class="box"
              :class="[item.classhide, item.margin_right7]"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference"
              ><div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow"></img>
              </div></Tag>
          </black>
        </div>

        <div class="tag-group">
         <black v-for="(item,index) in list8" :key="index">
            <Tag
              class="box"
              :class="[item.classhide, item.boxwidth, item.margin_left5]"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference"
              ><div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow" ></img>
              </div></Tag></black>
        </div>

        <div class="tag-group">
          <black v-for="(item,index) in list9" :key="index">
            <Tag
              class="box"
              :class="item.classhide"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference"
              ><div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow" ></img>
              </div></Tag>
         </black>
        </div>

        <div class="tag-group">
         <balck v-for="(item,index) in list10" :key="index">
            <Tag
              class="box"
              :class="[item.classhide, item.classmargin10_1, item.margin_left4]"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference"
              ><div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow" ></img>
              </div></Tag>
          </balck>
        </div>

        <div class="tag-group">
         <black v-for="(item,index) in list11" :key="index">
            <Tag
              class="box"
              :class="[item.classhide, item.classmargin]"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference"
              ><div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow" ></img>
              </div></Tag>
          </black>
        </div>

        <div class="tag-group">
          <black v-for="(item,index) in list12" :key="index">
            <Tag
              class="box"
              :class="item.classhide"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference"
              ><div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow" ></img>
              </div></Tag>
          </black>
        </div>

        <div class="tag-group">
         <black v-for="(item,index) in list13" :key="index">
            <Tag
              class="box"
              :class="item.classhide"
              :color="item.color"
              @click.native="
                item.id > 99 && item.id < 200 ? btnclicktag1(item) : ''
              "
              slot="reference"
              ><div :class=[item.divbg] >
                <span style="color:#000000;top:-8px;position: relative;left:2px" @click="btnclicktag1(item)">{{item.id}}</span> 
                <img :src="item.img" class="arrow"></img>
              </div></Tag>
          </black>
        </div>
       <!--  <black > -->
            <Tag class="tag1">
              <div @click="onRGV(equipTableData[3].equipNum,equipTableData[3].equipStatus)">
                <div class="tag1-1 " :class="[equipTableData[3].equipState=='Enable'?'bg5':'',equipTableData[3].equipState=='Disenable'?'bg6':'',equipTableData[3].equipState=='Running'?'bg3':'',equipTableData[3].equipState=='Warning'?'bg1':'',equipTableData[3].equipState=='Manual'?'bg2':'']">
                  <img src="/static/RGV3.png" class="RGV1"></img>
                </div>
               </div>
            </Tag>
            <Tag class="tag2">
              <div @click="onRGV(equipTableData[2].equipNum,equipTableData[2].equipStatus)">
                <div class="tag2-2 " :class="[equipTableData[2].equipState=='Enable'?'bg5':'',equipTableData[2].equipState=='Disenable'?'bg6':'',equipTableData[2].equipState=='Running'?'bg3':'',equipTableData[2].equipState=='Warning'?'bg1':'',equipTableData[2].equipState=='Manual'?'bg2':'']">
                  <img src="/static/RGV3.png" class="RGV1"></img>
                </div>
              </div>
            </Tag>
            <Tag class="tag3">  
              <div @click="onStacker(equipTableData[0].equipNum,equipTableData[0].equipStatus)">
              <div  class="tag3-3 " :class="[equipTableData[0].equipState=='Enable'?'bg5':'',equipTableData[0].equipState=='Disenable'?'bg6':'',equipTableData[0].equipState=='Running'?'bg3':'',equipTableData[0].equipState=='Warning'?'bg1':'',equipTableData[0].equipState=='Manual'?'bg2':'']">
                <img src="/static/ddj.png" class="ddj"></img>
              </div>
             </div>    
            </Tag> 
            <Tag class="tag4" >
              <div @click="onStacker(equipTableData[1].equipNum,equipTableData[1].equipStatus)">
              <div  class="tag4-4 " :class="[equipTableData[1].equipState=='Enable'?'bg5':'',equipTableData[1].equipState=='Disenable'?'bg6':'',equipTableData[1].equipState=='Running'?'bg3':'',equipTableData[1].equipState=='Warning'?'bg1':'',equipTableData[1].equipState=='Manual'?'bg2':'']">
                <img src="/static/ddj.png" class="ddj"></img>
                </div>
           </div>
            </Tag>
           <!--  </black> -->
        </div>       
      <div style="margin-left:5%" class="df">                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
      <el-card class="box-card">
        <div class="tc">输送线颜色含义</div>
              <div class="df mt"> 
              <div  class="br bg3"></div>
              <div>有料</div>
              <div  class="br bg1 ml"></div>
              <div>报警</div>
              </div>
              <div class="df mt">
                <div>
                  <div class="lines"></div>输送线外框
                </div>
              <div class="">
                <img src="static/right.png" style="width:30px;height:30px;margin-left:20px"></img>输送线箭头
              </div>
              </div>
      </el-card>
        <el-card class="box-card">
        <div class="tc">堆垛机颜色含义</div>
              <div class="df mt">
              <div class="br bg6"></div>
              <div>禁用</div> 
              <div class="br bg5 ml"></div>
              <div>启用</div> 
              <div class="br bg2 ml"></div>
              <div>手动模式</div> 
              </div>
              <div class="df mt">
                <div class="br bg3 "></div>
              <div>运行中</div> 
              <div  class="br bg1 ml"></div>
              <div>PLC报警</div>
              </div>
      </el-card>
      <el-card class="box-card">
        <div class="tc">RGV颜色含义</div>
             <div class="df mt">
              <div class="br bg6"></div>
              <div>禁用</div> 
              <div class="br bg5 ml"></div>
              <div>启用</div> 
              <div class="br bg2 ml"></div>
              <div>手动模式</div> 
              </div>
              <div class="df mt">
                <div class="br bg3 "></div>
              <div>运行中</div> 
              <div  class="br bg1 ml"></div>
              <div>PLC报警</div>
              </div>
      </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import http from "./../api/http.js";
import $ from "jquery";
export default {
  data() {
    return {
      formData: {
        R_Line_Barcode: "",
        R_Line_JobId: "",
        R_Line_State: "",
        R_Line_Target: "",
      },
      equipNumData: {
        currentCol: "",
        currentLayer: "",
        currentLine: "",
        errorCode: "",
        errorInfo: "",
        taskNum: "",
        currentTaskType: "",
      },
      equipStatus: null,
      equipNum: null,
      Id: null,
      equipStatusFormData: null,
      hide:false,
      RGV: 1,
      sc1: true,
      sc2: false,
      RGV1: true,
      RGV2: false,
      dialogVisible: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      serviceState: false,
      display: false,
      loading: true,
      form: {
        Number: "",
        Barcode: "",
        JobId: "",
        Equipment: "",
        Tutype: "",
        Target: "",
      },
      timer: null,

      inorderpageSize: 0,
      inordertotal: 0,
      inordercurrentpage: 1,

      outorderpageSize: 0,
      outordertotal: 0,
      outordercurrentpage: 1,
      equipMonitoringInterval: null,
      equipjsondataInterval: null,
      //设备监控数据
      equipTableData: [],
      //入库任务数据
      inboundTaskTableData: [],
      //出库任务数据
      outboundTaskTableData: [],
      //入库搜索
      inorderForm: {
        barcode: "",
        taskType: "",
        inorderNum: "",
      },
      //出库搜索
      outorderForm: {
        barcode: "",
        taskType: "",
        outorderNum: "",
      },
      //颜色数据
      colors: [
        "success",
        "primary",
        "error",
        "warning",
        "magenta",
        "red",
        "volcano",
        "orange",
        "gold",
        "green",
        "cyan",
        "blue",
        "geekblue",
        "#FFA2D3",
        "default",
      ],
      //#region   wcs货位图数据
      list0: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", imgs: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", imgs: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", imgs: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", imgs: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", imgs: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", imgs: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", imgs: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", imgs: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", imgs: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          divbg: "divbg",
          id: 153,
          imgs: "static/left-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list1: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 113,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        {
          color: "",
          id: 116,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list2: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 149,
          divbg: "divbg",
          img: "static/top-bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 150,
          divbg: "divbg",
          img: "static/left-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 151,
          divbg: "divbg",
          img: "static/left-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 152,
          divbg: "divbg",
          img: "static/lift.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list3: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          divbg: "divbg",
          id: 112,
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        {
          color: "",
          id: 117,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 148,
          divbg: "divbg",
          img: "static/top-bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list4: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 147,
          divbg: "divbg",
          img: "static/top-bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 155,
          divbg: "divbg",
          img: "static/bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list5: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 131,
          divbg: "divbg",
          img: "static/top-bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 146,
          divbg: "divbg",
          img: "static/top.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 156,
          divbg: "divbg",
          img: "static/bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list6: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 111,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        {
          color: "",
          id: 118,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 130,
          divbg: "divbg",
          img: "static/top-bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 145,
          divbg: "divbg",
          img: "static/top.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 157,
          divbg: "divbg",
          img: "static/bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list7: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 122,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 123,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 124,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 125,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 126,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 127,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 128,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 129,
          divbg: "divbg",
          img: "static/top-bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 132,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 133,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 134,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 135,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 136,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 137,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 138,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 139,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 140,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 141,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 142,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 143,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 144,
          divbg: "divbg",
          img: "static/top-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 158,
          divbg: "divbg",
          img: "static/bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 159,
          divbg: "divbg",
          img: "static/left-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 160,
          divbg: "divbg",
          img: "static/left-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 161,
          divbg: "divbg",
          img: "static/left-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 162,
          divbg: "divbg",
          img: "static/left-right.png",
          margin_right7: "margin_right7",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 163,
          divbg: "divbg",
          img: "static/left-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 164,
          divbg: "divbg",
          img: "static/bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 165,
          divbg: "divbg",
          img: "static/left-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list8: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 110,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png" },
        {
          color: "",
          id: 119,
          divbg: "divbg",
          img: "static/right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 192,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 191,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 189,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },

        {
          color: "",
          id: 188,
          divbg: "divbg",
          img: "static/left.png",
          boxwidth: "boxwidth",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 187,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 186,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 182,
          divbg: "divbg",
          img: "static/top-bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 181,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 180,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 179,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 178,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 177,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 176,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 175,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 174,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 173,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 172,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 171,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 170,
          divbg: "divbg",
          img: "static/left.png",
          boxwidth: "boxwidth",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 169,
          divbg: "divbg",
          img: "static/bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 166,
          divbg: "divbg",
          img: "static/top-bottom.png",
          margin_left5: "margin_left5",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list9: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png", },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png", },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png", },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png", },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png", },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png", },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png", },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png", },
        { color: "aquamarine", classhide: "devices", img: "static/hw.png", },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 190,
          divbg: "divbg",
          img: "static/lift.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 183,
          divbg: "divbg",
          img: "static/top-bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list10: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 109,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 108,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 107,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 106,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 105,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 104,
          divbg: "divbg",
          img: "static/left.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 120,
          divbg: "divbg",
          img: "static/left-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 121,
          divbg: "divbg",
          img: "static/left-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 184,
          divbg: "divbg",
          img: "static/top-bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },

        {
          color: "",
          id: 167,
          divbg: "divbg",
          img: "static/top.png",
          margin_left4: "margin_left4",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        {
          color: "",
          id: 168,
          divbg: "divbg",
          img: "static/left-right.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list11: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 103,
          divbg: "divbg",
          img: "static/top.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 101,
          divbg: "divbg",
          img: "static/top.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 185,
          divbg: "divbg",
          img: "static/top-bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list12: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 114,
          divbg: "divbg",
          img: "static/bottom.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 102,
          divbg: "divbg",
          img: "static/lift.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 100,
          divbg: "divbg",
          img: "static/lift.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      list13: [
        { color: "aquamarine", classhide: "devices", popoverdis: true },
        {
          color: "",
          id: 115,
          divbg: "divbg",
          img: "static/lift.png",
          form: {
            Number: "",
            Barcode: "",
            JobId: "",
            Equipment: "",
            Tutype: "",
            Target: "",
          },
        },
      ],
      //#endregion

      datalistnum: [
        {
          id: 100,
          list: "list12",
        },
        {
          id: 101,
          list: "list11",
        },
        {
          id: 102,
          list: "list12",
        },
        {
          id: 103,
          list: "list11",
        },
        {
          id: 104,
          list: "list10",
        },
        {
          id: 105,
          list: "list10",
        },
        {
          id: 106,
          list: "list10",
        },
        {
          id: 107,
          list: "list10",
        },
        {
          id: 108,
          list: "list10",
        },
        {
          id: 109,
          list: "list10",
        },
        {
          id: 110,
          list: "list8",
        },
        {
          id: 111,
          list: "list6",
        },
        {
          id: 112,
          list: "list3",
        },
        {
          id: 113,
          list: "list1",
        },
        {
          id: 114,
          list: "list12",
        },
        {
          id: 115,
          list: "list13",
        },
        {
          id: 116,
          list: "list1",
        },
        {
          id: 117,
          list: "list3",
        },
        {
          id: 118,
          list: "list6",
        },
        {
          id: 119,
          list: "list8",
        },
        {
          id: 120,
          list: "list10",
        },
        {
          id: 121,
          list: "list10",
        },
        {
          id: 122,
          list: "list7",
        },
        {
          id: 123,
          list: "list7",
        },
        {
          id: 124,
          list: "list7",
        },
        {
          id: 125,
          list: "list7",
        },
        {
          id: 126,
          list: "list7",
        },
        {
          id: 127,
          list: "list7",
        },
        {
          id: 128,
          list: "list7",
        },
        {
          id: 129,
          list: "list7",
        },
        {
          id: 130,
          list: "list6",
        },
        {
          id: 131,
          list: "list5",
        },
        {
          id: 132,
          list: "list7",
        },
        {
          id: 133,
          list: "list7",
        },
        {
          id: 134,
          list: "list7",
        },
        {
          id: 135,
          list: "list7",
        },
        {
          id: 136,
          list: "list7",
        },
        {
          id: 136,
          list: "list7",
        },
        {
          id: 137,
          list: "list7",
        },
        {
          id: 138,
          list: "list7",
        },
        {
          id: 139,
          list: "list7",
        },
        {
          id: 140,
          list: "list7",
        },
        {
          id: 141,
          list: "list7",
        },
        {
          id: 142,
          list: "list7",
        },
        {
          id: 143,
          list: "list7",
        },
        {
          id: 144,
          list: "list7",
        },
        {
          id: 145,
          list: "list6",
        },
        {
          id: 146,
          list: "list5",
        },
        {
          id: 147,
          list: "list4",
        },
        {
          id: 148,
          list: "list3",
        },
        {
          id: 149,
          list: "list2",
        },
        {
          id: 150,
          list: "list2",
        },
        {
          id: 151,
          list: "list2",
        },
        {
          id: 152,
          list: "list2",
        },
        {
          id: 153,
          list: "list0",
        },
        {
          id: 154,
          list: "list0",
        },
        {
          id: 155,
          list: "list4",
        },
        {
          id: 156,
          list: "list5",
        },
        {
          id: 157,
          list: "list6",
        },
        {
          id: 158,
          list: "list7",
        },
        {
          id: 159,
          list: "list7",
        },
        {
          id: 160,
          list: "list7",
        },
        {
          id: 161,
          list: "list7",
        },
        {
          id: 162,
          list: "list7",
        },
        {
          id: 163,
          list: "list7",
        },
        {
          id: 164,
          list: "list7",
        },
        {
          id: 165,
          list: "list7",
        },
        {
          id: 166,
          list: "list5",
        },
        {
          id: 167,
          list: "list4",
        },
        {
          id: 168,
          list: "list4",
        },
        {
          id: 169,
          list: "list8",
        },
        {
          id: 170,
          list: "list8",
        },
        {
          id: 170,
          list: "list8",
        },
        {
          id: 171,
          list: "list8",
        },
        {
          id: 172,
          list: "list8",
        },
        {
          id: 173,
          list: "list8",
        },
        {
          id: 174,
          list: "list8",
        },
        {
          id: 175,
          list: "list8",
        },
        {
          id: 176,
          list: "list8",
        },
        {
          id: 177,
          list: "list8",
        },
        {
          id: 178,
          list: "list8",
        },
        {
          id: 179,
          list: "list8",
        },
        {
          id: 180,
          list: "list8",
        },
        {
          id: 181,
          list: "list8",
        },
        {
          id: 182,
          list: "list8",
        },
        {
          id: 183,
          list: "list9",
        },
        {
          id: 184,
          list: "list10",
        },
        {
          id: 185,
          list: "list11",
        },
        {
          id: 186,
          list: "list8",
        },
        {
          id: 187,
          list: "list8",
        },
        {
          id: 188,
          list: "list8",
        },
        {
          id: 189,
          list: "list8",
        },
        {
          id: 190,
          list: "list8",
        },
        {
          id: 191,
          list: "list9",
        },
        {
          id: 192,
          list: "list8",
        },
        {
          id: 193,
          list: "list8",
        },
      ],
    };
  },
  methods: {
    //rgv弹窗
    onRGV(equipNum, equipStatus) {
      this.equipStatus = equipStatus;
      this.equipNum = equipNum;
      if (equipNum == "RGV1") {
        this.dialogFormVisible = true;
        this.RGV1 = true;
        this.RGV2 = false;
      } else {
        this.dialogFormVisible = true;
        this.RGV1 = false;
        this.RGV2 = true;
      }
      let par = {
        mainData: {
          equipmentName: this.equipNum,
        },
        detailData: null,
        delKeys: null,
      };
      http.post("/api/WCS/GetEquipmentInfo", par, "").then((x) => {
        if (x.status) {
          this.display = true;
          this.equipNumData = x.data;
          console.log(this.equipNumData, "090909");
        } else {
          this.display = false;
        }
      });
    },
    //堆垛机弹窗
    onStacker(equipNum, equipStatus) {
      console.log(equipNum, equipStatus, "2345");
      this.equipStatus = equipStatus;
      // switch(equipStatus){
      //   case "":
      //     return "";
      //     case "":
      //     break;
      //     case "":
      //     break;
      //     case "":
      //     break;
      //     case "":
      //     break;
      // }
      this.equipNum = equipNum;
      this.dialogTableVisible = true;
      if (equipNum == "SC1") {
        this.sc1 = true;
        this.sc2 = false;
      } else {
        this.sc1 = false;
        this.sc2 = true;
      }
      let par = {
        mainData: {
          equipmentName: this.equipNum,
        },
        detailData: null,
        delKeys: null,
      };
      http.post("/api/WCS/GetEquipmentInfo", par, "").then((x) => {
        if (x.status) {
          this.display = true;
          this.equipNumData = x.data;
          console.log(this.equipNumData, "090909");
        } else {
          this.display = false;
        }
      });
    },
    //清除plc数据
    clearForm() {
      let par = {
        mainData: {
          taskNum: 0,
          barcode: "        ",
          target: 0,
          lineNum: this.Id,
        },
        detailData: null,
        delKeys: null,
      };
      http.post("/api/WCS/UpdataEquipmentInfo", par, "").then((x) => {
        if (x.status) {
          this.$Message.info("修改成功!");
        } else {
          this.$message.error(x.message);
        }
      });
    },
    onUrl() {
      this.$router.push({
        path: "cargospace",
      });
    },
    handleInboundSelectionChange(val) {
      if (val.length > 1) {
        this.$refs.multipleInboundTable.toggleRowSelection(val[0]);
      }
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm("确定要提交表单吗？")
        .then((_) => {
          this.loading = true;
          this.timer = setTimeout(() => {
            done();
            // åŠ¨ç”»å…³é—­éœ€è¦ä¸€å®šçš„时间
            setTimeout(() => {
              this.loading = false;
            }, 400);
          }, 2000);
        })
        .catch((_) => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },

    handleSelectionChange(val) {
      //this.multipleSelection = val;
      if ((val.length = 1)) {
        this.$refs.multipleTable.toggleRowSelection(val[0]);
      }
    },
    //pageSize æ”¹å˜æ—¶ä¼šè§¦å‘
    handleSizeChange(val) {
      this.inorderpageSize = val;
      this.getInorderTask();
    },
    //currentPage æ”¹å˜æ—¶ä¼šè§¦å‘
    handleCurrentChange(val) {
      this.inordercurrentpage = val;
      this.getInorderTask();
    },
    //查询按钮
    onSubmitInTaskSelect() {
      //查询入库任务
      this.getInorderTask();
    },
    onSubmitOutTaskSelect() {
      //查询出库任务
      this.getInorderTask();
    },
    // onSubmit() {
    //    this.getInorderTask();
    // },
    //手动入库任务完成
    InboundTaskFinish() {
      //let barcode = this.$refs.table. wcstask_barcode;
      let rows = this.$refs.multipleInboundTable.selection;
      console.log(rows);
      if (rows.length == 0) {
        this.$message.error("请先选中需要完成的任务!");
        return;
      } else {
        let param = {
          MainData: { barcode: rows[0].wcstask_barcode, locationID: "" },
          DetailData: null,
          DelKeys: null,
        }; //2738436907
        console.log(param.MainData.barcode);
        this.http
          .post(
            "http://127.0.0.1:8099/api/ToWCS/InboundTaskCompleted",
            param,
            "任务完成..."
          )
          .then((x) => {
            if (x.status) {
              this.$Notice.success({
                title: "任务完成",
                desc: "任务完成成功!",
                duration: 2,
              });
              this.refresh();
            } else {
              this.$Notice.error({
                title: "任务完成",
                desc: x.message,
                duration: 2,
              });
            }
          });
      }
    },
    //手动出库任务完成
    OutboundTaskFinish() {
      //let barcode = this.$refs.table. wcstask_barcode;
      let rows = this.$refs.multipleInboundTable.selection;
      console.log(rows);
      if (rows.length == 0) {
        this.$message.error("请先选中需要完成的任务!");
        return;
      } else {
        let param = {
          MainData: { barcode: rows[0].wcstask_barcode, locationID: "" },
          DetailData: null,
          DelKeys: null,
        }; //2738436907
        console.log(param.MainData.barcode);
        this.http
          .post(
            "http://127.0.0.1:8098/api/ToWMS/WCSTaskCompleted",
            param,
            "任务完成..."
          )
          .then((x) => {
            if (x.status) {
              this.$Notice.success({
                title: "任务完成",
                desc: "任务完成成功!",
                duration: 2,
              });
              this.refresh();
            } else {
              this.$Notice.error({
                title: "任务完成",
                desc: x.message,
                duration: 2,
              });
            }
          });
      }
    },
    //获取入库任务
    getInorderTask() {
      let where = [
        {
          name: "wcstask_type",
          value: "TaskType_Inbound,TaskType_Transfer",
          displayType: "selectList",
        },
      ];

      var param = {
        page: this.inordercurrentpage,
        rows: this.inorderpageSize,
        order: "desc",
        sort: "createtime",
        wheres: JSON.stringify(where),
      };
      http
        .post("api/dt_wcstaskinfo/getPageData", param, "数据加载中...")
        .then((x) => {
          if (x.status == "0") {
            this.inboundTaskTableData = x.rows;
            this.inordertotal = x.total;
          } else {
            this.inboundTaskTableData = null;
          }
        });
    },
    //获取出库任务
    getOutorderTask() {
      let where = [
        {
          name: "wcstask_type",
          value: "Outbound",
          displayType: "like",
        },
      ];
      var param = {
        page: this.outordercurrentpage,
        rows: this.outorderpageSize,
        order: "desc",
        sort: "createtime",
        wheres: JSON.stringify(where),
      };
      http
        .post("api/dt_wcstaskinfo/getPageData", param, "数据加载中...")
        .then((x) => {
          if (x.status == "0") {
            this.outboundTaskTableData = x.rows;
            this.outordertotal = x.total;
          } else {
            this.outboundTaskTableData = null;
          }
        });
    },
    //入库类型
    getType(val) {
      switch (val) {
        case "TaskType_Inbound":
          return "blue";
        case "TaskType_Transfer":
          return "cyan";
        case "TaskType_WaveOutbound":
          return "green";
        case "TaskType_ManualOutbound":
          return "volcano";
        default:
          return "red";
      }
    },
    //入库类型对应显示文字
    getText(val) {
      switch (val) {
        case "TaskType_Inbound":
          return "正常入库";
        case "TaskType_Transfer":
          return "移库";
        case "TaskType_WaveOutbound":
          return "波次出库";
        case "TaskType_ManualOutbound":
          return "指定出库";
        default:
          return val;
      }
    },
    //入库状态
    getState(val) {
      switch (val) {
        case "TaskState_Assigned":
          return "blue";
        case "QueueState_Added":
          return "cyan";
        case "QueueState_Assigned":
          return "green";
        case "QueueState_Finished":
          return "magenta";
        case "TaskState_PartialFinish":
          return "blue";
        default:
          return "red";
      }
    },
    //入库状态对应显示文字
    getStateText(val) {
      switch (val) {
        case "TaskState_Assigned":
          return "任务已分配待执行";
        case "QueueState_Added":
          return "已加入任务队列";
        case "QueueState_Assigned":
          return "正在执行中";
        case "QueueState_Finished":
          return "任务已完成";
        case "TaskState_PartialFinish":
          return "部分完成";
        default:
          return val;
      }
    },
    //开启服务
    OpenService() {
      this.checkServiceState();
      if (!this.serviceState) {
        http.post("api/WCS/StartService", null, "服务开启中...").then((x) => {
          if (x.status) {
            $("#openService").html("关闭服务");
            this.serviceState = true;
            this.equipMonitoringInterval = setInterval(
              this.getEquipMonitoring,
              2000
            );
            this.getEquipMonitoring();
            this.btnclicktagtime();
          } else {
            alert("服务开启失败:" + x.message);
            this.serviceState = false;
          }
        });
      } else {
        this.closeService();
      }
    },

    //关闭服务
    closeService() {
      http.post("api/WCS/CloseService", null, "服务关闭中...").then((x) => {
        if (x.status) {
          $("#openService").html("开启服务");
          this.serviceState = false;
          this.closejsondata();
          clearInterval(this.equipMonitoringInterval);
        } else {
          if (x.message == "任务调度已停止") {
            this.serviceState = false;
          } else {
            alert("服务关闭失败:" + x.message);
            this.serviceState = true;
          }
        }
      });
    },
    //检查服务状态
    checkServiceState() {
      http
        .post("api/WCS/CheckServiceState", null, "服务状态检查中...")
        .then((x) => {
          if (x.status) {
            $("#openService").html("关闭服务");
            this.serviceState = true;
          } else {
            this.serviceState = false;
            $("#openService").html("开启服务");
          }
        });
    },
    getEquipMonitoring() {
      http.post("api/WCS/GetEquipMonitoring", null, "").then((x) => {
        if (x.status) {
          this.equipTableData = x.data;
          this.equipTableData.forEach((c) => {
            this.equipState = c.equipState;
            this.equipState1 = c.equipState;
          });
          console.log(this.equipState, "23");
        } else {
          // this.serviceState = false;;
        }
      });
    },
    beforeunloadFn(e) {
      window.event.returnValue = true;
      // if (this.serviceState) {
      //   this.closeService();
      // }

      // ...
    },
    unloadFn(e) {
      // window.event.returnValue = true;
      if (this.serviceState) {
        this.closeService();
      }

      // ...
    },
    //获取输送线信息
    // btnclicktag1(e){
    //   this.dialogVisible=true
    //   let par = {
    //       equipNum: e.id,
    //     }
    //      http.post("api/WCS/GetEquipInfo", par, "").then((x) => {
    //        if (x.status) {
    //          this.formData=x.data
    //          console.log(this.formData,'122')
    //        }
    //         });
    // },
    //修改设备状态
    //禁用设备
    updateEquipStatus(equipNum, equipStatus) {
      console.log(equipNum, equipStatus, "00000");
      let par = {
        mainData: {
          equipNum: equipNum,
          equipStatus: "Disenable",
        },
        detailData: null,
        delKeys: null,
      };
      http
        .post("api/dt_equipmentinfo/UpdateEquipState", par, "设备状态修改中")
        .then((x) => {
          this.equipStatusFormData = x.status;
          console.log(this.equipStatusFormData, "99999");
          if (x.status) {
            this.$Notice.success({ title: "", desc: x.message, duration: 2 });
          } else {
            this.$Notice.success({ title: "", desc: x.message, duration: 2 });
          }
        });
    },
    //修改设备信息
    updateEquipInfo() {
      let par = {
        mainData: {
          taskNum: this.formData.R_Line_JobId,
          barcode: this.formData.R_Line_Barcode,
          target: this.formData.R_Line_Target,
          lineNum: this.Id,
        },
        detailData: null,
        delKeys: null,
      };
      http.post("/api/WCS/UpdataEquipmentInfo", par, "").then((x) => {
        if (x.status) {
          this.$Message.info("修改成功!");
        } else {
          this.$message.error(x.message);
        }
      });
    },
    //获取设备信息
    btnclicktag1(e) {
      this.dialogVisible = true;
      this.Id = e.id;
      let par = {
        mainData: {
          EquipNum: e.id,
        },
        detailData: null,
        delKeys: null,
      };
      http.post("/api/WCS/GetEquipInfo", par, "").then((x) => {
        if (x.status) {
          this.display = true;
          this.formData = JSON.parse(x.data);
          /*  e.form = {
            Number: e.id,
            Barcode: !x.data.R_Barcode ? "无数据" : x.data.R_Barcode,
            JobId: !x.data.R_JobId ? "无数据" : x.data.R_JobId,
            Equipment: !x.data.R_Barcode ? "无数据" : x.data.R_Barcode,
            Tutype: !x.data.R_Tutype ? "无数据" : x.data.R_Tutype,
            Target: !x.data.R_Target ? "无数据" : x.data.R_Target,
          }; */
        } else {
          this.display = false;
        }
      });
    },
    //开启输送线定时器
    btnclicktagtime() {
      this.equipjsondataInterval = setInterval(this.getstartjsondata, 5000);
      this.getstartjsondata();
    },
    //获取设备状态
    getstartjsondata() {
      http.post("/api/WCS/GetEquipState", null, "").then((x) => {
        if (x.status) {
          x.data.forEach((element) => {
            console.log(element, "999");
            if (element.sensor || element.totalError) {
              let listdata = "";
              this.datalistnum.forEach((num) => {
                if (element.equipNum == num.id) {
                  listdata = num.list;
                }
              });
              this.getdatasuccess(listdata, element);
            }
          });
        } else {
          // this.serviceState = false;
        }
      });
    },
    //关闭定时器
    closejsondata() {
      clearInterval(this.equipjsondataInterval);
    },
    //设置tag颜色
    getdatasuccess(e, item) {
      console.log(e, "876", item, "999");
      switch (e) {
        case "list0":
          this.list0.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list1":
          this.list1.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list2":
          this.list2.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list3":
          this.list3.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list4":
          this.list4.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list5":
          this.list5.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list6":
          this.list6.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list7":
          this.list7.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list8":
          this.list8.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list9":
          this.list9.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list10":
          this.list10.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list11":
          this.list11.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list12":
          this.list12.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;
        case "list13":
          this.list13.forEach((element) => {
            if (item.equipNum == element.id && item.sensor) {
              element.color = "success";
            } else if (item.equipNum == element.id && item.totalError) {
              element.color = "error";
            }
          });
          break;

        default:
          break;
      }
    },
  },
  created() {
    // this.equipjsondataInterval = setInterval(() => {
    //   this.num != "Enable";
    //   this.equipjsondataInterval = setInterval(() => {
    //     this.num == "Enable";
    //   }, 5000);
    // }, 5000);
    this.getEquipMonitoring();
    window.addEventListener("beforeunload", (e) => this.beforeunloadFn(e));
    window.addEventListener("unload", (e) => this.unloadFn(e));
    this.checkServiceState();
  },
};
</script>

<style>
.rectangular {
  background-color: rgba(235, 239, 243, 0.45);
  position: fixed;
  border: 1px solid rgba(24, 135, 243, 1);
  z-index: 20;
}
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
* {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  font-family: "微软雅黑";
}

.el-row {
  margin-bottom: 10px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.model-backcolor {
  background: rgb(144, 238, 144);
}

.nav-header {
  margin-left: 60px;
  width: 500px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  color: white;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  padding-top: 50px;
  /*font-style:italic;斜体*/
}

.navbar-fixed-top {
  left: -17px !important;
  right: 17px !important;
  top: 6px !important;
}

#logo {
  width: 60px;
  height: 60px;
  margin-top: -8px;
}
.ivu-tag {
    display: inline-block;
    height: 22px;
    line-height: 22px;
    margin: 2px 0 0 0;
    padding: 0 8px;
    border: 1px solid #e8eaec;
    border-radius: 3px;
    background: #f7f7f7;
    font-size: 12px;
    vertical-align: middle;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;
}
</style>

<style lang="less" scoped>
.ddj{
  margin-left: 230px;
  margin-top: -13px;
  height: 30px;
}
.bor {
  border: 1px solid dimgray;
}
.bg1 {
  background-color: red;
  border: 1px solid red;
}
.bg2 {
  background-color: yellow;
  border: 1px solid yellow;
}
.bg3 {
  background-color: green;
  border: 1px solid green;
}
.bg5 {
  background-color: brown;
  border: 1px solid brown;
}
.bg6 {
  background-color: grey;
  border: 1px solid grey;
}
.br {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.ml {
  margin-left: 10px;
}
.lines {
  border: 4px solid blue;
  width: 40px;
  height: 20px;
}
.df {
  display: flex;
}
.mt {
  margin-top: 10px;
}
.tc {
  text-align: center;
}
.box-card {
  width: 330px;
  margin-right: 20px;
}
.bg {
  background-color: red;
}
.arrow {
  height: 25px;
  widows: 30px;
}
.div {
  height: 100px;
  width: 30px;
  border: 1px solid red;
}

.content {
  height: 700px;
  width: 2500px;
  // min-width: 100%;
  max-height: 750px;

  overflow-y: hidden;
  background-color: aquamarine;
}
.content-top {
  padding-top: 0.5%;
  height: 500px;
  width: 2400px;
  min-width: 2400px;
  margin-left: 3%;
  // margin-bottom: 5%;
}
.heartbeat-tb tr td {
  font-size: 8px;
  width: 70px;
  height: 18px;
}

.sign-box {
  border: 1px solid skyblue;
  width: 20px;
  height: 10px;
  margin-top: -33px;
  background: #dadada;
}
/*报警心跳区域*/
/*日期*/
.demo {
  position: relative;
  width: 56%;
  margin-left: 10px;
}

.demo i {
  position: absolute;
  bottom: 10px;
  right: 24px;
  top: auto;
  cursor: pointer;
}
.ctrlClick {
  border: 1px solid rgba(243, 24, 24, 0.5);
}
.content-down {
  height: 10%;
  width: 1367px;
  min-width: 1367px;
  min-height: 340px;
  margin-left: 12%;
}

.box {
  width: 55px;
  height: 25px;
  /*  margin-right: 4px;
  margin-bottom: 4px; */
  padding: 0px;
  line-height: 25px;
  text-align: center;
}
.devices {
  border: 0px solid #ffffff;
  background-color: white;
}

.margin11 {
  margin-right: 758px;
}
.classmargin10_1 {
  margin-right: 468px;
}
.boxwidth {
  width: 114px;
}
.margin_right0 {
  margin-right: 565px;
}
.margin_right2 {
  margin-right: 584px;
}
.margin_right7 {
  margin-right: 40px;
}
.margin_left5 {
  float: right;
  margin-right: 67px;
  height: 54px;
  line-height: 56px;
}
.margin_left4 {
  margin-left: 35px;
}
.tag1 {
  height: 375px;
  width: 25px;
  position: relative;
  top: -378px;
  left: 563px;
}
.tag2 {
  height: 375px;
  width: 25px;
  position: relative;
  top: -377px;
  right: 5px;
}
.tag3{
    height: 25px;
    width: 493px;
    position: relative;
    top: -364px;
    right: 1px;
}
.tag4{
    height: 25px;
    width: 493px;
    position: relative;
    top: -499px;
    right: 498px;
}
.tag1-1 {
  width: 8px;
  height: 390px;
  margin-left: -1px;
  margin-top: 5px;
}
.tag1-1-1 {
  width: 30px;
  height: 10px;
  position: relative;
  margin-top: -24px;
  margin-left: -10px;
}
.tag2-2 {
  width: 8px;
  height: 390px;
  margin-left: -1px;
  margin-top: 5px;
}
.tag2-2-2 {
  width: 30px;
  height: 10px;
  position: relative;
  margin-top: -24px;
  margin-left: -10px;
}
.tag3-3 {
  width: 510px;
  height: 8px;
  margin-left: -5px;
  margin-top: 7px;
}
.tag3-3-3 {
  width: 10px;
  height: 30px;
  position: relative;
  margin-top: -24px;
  margin-left: 14px;
}
.tag4-4{
    width: 510px;
    height: 8px;
    margin-left: -5px;
    margin-top: 6px;
}
.tag4-4-4 {
  width: 10px;
  height: 30px;
  position: relative;
  margin-top: -20px;
  margin-left: 14px;
}
.ii {
  position: relative;
  right: 40px;
  top: -7px;
  z-index: 999999;
}
.divbg {
  background: url(/static/ssx.png);
}
.RGV1{
      margin-top: 160px;
    margin-left: -10px;
    height: 21px;
    width: 25px;
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/Index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1023 @@
<template>
  <div id="vol-container" :class="['vol-theme-' + theme]">
    <div class="vol-aside" :style="{ width: menuWidth + 'px' }">
      <div class="header" :style="{ width: menuWidth - 1 + 'px' }">
        <img v-show="!isCollapse" v-bind:src="logo" />
        <Icon type="ios-list" @click="toggleLeft" class="collapse-menu" />
      </div>
      <div class="vol-menu">
        <el-scrollbar style="height: 100%">
          <VolMenu
            :onSelect="onSelect"
            :isCollapse="isCollapse"
            :list="menuOptions"
          ></VolMenu>
        </el-scrollbar>
      </div>
    </div>
    <div class="vol-container" :style="{ left: menuWidth - 1 + 'px' }">
      <div class="vol-header">
        <span class="header-text"></span>
        <div class="header-info">
          <div class="h-link">
            <ul>
              <li
                v-for="(item, index) in links"
                :key="index"
                v-bind:class="{ actived: selectId == item.id }"
              >
                <a href="javascript:void(0)" @click="to(item)">{{
                  item.text
                }}</a>
              </li>
            </ul>
          </div>
          <div>
            <img class="user-header" :src="userImg" :onerror="errorImg" />
          </div>
          <div class="user">
            <span>{{ userName }}</span>
            <br />
            <span>{{ date }}</span>
            <!-- <span>星期五</span> -->
          </div>
          <div class="settings">
            <Icon
              :size="20"
              type="md-settings"
              @click="
                () => {
                  theme_moel = true;
                }
              "
            />
            <!-- <Icon type="md-paw" /> -->
          </div>
        </div>
      </div>
      <div class="vol-path">
        <!-- 2020.05.31增加顶部导tabs超出后滚动 -->
        <Tabs
          @on-click="selectNav"
          :before-remove="removeNav"
          v-model="selectId"
          type="card"
          :animated="false"
          class="header-navigation"
        >
          <!-- 2020.07.31增加手动打开tabs -->
          <TabPane
            :class="{ active: navIndex == selectId }"
            :name="item.navIndex"
            :closable="navIndex != 0"
            v-for="(item, navIndex) in navigation"
            :key="navIndex"
            :label="item.name"
          ></TabPane>
        </Tabs>
      </div>
      <div class="vol-main" id="vol-main">
        <el-scrollbar style="height: 100%">
          <!-- 2020.06.03增加路由切换时加载提示 -->
          <loading v-show="$store.getters.isLoading()"></loading>
          <!-- 2020.10.09增加路由keepAlive属性设置不缓存组件(默认缓存组件) -->
          <keep-alive>
            <router-view
              v-if="
                !$route.meta ||
                ($route.meta && !$route.meta.hasOwnProperty('keepAlive'))
              "
            ></router-view>
          </keep-alive>
          <router-view
            v-if="$route.meta && $route.meta.hasOwnProperty('keepAlive')"
          ></router-view>
        </el-scrollbar>
      </div>
    </div>
    <!-- 2020.04.02增加换皮肤功能 -->
    <Drawer
      class="theme-selector"
      title="选择皮肤颜色"
      :closable="false"
      v-model="theme_moel"
    >
      <div
        @click="changeThen(item.name)"
        class="item"
        v-for="(item, index) in theme_color"
        :key="index"
        :style="{ background: item.color }"
      ></div>
    </Drawer>
  </div>
</template>
<script>
import loading from "@/components/basic/RouterLoading";
import VolMenu from "@/components/basic/VolElementMenu.vue";
let imgUrl = require("@/assets/imgs/wcs_x.png");
var $vueIndex;
export default {
  data() {
    return {
      menuWidth: 200,
      isCollapse: false,
      menu_theme: "light",
      theme_moel: false,
      theme_color: [
        { name: "dark", color: "#272929" },
        // { name: "blue", color: "rgb(45, 140, 240)" },
        // { name: "red", color: "rgb(237, 64, 20)" },
        // { name: "orange", color: "rgb(255, 153, 0)" },
        { name: "white", color: "#fff" },
        { name: "green", color: "rgb(25, 190, 107)" },
      ], //2020.04.02增加换皮肤功能
      errorImg: 'this.src="' + require("@/assets/imgs/error-img.png") + '"',
      userName: "--",
      userImg: "",
      selectId: 0,
      navigation: [{ name: "首页", id: 0, path: "/home" }],
      logo: imgUrl,
      date: "",
      theme: "dark",
      links: [
        // { text: "大屏数据", path: "/bigdata", id: -3 },
        { text: "个人中心", path: "/UserInfo", id: -1 },
        { text: "安全退出", path: "/login", id: -4 },
      ],
      menuOptions: [],
    };
  },
  components: {
    VolMenu,
    loading,
  },
  created() {
    let theme = localStorage.getItem("vol_theme");
    if (theme) {
      this.theme = theme;
    }
    this.menu_theme = this.theme == "white" ? "dark" : "light";
    let userInfo = this.$store.getters.getUserInfo();
    this.userName = userInfo.userName;
    this.userImg = this.base.getImgSrc(userInfo.img, this.http.ipAddress);
    /* 2020.07.31增加手动打开tabs*/
    /***注意同时更新main.js中Vue.prototype.$tabs = {};***/
    Object.assign(this.$tabs, { open: this.open, close: this.close });
    $vueIndex = this;
    this.showTime();
    setInterval(function () {
      $vueIndex.showTime();
    }, 1000);
    this.http.ajax({
      url: "api/menu/getTreeMenu",
      json: true,
      success: function (data) {
        data.forEach((d) => {
          if (!d.icon) d.icon = "ios-aperture";
          d.path = (d.url || "").replace("/Manager", "");
          d.to = (d.url || "").replace("/Manager", "");
        });
        $vueIndex.$store.dispatch("setPermission", data);
        $vueIndex.menuOptions = data;
      },
      type: "get",
      async: false,
    });
    /* 2020.07.31增加手动打开tabs*/
    //当前刷新是不是首页
    if (this.$route.path != this.navigation[0].path) {
      //查找系统菜单
      let item = this.menuOptions.find((x) => {
        return x.path == this.$route.path;
      });
      if (item) return this.onSelect(item.id);
      //查找顶部快捷连接
      item = this.links.find((x) => {
        return x.path == this.$route.path;
      });
      //查找最后一次跳转的页面
      if (!item) {
        item = this.getItem();
      }
      if (item) {
        return this.open(item, false);
      }
    }
    this.selectId = 0;
  },
  methods: {
    toggleLeft() {
      this.isCollapse = !this.isCollapse;
      this.menuWidth = this.isCollapse ? 63 : 200;
    },
    changeThen(name) {
      if (this.theme != name) {
        this.theme = name;
      }
      this.menu_theme = this.theme == "white" ? "dark" : "light";
      localStorage.setItem("vol_theme", name);
    },
    to(item) {
      /* 2020.07.31增加手动打开tabs*/
      if (item.path == "#") {
        window.open("https://github.com/cq-panda/Vue.NetCore");
        return;
      }
      //2020.07.31
      //2020.08.08修复退出登录切换帐号后权限缓存没刷新的问题
      if (typeof item == "string" || item.path == "/login") {
        if (item == "/login" || item.path == "/login") {
          this.$store.commit("clearUserInfo", "");
          window.location.href = "/";
          return;
        }
        this.$router.push({ path: item });
        return;
      }
      if (item.path == "#") return;
      this.open(item);
    },
    open(item, useRoute) {
      /* 2020.07.31增加手动打开tabs*/
      let _index = this.navigation.findIndex((x) => {
        return x.path == item.path;
      });
      if (_index == -1) {
        this.navigation.push({
          name: item.name || item.text || "无标题",
          path: item.path,
        });
        //新打开的tab移至最后一个选项
        this.selectId = this.navigation.length - 1;
        //return;
      } else {
        this.selectId = _index;
      }
      if (useRoute === undefined) {
        //非标准菜单，记录最后一次跳转的页面，用于刷新
        this.setItem(item);
        this.$router.push(item);
      }
    },
    setItem(item) {
      /* 2020.07.31增加手动打开tabs*/
      localStorage.setItem(
        window.location.origin + "_tabs",
        JSON.stringify(item)
      );
    },
    getItem() {
      /* 2020.07.31增加手动打开tabs*/
      let nav = localStorage.getItem(window.location.origin + "_tabs");
      return nav ? JSON.parse(nav) : null;
    },
    close(path) {
      /* 2020.07.31增加手动打开tabs*/
      let index = this.navigation.findIndex((x) => {
        return x.path == path;
      });
      if (index == -1) {
        return this.$Message.error("未找到菜单");
      }
      this.removeNav(index);
    },
    selectNav(index) {
      /* 2020.07.31增加手动打开tabs*/
      this.selectId = index;
      this.$router.push({
        path: this.navigation[index].path,
      });
    },
    removeNav(_index) {
      //2020.06.02修复关闭tabs时，可能关闭两个tabs的问题
      /* 2020.07.31增加手动打开tabs*/
      return new Promise(() => {
        //关闭的当前项,跳转到前一个页面
        if (this.selectId == _index) {
          this.setItem(this.navigation[_index - 1]);
          this.$router.push({
            path: this.navigation[_index - 1].path,
          });
          this.navigation.splice(_index, 1);
          this.selectId = this.selectId - 1;
          return;
        }
        if (_index < this.selectId) {
          this.selectId = this.selectId - 1;
        }
        this.navigation.splice(_index, 1);
      });
    },
    getSelectMenuName(id) {
      return this.menuOptions.find(function (x) {
        return x.id == id;
      });
    },
    onSelect(treeId) {
      /* 2020.07.31增加手动打开tabs*/
      var item = $vueIndex.getSelectMenuName(treeId);
      this.open(item, false);
    },
    showTime() {
      var week = new Array(
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
        "星期日"
      );
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minutes = date.getMinutes();
      var second = date.getSeconds();
      this.date =
        year +
        "." +
        (month < 10 ? "0" + month : month) +
        "." +
        (day < 10 ? "0" + day : day) + //202.08.08修复日期天数小于10时添加0
        "" +
        " " +
        (hour < 10 ? "0" + hour : hour) +
        ":" +
        (minutes < 10 ? "0" + minutes : minutes) +
        ":" +
        (second < 10 ? "0" + second : second) +
        " " + //2020.08.30修复首页日期星期天不显示的问题
        (week[date.getDay() - 1] || week[6]);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>


<style scoped>
body {
  height: 100%;
  width: 100%;
}
.vol-aside {
  height: 100%;
  position: absolute;
  /* width: 200px; */
  float: left;
  overflow: hidden;
}
.vol-aside .tac {
  text-align: left;
}
/* .vol-aside .el-submenu .el-menu-item {
  max-width: 200px;
  min-width: 190px;
} */
.vol-aside .header {
  text-align: center;
  position: absolute;
  height: 60px;
  /* width: 199px; */
  position: relative;
  line-height: 60px;
  /* background-color: rgb(1, 5, 8); */
}
.vol-aside .vol-menu {
  position: absolute;
  width: 100%;
  top: 60px;
  bottom: 0;
  background: white;
  border-right: 1px solid #e3e3e3;
}

.vol-aside .vol-menu >>> .ivu-menu {
  text-align: left;
  position: unset;
  width: 100% !important;
}
.vol-aside .vol-menu >>> .is-horizontal {
  display: none !important;
}
.vol-aside .vol-menu >>> .is-vertical {
  width: 2px;
}
/* .vol-aside .vol-menu .vol-el-menu {
  border-right: 1px solid #eee;
} */
.vol-container {
  min-width: 800px;
  right: 0;
  display: inline-block;
  position: absolute;
  margin: 0;
  /* left: 199px; */
  box-sizing: border-box;
  height: 100%;
}

.vol-container .vol-path {
  position: relative;
  width: 100%;
  display: inline-block;
  /* border-top: 1px solid #e4e4e4; */
  border-bottom: 1px solid #eee;
  /* z-index: 1; */
}
.vol-container .vol-path span {
  position: relative;
  margin-right: 10px;
  color: #969696;
}
.vol-header {
  height: 61px;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #eee;
  /* line-height: 60px; */
  /* background-color: #272929; */
}
.vol-main {
  border-left: 1px solid #eee;
  position: absolute;
  width: 100%;
  /* height: 100%; */
  bottom: 0;
  top: 93px;
  margin: 0;
  /* padding: 15px; */
  overflow: auto;
}
</style>

<style lang="less" scoped>
.header {
  padding: 5px;
}
.header img {
  height: 100%;
  margin-right: 25px;
}
.header-info {
  right: 20px;
  display: inline-block;
  position: absolute;
  height: 100%;
  /* width: 300px; */
  /* text-align: right; */
}
.header-info > div {
  float: left;
  height: 100%;
}
.user-header {
  background: white;
  height: 52px;
  width: 52px;
  border-radius: 50%;
  margin-right: 0px;
  top: 4px;
  position: relative;
  /* right: 35px; */
  border: 1px solid #dfdfdf;
  /* float: right; */
}
.header-text {
  vertical-align: middle;
  height: 100%;
  position: absolute;

  text-align: center;
  font-size: 15px;
  left: 21px;
  line-height: 60px;
  letter-spacing: 2px;
}
.vol-header .user {
  padding: 12px;
  position: relative;
  display: inline-block;
  height: 100%;
}
.vol-header .settings {
  padding-top: 10px;
  color: #d4d2d2;
}
.vol-header .user span {
  position: relative;
}
.header-info:hover {
  cursor: pointer;
}
.header-navigation {
  cursor: pointer;
  box-shadow: 3px 0px 6px #f6f7f7;
  border-bottom: 1px solid #eee;
  // border-top: 1px solid #eee;
  height: 32px;
  overflow: hidden;
  line-height: 32px;
  display: block;
  margin: 0;
  padding: 0;
  outline: 0;
  list-style: none;
  position: relative;
  z-index: 900;
  font-weight: initial;
}
.header-navigation li {
  position: relative;
  float: left;
  padding: 0 20px;
  min-width: 80px;
  border-right: 1px solid #eee;
}

.header-navigation li .icon-romve {
  top: 5px;
  position: absolute;
  /* margin-left: 5px; */
  right: 6px;
}
/* .header-navigation li:hover .icon-romve {
  display: block;
} */
.vol-header .user span:first-child {
  font-size: 15px;
  font-weight: bolder;
  /* letter-spacing: 3px; */
}

.h-link ul {
  height: 100%;
  display: inline-block;
}

.h-link li {
  height: 100%;
  list-style: none;
  float: left;
  padding: 20px 10px;
  position: relative;
  cursor: pointer;
  z-index: 3;
  /*transition: all .2s ease-in-out;*/
}

.h-link a {
  color: #b0b0b0;
  font-size: 15px;
  text-decoration: none;
  padding: 20px 20px;
}

img[src=""],
img:not([src]) {
  opacity: 0;
}
</style>

<style lang="less" scoped>
//黑色
.vol-theme-dark {
  .header {
    background: #101010;
  }
  .header-text {
    color: white;
  }
  .vol-header {
    background-color: #272929;
  }
  .h-link a:hover {
    color: #b0b0b0;
  }
  .h-link a:hover {
    color: #dfdfdf;
  }
  .h-link .actived {
    border-bottom: 2px solid white;
  }
  .h-link .actived a {
    color: white !important;
  }
  .vol-header .user {
    color: #ececec;
  }
  .vol-header .settings {
    color: #d4d2d2;
  }
  .vol-aside .vol-menu {
    background: black;
  }
  .header-navigation li.active {
    background: #607d8b;
    /* border-bottom: 3px solid #03a9f4; */
    color: white;
    /* border-bottom: 2px solid #03a9f4; */
  }
  .header-navigation li:hover {
    cursor: pointer;
    background: #607d8b;
    color: white;
  }
}
</style>

<style  scoped>
.vol-theme-white .vol-aside >>> .vol-el-menu-item {
  background: black;
  color: white;
}
.vol-theme-dark .vol-aside >>> .vol-menu .el-submenu {
  background: black;
}
.vol-theme-dark .vol-aside >>> .vol-menu .el-submenu__title * {
  color: #d6d6d6;
}
.vol-theme-dark .vol-aside >>> .vol-el-menu-item .el-menu-item {
  color: #eee;
  background: #1f1f1f;
}
.vol-theme-dark .vol-aside >>> .vol-el-menu-item .el-menu-item.is-active,
.vol-theme-dark .vol-aside >>> .menu-item-lv1 {
  background: black;
}

.vol-theme-dark .vol-aside >>> .menu-item-lv1 {
  background: black;
  color: #d6d6d6;
}

.vol-theme-dark .vol-aside >>> .vol-el-menu-item .el-menu-item:hover {
  background: black;
}
.vol-theme-dark .vol-aside >>> .el-submenu__title:hover {
  background-color: black;
}
.vol-theme-dark .vol-aside >>> .el-submenu__title:hover * {
  color: white;
}
</style>



<style lang="less" scoped>
//红色
.vol-theme-red {
  .header-text {
    color: #dcdfe6;
  }
  .vol-header,
  .header {
    background-color: rgb(237, 64, 20);
  }

  .h-link a:hover {
    color: #dfdfdf;
  }
  .h-link .actived {
    border-bottom: 2px solid white;
  }

  .h-link a,
  .h-link .actived a,
  .vol-header .settings,
  .vol-header .user {
    color: white;
  }

  .header-navigation li.active,
  .header-navigation li:hover {
    background: rgb(237, 64, 20);
    color: #fff;
  }
  .vol-header .header-text {
    color: #fbfbfb;
  }
}
</style>



<style lang="less" scoped>
//橙色
.vol-theme-orange {
  .header-text {
    color: #dcdfe6;
  }
  .vol-header,
  .header {
    background-color: rgb(255, 153, 0);
  }

  .h-link a:hover {
    color: #dfdfdf;
  }
  .h-link .actived {
    border-bottom: 2px solid white;
  }

  .h-link a,
  .h-link .actived a,
  .vol-header .settings,
  .vol-header .user {
    color: white;
  }

  .header-navigation li.active,
  .header-navigation li:hover {
    background: rgb(255, 153, 0);
    color: #fff;
  }
  .vol-header .header-text {
    color: #fbfbfb;
  }
}
</style>


<style lang="less" scoped>
//绝色
.vol-theme-green {
  .header-text {
    color: #dcdfe6;
  }
  .vol-header,
  .header {
    background-color: rgb(25, 190, 107);
  }

  .h-link a:hover {
    color: #dfdfdf;
  }
  .h-link .actived {
    border-bottom: 2px solid white;
  }

  .h-link a,
  .h-link .actived a,
  .vol-header .settings,
  .vol-header .user {
    color: white;
  }

  .header-navigation li.active,
  .header-navigation li:hover {
    background: rgb(25, 190, 107);
    color: #fff;
  }
  .vol-header .header-text {
    color: #fbfbfb;
  }
}
</style>


<style lang="less" scoped>
//蓝色
.vol-theme-blue {
  .header-text {
    color: #dcdfe6;
  }
  .vol-header,
  .header {
    background-color: rgb(45, 140, 240);
  }

  .h-link a:hover {
    color: #dfdfdf;
  }
  .h-link .actived {
    border-bottom: 2px solid white;
  }

  .h-link a,
  .h-link .actived a,
  .vol-header .settings,
  .vol-header .user {
    color: white;
  }

  .header-navigation li.active,
  .header-navigation li:hover {
    background: #1a89ff;
    color: white;
  }
  .vol-header .header-text {
    color: #fbfbfb;
  }
}
</style>

<style  scoped>
</style>


<style lang="less" scoped>
//白色
.vol-theme-white {
  // .vol-aside .vol-menu {
  //   // background: #0159fb;
  // }

  .header {
    background-color: #434956;
  }
  .h-link a:hover {
    color: #505252;
  }
  .h-link a {
    color: #211f1f;
  }

  .header-navigation {
    box-shadow: -7px 11px 10px -13px #678aa7;
    border-bottom: 1px solid #eee;
    // border-top: 1px solid #eee;
    height: 32px;
    overflow: hidden;
    line-height: 32px;
    display: block;
    margin: 0;
    padding: 0;
    outline: 0;
    list-style: none;
    position: relative;
    z-index: 900;
    font-weight: 400;
  }
  .header-navigation li.active,
  .header-navigation li:hover {
    // background: #1a89ff;
    color: white;
  }
}
</style>
<style  scoped>
.vol-theme-white .vol-aside >>> .vol-el-menu-item {
  background: #363e4f;
  color: white;
}
.vol-theme-white .vol-aside >>> .vol-menu .el-submenu,
.vol-theme-white .vol-aside >>> .menu-item-lv1 {
  background: #515a6e;
}
.vol-theme-white .vol-aside >>> .vol-menu {
  background: #515a6e;
}
.vol-theme-white .vol-aside >>> .vol-menu .el-submenu__title *,
.vol-theme-white .vol-aside >>> .menu-item-lv1 * {
  color: #d6d6d6;
}
.vol-theme-white .vol-aside >>> .vol-el-menu-item .el-menu-item {
  color: #eee;
}
.vol-theme-white .vol-aside >>> .vol-el-menu-item .el-menu-item.is-active,
.vol-theme-white .vol-aside >>> .menu-item-lv1.is-active {
  background: #59647b;
  color: #fff;
}
.vol-theme-white .vol-aside >>> .vol-el-menu-item .el-menu-item:hover {
  background: #6a758c;
}
.vol-theme-white .vol-aside >>> .el-submenu__title:hover {
  background-color: #525865;
}
.vol-theme-white .vol-aside >>> .el-submenu__title:hover * {
  color: white;
}
</style>

<style>
.el-scrollbar__wrap {
  overflow-x: hidden;
}
.el-scrollbar__bar.is-vertical {
  /*background: #e9e7e7;*/
  color: #ffffff;
  /*z-index不能超过1058，否则会影响弹出框select标签(2020-02-02)*/
  z-index: 999;
  right: 0;
  width: 6px;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 7px;
  background-color: transparent;
}
*::-webkit-scrollbar-track {
  background-color: #f0f6ff;
}
*::-webkit-scrollbar-thumb {
  /* background-color: #73abb1; */
  border-radius: 3px;
}
.scrollbarHide::-webkit-scrollbar {
  display: none;
}
.scrollbarShow::-webkit-scrollbar {
  display: block;
}
.ivu-select-dropdown::-webkit-scrollbar {
  width: 6px;
  height: 13px;
}
.ivu-select-dropdown::-webkit-scrollbar {
  width: 6px;
  height: 14px;
}
.ivu-select-dropdown::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #dadac9;
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
</style>
<style lang="less" scoped>
.theme-selector {
  .item {
    cursor: pointer;
    width: 230px;
    height: 80px;
    border-radius: 5px;
    margin-bottom: 17px;
    border: 1px solid #d4d2d2;
  }
}
</style>

<style scoped>
/* 2020.05.31增加顶部导tabs超出后滚动 */
.header-navigation >>> .ivu-tabs-nav-prev {
  z-index: 999;
  border-radius: 3px;
  text-align: center;
  width: 30px;
  background: #f8f8f9;
  border-right: 1px solid #d8d7d7;
}
.header-navigation >>> .ivu-tabs-nav-next {
  z-index: 999;
  border-radius: 3px;
  text-align: center;
  width: 30px;
  background: #f8f8f9;
  border-left: 1px solid #d8d7d7;
}
</style>

<style lang="less" scoped>
.collapse-menu {
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  line-height: 60px;
  position: absolute;
  top: 0;
  right: 5px;
  cursor: pointer;
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/Login.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,387 @@
<template>
  <div class="bg">
    <div class="content">
      <div class="desc">
        <!-- <div class="title">WIDESEA</div> -->
        <img src="../assets/imgs/wcs_x.png" style="width: 100%" />
      </div>
      <div class="login">
        <div class="login-contianer">
          <div class="login-form">
            <!-- <Menu mode="horizontal" style="margin-bottom: 30px;" active-name="1">
              <MenuItem name="1">
                <Icon type="md-contacts" />帐号登录
              </MenuItem>
            </Menu>-->
            <div class="form-user" @keypress="loginPress">
              <div class="item">
                <div class="f-text">
                  <label> <Icon type="ios-people" :size="20" />用户名： </label>
                </div>
                <div class="f-input">
                  <input
                    type="text"
                    v-focus
                    v-model="userInfo.userName"
                    placeholder="输入用户"
                  />
                </div>
                <div class="f-remove" @click="userInfo.userName = ''">
                  <Icon type="ios-close-circle" />
                </div>
              </div>
              <div class="item">
                <div class="f-text">
                  <label>
                    <Icon type="ios-lock" :size="20" />密&nbsp;&nbsp;&nbsp;码：
                  </label>
                </div>
                <div class="f-input">
                  <input
                    type="password"
                    v-focus
                    v-model="userInfo.passWord"
                    placeholder="输入密码"
                  />
                </div>
                <div v-focus class="f-remove" @click="userInfo.passWord = ''">
                  <Icon type="ios-close-circle" />
                </div>
              </div>
              <div class="item">
                <div class="f-text">
                  <label>
                    <Icon type="md-images" v-focus :size="20" />验证码：
                  </label>
                </div>
                <div class="f-input">
                  <input
                    v-focus
                    type="text"
                    v-model="userInfo.verificationCode"
                    placeholder="输入验证码"
                  />
                </div>
                <div
                  class="code"
                  @click="
                    () => {
                      getVierificationCode();
                    }
                  "
                >
                  <img v-show="codeImgSrc != ''" :src="codeImgSrc" />
                </div>
              </div>
            </div>
            <div class="loging-btn">
              <Button
                size="large"
                :loading="loading"
                type="info"
                @click="login"
                long
              >
                <span v-if="!loading">登录</span>
                <span v-else>正在登录...</span>
              </Button>
            </div>
            <!-- <div class="action">
              <a @click="()=>{}">注册</a>
              <a @click="()=>{}">忘记密码</a>
            </div>-->
          </div>
        </div>
      </div>
    </div>
    <div class="l-bg"></div>
    <div class="r-bg"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      codeImgSrc: "",
      userInfo: {
        userName: "admin",
        passWord: "123456",
        verificationCode: "1234",
      },
    };
  },
  directives: {
    focus: {
      inserted: function (el) {
        el.focus();
      },
    },
  },
  created() {
    this.getVierificationCode();
  },
  methods: {
    getVierificationCode() {
      this.http.get("/api/User/getVierificationCode").then((x) => {
        this.codeImgSrc = "data:image/png;base64," + x.img;
        this.userInfo.UUID = x.uuid;
      });
    },
    loginPress(e) {
      if (event.keyCode == 13) {
        this.login();
      }
    },
    login() {
      if (this.userInfo.userName == "" || this.userInfo.userName.trim() == "")
        return this.$Message.error("请输入用户名");
      if (this.userInfo.passWord == "" || this.userInfo.passWord.trim() == "")
        return this.$Message.error("请输入密码");
      if (
        this.userInfo.verificationCode == "" ||
        this.userInfo.verificationCode.trim() == ""
      )
        return this.$Message.error("请输入验证码");
      this.loading = true;
      this.http
        .post("/api/user/login", this.userInfo, "正在登录....")
        .then((result) => {
          if (!result.status) {
            this.loading = false;
            this.getVierificationCode();
            return this.$Message.error(result.message);
          }
          this.$Message.info("登录成功,正在跳转!");
          this.$store.commit("setUserInfo", result.data);
          this.$router.push({ path: "/" });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  display: flex;
  overflow-x: hidden;
  position: relative;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(135deg, #40b3e8 10%, #40b3e8);
}

.login {
  flex: 1;
}

.content {
  display: flex;
  z-index: 99;
  position: relative;
  width: 1000px;
  left: 0;
  right: 0;

  margin: 0 auto;
  transform: translateY(-50%);
  // background: #dedede40;
  top: 50%;
  height: 450px;
  border-radius: 10px;
}

.desc {
  width: 500px;
  padding: 40px 50px;
  box-sizing: border-box;
  height: 100%;
}

.desc p {
  font-size: 15px;
  color: white;
  line-height: 30px;
}

.desc p:before {
  top: -1px;
  content: "o";
  position: relative;
  margin-right: 7px;
}

.title {
  z-index: 999;
  font-size: 70px;
  font-weight: bold;
  color: white;
}

.l-bg {
  height: 1200px;
  width: 1200px;
  border-radius: 50%;
  background: #2cecff;
  position: absolute;
  top: -700px;
  left: -700px;
  background-image: linear-gradient(135deg, #00a7f5 10%, #0cb3ff);
}

.r-bg {
  height: 2000px;
  width: 2000px;
  border-radius: 50%;
  background: #2cecff;
  position: absolute;
  top: -1500px;
  right: -900px;
  background-image: linear-gradient(135deg, #42c2ff 10%, #1da1dc);
}
</style>

<style lang="less" scoped>
.form-user {
  .f-remove {
    display: none;
  }
  margin: 25px 0;
  .item:hover .f-remove {
    display: block;
  }
  .item {
    display: flex;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
    margin-bottom: 30px;
    display: flex;
    .f-text {
      color: #868484;
      font-weight: 400;
      width: 110px;
      font-size: 16px;
      i {
        position: relative;
        top: -1px;
        right: 5px;
      }
    }
    .f-input {
      border: 0px;
      flex: 1;
      input {
        padding-left: 15px;
        font-size: 16px;
        font-weight: 400;
        color: #807f7f;
        width: 100%;
        outline: none;
        border: none;
      }
    }
    .code {
      position: relative;
      cursor: pointer;
      top: -5px;
      width: 74px;
      border: 1px solid #fdfdfd;
      border-radius: 2px;
      height: 35px;
      margin-left: 10px;
    }
    input:focus {
      outline: none;
      background-color: transparent;
    }
    // input::selection {
    //   background: transparent;//输入框选中变成透明
    // }
    // input::-moz-selection {
    //   background: transparent;
    // }
  }
}
input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px white inset;
}
.login-contianer {
  .login-form {
    // margin-top: 25px;
    border-radius: 5px;
    padding: 10px 30px 40px 30px;
    width: 400px;
    min-height: 340px;
    background: white;
    box-shadow: 0px 4px 21px #d6d6d6;
  }
}
.login-project {
  line-height: 70px;
  img {
    height: 80px;
  }
  .project-name {
    font-size: 50px;
    position: relative;
    color: white;
    font-weight: 600;
    margin-left: 9px;
  }
  .desc {
    color: wheat;
    font-size: 15px;
  }
}
.loging-btn {
  margin-top: 40px;
}
.action {
  text-align: right;
  margin-top: 20px;
  a {
    margin-left: 20px;
  }
}
.login-footer {
  padding: 10px;
  text-align: center;
  font-size: 16px;
  position: absolute;
  width: 100%;
  bottom: 0px;
  background: #06a3ea;
  border-top: 1px solid #e2e2e2;
  i {
    position: relative;
    top: -2px;
    margin-right: 5px;
  }
  a {
    margin-left: 30px;
    color: #f9ebd0;
  }
}
@media screen and (max-device-width: 600px) {
  .desc {
    display: none;
  }
}
</style>
<style scoped>
.login-contianer >>> .ivu-form .ivu-form-item-content {
  margin-left: 0px !important;
}
</style>
<style>
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  box-shadow: 0 0 0 60px #eee inset;
  -webkit-text-fill-color: #878787;
}
</style>




 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/cargospace.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1045 @@
<!--已注释：新增手动任务，单机操作-->
<template>
  <div>
    <input type="hidden" id="currentUser" />
    <input type="hidden" id="thisModel" />
    <div class="content" 
        @mouseup="handMouseUp"
        @mousedown.left="onmousedownClick">
      <div class="content-top">
        <div style="margin-bottom: 15px">
          <button @click="value3 = formdrawer.location?true:false" type="primary" class="ivu-btn ivu-btn-primary ivu-btn-small">货位分配</button>
        </div>
       <Drawer
            title="货位绑定类型"
            v-model="value3"
            width="720"
            :mask-closable="true"
            :styles="styles"
        >
            <div class="demo-drawer__content">
              <el-form :model="formdrawer">
                <el-form-item label="货位行列" :label-width="formLabelWidth">
                  <el-input type="textarea" v-model="formdrawer.location" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="物料名称" :label-width="formLabelWidth">
                  <el-select v-model="formdrawer.materiel_type" clearable filterable  placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="value3 = false">取消</Button>
                <Button type="primary" @click="onSubmitLocation()">提交</Button>
              </div>
            </div>
        </Drawer>    

        <div class="tag-group">
          <el-popover
            v-for="(item, index) in list0"
            :key="index"
            placement="bottom"
            title="状态信息"
            width="200"
            trigger="click"
            :content="!display?'暂无数据':''"
            :disabled="item.popoverdis"
            :name="'item'"
            :id="item.id != null ? item.id : '1_' + index"
            @keydown.native="keyDownCtrl($event, item)"
          >
          
            <Tag
              class="box"
              :class="[item.classhide, item.margin_right0]"
              :color="item.color"
              @click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
              slot="reference"
            >{{!isNaN(item.id)?item.id:""}}</Tag>
          </el-popover>
        </div>

        <div class="tag-group">
          <el-popover
            v-for="(item, index) in list1"
            :key="index"
            placement="bottom"
            title="状态信息"
            width="200"
            trigger="click"
            :content="!display?'暂无数据':''"
            :disabled="item.popoverdis"
            :name="'item'"
            :id="item.id != null ? item.id : '2_' + index"
            @keydown.native="keyDownCtrl($event, item)"
          >
            
            <Tag
              class="box"
              :class="item.classhide"
              :color="item.color"
              @click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
              slot="reference"
            >
              {{!isNaN(item.id)?item.id:""}}
            </Tag>
          </el-popover>
        </div>

        <div class="tag-group">
          <el-popover
            v-for="(item, index) in list2"
            :key="index"
            placement="bottom"
            title="状态信息"
            :content="!display?'暂无数据':''"
            width="200"
            trigger="click"
            :disabled="item.popoverdis"
            :name="'item'"
            :id="item.id != null ? item.id : '3_' + index"
            @keydown.native="keyDownCtrl($event, item)"
          >
            
            <Tag
              class="box"
              :class="[item.classhide, item.margin_right2]"
              :color="item.color"
              @click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
              slot="reference"
            >{{!isNaN(item.id)?item.id:""}}</Tag>
          </el-popover>
        </div>

        <div class="tag-group">
          <el-popover
            v-for="(item, index) in list3"
            :key="index"
            placement="bottom"
            title="状态信息"
            :content="!display?'暂无数据':''"
            width="200"
            trigger="click"
            :disabled="item.popoverdis"
            :name="'item'"
            :id="item.id != null ? item.id : '4_' + index"
            @keydown.native="keyDownCtrl($event, item)"
          >
            
            <Tag
              class="box"
              :class="[item.classhide, item.margin_right2]"
              :color="item.color"
              @click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
              slot="reference"
            >{{!isNaN(item.id)?item.id:""}}</Tag>
          </el-popover>
        </div>

        <div class="tag-group">
          <el-popover
            v-for="(item, index) in list4"
            :key="index"
            placement="bottom"
            title="状态信息"
            :content="!display?'暂无数据':''"
            width="200"
            trigger="click"
            :disabled="item.popoverdis"
            :name="'item'"
            :id="item.id != null ? item.id : '5_' + index"
            @keydown.native="keyDownCtrl($event, item)"
          >
            
            <Tag
              class="box"
              :class="[item.classhide, item.margin_right2, item.margin_left4]"
              :color="item.color"
              @click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
              slot="reference"
            >{{!isNaN(item.id)?item.id:""}}</Tag>
          </el-popover>
        </div>
        <div class="tag-group">
          <el-popover
            v-for="(item, index) in list5"
            :key="index"
            placement="bottom"
            :content="!display?'暂无数据':''"
            title="状态信息"
            width="200"
            trigger="click"
            :disabled="item.popoverdis"
            :name="'item'"
            :id="item.id != null ? item.id : '6_' + index"
            @keydown.native="keyDownCtrl($event, item)"
          >
            
            <Tag
              class="box"
              :class="[item.classhide]"
              :color="item.color"
              @click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
              slot="reference"
            >{{!isNaN(item.id)?item.id:""}}</Tag>
          </el-popover>
        </div>

        <div class="tag-group">
          <el-popover
            v-for="(item, index) in list6"
            :key="index"
            placement="bottom"
            title="状态信息"
            :content="!display?'暂无数据':''"
            width="200"
            trigger="click"
            :disabled="item.popoverdis"
            :name="'item'"
            :id="item.id != null ? item.id : '7_' + index"
            @keydown.native="keyDownCtrl($event, item)"
          >
            
            <Tag
              class="box"
              :class="item.classhide"
              :color="item.color"
              @click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
              slot="reference"
            >{{!isNaN(item.id)?item.id:""}}</Tag>
          </el-popover>
        </div>

        <div class="tag-group">
          <el-popover
            v-for="(item, index) in list7"
            :key="index"
            placement="bottom"
            title="状态信息"
            :content="!display?'暂无数据':''"
            width="200"
            trigger="click"
            :disabled="item.popoverdis"
            :name="'item'"
            :id="item.id != null ? item.id : '8_' + index"
            @keydown.native="keyDownCtrl($event, item)"
          >
            
            <Tag
              class="box"
              :class="[item.classhide, item.margin_right7]"
              :color="item.color"
              @click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
              slot="reference"
            >{{!isNaN(item.id)?item.id:""}}</Tag>
          </el-popover>
        </div>

        <div class="tag-group">
          <el-popover
            v-for="(item, index) in list8"
            :key="index"
            placement="bottom"
            title="状态信息"
            :content="!display?'暂无数据':''"
            width="200"
            trigger="click"
            :disabled="item.popoverdis"
            :name="'item'"
            :id="item.id != null ? item.id : '9_' + index"
            @keydown.native="keyDownCtrl($event, item)"
          >
            
            <Tag
              class="box"
              :class="[item.classhide, item.boxwidth, item.margin_left5]"
              :color="item.color"
              @click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
              slot="reference"
            >{{!isNaN(item.id)?item.id:""}}</Tag>
          </el-popover>
        </div>

        <div class="tag-group">
          <el-popover
            v-for="(item, index) in list9"
            :key="index"
            placement="bottom"
            title="状态信息"
            :content="!display?'暂无数据':''"
            width="200"
            trigger="click"
            :disabled="item.popoverdis"
            :name="'item'"
            :id="item.id != null ? item.id : '10_' + index"
            @keydown.native="keyDownCtrl($event, item)"
          >
            <Tag
              class="box"
              :class="item.classhide"
              :color="item.color"
              @click.native="item.id >99&&item.id<200 ? btnclicktag1(item) : ''"
              slot="reference"
            >{{!isNaN(item.id)?item.id:""}}</Tag>
          </el-popover>
        </div>
        <div id="rectangular"></div>
        <Tag class="zhuzi1" color="red" slot="reference" >柱子</Tag>
        <Tag class="zhuzi2" color="red" slot="reference" >柱子</Tag>
        <Tag class="zhuzi3" color="red" slot="reference" >柱子</Tag>
        <Tag class="zhuzi4" color="red" slot="reference" >柱子</Tag>
        <Tag class="zhuzi5" color="red" slot="reference" >柱子</Tag>
        <Tag class="zhuzi6" color="red" slot="reference" >柱子</Tag>
      </div>
    </div>
  </div>
</template>

<script>
import http from "./../api/http.js";
import $ from "jquery";
export default {
  data() {
    return {
      display:false,
      selectIdList: [],
      value3: false,
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      formdrawer: {
        location: "",
        materiel_type:''
      },
      options: [{
          value: '选项1',
          label: '阴极粉料'
        }, {
          value: '选项2',
          label: '阳极粉料'
        }, {
          value: '选项3',
          label: '阴极泊材'
        }, {
          value: '选项4',
          label: '阳极泊材'
        }, {
          value: '选项5',
          label: '阳极辅料'
        }],
      formLabelWidth: "80px",
      //颜色数据  
      colors: [
        "success",
        "primary",
        "error",
        "warning",
        "magenta",
        "red",
        "volcano",
        "orange",
        "gold",
        "green",
        "cyan",
        "blue",
        "geekblue",
        "#FFA2D3",
        "default",
      ],
      //#region   wcs货位图数据
      list0: [
        { color: "green", popoverdis: true, id: "008-022" },
        { color: "green", popoverdis: true, id: "008-021" },
        { color: "green", popoverdis: true, id: "008-020" },
        { color: "green", popoverdis: true, id: "008-019" },
        { color: "green", popoverdis: true, id: "008-018" },
        { color: "green", popoverdis: true, id: "008-017" },
        { color: "green", popoverdis: true, id: "008-016" },
        { color: "green", popoverdis: true, id: "008-015" },
        { color: "green", popoverdis: true, id: "008-014" },
        { color: "green", popoverdis: true, id: "008-013" },
        { color: "green", popoverdis: true, id: "008-012" },
        { color: "green", popoverdis: true, id: "008-011" },
        { color: "green", popoverdis: true, id: "008-010" },
        { color: "green", popoverdis: true, id: "008-009" },
        { color: "green", popoverdis: true, id: "008-008" },
        { color: "green", popoverdis: true, id: "008-007" },
        { color: "green", popoverdis: true, id: "008-006" },
        { color: "green", popoverdis: true, id: "008-005" },
        { color: "green", popoverdis: true, id: "008-004" },
        { color: "green", popoverdis: true, id: "008-003" },
        { color: "green", popoverdis: true, id: "008-002" },
        { color: "green", popoverdis: true, id: "008-001" },
      ],
      list1: [
        { color: "green", popoverdis: true, id: "007-022" },
        { color: "green", popoverdis: true, id: "007-021" },
        { color: "green", popoverdis: true, id: "007-020" },
        { color: "green", popoverdis: true, id: "007-019" },
        { color: "green", popoverdis: true, id: "007-018" },
        { color: "green", popoverdis: true, id: "007-017" },
        { color: "green", popoverdis: true, id: "007-016" },
        { color: "green", popoverdis: true, id: "007-015" },
        { color: "green", popoverdis: true, id: "007-014" },
        { color: "green", popoverdis: true, id: "007-013" },
        { color: "green", popoverdis: true, id: "007-012" },
        { color: "green", popoverdis: true, id: "007-011" },
        { color: "green", popoverdis: true, id: "007-010" },
        { color: "green", popoverdis: true, id: "007-009" },
        { color: "green", popoverdis: true, id: "007-008" },
        { color: "green", popoverdis: true, id: "007-007" },
        { color: "green", popoverdis: true, id: "007-006" },
        { color: "green", popoverdis: true, id: "007-005" },
        { color: "green", popoverdis: true, id: "007-004" },
        { color: "green", popoverdis: true, id: "007-003" },
        { color: "green", popoverdis: true, id: "007-002" },
        { color: "green", popoverdis: true, id: "007-001" },
      ],
      list2: [
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
      ],
      list3: [
        { color: "green", popoverdis: true, id: "006-022" },
        { color: "green", popoverdis: true, id: "006-021" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "006-018" },
        { color: "green", popoverdis: true, id: "006-017" },
        { color: "green", popoverdis: true, id: "006-016" },
        { color: "green", popoverdis: true, id: "006-015" },
        { color: "green", popoverdis: true, id: "006-014" },
        { color: "green", popoverdis: true, id: "006-013" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "006-011" },
        { color: "green", popoverdis: true, id: "006-010" },
        { color: "green", popoverdis: true, id: "006-009" },
        { color: "green", popoverdis: true, id: "006-008" },
        { color: "green", popoverdis: true, id: "006-007" },
        { color: "green", popoverdis: true, id: "006-006" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "006-003" },
        { color: "green", popoverdis: true, id: "006-002" },
        { color: "green", popoverdis: true, id: "006-001" },
      ],
      list4: [
        { color: "green", popoverdis: true, id: "005-022" },
        { color: "green", popoverdis: true, id: "005-021" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "005-018" },
        { color: "green", popoverdis: true, id: "005-017" },
        { color: "green", popoverdis: true, id: "005-016" },
        { color: "green", popoverdis: true, id: "005-015" },
        { color: "green", popoverdis: true, id: "005-014" },
        { color: "green", popoverdis: true, id: "005-013" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "005-011" },
        { color: "green", popoverdis: true, id: "005-010" },
        { color: "green", popoverdis: true, id: "005-009" },
        { color: "green", popoverdis: true, id: "005-008" },
        { color: "green", popoverdis: true, id: "005-007" },
        { color: "green", popoverdis: true, id: "005-006" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "005-003" },
        { color: "green", popoverdis: true, id: "005-002" },
        { color: "green", popoverdis: true, id: "005-001" },
      ],
      list5: [
        { color: "green", popoverdis: true, id: "004-022" },
        { color: "green", popoverdis: true, id: "004-021" },
        { color: "green", popoverdis: true, id: "004-020" },
        { color: "green", popoverdis: true, id: "004-019" },
        { color: "green", popoverdis: true, id: "004-018" },
        { color: "green", popoverdis: true, id: "004-017" },
        { color: "green", popoverdis: true, id: "004-016" },
        { color: "green", popoverdis: true, id: "004-015" },
        { color: "green", popoverdis: true, id: "004-014" },
        { color: "green", popoverdis: true, id: "004-013" },
        { color: "green", popoverdis: true, id: "004-012" },
        { color: "green", popoverdis: true, id: "004-011" },
        { color: "green", popoverdis: true, id: "004-010" },
        { color: "green", popoverdis: true, id: "004-009" },
        { color: "green", popoverdis: true, id: "004-008" },
        { color: "green", popoverdis: true, id: "004-007" },
        { color: "green", popoverdis: true, id: "004-006" },
        { color: "green", popoverdis: true, id: "004-005" },
        { color: "green", popoverdis: true, id: "004-004" },
        { color: "green", popoverdis: true, id: "004-003" },
        { color: "green", popoverdis: true, id: "004-002" },
        { color: "green", popoverdis: true, id: "004-001" },
      ],
      list6: [
        { color: "green", popoverdis: true, id: "003-022" },
        { color: "green", popoverdis: true, id: "003-021" },
        { color: "green", popoverdis: true, id: "003-020" },
        { color: "green", popoverdis: true, id: "003-019" },
        { color: "green", popoverdis: true, id: "003-018" },
        { color: "green", popoverdis: true, id: "003-017" },
        { color: "green", popoverdis: true, id: "003-016" },
        { color: "green", popoverdis: true, id: "003-015" },
        { color: "green", popoverdis: true, id: "003-014" },
        { color: "green", popoverdis: true, id: "003-013" },
        { color: "green", popoverdis: true, id: "003-012" },
        { color: "green", popoverdis: true, id: "003-011" },
        { color: "green", popoverdis: true, id: "003-010" },
        { color: "green", popoverdis: true, id: "003-009" },
        { color: "green", popoverdis: true, id: "003-008" },
        { color: "green", popoverdis: true, id: "003-007" },
        { color: "green", popoverdis: true, id: "003-006" },
        { color: "green", popoverdis: true, id: "003-005" },
        { color: "green", popoverdis: true, id: "003-004" },
        { color: "green", popoverdis: true, id: "003-003" },
        { color: "green", popoverdis: true, id: "003-002" },
        { color: "green", popoverdis: true, id: "003-001" },
      ],
      list7: [
       { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
        { color: "blue", classhide: "devices", popoverdis: true },
      ],
      list8: [
        { color: "green", popoverdis: true, id: "002-022" },
        { color: "green", popoverdis: true, id: "002-021" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "002-018" },
        { color: "green", popoverdis: true, id: "002-017" },
        { color: "green", popoverdis: true, id: "002-016" },
        { color: "green", popoverdis: true, id: "002-015" },
        { color: "green", popoverdis: true, id: "002-014" },
        { color: "green", popoverdis: true, id: "002-013" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "002-011" },
        { color: "green", popoverdis: true, id: "002-010" },
        { color: "green", popoverdis: true, id: "002-009" },
        { color: "green", popoverdis: true, id: "002-008" },
        { color: "green", popoverdis: true, id: "002-007" },
        { color: "green", popoverdis: true, id: "002-006" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "002-003" },
        { color: "green", popoverdis: true, id: "002-002" },
        { color: "green", popoverdis: true, id: "002-001" },
      ],
      list9: [
        { color: "green", popoverdis: true, id: "001-022" },
        { color: "green", popoverdis: true, id: "001-021" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "001-018" },
        { color: "green", popoverdis: true, id: "001-017" },
        { color: "green", popoverdis: true, id: "001-016" },
        { color: "green", popoverdis: true, id: "001-015" },
        { color: "green", popoverdis: true, id: "001-014" },
        { color: "green", popoverdis: true, id: "001-013" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "001-011" },
        { color: "green", popoverdis: true, id: "001-010" },
        { color: "green", popoverdis: true, id: "001-009" },
        { color: "green", popoverdis: true, id: "001-008" },
        { color: "green", popoverdis: true, id: "001-007" },
        { color: "green", popoverdis: true, id: "001-006" },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", classhide: "devices", popoverdis: true },
        { color: "green", popoverdis: true, id: "001-003" },
        { color: "green", popoverdis: true, id: "001-002" },
        { color: "green", popoverdis: true, id: "001-001" },
      ],
    };
  },
  methods: {
    //以下四个方法都是关于多选的
    //按住ctrl多选
    keyDownCtrl(event, item) {
      //获取点击对象
      let div = event.currentTarget;
      let orginClassName = div.lastChild;
      this.isRightClickCtrl = true;
      if (this.selectIdList.indexOf(item.id) == -1) {
        try {
          var locationNum = item.id.substring(4);
          var leftNum = item.id.substr(0, item.id.indexOf("-"));
          if (locationNum < 24 && locationNum > 0 && leftNum > 0) {
            this.selectIdList.push(item.id);
            orginClassName.className = orginClassName.className + " ctrlClick";
          }
        } catch (error) {}
      }
    },
    //还原样式
    setFileDivClass() {
      let files = document.getElementsByName("item");
      for (let index = 0; index < files.length; index++) {
        const file = files[index];
        var lastdiv = file.lastChild;
        lastdiv.classList.remove("ctrlClick");
      }
    },

    //鼠标左键按下方法
    onmousedownClick(event) {
      this.isRightClick = true;
      this.start_x = event.clientX;
      this.start_y = event.clientY;
      let that = this;
      //console.log(this.start_x,this.start_y)
      document.onmousemove = function (event) {
        let end_x = event.clientX;
        let end_y = event.clientY;
        let divElement = document.getElementById("rectangular");
        divElement.style.display = "block";
        divElement.className = "rectangular";
        //从左往右
        // ç”»çŸ©å½¢
        if (that.start_x < end_x) {
          divElement.style.width = end_x - that.start_x + "px";
          divElement.style.height =
            (that.start_y > end_y > 0
              ? that.start_y - end_y
              : end_y - that.start_y) + "px";
          divElement.style.left = that.start_x + "px";
          divElement.style.right = end_x + "px";
          //从下往上
          if (that.start_y > end_y) {
            divElement.style.top = end_y + "px";
            divElement.style.bottom = that.start_y + "px";
          } else {
            divElement.style.top = that.start_y + "px";
            divElement.style.bottom = end_y + "px";
          }
        } else {
          divElement.style.width = that.start_x - end_x + "px";
          divElement.style.height =
            (that.start_y > end_y > 0
              ? that.start_y - end_y
              : end_y - that.start_y) + "px";
          divElement.style.left = end_x + "px";
          divElement.style.right = that.start_x + "px";
          //从下往上
          if (that.start_y > end_y) {
            divElement.style.top = end_y + "px";
            divElement.style.bottom = that.start_y + "px";
          } else {
            divElement.style.top = that.start_y + "px";
            divElement.style.bottom = end_y + "px";
          }
        }
      };
      document.onmouseup = function () {
        //禁用鼠标移动时间
        document.onmousemove = function () {
          return false;
        };
        // ç§»åŠ¨æ ·å¼æ¸…空
        let divElement = document.getElementById("rectangular");
        divElement.style.display = "none";
      };
    },
    //鼠标左键抬起方法
    handMouseUp: function (event) {
      this.end_x = event.clientX;
      this.end_y = event.clientY;
      //核心内容，根据你的鼠标移动矩形区域来判断div是否在里面
      this.isRightClick = false;
      let files = document.getElementsByName("item");
      let a = 0;
      for (let i = 0; i < files.length; i++) {
        const file = files[i];
        let lastdiv = file.lastChild;
        let id = file.id;
        let el = lastdiv.getBoundingClientRect();
        let top = el.top; //上边界
        let left = el.left; //左边界
        let right = el.right; //右边界
        let bottom = el.bottom; //下边界
        //原地点击
        if (this.start_x == this.end_x) {
          if (
            !(
              this.end_x >= left &&
              this.end_x <= right &&
              this.end_y > top &&
              this.end_y < bottom
            )
          ) {
            a += 1;
          }
        } else {
          //从左往右
          if (this.start_x < this.end_x) {
            //从下到上
            if (this.start_y > this.end_y) {
              if (top < this.start_y && bottom > this.end_y) {
                if (left < this.end_x && right > this.start_x) {
                  if (this.selectIdList.indexOf(id) === -1) {
                    try {
                      var locationNum = id.substring(4);
                      var leftNum = id.substr(0, id.indexOf("-"));
                      if (locationNum < 24 && locationNum > 0 && leftNum > 0) {
                        this.selectIdList.push(id);
                        var lastdiv = file.lastChild;
                        lastdiv.className = lastdiv.className + " ctrlClick";
                      }
                    } catch (error) {
                    }
                  }
                }
              }
            }
            //从上到下
            else {
              if (top < this.end_y && bottom > this.start_y) {
                if (left < this.end_x && right > this.start_x) {
                  if (this.selectIdList.indexOf(id) === -1) {
                    try {
                      var locationNum = id.substring(4);
                      var leftNum = id.substr(0, id.indexOf("-"));
                      if (locationNum < 24 && locationNum > 0 && leftNum > 0) {
                        this.selectIdList.push(id);
                        var lastdiv = file.lastChild;
                        lastdiv.className = lastdiv.className + " ctrlClick";
                      }
                    } catch (error) {
                    }
                  }
                }
              }
            }
            //从右往左
          } else {
            //从下到上
            if (this.start_y > this.end_y) {
              if (top < this.start_y && bottom > this.end_y) {
                if (left < this.start_x && right > this.end_x) {
                  if (this.selectIdList.indexOf(id) === -1) {
                    try {
                      var locationNum = id.substring(4);
                      var leftNum = id.substr(0, id.indexOf("-"));
                      if (locationNum < 24 && locationNum > 0 && leftNum > 0) {
                        this.selectIdList.push(id);
                        var lastdiv = file.lastChild;
                        lastdiv.className = lastdiv.className + " ctrlClick";
                      }
                    } catch (error) {
                    }
                  }
                }
              }
            }
            //从上到下
            else {
              if (top < this.end_y && bottom > this.start_y) {
                if (left < this.start_x && right > this.end_x) {
                  if (this.selectIdList.indexOf(id) === -1) {
                    try {
                      var locationNum = id.substring(4);
                      var leftNum = id.substr(0, id.indexOf("-"));
                      if (locationNum < 24 && locationNum > 0 && leftNum > 0) {
                        this.selectIdList.push(id);
                        var lastdiv = file.lastChild;
                        lastdiv.className = lastdiv.className + " ctrlClick";
                      }
                    } catch (error) {
                    }
                  }
                }
              }
            }
          }
        }
      }
      //如果点击空白处
      if (a == files.length) {
        var obj = event.srcElement;
        if(obj.type!="submit"){
          this.selectIdList = [];
          this.setFileDivClass();
        }
        else{
          this.formdrawer.location=this.selectIdList.toString();
        }
      }
    },
    //货位绑定类型
    onSubmitLocation(){
    }
  },
  created() {
  },
};
</script>

<style>
.rectangular {
  background-color: rgba(235, 239, 243, 0.45);
  position: fixed;
  border: 1px solid rgba(24, 135, 243, 1);
  z-index: 20;
}
.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
} 
.demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }
    * {
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  font-family: "微软雅黑";
}

.el-row {
  margin-bottom: 10px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.model-backcolor {
  background: rgb(144, 238, 144);
}

.nav-header {
  margin-left: 60px;
  width: 500px;
  height: 50px;
  line-height: 50px;
  text-align: left;
  color: white;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 2px;
  padding-top: 50px;
  /*font-style:italic;斜体*/
}

.navbar-fixed-top {
  left: -17px !important;
  right: 17px !important;
  top: 6px !important;
}

#logo {
  width: 60px;
  height: 60px;
  margin-top: -8px;
}
</style>

<style lang="less" scoped>
.content {
  /* padding-top: 50px; */
  height: 100%;
  width: 100%;
  min-width: 100%;
}
.content-top {
  padding-top: 1.5%;
  height: 500px;
  width: 1650px;
  min-width: 1650px;
  margin-left: 3%;
  margin-bottom: 1%;
  /* float: left; */
}
.heartbeat-tb tr td {
  font-size: 8px;
  width: 70px;
  height: 18px;
  /*border:1px solid black;*/
}
/*报警心跳区域*/
/*日期*/
.demo {
  position: relative;
  width: 56%;
  margin-left: 10px;
}

.demo i {
  position: absolute;
  bottom: 10px;
  right: 24px;
  top: auto;
  cursor: pointer;
}
.ctrlClick {
  border: 1px solid rgba(243, 24, 24, 0.5);
}
.content-down {
  height: 10%;
  width: 1367px;
  min-width: 1367px;
  min-height: 340px;
  margin-left: 12%;
}

.box {
  width: 43px;
  height: 43px;
  margin-right: 4px;
  margin-bottom: 4px;
  padding: 0px;
  line-height: 25px;
  text-align: center;
}
.devices {
  border: 0px solid #ffffff;
  background-color: white;
}

.margin11 {
  margin-right: 758px;
}
.classmargin10_1 {
  margin-right: 468px;
}
.boxwidth {
  width: 54px;
}
.margin_right0 {
  margin-right: 565px;
}
.margin_right2 {
  margin-right: 584px;
}
.margin_right7 {
  margin-right: 40px;
}
.margin_left5 {
  float: right;
  margin-right: 52px;
  height: 56px;
  line-height: 56px;
}
.margin_left4 {
  margin-left: 587px;
}
.zhuzi1{
   width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    position: relative;
    top: -342px;
    left: 94px;
}
.zhuzi2{
   width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    position: relative;
    top: -97px;
    right: 3px;
}
.zhuzi3{
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    position: relative;
    top: -342px;
    left: 604px;
}
.zhuzi4{
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    position: relative;
    top: -97px;
    left: 506px;
}
.zhuzi5{
   width: 45px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    position: relative;
    top: -342px;
    left: 79px;
}
.zhuzi6{
    width: 45px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    position: relative;
    top: -97px;
    left: 26px;
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/redirect/401.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
<template>
  <div style="height:100%;">
    <redirect-error :text="text" :errorNumber="errorNumber"></redirect-error>
  </div>
</template>
  <script>
import RedirectError from "@/components/basic/redirectError.vue";
export default {
  components: {
    RedirectError
  },
  data() {
    return {
      errorNumber:'401',
      text: "抱歉，您没有权限进行此操作~"
    };
  }
};
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/redirect/404.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,21 @@
<template>
  <div style="height:100%;">
    <redirect-error :text="text" :errorNumber="errorNumber"></redirect-error>
  </div>
</template>
  <script>
import RedirectError from "@/components/basic/redirectError.vue";
export default {
  components: {
    RedirectError
  },
  data() {
    return {
      errorNumber:'404',
      text: "抱歉，页面好像去火星了~"
    };
  }
};
</script>



 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/system/Permission.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,318 @@
<template>
  <div class="t-tree">
    <div class="role-list">
      <role-tree :onChange="getUserRole"></role-tree>
    </div>
    <div class="action-container">
      <div class="block">
        <div class="head">
          <div class="text">
            <icon type="md-contact"></icon>角色权限分配
          </div>
          <div>
            <Button type="info" icon="md-checkmark-circle" @click="save">保存</Button>
          </div>
        </div>
        <!-- @check="leftCheckChange($event,true)"  -->
        <el-tree
          @check="leftCheckChange"
          :data="tree"
          node-key="id"
          default-expand-all
          show-checkbox
          :expand-on-click-node="false"
          ref="leftCheckBox"
        >
          <div class="action-group" slot-scope="{data }">
            <div class="action-text" :style="{width:((4-data.lv)*18+150)+'px'}">{{ data.text }}</div>
            <div class="action-item">
              <el-checkbox
                v-for="(item,index) in data.actions"
                :key="index"
                v-model="item.checked"
                @change="rightCheckChange(item.checked,data)"
              >{{item.text}}</el-checkbox>
            </div>
          </div>
        </el-tree>
      </div>
    </div>
  </div>
</template>
<script>
let id = 1000;

import RoleTree from "./Permission/RoleTree";
export default {
  components: {
    RoleTree,
  },
  data() {
    return {
      selectIndex: -1,
      checked: false,
      roles: [],
      data: [],
      tree: [],
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      this.http
        .post("/api/role/getCurrentTreePermission", {}, true)
        .then((result) => {
          if (!result.status) return this.$message.error(result.message);
          this.data.splice(0);
          this.roles.splice(0);
          this.data = result.data.tree;
          this.roles = result.data.roles;
          this.data.forEach((x) => {
            if (x.pid == 0) {
              x.lv = 1;
              x.children = [];
              this.tree.push(x);
              this.getTree(x.id, x);
            }
          });
        });
    },
    getUserRole(item, selectIndex) {
      //console.log(item);
      this.selectIndex = item.id;
      this.data.forEach((x) => {
        this.$refs.leftCheckBox.setChecked(x.id, false);
        x.actions.forEach((a) => {
          this.$set(a, "checked", false);
        });
      });
      this.http
        .post("/api/role/getUserTreePermission?roleId=" + item.id, {}, true)
        .then((result) => {
          if (!result.status) return this.$message.error(result.message);

          result.data.forEach((item) => {
            if (item.actions.length == 0) return;
            let sourceItem = this.data.find((f) => f.id == item.id);
            if (!sourceItem) return;
            this.$refs.leftCheckBox.setChecked(item.id, true);
            item.actions.forEach((actions) => {
              sourceItem.actions.forEach((soure) => {
                if (soure.value == actions.value) {
                  this.$set(soure, "checked", true);
                }
              });
            });
          });
        });
    },
    save() {
      if (this.selectIndex == -1) {
        return this.$message.error("请选择角色!");
      }
      let userPermissions = [];
      this.data.forEach((x) => {
        let checkedPermission = x.actions.filter((f) => {
          return f.checked;
        });
        if (checkedPermission.length > 0) {
          let actions = checkedPermission.map((m) => {
            return { text: m.text, value: m.value };
          });
          userPermissions.push({
            id: x.id,
            actions: actions,
          });
        }
      });
      //  let roleId = this.roles[this.selectIndex].id;
      this.http
        .post(
          "/api/role/SavePermission?roleId=" + this.selectIndex, //roleId,
          userPermissions,
          true
        )
        .then((result) => {
          this.$Message[result.status ? "info" : "error"](result.message);
        });
    },
    getTree(id, data) {
      this.data.forEach((x) => {
        if (x.pid == id) {
          x.lv = data.lv + 1;
          if (!data.children) data.children = [];
          data.children.push(x);
          this.getTree(x.id, x);
        }
      });
    },
    // leftCheckChange(node, selected) {
    //   console.log(node);
    //   console.log(selected);
    //   node.actions.forEach((x, index) => {
    //     this.$set(x, "checked", selected);
    //   });
    // },
    leftCheckChange(node, checkedNodes) {
      let checked =
        null == checkedNodes.checkedKeys.find((r) => r == node.id)
          ? false
          : true;
      if (checked) {
        //选中
        let checkNode = checkedNodes.checkedNodes;
        checkNode.forEach((element) => {
          element.actions.forEach((action) => {
            this.$set(action, "checked", checked);
          });
        });
        //子节点选中一个时，将父节点的查询也选中
        let parent = this.$refs.leftCheckBox.getNode(node.pid);
        if (null != parent) {
          parent.data.actions.forEach((action) => {
            this.$set(action, "checked", checked);
          });
        }
      } else {
        //取消当前节点
        node.actions.forEach((action) => {
          this.$set(action, "checked", checked);
        });
        //如果有子节点取消节点
        let child = node.children;
        if (null != child && child.length > 0) {
          child.forEach((element) => {
            element.actions.forEach((action) => {
              this.$set(action, "checked", checked);
            });
          });
        }
        //取消父节点的选中
        let parent = this.$refs.leftCheckBox.getNode(node.pid);
        if (null != parent) {
          if (null == parent.childNodes.find((r) => r.checked))
            parent.data.actions.forEach((action) => {
              this.$set(action, "checked", checked);
            });
        }
      }
      // console.log(checked);
      // console.log(node);
      // console.log(checkedNodes);
    },
    rightCheckChange(checked, node) {
      if (checked) {
        this.$refs.leftCheckBox.setChecked(node.id, checked);
        //一级菜单就将子节点都选中
        if (node.lv == 1) {
          let child = node.children;
          if (null != child && child.length > 0) {
            child.forEach((element) => {
              this.$refs.leftCheckBox.setChecked(element.id, checked);
              element.actions.forEach((action) => {
                this.$set(action, "checked", checked);
              });
            });
          }
        } else {
          //选中父节点的查询
          let parent = this.$refs.leftCheckBox.getNode(node.pid);
          if (null != parent) {
            parent.data.actions.forEach((action) => {
              this.$set(action, "checked", checked);
            });
          }
        }
      } else {
        if (node.lv == 1) {
          let child = node.children;
          if (null != child && child.length > 0) {
            child.forEach((element) => {
              this.$refs.leftCheckBox.setChecked(element.id, checked);
              element.actions.forEach((action) => {
                this.$set(action, "checked", checked);
              });
            });
          }
        } else {
          if (null == node.actions.find((r) => r.checked)) {
            this.$refs.leftCheckBox.setChecked(node.id, checked);
            let parent = this.$refs.leftCheckBox.getNode(node.pid);
            // console.log(null == parent.childNodes.find((r) => r.checked));
            // console.log(parent.childNodes.find((r) => r.checked));
            if (null != parent) {
              if (null == parent.childNodes.find((r) => r.checked))
                parent.data.actions.forEach((action) => {
                  this.$set(action, "checked", checked);
                });
            }
          }
        }
      }
    },
  },
};
</script>

<style scoped>
.t-tree {
  display: flex;
  /* padding: 100px; */
}
.action-group {
  width: 100%;
  display: flex;
}
.action-text {
  /* width: 200px; */
  margin-right: 10px;
}
.action-item {
  flex: 1;
}
.action-item > label {
  width: 70px;
  margin-left: 10px;
}
.action-container {
  margin-left: 10px;
  flex: 1;
}
.action-container .block {
  border-radius: 5px;
  border: 1px solid #eee;
  border-bottom: 0;
  border-radius: 5px;
}
.action-container .block > div:last-child {
  padding: 5px 15px;
}
.role-list {
  width: 180px;
  border: 1px solid #eee;
  border-bottom: 0;
}

.actived {
  color: #409efe !important;
  background-color: #f3f7f9;
}
.head {
  line-height: 40px;
  border-bottom: 1px solid #e2e2e2;
  width: 100%;
  display: inline-block;
  margin-bottom: 20px;
  padding: 0 25px;
}
.head .text {
  border-bottom: 2px solid #009688;
  float: left;
  font-size: 16px;
}
.head > div:last-child {
  float: right;
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/system/Permission/RoleTree.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,139 @@
<template>
  <div class="com-el-tree">
    <div class="role-list">
      <icon type="ios-people"></icon>角色列表
    </div>
    <el-scrollbar style="height:100%;  width: 180px;" class="el-role-tree">
      <el-tree
        :data="tree"
        @node-click="nodeClick"
        node-key="id"
        :default-expanded-keys="openKeys"
        :expand-on-click-node="false"
        style="padding:5px 0;margin-right: 2px;"
      >
        <div class="action-group" slot-scope="{  data }">
          <div
            class="action-text"
            :class="{actived:data.id==selectId,'node-text':data.parentId!==0}"
            :style="{width:((4-data.lv)*18+150)+'px'}"
          >
            <Icon
              v-if="data.parentId!==0"
              :type="data.id==selectId?'ios-paper':'ios-paper-outline'"
            />
            {{ data.roleName }}
          </div>
        </div>
      </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  props: {
    // roles: {
    //   type: Object,
    //   default: () => {
    //     return [];
    //   }
    // },
    onChange: {
      type: Function,
      default: (treeId) => {},
    },
  },
  data() {
    return {
      selectId: -1,
      checked: false,
      openKeys: [],
      data: [],
      tree: [],
    };
  },
  created() {
    this.load();
  },
  methods: {
    load() {
      this.http.post("/api/role/getUserChildRoles", {}, true).then((result) => {
        if (!result.status) return this.$message.error(result.message);
        this.data.splice(0);
        this.data = result.data;
        this.data.forEach((x) => {
          if (x.parentId == 0) {
            x.lv = 1;
            x.children = [];
            this.tree.push(x);
            this.getTree(x.id, x);
          }
        });
        this.openKeys.push(this.tree[0].id);
        this.selectId = this.openKeys[0];
        //默认加载第一个树形菜单下面的数据

        //this.onChange(this.selectId);
      });
    },
    getTree(id, data) {
      this.data.forEach((x) => {
        if (x.parentId == id) {
          x.lv = data.lv + 1;
          if (!data.children) data.children = [];
          data.children.push(x);
          this.getTree(x.id, x);
        }
      });
    },
    nodeClick(node, selected) {
      //  console.log(node);
      this.selectId = node.id;
      //缓存当前选中的节点
      //  this.$store.getters.data().treeDemo1.treeId = node.id;
      this.onChange(node);
    },
  },
};
</script>
<style lang="less" scoped>
.com-el-tree {
  //2020.06.03增加左侧tree固定宽度
  width: 180px;
  display: inline-block;
  // width: 210px;
  .el-role-tree {
    position: absolute;
    padding: 5px 0px;
    top: 45px;
    bottom: 0;
    // border-right: 1px solid #eee;
  }
  .actived {
    color: #5884ff;
    font-size: 15px;
  }
  .action-text {
    font-size: 14px;
  }
}
.role-list {
  color: white;
  line-height: 40px;
  background: #1a89ff;
  padding: 0 13px;
  font-size: 16px;
  position: absolute;
  top: 2px;
  width: 179px;
}
</style>
<style scoped>
.com-el-tree >>> .el-tree-node {
  padding: 3px 0;
}
.com-el-tree >>> .el-scrollbar .el-scrollbar__thumb {
  width: 0 !important;
}
</style>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/system/Sys_Log.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,212 @@
<template>
  <div>
    <view-grid
      :columns="columns"
      :detail="detail"
      :editFormFileds="editFormFileds"
      :editFormOptions="editFormOptions"
      :searchFormFileds="searchFormFileds"
      :searchFormOptions="searchFormOptions"
      :table="table"
      :extend="extend"
    ></view-grid>
  </div>
</template>

<script>
import extend from "@/extension/system/Sys_Log.js";
import ViewGrid from "@/components/basic/ViewGrid.vue";
var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: "Id",
        footer: "Foots",
        cnName: "系统日志",
        name: "Sys_Log",
        url: "/Sys_Log/",
        sortName: "Id",
      },
      extend: extend,
      editFormFileds: {},
      editFormOptions: [],
      searchFormFileds: {
        BeginDate: "",
        Url: "",
        LogType: [],
        Success: "",
        UserIP: "",
        ServiceIP: "",
        Role_Id: "",
      },
      searchFormOptions: [
        [
          { title: "请求地址", field: "Url", type: "text" },
          { title: "用户IP", field: "UserIP", type: "text" },
          { title: "服务器IP", field: "ServiceIP", type: "text" },
        ],
        [
          { title: "开始时间", field: "BeginDate", type: "datetime" },
          {
            dataKey: "restatus",
            title: "响应状态",
            field: "Success",
            type: "dropList",
          },
          {
            dataKey: "roles",
            title: "角色ID",
            field: "Role_Id",
            type: "select",
          },
        ],
        [
          {
            dataKey: "log",
            title: "日志类型",
            field: "LogType",
            colSize: 12,
            type: "checkbox",
          },
        ],
      ],
      columns: [
        {
          field: "Id",
          title: "Id",
          type: "int",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "BeginDate",
          title: "开始时间",
          type: "datetime",
          width: 140,
          align: "left",
          sortable: true,
        },
        {
          field: "UserName",
          title: "用户名称",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "Url",
          title: "请求地址",
          type: "string",
          width: 110,
          align: "left",
        },
        {
          field: "LogType",
          title: "日志类型",
          type: "string",
          bind: { key: "log", data: [] },
          width: 80,
          align: "left",
        },
        {
          field: "Success",
          title: "响应状态",
          type: "int",
          bind: { key: "restatus", data: [] },
          width: 80,
          align: "left",
        },
        {
          field: "ElapsedTime",
          title: "时长",
          type: "int",
          width: 60,
          align: "left",
        },
        {
          field: "RequestParameter",
          title: "请求参数",
          type: "string",
          width: 70,
          align: "left",
        },
        {
          field: "ResponseParameter",
          title: "响应参数",
          type: "string",
          width: 70,
          align: "left",
        },
        {
          field: "ExceptionInfo",
          title: "异常信息",
          type: "string",
          width: 70,
          align: "left",
        },
        {
          field: "UserIP",
          title: "用户IP",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "ServiceIP",
          title: "服务器IP",
          type: "string",
          width: 90,
          hidden: true,
          align: "left",
        },
        {
          field: "BrowserType",
          title: "浏览器类型",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "User_Id",
          title: "用户ID",
          type: "int",
          width: 90,
          hidden: true,
          align: "left",
        },
        {
          field: "Role_Id",
          title: "角色ID",
          type: "int",
          bind: { key: "roles", data: [] },
          width: 90,
          hidden: true,
          align: "left",
        },
        {
          field: "EndDate",
          title: "结束时间",
          type: "datetime",
          width: 150,
          hidden: true,
          align: "left",
          sortable: true,
        },
      ],
      detail: {
        cnName: "#detailCnName",
        columns: [],
        sortName: "",
        key: "",
      },
    };
  },
};
export default vueParam;
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/system/Sys_Role.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,204 @@
<template>
  <div>
    <view-grid
      :columns="columns"
      :detail="detail"
      :editFormFileds="editFormFileds"
      :editFormOptions="editFormOptions"
      :searchFormFileds="searchFormFileds"
      :searchFormOptions="searchFormOptions"
      :table="table"
      :extend="extend"
    ></view-grid>
  </div>
</template>

<script>
import extend from "@/extension/system/Sys_Role.js";
import ViewGrid from "@/components/basic/ViewGrid.vue";
var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: "Role_Id",
        footer: "Foots",
        cnName: "角色管理",
        name: "Sys_Role",
        url: "/Sys_Role/",
        sortName: "Role_Id",
      },
      extend: extend,
      editFormFileds: {
        ParentId: "",
        RoleName: "",
        DeptName: "",
        Enable: "",
        Creator: "",
        CreateDate: "",
        Modifier: "",
        ModifyDate: "",
      },
      editFormOptions: [
        [
          {
            title: "父级ID",
            required: true,
            field: "ParentId",
            type: "number",
          },
          { title: "角色名称", required: true, field: "RoleName" },
        ],
        [
          { title: "部门名称", field: "DeptName" },
          {
            dataKey: "enable",
            title: "是否启用",
            field: "Enable",
            type: "switch",
          },
        ],
        [
          { title: "创建人", field: "Creator", disabled: true },
          {
            title: "创建时间",
            field: "CreateDate",
            disabled: true,
            type: "datetime",
          },
        ],
        [
          { title: "修改人", field: "Modifier", disabled: true },
          { title: "修改时间", field: "ModifyDate", disabled: true },
        ],
      ],
      searchFormFileds: {
        RoleName: "",
        DeptName: "",
        Enable: "",
        CreateDate: "",
        ModifyDate: "",
      },
      searchFormOptions: [
        [
          { title: "角色名称", field: "RoleName", type: "text" },
          { title: "部门名称", field: "DeptName", type: "text" },
          {
            dataKey: "enable",
            title: "是否启用",
            field: "Enable",
            type: "select",
          },
        ],
        [
          { title: "创建时间", field: "CreateDate", type: "datetime" },
          { title: "修改时间", field: "ModifyDate", type: "datetime" },
        ],
      ],
      columns: [
        {
          field: "Role_Id",
          title: "角色ID",
          type: "int",
          width: 70,
          readonly: true,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "ParentId",
          title: "父级ID",
          type: "int",
          width: 70,
          require: true,
          align: "left",
        },
        {
          field: "RoleName",
          title: "角色名称",
          type: "string",
          link: true,
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "Dept_Id",
          title: "部门ID",
          type: "int",
          width: 90,
          hidden: true,
          align: "left",
        },
        {
          field: "DeptName",
          title: "部门名称",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "Enable",
          title: "是否启用",
          type: "byte",
          bind: { key: "enable", data: [] },
          width: 90,
          align: "left",
        },
        {
          field: "OrderNo",
          title: "排序",
          type: "int",
          width: 90,
          hidden: true,
          align: "left",
        },
        {
          field: "Creator",
          title: "创建人",
          type: "string",
          width: 130,
          readonly: true,
          align: "left",
        },
        {
          field: "CreateDate",
          title: "创建时间",
          type: "datetime",
          width: 90,
          readonly: true,
          align: "left",
          sortable: true,
        },
        {
          field: "Modifier",
          title: "修改人",
          type: "string",
          width: 130,
          readonly: true,
          align: "left",
        },
        {
          field: "ModifyDate",
          title: "修改时间",
          type: "datetime",
          width: 90,
          readonly: true,
          align: "left",
          sortable: true,
        },
      ],
      detail: {
        cnName: "#detailCnName",
        columns: [],
        sortName: "",
        key: "",
      },
    };
  },
};
export default vueParam;
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/system/Sys_User.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,418 @@
<template>
  <div>
    <view-grid
      :columns="columns"
      :detail="detail"
      :editFormFileds="editFormFileds"
      :editFormOptions="editFormOptions"
      :searchFormFileds="searchFormFileds"
      :searchFormOptions="searchFormOptions"
      :table="table"
      :extend="extend"
    ></view-grid>
  </div>
</template>

<script>
import extend from "@/extension/system/Sys_User.js";
import ViewGrid from "@/components/basic/ViewGrid.vue";
var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: "User_Id",
        footer: "Foots",
        cnName: "用户管理",
        name: "Sys_User",
        url: "/Sys_User/",
        sortName: "User_Id",
      },
      extend: extend,
      editFormFileds: {
        UserName: "",
        UserTrueName: "",
        Role_Id: "",
        IsRegregisterPhone: "",
        Gender: "",
        Enable: "",
        CreateDate: "",
        Creator: "",
        Remark: "",
        HeadImageUrl: "",
        PhoneNo: "",
      },
      editFormOptions: [
        [
          { title: "帐号", required: true, field: "UserName", disabled: true },
          {
            title: "真实姓名",
            required: true,
            field: "UserTrueName",
            type: "text",
          },
        ],
        [
          {
            dataKey: "roles",
            title: "角色",
            required: true,
            field: "Role_Id",
            type: "drop",
          },
          { dataKey: "gender", title: "性别", field: "Gender", type: "drop" },
          // {
          //   dataKey: "isphone",
          //   title: "手机用户",
          //   required: true,
          //   field: "IsRegregisterPhone",
          //   type: "drop",
          // },
        ],
        // [

        // ],
        [
          {
            dataKey: "enable",
            title: "是否可用",
            required: true,
            field: "Enable",
            type: "drop",
          },
          {
            title: "手机号",
            required: false,
            field: "PhoneNo",
            type: "text",
          },
        ],
        [
          { title: "注册时间", field: "CreateDate", disabled: true },
          { title: "创建人", field: "Creator", disabled: true },
        ],
        [{ title: "备注", field: "Remark", colSize: 12, type: "textarea" }],
        [{ title: "头像", field: "HeadImageUrl", type: "img" }],
      ],
      searchFormFileds: {
        UserName: "",
        Gender: "",
        DeptName: "",
        Role_Id: "",
        //  Token: "",
        //  AppType: "",
        UserTrueName: "",
        CreateDate: "",
        // IsRegregisterPhone: "",
        PhoneNo: "",
        Enable: "",
        LastLoginDate: "",
        Address: "",
        //  Email: "",
      },
      searchFormOptions: [
        [
          { title: "帐号", field: "UserName" },
          { dataKey: "gender", title: "性别", field: "Gender", type: "drop" },
          { title: "真实姓名", field: "UserTrueName" },
        ],
        [
          { title: "部门", field: "DeptName" },
          { dataKey: "roles", title: "角色", field: "Role_Id", type: "drop" },
          { title: "手机号", field: "PhoneNo" },
        ],
        [
          {
            dataKey: "enable",
            title: "是否可用",
            field: "Enable",
            type: "drop",
          },
          { title: "地址", field: "Address" },
          //{ title: "Email", field: "Email" },
        ],
        [
          { title: "注册时间", field: "CreateDate", type: "datetime" },
          { title: "最后登录时间", field: "LastLoginDate", type: "datetime" },
        ],
      ],
      columns: [
        {
          field: "UserName",
          title: "帐号",
          type: "string",
          link: true,
          width: 100,
          readonly: true,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "User_Id",
          title: "User_Id",
          type: "int",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "Gender",
          title: "性别",
          type: "int",
          bind: { key: "gender", data: [] },
          width: 50,
          align: "left",
        },
        {
          field: "HeadImageUrl",
          title: "头像",
          type: "img",
          width: 80,
          align: "left",
        },
        {
          field: "Dept_Id",
          title: "Dept_Id",
          type: "int",
          width: 90,
          hidden: true,
          align: "left",
        },
        {
          field: "DeptName",
          title: "部门",
          type: "string",
          width: 150,
          hidden: true,
          align: "left",
        },
        {
          field: "Role_Id",
          title: "角色",
          type: "int",
          bind: { key: "roles", data: [] },
          width: 100,
          require: true,
          align: "left",
        },
        {
          field: "RoleName",
          title: "RoleName",
          type: "string",
          width: 90,
          hidden: true,
          require: true,
          align: "left",
        },
        {
          field: "Token",
          title: "Token",
          type: "string",
          width: 180,
          hidden: true,
          align: "left",
        },
        // {
        //   field: "AppType",
        //   title: "登录设备类型",
        //   type: "int",
        //   bind: { key: "ut", data: [] },
        //   width: 150,
        //   hidden: true,
        //   align: "left",
        // },
        {
          field: "UserTrueName",
          title: "真实姓名",
          type: "string",
          width: 100,
          require: true,
          align: "left",
        },
        {
          field: "CreateDate",
          title: "注册时间",
          type: "datetime",
          width: 150,
          readonly: true,
          align: "left",
          sortable: true,
        },
        // {
        //   field: "IsRegregisterPhone",
        //   title: "手机用户",
        //   type: "int",
        //   bind: { key: "isphone", data: [] },
        //   width: 120,
        //   hidden: true,
        //   require: true,
        //   align: "left",
        // },
        {
          field: "PhoneNo",
          title: "手机号",
          type: "string",
          width: 150,
          hidden: true,
          align: "left",
        },
        {
          field: "Tel",
          title: "Tel",
          type: "string",
          width: 90,
          hidden: true,
          align: "left",
        },
        {
          field: "CreateID",
          title: "CreateID",
          type: "int",
          width: 90,
          hidden: true,
          align: "left",
        },
        {
          field: "Creator",
          title: "创建人",
          type: "string",
          width: 70,
          readonly: true,
          align: "left",
        },
        {
          field: "Enable",
          title: "是否可用",
          type: "byte",
          bind: { key: "enable", data: [] },
          width: 70,
          require: true,
          align: "left",
        },
        {
          field: "ModifyID",
          title: "ModifyID",
          type: "int",
          width: 90,
          hidden: true,
          align: "left",
        },
        {
          field: "Modifier",
          title: "修改人",
          type: "string",
          width: 130,
          hidden: true,
          readonly: true,
          align: "left",
        },
        {
          field: "ModifyDate",
          title: "修改时间",
          type: "datetime",
          width: 90,
          readonly: true,
          align: "left",
          sortable: true,
        },
        // {
        //   field: "AuditStatus",
        //   title: "审核状态",
        //   type: "int",
        //   bind: { key: "audit", data: [] },
        //   width: 90,
        //   hidden: true,
        //   align: "left",
        // },
        // {
        //   field: "Auditor",
        //   title: "审核人",
        //   type: "string",
        //   width: 90,
        //   hidden: true,
        //   align: "left",
        // },
        // {
        //   field: "AuditDate",
        //   title: "审核时间",
        //   type: "datetime",
        //   width: 150,
        //   hidden: true,
        //   align: "left",
        //   sortable: true,
        // },
        // {
        //   field: "LastLoginDate",
        //   title: "最后登录时间",
        //   type: "datetime",
        //   width: 150,
        //   hidden: true,
        //   align: "left",
        //   sortable: true,
        // },
        // {
        //   field: "LastModifyPwdDate",
        //   title: "最后密码修改时间",
        //   type: "datetime",
        //   width: 150,
        //   hidden: true,
        //   align: "left",
        //   sortable: true,
        // },
        {
          field: "Address",
          title: "地址",
          type: "string",
          width: 190,
          hidden: true,
          align: "left",
        },
        {
          field: "Mobile",
          title: "电话",
          type: "string",
          width: 140,
          hidden: true,
          align: "left",
        },
        {
          field: "Email",
          title: "Email",
          type: "string",
          width: 140,
          hidden: true,
          align: "left",
        },
        {
          field: "Remark",
          title: "备注",
          type: "string",
          width: 180,
          hidden: true,
          align: "left",
        },
        {
          field: "OrderNo",
          title: "排序号",
          type: "int",
          width: 90,
          hidden: true,
          align: "left",
        },
      ],
      detail: {
        cnName: "#detailCnName",
        columns: [],
        sortName: "",
        key: "",
      },
    };
  },
};
export default vueParam;
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/system/UserInfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,325 @@
<template>
  <div class="user-info">
    <div class="left">
      <div>
        <img class="header-img" :src="userInfo.Img" :onerror="errorImg" />
        <div class="text">
          <p class="name">
            <span>{{userInfo.UserName}}</span>
          </p>
          <p class="date">
            <span>注册日期：{{userInfo.CreateDate}}</span>
          </p>
          <!-- <p>
            <Button style="padding: 3px 16px;" type="info" size="small" ghost>修改头像</Button>
          </p>-->
        </div>
      </div>
      <div style="padding: 17px;">
        <Button type="error" @click="modifyPwd" size="large" icon="md-lock" long>修改密码</Button>
      </div>
    </div>
    <div class="right">
      <vol-form
        ref="form"
        :load-key="true"
        :width="500"
        :formRules="editFormOptions"
        :formFileds="editFormFileds"
      >
        <div slot="header">
          <Divider>
            <span class="ivu-icon ios-alert-outline">个人信息</span>
          </Divider>
        </div>
        <div slot="footer">
          <Button
            style="margin-top: 2px;"
            type="info"
            size="large"
            icon="md-checkmark-circle"
            long
            @click="modifyInfo"
          >保存</Button>
        </div>
      </vol-form>
    </div>
    <VolBox
      :width="500"
      :height="260"
      :footer="false"
      :model.sync="modifyOptions.model"
      title="修改密码"
    >
      <div style="padding:10px 20px;">
        <VolForm ref="pwd" :formRules="modifyOptions.data" :formFileds="modifyOptions.fileds"></VolForm>
        <Button type="info" size="large" icon="md-checkmark-circle" long @click="savePwd">保存</Button>
      </div>
      <div slot="footer">
        <span></span>
      </div>
    </VolBox>
  </div>
</template>
<script>
import VolForm from "@/components/basic/VolForm.vue";
export default {
  components: {
    VolForm: VolForm,
    VolBox: () => import("@/components/basic/VolBox.vue"),
  },
  methods: {
    modifyPwd() {
      this.$refs.pwd.reset();
      this.modifyOptions.model = true;
    },
    savePwd() {
      if (!this.$refs.pwd.validate()) return;
      if (
        this.modifyOptions.fileds.newPwd != this.modifyOptions.fileds.newPwd1
      ) {
        return this.$message.error("两次密码不一致");
      }
      let url =
        "/api/user/modifyPwd?oldPwd=" +
        this.modifyOptions.fileds.oldPwd +
        "&newPwd=" +
        this.modifyOptions.fileds.newPwd;
      this.http.post(url, {}, true).then((x) => {
        if (!x.status) {
          return this.$message.error(x.message);
        }
        this.modifyOptions.model = false;
        this.$Message.success(x.message);
        this.$refs.pwd.reset();
      });
    },
    modifyInfo() {
      let url = "/api/Sys_User/update";
      //将key首字母转成大写
      //let result = this.editFormFileds;
      // for (var key in result) {
      //   result[key.substring(0, 1).toUpperCase() + key.substring(1)] =
      //     result[key];
      //   delete result[key];
      // }
      //console.log(result);
      let formData = {
        mainData: this.editFormFileds,
        detailData: null,
        delKeys: null,
      };
      this.http.post(url, formData, true).then((x) => {
        if (!x.status) {
          return this.$message.error(x.message);
        }
        this.$Message.success(x.message);
      });
    },
  },
  created() {
    this.http.post("/api/user/getCurrentUserInfo", {}, true).then((x) => {
      if (!x.status) {
        return this.$message(x.message);
      }
      x.data.createDate = (x.data.createDate || "").replace("T", " ");
      x.data.gender = x.data.gender + "";
      //this.$refs.form.reset(x.data);
      this.editFormFileds.UserTrueName = x.data.userTrueName;
      this.editFormFileds.PhoneNo = x.data.phoneNo;
      this.editFormFileds.User_Id = x.data.user_Id;
      this.editFormFileds.Role_Id = x.data.role_Id;
      this.editFormFileds.Address = x.data.address;
      this.editFormFileds.UserName = x.data.userName;
      this.editFormFileds.RoleName = x.data.roleName;

      this.userInfo.Img = this.base.getImgSrc(
        x.data.headImageUrl,
        this.http.ipAddress
      );
      this.userInfo.CreateDate = x.data.createDate;
      this.userInfo.UserName = x.data.userTrueName;
      this.userInfo.PhoneNo = x.data.phoneNo;
      this.userInfo.User_Id = x.data.user_Id;
      this.userInfo.Role_Id = x.data.role_Id;
      // this.editFormFileds = x.data;
    });
  },
  data() {
    return {
      url: "/api/App_Appointment/Upload",
      errorImg: 'this.src="' + require("@/assets/imgs/error-img.png") + '"',
      modifyOptions: {
        model: false,
        fileds: { oldPwd: "", newPwd: "", newPwd1: "" },
        data: [
          [
            {
              columnType: "string",
              required: true,
              title: "旧密码",
              field: "oldPwd",
            },
          ],
          [
            {
              type: "password",
              required: true,
              title: "新密码",
              field: "newPwd",
            },
          ],
          [
            {
              type: "password",
              required: true,
              title: "确认密码",
              field: "newPwd1",
            },
          ],
        ],
      },
      binging: [{}],
      userInfo: {
        Img: "",
        CreateDate: "--",
        UserName: "--",
        Email: "",
        PhoneNo: "",
        User_Id: "",
        Role_Id: "",
      },
      editFormFileds: {
        User_Id: "",
        Role_Id: "",
        RoleName: "",
        UserName: "",
        UserTrueName: "",
        PhoneNo: "",
        Address: "",
      },
      editFormOptions: [
        [
          {
            columnType: "string",
            title: "用户名",
            field: "UserName",
            disabled: true,
            type: "text",
          },
        ],
        [
          {
            columnType: "string",
            title: "角色",
            field: "RoleName",
            disabled: true,
            type: "text",
          },
        ],
        [
          {
            columnType: "string",
            title: "真实姓名",
            field: "UserTrueName",
            disabled: true,
            type: "text",
          },
        ],
        [
          {
            columnType: "string",
            title: "手机号码",
            field: "PhoneNo",
            type: "text",
          },
        ],
        [
          {
            columnType: "string",
            title: "地址",
            field: "Address",
            type: "text",
          },
        ],
      ],
    };
  },
};
</script>
<style scoped>
.binding-group {
  width: 100%;
  padding-bottom: 20px;
}
.binding-group >>> .ivu-cell-link {
  text-align: left;
}
.binding-group >>> .ivu-card-body {
  padding: 0 16px;
}
.binding-group >>> .ivu-cell-title {
  line-height: 24px;
  font-size: 12px;
}
</style>

<style lang="less" scoped>
img[src=""],
img:not([src]) {
  opacity: 0;
}
.user-info {
  box-shadow: rgb(214, 214, 214) 0px 4px 21px;
  position: absolute;
  transform: translateY(-40%);
  top: 40%;
  position: relative;
  margin: 0 auto;
  left: 0;
  width: 895px;
  right: 0;
  text-align: center;
  padding: 0px;
  //display: flex;
  .text {
    padding: 5px;
    .name {
      font-weight: bolder;
      font-size: 15px;
      font-weight: 900;
    }
    > p {
      padding-top: 5px;
    }
  }
  .header-img {
    height: 150px;
    width: 150px;
    border-radius: 50%;
    margin-right: 0px;
    top: 4px;
    position: relative;
    border: 3px solid #dfdfdf;
  }
  > div {
    float: left;
    // height: 480px;
    padding-top: 10px;
  }
  .left {
    width: 320px;
    border-right: 1px solid #eee;
    // box-shadow: #d6d6d6 7px 4px 20px;
    // flex: 1;
  }
  .right {
    padding-left: 30px;
    width: 570px;
    // background: #fefefe;
    // flex: 3;
  }
}
</style>



 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/taskinfo/dt_rgvtaskinfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,199 @@
<!--
*Author：jxx
 *Contact：283591387@qq.com
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/order/dt_rgvtaskinfo.js此处编写
 -->
<template>
  <div>
    <view-grid
      ref="grid"
      :columns="columns"
      :detail="detail"
      :editFormFields="editFormFields"
      :editFormFileds="editFormFields"
      :editFormOptions="editFormOptions"
      :searchFormFields="searchFormFields"
      :searchFormFileds="searchFormFields"
      :searchFormOptions="searchFormOptions"
      :table="table"
      :extend="extend"
    >
    </view-grid>
  </div>
</template>

<script>
import extend from "@/extension/taskinfo/dt_rgvtaskinfo.js";
import ViewGrid from "@/components/basic/ViewGrid.vue";
var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: "rgvtask_id",
        footer: "Foots",
        cnName: "RGV任务队列信息",
        name: "dt_rgvtaskinfo",
        url: "/dt_rgvtaskinfo/",
        sortName: "rgvtask_createtime",
      },
      extend: extend,
      editFormFields: {},
      editFormOptions: [],
      searchFormFields: {
        rgvtask_tasknumber: "",
        rgvtask_type: "",
        rgvtask_state: "",
        rgvtask_rgver: "",
        rgvtask_barcode: "",
      },
      searchFormOptions: [
        [
          { title: "托盘号", field: "rgvtask_barcode", type: "like" },
          { title: "任务类型", field: "rgvtask_type", type: "like" },
          { title: "任务状态", field: "rgvtask_state", type: "like" },
        ],
        [
          { title: "RGV", field: "rgvtask_rgver", type: "like" },
          { title: "任务号", field: "rgvtask_tasknumber", type: "like" },
        ],
      ],
      columns: [
        {
          field: "rgvtask_id",
          title: "主键",
          type: "guid",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_areid",
          title: "库区id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "rgvtask_tasknumber",
          title: "任务号",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_worktype",
          title: "工作类型",
          type: "int",
          width: 90,
          align: "left",
        },
        {
          field: "rgvtask_type",
          title: "任务类型",
          type: "string",
          width: 120,
          align: "left",
          bind: { key: "task_type", data: [] },
        },
        {
          field: "rgvtask_state",
          title: "任务状态",
          type: "string",
          width: 120,
          require: true,
          align: "left",
           bind: { key: "task_state", data: [] },
        },
        {
          field: "rgvtask_rgv",
          title: "RGV编号",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_barcode",
          title: "托盘号",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "rgvtask_sourceaddress",
          title: "源地址",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_targetaddress",
          title: "目标地址",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_dispatchertime",
          title: "调度开始时间",
          type: "datetime",
          width: 150,
          align: "left",
          sortable: true,
        },
        {
          field: "rgvtask_requestkey",
          title: "来源主键",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true
        },
        {
          field: "rgvtask_grade",
          title: "执行等级",
          type: "int",
          width: 90,
          align: "left",
        },
        {
          field: "rgvtask_creator",
          title: "创建者",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_createtime",
          title: "创建时间",
          type: "datetime",
          width: 150,
          require: true,
          align: "left",
          sortable: true,
        },
      ],
      detail: {
        cnName: "#detailCnName",
        columns: [],
        sortName: "",
        key: "",
      },
    };
  },
};
export default vueParam;
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/taskinfo/dt_rgvtaskinfo_hty.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,215 @@
<!--
*Author：jxx
 *Contact：283591387@qq.com
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/order/dt_rgvtaskinfo_hty.js此处编写
 -->
<template>
  <div>
    <view-grid
      ref="grid"
      :columns="columns"
      :detail="detail"
      :editFormFields="editFormFields"
      :editFormFileds="editFormFields"
      :editFormOptions="editFormOptions"
      :searchFormFields="searchFormFields"
      :searchFormFileds="searchFormFields"
      :searchFormOptions="searchFormOptions"
      :table="table"
      :extend="extend"
    >
    </view-grid>
  </div>
</template>

<script>
import extend from "@/extension/taskinfo/dt_rgvtaskinfo_hty.js";
import ViewGrid from "@/components/basic/ViewGrid.vue";
var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: "rgvtask_id",
        footer: "Foots",
        cnName: "RGV任务队列信息历史",
        name: "dt_rgvtaskinfo_hty",
        url: "/dt_rgvtaskinfo_hty/",
        sortName: "rgvtask_createtime",
      },
      extend: extend,
      editFormFields: {},
      editFormOptions: [],
      searchFormFields: { rgvtask_tasknumber: "", rgvtask_rgver: "" },
      searchFormOptions: [
        [
          { title: "RGV", field: "rgvtask_rgver", type: "like" },
          { title: "任务号", field: "rgvtask_tasknumber", type: "like" },
        ],
      ],
      columns: [
        {
          field: "rgvtask_id",
          title: "主键",
          type: "guid",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_areid",
          title: "库区id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          sortable: true,
          hidden: true,
        },
        {
          field: "rgvtask_tasknumber",
          title: "任务号",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_worktype",
          title: "工作类型",
          type: "int",
          width: 90,
          align: "left",
          hidden: true,
        },
        {
          field: "rgvtask_type",
          title: "任务类型",
          type: "string",
          width: 120,
          align: "left",
          bind: { key: "task_type", data: [] },
        },
        {
          field: "rgvtask_state",
          title: "任务状态",
          type: "string",
          width: 120,
          require: true,
          align: "left",
           bind: { key: "task_state", data: [] },
        },
        {
          field: "rgvtask_rgv",
          title: "RGV编号",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_barcode",
          title: "托盘号",
          type: "string",
          width: 90,
          align: "left",
        },
        {
          field: "rgvtask_sourceaddress",
          title: "源地址",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_targetaddress",
          title: "目标地址",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_dispatchertime",
          title: "调度开始时间",
          type: "datetime",
          width: 150,
          align: "left",
          sortable: true,
        },
        {
          field: "rgvtask_requestkey",
          title: "来源主键",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true
        },
        {
          field: "rgvtask_grade",
          title: "执行等级",
          type: "int",
          width: 90,
          align: "left",
        },
        {
          field: "rgvtask_creator",
          title: "创建者",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_createtime",
          title: "创建时间",
          type: "datetime",
          width: 150,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "rgvtask_operatetype",
          title: "操作类型",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_compeletor",
          title: "操作者",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "rgvtask_sourceid",
          title: "原表头id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true
        },
      ],
      detail: {
        cnName: "#detailCnName",
        columns: [],
        sortName: "",
        key: "",
      },
    };
  },
};
export default vueParam;
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/taskinfo/dt_stacktaskinfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,268 @@
<!--
*Author：jxx
 *Contact：283591387@qq.com
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/order/dt_stacktaskinfo.js此处编写
 -->
<template>
  <div>
    <view-grid
      ref="grid"
      :columns="columns"
      :detail="detail"
      :editFormFields="editFormFields"
      :editFormFileds="editFormFields"
      :editFormOptions="editFormOptions"
      :searchFormFields="searchFormFields"
      :searchFormFileds="searchFormFields"
      :searchFormOptions="searchFormOptions"
      :table="table"
      :extend="extend"
    >
    </view-grid>
  </div>
</template>

<script>
import extend from "@/extension/taskinfo/dt_stacktaskinfo.js";
import ViewGrid from "@/components/basic/ViewGrid.vue";
var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: "stacktask_id",
        footer: "Foots",
        cnName: "堆垛机任务队列信息",
        name: "dt_stacktaskinfo",
        url: "/dt_stacktaskinfo/",
        sortName: "stacktask_createtime",
      },
      extend: extend,
      editFormFields: {},
      editFormOptions: [],
      searchFormFields: {
        stacktask_tasknumber: "",
        stacktask_type: "",
        stacktask_state: "",
        stacktask_stacker: "",
        stacktask_barcode: "",
      },
      searchFormOptions: [
        [
          { title: "托盘号", field: "stacktask_barcode", type: "like" },
          { title: "任务类型", field: "stacktask_type", type: "like" },
          { title: "任务状态", field: "stacktask_state", type: "like" },
        ],
        [
          { title: "堆垛机", field: "stacktask_stacker", type: "like" },
          { title: "任务号", field: "stacktask_tasknumber", type: "like" },
        ],
      ],
      columns: [
        {
          field: "stacktask_id",
          title: "主键",
          type: "guid",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_areid",
          title: "库区id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          sortable: true,
          hidden: true
        },
        {
          field: "stacktask_tasknumber",
          title: "任务号",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_worktype",
          title: "工作类型",
          type: "int",
          width: 90,
          align: "left",
          hidden: true
        },
        {
          field: "stacktask_type",
          title: "任务类型",
          type: "string",
          width: 120,
          align: "left",
          bind: { key: "task_type", data: [] },
        },
        {
          field: "stacktask_state",
          title: "任务状态",
          type: "string",
          width: 120,
          require: true,
          align: "left",
           bind: { key: "task_state", data: [] },
        },
        {
          field: "stacktask_stacker",
          title: "堆垛机",
          type: "string",
          width: 80,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_barcode",
          title: "托盘号",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "stacktask_fromlocationline",
          title: "来源地址行",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_fromlocationcolu",
          title: "来源地址列",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_fromlocationlayer",
          title: "来源地址层",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_outhsstation",
          title: "出库站台",
          type: "string",
          width: 90,
          align: "left",
          hidden: true
        },
        {
          field: "stacktask_outstation",
          title: "出库口",
          type: "string",
          width: 90,
          require: true,
          align: "left",
          hidden: true
        },
        {
          field: "stacktask_tolocationline",
          title: "目的地址行",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_tolocationcolu",
          title: "目的地址列",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_tolocationlayer",
          title: "目的地址层",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_inhsstation",
          title: "入库站台",
          type: "string",
          width: 90,
          align: "left",
          hidden: true
        },
        {
          field: "stacktask_instation",
          title: "入库口",
          type: "string",
          width: 90,
          require: true,
          align: "left",
          hidden: true
        },
        {
          field: "stacktask_dispatchertime",
          title: "调度开始时间",
          type: "datetime",
          width: 160,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "stacktask_requestkey",
          title: "来源主键",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true
        },
        {
          field: "stacktask_grade",
          title: "执行等级",
          type: "int",
          width: 90,
          align: "left",
        },
        {
          field: "stacktask_creator",
          title: "创建者",
          type: "string",
          width: 80,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_createtime",
          title: "创建时间",
          type: "datetime",
          width: 160,
          require: true,
          align: "left",
          sortable: true,
        },
      ],
      detail: {
        cnName: "#detailCnName",
        columns: [],
        sortName: "",
        key: "",
      },
    };
  },
};
export default vueParam;
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/taskinfo/dt_stacktaskinfo_hty.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,282 @@
<!--
*Author：jxx
 *Contact：283591387@qq.com
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/order/dt_stacktaskinfo_hty.js此处编写
 -->
<template>
  <div>
    <view-grid
      ref="grid"
      :columns="columns"
      :detail="detail"
      :editFormFields="editFormFields"
      :editFormFileds="editFormFields"
      :editFormOptions="editFormOptions"
      :searchFormFields="searchFormFields"
      :searchFormFileds="searchFormFields"
      :searchFormOptions="searchFormOptions"
      :table="table"
      :extend="extend"
    >
    </view-grid>
  </div>
</template>

<script>
import extend from "@/extension/taskinfo/dt_stacktaskinfo_hty.js";
import ViewGrid from "@/components/basic/ViewGrid.vue";
var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: "stacktask_id",
        footer: "Foots",
        cnName: "堆垛机任务队列信息历史",
        name: "dt_stacktaskinfo_hty",
        url: "/dt_stacktaskinfo_hty/",
        sortName: "stacktask_dispatchertime",
      },
      extend: extend,
      editFormFields: {},
      editFormOptions: [],
      searchFormFields: { stacktask_stacker: "", stacktask_barcode: "" },
      searchFormOptions: [
        [
          { title: "托盘号", field: "stacktask_barcode", type: "like" },
          { title: "堆垛机", field: "stacktask_stacker", type: "like" },
        ],
      ],
      columns: [
        {
          field: "stacktask_id",
          title: "主键",
          type: "guid",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_areid",
          title: "库区id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          sortable: true,
          hidden: true,
        },
        {
          field: "stacktask_tasknumber",
          title: "任务号",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_worktype",
          title: "工作类型",
          type: "int",
          width: 90,
          align: "left",
          hidden: true,
        },
        {
          field: "stacktask_type",
          title: "任务类型",
          type: "string",
          width: 120,
          align: "left",
          bind: { key: "task_type", data: [] },
        },
        {
          field: "stacktask_state",
          title: "任务状态",
          type: "string",
          width: 120,
          require: true,
          align: "left",
           bind: { key: "task_state", data: [] },
        },
        {
          field: "stacktask_stacker",
          title: "堆垛机",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_barcode",
          title: "托盘号",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "stacktask_fromlocationline",
          title: "来源货位行",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_fromlocationcolu",
          title: "来源货位列",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_fromlocationlayer",
          title: "来源货位层",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_outhsstation",
          title: "出库站台",
          type: "string",
          width: 90,
          align: "left",
          hidden: true
        },
        {
          field: "stacktask_outstation",
          title: "出库口",
          type: "string",
          width: 90,
          require: true,
          align: "left",
          hidden: true
        },
        {
          field: "stacktask_tolocationline",
          title: "目的货位行",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_tolocationcolu",
          title: "目的货位列",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_tolocationlayer",
          title: "目的货位层",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_inhsstation",
          title: "入库站台",
          type: "string",
          width: 90,
          align: "left",
          hidden: true
        },
        {
          field: "stacktask_instation",
          title: "入库口",
          type: "string",
          width: 90,
          require: true,
          align: "left",
          hidden: true
        },
        {
          field: "stacktask_dispatchertime",
          title: "调度开始时间",
          type: "datetime",
          width: 150,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "stacktask_requestkey",
          title: "来源主键",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true
        },
        {
          field: "stacktask_grade",
          title: "执行等级",
          type: "int",
          width: 90,
          align: "left",
        },
        {
          field: "stacktask_creator",
          title: "创建者",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_createtime",
          title: "创建时间",
          type: "datetime",
          width: 150,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "stacktask_operatetype",
          title: "操作类型",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_compeletor",
          title: "操作者",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "stacktask_sourceid",
          title: "原表头id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true
        },
      ],
      detail: {
        cnName: "#detailCnName",
        columns: [],
        sortName: "",
        key: "",
      },
    };
  },
};
export default vueParam;
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/taskinfo/dt_wcstaskinfo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,259 @@
<!--
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/order/dt_wcstaskinfo.js此处编写
 -->
<template>
  <div>
    <view-grid
      :columns="columns"
      :detail="detail"
      :editFormFileds="editFormFileds"
      :editFormOptions="editFormOptions"
      :searchFormFileds="searchFormFileds"
      :searchFormOptions="searchFormOptions"
      :table="table"
      :extend="extend"
    >
    </view-grid>
  </div>
</template>

<script>
import extend from "@/extension/taskinfo/dt_wcstaskinfo.js";
import ViewGrid from "@/components/basic/ViewGrid.vue";
var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: "wcstask_id",
        footer: "Foots",
        cnName: "任务信息",
        name: "dt_wcstaskinfo",
        url: "/dt_wcstaskinfo/",
        sortName: "wcstask_createtime",
      },
      extend: extend,
      editFormFileds: {},
      editFormOptions: [],
      searchFormFileds: {
        wcstask_barcode: "",
        wcstask_type: "",
        wcstask_materielid: "",
        wcstask_state: "",
      },
      searchFormOptions: [
        [
          { title: "托盘号", field: "wcstask_barcode", type: "like" },
          { title: "任务类型", field: "wcstask_type", type: "like" },
          { title: "任务状态", field: "wcstask_state", type: "like" },
        ],
        [{ title: "物料编号", field: "wcstask_materielid", type: "like" }],
      ],
      columns: [
        {
          field: "wcstask_id",
          title: "主键",
          type: "guid",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_areid",
          title: "库区id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          sortable: true,
          hidden: true
        },
        {
          field: "wcstask_tasknumber",
          title: "任务号",
          type: "string",
          width: 150,
          align: "left",
          sortable: true,
        },
        {
          field: "wcstask_type",
          title: "任务类型",
          type: "string",
          width: 120,
          align: "left",
          bind: { key: "task_type", data: [] },
        },
        {
          field: "wcstask_state",
          title: "任务状态",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          bind: { key: "task_state", data: [] },
        },
        {
          field: "wcstask_stacker",
          title: "堆垛机",
          type: "string",
          width: 70,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_barcode",
          title: "托盘号",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "wcstask_materielid",
          title: "物料编号",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_qty",
          title: "任务数量",
          type: "decimal",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_sn",
          title: "条码标签",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "wcstask_lotnumber",
          title: "批次号",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_fromlocationid",
          title: "来源地址",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_outhsstation",
          title: "出库站台",
          type: "string",
          width: 90,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_outstation",
          title: "出库口",
          type: "string",
          width: 90,
          require: true,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_tolocationid",
          title: "目的地址",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_inhsstation",
          title: "入库站台",
          type: "string",
          width: 90,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_instation",
          title: "入库口",
          type: "string",
          width: 90,
          require: true,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_dispatchertime",
          title: "调度开始时间",
          type: "datetime",
          width: 150,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "wcstask_requestkey",
          title: "来源主键",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_isunpacked",
          title: "是否需要拆分",
          type: "bool",
          width: 90,
          require: true,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_grade",
          title: "执行等级",
          type: "int",
          width: 80,
          align: "left",
        },
        {
          field: "wcstask_creator",
          title: "创建者",
          type: "string",
          width: 70,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_createtime",
          title: "创建时间",
          type: "datetime",
          width: 150,
          require: true,
          align: "left",
          sortable: true,
        },
      ],
      detail: {
        cnName: "#detailCnName",
        columns: [],
        sortName: "",
        key: "",
      },
    };
  },
};
export default vueParam;
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/src/views/taskinfo/dt_wcstaskinfo_hty.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,285 @@
<!--
<!--
 *代码由框架生成,任何更改都可能导致被代码生成器覆盖
 *业务请在@/extension/order/dt_wcstaskinfo_hty.js此处编写
 -->
<template>
  <div>
    <view-grid
      :columns="columns"
      :detail="detail"
      :editFormFileds="editFormFileds"
      :editFormOptions="editFormOptions"
      :searchFormFileds="searchFormFileds"
      :searchFormOptions="searchFormOptions"
      :table="table"
      :extend="extend"
    >
    </view-grid>
  </div>
</template>

<script>
import extend from "@/extension/taskinfo/dt_wcstaskinfo_hty.js";
import ViewGrid from "@/components/basic/ViewGrid.vue";
var vueParam = {
  components: {
    ViewGrid,
  },
  data() {
    return {
      table: {
        key: "wcstask_id",
        footer: "Foots",
        cnName: "任务信息历史",
        name: "dt_wcstaskinfo_hty",
        url: "/dt_wcstaskinfo_hty/",
        sortName: "wcstask_finishtime",
      },
      extend: extend,
      editFormFileds: {},
      editFormOptions: [],
      searchFormFileds: {
        wcstask_barcode: "",
        wcstask_type: "",
        wcstask_materielid: "",
        wcstask_state: "",
      },
      searchFormOptions: [
        [
          { title: "托盘号", field: "wcstask_barcode", type: "like" },
          { title: "任务类型", field: "wcstask_type", type: "like" },
          { title: "任务状态", field: "wcstask_state", type: "like" },
        ],
        [{ title: "物料编号", field: "wcstask_materielid", type: "like" }],
      ],
      columns: [
        {
          field: "wcstask_id",
          title: "主键",
          type: "guid",
          width: 90,
          hidden: true,
          readonly: true,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_areid",
          title: "库区id",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          sortable: true,
          hidden: true,
        },
        {
          field: "wcstask_type",
          title: "任务类型",
          type: "string",
          width: 120,
          align: "left",
          bind: { key: "task_type", data: [] },
        },
        {
          field: "wcstask_state",
          title: "任务状态",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          bind: { key: "task_state", data: [] },
        },
        {
          field: "wcstask_stacker",
          title: "堆垛机",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_barcode",
          title: "托盘号",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "wcstask_materielid",
          title: "物料编号",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_qty",
          title: "任务数量",
          type: "decimal",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_sn",
          title: "条码标签",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "wcstask_lotnumber",
          title: "批次号",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_fromlocationid",
          title: "来源货位",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_outhsstation",
          title: "出库站台",
          type: "string",
          width: 90,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_outstation",
          title: "出库口",
          type: "string",
          width: 90,
          require: true,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_tolocationid",
          title: "目的货位",
          type: "string",
          width: 120,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_inhsstation",
          title: "入库站台",
          type: "string",
          width: 90,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_instation",
          title: "入库口",
          type: "string",
          width: 90,
          require: true,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_dispatchertime",
          title: "调度开始时间",
          type: "datetime",
          width: 150,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "wcstask_requestkey",
          title: "来源主键",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_isunpacked",
          title: "是否需要拆分",
          type: "bool",
          width: 90,
          require: true,
          align: "left",
          hidden: true,
        },
        {
          field: "wcstask_grade",
          title: "执行等级",
          type: "int",
          width: 90,
          align: "left",
        },
        {
          field: "wcstask_creator",
          title: "创建者",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_createtime",
          title: "创建时间",
          type: "datetime",
          width: 150,
          require: true,
          align: "left",
          sortable: true,
        },
        {
          field: "wcstask_finishtime",
          title: "完成时间",
          type: "datetime",
          width: 150,
          align: "left",
          sortable: true,
        },
        {
          field: "wcstask_operatetype",
          title: "操作类型",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_compeletor",
          title: "操作者",
          type: "string",
          width: 90,
          require: true,
          align: "left",
        },
        {
          field: "wcstask_sourceid",
          title: "原表头编号",
          type: "string",
          width: 120,
          require: true,
          align: "left",
          hidden: true,
        },
      ],
      detail: {
        cnName: "#detailCnName",
        columns: [],
        sortName: "",
        key: "",
      },
    };
  },
};
export default vueParam;
</script>

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/.gitkeep

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/WCS_GK.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/favicon.ico

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/buticon.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_bg.jpg

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_cb.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_cb.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_closebtn.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_closebtn_over.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_ct.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_ct.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_lb.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_lb.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_lt.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_lt.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_mlm.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_mlm.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_mrm.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_mrm.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_rb.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_rb.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_rt.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dialog_rt.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/dir.txt

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,24 @@
dialog_bg.jpg
dialog_cb.gif
dialog_cb.png
dialog_closebtn.gif
dialog_closebtn_over.gif
dialog_ct.gif
dialog_ct.png
dialog_lb.gif
dialog_lb.png
dialog_lt.gif
dialog_lt.png
dialog_mlm.gif
dialog_mlm.png
dialog_mrm.gif
dialog_mrm.png
dialog_rb.gif
dialog_rb.png
dialog_rt.gif
dialog_rt.png
dir.txt
icon_alert.gif
icon_dialog.gif
icon_query.gif
window.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/icon_alert.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/icon_dialog.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/icon_query.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/images/window.gif

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/jk_img/honda-logo.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/jk_img/little-man.jpg

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/Image/little-man.jpg

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/RGV.jpg

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/RGV.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/RGV1.jpg

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/RGV3.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/bottom.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/ddj.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/hw.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/left-right.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/left.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/lift.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/lines.jpg

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/lines.png

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/res/css/DateRangePicker/daterangepicker.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,269 @@
.daterangepicker {
  position: absolute;
  color: inherit;
  background: #fff;
  border-radius: 4px;
  width: 278px;
  padding: 4px;
  margin-top: 1px;
  top: 100px;
  left: 20px;
  /* Calendars */ }
  .daterangepicker:before, .daterangepicker:after {
    position: absolute;
    display: inline-block;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: ''; }
  .daterangepicker:before {
    top: -7px;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom: 7px solid #ccc; }
  .daterangepicker:after {
    top: -6px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent; }
  .daterangepicker.opensleft:before {
    right: 9px; }
  .daterangepicker.opensleft:after {
    right: 10px; }
  .daterangepicker.openscenter:before {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto; }
  .daterangepicker.openscenter:after {
    left: 0;
    right: 0;
    width: 0;
    margin-left: auto;
    margin-right: auto; }
  .daterangepicker.opensright:before {
    left: 9px; }
  .daterangepicker.opensright:after {
    left: 10px; }
  .daterangepicker.dropup {
    margin-top: -5px; }
    .daterangepicker.dropup:before {
      top: initial;
      bottom: -7px;
      border-bottom: initial;
      border-top: 7px solid #ccc; }
    .daterangepicker.dropup:after {
      top: initial;
      bottom: -6px;
      border-bottom: initial;
      border-top: 6px solid #fff; }
  .daterangepicker.dropdown-menu {
    max-width: none;
    z-index: 3001; }
  .daterangepicker.single .ranges, .daterangepicker.single .calendar {
    float: none; }
  .daterangepicker.show-calendar .calendar {
    display: block; }
  .daterangepicker .calendar {
    display: none;
    max-width: 270px;
    margin: 4px; }
    .daterangepicker .calendar.single .calendar-table {
      border: none; }
    .daterangepicker .calendar th, .daterangepicker .calendar td {
      white-space: nowrap;
      text-align: center;
      min-width: 32px; }
  .daterangepicker .calendar-table {
    border: 1px solid #fff;
    padding: 4px;
    border-radius: 4px;
    background: #fff; }
  .daterangepicker table {
    width: 100%;
    margin: 0; }
  .daterangepicker td, .daterangepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer; }
    .daterangepicker td.available:hover, .daterangepicker th.available:hover {
      background-color: #eee;
      border-color: transparent;
      color: inherit; }
    .daterangepicker td.week, .daterangepicker th.week {
      font-size: 80%;
      color: #ccc; }
  .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
    background-color: #fff;
    border-color: transparent;
    color: #999; }
  .daterangepicker td.in-range {
    background-color: #ebf4f8;
    border-color: transparent;
    color: #000;
    border-radius: 0; }
  .daterangepicker td.start-date {
    border-radius: 4px 0 0 4px; }
  .daterangepicker td.end-date {
    border-radius: 0 4px 4px 0; }
  .daterangepicker td.start-date.end-date {
    border-radius: 4px; }
  .daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #357ebd;
    border-color: transparent;
    color: #fff; }
  .daterangepicker th.month {
    width: auto; }
  .daterangepicker td.disabled, .daterangepicker option.disabled {
    color: #999;
    cursor: not-allowed;
    text-decoration: line-through; }
  .daterangepicker select.monthselect, .daterangepicker select.yearselect {
    font-size: 12px;
    padding: 1px;
    height: auto;
    margin: 0;
    cursor: default; }
  .daterangepicker select.monthselect {
    margin-right: 2%;
    width: 56%; }
  .daterangepicker select.yearselect {
    width: 40%; }
  .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
    width: 50px;
    margin-bottom: 0; }
  .daterangepicker .input-mini {
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #555;
    height: 30px;
    line-height: 30px;
    display: block;
    vertical-align: middle;
    margin: 0 0 5px 0;
    padding: 0 6px 0 28px;
    width: 100%; }
    .daterangepicker .input-mini.active {
      border: 1px solid #08c;
      border-radius: 4px; }
  .daterangepicker .daterangepicker_input {
    position: relative; }
    .daterangepicker .daterangepicker_input i {
      position: absolute;
      left: 8px;
      top: 8px; }
  .daterangepicker.rtl .input-mini {
    padding-right: 28px;
    padding-left: 6px; }
  .daterangepicker.rtl .daterangepicker_input i {
    left: auto;
    right: 8px; }
  .daterangepicker .calendar-time {
    text-align: center;
    margin: 5px auto;
    line-height: 30px;
    position: relative;
    padding-left: 28px; }
    .daterangepicker .calendar-time select.disabled {
      color: #ccc;
      cursor: not-allowed; }

.ranges {
  font-size: 11px;
  float: none;
  margin: 4px;
  text-align: left; }
  .ranges ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%; }
  .ranges li {
    font-size: 13px;
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    color: #08c;
    padding: 3px 12px;
    margin-bottom: 8px;
    cursor: pointer; }
    .ranges li:hover {
      background: #08c;
      border: 1px solid #08c;
      color: #fff; }
    .ranges li.active {
      background: #08c;
      border: 1px solid #08c;
      color: #fff; }

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .daterangepicker {
    width: auto; }
    .daterangepicker .ranges ul {
      width: 160px; }
    .daterangepicker.single .ranges ul {
      width: 100%; }
    .daterangepicker.single .calendar.left {
      clear: none; }
    .daterangepicker.single.ltr .ranges, .daterangepicker.single.ltr .calendar {
      float: left; }
    .daterangepicker.single.rtl .ranges, .daterangepicker.single.rtl .calendar {
      float: right; }
    .daterangepicker.ltr {
      direction: ltr;
      text-align: left; }
      .daterangepicker.ltr .calendar.left {
        clear: left;
        margin-right: 0; }
        .daterangepicker.ltr .calendar.left .calendar-table {
          border-right: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0; }
      .daterangepicker.ltr .calendar.right {
        margin-left: 0; }
        .daterangepicker.ltr .calendar.right .calendar-table {
          border-left: none;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; }
      .daterangepicker.ltr .left .daterangepicker_input {
        padding-right: 12px; }
      .daterangepicker.ltr .calendar.left .calendar-table {
        padding-right: 12px; }
      .daterangepicker.ltr .ranges, .daterangepicker.ltr .calendar {
        float: left; }
    .daterangepicker.rtl {
      direction: rtl;
      text-align: right; }
      .daterangepicker.rtl .calendar.left {
        clear: right;
        margin-left: 0; }
        .daterangepicker.rtl .calendar.left .calendar-table {
          border-left: none;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0; }
      .daterangepicker.rtl .calendar.right {
        margin-right: 0; }
        .daterangepicker.rtl .calendar.right .calendar-table {
          border-right: none;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0; }
      .daterangepicker.rtl .left .daterangepicker_input {
        padding-left: 12px; }
      .daterangepicker.rtl .calendar.left .calendar-table {
        padding-left: 12px; }
      .daterangepicker.rtl .ranges, .daterangepicker.rtl .calendar {
        text-align: right;
        float: right; } }
@media (min-width: 730px) {
  .daterangepicker .ranges {
    width: auto; }
  .daterangepicker.ltr .ranges {
    float: left; }
  .daterangepicker.rtl .ranges {
    float: right; }
  .daterangepicker .calendar.left {
    clear: none !important; } }

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/res/css/DateRangePicker/daterangepicker.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,611 @@
//
// A stylesheet for use with Bootstrap 3.x
// @author: Dan Grossman http://www.dangrossman.info/
// @copyright: Copyright (c) 2012-2015 Dan Grossman. All rights reserved.
// @license: Licensed under the MIT license. See http://www.opensource.org/licenses/mit-license.php
// @website: https://www.improvely.com/
//

//
// VARIABLES
//

//
// Settings

// The class name to contain everything within.
$prefix-class: daterangepicker;
$arrow-size:     7px !default;

//
// Colors
$daterangepicker-color:                      inherit !default;
$daterangepicker-bg-color:                   #fff !default;

$daterangepicker-cell-color:                 $daterangepicker-color !default;
$daterangepicker-cell-border-color:          transparent !default;
$daterangepicker-cell-bg-color:              $daterangepicker-bg-color !default;

$daterangepicker-cell-hover-color:           $daterangepicker-color !default;
$daterangepicker-cell-hover-border-color:    $daterangepicker-cell-border-color !default;
$daterangepicker-cell-hover-bg-color:        #eee !default;

$daterangepicker-in-range-color:             #000 !default;
$daterangepicker-in-range-border-color:      transparent !default;
$daterangepicker-in-range-bg-color:          #ebf4f8 !default;

$daterangepicker-active-color:               #fff !default;
$daterangepicker-active-bg-color:            #357ebd !default;
$daterangepicker-active-border-color:        transparent !default;

$daterangepicker-unselected-color:           #999 !default;
$daterangepicker-unselected-border-color:    transparent !default;
$daterangepicker-unselected-bg-color:        #fff !default;

//
// daterangepicker
$daterangepicker-width:          278px !default;
$daterangepicker-padding:        4px !default;
$daterangepicker-z-index:        3000 !default;

$daterangepicker-border-size:    1px !default;
$daterangepicker-border-color:   #ccc !default;
$daterangepicker-border-radius:  4px !default;


//
// Calendar
$daterangepicker-calendar-margin:              $daterangepicker-padding !default;
$daterangepicker-calendar-bg-color:            $daterangepicker-bg-color !default;

$daterangepicker-calendar-border-size:         1px !default;
$daterangepicker-calendar-border-color:        $daterangepicker-bg-color !default;
$daterangepicker-calendar-border-radius:       $daterangepicker-border-radius !default;

//
// Calendar Cells
$daterangepicker-cell-size:           20px !default;
$daterangepicker-cell-width:          $daterangepicker-cell-size !default;
$daterangepicker-cell-height:         $daterangepicker-cell-size !default;

$daterangepicker-cell-border-radius:  $daterangepicker-calendar-border-radius !default;
$daterangepicker-cell-border-size:    1px !default;

//
// Dropdowns
$daterangepicker-dropdown-z-index: $daterangepicker-z-index + 1 !default;

//
// Controls
$daterangepicker-control-height:               30px !default;
$daterangepicker-control-line-height:          $daterangepicker-control-height !default;
$daterangepicker-control-color:                #555 !default;

$daterangepicker-control-border-size:          1px !default;
$daterangepicker-control-border-color:         #ccc !default;
$daterangepicker-control-border-radius:        4px !default;

$daterangepicker-control-active-border-size:   1px !default;
$daterangepicker-control-active-border-color:  #08c !default;
$daterangepicker-control-active-border-radius: $daterangepicker-control-border-radius !default;

$daterangepicker-control-disabled-color:       #ccc !default;

//
// Ranges
$daterangepicker-ranges-color:                #08c !default;
$daterangepicker-ranges-bg-color:             #f5f5f5 !default;

$daterangepicker-ranges-border-size:          1px !default;
$daterangepicker-ranges-border-color:         $daterangepicker-ranges-bg-color !default;
$daterangepicker-ranges-border-radius:        $daterangepicker-border-radius !default;

$daterangepicker-ranges-hover-color:          #fff !default;
$daterangepicker-ranges-hover-bg-color:       $daterangepicker-ranges-color !default;
$daterangepicker-ranges-hover-border-size:    $daterangepicker-ranges-border-size !default;
$daterangepicker-ranges-hover-border-color:   $daterangepicker-ranges-hover-bg-color !default;
$daterangepicker-ranges-hover-border-radius:  $daterangepicker-border-radius !default;

$daterangepicker-ranges-active-border-size:   $daterangepicker-ranges-border-size !default;
$daterangepicker-ranges-active-border-color:  $daterangepicker-ranges-bg-color !default;
$daterangepicker-ranges-active-border-radius: $daterangepicker-border-radius !default;

//
// STYLESHEETS
//
.#{$prefix-class} {
  position: absolute;
  color: $daterangepicker-color;
  background: $daterangepicker-bg-color;
  border-radius: $daterangepicker-border-radius;
  width: $daterangepicker-width;
  padding: $daterangepicker-padding;
  margin-top: $daterangepicker-border-size;

  // TODO: Should these be parameterized??
  top: 100px;
  left: 20px;

  $arrow-prefix-size: $arrow-size;
  $arrow-suffix-size: ($arrow-size - $daterangepicker-border-size);

  &:before, &:after {
    position: absolute;
    display: inline-block;

    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
  }

  &:before {
    top: -$arrow-prefix-size;

    border-right: $arrow-prefix-size solid transparent;
    border-left: $arrow-prefix-size solid transparent;
    border-bottom: $arrow-prefix-size solid $daterangepicker-border-color;
  }

  &:after {
    top: -$arrow-suffix-size;

    border-right: $arrow-suffix-size solid transparent;
    border-bottom: $arrow-suffix-size solid $daterangepicker-bg-color;
    border-left: $arrow-suffix-size solid transparent;
  }

  &.opensleft {
    &:before {
      // TODO: Make this relative to prefix size.
      right: $arrow-prefix-size + 2px;
    }

    &:after {
      // TODO: Make this relative to suffix size.
      right: $arrow-suffix-size + 4px;
    }
  }

  &.openscenter {
    &:before {
      left: 0;
      right: 0;
      width: 0;
      margin-left: auto;
      margin-right: auto;
    }

    &:after {
      left: 0;
      right: 0;
      width: 0;
      margin-left: auto;
      margin-right: auto;
    }
  }

  &.opensright {
    &:before {
      // TODO: Make this relative to prefix size.
      left: $arrow-prefix-size + 2px;
    }

    &:after {
      // TODO: Make this relative to suffix size.
      left: $arrow-suffix-size + 4px;
    }
  }

  &.dropup {
    margin-top: -5px;

    // NOTE: Note sure why these are special-cased.
    &:before {
      top: initial;
      bottom: -$arrow-prefix-size;
      border-bottom: initial;
      border-top: $arrow-prefix-size solid $daterangepicker-border-color;
    }

    &:after {
      top: initial;
      bottom:-$arrow-suffix-size;
      border-bottom: initial;
      border-top: $arrow-suffix-size solid $daterangepicker-bg-color;
    }
  }

  &.dropdown-menu {
    max-width: none;
    z-index: $daterangepicker-dropdown-z-index;
  }

  &.single {
    .ranges, .calendar {
      float: none;
    }
  }

  /* Calendars */
  &.show-calendar {
    .calendar {
      display: block;
    }
  }

  .calendar {
    display: none;
    max-width: $daterangepicker-width - ($daterangepicker-calendar-margin * 2);
    margin: $daterangepicker-calendar-margin;

    &.single {
      .calendar-table {
        border: none;
      }
    }

    th, td {
      white-space: nowrap;
      text-align: center;

      // TODO: Should this actually be hard-coded?
      min-width: 32px;
    }
  }

  .calendar-table {
    border: $daterangepicker-calendar-border-size solid $daterangepicker-calendar-border-color;
    padding: $daterangepicker-calendar-margin;
    border-radius: $daterangepicker-calendar-border-radius;
    background: $daterangepicker-calendar-bg-color;
  }

  table {
    width: 100%;
    margin: 0;
  }

  td, th {
    text-align: center;
    width: $daterangepicker-cell-width;
    height: $daterangepicker-cell-height;
    border-radius: $daterangepicker-cell-border-radius;
    border: $daterangepicker-cell-border-size solid $daterangepicker-cell-border-color;
    white-space: nowrap;
    cursor: pointer;

    &.available {
      &:hover {
        background-color: $daterangepicker-cell-hover-bg-color;
        border-color: $daterangepicker-cell-hover-border-color;
        color: $daterangepicker-cell-hover-color;
      }
    }

    &.week {
      font-size: 80%;
      color: #ccc;
    }
  }

  td {
    &.off {
      &, &.in-range, &.start-date, &.end-date {
        background-color: $daterangepicker-unselected-bg-color;
        border-color: $daterangepicker-unselected-border-color;
        color: $daterangepicker-unselected-color;
      }
    }

    //
    // Date Range
    &.in-range {
      background-color: $daterangepicker-in-range-bg-color;
      border-color: $daterangepicker-in-range-border-color;
      color: $daterangepicker-in-range-color;

      // TODO: Should this be static or should it be parameterized?
      border-radius: 0;
    }

    &.start-date {
      border-radius: $daterangepicker-cell-border-radius 0 0 $daterangepicker-cell-border-radius;
    }

    &.end-date {
      border-radius: 0 $daterangepicker-cell-border-radius $daterangepicker-cell-border-radius 0;
    }

    &.start-date.end-date {
      border-radius: $daterangepicker-cell-border-radius;
    }

    &.active {
      &, &:hover {
        background-color: $daterangepicker-active-bg-color;
        border-color: $daterangepicker-active-border-color;
        color: $daterangepicker-active-color;
      }
    }
  }

  th {
    &.month {
      width: auto;
    }
  }

  //
  // Disabled Controls
  //
  td, option {
    &.disabled {
      color: #999;
      cursor: not-allowed;
      text-decoration: line-through;
    }
  }

  select {
    &.monthselect, &.yearselect {
      font-size: 12px;
      padding: 1px;
      height: auto;
      margin: 0;
      cursor: default;
    }

    &.monthselect {
      margin-right: 2%;
      width: 56%;
    }

    &.yearselect {
      width: 40%;
    }

    &.hourselect, &.minuteselect, &.secondselect, &.ampmselect {
      width: 50px;
      margin-bottom: 0;
    }
  }

  //
  // Text Input Controls (above calendar)
  //
  .input-mini {
    border: $daterangepicker-control-border-size solid $daterangepicker-control-border-color;
    border-radius: $daterangepicker-control-border-radius;
    color: $daterangepicker-control-color;
    height: $daterangepicker-control-line-height;
    line-height: $daterangepicker-control-height;
    display: block;
    vertical-align: middle;

    // TODO: Should these all be static, too??
    margin: 0 0 5px 0;
    padding: 0 6px 0 28px;
    width: 100%;

    &.active {
      border: $daterangepicker-control-active-border-size solid $daterangepicker-control-active-border-color;
      border-radius: $daterangepicker-control-active-border-radius;
    }
  }

  .daterangepicker_input {
    position: relative;

    i {
      position: absolute;

      // NOTE: These appear to be eyeballed to me...
      left: 8px;
      top: 8px;
    }
  }
  &.rtl {
    .input-mini {
      padding-right: 28px;
      padding-left: 6px;
    }
    .daterangepicker_input i {
      left: auto;
      right: 8px;
    }
  }

  //
  // Time Picker
  //
  .calendar-time {
    text-align: center;
    margin: 5px auto;
    line-height: $daterangepicker-control-line-height;
    position: relative;
    padding-left: 28px;

    select {
      &.disabled {
        color: $daterangepicker-control-disabled-color;
        cursor: not-allowed;
      }
    }
  }
}

//
// Predefined Ranges
//

.ranges {
  font-size: 11px;
  float: none;
  margin: 4px;
  text-align: left;

  ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }

  li {
    font-size: 13px;
    background: $daterangepicker-ranges-bg-color;
    border: $daterangepicker-ranges-border-size solid $daterangepicker-ranges-border-color;
    border-radius: $daterangepicker-ranges-border-radius;
    color: $daterangepicker-ranges-color;
    padding: 3px 12px;
    margin-bottom: 8px;
    cursor: pointer;

    &:hover {
      background: $daterangepicker-ranges-hover-bg-color;
      border: $daterangepicker-ranges-hover-border-size solid $daterangepicker-ranges-hover-border-color;
      color: $daterangepicker-ranges-hover-color;
    }

    &.active {
      background: $daterangepicker-ranges-hover-bg-color;
      border: $daterangepicker-ranges-hover-border-size solid $daterangepicker-ranges-hover-border-color;
      color: $daterangepicker-ranges-hover-color;
    }
  }
}

/*  Larger Screen Styling */
@media (min-width: 564px) {
  .#{$prefix-class} {
    width: auto;

    .ranges {
      ul {
        width: 160px;
      }
    }

    &.single {
      .ranges {
        ul {
          width: 100%;
        }
      }

      .calendar.left {
        clear: none;
      }

      &.ltr {
        .ranges, .calendar {
          float:left;
        }
      }
      &.rtl {
        .ranges, .calendar {
          float:right;
        }
      }
    }

    &.ltr {
      direction: ltr;
      text-align: left;
      .calendar{
        &.left {
          clear: left;
          margin-right: 0;

          .calendar-table {
            border-right: none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
        }

        &.right {
          margin-left: 0;

          .calendar-table {
            border-left: none;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }
      }

      .left .daterangepicker_input {
        padding-right: 12px;
      }

      .calendar.left .calendar-table {
        padding-right: 12px;
      }

      .ranges, .calendar {
        float: left;
      }
    }
    &.rtl {
      direction: rtl;
      text-align: right;
      .calendar{
        &.left {
          clear: right;
          margin-left: 0;

          .calendar-table {
            border-left: none;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }

        &.right {
          margin-right: 0;

          .calendar-table {
            border-right: none;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
      }

      .left .daterangepicker_input {
        padding-left: 12px;
      }

      .calendar.left .calendar-table {
        padding-left: 12px;
      }

      .ranges, .calendar {
        text-align: right;
        float: right;
      }
    }
  }
}

@media (min-width: 730px) {
  .#{$prefix-class} {
    .ranges {
      width: auto;
    }
    &.ltr {
      .ranges {
        float: left;
      }
    }
    &.rtl {
      .ranges {
        float: right;
      }
    }

    .calendar.left {
      clear: none !important;
    }
  }
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/res/css/Login.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,320 @@
.bodyloading {
  background: ;
  background-size: cover;
  margin: 0;
  padding-top: 5em;
  padding-bottom: 5em;
}

.container {
  display: flex;
  flex-wrap: wrap;
  display: flex;

  justify-content: space-around;
  align-items: center;
  align-content: flex-start;
  justify-content: space-around;
  margin: 0 auto;
 
}

.canvas {
  align-items: center;
  opacity:1;
  border-radius: 10%;
  box-shadow: 0 5px 20px rgba(0,0,0,0);
  display: flex;
 
  justify-content: center;
  margin-top: 30%;
  
}

/* Spinner 1 starts here */
.spinner1 {
  align-items: center;
  border: .3em solid transparent;
  border-top: .3em solid #4DB6AC;
  border-right: .3em solid #4DB6AC;
  border-radius: 100%;
  display: flex;
  justify-content: center;
}

.spinnerMax {
  animation: spinnerOne 3s linear infinite;
  height: 3em;
  width: 3em;
}

.spinnerMid {
  animation: spinnerOne 5s linear infinite;
  height: 2.4em;
  width: 2.4em;
}

.spinnerMin {
  animation: spinnerOne 5s linear infinite;
  height: 1.8em;
  width: 1.8em;
}

@keyframes spinnerOne {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
/* Spinner 1 ends here */

/* Spinner 2 starts here */
.canvas2 {
  position: relative;
}

.spinner2 {
  animation: spinnerTwo 1s linear infinite;
  background: #4DB6AC;
  border-radius: 100px;
  height: 3em;
  transform-origin: top;
  position: absolute;
  top: 50%;
  width: .22em;
}

.hourHand {
  animation: spinnerTwo 7s linear infinite;
  background: #4DB6AC;
  border-radius: 100px;
  height: 2em;
  transform-origin: top;
  position: absolute;
  top: 50%;
  width: .2em;
}

.dot {
  background: #4DB6AC;
  border-radius: 100%;
  height: .5em;
  width: .5em;
}

@keyframes spinnerTwo {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}
/* Spinner 2 ends here */

/* Spinner 3 starts here */
.spinner3 {
  animation: spinnerThree 1s linear infinite;
  background: #4DB6AC;
  border-radius: 100%;
  width: 3em;
  height: 3em;
}

@keyframes spinnerThree {
  0%, 35% {
    background: #4DB6AC;
    transform: scale(1);
  }
  20%, 50% {
    background: #80CBC4;
    transform: scale(1.3);
  }
}
/* Spinner 3 ends here */

/* Spinner 4 starts here */
.spinner4 {
  animation: spinnerFour 1s linear infinite;
  border: solid 7px transparent;
  border-top: solid 7px #4DB6AC;
  border-radius: 100%;
  width: 3em;
  height: 3em;
}

@keyframes spinnerFour {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Spinner 4 ends here */

/* Spinner 5 starts here */
.spinner5 {
  animation: spinnerFive 1s linear infinite;
  border: solid 1.5em #4DB6AC;
  border-right: solid 1.5em transparent;
  border-left: solid 1.5em transparent;
  border-radius: 100%;
  width: 0;
  height: 0;
}

@keyframes spinnerFive {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(60deg)
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Spinner 5 ends here */

/* Spinner 6 starts here */
.spinner6 {
  background: #4DB6AC;
  border-radius: 50%;
  height: 1em;
  margin: .1em;
  width: 1em;
}

.p1 {
  animation: fall 1s linear .3s infinite;
}

.p2 {
  animation: fall 1s linear .2s infinite;
}

.p3 {
  animation: fall 1s linear .1s infinite;
}

.p4 {
  animation: fall 1s linear infinite;
}

@keyframes fall {
  0% {
    transform: translateY(-15px);
  }
  25%, 75% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15px);
  }
}
/* Spinner 6 ends here */

@media (max-width: 600px) {
  .container {
    align-items: center;
    flex-direction: column;
  }
  .canvas {
    margin: 1em;
  }
}

.shade {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
    -moz-opacity: 0;
    filter: alpha(opacity=0);
}

/* Title */
.popmsg-title {
    width: 100%;
    float: left;
    background: #4e6d8d;
    color: #fff;
    font-size: 14px;
    line-height: 30px;
    text-indent: 20px;
}

    .popmsg-title i {
        font-size: 16px;
        text-indent: 0;
        margin-right: 10px;
    }

/* Content */
.popmsg-content {
    width: 100%;
    float: left;
    background: #fff;
    padding: 10px;
    line-height: 25px;
    text-align: center;
}

.popmsg-close {
    width: 100%;
    float: left;
    background: #fff;
    padding: 5px 0;
    text-align: center;
}

/* Primary */
.popmsg.popmsg-primary {
    border: 5px #1abc9c solid;
}

    .popmsg.popmsg-primary .popmsg-title {
        background: #2fe2bf;
    }

/* Information */
.popmsg.popmsg-info {
    border: 5px #3498db solid;
}

    .popmsg.popmsg-info .popmsg-title {
        background: #5dade2;
    }

/* Danger */
.popmsg.popmsg-danger {
    border: 5px #e74c3c solid;
}

    .popmsg.popmsg-danger .popmsg-title {
        background: #ec7063;
    }

/* Success */
.popmsg.popmsg-success {
    border: 5px #2ecc72 solid;
}

    .popmsg.popmsg-success .popmsg-title {
        background: #55d98d;
    }

/* Warning */
.popmsg.popmsg-warning {
    border: 5px #f2c81d solid;
}

    .popmsg.popmsg-warning .popmsg-title {
        background: #f4d03f;
    }

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/res/css/MonitoringSystem.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,289 @@
* {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    font-family: "微软雅黑";
}

.nav-header {
    margin-left: 10px;
    width: 500px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    color: white;
    font-size: 48px;
    font-weight: bold;
    letter-spacing: 2px;
    /*font-style:italic;斜体*/
}

#logo {
    width: 60px;
    height: 60px;
    margin-top: -8px;
}

.contentmain {
    padding-top: 50px;
    height: 100%;
    width: 100%;
    min-width: 1000px;
}

.contentmain-left, .contentmain-right {
    /*border:1px solid red;*/
    height: 100%;
    float: left;
    /*margin-top:-40px;*/
    /*overflow: auto;*/
    overflow-x: auto;
    overflow-y: auto;
}

.contentmain-left {
    width: 60%;
    /*min-width: 700px;*/
}

.contentmain-right {
    width: 40%;
    min-width: 300px;
}
/*图例*/
.legend {
    width: 50%;
    min-width: 300px;
    height: 50px;
    position: relative;
    float: left;
    left: 50%;
    /*border:1px solid black;*/
}

.legend > ul {
    position: relative;
    float: left;
    left: -10%;
    height: 100px;
    /*border: 1px solid gray;*/
}

.legend > ul > li {
    border: 1px solid skyblue;
    float: left;
    width: 120px;
    height: 40px;
    text-align: center;
    border-radius: 5px;
    line-height: 30px;
    margin-right: 10px;
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
}

.monitoring-area {
    margin-top: 10px;
    padding-top: 70px;
    width: 100%;
    height: 100%;
    margin-left: 10%;
    /*border: 1px solid blue;*/
}

    .monitoring-area table tr td {
        text-align: center;
    }

.panel table tr td {
    text-align: center;
}

.roadway {
    width: 845px;
}

.roadway > li {
    width:66px;
    height:56px;
    border:1px solid skyblue;
    float:left;

    background: #DADADA;
}

.roadway_v {
    width: 80%;
}

.roadway_li2 {
    width: 66px;
    height: 56px;
    border: 1px solid skyblue;
    float: left;
    margin-left: 70px;
    margin-bottom: 4px;
    background: #DADADA;
    text-align: center;
}

.roadway_li {
    width: 66px;
    height: 56px;
    border: 1px solid skyblue;
    float: left;
    margin-left: 2px;
    margin-bottom: 4px;
    background: #DADADA;
    text-align: center;
}

.roadway_li3 {
    width: 66px;
    height: 56px;
    margin-left: 70px;
    margin-bottom: 4px;
    border: 1px solid red;
    margin-bottom: 4px;
    border: 1px solid skyblue;
    float: left;
    text-align: center;
}

.roadway_li4 {
    width: 66px;
    height: 56px;
    margin-left: 2px;
    margin-bottom: 4px;
    border: 1px solid red;
    margin-bottom: 4px;
    border: 1px solid skyblue;
    float: left;
    text-align: center;
}

.roadway_li5 {
    width: 66px;
    height: 56px;
    margin-left: 2px;
    margin-bottom: 4px;
    border: 1px solid red;
    margin-bottom: 4px;
    border: 1px solid skyblue;
    float: left;
    text-align: center;
}

.roadway_li6 {
    width: 66px;
    height: 56px;
    margin-left: 682px;
    margin-bottom: 4px;
    border: 1px solid red;
    margin-bottom: 4px;
    border: 1px solid skyblue;
    float: left;
    text-align: center;
}

.roadway_li7 {
   width: 66px;
    height: 56px;
    margin-left: 2px;
    margin-bottom: 4px;
    border: 1px solid red;
    margin-bottom: 4px;
    border: 0px solid skyblue;
    float: left;
    text-align: center;
}

.stacker {
    position: absolute;
    top: -1px;
}

.stacker > li {
    width: 40px;
    height: 46px;
    border: 1px solid red;
    margin-bottom: 4px;
}

.stacker_v {
    width: 46px;
}

.stacker_v > li {
    width: 46px;
    height: 46px;
    border: 1px solid skyblue;
    float: left;
    margin-left: 2px;
    margin-bottom: 4px;
    background: #DADADA;
}

#stacker_1 {
    left: 48px;
}

#stacker_2 {
    right: 48px;
}

#conveyerline_L {
    position: absolute;
    bottom: -50px;
    left: -10px;
    height: 46px;
    width: 200px;
}
#conveyerline_R{
    position: absolute;
    bottom: -150px;
    left: -10px;
    height: 46px;
    width: 46px;
}
#conveyerline_L2 {
    position: absolute;
    bottom: -100px;
    left: -18px;
    height: 46px;
    width: 160px;
}

#conveyerline_L > li, #conveyerline_L2 > li, #conveyerline_R > li {
    border: 1px solid gray;
    float: right;
    width: 46px;
    height: 46px;
    margin-left: 2px;
    margin-bottom: 4px;
    line-height: 46px;
    text-align: center;
}

#img-man {
    position: absolute;
    top: 150px;
    left: 0px;
    width: 100px;
    height: 100px;
}

#start-system {
    transition: border .2s,color .4s;
}

    #start-system:hover {
        border: 1px solid pink;
        color: red;
    }
/*弹出框*/
.popover {
    width: auto;
    max-width: 800px;
}

 ´úÂë¹ÜÀí/PCS/WIDESEA_WCSClient/static/res/css/WebForm_MonitoringSystem.css

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,653 @@
* {
    margin: 0 auto;
    padding: 0;
    list-style-type: none;
    font-family: "微软雅黑";
}

.model-backcolor {
    background: rgb(144, 238, 144);
}

.nav-header {
    margin-left: 60px;
    width: 500px;
    height: 50px;
    line-height: 50px;
    text-align: left;
    color: white;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 2px;
    /*font-style:italic;斜体*/
}

.navbar-fixed-top {
    left: -17px !important;
    right: 17px !important;
    top: 6px !important;
}

#logo {
    width: 60px;
    height: 60px;
    margin-top: -8px;
}

#page > li {
    cursor: pointer;
}

.content {
    padding-top: 50px;
    height: 100%;
    width: 100%;
    min-width: 1000px;
}
.content-top {
    padding-top: 10px;
    height: 75%;
    width: 100%;
    min-width: 1000px;
}

.content-left{
    /*border:1px solid red;*/
    /*height:100%;*/
    float: left;
    /*overflow: auto;*/
    overflow-x: auto;
    overflow-y: auto;
}
.content-right {
    /*border:1px solid red;*/
    /*height:100%;*/
    float: left;
    /*overflow: auto;*/
    overflow-x: auto;
    overflow-y: auto;
}

.content-left {
    width: 39.2%;
    height: 100%;
    /*width: 80%;
    height: 40%;*/
    min-width: 382px;
}
.content-right {
    width: 100%;
    height: 100%;
    /*width: 80%;
    height: 40%;*/
    min-width: 800px;
}


.content-down {
    height: 100%;
    width: 100%;
    /*height: 60%;*/
    min-width: 382px;
    /*position: absolute;
    top: 735px;
    right: 8%;*/
}
.down-right {
    width: 57%;
    position: absolute;
    left: 800px;
}
/*图例*/
.legend {
    width: 100%;
    min-width: 300px;
    height: 50px;
    /*border:1px solid black;*/
}

    .legend > ul {
        float: right;
        height: 50px;
        /*border: 1px solid gray;*/
    }

        .legend > ul > li {
            border: 1px solid skyblue;
            float: left;
            width: 120px;
            height: 30px;
            text-align: center;
            border-radius: 5px;
            line-height: 30px;
            margin-right: 250px;
            margin-top: 15px;
        }

.monitoring-area .devices {
    border: 0px solid skyblue;
    background: white;
}

.monitoring-area {
    margin-top: -70px;
    padding-top: 90px;
    padding-left: 10%;
    width: 1850px;
    height: 100%;
    /*border: 1px solid blue;*/
    min-width:1080px;
}
    .monitoring-area .alart {
        background:white;
    }
.monitoring-area-left {
    margin-top: -70px;
    padding-top: 263px;
    padding-left: 5%;
    width: 100%;
    height: 100%;
    /*border: 1px solid blue;*/
}
.area-left {
    float: right;
}

.monitoring-area table tr td {
    text-align: center;
}

.panel table tr td {
    text-align: center;
}

.roadway {
    width: 100%;
}

    .roadway > li {
        width: 36px;
        height: 35px;
        border: 1px solid skyblue;
        float: left;
        margin-top:1px;
        margin-left: 2px;
        margin-bottom: 4px;
        /*background: #DADADA;*/
    }
.monitoring-area .wire {
    width: 36px;
    height: 25px;
    float: left;
    margin-top: 5px;
    margin-left: 2px;
    margin-bottom: 4px;
    text-align: center;
    border: 1px solid #f3f9f1;
    background: #DADADA;
}
.monitoring-area .inshelves {
    width: 25px;
    height: 30px;
    border: 1px solid #f3f9f1;
    /* border-radius: 3px; */
    margin-bottom: 4px;
    margin-left: 2px;
    margin-top: 5px;
    text-align: center;
    line-height: 46px;
    background: #DADADA;
    float: left;
}

.monitoring-area .hides {
    border: 0px solid #f3f9f1;
    background: white;
}
.monitoring-area .boxs {
    width: 36px;
    height: 35px;
    border: 1px solid skyblue;
    float: left;
    margin-top: 1px;
    margin-left: 2px;
    margin-bottom: 4px;
    background: white;
}
    /*.roadway1 {
    width: 830px;
}

    .roadway1 > li {
        width: 36px;
        height: 35px;
        float: left;
        margin-top: 5px;
        margin-left: 2px;
        margin-bottom: 4px;
        text-align:center;
    }*/
    /*.roadway2 {
    width: 830px;
}

.roadway2 > li {
    width: 100%;
    height: 100%;
    float: left;
    margin-top: 5px;
    margin-left: 2px;
    margin-bottom: 4px;
    text-align: center;
}*/
    .monitoring-area .injacking {
        background: #bfeab1;

    }

.roadway3 {
    width: 100%;
}
.roadway3 > li {
    width: 36px;
    height: 25px;
    float: left;
    margin-top: 5px;
    margin-left: 2px;
    margin-bottom: 4px;
    text-align: center;
    border: 1px solid #f3f9f1;
    background: #DADADA;
}
.roadway4 {
    width: 100%;
}

    .roadway4 > li {
        width: 36px;
        height: 35px;
        border: 1px solid skyblue;
        float: left;
        margin-top: 1px;
        margin-left: 2px;
        margin-bottom: 4px;
    }
.leftway1 {
    width: 100%;
}
    .leftway1 > li {
        width: 36px;
        height: 25px;
        border: 1px solid #f3f9f1;
        background: #DADADA;
        float: right;
        margin-top: 1px;
        margin-left: 2px;
        margin-bottom: 4px;
    }

.leftway2 {
    float: left;
}
.leftway2 > li {
    width: 36px;
    height: 25px;
    border: 1px solid #f3f9f1;
    background: #DADADA;
    margin-top: 1px;
    margin-left: 2px;
    margin-bottom: 4px;
}

.leftway3 > li {
    width: 36px;
    height: 25px;
    border: 1px solid #f3f9f1;
    background: #DADADA;
    margin-top: 1px;
    margin-left: 2px;
    margin-bottom: 4px;
    position: fixed;
    left: 632px;
    top: 232px;
}
.leftway4 > li {
    width: 36px;
    height: 25px;
    border: 1px solid #f3f9f1;
    background: #DADADA;
    float: right;
    margin-top: 1px;
    margin-right: 76px;
    margin-bottom: 4px;
}
.roadway_div {
   /* position: absolute;
    top: 275px;
    left: 10%;*/
   margin-left:5%;
   float:left;
}
.img1 {
    width: 45px;
}
.stacker {
    /* position: absolute;
    top: -1px; */
    width: 100%;
}

    .stacker > li {
        width: 36px;
        height: 25px;
        border: 1px solid #f3f9f1;
        /* border-radius: 3px; */
        margin-bottom: 4px;
        margin-left: 2px;
        margin-top: 5px;
        text-align: center;
        line-height: 46px;
        background: #DADADA;
        float: left;
    }
    .monitoring-area .devices {
    border: 0px solid skyblue;
    background: white;
}

.tr1 > td {
    padding: 5px
}

#stacker_1 {
    left: 50px;
}

#stacker_2 {
    right: 50px;
}

#conveyerline_L {
    position: absolute;
    bottom: -50px;
    left: -10px;
    height: 46px;
    width: 200px;
}

#conveyerline_R {
    position: absolute;
    bottom: -50px;
    left: -1px;
    height: 46px;
    width: 46px;
}

#conveyerline_L2 {
    position: absolute;
    bottom: -100px;
    left: -18px;
    height: 46px;
    width: 160px;
}

    #conveyerline_L > li, #conveyerline_L2 > li, #conveyerline_R > li {
        border: 1px solid blue;
        float: right;
        width: 46px;
        height: 46px;
        margin-left: 2px;
        margin-bottom: 4px;
        line-height: 46px;
        text-align: center;
        background: #DADADA;
    }

#img-man {
    position: absolute;
    top: 100px;
    width: 100px;
    height: 100px;
    left: -35px;
}

#start-system {
    transition: border .2s,color .4s;
}

    #start-system:hover {
        border: 1px solid pink;
        color: red;
    }
/*弹出框*/
.popover {
    width: auto;
    max-width: 800px;
}
/*光栅*/
.grating {
    width: 5px;
    height: 0%;
    background: red;
    transition: height 1s;
}

#grating_1001_1, #grating_1002_1, #grating_1010_1, #grating_1013_1 {
    float: left;
}

#grating_1001_2, #grating_1002_2, #grating_1013_2 {
    float: right;
}

#grating_1010_2 {
    width: 1%;
    height: 5px;
    background: red;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: width 1s;
}
/*#conveyerline_1001:hover .grating {
    height:100%;
}
#conveyerline_1002:hover .grating {
    height:100%;
}
#conveyerline_1008:hover .grating {
    height:100%;
}
#conveyerline_1010:hover #grating_1010_2 {
    width:100%;
}*/

#alarm {
    cursor: pointer;
}

/*未登录禁用按钮*/
.mask-box {
    position: relative;
    float: left;
    margin-right: 5px;
}

.btn-mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background: rgba(0,152,50,0.2);
}

/*调用changeColor*/
.device-warning {
    animation: changeColor .5s linear infinite;
}
/*呼吸灯闪烁效果*/
@keyframes changeColor {
    0% {
        background: #FF0033;
        box-shadow: 2px 2px 0px #FF0033;
    }

    20% {
        background: #FF0033;
        box-shadow: 2px 2px 20px #FF0033;
    }

    40% {
        background: #FF0000;
        box-shadow: 2px 2px 40px #FF0000;
    }

    60% {
        background: #CC0000;
        box-shadow: 2px 2px 60px #CC0000;
    }

    80% {
        background: #FF0000;
        box-shadow: 2px 2px 40px #FF0000;
    }

    100% {
        background: #FF0033;
        box-shadow: 2px 2px 20px #FF0033;
    }
}
/*安全门*/
#safe_door_G1001 {
    position: absolute;
    top: -12px;
    left: 0;
}

#safe_door_G1010 {
    position: absolute;
    left: -10px;
    bottom: -32px;
}

.safe-door {
    width: 120px;
    height: 5px;
}

.door-left1001, .door-left1010, .door-right1001, .door-right1010 {
    float: left;
    width: 60px;
    height: 100%;
}

.door-l, .door-r {
    float: left;
    width: 30px;
    height: 100%;
}

.door-r {
    background: black;
}

.safe-door-open1 {
    animation: action ease-in .5s;
    animation-fill-mode: forwards;
}

.safe-door-open2 {
    animation: action2 ease-in .5s;
    animation-fill-mode: forwards;
}
/*安全门开门效果*/
@keyframes action {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(-90deg);
    }
}

@keyframes action2 {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(90deg);
    }
}
/*安全门*/
/*光栅*/
.gs-warning {
    animation: changeWidth ease-in .5s,changeColor .5s linear infinite;
    animation-fill-mode: forwards;
}

.gs-warning-forhei {
    animation: changeHeight ease-in .5s,changeColor .5s linear infinite;
    animation-fill-mode: forwards;
}

@keyframes changeWidth {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@keyframes changeHeight {
    from {
        height: 0%;
    }

    to {
        height: 100%;
    }
}
/*光栅*/
/*报警心跳区域*/
#alarm-signs {
    position: absolute;
    width: 623px;
    height: 200px;
    left: 65px;
}

.heartbeat-tb tr td {
    font-size: 8px;
    width: 115px;
    height: 50px;
    /*border:1px solid black;*/
}

.sign-box {
    border: 1px solid skyblue;
    width: 20px;
    height: 10px;
    margin-top: -20px;
    background: #DADADA;
}
/*报警心跳区域*/
/*日期*/
.demo {
    position: relative;
    width: 56%;
    margin-left: 10px;
}

    .demo i {
        position: absolute;
        bottom: 10px;
        right: 24px;
        top: auto;
        cursor: pointer;
    }

在上述文件截断后对比
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap.min.css
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/3.3.6/bootstrap-theme.css
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/3.3.6/bootstrap-theme.css.map
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/3.3.6/bootstrap-theme.min.css
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/3.3.6/bootstrap-theme.min.css.map
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/3.3.6/bootstrap.css
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/3.3.6/bootstrap.css.map
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/3.3.6/bootstrap.min.css
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/3.3.6/bootstrap.min.css.map
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/fonts/glyphicons-halflings-regular.eot
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/fonts/glyphicons-halflings-regular.svg
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/fonts/glyphicons-halflings-regular.ttf
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/fonts/glyphicons-halflings-regular.woff
代码管理/PCS/WIDESEA_WCSClient/static/res/css/bootstrap/fonts/glyphicons-halflings-regular.woff2
代码管理/PCS/WIDESEA_WCSClient/static/res/css/combo.select.css
代码管理/PCS/WIDESEA_WCSClient/static/res/css/flat-ui.min.css
代码管理/PCS/WIDESEA_WCSClient/static/res/css/font-awesome.min.css
代码管理/PCS/WIDESEA_WCSClient/static/res/css/iframe.css
代码管理/PCS/WIDESEA_WCSClient/static/res/css/query-combo-select.css
代码管理/PCS/WIDESEA_WCSClient/static/res/css/sweetalert.css
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/WdatePicker.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/calendar.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/lang/en.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/lang/zh-cn.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/lang/zh-tw.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/skin/WdatePicker.css
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/skin/datePicker.gif
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/skin/default/datepicker.css
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/skin/default/img.png
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/skin/whyGreen/bg.jpg
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/skin/whyGreen/datepicker.css
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/skin/whyGreen/img.gif
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/开发包/lang/en.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/开发包/lang/zh-cn.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/开发包/lang/zh-tw.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/开发包/readme.txt
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/开发包/skin/WdatePicker.css
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/开发包/skin/datePicker.gif
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/开发包/skin/default/datepicker.css
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/开发包/skin/default/img.gif
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/开发包/skin/whyGreen/bg.jpg
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/开发包/skin/whyGreen/datepicker.css
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DatePicker/开发包/skin/whyGreen/img.gif
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DateRangePicker/daterangepicker.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DateRangePicker/moment.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DateRangePicker/moment.min.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/DateRangePicker/my-daterangepicker.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/LogPagerRecords.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/WebForm_MonitoringSystem.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/bootstrap-paginator.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/bootstrap.min.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/bootstrap/3.3.6/bootstrap.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/bootstrap/3.3.6/bootstrap.min.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/bootstrap/3.3.6/npm.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/cbui.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/check-box.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/common.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/flat-ui.min.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/hand_task_pager.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/index.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/jquery-1.11.3.min.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/jquery.combo.select.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/jquery.min.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/jquery.validator.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/main.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/select-handle.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/select2.min.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/stackoperation.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/sweetalert.min.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/validate_empty.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/webcss.js
代码管理/PCS/WIDESEA_WCSClient/static/res/js/zDialog.js
代码管理/PCS/WIDESEA_WCSClient/static/right.png
代码管理/PCS/WIDESEA_WCSClient/static/ssx.png
代码管理/PCS/WIDESEA_WCSClient/static/stacker.jpg
代码管理/PCS/WIDESEA_WCSClient/static/top-bottom.png
代码管理/PCS/WIDESEA_WCSClient/static/top-right.png
代码管理/PCS/WIDESEA_WCSClient/static/top.png