首次提交

李林

2023-07-31 3306f59e3129058312cd4739ed0ea0f88d74d025

首次提交

 .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"]
}

 .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

 .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

 .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": {}
  }
}

 README.md

@@ -1,3 +1,4 @@
<<<<<<< HEAD
# å‰ç«¯ä¸­å¤©æµ·æ´‹

#### ä»‹ç»
@@ -37,3 +38,26 @@
4.  [GVP](https://gitee.com/gvp) å…¨ç§°æ˜¯ Gitee æœ€æœ‰ä»·å€¼å¼€æºé¡¹ç›®ï¼Œæ˜¯ç»¼åˆè¯„定出的优秀开源项目
5.  Gitee å®˜æ–¹æä¾›çš„使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee å°é¢äººç‰©æ˜¯ä¸€æ¡£ç”¨æ¥å±•ç¤º Gitee ä¼šå‘˜é£Žé‡‡çš„栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
=======
# vue_model

> A Vue.js project

## 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).
>>>>>>> c1c41a4 (首次提交)

 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'
    ))
  })
})

 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)
  }
}

 build/logo.png

 build/utils.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,102 @@
'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'
    //     // publicPath:'../../'
    //   })
    // } 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')
    })
  }
}

 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'
  }
}

 build/webpack.base.conf.js

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

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

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      Popper: ['popper.js', 'default']
    })
  ],
  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: [
      {
        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'
  }
}

 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)
    }
  })
})

 build/webpack.prod.conf.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,148 @@
'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 Timestamp = new Date().getTime();

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,
    // publicPath:'./',
    filename: utils.assetsPath('js/[name].[chunkhash].'+Timestamp+'.js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Timestamp+'.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

 config/dev.env.js

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

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

 config/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,80 @@
'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: {
      /* '/api': {
        // target: 'http://172.21.11.89:33355/',//本地启动
        target: '101.43.119.148:33355/', //项目部署
        // secure: false, // å¦‚果是https接口，需要配置这个参数
        ws: true, //跨域
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }, */
      cssSourceMap: false
    },

    // Various Dev Server settings
    host: '127.0.0.1', // can be overwritten by process.env.HOST
    port: 80, // 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-


    /**
     * 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
  }
}

 config/prod.env.js

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

 index.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="Expires" CONTENT="0">
    <meta http-equiv="Cache-Control" CONTENT="no-cache">
    <meta http-equiv="Pragma" CONTENT="no-cache">
    <title>中天电缆附件MOM</title>
    <link rel="icon" type="image/x-icon" href="./static/img/logo.png">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

 package-lock.json

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

 package.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,97 @@
{
  "name": "vue_model",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "LL",
  "private": true,
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
  "dependencies": {
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^1.0.2",
    "axios": "^0.21.4",
    "bin-code-editor": "^0.9.0",
    "bootstart": "0.0.0",
    "bootstrap": "^5.0.1",
    "dragula": "^3.7.3",
    "echarts": "^5.4.2",
    "element-ui": "^2.15.6",
    "event-source-polyfill": "^1.0.31",
    "highlight.js": "^11.0.1",
    "html2canvas": "^1.4.1",
    "iview": "^3.5.4",
    "layui": "^2.6.8",
    "muse-ui": "^3.0.2",
    "node-emoji": "^1.11.0",
    "popper.js": "^1.16.1",
    "qs": "^6.11.0",
    "sweetalert": "^2.1.2",
    "v-fit-columns": "^0.2.0",
    "vant": "^2.12.54",
    "view-design": "^4.6.1",
    "vue": "^2.5.2",
    "vue-axios": "^3.2.4",
    "vue-canvas-poster": "^1.2.1",
    "vue-qr": "^3.2.4",
    "vue-router": "^3.0.1",
    "vuedraggable": "^2.24.3",
    "wangeditor": "^4.7.15",
    "xlsx": "^0.16.0",
    "xlsx-style": "^0.8.13"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^7.1.1",
    "babel-plugin-syntax-jsx": "^6.18.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-preset-vue-app": "^2.0.0",
    "chalk": "^2.0.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.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",
    "jquery": "^3.6.0",
    "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",
    "qrcodejs2": "0.0.2",
    "rimraf": "^2.6.0",
    "semver": "^5.3.0",
    "shelljs": "^0.8.5",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "url-loader": "^0.5.8",
    "vue-drag-resize": "^1.5.4",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.7.14",
    "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"
  ]
}

 src/App.vue

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

<script>
  export default {
    name: 'App',
    created() {
      // const changeFavicon = link => {
      //   let $favicon = document.querySelector('link[rel="icon"]');
      //   if ($favicon !== null) {
      //     $favicon.href = link;
      //   } else {
      //     $favicon = document.createElement("link");
      //     $favicon.rel = "icon";
      //     $favicon.href = link;
      //     document.head.appendChild($favicon);
      //   }
      // };
      // let icon = '../../../../../static/img/heisur/logo.png'; // å›¾ç‰‡åœ°å€
      // changeFavicon(icon); // åŠ¨æ€ä¿®æ”¹ç½‘站图标
    }
  }
</script>
<style>
  /* @import url("../static/img/alifont/iconfont.css"); */
  @import url("//at.alicdn.com/t/c/font_4179845_y48isucsagi.css");

  * {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-family: "微软雅黑";
  }

  a {
    text-decoration: none;
  }

  .router-link-active {
    text-decoration: none;
  }

  .el-scrollbar .el-scrollbar__bar {
    opacity: 1 !important;
  }

  .el-select-dropdown__item span,.el-cascader-node__label{
    font-size: 0.8rem;
  }

  .el-dialog{
    border-radius: 6px;
    overflow: hidden;
    margin: 0 !important;
  }

  .el-dialog__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  input::-webkit-input-placeholder,
  textarea::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #999 !important;
    font-size: 10px;
  }

  input::-moz-placeholder,
  textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: #999 !important;
    font-size: 10px;
  }

  input:-ms-input-placeholder,
  textarea:-ms-input-placeholder {
    /* IE 10+ */
    color: #999 !important;
    font-size: 10px;
  }

  input:-moz-placeholder,
  textarea:-moz-placeholder {
    /* Firefox 18- */
    color: #999 !important;
    font-size: 10px;
  }

  .el-message p{
    color: #666 !important;
    font-size: 12px;
  }

  .el-message{
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 6px 10px;
    min-width: 0;
    border-radius: 6px;
  }

  table{
    border-collapse:collapse;
  }

  .el-popover{
    padding: 0;
  }

  .el-popper .popper__arrow{
    display: none ;
  }
</style>

 src/assets/api/controller.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,11 @@
const url = {
  "enter": "user/enter", //登录
  "selectTreeByMaterial": "material/selectTreeByMaterial" //查询物料的树
}

export default function(Vue) {
  //添加全局API
  Vue.prototype.$api = {
    url
  }
}

 src/components/tool/icon.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,125 @@
<style scoped>
  ::-webkit-scrollbar {
    width: 8px;
    background-color: #fff;
  }

  ::-webkit-scrollbar-thumb:vertical {
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 6px;
  }

  .icon {
    width: 488px;
    height: 350px;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    overflow: hidden;
    background-color: #fff;
  }

  .template_label {
    cursor: pointer;
    user-select: none;
    padding: 8px 10px;
    line-height: 12px;
  }

  .template_label i,
  span {
    font-size: 0.7rem;
    font-weight: bold;
  }

  .template_label i {
    float: right;
  }

  .template_icon {
    height: calc(350px - 20px - 63px);
    padding: 0 9px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    transition: .3s;
  }

  .template_icon div {
    width: 40px;
    height: 40px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
  }

  .template_icon div:hover {
    background-color: rgba(0, 0, 0, 0.03);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .template_icon div:active {
    opacity: .7;
  }

  .template_icon i {
    font-size: 22px;
    color: #666;
  }
</style>

<template>
  <div class="icon">
    <el-col>
      <el-input placeholder="输入关键字查询" size="small" prefix-icon="el-icon-search" v-model="search"
        style="font-size: 12px;"></el-input>
    </el-col>
    <el-col @click.native="shows.mainShow = !shows.mainShow" class="template_label">
      <span>系统图标</span>
      <i :class="shows.mainShow?'el-icon-caret-bottom':'el-icon-caret-right'"></i>
    </el-col>
    <el-collapse-transition>
      <el-col class="template_icon" v-show="shows.mainShow">
        <div v-for="(a, ai) in icons" :key="ai" :title="a.name" v-show="a.name.indexOf(search)>-1"
          @click="$emit('selectIcon', a)">
          <i :class="a.class"></i>
        </div>
      </el-col>
    </el-collapse-transition>
  </div>
</template>

<script>
  import iconfont from '../../../static/img/alifont/iconfont.json'
  import elicon from '../../../static/json/icon.json'
  export default {
    data() {
      return {
        search: '',
        shows: {
          mainShow: true
        },
        icons: []
      }
    },
    mounted() {
      if (this.icons.length == 0) {
        iconfont.glyphs.forEach(a => {
          this.icons.push({
            class: 'iconfont ' + iconfont['css_prefix_text'] + a['font_class'],
            name: a['name']
          })
        })
        elicon.forEach(a =>{
          this.icons.push({
            class: a,
            name: a
          })
        })
      }
    },
  }
</script>

 src/components/view/index-index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
<style scoped>
</style>

<template>
  <div class="index">index</div>
</template>

<script>
</script>

 src/components/view/standard-table/technology.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,130 @@
<style scoped>
  .standard {
    width: 100%;
    height: 100%;
  }
</style>
<style>
  .standard * {
    font-size: 14px;
  }

  .standard .has-gutter .el-table__cell {
    background-color: #F0F1F5 !important;
    color: #333;
  }

  .standard .has-gutter .el-table__cell .cell {
    font-size: 16px;
    font-weight: 500;
  }

  .standard .cell {
    color: #333;
    padding-left: 17px !important;
  }

  .standard {
    width: 100%;
    height: 100%;
    overflow: auto;
  }

  .standard .el-table__body-wrapper {
    height: 100%;
  }

  .standard .el-table__body {
    height: 100%;
  }
</style>

<template>
  <div class="standard">
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" row-key="id" border
      default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column type="index" label="序号" width="75">
      </el-table-column>
      <el-table-column prop="date" label="项目" width="350">
      </el-table-column>
      <el-table-column prop="name" label="单位" width="180">
      </el-table-column>
      <el-table-column prop="address" label="标准值">
      </el-table-column>
      <el-table-column prop="address" label="内控值">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 å¼„'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 å¼„'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 å¼„',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 å¼„'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 å¼„'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 å¼„'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 å¼„'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 å¼„'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 å¼„',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 å¼„'
        }],
        selects: []
      }
    },
    mounted() {},
    methods: {
      handleSelectionChange(val) {
        this.selects = val;
      }
    }
  }
</script>

 src/components/view/standard.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,217 @@
<style scoped>
  .standard {}

  .standard .title .el-button {
    height: 32px;
    border: 1px solid rgba(190, 190, 190, 0.44);
    box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
    padding: 0 12px;
  }

  .standard .title {
    margin-bottom: 10px;
    padding: 0 20px;
  }

  .thing {
    width: 100%;
    height: calc(100% - 48px);
    background-color: #fff;
    display: flex;
  }

  .thing .left {
    width: 295px;
    height: calc(100% - 32px);
    border-right: 3px solid rgb(245, 247, 251);
    padding: 16px;
  }

  .thing .left .custom-tree-node span {
    font-size: 14px;
  }

  .thing .left .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .node_i {
    color: orange;
  }

  .el-icon-delete {
    display: none;
    color: #004EA2;
  }

  .custom-tree-node:hover .el-icon-delete {
    display: inline;
  }

  .thing .right {
    width: calc(100% - 295px);
    height: 100%;
    overflow: hidden;
  }

  .thing .right .choose {
    padding: 21px 24px;
    display: flex;
    align-items: center;
  }

  .thing .right .choose * {
    font-size: 14px;
  }

  .thing .right .choose .el-button {
    height: 32px;
    border: 1px solid rgba(190, 190, 190, 0.44);
    box-shadow: 0px 2px 4px rgba(220, 220, 220, 0.41);
    padding: 0 12px;
  }

  .thing .right .table{
    margin-right: 24px;
    height: calc(100% - 74px);
  }
</style>
<style>
  .standard .title .el-button * {
    font-size: 14px;
  }

  .standard .thing .left .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
    background: rgba(58, 124, 253, 0.3);
    color: #004EA2;
  }

  .el-tree-node__content {
    height: 30px;
    border-radius: 2px;
  }
</style>

<template>
  <div class="standard">
    <div class="title">
      <el-row>
        <el-col :span="12">标准BOM</el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" style="background: #004EA2;">新增</el-button>
          <el-button icon="el-icon-edit-outline">修改</el-button>
          <el-button icon="el-icon-delete">删除</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="thing">
      <div class="left">
        <el-input v-model="search" suffix-icon="el-icon-search" placeholder="请输入搜索内容" size="small" clearable></el-input>
        <el-tree :data="list" ref="tree" :props="{children: 'children',label: 'name'}" node-key="id" default-expand-all
          :filter-node-method="filterNode" @node-click="handleNodeClick" highlight-current @node-expand="nodeOpen"
          @node-collapse="nodeClose">
          <div class="custom-tree-node" slot-scope="{ node, data }">
            <span><i :class="`node_i ${data.code != '[4]'?'el-icon-folder-opened':'el-icon-tickets'}`"></i>
              {{data.code}}{{ data.name }}</span>
            <el-button type="text" size="mini" @click.stop="remove(node, data)">
              <i class="el-icon-delete"></i>
            </el-button>
          </div>
        </el-tree>
      </div>
      <div class="right">
        <div class="choose">
          <span>类型：</span>
          <el-select v-model="tableType" size="small" placeholder="请选择" style="width: 224px;margin-right: 52px;">
            <el-option value="工艺文件"></el-option>
            <el-option value="技术指标"></el-option>
          </el-select>
          <span>{{tableType=='技术指标'?'项目：':'工艺名称：'}}</span>
          <el-input v-model="searchName" size="small" placeholder="请输入" style="width: 224px;margin-right: 24px;" clearable></el-input>
          <el-button size="mini"><span>重 ç½®</span></el-button>
          <el-button size="mini" type="primary" style="background: #004EA2;"><span>查 è¯¢</span></el-button>
        </div>
        <div class="table">
          <technology></technology>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import technology from "./standard-table/technology.vue"
  export default {
    components: {technology},
    data() {
      return {
        list: [{
          id: 0,
          name: "原材料",
          code: "[1]",
          children: []
        }, {
          id: 1,
          name: "成品",
          code: "[1]",
          children: []
        }, {
          id: 2,
          name: "半成品",
          code: "[1]",
          children: []
        }],
        search: null,
        tableType: "技术指标",
        searchName: ""
      }
    },
    watch: {
      search(val) {
        this.$refs.tree.filter(val);
      }
    },
    mounted() {
      this.selectMaterialTree()
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      remove(node, data) {
        this.$confirm("是否删除", "警告", {
          type: "warning"
        }).then(res => {
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.id === data.id);
          children.splice(index, 1);
        }).catch(e => {})
      },
      nodeOpen(data, node, el) {
        $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder-opened')
      },
      nodeClose(data, node, el) {
        $($(el.$el).find('.node_i')[0]).attr('class', 'node_i el-icon-folder')
      },
      selectMaterialTree() {
        this.$axios.get(this.$api.url.selectTreeByMaterial).then(res => {
          res.data.forEach(a => {
            this.list.forEach(b => {
              if (a.type == b.id) b.children = [a]
            })
          })
        })
      }
    }
  }
</script>

 src/main.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,109 @@
import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import VueAxios from 'vue-axios'
import $ from 'jquery'
import qs from 'qs'
import App from './App'
import VueRouter from "vue-router";
import router from './router/index'
import axios from 'axios'
import api from './assets/api/controller.js'
import swal from 'sweetalert'

Vue.prototype.LOCATIONVUE = "http://127.0.0.1:80/"; //前端本地端口

Vue.use(VueAxios, axios)
Vue.config.productionTip = false
Vue.use(VueRouter);
Vue.use(ElementUI);
Vue.use(qs);
Vue.use(api);

const javaApi = 'http://localhost:8001/'

axios.defaults.baseURL = javaApi
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// x-www-form-urlencoded
axios.defaults.withCredentials = true
axios.defaults.crossDomain = true
Vue.prototype.$axios = axios

import {
  Message
} from 'element-ui';
axios.interceptors.request.use(function(config) {
  let tk = sessionStorage.getItem("token")
  let token;
  if (tk != undefined && tk != '') {
    token = tk
  }
  if (token) {
    config.headers['token'] = "" + token
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
  }
  if (config.method === 'post' || config.method === 'put') {
    config.data = qs.stringify(config.data)
  }
  return config
}, function(error) {
  return Promise.reject(error)
})

axios.interceptors.response.use(res => {
  return res.data
}, async function(err) {
  if (JSON.stringify(err).indexOf('timeout of') > -1) {
    Message.error('请求超时，请检查网络设置')
  } else if (JSON.stringify(err).indexOf('ERR_CONNECTION_RESET') > -1 || JSON.stringify(err).indexOf(
      'Network Error') > -1) {
    Message.error('网络连接错误')
  } else if (err.response.status == "503") {
    Message.error('服务未响应')
  } else if (err.response.status == "404") {
    Message.error('请求失败，链接地址不存在')
  } else if (err.response.status == "403") {
    Message.error('token不存在')
  }else if (err.response.status == "402") {
    Message.error('无效签名，请重新登录')
    localStorage.removeItem('autoenter')
    window.location.href = '/enter'
  }  else if (err.response.status == "401") {
    await axios.post(javaApi + "user/refresh", {
      reToken: sessionStorage.getItem('reToken')
    }).then(res => {
      if (res.data.code==201) {
        Message.error('认证失败，需要重新登录')
        localStorage.removeItem('autoenter')
        window.location.href = '/enter'
        return Promise.reject(err)
      }
      sessionStorage.setItem('token', res.data.token)
      sessionStorage.setItem('reToken', res.data.reToken)
    })
    return axios(err.config)
  } else if (err.response.status == "500") {
    Message.error('服务端出现错误')
  }
  return Promise.reject(err)
})

// è·¯ç”±æ‹¦æˆªå™¨
router.beforeEach((to, from, next) => {
  // è·¯å¾„为product时验证是否登录，没有跳转至登录页面
  if (to.path.indexOf('/') > -1 && to.path.indexOf('/enter') != 0) {
    if (sessionStorage.getItem('token') == null || sessionStorage.getItem('token') == '' || sessionStorage.getItem(
        'token') == undefined) {
      next({
        path: '/enter'
      })
    }
  }
  next()
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

 src/router/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,25 @@
import Vue from 'vue'
import Router from 'vue-router'
import Index from "../view/index";
import NotFind from "../view/404.vue"
import Enter from "../view/enter.vue"

Vue.use(Router)

//获取原型对象上的push函数
const originalPush = Router.prototype.push
//修改原型对象中的push方法
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

export default new Router({
  mode: 'history',
  routes: [{
    path: "/",
    component: Index
  }, {
    path: "/enter",
    component: () => import("../view/enter.vue")
  }]
})

 src/view/404.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,45 @@
<template>
  <div class="container-fluid">
    <div class="text-center">
      <div class="error mx-auto" data-text="404">404</div>
      <p class="lead text-gray-800 mb-5">找不到你要访问的页面</p>
      <p class="text-gray-500 mb-0">页面不存在</p>
      <p><a href="/">返回首页</a></p>
      <el-button @click="back" type="danger" round>返回上一页</el-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    created() {
      const changeFavicon = (link) => {
        let $favicon = document.querySelector('link[rel="icon"]');
        if ($favicon !== null) {
          $favicon.href = link;
        } else {
          $favicon = document.createElement("link");
          $favicon.rel = "icon";
          $favicon.href = link;
          document.head.appendChild($favicon);
        }
      };
      let icon = "../../static/img/logo.png"; // å›¾ç‰‡åœ°å€
      changeFavicon(icon); // åŠ¨æ€ä¿®æ”¹ç½‘站图标
      let title = "访问出错"; // ç½‘站标题
      document.title = title; // åŠ¨æ€ä¿®æ”¹ç½‘站标题
    },
    methods: {
      back() {
        window.history.back();
      }
    }
  }
</script>

<style scoped src="../../static/css/sb-admin-2.min.css"></style>

 src/view/enter.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,205 @@
<style scoped>
  .enter {
    width: 100vw;
    height: 100vh;
    display: flex;
    background-image: url("../../static/img/登录.png");
    background-size: 100% 100%;
  }

  .left {
    width: calc(100% - 500px);
    height: 100%;
    overflow: hidden;
  }

  .left img {
    width: 100%;
    min-height: 100%;
  }

  .right {
    width: 600px;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .title_big {
    color: #004EA2;
    font-size: 40px;
    margin-bottom: 8px;
  }

  .title_small {
    color: #004EA2;
    font-size: 24px;
  }

  .elform {
    margin-top: 50px;
  }

  .sao {
    font-size: 14px;
    color: #004EA2;
    width: 100%;
    text-align: right;
  }
</style>

<style>
  .enter .el-form-item__label {
    font-size: 20px;
    color: #333;
    line-height: 48px;
  }

  .enter .el-form-item {
    margin-bottom: 30px;
  }

  .enter .el-input__inner {
    height: 48px;
  }

  .enter .el-button {
    background-color: #1763EB;
    color: #fff;
    border: 0;
    border-radius: 16px;
    width: 100%;
    height: 48px;
  }

  .enter input::-webkit-input-placeholder,
  .enter textarea::-webkit-input-placeholder {
    font-size: 14px;
  }

  .enter input::-moz-placeholder,
  .enter textarea::-moz-placeholder {
    font-size: 10px;
  }

  .enter input:-ms-input-placeholder,
  .enter textarea:-ms-input-placeholder {
    font-size: 10px;
  }

  .enter input:-moz-placeholder,
  .enter textarea:-moz-placeholder {
    font-size: 10px;
  }
</style>

<template>
  <div class="enter">
    <div class="left">
      <img src="../../static/img/登录背景.png">
    </div>
    <div class="right">
      <div style="width: calc(100% - 100px * 2);">
        <div class="title_big">欢迎您登录！</div>
        <div class="title_small">电缆附件新一代mom系统</div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="elform" :hide-required-asterisk="true">
          <el-form-item label="用户名" prop="account">
            <el-input v-model="ruleForm.account" placeholder="请输入账号" clearable></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="pwd">
            <el-input v-model="ruleForm.pwd" placeholder="请输入密码" clearable show-password></el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 8px;">
            <el-col :span="12"><el-checkbox v-model="ruleForm.remumberme">记住密码</el-checkbox></el-col>
            <el-col :span="12" style="text-align: right;"><el-checkbox
                v-model="ruleForm.autoenter">自动登录</el-checkbox></el-col>
          </el-form-item>
          <el-form-item style="margin-bottom: 15px;">
            <el-button type="primary" @click="submitForm('ruleForm')" :loading="btnload">立即登录</el-button>
          </el-form-item>
        </el-form>
        <div class="sao">微信扫码登录</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          account: null,
          pwd: null,
          remumberme: false,
          autoenter: false
        },
        rules: {
          account: [{
            required: true,
            message: '请输入账号',
            trigger: ['blur', 'change']
          }],
          pwd: [{
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change']
          }]
        },
        btnload: false
      }
    },
    mounted() {
      this.ruleForm.remumberme = JSON.parse(localStorage.getItem('rememberme'))==null?false:JSON.parse(localStorage.getItem('rememberme'))
      this.ruleForm.autoenter = JSON.parse(localStorage.getItem('autoenter'))==null?false:JSON.parse(localStorage.getItem('autoenter'))
      var user = JSON.parse(localStorage.getItem('user'))
      if (user != null && user != undefined) {
        if (this.ruleForm.remumberme==true) {
          this.ruleForm.account = user.account
          this.ruleForm.pwd = user.password
        }
        if (this.ruleForm.autoenter==true) {
          this.submitForm('ruleForm')
        }
      }
    },
    methods: {
      submitForm(formName) {
        this.btnload = true
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.post(this.$api.url.enter, {
              account: this.ruleForm.account,
              password: this.ruleForm.pwd
            }).then(res => {
              this.btnload = false
              if (res.data == null) {
                this.$message.error("账号或密码错误")
                return
              }
              localStorage.setItem('rememberme', this.ruleForm.remumberme)
              localStorage.setItem('autoenter', this.ruleForm.autoenter)
              if (this.ruleForm.remumberme==true||this.ruleForm.autoenter==true) localStorage.setItem('user', JSON.stringify({
                account: this.ruleForm.account,
                password: this.ruleForm.pwd,
                name: res.data.name
              }))
              sessionStorage.setItem('token', res.data.token)
              sessionStorage.setItem('reToken', res.data.reToken)
              this.$message.success("登录成功")
              this.$router.push('/')
            }).catch(e => {
              this.btnload = false
              this.$message.error('登录失败, è¯·è”系管理员')
            })
          } else {
            this.btnload = false
            this.$message.error('账号或密码未输入！')
            return false;
          }
        })
      },
    }
  }
</script>

 src/view/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,391 @@
<style scoped>
  .all {
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .title {
    width: 100%;
    height: 58px;
    display: flex;
    align-items: center;
    padding: 0 30px;
  }

  .logo {
    width: 130px;
  }

  .logo img {
    width: 100%;
    height: 100%;
  }

  .title .label {
    font-size: 18px;
    text-align: center;
    width: calc(100% - 130px - 200px);
  }

  .user {
    width: 200px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: right;
    color: #000;
  }

  .user * {
    margin: 0 5px;
  }

  .user img {
    margin-left: 20px;
    cursor: pointer;
    width: 14px;
  }

  .user span {
    font-size: 14px;
  }

  .left {
    width: 92px;
    height: calc(100vh - 58px - 40px);
    background-color: #004EA2;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 0;
  }

  .left .box {
    color: #fff;
    width: 68px;
    height: 68px;
    margin: 20px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 8px;
  }

  .left .box:active {
    opacity: .8;
  }

  .left .active_box {
    background-color: #fff;
    color: #004EA2;
  }

  .left .box i {
    font-size: 32px;
    margin-bottom: 8px;
  }

  .left .box div {
    font-size: 14px;
  }

  .small_menu {
    color: #666;
  }

  .small_menu .active_p {
    color: #004EA2;
  }

  .small_menu p {
    padding: 12px 15px;
    cursor: pointer;
  }

  .small_menu p:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .small_menu i {
    font-size: 16px;
  }

  .small_menu span {
    font-size: 14px;
  }

  .right {
    width: calc(100% - 92px);
    height: calc(100vh - 58px);
  }

  .tag {
    width: 100%;
    height: 36px;
    background: rgb(255, 255, 255);
    opacity: 0.8;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    color: #999;
    font-size: 14px;
  }

  .tag .el-icon-s-unfold {
    font-size: 18px;
    cursor: pointer;
    margin: 0 8px;
  }

  .tabs {
    min-width: calc(100% - 34px);
    height: 100%;
    align-items: center;
    display: flex;
    overflow-x: auto;
  }

  .tab {
    cursor: pointer;
    font-size: 14px;
    margin: 0 8px;
    line-height: 32px;
    transition: .3s;
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    user-select: none;
    flex-shrink: 0;
  }

  .tab i {
    font-size: 12px;
    display: none;
  }

  .active_tab {
    border-bottom: 2px solid #004EA2;
    color: #004EA2;
  }

  .active_tab i {
    display: inline;
    color: #004EA2;
  }

  .component_view {
    height: calc(100vh - 94px - 22px);
    width: calc(100% - 48px);
    padding: 11px 24px;
    background: rgb(245, 247, 251);
  }

  .com_index {
    width: 100%;
    height: 100%;
  }
</style>
<style>

</style>
<template>
  <div class="all">
    <div class="title">
      <div class="logo">
        <img src="../../static/img/logo 1.png">
      </div>
      <div class="label">电缆附件新一代mom系统</div>
      <div class="user">
        <el-avatar :size="24">{{userName.substring(0,1)}}</el-avatar>
        <span>{{userName}}</span>
        <img src="../../static/img/退出.png" @click="out">
      </div>
    </div>
    <div class="left">
      <div :class="`box ${activeBox==0?'active_box':''}`" @click="addTab(menu[0].c[0])">
        <i class="font icon-shouye"></i>
        <div>首页</div>
      </div>
      <el-popover placement="right-start" width="90" trigger="click" v-for="(a, ai) in menu" :key="ai" v-if="a.k!='0'">
        <div :class="`box ${activeBox==a.k?'active_box':''}`" @click="activeBox = a.k" slot="reference">
          <i :class="a.i"></i>
          <div>{{a.v}}</div>
        </div>
        <div class="small_menu">
          <p v-for="(b, bi) in a.c" :key="bi" :class="activeP==b.k?'active_p':''" @click="addTab(b)">
            <i :class="b.i"></i>
            <span>{{b.v}}</span>
          </p>
        </div>
      </el-popover>
    </div>
    <div class="right">
      <div class="tag">
        <i class="el-icon-s-unfold"></i>
        <div class="tabs">
          <div :class="`tab ${tabActive==a.k?'active_tab':''}`" v-for="(a, ai) in tabs" :key="ai"
            @click="upTabActive(a.k)">
            {{a.v}}
            <i class="el-icon-close" @click="removeTab(ai)"></i>
          </div>
        </div>
      </div>
      <div class="component_view">
        <component class="com_index" v-for="(com,index) in tabs" :is="com.u" :key="upIndex+'|'+index"
          v-show="com.k == tabActive">
        </component>
      </div>
    </div>
  </div>
</template>

<script>
  const requireComponent = require.context('../components/view', false, /\.vue/)
  var comObj = {};
  requireComponent.keys().forEach(fileName => {
    var names = fileName
      .split("/")
      .pop()
      .replace(".vue", "")
    const componentConfig = requireComponent(fileName);
    comObj[names] = componentConfig.default || componentConfig;
  });
  export default {
    components: comObj,
    data() {
      return {
        userName: "value",
        menu: [{
          k: 0,
          v: "首页",
          i: "font icon-shouye",
          c: [{
            k: 0,
            v: "首页",
            i: "font icon-shouye",
            u: "index-index"
          }]
        }, {
          k: 1,
          v: "技术管理",
          i: "font icon-shouye",
          c: [{
            k: 1,
            v: "标准BOM",
            i: "font icon-shouye",
            u: "standard"
          }, {
            k: 2,
            v: "技术文件",
            i: "font icon-shouye",
            u: ""
          }]
        }, {
          k: 2,
          v: "QMS管理",
          i: "font icon-shouye",
          c: [{
            k: 3,
            v: "原材料检验",
            i: "font icon-shouye",
            u: ""
          }, {
            k: 4,
            v: "原材料不合格品",
            i: "font icon-shouye",
            u: ""
          }, {
            k: 5,
            v: "过程检验",
            i: "font icon-shouye",
            u: ""
          }, {
            k: 6,
            v: "成品检验",
            i: "font icon-shouye",
            u: ""
          }, {
            k: 7,
            v: "不合格品管理",
            i: "font icon-shouye",
            u: ""
          }, {
            k: 8,
            v: "实验室管理",
            i: "font icon-shouye",
            u: ""
          }, {
            k: 9,
            v: "质量统计",
            i: "font icon-shouye",
            u: ""
          }, {
            k: 10,
            v: "计量管理",
            i: "font icon-shouye",
            u: ""
          }]
        }],
        activeBox: 1,
        activeP: 1,
        tabActive: 1,
        tabs: [{
          k: 1,
          v: "标准BOM",
          i: "font icon-shouye",
          u: "standard"
        }],
        upIndex: 0
      };
    },
    created() {},
    mounted() {
      this.userName = JSON.parse(localStorage.getItem("user")).name
    },
    methods: {
      addTab(ob) {
        if (ob.k == 0) this.activeBox = 0
        this.activeP = ob.k
        this.tabActive = ob.k
        let num = -1;
        this.tabs.forEach((a, ai) => {
          if (ob.k == a.k) {
            num = a.k
          }
        })
        if (num == -1) {
          this.tabs.push(ob)
        }
      },
      removeTab(index) {
        if (this.tabs.length > 1) {
          this.tabs.splice(index, 1)
          this.activeP = this.tabs[this.tabs.length - 1].k
          this.tabActive = this.tabs[this.tabs.length - 1].k
        } else {
          this.$message.warning("不能关闭最后的标签")
        }
      },
      upTabActive(num) {
        this.tabActive = num
        this.activeP = num
        if (num == 0) {
          this.activeBox = 0
        } else if (num > 0 && num <= 2) {
          this.activeBox = 1
        } else if (num > 2 && num <= 10) {
          this.activeBox = 2
        }
      },
      out() {
        sessionStorage.clear()
        localStorage.removeItem('autoenter')
        this.$router.push("/enter")
      }
    }
  }
</script>

 static/.gitkeep

 static/css/sb-admin-2.min.css

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

 static/img/logo 1.png

 static/img/logo.png

 static/img/怬.png

 static/img/µÇ¼±³¾°.png

 static/img/Í˳ö.png

 static/img/Ê×Ò³.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,7 @@
<svg width="28.218750" height="25.336914" viewBox="0 0 28.2188 25.3369" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <desc>
            Created with Pixso.
    </desc>
    <defs/>
    <path id="形状" d="M27.8613 9.99707L15.8887 0.608398C14.8652 -0.203125 13.2617 -0.203125 12.2402 0.608398L0.357422 10.002C-0.0507812 10.3242 -0.117188 10.9141 0.201172 11.3174C0.517578 11.7207 1.11328 11.791 1.51562 11.4736L1.89844 11.1709L1.89844 22.5254C1.89844 24.1328 3.56641 25.3369 5.05859 25.3369L23.8047 25.3369C25.2773 25.3369 26.2695 24.208 26.2695 22.5254L26.2695 11.1406L26.6934 11.4736C26.8633 11.6094 27.0664 11.6748 27.2715 11.6748C27.5488 11.6748 27.8262 11.5547 28.0137 11.3174C28.3398 10.9092 28.2656 10.3193 27.8613 9.99707ZM16.9004 23.457L16.9004 18.2109C16.9004 17.123 16.0234 15.9482 14.0898 15.9482C12.1582 15.9482 11.2773 17.123 11.2773 18.2109L11.2773 23.457L16.9004 23.457Z" clip-rule="evenodd" fill-rule="evenodd" fill="#004EA2" fill-opacity="1.000000"/>
</svg>

 static/js/jquery-3.3.1.js

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