迁移仓库

李林

2023-08-08 7166305c222d01d376ee32448103229d957c72ad

迁移仓库

 .editorconfig

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,14 @@
# http://editorconfig.org
root = true

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

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

 .env.development

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = 'http://192.168.110.167:1234/'

 .env.production

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,7 @@
# just a flag
ENV = 'production'

# base api
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = 'http://192.168.110.167:1234/'


 .env.staging

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
NODE_ENV = production

# just a flag
ENV = 'staging'

# base api
# VUE_APP_BASE_API = '/stage-api'
VUE_APP_BASE_API = 'http://192.168.110.167:1234/'



 .eslintignore

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,4 @@
build/*.js
src
public
dist

 .eslintrc.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,198 @@
// module.exports = {
//   root: true,
//   parserOptions: {
//     parser: 'babel-eslint',
//     sourceType: 'module'
//   },
//   env: {
//     browser: true,
//     node: true,
//     es6: true,
//   },
//   extends: ['plugin:vue/recommended', 'eslint:recommended'],

//   // add your custom rules here
//   //it is base on https://github.com/vuejs/eslint-config-vue
//   // rules: {
//   //   "vue/max-attributes-per-line": [2, {
//   //     "singleline": 10,
//   //     "multiline": {
//   //       "max": 1,
//   //       "allowFirstLine": false
//   //     }
//   //   }],
//   //   "vue/singleline-html-element-content-newline": "off",
//   //   "vue/multiline-html-element-content-newline":"off",
//   //   "vue/name-property-casing": ["error", "PascalCase"],
//   //   "vue/no-v-html": "off",
//   //   'accessor-pairs': 2,
//   //   'arrow-spacing': [2, {
//   //     'before': true,
//   //     'after': true
//   //   }],
//   //   'block-spacing': [2, 'always'],
//   //   'brace-style': [2, '1tbs', {
//   //     'allowSingleLine': true
//   //   }],
//   //   'camelcase': [0, {
//   //     'properties': 'always'
//   //   }],
//   //   'comma-dangle': [2, 'never'],
//   //   'comma-spacing': [2, {
//   //     'before': false,
//   //     'after': true
//   //   }],
//   //   'comma-style': [2, 'last'],
//   //   'constructor-super': 2,
//   //   'curly': [2, 'multi-line'],
//   //   'dot-location': [2, 'property'],
//   //   'eol-last': 2,
//   //   'eqeqeq': ["error", "always", {"null": "ignore"}],
//   //   'generator-star-spacing': [2, {
//   //     'before': true,
//   //     'after': true
//   //   }],
//   //   'handle-callback-err': [2, '^(err|error)$'],
//   //   'indent': [2, 2, {
//   //     'SwitchCase': 1
//   //   }],
//   //   'jsx-quotes': [2, 'prefer-single'],
//   //   'key-spacing': [2, {
//   //     'beforeColon': false,
//   //     'afterColon': true
//   //   }],
//   //   'keyword-spacing': [2, {
//   //     'before': true,
//   //     'after': true
//   //   }],
//   //   'new-cap': [2, {
//   //     'newIsCap': true,
//   //     'capIsNew': false
//   //   }],
//   //   'new-parens': 2,
//   //   'no-array-constructor': 2,
//   //   'no-caller': 2,
//   //   'no-console': 'off',
//   //   'no-class-assign': 2,
//   //   'no-cond-assign': 2,
//   //   'no-const-assign': 2,
//   //   'no-control-regex': 0,
//   //   'no-delete-var': 2,
//   //   'no-dupe-args': 2,
//   //   'no-dupe-class-members': 2,
//   //   'no-dupe-keys': 2,
//   //   'no-duplicate-case': 2,
//   //   'no-empty-character-class': 2,
//   //   'no-empty-pattern': 2,
//   //   'no-eval': 2,
//   //   'no-ex-assign': 2,
//   //   'no-extend-native': 2,
//   //   'no-extra-bind': 2,
//   //   'no-extra-boolean-cast': 2,
//   //   'no-extra-parens': [2, 'functions'],
//   //   'no-fallthrough': 2,
//   //   'no-floating-decimal': 2,
//   //   'no-func-assign': 2,
//   //   'no-implied-eval': 2,
//   //   'no-inner-declarations': [2, 'functions'],
//   //   'no-invalid-regexp': 2,
//   //   'no-irregular-whitespace': 2,
//   //   'no-iterator': 2,
//   //   'no-label-var': 2,
//   //   'no-labels': [2, {
//   //     'allowLoop': false,
//   //     'allowSwitch': false
//   //   }],
//   //   'no-lone-blocks': 2,
//   //   'no-mixed-spaces-and-tabs': 2,
//   //   'no-multi-spaces': 2,
//   //   'no-multi-str': 2,
//   //   'no-multiple-empty-lines': [2, {
//   //     'max': 1
//   //   }],
//   //   'no-native-reassign': 2,
//   //   'no-negated-in-lhs': 2,
//   //   'no-new-object': 2,
//   //   'no-new-require': 2,
//   //   'no-new-symbol': 2,
//   //   'no-new-wrappers': 2,
//   //   'no-obj-calls': 2,
//   //   'no-octal': 2,
//   //   'no-octal-escape': 2,
//   //   'no-path-concat': 2,
//   //   'no-proto': 2,
//   //   'no-redeclare': 2,
//   //   'no-regex-spaces': 2,
//   //   'no-return-assign': [2, 'except-parens'],
//   //   'no-self-assign': 2,
//   //   'no-self-compare': 2,
//   //   'no-sequences': 2,
//   //   'no-shadow-restricted-names': 2,
//   //   'no-spaced-func': 2,
//   //   'no-sparse-arrays': 2,
//   //   'no-this-before-super': 2,
//   //   'no-throw-literal': 2,
//   //   'no-trailing-spaces': 2,
//   //   'no-undef': 2,
//   //   'no-undef-init': 2,
//   //   'no-unexpected-multiline': 2,
//   //   'no-unmodified-loop-condition': 2,
//   //   'no-unneeded-ternary': [2, {
//   //     'defaultAssignment': false
//   //   }],
//   //   'no-unreachable': 2,
//   //   'no-unsafe-finally': 2,
//   //   'no-unused-vars': [2, {
//   //     'vars': 'all',
//   //     'args': 'none'
//   //   }],
//   //   'no-useless-call': 2,
//   //   'no-useless-computed-key': 2,
//   //   'no-useless-constructor': 2,
//   //   'no-useless-escape': 0,
//   //   'no-whitespace-before-property': 2,
//   //   'no-with': 2,
//   //   'one-var': [2, {
//   //     'initialized': 'never'
//   //   }],
//   //   'operator-linebreak': [2, 'after', {
//   //     'overrides': {
//   //       '?': 'before',
//   //       ':': 'before'
//   //     }
//   //   }],
//   //   'padded-blocks': [2, 'never'],
//   //   'quotes': [2, 'single', {
//   //     'avoidEscape': true,
//   //     'allowTemplateLiterals': true
//   //   }],
//   //   'semi': [2, 'never'],
//   //   'semi-spacing': [2, {
//   //     'before': false,
//   //     'after': true
//   //   }],
//   //   'space-before-blocks': [2, 'always'],
//   //   'space-before-function-paren': [2, 'never'],
//   //   'space-in-parens': [2, 'never'],
//   //   'space-infix-ops': 2,
//   //   'space-unary-ops': [2, {
//   //     'words': true,
//   //     'nonwords': false
//   //   }],
//   //   'spaced-comment': [2, 'always', {
//   //     'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
//   //   }],
//   //   'template-curly-spacing': [2, 'never'],
//   //   'use-isnan': 2,
//   //   'valid-typeof': 2,
//   //   'wrap-iife': [2, 'any'],
//   //   'yield-star-spacing': [2, 'both'],
//   //   'yoda': [2, 'never'],
//   //   'prefer-const': 2,
//   //   'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
//   //   'object-curly-spacing': [2, 'always', {
//   //     objectsInObjects: false
//   //   }],
//   //   'array-bracket-spacing': [2, 'never']
//   // }
// }

 .gitignore

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,16 @@
.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
package-lock.json
tests/**/coverage/

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

 .travis.yml

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
language: node_js
node_js: 10
script: npm run test
notifications:
  email: false

 LICENSE

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

Copyright (c) 2017-present PanJiaChen

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

 babel.config.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,14 @@
module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      // https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html
      'plugins': ['dynamic-import-node']
    }
  }
}

 build/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,35 @@
const { run } = require('runjs')
const chalk = require('chalk')
const config = require('../vue.config.js')
const rawArgv = process.argv.slice(2)
const args = rawArgv.join(' ')

if (process.env.npm_config_preview || rawArgv.includes('--preview')) {
  const report = rawArgv.includes('--report')

  run(`vue-cli-service build ${args}`)

  const port = 9526
  const publicPath = config.publicPath

  var connect = require('connect')
  var serveStatic = require('serve-static')
  const app = connect()

  app.use(
    publicPath,
    serveStatic('./dist', {
      index: ['index.html', '/']
    })
  )

  app.listen(port, function () {
    console.log(chalk.green(`> Preview at  http://localhost:${port}${publicPath}`))
    if (report) {
      console.log(chalk.green(`> Report at  http://localhost:${port}${publicPath}report.html`))
    }

  })
} else {
  run(`vue-cli-service build ${args}`)
}

 jest.config.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,24 @@
module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
  transform: {
    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
  },
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
  snapshotSerializers: ['jest-serializer-vue'],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
  collectCoverageFrom: ['src/utils/**/*.{js,vue}', '!src/utils/auth.js', '!src/utils/request.js', 'src/components/**/*.{js,vue}'],
  coverageDirectory: '<rootDir>/tests/unit/coverage',
  // 'collectCoverage': true,
  'coverageReporters': [
    'lcov',
    'text-summary'
  ],
  testURL: 'http://localhost/'
}

 jsconfig.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
        "@/*": ["src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

 mock/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,57 @@
const Mock = require('mockjs')
const { param2Obj } = require('./utils')

const user = require('./user')
const table = require('./table')

const mocks = [
  ...user,
  ...table
]

// for front mock
// please use it cautiously, it will redefine XMLHttpRequest,
// which will cause many of your third-party libraries to be invalidated(like progress event).
function mockXHR() {
  // mock patch
  // https://github.com/nuysoft/Mock/issues/300
  Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
  Mock.XHR.prototype.send = function() {
    if (this.custom.xhr) {
      this.custom.xhr.withCredentials = this.withCredentials || false

      if (this.responseType) {
        this.custom.xhr.responseType = this.responseType
      }
    }
    this.proxy_send(...arguments)
  }

  function XHR2ExpressReqWrap(respond) {
    return function(options) {
      let result = null
      if (respond instanceof Function) {
        const { body, type, url } = options
        // https://expressjs.com/en/4x/api.html#req
        result = respond({
          method: type,
          body: JSON.parse(body),
          query: param2Obj(url)
        })
      } else {
        result = respond
      }
      return Mock.mock(result)
    }
  }

  for (const i of mocks) {
    Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
  }
}

module.exports = {
  mocks,
  mockXHR
}


 mock/mock-server.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,81 @@
const chokidar = require('chokidar')
const bodyParser = require('body-parser')
const chalk = require('chalk')
const path = require('path')
const Mock = require('mockjs')

const mockDir = path.join(process.cwd(), 'mock')

function registerRoutes(app) {
  let mockLastIndex
  const { mocks } = require('./index.js')
  const mocksForServer = mocks.map(route => {
    return responseFake(route.url, route.type, route.response)
  })
  for (const mock of mocksForServer) {
    app[mock.type](mock.url, mock.response)
    mockLastIndex = app._router.stack.length
  }
  const mockRoutesLength = Object.keys(mocksForServer).length
  return {
    mockRoutesLength: mockRoutesLength,
    mockStartIndex: mockLastIndex - mockRoutesLength
  }
}

function unregisterRoutes() {
  Object.keys(require.cache).forEach(i => {
    if (i.includes(mockDir)) {
      delete require.cache[require.resolve(i)]
    }
  })
}

// for mock server
const responseFake = (url, type, respond) => {
  return {
    url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
    type: type || 'get',
    response(req, res) {
      console.log('request invoke:' + req.path)
      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
    }
  }
}

module.exports = app => {
  // parse app.body
  // https://expressjs.com/en/4x/api.html#req.body
  app.use(bodyParser.json())
  app.use(bodyParser.urlencoded({
    extended: true
  }))

  const mockRoutes = registerRoutes(app)
  var mockRoutesLength = mockRoutes.mockRoutesLength
  var mockStartIndex = mockRoutes.mockStartIndex

  // watch files, hot reload mock server
  chokidar.watch(mockDir, {
    ignored: /mock-server/,
    ignoreInitial: true
  }).on('all', (event, path) => {
    if (event === 'change' || event === 'add') {
      try {
        // remove mock routes stack
        app._router.stack.splice(mockStartIndex, mockRoutesLength)

        // clear routes cache
        unregisterRoutes()

        const mockRoutes = registerRoutes(app)
        mockRoutesLength = mockRoutes.mockRoutesLength
        mockStartIndex = mockRoutes.mockStartIndex

        console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed  ${path}`))
      } catch (error) {
        console.log(chalk.redBright(error))
      }
    }
  })
}

 mock/table.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,29 @@
const Mock = require('mockjs')

const data = Mock.mock({
  'items|30': [{
    id: '@id',
    title: '@sentence(10, 20)',
    'status|1': ['published', 'draft', 'deleted'],
    author: 'name',
    display_time: '@datetime',
    pageviews: '@integer(300, 5000)'
  }]
})

module.exports = [
  {
    url: '/vue-admin-template/table/list',
    type: 'get',
    response: config => {
      const items = data.items
      return {
        code: 20000,
        data: {
          total: items.length,
          items: items
        }
      }
    }
  }
]

 mock/user.js

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

const tokens = {
  admin: {
    token: 'admin-token'
  },
  editor: {
    token: 'editor-token'
  }
}

const users = {
  'admin-token': {
    roles: ['admin'],
    introduction: 'I am a super administrator',
    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
    name: 'Super Admin'
  },
  'editor-token': {
    roles: ['editor'],
    introduction: 'I am an editor',
    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
    name: 'Normal Editor'
  }
}

module.exports = [
  // user login
  {
    url: '/vue-admin-template/user/login',
    type: 'post',
    response: config => {
      const { username } = config.body
      const token = tokens[username]

      // mock error
      if (!token) {
        return {
          code: 60204,
          message: 'Account and password are incorrect.'
        }
      }

      return {
        code: 20000,
        data: token
      }
    }
  },

  // get user info
  {
    url: '/vue-admin-template/user/info\.*',
    type: 'get',
    response: config => {
      const { token } = config.query
      const info = users[token]

      // mock error
      if (!info) {
        return {
          code: 50008,
          message: 'Login failed, unable to get user details.'
        }
      }

      return {
        code: 20000,
        data: info
      }
    }
  },

  // user logout
  {
    url: '/vue-admin-template/user/logout',
    type: 'post',
    response: _ => {
      return {
        code: 20000,
        data: 'success'
      }
    }
  }
]

 mock/utils.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,25 @@
/**
 * @param {string} url
 * @returns {Object}
 */
function param2Obj(url) {
  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
  if (!search) {
    return {}
  }
  const obj = {}
  const searchArr = search.split('&')
  searchArr.forEach(v => {
    const index = v.indexOf('=')
    if (index !== -1) {
      const name = v.substring(0, index)
      const val = v.substring(index + 1, v.length)
      obj[name] = val
    }
  })
  return obj
}

module.exports = {
  param2Obj
}

 package.json

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,65 @@
{
  "name": "vue-admin-template",
  "version": "4.4.0",
  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
  "author": "Pan <panfree23@gmail.com>",
  "scripts": {
    "dev": "vue-cli-service serve",
    "build:prod": "vue-cli-service build",
    "build:stage": "vue-cli-service build --mode staging",
    "preview": "node build/index.js --preview",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "lint": "eslint --ext .js,.vue src",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit"
  },
  "dependencies": {
    "af-table-column": "^1.0.3",
    "amfe-flexible": "^2.2.1",
    "axios": "0.18.1",
    "core-js": "3.6.5",
    "element-ui": "2.13.2",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "postcss-pxtorem": "^5.1.1",
    "vue": "2.6.10",
    "vue-router": "3.0.6",
    "vuex": "3.1.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",
    "@vue/cli-plugin-eslint": "4.4.4",
    "@vue/cli-plugin-unit-jest": "4.4.4",
    "@vue/cli-service": "4.4.4",
    "@vue/test-utils": "1.0.0-beta.29",
    "autoprefixer": "9.5.1",
    "babel-eslint": "10.1.0",
    "babel-jest": "23.6.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "2.4.2",
    "connect": "3.6.6",
    "eslint": "6.7.2",
    "eslint-plugin-vue": "6.2.2",
    "html-webpack-plugin": "3.2.0",
    "mockjs": "1.0.1-beta3",
    "runjs": "4.3.2",
    "sass": "1.26.8",
    "sass-loader": "8.0.2",
    "script-ext-html-webpack-plugin": "2.1.3",
    "serve-static": "1.13.2",
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.2",
    "vue-template-compiler": "2.6.10"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "license": "MIT"
}

 postcss.config.js

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

module.exports = {
  'plugins': {
    // to edit target browsers: use "browserslist" field in package.json
    'autoprefixer': {},
    'postcss-pxtorem': {
      rootValue: 192, // æ ¹æ®è®¾è®¡å›¾å°ºå¯¸å†™ï¼Œè®¾è®¡å›¾æ˜¯1920，就写192
      propList: ['*'] // éœ€è¦è¢«è½¬æ¢çš„属性
      // selectorBlackList: ['el'] // ä¸è¿›è¡Œpx转换的选择器，不转换element的标签样式，根据自己项目需求来定义
    }
  }
}

 public/favicon.ico

 public/index.html

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

 src/App.vue

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

<script>
export default {
  name: 'App'
}
</script>

 src/api/inspection/commisioninspection.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
import request from '@/utils/request'

// æŸ¥è¯¢å§”托检验列表
export function getCommisionList(params) {
  return request({
    url: '/link-basic-table/page',
    method: 'get',
    params
  })
}

 src/api/laboratory/ledger.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,129 @@
import request from '@/utils/request'

// æŸ¥è¯¢è®¾å¤‡ä»ªå™¨åˆ†ç±»
export function getClassifyList(params) {
  return request({
    url: '/classify/list',
    method: 'get',
    params
  })
}

// æ·»åŠ è®¾å¤‡ä»ªå™¨åˆ†ç±»
export function addClassify(data) {
  return request({
    url: '/classify/add',
    method: 'post',
    data
  })
}

// æ›´æ–°è®¾å¤‡ä»ªå™¨åˆ†ç±»
export function changeClassify(data) {
  return request({
    url: '/classify/update',
    method: 'put',
    data
  })
}

// åˆ é™¤è®¾å¤‡ä»ªå™¨åˆ†ç±»
export function delClassify(data) {
  return request({
    url: '/classify/delete',
    method: 'put',
    data
  })
}

// æŸ¥è¯¢è®¾å¤‡ä»ªå™¨åˆ—表
export function getInstrumentList(params) {
  return request({
    url: '/instrument/list',
    method: 'get',
    params
  })
}

// æ·»åŠ è®¾å¤‡ä»ªå™¨
export function addInstrument(data) {
  return request({
    url: '/instrument/add',
    method: 'post',
    data
  })
}

// ä¿®æ”¹è®¾å¤‡ä»ªå™¨
export function changeInstrument(data) {
  return request({
    url: '/instrument/update',
    method: 'put',
    data
  })
}
// èŽ·å–添加仪器时的保管人下拉框数据
export function addInstrumentUser(params) {
  return request({
    url: '/instrument/get_user',
    method: 'get',
    params
  })
}

// èŽ·å–设备仪器详情
export function getInstrumentDetail(params) {
  return request({
    url: '/instrument/get_instrument',
    method: 'get',
    params
  })
}

export function deleteInstrument(params) {
  return request({
    url: '/instrument/delete',
    method: 'delete',
    params
  })
}

// æ ¹æ®è®¾å¤‡id查找对应码点
export function getEquipmentPointList(params) {
  return request({
    url: '/equipment-point/list',
    method: 'get',
    params
  })
}

// æ·»åŠ è®¾å¤‡ç ç‚¹
export function addEquipmentPoint(data) {
  return request({
    url: '/equipment-point/add',
    method: 'post',
    data
  })
}

// æ ¹æ®è®¾å¤‡id查找对应计量
export function getMetricalInformationList(params) {
  return request({
    url: '/metrical-information/list',
    method: 'get',
    params
  })
}

// æ·»åŠ è®¾å¤‡è®¡é‡
export function addMetricalInformation(data) {
  return request({
    url: '/metrical-information/add',
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data
  })
}


 src/api/rawMaterials/reportForInspection.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,32 @@
import request from '@/utils/request'

// æŸ¥è¯¢æ‰€æœ‰ç”³è¯·å•åˆ—表
export function getInspectionList(params) {
  return request({
    url: '/inspection/selectAllInspection',
    method: 'get',
    params
  })
}

// æ·»åŠ æ£€éªŒç”³è¯·å•
export function addInspection(data) {
  return request({
    url: '/inspection/addInspection',
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data
  })
}

// æŸ¥è¯¢æ‰€æœ‰ç”³è¯·å•id查询样品列表
export function getInspectionMaterialListById(params) {
  return request({
    url: '/inspectionMaterialList/selectInspectionMaterialListById/' + params.inspectionId,
    method: 'get',
    params
  })
}


 src/api/standardLibrary.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,54 @@
import request from '@/utils/request'

export function getMaterialList(params) {
  return request({
    url: '/material/list',
    method: 'get',
    params
  })
}

// èŽ·å–所有项目
export function getProductList(params) {
  return request({
    url: '/product/page',
    method: 'get',
    params
  })
}

// èŽ·å–所有父项目对应的子项目
export function getProductSonList(params) {
  return request({
    url: '/product/father',
    method: 'get',
    params
  })
}

// æ·»åŠ ç‰©æ–™
export function addMaterial(data) {
  return request({
    url: '/material/add',
    method: 'post',
    data
  })
}

// æ·»åŠ æ ‡å‡†
export function addStandards(data) {
  return request({
    url: '/standards/add',
    method: 'post',
    data
  })
}

// æ·»åŠ è§„æ ¼
export function addSpecifications(data) {
  return request({
    url: '/specifications/add',
    method: 'post',
    data
  })
}

 src/api/table.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
import request from '@/utils/request'

export function getList(params) {
  return request({
    url: '/vue-admin-template/table/list',
    method: 'get',
    params
  })
}

 src/api/user.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,53 @@
import request from '@/utils/request'

// ç™»å½•
export function login(data) {
  return request({
    url: '/user/login',
    method: 'post',
    params: {
      account: data.username,
      password: data.password
    }
  })
}

// èŽ·å–用户信息
export function getInfo() {
  return request({
    url: '/user/getUserById',
    method: 'post'
  })
}

// é€€å‡ºç™»å½•
export function logout() {
  return request({
    url: '/vue-admin-template/user/logout',
    method: 'post'
  })
}

// åˆ†é¡µæŸ¥è¯¢ç”¨æˆ·åˆ—表
export function getUserList() {
  return request({
    url: '/user/list_new_personnel',
    method: 'get'
  })
}

// æ–°å¢žç”¨æˆ·
export function addUser() {
  return request({
    url: '/user/add_new_personnel',
    method: 'post'
  })
}

// ä¿®æ”¹ç”¨æˆ·ä¿¡æ¯
export function putUserInfo() {
  return request({
    url: '/user/update_new_personnel',
    method: 'put'
  })
}

 src/assets/404_images/404.png

 src/assets/404_images/404_cloud.png

 src/assets/404_images/backgroud.png

 src/assets/404_images/logo.png

 src/assets/404_images/logoHide.png

 src/components/Breadcrumb/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,81 @@
<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
        <span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import pathToRegexp from 'path-to-regexp'

export default {
  data() {
    return {
      levelList: null
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      // const first = matched[0]
      // console.log(this.isDashboard(first))// åˆ¤æ–­æ˜¯å¦æœ‰ä¸»é¡µ
      // if (!this.isDashboard(first)) {
      //   matched = [{ path: '/home', meta: { title: '主页', icon: 'el-icon-s-home' }}].concat(matched)
      // }

      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'home'.toLocaleLowerCase()
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: block;
  font-size: 14px;
  padding: 12px 24px;
  height: 38px;
  // width: 100%;
  margin: 0px 9px;
  background: #fff;
  // margin-left: px;
  .no-redirect {
    color: #97a8be;
    cursor: text;
  }
}
</style>

 src/components/Hamburger/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,44 @@
<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" />
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>

 src/components/SvgIcon/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,62 @@
<template>
  <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
  <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script>
// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
import { isExternal } from '@/utils/validate'

export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    isExternal() {
      return isExternal(this.iconClass)
    },
    iconName() {
      return `#icon-${this.iconClass}`
    },
    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className
      } else {
        return 'svg-icon'
      }
    },
    styleExternalIcon() {
      return {
        mask: `url(${this.iconClass}) no-repeat 50% 50%`,
        '-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
      }
    }
  }
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover!important;
  display: inline-block;
}
</style>

 src/icons/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,9 @@
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

 src/icons/svg/dashboard.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<svg width="128" height="100" xmlns="http://www.w3.org/2000/svg"><path d="M27.429 63.638c0-2.508-.893-4.65-2.679-6.424-1.786-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.465 2.662-1.785 1.774-2.678 3.916-2.678 6.424 0 2.508.893 4.65 2.678 6.424 1.786 1.775 3.94 2.662 6.465 2.662 2.524 0 4.678-.887 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm13.714-31.801c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM71.714 65.98l7.215-27.116c.285-1.23.107-2.378-.536-3.443-.643-1.064-1.56-1.762-2.75-2.094-1.19-.33-2.333-.177-3.429.462-1.095.639-1.81 1.573-2.143 2.804l-7.214 27.116c-2.857.237-5.405 1.266-7.643 3.088-2.238 1.822-3.738 4.152-4.5 6.992-.952 3.644-.476 7.098 1.429 10.364 1.905 3.265 4.69 5.37 8.357 6.317 3.667.947 7.143.474 10.429-1.42 3.285-1.892 5.404-4.66 6.357-8.305.762-2.84.619-5.607-.429-8.305-1.047-2.697-2.762-4.85-5.143-6.46zm47.143-2.342c0-2.508-.893-4.65-2.678-6.424-1.786-1.775-3.94-2.662-6.465-2.662-2.524 0-4.678.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.786 1.775 3.94 2.662 6.464 2.662 2.524 0 4.679-.887 6.465-2.662 1.785-1.775 2.678-3.916 2.678-6.424zm-45.714-45.43c0-2.509-.893-4.65-2.679-6.425C68.68 10.01 66.524 9.122 64 9.122c-2.524 0-4.679.887-6.464 2.661-1.786 1.775-2.679 3.916-2.679 6.425 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zm32 13.629c0-2.508-.893-4.65-2.679-6.424-1.785-1.775-3.94-2.662-6.464-2.662-2.524 0-4.679.887-6.464 2.662-1.786 1.774-2.679 3.916-2.679 6.424 0 2.508.893 4.65 2.679 6.424 1.785 1.774 3.94 2.662 6.464 2.662 2.524 0 4.679-.888 6.464-2.662 1.786-1.775 2.679-3.916 2.679-6.424zM128 63.638c0 12.351-3.357 23.78-10.071 34.286-.905 1.372-2.19 2.058-3.858 2.058H13.93c-1.667 0-2.953-.686-3.858-2.058C3.357 87.465 0 76.037 0 63.638c0-8.613 1.69-16.847 5.071-24.703C8.452 31.08 13 24.312 18.714 18.634c5.715-5.68 12.524-10.199 20.429-13.559C47.048 1.715 55.333.035 64 .035c8.667 0 16.952 1.68 24.857 5.04 7.905 3.36 14.714 7.88 20.429 13.559 5.714 5.678 10.262 12.446 13.643 20.301 3.38 7.856 5.071 16.09 5.071 24.703z"/></svg>

 src/icons/svg/example.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M96.258 57.462h31.421C124.794 27.323 100.426 2.956 70.287.07v31.422a32.856 32.856 0 0 1 25.971 25.97zm-38.796-25.97V.07C27.323 2.956 2.956 27.323.07 57.462h31.422a32.856 32.856 0 0 1 25.97-25.97zm12.825 64.766v31.421c30.46-2.885 54.507-27.253 57.713-57.712H96.579c-2.886 13.466-13.146 23.726-26.292 26.291zM31.492 70.287H.07c2.886 30.46 27.253 54.507 57.713 57.713V96.579c-13.466-2.886-23.726-13.146-26.291-26.292z"/></svg>

 src/icons/svg/eye-open.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>

 src/icons/svg/eye.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>

 src/icons/svg/form.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M84.068 23.784c-1.02 0-1.877-.32-2.572-.96a8.588 8.588 0 0 1-1.738-2.237 11.524 11.524 0 0 1-1.042-2.621c-.232-.895-.348-1.641-.348-2.238V0h.278c.834 0 1.622.085 2.363.256.742.17 1.645.575 2.711 1.214 1.066.64 2.363 1.535 3.892 2.686 1.53 1.15 3.453 2.664 5.77 4.54 2.502 2.045 4.494 3.771 5.977 5.178 1.483 1.406 2.618 2.6 3.406 3.58.787.98 1.274 1.812 1.46 2.494.185.682.277 1.278.277 1.79v2.046H84.068zM127.3 84.01c.278.682.464 1.535.556 2.558.093 1.023-.37 2.003-1.39 2.94-.463.427-.88.832-1.25 1.215-.372.384-.696.704-.974.96a6.69 6.69 0 0 1-.973.767l-11.816-10.741a44.331 44.331 0 0 0 1.877-1.535 31.028 31.028 0 0 1 1.737-1.406c1.112-.938 2.317-1.343 3.615-1.215 1.297.128 2.363.405 3.197.83.927.427 1.923 1.173 2.989 2.239 1.065 1.065 1.876 2.195 2.432 3.388zM78.23 95.902c2.038 0 3.752-.511 5.143-1.534l-26.969 25.83H18.037c-1.761 0-3.684-.47-5.77-1.407a24.549 24.549 0 0 1-5.838-3.709 21.373 21.373 0 0 1-4.518-5.306c-1.204-2.003-1.807-4.07-1.807-6.202V16.495c0-1.79.44-3.665 1.32-5.626A18.41 18.41 0 0 1 5.04 5.562a21.798 21.798 0 0 1 5.213-3.964C12.198.533 14.237 0 16.37 0h53.24v15.984c0 1.62.278 3.367.834 5.242a16.704 16.704 0 0 0 2.572 5.179c1.159 1.577 2.665 2.898 4.518 3.964 1.853 1.066 4.078 1.598 6.673 1.598h20.295v42.325L85.458 92.45c1.02-1.364 1.529-2.856 1.529-4.476 0-2.216-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1c-2.409 0-4.448.789-6.116 2.366-1.668 1.577-2.502 3.474-2.502 5.69 0 2.217.834 4.092 2.502 5.626 1.668 1.535 3.707 2.302 6.117 2.302h52.13zM26.1 47.951c-2.41 0-4.449.789-6.117 2.366-1.668 1.577-2.502 3.473-2.502 5.69 0 2.216.834 4.092 2.502 5.626 1.668 1.534 3.707 2.302 6.117 2.302h52.13c2.409 0 4.47-.768 6.185-2.302 1.715-1.534 2.572-3.41 2.572-5.626 0-2.217-.857-4.113-2.572-5.69-1.714-1.577-3.776-2.366-6.186-2.366H26.1zm52.407 64.063l1.807-1.663 3.476-3.196a479.75 479.75 0 0 0 4.587-4.284 500.757 500.757 0 0 1 5.004-4.667c3.985-3.666 8.48-7.758 13.485-12.276l11.677 10.741-13.485 12.404-5.004 4.603-4.587 4.22a179.46 179.46 0 0 0-3.267 3.068c-.88.853-1.367 1.322-1.46 1.407-.463.341-.973.703-1.529 1.087-.556.383-1.112.703-1.668.959-.556.256-1.413.575-2.572.959a83.5 83.5 0 0 1-3.545 1.087 72.2 72.2 0 0 1-3.475.895c-1.112.256-1.946.426-2.502.511-1.112.17-1.854.043-2.224-.383-.371-.426-.464-1.151-.278-2.174.092-.511.278-1.279.556-2.302.278-1.023.602-2.067.973-3.132l1.042-3.005c.325-.938.58-1.577.765-1.918a10.157 10.157 0 0 1 2.224-2.941z"/></svg>

 src/icons/svg/link.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.625 127.937H.063V12.375h57.781v12.374H12.438v90.813h90.813V70.156h12.374z"/><path d="M116.426 2.821l8.753 8.753-56.734 56.734-8.753-8.745z"/><path d="M127.893 37.982h-12.375V12.375H88.706V0h39.187z"/></svg>

 src/icons/svg/nested.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.002 9.2c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-5.043-3.58-9.132-7.997-9.132S.002 4.157.002 9.2zM31.997.066h95.981V18.33H31.997V.066zm0 45.669c0 5.044 3.58 9.132 7.998 9.132 4.417 0 7.997-4.088 7.997-9.132 0-3.263-1.524-6.278-3.998-7.91-2.475-1.63-5.524-1.63-7.998 0-2.475 1.632-4 4.647-4 7.91zM63.992 36.6h63.986v18.265H63.992V36.6zm-31.995 82.2c0 5.043 3.58 9.132 7.998 9.132 4.417 0 7.997-4.089 7.997-9.132 0-5.044-3.58-9.133-7.997-9.133s-7.998 4.089-7.998 9.133zm31.995-9.131h63.986v18.265H63.992V109.67zm0-27.404c0 5.044 3.58 9.133 7.998 9.133 4.417 0 7.997-4.089 7.997-9.133 0-3.263-1.524-6.277-3.998-7.909-2.475-1.631-5.524-1.631-7.998 0-2.475 1.632-4 4.646-4 7.91zm31.995-9.13h31.991V91.4H95.987V73.135z"/></svg>

 src/icons/svg/password.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M108.8 44.322H89.6v-5.36c0-9.04-3.308-24.163-25.6-24.163-23.145 0-25.6 16.881-25.6 24.162v5.361H19.2v-5.36C19.2 15.281 36.798 0 64 0c27.202 0 44.8 15.281 44.8 38.961v5.361zm-32 39.356c0-5.44-5.763-9.832-12.8-9.832-7.037 0-12.8 4.392-12.8 9.832 0 3.682 2.567 6.808 6.407 8.477v11.205c0 2.718 2.875 4.962 6.4 4.962 3.524 0 6.4-2.244 6.4-4.962V92.155c3.833-1.669 6.393-4.795 6.393-8.477zM128 64v49.201c0 8.158-8.645 14.799-19.2 14.799H19.2C8.651 128 0 121.359 0 113.201V64c0-8.153 8.645-14.799 19.2-14.799h89.6c10.555 0 19.2 6.646 19.2 14.799z"/></svg>

 src/icons/svg/table.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/><path d="M.006.064h127.988v31.104H.006V.064zm0 38.016h38.396v41.472H.006V38.08zm0 48.384h38.396v41.472H.006V86.464zM44.802 38.08h38.396v41.472H44.802V38.08zm0 48.384h38.396v41.472H44.802V86.464zM89.598 38.08h38.396v41.472H89.598zm0 48.384h38.396v41.472H89.598z"/></svg>

 src/icons/svg/tree.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M126.713 90.023c.858.985 1.287 2.134 1.287 3.447v29.553c0 1.423-.429 2.6-1.287 3.53-.858.93-1.907 1.395-3.146 1.395H97.824c-1.145 0-2.146-.465-3.004-1.395-.858-.93-1.287-2.107-1.287-3.53V93.47c0-.875.19-1.696.572-2.462.382-.766.906-1.368 1.573-1.806a3.84 3.84 0 0 1 2.146-.657h9.725V69.007a3.84 3.84 0 0 0-.43-1.806 3.569 3.569 0 0 0-1.143-1.313 2.714 2.714 0 0 0-1.573-.492h-36.47v23.149h9.725c1.144 0 2.145.492 3.004 1.478.858.985 1.287 2.134 1.287 3.447v29.553c0 .876-.191 1.696-.573 2.463-.38.766-.905 1.368-1.573 1.806a3.84 3.84 0 0 1-2.145.656H51.915a3.84 3.84 0 0 1-2.145-.656c-.668-.438-1.216-1.04-1.645-1.806a4.96 4.96 0 0 1-.644-2.463V93.47c0-1.313.43-2.462 1.288-3.447.858-.986 1.907-1.478 3.146-1.478h9.582v-23.15h-37.9c-.953 0-1.74.356-2.359 1.068-.62.711-.93 1.56-.93 2.544v19.538h9.726c1.239 0 2.264.492 3.074 1.478.81.985 1.216 2.134 1.216 3.447v29.553c0 1.423-.405 2.6-1.216 3.53-.81.93-1.835 1.395-3.074 1.395H4.29c-.476 0-.93-.082-1.358-.246a4.1 4.1 0 0 1-1.144-.657 4.658 4.658 0 0 1-.93-1.067 5.186 5.186 0 0 1-.643-1.395 5.566 5.566 0 0 1-.215-1.56V93.47c0-.437.048-.875.143-1.313a3.95 3.95 0 0 1 .429-1.15c.19-.328.429-.656.715-.984.286-.329.572-.602.858-.821.286-.22.62-.383 1.001-.493.382-.11.763-.164 1.144-.164h9.726V61.619c0-.985.31-1.833.93-2.544.619-.712 1.358-1.068 2.216-1.068h44.335V39.62h-9.582c-1.24 0-2.288-.492-3.146-1.477a5.09 5.09 0 0 1-1.287-3.448V5.14c0-1.423.429-2.627 1.287-3.612.858-.985 1.907-1.477 3.146-1.477h25.743c.763 0 1.478.246 2.145.739a5.17 5.17 0 0 1 1.573 1.888c.382.766.573 1.587.573 2.462v29.553c0 1.313-.43 2.463-1.287 3.448-.859.985-1.86 1.477-3.004 1.477h-9.725v18.389h42.762c.954 0 1.74.355 2.36 1.067.62.711.93 1.56.93 2.545v26.925h9.582c1.239 0 2.288.492 3.146 1.478z"/></svg>

 src/icons/svg/user.svg

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1 @@
<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg"><path d="M63.444 64.996c20.633 0 37.359-14.308 37.359-31.953 0-17.649-16.726-31.952-37.359-31.952-20.631 0-37.36 14.303-37.358 31.952 0 17.645 16.727 31.953 37.359 31.953zM80.57 75.65H49.434c-26.652 0-48.26 18.477-48.26 41.27v2.664c0 9.316 21.608 9.325 48.26 9.325H80.57c26.649 0 48.256-.344 48.256-9.325v-2.663c0-22.794-21.605-41.271-48.256-41.271z" stroke="#979797"/></svg>

 src/icons/svgo.yml

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,22 @@
# replace default config

# multipass: true
# full: true

plugins:

  # - name
  #
  # or:
  # - name: false
  # - name: true
  #
  # or:
  # - name:
  #     param1: 1
  #     param2: 2

- removeAttrs:
    attrs:
      - 'fill'
      - 'fill-rule'

 src/layout/components/AppMain.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,48 @@
<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <router-view :key="key" />
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.path
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  /*88 = navbar+baredcrumb  */
  min-height: calc(100vh - 88px);
  width: 100%;
  position: relative;
  overflow: hidden;
  >div{
    min-height: calc(100vh - 88px);
    height: 100%;
    width: 100%;
  }
  ::v-deep .content-main{//这是所有页面的内边距
    padding: 24px !important;
  }
}
.fixed-header+.app-main {
  padding-top: 50px;
}
</style>

<style lang="scss">
// fix css style bug in open el-dialog
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>

 src/layout/components/Navbar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,162 @@
<template>
  <div class="navbar">
    <!-- <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->

    <!-- <breadcrumb class="breadcrumb-container" /> -->

    <div class="right-menu">
      <div class="right-serves">
        <i class="el-icon-setting" />
        <i class="el-icon-bell" />
        <i class="el-icon-time" />
      </div>
      <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <a class="user-avatar">{{ '中天'.slice(0,1) }}</a>
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/">
            <el-dropdown-item>
              ä¿®æ”¹å¯†ç 
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import Breadcrumb from '@/components/Breadcrumb'
// import Hamburger from '@/components/Hamburger'

export default {
  components: {
    // Breadcrumb,
    // Hamburger
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar'
    ])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      // await this.$store.dispatch('user/logout')
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 50px;
  overflow: hidden;
  position: relative;
  background: #fff;
  display: flex;
  border-bottom: 1px solid #f0f2f5;
  // box-shadow: 0 0 0.857143rem rgba(0, 0, 0, 0.12);
  // box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    cursor: pointer;
    transition: background .3s;
    -webkit-tap-highlight-color:transparent;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .right-menu {
    flex: 1;
    height: 100%;
    line-height: 50px;
    display: flex;
    justify-content: right;
    .right-serves{
      height: 100%;
      display: flex;
      align-items: center;
      >i{
        display: inline-block;
        margin: auto 10px;
        font-size: 20px;
        line-height: 100%;
      }
    }

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, .025)
        }
      }
    }

    .avatar-container {
      margin-right: 24px;
      height: 100%;
      .avatar-wrapper {
        // margin-top: 5px;
        width: 40px;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        .user-avatar {
          cursor: pointer;
          width: 30px;
          height: 30px;
          font-size: 10px;
          border-radius: 50%;
          // margin-right: 12px;
          background: #0077DB;
          line-height: 31px;
          text-align: center;
          color: #fff;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}
</style>

 src/layout/components/Sidebar/FixiOSBug.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,26 @@
export default {
  computed: {
    device() {
      return this.$store.state.app.device
    }
  },
  mounted() {
    // In order to fix the click on menu on the ios device will trigger the mouseleave bug
    // https://github.com/PanJiaChen/vue-element-admin/issues/1135
    this.fixBugIniOS()
  },
  methods: {
    fixBugIniOS() {
      const $subMenu = this.$refs.subMenu
      if ($subMenu) {
        const handleMouseleave = $subMenu.handleMouseleave
        $subMenu.handleMouseleave = (e) => {
          if (this.device === 'mobile') {
            return
          }
          handleMouseleave(e)
        }
      }
    }
  }
}

 src/layout/components/Sidebar/Item.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,47 @@
<script>
export default {
  name: 'MenuItem',
  functional: true,
  props: {
    // show: {
    //   type: Boolean,
    //   default: true
    // },
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  render(h, context) {
    const { icon, title } = context.props
    const vnodes = []
    // console.log(show)
    // if (!show) return
    // console.log(icon, title)
    if (icon) {
      if (icon.includes('el-icon')) {
        vnodes.push(<i class={[icon, 'sub-el-icon']} />)
      } else {
        vnodes.push(<svg-icon icon-class={icon}/>)
      }
    }

    if (title) {
      vnodes.push(<span slot='title'>{(title)}</span>)
    }
    return vnodes
  }
}
</script>

<style scoped>
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
}
</style>

 src/layout/components/Sidebar/Link.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,43 @@
<template>
  <component :is="type" v-bind="linkProps(to)">
    <slot />
  </component>
</template>

<script>
import { isExternal } from '@/utils/validate'

export default {
  props: {
    to: {
      type: String,
      required: true
    }
  },
  computed: {
    isExternal() {
      return isExternal(this.to)
    },
    type() {
      if (this.isExternal) {
        return 'a'
      }
      return 'router-link'
    }
  },
  methods: {
    linkProps(to) {
      if (this.isExternal) {
        return {
          href: to,
          target: '_blank',
          rel: 'noopener'
        }
      }
      return {
        to: to
      }
    }
  }
}
</script>

 src/layout/components/Sidebar/Logo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,90 @@
<template>
  <div class="sidebar-logo-container" :class="{'collapse':collapse}">
    <transition name="sidebarLogoFade">
      <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
        <img v-if="logo" src="@/assets/404_images/logo.png" class="sidebar-logo">
        <!-- <h1 v-else class="sidebar-title">{{ title }} </h1> -->
      </router-link>
      <router-link v-else key="expand" class="sidebar-logo-link" to="/">
        <img v-if="logo" src="@/assets/404_images/logo.png" class="sidebar-logo">
        <!-- <h1 class="sidebar-title">{{ title }} </h1> -->
      </router-link>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'SidebarLogo',
  props: {
    collapse: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      title: 'Vue Admin Template',
      logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebarLogoFade-enter-active {
  transition: opacity 1.5s;
}

.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {
  opacity: 0;
}

.sidebar-logo-container {
  position: relative;
  width: 100%;
  height: 50px;
  line-height: 50px;
  background: #fff;
  text-align: center;
  overflow: hidden;

  & .sidebar-logo-link {
    height: 100%;
    width: 100%;
    padding: 0px 8px;
    box-sizing: border-box;
    // text-align: center;
    // align-items: center;
    & .sidebar-logo {
      width: 100%;
      // width: 32px;
      // height: 32px;
      // width: 60%;
      // height: 70%;
      // width: 80%;
      // height: 80%;
      vertical-align: middle;
      // margin-right: 12px;
    }

    & .sidebar-title {
      display: inline-block;
      margin: 0;
      color: #fff;
      font-weight: 600;
      line-height: 50px;
      font-size: 14px;
      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
      vertical-align: middle;
    }
  }

  &.collapse {
    .sidebar-logo {
      margin-right: 0px;
    }
  }
}
</style>

 src/layout/components/Sidebar/SidebarItem.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,114 @@
<template>
  <div v-if="!item.hidden">
    <template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
      <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">

        <el-menu-item v-if="onlyOneChild.meta.show==false ?onlyOneChild.meta.show: true" :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
          <!-- <el-menu-item :style="{width:'0px',height:'0px'}" v-if="onlyOneChild.meta.show==false ?onlyOneChild.meta.show: true" :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}"> -->
          <!-- <template slot="title">
            <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
          </template> -->
          <item :show="onlyOneChild.meta.show" :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
          <span v-if="onlyOneChild.meta.title==='主页'">主页</span>
        </el-menu-item>
      </app-link>
    </template>

    <el-submenu v-else ref="subMenu" popper-class="popMenu" :index="resolvePath(item.path)" popper-append-to-body>
      <template slot="title">
        <item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
      </template>
      <sidebar-item
        v-for="child in item.children"
        :key="child.path"
        :is-nest="true"
        :item="child"
        :base-path="resolvePath(child.path)"
        class="nest-menu"
      />
    </el-submenu>
  </div>
</template>

<script>
import path from 'path'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
import FixiOSBug from './FixiOSBug'

export default {
  name: 'SidebarItem',
  components: { Item, AppLink },
  mixins: [FixiOSBug],
  props: {
    // route object
    item: {
      type: Object,
      required: true
    },
    isNest: {
      type: Boolean,
      default: false
    },
    basePath: {
      type: String,
      default: ''
    }
  },
  data() {
    // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
    // TODO: refactor with render function
    this.onlyOneChild = null
    return {}
  },
  created() {
    // console.log(this.item)
  },
  methods: {
    hasOneShowingChild(children = [], parent) {
      const showingChildren = children.filter(item => {
        if (item.hidden) {
          return false
        } else {
          // Temp set(will be used if only has one showing child)
          this.onlyOneChild = item
          return true
        }
      })

      // When there is only one child router, the child router is displayed by default
      if (showingChildren.length === 1) {
        return true
      }

      // Show parent if there are no child router to display
      if (showingChildren.length === 0) {
        this.onlyOneChild = { ... parent, path: '', noShowingChildren: true }
        return true
      }

      return false
    },
    resolvePath(routePath) {
      if (isExternal(routePath)) {
        return routePath
      }
      if (isExternal(this.basePath)) {
        return this.basePath
      }
      return path.resolve(this.basePath, routePath)
    }
  }
}
</script>
<style  scoped>
/* æ–‡å­— */
::v-deep.el-submenu.is-active > .el-submenu__title {
  color: #409eff !important;
}
/* icon图标也跟着变 */
::v-deep .el-submenu.is-active > .el-submenu__title i {
  color: #409eff !important;
}
</style>

 src/layout/components/Sidebar/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,56 @@
<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="true"
        mode="vertical"
      >
        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'

export default {
  components: { SidebarItem, Logo },
  computed: {
    ...mapGetters([
      'sidebar'
    ]),
    routes() {
      return this.$router.options.routes
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  }
}
</script>

 src/layout/components/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,3 @@
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar'
export { default as AppMain } from './AppMain'

 src/layout/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,108 @@
<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
      </div>
      <div class="clearFixed" />
      <!-- æ¸…除定位的影响 -->
      <Breadcrumb class="breadcrumb-container" />
      <app-main />
    </div>
  </div>
</template>

<script>
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'
import Breadcrumb from '@/components/Breadcrumb'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain,
    Breadcrumb
  },
  mixins: [ResizeMixin],
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile'
      }
    }
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";
  @import "~@/styles/variables.scss";

  .app-wrapper {
    @include clearfix;
    position: relative;
    height: 100%;
    width: 100%;
    &.mobile.openSidebar{
      position: fixed;
      top: 0;
    }
    .sidebar-container{
      box-shadow: 0 0 0.857143rem rgba(0,0,0,.12);
    }
    .main-container{
      background:  #f0f2f5;
      .clearFixed{
        height: 50px;
      }
    }
  }
  .drawer-bg {
    background: #000;
    opacity: 0.3;
    width: 100%;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 999;
  }

  .fixed-header {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    width: calc(100% - #{$sideBarWidth});
    // width: calc(100% - 100px);
    transition: width 0.28s;
  }

  .hideSidebar .fixed-header {
    width: calc(100% - #{$sideBarWidth})
  }

  .mobile .fixed-header {
    width: 100%;
  }
</style>

 src/layout/mixin/ResizeHandler.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,45 @@
import store from '@/store'

const { body } = document
const WIDTH = 992 // refer to Bootstrap's responsive design

export default {
  watch: {
    $route(route) {
      if (this.device === 'mobile' && this.sidebar.opened) {
        store.dispatch('app/closeSideBar', { withoutAnimation: false })
      }
    }
  },
  beforeMount() {
    window.addEventListener('resize', this.$_resizeHandler)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.$_resizeHandler)
  },
  mounted() {
    const isMobile = this.$_isMobile()
    if (isMobile) {
      store.dispatch('app/toggleDevice', 'mobile')
      store.dispatch('app/closeSideBar', { withoutAnimation: true })
    }
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
    $_isMobile() {
      const rect = body.getBoundingClientRect()
      return rect.width - 1 < WIDTH
    },
    $_resizeHandler() {
      if (!document.hidden) {
        const isMobile = this.$_isMobile()
        store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')

        if (isMobile) {
          store.dispatch('app/closeSideBar', { withoutAnimation: true })
        }
      }
    }
  }
}

 src/main.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,45 @@
import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import 'amfe-flexible'
import AFTableColumn from 'af-table-column'
Vue.use(AFTableColumn)
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// å¦‚果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

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

 src/permission.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,65 @@
// import router from './router'
// import store from './store'
// import { Message } from 'element-ui'
// import NProgress from 'nprogress' // progress bar
// import 'nprogress/nprogress.css' // progress bar style
// import { getToken } from '@/utils/auth' // get token from cookie
// import getPageTitle from '@/utils/get-page-title'

// NProgress.configure({ showSpinner: false }) // NProgress Configuration

// const whiteList = ['/login'] // no redirect whitelist

// router.beforeEach(async(to, from, next) => {
//   // start progress bar
//   NProgress.start()

//   // set page title
//   document.title = getPageTitle(to.meta.title)

//   // determine whether the user has logged in
//   const hasToken = getToken()

//   if (hasToken) {
//     if (to.path === '/login') {
//       // if is logged in, redirect to the home page
//       next({ path: '/' })
//       NProgress.done()
//     } else {
//       const hasGetUserInfo = store.getters.name
//       if (hasGetUserInfo) {
//         next()
//       } else {
//         try {
//           // get user info
//           await store.dispatch('user/getInfo')

//           next()
//         } catch (error) {
//           // remove token and go to login page to re-login
//           // é‡æ–°åˆ·æ–°token
//           await store.dispatch('user/resetToken')
//           Message.error(error || 'Has Error')
//           next(`/login?redirect=${to.path}`)
//           NProgress.done()
//         }
//       }
//     }
//   } else {
//     /* has no token*/

//     if (whiteList.indexOf(to.path) !== -1) {
//       // in the free login whitelist, go directly
//       next()
//     } else {
//       // other pages that do not have permission to access are redirected to the login page.
//       next(`/login?redirect=${to.path}`)
//       NProgress.done()
//     }
//   }
// })

// router.afterEach(() => {
//   // finish progress bar
//   NProgress.done()
// })

 src/router/index.js

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

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/home',
    // meta: { title: '主页', icon: 'el-icon-s-home' },
    children: [{
      path: 'home',
      name: 'Home',
      component: () => import('@/views/home/index'),
      meta: { title: '主页', icon: 'el-icon-s-home' }
    }]
  },
  {
    path: '/standardLibrary',
    component: Layout,
    redirect: '/standardLibrary/index',
    meta: { title: '标准库', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'index',
        name: 'StandardLibrary',
        component: () => import('@/views/standardLibrary/index'),
        meta: { title: '标准库', icon: 'form' }
      },
      {
        path: 'specificationDetails/:id',
        name: 'SpecificationDetails',
        // hidden: true,
        component: () => import('@/views/standardLibrary/SpecificationDetails'),
        meta: { title: '产品规格详情', icon: 'form', show: false }
      }
    ]
  },
  // {
  //   path: '/rawMaterials',
  //   component: Layout,
  //   redirect: '/rawMaterials/reportForInspection',
  //   name: 'rawMaterials',
  //   meta: { title: '检验', icon: 'el-icon-s-help' },
  //   children: [
  //     {
  //       path: 'reportForInspection',
  //       name: 'ReportForInspection',
  //       component: () => import('@/views/rawMaterials/reportForInspection/index'),
  //       meta: { title: '原材料报检', icon: 'table' },
  //       children: [
  //         // {
  //         //   path: 'index',
  //         //   name: 'ReportForInspectionIndex',
  //         //   // hidden: true,
  //         //   component: () => import('@/views/rawMaterials/reportForInspection/index'),
  //         //   meta: { title: '原材料报检', icon: 'table' }
  //         // },
  //         {
  //           path: 'forInspectionDetail',
  //           name: 'ForInspectionDetail',
  //           hidden: true,
  //           component: () => import('@/views/rawMaterials/reportForInspection/forInspectionDetail'),
  //           meta: { title: '新增检验单详情', icon: 'table' }
  //         }
  //       ]
  //     },
  //     {
  //       path: 'print',
  //       name: 'Print',
  //       component: () => import('@/views/rawMaterials/print/index'),
  //       meta: { title: '条码打印', icon: 'tree' }
  //     },
  //     {
  //       path: 'planAssignments',
  //       name: 'PlanAssignments',
  //       component: () => import('@/views/rawMaterials/planAssignments/index'),
  //       meta: { title: '检验计划分配', icon: 'tree' }
  //     },
  //     {
  //       path: 'rawMaterialInspection',
  //       name: 'RawMaterialInspection',
  //       component: () => import('@/views/rawMaterials/rawMaterialInspection/index'),
  //       meta: { title: '原材料检验', icon: 'tree' }
  //     },
  //     {
  //       path: 'checkTheReport',
  //       name: 'CheckTheReport',
  //       component: () => import('@/views/rawMaterials/checkTheReport/index'),
  //       meta: { title: '检验报告', icon: 'tree' }
  //     },
  //     {
  //       path: 'reportAuditing',
  //       name: 'ReportAuditing',
  //       component: () => import('@/views/rawMaterials/reportAuditing/index'),
  //       meta: { title: '报告审核', icon: 'tree' }
  //     },
  //     {
  //       path: 'nonConformanceReview',
  //       name: 'NonConformanceReview',
  //       component: () => import('@/views/rawMaterials/nonConformanceReview/index'),
  //       meta: { title: '不合格反馈', icon: 'tree' }
  //     },
  //     {
  //       path: 'nonConformingFeedback',
  //       name: 'NonConformingFeedback',
  //       component: () => import('@/views/rawMaterials/nonConformingFeedback/index'),
  //       meta: { title: '不合格评审', icon: 'tree' }
  //     },
  //     {
  //       path: 'passRateStatistics',
  //       name: 'PassRateStatistics',
  //       component: () => import('@/views/rawMaterials/passRateStatistics/index'),
  //       meta: { title: '合格率统计', icon: 'tree' }
  //     }
  //   ]
  // },
  {
    path: '/inspectionManagement',
    component: Layout,
    redirect: '/inspectionManagement/commissionInspection',
    name: 'InspectionManagement',
    meta: { title: '报检管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'commissionInspection',
        name: 'CommissionInspection',
        component: () => import('@/views/inspectionManagement/commissionInspection/index'),
        meta: { title: '委托检验', icon: 'table' },
        children: [
          {
            path: 'addCommision',
            name: 'AddCommision',
            hidden: true,
            component: () => import('@/views/inspectionManagement/commissionInspection/addCommision'),
            meta: { title: '检测信息', icon: 'table' }
          }
        ]
      },
      {
        path: 'reportForInspection',
        name: 'ReportForInspection',
        component: () => import('@/views/inspectionManagement/reportForInspection/index'),
        meta: { title: '原材料报检', icon: 'tree' }
      }
    ]
  },
  {
    path: '/experiment',
    component: Layout,
    redirect: '/experiment/inspectionApplication',
    name: 'Experiment',
    meta: { title: '试验管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'inspectionApplication',
        name: 'InspectionApplication',
        component: () => import('@/views/experiment/inspectionApplication/index'),
        meta: { title: '检验申请', icon: 'tree' }
      },
      {
        path: 'planAssignments',
        name: 'PlanAssignments',
        component: () => import('@/views/experiment/planAssignments/index'),
        meta: { title: '检验计划', icon: 'tree' }
      },
      {
        path: 'checkTheReport',
        name: 'CheckTheReport',
        component: () => import('@/views/experiment/checkTheReport/index'),
        meta: { title: '检验报告', icon: 'tree' }
      },
      {
        path: 'reportAuditing',
        name: 'ReportAuditing',
        component: () => import('@/views/experiment/reportAuditing/index'),
        meta: { title: '报告审核', icon: 'tree' }
      },
      {
        path: 'nonConformanceReview',
        name: 'NonConformanceReview',
        component: () => import('@/views/experiment/nonConformanceReview/index'),
        meta: { title: '不合格品反馈', icon: 'tree' }
      },
      {
        path: 'nonConformingFeedback',
        name: 'NonConformingFeedback',
        component: () => import('@/views/experiment/nonConformingFeedback/index'),
        meta: { title: '不合格品评审', icon: 'tree' }
      },
      {
        path: 'passRateStatistics',
        name: 'PassRateStatistics',
        component: () => import('@/views/experiment/passRateStatistics/index'),
        meta: { title: '合格率统计', icon: 'tree' }
      }
    ]
  },
  // {
  //   path: '/finishedProduct',
  //   component: Layout,
  //   redirect: '/finishedProduct/reportForInspection',
  //   name: 'FinishedProduct',
  //   meta: { title: '成品检验', icon: 'el-icon-s-help' },
  //   children: [
  //     {
  //       path: 'reportForInspection',
  //       name: 'ReportForInspection',
  //       component: () => import('@/views/rawMaterials/reportForInspection/index'),
  //       meta: { title: '成品送检登记', icon: 'table' }
  //     },
  //     {
  //       path: 'print',
  //       name: 'Print',
  //       component: () => import('@/views/rawMaterials/print/index'),
  //       meta: { title: '条码打印', icon: 'tree' }
  //     },
  //     {
  //       path: 'planAssignments',
  //       name: 'PlanAssignments',
  //       component: () => import('@/views/rawMaterials/planAssignments/index'),
  //       meta: { title: '检验计划分配', icon: 'tree' }
  //     },
  //     {
  //       path: 'rawMaterialInspection',
  //       name: 'RawMaterialInspection',
  //       component: () => import('@/views/rawMaterials/rawMaterialInspection/index'),
  //       meta: { title: '成品检验', icon: 'tree' }
  //     },
  //     {
  //       path: 'checkTheReport',
  //       name: 'CheckTheReport',
  //       component: () => import('@/views/rawMaterials/checkTheReport/index'),
  //       meta: { title: '检验报告', icon: 'tree' }
  //     },
  //     {
  //       path: 'reportAuditing',
  //       name: 'ReportAuditing',
  //       component: () => import('@/views/rawMaterials/reportAuditing/index'),
  //       meta: { title: '报告审核', icon: 'tree' }
  //     },
  //     {
  //       path: 'nonConformanceReview',
  //       name: 'NonConformanceReview',
  //       component: () => import('@/views/rawMaterials/nonConformanceReview/index'),
  //       meta: { title: '不合格反馈', icon: 'tree' }
  //     },
  //     {
  //       path: 'nonConformingFeedback',
  //       name: 'NonConformingFeedback',
  //       component: () => import('@/views/rawMaterials/nonConformingFeedback/index'),
  //       meta: { title: '不合格评审', icon: 'tree' }
  //     },
  //     {
  //       path: 'passRateStatistics',
  //       name: 'PassRateStatistics',
  //       component: () => import('@/views/rawMaterials/passRateStatistics/index'),
  //       meta: { title: '合格率统计', icon: 'tree' }
  //     }
  //   ]
  // },
  {
    path: '/laboratory',
    component: Layout,
    redirect: '/laboratory/ledger',
    name: 'Laboratory',
    meta: { title: '实验室管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'ledger',
        name: 'Ledger',
        component: () => import('@/views/laboratory/ledger/index'),
        meta: { title: '设备台账', icon: 'table' }
      },
      {
        path: 'measure',
        name: 'Measure',
        component: () => import('@/views/laboratory/measure/index'),
        meta: { title: '计量管理', icon: 'tree' }
      },
      {
        path: 'gather',
        name: 'Gather',
        component: () => import('@/views/laboratory/gather/index'),
        meta: { title: '设备采集', icon: 'tree' }
      },
      {
        path: 'personnel',
        name: 'Personnel',
        component: () => import('@/views/laboratory/personnel/index'),
        meta: { title: '人员管理', icon: 'tree' }
      }
    ]
  },
  {
    path: '/CNAS',
    component: Layout,
    redirect: '/CNAS/reviewAnnualPlan',
    name: 'CNAS',
    meta: { title: 'CNAS管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'reviewAnnualPlan',
        name: 'ReviewAnnualPlan',
        component: () => import('@/views/CNAS/reviewAnnualPlan/index'),
        meta: { title: '审核年度计划', icon: 'table' }
      },
      {
        path: 'nonConformanceManage',
        name: 'NonConformanceManage',
        component: () => import('@/views/CNAS/nonConformanceManage/index'),
        meta: { title: '不符合项管理', icon: 'tree' }
      },
      {
        path: 'nonConformanceStatistics',
        name: 'NonConformanceStatistics',
        component: () => import('@/views/CNAS/nonConformanceStatistics/index'),
        meta: { title: '不符合项统计', icon: 'tree' }
      },
      {
        path: 'satisfactionSurveys',
        name: 'SatisfactionSurveys',
        component: () => import('@/views/CNAS/satisfactionSurveys/index'),
        meta: { title: '满意度调查', icon: 'tree' }
      }
    ]
  },
  {
    path: '/chart',
    component: Layout,
    redirect: '/chart/center',
    name: 'Chart',
    meta: { title: '智能图表', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'center',
        name: 'center',
        component: () => import('@/views/chart/center/index'),
        meta: { title: '实验中心', icon: 'table' }
      },
      {
        path: 'spc',
        name: 'Spc',
        component: () => import('@/views/chart/spc/index'),
        meta: { title: 'SPC控制图', icon: 'tree' }
      },
      {
        path: 'shota',
        name: 'Shota',
        component: () => import('@/views/chart/shota/index'),
        meta: { title: '正太分布图', icon: 'tree' }
      },
      {
        path: 'work',
        name: 'Work',
        component: () => import('@/views/chart/work/index'),
        meta: { title: '工作统计', icon: 'tree' }
      }
    ]
  },
  {
    path: '/message',
    component: Layout,
    redirect: '/message/message',
    name: 'Message',
    meta: { title: '消息待办', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'message',
        name: 'Message',
        component: () => import('@/views/message/message/index'),
        meta: { title: '我的消息', icon: 'table' }
      },
      {
        path: 'toDo',
        name: 'ToDo',
        component: () => import('@/views/message/toDo/index'),
        meta: { title: '我的待办', icon: 'tree' }
      }
    ]
  },
  {
    path: '/personal',
    component: Layout,
    redirect: '/personal/myInformation',
    name: 'Personal',
    meta: { title: '个人管理', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'myInformation',
        name: 'MyInformation',
        component: () => import('@/views/personal/myInformation/index'),
        meta: { title: '我的信息', icon: 'table' }
      },
      {
        path: 'myBusiness',
        name: 'MyBusiness',
        component: () => import('@/views/personal/myBusiness/index'),
        meta: { title: '我的企业', icon: 'tree', show: false }
      }
    ]
  },
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

 src/settings.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,16 @@
module.exports = {

  title: 'Vue Admin Template',

  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: true,

  /**
   * @type {boolean} true | false
   * @description Whether show the logo in sidebar
   */
  sidebarLogo: true
}

 src/store/getters.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,8 @@
const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name
}
export default getters

 src/store/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,19 @@
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user
  },
  getters
})

export default store

 src/store/modules/app.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,49 @@
import Cookies from 'js-cookie'

const state = {
  sidebar: {
    // opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
    opened: false,
    withoutAnimation: false
  },
  device: 'desktop'
}

const mutations = {
  TOGGLE_SIDEBAR: state => {
    state.sidebar.opened = !state.sidebar.opened
    state.sidebar.withoutAnimation = false
    if (state.sidebar.opened) {
      Cookies.set('sidebarStatus', 1)
    } else {
      Cookies.set('sidebarStatus', 0)
    }
  },
  CLOSE_SIDEBAR: (state, withoutAnimation) => {
    Cookies.set('sidebarStatus', 0)
    state.sidebar.opened = false
    state.sidebar.withoutAnimation = withoutAnimation
  },
  TOGGLE_DEVICE: (state, device) => {
    state.device = device
  }
}

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

 src/store/modules/settings.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,32 @@
import defaultSettings from '@/settings'

const { showSettings, fixedHeader, sidebarLogo } = defaultSettings

const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo
}

const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      state[key] = value
    }
  }
}

const actions = {
  changeSetting({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}


 src/store/modules/user.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,103 @@
import { login, logout, getInfo } from '@/api/user'
import { getToken, setToken, removeToken, getRefresh, setRefresh } from '@/utils/auth'
import { resetRouter } from '@/router'

const getDefaultState = () => {
  return {
    token: getToken(),
    name: '',
    avatar: '',
    refresh: getRefresh()
  }
}

const state = getDefaultState()

const mutations = {
  RESET_STATE: (state) => {
    Object.assign(state, getDefaultState())
  },
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_REFRESH: (state, refresh) => {
    state.refresh = refresh
  },
  SET_NAME: (state, name) => {
    state.name = name
  },
  SET_AVATAR: (state, avatar) => {
    state.avatar = avatar
  }
}

const actions = {
  // user login
  login({ commit }, userInfo) {
    const { username, password } = userInfo
    return new Promise((resolve, reject) => {
      login({ username: username.trim(), password: password }).then(response => {
        const { data } = response
        commit('SET_TOKEN', data.token)
        commit('SET_REFRESH', data.refresh)
        setToken(data.token)
        setRefresh(data.refresh)
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // get user info
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      getInfo(state.token).then(response => {
        const { data } = response

        if (!data) {
          return reject('Verification failed, please Login again.')
        }

        const { name, avatar } = data

        commit('SET_NAME', name)
        commit('SET_AVATAR', avatar)
        resolve(data)
      }).catch(error => {
        reject(error)
      })
    })
  },

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

  // remove token
  resetToken({ commit }) {
    return new Promise(resolve => {
      removeToken() // must remove  token  first
      commit('RESET_STATE')
      resolve()
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}


 src/styles/element-ui.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,134 @@
// cover some element-ui styles

.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  font-weight: 400 !important;
}

.el-upload {
  input[type="file"] {
    display: none !important;
  }
}

.el-upload__input {
  display: none;
  
}


// to fixed https://github.com/ElemeFE/element/issues/2461
.el-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
}

// refine element ui upload
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block
  }
}


// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}


.el-pagination{
  // å…¨å±€ä¿®æ”¹åˆ†é¡µå™¨çš„样式
  >span,>button{
    margin: 0 4px;
  }
  >button{
    border: 1px solid #DCDFE6;
    border-radius: 3px;
    // padding: 0px 6px;
    padding: 0px;
  }
  >ul li{
    border: 1px solid #DCDFE6;
    border-radius: 3px;
    margin: 0 4px;
  }
}
// å…¨å±€ä¿®æ”¹input框样式
.el-input input{
  // height: 32px !important;
}

// å…¨å±€ä¿®æ”¹button
.el-button {
  // height: 32px;
  // box-sizing: border-box;
  // font-size: 14px;
  // padding: 0 20px;
}


.el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #409EFF;
    background: #ecf5ff;
    border-color: #b3d8ff;
}
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
  box-shadow: -0.00521rem 0 0 0 #b3d8ff;
}

.el-menu-item,.el-submenu{
  width: 100px;
  height: 100px !important;
  line-height:normal;
  display: flex;
  align-items: center;
  justify-content: center !important;

}
// .el-menu-popup{
//   min-width: 100px !important;
// }
.el-menu--vertical{
  max-width: 100px !important;
}

.el-menu--collapse .el-menu .el-submenu, .el-menu--popup {
  min-width: 100px !important;
  // background-color: #fff ;
}
.el-popover.el-popper{
  min-width: 60px !important;
}
// //对应子级，父级的样式
// .el-submenu.is-active > .el-submenu__title {
//   background: rgb(206, 169, 181) !important;
// }
// //当前选中子级的样式
// .is-active{
//   background: red !important;
// }

// ä¿®æ”¹æŠ½å±‰å¤´éƒ¨çš„底部边距样式
.el-drawer__header{
  margin-bottom: 0px !important;
}

// æ¨¡æ€æ¡†æç¤ºæ–‡å­—的内边距清0
.el-form--label-top .el-form-item__label{
  padding: 0px !important;
}

 src/styles/index.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,85 @@
@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app {
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus {
  outline: none;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

// main-container global css
.app-container {
  padding: 20px;
}
/**修改全局的滚动条*/
/**滚动条的宽度*/
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-thumb {
    background-color: #bdbfc4;

    border-radius: 3px;
}
/*表格*/
.el-table__body-wrapper::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
    // background-color: #eaecf1;  
    background-color: #bdbfc4;
    border-radius: 3px;
}

 src/styles/mixin.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,28 @@
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

 src/styles/sidebar.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,346 @@
#app {

  .main-container {
    min-height: 100%;
    transition: margin-left .28s;
    margin-left: $sideBarWidth;
    position: relative;
  }

  .sidebar-container {
    transition: width 0.28s;
    width: $sideBarWidth !important;
    background-color: $menuBg;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;

    // reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }

    .scrollbar-wrapper {
      overflow-x: hidden !important;
    }

    .el-scrollbar__bar.is-vertical {
      right: 0px;
    }

    .el-scrollbar {
      height: 100%;
    }

    &.has-logo {
      .el-scrollbar {
        height: calc(100% - 50px);
      }
    }

    .is-horizontal {
      display: none;
    }

    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
    }

    .svg-icon {
      margin-right: 16px;
    }

    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;
    }

    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }

    // menu hover
    
    .el-submenu__title,.el-tooltip{
        border-radius: 8px;
        overflow: hidden;
      &:hover {
        background-color: $menuHover !important;   
        color: $menuActiveText !important;
      }
    }
    .submenu-title-noDropdown{
      &:hover {
        background-color:transparent !important; 
        // background-color: $menuBg !important;
        // border-radius: 8px;
        // overflow: hidden;
        color: $menuActiveText !important;

      }
    }
    .el-submenu.is-active{
     .popMenu{
      background-color: #fff !important;
      }
     .el-submenu__title{
        background-color: #ffffff !important;
        color: $menuActiveText !important;
        &:has(.is-active){
          background-color: #ffffff !important;
        color: $menuActiveText !important;
        }
      }

    }

    

    & .nest-menu .el-submenu>.el-submenu__title,
    & .el-submenu .el-menu-item {
      min-width: $sideBarWidth !important;
      background-color: $subMenuBg !important;

      &:hover {
        
        background-color: $subMenuHover !important;
      }
    }

    // .is-active.el-submenu{
    //   color: $subMenuActiveText !important;
      
    // }
    .is-active.el-menu-item {
      // color: $subMenuActiveText !important;
      // border-right: 3px solid $menuActiveText;
      // background-color: $menuHover !important;
      // background: #fff !important;
      .el-tooltip{
        color: $subMenuActiveText !important;
        // border-right: 3px solid $menuActiveText;
        background-color: $menuHover !important;
        border-radius: 8px;
      }

    }
  }

  .hideSidebar {
    .sidebar-container {
      // width: 54px !important;//原来的样式
      width: 100px !important;//修改后的样式
    }

    .main-container {
      // margin-left: 54px;//原来的样式
      margin-left: 100px;//修改后的样式
    }

    .submenu-title-noDropdown {
      padding: 0 !important;
      position: relative;

      .el-tooltip{
        width: 80px !important;
        line-height: normal;
        height: 80px !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        line-height: normal;
        justify-content: center;
        position: static !important;

      }
      .el-tooltip {
        padding: 0 !important;

        .svg-icon {
          margin-left: 20px;
        }

        .sub-el-icon {
          font-size: 30px;
          margin: 0px;
        }
      }
    }

    .el-submenu {
      overflow: hidden;
      
      &>.el-submenu__title{
        // width: auto;
        // height: auto;
        width: 80px;
        line-height: normal;
        height: 80px !important;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .svg-icon {
          margin-left: 20px;
        }

        .sub-el-icon {
          // margin-left: 19px;
          font-size: 30px;
          margin: 0px;

        }

        .el-submenu__icon-arrow {
          display: none;
        }
      }
      &>.el-menu--vertical.popMenu{
        .el-menu{
            width: 60px;
            height: 60px !important;
            line-height: normal !important;
            // >a{
            //   width: 100%;
            //   height: 60px !important;
            // }
        }
        .nest-menu{
            width: 60px;
            height: 60px !important;
            line-height: normal !important;
            background-color: #fff !important;
            // margin: 0 auto;
          // >a {
          //   height: 100%;
          // }
          .el-menu-item{
            padding: 0px !important;
            width: 60px;
            height: 30px !important;
            line-height: normal !important;
            margin: 0 auto;
          }
        }
        
      }
    }

    .el-menu--collapse {
      .el-submenu {
        &>.el-submenu__title {
          &>span {
            // height: 0;
            // width: 0;
            // overflow: hidden;
            // visibility: hidden;
            // display: inline-block;
            // ä¸Šé¢æ˜¯éšè—æ–‡å­—
          }
        }
      }
    }
  }

  .el-menu--collapse .el-menu .el-submenu {
    min-width: $sideBarWidth !important;
  }

  // mobile responsive
  .mobile {
    .main-container {
      margin-left: 0px;
    }

    .sidebar-container {
      transition: transform .28s;
      width: $sideBarWidth !important;
    }

    &.hideSidebar {
      .sidebar-container {
        pointer-events: none;
        transition-duration: 0.3s;
        transform: translate3d(-$sideBarWidth, 0, 0);
      }
    }
  }

  .withoutAnimation {

    .main-container,
    .sidebar-container {
      transition: none;
    }
  }
}

// when menu collapsed
.el-menu--vertical {
  &>.el-menu {
    background-color: $subMenuBg !important;
    .svg-icon {
      margin-right: 16px;
    }
    .sub-el-icon {
      margin-right: 12px;
      margin-left: -2px;
    }
  }
  .nest-menu .el-submenu>.el-submenu__title,
  .el-menu-item {
    width: 100px;
    height: 30px !important;
    min-width: 100px !important;
    line-height: 30px;
    text-align: left !important;
    font-size: 10px;
    justify-content: start !important;
    background-color: $subMenuBg !important;
    color: $subMenuHover !important;
    .svg-icon{
      margin-right: 0px;
      display: none;
    }
    span{
      text-align: center;
    }
    &:hover {
      // you can use $subMenuHover
      background-color: $subMenuHover !important;
      color: $subMenuBg !important;
      // background-color: red !important;
    }
  }

  // the scroll bar appears when the subMenu is too long
  >.el-menu--popup {
    max-height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    &::-webkit-scrollbar-track-piece {
      background: #d3dce6;
    }

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: #99a9bf;
      border-radius: 20px;
    }
  }
}

 src/styles/transition.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,48 @@
// global transition css

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  position: absolute;
}

 src/styles/variables.scss

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,53 @@
// sidebar
// $menuText:#bfcbd9;
// $menuActiveText:#409EFF;
// $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951

// $menuBg:#304156;
// $menuHover:#263445;

// $subMenuBg:#1f2d3d;
// $subMenuHover:#001528;

// $sideBarWidth: 210px;


// $menuText:#606266;
// $menuActiveText:#0077DB;
// // $subMenuActiveText:#606266; //https://github.com/ElemeFE/element/issues/12951
// $subMenuActiveText:#0077DB; //https://github.com/ElemeFE/element/issues/12951

// $menuBg:#fff;
// $menuHover:#E5F1FB;

// $subMenuBg:#fff;
// $subMenuHover:#E5F1FB;

// $sideBarWidth: 100px;


$menuText:#fff;
$menuActiveText:#0077DB;
// $subMenuActiveText:#606266; //https://github.com/ElemeFE/element/issues/12951
$subMenuActiveText:#0077DB; //https://github.com/ElemeFE/element/issues/12951

$menuBg:#0077DB;
$menuHover:#fff;

$subMenuBg:#fff;
$subMenuHover:#0077DB;

$sideBarWidth: 100px;

// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}

 src/utils/auth.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,29 @@
import Cookies from 'js-cookie'

const TokenKey = 'vue_admin_template_token'
const RefreshKey = 'vue_admin_template_refresh'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}

export function getRefresh() {
  return Cookies.get(RefreshKey)
}

export function setRefresh(refresh) {
  return Cookies.set(RefreshKey, refresh)
}

export function removeRefresh() {
  return Cookies.remove(RefreshKey)
}


 src/utils/get-page-title.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,10 @@
import defaultSettings from '@/settings'

const title = defaultSettings.title || 'Vue Admin Template'

export default function getPageTitle(pageTitle) {
  if (pageTitle) {
    return `${pageTitle} - ${title}`
  }
  return `${title}`
}

 src/utils/index.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,117 @@
/**
 * Created by PanJiaChen on 16/11/18.
 */

/**
 * Parse the time to string
 * @param {(Object|string|number)} time
 * @param {string} cFormat
 * @returns {string | null}
 */
export function parseTime(time, cFormat) {
  if (arguments.length === 0 || !time) {
    return null
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date
  if (typeof time === 'object') {
    date = time
  } else {
    if ((typeof time === 'string')) {
      if ((/^[0-9]+$/.test(time))) {
        // support "1548221490638"
        time = parseInt(time)
      } else {
        // support safari
        // https://stackoverflow.com/questions/4310953/invalid-date-in-safari
        time = time.replace(new RegExp(/-/gm), '/')
      }
    }

    if ((typeof time === 'number') && (time.toString().length === 10)) {
      time = time * 1000
    }
    date = new Date(time)
  }
  const formatObj = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    a: date.getDay()
  }
  const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
    const value = formatObj[key]
    // Note: getDay() returns 0 on Sunday
    if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
    return value.toString().padStart(2, '0')
  })
  return time_str
}

/**
 * @param {number} time
 * @param {string} option
 * @returns {string}
 */
export function formatTime(time, option) {
  if (('' + time).length === 10) {
    time = parseInt(time) * 1000
  } else {
    time = +time
  }
  const d = new Date(time)
  const now = Date.now()

  const diff = (now - d) / 1000

  if (diff < 30) {
    return '刚刚'
  } else if (diff < 3600) {
    // less 1 hour
    return Math.ceil(diff / 60) + '分钟前'
  } else if (diff < 3600 * 24) {
    return Math.ceil(diff / 3600) + '小时前'
  } else if (diff < 3600 * 24 * 2) {
    return '1天前'
  }
  if (option) {
    return parseTime(time, option)
  } else {
    return (
      d.getMonth() +
      1 +
      '月' +
      d.getDate() +
      '日' +
      d.getHours() +
      '时' +
      d.getMinutes() +
      '分'
    )
  }
}

/**
 * @param {string} url
 * @returns {Object}
 */
export function param2Obj(url) {
  const search = decodeURIComponent(url.split('?')[1]).replace(/\+/g, ' ')
  if (!search) {
    return {}
  }
  const obj = {}
  const searchArr = search.split('&')
  searchArr.forEach(v => {
    const index = v.indexOf('=')
    if (index !== -1) {
      const name = v.substring(0, index)
      const val = v.substring(index + 1, v.length)
      obj[name] = val
    }
  })
  return obj
}

 src/utils/request.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,85 @@
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */

  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200) {
      console.log(res.message || 'Error')
      // Message({
      //   message: res.message || 'Error',
      //   type: 'error',
      //   duration: 5 * 1000
      // })
      // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

 src/utils/validate.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,20 @@
/**
 * Created by PanJiaChen on 16/11/18.
 */

/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}

/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}

 src/views/404.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,228 @@
<template>
  <div class="wscn-http404-container">
    <div class="wscn-http404">
      <div class="pic-404">
        <img class="pic-404__parent" src="@/assets/404_images/404.png" alt="404">
        <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">
        <img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png" alt="404">
        <img class="pic-404__child right" src="@/assets/404_images/404_cloud.png" alt="404">
      </div>
      <div class="bullshit">
        <div class="bullshit__oops">OOPS!</div>
        <div class="bullshit__info">All rights reserved
          <a style="color:#20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
        </div>
        <div class="bullshit__headline">{{ message }}</div>
        <div class="bullshit__info">Please check that the URL you entered is correct, or click the button below to return to the homepage.</div>
        <a href="" class="bullshit__return-home">Back to home</a>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Page404',
  computed: {
    message() {
      return 'The webmaster said that you can not enter this page...'
    }
  }
}
</script>

<style lang="scss" scoped>
.wscn-http404-container{
  transform: translate(-50%,-50%);
  position: absolute;
  top: 40%;
  left: 50%;
}
.wscn-http404 {
  position: relative;
  width: 1200px;
  padding: 0 50px;
  overflow: hidden;
  .pic-404 {
    position: relative;
    float: left;
    width: 600px;
    overflow: hidden;
    &__parent {
      width: 100%;
    }
    &__child {
      position: absolute;
      &.left {
        width: 80px;
        top: 17px;
        left: 220px;
        opacity: 0;
        animation-name: cloudLeft;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      &.mid {
        width: 46px;
        top: 10px;
        left: 420px;
        opacity: 0;
        animation-name: cloudMid;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1.2s;
      }
      &.right {
        width: 62px;
        top: 100px;
        left: 500px;
        opacity: 0;
        animation-name: cloudRight;
        animation-duration: 2s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-delay: 1s;
      }
      @keyframes cloudLeft {
        0% {
          top: 17px;
          left: 220px;
          opacity: 0;
        }
        20% {
          top: 33px;
          left: 188px;
          opacity: 1;
        }
        80% {
          top: 81px;
          left: 92px;
          opacity: 1;
        }
        100% {
          top: 97px;
          left: 60px;
          opacity: 0;
        }
      }
      @keyframes cloudMid {
        0% {
          top: 10px;
          left: 420px;
          opacity: 0;
        }
        20% {
          top: 40px;
          left: 360px;
          opacity: 1;
        }
        70% {
          top: 130px;
          left: 180px;
          opacity: 1;
        }
        100% {
          top: 160px;
          left: 120px;
          opacity: 0;
        }
      }
      @keyframes cloudRight {
        0% {
          top: 100px;
          left: 500px;
          opacity: 0;
        }
        20% {
          top: 120px;
          left: 460px;
          opacity: 1;
        }
        80% {
          top: 180px;
          left: 340px;
          opacity: 1;
        }
        100% {
          top: 200px;
          left: 300px;
          opacity: 0;
        }
      }
    }
  }
  .bullshit {
    position: relative;
    float: left;
    width: 300px;
    padding: 30px 0;
    overflow: hidden;
    &__oops {
      font-size: 32px;
      font-weight: bold;
      line-height: 40px;
      color: #1482f0;
      opacity: 0;
      margin-bottom: 20px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-fill-mode: forwards;
    }
    &__headline {
      font-size: 20px;
      line-height: 24px;
      color: #222;
      font-weight: bold;
      opacity: 0;
      margin-bottom: 10px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.1s;
      animation-fill-mode: forwards;
    }
    &__info {
      font-size: 13px;
      line-height: 21px;
      color: grey;
      opacity: 0;
      margin-bottom: 30px;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.2s;
      animation-fill-mode: forwards;
    }
    &__return-home {
      display: block;
      float: left;
      width: 110px;
      height: 36px;
      background: #1482f0;
      border-radius: 100px;
      text-align: center;
      color: #ffffff;
      opacity: 0;
      font-size: 14px;
      line-height: 36px;
      cursor: pointer;
      animation-name: slideUp;
      animation-duration: 0.5s;
      animation-delay: 0.3s;
      animation-fill-mode: forwards;
    }
    @keyframes slideUp {
      0% {
        transform: translateY(60px);
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 1;
      }
    }
  }
}
</style>

 src/views/CNAS/nonConformanceManage/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
<template>
    <div>
        ä¸ç¬¦åˆé¡¹ç®¡ç†
    </div>
</template>

 src/views/CNAS/nonConformanceStatistics/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,3 @@
<template>
    <div>不符合项统计</div>
</template>

 src/views/CNAS/reviewAnnualPlan/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
<template>
    <div>
        å®¡æ ¸å¹´åº¦è®¡åˆ’
    </div>
</template>

 src/views/CNAS/satisfactionSurveys/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
<template>
    <div>
        æ»¡æ„åº¦è°ƒæŸ¥
    </div>
</template>

 src/views/chart/center/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>实验中心</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/chart/shota/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>正太分布图</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/chart/spc/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>spc控制图</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/chart/work/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>工作统计图</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/experiment/checkTheReport/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>检测报告</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/experiment/inspectionApplication/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,528 @@
<template>
    <div>
      <template v-if="!showDetail">
        <div class="content-main">
          <div class="top-bar">
            <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item>
                <el-input
                  v-model="searchData.keyword"
                  class="input-form"
                  placeholder="请输入申请单号/检验对象/对象位置/对象名称"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search" />
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary">查询</el-button>
                <el-button type="primary" plain>重置</el-button>
              </el-form-item>
            </el-form>
            <el-form class="rightBtn">
              <el-form-item class="createBtn">
                <el-button type="primary" icon="el-icon-document-add" @click="checkTypeVisible = true" style="background-color: rgb(1, 102, 226);">新增检验单</el-button>
              </el-form-item>
              <el-form-item class="getDataBtn">
                <el-button type="primary" icon="el-icon-download" style="background-color: rgb(1, 102, 226);">导出检验单</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="library-table">
            <div class="table-header">
              <div class="search-bar">
                <el-radio-group v-model="radioValue">
                  <el-radio-button label="全部" />
                  <el-radio-button label="待提交" />
                  <el-radio-button label="已提交" />
                  <el-radio-button label="已作废" />
                </el-radio-group>
              </div>
            </div>
            <div class="table-box">
              <el-table
                ref="inspectionTable"
                :max-height="800"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :data="inspectionTable"
                style="width: 100%"
              >
                <el-table-column
                  type="selection"
                  min-width="30px"
                />
                <el-table-column
                  prop="applicationnum"
                  label="申请单号"
                  min-width="100px"
                />
                <el-table-column
                  prop="checktype"
                  label="检验类型"
                  min-width="80px"
                />
                <el-table-column
                  prop="checkstate"
                  label="检验状态"
                  min-width="70px">
                  <template slot-scope="scope">
                    <div v-if="scope.row.checkstate === '1'">
                        <span style="color: green;">已检测</span>
                    </div>
                    <div v-else>
                        <span style="color: red;">未检测</span>
                    </div>
                    
                  </template>
                </el-table-column>
                <el-table-column
                  prop="deliverydate"
                  label="来料日期"
                  min-width="100px"
                />
                <el-table-column
                  prop="provider"
                  label="供应商名称"
                  min-width="150px"
                />
                <el-table-column
                  prop="rawcode"
                  label="原材料编码"
                  min-width="120px"
                />
                <el-table-column
                  prop="rawname"
                  label="原材料名称"
                  min-width="80px"
                />
                <el-table-column
                  prop="modelandspecification"
                  label="规格型号"
                  min-width="160px"
                />
                <el-table-column
                  prop="unit"
                  label="单位"
                  min-width="50px"
                />
                <el-table-column
                  prop="amount"
                  label="数量"
                  min-width="50px"
                />
                <el-table-column
                  prop="registrationdate"
                  label="登记日期"
                  min-width="80px"
                />
                <el-table-column
                  prop="registrator"
                  label="登记人"
                  min-width="80px"
                />
                <el-table-column
                  prop="qualified"
                  label="检验状态"
                  min-width="80px">
                  <template slot-scope="scope">
                    <div v-if="scope.row.qualified === null">
                        <span></span>
                    </div>
                    <div v-else>
                    <el-tag :type="scope.row.qualified === '0' ? 'success' : 'danger'"
                    disable-transitions
                  >{{ scope.row.qualified === '0' ? '合格' : '不合格' }}</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="applier"
                  label="申请人"
                  min-width="80px"
                />
                <el-table-column
                  prop="checker"
                  label="检验人"
                  min-width="80px"
                />
                <el-table-column
                  prop="checktime"
                  label="检验日期"
                  min-width="80px"
                />
                <el-table-column
                  label="操作"
                  min-width="150"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                    <el-button type="text" size="small" >提交</el-button>
                    <el-button type="text" size="small" >作废</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- åˆ†é¡µå™¨ -->
              <div>
                <el-pagination
                  class="pagination"
                  :current-page="currentPage"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </div>
          <div class="checkType">
            <el-dialog
              title="新增检验单"
              :visible.sync="checkTypeVisible"
              width="50%"
            >
              <div class="check-box">
                <el-radio-group v-model="type">
                  <el-radio :label="0" border>原材料检验</el-radio>
                  <el-radio :label="1" border>半成品检验</el-radio>
                  <el-radio :label="2" border>成品检验</el-radio>
                </el-radio-group>
              </div>
              <el-form :model="infoForm" ref="infoForm" class="infoForm" label-position="top" label-width="200px" size="mini">
                <el-row :gutter="100">
                    <el-col :span="10">
                        <el-form-item label="来料日期：">
                            <el-input style="width: 300px" type="text" :value="infoForm.deliverydate" placeholder="请输入来料日期" autocomplete="off" />  
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="供应商名称：">
                            <el-input style="width: 300px" type="text" :value="infoForm.name" placeholder="请输入供应商名称" autocomplete="off" /> 
                        </el-form-item>
                    </el-col>
                    </el-row>
                    <el-row :gutter="100">
                    <el-col :span="10">
                        <el-form-item label="原材料编码：">
                            <el-input style="width: 300px" type="text" :value="infoForm.code" placeholder="请输入原材料编码" autocomplete="off" />  
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="原材料名称：">
                            <el-input style="width: 300px" type="text" :value="infoForm.name" placeholder="请输入原材料名称" autocomplete="off" />  
                        </el-form-item>
                    </el-col>
                    </el-row>
                    <el-row :gutter="100">
                    <el-col :span="10">
                        <el-form-item label="规格型号：">
                            <el-input style="width: 300px" type="text" :value="infoForm.modelandspecification" placeholder="请输入规格型号" autocomplete="off" />  
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="单位：">
                            <el-input style="width: 300px" type="text" :value="infoForm.unit" placeholder="请输入单位" autocomplete="off" />  
                        </el-form-item>
                    </el-col>
                    </el-row>
                    <el-row :gutter="100">
                    <el-col :span="10">
                        <el-form-item label="数量：">
                            <el-input style="width: 300px" type="text" :value="infoForm.amount" placeholder="请输入数量" autocomplete="off" />  
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="检验时间：">
                            <el-date-picker
                                v-model="infoForm.checkdate"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                style="width: 300px;">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    </el-row>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="checkTypeVisible = false">取 æ¶ˆ</el-button>
                <el-button type="primary" @click="goToForInspectionDetail">ç¡® å®š</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
      </template>
      <template v-else>
        <router-view />
      </template>
    </div>
  </template>
  
  <script>
  import { getInspectionList } from '@/api/rawMaterials/reportForInspection'
  export default {
    data() {
      return {
        showDetail: false,
        searchData: {
          keyword: ''
        },
        inspectionTable: [{
            applicationnum: 'QC22-09155',
            checktype: '原材料检验',
            checkstate: '1',
            deliverydate: '2023-07-31',
            provider: '国网山东省电力有限公司',
            rawcode: '1010010090124',
            rawname: '铝包钢绞线',
            modelandspecification: 'JLHA1/G1A-185/30-27/7',
            unit: 'ml/kg',
            amount: '1999',
            registrationdate: '2022-09-23',
            registrator: '李小龙',
            qualified: '0',
            applier: '李小龙',
            checker: '李小龙',
            checktime: '2023-12-09'
        },{
            applicationnum: 'QC22-09155',
            checktype: '原材料检验',
            checkstate: '1',
            deliverydate: '2023-07-31',
            provider: '国网山东省电力有限公司',
            rawcode: '1010010090124',
            rawname: '铝包钢绞线',
            modelandspecification: 'JLHA1/G1A-185/30-27/7',
            unit: 'ml/kg',
            amount: '1999',
            registrationdate: '2022-09-23',
            registrator: '李小龙',
            qualified: '0',
            applier: '李小龙',
            checker: '李小龙',
            checktime: '2023-12-09'
        },{
            applicationnum: 'QC22-09155',
            checktype: '原材料检验',
            checkstate: '0',
            deliverydate: '2023-07-31',
            provider: '国网山东省电力有限公司',
            rawcode: '1010010090124',
            rawname: '铝包钢绞线',
            modelandspecification: 'JLHA1/G1A-185/30-27/7',
            unit: 'ml/kg',
            amount: '1999',
            registrationdate: '2022-09-23',
            registrator: '李小龙',
            qualified: null,
            applier: '李小龙',
            checker: '李小龙',
            checktime: '2023-12-09'
        },{
            applicationnum: 'QC22-09155',
            checktype: '原材料检验',
            checkstate: '1',
            deliverydate: '2023-07-31',
            provider: '国网山东省电力有限公司',
            rawcode: '1010010090124',
            rawname: '铝包钢绞线',
            modelandspecification: 'JLHA1/G1A-185/30-27/7',
            unit: 'ml/kg',
            amount: '1999',
            registrationdate: '2022-09-23',
            registrator: '李小龙',
            qualified: '1',
            applier: '李小龙',
            checker: '李小龙',
            checktime: '2023-12-09'
        }],
        infoForm:{
          deliverydate: '',
          provider: '',
          code: '',
          name: '',
          modelandspecification: '',
          unit: '',
          amount: '',
          checkdate: ''
        },
        currentPage: 1,
        total: 20, // æ€»æ¡æ•°
        pageSize: 10, // æ¯é¡µçš„数据条数
        radioValue: '全部',
        checkTypeVisible: false,
        type: 0
      }
    },
    watch: {
      $route: {
        handler(val, oldval) {
          console.log(val)// æ–°è·¯ç”±ä¿¡æ¯
          console.log(oldval)// è€è·¯ç”±ä¿¡æ¯
        },
        // æ·±åº¦è§‚察监听
        deep: true
      }
    },
    // beforeRouteEnter(to, from, next) {
    //   console.log(to, from)
    //   next()
    //   // åœ¨æ¸²æŸ“该组件的对应路由被 confirm å‰è°ƒç”¨
    //   // ä¸ï¼èƒ½ï¼èŽ·å–组件实例 `this`
    //   // å› ä¸ºå½“钩子执行前，组件实例还没被创建
    // },
    // beforeRouteUpdate(to, from, next) {
    //   console.log(to, from)
    //   if (to.name === 'ForInspectionDetail') this.showDetail = true
    //   this.$nextTick(() => {
    //     console.log(1)
    //     this.showDetail = true
    //   })
    //   next()
    //   // åœ¨å½“前路由改变，但是该组件被复用时调用
    //   // ä¸¾ä¾‹æ¥è¯´ï¼Œå¯¹äºŽä¸€ä¸ªå¸¦æœ‰åŠ¨æ€å‚数的路径 /foo/:id，在 /foo/1 å’Œ /foo/2 ä¹‹é—´è·³è½¬çš„时候，
    //   // ç”±äºŽä¼šæ¸²æŸ“同样的 Foo ç»„件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    //   // å¯ä»¥è®¿é—®ç»„件实例 `this`
    // },
    created() {
      this.getInspectionTableData()
    },
    updated() {
      if (this.$route.name === 'ForInspectionDetail') this.showDetail = true
    },
    methods: {
      async getInspectionTableData() {
        const res = await getInspectionList({ pageSize: this.currentPage, countSize: this.pageSize })
        // this.inspectionTable = data
        console.log(res)
      },
      goToForInspectionDetail() {
        this.$router.push('/rawMaterials/reportForInspection/forInspectionDetail')
      },
      handleClick(row) {
        console.log(row)
      },
      // æ¯é¡µæ¡æ•°æ”¹å˜æ—¶è§¦å‘ é€‰æ‹©ä¸€é¡µæ˜¾ç¤ºå¤šå°‘è¡Œ
      handleSizeChange(val) {
        console.log(`每页 ${val} æ¡`)
        this.currentPage = 1
        this.pageSize = val
      },
      // å½“前页改变时触发 è·³è½¬å…¶ä»–页
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`)
        this.currentPage = val
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .checkType{
    .check-box{
      .el-radio-group{
        display: flex;
        justify-content: space-around;
        .el-radio{
          // display: flex;
          // align-items: center;
          &.is-checked{
            background: #ecf5ff;
            border-color: #b3d8ff;
           ::v-deep  .el-radio__label{
              color: #333 !important;
  
            }
          }
          height: auto;
          font-size: 22px !important;
          padding: 20px 40px !important;
          ::v-deep  .el-radio__label{
            font-size: 22px !important;
            padding-left: 0px !important;
          }
          ::v-deep  .el-radio__input{
          display: none !important;
        }
      }
   }
    }
  }
   .content-main{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .top-bar{
      margin: -25px -15px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 5px 24px 0px 24px;
    }
    .input-form{
      width: 500px;
    }
    .retrieval{
    float: right;
    font-size: 14px;
    color: rgb(0, 120, 255);
    line-height: 40px;
   }
   .rightBtn {
    display: flex;
    justify-content: flex-end;
  }
  
  .getDataBtn, .createBtn {
    margin-left: 10px; /* Optional: Add some space between the buttons */
  }
  .library-table{
        background-color: #fff;
        flex: 1;
        max-width: 100%;
        margin-left: -15px;
        margin-right: -15px;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        .table-header{
          padding: 20px;
          display: flex;
          justify-content: space-between;
          .el-form-item{
            margin-bottom: 30px !important;
          }
        }
        .table-box{
            padding: 0px 20px;
            margin-top: 20px;
            flex: 1;
            background: #fff;
            // padding: 20px 20px 10px 20px;
            display: flex;
            flex-direction: column;
            .el-table {
              flex: 1;
            }
            >div:nth-child(2){
              display: flex;
              justify-content: end;
              margin: 20px 0;
              margin-top: 30px;
            }
        }
      }
.infoForm{
    margin-top: 30px;
    margin-left: 50px;
    .el-row{
        margin-bottom: 10px;
    }
}
  </style>
  

 src/views/experiment/nonConformanceReview/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>不合格评审</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/experiment/nonConformingFeedback/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>不合格反馈</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/experiment/passRateStatistics/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>合格率统计</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/experiment/planAssignments/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,259 @@
<template>
  <div class="content-main">
    <div class="top-bar">
      <el-form ref="form" :inline="true" :model="searchData">
        <el-form-item label="设备名称:" class="sermargin">
          <el-select v-model="searchData.devicename" placeholder="全部" style="width: 100px;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检验时间:" class="sermargin">
          <el-date-picker
            v-model="searchData.time"
            type="daterange"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="检验人:" style="margin-right: 20px;">
          <el-select v-model="searchData.person" placeholder="全部" style="width: 80px;margin-right: 100px;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain style="margin-right: 10px;">重置</el-button>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        </el-form>
    </div>
    <div class="table-box">
      <div class="formwrapper">
        <el-table
          ref="planTable"
          :max-height="800"
          :cell-style="{textAlign: 'center'}"
          :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
          :data="planTable"
          style="width: 100%"
        >
        <el-table-column
          type="index"
          label="序号"
          min-width="10%"
        />
        <el-table-column
          prop="device"
          label="检验设备"
          min-width="8%"
        />
        <el-table-column
          prop="samplename"
          label="样品名称"
          min-width="8%"
        />
        <el-table-column
          prop="sampleid"
          label="样品编号"
          min-width="10%"
        />
        <el-table-column
          prop="modelandspecification"
          label="规格型号"
          min-width="12%"
        />
        <el-table-column
          prop="unit"
          label="单位"
          min-width="5%"
        />
        <el-table-column
          prop="amount"
          label="数量"
          min-width="5%"
        />
        <el-table-column
          prop="checkproject"
          label="检验项目"
          min-width="12%"
        />
        <el-table-column
          prop="checker"
          label="检验人"
          min-width="6%"
        />
        <el-table-column
          prop="duration"
          label="计划工期/h"
          min-width="8%"
        />
        <el-table-column
          prop="progress"
          label="检验进度"
          min-width="12%">
          <template slot-scope="scope">
            <div v-if="scope.row.progress === 100" style="display: flex;">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.progress" status="success" style="width: 70%;"></el-progress>
              <span style="color: rgb(103, 194, 58);">已完成</span>
            </div>
            <div v-if="scope.row.progress <100 && scope.row.progress >0" style="display: flex;">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.progress" status="warning" style="width: 70%;"></el-progress>
              <span style="color: rgb(230, 162, 60);">检验中</span>
            </div>
            <div v-if="scope.row.progress === 0" style="display: flex;">
              <el-progress :text-inside="true" :stroke-width="15" :percentage="scope.row.progress" style="width: 70%;"></el-progress>
              <span style="color: gray">未分配</span>
            </div>
            <div v-else>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="starttime"
          label="计划开始时间"
          min-width="10%"
        />
        <el-table-column
          prop="finishtime"
          label="计划结束时间"
          min-width="10%"
        />
        <el-table-column
            label="操作"
            min-width="8%"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        </el-table>
      </div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchData: {
        devicename: "",
        time: "",
        person: "",
      },
      options: [
        {
          value: "选项1",
          label: "选项1",
        },
        {
          value: "选项2",
          label: "选项2",
          disabled: true,
        },
      ],
      planTable: [{
        device: '拉力机',
        samplename: '镀锌钢绞线',
        sampleid: 'SN1027401-12937',
        modelandspecification: 'JLHA/G1A-185/30-14/7',
        unit: 'm',
        amount: '200',
        checkproject: '抗压强度（绞前）',
        checker: '黄小明',
        duration: '2',
        progress: 100,
        starttime: '2023-08-04 8:00',
        finishtime: '2023-08-04 10:00',
      },{
        device: '拉力机',
        samplename: '镀锌钢绞线',
        sampleid: 'SN1027401-12937',
        modelandspecification: 'JLHA/G1A-185/30-14/7',
        unit: 'm',
        amount: '200',
        checkproject: '抗压强度（绞前）',
        checker: '黄小明',
        duration: '2',
        progress: 60,
        starttime: '2023-08-04 8:00',
        finishtime: '2023-08-04 10:00',
      },{
        device: '拉力机',
        samplename: '镀锌钢绞线',
        sampleid: 'SN1027401-12937',
        modelandspecification: 'JLHA/G1A-185/30-14/7',
        unit: 'm',
        amount: '200',
        checkproject: '抗压强度（绞前）',
        checker: '黄小明',
        duration: '2',
        progress: 30,
        starttime: '2023-08-04 8:00',
        finishtime: '2023-08-04 10:00',
      },{
        device: '拉力机',
        samplename: '镀锌钢绞线',
        sampleid: 'SN1027401-12937',
        modelandspecification: 'JLHA/G1A-185/30-14/7',
        unit: 'm',
        amount: '200',
        checkproject: '抗压强度（绞前）',
        checker: '黄小明',
        duration: '2',
        progress: 0,
        starttime: '2023-08-04 8:00',
        finishtime: '2023-08-04 10:00',
      }]
    };
  },
};
</script>

<style lang="scss" scoped>
.content-main {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.top-bar {
  margin: -25px -15px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 5px 24px 0px 24px;
  .sermargin {
    margin-right: 60px;
  }
}
.table-box{
  background-color: #fff;
  margin: 0px -15px;
  margin-top: 35px;
  display: flex;
  flex-direction: column;
  height: 78vh;
  .formwrapper{
    padding: 0px 20px;
    margin-top: 0px;
    flex: 1;
    background: #fff;
    /* padding: 20px 20px 10px 20px; */
    display: flex;
    flex-direction: column;
    .el-table {
      flex: 1;
    }
  }
}
</style>

 src/views/experiment/reportAuditing/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>报告审核</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/home/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,97 @@
<template>
  <div class="home-main">
    <div class="home-header-welcome">
      <div class="welcome-left">
        <div class="left-avatar" />
        <div class="left-tips">
          <div>Hi jack，欢迎使用ZT-LIMS</div>
          <div>今天是2023å¹´07月07日 æ˜ŸæœŸäº”</div>
        </div>
      </div>
      <div class="welcome-right">
        <div class="right-centent">
          <div>即将超期待办</div>
          <div>暂无</div>
        </div>
        <div />
        <div class="right-centent">
          <div>已超期待办</div>
          <div>21</div>
        </div>
      </div>
    </div>
    <div class="content-main" />
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.home-main{
  .home-header-welcome{
    width: 100%;
    background: #fff;
    height: 84px;
    display: flex;
    border-bottom: 1px solid #f0f2f5;
    padding: 8px 24px 12px 24px;
    justify-content: space-between;
    .welcome-left{
      display: flex;
      align-items: center;
      height: 100%;
      .left-avatar{
        width: 56px;
        height: 56px;
        margin-right: 24px;
        background: #0077DB;
        border-radius: 50%;
      }
      .left-tips{
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        >div:nth-child(1){
          font-size: 20px;
          color: #303133;
        }
        >div:nth-child(2){
          font-size: 14px;
          color: #606266;
        }
      }
    }
    .welcome-right{
      width: 250px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .right-centent{
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        >div:nth-child(1){
          color: #909399;
          font-size: 14px;
        }
        >div:nth-child(2){
          font-size: 24px;
          color: #c0c4cc;
        }
      }
      >div:nth-child(2){
          width: 2px;
          height: 70%;
          background: #f0f2f5;
      }
    }
  }
}
</style>

 src/views/inspectionManagement/commissionInspection/addCommision.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,305 @@
<template>
  <div class="content-main">
    <div class="firstBox">
      <div class="title">检测信息</div>
      <div class="tableBox">
        <div class="tableBox-header">
        <el-button class="split" type="primary" size="small" style="background-color: rgb(1, 102, 226);">添加样品</el-button>
        <el-input
          v-model="searchData"
          class="input-form split"
          placeholder="扫描二维码录入样品..."
          prefix-icon="el-icon-search"
          style="width: 200px;"
        >
        </el-input>
        <el-button type="primary" size="small" style="background-color: rgb(1, 102, 226);">重置</el-button>
      </div>
        <el-table
                ref="detectionInfo"
                :max-height="800"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :data="detectionInfo"
                style="width: 100%"
              >
                <el-table-column
                  type="index"
                  label="序号"
                  min-width="10%"
                />
                <el-table-column
                  prop="sampleid"
                  label="样品编号"
                  min-width="8%"
                />
                <el-table-column
                  prop="samplename"
                  label="样品名称"
                  min-width="10%"
                />
                <el-table-column
                  prop="modelandspecification"
                  label="规格型号"
                  min-width="10%"
                />
                <el-table-column
                  prop="unit"
                  label="单位"
                  min-width="8%"
                />
                <el-table-column
                  prop="amount"
                  label="数量"
                  min-width="8%"
                />
                <el-table-column
                  prop="addway"
                  label="添加方式"
                  min-width="8%">
                  <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.addway === 0 ? 'success' : 'primary'"
                    disable-transitions
                  >{{ scope.row.addway === 0 ? '扫描' : '录入' }}</el-tag>
                </template>
                </el-table-column>
                <el-table-column
                  prop="experiment"
                  label="试验"
                  min-width="8%"
                />
                <el-table-column
                  prop="other"
                  label="备注"
                  min-width="8%"
                />
                <el-table-column
                  label="操作"
                  min-width="8%"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small">修改</el-button>
                    <el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- åˆ†é¡µå™¨ -->
              <div>
                <el-pagination
                  class="pagination"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[100, 200, 300, 400]"
                  :page-size="100"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="400">
                </el-pagination>
              </div>
      </div>
      <div class="secondBox">
        <el-row class="header">
                    <el-col :span="12">基本信息</el-col>
                    <el-col :span="12" style="text-align: right;">
                        <!-- ç‚¹å‡»è¿”回，当前页面值为false -->
                    <el-button type="primary" size="mini" style="background-color: rgb(1, 102, 226); ">打印委托单</el-button>
                    </el-col>
                </el-row>
                <el-form :model="infoForm" ref="infoForm" class="infoForm" label-position="right" label-width="100px" size="mini" >
                    <div class="formwrapper">
                        <el-row :gutter="200">
                        <el-col :span="5">
                        <el-form-item label="委托编号：">
                            <el-input style="width: 160px" type="text" :value="infoForm.commisioncode" readonly disabled="true" autocomplete="off" />  
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="委托单位：">
                            <el-select style="width: 160px;" v-model="infoForm.department" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="联系人：">
                            <el-select style="width: 160px;" v-model="infoForm.contacter" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="联系电话：">
                            <el-select style="width: 160px;" v-model="infoForm.tel" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="200">
                        <el-col :span="5">
                        <el-form-item label="联系地址：" >
                            <el-select style="width: 160px;" v-model="infoForm.address" size="small" placeholder="请选择产品名称">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="完成期限：">
                            <el-date-picker
                              v-model="infoForm.deadline"
                              type="date"
                              placeholder="选择日期"
                              style="width: 160px;">
                            </el-date-picker>
                          </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="送样时间：">
                            <el-date-picker
                              v-model="infoForm.time"
                              type="date"
                              placeholder="选择日期"
                              style="width: 160px;">
                            </el-date-picker>
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="送样方式：">
                          <el-select style="width: 160px;" v-model="infoForm.way" size="small" placeholder="送样">
                                <el-option value="选项1"></el-option>
                                <el-option value="选项2"></el-option>
                            </el-select>
                        </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="200">
                        <el-col :span="5">
                        <el-form-item label="送样人：" >
                          <el-input style="width: 160px;" v-model="infoForm.sender" placeholder="请输入送样人" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="送样人电话：" >
                          <el-input style="width: 160px;" v-model="infoForm.sendertel" placeholder="请输入送样人电话" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="报告数：">
                            <el-input style="width: 160px;" v-model="infoForm.num" placeholder="请输入报告数" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                        <el-col :span="5">
                        <el-form-item label="委托备注：">
                            <el-input style="width: 160px;" v-model="infoForm.other" placeholder="备注" autocomplete="off" />
                        </el-form-item>
                        </el-col>
                    </el-row>
                    </div>
                    <div class="submitBtn">
                      <el-button type="primary" size="small" style="background-color: rgb(1, 102, 226);">提交</el-button>
                    </div>
                </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 0,
      searchData: '',
      infoForm: {
        commisioncode: 'ST9162324',
        department: '',
        contacter: '',
        tel: '',
        address: '',
        deadline: '',
        time: '',
        way: '',
        sender: '',
        sendertel: '',
        num: '',
        other: ''
      },
      detectionInfo: [{
        sampleid: 'GW31478631',
        samplename: '绝缘杆',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: 'æ ¹',
        amount: '40',
        addway: 0,
        experiment: '交流耐压试验',
        other: '123',
        opertion: '',
      }]
    }
  },
  methods: {
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
    },
    handleCurrentChange(pageNo) {
      this.pageParams.pageNo = pageNo
    }
  }
}
</script>

<style lang="scss" scoped>
.firstBox{
  .title{
    padding:0px 10px 10px 10px;
  }
  .tableBox{
    background-color: #fff;
    padding: 0px 20px;
    margin: 0px -15px;
    flex: 1;
    background: #fff;
    /* padding: 20px 20px 10px 20px; */
    display: flex;
    flex-direction: column;
    .tableBox-header{
      padding: 20px 0px;
      .split{
        margin-right: 15px;
      }
    }
          .el-table {
            flex: 1;
          }
          >div:nth-child(3){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
  }
}
.secondBox{
  margin: 0px -15px;
  .header{
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
    margin-top: 10px;
  }
  .submitBtn{
    display: flex;
    justify-content: end;
    margin-right: 156px;
    margin-top: 20px;
  }
}
.infoForm{
  background-color: #fff;
  padding: 20px 50px;
}
</style>

 src/views/inspectionManagement/commissionInspection/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,288 @@
<template>
  <div>
    <div v-if="!showDetail">
      <div class="content-main">
          <div class="top-bar">
              <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item label="委托编号:" class="sermargin">
                <el-input
                  v-model="searchData.code"
                  class="input-form"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="样品名称:" class="sermargin">
                <el-input
                  v-model="searchData.name"
                  class="input-form"
                  placeholder="请输入"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="委托单位:" style="margin-right: 20px;">
                <el-select v-model="searchData.department" placeholder="全部">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary">查询</el-button>
                <el-button type="primary" plain>重置</el-button>
              </el-form-item>
              </el-form>
              <el-form>
                <el-button class="rightBtn" type="primary" @click="goToaddCommision">新增委托</el-button>
              </el-form>
          </div>
          <div class="library-table">
            <div class="table-header">
              <div class="search-bar">
                <el-radio-group v-model="radioValue">
                  <el-radio-button label="全部" />
                  <el-radio-button label="待检验" />
                  <el-radio-button label="已检验" />
                </el-radio-group>
              </div>
              <div class="generateInsp">
                <el-button type="primary" size="mini" icon="el-icon-document" style="background-color: rgb(1, 102, 226);">生成报检单</el-button>
              </div>
            </div>
            <div class="table-box">
              <el-table
                ref="commisionTable"
                :max-height="800"
                :cell-style="{textAlign: 'center'}"
                :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
                :data="commisionTable"
                style="width: 100%"
              >
                <el-table-column
                  type="selection"
                  min-width="10%"
                />
                <el-table-column
                  type="index"
                  label="序号"
                  min-width="10%"
                />
                <el-table-column
                  prop="entrust_coding"
                  label="委托编号"
                  min-width="8%"
                />
                <el-table-column
                  prop="entrusted"
                  label="委托单位"
                  min-width="12%"
                />
                <el-table-column
                  prop="samples_number"
                  label="样品编号"
                  min-width="8%"
                />
                <el-table-column
                  prop="sample_name"
                  label="样品名称"
                  min-width="8%"
                />
                <el-table-column
                  prop="specifications_models"
                  label="规格型号"
                  min-width="12%"
                />
                <el-table-column
                  prop="dateSurvey"
                  label="送达时间"
                  min-width="8%"
                />
                <el-table-column
                  prop="completionDeadline"
                  label="完成期限"
                  min-width="8%"
                />
                <el-table-column
                  prop="contacts"
                  label="委托编制人"
                  min-width="8%"
                />
                <el-table-column
                  prop="inspectionTime"
                  label="检验日期"
                  min-width="8%"
                />
                <el-table-column
                  prop="inspection_status"
                  label="状态"
                  min-width="8%">
                  <template slot-scope="scope">
                    <div v-if="scope.row.inspection_status === 1">
                      <span style="color: green;">已检测</span>
                    </div>
                    <div v-else>
                      <span style="color: red;">待检测</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  min-width="8%"
                >
                  <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <!-- åˆ†é¡µå™¨ -->
              <div>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
              </div>
            </div>
          </div>
      </div>
  </div>
    <div v-else>
      <router-view />
    </div>
  </div>
</template>

<script>
import { getCommisionList } from '@/api/inspection/commisioninspection'
export default {
  data() {
    return {
      form: [],
      searchData: {
        code: '',
        name: '',
        department: ''
      },
      options: [{
        value: '1',
        label: '部门1'
      }, {
        value: '2',
        label: '部门2'
      }, {
        value: '3',
        label: '部门3'
      }],
      radioValue: '',
      commisionTable: [{
        specifications_models: "GGXH-AAAAA",
        inspectionTime: "2023-08-03",
        id: 2,
        samples_number: 0,
        dateSurvey: "2023-08-03",
        entrusted: "阿里巴巴",
        completionDeadline: "2023-08-03",
        contacts: "小黑",
        entrust_coding: "SL20230803000003",
        sample_name: "发动机",
        inspection_status: 1
      }],
      currentPage: 1,
      pageSize: 5,
      total: 100,
      showDetail: false
    }
  },
  created() {
    this.getCommisionList()
  },
  updated() {
    if (this.$router.currentRoute.name === 'AddCommision') {
      // console.log(this.$router.currentRoute.name)
      this.showDetail = true
    }
  },
  methods: {
    async getCommisionList(){
      const res = await getCommisionList({pageNo:this.currentPage , pageSize:this.pageSize})
      this.commisionTable = res.data.row
      // this.total = res.data.row.length
      console.log(this.commisionTable)
    },
    // æ¯é¡µæ¡æ•°æ”¹å˜æ—¶è§¦å‘ é€‰æ‹©ä¸€é¡µæ˜¾ç¤ºå¤šå°‘è¡Œ
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`)
      this.currentPage = 1
      this.pageSize = val
    },
    // å½“前页改变时触发 è·³è½¬å…¶ä»–页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.commisionTable = getCommisionList({pageNo:this.currentPage , pageSize:this.pageSize})
    },
    goToaddCommision() {
      this.$router.push('/inspectionManagement/commissionInspection/addCommision')
      this.showDetail = true
    }
  }
}
</script>

<style scoped>

.top-bar{
    margin: -25px -15px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
    .sermargin{
      margin-right: 60px;
    }
  }
.rightBtn{
    background-color: rgb(1, 102, 226);
}
.library-table{
      background-color: #fff;
      flex: 1;
      margin: 0px -15px;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      .table-header{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          padding: 0px 20px;
          margin-top: 0px;
          flex: 1;
          background: #fff;
          /* padding: 20px 20px 10px 20px; */
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }

</style>

 src/views/inspectionManagement/reportForInspection/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,302 @@
<template>
    <div class="content-main">
        <div class="top-bar">
            <el-form ref="form" :inline="true" :model="searchData">
            <el-form-item label="材料编码:" class="sermargin">
              <el-input
                v-model="searchData.code"
                class="input-form"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="材料名称:" class="sermargin">
              <el-input
                v-model="searchData.name"
                class="input-form"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="状态:" class="sermargin">
              <el-select v-model="searchData.state" placeholder="全部">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="来料日期:" style="margin-right: 20px;">
              <el-input
                v-model="searchData.date"
                class="input-form"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button type="primary" plain>重置</el-button>
            </el-form-item>
            </el-form>
        </div>
        <div class="library-table">
          <div class="table-header">
            <div class="search-bar">
              <el-radio-group v-model="radioValue">
                <el-radio-button label="全部" />
                <el-radio-button label="待检验" />
                <el-radio-button label="已检验" />
              </el-radio-group>
            </div>
            <div class="generateInsp">
              <el-button type="primary" size="mini" icon="el-icon-document" style="background-color: rgb(1, 102, 226);">生成报检单</el-button>
            </div>
          </div>
          <div class="table-box">
            <el-table
              ref="inspectionTable"
              :max-height="800"
              :cell-style="{textAlign: 'center'}"
              :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
              :data="inspectionTable"
              style="width: 100%"
            >
              <el-table-column
                type="selection"
                label=""
                min-width="10%"
              /> 
              <el-table-column
                type="index"
                label="序号"
                min-width="8%"
              />
              <el-table-column
                prop="date"
                label="来料日期"
                min-width="8%"
              />
              <el-table-column
                prop="providerName"
                label="供应商名称"
                min-width="12%"
              />
              <el-table-column
                prop="code"
                label="材料编码"
                min-width="8%"
              />
              <el-table-column
                prop="name"
                label="材料名称"
                min-width="8%"
              />
              <el-table-column
                prop="modelandspecification"
                label="规格型号"
                min-width="12%"
              />
              <el-table-column
                prop="unit"
                label="单位"
                min-width="5%"
              />
              <el-table-column
                prop="amount"
                label="数量"
                min-width="5%"
              />
              <el-table-column
                prop="commisiondate"
                label="报检日期"
                min-width="8%"
              />
              <el-table-column
                prop="person"
                label="检验人"
                min-width="8%"
              />
              <el-table-column
                prop="checkdate"
                label="检验日期"
                min-width="8%"
              />
              <el-table-column
                prop="state"
                label="状态"
                min-width="8%"
              >
              <template slot-scope="scope">
                <span :style="{ color: scope.row.state === '已检测' ? 'green' : 'red' }">
                  {{ scope.row.state }}
                </span>
              </template>
              </el-table-column>
            </el-table>
            <!-- åˆ†é¡µå™¨ -->
            <div>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
              </el-pagination>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      form: [],
      searchData: {
        code: '',
        name: '',
        state: '',
        date: ''
      },
      options: [{
        value: '1',
        label: '部门1'
      }, {
        value: '2',
        label: '部门2'
      }, {
        value: '3',
        label: '部门3'
      }],
      radioValue: '',
      inspectionTable: [{
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '已检测'
      }, {
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '待检测'
      }, {
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '已检测'
      }, {
        date: '2023-07-28',
        providerName: '国网山东省电力有限公司',
        code: 'BP214274',
        name: '铝包钢绞线',
        modelandspecification: 'JLHA/G1A-185/30-26/7',
        unit: '吨',
        amount: '21',
        commisiondate: '2023-08-02',
        person: '黄小明',
        checkdate: '2023-12-09',
        state: '待检测'
      }],
      currentPage: 0
    }
  },
  methods: {
    // æ¯é¡µæ¡æ•°æ”¹å˜æ—¶è§¦å‘ é€‰æ‹©ä¸€é¡µæ˜¾ç¤ºå¤šå°‘è¡Œ
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`)
      this.currentPage = 1
      this.pageSize = val
    },
    // å½“前页改变时触发 è·³è½¬å…¶ä»–页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  }
}
</script>

<style scoped>

.top-bar{
    margin: -25px -15px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
    .sermargin{
        margin-right: 60px;
    }
}
.rightBtn{
    background-color: rgb(1, 102, 226);
}
.library-table{
      background-color: #fff;
      flex: 1;
      margin: 0px -15px;
      margin-top: 40px;
      display: flex;
      flex-direction: column;
      .table-header{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          padding: 0px 20px;
          margin-top: 0px;
          flex: 1;
          background: #fff;
          /* padding: 20px 20px 10px 20px; */
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
.checked {
  color: green;
}

.unchecked {
  color: red;
}

</style>

 src/views/laboratory/gather/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>设备采集</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/laboratory/ledger/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,1317 @@
<template>
  <div class="ledger-main">
    <div class="page-header-search">
      <div class="search-bar">
        <el-form ref="form" :inline="true" :model="searchData">
          <el-form-item>
            <el-input
              v-model="searchData.keyword"
              placeholder="请输入编号/设备名称/型号规格"
            >
              <i slot="prefix" class="el-input__icon el-icon-search" />
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="filterTableData">查询</el-button>
            <el-button type="primary" plain @click="resetBtn">重置</el-button>
            <!-- <el-button type="text">高级搜索<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="serve-btn">
        <el-button type="primary" icon="el-icon-plus" @click="addDrawerVisible = true">新增仪器</el-button>
      </div>
    </div>
    <div class="content-main">
      <div class="library-bom">
        <div class="bom-item-search">
          <el-row>
            <el-col :span="19">
              <el-input
                v-model="filterText"
                placeholder="输入关键字进行过滤"
              />
            </el-col>
            <el-col :span="5">
              <el-button type="primary" size="small" @click="addClassVisible = true"><i class="el-icon-plus" /></el-button>
            </el-col>
          </el-row>
        </div>
        <el-tree
          ref="classTree"
          :data="classTree"
          :props="defaultProps"
          :default-expand-all="true"
          :filter-node-method="filterNode"
          @node-click="nodeClickHandler"
        />
      </div>
      <div class="library-table">
        <div class="table-header">
          <div class="search-bar">
            <el-radio-group v-model="radioValue" @change="getConditionTable">
              <!-- <el-radio-button label="0">全部</el-radio-button> -->
              <el-radio-button v-for="item in conditionsOptions" :key="item.value" :label="item.value">
                {{ item.label }}
              </el-radio-button>
            </el-radio-group>
            <el-checkbox v-model="isOut" @change="getExpireTable" :style="{'marginLeft':'12px'}">已过期</el-checkbox>
          </div>
          <div class="serve-btn">
            <!-- <el-button type="primary" icon="el-icon-plus">新增人员</el-button> -->
          </div>
        </div>
        <div class="table-box">
          <el-table
            ref="equipmentTable"
            node-key="father_name"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            :data="equipmentTable"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              min-width="90"
            />
            <el-table-column
              prop="equipment_code"
              label="仪器设备编号"
              min-width="200"
            />
            <el-table-column
              prop="equipment_name"
              label="仪器设备名称"
              min-width="150"
            />
            <el-table-column
              prop="specifications_models"
              label="规格型号"
              min-width="150"
            />
            <el-table-column
              prop="name"
              label="保管人"
              min-width="200"
            />
            <el-table-column
              prop="termValidity"
              label="计量截止有效期"
              min-width="200"
            />
            <el-table-column
              prop="conditions"
              label="设备状态"
              min-width="120"
            >
              <template slot-scope="scope">
                <el-tag
                  :type="scope.row.conditions === 0 ? 'primary' : 'success'"
                  disable-transitions
                >{{ scope.row.conditions | conditionsFilter }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="storage_place"
              label="存放地"
              min-width="200"
            />

            <el-table-column
              label="操作"
              min-width="120"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="openDetail(scope.row)">编辑</el-button>
                <el-button type="text" size="small" @click="clickDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- å¼¹å‡ºè¡¨å•é¡µ -->
          <div>
            <!-- æ·»åŠ åˆ†ç±» -->
            <el-dialog title="添加分类" :visible.sync="addClassVisible" width="33%">
              <el-form :model="addTreeForm">
                <el-form-item label="分类名称" label-width="100px">
                  <el-input v-model="addTreeForm.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="父级分类" label-width="100px">
                  <el-select v-model="addTreeForm.type" placeholder="请选择">
                    <el-option label="原材料" value="0" />
                    <el-option label="电线电缆" value="1" />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addClassVisible = false">取 æ¶ˆ</el-button>
                <el-button type="primary">ç¡® å®š</el-button>
              </div>
            </el-dialog>
          </div>
          <div>
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- ä»ªå™¨è¯¦æƒ…-->
    <el-drawer
      title="仪器设备详情"
      :visible.sync="detailDrawer"
      size="80%"
      class="detailDrawer"
      @close="closeDetailDrawer"
    >
      <div>
        <div class="detail-info">
          <div class="tips-main">
            <div class="tips">
              <span />
              <div>基本信息</div>
            </div>
            <div class="tips-btn">
              <el-button type="primary" @click="addDrawerVisible = true">编辑</el-button>
            </div>
          </div>
          <div class="message">
            <div class="message-item"><span><i class="el-icon-edit" />所属分类：{{ equipmentDetail.classifyId }}</span></div>
            <div class="message-item">
              <span><i class="el-icon-edit" />创建人：{{ equipmentDetail.createUserId }}</span>
              <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" /></el-tag>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />建档日期：{{ equipmentDetail.acceptanceDate }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />设备编号：{{ equipmentDetail.equipmentCode }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />型号规格：{{ equipmentDetail.specificationsModels }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />测量范围：{{ equipmentDetail.measuringRange }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />不确定度/误差：{{ equipmentDetail.errorRate }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />生产厂家：{{ equipmentDetail.manufacturer }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />存放地点：{{ equipmentDetail.storagePlace }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />到货日期：{{ equipmentDetail.arrivalDate }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />验收日期：{{ equipmentDetail.acceptanceDate }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />保管人：{{ equipmentDetail.userId }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />是否支持数采：{{ equipmentDetail.whetherDataAcquisition==1 ? '支持': '不支持' }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />仪器设备计量：{{ equipmentDetail.equipmentMeasurement==1 ? '需要': '不需要' }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />计量周期：{{ equipmentDetail.termValidity }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />描述：{{ equipmentDetail.descriptiveness }}</span>
            </div>
          </div>
        </div>
        <el-tabs v-model="activeTabsName">
          <el-tab-pane label="设备码点" name="codePoints">
            <el-button v-show="!codePointesTableStatus" :style="{marginBottom: '18px'}" @click="addCodePoints">新增设备码点</el-button>
            <div v-show="codePointesTableStatus" :style="{marginBottom: '18px'}" class="btns">
              <el-button @click="addNewCodePoints">添加</el-button>
              <el-button @click="saveCodePoins">保存</el-button>
              <el-button @click="closeCodePoins">取消</el-button>
            </div>

            <el-table
              ref="codePointsTable"
              :cell-style="{textAlign: 'center'}"
              :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
              :data="codePointsTable"
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                min-width="90"
              />
              <el-table-column
                prop="equipmentPoint"
                label="码点编码"
                min-width="150"
              >
                <template slot-scope="scope">
                  <span v-show="!codePointesTableStatus">{{ scope.row.equipmentPoint }}</span>
                  <el-input v-show="codePointesTableStatus" v-model="scope.row.equipmentPoint" />
                </template>
              </el-table-column>

              <el-table-column
                prop="equipmentPointName"
                label="码点名称"
                min-width="150"
              >
                <template slot-scope="scope">
                  <span v-show="!codePointesTableStatus">{{ scope.row.equipmentPointName }}</span>
                  <el-input v-show="codePointesTableStatus" v-model="scope.row.equipmentPointName" />
                </template>
              </el-table-column>
              <el-table-column
                prop="unit"
                label="单位"
                min-width="150"
              >
                <template slot-scope="scope">
                  <span v-show="!codePointesTableStatus">{{ scope.row.unit }}</span>
                  <el-input v-show="codePointesTableStatus" v-model="scope.row.unit" />
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="更新人"
                min-width="100"
              />
              <el-table-column
                prop="updateTime"
                label="更新日期"
                min-width="120"
              />
              <el-table-column
                prop="descriptiveness"
                label="描述"
                min-width="200"
              >
                <template slot-scope="scope">
                  <span v-show="!codePointesTableStatus">{{ scope.row.descriptiveness }}</span>
                  <el-input v-show="codePointesTableStatus" v-model="scope.row.descriptiveness" />
                </template>
              </el-table-column>

            </el-table>
          </el-tab-pane>
          <el-tab-pane label="计量信息" name="measure">
            <el-button :style="{marginBottom: '18px'}" @click="measureFormVisible = true">新增计量信息</el-button>
            <el-table
              ref="measureTable"
              :cell-style="{textAlign: 'center'}"
              :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
              :data="measureTable"
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                min-width="90"
              />
              <el-table-column
                prop="name"
                label="负责人"
                min-width="200"
              />
              <el-table-column
                prop="measurement_unit"
                label="计量单位"
                min-width="150"
              />
              <el-table-column
                prop="beginDate"
                label="开始日期"
                min-width="150"
              />
              <el-table-column
                prop="endDate"
                label="结束日期"
                min-width="150"
              />
              <el-table-column
                prop="performance_index"
                label="性能指标"
                min-width="200"
              />
              <el-table-column
                prop="uncertainty"
                label="不确定度"
                min-width="200"
              />
              <el-table-column
                prop="conditions"
                label="结果"
                min-width="120"
              >
                <template slot-scope="scope">
                  {{ scope.row.result }}
                  <!-- <el-tag
                    :type="scope.row.result === 0 ? 'primary' : 'success'"
                    disable-transitions
                  >{{ scope.row.result === 0 ? '未同意' : '已同意' }}</el-tag> -->
                </template>
              </el-table-column>
              <el-table-column
                prop="remarks"
                label="备注"
                min-width="200"
              />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <!-- æ·»åŠ ä»ªå™¨/修改仪器信息 -->
    <el-drawer
      ref="addDrawer"
      :title="equipmentDetail.id?'修改仪器设备信息':'新增仪器设备'"
      :append-to-body="true"
      :visible.sync="addDrawerVisible"
      class="addDrawer"
      size="40%"
      @close="closeAddOrChangeDrawer"
    >
      <div class="demo-drawer__content">
        <el-form label-position="top" :model="equipmentform">
          <el-row :gutter="50">
            <el-col :span="11">
              <el-form-item label="所属分类：" label-width="80">
                <el-cascader v-model="equipmentform.classifyId" :options="classTree" :show-all-levels="false" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="设备编号：" label-width="80">
                <el-input v-model="equipmentform.equipmentCode" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="11">
              <el-form-item label="仪器设备名称：" label-width="80">
                <el-input v-model="equipmentform.equipmentName" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="状态：" label-width="80">
                <el-select
                  v-model="equipmentform.conditions"
                  clearable
                  filterable
                  :allow-create="true"
                  placeholder="请选择仪器设备状态"
                  style="width:100%"
                >
                  <el-option
                    v-for="item in conditionsOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="11">
              <el-form-item label="型号规格：" label-width="80">
                <el-input v-model="equipmentform.specificationsModels" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="测量范围：" label-width="80">
                <el-input v-model="equipmentform.measuringRange" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="11">
              <el-form-item label="不确定度/准确度/最大允许误差：" label-width="80">
                <el-input v-model="equipmentform.errorRate" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="生产厂家：" label-width="80">
                <el-input v-model="equipmentform.manufacturer" autocomplete="off" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="11">
              <el-form-item label="存放地点：" label-width="80">
                <el-input v-model="equipmentform.storagePlace" autocomplete="off" />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="到货日期：" label-width="80">
                <el-date-picker
                  v-model="equipmentform.arrivalDate"
                  type="date"
                  placeholder="请选择到货日期"
                  style="width:100%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="11">
              <el-form-item label="验收日期：" label-width="80">
                <el-date-picker
                  v-model="equipmentform.acceptanceDate"
                  type="date"
                  placeholder="请选择验收日期"
                  style="width:100%"
                />
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="保管人：" label-width="80">
                <el-select
                  v-model="equipmentform.userId"
                  clearable
                  filterable
                  :allow-create="true"
                  placeholder="请选择保管人"
                  style="width:100%"
                >
                  <el-option
                    v-for="item in userOpetions"
                    :key="item.id"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="11">
              <el-form-item label="是否支持数采：" label-width="80">
                <el-radio v-model="equipmentform.whetherDataAcquisition" :label="1">支持</el-radio>
                <el-radio v-model="equipmentform.whetherDataAcquisition" :label="0">不支持</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="仪器设备计量：" label-width="80">
                <el-radio v-model="equipmentform.equipmentMeasurement" :label="1">需要</el-radio>
                <el-radio v-model="equipmentform.equipmentMeasurement" :label="0">不需要</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-show="equipmentform.equipmentMeasurement===1" :gutter="50">
            <el-col :span="12">
              <el-form-item label="计量截止有效期：" label-width="80">
                <el-input v-model="equipmentform.termValidity" type="number" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="50">
            <el-col :span="11">
              <el-form-item label="描述：" label-width="80">
                <el-input
                  v-model="equipmentform.descriptiveness"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                  style="width:217%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button class="el-button--default" @click="addDrawerVisible = false">取 æ¶ˆ</el-button>
          <el-button type="primary" class="el-button--primary el-button--medium" @click="addNewEquipment">ç¡® å®š</el-button>
        </div>
      </div>
    </el-drawer>
    <!-- æ–°å¢žè®¡é‡ä¿¡æ¯å¼¹çª— -->
    <el-dialog class="measureForm" title="新增计量" :visible.sync="measureFormVisible">
      <el-form label-position="top" :model="measureForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="负责人">
              <el-select
                v-model="measureForm.userId"
                clearable
                filterable
                :allow-create="true"
                placeholder="负责人"
                style="width:100%"
              >
                <el-option
                  v-for="item in userOpetions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计量单位">
              <el-input v-model="measureForm.measurementUnit" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="检定有效期">
              <el-date-picker
                v-model="measureForm.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="不确定度">
              <el-input v-model="measureForm.uncertainty" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结果">
              <el-select
                v-model="measureForm.result"
                clearable
                filterable
                :allow-create="true"
                placeholder="负责人"
                style="width:100%"
              >
                <el-option
                  v-for="item in resultOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="性能指标">
              <el-input
                v-model="measureForm.performanceIndex"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="measureForm.remarks"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="">
              <el-upload
                class="upload-demo"
                action="#"
                :on-change="handleUpload"
                :auto-upload="false"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addMeasure">ç¡® å®š</el-button>

        <el-button @click="measureFormVisible = false">取 æ¶ˆ</el-button>
      </span>
    </el-dialog>
    <!-- åˆ é™¤ä»ªå™¨å¼¹å‡ºæ¡† -->
    <el-dialog
      title="提示"
      :visible.sync="deletedialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>确定删除该仪器吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deletedialogVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary" @click="deleteInstrument">ç¡® å®š</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getClassifyList, getInstrumentList,
  addInstrumentUser, addInstrument, getInstrumentDetail,
  getEquipmentPointList, addEquipmentPoint,
  getMetricalInformationList, changeInstrument, addMetricalInformation, deleteInstrument } from '@/api/laboratory/ledger'
import { parseTime } from '@/utils/index'
export default {
  filters: {
    conditionsFilter(value) {
      let returnValue = null
      switch (+value) {
        case 1:
          returnValue = '运行'
          break
        case 2:
          returnValue = '故障'
          break
        case 3:
          returnValue = '报修'
          break
        case 4:
          returnValue = '检修'
          break
        case 5:
          returnValue = '待机'
          break
      }
      return returnValue
    }
  },
  data() {
    return {
      // ç”¨æˆ·ä¸‹æ‹‰æ¡†é…ç½®é¡¹
      userOpetions: [],
      // ä»ªå™¨çŠ¶æ€é…ç½®é¡¹
      conditionsOptions: [
        {
          label: '全部',
          value: 0
        },
        {
          label: '运行',
          value: 1
        },
        {
          label: '故障',
          value: 2
        },
        {
          label: '报修',
          value: 3
        },
        {
          label: '检修',
          value: 4
        },
        {
          label: '待机',
          value: 5
        }
      ],
      // è®¡é‡çŠ¶æ€é…ç½®é¡¹
      resultOptions: [
        {
          label: '合格',
          value: 1
        },
        {
          label: '校正后可用',
          value: 2
        },
        {
          label: '不合格',
          value: 3
        }

      ],
      // åˆ†ç±»tree数据，分类配置项
      classTree: [],
      // æ·»åŠ åˆ†ç±»å‚æ•°
      addTreeForm: {},
      // tree默认值
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // æœç´¢å…³é”®å­—
      searchData: {
        keyword: ''
      },
      // è¡¨æ ¼æœç´¢å•é€‰å€¼
      radioValue: '0',
      // è¡¨æ ¼æœç´¢å·²è¿‡æœŸ
      // æ˜¯å¦è¿‡æœŸ
      isOut: false,
      // æŽ§åˆ¶æ·»åŠ åˆ†ç±»æ¨¡æ€æ¡†æ˜¾ç¤º
      addClassVisible: false,
      // æŽ§åˆ¶æ–°å¢žè®¡é‡æ¨¡æ€æ¡†æ˜¾ç¤º
      measureFormVisible: false,
      // æŽ§åˆ¶åˆ é™¤ä»ªå™¨æ¨¡æ€æ¡†æ˜¾ç¤º
      deletedialogVisible: false,
      // æŽ§åˆ¶æ·»åŠ ä¿®æ”¹ä»ªå™¨æŠ½å±‰çš„显示
      addDrawerVisible: false,
      // æ·»åŠ ä¿®æ”¹ä»ªå™¨å‚数对象
      equipmentform: {
        acceptanceDate: '', // éªŒæ”¶æ—¥æœŸ
        arrivalDate: '', // åˆ°è´§æ—¥æœŸ
        classifyId: '', // æ‰€å±žåˆ†ç±»
        conditions: '', // çŠ¶æ€
        descriptiveness: '', // æè¿°
        equipmentCode: '', // è®¾å¤‡ç¼–号
        equipmentMeasurement: 1, // ä»ªå™¨è®¾å¤‡è®¡é‡
        equipmentName: '', // ä»ªå™¨è®¾å¤‡åç§°
        errorRate: '', // ä¸ç¡®å®šåº¦/准确度/最大允许误差
        userId: '', // ä¿ç®¡äºº
        manufacturer: '', // ç”Ÿäº§åŽ‚家
        measuringRange: '', // æµ‹é‡èŒƒå›´
        specificationsModels: '', // åž‹å·è§„æ ¼
        storagePlace: '', // å­˜æ”¾åœ°ç‚¹
        whetherDataAcquisition: 1 // æ˜¯å¦æ”¯æŒæ•°é‡‡
      },
      // æŽ§åˆ¶è®¾å¤‡ä»ªå™¨è¯¦æƒ…抽屉显示
      detailDrawer: false,
      // è®¾å¤‡æ•°æ®åˆ—表
      equipmentTable: [],
      // åˆ†é¡µå‚æ•°
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // ç ç‚¹è¡¨æ ¼
      codePointsTable: [
        {
          'unit': 'mm',
          'descriptiveness': '疯了，做不了',
          'equipmentPoint': 'Area-1',
          'name': '小小',
          'updateTime': '2023-07-24',
          'id': 1,
          'equipmentPointName': '导体屏蔽（壁厚面积）'
        }
      ],
      // è®¡é‡ä¿¡æ¯è¡¨
      measureTable: [],
      // æ·»åŠ è®¡é‡ä¿¡æ¯å‚数对象
      measureForm: {},
      activeTabsName: 'codePoints',
      // ç ç‚¹è¡¨æ ¼çš„状态：数据展示false/新增输入true
      codePointesTableStatus: false,
      // è®¾å¤‡è¯¦æƒ…对象
      equipmentDetail: {},
      // è¿‡æ»¤å…³é”®å­—
      filterText: '',
      // è¿‡æ»¤åŽçš„仪器设备表
      filterdequipmentTable: '',
      oldtableData: '',
      // è¿‡æ»¤ä¸åŒçŠ¶æ€è®¾å¤‡
      conditionTable: '',
      nodeclicked: '',
      expireData: '',
      instrumentId: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.classTree.filter(val)
    }
  },
  created() {
    this.getThreeData()
    this.getUserOptions()
  },
  methods: {
    // èŽ·å–分类数据
    async getThreeData() {
      const { data } = await getClassifyList()
      // console.log(data)
      this.classTree = data.map(item => {
        if (item.children) {
          item.children = item.children.map(childrenItem => {
            return { ...childrenItem, label: childrenItem.son_name, value: childrenItem.id }
          })
        }
        return { ...item, label: item.father_name, value: item.id ? item.id : item.father_name }
      })
      // console.log(this.classTree)
    },
    // èŽ·å–用户信息配置项
    async getUserOptions() {
      const { data } = await addInstrumentUser()
      this.userOpetions = data.map(item => ({ ...item, label: item.name, value: item.id }))
    },
    // æ˜¾ç¤ºä»ªå™¨è¯¦æƒ…
    async openDetail(row) {
      // console.log(row)
      this.detailDrawer = true
      const { data } = await getInstrumentDetail({ InstrumentId: row.id })
      this.equipmentDetail = data
      this.equipmentform = data
      console.log(this.equipmentform)
      const { data: pointList } = await getEquipmentPointList({ InstrumentId: this.equipmentDetail.id })
      this.codePointsTable = pointList
      const { data: informationList } = await getMetricalInformationList({ InstrumentId: this.equipmentDetail.id })
      this.measureTable = informationList
      console.log(informationList)
    },
    // èŠ‚点点击处理
    nodeClickHandler(data, node, element) {
      this.nodeclicked = data
      // console.log(data)
      // åªæœ‰æ•°æ®ä¸­æºå¸¦id才能发送查询请求
      if (data.id) {
        this.getEquipmentTable({ classifyId: data.id, pageSize: this.pageSize, pageNo: this.currentPage, whetherWhether: this.isOut })
      }
    },
    // èŽ·å–仪器列表数据
    async getEquipmentTable(ages) {
      // console.log('条件对象', ages)
      const { data } = await getInstrumentList(ages)
      console.log(data)
      this.equipmentTable = data.row
      this.total = data.total
      this.oldtableData = this.equipmentTable
    },
    // è¿‡æ»¤èŠ‚点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // æ”¹å˜é¡µé¢æ•°æ®å¤§å°
    handleSizeChange() {
      // å½“前页大小
    },
    // æ”¹å˜å½“前页
    handleCurrentChange() {
      // å½“前页更改
    },
    // æ˜¾ç¤ºè®¾å¤‡ç ç‚¹
    addCodePoints() {
      // æ·»åŠ æ–°ç ç‚¹ï¼Œæ¸…空原数组
      this.codePointesTableStatus = true
      this.codePointsTable = undefined
    },
    // æ–°å¢žè®¾å¤‡ç ç‚¹
    addNewCodePoints() {
      //
      if (!this.codePointsTable) {
        this.codePointsTable = []
      }
      const newObj = {}
      newObj.name = '小小' // å½“前用户的名称
      newObj.updateTime = '2023-07-24' // èŽ·å–当前时间
      newObj.equipmentPoint = 'Area-1'
      newObj.equipmentPointName = '导体屏蔽（壁厚面积）'
      newObj.descriptiveness = ''
      newObj.unit = 'mm'
      newObj.instrumentId = this.equipmentDetail.id
      this.codePointsTable.push(newObj)
    },
    // ä¿å­˜æäº¤æ–°å¢žè®¾å¤‡ç ç‚¹
    async saveCodePoins() {
      console.log(this.codePointsTable)
      if (!this.codePointsTable) {
        this.codePointsTable = []
      }
      if (this.codePointsTable.length === 0) return this.$message.error('请点击添加按钮添加数据')
      try {
        for (const item of this.codePointsTable) {
          const { code, data, message } = await addEquipmentPoint(item)
          console.log(data)
          if (code !== 200) throw new Error(message)
          this.$message.success('添加成功')
        }
      } catch (error) {
        this.$message.error(error)
      }
      await this.closeCodePoins()
    },
    // å–消新增设备码点
    async closeCodePoins() {
      this.codePointesTableStatus = false
      this.codePointsTable = undefined
      const { data: pointList } = await getEquipmentPointList({ InstrumentId: this.equipmentDetail.id })
      this.codePointsTable = pointList
    },
    // ç‚¹å‡»æ–°å¢žä»ªå™¨è®¾å¤‡æˆ–当存在仪器详情时是修改仪器设备信息
    async addNewEquipment() {
      if (Array.isArray(this.equipmentform.classifyId)) {
        this.equipmentform.classifyId = this.equipmentform.classifyId.pop()
      }
      if (!this.equipmentDetail.id) {
        // æ ¼å¼åŒ–日期
        console.log('新增仪器')
        this.equipmentform.arrivalDate = parseTime(this.equipmentform.arrivalDate, '{y}-{m}-{d}')
        this.equipmentform.acceptanceDate = parseTime(this.equipmentform.acceptanceDate, '{y}-{m}-{d}')
        // this.equipmentform.termValidity = parseTime(this.equipmentform?.termValidity, '{y}-{m}-{d}')
        console.log('新增仪器设备参数', this.equipmentform)
        try {
          const res = await addInstrument(this.equipmentform)
          console.log(res)
        } catch (error) {
          this.$message.error('添加失败')
        }
        this.$message.success('添加成功')
        this.addDrawerVisible = false
        this.equipmentform = {}
        return
      }
      console.log('修改仪器参数', this.equipmentform)
      try {
        const res = await changeInstrument(this.equipmentform)
        console.log(res)
        this.$message.success('修改成功')
        this.addDrawerVisible = false
        this.detailDrawer = false
      } catch (error) {
        this.$message.error('添加失败')
      }
    },
    // æ·»åŠ è®¡é‡ä¿¡æ¯
    async addMeasure() {
      // æ ¼å¼åŒ–时间
      this.measureForm.instrumentId = this.equipmentDetail.id
      if (Array.isArray(this.measureForm.date)) {
        this.measureForm.beginDate = parseTime(this.measureForm.date[0], '{y}-{m}-{d}')
        this.measureForm.endDate = parseTime(this.measureForm.date[1], '{y}-{m}-{d}')
      }
      console.log(this.measureForm)
      const formData = new FormData()
      formData.append('file', this.measureForm.file?.raw, this.measureForm.file?.name)
      console.log(this.measureForm)
      for (const key in this.measureForm) {
        console.log(key)
        // if (key === 'file') return
        formData.append(key, this.measureForm[key])
      }
      console.log(formData)
      try {
        const { data } = await addMetricalInformation(formData)
        console.log(data)
        this.$message.success('添加成功')
        this.measureForm = {}
        this.measureFormVisible = false
      } catch (error) {
        this.$message.error('添加失败')
      }
    },
    // å…³é—­è®¾å¤‡è¯¦æƒ…抽屉
    closeDetailDrawer() {
      this.equipmentDetail = {}
      this.codePointsTable = []
      this.measureTable = []
    },
    // å…³é—­æ·»åŠ ä¿®æ”¹è®¾å¤‡æŠ½å±‰
    closeAddOrChangeDrawer() {
      if (!this.equipmentDetail.id) {
        this.equipmentform = {}
      }
    },
    // æ–‡ä»¶ä¸Šä¼ 
    handleUpload(file, fileList) {
      // console.log(file, fileList)
      this.measureForm.file = file
    },
    // æ ¹æ®è¾“入的设备编号，设备名称或者型号规格关键字进行过滤列表
    filterTableData() {
      this.oldtableData = this.equipmentTable
      const filterdequipmentTable = this.equipmentTable.filter(item => {
        return item.equipment_code.includes(this.searchData.keyword) || item.equipment_name.includes(this.searchData.keyword) || item.specifications_models.includes(this.searchData.keyword)
      })
      this.equipmentTable = filterdequipmentTable
    },
    resetBtn() {
      this.searchData.keyword = ''
      this.equipmentTable = this.oldtableData
    },
    getConditionTable() {
      // console.log(this.radioValue)
      let filteredTable = this.oldtableData.filter(item => {
        return item.conditions === this.radioValue
      })
      // å…ˆåˆ¤æ–­isOut
      if (this.isOut) {
        // å¦‚果现在勾选了已过期按钮，那就从当前过滤好的列表中筛选出过期列表
        if (this.expireData.length === 0) {
          this.equipmentTable = null
        } else {
          let expireItem
          for (expireItem of this.expireData) {
            filteredTable = filteredTable.filter(item => {
              return item.equipment_code === expireItem.equipment_code
            })
          }
          this.equipmentTable = filteredTable
        }
        if (!this.radioValue) {
          this.equipmentTable = this.expireData
        }
      } else {
        this.equipmentTable = filteredTable
        if (!this.radioValue) {
          this.equipmentTable = this.oldtableData
        }
      }
    },
    async getExpireTable() {
      // const filteredTable = this.oldtableData.filter(item => {
      //   return item.conditions === this.radioValue
      // })
      if (this.isOut) {
        // æ•èŽ·ç‚¹å‡»äº†å·²è¿‡æœŸï¼Œè¯·æ±‚过期数据并保存
        const { data } = await getInstrumentList({ classifyId: this.nodeclicked.id, pageSize: this.pageSize, pageNo: this.currentPage, whetherWhether: this.isOut })
        this.expireData = data.row
        if (this.expireData.length === 0) {
          this.equipmentTable = null
        } else {
          if (this.radioValue !== 0) {
            let expireItem
            for (expireItem of this.expireData) {
              this.equipmentTable = this.oldtableData.filter(item => {
                console.log(this.radioValue)
                console.log('item', item)
                console.log('expireItem', expireItem)
                return item.conditions === this.radioValue && item.equipment_code === expireItem.equipment_code
              })
              console.log(this.equipmentTable)
            }
          } else {
            this.equipmentTable = this.expireData
          }
        }
      } else {
        // æ•èŽ·å–消了已过期，将过期数据清空，重新更新equipmentTable
        this.expireData = ''
        this.equipmentTable = this.oldtableData.filter(item => {
          return item.conditions === this.radioValue
        })
        if (this.radioValue === 0) {
          this.equipmentTable = this.oldtableData
        }
      }
    },
    clickDelete(row) {
      this.instrumentId = row.id
      this.deletedialogVisible = true
    },
    async deleteInstrument() {
      // console.log(row.id)
      await deleteInstrument({ instrumentId: this.instrumentId })
      this.deletedialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-drawer__content{
  margin-left: 50px;
}
.demo-drawer__footer {
  display: flex;
  justify-content: space-between;
}

.demo-drawer__footer .el-button--default {
  background-color: #fff;
  color: #333;
  width: 45%;
  margin-bottom: 24px;
}

.demo-drawer__footer .el-button--primary {
  background-color: #409EFF;
  color: #fff;
  width: 45%;
  margin-right: 60px;
  margin-bottom: 24px;
}
.ledger-main{
  width: 100%;
  height: 100%;
    // é¡µé¢å¤´éƒ¨æ¡ä»¶æœç´¢
  .page-header-search{
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 24px 12px 24px;
     .search-bar{
      .el-radio-button.is-active{
        color: #409EFF !important;
        background: #ecf5ff !important;
        border-color: #b3d8ff !important;
      }
      .el-form{
       .el-form-item{
         margin-bottom: 0px !important;
         .el-input{
          width: 360px;
         }
        }
      }
    }
  }

// é¡µé¢ä¸­å¿ƒå†…容区域
  .content-main{
    display: flex;
    height: 100%;
    min-height: calc(100vh - 88px);
    padding: 15px;
    >div{
      padding: 20px;
      background: #fff;
    }
    .library-bom{
      flex: 2;
      margin-right: 12px;
      .bom-item-search{
        margin-bottom: 12px;
        ::v-deep .el-input{
          input{
            height: 33px;
            line-height: 33px;
          }
        }
      }
         .bom-item-search .el-row{
          // display: flex;
          .el-col{
            text-align: right;
           }
          }
      .el-tree {
        margin-top: 12px;
      }
    }
    .library-table{
      flex: 8;
      max-width: 80%;
      margin-left: 12px;
      display: flex;
      flex-direction: column;
      .table-box{
          margin-top: 30px;
          flex: 1;
          background: #fff;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
  }

}
.addDrawer{
  ::v-deep .el-drawer__body{
      // padding: 24px !important;
      overflow-y: scroll;
      overflow-x: hidden;
    }
}
.detailDrawer{
    ::v-deep .el-drawer__body{
      padding: 24px !important;
      overflow-y: scroll;
    }
    .detail-info{
    background: #fff;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 5px 15px;
    margin: 0;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    .tips-main{
      padding: 10px 20px 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      .tips-btn{
        margin-bottom: 10px;
      }
      .tips{
      height: 100%;
      display: flex;
      height: 24px;
      align-items: center;
      font-size: 16px;
      >span{
        display: inline-block;
        margin-right: 10px;
        width: 4px;
        height: 16px;
        background: #0077DB;
      }
      >div{
        height: 100%;
        line-height: 26px;
      }
      .el-button{
        padding: 0;
      }
      }
    }

    // åŸºæœ¬ä¿¡æ¯å’Œä¼ä¸šä¿¡æ¯çš„每一个信息项样式
    .message{
      padding: 0px 20px 8px 20px;

      display: flex;
      flex-wrap: wrap;
      border-top: 1px solid #F2F6FC;
      >div{
        flex: 30%;
        max-width: 30%;
        padding: 8px;
        color: #606266;
        align-items: center;
        font-size: 12px;
        height: 40px;
        display: flex;
        align-items: center;
        >span{
          color: #303133;
          font-size: 14px;
          >i{
            margin-right: 8px;
          }
        }
      }
    }
  }
  }
.measureForm{
  //
  .el-form-item{
    //
    .el-date-editor{
      width: 100%;
    }
  }
}
</style>

 src/views/laboratory/measure/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>计量管理</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/laboratory/personnel/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,284 @@
<template>
  <div class="personnel-main ">
    <div class="page-header-search">
      <div class="search-bar">
        <el-form ref="form" inline="true" :model="searchData">
          <el-form-item>
            <el-input
              v-model="keyword"
              placeholder="请输入人员名称"
            >
              <i slot="prefix" class="el-input__icon el-icon-search" />
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData()">查询</el-button>
            <el-button type="primary" plain @click="resetData()">重置</el-button>
            <!-- <el-button type="text">高级搜索<i class="el-icon-arrow-down el-icon--right" /></el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="serve-btn">
        <el-button type="primary" icon="el-icon-plus" @click="dialogFormVisible = true">新增人员</el-button>

        <el-dialog title="新增人员" :visible.sync="dialogFormVisible" width="30%">
          <el-form :model="form" :rules="rules">
            <el-form-item label="账号" :label-width="formLabelWidth" prop="account">
              <el-input v-model="form.account" autocomplete="off" />
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
              <el-input v-model="form.age" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
              <el-input v-model="form.email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="名字" :label-width="formLabelWidth" prop="name">
              <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
              <el-input v-model="form.phone" autocomplete="off" />
            </el-form-item>

            <el-form-item label="权限" :label-width="formLabelWidth" prop="role_id">
              <el-input v-model="form.role_id" autocomplete="off" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 æ¶ˆ</el-button>
            <el-button type="primary" @click="submitForm()">ç¡® å®š</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <div class="content-main">
      <div class="personner-table">
        <el-table
          ref="personnerlTable"
          :height="700"
          :max-height="700"
          :cell-style="{textAlign: 'center'}"
          :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
          :data="personnerlTable"
          style="width: 100%"
        >
          <el-table-column
            prop="username"
            label="角色名称"
            min-width="120"
          />
          <el-table-column
            prop="roleName"
            label="角色权限"
            min-width="120"
          />
          <el-table-column
            prop="age"
            label="年龄"
            min-width="150"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            min-width="180"
          />
          <el-table-column
            prop="phone"
            label="电话"
            min-width="200"
          />
          <el-table-column
            prop="email"
            label="邮箱"
            min-width="200"
          />
          <el-table-column
            prop="jobState"
            label="在职状态"
            min-width="120"
            :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
            :filter-method="filterTag"
            filter-placement="bottom-end"
          >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
                disable-transitions
              >{{ scope.row.businessStatus === 0 ? '未同意' : '已同意' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            min-width="120"
          >
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
              <!-- <el-button type="text" size="small">编辑</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div>
          <!-- åˆ†é¡µå™¨ -->
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.personnerlTable.length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
axios.defaults.baseURL = 'http://192.168.110.167:1234'
export default {
  data() {
    return {
      keyword: '',
      personnerlTable: [

      ],
      filteredpersonnerlTable: [],
      currentindex: 1,
      currentPage: 1, // å½“前页码
      total: 20, // æ€»æ¡æ•°
      pageSize: 100, // æ¯é¡µçš„数据条数
      personData: [], // ç”¨æ¥å­˜æ”¾æŽ¥å£ä¼ è¿‡æ¥çš„人员列表数据
      dialogFormVisible: false,
      form: {
        account: '',
        age: '',
        email: '',
        name: '',
        phone: '',
        role_id: ''
      },
      formLabelWidth: '100px',
      rules: {
        account: [
          {
            required: true, message: '请输入账号', trigger: 'blur'
          }
        ],
        name: [{
          required: true, message: '请输入名字', trigger: 'blur'
        }],
        phone: [
          // { required: true, message: '请输入11位电话号码', trigger: 'blur' },
          { pattern: /^1[34578]\d{9}$/, message: '非法手机号码', trigger: 'blur' }
        ],
        email: [
          // { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '非法邮箱地址', trigger: ['blur', 'change'] }
        ],
        role_id: [
          { required: true, message: '请输入权限(0或1)', trigger: 'blur' }

        ]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // æ¯é¡µæ¡æ•°æ”¹å˜æ—¶è§¦å‘ é€‰æ‹©ä¸€é¡µæ˜¾ç¤ºå¤šå°‘è¡Œ
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`)
      this.currentPage = 1
      this.pageSize = val
    },
    // å½“前页改变时触发 è·³è½¬å…¶ä»–页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    },
    getData() {
      axios.get('/user/list_new_personnel', {
        params: {
          pageNo: 0,
          pageSize: 20
        }
      }).then(res => {
        // console.log(res)
        this.personData = res.data.data.row
        this.personnerlTable = this.personData
      }).catch(res => {
        console.log('error')
      })
    },
    searchData() {
      this.filteredpersonnerlTable = this.personnerlTable.filter((item) => {
        return item.username === this.keyword
      }
      )
      this.personnerlTable = this.filteredpersonnerlTable
    },
    resetData() {
      // console.log("111111")
      this.personnerlTable = this.personData
      this.keyword = ''
    },
    // æäº¤æ–°å¢žäººå‘˜è¡¨å•
    submitForm() {
      // Handle form submission here
      // console.log(this.form);
      // POST请求
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          axios.post('/user/add_new_personnel', this.form)
            .then(response => {
              console.log(response)
              // this.dialogVisible = false;
            })
            .catch(error => {
              console.error(error)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.personnel-main{
  // width: 100%;
  // height: 100%;
  .page-header-search{
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 24px 12px 24px;
     .search-bar{
      .el-form{
       .el-form-item{
         margin-bottom: 0px !important;
         .el-input{
          width: 360px;
         }
        }
      }
    }
  }
  .personner-table{
    background: #fff;
    padding: 20px 20px 10px 20px;
    >div:nth-child(2){
      display: flex;
      justify-content: end;
      margin: 10px 0;
    }
  }
}
</style>

 src/views/login/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,241 @@
<template>
  <div class="login-container">
    <el-form ref="loginForm" :model="loginForm" class="login-form" auto-complete="on" label-position="left">
      <!-- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> -->
      <!-- form è¡¨å•æ ¡éªŒ -->
      <div class="title-container">
        <h3 class="title">登 å½•</h3>
      </div>

      <el-form-item prop="username">
        <span class="svg-container">
          <svg-icon icon-class="user" />
        </span>
        <el-input
          ref="username"
          v-model="loginForm.username"
          placeholder="Username"
          name="username"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>

      <el-form-item prop="password">
        <span class="svg-container">
          <svg-icon icon-class="password" />
        </span>
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="Password"
          name="password"
          tabindex="2"
          auto-complete="on"
          @keyup.enter.native="handleLogin"
        />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form-item>

      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
      <div class="tips">
        <span style="margin-right:20px;">username: admin</span>
        <span> password: any</span>
      </div>
    </el-form>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: '123456',
        password: '123456'
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
/* ä¿®å¤input èƒŒæ™¯ä¸åè°ƒ å’Œå…‰æ ‡å˜è‰² */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg:#283443;
$light_gray:#fff;
$cursor: #fff;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    display: inline-block;
    height: 47px;
    width: 85%;

    input {
      background: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 0px;
      padding: 12px 5px 12px 15px;
      color: $light_gray;
      height: 47px;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;

.login-container {
  min-height: 100%;
  width: 100%;
  background:url('../../assets/404_images/backgroud.png') no-repeat;
  background-size: 100vw 100vh;
  overflow: hidden;
  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 0 35px ;
    margin: 0 auto;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    padding: 6px 5px 6px 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 7px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>

 src/views/message/message/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>消息</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/message/toDo/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>待办</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/personal/myBusiness/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,15 @@
<template>
  <div class="My-main">
    <div class="content-main" />
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/personal/myInformation/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,332 @@
<template>
  <div class="my-main content-main">
    <div class="my-info">
      <div class="tips-main">
        <div class="tips">
          <span />
          <div>基本信息</div>
        </div>
        <div class="tips-btn">
          <span><i class="el-icon-edit" />操作：</span>
          <el-button type="text" @click="dialogFormVisible = true">编辑</el-button>
          <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" :rules="rules">
              <el-form-item label="账号" :label-width="formLabelWidth" prop="account">
                <el-input v-model="form.account" autocomplete="off" />
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 æ¶ˆ</el-button>
              <el-button type="primary" @click="submitForm()">ç¡® å®š</el-button>
            </div>
          </el-dialog>
        </div>
      </div>
      <div class="message">
        <div class="message-item"><span><i class="el-icon-edit" />用户名：</span>{{ infoTable.username }}</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />姓名：</span>
          <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />{{ infoTable.name }}</el-tag>
        </div>
        <div class="message-item">
          <span><i class="el-icon-edit" />电话号码：</span>
          {{ infoTable.cellPhone }}</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />邮箱：</span>
          {{ infoTable.email }}</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />签名：</span>
          2121212121212121</div>
      </div>
      <!-- <el-table
        ref="infoTable"
        :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
        :data="infoTable"
        style="width: 100%"
      >
        <el-table-column
          prop="username"
          label="用户名"
          width="200"
        />
        <el-table-column
          prop="name"
          label="姓名"
          width="460"
        >
          <template slot-scope="scope">
            <el-tag type="info"><i class="el-icon-info" :style="{marginRight:'4px'}" />{{ scope.row.name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="cellPhone"
          label="电话号码"
          width="400"
        />
        <el-table-column
          prop="email"
          label="邮箱"
          width="300"
        />
        <el-table-column
          prop="signature"
          label="签名"
          width="120"
          :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        />
        <el-table-column
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table> -->
    </div>
    <div class="my-business">
      <div class="tips-main">
        <div class="tips">
          <span />
          <div>企业信息</div>
        </div>
        <div class="tips-btn">
          <span><i class="el-icon-edit" />操作：</span>
          <el-button type="text">退出</el-button>
        </div>
      </div>
      <!-- <el-table
        ref="businessTable"
        :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
        :data="businessTable"
        style="width: 100%"
      >
        <el-table-column
          prop="businessSmallName"
          label="企业简称"
          width="200"
        />
        <el-table-column
          prop="businessBigName"
          label="企业名称"
          width="460"
        />
        <el-table-column
          label="企业联系人"
          width="400"
        >
          <template slot-scope="scope">
            <el-tag type="info"><i class="el-icon-info" :style="{marginRight:'4px'}"/>{{ scope.row.businessContact }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="businessPhone"
          label="企业联系号码"
          width="300"
        />
        <el-table-column
          prop="businessStatus"
          label="加入状态"
          width="120"
          :filters="[{ text: 0, value: 0 }, { text: 1, value: 1 }]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
        >
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.businessStatus === 0 ? 'primary' : 'success'"
              disable-transitions
            >{{ scope.row.businessStatus === 0 ? '未同意' : '已同意' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">退出</el-button>
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table> -->
      <div class="message">
        <div class="message-item"><span><i class="el-icon-edit" />企业简称：</span>{{ businessTable.businessSmallName }}</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />完整名称：</span>{{ businessTable.businessBigName }}
        </div>
        <div class="message-item">
          <span><i class="el-icon-edit" />联系人：</span>
          <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />{{ businessTable.businessContact }}</el-tag></div>
        <div class="message-item">
          <span><i class="el-icon-edit" />联系人电话：</span>
          {{ businessTable.businessPhone }}</div>
        <div class="message-item">
          <span><i class="el-icon-edit" />加入状态：</span>
          2121212121212121</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getInfo } from '@/api/user'

// axios.defaults.baseURL = process.env.VUE_APP_BASE_API

export default {
  data() {
    return {
      infoTable:
        {
          username: 'jack',
          name: '张三',
          cellPhone: '138888888',
          email: '138888888@qq.com',
          signature: '我是法外狂徒'
        },
      businessTable:
        {
          businessSmallName: '中天',
          businessBigName: '中天科技',
          businessContact: 'jack',
          businessPhone: '1388888888',
          businessStatus: 1
        },
      dialogFormVisible: false,
      form: [],
      formLabelWidth: 120
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    clearFilter() {
      // æ¸…除所有过滤器
      this.$refs.businessTable.clearFilter()
    },
    filterTag(value, row) {
      console.log(value, row)
      return row.businessStatus === value
    },
    submitForm() {
      // Handle form submission here
      // console.log(this.form);
      // POST请求
      this.dialogFormVisible = false
    },
    async getUserInfo() {
      const res = await getInfo()
      this.infoTable.name = res.data.uname
      this.infoTable.username = res.data.account
      this.infoTable.cellPhone = res.data.phone
      this.infoTable.email = res.data.email
      this.businessTable.businessSmallName = res.data.e_byname
      this.businessTable.businessBigName = res.data.e_name
      this.businessTable.businessContact = res.data.e_link_name
      this.businessTable.businessPhone = res.data.e_phone
      // console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
.my-main{
  .my-info,.my-business{
    background: #fff;
    // padding: 10px 20px 10px 20px;
    margin: 0;
    margin-bottom: 12px;
    border-radius: 6px;
    overflow: hidden;
    .tips-main{
      // margin: ;
      padding: 10px 20px 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
      // height: ;
      &:hover{
        background: #85bff810;
        .tips-btn{
          display: block;
          left: 0;
          opacity:1;
        }
      }
      .tips-btn{
        height: 100%;
        // display: none;
        position: relative;
        opacity:0;
        left: 100px;
        transition: all 0.3s ease-in-out;
      }
      .tips{
      height: 100%;
      display: flex;
      height: 24px;
      align-items: center;
      font-size: 16px;
      // margin-bottom: 12px;
      >span{
        display: inline-block;
        margin-right: 10px;
        width: 4px;
        height: 16px;
        background: #0077DB;
      }
      >div{
        height: 100%;
        line-height: 26px;
      }
      .el-button{
        padding: 0;
      }
      }
    }

    // åŸºæœ¬ä¿¡æ¯å’Œä¼ä¸šä¿¡æ¯çš„每一个信息项样式
    .message{
      padding: 0px 20px 10px 20px;

      display: flex;
      flex-wrap: wrap;
      border-top: 1px solid #F2F6FC;
      // border-top: 1px solid #F2F6FC;
      >div{
        flex: 30%;
        max-width: 30%;
        padding: 8px;
        color: #606266;
        align-items: center;
        // height: 65px;
        font-size: 12px;
        height: 52px;
        display: flex;
        align-items: center;
        >span{
          color: #303133;
          font-size: 16px;
          //
          >i{
            margin-right: 8px;
          }
        }
      }
      // >div:nth-child(5){
      //   flex: 60%;
      //   max-width: 60%;
      // }
    }
  }
  .my-business{
    margin-top: 28px;
  }
}
</style>

 src/views/rawMaterials/checkTheReport/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>检测报告</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/rawMaterials/nonConformanceReview/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>不合格评审</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/rawMaterials/nonConformingFeedback/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>不合格反馈</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/rawMaterials/passRateStatistics/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>合格率统计</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/rawMaterials/planAssignments/index.vue

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

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/rawMaterials/print/index.vue

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

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/rawMaterials/rawMaterialInspection/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>原材料检验</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/rawMaterials/reportAuditing/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,13 @@
<template>
  <div>报告审核</div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>

</style>

 src/views/rawMaterials/reportForInspection/father.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,15 @@
<template>
  <div class="forinspection-father-main">
    <router-view />
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

 src/views/rawMaterials/reportForInspection/forInspectionDetail.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,636 @@
<template>
  <div class="forInspectionDetail-main">
    <div class="for-inspction-detail-header">
      <div class="header-left">报检编号：</div>
      <div class="header-right">
        <el-form class="rightBtn" :inline="true">
          <el-form-item class="createBtn">
            <el-button type="error" icon="el-icon-plus">作废申请</el-button>
          </el-form-item>
          <el-form-item class="getDataBtn">
            <el-button type="primary" icon="el-icon-download">提交申请</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="content-main">
      <div class="card-main">
        <div class="tips-main">
          <div class="tips">
            <span />
            <div>基本信息</div>
          </div>
          <!-- <div class="tips-btn">
              <span><i class="el-icon-edit" />操作：</span>
              <el-button type="text">编辑</el-button>
            </div> -->
        </div>
        <div class="message">
          <!-- <div class="message-item"><span><i class="el-icon-edit" />试验方法：</span></div> -->
          <div class="message-item">
            <span><i class="el-icon-edit" />检验类型：
              <span v-if="inspectionDetail.type===0">原材料检验</span>
              <span v-else-if="inspectionDetail.type===1">半成品检验</span>
              <span v-else-if="inspectionDetail.type===2">成品检验</span>
            </span>
          </div>
          <div class="message-item">
            <span><i class="el-icon-edit" />登记人：<el-tag>{{ inspectionDetail.userName }}</el-tag></span></div>
          <div class="message-item">
            <span><i class="el-icon-edit" />登记日期：{{ inspectionDetail.createTime }}</span></div>
        </div>
      </div>
      <div class="card-main sample-list">
        <div class="tips-main">
          <div class="tips">
            <span />
            <div>样品相关</div>
          </div>
          <div class="tips-btn" :style="{marginBottom: '10px'}">
            <!-- <span><i class="el-icon-edit" />操作：</span> -->
            <el-button type="primary" icon="el-icon-download" @click="addSampleVisible = true">添加样品</el-button>
          </div>
        </div>
        <div class="table-box">
          <el-table
            ref="sampleTable"
            :max-height="800"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            :data="sampleTable"
            style="width: 100%"
          >
            <el-table-column
              prop="materialNum"
              label="物料编号"
              min-width="200"
            />
            <el-table-column
              prop="materialName"
              label="物料名称"
              min-width="200"
            />
            <el-table-column
              prop="objectofInspection"
              label="物料属性"
              min-width="200"
            />
            <el-table-column
              prop="materialBatch"
              label="批次"
              min-width="200"
            />
            <el-table-column
              prop="materialReelNumber"
              label="盘号"
              min-width="200"
            />
            <el-table-column
              prop="specificationsSerialNumber"
              label="型号"
              min-width="200"
            />
            <el-table-column
              prop="registrant"
              label="规格"
              min-width="200"
            />
            <el-table-column
              prop="applicationTime"
              label="入库数量"
              min-width="200"
            />
            <el-table-column
              prop="materialNum"
              label="送样数量"
              min-width="200"
            />
            <el-table-column
              label="操作"
              min-width="200"
              fixed="right"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="openChangeMaterial(scope.row)">编辑</el-button>
                <el-button type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- åˆ†é¡µå™¨ -->
          <div>
            <el-pagination
              :current-page="pageParams.pageNo"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
            />
          </div>
        </div>

      </div>
    </div>
    <el-drawer
      title="新增样品"
      :visible.sync="addSampleVisible"
      :direction="direction"
      size="50%"
    >
      <div class="demo-drawer__content">
        <el-form label-position="top" label-width="120px" :model="addSampleFrom">
          <el-form-item>
            <el-button type="primary" @click="chooseMaterialVisible = true">选择物料</el-button>
          </el-form-item>
          <div class="materialParams-card">
            <el-row class="materialParams-top">
              <el-col :span="12">
                <el-form-item>
                  <el-input placeholder="--">
                    <template slot="prepend">物料编号</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-input placeholder="--">
                    <template slot="prepend">物料名称</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row class="materialParams-bottom">
              <el-col :span="12">
                <el-form-item>
                  <el-input placeholder="--">
                    <template slot="prepend">物料规格</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item>
                  <el-input placeholder="--">
                    <template slot="prepend">供应商 </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-row :gutter="100" :style="{marginTop:'24px'}">
            <el-col :span="12">
              <el-form-item label="批次">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数量">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="盘号">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="存放地">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="规格/型号名称">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主线心截面">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="生产指令号">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主线芯芯数">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100">
            <el-col :span="12">
              <el-form-item label="电压等级">
                <el-input placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="100" :style="{flex:'1'}">
            <el-col :span="24">
              <el-form-item label="备注">
                <el-input
                  type="textarea"
                  rows="2"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
    <el-dialog title="选择物料" :visible.sync="chooseMaterialVisible">
      <div class="dialog-content">
        <!-- Left side tree structure -->
        <div class="tree-container">
          <span class="all"> å…¨éƒ¨</span>
          <el-tree :data="treeData" />
        </div>
        <!-- Right side material list -->
        <div class="table-container">
          <el-table
            ref="todoListRef"
            :data="selectedNodeMaterials"
            style="width: 100%"
            highlight-current-row
            :header-row-class-name="headerBg"
            @row-click="handleSelectionChange"
          >
            <el-table-column
              label="物料编号"
              prop="number"
            >
              <template slot-scope="scope">
                <el-radio v-model="radioSelected" :label="scope.row.number" @change.native="handleSelectionChange(scope.row)">&nbsp;  </el-radio>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="物料名称" />
          </el-table>
          <el-pagination
            :current-page="pageParams.pageNo"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageParams.pageSize"
            :total="pageParams.total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="chooseMaterialVisible = false">取 æ¶ˆ</el-button>
        <el-button type="primary">确定选择</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInspectionMaterialListById } from '@/api/rawMaterials/reportForInspection'
export default {
  data() {
    return {
      sampleTable: [],
      pageParams: {
        pageNo: 1,
        pageSize: 1,
        total: 3
      },
      addSampleVisible: false,
      chooseMaterialVisible: false,
      direction: 'rtl',
      addSampleFrom: {},
      treeData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 4,
          label: '二级 2-1',
          children: [{
            id: 9,
            label: '三级 2-1-1'
          }, {
            id: 10,
            label: '三级 2-1-2'
          }]
        }]

      }],
      selectedNodeMaterials: [
        {
          number: '12345',
          name: '测试数据1'
        },
        {
          number: 'Y111111',
          name: '测试数据2'
        }],
      radioSelected: null,
      multipleSelection: '',
      inspectionDetail: {}
    }
  },
  created() {
    // console.log(this.$route.query) ä¼ é€’的申请单对象详情
    this.inspectionDetail = JSON.parse(this.$route.query.inspectionDetail)
    this.getMaterialList()
  },
  methods: {
    openChangeMaterial(row) {
      console.log(row)
    },
    async getMaterialList() {
      const res = await getInspectionMaterialListById({ inspectionId: this.inspectionDetail.id })
      // console.log(res)
      this.sampleTable = res.data
    },
    handleSelectionChange(val) {
      console.log(val)
      this.radioSelected = val.number // é€‰ä¸­è¡Œçš„number
      this.multipleSelection = val // é€‰ä¸­çš„一行数据
    },
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize
    },
    handleCurrentChange(pageNo) {
      this.pageParams.pageNo = pageNo
    },
    headerBg({ row, rowIndex }) {
      console.log('rowIndex', rowIndex)
      if (rowIndex === 0) {
        return 'headerBgClass'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-content{
  display: flex;
  .tree-container{
    flex: 30%;
    // background-color: #bfa;
    margin-right: 12px;
    margin-left: 12px;
    .all{
      display: block;
      color: #0077DB;
      padding: 5px;
    }
  }
  .table-container{
    flex: 70%;
    // background-color: #0077DB;
    margin-left: 12px;
    .el-table{
      .el-table__header_wrapper{
        .has-gutter{
          .headerBgClass{
            background-color: #606266;
          }
        }
      }
    }
    .el-pagination{
      margin-top: 12px;
    }
  }
}
.forInspectionDetail-main{
    min-height: calc(100vh - 88px);
    display: flex;
    flex-direction: column;
}
.for-inspction-detail-header{
    width: 100%;
    background: #fff;
    // height: 42px;
    display: flex;
    border-bottom: 1px solid #f0f2f5;
    padding: 8px 24px 12px 24px;
    justify-content: space-between;
    align-items: center;
    .header-left{
          font-size: 20px;
          color: #303133;
    }
    .header-right{
        .el-form-item{
            margin-bottom: 0px !important;
        }
         .rightBtn {
            display: flex;
            justify-content: flex-end;
        }
    }
}
.content-main{
    display: flex;
    flex: 1;
    flex-direction: column;
    .sample-list{
        flex: 1;
        display: flex;
        flex-direction: column;
        .table-box{
            padding: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
            .el-table{
                flex: 1;
                display: flex;
                flex-direction: column;
                ::v-deep .el-table__body-wrapper{
                    flex: 1 !important;
                }
            }
            >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
        }
    }
    .card-main{
        background: #fff;
        // padding: 10px 20px 10px 20px;
        margin: 0;
        margin-bottom: 12px;
        border-radius: 6px;
        overflow: hidden;
        .tips-main{
        // margin: ;
        padding: 10px 20px 0px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 50px;
        // height: ;
        &:hover{
            background: #85bff810;
            .tips-btn{
            display: block;
            left: 0;
            opacity:1;
            }
        }
        .tips-btn{
            height: 100%;
            // display: none;
            position: relative;
            opacity:0;
            left: 100px;
            transition: all 0.3s ease-in-out;
        }
        .tips{
        height: 100%;
        display: flex;
        height: 24px;
        align-items: center;
        font-size: 16px;
        // margin-bottom: 12px;
        >span{
            display: inline-block;
            margin-right: 10px;
            width: 4px;
            height: 16px;
            background: #0077DB;
        }
        >div{
            height: 100%;
            line-height: 26px;
        }
        .el-button{
            padding: 0;
        }
        }
        }

        // åŸºæœ¬ä¿¡æ¯å’Œä¼ä¸šä¿¡æ¯çš„每一个信息项样式
        .message{
        padding: 0px 20px 10px 20px;

        display: flex;
        flex-wrap: wrap;
        border-top: 1px solid #F2F6FC;
        // border-top: 1px solid #F2F6FC;
        >div{
            flex: 50%;
            max-width: 50%;
            padding: 8px;
            color: #606266;
            align-items: center;
            // height: 65px;
            font-size: 12px;
            height: 52px;
            display: flex;
            align-items: center;
            >span{
            color: #303133;
            font-size: 16px;
            //
            >i{
                margin-right: 8px;
            }
            }
        }
        // >div:nth-child(5){
        //   flex: 60%;
        //   max-width: 60%;
        // }
        }
    }
}

.demo-drawer__content{
    padding: 24px;
    height: 100%;
    .el-form{
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    ::v-deep .el-textarea__inner{
      max-height: 100px !important;
    }
    ::v-deep .el-form--label-top .el-form-item__label{
      padding: 0px !important;
    }
    .materialParams-card{
      box-shadow: rgba(100, 100, 111, 0.2) 0px 5px 15px;
      // box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      // box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
     ::v-deep   .el-form-item{
        .el-form-item__content{
          margin-left:0px !important;
        }
      }
      ::v-deep .el-input{
          >div{
            width: 120px;
            text-align: center;
          }
      }
    }
    .materialParams-bottom{
      .el-form-item{
        margin-bottom: 0px !important;
        ::v-deep .el-input{
          >div,>input{
            border-bottom: 0px !important;
            border-left: 0px !important;
            border-right: 0px !important;
            // border-top: 1px solid #DCDFE6;
            border-radius: 0px !important;
          }
       }
      }
    }
    .materialParams-top{
      .el-form-item{
        margin-bottom: 0px !important;
         ::v-deep .el-input{
          >div,>input{
            border: 0px !important;
            border-radius: 0px !important;
          }
        }
      }
      .el-col:nth-child(1){
        //
        ::v-deep .el-input{
          >div,>input{
            border-bottom: 0px !important;
            border-right: 0px !important;
            border-radius: 0px !important;
          }
        }
      }
    }
}

</style>

 src/views/rawMaterials/reportForInspection/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,351 @@
<template>
  <div>
    <template v-if="!showDetail">
      <div class="content-main">
        <div class="top-bar">
          <el-form ref="form" :inline="true" :model="searchData">
            <el-form-item>
              <el-input
                v-model="searchData.keyword"
                class="input-form"
                placeholder="请输入申请单号/检验对象/对象位置/对象名称"
              >
                <i slot="prefix" class="el-input__icon el-icon-search" />
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
              <el-button type="primary" plain>重置</el-button>
            </el-form-item>
            <el-dropdown>
              <span class="retrieval">
                é«˜çº§æ£€ç´¢<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>黄金糕</el-dropdown-item>
                <el-dropdown-item>狮子头</el-dropdown-item>
                <el-dropdown-item>螺蛳粉</el-dropdown-item>
                <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form>
          <el-form class="rightBtn">
            <el-form-item class="getDataBtn">
              <el-button type="primary" icon="el-icon-download" plain>获取ERP数据</el-button>
            </el-form-item>
            <el-form-item class="createBtn">
              <el-button type="primary" icon="el-icon-plus" @click="checkTypeVisible = true">新增检验单</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="library-table">
          <div class="table-header">
            <div class="search-bar">
              <el-radio-group v-model="radioValue">
                <el-radio-button label="全部" />
                <el-radio-button label="待提交" />
                <el-radio-button label="已提交" />
                <el-radio-button label="已作废" />
              </el-radio-group>
            </div>
          </div>
          <div class="table-box">
            <el-table
              ref="inspectionTable"
              :max-height="800"
              :cell-style="{textAlign: 'center'}"
              :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
              :data="inspectionTable"
              style="width: 100%"
            >
              <el-table-column
                prop="type"
                label="检验类型"
                min-width="200"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.type===0">原材料检验</span>
                  <span v-else-if="scope.row.type===1">半成品检验</span>
                  <span v-else-if="scope.row.type===2">成品检验</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
                min-width="200"
              />
              <el-table-column
                prop="userName"
                label="申请人"
                min-width="200"
              />
              <el-table-column
                prop="inspectUserId"
                label="检验人"
                min-width="200"
              />
              <el-table-column
                prop="inspectionStatus"
                label="检验状态"
                min-width="200"
              />
              <el-table-column
                prop="qualifiedState"
                label="合格状态"
                min-width="200"
              />
              <el-table-column
                prop="inspectStartTime"
                label="检验开始时间"
                min-width="200"
              />
              <el-table-column
                prop="inspectEndTime"
                label="检验结束时间"
                min-width="200"
              />
              <el-table-column
                label="操作"
                min-width="200"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
                  <el-button type="text" size="small">作废</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- åˆ†é¡µå™¨ -->
            <div>
              <el-pagination
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
        <div class="checkType">
          <el-dialog
            title="新增检验单"
            :visible.sync="checkTypeVisible"
            width="40%"
          >
            <div class="check-box">
              <el-radio-group v-model="addInspectionType">
                <el-radio :label="0" border>原材料检验</el-radio>
                <el-radio :label="1" border>半成品检验</el-radio>
                <el-radio :label="2" border>成品检验</el-radio>
              </el-radio-group>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="checkTypeVisible = false">取 æ¶ˆ</el-button>
              <el-button type="primary" @click="goToForInspectionDetail">ç¡® å®š</el-button>
            </span>
          </el-dialog>
        </div>
      </div>
    </template>
    <template v-else>
      <router-view />
    </template>
  </div>
</template>

<script>
import { getInspectionList, addInspection } from '@/api/rawMaterials/reportForInspection'
export default {
  data() {
    return {
      showDetail: false,
      searchData: {
        keyword: ''
      },
      inspectionTable: [{
        'id': '1681215775833042945',
        'type': 0,
        'inspectionStatus': 0,
        'qualifiedState': null,
        'state': 1,
        'createTime': '2023-07-18 16:14:11',
        'updateTime': null,
        'version': null,
        'userName': '测试人员',
        'inspectUserId': null,
        'inspectStartTime': null,
        'inspectEndTime': null
      }],
      currentPage: 1,
      total: 20, // æ€»æ¡æ•°
      pageSize: 10, // æ¯é¡µçš„数据条数
      radioValue: '全部',
      checkTypeVisible: false,
      addInspectionType: 0
    }
  },
  watch: {
    $route: {
      handler(val, oldval) {
        console.log(val)// æ–°è·¯ç”±ä¿¡æ¯
        console.log(oldval)// è€è·¯ç”±ä¿¡æ¯
      },
      // æ·±åº¦è§‚察监听
      deep: true
    }
  },
  created() {
    this.getInspectionTableData()
  },
  updated() {
    if (this.$route.name === 'ForInspectionDetail') this.showDetail = true
  },
  methods: {
    async getInspectionTableData() {
      const res = await getInspectionList({ pageSize: this.currentPage, countSize: this.pageSize })
      // this.inspectionTable = data
      console.log(res)
      this.inspectionTable = res.data
    },
    async goToForInspectionDetail() {
      try {
        //
        const form = new FormData()
        form.append('type', this.addInspectionType)
        let { data: inspectionDetail } = await addInspection(form)
        // console.log(res)
        inspectionDetail = JSON.stringify(inspectionDetail)
        this.$message.success('添加成功')
        this.$router.push({ path: '/rawMaterials/reportForInspection/forInspectionDetail', query: { inspectionDetail }})
      } catch (error) {
        this.$message.error('添加失败')
      }
    },
    // æŸ¥çœ‹å¯¹åº”申请单详情
    handleClick(row) {
      const inspectionDetail = JSON.stringify(row)
      this.$router.push({ path: '/rawMaterials/reportForInspection/forInspectionDetail', query: { inspectionDetail }})
    },
    // æ¯é¡µæ¡æ•°æ”¹å˜æ—¶è§¦å‘ é€‰æ‹©ä¸€é¡µæ˜¾ç¤ºå¤šå°‘è¡Œ
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`)
      this.currentPage = 1
      this.pageSize = val
    },
    // å½“前页改变时触发 è·³è½¬å…¶ä»–页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  }
}
</script>

<style lang="scss" scoped>
.checkType{
  .check-box{
    .el-radio-group{
      display: flex;
      justify-content: space-around;
      .el-radio{
        // display: flex;
        // align-items: center;
        &.is-checked{
          background: #ecf5ff;
          border-color: #b3d8ff;
         ::v-deep  .el-radio__label{
            color: #333 !important;

          }
        }
        height: auto;
        font-size: 22px !important;
        padding: 20px 40px !important;
        ::v-deep  .el-radio__label{
          font-size: 22px !important;
          padding-left: 0px !important;
        }
        ::v-deep  .el-radio__input{
        display: none !important;
      }
    }
 }
  }
}
 .content-main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 88px);
    padding: 15px;
  }
  .top-bar{
    margin: -25px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
  }
  .input-form{
    width: 500px;
  }
  .retrieval{
  float: right;
  font-size: 14px;
  color: rgb(0, 120, 255);
  line-height: 40px;
 }
 .rightBtn {
  display: flex;
  justify-content: flex-end;
}

.getDataBtn, .createBtn {
  margin-left: 10px; /* Optional: Add some space between the buttons */
}
.library-table{
      background-color: #fff;
      flex: 1;
      max-width: 100%;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      .table-header{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          padding: 0px 20px;
          margin-top: 20px;
          flex: 1;
          background: #fff;
          // padding: 20px 20px 10px 20px;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            display: flex;
            flex-direction: column;
            ::v-deep .el-table__body-wrapper{
              flex: 1;
            }
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
</style>

 src/views/standardLibrary/SpecificationDetails.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,808 @@
<template>
  <div class="specificationDetail-main">
    <div class="page-header-tips">
      <div class="search-bar">
        <span :style="{marginRight:'12px', color:'#409EFF'}"> é¡¹ç›®åç§°ï¼š{{ detailInfo.projectClassification }}</span>
        <!-- <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />V12</el-tag> -->
      </div>
      <div class="serve-btn">
        <!-- <el-button type="primary" icon="el-icon-plus">编辑</el-button>
        <el-button type="primary" icon="el-icon-plus">删除</el-button> -->
      </div>
    </div>
    <div class="content-main">
      <div class="specificationDetail-bom">
        <div class="bom-item">
          <div class="bom-item-search">
            <el-row>
              <el-col :span="19">
                <el-input
                  v-model="searchData.keyword"
                  placeholder="输入关键字进行过滤"
                />
              </el-col>
              <el-col :span="5">
                <el-button type="primary" size="small" @click="materialFormVisible = true"><i class="el-icon-plus" /></el-button>
              </el-col>
            </el-row>
          </div>
          <el-tree
            ref="tree"
            class="filter-tree"
            :data="materialTree"
            default-expand-all
            :filter-node-method="filterNode"
            :highlight-current="true"
            node-key="id"
            :default-expanded-keys="materialTreeDefault"
            @node-click="materialTreeClick"
          >

            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span>
                <el-popover
                  placement="top"
                  width="30"
                  trigger="click"
                >
                  <div style="text-align: center; margin: 0">
                    <div>
                      <el-button size="mini" type="text" @click="showChangeMaterial(data)">编辑</el-button>
                    </div>
                    <div>
                      <el-button size="mini" type="text" @click="delmaterialFormVisible=true">删除</el-button>
                    </div>
                  </div>
                  <el-button
                    slot="reference"
                    type="text"
                    size="mini"
                  ><i class="el-icon-more" /></el-button>
                </el-popover>
              </span>
            </span>
          </el-tree>
        </div>
        <div class="bom-item">
          <div class="bom-item-search">
            <el-row>
              <el-col :span="19">
                <div class="tips">
                  <span />
                  <div>项目/子项目</div>
                </div>
              </el-col>
              <el-col :span="5">
                <el-button type="primary" size="small" plain @click="projectFormVisible = true"><i class="el-icon-plus" /></el-button>
              </el-col>
            </el-row>
          </div>
          <el-tree
            ref="tree"
            class="filter-tree"
            :data="projectTree"
            default-expand-all
            :highlight-current="true"
            :default-expanded-keys="projectTreeDefault"
            @node-click="projectTreeClick"
          >
            <span slot-scope="{ node,data }" class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span>
                <el-popover
                  placement="top"
                  width="30"
                  trigger="click"
                >
                  <div style="text-align: center; margin: 0">
                    <div>
                      <el-button size="mini" type="text" @click="showChangeProject(data)">编辑</el-button>
                    </div>
                    <div>
                      <el-button size="mini" type="text" @click="delProductFormVisible = true">删除</el-button>
                    </div>
                  </div>
                  <el-button
                    slot="reference"
                    type="text"
                    size="mini"
                  ><i class="el-icon-more" /></el-button>
                </el-popover>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="specificationDetail-card">
        <div class="card-main">
          <div class="tips-main">
            <div class="tips">
              <span />
              <div>项目详情</div>
            </div>
            <!-- <div class="tips-btn">
              <span><i class="el-icon-edit" />操作：</span>
              <el-button type="text">编辑</el-button>
            </div> -->
          </div>
          <div class="message">
            <div class="message-item"><span><i class="el-icon-edit" />试验方法：{{ detailInfo.method }}</span></div>
            <div class="message-item">
              <span><i class="el-icon-edit" />项目分类：{{ detailInfo.projectClassification }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />更新人：{{ detailInfo.userName }}</span></div>
            <div class="message-item">
              <span><i class="el-icon-edit" />更新时间：{{ detailInfo.updateTime }}</span></div>
          </div>
        </div>
        <div class="card-main">
          <div class="tips-main">
            <div class="tips">
              <span />
              <div>测试标准</div>
            </div>
          </div>
          <div class="message">
            <div class="message-item">
              <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />单位：欧姆</el-tag>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />招标人员要求：{{ detailInfo.required }}</span>
            </div>
            <div class="message-item">
              <span><i class="el-icon-edit" />内控值：{{ detailInfo.internal }}</span></div>
          </div>
        </div>
      </div>
    </div>
    <!-- æ·»åŠ ä»¥åŠä¿®æ”¹çš„模态框 -->
    <el-dialog title="添加物料" :visible.sync="materialFormVisible" width="35%">
      <el-form :model="addMaterialForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="物料ID：" label-width="100px">
              <el-input v-model="addMaterialForm.id" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物料名称：" label-width="100px">
              <el-input v-model="addMaterialForm.name" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="批次：" label-width="100px">
              <el-input v-model="addMaterialForm.batch" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存放地：" label-width="100px">
              <el-input v-model="addMaterialForm.location" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="盘号：" label-width="100px">
              <el-input v-model="addMaterialForm.reelNumber" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量：" label-width="100px">
              <el-input v-model="addMaterialForm.num" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <!-- <el-form-item label="关联规格：" label-width="100px">
              <el-input v-model="addMaterialForm.specificationsId" autocomplete="off" />
            </el-form-item> -->
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商：" label-width="100px">
              <el-input v-model="addMaterialForm.supplier" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNewMaterial">ç¡® å®š</el-button>
        <el-button @click="dialogFormVisible = false">取 æ¶ˆ</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加子项目" :visible.sync="projectFormVisible" width="35%">
      <el-form :model="addProjectForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="父项目：" label-width="100px">
              <el-select
                v-model="addProjectForm.father"
                clearable
                filterable
                :allow-create="true"
                placeholder="请选择或输入父项目"
                @blur="productSelect"
              >
                <el-option
                  v-for="item in fatherOpetions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联物料：" label-width="100px">
              <el-select
                v-model="addProjectForm.materialId"
                clearable
                placeholder="请选择或输入父项目"
              >
                <el-option
                  v-for="item in materialTree"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目名称：" label-width="100px">
              <el-input v-model="addProjectForm.name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位：" label-width="100px">
              <el-input v-model="addProjectForm.unit" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招标人要求值：" label-width="100px">
              <el-input v-model="addProjectForm.required" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内控值：" label-width="100px">
              <el-input v-model="addProjectForm.internal" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="试验方法：" label-width="100px">
              <el-input v-model="addProjectForm.method" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addNewProject">ç¡® å®š</el-button>
        <el-button @click="projectFormVisible = false">取 æ¶ˆ</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改物料" :visible.sync="changeMaterialFormVisible" width="35%">
      <el-form :model="changeMaterialForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="物料名称：" label-width="100px">
              <el-input v-model="changeMaterialForm.name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="供应商：" label-width="100px">
              <el-input v-model="changeMaterialForm.supplier" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="批次：" label-width="100px">
              <el-input v-model="changeMaterialForm.batch" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="存放地：" label-width="100px">
              <el-input v-model="changeMaterialForm.location" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="盘号：" label-width="100px">
              <el-input v-model="changeMaterialForm.reelNumber" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量：" label-width="100px">
              <el-input v-model="changeMaterialForm.num" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeMaterial">ç¡® å®š</el-button>
        <el-button @click="changeMaterialFormVisible = false">取 æ¶ˆ</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改子项目" :visible.sync="changeProjectFormVisible" width="35%">
      <el-form :model="changeProjectForm">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="父项目：" label-width="100px">
              <el-select
                v-model="changeProjectForm.father"
                clearable
                filterable
                :allow-create="true"
                placeholder="请选择或输入父项目"
                @blur="productSelect"
              >
                <el-option
                  v-for="item in fatherOpetions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.label"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="项目名称：" label-width="100px">
              <el-input v-model="changeProjectForm.name" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单位：" label-width="100px">
              <el-input v-model="changeProjectForm.unit" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="招标人要求值：" label-width="100px">
              <el-input v-model="changeProjectForm.required" autocomplete="off" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内控值：" label-width="100px">
              <el-input v-model="changeProjectForm.internal" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="试验方法：" label-width="100px">
              <el-input v-model="changeProjectForm.method" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="changeProject">ç¡® å®š</el-button>
        <el-button @click="projectFormVisible = false">取 æ¶ˆ</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="delmaterialFormVisible"
      width="30%"
    >
      <span>确认删除该物料吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteMaterial">ç¡® å®š</el-button>
        <el-button @click="delmaterialFormVisible = false">取 æ¶ˆ</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      :visible.sync="delProductFormVisible"
      width="30%"
    >
      <span>确认删除该子项目吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleleProduct">ç¡® å®š</el-button>
        <el-button @click="delProductFormVisible = false">取 æ¶ˆ</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMaterialList, getProductProductId, addMaterial, addProduct, getMaterialDetail, updateMaterial, updateProduct, deleteMaterial, deleteProduct } from '@/api/standardLibrary'
export default {
  name: 'SpecificationDetail',
  data() {
    return {
      // æŸ¥æ‰¾å¯¹åº”详情id
      specificationsId: '',
      // é»˜è®¤å€¼
      materialDefaultProps: {
        children: 'children',
        label: 'label'
      },
      // ç‰©æ–™tree数据
      materialTree: [],
      // æ ‡å‡†è¯¦æƒ…分类
      projectTree: [],
      searchData: {
        keyword: ''
      },
      // è¯¦æƒ…信息
      detailInfo: {},
      // ç‰©æ–™tree默认选中值
      materialTreeDefault: [],
      projectTreeDefault: [],
      materialFormVisible: false,
      delmaterialFormVisible: false,
      changeMaterialFormVisible: false,
      projectFormVisible: false,
      changeProjectFormVisible: false,
      delProductFormVisible: false,
      addMaterialForm: {},
      changeMaterialForm: {},
      addProjectForm: {},
      changeProjectForm: {},
      fatherOpetions: [],
      materialId: '',
      productId: ''
    }
  },
  // ä¸ºäº†é€‰ä¸­ç¬¬ä¸€å±‚级下的第一个节点
  watch: {
    projectTreeDefault(newVal, oldVal) {
      // console.log(newVal)
      if (newVal) {
        this.$nextTick(() => {
          // console.log(document.querySelector('.el-tree-node__children .el-tree-node__content'))

          document
            .querySelector('.el-tree-node__children .el-tree-node__content')
            ?.click()
        })
      }
    },
    materialTreeDefault(newVal, oldVal) {
      // console.log(newVal)
      if (newVal) {
        this.$nextTick(() => {
          // console.log(document.querySelector('.el-tree-node__content'))
          document
            .querySelector('.el-tree-node__content')
            ?.click()
        })
      }
    }
  },
  created() {
    // console.log(this.$route.params)
    // è¿™é‡ŒåŠ ä¸€ä¸ªæ ¡éªŒï¼Œå¦‚果没有params.id è¿”回标准库页面
    this.specificationsId = this.$route.params.id
    this.addMaterialForm.specificationsId = this.$route.params.id
    this.refreshData()
  },
  methods: {
    productSelect(e) {
      const value = e.target.value // è¾“入框值
      if (value) { // ä½ è¾“入才有这个值 ä¸ä¸ºç©ºï¼Œå¦‚果你下拉框选择的话 è¿™ä¸ªå€¼ä¸ºç©º
        this.addProjectForm.pcode = value
      }
    },
    // åˆ·æ–°æˆ–初次获得数据
    refreshData() {
      this.getMaterialTreeData()
    },
    // tree树的过滤查询
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // èŽ·å–物料tree
    async getMaterialTreeData() {
      const { data } = await getMaterialList({ specificationsId: this.specificationsId })
      // console.log(data)
      this.materialTree = data.map(item => ({ ...item, label: item.name }))
      this.materialTreeDefault = [this.materialTree[0].id]
      console.log(this.materialTree, this.materialTreeDefault)
    },
    // ç‰©æ–™åº“的节点点击
    materialTreeClick(data, node, element) {
      // ç‚¹å‡»ç‰©æ–™èŠ‚点，查询对应的项目tree数据
      console.log(data)
      // å¾—到物料Id
      this.materialId = data.id
    },
    // é¡¹ç›®åº“的节点点击
    async projectTreeClick(data, node, element) {
      // å…ˆåˆ¤æ–­ç‚¹å‡»çš„是父节点还是子节点
      if (('children' in data)) return
      console.log('子项目节点', data)
      this.productId = data.id
      //
      const { data: detailInfo } = await getProductProductId({ productId: data.id })
      // console.log('详情信息', detailInfo)
      this.detailInfo = detailInfo
      this.changeProjectForm = { ...detailInfo }
    },
    // æ–°å¢žç‰©æ–™
    async addNewMaterial() {
      // console.log('产看添加物料参数：', this.addMaterialForm)
      // const res = await addMaterial(this.addMaterialForm)
      await addMaterial(this.addMaterialForm)
      // console.log(res)
      this.$message.success('添加物料成功')
      this.materialFormVisible = false
      this.refreshData()
    },
    // æ–°å¢žé¡¹ç›®
    async addNewProject() {
      console.log('查看添加的子项目参数', this.addProjectForm)
      const res = await addProduct(this.addProjectForm)
      console.log(res)
      this.$message.success('添加新项目成功')
      this.projectFormVisible = false
      this.refreshData()
    },
    // ä¿®æ”¹ç‰©æ–™
    async changeMaterial() {
      console.log('修改物料参数', this.changeMaterialForm)
      const res = await updateMaterial(this.changeMaterialForm)
      this.changeMaterialFormVisible = false
      this.$message.success('修改成功')
      this.refreshData()
      console.log(res)
    },
    // ä¿®æ”¹é¡¹ç›®
    async changeProject() {
      console.log('修改项目参数', this.changeProjectForm)
      const { data } = await updateProduct(this.changeProjectForm)
      console.log(data)
      this.changeMaterialFormVisible = false
      this.$message.success('修改成功')
      this.refreshData()
    },
    // æ˜¾ç¤ºä¿®æ”¹ç‰©æ–™æ¨¡æ€æ¡†åŒæ—¶èŽ·å–需要修改物料信息
    async  showChangeMaterial(data) {
      const { data: materialInfo } = await getMaterialDetail({ materialId: data.id })
      for (const key in materialInfo) {
        // console.log(key, materialInfo[key])
        if (!materialInfo[key]) {
          // console.log(materialInfo[key])
          delete materialInfo[key]
        }
      }
      console.log(materialInfo)
      this.changeMaterialForm = materialInfo
      this.changeMaterialFormVisible = true
    },
    // æ˜¾ç¤ºä¿®æ”¹é¡¹ç›®æ¨¡æ€æ¡†
    showChangeProject(data) {
      // console.log('修改前', this.changeProjectForm)
      this.changeProjectForm.name = data.name
      // console.log('修改后', this.changeMaterialForm)
      this.changeProjectFormVisible = true
    },
    async deleteMaterial() {
      await deleteMaterial({ materialId: this.materialId })
      this.delmaterialFormVisible = false
    },
    async deleleProduct() {
      // console.log('productId', this.productId)
      await deleteProduct({ productId: this.productId })
      this.delProductFormVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
 .specificationDetail-main{
      // é¡µé¢å¤´éƒ¨æ¡ä»¶æœç´¢
  .page-header-tips{
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 0 24px 12px 24px;
     .search-bar{
      .el-radio-button.is-active{
        color: #409EFF !important;
        background: #ecf5ff !important;
        border-color: #b3d8ff !important;
      }
      >span{
        font-size: 20px;
      }
    }
  }
    // é¡µé¢ä¸­å¿ƒå†…容区域
    .content-main{
        display: flex;
        height: 100%;
        min-height: calc(100vh - 88px);
        // .specificationDetail-bom,.specificationDetail-card{
        //     padding: 20px;
        //     background: #fff;
        // }
        .specificationDetail-bom{
            flex: 50%;
            margin-right: 12px;
            display: flex;
                >div:nth-child(1){
                   flex: 43%;

                    margin-right: 12px;
                    padding: 20px;
                    background: #fff;
                }
                >div:nth-child(2){
                    flex: 57%;

                    margin-left: 12px;
                    background: #fff;
                    padding: 20px;

                }
            .bom-item{
                flex: 50%;
                .bom-item-search{
                    margin-bottom: 12px;
                    ::v-deep .el-input{
                        input{
                            height: 33px;
                            line-height: 33px;
                        }
                    }
                    .tips{
                        height: 33px !important;
                        display: flex;
                        height: 24px;
                        align-items: center;
                        font-size: 16px;
                        // margin-bottom: 12px;
                        >span{
                            display: inline-block;
                            margin-right: 10px;
                            width: 4px;
                            height: 16px;
                            background: #0077DB;
                        }
                        >div{
                            height: 100%;
                            line-height: 36px;
                        }
                        .el-button{
                            padding: 0;
                        }
                        }
                }
                .bom-item-search .el-row{
                    // display: flex;
                    .el-col{
                        text-align: right;
                    }
                }
            }
        }
        .specificationDetail-card{
            flex: 50%;
            margin-left: 12px;
            .card-main{
            background: #fff;
            // padding: 10px 20px 10px 20px;
            margin: 0;
            margin-bottom: 12px;
            border-radius: 6px;
            overflow: hidden;
            .tips-main{
            // margin: ;
            padding: 10px 20px 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            // height: ;
            &:hover{
                background: #85bff810;
                .tips-btn{
                display: block;
                left: 0;
                opacity:1;
                }
            }
            .tips-btn{
                height: 100%;
                // display: none;
                position: relative;
                opacity:0;
                left: 100px;
                transition: all 0.3s ease-in-out;
            }
            .tips{
            height: 100%;
            display: flex;
            height: 24px;
            align-items: center;
            font-size: 16px;
            // margin-bottom: 12px;
            >span{
                display: inline-block;
                margin-right: 10px;
                width: 4px;
                height: 16px;
                background: #0077DB;
            }
            >div{
                height: 100%;
                line-height: 26px;
            }
            .el-button{
                padding: 0;
            }
            }
            }

            // åŸºæœ¬ä¿¡æ¯å’Œä¼ä¸šä¿¡æ¯çš„每一个信息项样式
            .message{
            padding: 0px 20px 10px 20px;

            display: flex;
            flex-wrap: wrap;
            border-top: 1px solid #F2F6FC;
            // border-top: 1px solid #F2F6FC;
            >div{
                flex: 50%;
                max-width: 50%;
                padding: 8px;
                color: #606266;
                align-items: center;
                // height: 65px;
                font-size: 12px;
                height: 52px;
                display: flex;
                align-items: center;
                >span{
                color: #303133;
                font-size: 16px;
                //
                >i{
                    margin-right: 8px;
                }
                }
            }
            // >div:nth-child(5){
            //   flex: 60%;
            //   max-width: 60%;
            // }
            }
        }
        }
    }
}

// æ ‘节点的样式
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    &>:nth-child(2){
      display: none;
    }
    &:hover >:nth-child(2){
      display: block;
    }
  }
</style>

 src/views/standardLibrary/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,501 @@
<template>
  <div class="standard-library-main">
    <div class="content-main">
      <div class="library-bom">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <el-button type="text">全部</el-button>
        <el-tree
          ref="tree"
          class="filter-tree"
          :data="standardTree"
          :props="defaultProps"
          node-key="id"
          highlight-current
          default-expand-all
          :filter-node-method="filterNode"
          :render-content="renderContent"
          @node-click="nodeClick"
        />
      </div>
      <div class="library-table">
        <div class="table-header">
          <div class="search-bar">
            <el-form ref="form" :inline="true" :model="searchData">
              <el-form-item>
                <el-input
                  v-model="searchData.keyword"
                  placeholder="请输入人员名称/原材料名称"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search" />
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="filteredTableData">查询</el-button>
                <el-button type="primary" plain @click="resetBtn">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="serve-btn">
            <el-button type="primary" icon="el-icon-plus" @click="addTreeFormVisible = true">新增</el-button>
          </div>
        </div>
        <div class="table-box">
          <el-table
            ref="tableData"
            row-key="id"
            max-height="680"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
            :cell-style="{textAlign: 'left'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'left'}"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
              width="100px"
            >
              <template v-if="scope.row.index+1" slot-scope="scope">
                {{ scope.row.index+1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="father"
              label="名称"
              width="320px"
            >
              <template slot-scope="scope">
                <el-tag size="mini" :type="scope.row.father? '':'success'" :style="{borderRadius: '40%',marginRight: '12px'}">{{ scope.row.father? '01':'02' }}</el-tag> {{ scope.row.father || scope.row.name }}
              </template>
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              width="300px"
            />
            <el-table-column
              prop="required"
              label="标准"
              width="300px"
            />
            <el-table-column
              prop="internal"
              label="内控制"
              width="300px"
            />
          </el-table>
          <!-- å¼¹å‡ºè¡¨å•é¡µ -->
          <div>
            <!--  -->
          </div>
          <div>
            <!-- åˆ†é¡µå™¨ -->
            <el-pagination
              :current-page="pageParams.pageNo"
              :page-sizes="[10, 15, 20, 25]"
              :page-size="pageParams.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageParams.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
    <el-dialog class="addTree" title="添加指标" width="28%" :visible.sync="addTreeFormVisible" @close="closeAddTreeForm">
      <el-form v-model="addTreeForm" label-position="top">
        <el-form-item label="上级">
          <el-cascader
            v-model="addTreeForm.addTypeArr"
            :options="formTypeOptions"
            :props="{ ...defaultProps,checkStrictly: true }"
            clearable
            @change="changeCascader"
          />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<2" label="物料名称">
          <el-input v-model="addTreeForm.materialName" />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<3" label="执行标准">
          <el-input v-model="addTreeForm.standardName" />
        </el-form-item>
        <el-form-item v-show="addTreeForm.addTypeArr.length<4" label="规格型号">
          <el-input v-model="addTreeForm.specificationsName" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subAddTreeForm">ç¡® å®š</el-button>
        <el-button @click="addTreeFormVisible = false">取 æ¶ˆ</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getMaterialList, getProductList, getProductSonList,
  addMaterial, addStandards, addSpecifications
} from '@/api/standardLibrary'
export default {
  data() {
    return {
      addTreeFormVisible: false,
      filterText: '',
      // æ ‡å‡†åº“bom树
      standardTree: [],
      // bom的,默认配置值
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id'
      },
      // æŸ¥è¯¢æ¡ä»¶
      searchData: {
        keyword: ''
      },
      tableData: [
      ],
      oldtableData: [],
      // åˆ†é¡µå‚æ•°
      pageParams: {
        pageNo: 1,
        pageSize: 12,
        total: 0
      },
      tablespecifications: [
      ],
      // é€‰ä¸­çš„节点数据
      selectData: {},
      formTypeOptions: [],
      addTreeForm: {
        addTypeArr: []
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getStandardTree()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // èŽ·å–bom树的标准数据
    async getStandardTree() {
      const { data } = await getMaterialList()
      console.log(data)
      this.standardTree = data.map(item => {
        let name = null
        switch (item.type) {
          case 1:
            name = '原材料'
            break
          case 2:
            name = '半成品'
            break
          case 3:
            name = '成品'
            break
        }
        return {
          ...item, id: item.type, name
        }
      })
      console.log(this.standardTree)
      // formTypeOptions
      // é»˜è®¤ç¬¬ä¸€ä¸ªå››çº§èŠ‚点搜索，新增配置项
      const treeOptions = JSON.parse(JSON.stringify(this.standardTree))
      this.getDefault(treeOptions, 0)
      console.log(treeOptions)
      this.formTypeOptions = treeOptions
      this.$nextTick().then(() => {
        const firstNode = document.querySelector('.el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node .el-tree-node__children .el-tree-node')
        firstNode.click()
        // console.log(firstNode)
      })
    },
    getDefault(arr, index) {
      for (const item of arr) {
        if (item.children && item.children?.length > 0) {
        // æœ‰å­èŠ‚点
          this.getDefault(item.children, index + 1)
          if (index === 2) {
            item.children = null
          }
        }
        // else {
        //   // if ('children' in item) {
        //   //   //
        //   // } else {
        //   //   // console.log(index, item)
        //   // }
        // }
      }
    },
    // ç‚¹å‡»bom树节点方法
    async nodeClick(data, node, element) {
      // console.log('data', data)
      // console.log('children' in data)
      // æ˜¯å­èŠ‚点
      if (node.level === 4) {
        // console.log(data, node)
        // å­˜ä¸‹é€‰ä¸­èŠ‚点
        this.selectData = data
        // eslint-disable-next-line prefer-const
        this.getTableByClick(data)
      }
      if (!('children' in data)) {
        return
      }
    },
    async getTableByClick(data) {
      // eslint-disable-next-line prefer-const
      let { data: { row, total }} = await getProductList({ pageNo: this.pageParams.pageNo, pageSize: this.pageParams.pageSize, specificationsId: data.id })
      // console.log(row)
      this.pageParams.total = total
      row = row.map((item, index) => ({ ...item, index }))
      for (const item of row) {
        if (item.children) {
          const res = await getProductSonList({ fatherName: item.father })
          item.children = res.data
          item.id = item.father
        }
      }
      this.tableData = row
    },
    specificationDetails(row) {
      // è·³è½¬äº§å“è§„格详情页
      this.$router.push(`/standardLibrary/SpecificationDetails/${row.id}`)
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} æ¡`)
      this.pageParams.pageSize = val
      this.getTableByClick(this.selectData)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageParams.pageNo = val
      this.getTableByClick(this.selectData)
    },
    // æŸ¥è¯¢æŒ‰é’®
    filteredTableData() {
      this.oldtableData = this.tableData
      // æ ¹æ®è¾“入的关键字得到过滤后的数据，如果有就把过滤后的数据展示在页面上
      const filteredtabledata = this.tableData.filter(item => {
        return item.name.includes(this.searchData.keyword)
      })
      // console.log('filteredtabledata', filteredtabledata)
      this.tableData = filteredtabledata
    },
    // é‡ç½®æŒ‰é’®
    resetBtn() {
      this.searchData.keyword = ''
      this.tableData = this.oldtableData
    },
    renderContent(h, { node, data, store }) {
      // console.log('data', data)
      // console.log('node', node)
      // åˆ¤æ–­æ˜¯å¦æ˜¯çˆ¶èŠ‚点或文件夹
      const isFolder = ('children') in data
      return (
        <span class='tree-node'>
          {isFolder ? (
            <i
              class={node.expanded ? 'el-icon-folder-opened blue-folder' : 'el-icon-folder blue-folder'}
            ></i>
          ) : (
            <i class='el-icon-document blue-folder'></i>
          )}
          <div class='tree-lable'>[{node.level}]  {data.name}</div>
        </span>
      )
    },
    async subAddTreeForm() {
      this.addTreeFormVisible = false
      console.log(this.addTreeForm.addTypeArr.length)
      let res = null
      try {
        switch (this.addTreeForm.addTypeArr.length) {
          case 1:
            console.log(this.addTreeForm)
            res = await addMaterial({ ...this.addTreeForm, type: this.addTreeForm.addTypeArr.pop() })
            break
          case 2:
            console.log(this.addTreeForm)
            res = await addStandards({ ...this.addTreeForm, materialId: this.addTreeForm.addTypeArr.pop() })
            break
          case 3:
            console.log(this.addTreeForm)
            res = await addSpecifications({ ...this.addTreeForm, standardId: this.addTreeForm.addTypeArr.pop() })
            break
        }
      } catch (error) {
        this.$message.error('添加失败')
      }

      console.log(res)
      this.$message.success('添加成功')
      this.addTreeForm = {}
      this.getStandardTree()
      this.getTableByClick(this.selectData)
    },
    changeCascader(data) {
      console.log(data)
      this.addTreeForm.addTypeArr = data
    },
    closeAddTreeForm() {
      this.addTreeForm = {
        addTypeArr: []
      }
      console.log(this.addTreeForm)
    }
    /** è¡¨æ ¼æŸè¡Œç‚¹å‡»äº‹ä»¶ */
    // handleRowClick(row, column, event) {
    //   // åˆ¤æ–­å½“前行是否有子集，若没有则结束处理
    //   // console.log(row)
    //   if (!row.children) return
    //   this.$refs.tableData.toggleRowExpansion(row)
    // }
  }
}
</script>

<style lang="scss" scoped>

// el-table表格对齐
::v-deep .el-table__row:not([class*="el-table__row--level-"]) {
  td:nth-child(2){
    padding-left: 23px !important;
  }
}
// .dialogform {
//   transform: translate(-50%, -50%);
//   top: 50% !important;
//   left: 50% !important;
//   width: 1000px;
//   height: 800px;
// }
.standard-library-main{
  width: 100%;
  height: 100%;
// é¡µé¢ä¸­å¿ƒå†…容区域
  .content-main{
    display: flex;
    height: 100%;
    min-height: calc(100vh - 88px);
    max-height: calc(100vh - 88px);
    padding: 15px;
    >div{
      padding: 20px;
      background: #fff;
    }
    .library-bom{
      flex: 2;
      // width: 20%;
      // height: 100%;
      max-height: 100%;
      margin-right: 12px;
      overflow-y: scroll;
      .el-tree {
        // margin-top: 12px;
        ::v-deep .el-tree-node__content{
          height: 24px !important;
          font-size: 18px;
          // display: inline-block !important;
          padding: 2px;
          // color: #333;
          .tree-node{
            display: flex;
            align-items: center;
            height: 20px;
          }
          .tree-lable{
            height: 100%;
            line-height: 23px;
            font-size: 12px;
            padding-left: 8px;
          }
          .blue-folder{
            color: rgb(64, 158, 255)
          }
        }
      }
      // .el-tree {
      //   margin-top: 12px;
      //   ::v-deep .el-tree-node__content{
      //     height: 24px !important;
      //     font-size: 14px;
      //     display: inline-block !important;
      //     padding: 2px;
      //     color: #333;
      //   }
      //   ::v-deep .el-tree-node__content:hover{
      //     background: rgba(58,124,253,0.1) ;
      //     // opacity: 0.31;
      //     border-radius: 3px;
      //     color: #333 !important;
      //   }
      //   ::v-deep .el-tree-node:focus>.el-tree-node__content{
      //     background: rgba(58,124,253,0.1) ;
      //     // opacity: 0.31;
      //     border-radius: 3px;
      //     color: #333 !important;
      //   }
      // }
    }
    .library-table{
      // height: 100%;
      flex: 8;
      max-height: 100%;
      // flex: 8;
      margin-left: 12px;
      display: flex;
      flex-direction: column;
      // overflow-y: scroll;
      .table-header{
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          flex: 1;
          background: #fff;
          // padding: 20px 20px 10px 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .el-table {
            // flex: 1;
            // max-height: 680px;
            // overflow-y: scroll;
          }
          >div:nth-child(3){
            // height: 20px;
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
  }
  .addTree{
    .el-form-item{
      margin-bottom: 10px;
    }
    .el-cascader{
      width: 100%;
    }
  }
}
</style>

 src/views/trialManagement/entrust.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,15 @@
<template>
  <div class="entrust">
    å§”托检验
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

 src/views/trialManagement/rawMaterials.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,228 @@
<template>
  <div class="raw-materials">
    <div class="content-main">
      <div class="top-bar">
        <el-form ref="form" v-model="searchData" :inline="true">
          <el-form-item label="材料编码">
            <el-input
              v-model="searchData.keyword"
              class="input-form"
              placeholder="请输入材料编码"
            >
              <i slot="prefix" class="el-input__icon el-icon-search" />
            </el-input>
          </el-form-item>
          <el-form-item label="材料名称">
            <el-input
              v-model="searchData.keyword"
              class="input-form"
              placeholder="请输入材料名称"
            >
              <i slot="prefix" class="el-input__icon el-icon-search" />
            </el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              placeholder="请选择状态"
            />
          </el-form-item>
          <el-form-item label="来料日期">
            <el-select
              placeholder="请选择状态"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button type="primary" plain>重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="raw-materials-table">
        <!-- <div class="table-header">
          <div class="search-bar">
          </div>
        </div> -->
        <div class="table-box">
          <el-table
            ref="rawMaterialsTable"
            :max-height="800"
            :cell-style="{textAlign: 'center'}"
            :header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5',textAlign: 'center'}"
            :data="rawMaterialsTable"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              max-width="55"
            />
            <el-table-column
              type="index"
              label="序号"
              max-width="200"
            />
            <el-table-column
              prop="createTime"
              label="来料日期"
              max-width="200"
            />
            <el-table-column
              prop="userName"
              label="供应商名称"
              max-width="200"
            />
            <el-table-column
              prop="inspectUserId"
              label="材料编码"
              max-width="200"
            />
            <el-table-column
              prop="inspectionStatus"
              label="材料名称"
              max-width="200"
            />
            <el-table-column
              prop="qualifiedState"
              label="规格型号"
              max-width="200"
            />
            <el-table-column
              prop="inspectStartTime"
              label="单位"
              max-width="200"
            />
            <el-table-column
              prop="inspectEndTime"
              label="数量"
              max-width="200"
            />
            <el-table-column
              prop="inspectEndTime"
              label="报检日期"
              max-width="200"
            />
            <el-table-column
              prop="inspectEndTime"
              label="检验人"
              max-width="200"
            />
            <el-table-column
              prop="inspectEndTime"
              label="检验日期"
              max-width="200"
            />
            <el-table-column
              prop="inspectEndTime"
              label="状态"
              max-width="200"
            />
          </el-table>
          <!-- åˆ†é¡µå™¨ -->
          <div>
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[100, 200, 300, 400]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchData: '',
      rawMaterialsTable: []
    }
  }
}
</script>

<style lang="scss" scoped>
.content-main{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 88px);
    padding: 15px;
  }
  .top-bar{
    margin: -25px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 5px 24px 0px 24px;
    .el-form{
        width: 100%;
        display: flex;
        >div{
            flex: 1;
        }
    }
  }
  .input-form{
    // width: 300px;
  }
  .retrieval{
  float: right;
  font-size: 14px;
  color: rgb(0, 120, 255);
  line-height: 40px;
 }
 .rightBtn {
  display: flex;
  justify-content: flex-end;
}

.getDataBtn, .createBtn {
  margin-left: 10px; /* Optional: Add some space between the buttons */
}
.raw-materials-table{
      background-color: #fff;
      flex: 1;
      max-width: 100%;
      margin-left: 0px;
      margin-right: 0px;
      margin-top: 50px;
      display: flex;
      flex-direction: column;
      .table-header{
        padding: 20px;
        display: flex;
        justify-content: space-between;
        .el-form-item{
          margin-bottom: 30px !important;
        }
      }
      .table-box{
          padding: 0px 20px;
          margin-top: 20px;
          flex: 1;
          background: #fff;
          // padding: 20px 20px 10px 20px;
          display: flex;
          flex-direction: column;
          .el-table {
            flex: 1;
            display: flex;
            flex-direction: column;
            ::v-deep .el-table__body-wrapper{
              flex: 1;
            }
          }
          >div:nth-child(2){
            display: flex;
            justify-content: end;
            margin: 10px 0;
          }
      }
    }
</style>

 tests/unit/.eslintrc.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,5 @@
module.exports = {
  env: {
    jest: true
  }
}

 tests/unit/components/Breadcrumb.spec.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,98 @@
import { mount, createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'
import ElementUI from 'element-ui'
import Breadcrumb from '@/components/Breadcrumb/index.vue'

const localVue = createLocalVue()
localVue.use(VueRouter)
localVue.use(ElementUI)

const routes = [
  {
    path: '/',
    name: 'home',
    children: [{
      path: 'dashboard',
      name: 'dashboard'
    }]
  },
  {
    path: '/menu',
    name: 'menu',
    children: [{
      path: 'menu1',
      name: 'menu1',
      meta: { title: 'menu1' },
      children: [{
        path: 'menu1-1',
        name: 'menu1-1',
        meta: { title: 'menu1-1' }
      },
      {
        path: 'menu1-2',
        name: 'menu1-2',
        redirect: 'noredirect',
        meta: { title: 'menu1-2' },
        children: [{
          path: 'menu1-2-1',
          name: 'menu1-2-1',
          meta: { title: 'menu1-2-1' }
        },
        {
          path: 'menu1-2-2',
          name: 'menu1-2-2'
        }]
      }]
    }]
  }]

const router = new VueRouter({
  routes
})

describe('Breadcrumb.vue', () => {
  const wrapper = mount(Breadcrumb, {
    localVue,
    router
  })
  it('dashboard', () => {
    router.push('/dashboard')
    const len = wrapper.findAll('.el-breadcrumb__inner').length
    expect(len).toBe(1)
  })
  it('normal route', () => {
    router.push('/menu/menu1')
    const len = wrapper.findAll('.el-breadcrumb__inner').length
    expect(len).toBe(2)
  })
  it('nested route', () => {
    router.push('/menu/menu1/menu1-2/menu1-2-1')
    const len = wrapper.findAll('.el-breadcrumb__inner').length
    expect(len).toBe(4)
  })
  it('no meta.title', () => {
    router.push('/menu/menu1/menu1-2/menu1-2-2')
    const len = wrapper.findAll('.el-breadcrumb__inner').length
    expect(len).toBe(3)
  })
  // it('click link', () => {
  //   router.push('/menu/menu1/menu1-2/menu1-2-2')
  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
  //   const second = breadcrumbArray.at(1)
  //   console.log(breadcrumbArray)
  //   const href = second.find('a').attributes().href
  //   expect(href).toBe('#/menu/menu1')
  // })
  // it('noRedirect', () => {
  //   router.push('/menu/menu1/menu1-2/menu1-2-1')
  //   const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
  //   const redirectBreadcrumb = breadcrumbArray.at(2)
  //   expect(redirectBreadcrumb.contains('a')).toBe(false)
  // })
  it('last breadcrumb', () => {
    router.push('/menu/menu1/menu1-2/menu1-2-1')
    const breadcrumbArray = wrapper.findAll('.el-breadcrumb__inner')
    const redirectBreadcrumb = breadcrumbArray.at(3)
    expect(redirectBreadcrumb.contains('a')).toBe(false)
  })
})

 tests/unit/components/Hamburger.spec.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,18 @@
import { shallowMount } from '@vue/test-utils'
import Hamburger from '@/components/Hamburger/index.vue'
describe('Hamburger.vue', () => {
  it('toggle click', () => {
    const wrapper = shallowMount(Hamburger)
    const mockFn = jest.fn()
    wrapper.vm.$on('toggleClick', mockFn)
    wrapper.find('.hamburger').trigger('click')
    expect(mockFn).toBeCalled()
  })
  it('prop isActive', () => {
    const wrapper = shallowMount(Hamburger)
    wrapper.setProps({ isActive: true })
    expect(wrapper.contains('.is-active')).toBe(true)
    wrapper.setProps({ isActive: false })
    expect(wrapper.contains('.is-active')).toBe(false)
  })
})

 tests/unit/components/SvgIcon.spec.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,22 @@
import { shallowMount } from '@vue/test-utils'
import SvgIcon from '@/components/SvgIcon/index.vue'
describe('SvgIcon.vue', () => {
  it('iconClass', () => {
    const wrapper = shallowMount(SvgIcon, {
      propsData: {
        iconClass: 'test'
      }
    })
    expect(wrapper.find('use').attributes().href).toBe('#icon-test')
  })
  it('className', () => {
    const wrapper = shallowMount(SvgIcon, {
      propsData: {
        iconClass: 'test'
      }
    })
    expect(wrapper.classes().length).toBe(1)
    wrapper.setProps({ className: 'test' })
    expect(wrapper.classes().includes('test')).toBe(true)
  })
})

 tests/unit/utils/formatTime.spec.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,30 @@
import { formatTime } from '@/utils/index.js'

describe('Utils:formatTime', () => {
  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
  const retrofit = 5 * 1000

  it('ten digits timestamp', () => {
    expect(formatTime((d / 1000).toFixed(0))).toBe('7月13日17时54分')
  })
  it('test now', () => {
    expect(formatTime(+new Date() - 1)).toBe('刚刚')
  })
  it('less two minute', () => {
    expect(formatTime(+new Date() - 60 * 2 * 1000 + retrofit)).toBe('2分钟前')
  })
  it('less two hour', () => {
    expect(formatTime(+new Date() - 60 * 60 * 2 * 1000 + retrofit)).toBe('2小时前')
  })
  it('less one day', () => {
    expect(formatTime(+new Date() - 60 * 60 * 24 * 1 * 1000)).toBe('1天前')
  })
  it('more than one day', () => {
    expect(formatTime(d)).toBe('7月13日17时54分')
  })
  it('format', () => {
    expect(formatTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
    expect(formatTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
    expect(formatTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
  })
})

 tests/unit/utils/param2Obj.spec.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,14 @@
import { param2Obj } from '@/utils/index.js'
describe('Utils:param2Obj', () => {
  const url = 'https://github.com/PanJiaChen/vue-element-admin?name=bill&age=29&sex=1&field=dGVzdA==&key=%E6%B5%8B%E8%AF%95'

  it('param2Obj test', () => {
    expect(param2Obj(url)).toEqual({
      name: 'bill',
      age: '29',
      sex: '1',
      field: window.btoa('test'),
      key: '测试'
    })
  })
})

 tests/unit/utils/parseTime.spec.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,35 @@
import { parseTime } from '@/utils/index.js'

describe('Utils:parseTime', () => {
  const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
  it('timestamp', () => {
    expect(parseTime(d)).toBe('2018-07-13 17:54:01')
  })
  it('timestamp string', () => {
    expect(parseTime((d + ''))).toBe('2018-07-13 17:54:01')
  })
  it('ten digits timestamp', () => {
    expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01')
  })
  it('new Date', () => {
    expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01')
  })
  it('format', () => {
    expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
    expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
    expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
  })
  it('get the day of the week', () => {
    expect(parseTime(d, '{a}')).toBe('五') // æ˜ŸæœŸäº”
  })
  it('get the day of the week', () => {
    expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('日') // æ˜ŸæœŸæ—¥
  })
  it('empty argument', () => {
    expect(parseTime()).toBeNull()
  })

  it('null', () => {
    expect(parseTime(null)).toBeNull()
  })
})

 tests/unit/utils/validate.spec.js

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,17 @@
import { validUsername, isExternal } from '@/utils/validate.js'

describe('Utils:validate', () => {
  it('validUsername', () => {
    expect(validUsername('admin')).toBe(true)
    expect(validUsername('editor')).toBe(true)
    expect(validUsername('xxxx')).toBe(false)
  })
  it('isExternal', () => {
    expect(isExternal('https://github.com/PanJiaChen/vue-element-admin')).toBe(true)
    expect(isExternal('http://github.com/PanJiaChen/vue-element-admin')).toBe(true)
    expect(isExternal('github.com/PanJiaChen/vue-element-admin')).toBe(false)
    expect(isExternal('/dashboard')).toBe(false)
    expect(isExternal('./dashboard')).toBe(false)
    expect(isExternal('dashboard')).toBe(false)
  })
})