'提交'

.babelrc

+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-vue-jsx", "transform-runtime"]
+}

.editorconfig

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

.gitignore

+.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

+// 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

+<<<<<<< HEAD
+# finance_serv
+=======
+# contractManagementSystem
+>>>>>>> df45bcf516c15bdfd4d93ed5c68fed43c156b7a6
+
+> 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).
+<<<<<<< HEAD
+=======
+
+## others
+  This is my first work after graduating from college.This is my first contract with Vue,JS,CSS and Element-ui.So,as you see,the code is too poor and too fat.I need time to make my code better.
+>>>>>>> df45bcf516c15bdfd4d93ed5c68fed43c156b7a6

build/build.js

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

+'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/utils.js

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

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

+'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)
+}
+
+
+
+module.exports = {
+  context: path.resolve(__dirname, '../'),
+  entry: {
+    app:['babel-polyfill','./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]')
+        }
+      },
+      {
+        test: /\\\\\\\\.css$/,
+        loader: "style!css"
+    },
+    {
+        test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
+        loader: "file"
+    }  
+    ]
+  },
+  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

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

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

config/dev.env.js

+'use strict'
+const merge = require('webpack-merge')
+const prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})

config/index.js

+'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: 8888, // 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

+'use strict'
+module.exports = {
+  NODE_ENV: '"production"'
+}

index.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico">
+  <title>合同管理系统</title>
+  <style>
+    input:focus,
+    textarea:focus {
+      background-color: papayawhip;
+    }
+
+  </style>
+</head>
+
+<body style="height: 100%;margin: 0">
+  <div id="app"></div>
+  <!-- built files will be auto injected -->
+</body>
+
+</html>

package.json

+{
+  "name": "finance_serv",
+  "version": "1.0.0",
+  "description": "A Vue.js project",
+  "author": "xmh",
+  "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": {
+    "axios": "^0.18.0",
+    "element-ui": "^2.4.4",
+    "numeral": "^2.0.6",
+    "pinyin": "^2.8.3",
+    "style-loader": "^0.21.0",
+    "vue": "^2.5.2",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
+  },
+  "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-polyfill": "^6.26.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "chalk": "^2.0.1",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.11",
+    "extract-text-webpack-plugin": "^3.0.0",
+    "file-loader": "^1.1.11",
+    "friendly-errors-webpack-plugin": "^1.6.1",
+    "html-webpack-plugin": "^2.30.1",
+    "mockjs": "^1.0.1-beta3",
+    "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",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "uglifyjs-webpack-plugin": "^1.1.1",
+    "url-loader": "^0.5.8",
+    "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"
+  ]
+}

src/App.vue

+<template>
+  <div id="app">
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "App",
+    methods: {},
+    data() {
+      return {};
+    }
+  };
+</script>
+  .el-container{
+
+  }
+<style>
+html,
+body,
+#app {
+  min-height: 700px;
+  height: 100%;
+}
+</style>

src/assets/icons/iconfont.css

+
+@font-face {font-family: "icon";
+  src: url('iconfont.eot?t=1536052905420'); /* IE9*/
+  src: url('iconfont.eot?t=1536052905420#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAp0AAsAAAAADyQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY8hUnVY21hcAAAAYAAAACmAAACJk10P79nbHlmAAACKAAABfEAAAgM+t+Z0WhlYWQAAAgcAAAAMQAAADYSiCNXaGhlYQAACFAAAAAeAAAAJAffA4tobXR4AAAIcAAAABIAAAAsLAD//2xvY2EAAAiEAAAAGAAAABgIHApcbWF4cAAACJwAAAAdAAAAIAEfAKpuYW1lAAAIvAAAAUIAAAI9Divfm3Bvc3QAAAoAAAAAcQAAAJiIjpiPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBye8T9/zNzwv4EhhrmBoQEozAiSAwDvTQzWeJzlkc0JwlAQhOflzxgERcQGXo6WZiFekrMnS0gD6SWXQKaMOPs2B9ES3OV7sMNbFmYAlABycRMFEF4IsHpKDUnP0SS9wF3zGScp2XJcIlv2HDhy4ryuQNIiu0/tq4L2rS+4bm1ahr1u5LpQosIOtcTqZ/f/6pDexzY15rBjySzRkXtgdOQj2Dr2n51jCbN3LGUOjqXP0ZHz4OQoA3B2UL8BZFQ6oAAAeJxdVV1oHNcVvufeuffOzEqzuzOzM5a0P9q/GSvSrqTV7qwit7vaRXGN1mmN7cRt1oltpQUphJKHPAjX0BiKCSUEG/pUcNL0oYFg8tZSilsMFYW+9Qci0Ze6T4VCaXDbN++45+7ajtOd4fzdc+8595tzzhIg+KOH8GdCCYFiCAvw6SHQPyrz/6359DA+i9p4DS2P/sQ+ZXVSJ31ctUAK7wQ02pF6Gn4efM+VyloKA/UsQkkoawfadYBWMWq3grDYagZJEG4BvIjC278+QTV+Uufm1Opm71a/uzOXzc7tdPu3epurUybXT3KNnrj79s//LdiDuAobEkDGvzO09xl7XzNYHd4YarqYTqw+3nfz8RGrU1NC14ZvAP/XL37539HfT4Ncl3Caa+wtqtO3mEYIvo/usU/YKfIyeZf8iNzGO4VRM2x3YBmCZahDcsLCciDLFmpChoFAhq9XwDv4eFu8RwHy0J0w1Bpd6KAatX0vQoZvEHpuEnzcLUWSimWKp8ogbIdBs4sR23476tKoQPGEtufLKkL4BDVflIJmBzyX3e5z3pecwVwLpGOcrUUpapnsG2eoadFUVDtrOJI250Djel/T+jrXYK5Jv/Ckx8+E7MuujN/UNLGdnnm1UFkK7OcW7epipfDaTHog0D5Iz7xWqCwG6cXn7GCpUnh1xh7EDwavU/r6YEy14sVe72IPrPXcRm5d2iY73aGYYa6aeQkDWfiaL2WqOcYl7ZxmGPT57EZ2XTomRUddObrKEaQE5eoqVx1dqen8zK/7xzfDcnE2l0pe4fxKMpWfLZXD3nFvslCazaesHU1TCzPFcrj57SdpIR3Nq7z6Fyc1+4DtM4sskA1CqupjjoENJyBLi0rPX4vaHdbIU38sBlCq02aHosG1KBvmdrdgJQL23t7eewyiFdjaXcekv4JZ186/efXN87XHWvzDcmd1dna1c3LCfrC1myvtdnEX7u3uliC7e+OUKuCNvfO12vm9cTGfguNf7FCMsHFdXmabJE1cklNVGZSLJZFJu95asRG10k1ZbjnFdDHjYv+xC0fGdHzBsm2LvmPZ23d/M/oD1I/ZR/TSkWFbD++NV/ams3dHNv38yD6melkowu7R+yRJHFIgi2SbnFMd/6UwAcMgfC36KjTDssiBq+DBHi4LmfG4Qg0a3hi0Vl0V8gRWz0fiOnlwVfFG7CeTFNgm0miUop/H/7hG6TUqfyUAhCLx95ckaNHXIw3kks7CYg5od3m5C5Athuy2l8st5XL0vm2N3nlyzdG7dOU/IFcUhCvy1lMpws5aWwuUstDL5GsreEh3pZbP9BYkcFAHLeUmdfFPdpOlSIYEk1nmYusJ7N8utvHauEYc65lKEPTy9TuslI81bZGLOLjUQpXdmZ8/d/Fcr1TqTRhLsTvXW5eCWPBFTYvzJVSv34kbxaceimHAR49wAAHdIqdQ8T1LTRohnwoZDI0TAidHEnOrj+eJmhoTGWermks4FxB8r4KL+fFQYh/VBHdcXtselDXddbTqYAAWngnIWUVzXF2rULrVTy8L1+FiZdZPT5s6Tbr2XG3jAG79Vhpukko9hL98TXdMbmwtHHvRTOu6cTYNF8zpafNb3OH8jKHrafMMo15R3za46eiDZCphGNLGbJ18bufYj4WApC3FPJaZiVg/ZA9x5CaIj2g3SAer7WWyQ75LruLtg0ooNOlpflRpo4AqCp7GVXnVYfyHkofIf9qz+G1QQBWFPLAJJB38atJ/Rq5OoAwUSPIZudqMsGbH+LbY73kcHxzEMedADw6Arov4r4dH8X3Mfv7oEIqjz+ScwaZcw8tyOpVJ/40OX3hhSMe0RfeHr+wztv/KcJ9x1xE8q7DXfipcm4qSdNNMjO5xgbY5pI74WLC0K0tSUfjO+LMoMnv5BmM3Ll9R9Mq1Dxj74Nr3PqT0w2HJka7NRLI2m0izBDyJq+hwn2L0MYWEIUzXbJgi4ZjXDWa5Rk1n0xl9A63CWDOdhDCvGq7F0J6ZZvo3zWTSfD6RTCYI+R9UzUhbAAAAeJxjYGRgYABi1RsvL8Xz23xl4GZhAIHrW/JXwuj///8fYGFk9gByORiYQKIAf0QNxgAAAHicY2BkYGBu+N/AEMPC8B8IWBgZgCIogBsAoMoGcQAAeJxjYWBgYCGI//8H0QAPQQIrAAAAAAAAAA4AHACEAXYB0AICAoICwgM4BAZ4nGNgZGBg4GaYx8DFAAJMQMwFZv8H8xkAGccBygAAAHicXZDLTsJAFIb/QkEtiQuNJu5mYYzRpFxcGNmSwJ4FeyhTLmk7zXQg4Wlc+gQuXfoUJm58Ef+WAws6Oaff+c9tMgCu8AsP+++GtmcPPqM913CGO+E6dSXs89wLN9DCo3CT+otwgGe8CrdwjRkneP4FoydshD2c4124hkt8CNepfwr75C/hBm7xLdyk/iMcYII/4RYevLdgYPXU6bma7dQqMllsMheUMNaLTTK1JZY20bZYmUx1w04ZjnSm7aGv2C56zsUqtiZVQw7QSWJUbs1aRy5cOpf32+1Y9DAyKa8xgIXGFI5+zueaYUe/QgSDDHHlHesOyph1Cz5Hwh57VA//CbMWBeMyUugiROeYHTGbVRWn+wpsObVH1XGnoll2pKSh3EBzY0JWyKvcmkpEPcSy6srRR5snPqkPq93pPz84YXYAAHicbYhRDsIgEAX3VQraqkkPwqEIYCVpWLJQibc3auKX8zOZoYG+TPSfGQMOUBihYXDECRNmnMk4Ee57uX4cuGfruTzHjdeUTY2tpbyqvUZRt7RFnYJ3EnSNTvx9Ka7WzhJs5mYfKfbL77yL6AXHAyMlAAAA') format('woff'),
+  url('iconfont.ttf?t=1536052905420') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1536052905420#icon') format('svg'); /* iOS 4.1- */
+}
+
+.icon {
+  font-family:"icon" !important;
+  font-size:16px;
+  font-style:normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.i-arrowup:before { content: "\e60f"; }
+
+.i-arrowdown-copy:before { content: "\e623"; }
+
+.i-login:before { content: "\e78d"; }
+
+.i-setting:before { content: "\e78e"; }
+
+.i-user:before { content: "\e7ae"; }
+
+.i-file:before { content: "\e7bb"; }
+
+.i-idcard:before { content: "\e7de"; }
+
+.i-search:before { content: "\e7e3"; }
+
+.i-password-not-view:before { content: "\e723"; }
+
+.i-password-view:before { content: "\e724"; }
+

src/assets/icons/iconfont.js

+(function(window){var svgSprite='<svg><symbol id="i-arrowup" viewBox="0 0 1024 1024"><path d="M297.347199 638.156258 726.652801 638.156258 511.806595 429.305603Z"  ></path></symbol><symbol id="i-arrowdown-copy" viewBox="0 0 1024 1024"><path d="M726.652801 429.305603 297.347199 429.305603 512.193405 638.156258Z"  ></path></symbol><symbol id="i-login" viewBox="0 0 1024 1024"><path d="M512.7 82c-152.5-0.4-286.7 78.5-363.4 197.7-3.4 5.3 0.4 12.3 6.7 12.3h70.3c4.8 0 9.3-2.1 12.3-5.8 7-8.5 14.5-16.7 22.4-24.5 32.6-32.5 70.5-58.1 112.7-75.9 43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 32.6 32.5 58.1 70.4 76 112.5C856.7 417.8 866 464.1 866 512s-9.4 94.2-27.8 137.8c-17.8 42.1-43.4 80-76 112.5s-70.5 58.1-112.7 75.9c-43.6 18.4-90 27.8-137.9 27.8-47.9 0-94.3-9.4-137.9-27.8-42.2-17.8-80.1-43.4-112.7-75.9-7.9-7.9-15.3-16.1-22.4-24.5-3-3.7-7.6-5.8-12.3-5.8H156c-6.3 0-10.2 7-6.7 12.3C225.9 863.2 359.5 942 511.6 942c236.2 0 428-190.1 430.4-425.6C944.4 277.1 752.3 82.6 512.7 82z"  ></path><path d="M222 624v-76h314c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H222v-76c0-6.7-7.8-10.5-13-6.3l-141.9 112c-4.1 3.2-4.1 9.4 0 12.6l141.9 112c5.2 4.1 13 0.4 13-6.3z"  ></path></symbol><symbol id="i-setting" viewBox="0 0 1024 1024"><path d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56c10.1-8.6 13.8-22.6 9.3-35.2l-0.9-2.6c-18.1-50.5-44.9-96.9-79.7-137.9l-1.8-2.1c-8.6-10.1-22.5-13.9-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85c-2.4-13.1-12.7-23.3-25.8-25.7l-2.7-0.5c-52.1-9.4-106.9-9.4-159 0l-2.7 0.5c-13.1 2.4-23.4 12.6-25.8 25.7l-15.8 85.4c-35.9 13.6-69.2 32.9-99 57.4l-81.9-29.1c-12.5-4.4-26.5-0.7-35.1 9.5l-1.8 2.1c-34.8 41.1-61.6 87.5-79.7 137.9l-0.9 2.6c-4.5 12.5-0.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5c-10.1 8.6-13.8 22.6-9.3 35.2l0.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1c8.6 10.1 22.5 13.9 35.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4c2.4 13.1 12.7 23.3 25.8 25.7l2.7 0.5c26.1 4.7 52.8 7.1 79.5 7.1 26.7 0 53.5-2.4 79.5-7.1l2.7-0.5c13.1-2.4 23.4-12.6 25.8-25.7l15.7-85c36.2-13.6 69.7-32.9 99.7-57.6l81.3 28.9c12.5 4.4 26.5 0.7 35.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l0.9-2.6c4.5-12.3 0.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9c-11.3 26.1-25.6 50.7-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97c-28.1 3.2-56.8 3.2-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9z"  ></path><path d="M512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176z m79.2 255.2C570 602.3 541.9 614 512 614c-29.9 0-58-11.7-79.2-32.8C411.7 560 400 531.9 400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8C612.3 444 624 472.1 624 502c0 29.9-11.7 58-32.8 79.2z"  ></path></symbol><symbol id="i-user" viewBox="0 0 1024 1024"><path d="M858.5 763.6c-18.9-44.8-46.1-85-80.6-119.5-34.5-34.5-74.7-61.6-119.5-80.6-0.4-0.2-0.8-0.3-1.2-0.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-0.4 0.2-0.8 0.3-1.2 0.5-44.8 18.9-85 46-119.5 80.6-34.5 34.5-61.6 74.7-80.6 119.5C146.9 807.5 137 854 136 901.8c-0.1 4.5 3.5 8.2 8 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c0.1 4.4 3.6 7.8 8 7.8h60c4.5 0 8.1-3.7 8-8.2-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"  ></path></symbol><symbol id="i-file" viewBox="0 0 1024 1024"><path d="M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326z m1.8 562H232V136h302v216c0 23.2 18.8 42 42 42h216v494z"  ></path></symbol><symbol id="i-idcard" viewBox="0 0 1024 1024"><path d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32z m-40 632H136V232h752v560z"  ></path><path d="M610.3 476h123.4c1.3 0 2.3-3.6 2.3-8v-48c0-4.4-1-8-2.3-8H610.3c-1.3 0-2.3 3.6-2.3 8v48c0 4.4 1 8 2.3 8zM615.1 620h185.7c3.9 0 7.1-3.6 7.1-8v-48c0-4.4-3.2-8-7.1-8H615.1c-3.9 0-7.1 3.6-7.1 8v48c0 4.4 3.2 8 7.1 8zM224 673h43.9c4.2 0 7.6-3.3 7.9-7.5 3.8-50.5 46-90.5 97.2-90.5s93.4 40 97.2 90.5c0.3 4.2 3.7 7.5 7.9 7.5H522c4.6 0 8.2-3.8 8-8.4-2.8-53.3-32-99.7-74.6-126.1 18.1-19.9 29.1-46.4 29.1-75.5 0-61.9-49.9-112-111.4-112s-111.4 50.1-111.4 112c0 29.1 11 55.5 29.1 75.5-42.7 26.5-71.8 72.8-74.6 126.1-0.4 4.6 3.2 8.4 7.8 8.4z m149-262c28.5 0 51.7 23.3 51.7 52s-23.2 52-51.7 52-51.7-23.3-51.7-52 23.2-52 51.7-52z"  ></path></symbol><symbol id="i-search" viewBox="0 0 1024 1024"><path d="M608 112c-167.9 0-304 136.1-304 304 0 70.3 23.9 135 63.9 186.5L114.3 856.1c-3.1 3.1-3.1 8.2 0 11.3l42.3 42.3c3.1 3.1 8.2 3.1 11.3 0l253.6-253.6C473 696.1 537.7 720 608 720c167.9 0 304-136.1 304-304S775.9 112 608 112z m161.2 465.2C726.2 620.3 668.9 644 608 644s-118.2-23.7-161.2-66.8C403.7 534.2 380 476.9 380 416s23.7-118.2 66.8-161.2c43-43.1 100.3-66.8 161.2-66.8s118.2 23.7 161.2 66.8c43.1 43 66.8 100.3 66.8 161.2s-23.7 118.2-66.8 161.2z"  ></path></symbol><symbol id="i-password-not-view" viewBox="0 0 1024 1024"><path d="M928.845558 421.757952l45.62944 70.99392c7.153664 11.13088 3.109888 25.468928-9.03168 32.0256-12.141568 6.556672-27.783168 2.849792-34.936832-8.27904l-44.27776-68.893696c-49.41824 28.005376-99.275776 49.5104-149.352448 65.000448l35.229696 77.840384c5.400576 11.931648-0.774144 25.616384-13.790208 30.5664-13.01504 4.950016-27.94496-0.709632-33.345536-12.640256l-36.436992-80.50688a22.441984 22.441984 0 0 1-0.78848-1.988608c-49.997824 11.56608-100.14208 17.321984-150.217728 17.747968v87.3216c0 12.918784-11.42272 23.390208-25.515008 23.390208-14.092288 0-25.516032-10.471424-25.516032-23.389184v-87.10144c0-0.54272 0.02048-1.08032 0.059392-1.6128-49.934336-3.134464-99.72736-11.423744-149.163008-24.389632 0.166912 3.328-0.442368 6.740992-1.927168 10.021888l-36.436992 80.50688c-5.400576 11.930624-20.329472 17.590272-33.345536 12.640256-13.016064-4.950016-19.18976-18.634752-13.790208-30.5664l36.435968-80.50688a23.037952 23.037952 0 0 1 3.433472-5.412864c-45.037568-14.46912-89.719808-32.734208-133.881856-54.429696a995.746816 995.746816 0 0 1-16.38912-8.240128l-47.9744 74.642432c-7.15264 11.128832-22.79424 14.835712-34.935808 8.27904-12.141568-6.556672-16.185344-20.89472-9.03168-32.024576l48.120832-74.870784c-17.281024-10.04544-33.57696-20.2496-48.82944-30.461952-11.23328-7.520256-21.10976-14.52544-29.564928-20.840448-5.169152-3.861504-8.773632-6.685696-10.745856-8.298496-10.514432-8.600576-11.431936-23.386112-2.050048-33.024 9.382912-9.638912 25.511936-10.479616 36.026368-1.87904 6.176768 5.052416 18.516992 14.270464 36.434944 26.267648 30.117888 20.164608 64.6656 40.364032 103.04512 59.218944 259.439616 127.455232 533.72416 128.717824 792.379392-79.681536 3.542016-2.863104 3.542016-2.863104 7.084032-5.766144 10.49088-8.624128 26.624-7.820288 36.031488 1.796096 9.409536 9.617408 8.531968 24.403968-1.958912 33.02912-3.73248 3.057664-3.73248 3.057664-7.465984 6.076416-26.23488 21.136384-52.64896 40.257536-79.210496 57.439232z"  ></path></symbol><symbol id="i-password-view" viewBox="0 0 1024 1024"><path d="M968.548352 614.418432c0-124.667904-203.543552-233.57952-458.737664-233.57952-255.22688 0-458.737664 108.9024-458.737664 233.57952s203.50976 233.578496 458.737664 233.578496c255.194112 0 458.737664-108.910592 458.737664-233.578496z m51.073024 0c0 161.544192-230.147072 284.690432-509.810688 284.690432C230.11328 899.108864 0 775.97184 0 614.418432 0 452.864 230.11328 329.728 509.810688 329.728c279.66464 0 509.810688 123.14624 509.810688 284.690432z"  ></path><path d="M460.292096 582.100992c3.84-21.878784 16.09728-40.85248 33.871872-53.301248 11.55584-8.091648 14.367744-24.026112 6.28224-35.590144-8.086528-11.564032-24.008704-14.377984-35.56352-6.286336-28.786688 20.159488-48.685056 50.962432-54.893568 86.335488-2.440192 13.9008 6.843392 27.150336 20.733952 29.591552 13.89056 2.44224 27.128832-6.847488 29.569024-20.749312z"  ></path><path d="M682.94656 594.01216c0-89.438208-72.479744-161.973248-161.850368-161.973248-89.358336 0-161.799168 72.522752-161.799168 161.972224s72.440832 161.972224 161.799168 161.972224c89.370624 0 161.850368-72.534016 161.850368-161.972224z m51.073024 0c0 117.664768-95.345664 213.082112-212.923392 213.082112C403.526656 807.094272 308.224 711.684096 308.224 594.01216 308.224 476.338176 403.526656 380.928 521.096192 380.928c117.577728 0 212.923392 95.417344 212.923392 213.08416zM729.363456 235.583488c-6.665216 12.438528-22.144 17.115136-34.573312 10.4448-12.429312-6.669312-17.101824-22.15936-10.437632-34.598912l27.222016-50.804736c6.665216-12.438528 22.144-17.115136 34.573312-10.4448 12.429312 6.669312 17.101824 22.15936 10.436608 34.598912l-27.220992 50.804736z m190.130176 78.82752c-8.54528 11.22816-24.567808 13.398016-35.7888 4.845568-11.218944-8.551424-13.386752-24.58624-4.841472-35.8144l34.270208-45.029376c8.54528-11.22816 24.567808-13.398016 35.787776-4.845568 11.218944 8.551424 13.387776 24.58624 4.842496 35.8144l-34.270208 45.029376zM378.037248 211.429376c6.664192 12.438528 1.99168 27.9296-10.437632 34.598912-12.429312 6.670336-27.908096 1.993728-34.573312-10.4448l-27.222016-50.804736c-6.664192-12.438528-1.99168-27.9296 10.437632-34.598912 12.429312-6.670336 27.908096-1.993728 34.573312 10.4448l27.222016 50.804736zM183.54688 283.4432c8.54528 11.22816 6.377472 27.262976-4.842496 35.8144-11.219968 8.552448-27.242496 6.382592-35.787776-4.845568L108.6464 269.381632c-8.54528-11.22816-6.377472-27.262976 4.84352-35.8144 11.218944-8.552448 27.241472-6.382592 35.786752 4.845568l34.270208 45.029376z m322.10944-132.958208c0-14.113792 11.43296-25.555968 25.535488-25.555968 14.103552 0 25.536512 11.442176 25.536512 25.555968v56.835072c0 14.114816-11.43296 25.555968-25.536512 25.555968-14.102528 0-25.536512-11.441152-25.536512-25.555968v-56.835072z"  ></path></symbol></svg>';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window)
\ No newline at end of file

src/assets/icons/iconfont.svg

+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="icon" horiz-adv-x="1024" >
+  <font-face
+    font-family="icon"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="arrowup" unicode="&#58895;" d="M297.347 257.844h429.306l-214.846 208.851z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="arrowdown-copy" unicode="&#58915;" d="M726.653 466.694h-429.306l214.846-208.851z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="login" unicode="&#59277;" d="M512.7 814c-152.5 0.4-286.7-78.5-363.4-197.7-3.4-5.3 0.4-12.3 6.7-12.3h70.3c4.8 0 9.3 2.1 12.3 5.8 7 8.5 14.5 16.7 22.4 24.5 32.6 32.5 70.5 58.1 112.7 75.9 43.6 18.4 90 27.8 137.9 27.8 47.9 0 94.3-9.3 137.9-27.8 42.2-17.8 80.1-43.4 112.7-75.9 32.6-32.5 58.1-70.4 76-112.5C856.7 478.2 866 431.9 866 384s-9.4-94.2-27.8-137.8c-17.8-42.1-43.4-80-76-112.5s-70.5-58.1-112.7-75.9c-43.6-18.4-90-27.8-137.9-27.8-47.9 0-94.3 9.4-137.9 27.8-42.2 17.8-80.1 43.4-112.7 75.9-7.9 7.9-15.3 16.1-22.4 24.5-3 3.7-7.6 5.8-12.3 5.8H156c-6.3 0-10.2-7-6.7-12.3C225.9 32.8 359.5-46 511.6-46c236.2 0 428 190.1 430.4 425.6C944.4 618.9 752.3 813.4 512.7 814zM222 272v76h314c4.4 0 8 3.6 8 8v56c0 4.4-3.6 8-8 8H222v76c0 6.7-7.8 10.5-13 6.3l-141.9-112c-4.1-3.2-4.1-9.4 0-12.6l141.9-112c5.2-4.1 13-0.4 13 6.3z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="setting" unicode="&#59278;" d="M924.8 270.3l-65.5 56c3.1 19 4.7 38.4 4.7 57.8s-1.6 38.8-4.7 57.8l65.5 56c10.1 8.6 13.8 22.6 9.3 35.2l-0.9 2.6c-18.1 50.5-44.9 96.9-79.7 137.9l-1.8 2.1c-8.6 10.1-22.5 13.9-35.1 9.5l-81.3-28.9c-30 24.6-63.5 44-99.7 57.6l-15.7 85c-2.4 13.1-12.7 23.3-25.8 25.7l-2.7 0.5c-52.1 9.4-106.9 9.4-159 0l-2.7-0.5c-13.1-2.4-23.4-12.6-25.8-25.7l-15.8-85.4c-35.9-13.6-69.2-32.9-99-57.4l-81.9 29.1c-12.5 4.4-26.5 0.7-35.1-9.5l-1.8-2.1c-34.8-41.1-61.6-87.5-79.7-137.9l-0.9-2.6c-4.5-12.5-0.8-26.5 9.3-35.2l66.3-56.6c-3.1-18.8-4.6-38-4.6-57.1 0-19.2 1.5-38.4 4.6-57.1L99 270.5c-10.1-8.6-13.8-22.6-9.3-35.2l0.9-2.6c18.1-50.4 44.9-96.9 79.7-137.9l1.8-2.1c8.6-10.1 22.5-13.9 35.1-9.5l81.9 29.1c29.8-24.5 63.1-43.9 99-57.4l15.8-85.4c2.4-13.1 12.7-23.3 25.8-25.7l2.7-0.5c26.1-4.7 52.8-7.1 79.5-7.1 26.7 0 53.5 2.4 79.5 7.1l2.7 0.5c13.1 2.4 23.4 12.6 25.8 25.7l15.7 85c36.2 13.6 69.7 32.9 99.7 57.6l81.3-28.9c12.5-4.4 26.5-0.7 35.1 9.5l1.8 2.1c34.8 41.1 61.6 87.5 79.7 137.9l0.9 2.6c4.5 12.3 0.8 26.3-9.3 35zM788.3 430.1c2.5-15.1 3.8-30.6 3.8-46.1s-1.3-31-3.8-46.1l-6.6-40.1 74.7-63.9c-11.3-26.1-25.6-50.7-42.6-73.6L721 193.2l-31.4-25.8c-23.9-19.6-50.5-35-79.3-45.8l-38.1-14.3-17.9-97c-28.1-3.2-56.8-3.2-85 0l-17.9 97.2-37.8 14.5c-28.5 10.8-55 26.2-78.7 45.7l-31.4 25.9-93.4-33.2c-17 22.9-31.2 47.6-42.6 73.6l75.5 64.5-6.5 40c-2.4 14.9-3.7 30.3-3.7 45.5 0 15.3 1.2 30.6 3.7 45.5l6.5 40-75.5 64.5c11.3 26.1 25.6 50.7 42.6 73.6l93.4-33.2 31.4 25.9c23.7 19.5 50.2 34.9 78.7 45.7l37.9 14.3 17.9 97.2c28.1 3.2 56.8 3.2 85 0l17.9-97 38.1-14.3c28.7-10.8 55.4-26.2 79.3-45.8l31.4-25.8 92.8 32.9c17-22.9 31.2-47.6 42.6-73.6L781.8 470l6.5-39.9zM512 570c-97.2 0-176-78.8-176-176s78.8-176 176-176 176 78.8 176 176-78.8 176-176 176z m79.2-255.2C570 293.7 541.9 282 512 282c-29.9 0-58 11.7-79.2 32.8C411.7 336 400 364.1 400 394c0 29.9 11.7 58 32.8 79.2C454 494.4 482.1 506 512 506c29.9 0 58-11.6 79.2-32.8C612.3 452 624 423.9 624 394c0-29.9-11.7-58-32.8-79.2z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="user" unicode="&#59310;" d="M858.5 132.4c-18.9 44.8-46.1 85-80.6 119.5-34.5 34.5-74.7 61.6-119.5 80.6-0.4 0.2-0.8 0.3-1.2 0.5C719.5 378 760 451.3 760 534c0 137-111 248-248 248S264 671 264 534c0-82.7 40.5-156 102.8-201.1-0.4-0.2-0.8-0.3-1.2-0.5-44.8-18.9-85-46-119.5-80.6-34.5-34.5-61.6-74.7-80.6-119.5C146.9 88.5 137 42 136-5.8c-0.1-4.5 3.5-8.2 8-8.2h60c4.4 0 7.9 3.5 8 7.8 2 77.2 33 149.5 87.8 204.3 56.7 56.7 132 87.9 212.2 87.9s155.5-31.2 212.2-87.9C779 143.3 810 71 812-6.2c0.1-4.4 3.6-7.8 8-7.8h60c4.5 0 8.1 3.7 8 8.2-1 47.8-10.9 94.3-29.5 138.2zM512 362c-45.9 0-89.1 17.9-121.6 50.4S340 488.1 340 534c0 45.9 17.9 89.1 50.4 121.6S466.1 706 512 706s89.1-17.9 121.6-50.4S684 579.9 684 534c0-45.9-17.9-89.1-50.4-121.6S557.9 362 512 362z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="file" unicode="&#59323;" d="M854.6 607.4L639.4 822.6c-6 6-14.1 9.4-22.6 9.4H192c-17.7 0-32-14.3-32-32v-832c0-17.7 14.3-32 32-32h640c17.7 0 32 14.3 32 32V584.7c0 8.5-3.4 16.7-9.4 22.7zM790.2 570H602V758.2L790.2 570z m1.8-562H232V760h302v-216c0-23.2 18.8-42 42-42h216v-494z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="idcard" unicode="&#59358;" d="M928 736H96c-17.7 0-32-14.3-32-32v-640c0-17.7 14.3-32 32-32h832c17.7 0 32 14.3 32 32V704c0 17.7-14.3 32-32 32z m-40-632H136V664h752v-560zM610.3 420h123.4c1.3 0 2.3 3.6 2.3 8v48c0 4.4-1 8-2.3 8H610.3c-1.3 0-2.3-3.6-2.3-8v-48c0-4.4 1-8 2.3-8zM615.1 276h185.7c3.9 0 7.1 3.6 7.1 8v48c0 4.4-3.2 8-7.1 8H615.1c-3.9 0-7.1-3.6-7.1-8v-48c0-4.4 3.2-8 7.1-8zM224 223h43.9c4.2 0 7.6 3.3 7.9 7.5 3.8 50.5 46 90.5 97.2 90.5s93.4-40 97.2-90.5c0.3-4.2 3.7-7.5 7.9-7.5H522c4.6 0 8.2 3.8 8 8.4-2.8 53.3-32 99.7-74.6 126.1 18.1 19.9 29.1 46.4 29.1 75.5 0 61.9-49.9 112-111.4 112s-111.4-50.1-111.4-112c0-29.1 11-55.5 29.1-75.5-42.7-26.5-71.8-72.8-74.6-126.1-0.4-4.6 3.2-8.4 7.8-8.4z m149 262c28.5 0 51.7-23.3 51.7-52s-23.2-52-51.7-52-51.7 23.3-51.7 52 23.2 52 51.7 52z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="search" unicode="&#59363;" d="M608 784c-167.9 0-304-136.1-304-304 0-70.3 23.9-135 63.9-186.5L114.3 39.9c-3.1-3.1-3.1-8.2 0-11.3l42.3-42.3c3.1-3.1 8.2-3.1 11.3 0l253.6 253.6C473 199.9 537.7 176 608 176c167.9 0 304 136.1 304 304S775.9 784 608 784z m161.2-465.2C726.2 275.7 668.9 252 608 252s-118.2 23.7-161.2 66.8C403.7 361.8 380 419.1 380 480s23.7 118.2 66.8 161.2c43 43.1 100.3 66.8 161.2 66.8s118.2-23.7 161.2-66.8c43.1-43 66.8-100.3 66.8-161.2s-23.7-118.2-66.8-161.2z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="password-not-view" unicode="&#59171;" d="M928.845558 474.242048l45.62944-70.99392c7.153664-11.13088 3.109888-25.468928-9.03168-32.0256-12.141568-6.556672-27.783168-2.849792-34.936832 8.27904l-44.27776 68.893696c-49.41824-28.005376-99.275776-49.5104-149.352448-65.000448l35.229696-77.840384c5.400576-11.931648-0.774144-25.616384-13.790208-30.5664-13.01504-4.950016-27.94496 0.709632-33.345536 12.640256l-36.436992 80.50688a22.441984 22.441984 0 0 0-0.78848 1.988608c-49.997824-11.56608-100.14208-17.321984-150.217728-17.747968v-87.3216c0-12.918784-11.42272-23.390208-25.515008-23.390208-14.092288 0-25.516032 10.471424-25.516032 23.389184v87.10144c0 0.54272 0.02048 1.08032 0.059392 1.6128-49.934336 3.134464-99.72736 11.423744-149.163008 24.389632 0.166912-3.328-0.442368-6.740992-1.927168-10.021888l-36.436992-80.50688c-5.400576-11.930624-20.329472-17.590272-33.345536-12.640256-13.016064 4.950016-19.18976 18.634752-13.790208 30.5664l36.435968 80.50688a23.037952 23.037952 0 0 0 3.433472 5.412864c-45.037568 14.46912-89.719808 32.734208-133.881856 54.429696a995.746816 995.746816 0 0 0-16.38912 8.240128l-47.9744-74.642432c-7.15264-11.128832-22.79424-14.835712-34.935808-8.27904-12.141568 6.556672-16.185344 20.89472-9.03168 32.024576l48.120832 74.870784c-17.281024 10.04544-33.57696 20.2496-48.82944 30.461952-11.23328 7.520256-21.10976 14.52544-29.564928 20.840448-5.169152 3.861504-8.773632 6.685696-10.745856 8.298496-10.514432 8.600576-11.431936 23.386112-2.050048 33.024 9.382912 9.638912 25.511936 10.479616 36.026368 1.87904 6.176768-5.052416 18.516992-14.270464 36.434944-26.267648 30.117888-20.164608 64.6656-40.364032 103.04512-59.218944 259.439616-127.455232 533.72416-128.717824 792.379392 79.681536 3.542016 2.863104 3.542016 2.863104 7.084032 5.766144 10.49088 8.624128 26.624 7.820288 36.031488-1.796096 9.409536-9.617408 8.531968-24.403968-1.958912-33.02912-3.73248-3.057664-3.73248-3.057664-7.465984-6.076416-26.23488-21.136384-52.64896-40.257536-79.210496-57.439232z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="password-view" unicode="&#59172;" d="M968.548352 281.581568c0 124.667904-203.543552 233.57952-458.737664 233.57952-255.22688 0-458.737664-108.9024-458.737664-233.57952s203.50976-233.578496 458.737664-233.578496c255.194112 0 458.737664 108.910592 458.737664 233.578496z m51.073024 0c0-161.544192-230.147072-284.690432-509.810688-284.690432C230.11328-3.108864 0 120.02816 0 281.581568 0 443.136 230.11328 566.272 509.810688 566.272c279.66464 0 509.810688-123.14624 509.810688-284.690432zM460.292096 313.899008c3.84 21.878784 16.09728 40.85248 33.871872 53.301248 11.55584 8.091648 14.367744 24.026112 6.28224 35.590144-8.086528 11.564032-24.008704 14.377984-35.56352 6.286336-28.786688-20.159488-48.685056-50.962432-54.893568-86.335488-2.440192-13.9008 6.843392-27.150336 20.733952-29.591552 13.89056-2.44224 27.128832 6.847488 29.569024 20.749312zM682.94656 301.98784c0 89.438208-72.479744 161.973248-161.850368 161.973248-89.358336 0-161.799168-72.522752-161.799168-161.972224s72.440832-161.972224 161.799168-161.972224c89.370624 0 161.850368 72.534016 161.850368 161.972224z m51.073024 0c0-117.664768-95.345664-213.082112-212.923392-213.082112C403.526656 88.905728 308.224 184.315904 308.224 301.98784 308.224 419.661824 403.526656 515.072 521.096192 515.072c117.577728 0 212.923392-95.417344 212.923392-213.08416zM729.363456 660.416512c-6.665216-12.438528-22.144-17.115136-34.573312-10.4448-12.429312 6.669312-17.101824 22.15936-10.437632 34.598912l27.222016 50.804736c6.665216 12.438528 22.144 17.115136 34.573312 10.4448 12.429312-6.669312 17.101824-22.15936 10.436608-34.598912l-27.220992-50.804736z m190.130176-78.82752c-8.54528-11.22816-24.567808-13.398016-35.7888-4.845568-11.218944 8.551424-13.386752 24.58624-4.841472 35.8144l34.270208 45.029376c8.54528 11.22816 24.567808 13.398016 35.787776 4.845568 11.218944-8.551424 13.387776-24.58624 4.842496-35.8144l-34.270208-45.029376zM378.037248 684.570624c6.664192-12.438528 1.99168-27.9296-10.437632-34.598912-12.429312-6.670336-27.908096-1.993728-34.573312 10.4448l-27.222016 50.804736c-6.664192 12.438528-1.99168 27.9296 10.437632 34.598912 12.429312 6.670336 27.908096 1.993728 34.573312-10.4448l27.222016-50.804736zM183.54688 612.5568c8.54528-11.22816 6.377472-27.262976-4.842496-35.8144-11.219968-8.552448-27.242496-6.382592-35.787776 4.845568L108.6464 626.618368c-8.54528 11.22816-6.377472 27.262976 4.84352 35.8144 11.218944 8.552448 27.241472 6.382592 35.786752-4.845568l34.270208-45.029376z m322.10944 132.958208c0 14.113792 11.43296 25.555968 25.535488 25.555968 14.103552 0 25.536512-11.442176 25.536512-25.555968v-56.835072c0-14.114816-11.43296-25.555968-25.536512-25.555968-14.102528 0-25.536512 11.441152-25.536512 25.555968v56.835072z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

src/components/login.vue

+<template>
+  <div class="color-change-5x " id="login_box" @click.ctrl.meta.alt="manager">
+    <el-row type="flex" justify="center" align="middle" style="height:80%">
+      <el-card class="box-card" shadow="always" style="min-width:25%">
+        <div slot="header" style="text-align:center" class="clearfix">
+          <span style="font-size:24px">合同管理系统</span>
+        </div>
+        <div>
+          <p id="fankui">使用中出现任何问题请及时反馈</p>
+        </div>
+        <el-form id="aa" ref="login_form" :model="form" :rules="rules" label-width="60px" label-position="top">
+          <el-form-item prop="username">
+            <el-input id="name" v-model="form.username">
+              <template slot="prepend">姓名</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item prop="password">
+            <el-input id="password" :type="password_type" v-model="form.password" auto-complete="off" @keyup.enter.native="submitForm('login_form')">
+              <template slot="prepend">密码</template>
+              <el-button slot="append" :icon="view_password" @click="show_password"></el-button>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button-group>
+              <el-button type="primary" @click="submitForm('login_form')">提交</el-button>
+              <el-button @click="resetForm('login_form')">重置</el-button>
+            </el-button-group>
+          </el-form-item>
+        </el-form>
+      </el-card>
+    </el-row>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "login",
+    data() {
+      return {
+        password_type: "password",
+        view_password: "icon i-password-not-view",
+        contract_base_url: this.$disparch_data.contract_base_url,
+        code_base_url: this.$disparch_data.code_base_url,
+        auth_base_url: this.$disparch_data.auth_base_url,
+        net_error: false,
+        form: {
+          username: "",
+          password: ""
+        },
+        rules: {
+          username: [{ required: true, message: "请输入用户名", trigger: "blur" }]
+          // password: [
+          //   { required: true, message: "请输入登录密码", trigger: "blur" }
+          // ]
+        }
+      };
+    },
+    methods: {
+      show_password() {
+        if (this.password_type == "password") {
+          (this.password_type = "text"),
+            (this.view_password = "icon i-password-view");
+        } else {
+          (this.password_type = "password"),
+            (this.view_password = "icon i-password-not-view");
+        }
+      },
+      submitForm(form) {
+        this.$refs[form].validate(valid => {
+          if (valid) {
+            this.$Axios({
+              method: "post",
+              url: this.auth_base_url + "users/login",
+              headers: { "Content-Type": "application/json" },
+              data: {
+                user_type: "user",
+                username: this.form.username,
+                password: this.form.password
+              }
+            })
+              .then(res => {
+                if (res.data.ecode) {
+                  this.$message({
+                    message: res.data.enote,
+                    type: "error"
+                  });
+                } else {
+                  window.localStorage.setItem("username", this.form.username);
+                  sessionStorage.setItem("login_check", true);
+                  sessionStorage.setItem("user_unid", res.data.user_unid);
+                  sessionStorage.setItem("rtoken", res.data.rtoken);
+                  sessionStorage.setItem(
+                    "user_roles",
+                    JSON.stringify(res.data.roles)
+                  );
+                  sessionStorage.setItem("user_name", res.data.user_name);
+                  /**
+                   * 这里应该用axios.all()
+                   */
+                  this.get_provinces();
+                  this.get_contract_state_data();
+                  this.get_contract_type_data();
+                  this.get_amount_state_unid_data();
+                  this.get_mainten_start_point_data();
+                  this.get_product_line_type_data();
+                  this.get_payment_type_data();
+                  this.$router.push({ path: "/nav/main" });
+                }
+              })
+              .catch(err => {
+                this.$message({
+                  message: "登录错误",
+                  type: "error"
+                });
+              });
+          }
+        });
+      },
+      resetForm(form) {
+        this.$refs[form].resetFields();
+      },
+      is_login() {},
+      get_provinces() {
+        this.$Axios({
+          method: "get",
+          url: this.code_base_url + "countries/0E229CD043/provinces"
+        })
+          .then(response => {
+            sessionStorage.setItem(
+              "provinces",
+              JSON.stringify(response.data.list_data)
+            );
+          })
+          .catch(err => {
+            this.$router.push({ path: "/" });
+            this.$message({
+              message: "网络错误",
+              type: "error"
+            });
+          });
+      },
+      get_contract_state_data() {
+        this.$Axios({
+          method: "get",
+          url: this.code_base_url + "custom/cates/13BEFACBCF/codes"
+        })
+          .then(res => {
+            sessionStorage.setItem(
+              "contract_state_data",
+              JSON.stringify(res.data.list_data)
+            );
+          })
+          .catch(err => {
+            this.$router.push({ path: "/" });
+            this.$message({
+              message: "网络错误",
+              type: "error"
+            });
+          });
+      },
+      get_contract_type_data() {
+        this.$Axios({
+          method: "get",
+          url: this.code_base_url + "custom/cates/8EC31D08A0/codes"
+        })
+          .then(res => {
+            sessionStorage.setItem(
+              "contract_type_data",
+              JSON.stringify(res.data.list_data)
+            );
+          })
+          .catch(err => {
+            this.$router.push({ path: "/" });
+            this.$message({
+              message: "网络错误",
+              type: "error"
+            });
+          });
+      },
+      get_amount_state_unid_data() {
+        this.$Axios({
+          method: "get",
+          url: this.code_base_url + "custom/cates/42407C5EF2/codes"
+        })
+          .then(res => {
+            sessionStorage.setItem(
+              "amount_state_unid_data",
+              JSON.stringify(res.data.list_data)
+            );
+          })
+          .catch(err => {
+            this.$router.push({ path: "/" });
+            this.$message({
+              message: "网络错误",
+              type: "error"
+            });
+          });
+      },
+      get_mainten_start_point_data() {
+        this.$Axios({
+          method: "get",
+          url: this.code_base_url + "custom/cates/55B997D596/codes"
+        })
+          .then(res => {
+            sessionStorage.setItem(
+              "mainten_start_point_data",
+              JSON.stringify(res.data.list_data)
+            );
+          })
+          .catch(err => {
+            this.$router.push({ path: "/" });
+            this.$message({
+              message: "网络错误",
+              type: "error"
+            });
+          });
+      },
+      get_product_line_type_data() {
+        this.$Axios({
+          method: "get",
+          url: this.code_base_url + "custom/cates/4FC51AD3C9/codes"
+        })
+          .then(res => {
+            sessionStorage.setItem(
+              "product_line_type_data",
+              JSON.stringify(res.data.list_data)
+            );
+          })
+          .catch(err => {
+            this.$router.push({ path: "/" });
+            this.$message({
+              message: "网络错误",
+              type: "error"
+            });
+          });
+      },
+      get_payment_type_data() {
+        this.$Axios({
+          method: "get",
+          url: this.code_base_url + "custom/cates/215649FB93/codes"
+        })
+          .then(res => {
+            sessionStorage.setItem(
+              "payment_type_data",
+              JSON.stringify(res.data.list_data)
+            );
+          })
+          .catch(err => {
+            this.$router.push({ path: "/" });
+            this.$message({
+              message: "网络错误",
+              type: "error"
+            });
+          });
+      },
+      get_salesperson() {
+        this.$Axios({
+          method: "get",
+          url: this.auth_base_url + "users",
+          params: {
+            norm_type: "employee"
+          }
+        })
+          .then(response => {
+            sessionStorage.setItem(
+              "salesperson_unid_selected_data",
+              JSON.stringify(response.data.list_data)
+            );
+          })
+          .catch(err => {
+            this.$router.push({ path: "/" });
+            this.$message({
+              message: "网络错误",
+              type: "error"
+            });
+          });
+      },
+      get_contract_unid() {
+        this.$Axios({
+          method: "get",
+          url: this.contract_base_url + "codes"
+        })
+          .then(response => {
+            sessionStorage.setItem(
+              "contract_unid_selected_data",
+              JSON.stringify(response.data)
+            );
+          })
+          .catch(err => {
+            this.$router.push({ path: "/" });
+            this.$message({
+              message: "网络错误",
+              type: "error"
+            });
+          });
+      },
+      get_projects() {
+        this.$Axios({
+          method: "get",
+          url: this.contract_base_url + "projects",
+          headers: { "Content-Type": "application/json" }
+        })
+          .then(response => {
+            sessionStorage.setItem(
+              "project_unid_selected_data",
+              JSON.stringify(response.data)
+            );
+          })
+          .catch(err => {
+            this.$router.push({ path: "/" });
+            this.$message({
+              message: "网络错误",
+              type: "error"
+            });
+          });
+      },
+      manager() {
+        sessionStorage.setItem("manager", "1");
+        sessionStorage.setItem("login_check", "1");
+        this.get_provinces();
+        this.get_contract_state_data();
+        this.get_contract_type_data();
+        this.get_amount_state_unid_data();
+        this.get_mainten_start_point_data();
+        this.get_product_line_type_data();
+        this.get_payment_type_data();
+        this.$router.push({ path: "/nav/main" });
+      },
+      get_customers() {
+        this.$Axios({
+          method: "get",
+          url: this.contract_base_url + "customers",
+          headers: { "Content-Type": "application/json" }
+        })
+          .then(response => {
+            sessionStorage.setItem(
+              "customer_unid_selected_data",
+              JSON.stringify(response.data)
+            );
+          })
+          .catch(err => {
+            this.$router.push({ path: "/" });
+            this.$message({
+              message: "网络错误",
+              type: "error"
+            });
+          });
+      }
+    },
+    mounted() {
+      this.form.username = localStorage.getItem("username");
+    }
+  };
+</script>
+
+<style scoped>
+#login_box {
+  height: 100%;
+}
+#login_box .el-card {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-color: rgba(0, 0, 0, 0);
+}
+#fankui {
+  text-align: center;
+  margin-top: 0;
+}
+.color-change-5x {
+  -webkit-animation: color-change-5x 5s linear infinite alternate both;
+  animation: color-change-5x 5s linear infinite alternate both;
+}
+
+@-webkit-keyframes color-change-5x {
+  0% {
+    background: #19dcea;
+  }
+  25% {
+    background: #b22cff;
+  }
+  50% {
+    background: #ea2222;
+  }
+  75% {
+    background: #f5be10;
+  }
+  100% {
+    background: #3bd80d;
+  }
+}
+@keyframes color-change-5x {
+  0% {
+    background: #19dcea;
+  }
+  25% {
+    background: #b22cff;
+  }
+  50% {
+    background: #fd5f5f;
+  }
+  75% {
+    background: #f5be10;
+  }
+  100% {
+    background: #3bd80d;
+  }
+}
+</style>

src/components/main.vue

+<template>
+  <transition name="logo-fade">
+    <div style="align:center" v-show="show">
+      <span style="font-size:100px;margin-top:15%;margin-bottom:0;margin-left:auto;margin-right:auto;background-color:black;color:white;width:622px;display:block">合同管理系统</span>
+      <img src="../assets/logo.png" alt="">
+    </div>
+  </transition>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        show: false
+      };
+    },
+    mounted() {
+      this.show = true;
+    }
+  };
+</script>
+
+<style scoped>
+.logo-fade-enter-active {
+  transition: all 3.5s ease;
+}
+.logo-fade-enter {
+  opacity: 0;
+}
+</style>

src/components/manage.vue

+<template>
+  <el-card class="box-card" id="manage">
+    <div slot="header" class="clearfix">
+      <span style="font-size:24px;color:#eff0dc">后台管理</span>
+    </div>
+    <!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->
+    <el-row
+      type="flex"
+      justify="start"
+      style="text-align :left;border-bottom:1px solid #ebeef5;padding-bottom:18px"
+    >
+      <el-col :span="6">
+        <el-autocomplete
+          class="input"
+          :fetch-suggestions="search_contract_unid"
+          v-model="contract_unid"
+          placeholder="合同编号"
+        >
+          <template slot-scope="{ item }">
+            <span class="name">{{ item }}</span>
+          </template>
+        </el-autocomplete>
+        <el-button type="primary" @click="contract_unid_add">添加</el-button>
+      </el-col>
+      <el-col :span="6">
+        <el-autocomplete
+          class="input"
+          :fetch-suggestions="search_customer_name"
+          v-model="customer_name"
+          placeholder="客户名称"
+        >
+          <template slot-scope="{ item }">
+            <span class="name">{{ item.customer_name }}</span>
+          </template>
+        </el-autocomplete>
+        <el-button type="primary" @click="customer_name_add">添加</el-button>
+      </el-col>
+      <el-col :span="6">
+        <el-autocomplete
+          class="input"
+          :fetch-suggestions="search_salesperson"
+          v-model="salesperson"
+          placeholder="销售员"
+        >
+          <template slot-scope="{ item }">
+            <span class="name">{{ item.username }}</span>
+          </template>
+        </el-autocomplete>
+        <el-button type="primary" @click="salesperson_add('employee')">添加</el-button>
+      </el-col>
+      <el-col :span="6">
+        <el-autocomplete
+          class="input"
+          :fetch-suggestions="search_project_name"
+          v-model="project_name"
+          placeholder="项目名称"
+        >
+          <template slot-scope="{ item }">
+            <span class="name">{{ item.project_name }}</span>
+          </template>
+        </el-autocomplete>
+        <el-button type="primary" @click="project_name_add">添加</el-button>
+      </el-col>
+    </el-row>
+    <el-row
+      type="flex"
+      justify="start"
+      style="text-align :left;border-bottom:1px solid #ebeef5;padding-bottom:18px"
+    >
+      <el-col :span="6">
+        <el-autocomplete
+          class="input"
+          :fetch-suggestions="search_final_customer"
+          v-model="final_customer"
+          placeholder="最终用户"
+        >
+          <template slot-scope="{ item }">
+            <span class="name">{{ item.final_user_name }}</span>
+          </template>
+        </el-autocomplete>
+        <el-button type="primary" @click="final_customer_add">添加</el-button>
+      </el-col>
+    </el-row>
+    <el-row
+      style="border-bottom:1px solid rgb(235, 238, 245);padding-bottom:18px"
+      v-show="management"
+    >
+      <el-col :span="6">
+        <el-button class="add_button" type="primary" @click="product_line_type">产品线类型</el-button>
+      </el-col>
+      <el-col :span="6">
+        <el-button class="add_button" type="primary" @click="contract_statu">合同状态</el-button>
+      </el-col>
+      <el-col :span="6">
+        <el-button class="add_button" type="primary" @click="contract_type">合同性质</el-button>
+      </el-col>
+      <el-col :span="6">
+        <el-button class="add_button" type="primary" @click="amount_statu">账款状态</el-button>
+      </el-col>
+    </el-row>
+    <el-row v-show="management">
+      <el-col :span="6">
+        <el-button
+          class="add_button"
+          type="primary"
+          @click="login_user_dialog_show = !login_user_dialog_show"
+        >用户管理</el-button>
+      </el-col>
+      <el-col :span="6">
+        <el-button
+          class="add_button"
+          type="primary"
+          @click="modify_salesperson_dialog_show = !modify_salesperson_dialog_show"
+        >删除销售员</el-button>
+      </el-col>
+      <el-col :span="6">
+        <el-button
+          class="add_button"
+          type="primary"
+          @click="customer_trade_data_dialog_show = !customer_trade_data_dialog_show"
+        >大客户与行业管理</el-button>
+      </el-col>
+    </el-row>
+
+    <!--- ============================== 二级展开页面================================= -->
+    <el-dialog
+      :visible.sync="customer_trade_data_dialog_show"
+      width="20%"
+      :show-close="false"
+      title="一级行业-->二级行业-->大客户"
+    >
+      <el-form
+        :model="tree_add_data"
+        label-width="80px"
+        label-position="left"
+        :rules="tree_add_data_rules"
+      >
+        <el-form-item label="名称" prop="label">
+          <el-input v-model="tree_add_data.label"></el-input>
+        </el-form-item>
+        <el-form-item label="编码" prop="code">
+          <el-input v-model="tree_add_data.code"></el-input>
+        </el-form-item>
+      </el-form>
+      <el-tree
+        :indent="40"
+        :default-expand-all="true"
+        style="max-height:450px;min-height:100px;overflow:auto"
+        :data="customer_trade_data_final"
+        :expand-on-click-node="false"
+      >
+        <span class="custom-tree-node" slot-scope="{ node, data }">
+          <span>{{ node.label }}</span>
+          <span>
+            <el-button
+              type="text"
+              size="mini"
+              v-if="node.level < 3"
+              @click="add_click(node,data)"
+            >添加</el-button>
+            <el-button
+              type="text"
+              size="mini"
+              v-if="node.level > 1"
+              @click="delete_click(node,data)"
+            >删除</el-button>
+          </span>
+        </span>
+      </el-tree>
+    </el-dialog>
+
+    <el-dialog :visible.sync="login_user_dialog_show" width="30%" :show-close="false">
+      <el-tabs type="border-card" v-show="login_user_dialog_show" style="margin:auto">
+        <el-tab-pane label="新建用户">
+          <el-form
+            :model="login_user_form"
+            label-width="100px"
+            label-position="left"
+            :rules="login_user_form_rules"
+            ref="login_user_form"
+          >
+            <el-form-item label="用户类型" prop="role_unid">
+              <el-select
+                v-model="login_user_form.role_unid"
+                clearable
+                placeholder="用户类型"
+                style="width:100%"
+              >
+                <el-option
+                  v-for="item in roles"
+                  :key="item.role_unid"
+                  :label="item.name"
+                  :value="item.role_unid"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="用户名" prop="username">
+              <el-input v-model="login_user_form.username" placeholder="用户名" style="width:100%"></el-input>
+            </el-form-item>
+            <el-form-item label="姓名" prop="name">
+              <el-input v-model="login_user_form.name" placeholder="姓名" style="width:100%"></el-input>
+            </el-form-item>
+          </el-form>
+          <el-button-group>
+            <el-button type="primary" @click="login_user_dialog_confirm()">确 定</el-button>
+            <el-button type="primary" @click="login_user_dialog_cancel()">取 消</el-button>
+          </el-button-group>
+        </el-tab-pane>
+        <el-tab-pane label="权限管理">
+          <el-form
+            :model="selected_user_data"
+            label-width="60px"
+            label-position="left"
+            ref="selected_user_data"
+          >
+            <el-form-item label="姓名">
+              <el-input v-model="selected_user_data.user_name" :disabled="true"></el-input>
+            </el-form-item>
+            <el-form-item label="权限">
+              <el-select v-model="selected_user_data.user_role_unid" style="width:100%">
+                <el-option
+                  v-for="item in roles"
+                  :key="item.role_unid"
+                  :label="item.name"
+                  :value="item.role_unid"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-button-group>
+              <el-button type="primary" @click="user_role_modify">确定</el-button>
+              <el-button type="primary" @click="reset_role">重置</el-button>
+            </el-button-group>
+          </el-form>
+          <br>
+          <el-table :data="users_data" border style="max-height:350px;overflow-y:auto">
+            <el-table-column label="姓名" prop="name" min-width="20%" align="center"></el-table-column>
+            <el-table-column label="权限" prop="roles[0].name" min-width="20%" align="center"></el-table-column>
+            <el-table-column label="操作" min-width="20%" align="center">
+              <template slot-scope="scope">
+                <el-button type="text" @click="select_user_to_modify(scope.row)">修改</el-button>
+                <el-button type="text" @click="modify_salesperson(scope.row,false)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+    </el-dialog>
+    <el-dialog lock-scroll :visible.sync="add_dialog_show" width="30%" :show-close="false" style>
+      <el-input v-model="add_data.text"></el-input>
+      <el-button
+        type="primary"
+        style="width:100%;margin-bottom:20px;margin-top:5px"
+        @click="add_to_database"
+      >添加</el-button>
+      <el-table :data="add_data.data" style="max-height:350px;overflow-y:auto;z-index:inherit">
+        <el-table-column label="名称" prop="name" min-width="30%" align="center"></el-table-column>
+        <el-table-column label="码" prop="code" min-width="30%" align="center"></el-table-column>
+        <el-table-column label="操作" min-width="20%" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" @click="delete_code(scope.row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+    <el-dialog :visible.sync="modify_salesperson_dialog_show" width="30%" :show-close="false" style>
+      <el-table :data="all_salesperson" style="max-height:350px;overflow-y:auto;z-index:inherit">
+        <el-table-column label="姓名" prop="name" min-width="30%" align="center"></el-table-column>
+        <el-table-column label="创建时间" prop="create_dt" min-width="30%" align="center">
+          <template slot-scope="scope">{{get_create_date(scope.row)}}</template>
+        </el-table-column>
+        <el-table-column label="操作" min-width="20%" align="center">
+          <template slot-scope="scope">
+            <el-button
+              v-if="scope.row.is_active == true"
+              type="text"
+              @click="modify_salesperson(scope.row,false)"
+            >删除</el-button>
+            <el-button
+              v-if="scope.row.is_active == false"
+              type="text"
+              @click="modify_salesperson(scope.row,true)"
+            >恢复</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-dialog>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: "manage",
+    data() {
+      return {
+        management: false,
+        customer_trade_data: [],
+        customer_trade_data_final: [],
+        contract_unid_data: [],
+        customer_name_data: [],
+        salesperson_name_data: [],
+        project_name_data: [],
+        final_customer_data: [],
+        users_data: [],
+        all_salesperson: [],
+        customer_trade_data_dialog_show: false,
+        modify_salesperson_dialog_show: false,
+        add_dialog_show: false,
+        login_user_dialog_show: false,
+        code_base_url: this.$disparch_data.code_base_url,
+        contract_base_url: this.$disparch_data.contract_base_url,
+        auth_base_url: this.$disparch_data.auth_base_url,
+        contract_unid: null,
+        customer_name: null,
+        salesperson: null,
+        project_name: null,
+        final_customer: null,
+
+        tree_add_parent_data: null,
+        tree_add_parent_node: null,
+        tree_add_data: {
+          code: "",
+          label: ""
+        },
+
+        selected_user_data: {
+          user_unid: "",
+          user_name: "",
+          user_role_unid: ""
+        },
+        selected_user_role_unid_before_modify: "",
+
+        add_data: {
+          text: null,
+          data: [],
+          url: null
+        },
+        roles: [],
+        login_user_form: {
+          role_unid: "",
+          username: "",
+          name: "",
+          password: "vion2021",
+          norm_type: "login"
+        },
+
+        login_user_form_rules: {
+          username: {
+            required: true,
+            pattern: /^[a-zA-Z]{2,8}$/,
+            message: "请输入2至8位英文",
+            trigger: "blur"
+          },
+          name: {
+            required: true,
+            message: "请输入用户姓名",
+            trigger: "blur"
+          },
+          role_unid: {
+            required: true,
+            message: "请选择用户类型",
+            trigger: "blur"
+          }
+        },
+        tree_add_data_rules: {
+          code: {
+            required: true,
+            pattern: /^[a-zA-Z0-9]{4,20}$/,
+            message: "请输入4-20位数字或英文字母",
+            trigger: "blur"
+          },
+          label: {
+            required: true,
+            message: "请输入名称",
+            trigger: "blur"
+          }
+        }
+      };
+    },
+
+    methods: {
+      get_create_date(row) {
+        return row.create_dt.replace("T", " ");
+      },
+      //search
+      search_contract_unid(queryString, cb) {
+        var contract_unid_data = this.contract_unid_data;
+        var results = queryString
+          ? contract_unid_data.filter(this.contract_unid_filter(queryString))
+          : contract_unid_data;
+        cb(results);
+      },
+      search_customer_name(queryString, cb) {
+        var customer_name_data = this.customer_name_data;
+        var results = queryString
+          ? customer_name_data.filter(this.customer_name_filter(queryString))
+          : customer_name_data;
+        cb(results);
+      },
+      search_salesperson(queryString, cb) {
+        var salesperson_name_data = this.all_salesperson;
+        var results = queryString
+          ? salesperson_name_data.filter(this.salesperson_filter(queryString))
+          : salesperson_name_data;
+        cb(results);
+      },
+      search_project_name(queryString, cb) {
+        var project_name_data = this.project_name_data;
+        var results = queryString
+          ? project_name_data.filter(this.project_name_filter(queryString))
+          : project_name_data;
+        cb(results);
+      },
+      search_final_customer(queryString, cb) {
+        var final_customer_data = this.final_customer_data;
+        var results = queryString
+          ? final_customer_data.filter(this.final_customer_filter(queryString))
+          : final_customer_data;
+        cb(results);
+      },
+      final_customer_filter(queryString) {
+        return data => {
+          return data.final_user_name
+            ? data.final_user_name
+                .toLowerCase()
+                .indexOf(queryString.toLowerCase()) === 0
+            : "";
+        };
+      },
+
+      contract_unid_filter(queryString) {
+        return data => {
+          return data.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
+        };
+      },
+      customer_name_filter(queryString) {
+        return data => {
+          return data.customer_name
+            ? data.customer_name
+                .toLowerCase()
+                .indexOf(queryString.toLowerCase()) === 0
+            : "";
+        };
+      },
+      salesperson_filter(queryString) {
+        return data => {
+          return data.name
+            ? data.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
+            : "";
+        };
+      },
+      project_name_filter(queryString) {
+        return data => {
+          return data.project_name
+            ? data.project_name
+                .toLowerCase()
+                .indexOf(queryString.toLowerCase()) === 0
+            : "";
+        };
+      },
+
+      get_contract_unid() {
+        this.$Axios({
+          method: "get",
+          url: this.contract_base_url + "codes",
+          params: {
+            date: Date()
+          }
+        })
+          .then(response => {
+            this.contract_unid_data = response.data;
+          })
+          .catch(err => {
+            // console.log(err.message);
+          });
+      },
+      get_all_salesperson() {
+        this.$Axios({
+          method: "get",
+          url: this.auth_base_url + "users",
+          params: {
+            norm_type: "employee",
+            date: Date()
+          }
+        })
+          .then(response => {
+            this.salesperson_name_data = response.data.list_data;
+            this.$Axios({
+              method: "get",
+              url: this.auth_base_url + "users",
+              params: {
+                is_active: false,
+                norm_type: "employee",
+                date: Date()
+              }
+            })
+              .then(res => {
+                console.log(res);
+                this.all_salesperson = this.salesperson_name_data.concat(
+                  res.data.list_data
+                );
+              })
+              .catch(err => {
+                console.log(err);
+              });
+          })
+          .catch(err => {
+            console.log(err.message);
+          });
+      },
+      get_salesperson() {
+        this.$Axios({
+          method: "get",
+          url: this.auth_base_url + "users",
+          params: {
+            norm_type: "employee",
+            date: Date()
+          }
+        })
+          .then(response => {
+            this.salesperson_name_data = response.data.list_data;
+          })
+          .catch(err => {
+            // console.log(err.message);
+          });
+      },
+      get_customers() {
+        this.$Axios({
+          method: "get",
+          url: this.contract_base_url + "customers",
+          params: {
+            date: Date()
+          }
+        })
+          .then(response => {
+            this.customer_name_data = response.data;
+          })
+          .catch(err => {
+            // console.log(err.message);
+          });
+      },
+      get_projects() {
+        this.$Axios({
+          method: "get",
+          url: this.contract_base_url + "projects",
+          params: {
+            date: Date()
+          }
+        })
+          .then(response => {
+            this.project_name_data = response.data;
+          })
+          .catch(err => {
+            // console.log(err.message);
+          });
+      },
+      get_final_customers() {
+        this.$Axios({
+          method: "get",
+          url: this.contract_base_url + "finalusers",
+          params: {
+            date: Date()
+          }
+        })
+          .then(response => {
+            this.final_customer_data = response.data;
+          })
+          .catch(err => {
+            // console.log(err.message);
+          });
+      },
+      //search
+      // -----------------------
+      product_line_type() {
+        this.add_data.url = this.code_base_url + "custom/cates/4FC51AD3C9/codes";
+        this.get_data(this.add_data.url);
+      },
+      contract_statu() {
+        this.add_data.url = this.code_base_url + "custom/cates/13BEFACBCF/codes";
+        this.get_data(this.add_data.url);
+      },
+      contract_type() {
+        this.add_data.url = this.code_base_url + "custom/cates/8EC31D08A0/codes";
+        this.get_data(this.add_data.url);
+      },
+      amount_statu() {
+        this.add_data.url = this.code_base_url + "custom/cates/42407C5EF2/codes";
+        this.get_data(this.add_data.url);
+      },
+      delete_code(data) {
+        this.$confirm("确认删除数据？", "确认信息", {
+          confirmButtonText: "确认",
+          cancelButtonText: "取消"
+        })
+          .then(() => {
+            this.$Axios({
+              method: "delete",
+              url: this.add_data.url + "/" + data.unid
+            }).then(res => {
+              this.show_message("删除成功", "success");
+              this.get_data(this.add_data.url);
+            });
+          })
+          .catch(() => {});
+      },
+      /**
+       * 更新数据统一调用的方法，add_data是自定义的对象
+       */
+      get_data(url) {
+        this.$Axios.get(url).then(res => {
+          if (res.data.list_data) {
+            this.add_data.data = res.data.list_data;
+            this.add_dialog_show = true;
+          }
+        });
+      },
+      add_to_database() {
+        if (this.add_data.text == null) {
+          this.$message.error("不能为空");
+          return;
+        }
+        var code = 0;
+        this.add_data.data.forEach(e => {
+          if (e.code > code) {
+            code = e.code;
+          }
+        });
+        code++;
+        this.$Axios({
+          method: "post",
+          url: this.add_data.url,
+          data: {
+            name: this.add_data.text.trim(),
+            note: this.add_data.text.trim(),
+            code: code
+          }
+        }).then(res => {
+          if (res.data.code == code) {
+            this.show_message("添加成功", "success");
+            this.add_data.text = null;
+            this.get_data(this.add_data.url);
+          }
+        });
+      },
+      get_users() {
+        this.$Axios({
+          method: "get",
+          url: this.auth_base_url + "users",
+          params: {
+            norm_type: "login",
+            date: Date()
+          }
+        })
+          .then(res => {
+            this.$set(this, "users_data", res.data.list_data);
+            // this.users_data = res.data.list_data;
+          })
+          .catch(err => {
+            // console.log(err.message);
+          });
+      },
+      // -----------------------
+      contract_unid_add() {
+        if (this.contract_unid) {
+          this.$Axios({
+            method: "post",
+            data: { contract_unid: this.contract_unid.trim() },
+            url: this.contract_base_url,
+            headers: { "Content-Type": "application/json" }
+          })
+            .then(response => {
+              if (response.data.ecode == "200") {
+                this.contract_unid = null;
+                this.show_message("添加成功", "success");
+                this.get_contract_unid();
+              } else if (response.data.ecode == "600") {
+                this.show_message("重复的合同编号", "error");
+              } else {
+                this.show_message("添加失败", "error");
+              }
+            })
+            .catch(err => {
+              // console.log(err);
+              this.show_message("添加失败", "error");
+            });
+        } else {
+          this.show_message("请填写信息", "info");
+        }
+      },
+      customer_name_add() {
+        if (this.customer_name) {
+          this.$Axios({
+            method: "post",
+            url: this.contract_base_url + "customers",
+            data: { customer_name: this.customer_name.trim() },
+            headers: { "Content-Type": "application/json" }
+          })
+            .then(response => {
+              if (response.data.ecode == "200") {
+                this.customer_name = null;
+                this.show_message("添加成功", "success");
+                this.get_customers();
+              } else if (response.data.ecode == "600") {
+                this.show_message("重复的客户名称", "error");
+              } else {
+                this.show_message("添加失败", "error");
+              }
+            })
+            .catch(err => {
+              // console.log(err);
+              this.show_message("添加失败", "error");
+            });
+        } else {
+          this.show_message("请填写信息", "info");
+        }
+      },
+      salesperson_add(type) {
+        if (this.salesperson) {
+          this.$Axios({
+            method: "post",
+            url: this.auth_base_url + "users",
+            data: {
+              norm_type: type,
+              username: this.salesperson.trim(),
+              name: this.salesperson.trim(),
+              password: "vion2021"
+            },
+            headers: { "Content-Type": "application/json" }
+          })
+            .then(response => {
+              if (response.data.name) {
+                this.salesperson = null;
+                this.show_message("添加成功", "success");
+                this.get_all_salesperson();
+              }
+            })
+            .catch(err => {
+              this.show_message("添加失败", "error");
+              // console.log(err.message);
+            });
+        } else {
+          this.show_message("请填写信息", "info");
+        }
+      },
+      modify_salesperson(row, is_active) {
+        this.$Axios({
+          method: "post",
+          url: this.auth_base_url + "users/" + row.user_unid,
+          data: {
+            is_active: is_active,
+            date: Date()
+          }
+        })
+          .then(res => {
+            this.get_all_salesperson();
+          })
+          .catch(err => {
+            console.log(err);
+          });
+      },
+      project_name_add() {
+        if (this.project_name) {
+          this.$Axios({
+            method: "post",
+            url: this.contract_base_url + "projects",
+            data: { project_name: this.project_name.trim() },
+            headers: { "Content-Type": "application/json" }
+          })
+            .then(response => {
+              this.project_name = null;
+              if (response.data.ecode == "200") {
+                this.show_message("添加成功", "success");
+                this.get_projects();
+              } else if (response.data.ecode == "600") {
+                this.show_message("重复的项目名称", "error");
+              } else {
+                this.show_message("添加失败", "error");
+              }
+            })
+            .catch(err => {
+              // console.log(err);
+              this.show_message("添加失败", "error");
+            });
+        } else {
+          this.show_message("请填写信息", "info");
+        }
+      },
+      final_customer_add() {
+        if (this.final_customer) {
+          this.$Axios({
+            method: "post",
+            url: this.contract_base_url + "finalusers",
+            data: { final_user_name: this.final_customer.trim() },
+            headers: { "Content-Type": "application/json" }
+          })
+            .then(response => {
+              this.final_customer = null;
+              if (response.data.ecode == "200") {
+                this.show_message("添加成功", "success");
+                this.get_projects();
+              } else if (response.data.ecode == "600") {
+                this.show_message("重复的项目名称", "error");
+              } else {
+                this.show_message("添加失败", "error");
+              }
+            })
+            .catch(err => {
+              // console.log(err);
+              this.show_message("添加失败", "error");
+            });
+        } else {
+          this.show_message("请填写信息", "info");
+        }
+      },
+      show_message(message, type) {
+        this.$message({
+          message: message,
+          type: type,
+          center: true,
+          showClose: true,
+          duration: 3000
+        });
+      },
+      get_roles() {
+        this.$Axios({
+          method: "get",
+          url: this.auth_base_url + "roles",
+          params: {
+            date: Date()
+          }
+        })
+          .then(response => {
+            if (response.data.list_data) {
+              this.roles = response.data.list_data;
+            } else {
+              this.show_message("失败", "error");
+            }
+          })
+          .catch(err => {
+            this.show_message("失败", "error");
+            // console.log(err.message);
+          });
+      },
+      select_user_to_modify(row) {
+        if (!row.roles) {
+          return;
+        }
+        this.selected_user_data.user_name = row.name;
+        this.selected_user_data.user_unid = row.user_unid;
+
+        this.selected_user_data.user_role_unid = row.roles[0].role_unid;
+        this.selected_user_role_unid_before_modify = row.roles[0].role_unid;
+      },
+      reset_role() {
+        this.selected_user_data = {
+          user_unid: "",
+          user_name: "",
+          user_role_unid: ""
+        };
+        this.selected_user_role_unid_before_modify = "";
+      },
+      user_role_modify() {
+        if (
+          !this.selected_user_data.user_unid ||
+          !this.selected_user_data.user_role_unid ||
+          !this.selected_user_role_unid_before_modify
+        ) {
+          this.show_message("?????", "warning");
+          return;
+        }
+        var user_unid = this.selected_user_data.user_unid;
+        var role_unid = this.selected_user_data.user_role_unid;
+        var before_role = this.selected_user_role_unid_before_modify;
+        this.$Axios({
+          method: "delete",
+          url:
+            this.auth_base_url + "/users/" + user_unid + "/roles/" + before_role
+        })
+          .then(res => {
+            this.$Axios({
+              method: "post",
+              url: this.auth_base_url + "/users/" + user_unid + "/roles",
+              data: { role_unid: role_unid }
+            })
+              .then(res => {
+                this.show_message("修改成功", "success");
+                this.get_users();
+              })
+              .catch(err => {});
+          })
+          .catch(err => {});
+        this.reset_role();
+      },
+      login_user_dialog_cancel() {
+        this.$refs["login_user_form"].resetFields();
+        this.login_user_dialog_show = false;
+      },
+      login_user_dialog_confirm() {
+        this.$refs["login_user_form"].validate(valid => {
+          if (valid) {
+            this.$Axios({
+              method: "post",
+              url: this.auth_base_url + "users",
+              headers: { "Content-Type": "application/json" },
+              data: this.login_user_form
+            })
+              .then(res => {
+                if (res.data.user_unid) {
+                  this.$Axios({
+                    method: "post",
+                    url:
+                      this.auth_base_url +
+                      "users/" +
+                      res.data.user_unid +
+                      "/roles",
+                    headers: { "Content-Type": "application/json" },
+                    data: {
+                      role_unid: this.login_user_form.role_unid
+                    }
+                  })
+                    .then(res => {
+                      this.show_message("添加成功,默认密码: vion2021", "success");
+                      this.$refs["login_user_form"].resetFields();
+                      this.login_user_dialog_show = false;
+                    })
+                    .catch(err => {
+                      this.login_user_dialog_show = false;
+                      this.show_message("添加失败", "error");
+                    });
+                } else {
+                  this.show_message("添加失败", "error");
+                }
+              })
+              .catch(err => {
+                // console.log(err);
+                this.show_message("添加失败", "error");
+              });
+          }
+        });
+      },
+      change_dialog() {
+        if (localStorage.getItem("style")) {
+          var style = JSON.parse(localStorage.getItem("style"));
+          var dialogs = document.getElementsByClassName("el-dialog");
+          for (let i = 0; i < dialogs.length; i++) {
+            const e = dialogs[i];
+            e.style.backgroundColor = style.color;
+            e.style.backgroundImage = style.image;
+          }
+        }
+      },
+
+      //-----------------------------------大客户和行业管理----------------------
+      get_top_trade() {
+        this.customer_trade_data = [];
+        this.customer_trade_data_final = [];
+        this.$Axios({
+          method: "get",
+          url: this.code_base_url + "countries"
+        }).then(res => {
+          res.data.list_data.forEach(data => {
+            if (data.name != "中国") {
+              this.customer_trade_data.push(data);
+              var a = {
+                id: data.country_unid,
+                code: data.code,
+                label: data.name,
+                children: []
+              };
+              this.customer_trade_data_final.push(a);
+            }
+          });
+          for (let i = 0; i < this.customer_trade_data.length; i++) {
+            const e = this.customer_trade_data[i];
+            this.get_second_trade(e.country_unid, i);
+          }
+        });
+        console.log(this.customer_trade_data_final);
+      },
+      get_second_trade(unid) {
+        this.$Axios({
+          method: "get",
+          url: this.code_base_url + "countries/" + unid + "/provinces",
+          params: { depth: 1 }
+        }).then(res => {
+          this.customer_trade_data_final.forEach(final => {
+            if (final.id == unid && res.data.list_data) {
+              res.data.list_data.forEach(second => {
+                var a = {
+                  label: second.name,
+                  id: second.province_unid,
+                  code: second.code,
+                  children: []
+                };
+                if (second.cities.list_size > 0) {
+                  second.cities.list_data.forEach(third => {
+                    var b = {
+                      label: third.name,
+                      id: third.city_unid,
+                      code: third.code
+                    };
+                    a.children.push(b);
+                  });
+                }
+                final.children.push(a);
+              });
+            }
+          });
+        });
+      },
+      tree_node_add(node, data, url, country_unid, province_unid) {
+        if (
+          this.tree_add_data.label == null ||
+          this.tree_add_data.label == "" ||
+          this.tree_add_data.code == null ||
+          this.tree_add_data.code.length < 4 ||
+          this.tree_add_data.code.length > 20 ||
+          country_unid == null
+        ) {
+          this.show_message("数据有误,请填写正确数据", "error");
+          return;
+        }
+        var data = {
+          name: this.tree_add_data.label,
+          code: this.tree_add_data.code
+        };
+        if (province_unid == null) {
+          data.country = country_unid;
+        }
+        this.$Axios({
+          method: "POST",
+          data: data,
+          url: url
+        })
+          .then(res => {
+            if (res.data.code != null) {
+              this.show_message("添加成功", "success");
+              this.tree_add_data.label = null;
+              this.tree_add_data.code = null;
+              this.get_top_trade();
+            } else {
+              this.show_message("添加失败", "error");
+            }
+          })
+          .catch(err => {
+            this.show_message("错误", "error");
+          });
+      },
+
+      tree_node_delete(url) {
+        this.$Axios({
+          method: "DELETE",
+          url: url
+        })
+          .then(res => {
+            this.show_message("删除成功", "success");
+            this.get_top_trade();
+          })
+          .catch(err => {
+            this.show_message("错误", "error");
+            console.log(err);
+          });
+      },
+      tree_loader(node, resolve) {
+        resolve(node);
+        if (node.level < 2) {
+        }
+      },
+      add_click(node, data) {
+        this.tree_add_parent_data = data;
+        this.tree_add_parent_node = node;
+        var url;
+        var country_unid;
+        var province_unid;
+        if (node.level == 1) {
+          country_unid = data.id;
+          url = this.code_base_url + "countries/" + country_unid + "/provinces";
+        } else if (node.level == 2) {
+          country_unid = node.parent.data.id;
+          province_unid = data.id;
+          url = url =
+            this.code_base_url +
+            "countries/" +
+            country_unid +
+            "/provinces/" +
+            data.id +
+            "/cities";
+        }
+        this.tree_node_add(node, data, url, country_unid, province_unid);
+      },
+      delete_click(node, data) {
+        if (node.level < 3 && data.children.length > 0) {
+          this.show_message("子节点不为空不能删除", "error");
+          return;
+        }
+
+        var url;
+        var country_unid;
+        var province_unid;
+        var city_unid;
+        if (node.level == 2) {
+          province_unid = data.id;
+          country_unid = node.parent.data.id;
+          url =
+            this.code_base_url +
+            "countries/" +
+            country_unid +
+            "/provinces/" +
+            province_unid;
+        } else if (node.level == 3) {
+          city_unid = data.id;
+          province_unid = node.parent.data.id;
+          country_unid = node.parent.parent.data.id;
+          url =
+            this.code_base_url +
+            "countries/" +
+            country_unid +
+            "/provinces/" +
+            province_unid +
+            "/cities/" +
+            city_unid;
+        }
+        this.tree_node_delete(url);
+      }
+    },
+    created() {
+      if (sessionStorage.getItem("user_name") === "Admin") {
+        this.management = true;
+      }
+      this.get_top_trade();
+      this.get_roles();
+      this.get_users();
+      this.get_contract_unid();
+      this.get_final_customers();
+      // this.get_salesperson();
+      this.get_customers();
+      this.get_projects();
+      this.get_all_salesperson();
+    },
+    mounted() {
+      this.change_dialog();
+    }
+  };
+</script>
+
+<style scoped>
+#manage {
+  background-color: rgba(0, 0, 0, 0);
+}
+#manage .el-card__body {
+  background-color: rgba(0, 0, 0, 0);
+}
+.el-col {
+  text-align: center;
+}
+.input {
+  width: 200px;
+}
+.add_button {
+  display: inline-block;
+  font-size: 18px;
+  width: 75%;
+  min-width: 200px;
+  margin-top: 20px;
+}
+
+#manage >>> .el-button--primary {
+  border-color: #34352c;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+#manage >>> label {
+  color: black;
+}
+#manage >>> .el-dialog {
+  border-radius: 20px;
+  background-color: lightblue;
+}
+#manage >>> input {
+  border-color: black;
+  color: black;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+#manage >>> .el-card__header {
+  background-color: #34352c;
+}
+
+#manage >>> tr,
+#manage >>> .el-table {
+  background-color: rgba(0, 0, 0, 0);
+}
+#manage >>> th {
+  background-color: rgba(0, 0, 0, 0.2);
+  color: black;
+}
+#manage .el-table {
+  color: black;
+}
+#manage .el-tabs,
+#manage >>> .el-tabs__header {
+  background-color: rgba(0, 0, 0, 0);
+}
+#manage >>> .is-active {
+  background-color: rgba(0, 0, 0, 0.2);
+  color: black;
+}
+#manage >>> .el-table--border::after,
+.el-table--group::after,
+.el-table::before {
+  content: none;
+}
+#manage >>> .el-tree {
+  background-color: rgba(0, 0, 0, 0);
+}
+</style>
+

src/components/nav.vue

+<template>
+  <el-container id="nav">
+    <el-aside width="10%" style="background-color:black;position:relative">
+      <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router :collapse="false" text-color="white" background-color="rgba(0,0,0,0)" active-text-color="#ffd04b">
+        <div style="height:20%;text-align:center">
+          <img src="../assets/logo.png" alt="" style="width:100%;height:26%">
+        </div>
+
+        <el-menu-item index="/nav/search">
+          <i class="icon i-search"></i>
+          <span slot="title">检索合同</span>
+        </el-menu-item>
+        <el-menu-item index="/nav/contract/0" @click="contract" v-if="contract_show">
+          <i class="icon i-file"></i>
+          <span slot="title">合同信息</span>
+        </el-menu-item>
+        <el-menu-item index="/nav/user">
+          <i class="icon i-user"></i>
+          <span slot="title">个人管理</span>
+        </el-menu-item>
+        <el-menu-item index="/nav/manage" v-show="management">
+          <i class="icon i-setting"></i>
+          <span slot="title">后台管理</span>
+        </el-menu-item>
+        <el-menu-item index="" @click="exit">
+          <i class="icon i-login"></i>
+          <span slot="title">退出</span>
+        </el-menu-item>
+      </el-menu>
+      <div class="poem">
+        <div class="content" v-for="(item,index) in poem.sentences" :key="index" v-if="item">
+          {{item}}
+        </div>
+        <div class="content" v-if="poem.author">
+          丨丨{{poem.author}}
+        </div>
+      </div>
+    </el-aside>
+
+    <el-main :style="color">
+      <keep-alive include="search">
+        <router-view></router-view>
+      </keep-alive>
+    </el-main>
+  </el-container>
+
+</template>
+
+<script>
+  export default {
+    name: "HelloWorld",
+    data() {
+      return {
+        poem: {
+          author: "",
+          sentences: [,]
+        },
+        color: "background-color: lightblue",
+        management: false,
+        username: "",
+        department: "",
+        collapse: true,
+        contract_show: true
+      };
+    },
+
+    methods: {
+      contract() {
+        if (sessionStorage.getItem("modify")) {
+          sessionStorage.removeItem("modify");
+        }
+      },
+      exit() {
+        this.$confirm("确认退出?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            sessionStorage.clear();
+            this.$router.push({ path: "/" });
+          })
+          .catch(() => {});
+      },
+      get_poem() {
+        this.$Axios.get("https://api.gushi.ci/all.json").then(res => {
+          this.poem = res.data;
+          console.log(this.poem.content);
+          var reg = /[。；、，？！]/;
+          var a = this.poem.content.split(reg);
+          this.poem.sentences = a;
+        });
+      }
+    },
+    beforeCreate() {
+      if (!sessionStorage.getItem("login_check")) {
+        alert("请登录");
+        this.$router.push({ path: "/" });
+      }
+    },
+    created() {
+      if (
+        sessionStorage.getItem("user_roles") != "null" &&
+        sessionStorage.getItem("user_roles")
+      ) {
+        var roles = JSON.parse(sessionStorage.getItem("user_roles"));
+        for (let i = 0; i < roles.length; i++) {
+          const e = roles[i];
+          if (e.role_unid == "91d5185d47e3bad099e17570b0dd0ed2") {
+            this.management = true;
+          }
+        }
+      } else {
+        this.contract_show = false;
+      }
+      if (sessionStorage.getItem("user_name") === "Admin") {
+        this.management = true;
+      }
+      if (sessionStorage.getItem("manager")) {
+        this.management = true;
+        this.contract_show = true;
+      }
+
+      if (localStorage.getItem("color")) {
+        var style = {};
+        switch (localStorage.getItem("color")) {
+          case "天空蓝":
+            this.color = "background-color: lightblue";
+            style.color = "lightblue";
+            style.image = null;
+            break;
+          case "梦幻紫":
+            this.color =
+              "background-color:#8ec5fc;background-image:linear-gradient(225deg, #8ec5fc 0%, #e0c3fc 100%)";
+            style.color = "#8ec5fc";
+            style.image = "linear-gradient(225deg, #8ec5fc 0%, #e0c3fc 100%)";
+            break;
+          case "活力橙":
+            this.color =
+              "background-color:#FBAB7E;background-image:linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)";
+            style.color = "#FBAB7E";
+            style.image = "linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)";
+            break;
+          case "柠檬绿":
+            this.color =
+              "background-color:#F4D03F;background-image:linear-gradient(71deg, #F4D03F 0%, #16a046 92%)";
+            style.color = "#F4D03F";
+            style.image = "linear-gradient(71deg, #F4D03F 0%, #16a046 92%)";
+            break;
+          case "灰灰灰":
+            this.color = "background-color:#f0f0f0";
+            style.color = "#f0f0f0";
+            style.image = null;
+            break;
+          case "小清新":
+            this.color =
+              "background-color:#FFDEE9;background-image:linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)";
+            style.color = "#FFDEE9";
+            style.image = "linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)";
+            break;
+        }
+        localStorage.setItem("style", JSON.stringify(style));
+      }
+    },
+    mounted() {
+      // this.get_poem();
+    }
+  };
+</script>
+
+<style>
+.el-container > .el-main {
+  min-width: 1120px;
+  text-align: center;
+  padding: 0;
+  overflow-y: scroll;
+}
+.el-container,
+.el-aside {
+  min-width: 167px;
+  height: 100%;
+}
+.el-aside > .el-menu {
+  height: 100%;
+}
+.poem {
+  position: absolute;
+  margin: auto;
+  left: 15px;
+  bottom: 50px;
+}
+.content {
+  font-family: "隶书";
+  color: white;
+  display: inline-block;
+  width: 25px;
+  font-size: 20px;
+  line-height: 24px;
+  overflow: hidden;
+  word-wrap: break-word;
+}
+</style>

src/components/search.vue

+<template>
+  <div id="search" @keypress.enter.prevent="commit()">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span style="font-size:24px;padding-right:0px;color:#eff0dc">检索条件</span>
+      </div>
+      <el-form
+        id="form"
+        :inline="true"
+        :model="search_form"
+        class="demo-form-inline"
+        label-width="100px"
+        ref="search_form"
+        :rules="search_form_rules"
+      >
+        <el-row style="text-align:left">
+          <el-col :span="6">
+            <el-form-item label="合同编号" prop="contract_unid">
+              <el-input style="width:217px" v-model="search_form.contract_unid"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="项目名称" prop="project_name__like">
+              <el-input style="width:217px" v-model="search_form.project_name__like"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="客户名称" prop="customer_name__like">
+              <el-input style="width:217px" v-model="search_form.customer_name__like"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="账款状态" prop="amount_state_unid_data_list">
+              <el-select v-model="search_form.amount_state_unid_data_list" clearable multiple>
+                <el-option
+                  v-for="item in amount_state_unid_data"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row style="text-align:left">
+          <el-col :span="6">
+            <el-form-item label="所属年份" prop="year">
+              <el-select v-model="search_form.year" clearable>
+                <el-option v-for="n in year_list" :key="n" :label="n" :value="n"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="所属月份" prop="month">
+              <el-select v-model="search_form.month" clearable>
+                <el-option v-for="n in month_list" :key="n"  :label="n" :value="n"></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="销售员" v-if="sales">
+              <el-input style="width:217px" :readonly="true" v-model="salesperson_name"></el-input>
+            </el-form-item>
+            <el-form-item label="销售员" prop="salesperson_list" v-if="!sales">
+              <el-select v-model="search_form.salesperson_list" multiple collapse-tags>
+                <el-option
+                  v-for="item in salesperson_data"
+                  :key="item.user_unid"
+                  :label="item.name"
+                  :value="item.user_unid"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="合同状态" prop="contract_state_list">
+              <el-select v-model="search_form.contract_state_list" multiple>
+                <el-option
+                  v-for="item in contract_state_data"
+                  :key="item.code"
+                  :label="item.name"
+                  :value="item.code"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row style="text-align:left">
+          <el-col :span="12">
+            <el-form-item label="应收账款余额" prop="leave_amount_start_point">
+              <el-input v-model="search_form.leave_amount_start_point" placeholder="不填默认为0"></el-input>
+            </el-form-item>
+            <el-form-item prop="leave_amount_end_point">
+              <el-input v-model="search_form.leave_amount_end_point" placeholder="不填则无上限"></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-row>
+              <el-form-item label="行业及客户" prop="customer_trade_selected">
+                <el-cascader
+                  :options="customer_trade_data_final"
+                  v-model="search_form.customer_trade_selected"
+                  :change-on-select="true"
+                ></el-cascader>
+              </el-form-item>
+            </el-row>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item label="最终用户" prop="final_user">
+              <el-select
+                class="width-220"
+                v-model="search_form.final_user"
+                clearable
+                placeholder="最终用户"
+              >
+                <el-option
+                  v-for="item in final_user_name_data"
+                  :key="item.final_user"
+                  :label="item.final_user_name"
+                  :value="item.final_user"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <!-- hide -->
+        <el-row style="margin-bottom:10px">
+          <span id="hide_icon_text" @click="show_more">
+            -------
+            <i :class="hide_icon">{{hide_text}}</i>&nbsp;&nbsp;-------
+          </span>
+        </el-row>
+        <el-collapse-transition>
+          <div id="hide" v-show="!hide_search_item">
+            <el-row style="text-align:left">
+              <el-col :span="6">
+                <el-form-item label="合同性质" prop="contract_type">
+                  <el-select v-model="search_form.contract_type" clearable>
+                    <el-option
+                      v-for="item in contract_type_data"
+                      :key="item.code"
+                      :label="item.name"
+                      :value="item.code"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6" style="text-align:left">
+                <el-form-item label="省" prop="province">
+                  <el-select
+                    style="width:217px"
+                    v-model="search_form.province"
+                    filterable
+                    clearable
+                    placeholder="省"
+                    @change="get_cities()"
+                  >
+                    <el-option
+                      v-for="(item,index) in provinces"
+                      :key="index"
+                      :label="item.name"
+                      :value="item.province_unid"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6" style="text-align:left">
+                <el-form-item label="市" prop="city">
+                  <el-select
+                    style="width:217px"
+                    v-model="search_form.city"
+                    filterable
+                    clearable
+                    placeholder="市"
+                  >
+                    <el-option
+                      v-for="(item,index) in cities"
+                      :key="index"
+                      :label="item.name"
+                      :value="item.city_unid"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="质保周期(月)" prop="guarantee_period">
+                  <el-select v-model="search_form.guarantee_period" clearable>
+                    <el-option v-for="n in guarantee_period_list" :key="n" :label="n" :value="n"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row style="text-align:left">
+              <el-col :span="6">
+                <el-form-item label="产品线类型" prop="product_line_type">
+                  <el-select v-model="search_form.product_line_type" clearable>
+                    <el-option
+                      v-for="item in product_line_type_data"
+                      :key="item.code"
+                      :label="item.name"
+                      :value="item.code"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item label="是否终验" prop="acceptance_type">
+                  <el-select v-model="search_form.acceptance_type" clearable>
+                    <el-option label="是" :value="1"></el-option>
+                    <el-option label="否" :value="0"></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <!-- <el-col :span="6">
+                <el-form-item label="是否归档" prop="is_archive">
+                  <el-select v-model="search_form.is_archive" clearable>
+                    <el-option label="是" value=true></el-option>
+                    <el-option label="否" value=false></el-option>
+                  </el-select>
+                </el-form-item>
+              </el-col>-->
+              <el-col :span="6">
+                <el-form-item label="确认收入金额" prop="confirm_income_amount">
+                  <el-input style="width:217px" v-model="search_form.confirm_income_amount"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <!-- <el-row style="text-align:left">
+            </el-row>-->
+            <el-row style="text-align:left">
+              <el-col :span="12">
+                <el-form-item label="签订日期" prop="start_date">
+                  <el-date-picker
+                    style="width:202px"
+                    v-model="search_form.start_date"
+                    type="date"
+                    placeholder="开始日期"
+                    value-format="yyyy-MM-dd"
+                  ></el-date-picker>
+                </el-form-item>
+                <el-form-item prop="end_date">
+                  <el-date-picker
+                    style="width:202px"
+                    v-model="search_form.end_date"
+                    type="date"
+                    placeholder="结束日期"
+                    value-format="yyyy-MM-dd"
+                  ></el-date-picker>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="逾期天数" prop="overdays_start_point">
+                  <el-input v-model="search_form.overdays_start_point" placeholder="不填默认为0"></el-input>
+                </el-form-item>
+                <el-form-item prop="overdays_end_point">
+                  <el-input v-model="search_form.overdays_end_point" placeholder="不填则无上限"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row style="text-align:left">
+              <el-col :span="12">
+                <el-form-item label="合同金额" prop="amount_start_point">
+                  <el-input v-model="search_form.amount_start_point" placeholder="不填默认为0"></el-input>
+                </el-form-item>
+                <el-form-item prop="amount_end_point">
+                  <el-input v-model="search_form.amount_end_point" placeholder="不填则无上限"></el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </div>
+        </el-collapse-transition>
+      </el-form>
+      <el-row>
+        <el-button-group style="float:right">
+          <el-button type="primary" @click="commit()" size="small">检索</el-button>
+          <el-button type="primary" @click="reset()" size="small">重置</el-button>
+        </el-button-group>
+      </el-row>
+    </el-card>
+
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span style="font-size:24px;padding-right:0px;color:#eff0dc">检索结果</span>
+      </div>
+      <!-- test------------------------------------------------------------------------------------------------ -->
+      <!-- default-expand-all ： 是否默认展开所有行 -->
+      <el-table
+        id="data_table"
+        :data="list_data"
+        style="width: 100%;"
+        row-key="contract_unid"
+        border
+        :summary-method="getSummaries"
+        show-summary
+        max-height="800"
+      >
+        <el-table-column type="expand">
+          <template slot-scope="scope">
+            <el-row type="flex" justify="space-between" style="text-align:left;padding-bottom:5px">
+              <el-col :span="4">
+                <span class="pre">暂停金额:</span>
+                {{scope.row.stop_amount}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">坏账金额:</span>
+                {{scope.row.bad_amount}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">豁免金额:</span>
+                {{scope.row.exemptions_amount}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">抵扣金额:</span>
+                {{scope.row.deduct_amount}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">合同状态:</span>
+                {{scope.row.contract_state_name}}
+              </el-col>
+            </el-row>
+            <el-row type="flex" justify="space-between" style="text-align:left;padding-bottom:5px">
+              <el-col :span="4">
+                <span class="pre">验收款金额:</span>
+                {{scope.row.acceptanc_pay}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">产品线类型:</span>
+                {{scope.row.product_line_type_name}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">累计应收:</span>
+                {{scope.row.total_receive_amount}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">逾期天数:</span>
+                {{scope.row.over_days}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">质保金额:</span>
+                {{scope.row.mainten_pay_deliver}}
+              </el-col>
+            </el-row>
+            <el-row type="flex" justify="space-between" style="text-align:left;padding-bottom:5px">
+              <el-col :span="4">
+                <span class="pre">预付款金额:</span>
+                {{scope.row.advance_pay}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">预付款到期日:</span>
+                {{scope.row.advance_pay_date}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">到货款金额:</span>
+                {{scope.row.arrive_pay}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">发货日期:</span>
+                {{scope.row.deliver_date}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">到货款到期日:</span>
+                {{scope.row.arrive_pay_date}}
+              </el-col>
+            </el-row>
+            <el-row type="flex" justify="space-between" style="text-align:left;padding-bottom:5px">
+              <el-col :span="4">
+                <span class="pre">省:</span>
+                {{scope.row.province_name}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">市:</span>
+                {{scope.row.city_name}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">质保到期日:</span>
+                {{scope.row.mainten_pay_deliver_date}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">验收日期:</span>
+                {{scope.row.acceptanc_date}}
+              </el-col>
+              <el-col :span="4">
+                <span class="pre">验收款到期日:</span>
+                {{scope.row.acceptanc_pay_date}}
+              </el-col>
+            </el-row>
+            <el-row style="text-align:left;padding-bottom:5px">
+              <span class="pre">备注:</span>
+              {{scope.row.contract_note}}
+            </el-row>
+          </template>
+        </el-table-column>
+
+        <el-table-column
+          sortable
+          label="合同编号"
+          prop="contract_unid"
+          min-width="110px"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          :sort-method="project_name_sort"
+          label="项目名称"
+          prop="project_name"
+          min-width="150px"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          :sort-method="customer_name_sort"
+          label="客户名称"
+          prop="customer_name"
+          min-width="150px"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          :sort-method="salesperson_name_sort"
+          label="销售员"
+          prop="salesperson_name"
+          min-width="100px"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          :sort-method="contract_amount_sort"
+          label="合同金额"
+          prop="contract_amount"
+          min-width="120px"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          :sort-method="sign_date_sort"
+          label="签订时间"
+          prop="sign_date"
+          min-width="120px"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          :sort-method="total_reback_amount_sort"
+          label="累计回款"
+          prop="total_reback_amount"
+          min-width="120px"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          :sort-method="contract_remain_sort"
+          label="合同余额"
+          prop="contract_remain"
+          min-width="120px"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          :sort-method="total_amount_remain_sort"
+          label="应收余额"
+          prop="total_amount_remain"
+          min-width="120px"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          sortable
+          label="账款状态"
+          prop="amount_state_unid_name"
+          min-width="120px"
+          align="center"
+        ></el-table-column>
+        <el-table-column label="操作" min-width="100px" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" @click="go_to(scope.row.contract_unid)">详情</el-button>
+            <el-button
+              type="text"
+              style="color:red"
+              @click="delete_contract(scope.row.contract_unid)"
+              v-if="management"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- test------------------------------------------------------------------------------------------------ -->
+      <el-row style="padding-top:50px">
+        <el-col :span="20">
+          <el-pagination
+            style="float:left"
+            background
+            layout="sizes,total,prev, pager, next"
+            @size-change="handle_size_change"
+            :page-sizes="[10,50,100,300,500,1000,1000000]"
+            :total="total_data"
+            :page-size="limit"
+            prev-text="上一页"
+            next-text="下一页"
+            :current-page="current_page"
+            @current-change="page_change"
+          ></el-pagination>
+        </el-col>
+        <el-col :span="4">
+          <el-button-group style="float:right">
+            <el-button
+              type="primary"
+              size="small"
+              @click="export_item_selected_dialog_show = true"
+            >导出</el-button>
+            <el-button type="primary" size="small" @click="import_click" v-show="!this.sales">导入</el-button>
+            <input id="import_unview" type="file" style="display:none" @change="import_contract">
+          </el-button-group>
+        </el-col>
+      </el-row>
+    </el-card>
+    <el-dialog
+      id="export_item_dialog"
+      title="请选择导出项"
+      :visible.sync="export_item_selected_dialog_show"
+      width="32%"
+      :show-close="false"
+    >
+      <div style="text-align:left">
+        <el-button type="text" @click="show_all_export_item()">{{show_all_export_item_text}}</el-button>
+        <el-checkbox
+          :indeterminate="is_indeterminate"
+          v-model="check_all"
+          @change="check_all_item"
+          v-if="export_max_show > 100"
+        >全选</el-checkbox>
+        <el-checkbox-group style="margin-top:20px" v-model="checked_item_list" @change="chek_item">
+          <el-checkbox
+            v-for="(item) in filted_export_select_list"
+            :label="item.key"
+            :key="item.key"
+            
+          >{{item.value}}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+      <div slot="footer" class="dialog-footer">
+        <el-button-group>
+          <el-button type="primary" @click="export_contract()" size="small">确定</el-button>
+          <el-button @click="export_item_selected_dialog_show = false" size="small">取消</el-button>
+        </el-button-group>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+const twodecimalrule = {
+  pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
+  message: "请输入正确",
+  trigger: "blur"
+};
+export default {
+  name: "search",
+  data() {
+    return {
+      allContractAmount: 0,
+      allReceiveAmount: 0,
+      allRemainAmount: 0,
+      alltotalReBack: 0,
+      show_all_export_item_text: "显示全部",
+      export_max_show: 20,
+      management: false,
+      checked_item_list: [],
+      check_all: false,
+      is_indeterminate: false,
+      display_item_list: [
+        {
+          key: "customer_name",
+          value: "客户姓名"
+        },
+        {
+          key: "year",
+          value: "所属年份"
+        },
+        {
+          key: "month",
+          value: "所属月份"
+        },
+        {
+          key: "sign_date",
+          value: "签订日期"
+        },
+        {
+          key: "salesperson_unid",
+          value: "销售员"
+        },
+        {
+          key: "product_line_type",
+          value: "产品线类型"
+        },
+        {
+          key: "province_name",
+          value: "省"
+        },
+        {
+          key: "city_name",
+          value: "市"
+        },
+        {
+          key: "project_name",
+          value: "项目名称"
+        },
+        {
+          key: "contract_amount",
+          value: "合同金额"
+        },
+        {
+          key: "stop_amount",
+          value: "暂停金额"
+        },
+        {
+          key: "exemptions_amount",
+          value: "豁免金额"
+        },
+        {
+          key: "deduct_amount",
+          value: "折扣金额"
+        },
+        {
+          key: "total_reback_amount",
+          value: "累计已收款"
+        },
+        {
+          key: "contract_remain",
+          value: "合同余额"
+        },
+        {
+          key: "amount_state_unid",
+          value: "账款状态"
+        },
+        {
+          key: "total_receive_amount",
+          value: "累计应收款"
+        },
+        {
+          key: "total_amount_remain",
+          value: "应收账款余额"
+        },
+        {
+          key: "over_days",
+          value: "逾期天数"
+        },
+        {
+          key: "advance_pay",
+          value: "预付款金额"
+        },
+        {
+          key: "advance_pay_date",
+          value: "预付款到期日"
+        },
+        {
+          key: "arrive_pay",
+          value: "到货款金额"
+        },
+        {
+          key: "deliver_date",
+          value: "发货日期"
+        },
+        {
+          key: "arrive_pay_date",
+          value: "到货款到期日"
+        },
+        {
+          key: "acceptanc_pay",
+          value: "验收款金额"
+        },
+        {
+          key: "acceptanc_date",
+          value: "验收日期"
+        },
+        {
+          key: "acceptanc_pay_date",
+          value: "验收款到期日"
+        },
+        {
+          key: "mainten_pay",
+          value: "质保金额"
+        },
+        {
+          key: "mainten_pay_date",
+          value: "质保款到期日"
+        },
+        {
+          key: "goods_acceptanc_date",
+          value: "到货验收日期"
+        },
+        {
+          key: "confirm_income_amount",
+          value: "确认收入金额"
+        },
+        {
+          key: "total_receipt_amount",
+          value: "累计开票金额"
+        },
+        {
+          key: "contract_note",
+          value: "合同备注"
+        },
+        {
+          key: "bad_amount_note",
+          value: "坏账金额备注"
+        },
+        {
+          key: "reback_note",
+          value: "暂停金额备注"
+        },
+        {
+          key: "contract_amount_note",
+          value: "抵扣金额备注"
+        },
+        {
+          key: "contract_remain_note",
+          value: "豁免金额备注"
+        },
+        {
+          key: "advance_pay_proporition",
+          value: "预付款比例"
+        },
+        {
+          key: "arrive_pay_proportion",
+          value: "到货款比例"
+        },
+        {
+          key: "acceptanc_pay_proportion",
+          value: "验收款比例"
+        },
+        {
+          key: "mainten_pay_proportition",
+          value: "质保款比例"
+        },
+        {
+          key: "advance_pay_requirement",
+          value: "预付款条件"
+        },
+        {
+          key: "arrive_pay_requirement",
+          value: "到货款条件"
+        },
+        {
+          key: "acceptanc_pay_requirement",
+          value: "验收款条件"
+        },
+        {
+          key: "mainten_pay_requirement",
+          value: "质保款条件"
+        },
+        {
+          key: "first_industry_name",
+          value: "一级行业"
+        },
+        {
+          key: "second_industry_name",
+          value: "二级行业"
+        },
+        {
+          key: "relation_customer_name",
+          value: "大客户"
+        },
+        {
+          key: "final_user_name",
+          value: "最终用户"
+        }
+      ],
+      customer_trade_data: [],
+      customer_trade_data_final: [],
+      final_user_name_data: [],
+      export_item_selected_dialog_show: false,
+      hide_icon: "icon i-arrowdown-copy",
+      hide_text: "显示更多",
+      hide_search_item: true,
+      sales: false,
+      salesperson_name: null,
+      provinces: [],
+      cities: [],
+      counties: [],
+      code_base_url: this.$disparch_data.code_base_url,
+      contract_base_url: this.$disparch_data.contract_base_url,
+      auth_base_url: this.$disparch_data.auth_base_url,
+      month_list: [
+        "01",
+        "02",
+        "03",
+        "04",
+        "05",
+        "06",
+        "07",
+        "08",
+        "09",
+        "10",
+        "11",
+        "12"
+      ],
+      salesperson_data: [],
+      contract_state_data: [],
+      contract_type_data: [],
+      product_line_type_data: [],
+      amount_state_unid_data: [],
+      search_form: {
+        contract_unid: null,
+        salesperson_unid: null,
+        salesperson_name__like: null,
+        project_name__like: null,
+        customer_name__like: null,
+        guarantee_period: null,
+        year: null,
+        month: null,
+        contract_state_list: [],
+        salesperson_list: [],
+        contract_type: null,
+        product_line_type: null,
+        acceptance_type: null,
+        is_archive: null,
+        amount_state_unid_data_list: [],
+        amount_state_unid: null,
+        confirm_income_amount: null,
+        province: null,
+        city: null,
+        start_data: null,
+        end_date: null,
+        overdays_start_point: null,
+        overdays_end_point: null,
+        amount_start_point: null,
+        amount_end_point: null,
+        leave_amount_start_point: null,
+        leave_amount_end_point: null,
+        customer_trade_selected: [],
+        final_user: null
+      },
+
+      list_data: [],
+      limit: 10,
+      total_data: 0,
+      current_page: 1,
+
+      search_form_rules: {
+        confirm_income_amount: twodecimalrule,
+        amount_start_point: twodecimalrule,
+        amount_end_point: twodecimalrule,
+        leave_amount_start_point: twodecimalrule,
+        leave_amount_end_point: twodecimalrule,
+        overdays_start_point: {
+          pattern: /((^[1-9]\d*)|^0)$/,
+          message: "请输入正确天数",
+          trigger: "blur"
+        },
+        overdays_end_point: {
+          pattern: /((^[1-9]\d*)|^0)$/,
+          message: "请输入正确天数",
+          trigger: "blur"
+        }
+      }
+    };
+  },
+  computed: {
+    filted_export_select_list: function() {
+      return this.display_item_list.slice(0, this.export_max_show);
+    },
+
+    /**
+     * 年份选择列表
+     */
+    year_list: function() {
+      var a = new Date().getFullYear();
+      var arr = [];
+      for (let i = a; i >= 2000; i--) {
+        arr.push(i);
+      }
+      return arr;
+    },
+    /**
+     * 字面意思
+     */
+    offset() {
+      return (this.current_page - 1) * this.limit;
+    },
+    guarantee_period_list() {
+      var arr = [];
+      var a = 6;
+      for (let i = 0; i < 10; i++) {
+        const element = (10)[i];
+        arr.push(a);
+        a += 6;
+      }
+      return arr;
+    }
+  },
+  methods: {
+    delete_contract(unid) {
+      this.$confirm(
+        "是否删除合同:<p style='text-align:center;color:red;font-weight:bolder'>" +
+          unid +
+          "<p>",
+        "确认信息",
+        {
+          dangerouslyUseHTMLString: true,
+          confirmButtonText: "确认删除",
+          cancelButtonText: "取消"
+        }
+      )
+        .then(() => {
+          this.delete_contract_by_unid(unid);
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "放弃删除"
+          });
+        });
+    },
+    delete_contract_by_unid(unid) {
+      this.$Axios({
+        method: "delete",
+        url: this.contract_base_url + unid
+      })
+        .then(res => {
+          this.commit();
+          if (res.data.ecode == "200") {
+            this.$message({
+              type: "success",
+              message: "删除成功"
+            });
+          } else {
+            this.$message({
+              type: "warning",
+              message: "删除失败"
+            });
+          }
+        })
+        .catch(err => {
+          // console.log(err);
+          this.$message({
+            type: "warning",
+            message: "删除失败"
+          });
+        });
+    },
+    /**
+     * 全选
+     */
+    check_all_item(val) {
+      if (val) {
+        this.display_item_list.forEach(e => {
+          this.checked_item_list.push(e.key);
+        });
+      } else {
+        this.checked_item_list = [];
+      }
+      this.is_indeterminate = false;
+    },
+    chek_item(value) {
+      let checkedCount = value.length;
+      this.check_all = checkedCount === this.display_item_list.length;
+      this.is_indeterminate =
+        checkedCount > 0 && checkedCount < this.display_item_list.length;
+    },
+    /**
+     * 自定义排序规则
+     */
+    project_name_sort(a, b) {
+      if (a.project_name && b.project_name) {
+        return a.project_name.trim().localeCompare(b.project_name.trim());
+      }
+    },
+    customer_name_sort(a, b) {
+      if (a.customer && b.customer_name) {
+        return a.customer_name.trim().localeCompare(b.customer_name.trim());
+      }
+    },
+    salesperson_name_sort(a, b) {
+      if (a.salesperson_name && b.salesperson_name) {
+        return a.salesperson_name
+          .trim()
+          .localeCompare(b.salesperson_name.trim());
+      }
+    },
+    sign_date_sort(a, b) {
+      if (a.sign_date == null && b.sign_date == null) {
+        return 0;
+      }
+      if (a.sign_date == null) {
+        return -1;
+      }
+      if (b.sign_date == null) {
+        return 1;
+      }
+      var date1s = a.sign_date.split("-");
+      var date2s = b.sign_date.split("-");
+      return (
+        new Date(date1s[0], date1s[1] - 1, date1s[2]).getTime() -
+        new Date(date2s[0], date2s[1] - 1, date2s[2]).getTime()
+      );
+    },
+    contract_amount_sort(a, b) {
+      return this.amount_sort(a.contract_amount, b.contract_amount);
+    },
+    total_reback_amount_sort(a, b) {
+      return this.amount_sort(a.total_reback_amount, b.total_reback_amount);
+    },
+    contract_remain_sort(a, b) {
+      return this.amount_sort(a.contract_remain, b.contract_remain);
+    },
+    total_amount_remain_sort(a, b) {
+      return this.amount_sort(a.total_amount_remain, b.total_amount_remain);
+    },
+    amount_sort(a, b) {
+      if (a == null && b == null) {
+        return 0;
+      }
+      if (a == null) {
+        return -1;
+      }
+      if (b == null) {
+        return 1;
+      }
+      return a - b;
+    },
+
+    show_all_export_item() {
+      if (this.export_max_show == 20) {
+        this.export_max_show = 1000;
+      } else {
+        this.export_max_show = 20;
+      }
+
+      if (this.show_all_export_item_text == "显示全部") {
+        this.show_all_export_item_text = "折叠选项";
+      } else {
+        this.show_all_export_item_text = "显示全部";
+      }
+    },
+    show_more() {
+      this.hide_search_item = !this.hide_search_item;
+      this.hide_search_item == true
+        ? (this.hide_text = "显示更多")
+        : (this.hide_text = "收起");
+      this.hide_search_item == true
+        ? (this.hide_icon = "icon i-arrowdown-copy")
+        : (this.hide_icon = "icon i-arrowup");
+    },
+    /**
+     * 点击导入按钮，弹出文件选择栏，当选择文件后
+     * type为file的input的文件列表会改变
+     * 检测到这种改变后，调用import_contract方法
+     */
+    import_click() {
+      document.getElementById("import_unview").click();
+    },
+    import_contract() {
+      if (!document.getElementById("import_unview").files[0]) {
+        return;
+      }
+      var ranke = 0;
+      if (!this.management) {
+        var role_name = JSON.parse(sessionStorage.getItem("user_roles"))[0]
+          .name;
+        switch (role_name) {
+          case "商务部":
+            ranke = 1;
+            break;
+          case "财务部":
+            ranke = 2;
+            break;
+          case "工程部":
+            ranke = 4;
+            break;
+          case "生产部":
+            ranke = 3;
+            break;
+          default:
+            ranke = 1;
+            break;
+        }
+      }
+      var form = new FormData();
+      form.append("file", document.getElementById("import_unview").files[0]);
+      form.append("ranke", ranke);
+      this.$Axios({
+        method: "post",
+        url: this.contract_base_url + "import",
+        data: form
+      })
+        .then(res => {
+          if (res.data.ecode == "500") {
+            this.$message.error(res.data.enote);
+          } else if (res.data.ecode == "200") {
+            this.$message({
+              type: "success",
+              message: "导入成功"
+            });
+          } else if (res.data != [] && res.data[0].contract_unid) {
+            var message = [];
+            const h = this.$createElement;
+            res.data.forEach(e => {
+              message.push(h("p", null, e.contract_unid));
+            });
+            this.$message({
+              type: "warning",
+              message: "部分导入信息数据校验未通过,请检查后重新导入",
+              duration: 5000
+            });
+            this.$notify({
+              title: "校验未通过的合同的编号为：",
+              duration: 0,
+              message: h("p", null, message),
+              type: "error"
+            });
+          } else {
+            if (res.data.length > 0) {
+              var message = [];
+              const h = this.$createElement;
+              res.data.forEach(e => {
+                message.push(h("p", null, e));
+              });
+              this.$message({
+                type: "warning",
+                message: "部分导入信息已存在,请检查后重新导入",
+                duration: 5000
+              });
+              this.$notify({
+                title: "重复的数据编号",
+                duration: 0,
+                message: h("p", null, message),
+                type: "error"
+              });
+            }
+          }
+          var node = document.getElementById("import_unview");
+          node.value = "";
+        })
+        .catch(err => {
+          // console.log(err.message);
+        });
+    },
+    // get start~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    get_amount_state_unid_data() {
+      this.$Axios({
+        method: "get",
+        url: this.code_base_url + "custom/cates/42407C5EF2/codes"
+      })
+        .then(res => {
+          this.amount_state_unid_data = res.data.list_data;
+        })
+        .catch(err => {});
+    },
+    get_contract_type_data() {
+      this.$Axios({
+        method: "get",
+        url: this.code_base_url + "custom/cates/8EC31D08A0/codes"
+      })
+        .then(res => {
+          this.contract_type_data = res.data.list_data;
+        })
+        .catch(err => {});
+    },
+    get_contract_state_data() {
+      this.$Axios({
+        method: "get",
+        url: this.code_base_url + "custom/cates/13BEFACBCF/codes"
+      })
+        .then(res => {
+          this.contract_state_data = res.data.list_data;
+        })
+        .catch(err => {});
+    },
+    get_product_line_type_data() {
+      this.$Axios({
+        method: "get",
+        url: this.code_base_url + "custom/cates/4FC51AD3C9/codes"
+      })
+        .then(res => {
+          this.product_line_type_data = res.data.list_data;
+        })
+        .catch(err => {});
+    },
+    get_provinces() {
+      this.$Axios({
+        method: "get",
+        url: this.code_base_url + "countries/0E229CD043/provinces"
+      })
+        .then(response => {
+          this.provinces = response.data.list_data;
+        })
+        .catch(err => {
+          // console.log(err.message);
+        });
+    },
+    get_cities() {
+      this.search_form.city = "";
+      // this.search_form.county = "";
+      if (this.search_form.province) {
+        this.$Axios({
+          method: "get",
+          url:
+            this.code_base_url +
+            "countries/0E229CD043/provinces/" +
+            this.search_form.province +
+            "/cities"
+        })
+          .then(response => {
+            this.cities = response.data.list_data;
+          })
+          .catch(err => {
+            // console.log(err.message);
+          });
+      }
+    },
+
+    get_salesperson_data() {
+      this.$Axios({
+        method: "get",
+        url: this.auth_base_url + "users",
+        params: {
+          norm_type: "employee",
+          date: Date()
+        }
+      })
+        .then(response => {
+          this.salesperson_data = response.data.list_data;
+          this.$Axios({
+            method: "get",
+            url: this.auth_base_url + "users",
+            params: {
+              is_active: false,
+              norm_type: "employee",
+              date: Date()
+            }
+          })
+            .then(res => {
+              console.log(res);
+              this.salesperson_data = this.salesperson_data.concat(
+                res.data.list_data
+              );
+            })
+            .catch(err => {
+              console.log(err);
+            });
+        })
+        .catch(err => {
+          // console.log(err.message);
+        });
+    },
+    /**
+     * 获取检索结果
+     */
+    get_list_data() {
+      var a = JSON.parse(sessionStorage.getItem("search_condition"));
+      if (a.contract_state_list.length > 0) {
+        a.contract_states = a.contract_state_list.join(",");
+      } else {
+        a.contract_states = "";
+      }
+      if (a.salesperson_list.length > 0) {
+        a.salesperson_unid_columns = a.salesperson_list.join(",");
+      } else {
+        a.salesperson_unid_columns = "";
+      }
+      if (a.salesperson_unid != null) {
+        a.salesperson_unid_columns = a.salesperson_unid;
+      }
+      if (a.amount_state_unid_data_list.length > 0) {
+        a.amount_state_unids = a.amount_state_unid_data_list.join(",");
+      } else {
+        a.amount_state_unids = "";
+      }
+
+      Object.keys(a).forEach(key => {
+        if (a[key] && typeof a[key] == "string") {
+          // console.log(a[key]);
+          a[key] = a[key].trim();
+        }
+      });
+
+      if (a.customer_trade_selected.length > 0) {
+        var top_trade;
+        var sec_trade;
+        var big_customer;
+        this.customer_trade_data_final.forEach(item => {
+          if (item.value == a.customer_trade_selected[0]) {
+            top_trade = item;
+          }
+        });
+        if (a.customer_trade_selected.length > 1) {
+          top_trade.children.forEach(item => {
+            if (item.value == a.customer_trade_selected[1]) {
+              sec_trade = item;
+            }
+          });
+          if (a.customer_trade_selected.length > 2) {
+            sec_trade.children.forEach(item => {
+              if (item.value == a.customer_trade_selected[2]) {
+                big_customer = item;
+              }
+            });
+          }
+        }
+        if (top_trade != null) {
+          a.first_industry = top_trade.value;
+          a.first_industry_name = top_trade.label;
+        } else {
+          a.first_industry = null;
+          a.first_industry_name = null;
+        }
+        if (sec_trade != null) {
+          a.second_industry = sec_trade.value;
+          a.second_industry_name = sec_trade.label;
+        } else {
+          a.second_industry = null;
+          a.second_industry_name = null;
+        }
+        if (big_customer != null) {
+          a.relation_customer = big_customer.value;
+          a.relation_customer_name = big_customer.label;
+        } else {
+          a.relation_customer = null;
+          a.relation_customer_name = null;
+        }
+      }
+
+      a.offset = this.offset;
+      a.limit = this.limit;
+      a.date = Date();
+      this.$Axios({
+        methods: "get",
+        url: this.contract_base_url,
+        params: a,
+        headers: { "Content-Type": "application/json" }
+      })
+        .then(response => {
+          if (response.data.ecode == "500") {
+            this.$message.error("筛选异常");
+            return;
+          }
+          this.allContractAmount = parseFloat(
+            response.data.allContractAmount
+          ).toFixed(2);
+          this.allReceiveAmount = parseFloat(
+            response.data.allReceiveAmount
+          ).toFixed(2);
+          this.allRemainAmount = parseFloat(
+            response.data.allRemainAmount
+          ).toFixed(2);
+          this.alltotalReBack = parseFloat(
+            response.data.alltotalReBack
+          ).toFixed(2);
+          this.total_data = response.data.total_number;
+          this.list_data = response.data.list_data;
+          for (let i = 0; i < this.list_data.length; i++) {
+            const e = this.list_data[i];
+            for (let j = 0; j < this.contract_state_data.length; j++) {
+              const a = this.contract_state_data[j];
+              if (e.contract_state == a.code) {
+                this.list_data[i].contract_state_name = a.name;
+              }
+            }
+            for (let k = 0; k < this.product_line_type_data.length; k++) {
+              const b = this.product_line_type_data[k];
+              if (e.product_line_type == b.code) {
+                this.list_data[i].product_line_type_name = b.name;
+              }
+            }
+            if (!e.over_days) {
+              e.over_days = 0;
+            }
+          }
+        })
+        .catch(err => {
+          // console.log(err.message);
+        });
+    },
+    get_year(date) {
+      if (date) {
+        return date.slice(0, 4);
+      }
+    },
+    get_month(date) {
+      if (date) {
+        return date.slice(5, 7);
+      }
+    },
+
+    // get end---------------------------------------------------------------------------------------------
+    reset() {
+      this.$refs["search_form"].resetFields();
+    },
+    commit() {
+      this.$refs["search_form"].validate(valid => {
+        if (valid) {
+          this.current_page = 1;
+          sessionStorage.setItem(
+            "search_condition",
+            JSON.stringify(this.search_form)
+          );
+          this.get_list_data();
+        } else {
+          this.$message({
+            type: "warning",
+            message: "请检查数据格式是否正确"
+          });
+        }
+      });
+    },
+    /**
+     * page控件的一些操作
+     */
+    handle_size_change(val) {
+      this.search_form = JSON.parse(sessionStorage.getItem("search_condition"));
+      this.limit = val;
+      if (this.list_data.length != 0) {
+        this.commit();
+      }
+    },
+    page_change(val) {
+      this.search_form = JSON.parse(sessionStorage.getItem("search_condition"));
+      this.current_page = val;
+      // console.log(this.current_page);
+      this.get_list_data();
+    },
+    /**
+     * 导出合同的excel表格
+     */
+    export_contract() {
+      var a = this.search_form;
+      if (a.contract_state_list.length > 0) {
+        a.contract_states = a.contract_state_list.join(",");
+      } else {
+        a.contract_states = "";
+      }
+      if (a.salesperson_list.length > 0) {
+        a.salesperson_unid_columns = a.salesperson_list.join(",");
+      } else {
+        a.salesperson_unid_columns = "";
+      }
+      if (a.salesperson_unid != null) {
+        a.salesperson_unid_columns = a.salesperson_unid;
+      }
+      if (a.amount_state_unid_data_list.length > 0) {
+        a.amount_state_unids = a.amount_state_unid_data_list.join(",");
+      } else {
+        a.amount_state_unids = "";
+      }
+
+      Object.keys(a).forEach(key => {
+        if (a[key] && typeof a[key] == "string") {
+          // console.log(a[key]);
+          a[key] = a[key].trim();
+        }
+      });
+      a.offset = this.offset;
+      a.limit = this.limit;
+      a.date = Date();
+
+      if (this.checked_item_list.length > 0) {
+        this.search_form.columns = this.checked_item_list.join(",");
+      }
+      // console.log(this.search_form.columns);
+      this.$Axios({
+        method: "get",
+        url: this.contract_base_url + "export",
+        params: a,
+        responseType: "blob"
+      })
+        .then(res => {
+          let blob = new Blob([res.data], {
+            type: "application/vnd.ms-excel;charset=UTF-8"
+          });
+          if (navigator.appVersion.toString().indexOf(".NET") > 0) {
+            window.navigator.msSaveBlob(blob, "合同.xlsx");
+          } else {
+            // let ourl = URL.createObjectURL(blob);
+            // window.location.href = ourl;
+            var downloadElement = document.createElement("a");
+            var href = window.URL.createObjectURL(blob); //创建下载的链接
+            downloadElement.href = href;
+            downloadElement.download = "合同.xlsx"; //下载后文件名
+            document.body.appendChild(downloadElement);
+            downloadElement.click(); //点击下载
+            document.body.removeChild(downloadElement); //下载完成移除元素
+            window.URL.revokeObjectURL(href); //释放掉blob对象
+          }
+          this.export_item_selected_dialog_show = false;
+        })
+        .catch(err => {
+          this.check_all = false;
+          this.checked_item_list = [];
+          // console.log(err.message);
+        });
+    },
+    /**
+     * 点击详情后进度contract页面
+     */
+    go_to(id) {
+      sessionStorage.setItem("modify", "1");
+      this.$router.push("/nav/contract/" + id);
+    },
+    /**
+     * 改变dialog背景颜色
+     */
+    change_dialog() {
+      if (localStorage.getItem("style")) {
+        var style = JSON.parse(localStorage.getItem("style"));
+        var dialogs = document.getElementsByClassName("el-dialog");
+        for (let i = 0; i < dialogs.length; i++) {
+          const e = dialogs[i];
+          e.style.backgroundColor = style.color;
+          e.style.backgroundImage = style.image;
+        }
+      }
+    },
+
+    get_top_trade() {
+      this.customer_trade_data = [];
+      this.customer_trade_data_final = [];
+      this.$Axios({
+        method: "get",
+        url: this.code_base_url + "countries"
+      }).then(res => {
+        res.data.list_data.forEach(data => {
+          if (data.name != "中国") {
+            this.customer_trade_data.push(data);
+            var a = {
+              code: data.code,
+              value: data.country_unid,
+              label: data.name,
+              children: []
+            };
+            this.customer_trade_data_final.push(a);
+          }
+        });
+        for (let i = 0; i < this.customer_trade_data.length; i++) {
+          const e = this.customer_trade_data[i];
+          this.get_second_trade(e.country_unid, i);
+        }
+      });
+      console.log(this.customer_trade_data_final);
+    },
+
+    get_second_trade(unid) {
+      this.$Axios({
+        method: "get",
+        url: this.code_base_url + "countries/" + unid + "/provinces",
+        params: { depth: 1 }
+      }).then(res => {
+        this.customer_trade_data_final.forEach(final => {
+          if (final.value == unid && res.data.list_data != undefined) {
+            res.data.list_data.forEach(second => {
+              var a = {
+                label: second.name,
+                value: second.province_unid,
+                code: second.code,
+                children: []
+              };
+              if (second.cities.list_size > 0) {
+                second.cities.list_data.forEach(third => {
+                  var b = {
+                    label: third.name,
+                    value: third.city_unid,
+                    code: third.code
+                  };
+                  a.children.push(b);
+                });
+              }
+              final.children.push(a);
+            });
+          }
+        });
+      });
+    },
+    get_final_user_name_data() {
+      this.$Axios({
+        method: "get",
+        url: this.contract_base_url + "finalusers",
+        params: {
+          date: Date()
+        }
+      })
+        .then(response => {
+          this.final_user_name_data = response.data;
+        })
+        .catch(err => {
+          // console.log(err.message);
+        });
+    },
+    getSummaries(param) {
+      const { columns, data } = param;
+      const sums = [];
+      columns.forEach((column, index) => {
+        if (index === 0) {
+          sums[index] = "合计";
+        }
+        if (index === 5) {
+          sums[index] = this.allContractAmount;
+        }
+        if (index === 7) {
+          sums[index] = this.alltotalReBack;
+        }
+        if (index === 8) {
+          sums[index] = this.allRemainAmount;
+        }
+        if (index === 9) {
+          sums[index] = this.allReceiveAmount;
+        }
+      });
+      return sums;
+    }
+  },
+  created() {
+    /**
+     * 商务部可以删除合同
+     */
+    if (
+      sessionStorage.getItem("user_roles") != "null" &&
+      sessionStorage.getItem("user_roles")
+    ) {
+      var roles = JSON.parse(sessionStorage.getItem("user_roles"));
+      for (let i = 0; i < roles.length; i++) {
+        const e = roles[i];
+        if (e.role_unid == "91d5185d47e3bad099e17570b0dd0ed2") {
+          this.management = true;
+        }
+      }
+    }
+    this.get_final_user_name_data();
+    this.get_top_trade();
+    this.get_salesperson_data();
+    if (sessionStorage.getItem("user_roles") == "null") {
+      this.salesperson_name = sessionStorage.getItem("user_name");
+      this.sales = true;
+      this.search_form.salesperson_unid = sessionStorage.getItem("user_unid");
+    }
+    if (sessionStorage.getItem("provinces")) {
+      this.provinces = JSON.parse(sessionStorage.getItem("provinces"));
+    } else {
+      this.get_provinces();
+    }
+    if (sessionStorage.getItem("amount_state_unid_data")) {
+      this.amount_state_unid_data = JSON.parse(
+        sessionStorage.getItem("amount_state_unid_data")
+      );
+    } else {
+      this.get_amount_state_unid_data();
+    }
+    if (sessionStorage.getItem("contract_type_data")) {
+      this.contract_type_data = JSON.parse(
+        sessionStorage.getItem("contract_type_data")
+      );
+    } else {
+      this.get_contract_type_data();
+    }
+    if (sessionStorage.getItem("contract_state_data")) {
+      this.contract_state_data = JSON.parse(
+        sessionStorage.getItem("contract_state_data")
+      );
+    } else {
+      this.get_contract_state_data();
+    }
+    if (sessionStorage.getItem("product_line_type_data")) {
+      this.product_line_type_data = JSON.parse(
+        sessionStorage.getItem("product_line_type_data")
+      );
+    } else {
+      this.get_product_line_type_data();
+    }
+  },
+  mounted() {
+    this.change_dialog();
+  }
+};
+</script>
+
+<style scoped>
+span {
+  padding-right: 10px;
+}
+#search >>> label {
+  color: black;
+}
+#search >>> .el-card {
+  background-color: rgba(0, 0, 0, 0);
+}
+#search >>> .el-card__body {
+  background-color: rgba(0, 0, 0, 0);
+}
+#search >>> input {
+  border-color: black;
+  color: black;
+  background-color: rgba(0, 0, 0, 0.3);
+}
+#search >>> .el-card__header {
+  background-color: #34352c;
+}
+#search >>> .cell {
+  color: black;
+}
+#data_table .el-table__expanded-cell .pre {
+  text-decoration: underline;
+  /* font-style: oblique; */
+  color: #555;
+}
+#data_table {
+  color: black;
+}
+#search >>> tr,
+#search >>> .el-table {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+#search >>> .el-table__row {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+#search >>> th {
+  background-color: rgba(0, 0, 0, 0);
+}
+#search >>> .el-table__expanded-cell {
+  background-color: rgba(0, 0, 0, 0);
+}
+#search >>> .el-pager li {
+  background-color: rgba(255, 255, 255, 0.3);
+}
+#search >>> .el-pager .active {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+#search >>> .el-pagination .btn-next,
+#search >>> .el-pagination .btn-prev {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+#hide_icon_text:hover {
+  cursor: pointer;
+  color: orangered;
+  transition: all ease 0.5s;
+}
+#search >>> .el-dialog {
+  border-radius: 20px;
+  background-color: lightblue;
+}
+#search >>> .el-checkbox {
+  width: 100px;
+  margin-left: 20px;
+}
+#search >>> .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: crimson;
+}
+/* #search >>>.el-table__header-wrapper{
+  position: fixed;
+  top: 0;
+} */
+</style>

src/components/user.vue

+<template>
+  <div id="user_wrapper">
+    <el-card class="box-card" id="user" shadow="hover" style="width: 30%">
+      <div slot="header" style="text-align: center" class="clearfix">
+        <span style="font-size: 24px; color: #eff0dc">修改密码</span>
+      </div>
+
+      <el-form
+        ref="password_form"
+        :model="password_form"
+        :rules="password_form_rules"
+        label-width="60px"
+        label-position="top"
+      >
+        <el-form-item prop="odd_password">
+          <el-input
+            :type="odd_password_type"
+            v-model="password_form.odd_password"
+            auto-complete="off"
+          >
+            <template slot="prepend">原密码</template>
+            <el-button
+              class="append_button"
+              slot="append"
+              :icon="odd_password_view"
+              @click="show_odd_password"
+            ></el-button>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="new_password">
+          <el-input
+            :type="new_password_type"
+            v-model="password_form.new_password"
+            auto-complete="off"
+          >
+            <template slot="prepend">新密码</template>
+            <el-button
+              class="append_button"
+              slot="append"
+              :icon="new_password_view"
+              @click="show_new_password"
+            ></el-button>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="check_password">
+          <el-input
+            :type="new_password_type"
+            v-model="password_form.check_password"
+            auto-complete="off"
+          >
+            <template slot="prepend">新密码</template>
+            <el-button
+              class="append_button"
+              slot="append"
+              :icon="new_password_view"
+              @click="show_new_password"
+            ></el-button>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button-group>
+            <el-button type="primary" @click="submitForm('password_form')"
+              >提交</el-button
+            >
+            <el-button type="warning" @click="resetForm('password_form')"
+              >重置</el-button
+            >
+          </el-button-group>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="box-card" id="user" shadow="hover" style="width: 30%">
+      <div slot="header" style="text-align: center" class="clearfix">
+        <span style="font-size: 24px; color: #eff0dc">主题颜色</span>
+      </div>
+      <el-radio-group v-model="color" @change="change_color">
+        <el-row style="padding-bottom: 1px">
+          <el-radio-button label="天空蓝"></el-radio-button>
+          <el-radio-button label="梦幻紫"></el-radio-button>
+          <el-radio-button label="活力橙"></el-radio-button>
+        </el-row>
+        <el-row>
+          <el-radio-button label="柠檬绿"></el-radio-button>
+          <el-radio-button label="灰灰灰"></el-radio-button>
+          <el-radio-button label="小清新"></el-radio-button>
+        </el-row>
+      </el-radio-group>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "user",
+  data() {
+    return {
+      color: "天空蓝",
+      new_password_type: "password",
+      odd_password_type: "password",
+      new_password_view: "icon i-password-not-view",
+      odd_password_view: "icon i-password-not-view",
+      rtoken: "",
+      user_unid: "",
+      auth_base_url: this.$disparch_data.auth_base_url,
+      password_form: {
+        odd_password: "",
+        new_password: "",
+        check_password: "",
+      },
+      password_form_rules: {
+        odd_password: {
+          required: true,
+          message: "请填写旧密码",
+          trigger: "blur",
+        },
+        new_password: [
+          {
+            pattern: /^[A-Za-z0-9\x20-\x7f]{6,16}$/,
+            message: "密码至少6位，至多16位",
+            trigger: "blur",
+          },
+          {
+            required: true,
+            message: "必须填写新密码",
+            trigger: "blur",
+          },
+          {
+            validator: (rule, value, callback) => {
+              if (value == this.password_form.odd_password) {
+                callback(new Error("新密码不能和旧密码相同"));
+              } else callback();
+            },
+            trigger: "blur",
+          },
+        ],
+        check_password: [
+          {
+            pattern: /^[A-Za-z0-9\x20-\x7f]{6,16}$/,
+            message: "密码至少6位,至多16位",
+            trigger: "blur",
+          },
+          {
+            required: true,
+            message: "必须填写新密码",
+            trigger: "blur",
+          },
+          {
+            validator: (rule, value, callback) => {
+              if (value != this.password_form.new_password) {
+                callback(new Error("两次输入不一致"));
+              } else callback();
+            },
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    change_color() {
+      var backgroundColor = "none";
+      var backgroundImage = "none";
+      switch (this.color) {
+        case "天空蓝":
+          backgroundColor = "lightblue";
+          break;
+        case "梦幻紫":
+          backgroundColor = "#8ec5fc";
+          backgroundImage = "linear-gradient(225deg, #8ec5fc 0%, #e0c3fc 100%)";
+          break;
+        case "活力橙":
+          backgroundColor = "#FBAB7E";
+          backgroundImage = "linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)";
+          break;
+        case "柠檬绿":
+          backgroundColor = "#F4D03F";
+          backgroundImage = "linear-gradient(71deg, #F4D03F 0%, #16a046 92%)";
+          break;
+        case "灰灰灰":
+          backgroundColor = "#f0f0f0";
+          break;
+        case "小清新":
+          backgroundColor = "#FFDEE9";
+          backgroundImage = "linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)";
+          break;
+      }
+      let main = document.getElementsByClassName("el-main")[0];
+      main.style["background-color"] = backgroundColor;
+      main.style.backgroundImage = backgroundImage;
+      localStorage.setItem("color", this.color);
+      this.$router.go(0);
+    },
+
+    show_odd_password() {
+      if (this.odd_password_type == "password") {
+        this.odd_password_type = "text";
+        this.odd_password_view = "icon i-password-view";
+      } else {
+        this.odd_password_type = "password";
+        this.odd_password_view = "icon i-password-not-view";
+      }
+    },
+    show_new_password() {
+      if (this.new_password_type == "password") {
+        this.new_password_type = "text";
+        this.new_password_view = "icon i-password-view";
+      } else {
+        this.new_password_type = "password";
+        this.new_password_view = "icon i-password-not-view";
+      }
+    },
+    submitForm(form) {
+      this.$refs[form].validate((valid) => {
+        if (valid) {
+          this.$Axios({
+            method: "post",
+            url: this.auth_base_url + "users/" + this.user_unid + "/password",
+            headers: { authorization: this.rtoken },
+            data: {
+              old_pwd: this.password_form.odd_password,
+              new_pwd: this.password_form.new_password,
+            },
+          })
+            .then((response) => {
+              if (response.data.user_unid) {
+                this.$message({
+                  type: "success",
+                  message: "修改成功",
+                });
+                this.resetForm("password_form");
+              }
+            })
+            .catch((err) => {
+              this.$message.error("修改失败");
+              this.resetForm("password_form");
+            });
+        }
+      });
+    },
+    resetForm(form) {
+      this.$refs[form].resetFields();
+    },
+  },
+  created() {
+    if (!sessionStorage.getItem("user_unid")) {
+      this.$router.push("/");
+    } else {
+      this.rtoken = sessionStorage.getItem("rtoken");
+      this.user_unid = sessionStorage.getItem("user_unid");
+    }
+
+    if (localStorage.getItem("color")) {
+      this.color = localStorage.getItem("color");
+    }
+  },
+};
+</script>
+
+
+<style scoped>
+#user_wrapper {
+  width: 100%;
+  height: 100%;
+}
+#user >>> label {
+  color: black;
+}
+#user_wrapper >>> .el-card {
+  /* float: left; */
+  /* display: inline-block; */
+  background-color: rgba(0, 0, 0, 0);
+}
+#user >>> .el-card__body {
+  background-color: rgba(0, 0, 0, 0);
+}
+#user >>> input {
+  border-color: black;
+  color: black;
+  background-color: rgba(0, 0, 0, 0);
+}
+#user >>> .el-card__header {
+  background-color: #34352c;
+}
+#user >>> .el-input-group__prepend {
+  border-color: black;
+  color: black;
+  /* background-color: lightgray; */
+  background-color: rgba(0, 0, 0, 0);
+}
+#user >>> .el-input-group__append {
+  color: black;
+  border-color: black;
+  background-color: rgba(0, 0, 0, 0);
+}
+#user >>> .el-radio-button__inner {
+  border-color: black;
+  background-color: rgba(0, 0, 0, 0);
+}
+</style>
+

src/main.js

+// 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 Axios from 'axios'
+import Numeral from 'numeral'
+// import PinYin from 'pinyin'
+import CollapseTransition from 'element-ui/lib/transitions/collapse-transition';
+import 'element-ui/lib/theme-chalk/index.css'
+// import '../static/city-data'
+// import "./mock"
+import './assets/icons/iconfont.css'
+import 'babel-polyfill'
+
+// Vue.prototype.Pinyin = PinYin;
+
+Vue.component(CollapseTransition.name, CollapseTransition)
+Vue.config.productionTip = false
+Vue.prototype.$Numeral = Numeral
+Vue.prototype.$Axios = Axios
+/* eslint-disable no-new */
+Vue.use(ElementUI)
+
+Vue.filter('twoDecimal', function (value) {
+  value = Number(value);
+  return value.toFixed(2);
+});
+
+let loading;
+
+function startLoading() {
+  loading = Vue.prototype.$loading({
+    lock: true,
+    text: "加载中，请稍等",
+    background: "rgba(0, 0, 0, 1)"
+  })
+}
+
+function finishLoading() {
+  loading.close();
+}
+
+let requestCount = 0;
+
+function showLoading() {
+  if (requestCount === 0) {
+    startLoading();
+  }
+  requestCount++;
+};
+
+function hideLoading() {
+  if (requestCount <= 0) return;
+  requestCount--;
+  if (requestCount === 0) {
+    finishLoading();
+  }
+};
+
+Axios.interceptors.request.use(
+  (config) => {
+    showLoading();
+    return config;
+  },
+  function (err) {
+    return Promise.reject(err);
+  }
+);
+
+Axios.interceptors.response.use((response) => {
+  setTimeout(() => {
+    hideLoading();
+  }, 300);
+  return response;
+}, function (err) {
+  hideLoading()
+  return Promise.reject(err);
+});
+
+{
+  if (window.location.host == 'localhost:8888') {
+    Vue.prototype.$disparch_data = {
+      code_base_url: "http://192.168.9.110:20080/api/v1/codes/",
+      contract_base_url: "http://192.168.9.110:20080/api/v1/financial/contracts/",
+      auth_base_url: "http://192.168.9.110:20080/api/v1/auth/"
+    }
+  } else {
+    var url = window.location.host;
+    Vue.prototype.$disparch_data = {
+      code_base_url: "http://" + url + "/api/v1/codes/",
+      contract_base_url: "http://" + url + "/api/v1/financial/contracts/",
+      auth_base_url: "http://" + url + "/api/v1/auth/"
+    }
+  }
+}
+
+
+
+new Vue({
+  el: '#app',
+  router,
+  components: {
+    App
+  },
+  template: '<App/>'
+})

src/mock.js

+const Mock = require('mockjs');
+
+Mock.mock("/api/v1/financial/contracts/contract/project/acceptancs", 'post', res => {
+  console.log("project add successful");
+  console.log(res.body);
+  return {
+    encode: 200
+  }
+})

src/router/index.js

+import Vue from 'vue'
+import Router from 'vue-router'
+import Nav from '@/components/nav'
+import Login from '@/components/login'
+import Search from '@/components/search'
+import Contract from '@/components/contract'
+import Manage from '@/components/manage'
+import Main from '@/components/main'
+import User from '@/components/user'
+
+
+Vue.use(Router)
+
+export default new Router({
+  routes: [{
+      path: '/',
+      component: Login
+    },
+    {
+      path: '/nav',
+      component: Nav,
+      name: "nav",
+      children: [{
+          path: 'search',
+          component: Search,
+          name: 'search'
+        }, {
+          path: 'contract/:contract_unid',
+          component: Contract,
+          name:"contract"
+        }, {
+          path: 'manage',
+          component: Manage,
+          name:'manage'
+        }, {
+          path: 'main',
+          component: Main,
+          name:'main'
+        }, {
+          path: 'user',
+          component: User,
+          name:'user'
+        }
+
+      ]
+    }
+  ]
+})