1

.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,39 @@
+# just a flag
+ENV = 'development'
+
+# base api
+# VUE_APP_BASE_API = '/dev-api'
+# VUE_APP_BASE_API = 'http://192.168.1.84:8081/'
+# VUE_APP_BASE_API = 'http://localhost:8081/'
+# VUE_APP_BASE_API = 'http://139.196.88.215:8082/'
+# VUE_APP_BASE_API = 'http://139.196.88.215:8000/'
+# VUE_APP_BASE_API = 'https://kptyun.cn:8084/'
+# VUE_APP_BASE_API = 'http://139.196.88.215:8083/'
+
+
+# 正式线
+# VUE_APP_BASE_API = 'https://kptyun.cn/'
+
+
+# 测试线
+
+ 
+# VUE_APP_BASE_API = 'http://lhpc.kptyun.com/'
+
+ 
+VUE_APP_BASE_API = 'http://210.16.189.72:8099/'
+
+# VUE_APP_BASE_API = 'http://192.168.1.57:8082/'
+
+ 
+ 
+ 
+
+# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
+# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
+# It only does one thing by converting all import() to require().
+# This configuration can significantly increase the speed of hot updates,
+# when you have a large number of pages.
+# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
+
+VUE_CLI_BABEL_TRANSPILE_MODULES = true

.env.production

@@ -0,0 +1,17 @@
+# just a flag
+ENV = 'production'
+
+# base api
+
+
+VUE_APP_BASE_API = 'https://kptyun.cn/'
+
+# VUE_APP_BASE_API = 'http://localhost:8084/'
+
+
+
+
+# VUE_APP_BASE_API = 'http://210.16.189.72:8099/'
+  
+
+# VUE_APP_BASE_API = 'http://localhost:8082/'

.env.staging

@@ -0,0 +1,8 @@
+NODE_ENV = production
+
+# just a flag
+ENV = 'staging'
+
+# base api
+VUE_APP_BASE_API = '/stage-api'
+

.eslintignore

@@ -0,0 +1,4 @@
+build/*.js
+src/assets
+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.

README-zh.md

@@ -0,0 +1,96 @@
+# vue-admin-template
+
+> 这是一个极简的 vue admin 管理后台。它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
+
+[线上地址](http://panjiachen.github.io/vue-admin-template)
+
+[国内访问](https://panjiachen.gitee.io/vue-admin-template)
+
+目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-admin-template/tree/tag/3.11.0)，它不依赖 `vue-cli`。
+
+## Extra
+
+如果你想要根据用户角色来动态生成侧边栏和 router，你可以使用该分支[permission-control](https://github.com/PanJiaChen/vue-admin-template/tree/permission-control)
+
+## 相关项目
+
+[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
+
+[electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
+
+[vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template)
+
+写了一个系列的教程配套文章，如何从零构建后一个完整的后台项目:
+
+- [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2)
+- [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac)
+- [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35)
+- [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板,专门针对本项目的文章,算作是一篇文档)](https://juejin.im/post/595b4d776fb9a06bbe7dba56)
+- [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836)
+
+## Build Setup
+
+```bash
+# 克隆项目
+git clone https://github.com/PanJiaChen/vue-admin-template.git
+
+# 进入项目目录
+cd vue-admin-template
+
+# 安装依赖
+npm install
+
+# 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
+npm install --registry=https://registry.npm.taobao.org
+
+# 启动服务
+npm run dev
+```
+
+浏览器访问 [http://localhost:9528](http://localhost:9528)
+
+## 发布
+
+```bash
+# 构建测试环境
+npm run build:stage
+
+# 构建生产环境
+npm run build:prod
+```
+
+## 其它
+
+```bash
+# 预览发布环境效果
+npm run preview
+
+# 预览发布环境效果 + 静态资源分析
+npm run preview -- --report
+
+# 代码格式检查
+npm run lint
+
+# 代码格式检查并自动修复
+npm run lint -- --fix
+```
+
+更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
+
+## Demo
+
+![demo](https://github.com/PanJiaChen/PanJiaChen.github.io/blob/master/images/demo.gif)
+
+## Browsers support
+
+Modern browsers and Internet Explorer 10+.
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
+| --------- | --------- | --------- | --------- |
+| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
+
+## License
+
+[MIT](https://github.com/PanJiaChen/vue-admin-template/blob/master/LICENSE) license.
+
+Copyright (c) 2017-present PanJiaChen

babel.config.js

@@ -0,0 +1,15 @@
+
+const proPlugins = []
+// 如果当前是生产环境，则使用去掉 console 的插件
+if (  process.env.NODE_ENV === 'production') {
+  proPlugins.push('transform-remove-console')
+}
+module.exports = {
+  presets: [
+    '@vue/app'
+  ],
+  plugins: [...proPlugins]
+}
+
+
+

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

debug.log

@@ -0,0 +1,52 @@
+[0317/174929.466:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0320/173441.003:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0324/171832.361:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0326/114532.451:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0326/174029.035:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0330/102225.637:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0330/160524.844:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0331/180453.024:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0401/162157.520:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0402/165808.951:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0403/112343.031:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0403/134118.452:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0407/113651.340:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0407/180252.092:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0408/150218.094:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0410/104721.642:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0410/155916.867:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0413/145754.944:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0414/141831.460:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0414/154438.334:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0415/153518.201:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0416/112338.997:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0416/161655.335:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0417/141409.629:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0422/155012.381:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0428/175551.742:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0507/161117.954:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0509/181813.959:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0511/155936.922:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0515/155928.607:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0520/145310.286:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0601/113705.004:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0605/140648.507:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0616/160221.674:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0619/111927.316:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0622/133635.922:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0623/161920.161:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0628/142402.809:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0628/171924.492:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0710/131804.495:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0728/124804.485:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0817/134320.441:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0819/104154.277:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0823/120710.795:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0824/180735.938:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0826/172528.094:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0831/151716.494:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0901/170522.063:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0902/160013.710:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0912/165925.942:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0918/164433.625:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)
+[0919/165440.003:ERROR:http_transport_win.cc(276)] WinHttpSendRequest: 操作成功完成。 (0x0)

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

mock/article.js

@@ -0,0 +1,116 @@
+import Mock from 'mockjs'
+
+const List = []
+const count = 100
+
+const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
+const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
+
+for (let i = 0; i < count; i++) {
+  List.push(Mock.mock({
+    id: '@increment',
+    timestamp: +Mock.Random.date('T'),
+    author: '@first',
+    reviewer: '@first',
+    title: '@title(5, 10)',
+    content_short: 'mock data',
+    content: baseContent,
+    forecast: '@float(0, 100, 2, 2)',
+    importance: '@integer(1, 3)',
+    'type|1': ['CN', 'US', 'JP', 'EU'],
+    'status|1': ['发布', '草稿', '已删'],
+    display_time: '@datetime',
+    comment_disabled: true,
+    pageviews: '@integer(300, 5000)',
+    image_uri,
+    platforms: ['a-platform']
+  }))
+}
+
+export default [
+  {
+    url: '/article/list',
+    type: 'get',
+    response: config => {
+      const { importance, type, title, page = 1, limit = 20, sort } = config.query
+
+      let mockList = List.filter(item => {
+        if (importance && item.importance !== +importance) return false
+        if (type && item.type !== type) return false
+        if (title && item.title.indexOf(title) < 0) return false
+        return true
+      })
+
+      if (sort === '-id') {
+        mockList = mockList.reverse()
+      }
+
+      const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
+
+      return {
+        code: 200,
+        data: {
+          total: mockList.length,
+          items: pageList
+        }
+      }
+    }
+  },
+
+  {
+    url: '/article/detail',
+    type: 'get',
+    response: config => {
+      const { id } = config.query
+      for (const article of List) {
+        if (article.id === +id) {
+          return {
+            code: 200,
+            data: article
+          }
+        }
+      }
+    }
+  },
+
+  {
+    url: '/article/pv',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: {
+          pvData: [
+            { key: 'PC', pv: 1024 },
+            { key: 'mobile', pv: 1024 },
+            { key: 'ios', pv: 1024 },
+            { key: 'android', pv: 1024 }
+          ]
+        }
+      }
+    }
+  },
+
+  {
+    url: '/article/create',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 200,
+        data: 'success'
+      }
+    }
+  },
+
+  {
+    url: '/article/update',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 200,
+        data: 'success'
+      }
+    }
+  }
+]
+

mock/index.js

@@ -0,0 +1,69 @@
+import Mock from 'mockjs'
+import { param2Obj } from '../src/utils'
+
+import user from './user'
+import table from './table'
+import menuAPI from './menu'
+import article from './article'
+const mocks = [
+  ...user,
+  ...table,
+  ...menuAPI,
+  ...article
+]
+
+mockXHR// 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).
+export 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))
+  }
+}
+
+// for mock server
+const responseFake = (url, type, respond) => {
+  return {
+    url: new RegExp(`/mock${url}`),
+    type: type || 'get',
+    response(req, res) {
+      res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
+    }
+  }
+}
+
+export default mocks.map(route => {
+  return responseFake(route.url, route.type, route.response)
+})

mock/menu.js

@@ -0,0 +1,112 @@
+const menuData =
+[
+  {
+    'id': 1,
+    'path': '/console',
+    'redirect': 'noredirect',
+    'component': 'Layout',
+    'name': 'console',
+    'title': '系统管理',
+    'icon': 'form',
+    'parentId': -1,
+    'children': [
+      {
+        'children': [],
+        'id': 7,
+        'name': 'user',
+        'component': 'console/user/index',
+        'title': '用户管理',
+        'icon': 'user',
+        'parentId': 1,
+        'path': 'user'
+      },
+      {
+        'children': [],
+        'name': 'menu',
+        'component': 'console/menu/index',
+        'id': 8,
+        'title': '菜单管理',
+        'icon': 'table',
+        'parentId': 1,
+        'path': 'menu'
+      },
+      {
+        'children': [],
+        'name': 'role',
+        'component': 'console/role/index',
+        'id': 9,
+        'title': '角色管理',
+        'icon': 'table',
+        'parentId': 1,
+        'path': 'role'
+      },
+      {
+        'children': [],
+        'name': 'dict',
+        'component': 'console/dict/index',
+        'id': 10,
+        'title': '字典管理',
+        'icon': 'table',
+        'parentId': 1,
+        'path': 'dict'
+      },
+      {
+        'children': [],
+        'name': 'dept',
+        'component': 'console/dept/index',
+        'id': 11,
+        'title': '部门管理',
+        'icon': 'table',
+        'parentId': 1,
+        'path': 'dept'
+      }
+    ]
+  },
+  {
+    'id': 22,
+    'name': 'myiframe',
+    'component': 'Iframe',
+    'redirect': 'noredirect',
+    'title': '第三方系统',
+    'icon': 'link',
+    'path': '/myiframe',
+    'parentId': -1,
+    'children': [
+      {
+        'id': 23,
+        'children': [],
+        'name': 'wechat',
+        'component': 'Iframe',
+        'title': '微信',
+        'icon': 'wechat',
+        'parentId': 22,
+        'path': 'wechatUrl?src=https://pc.weixin.qq.com/&name=微信'
+      },
+      {
+        'id': 24,
+        'children': [],
+        'name': 'qq',
+        'component': 'Iframe',
+        'title': '腾讯QQ',
+        'icon': 'qq',
+        'parentId': 22,
+        'path': 'qqUrl?src=https://im.qq.com/index.shtml&name=腾讯QQ'
+      }
+    ]
+  }
+
+]
+
+export default [
+  {
+    url: '/authdata/rolemenus',
+    type: 'get',
+    response: _ => {
+      return {
+        code: 200,
+        data: menuData
+        // console.log(menuData)
+      }
+    }
+  }
+]

mock/mock-server.js

@@ -0,0 +1,68 @@
+const chokidar = require('chokidar')
+const bodyParser = require('body-parser')
+const chalk = require('chalk')
+const path = require('path')
+
+const mockDir = path.join(process.cwd(), 'mock')
+
+function registerRoutes(app) {
+  let mockLastIndex
+  const { default: mocks } = require('./index.js')
+  for (const mock of mocks) {
+    app[mock.type](mock.url, mock.response)
+    mockLastIndex = app._router.stack.length
+  }
+  const mockRoutesLength = Object.keys(mocks).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)]
+    }
+  })
+}
+
+module.exports = app => {
+  // es6 polyfill
+  require('@babel/register')
+
+  // 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 @@
+import Mock from '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)'
+  }]
+})
+
+export default [
+  {
+    url: '/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,86 @@
+
+const tokens = {
+  admin: {
+    token: 'admin-token'
+  },
+  editor: {
+    token: 'editor-token'
+  }
+}
+
+const users = {
+  'admin-token': {
+    role: ['admin'],
+    introduction: 'I am a super administrator',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Super Admin'
+  },
+  'editor-token': {
+    role: ['editor'],
+    introduction: 'I am an editor',
+    avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
+    name: 'Normal Editor'
+  }
+}
+
+export default [
+  // user login
+  {
+    url: '/auth',
+    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: 200,
+        data: token
+      }
+    }
+  },
+
+  // get user info
+  {
+    url: '/authdata/userinfo\.*',
+    type: 'get',
+    response: config => {
+      console.log(config)
+      let { token } = config.query
+      token = 'admin-token'
+      const info = users[token]
+
+      // mock error
+      if (!info) {
+        return {
+          code: 50008,
+          message: 'Login failed, unable to get user details.'
+        }
+      }
+
+      return {
+        code: 200,
+        data: info
+      }
+    }
+  },
+
+  // user logout
+  {
+    url: '/authdata/logout',
+    type: 'post',
+    response: _ => {
+      return {
+        code: 200,
+        data: 'success'
+      }
+    }
+  }
+]

package.json

@@ -0,0 +1,89 @@
+{
+  "name": "vue-admin-template",
+  "version": "4.2.1",
+  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
+  "author": "Pan <panfree23@gmail.com>",
+  "license": "MIT",
+  "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",
+    "lint": "eslint --ext .js,.vue src",
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
+    "test:ci": "npm run lint && npm run test:unit",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
+  },
+  "dependencies": {
+    "@sentry/browser": "^5.15.5",
+    "@sentry/integrations": "^5.15.5",
+    "@wangeditor/editor": "^5.1.14",
+    "@wangeditor/editor-for-vue": "^1.0.2",
+    "axios": "0.18.1",
+    "babel-plugin-transform-remove-console": "^6.9.4",
+    "core-js": "^3.6.4",
+    "driver.js": "^0.9.6",
+    "echarts": "^4.6.0",
+    "element-china-area-data": "^6.1.0",
+    "element-ui": "^2.13.0",
+    "file-saver": "^2.0.1",
+    "fuse.js": "3.4.4",
+    "js-cookie": "^2.2.0",
+    "js-table2excel": "^1.0.3",
+    "mammoth": "^1.6.0",
+    "moment": "^2.24.0",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "path-to-regexp": "2.4.0",
+    "print-js": "^1.6.0",
+    "sass-embedded": "^1.83.1",
+    "screenfull": "4.2.0",
+    "sortable.js": "^0.3.0",
+    "v-charts": "^1.19.0",
+    "vue": "^2.6.11",
+    "vue-count-to": "1.0.13",
+    "vue-grid-layout": "^2.3.4",
+    "vue-i18n": "^8.17.5",
+    "vue-router": "^3.1.6",
+    "vuedraggable": "^2.21.0",
+    "vuex": "^3.1.1",
+    "xlsx": "^0.15.5"
+  },
+  "devDependencies": {
+    "@babel/core": "7.0.0",
+    "@babel/register": "7.0.0",
+    "@vue/cli-plugin-babel": "^4.2.3",
+    "@vue/cli-plugin-eslint": "^4.2.3",
+    "@vue/cli-plugin-unit-jest": "^3.8.0",
+    "@vue/cli-service": "^4.2.3",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "acorn": "^6.0.0",
+    "autoprefixer": "^9.5.1",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "^10.0.1",
+    "babel-jest": "23.6.0",
+    "chalk": "2.4.2",
+    "connect": "3.6.6",
+    "eslint": "^6.8.0",
+    "eslint-plugin-vue": "^6.2.1",
+    "html-webpack-plugin": "3.2.0",
+    "mockjs": "1.0.1-beta3",
+    "node-sass": "^4.14.1",
+    "runjs": "^4.3.2",
+    "sass-loader": "^7.3.1",
+    "script-ext-html-webpack-plugin": "2.1.3",
+    "script-loader": "^0.7.2",
+    "serve-static": "^1.13.2",
+    "svg-sprite-loader": "^4.1.6",
+    "svgo": "1.2.2",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}

postcss.config.js

@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  'plugins': {
+    // to edit target browsers: use "browserslist" field in package.json
+    'autoprefixer': {}
+  }
+}

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,171 @@
+<template>
+  <div id="app">
+    <router-view v-if="isRouterAlive " />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App',
+  provide() {
+    return {
+      reload: this.reload
+    }
+  },
+  data() {
+    return {
+      isRouterAlive: true
+    }
+  },
+  methods: {
+    reload() {
+      this.isRouterAlive = false
+      this.$nextTick(() => {
+        this.isRouterAlive = true
+      })
+    }
+  }
+}
+</script>
+<style lang="scss">
+
+
+.operation {  margin-top: 10px; }
+
+.table-fixed {
+  /deep/ .el-table__fixed-right {
+    height: 100% !important; //设置高优先，以覆盖内联样式
+  }
+
+  /deep/ .el-table__fixed {
+    height: 100% !important; //设置高优先，以覆盖内联样式
+  }
+}
+.el-tree-node:focus > .el-tree-node__content {
+  background-color: #82848a !important;
+  color: #fff;
+}
+.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+    background-color: #82848a;
+    color: #fff;
+}
+.filter-container .filter-item{
+  margin-right: 3px;
+}
+.fixed-width .el-button--mini{
+  margin-right: 3px;
+}
+.el-date-editor.el-input{
+  margin-right: 3px;
+}
+.dialog-footer{
+  right:30px;position:absolute;bottom:30px
+}
+.el-autocomplete-suggestion li{
+  padding:0 3px!important;
+}
+.filter-item .el-input__inner{
+  width: 100%;
+}
+body .el-table th.gutter {
+    display: table-cell !important
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+input[type="number"]{
+  -moz-appearance: textfield;
+}
+.search .filter-item{
+  margin-right: 5px;
+}
+// 开始日期结束日期
+.inputDatetime .el-range-separator{ padding: 0; margin: 0 10px; }
+
+// 新增/资料库/初始化库存/新增入库单
+// .success{ background: #409EFF; border-color: #409EFF; color: #fff;min-width:100px;height: 40px;padding: 12px 20px; }
+// .success:focus, .success:hover{ color: #fff; border-color: #66B1FF; background-color: #66B1FF; min-width:100px;height: 40px;padding: 12px 20px;}
+
+
+
+// 删除
+.danger{min-width:100px;height: 40px;background: #FF4949; border-color: #FF4949; color: #fff;}
+.danger:focus, .danger:hover{min-width:100px;height: 40px;background: #F78989; border-color: #F78989; color: #fff;}
+
+// 行内删除
+.smallDanger{ color: #FF4949; }
+.smallDanger:focus, .smallDanger:hover{ color: #FF4949; }
+
+// 查询/重置
+// .successBorder{background: #409EFF; border-color: #409EFF; color: #fff;}
+// .successBorder:focus, .successBorder:hover{background:#66B1FF; border-color: #66B1FF; color: #fff;}
+
+// 导出
+.export{background: #F4F4F5; border-color: #A6A9AD; color: #666666;min-width:100px;height: 40px;}
+.export:focus, .export:hover{ color: #666666; border-color: #A6A9AD; background-color: #F7F7F8; min-width:100px;height: 40px}
+
+// 导入
+.import{background: #F4F4F5; border-color: #A6A9AD; color: #666666;min-width:100px;height: 40px;}
+.import:focus, .import:hover{ color: #666666; border-color: #A6A9AD; background-color: #F7F7F8; min-width:100px;height: 40px}
+// 恢复默认
+.warning{background: #F7BA2A; border-color:#F7BA2A; color: #fff;min-width:100px;height: 40px;}
+.warning:focus, .warning:hover{ color: #fff; border-color: #F7BA2A; background-color: #F7BA2A; min-width:100px;height: 40px}
+
+
+// 小编辑/小保存/下拉搜索按钮/拆分预混料
+.miniSuccess{ background: #67c23a; border-color: #67c23a; color: #fff;padding: 7px 10px;font-size:14px;min-width:60px;}
+.miniSuccess:focus, .miniSuccess:hover{color: #fff; border-color: #85ce61; background-color: #85ce61;padding: 7px 10px;font-size:14px;min-width:60px;}
+// 查看
+.miniPrimary{ background: #409EFF; border-color: #409EFF; color: #fff;padding: 7px 10px;font-size:14px;min-width:60px; }
+.miniPrimary:focus, .miniPrimary:hover{color: #fff; border-color: #66B1FF; background-color: #66B1FF;padding: 7px 10px;font-size:14px;min-width:60px;}
+// 小删除
+.miniDanger{background: #FF4949; border-color: #FF4949; color: #fff;padding: 7px 10px;font-size:14px;min-width:60px;}
+.miniDanger:focus, .miniDanger:hover{background: #F78989; border-color: #F78989; color: #fff;padding: 7px 10px;font-size:14px;min-width:60px;}
+// 小取消
+.minCancel{background: #FFFFFF; border-color: #CCCCCC; color: #666666;padding: 7px 10px;font-size:14px;min-width:60px;}
+.minCancel:focus, .minCancel:hover{ color: #666666; border-color: #CCCCCC; background-color: #FFFFFF; padding: 7px 10px;font-size:14px;min-width:60px;}
+
+// 时间快捷键左右
+.elIconArrowLeft{margin-right: -5px;padding: 12px 12px;}
+.elIconArrowRight{margin-right: 5px;padding: 12px 12px;}
+
+
+//=============样式更改============
+
+
+ //.search-bx{position:fixed;top:84px;z-index:999;background:#fff;width: 86%;}
+
+
+ .search-bx{}
+
+// 取消/关闭
+.cancelClose{background: #FFFFFF; border-color: #CCCCCC; color: #666666;min-width:50px;height: 38px;}
+.cancelClose:focus, .cancelClose:hover{ color: #666666; border-color: #CCCCCC; background-color: #FFFFFF; min-width:50px;height: 38px}
+
+
+
+//=============客户信息=============
+//客户信息卡片
+.cust-card-row{padding-bottom: 20px;}
+.cust-card-tt{text-align: right;float:right;font-weight: bold}
+
+
+.cust-line-bx{position:relative}
+.cust-ex-item{display:inline-block;width:24%;margin-bottom:10px;}
+.cust-ex-tt{width:200px;text-align:right;font-weight: bold}
+.cust-ex-ct{margin-bottom:10px}
+
+.cust-rest{display: inline-block;width:33%;color:#FF4949}
+
+
+
+
+ .el-button--small { padding: 6px 10px; }
+
+
+
+
+
+</style>

src/api/article.js

@@ -0,0 +1,41 @@
+import request from '@/utils/request'
+
+export function fetchList(query) {
+  return request({
+    url: '/article/list',
+    method: 'post',
+    params: query
+  })
+}
+
+export function fetchArticle(id) {
+  return request({
+    url: '/article/detail',
+    method: 'get',
+    params: { id }
+  })
+}
+
+export function fetchPv(pv) {
+  return request({
+    url: '/article/pv',
+    method: 'get',
+    params: { pv }
+  })
+}
+
+export function createArticle(data) {
+  return request({
+    url: '/article/create',
+    method: 'post',
+    data
+  })
+}
+
+export function updateArticle(data) {
+  return request({
+    url: '/article/update',
+    method: 'post',
+    data
+  })
+}

src/api/chart.js

@@ -0,0 +1,37 @@
+import fetch from '@/utils/fetch'
+
+export function createChart(data) {
+  return fetch({
+    url: '/chart/create',
+    method: 'POST',
+    data
+  })
+}
+
+export function updateChart(data) {
+  return fetch({
+    url: '/chart/update',
+    method: 'POST',
+    data
+  })
+}
+
+export function getChartById(id) {
+  return fetch({
+    url: `/chart/${id}`
+  })
+}
+
+export function deleteChart(data) {
+  return fetch({
+    url: `/chart/delete`,
+    method: 'POST',
+    data
+  })
+}
+
+export function chartList() {
+  return fetch({
+    url: `/chart/list`
+  })
+}

src/api/common.js

@@ -0,0 +1,290 @@
+import request from '@/utils/request'
+import parseTime from '@/utils/index.js'
+
+export function postJson(url,data) {
+  return request({
+    url: process.env.VUE_APP_BASE_API + url,
+    method: 'post',
+    timeout: 600000,
+    data
+  })
+}
+
+export function postJson2(url,data) {
+  return request({
+    url: url,
+    method: 'post',
+    timeout: 600000,
+    data
+  })
+}
+
+export function downloadfileCRM(data) {
+  return request({
+    url: '/downloadfileCRM',
+    responseType:"blob",
+    method: 'post',
+    data
+  })
+}
+
+
+ 
+
+
+
+export function wxpush(data) {
+  return request({
+    url: '/authdata/wxpush',
+    method: 'post',
+    data
+  })
+}
+
+export function GetDataByName(data) {
+  return request({
+    url: '/authdata/GetDataByName',
+    method: 'post',
+    data
+  })
+}
+
+export function ExeSqlJiade(data) {
+  return request({
+    url: '/authdata/exesql',
+    method: 'post',
+    data
+  })
+}
+export function dashboardListJiade(data) {
+  return request({
+    url: '/authdata/Dashboards',
+    method: 'post',
+    data
+  })
+}
+
+export function updateDashboardJiade(data) {
+  return request({
+    url: '/authdata/Updatedashboard',
+    method: 'post',
+    data
+  })
+}
+
+export function GetReportform(data) {
+  return request({
+    url: '/authdata/GetReportform',
+    method: 'post',
+    data
+  })
+}
+export function requestbyname(data, requestname) {
+  return request({
+    url: '/authdata/' + requestname,
+    method: 'post',
+    data
+  })
+}
+
+export function GetDataByNameXlsx(data) {
+  return request({
+    url: '/authdata/GetDataByName',
+    method: 'post',
+    data,
+    responseType: 'blob'
+  })
+}
+
+export function GetDataByNames(data) {
+  return request({
+    url: '/authdata/GetDataByNames',
+    method: 'post',
+    data
+  })
+}
+
+export function PostDataByName(data) {
+  return request({
+    url: '/authdata/PostDataByName',
+    method: 'post',
+    data
+  })
+}
+export function GetUpkeepPlan(data) {
+  return request({
+    url: '/authdata/GetUpkeepPlan',
+    method: 'post',
+    data
+  })
+}
+export function GetAccount(data) {
+  return request({
+    url: '/authdata/GetAccount',
+    method: 'post',
+    timeout: 600000,
+    data
+  })
+}
+
+export function GetArrList(data) {
+  return request({
+    url: '/authdata/GetArrList',
+    method: 'post',
+    data
+  })
+}
+export function PostDataByNames(data) {
+  return request({
+    url: '/authdata/PostDataByNames',
+    method: 'post',
+    data
+  })
+}
+
+export function ExecDataByConfig(data) {
+  return request({
+    url: '/authdata/ExecDataByConfig',
+    method: 'post',
+    data
+  })
+}
+
+export function removeimage(data) {
+  return request({
+    url: '/authdata/removeimage',
+    method: 'post',
+    data
+  })
+}
+
+export function getRecuData(data) {
+  return request({
+    url: '/authdata/GetRecuDataByName',
+    method: 'post',
+    data
+  })
+}
+
+export function failproccess(data, notify) {
+  if (data.data.includes('Duplicate')) {
+    notify({
+      title: '失败',
+      message: '不可以录入重复数据',
+      type: 'error',
+      duration: 2000
+    })
+  } else {
+    notify({
+      title: '失败',
+      message: '数据存在错误，请校验好重新录入，不可以录入数据',
+      type: 'error',
+      duration: 2000
+    })
+  }
+}
+
+export function form_edit_saveRelation(data) {
+  return request({
+    url: '/authdata/form_edit_saveRelation',
+    method: 'post',
+    data
+  })
+}
+
+export function transData(a, idStr, pidStr, chindrenStr) {
+  var r = []; var hash = {}; var id = idStr; var pid = pidStr; var children = chindrenStr; var i = 0; var j = 0; var len = a.length
+  for (; i < len; i++) {
+    hash[a[i][id]] = a[i]
+  }
+  for (; j < len; j++) {
+    var aVal = a[j]; var hashVP = hash[aVal[pid]]
+    if (hashVP) {
+      !hashVP[children] && (hashVP[children] = [])
+      hashVP[children].push(aVal)
+    } else {
+      r.push(aVal)
+    }
+  }
+  return r
+}
+export function UpdateDataRelation(data) {
+  return request({
+    url: '/authdata/UpdateDataRelation',
+    method: 'post',
+    data
+  })
+}
+export function checkButtons(buttonsList, PermissionButtons) {
+  // console.log(PermissionButtons)
+  for (let i = 0; i < buttonsList.length; i++) {
+    if (buttonsList[i].path === PermissionButtons && buttonsList[i].menu_id && buttonsList[i].path) { // path不为空且menu_id不为空时返回true
+      return true
+    }
+  }
+  return false
+}
+
+
+// export function checkButtons(buttonsList, PermissionButtons) {
+//   // console.log(PermissionButtons)
+//   for (let i = 0; i < buttonsList.length; i++) {
+//     if (buttonsList[i].path === PermissionButtons && buttonsList[i].editbutton === 1) { // path不为空且menu_id不为空时返回true
+//       return true
+//     }
+//   }
+//   return false
+// }
+
+export function formatJson(filterVal, jsonData) {
+  return jsonData.map(v =>
+    filterVal.map(j => {
+      if (j === 'timestamp') {
+        return parseTime(v[j])
+      } else {
+        return v[j]
+      }
+    })
+  )
+}
+
+export function DownloadExcel(data, filename) {
+  const content = data
+  const blob = new Blob([content])
+  const fileName = filename + '.xlsx'
+  if ('download' in document.createElement('a')) { // 非IE下载
+    const elink = document.createElement('a')
+    elink.download = fileName
+    elink.style.display = 'none'
+    elink.href = URL.createObjectURL(blob)
+    document.body.appendChild(elink)
+    elink.click()
+    URL.revokeObjectURL(elink.href) // 释放URL 对象
+    document.body.removeChild(elink)
+  } else { // IE10+下载
+    navigator.msSaveBlob(blob, fileName)
+  }
+}
+
+
+export function calculativeWidth() {
+ 
+    var operateArr = []
+    for(let i = 0; i<arguments.length; i++){
+      operateArr.push(arguments[i])
+    } 
+    console.log("operateArr==========",operateArr)
+    var tureCount = operateArr.filter(item => item === true).length
+    if(tureCount){
+      // 每个按钮预计90宽度
+      var countWidth = tureCount * 90
+      console.log(countWidth)
+      return countWidth
+    } else {
+      return 0
+    }
+}
+
+// console.log = function () {
+
+// }

src/api/dashboard.js

@@ -0,0 +1,73 @@
+import fetch from '@/utils/fetch'
+
+export function addDashboard(data) {
+  return fetch({
+    url: '/dashboard/create',
+    method: 'POST',
+    data
+  })
+}
+
+export function updateDashboard(data) {
+  return fetch({
+    url: '/dashboard/update',
+    method: 'POST',
+    data
+  })
+}
+
+export function getdDashboardById(id) {
+  return fetch({
+    url: `/dashboard/${id}`
+  })
+}
+
+export function deleteDashboard(data) {
+  return fetch({
+    url: `/dashboard/delete`,
+    method: 'post',
+    data
+  })
+}
+
+export function dashboardList() {
+  return fetch({
+    url: `/dashboard/list`
+  })
+}
+
+export function addChartToDB(data) {
+  return fetch({
+    url: '/chartboard/map',
+    method: 'POST',
+    data
+  })
+}
+
+export function chartByDashboard(id) {
+  return fetch({
+    url: `/chartboardmap/chartbydashboard?dashboard_id=${id}`
+  })
+}
+
+export function dbByChart(id) {
+  return fetch({
+    url: `/chartboardmap/boardbychart?chart_id=${id}`
+  })
+}
+
+export function unMapChartDb(data) {
+  return fetch({
+    url: '/chartboard/unmap',
+    method: 'POST',
+    data
+  })
+}
+
+export function dbOrder(data) {
+  return fetch({
+    url: '/dashboard/order',
+    method: 'POST',
+    data
+  })
+}

src/api/dept.js

@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+export function fetchList(data) {
+  return request({
+    url: '/authdata/GetRecuDataByName',
+    method: 'post',
+    data
+  })
+}
+
+export function fetchArticle(id) {
+  return request({
+    url: '/article/detail',
+    method: 'get',
+    params: { id }
+  })
+}
+
+export function fetchPv(pv) {
+  return request({
+    url: '/article/pv',
+    method: 'get',
+    params: { pv }
+  })
+}
+
+export function createDept(data) {
+  return request({
+    url: '/authdata/PostDataByName',
+    method: 'post',
+    data
+  })
+}
+
+export function updateDept(data) {
+  return request({
+    url: '/article/update',
+    method: 'post',
+    data
+  })
+}
+
+export function getRecuDept(data) {
+  return request({
+    url: '/authdata/getrecudatabyname',
+    method: 'post',
+    data
+  })
+}

src/api/exeSql.js

@@ -0,0 +1,22 @@
+import fetch from '@/utils/fetch'
+import axios from 'axios'
+
+export default function() {
+  const source = axios.CancelToken.source()
+  return {
+    cancel() {
+      source.cancel('cancel')
+    },
+    fetch(data) {
+      return fetch({
+        url: `/authdata/exesql`,
+        cancelToken: source.token,
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
+        },
+        method: 'POST',
+        data
+      })
+    }
+  }
+}

src/api/menu.js

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+/**
+  *根据角色获得可见菜单
+  */
+export function getMenuByRole(data) {
+  return request({
+    url: '/authdata/rolemenus',
+    method: 'post',
+    data
+  })
+}

src/api/remote-search.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+export function searchUser(name) {
+  return request({
+    url: '/search/user',
+    method: 'get',
+    params: { name }
+  })
+}
+
+export function transactionList(query) {
+  return request({
+    url: '/transaction/list',
+    method: 'get',
+    params: query
+  })
+}

src/api/source.js

@@ -0,0 +1,54 @@
+import fetch from '@/utils/fetch'
+
+export function addSource(data) {
+  return fetch({
+    url: 'source/create',
+    method: 'POST',
+    data
+  })
+}
+
+export function updateSource(data) {
+  return fetch({
+    url: 'source/update',
+    method: 'POST',
+    data
+  })
+}
+
+export function deleteSource(data) {
+  return fetch({
+    url: 'source/delete',
+    method: 'POST',
+    data
+  })
+}
+
+export function sourceList() {
+  return fetch({
+    url: 'source/list',
+    method: 'get'
+  })
+}
+
+export function tablesByBase(sourceId) {
+  return fetch({
+    url: `source/tables/${sourceId}`,
+    method: 'get'
+  })
+}
+
+export function saveTableConfig(data) {
+  return fetch({
+    url: 'source/tables/save',
+    method: 'POST',
+    data
+  })
+}
+
+export function linkedTablesByBase(sourceId) {
+  return fetch({
+    url: `source/tables/${sourceId}/linked`,
+    method: 'get'
+  })
+}

src/api/table.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function get_table_data(params) {
+  return request({
+    url: '/table/list',
+    method: 'get',
+    params
+  })
+}

src/api/user.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+export function login(data) {
+  return request({
+    url: '/auth',
+    method: 'post',
+    data
+  })
+}
+
+export function getInfo() { // token
+  return request({
+    url: '/authdata/userinfo',
+    method: 'get'
+    // params: { token }
+  })
+}
+
+export function logout() {
+  return request({
+    url: '/authdata/logout',
+    method: 'post'
+  })
+}

src/componentView/ContractCustomerDetail.vue

@@ -0,0 +1,472 @@
+<template>
+<div style="padding-bottom:20px;">
+  <el-row :gutter="5">
+    <el-col :span="8"  :gutter="20">
+
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+
+           <el-row :gutter="10" style="font-size:20px;font-weight:bold">
+              <el-col :span="8">
+                <span style="float:right">客户名称：</span>
+              </el-col>
+              <el-col :span="16">
+                <span>{{customerCard.customerName}}</span>
+              </el-col>
+          </el-row>
+           
+        </div>
+
+        <div>
+       
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">所属集团：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.groupName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">合同开始时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.contractBeginDate}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">合同结束时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.contractEndDate}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">货物信息：</span>
+              </el-col>
+              <el-col :span="16">
+                <span  class="cust-card-ct" style = "color:#409EFF; cursor: pointer;" @click="form_see()">查看</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">款项分期：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.moneyStep }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">合同金额（元）：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.contractMoney }}</span>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">技术服务费：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.serviceCost }}</span>
+              </el-col>
+            </el-row>
+
+
+            <block v-for="item in cardStagesList" >
+
+                  <el-row :gutter="10" class="cust-card-row">
+                    <el-col :span="8">
+                      <span class="cust-card-tt">期数：</span>
+                    </el-col>
+                    <el-col :span="16">
+                      <span class="cust-card-ct">{{item.stages }}</span>
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="10" class="cust-card-row">
+                    <el-col :span="8">
+                      <span class="cust-card-tt">应收金额占比：</span>
+                    </el-col>
+                    <el-col :span="16">
+                      <span class="cust-card-ct">{{item.planCostRate }}</span>
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="10" class="cust-card-row">
+                    <el-col :span="8">
+                      <span class="cust-card-tt">应收金额（元）：</span>
+                    </el-col>
+                    <el-col :span="16">
+                      <span class="cust-card-ct">{{item.planCost}}</span>
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="10" class="cust-card-row">
+                    <el-col :span="8">
+                      <span class="cust-card-tt">回款金额（元）：</span>
+                    </el-col>
+                    <el-col :span="16">
+                      <span class="cust-card-ct">{{item.returnCost}}</span>
+                    </el-col>
+                  </el-row>
+                  <el-row :gutter="10" class="cust-card-row">
+                    <el-col :span="8">
+                      <span class="cust-card-tt">收款时间：</span>
+                    </el-col>
+                    <el-col :span="16">
+                      <span class="cust-card-ct">{{item.getCostDate }}</span>
+                    </el-col>
+                  </el-row>
+            </block>
+            
+
+          
+
+
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">备注：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.remark }}</span>
+              </el-col>
+            </el-row>
+   
+        </div>
+        <!-- <div v-for="o in 4" :key="o" class="text item">
+          {{'列表内容 ' + o }}
+        </div> -->
+      </el-card>
+ 
+    </el-col>
+    <el-col :span="16"  :gutter="20">
+
+     
+        <div>
+          <el-divider></el-divider>
+   
+          <div class="block" style="height:320px;overflow:auto">
+
+            <el-timeline>
+
+              <el-timeline-item type="success" color="#409EFF" size="large" :timestamp="item.resumeTime" placement="top" v-for="item in customerResumeList"   class = "cust-line-bx">
+
+                <div style="position: absolute;top:0px;right:0px;">
+                  <span>负责人：</span>
+                  <span>{{item.employeeName}}</span>
+                </div>
+
+                <el-card>
+                 
+                      <div class = "cust-ex-item">
+                        <span class = "cust-ex-tt">业务：</span>
+                        <span class = "cust-ex-ct">{{item.typeName}}</span>
+                      </div>
+                      <div class = "cust-ex-item">
+                        <span class = "cust-ex-tt">状态：</span>
+                        <span class = "cust-ex-ct">{{item.statusName}}</span>
+                      </div>
+                      <!-- <div class = "cust-ex-item">
+                        <span class = "cust-ex-tt">详情：</span>
+                        <span class = "cust-ex-ct">{{item.businessName}}</span>
+                      </div> -->
+                   
+                    
+              
+                </el-card>
+              </el-timeline-item>
+
+            </el-timeline>
+          </div>
+          <el-divider></el-divider>
+
+
+ 
+
+        </div>
+      
+
+    </el-col>
+  </el-row>
+
+  <!-- 新增/编辑 -->
+    <el-dialog  title="货物详情" :visible.sync="createSee.dialogFormVisible"  append-to-body  width="95%">
+    
+
+        <div class="table"   style="margin-top:140px">
+          <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed">
+
+            
+    
+            <el-table-column label="序号" align="center" type="index" width="50px">
+                      <template slot-scope="scope">
+                        <span>{{ scope.$index + 1 }}</span>
+                      </template>
+                    </el-table-column>
+
+                    <el-table-column label="货品名称" min-width="110px" align="center">
+                      <template slot-scope="scope">
+                        <span>{{ scope.row.productsName }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="型号" min-width="110px" align="center">
+                      <template slot-scope="scope">
+                        <span>{{ scope.row.model }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="规格" min-width="110px" align="center">
+                      <template slot-scope="scope">
+                        <span>{{ scope.row.Specifications }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="数量" min-width="110px" align="center">
+                      <template slot-scope="scope">
+                        <span>{{ scope.row.nums }}</span>
+      
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="单价(元)" min-width="110px" align="center">
+                            <template slot-scope="scope">
+                              <span>{{ scope.row.price }}</span>
+                            </template>
+                    </el-table-column>
+
+                    <el-table-column label="总价(元)" min-width="110px" align="center">
+                            <template slot-scope="scope">
+                              <span>{{ scope.row.sumPrice  }}</span>
+                            </template>
+                    </el-table-column> 
+
+                    <el-table-column label="备注" min-width="280px" align="center">
+                      <template slot-scope="scope">
+                        <span>{{ scope.row.remark }}</span>
+                      </template>
+                    </el-table-column>
+     
+
+          </el-table>
+
+        
+
+          <pagination v-show="tableObj.total>=0" :total="tableObj.total" :page.sync="tableObj.getdataListParm.offset" :limit.sync="tableObj.getdataListParm.pagecount" @pagination="get_table_data" />
+        </div>
+         
+      
+        <div slot="footer" class="dialog-footer">     
+          <el-button class="cancelClose" @click="createSee.dialogFormVisible = false">关闭</el-button>
+        </div>
+ 
+    </el-dialog>
+</div> 
+
+
+
+
+
+
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'ContractCustomerDetail',
+  props: {
+    concustomerData: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+
+      customerCard: {
+          // "address":"1","createrId":"3072707379235128328","createrName":"管理员","createtime":"2022-05-11","customeLevelName":"2级","customeStatusName":"欠款客户","customerName":"测试12","directorId":24,"directorName":"康亮","enable":1,"groupId":207,"groupName":"星连星牧业","id":1425,"province":"1","rangeName":"西北区域","remark":"","scode":"123456789012345678" 
+      }, 
+      
+    
+      //列表请求
+      tableObj: {
+        getdataListParm: {
+          name: 'getContractGoodsByCid2',
+          page: 1,
+          offset: 1,
+          pagecount: 10,
+          returntype: 'Map',
+          parammaps: {
+            id: ''
+
+          }
+        },
+        tableKey: 0,
+        list: [],
+        total: 0,
+        listLoading: true,
+      },
+    
+      customerResumeList:[
+        // {id:1, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-01"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+      ],
+
+      cardStagesList:[],
+
+      createSee: {
+        dialogFormVisible: false,
+
+      },
+
+       rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+       cellStyle: { padding: 0 + 'px' }
+
+      
+    }
+  },
+ watch: {
+    concustomerData: {
+      deep: true,
+      handler: function (item) {
+        console.log("concustomerData父组件：", item)
+
+        
+
+        this.get_card_list()
+
+        this.get_card_stages()
+        this.get_resume_list()
+      
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+     this.get_card_list()
+     this.get_card_stages()
+     this.get_resume_list()
+    
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+     
+    //AJAX事件 - 获取卡片 
+    get_card_list() {
+      var send_data = {
+          name: 'getContractApplicationById',
+          parammaps: {
+            id:this.concustomerData.id,
+          }
+     }
+      GetDataByName(send_data).then(response => {
+        console.log('卡片数据', response )
+        if (response.data.list !== null) {
+          this.customerCard = response.data.list[0]
+        } else {
+          this.customerCard = {}
+        }
+      })
+    },
+    //AJAX事件 - 获取卡片 - 款项分期
+    get_card_stages(){
+      console.log("测试==============")
+      var send_data2 = {
+          name: 'getContractCost',
+           parammaps: {
+            id:this.concustomerData.id,
+          }
+     }
+      GetDataByName(send_data2).then(response => {
+        console.log('卡片款项分期数据', response )
+        if (response.data.list !== null) {
+          this.cardStagesList = response.data.list
+        } else {
+          this.cardStagesList = []
+        }
+      })
+    },
+  
+
+    //AJAX事件 - 获取卡片列表
+    get_resume_list() {
+      var send_data2 = {
+          name: 'getContractResume',
+           parammaps: {
+            id:this.concustomerData.id,
+          }
+     }
+      GetDataByName(send_data2).then(response => {
+        console.log('卡片列表数据', response )
+        if (response.data.list !== null) {
+          this.customerResumeList = response.data.list
+        } else {
+          this.customerResumeList = []
+        }
+      })
+    },
+
+    
+    //查看货物信息
+    form_see() {
+      this.createSee.dialogFormVisible = true
+      this.tableObj.getdataListParm.parammaps.id = this.concustomerData.id
+      this.get_table_data()
+
+     
+    },
+    
+
+        //加载表格
+    get_table_data() {
+      this.tableObj.listLoading = true
+      console.log("this.tableObj.getdataListParm======>", this.tableObj.getdataListParm)
+      GetDataByName(this.tableObj.getdataListParm).then(response => {
+        console.log('table数据======>', response.data.list)
+        if (response.data.list !== null) {
+
+          this.tableObj.list = response.data.list
+          this.tableObj.pageNum = response.data.pageNum
+          this.tableObj.pageSize = response.data.pageSize
+          this.tableObj.total = response.data.total
+
+          console.log('table数据======>', this.tableObj.list)
+        } else {
+          this.tableObj.list = []
+        }
+        setTimeout(() => {
+          this.tableObj.listLoading = false
+        }, 100)
+      })
+    }
+
+     
+  }
+}
+</script>

src/componentView/ContractDetail.vue

@@ -0,0 +1,328 @@
+<template>
+<div style="padding-bottom:20px;">
+  <div class="search">
+      <el-row :gutter="0">
+        <el-col :span="21">
+ 
+          
+            <el-input  v-model="tableObj.getdataListParm.parammaps.contractCode " class="filter-item" style="width: 120px;" placeholder="合同编号"/>
+          
+
+             <!-- <el-autocomplete v-model="tableObj.getdataListParm.parammaps.customerName" :fetch-suggestions="customer_search" placeholder="客户名称" style="width: 120px " class="filter-item" @select="change_customer_select" @clear="clear_customer_select" @blur="customer_search_blur" clearable>
+              <template slot-scope="{ item }">
+                <span class="name">{{ item.name }}</span>
+              </template>
+            </el-autocomplete>
+
+            <el-select v-model="tableObj.getdataListParm.parammaps.groupId" placeholder="集团" class="filter-item" style="width: 120px;" clearable filterable>
+              <el-option v-for="(item,index) in groupNameList" :key="index" :label="item.name" :value="item.id" />
+            </el-select>   -->
+
+            <el-select v-model="tableObj.getdataListParm.parammaps.employeeId" placeholder="创建人" class="filter-item" style="width: 100px;" clearable filterable>
+              <el-option v-for="(item,index) in createrNameList" :key="index" :label="item.name" :value="item.id" />
+            </el-select>
+
+        </el-col>
+        <el-col :span="3">
+            <el-button class="successBorder" @click="form_search">查询</el-button>
+            <el-button class="successBorder" @click="form_clear">重置</el-button>
+        </el-col>
+      </el-row>
+  </div>
+  <div class="table">
+      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" @selection-change="change_table_selection">
+        <el-table-column type="selection" align="center" width="50" />
+        <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="合同编号" min-width="110px" align="center" show-overflow-tooltip>
+         
+          <template slot-scope="scope">
+            <span  style = "color:#409EFF; cursor: pointer;" @click="click_customer(scope.row)">{{ scope.row.contractCode  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户名称" min-width="90px" align="center" >
+          <template slot-scope="scope">
+            <span>{{ scope.row.customerName  }}</span>
+          </template>
+        </el-table-column>
+
+
+        <el-table-column label="所属集团" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.groupName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="合同金额" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.contractMoney  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="合同开始时间" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.beginDate  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="合同结束时间" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.endDate  }}</span>
+          </template>
+        </el-table-column>
+      
+        <el-table-column label="创建人" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.employeeName  }}</span>
+          </template>
+        </el-table-column>
+       
+      </el-table>
+      <pagination v-show="tableObj.total>=0" :total="tableObj.total" :page.sync="tableObj.getdataListParm.offset" :limit.sync="tableObj.getdataListParm.pagecount" @pagination="get_table_data" />
+
+ 
+    </div>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'ContractDetail',
+  components: { Pagination },
+  props: {
+    contractData: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+      // 客户名称 - 下拉框
+      customerNameList: [
+        // {id: 1425, name: "测试12"},
+        // {id: 1423, name: "朝日牧场（唯品牧场）"},
+        // {id: 1422, name: "富源牧业（眉山）有限公司（眉山富源）"}
+      ], 
+ 
+      //集团 - 下拉框
+      groupNameList: [
+        // {id: 253, name: "无"}, 
+        // {id: 207, name: "星连星牧业"}, 
+        // {id: 208, name: "海高牧业"}, 
+        // {id: 254, name: "完达山"}
+      ],
+       
+      //创建人 - 下拉框
+      createrNameList: [
+        // {id: 3072707379235128300, name: "管理员"}, 
+        // {id: 3248184121834865700, name: "杨文山"}
+      ],
+
+      //列表请求
+      tableObj: {
+        getdataListParm: {
+          name: 'getContractSelect',
+          page: 1,
+          offset: 1,
+          pagecount: 10,
+          returntype: 'Map',
+          parammaps: {
+            customerId: '',
+            groupId: '',
+            contractCode : '',
+            employeeId : '',
+
+
+  
+          }
+        },
+        tableKey: 0,
+        list: [
+          
+        
+        ],
+        total: 0,
+        listLoading: false,
+        temp: {},
+ 
+        
+        
+      },
+      isokDisable: false,
+      selectList: [],
+         rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+         cellStyle: { padding: 0 + 'px' }
+      
+
+      
+    }
+  },
+ watch: {
+    contractData: {
+      deep: true,
+      handler: function (item) {
+        console.log("父组件：", item)
+
+
+      
+          this.tableObj.getdataListParm.parammaps.groupId = item.groupId 
+          this.tableObj.getdataListParm.parammaps.customerId = item.customerId
+          this.get_table_data()
+          this.get_select_list()
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+      this.get_table_data()
+     this.get_select_list()
+
+     
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+
+
+    parent_change_parp(customerId,groupId){
+        this.tableObj.getdataListParm.parammaps.customerId = customerId
+        this.tableObj.getdataListParm.parammaps.groupId = groupId
+        this.get_table_data()
+    },
+     
+    //获取所有下拉框的内容
+    get_select_list() {
+      // 下拉框请求
+      var send_select_list = [
+        // { name: 'getCustomerSelect', offset: 0, pagecount: 0, parammaps: {} },
+        { name: 'getDictListSelect1', offset: 0, pagecount: 0, parammaps: { "pid": "54" } },
+        
+        { name: 'getEmployeeNameFuzzy', offset: 0, pagecount: 0, parammaps: { "inputvalue": "" } },
+      
+      ]
+      GetDataByNames(send_select_list).then(response => {
+        // this.customerNameList = response.data.getCustomerSelect.list
+        // console.log("客户名称下拉框", this.customerNameList)
+        this.groupNameList = response.data.getDictListSelect1.list
+        console.log("集团下拉框", this.groupNameList)
+
+        this.createrNameList = response.data.getEmployeeNameFuzzy.list
+        console.log("创建人下拉框", this.createrNameList)
+      
+      })
+   
+
+    },
+
+  
+
+
+    //加载表格
+    get_table_data() {
+      
+      this.tableObj.listLoading = true
+      GetDataByName(this.tableObj.getdataListParm).then(response => {
+        console.log('table数据', response.data.list)
+        if (response.data.list !== null) {
+
+          this.tableObj.list = response.data.list
+          this.tableObj.pageNum = response.data.pageNum
+          this.tableObj.pageSize = response.data.pageSize
+          this.tableObj.total = response.data.total
+        } else {
+          this.tableObj.list = []
+        }
+        setTimeout(() => {
+          this.tableObj.listLoading = false
+        }, 100)
+      })
+    },
+
+
+    //模糊查询客户
+    customer_search(queryString, cb) {
+      console.log('模糊查询输入值', queryString)
+      GetDataByName({ name: 'getCustomerNameFuzzy', page: 1, offset: 1, pagecount: 10, returntype: 'Map', parammaps: { inputvalue: queryString } }).then(response => {
+        this.customerNameList = response.data.list
+        console.log("客户名称下拉框", response)
+        cb(response.data.list)
+        // this.$refs.elautocomplete.handleFocus()
+      })
+    },
+
+    //模糊查询客户选择
+    change_customer_select(item) {
+      console.log('客户名称模糊查询选中值', item)
+      this.tableObj.getdataListParm.parammaps.customerId = item.id
+      this.tableObj.getdataListParm.parammaps.customerName = item.name
+      this.$forceUpdate()
+    },
+    //清空客户选择
+    clear_customer_select(item) {
+      document.activeElement.blur()
+      this.tableObj.getdataListParm.parammaps.customerId = ""
+      this.tableObj.getdataListParm.parammaps.customerName = ""
+      this.customerNameList = []
+    },
+
+    //客户失去焦点
+    customer_search_blur(item) {
+      console.log("客户失去焦点")
+      this.tableObj.getdataListParm.parammaps.customerId = ""
+      this.tableObj.getdataListParm.parammaps.customerName = ""
+      this.customerNameList = []
+
+    },
+
+
+    //监听 - 表单查询
+    form_search() {
+      console.log('点击了查询', this.tableObj.getdataListParm.parammaps)
+   
+      this.tableObj.getdataListParm.offset = 1
+      this.get_table_data()
+    },
+
+    //事件 - 清空查询信息
+    form_clear() {
+      console.log('点击了重置')
+      this.tableObj.getdataListParm.parammaps.contractCode  = ''
+      this.tableObj.getdataListParm.parammaps.customerId  = ''
+      this.tableObj.getdataListParm.parammaps.groupId  = ''
+      
+      this.tableObj.getdataListParm.parammaps.customerName = ''
+
+      this.tableObj.getdataListParm.parammaps.employeeId  = ''
+    
+      this.tableObj.getdataListParm.offset = 1
+      this.get_table_data()
+    },
+
+
+    //监听 - 表格 - 勾选
+    change_table_selection(val) {
+      console.log('勾选数据', val)
+      this.selectList = val
+     
+      this.contractData.selectList = this.selectList 
+    },
+
+
+     
+  }
+}
+</script>

src/componentView/ContractMoreDetail.vue

@@ -0,0 +1,693 @@
+<template>
+  <div style="padding-bottom:20px;">
+    
+      <el-form ref="temp" :rules="create.rules" :model="create.temp" label-position="right" label-width="150px" style="width: 90%;margin:0 auto 50px">
+  
+            <h3>基本信息</h3>
+            <el-row>
+              <el-col :span="8">
+                <el-form-item label="创建人：" prop="createrName">
+                  <el-input ref="createrName" v-model="create.temp.createrName" class="filter-item" style="width: 100%;"  disabled  />
+                </el-form-item>
+  
+                <el-form-item label="所属集团：" prop="groupName">
+                  <el-input ref="groupName" v-model="create.temp.groupName" class="filter-item" style="width: 100%;"  disabled  />
+                </el-form-item>
+  
+                <el-form-item label="经销商" prop="dealerName">
+                  <el-input ref="dealerName" v-model="create.temp.dealerName" class="filter-item" style="width: 100%;"  disabled  />
+                </el-form-item>
+   
+  
+                <el-form-item label="备注：" prop="remark">
+                  <el-input ref="remark" v-model="create.temp.remark" type="textarea" :autosize="{ minRows: 1.3, maxRows: 4}"  maxlength="255" class="filter-item" style="width: 100%;"  disabled  />
+                </el-form-item>
+  
+              </el-col>
+  
+              <el-col :span="8">
+                <el-form-item label="创建时间：" prop="createrDate">
+                  <el-input ref="createrDate" v-model="create.temp.createrDate" class="filter-item" style="width: 100%;"     disabled  />
+                </el-form-item>
+  
+                <el-form-item label="客户名称：" prop="customerName">
+                  <el-input ref="customerName" v-model="create.temp.customerName" class="filter-item" style="width: 100%;"     disabled  />
+                </el-form-item>
+                <el-form-item label="合同开始时间：" prop="contractBeginDate">
+                  <el-input ref="contractBeginDate" v-model="create.temp.contractBeginDate" class="filter-item" style="width: 100%;"  disabled  />
+                </el-form-item>
+  
+                <el-form-item label="合同结束时间：" prop="contractEndDate">
+                  <el-input ref="contractEndDate" v-model="create.temp.contractEndDate" class="filter-item" style="width: 100%;"     disabled  />
+                </el-form-item>
+  
+   
+              </el-col>
+  
+              <el-col :span="8">
+                <el-form-item label="营业执照：" prop="businessLicense">
+                  <el-image style="width: 150px; height: 150px;display:inline-block"  :src="create.temp.picname1" @click="show_pic1()">
+                    <!-- <div slot="error" class="image-slot">
+                      <i class="el-icon-picture-outline" style="font-size:140px"></i>
+                    </div>     -->
+                  </el-image>
+                  <el-dialog :visible.sync="imageIsShow" append-to-body width="40%">
+                              <img width="80%" :src="create.temp.picname1" alt="">
+                  </el-dialog>
+  
+                </el-form-item>
+              </el-col>
+            </el-row>
+  
+            <h3>款项信息</h3>
+            <el-row>
+              <el-col :span="8">
+                <el-form-item label="款项分期：" prop="moneyStep">
+                  <el-input ref="moneyStep" v-model="create.temp.moneyStep" class="filter-item" style="width: 100%;"     disabled  />
+                </el-form-item>
+              </el-col>
+  
+              <el-col :span="8">
+                  <el-form-item label="合同金额（元）：" prop="contractMoney">
+                      <el-input ref="contractMoney" v-model="create.temp.contractMoney" class="filter-item" style="width: 100%;"   disabled  />
+                  </el-form-item>
+              </el-col>
+              <el-col :span="8">
+                  <el-form-item label="技术服务费：" prop="serviceCost">
+                      <el-input ref="serviceCost" v-model="create.temp.serviceCost" class="filter-item" style="width: 100%;"   disabled  />
+                  </el-form-item>
+              </el-col>
+            </el-row>
+  
+            <el-row>
+                    <el-table  :data="tableStagesList" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed">
+  
+   
+  
+                      <el-table-column label="期数" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.stages }}期</span>
+                        </template>
+                      </el-table-column>
+            
+                      <el-table-column label="应收金额占比" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.planCostRate }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="应收金额（元）" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.planCost }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="收款时间" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.collectionDate}}</span>
+                        </template>
+                      </el-table-column>
+  
+                   
+                    </el-table>
+            </el-row>
+  
+            <h3>货物信息</h3>
+            <el-row>
+              
+              <el-row>
+                    <el-table :data="tableStockList" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed">
+  
+                      <el-table-column label="序号" align="center" type="index" width="50px">
+                        <template slot-scope="scope">
+                          <span>{{ scope.$index + 1 }}</span>
+                        </template>
+                      </el-table-column>
+  
+                      <el-table-column label="货品名称" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.productsName }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="型号" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.model }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="规格" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.Specifications }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="数量" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span >{{ scope.row.nums }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="单价(元)" min-width="110px" align="center">
+                              <template slot-scope="scope">
+                                <span>{{ scope.row.price }}</span>
+                              </template>
+                      </el-table-column>
+                      <el-table-column label="成交价(元)" min-width="110px" align="center">
+                              <template slot-scope="scope">
+                                <span>{{ scope.row.closingPrice  }}</span>
+                              </template>
+                      </el-table-column> 
+                      <el-table-column label="总价(元)" min-width="110px" align="center">
+                              <template slot-scope="scope">
+                                <span>{{ scope.row.sumPrice  }}</span>
+                              </template>
+                      </el-table-column> 
+  
+                      <el-table-column label="备注" min-width="280px" align="center">
+                        <template slot-scope="scope">
+                          <span >{{ scope.row.remark }}</span>
+                        </template>
+                      </el-table-column>
+                    </el-table>
+              </el-row>
+  
+              <el-row type="flex" justify="end">
+                    <el-col style="color:#FF4949" :span="6" :offset="18">列表货物总价：{{stockSumPrice}}</el-col>
+              </el-row>
+              <el-divider></el-divider>
+               
+   
+            </el-row>
+  
+            <h3>合同附件</h3>
+            <el-row>
+              <span @click="form_down2()"  style = "color:#409EFF; cursor: pointer;">{{create.temp.applyFileName}}</span>
+              <el-button v-if="create.temp.applyFileName  " class="miniSuccess"   @click="form_look2()">在线预览</el-button>
+ 
+            </el-row>
+  
+  
+            <h3>备案信息</h3>
+            <el-row>
+              <span @click="form_down()"  style = "color:#409EFF; cursor: pointer;">{{create.temp.fileName}}</span>
+              <el-button v-if="create.temp.fileName  " class="miniSuccess"   @click="form_look()">在线预览</el-button>
+            </el-row>
+  
+            <h3>发票信息</h3>
+            <el-row>
+  
+              <el-col :span="6"  v-for="(item,index) in tableInvocieList ">
+                  <el-col :span="24">
+                    <el-image style="width: 150px; height: 150px;display:inline-block"  :src="item.picname"></el-image> 
+                  </el-col>
+                  <el-col :span="24">
+                    寄出时间：{{item.postDate}}
+                  </el-col>
+               </el-col>
+  
+              
+            </el-row>
+
+
+            <h3>流程进度</h3>
+            <el-row>
+  
+              <el-steps :active="active" align-center finish-status="success">
+                <el-step
+                  v-for="(item,index) in activeList"
+                  :key="index"
+                  :title="item.stepName"
+                  :status="item.status"
+                >
+                  <template slot="description">
+                    <div class="step-row">
+                      <div>{{ item.employeeName }}&nbsp;&nbsp;{{ item.resumeTime }}</div>
+                      <div>{{ item.remark }}</div>
+                    </div>
+                  </template>
+                </el-step>
+              </el-steps>
+  
+              
+            </el-row>
+   
+          </el-form>
+          <!-- PDF预览 -->
+          <el-dialog title="在线预览" :visible.sync="dialogVisible4" width="96%"  append-to-body center>
+            <!-- <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"></pdf> -->
+              <!-- <iframe :src="pdfSrc" frameborder="0" style="width: 100%; height: 600px"></iframe> -->
+      
+                <iframe :src="pdfSrc" ref="myIframe" frameborder="0" width="100%" height="1200px">  
+                  
+                </iframe>
+          </el-dialog>
+  
+  
+  </div> 
+  </template>
+  <script>
+   
+  
+  import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth , downloadfileCRM} from '@/api/common'
+  import Cookies from 'js-cookie'
+  import { parseTime } from '@/utils/index.js'
+  import Pagination from '@/components/Pagination'
+  import { MessageBox } from 'element-ui'
+  import { getToken } from '@/utils/auth'
+import { constants } from 'zlib';
+import mammoth from "mammoth";
+  
+  export default {
+    components: {  mammoth  },
+    name: 'ContractMoreDetail',
+    props: {
+      conmoreData: {
+        type: Object,
+        required: true
+      } 
+    },
+   
+   
+    data() {
+      return {
+        htmlContent: null,
+        create: {
+       
+          temp: {  contractStatus: '',    customerId: '', groupId: '', groupName: '', serviceCode: '', contractBeginDate: parseTime(new Date(), '{y}-{m}-{d}'), contractEndDate: parseTime(new Date(), '{y}-{m}-{d}'), createrId:  Cookies.get('employeid'), createrName:  Cookies.get('employename'),moneyStep: '1',contractMoney: '', businessLicense: -1,picname1: ''},
+          // 客户名称
+          getdataListParmCust: {
+            name: 'getCustomerByGroupId',
+            returntype: 'Map',
+            parammaps: { groupId: "" }
+          },
+          customerNameList:[], 
+  
+          // 款项信息 - 表格
+          getdataListParmStages: {
+            name: 'getContractCost',
+            returntype: 'Map',
+            parammaps: { id: "" }
+          },
+          // 货物信息 - 表格
+          getdataListParmStock: {
+            name: 'getContractGoodsByCid2',
+            returntype: 'Map',
+            parammaps: { id: "" }
+          }
+        },
+         //款项期数表格
+        tableStagesList:[],
+        //备货表格
+        tableStockList:[],
+        //发票信息
+        tableInvocieList :[],
+        stockSumPrice:0,
+  
+        dialogImageUrl: '',
+        imageIsShow: false,
+        dialogImageUrl2: '',
+        imageIsShow2: false,
+  
+        dialogVisible4: false,
+        pdfSrc: '',
+        numPages: null,
+  
+        requestParam: {},
+        isokDisable: false,
+       
+        rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+        cellStyle: { padding: 0 + 'px' },
+  
+        activeList: [
+          // { title: '合同录入', date: 1, name: 21 }, { title: '办公室主任审核', date: 3 }, { title: '设备中心审核', date: 1, name: 3, status: 'error', reason: 3 }
+        ],
+        active: 1
+  
+        
+      }
+    },
+   watch: {
+      conmoreData: {
+        deep: true,
+        handler: function (item) {
+          console.log("父组件：", item)
+  
+          
+  
+          this.get_info_list()
+          this.getStagesTableList()
+          this.getStockTableList()
+  
+          this.getInvocieList()
+          this.getResumeLineList()
+        
+        }
+      },
+
+      tableStockList: {
+        deep: true,
+        handler: function (item) {
+            //计算总价格
+            var sum = 0
+            this.tableStockList.forEach(function(i){
+                sum = parseInt(i.nums) * parseFloat(i.closingPrice) + sum
+            })
+            this.stockSumPrice = sum
+          
+        }
+      },
+   
+    },
+    mounted() {
+       
+    },
+  
+  
+    created() {
+       this.get_info_list()
+       this.getStagesTableList()
+       this.getStockTableList()
+       this.getInvocieList()
+       this.getResumeLineList()
+
+      
+    },
+    beforeDestroy() {
+      
+    },
+    methods: {
+
+ //AJAX事件 - 流程信息
+      getResumeLineList() {
+
+        var me = this 
+        var send_data = {
+            name: 'getContractResumeLine',
+            parammaps: {
+              id:this.conmoreData.id,
+            }
+       }
+        GetDataByName(send_data).then(response => {
+          console.log('流程信息============', response )
+          if (response.data.list !== null) {
+
+            if(response.data.list.length != 0){
+ 
+              var processNum = response.data.list[0].processNum
+              var arrList = response.data.list
+      
+              var activeList = []
+  
+
+              for (var i=0; i< processNum;i++){ 
+                 activeList.push({ employeeName: '', resumeTime:'', stepName: '', status: '' , remark: ''  })
+              }
+ 
+              arrList.forEach(function(item,index){
+                 activeList[index].stepName = item.stepName
+                 activeList[index].employeeName = item.employeeName
+                 activeList[index].resumeTime = item.resumeTime
+                  if(item.statusName == 0){
+                      activeList[index].remark = item.remark
+                      activeList[index].status =  'error'
+                  }
+              })
+
+
+              //过滤出没有名字的，代表激活当前流程
+              let arr1 = arrList.map((value, index) => index).filter(index => arrList[index].employeeName == "");  
+                
+              console.log(arr1);  // 输出: [1, 3, 5, 7, 8]
+              //取第一个没有名字的索引
+              if(arr1.length !== 0 ){
+                me.active = arr1[0]
+              }
+
+
+              arrList.forEach(function(item,index){
+                  //如果是最后一个内容，且有名字，激活的是最后
+                  if(item.employeeName !== "" && (index  == processNum-1 )){
+                    me.active = processNum 
+                    console.log(processNum)
+                  }
+               })
+              
+ 
+              me.activeList = activeList
+      
+            }else{
+               me.activeList = []
+               me.active = 0
+
+            }
+            
+          } else {
+            me.activeList = []
+               me.active = 0
+          }
+        })
+      },
+       
+      //AJAX事件 - 获取基本信息
+      get_info_list() {
+        var send_data = {
+            name: 'getContractApplicationById',
+            parammaps: {
+              id:this.conmoreData.id,
+            }
+       }
+        GetDataByName(send_data).then(response => {
+          console.log('获取基本信息数据', response )
+          if (response.data.list !== null) {
+             this.create.temp = response.data.list[0]
+             this.create.temp.picname1 =  process.env.VUE_APP_BASE_API + this.create.temp.picname1
+          } else {
+             this.create.temp ={}
+          }
+        })
+      },
+  
+  
+      
+  
+       // 款项信息表格
+      getStagesTableList() {
+  
+        var send_data = {
+            name: 'getContractCost',
+            parammaps: {
+              id:this.conmoreData.id,
+            }
+         }
+        GetDataByName(send_data).then(response => {
+          if (response.data.list !== null) {
+            this.tableStagesList   = response.data.list
+            console.log('款项信息表格数据', response.data.list)
+          } else {
+            this.tableStagesList = []
+          }
+        })
+      },
+  
+      // 备货信息表格
+      getStockTableList() {
+  
+         var send_data = {
+            name: 'getContractGoodsByCid2',
+            parammaps: {
+              id:this.conmoreData.id,
+            }
+         }
+        GetDataByName(send_data).then(response => {
+          if (response.data.list !== null) {
+            this.tableStockList  = response.data.list
+            console.log('备货信息表格数据', response.data.list)
+          } else {
+            this.tableStockList  = []
+          }
+        })
+      },
+  
+      //图片展示
+      show_pic1() {
+        this.imageIsShow = true
+      },
+      // 发票信息 
+      getInvocieList() {
+  
+         var send_data = {
+            name: 'getContractInvoice',
+            parammaps: {
+              id:this.conmoreData.id,
+            }
+         }
+        GetDataByName(send_data).then(response => {
+          if (response.data.list !== null) {
+            for (let i = 0; i < response.data.list.length; i++) {
+              var url = process.env.VUE_APP_BASE_API + response.data.list[i].picname
+              this.$set(response.data.list[i], 'picname', url ) 
+            }
+  
+            this.tableInvocieList  = response.data.list
+            console.log('发票信息表格数据', response.data.list)
+          } else {
+            this.tableInvocieList  = []
+          }
+        })
+      },
+  
+      form_down(){
+  
+        var send_data = {
+            fileId: this.create.temp.fileId
+         }
+  
+  
+         var fileName = this.create.temp.fileName
+  
+        downloadfileCRM(send_data).then(res => {
+         
+         
+          const content = res
+          const blob = new Blob([content])
+       
+          if ('download' in document.createElement('a')) { // 非IE下载
+            const elink = document.createElement('a')
+            elink.download = fileName
+            elink.style.display = 'none'
+            elink.href = URL.createObjectURL(blob)
+            document.body.appendChild(elink)
+            elink.click()
+            URL.revokeObjectURL(elink.href) // 释放URL 对象
+            document.body.removeChild(elink)
+          } else { // IE10+下载
+            navigator.msSaveBlob(blob, fileName)
+          }
+        })
+  
+      },
+
+
+      form_look(){
+        
+        var me = this
+        me.pdfSrc = ""
+        var  typeStr = me.create.temp.fileName
+        var url = process.env.VUE_APP_BASE_API + 'viewfileCRM/' + this.create.temp.fileId
+
+   
+        me.dialogVisible4 = true
+        me.pdfSrc = url
+
+   
+        
+     
+      },
+  
+      form_look2(){
+        
+        var me = this
+        me.pdfSrc = ""
+        var  typeStr = me.create.temp.applyFileName
+        var url = process.env.VUE_APP_BASE_API + 'viewfileCRM/' + this.create.temp.applyFileId
+
+        // window.open(url)
+
+        me.dialogVisible4 = true
+        me.pdfSrc = url
+
+      //var url = process.env.VUE_APP_BASE_API + 'viewfileCRM/79'  
+      //  window.open('http://www.leomay.com/upload/file/mmo-20170707165001.pdf')
+
+
+        // if(typeStr !== ""){
+        //   var typeArr = typeStr.split(".")
+        //   var type = typeArr[typeArr.length-1]
+        //   console.log(type)
+        //   if(type == "jpg" || type == "pdf" ){
+
+
+        //     me.dialogVisible4 = true
+        //     me.pdfSrc = url
+        //   }
+        //   //Word 文件
+        //   if(type == "docx" || type == "doc" ){
+        //     me.dialogVisible4 = true
+        //     fetch(url)  
+        //       .then(response => response.blob()) // 将响应转换为Blob对象  
+        //       .then(blob => {  
+        //         console.log(blob)
+        //         // 使用mammoth.js将Blob转换为HTML  
+        //         mammoth.convertToHtml({ arrayBuffer: blob })  
+        //           .then((result) => {  
+                    
+        //             // 获取iframe元素  
+        //             var iframe = me.$refs.myIframe;  
+        //              // 设置iframe中的HTML内容  
+        //             var contentWindow = iframe.contentWindow;  
+        //             contentWindow.document.open("text/html", "replace");  
+        //             contentWindow.document.write(result.value);  
+        //             contentWindow.document.close();  
+
+            
+        //           })  
+        //           .catch((err) => console.error(err));  
+        //       })  
+        //       .catch((err) => console.error(err));  
+      
+
+        //   }
+          
+
+        // }
+
+        
+ 
+         
+
+     
+       
+    
+ 
+     
+        
+     
+      },
+     
+    
+      form_down2(){
+  
+        var send_data = {
+            fileId: this.create.temp.applyFileId
+        }
+  
+  
+        var fileName = this.create.temp.applyFileName
+  
+        downloadfileCRM(send_data).then(res => {
+        
+        
+          const content = res
+          const blob = new Blob([content])
+  
+          if ('download' in document.createElement('a')) { // 非IE下载
+            const elink = document.createElement('a')
+            elink.download = fileName
+            elink.style.display = 'none'
+            elink.href = URL.createObjectURL(blob)
+            document.body.appendChild(elink)
+            elink.click()
+            URL.revokeObjectURL(elink.href) // 释放URL 对象
+            document.body.removeChild(elink)
+          } else { // IE10+下载
+            navigator.msSaveBlob(blob, fileName)
+          }
+        })
+  
+        }
+  
+   
+  
+      
+   
+  
+       
+    }
+  }
+  </script>
+  

src/componentView/ContractReturnMoney.vue

@@ -0,0 +1,144 @@
+<template>
+  <div style="padding-bottom:20px;">
+    
+ 
+          
+            <el-table  :data="tableStagesList" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed">
+
+  
+                      <el-table-column label="本期期数" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.stages }}期</span>
+                        </template>
+                      </el-table-column>
+            
+                      <el-table-column label="应收款项" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.planCost }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="回款金额" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.actualCost }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="收款人" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.employeeName }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="收款时间" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.collectionDate  }}</span>
+                        </template>
+                      </el-table-column>
+                      <el-table-column label="备注" min-width="110px" align="center">
+                        <template slot-scope="scope">
+                          <span>{{ scope.row.remark }}</span>
+                        </template>
+                      </el-table-column>
+                   
+                    </el-table>
+            
+      
+  
+  
+  </div> 
+  </template>
+  <script>
+   
+  
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+  
+  export default {
+    
+    name: 'ContractReturnMoney',
+    props: {
+      resturnmData: {
+        type: Object,
+        required: true
+      } 
+    },
+   
+   
+    data() {
+      return {
+        htmlContent: null,
+       
+         //款项期数表格
+        tableStagesList:[],
+        rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+      cellStyle: { padding: 0 + 'px' }
+  
+        
+      }
+    },
+   watch: {
+    resturnmData: {
+        deep: true,
+        handler: function (item) {
+          console.log("resturnmData父组件：", item)
+
+          this.getMoneyTableList()
+         
+        }
+      },
+   
+    },
+    mounted() {
+       
+    },
+  
+  
+    created() {
+      
+       this.getMoneyTableList()
+    
+      
+    },
+    beforeDestroy() {
+      
+    },
+    methods: {
+  
+  
+       // 款项信息表格
+      getMoneyTableList() {
+          console.log(1111111)
+        var send_data = {
+            name: 'getContractCostDetailById',
+            parammaps: {
+              contractId:this.resturnmData.id,
+            }
+         }
+        GetDataByName(send_data).then(response => {
+          if (response.data.list !== null) {
+            this.tableStagesList   = response.data.list
+            console.log('回款信息表格数据', response.data.list)
+          } else {
+            this.tableStagesList = []
+          }
+        })
+      },
+  
+      
+     
+  
+     
+  
+      
+   
+  
+      
+   
+  
+       
+    }
+  }
+  </script>
+  

src/componentView/CustomerDetail.vue

@@ -0,0 +1,431 @@
+<template>
+<div style="padding-bottom:20px;">
+  <el-row :gutter="5">
+    <el-col :span="8">
+
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+
+           <el-row :gutter="10" style="font-size:20px;font-weight:bold">
+              <el-col :span="8">
+                <span style="float:right">客户名称：</span>
+              </el-col>
+              <el-col :span="16">
+                <span>{{customerCard.customerName}}</span>
+              </el-col>
+          </el-row>
+           
+        </div>
+
+        <div>
+       
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">所属集团：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.groupName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">客户状态：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.customeStatusName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">客户等级：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.customeLevelName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">社会信用代码：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.scode}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">客户区域：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.rangeName }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">客户省份：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.province }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">客户地址：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.address }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">负责人：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.directorName }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">创建人：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.createrName }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">创建日期：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.createtime }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">备注：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.remark }}</span>
+              </el-col>
+            </el-row>
+   
+        </div>
+        <!-- <div v-for="o in 4" :key="o" class="text item">
+          {{'列表内容 ' + o }}
+        </div> -->
+      </el-card>
+ 
+    </el-col>
+    <el-col :span="16">
+
+        <div class="search">
+
+       
+                <el-select v-model="tableObj.getdataListParm.parammaps.businessName" placeholder="业务" class="filter-item" style="width: 120px;" clearable filterable>
+                  <el-option v-for="(item,index) in businessNameList" :key="index" :label="item.name" :value="item.id" />
+                </el-select>
+
+                <el-date-picker v-model="tableObj.getdataListParm.parammaps.inputDatetime" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 250px;" />
+
+
+
+                 <el-input v-model="tableObj.getdataListParm.parammaps.directorName" placeholder="负责人" style="width: 180px;" class="filter-item" clearable />
+
+                <el-select v-model="tableObj.getdataListParm.parammaps.customeStatus" placeholder="客户状态" class="filter-item" style="width: 120px;" clearable>
+                  <el-option v-for="(item,index) in customeStatusList" :key="index" :label="item.name" :value="item.id" />
+                </el-select>
+
+                <el-input v-model="tableObj.getdataListParm.parammaps.beginMoney" placeholder="金额" style="width:80px"></el-input>
+                -
+                <el-input v-model="tableObj.getdataListParm.parammaps.endMoney" placeholder="金额" style="width:80px"></el-input>
+
+                <el-button class="successBorder" @click="form_search">查询</el-button>
+                <el-button class="successBorder" @click="form_clear">重置</el-button>
+
+        </div>
+        <div>
+          <el-divider></el-divider>
+   
+          <div class="block" style="height:320px;overflow:auto">
+
+            <el-timeline>
+
+              <el-timeline-item type="success" color="#409EFF" size="large" :timestamp="item.date" placement="top" v-for="item in customerResumeList"   class = "cust-line-bx">
+
+                <div style="position: absolute;top:0px;right:0px;">
+                  <span>负责人：</span>
+                  <span>{{item.directorName}}</span>
+                </div>
+
+                <el-card>
+                 
+                      <div class = "cust-ex-item">
+                        <span class = "cust-ex-tt">业务：</span>
+                        <span class = "cust-ex-ct">{{item.businessName}}</span>
+                      </div>
+                      <div class = "cust-ex-item">
+                        <span class = "cust-ex-tt">状态：</span>
+                        <span class = "cust-ex-ct">{{item.customeStatus}}</span>
+                      </div>
+                      <!-- <div class = "cust-ex-item">
+                        <span class = "cust-ex-tt">详情：</span>
+                        <span class = "cust-ex-ct">{{item.businessName}}</span>
+                      </div> -->
+                      <div class = "cust-ex-item">
+                        <span class = "cust-ex-tt">待付金额（元）：</span>
+                        <span class = "cust-ex-ct">{{item.paidPrice}}</span>
+                      </div>
+                      <div class = "cust-ex-item">
+                        <span class = "cust-ex-tt">支付状态：</span>
+                        <span class = "cust-ex-ct">{{item.payStatus}}</span>
+                      </div>
+                    
+              
+                </el-card>
+              </el-timeline-item>
+
+            </el-timeline>
+          </div>
+          <el-divider></el-divider>
+
+
+          <div>
+            <div class = "cust-rest">
+              <span>待付总金额（元）：</span>
+              <span>{{sunPrice.planPaySumMoney}}</span>
+            </div>
+            <div class = "cust-rest">
+              <span>已付金额（元）：</span>
+              <span>{{sunPrice.payMoney}}</span>
+            </div>
+            <div class = "cust-rest">
+              <span>未付金额（元）：</span>
+              <span>{{sunPrice.planPayMoney}}</span>
+            </div>
+          </div>
+      
+
+        </div>
+      
+
+    </el-col>
+  </el-row>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'CustomerDetail',
+  props: {
+    customerData: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+
+      customerCard: {
+          // "address":"1","createrId":"3072707379235128328","createrName":"管理员","createtime":"2022-05-11","customeLevelName":"2级","customeStatusName":"欠款客户","customerName":"测试12","directorId":24,"directorName":"康亮","enable":1,"groupId":207,"groupName":"星连星牧业","id":1425,"province":"1","rangeName":"西北区域","remark":"","scode":"123456789012345678" 
+      }, 
+      
+    
+      //列表请求
+      tableObj: {
+        getdataListParm: {
+          name: 'getResumeByCustomerId',
+          page: 1,
+          offset: 1,
+          pagecount: 10,
+          returntype: 'Map',
+          parammaps: {
+            id:"",
+            customerId: '',
+            businessName: '',
+            inputDatetime: '',
+            beginDate: '',
+            endDate: '',
+            directorName: '',
+            customeStatus: '已完成',
+            beginMoney: '',
+            endMoney: '',
+          }
+        },
+        tableKey: 0,
+        total: 0
+      },
+      businessNameList: [
+        {id:"客户拜访", name:"客户拜访"},
+        {id:"电话回访", name:"电话回访"},
+        {id:"快递接送", name:"快递接送"},
+        {id:"备货", name:"备货"},
+        {id:"发货", name:"发货"},
+        {id:"现场服务", name:"现场服务"},
+        {id:"远程服务", name:"远程服务"},
+        {id:"投诉", name:"投诉"},
+
+      ],
+      customeStatusList: [
+        {id:"已完成", name:"已完成"},
+        {id:"未完成", name:"未完成"},
+      ],
+      customerResumeList:[
+        // {id:1, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-01"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+        // {id:2, businessName: '合同款项', customeStatus: '已完成', paidPrice: '100.00', payStatus: '无需支付', director:'epans', date:"2022-12-02"},
+      ],
+
+      sunPrice:{
+        // payMoney: '200', 
+        // planPayMoney: '50', 
+        // planPaySumMoney: '300'
+      }
+
+      
+    }
+  },
+ watch: {
+    customerData: {
+      deep: true,
+      handler: function (item) {
+        console.log("父组件：", item)
+
+        this.form_clear() 
+
+        
+
+        this.get_card_list()
+        this.get_resume_list()
+        this.get_sum_money()
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+     this.get_card_list()
+     this.get_resume_list()
+     this.get_sum_money()
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+     
+    //AJAX事件 - 获取卡片 
+    get_card_list() {
+      var send_data = {
+          name: 'getCustomerById',
+          parammaps: {
+            id:this.customerData.id,
+          }
+     }
+      GetDataByName(send_data).then(response => {
+        console.log('卡片数据', response )
+        if (response.data.list !== null) {
+          this.customerCard = response.data.list[0]
+        } else {
+          this.customerCard = {}
+        }
+      })
+    },
+
+    //监听 - 表单查询
+    form_search() {
+      console.log('点击了查询 - 客户详情列表',this.tableObj.getdataListParm.parammaps)
+      if (this.tableObj.getdataListParm.parammaps.inputDatetime !== '' && this.tableObj.getdataListParm.parammaps.inputDatetime !== null) {
+        this.tableObj.getdataListParm.parammaps.beginDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
+        this.tableObj.getdataListParm.parammaps.endDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
+      } else {
+        this.tableObj.getdataListParm.parammaps.inputDatetime = ''
+        this.tableObj.getdataListParm.parammaps.beginDate = ''
+        this.tableObj.getdataListParm.parammaps.endDate = ''
+      }
+      this.tableObj.getdataListParm.parammaps.id = this.customerData.id
+      this.tableObj.getdataListParm.offset = 1
+      this.get_resume_list()
+      this.get_sum_money()
+    },
+
+    //事件 - 清空所有表单信息
+    form_clear() {
+      console.log('点击了重置')
+      this.tableObj.getdataListParm.parammaps.id = ''
+      this.tableObj.getdataListParm.parammaps.customerId = ''
+      this.tableObj.getdataListParm.parammaps.businessName = ''
+      this.tableObj.getdataListParm.parammaps.inputDatetime = ''
+      this.tableObj.getdataListParm.parammaps.beginDate = ''
+      this.tableObj.getdataListParm.parammaps.endDate = ''
+      this.tableObj.getdataListParm.parammaps.directorName = ''
+      this.tableObj.getdataListParm.parammaps.customeStatus = ''
+      this.tableObj.getdataListParm.parammaps.beginMoney = ''
+      this.tableObj.getdataListParm.parammaps.endMoney = ''
+      this.tableObj.getdataListParm.offset = 1
+      this.get_resume_list()
+      this.get_sum_money()
+    },
+
+    //AJAX事件 - 获取卡片列表
+    get_resume_list() {
+
+ 
+      this.tableObj.getdataListParm.parammaps.customerId = this.customerData.id
+      var send_data2 = {
+          name: 'getResumeByCustomerId',
+          parammaps: this.tableObj.getdataListParm.parammaps
+     }
+      GetDataByName(send_data2).then(response => {
+        console.log('卡片列表数据', response )
+        if (response.data.list !== null) {
+          this.customerResumeList = response.data.list
+        } else {
+          this.customerResumeList = []
+        }
+      })
+    },
+
+    //AJAX事件 - 获取金额总价
+    get_sum_money() {
+      var send_data3 = {
+          name: 'getResumeMoney',
+          parammaps: this.tableObj.getdataListParm.parammaps
+     }
+      GetDataByName(send_data3).then(response => {
+        console.log('卡片总金额', response )
+        this.sunPrice  = response.data.list[0]
+        
+      })
+    },
+
+     
+  }
+}
+</script>

src/componentView/RemotePayDetail.vue

@@ -0,0 +1,294 @@
+<template>
+<div style="padding-bottom:20px;">
+  <el-row :gutter="15">
+    <el-col :span="8">
+
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+
+           <el-row :gutter="10" style="font-size:20px;font-weight:bold">
+              <el-col :span="8">
+                <span style="float:right">服务编号：</span>
+              </el-col>
+              <el-col :span="16">
+                <span>{{customerCard.remoteCode}}</span>
+              </el-col>
+          </el-row>
+           
+        </div>
+
+        <div>
+       
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务状态：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.statusName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">客户名称：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.customerName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">所属集团：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.groupName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">客户对接人：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.receiverName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务开始时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.remoteBeginDate }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务完成时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.remoteEndDate }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">技术人员：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.employeeName }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">拜访关联记录：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.visitCode }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">回访关联记录：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.telvisitCode }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务内容：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.content }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">备注：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.remark }}</span>
+              </el-col>
+            </el-row>
+
+            <el-divider></el-divider>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">款项状态：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.costStatus }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务费用：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.remoteCost }}</span>
+              </el-col>
+            </el-row>
+
+             
+   
+        </div>
+        <!-- <div v-for="o in 4" :key="o" class="text item">
+          {{'列表内容 ' + o }}
+        </div> -->
+      </el-card>
+ 
+    </el-col>
+    <el-col :span="16">
+         <h3>反馈记录</h3>
+                <el-row  >
+
+                  
+
+                  <div v-for="(item) in feedRecordList"   >
+             
+                    <div>
+                      <span> {{item.sort }} . </span>
+                      <span>{{item.remark }}</span>
+                    </div>
+                    <el-row type="flex"  justify="end">
+                      <el-col :span="6">
+                        {{item.createDate   }}
+                      </el-col>
+                      <el-col :span="6">
+                        反馈人：{{item.employeeName}}
+                      </el-col>
+                    </el-row>
+                    <el-divider></el-divider>
+                  </div>
+        </el-row>
+  
+    
+      
+
+    </el-col>
+  </el-row>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'RemotePayDetail',
+  props: {
+    remoteData: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+
+      customerCard: {
+          // "address":"1","createrId":"3072707379235128328","createrName":"管理员","createtime":"2022-05-11","customeLevelName":"2级","customeStatusName":"欠款客户","customerName":"测试12","directorId":24,"directorName":"康亮","enable":1,"groupId":207,"groupName":"星连星牧业","id":1425,"province":"1","rangeName":"西北区域","remark":"","scode":"123456789012345678" 
+      }, 
+      
+ 
+ 
+      //反馈记录
+      feedRecordList:[
+        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
+        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
+        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
+      ],
+
+      
+    }
+  },
+ watch: {
+    remoteData: {
+      deep: true,
+      handler: function (item) {
+        console.log("父组件：", item)
+
+        
+
+        this.get_card_list()
+        this.get_feedRecord()
+ 
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+     this.get_card_list()
+     this.get_feedRecord()
+     
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+     
+    //AJAX事件 - 获取服务款项详情
+    get_card_list() {
+      var send_data = {
+          name: 'getRemoteCostById',
+          parammaps: {
+            id:this.remoteData.id,
+          }
+     }
+      GetDataByName(send_data).then(response => {
+        console.log('卡片服务款项详情数据', response )
+        if (response.data.list !== null) {
+          this.customerCard = response.data.list[0]
+        } else {
+          this.customerCard = {}
+        }
+      })
+    },
+
+    
+  
+
+  
+
+    // 查看中的反馈记录
+    get_feedRecord() {
+      var send_data3 = {
+          name: 'getRemoteFeedbackById',
+          parammaps: {
+            id:this.remoteData.id,
+          }
+     }
+
+      GetDataByName(send_data3).then(response => {
+        console.log("查看中的反馈记录", response.data.list)
+        if (response.data.list !== null) {
+          this.feedRecordList = response.data.list
+        } else {
+          this.feedRecordList = []
+        }
+      })
+    }
+
+     
+  }
+}
+</script>

src/componentView/RepairPayDetail.vue

@@ -0,0 +1,516 @@
+<template>
+<div style="padding-bottom:20px;">
+  <el-row :gutter="15">
+    <el-col :span="8">
+
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+
+           <el-row :gutter="10" style="font-size:20px;font-weight:bold">
+              <el-col :span="8">
+                <span style="float:right">服务编号：</span>
+              </el-col>
+              <el-col :span="16">
+                <span>{{customerCard.repairCode }}</span>
+              </el-col>
+          </el-row>
+           
+        </div>
+
+        <div>
+       
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务状态：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.statusName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">客户名称：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.customerName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">所属集团：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.groupName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">维修类型：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.typeName }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">客户对接人：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.receiverName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务开始时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.serviceBeginDate  }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务完成时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.serviceSuccessDate  }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务人员：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.employeeName  }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">沟通结果：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.talkResult  }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">问题详情：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.problem  }}</span>
+              </el-col>
+            </el-row>
+ 
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">备注：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.remark }}</span>
+              </el-col>
+            </el-row>
+
+            <el-divider></el-divider>
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">维修结果：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.repairResult  }}</span>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">快递单号：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.postCode  }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">款项状态：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.costStatus }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务费用：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.serviceCost  }}</span>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">支付时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.payDate  }}</span>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">收款时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.collectDate  }}</span>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务总结：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.serviceSummary  }}</span>
+              </el-col>
+            </el-row>
+
+             
+   
+        </div>
+        <!-- <div v-for="o in 4" :key="o" class="text item">
+          {{'列表内容 ' + o }}
+        </div> -->
+      </el-card>
+ 
+    </el-col>
+    <el-col :span="16">
+       <h3>备货单信息</h3>
+       <el-form ref="temp"   :model="stockCard" label-position="right" label-width="150px" style="width: 95%;margin:0 auto 50px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="备货单号：" prop="orderDate">
+                  <el-input v-model="stockCard.stockupCode" placeholder="" style="width:100%" disabled></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="订单来源：" prop="orderDate">
+                  <el-input v-model="stockCard.sourceName" placeholder="" style="width:100%" disabled></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="下单日期：" prop="orderDate">
+                  <el-input v-model="stockCard.orderDate" placeholder="" style="width:100%" disabled></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="关联接收快递：" prop="orderDate">
+                  <el-input v-model="stockCard.postalName" placeholder="" style="width:100%" disabled></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="备货原因：" prop="orderDate">
+                  <el-input v-model="stockCard.reasonName" placeholder="" style="width:100%" disabled></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="预定发货时间：" prop="orderDate">
+                  <el-input v-model="stockCard.planSendDate" placeholder="" style="width:100%" disabled></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="备注：" prop="orderDate">
+                  <el-input v-model="stockCard.remark" placeholder="" style="width:100%" disabled></el-input>
+              </el-form-item>
+            </el-col>
+    
+          </el-row>
+        </el-form>
+
+      
+
+        <h3>备货清单</h3>
+
+        <el-row>
+          <el-table :data="tableStockList" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed">
+
+                    <el-table-column label="序号" align="center" type="index" width="50px">
+                      <template slot-scope="scope">
+                        <span>{{ scope.$index + 1 }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="类别" min-width="110px" align="center">
+                      <template slot-scope="scope">
+                        <span>{{ scope.row.categoryName }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="型号" min-width="110px" align="center">
+                      <template slot-scope="scope">
+                        <span>{{ scope.row.model }}</span>
+                      </template>
+                    </el-table-column>
+                     <el-table-column label="规格" min-width="110px" align="center">
+                      <template slot-scope="scope">
+                        <span>{{ scope.row.Specifications }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="名称" min-width="110px" align="center">
+                      <template slot-scope="scope">
+                        <span>{{ scope.row.productsName }}</span>
+                      </template>
+                    </el-table-column>
+                  
+                   
+                    <el-table-column label="数量" min-width="110px" align="center">
+                      <template slot-scope="scope">
+                        <span>{{ scope.row.nums }}</span>
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="单价(元)" min-width="110px" align="center">
+                       <template slot-scope="scope">
+                              <span>{{ scope.row.price }}</span>
+                      </template>
+                    </el-table-column>
+
+                    <el-table-column label="总价(元)" min-width="110px" align="center">
+                            <template slot-scope="scope">
+                              <span>{{ scope.row.sumPrice  }}</span>
+                            </template>
+                    </el-table-column> 
+
+                    <el-table-column label="备注" min-width="280px" align="center">
+                      <template slot-scope="scope">
+                        <span>{{ scope.row.remark }}</span>
+                        
+                      </template>
+                    </el-table-column>
+                 
+          </el-table>
+        </el-row>
+
+        <el-row type="flex" justify="end">
+                   <el-col style="color:#FF4949" :span="6" :offset="18">列表货物总价：{{stockSumPrice}}</el-col>
+        </el-row>
+
+              
+                <el-divider></el-divider>
+
+        <h3>反馈记录</h3>
+        <el-row  >
+
+                  
+
+                  <div v-for="(item) in feedRecordList"   >
+             
+                    <div>
+                      <span> {{item.sort }} . </span>
+                      <span>{{item.remark }}</span>
+                    </div>
+                    <el-row type="flex"  justify="end">
+                      <el-col :span="6">
+                        {{item.createDate   }}
+                      </el-col>
+                      <el-col :span="6">
+                        反馈人：{{item.employeeName}}
+                      </el-col>
+                    </el-row>
+                    <el-divider></el-divider>
+                  </div>
+        </el-row>
+  
+    
+      
+
+    </el-col>
+  </el-row>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'RepairPayDetail',
+  props: {
+    repairData: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+
+      customerCard: {
+          // "address":"1","createrId":"3072707379235128328","createrName":"管理员","createtime":"2022-05-11","customeLevelName":"2级","customeStatusName":"欠款客户","customerName":"测试12","directorId":24,"directorName":"康亮","enable":1,"groupId":207,"groupName":"星连星牧业","id":1425,"province":"1","rangeName":"西北区域","remark":"","scode":"123456789012345678" 
+      }, 
+
+      stockCard: {
+          // "address":"1","createrId":"3072707379235128328","createrName":"管理员","createtime":"2022-05-11","customeLevelName":"2级","customeStatusName":"欠款客户","customerName":"测试12","directorId":24,"directorName":"康亮","enable":1,"groupId":207,"groupName":"星连星牧业","id":1425,"province":"1","rangeName":"西北区域","remark":"","scode":"123456789012345678" 
+      }, 
+      
+      //备货表格
+      tableStockList:[],
+ 
+      //反馈记录
+      feedRecordList:[
+        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
+        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
+        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
+      ],
+ 
+      stockSumPrice:0,
+      requestParam: {},
+      isokDisable: false,
+      selectList: [],
+      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+      cellStyle: { padding: 0 + 'px' }
+
+      
+    }
+  },
+ watch: {
+    repairData: {
+      deep: true,
+      handler: function (item) {
+        console.log("父组件：", item)
+
+        
+
+        this.get_card_list()
+        this.get_feedRecord()
+      
+      
+ 
+      }
+    },
+    tableStockList: {
+      deep: true,
+      handler: function (item) {
+          //计算总价格
+          var sum = 0
+          this.tableStockList.forEach(function(i){
+              sum = parseInt(i.nums) * parseFloat(i.price) + sum
+          })
+          this.stockSumPrice = sum
+         
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+     this.get_card_list()
+     this.get_feedRecord()
+   
+   
+     
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+     
+    //AJAX事件 - 获取服务款项详情
+    get_card_list() {
+      var send_data = {
+          name: 'getRepairCostById',
+          parammaps: {
+            id:this.repairData.id,
+          }
+     }
+      GetDataByName(send_data).then(response => {
+        console.log('卡片服务款项详情数据', response )
+        if (response.data.list !== null) {
+          this.customerCard = response.data.list[0]
+          this.get_stock_card()
+          this.get_tableStock()
+
+        } else {
+          this.customerCard = {}
+        }
+      })
+    },
+
+    
+    // 备货表格
+    get_tableStock() {
+      var send_data4 = {
+          name: 'getStockGoodsBySid',
+          parammaps: {
+            id:this.customerCard.stockupId,
+          }
+     }
+
+      GetDataByName(send_data4).then(response => {
+        console.log("备货", response.data.list)
+        if (response.data.list !== null) {
+          this.tableStockList = response.data.list
+        }else{
+          this.tableStockList = []
+        }
+      })
+    },
+
+    // 备货表格
+    get_stock_card() {
+     var send_data5 = {
+          name: 'getStockupById',
+          parammaps: {
+            id:this.customerCard.stockupId,
+          }
+     }
+      GetDataByName(send_data5).then(response => {
+        console.log('详情数据', response )
+        if (response.data.list !== null) {
+          this.stockCard = response.data.list[0]
+        } else {
+          this.stockCard = {}
+        }
+      })
+    },
+
+  
+
+    // 查看中的反馈记录
+    get_feedRecord() {
+      var send_data3 = {
+          name: 'getRepairFeedbackById',
+          parammaps: {
+            id:this.repairData.id,
+          }
+     }
+
+      GetDataByName(send_data3).then(response => {
+        console.log("查看中的反馈记录", response.data.list)
+        if (response.data.list !== null) {
+          this.feedRecordList = response.data.list
+        } else {
+          this.feedRecordList = []
+        }
+      })
+    }
+
+     
+  }
+}
+</script>

src/componentView/SitePayDetail.vue

@@ -0,0 +1,402 @@
+<template>
+<div style="padding-bottom:20px;">
+  <el-row :gutter="15">
+    <el-col :span="8">
+
+
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+
+           <el-row :gutter="10" style="font-size:20px;font-weight:bold">
+              <el-col :span="8">
+                <span style="float:right">服务编号：</span>
+              </el-col>
+              <el-col :span="16">
+                <span>{{customerCard.serviceCode }}</span>
+              </el-col>
+          </el-row>
+           
+        </div>
+
+        <div>
+       
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务状态：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.statusName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">客户名称：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.customerName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">所属集团：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.groupName}}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">接待人：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.receiverName}}</span>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">接待人电话：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.receiverTel }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务开始时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.serviceBeginDate  }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务完成时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.serviceSuccessDate  }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务人员：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.employeeName }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">拜访关联记录：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.visitCode }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">回访关联记录：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.telvisitCode }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务描述：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.describe  }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">备注：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.remark }}</span>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">现场照片：</span>
+              </el-col>
+              <el-col :span="16">
+
+                <span class="cust-card-ct">
+
+                  <el-col  v-if =" customerCard.scenePhoto1 !==  '-1' ">
+                      <el-image style="width: 150px; height: 150px;display:inline-block"  :src="picnameUrl1"></el-image> 
+                  </el-col>
+                  <el-col   v-if =" customerCard.scenePhoto2 !==  '-1' ">
+                      <el-image style="width: 150px; height: 150px;display:inline-block"  :src="picnameUrl2"></el-image> 
+                  </el-col>
+                  <el-col   v-if =" customerCard.scenePhoto3 !==  '-1' ">
+                      <el-image style="width: 150px; height: 150px;display:inline-block"  :src="picnameUrl3"></el-image> 
+                  </el-col>
+                  <el-col   v-if =" customerCard.scenePhoto4 ==  '-1' ">
+                      <el-image style="width: 150px; height: 150px;display:inline-block"  :src="picnameUrl4"></el-image> 
+                  </el-col>
+                  <el-col   v-if =" customerCard.scenePhoto5 !==  '-1' ">
+                      <el-image style="width: 150px; height: 150px;display:inline-block"  :src="picnameUrl5"></el-image> 
+                  </el-col>
+                  <el-col  v-if =" customerCard.scenePhoto6 !==  '-1' ">
+                      <el-image style="width: 150px; height: 150px;display:inline-block"  :src="picnameUrl6"></el-image> 
+                  </el-col>
+                  <el-col   v-if =" customerCard.scenePhoto7 !==  '-1' ">
+                      <el-image style="width: 150px; height: 150px;display:inline-block"  :src="picnameUrl7"></el-image> 
+                  </el-col>
+                  <el-col  v-if =" customerCard.scenePhoto8 !==  '-1' ">
+                      <el-image style="width: 150px; height: 150px;display:inline-block"  :src="picnameUrl8"></el-image> 
+                  </el-col>
+                  <el-col  v-if =" customerCard.scenePhoto9 !==  '-1' ">
+                      <el-image style="width: 150px; height: 150px;display:inline-block"  :src="picnameUrl9"></el-image> 
+                  </el-col>
+     
+                </span>
+
+              </el-col>
+            </el-row>
+             <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务单照片：</span>
+              </el-col>
+              <el-col :span="16">
+
+                <span class="cust-card-ct">
+                  <el-col :span="6"  >
+                      <el-image style="width: 150px; height: 150px;display:inline-block"  :src="codePicnameUrl"></el-image> 
+                  </el-col>
+                </span>
+                
+              </el-col>
+            </el-row>
+
+            <el-divider></el-divider>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">款项状态：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.costStatus }}</span>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务费用：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.serviceCost  }}</span>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">支付时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.payDate  }}</span>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">收款时间：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.collectDate  }}</span>
+              </el-col>
+            </el-row>
+            <el-row :gutter="10" class="cust-card-row">
+              <el-col :span="8">
+                <span class="cust-card-tt">服务总结：</span>
+              </el-col>
+              <el-col :span="16">
+                <span class="cust-card-ct">{{customerCard.serviceSummary  }}</span>
+              </el-col>
+            </el-row>
+
+             
+   
+        </div>
+        <!-- <div v-for="o in 4" :key="o" class="text item">
+          {{'列表内容 ' + o }}
+        </div> -->
+      </el-card>
+ 
+    </el-col>
+    <el-col :span="16">
+         <h3>反馈记录</h3>
+                <el-row  >
+
+                  
+
+                  <div v-for="(item) in feedRecordList"   >
+             
+                    <div>
+                      <span> {{item.sort }} . </span>
+                      <span>{{item.remark }}</span>
+                    </div>
+                    <el-row type="flex"  justify="end">
+                      <el-col :span="6">
+                        {{item.createDate   }}
+                      </el-col>
+                      <el-col :span="6">
+                        反馈人：{{item.employeeName}}
+                      </el-col>
+                    </el-row>
+                    <el-divider></el-divider>
+                  </div>
+        </el-row>
+  
+    
+      
+
+    </el-col>
+  </el-row>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'SitePayDetail',
+  props: {
+    siteData: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+
+      customerCard: {
+          // "address":"1","createrId":"3072707379235128328","createrName":"管理员","createtime":"2022-05-11","customeLevelName":"2级","customeStatusName":"欠款客户","customerName":"测试12","directorId":24,"directorName":"康亮","enable":1,"groupId":207,"groupName":"星连星牧业","id":1425,"province":"1","rangeName":"西北区域","remark":"","scode":"123456789012345678" 
+      }, 
+      codePicnameUrl:"",
+      picnameUrl1:"",
+      picnameUrl2:"",
+      picnameUrl3:"",
+      picnameUrl4:"",
+      picnameUrl5:"",
+      picnameUrl6:"",
+      picnameUrl7:"",
+      picnameUrl8:"",
+      picnameUrl9:"",
+  
+ 
+ 
+ 
+      //反馈记录
+      feedRecordList:[
+        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
+        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
+        // {id:1, num: 1, txt: '主板缺失零件，疫情关系，无法采购，延期1天',   director:'epans', date:"2022-12-01"},
+      ],
+
+      
+    }
+  },
+ watch: {
+    siteData: {
+      deep: true,
+      handler: function (item) {
+        console.log("父组件：", item)
+
+        
+
+        this.get_card_list()
+        this.get_feedRecord()
+ 
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+     this.get_card_list()
+     this.get_feedRecord()
+     
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+     
+    //AJAX事件 - 获取服务款项详情
+    get_card_list() {
+      var send_data = {
+          name: 'getServiceCostById',
+          parammaps: {
+            id:this.siteData.id,
+          }
+     }
+      GetDataByName(send_data).then(response => {
+        console.log('卡片服务款项详情数据', response )
+        if (response.data.list !== null) {
+          this.customerCard = response.data.list[0]
+          this.codePicnameUrl = process.env.VUE_APP_BASE_API + response.data.list[0].codePicname
+          
+          this.picnameUrl1 = process.env.VUE_APP_BASE_API + response.data.list[0].picname1
+          this.picnameUrl2 = process.env.VUE_APP_BASE_API + response.data.list[0].picname2
+          this.picnameUrl3 = process.env.VUE_APP_BASE_API + response.data.list[0].picname3
+          this.picnameUrl4 = process.env.VUE_APP_BASE_API + response.data.list[0].picname4
+          this.picnameUrl5 = process.env.VUE_APP_BASE_API + response.data.list[0].picname5
+          this.picnameUrl6 = process.env.VUE_APP_BASE_API + response.data.list[0].picname6
+          this.picnameUrl7 = process.env.VUE_APP_BASE_API + response.data.list[0].picname7
+          this.picnameUrl8 = process.env.VUE_APP_BASE_API + response.data.list[0].picname8
+          this.picnameUrl9 = process.env.VUE_APP_BASE_API + response.data.list[0].picname9
+        } else {
+          this.customerCard = {}
+        }
+      })
+    },
+
+    
+  
+
+  
+
+    // 查看中的反馈记录
+    get_feedRecord() {
+      var send_data3 = {
+          name: 'getServiceFeedbackById',
+          parammaps: {
+            id:this.siteData.id,
+          }
+     }
+
+      GetDataByName(send_data3).then(response => {
+        console.log("查看中的反馈记录", response.data.list)
+        if (response.data.list !== null) {
+          this.feedRecordList = response.data.list
+        } else {
+          this.feedRecordList = []
+        }
+      })
+    }
+
+     
+  }
+}
+</script>

src/componentView/StockDetail.vue

@@ -0,0 +1,355 @@
+<template>
+<div style="padding-bottom:20px;">
+  <div class="search">
+      <el-row :gutter="0">
+        <el-col :span="21">
+ 
+          
+            <el-input  v-model="tableObj.getdataListParm.parammaps.stockupCode " class="filter-item" style="width: 120px;" placeholder="备货单号"/>
+          
+            <el-input  v-model="tableObj.getdataListParm.parammaps.contractCode " class="filter-item" style="width: 120px;" placeholder="合同编号"/>
+
+            <el-date-picker v-model="tableObj.getdataListParm.parammaps.inputDatetime" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="预定发货时间" end-placeholder="预定发货时间" style="width: 250px;" />
+
+
+            <!-- <el-autocomplete v-model="tableObj.getdataListParm.parammaps.customerName" :fetch-suggestions="customer_search" placeholder="客户名称" style="width: 200px;margin-right:10px" @select="change_customer_select" @clear="clear_customer_select" @blur="customer_search_blur" clearable>
+                <template slot-scope="{ item }">
+                  <span class="name">{{ item.name }}</span>
+                </template>
+              </el-autocomplete>
+
+              <el-select v-model="tableObj.getdataListParm.parammaps.groupId" placeholder="所属集团" class="filter-item" style="width: 120px;" clearable>
+                <el-option v-for="item in groupNameList" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select> -->
+  
+
+        </el-col>
+        <el-col :span="3">
+            <el-button class="successBorder" @click="form_search">查询</el-button>
+            <el-button class="successBorder" @click="form_clear">重置</el-button>
+        </el-col>
+      </el-row>
+  </div>
+  <div class="table">
+      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" @selection-change="change_table_selection">
+        <el-table-column type="selection" align="center" width="50" />
+        <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="备货单号" min-width="110px" align="center" show-overflow-tooltip>
+         
+          <template slot-scope="scope">
+            <span  style = "color:#409EFF; cursor: pointer;" @click="click_customer(scope.row)">{{ scope.row.stockupCode  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="合同编号" min-width="90px" align="center" >
+          <template slot-scope="scope">
+            <span>{{ scope.row.contractCode  }}</span>
+          </template>
+        </el-table-column>
+
+
+        <el-table-column label="预定发货时间" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.planSendDate  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户名称" min-width="120px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.customerName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="所属集团" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.groupName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="下单日期" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.orderDate  }}</span>
+          </template>
+        </el-table-column>
+       
+       
+      </el-table>
+      <pagination v-show="tableObj.total>=0" :total="tableObj.total" :page.sync="tableObj.getdataListParm.offset" :limit.sync="tableObj.getdataListParm.pagecount" @pagination="get_table_data" />
+    </div>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'StockDetail',
+  components: { Pagination },
+  props: {
+    stockData: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+      // 客户名称 - 下拉框
+      customerNameList: [
+        // {id: 1425, name: "测试12"},
+        // {id: 1423, name: "朝日牧场（唯品牧场）"},
+        // {id: 1422, name: "富源牧业（眉山）有限公司（眉山富源）"}
+      ], 
+ 
+      //集团 - 下拉框
+      groupNameList: [
+        // {id: 253, name: "无"}, 
+        // {id: 207, name: "星连星牧业"}, 
+        // {id: 208, name: "海高牧业"}, 
+        // {id: 254, name: "完达山"}
+      ],
+       
+      //创建人 - 下拉框
+      createrNameList: [
+        // {id: 3072707379235128300, name: "管理员"}, 
+        // {id: 3248184121834865700, name: "杨文山"}
+      ],
+
+      //列表请求
+      tableObj: {
+        getdataListParm: {
+          name: 'getStockupSelectByDelivery',
+          page: 1,
+          offset: 1,
+          pagecount: parseInt(Cookies.get('pagecount')),
+          returntype: 'Map',
+          parammaps: {
+            stockupCode: '',
+            contractCode: '',
+            customerId: '',
+            customerName: '',
+            groupId: '',
+            inputDatetime: "",
+            beginDate: "",
+            endDate: "",
+            stockupIds:  "" 
+          }
+        },
+        tableKey: 0,
+        list: [
+          
+        
+        ],
+        total: 0,
+        listLoading: false,
+        temp: {},
+ 
+        
+        
+      },
+      isokDisable: false,
+      selectList: [],
+         rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+         cellStyle: { padding: 0 + 'px' }
+      
+
+      
+    }
+  },
+ watch: {
+    stockData: {
+      deep: true,
+      handler: function (item) {
+         console.log("父组件：", item)
+
+        //  if(item.title == 'see'){
+        //     this.tableObj.getdataListParm.parammaps.stockupIds = item.stockupIds
+        //     this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery2' 
+        //   }else{
+        //       this.tableObj.getdataListParm.parammaps.stockupIds = ""
+        //       this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery' 
+        //   }
+
+        //   this.get_table_data()
+       
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+
+    // console.log("父组件：", this.stockData)
+    // if(this.stockData.title == 'see'){
+    //     this.tableObj.getdataListParm.parammaps.stockupIds = this.stockData.stockupIds
+    //     this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery2' 
+    // }else{
+    //     this.tableObj.getdataListParm.parammaps.stockupIds = ""
+    //     this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery' 
+    // }
+    this.get_select_list() 
+      // this.get_table_data()
+ 
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+ 
+  parent_change_parp(customerId,groupId,title){
+        this.tableObj.getdataListParm.parammaps.customerId = customerId
+        this.tableObj.getdataListParm.parammaps.groupId = groupId
+        if(title == 'see'){
+            this.tableObj.getdataListParm.parammaps.stockupIds = this.stockData.stockupIds
+            this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery2' 
+        }else{
+            this.tableObj.getdataListParm.parammaps.stockupIds = ""
+            this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery' 
+        }
+        this.get_table_data()
+    },
+     //获取所有下拉框的内容
+    get_select_list() {
+
+      var send_select_list =  [
+        // { name: 'getCustomerSelect', offset: 0, pagecount: 0, parammaps: {} },
+        { name: 'getDictListSelect1', offset: 0, pagecount: 0, parammaps: { "pid": "54" } },
+        { name: 'getDictListSelect4', offset: 0, pagecount: 0, parammaps: { "pid": "60" } },
+
+        { name: 'getProductsEnable', offset: 0, pagecount: 0, parammaps: { "enable": "1" } },
+
+
+      ]
+
+      GetDataByNames(send_select_list).then(response => {
+ 
+        this.groupNameList = response.data.getDictListSelect1.list
+        console.log("集团下拉框", this.groupNameList)
+         
+
+      })
+
+    },
+
+
+    //加载表格
+    get_table_data() {
+      
+      this.tableObj.listLoading = true
+      GetDataByName(this.tableObj.getdataListParm).then(response => {
+        console.log('table数据', response.data.list)
+        if (response.data.list !== null) {
+
+          this.tableObj.list = response.data.list
+          this.tableObj.pageNum = response.data.pageNum
+          this.tableObj.pageSize = response.data.pageSize
+          this.tableObj.total = response.data.total
+        } else {
+          this.tableObj.list = []
+        }
+        setTimeout(() => {
+          this.tableObj.listLoading = false
+        }, 100)
+      })
+    },
+
+
+    //模糊查询客户
+    customer_search(queryString, cb) {
+      console.log('模糊查询输入值', queryString)
+      GetDataByName({ name: 'getCustomerNameFuzzy', page: 1, offset: 1, pagecount: 10, returntype: 'Map', parammaps: { inputvalue: queryString } }).then(response => {
+        this.customerNameList = response.data.list
+        console.log("客户名称下拉框", response)
+        cb(response.data.list)
+        // this.$refs.elautocomplete.handleFocus()
+      })
+    },
+
+    //模糊查询客户选择
+    change_customer_select(item) {
+      console.log('客户名称模糊查询选中值', item)
+      this.tableObj.getdataListParm.parammaps.customerId = item.id
+      this.tableObj.getdataListParm.parammaps.customerName = item.name
+      this.$forceUpdate()
+    },
+    //清空客户选择
+    clear_customer_select(item) {
+      document.activeElement.blur()
+      this.tableObj.getdataListParm.parammaps.customerId = ""
+      this.tableObj.getdataListParm.parammaps.customerName = ""
+      this.customerNameList = []
+    },
+
+    //客户失去焦点
+    customer_search_blur(item) {
+      console.log("客户失去焦点")
+      this.tableObj.getdataListParm.parammaps.customerId = ""
+      this.tableObj.getdataListParm.parammaps.customerName = ""
+      this.customerNameList = []
+
+    },
+
+
+    //监听 - 表单查询
+    form_search() {
+       if (this.tableObj.getdataListParm.parammaps.inputDatetime !== '' && this.tableObj.getdataListParm.parammaps.inputDatetime !== null) {
+        this.tableObj.getdataListParm.parammaps.beginDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime[0], '{y}-{m}-{d}')
+        this.tableObj.getdataListParm.parammaps.endDate = parseTime(this.tableObj.getdataListParm.parammaps.inputDatetime[1], '{y}-{m}-{d}')
+      } else {
+        this.tableObj.getdataListParm.parammaps.inputDatetime = ''
+        this.tableObj.getdataListParm.parammaps.beginDate = ''
+        this.tableObj.getdataListParm.parammaps.endDate = ''
+      }
+ 
+      console.log('点击了查询', this.tableObj.getdataListParm.parammaps)
+   
+      this.tableObj.getdataListParm.offset = 1
+      this.get_table_data()
+    },
+
+    //事件 - 清空查询信息
+    form_clear() {
+      console.log('点击了重置')
+       
+      this.tableObj.getdataListParm.parammaps.contractCode  = ''
+      this.tableObj.getdataListParm.parammaps.customerId  = ''
+      this.tableObj.getdataListParm.parammaps.groupId  = ''
+      this.tableObj.getdataListParm.parammaps.inputDatetime  = ''
+      this.tableObj.getdataListParm.parammaps.beginDate  = ''
+      this.tableObj.getdataListParm.parammaps.endDate  = ''
+      this.tableObj.getdataListParm.parammaps.stockupIds  = ''
+      this.tableObj.getdataListParm.parammaps.stockupCode  = ''
+
+      
+      
+      this.tableObj.getdataListParm.parammaps.customerName = ''
+
+      this.tableObj.getdataListParm.parammaps.employeeId  = ''
+    
+      this.tableObj.getdataListParm.offset = 1
+      this.get_table_data()
+    },
+
+
+    //监听 - 表格 - 勾选
+    change_table_selection(val) {
+      console.log('勾选数据', val)
+      this.selectList = val
+     
+      this.stockData.selectList = this.selectList 
+    },
+
+
+     
+  }
+}
+</script>

src/componentView/ToDoApplyList.vue

@@ -0,0 +1,224 @@
+<template>
+<div style="padding-bottom:50px;">
+ 
+  <div class="table">
+
+ 
+      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" >
+         
+        <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
+          <template slot-scope="scope">
+            <span>{{ scope.$index +   1 }}</span>
+          </template>
+        </el-table-column>
+       
+        <el-table-column label="申请类型" min-width="120px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.approvalTypeName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="单据编号" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.orderCode  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建人" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.createrName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.createrDate  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width" fixed="right">
+          <template slot-scope="{row}">
+            <!-- <el-button  class="miniSuccess" v-show = "row.serviceName == '远程服务'" @click="form_detail1(row)">去完成</el-button>
+             -->
+            <el-button  class="miniSuccess" v-if="row.typeName =='合同申请' && row.isDo == 1"  @click="form_detail1(row)">去审批</el-button>
+            <el-button  class="miniPrimary" v-if="row.typeName =='合同申请' && row.isDo == 0"  @click="form_detail1(row)">查看</el-button>
+
+            <el-button class="miniSuccess"  v-if="row.typeName =='出差申请'  && row.isDo == 1"  @click="form_detail2(row)">去审批</el-button>
+            <el-button  class="miniPrimary" v-if="row.typeName =='出差申请' && row.isDo == 0"  @click="form_detail2(row)">查看</el-button>
+
+            <el-button class="miniSuccess" v-if="row.typeName =='报销申请'  && row.isDo == 1"   @click="form_detail3(row)">去审批</el-button>
+            <el-button  class="miniPrimary" v-if="row.typeName =='报销申请' && row.isDo == 0"  @click="form_detail3(row)">查看</el-button>
+             
+
+         
+
+
+          </template>
+        </el-table-column>
+       
+       
+      </el-table>
+       
+    </div>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'ToDoApplyList',
+  components: { Pagination },
+  props: {
+    todoApply: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+   
+      //列表请求
+      tableObj: {
+        getdataListParm: {
+          name: 'getCheckToDoList',
+          // page: 1,
+          // offset: 1,
+          // pagecount: 50,
+          // returntype: 'Map',
+          parammaps: {  "userId":Cookies.get('g_userId'), }
+        },
+        tableKey: 0,
+        list: [
+          
+        
+        ],
+        total: 0,
+        listLoading: false,
+        temp: {},
+ 
+        
+        
+      },
+      isokDisable: false,
+      selectList: [],
+         rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+         cellStyle: { padding: 0 + 'px' }
+      
+
+      
+    }
+  },
+ watch: {
+  todoApply: {
+      deep: true,
+      handler: function (item) {
+         console.log("父组件：", item)
+
+        //  if(item.title == 'see'){
+        //     this.tableObj.getdataListParm.parammaps.stockupIds = item.stockupIds
+        //     this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery2' 
+        //   }else{
+        //       this.tableObj.getdataListParm.parammaps.stockupIds = ""
+        //       this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery' 
+        //   }
+
+        //   this.get_table_data()
+       
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+
+    this.get_table_data()
+ 
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+ 
+
+    //加载表格
+    get_table_data() {
+      
+      this.tableObj.listLoading = true
+      GetDataByName(this.tableObj.getdataListParm).then(response => {
+        console.log('table数据', response.data.list)
+        if (response.data.list !== null) {
+
+          this.tableObj.list = response.data.list
+          this.tableObj.pageNum = response.data.pageNum
+          this.tableObj.pageSize = response.data.pageSize
+          this.tableObj.total = response.data.total
+        } else {
+          this.tableObj.list = []
+        }
+        setTimeout(() => {
+          this.tableObj.listLoading = false
+        }, 100)
+      })
+    },
+
+ 
+
+
+   
+
+    //事件 - 清空查询信息
+    form_clear() {
+      console.log('点击了重置')
+       
+      this.tableObj.getdataListParm.parammaps.contractCode  = ''
+ 
+    
+      this.tableObj.getdataListParm.offset = 1
+      this.get_table_data()
+    },
+
+ 
+    form_detail1(row) {
+      console.log('点击了合同款项 ', row)
+      //var codeNum = "CT221013001"
+       var codeNum = row.orderCode
+      // 跳合同款项 - 查看
+      this.$router.push({ name: 'ContractApproval', params: { rowData: row, isHome: 'home',codeNum:codeNum }})
+
+      
+    },
+
+    form_detail2(row) {
+      console.log('点击了远程服务款项', row)
+      // 跳远程服务款项 - 查看
+       //var codeNum = "BT221009002"
+        
+       var codeNum = row.orderCode
+      this.$router.push({ name: 'BusinessTravelApproval', params: { rowData: row, isHome: 'home',codeNum:codeNum }})
+    },
+
+    form_detail3(row) {
+      console.log('点击了现场服务款项', row)
+      // 跳现场服务款项- 查看
+       //  var codeNum = "FS221014001"
+     var codeNum = row.orderCode
+       this.$router.push({ name: 'ExpensesApplyApproval', params: { rowData: row, isHome: 'home',codeNum:codeNum }})
+    },
+
+
+
+
+   
+
+
+     
+  }
+}
+</script>

src/componentView/ToDoCompleteList.vue

@@ -0,0 +1,204 @@
+<template>
+<div style="padding-bottom:50px;">
+ 
+  <div class="table">
+
+ 
+      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" >
+         
+        <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
+          </template>
+        </el-table-column>
+       
+        <el-table-column label="服务类型" min-width="120px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.serviceName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="单据编号" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.serviceCode  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="服务开始时间" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.beginDate  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width" fixed="right">
+          <template slot-scope="{row}">
+            <el-button  class="miniSuccess" v-show = "row.serviceName == '远程服务'" @click="form_detail1(row)">去完成</el-button>
+            <el-button class="miniSuccess"  v-show = "row.serviceName == '现场服务'" @click="form_detail2(row)">去完成</el-button>
+            <el-button class="miniSuccess"  v-show = "row.serviceName == '维修服务'" @click="form_detail3(row)">去完成</el-button>
+          </template>
+        </el-table-column>
+       
+       
+      </el-table>
+       
+    </div>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'ToDoCompleteList',
+  components: { Pagination },
+  props: {
+    todoComplete: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+   
+      //列表请求
+      tableObj: {
+        getdataListParm: {
+          name: 'getServiceToDoList',
+          page: 1,
+          offset: 1,
+          pagecount: 50,
+          returntype: 'Map',
+          parammaps: {  "userId":Cookies.get('g_userId'), }
+        },
+        tableKey: 0,
+        list: [
+          
+        
+        ],
+        total: 0,
+        listLoading: false,
+        temp: {},
+ 
+        
+        
+      },
+      isokDisable: false,
+      selectList: [],
+         rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+         cellStyle: { padding: 0 + 'px' }
+      
+
+      
+    }
+  },
+ watch: {
+    todoComplete: {
+      deep: true,
+      handler: function (item) {
+         console.log("父组件：", item)
+
+        //  if(item.title == 'see'){
+        //     this.tableObj.getdataListParm.parammaps.stockupIds = item.stockupIds
+        //     this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery2' 
+        //   }else{
+        //       this.tableObj.getdataListParm.parammaps.stockupIds = ""
+        //       this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery' 
+        //   }
+
+        //   this.get_table_data()
+       
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+
+    this.get_table_data()
+ 
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+ 
+
+    //加载表格
+    get_table_data() {
+      
+      this.tableObj.listLoading = true
+      GetDataByName(this.tableObj.getdataListParm).then(response => {
+        console.log('table数据', response.data.list)
+        if (response.data.list !== null) {
+
+          this.tableObj.list = response.data.list
+          this.tableObj.pageNum = response.data.pageNum
+          this.tableObj.pageSize = response.data.pageSize
+          this.tableObj.total = response.data.total
+        } else {
+          this.tableObj.list = []
+        }
+        setTimeout(() => {
+          this.tableObj.listLoading = false
+        }, 100)
+      })
+    },
+
+ 
+
+
+   
+
+    //事件 - 清空查询信息
+    form_clear() {
+      console.log('点击了重置')
+       
+      this.tableObj.getdataListParm.parammaps.contractCode  = ''
+ 
+    
+      this.tableObj.getdataListParm.offset = 1
+      this.get_table_data()
+    },
+
+ 
+    form_detail1(row) {
+      console.log('点击了远程服务 ', row)
+      //  var codeNum = "RS221014001"
+      var codeNum = row.serviceCode
+      // 跳远程服务 - 查看
+      this.$router.push({ name: 'RemoteService', params: { rowData: row, isHome: 'home',codeNum:codeNum }})
+
+      
+    },
+
+    form_detail2(row) {
+      console.log('点击了现场服务', row)
+      // 跳现场服务 - 查看
+      //  var codeNum = "FS221014001"
+      var codeNum = row.serviceCode
+      this.$router.push({ name: 'siteService', params: { rowData: row, isHome: 'home',codeNum:codeNum }})
+    },
+
+    form_detail3(row) {
+      console.log('点击了维修服务', row)
+      // 跳维修服务 - 查看
+       // var codeNum = "MS221012002"
+      var codeNum = row.serviceCode
+       this.$router.push({ name: 'RepairService', params: { rowData: row, isHome: 'home',codeNum:codeNum }})
+    },
+
+
+   
+
+
+     
+  }
+}
+</script>

src/componentView/ToDoDeliveryList.vue

@@ -0,0 +1,218 @@
+<template>
+<div style="padding-bottom:50px;">
+ 
+  <div class="table">
+
+ 
+      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" >
+         
+        <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
+          </template>
+        </el-table-column>
+       
+        <el-table-column label="备货单号" min-width="120px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.stockupCode  }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="客户名称" min-width="140px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.customerName  }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="货品描述" min-width="220px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.goodsDescribe  }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="发货进度" min-width="100px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.progress  }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="未发货货品" min-width="220px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.unPostGoodsDescribe  }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="预定发货时间" min-width="100px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.planSendDate  }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="创建人" min-width="80px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.createrName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" min-width="120px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.createrDate  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="80" class-name="small-padding fixed-width" fixed="right">
+          <template slot-scope="{row}">
+            <el-button  class="miniSuccess" @click="form_detail1(row)">去发货</el-button>
+          </template>
+        </el-table-column>
+       
+       
+      </el-table>
+       
+    </div>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'ToDoDeliveryList',
+  components: { Pagination },
+  props: {
+    todoDelivery: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+   
+      //列表请求
+      tableObj: {
+        getdataListParm: {
+          name: 'getDeliveryToDoList',
+          page: 1,
+          offset: 1,
+          pagecount: 1000,
+          returntype: 'Map',
+          parammaps: {  "userId":Cookies.get('g_userId'), }
+        },
+        tableKey: 0,
+        list: [
+          
+        
+        ],
+        total: 0,
+        listLoading: false,
+        temp: {},
+ 
+        
+        
+      },
+      isokDisable: false,
+      selectList: [],
+         rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+         cellStyle: { padding: 0 + 'px' }
+      
+
+      
+    }
+  },
+ watch: {
+    todoDelivery: {
+      deep: true,
+      handler: function (item) {
+         console.log("父组件：", item)
+
+        //  if(item.title == 'see'){
+        //     this.tableObj.getdataListParm.parammaps.stockupIds = item.stockupIds
+        //     this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery2' 
+        //   }else{
+        //       this.tableObj.getdataListParm.parammaps.stockupIds = ""
+        //       this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery' 
+        //   }
+
+        //   this.get_table_data()
+       
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+
+    this.get_table_data()
+ 
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+ 
+
+    //加载表格
+    get_table_data() {
+      
+      this.tableObj.listLoading = true
+      GetDataByName(this.tableObj.getdataListParm).then(response => {
+        console.log('table数据', response.data.list)
+        if (response.data.list !== null) {
+
+          this.tableObj.list = response.data.list
+          this.tableObj.pageNum = response.data.pageNum
+          this.tableObj.pageSize = response.data.pageSize
+          this.tableObj.total = response.data.total
+        } else {
+          this.tableObj.list = []
+        }
+        setTimeout(() => {
+          this.tableObj.listLoading = false
+        }, 100)
+      })
+    },
+
+ 
+
+
+   
+
+    //事件 - 清空查询信息
+    form_clear() {
+      console.log('点击了重置')
+       
+     
+      this.tableObj.getdataListParm.parammaps.employeeId  = ''
+    
+      this.tableObj.getdataListParm.offset = 1
+      this.get_table_data()
+    },
+
+
+    //  
+    form_detail1(row) {
+      console.log('点击了拜访记录', row)
+      // 跳备货 - 新增
+      this.$router.push({ name: 'deliveryRecord', params: { rowData: row, isHome: 'home' }})
+
+      
+    },
+
+   
+
+
+   
+
+
+     
+  }
+}
+</script>

src/componentView/ToDoRecordList.vue

@@ -0,0 +1,191 @@
+<template>
+  <div style="padding-bottom:50px;">
+   
+    <div class="table">
+  
+   
+        <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" >
+           
+          <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
+            <template slot-scope="scope">
+              <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
+            </template>
+          </el-table-column>
+         
+          <el-table-column label="合同编号" min-width="120px" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{ scope.row.orderCode  }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建人" min-width="110px" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{ scope.row.createrName  }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="创建时间" min-width="110px" align="center" show-overflow-tooltip>
+            <template slot-scope="scope">
+              <span>{{ scope.row.createrDate  }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width" fixed="right">
+            <template slot-scope="{row}">
+              <!-- <el-button  class="miniSuccess" v-show = "row.serviceName == '远程服务'" @click="form_detail1(row)">去完成</el-button>
+               -->
+              <el-button  class="miniSuccess"   @click="form_detail1(row)">去备案</el-button>
+            </template>
+          </el-table-column>
+         
+         
+        </el-table>
+         
+      </div>
+  </div> 
+  </template>
+  <script>
+   
+  
+  import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+  import Cookies from 'js-cookie'
+  import { parseTime } from '@/utils/index.js'
+  import Pagination from '@/components/Pagination'
+  import { MessageBox } from 'element-ui'
+  import { getToken } from '@/utils/auth'
+  
+  export default {
+    name: 'ToDoRecordList',
+    components: { Pagination },
+    props: {
+      todoRecord: {
+        type: Object,
+        required: true
+      } 
+    },
+    data() {
+      return {
+     
+        //列表请求
+        tableObj: {
+          getdataListParm: {
+            name: 'getBAToDoList',
+            page: 1,
+            offset: 1,
+            pagecount: 1000,
+            returntype: 'Map',
+            parammaps: {  "userId":Cookies.get('g_userId'), }
+          },
+          tableKey: 0,
+          list: [
+            
+          
+          ],
+          total: 0,
+          listLoading: false,
+          temp: {},
+   
+          
+          
+        },
+        isokDisable: false,
+        selectList: [],
+           rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+           cellStyle: { padding: 0 + 'px' }
+        
+  
+        
+      }
+    },
+   watch: {
+    todoRecord: {
+        deep: true,
+        handler: function (item) {
+           console.log("父组件：", item)
+  
+          //  if(item.title == 'see'){
+          //     this.tableObj.getdataListParm.parammaps.stockupIds = item.stockupIds
+          //     this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery2' 
+          //   }else{
+          //       this.tableObj.getdataListParm.parammaps.stockupIds = ""
+          //       this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery' 
+          //   }
+  
+          //   this.get_table_data()
+         
+        }
+      },
+   
+    },
+    mounted() {
+       
+    },
+  
+  
+    created() {
+  
+      this.get_table_data()
+   
+    },
+    beforeDestroy() {
+      
+    },
+    methods: {
+   
+  
+      //加载表格
+      get_table_data() {
+        
+        this.tableObj.listLoading = true
+        GetDataByName(this.tableObj.getdataListParm).then(response => {
+          console.log('table数据', response.data.list)
+          if (response.data.list !== null) {
+  
+            this.tableObj.list = response.data.list
+            this.tableObj.pageNum = response.data.pageNum
+            this.tableObj.pageSize = response.data.pageSize
+            this.tableObj.total = response.data.total
+          } else {
+            this.tableObj.list = []
+          }
+          setTimeout(() => {
+            this.tableObj.listLoading = false
+          }, 100)
+        })
+      },
+  
+   
+  
+  
+     
+  
+      //事件 - 清空查询信息
+      form_clear() {
+        console.log('点击了重置')
+         
+        this.tableObj.getdataListParm.parammaps.contractCode  = ''
+   
+      
+        this.tableObj.getdataListParm.offset = 1
+        this.get_table_data()
+      },
+  
+   
+      form_detail1(row) {
+        console.log('点击了合同款项 ', row)
+       //  var codeNum = "CT221011001"
+        var codeNum = row.orderCode
+        // 跳合同款项 - 查看
+        this.$router.push({ name: 'ContractInfo', params: { rowData: row, isHome: 'home',codeNum:codeNum }})
+  
+        
+      },
+  
+       
+  
+  
+     
+  
+  
+       
+    }
+  }
+  </script>
+  

src/componentView/ToDoReviewList.vue

@@ -0,0 +1,240 @@
+<template>
+<div style="padding-bottom:50px;">
+ 
+  <div class="table">
+
+ 
+      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" >
+         
+        <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
+          </template>
+        </el-table-column>
+       
+        <el-table-column label="款项类型" min-width="120px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.costTypeName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="单据编号" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.orderCode  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.customerName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="合同金额" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.cost  }}</span>
+          </template>
+        </el-table-column>
+            
+ 
+        <el-table-column label="创建人" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.createrName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width" fixed="right">
+          <template slot-scope="{row}">
+            <!-- <el-button  class="miniSuccess" v-show = "row.serviceName == '远程服务'" @click="form_detail1(row)">去完成</el-button>
+             -->
+            <el-button  class="miniSuccess"  v-if="row.costTypeName =='合同款项' " @click="form_detail1(row)">去完成</el-button>
+            <el-button class="miniSuccess"   v-if="row.costTypeName =='远程服务款项' " @click="form_detail2(row)">去完成</el-button>
+            <el-button class="miniSuccess"   v-if="row.costTypeName =='现场服务款项' " @click="form_detail3(row)">去完成</el-button>
+            <el-button class="miniSuccess"   v-if="row.costTypeName =='维修服务款项' " @click="form_detail4(row)">去完成</el-button>
+            <el-button class="miniSuccess"    v-if="row.costTypeName =='报销款项' "@click="form_detail5(row)">去完成</el-button>
+          </template>
+        </el-table-column>
+       
+       
+      </el-table>
+       
+    </div>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'ToDoReviewList',
+  components: { Pagination },
+  props: {
+    todoReview: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+   
+      //列表请求
+      tableObj: {
+        getdataListParm: {
+          name: 'getCostToDoList',
+          page: 1,
+          offset: 1,
+          pagecount: 1000,
+          returntype: 'Map',
+          parammaps: {
+            "userId":Cookies.get('g_userId'),
+           }
+        },
+        tableKey: 0,
+        list: [
+          
+        
+        ],
+        total: 0,
+        listLoading: false,
+        temp: {},
+ 
+        
+        
+      },
+      isokDisable: false,
+      selectList: [],
+         rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+         cellStyle: { padding: 0 + 'px' }
+      
+
+      
+    }
+  },
+ watch: {
+  todoReview: {
+      deep: true,
+      handler: function (item) {
+         console.log("父组件：", item)
+
+        //  if(item.title == 'see'){
+        //     this.tableObj.getdataListParm.parammaps.stockupIds = item.stockupIds
+        //     this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery2' 
+        //   }else{
+        //       this.tableObj.getdataListParm.parammaps.stockupIds = ""
+        //       this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery' 
+        //   }
+
+        //   this.get_table_data()
+       
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+
+    this.get_table_data()
+ 
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+ 
+
+    //加载表格
+    get_table_data() {
+      
+      this.tableObj.listLoading = true
+      GetDataByName(this.tableObj.getdataListParm).then(response => {
+        console.log('table数据', response.data.list)
+        if (response.data.list !== null) {
+
+          this.tableObj.list = response.data.list
+          this.tableObj.pageNum = response.data.pageNum
+          this.tableObj.pageSize = response.data.pageSize
+          this.tableObj.total = response.data.total
+        } else {
+          this.tableObj.list = []
+        }
+        setTimeout(() => {
+          this.tableObj.listLoading = false
+        }, 100)
+      })
+    },
+
+ 
+
+
+   
+
+    //事件 - 清空查询信息
+    form_clear() {
+      console.log('点击了重置')
+       
+      this.tableObj.getdataListParm.parammaps.contractCode  = ''
+ 
+    
+      this.tableObj.getdataListParm.offset = 1
+      this.get_table_data()
+    },
+
+ 
+    form_detail1(row) {
+      console.log('点击了合同款项 ', row)
+      // var codeNum = "CT220711003"
+      var codeNum = row.contractCode
+      var stages = row.stages
+      // 跳合同款项 - 查看
+      this.$router.push({ name: 'ContractPayment', params: { rowData: row, isHome: 'home',codeNum:codeNum, stages:stages }})
+
+      
+    },
+
+    form_detail2(row) {
+      console.log('点击了远程服务款项', row)
+      // 跳远程服务款项 - 查看
+     // var codeNum = "RS221009001"
+      var codeNum = row.contractCode
+      this.$router.push({ name: 'RemotePayment', params: { rowData: row, isHome: 'home',codeNum:codeNum }})
+    },
+
+    form_detail3(row) {
+      console.log('点击了现场服务款项', row)
+      // 跳现场服务款项- 查看
+      // var codeNum = "FS221014001"
+      var codeNum = row.contractCode
+       this.$router.push({ name: 'SitePayment', params: { rowData: row, isHome: 'home',codeNum:codeNum }})
+    },
+
+    form_detail4(row) {
+      console.log('点击了维修服务款项', row)
+      // 跳维修服务款项- 查看
+      // var codeNum = "MS221012001"
+      var codeNum = row.contractCode
+       this.$router.push({ name: 'RepairPayment', params: { rowData: row, isHome: 'home',codeNum:codeNum }})
+    },
+
+    form_detail5(row) {
+      console.log('点击了报销款项', row)
+      // 跳报销款项- 查看
+       //var codeNum = "EA220928003"
+       var codeNum = row.contractCode
+       this.$router.push({ name: 'ExpensesPayment', params: { rowData: row, isHome: 'home',codeNum:codeNum }})
+    },
+
+
+
+   
+
+
+     
+  }
+}
+</script>

src/componentView/ToDoStockList.vue

@@ -0,0 +1,200 @@
+<template>
+<div style="padding-bottom:50px;">
+ 
+  <div class="table">
+
+ 
+      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" >
+         
+        <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
+          </template>
+        </el-table-column>
+       
+        <el-table-column label="合同编号" min-width="120px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.contractCode  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户名称" min-width="140px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.customerName  }}</span>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="货品描述" min-width="220px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.goodsDescribe  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建人" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.createrName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="创建时间" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.createrDate  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width" fixed="right">
+          <template slot-scope="{row}">
+            <el-button  class="miniSuccess" @click="form_detail1(row)">去备货</el-button>
+          </template>
+        </el-table-column>
+       
+       
+      </el-table>
+       
+    </div>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'ToDoStockList',
+  components: { Pagination },
+  props: {
+    todoStock: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+   
+      //列表请求
+      tableObj: {
+        getdataListParm: {
+          name: 'getStockupToDoList',
+          page: 1,
+          offset: 1,
+          pagecount: 1000,
+          returntype: 'Map',
+          parammaps: {  "userId":Cookies.get('g_userId'), }
+        },
+        tableKey: 0,
+        list: [
+          
+        
+        ],
+        total: 0,
+        listLoading: false,
+        temp: {},
+ 
+        
+        
+      },
+      isokDisable: false,
+      selectList: [],
+         rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+         cellStyle: { padding: 0 + 'px' }
+      
+
+      
+    }
+  },
+ watch: {
+    todoStock: {
+      deep: true,
+      handler: function (item) {
+         console.log("父组件：", item)
+
+        //  if(item.title == 'see'){
+        //     this.tableObj.getdataListParm.parammaps.stockupIds = item.stockupIds
+        //     this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery2' 
+        //   }else{
+        //       this.tableObj.getdataListParm.parammaps.stockupIds = ""
+        //       this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery' 
+        //   }
+
+        //   this.get_table_data()
+       
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+
+    this.get_table_data()
+ 
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+ 
+
+    //加载表格
+    get_table_data() {
+      
+      this.tableObj.listLoading = true
+      GetDataByName(this.tableObj.getdataListParm).then(response => {
+        console.log('table数据', response.data.list)
+        if (response.data.list !== null) {
+
+          this.tableObj.list = response.data.list
+          this.tableObj.pageNum = response.data.pageNum
+          this.tableObj.pageSize = response.data.pageSize
+          this.tableObj.total = response.data.total
+        } else {
+          this.tableObj.list = []
+        }
+        setTimeout(() => {
+          this.tableObj.listLoading = false
+        }, 100)
+      })
+    },
+
+ 
+
+
+   
+
+    //事件 - 清空查询信息
+    form_clear() {
+      console.log('点击了重置')
+       
+   
+
+      this.tableObj.getdataListParm.parammaps.employeeId  = ''
+    
+      this.tableObj.getdataListParm.offset = 1
+      this.get_table_data()
+    },
+
+
+    //  
+    form_detail1(row) {
+      console.log('点击了备货记录', row)
+      var contractId = row.id
+      // 跳备货 - 新增
+      this.$router.push({ name: 'stockNotice', params: { rowData: row, isHome: 'home' ,contractId:contractId }})
+
+      
+    },
+
+   
+
+
+   
+
+
+     
+  }
+}
+</script>

src/componentView/ToDoVisitList.vue

@@ -0,0 +1,187 @@
+<template>
+<div style="padding-bottom:50px;">
+ 
+  <div class="table">
+
+ 
+      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" >
+         
+        <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
+          </template>
+        </el-table-column>
+       
+        <el-table-column label="客户名称" min-width="120px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.customerName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="所属集团" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.groupName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="计划回访日期" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.vdate  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width" fixed="right">
+          <template slot-scope="{row}">
+            <el-button  class="miniSuccess" @click="form_detail1(row)">拜访记录</el-button>
+            <el-button class="miniSuccess" @click="form_detail2(row)">电话回访</el-button>
+          </template>
+        </el-table-column>
+       
+       
+      </el-table>
+       
+    </div>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'ToDoVisitList',
+  components: { Pagination },
+  props: {
+    todoVisit: {
+      type: Object,
+      required: true
+    } 
+  },
+  data() {
+    return {
+   
+      //列表请求
+      tableObj: {
+        getdataListParm: {
+          name: 'getVisitToDoList',
+          page: 1,
+          offset: 1,
+          pagecount: 50,
+          returntype: 'Map',
+          parammaps: { "userId":Cookies.get('g_userId'),}
+        },
+        tableKey: 0,
+        list: [
+          
+        
+        ],
+        total: 0,
+        listLoading: false,
+        temp: {},
+ 
+        
+        
+      },
+      isokDisable: false,
+      selectList: [],
+         rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+         cellStyle: { padding: 0 + 'px' }
+      
+
+      
+    }
+  },
+ watch: {
+    todoVisit: {
+      deep: true,
+      handler: function (item) {
+         console.log("父组件：", item)
+
+        //  if(item.title == 'see'){
+        //     this.tableObj.getdataListParm.parammaps.stockupIds = item.stockupIds
+        //     this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery2' 
+        //   }else{
+        //       this.tableObj.getdataListParm.parammaps.stockupIds = ""
+        //       this.tableObj.getdataListParm.name =  'getStockupSelectByDelivery' 
+        //   }
+
+        //   this.get_table_data()
+       
+      }
+    },
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+
+    this.get_table_data()
+ 
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+ 
+
+    //加载表格
+    get_table_data() {
+      
+      this.tableObj.listLoading = true
+      GetDataByName(this.tableObj.getdataListParm).then(response => {
+        console.log('table数据', response.data.list)
+        if (response.data.list !== null) {
+
+          this.tableObj.list = response.data.list
+          this.tableObj.pageNum = response.data.pageNum
+          this.tableObj.pageSize = response.data.pageSize
+          this.tableObj.total = response.data.total
+        } else {
+          this.tableObj.list = []
+        }
+        setTimeout(() => {
+          this.tableObj.listLoading = false
+        }, 100)
+      })
+    },
+
+ 
+
+
+   
+
+    //事件 - 清空查询信息
+    form_clear() {
+      console.log('点击了重置')
+      this.tableObj.getdataListParm.offset = 1
+      this.get_table_data()
+    },
+
+
+    //  
+    form_detail1(row) {
+      console.log('点击了拜访记录', row)
+      // 跳拜访记录 - 新增
+      this.$router.push({ name: 'visitRecord', params: { rowData: row, isHome: 'home' }})
+
+      
+    },
+
+    form_detail2(row) {
+      console.log('点击了电话记录', row)
+      this.$router.push({ name: 'TelephoneFollow', params: { rowData: row, isHome: 'home' }})
+    },
+
+
+   
+
+
+     
+  }
+}
+</script>

src/componentView/TravelDetail.vue

@@ -0,0 +1,409 @@
+<template>
+<div style="padding-bottom:20px;">
+  <div class="search">
+      <el-row :gutter="0">
+        <el-col :span="21">
+ 
+          
+            <el-input  v-model="tableObj.getdataListParm.parammaps.travelCode " class="filter-item" style="width: 120px;" placeholder="出差单编号"/>
+          
+            <el-date-picker v-model="tableObj.getdataListParm.parammaps.inputDatetime1" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="计划开始时间" end-placeholder="计划开始时间" style="width: 250px;" />
+
+            <el-date-picker v-model="tableObj.getdataListParm.parammaps.inputDatetime2" class="inputDatetime filter-item" type="daterange" range-separator="至" start-placeholder="计划结束时间" end-placeholder="计划结束时间" style="width: 250px;" />
+
+            <el-input v-model="tableObj.getdataListParm.parammaps.beginServiceCost" placeholder="计划费用" style="width:80px"></el-input>
+                -
+            <el-input v-model="tableObj.getdataListParm.parammaps.endServiceCost" placeholder="计划费用" style="width:80px"></el-input>
+
+
+              <el-autocomplete v-model="tableObj.getdataListParm.parammaps.customerName" :fetch-suggestions="customer_search" placeholder="客户名称" style="width: 200px;margin-right:10px" @select="change_customer_select" @clear="clear_customer_select" @blur="customer_search_blur" clearable>
+                <template slot-scope="{ item }">
+                  <span class="name">{{ item.name }}</span>
+                </template>
+              </el-autocomplete>
+
+              <el-select v-model="tableObj.getdataListParm.parammaps.groupId" placeholder="集团" class="filter-item" style="width: 120px;" clearable>
+                <el-option v-for="item in groupNameList" :key="item.id" :label="item.name" :value="item.id" />
+              </el-select>
+
+
+        </el-col>
+        <el-col :span="3">
+            <el-button class="successBorder" @click="form_search">查询</el-button>
+            <el-button class="successBorder" @click="form_clear">重置</el-button>
+        </el-col>
+      </el-row>
+  </div>
+  <div class="table">
+ 
+      <el-table :key="tableObj.tableKey" v-loading="tableObj.listLoading" element-loading-text="给我一点时间" :data="tableObj.list" border fit   style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed" @row-click="choose_one"  highlight-current-row >
+
+ 
+       <el-table-column width="40px" fixed="left">
+          <template slot-scope="scope">
+            <el-radio v-model="radio" :label="scope.row.id">
+              <span class="el-radio__label"></span>
+            </el-radio>
+          </template>
+        </el-table-column>
+
+        <!-- <el-table-column type="selection" align="center" width="50" /> -->
+        <el-table-column label="序号" align="center" type="index" width="50px" fixed="left">
+          <template slot-scope="scope">
+            <span>{{ scope.$index + (tableObj.pageNum-1) * tableObj.pageSize + 1 }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="出差单编号" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span >{{ scope.row.travelCode  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="计划开始时间" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.planBeginDate  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="计划结束时间" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.planSuccessDate  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="计划费用(元)" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.serviceCost  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="客户名称" min-width="120px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.customerName  }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="所属集团" min-width="110px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.groupName  }}</span>
+          </template>
+        </el-table-column>
+       
+        <el-table-column label="目的地" min-width="90px" align="center"  >
+          <template slot-scope="scope">
+            <span>{{ scope.row.adress }}</span>
+          </template>
+        </el-table-column>-
+        <el-table-column label="出差目的" min-width="90px" align="center"  >
+          <template slot-scope="scope">
+            <span>{{ scope.row.reason }}</span>
+          </template>
+        </el-table-column>
+         <el-table-column label="备注" min-width="120px" align="center" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.remark }}</span>
+          </template>
+        </el-table-column>
+       
+       
+      </el-table>
+      <pagination v-show="tableObj.total>=0" :total="tableObj.total" :page.sync="tableObj.getdataListParm.offset" :limit.sync="tableObj.getdataListParm.pagecount" @pagination="get_table_data" />
+  
+  </div>
+</div> 
+</template>
+<script>
+ 
+
+import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+import { MessageBox } from 'element-ui'
+import { getToken } from '@/utils/auth'
+
+export default {
+  name: 'TravelDetail',
+  components: { Pagination },
+  props: {
+    travelData: {
+      type: Object,
+      required: true,
+      default:{}
+    } 
+  },
+  data() {
+    return {
+
+    
+
+      radio: null, // 如果使用单选框，定义一个model值
+      currentSelectItem: {}, //当前选中的值
+
+       send_select_list: [
+        { name: 'getDictListSelect1', offset: 0, pagecount: 0, parammaps: { "pid": "54" } },
+      ],
+      // 客户名称 - 下拉框
+      customerNameList: [
+        // {id: 1425, name: "测试12"},
+        // {id: 1423, name: "朝日牧场（唯品牧场）"},
+        // {id: 1422, name: "富源牧业（眉山）有限公司（眉山富源）"}
+      ], 
+ 
+      //集团 - 下拉框
+      groupNameList: [
+        // {id: 253, name: "无"}, 
+        // {id: 207, name: "星连星牧业"}, 
+        // {id: 208, name: "海高牧业"}, 
+        // {id: 254, name: "完达山"}
+      ],
+       
+      //创建人 - 下拉框
+      createrNameList: [
+        // {id: 3072707379235128300, name: "管理员"}, 
+        // {id: 3248184121834865700, name: "杨文山"}
+      ],
+
+      //列表请求
+      tableObj: {
+        getdataListParm: {
+          name: 'getBusinessTravelSelect',
+          page: 1,
+          offset: 1,
+          pagecount: 10,
+          returntype: 'Map',
+          parammaps: {
+            travelCode: '',
+            customerId: '',
+            customerName: '',
+            groupName: '',
+            groupId: '',
+            employeeId: '',
+            statusName: '',
+            begainCreaterDate: '',
+            endCreaterDate: '',
+            beginServiceCost: '',
+            endServiceCost: '',
+       
+            inputDatetime1: "",
+            inputDatetime1: "", 
+
+            beginPlanBeginDate: "",
+            endPlanBeginDate: "",
+            beginPlanSuccessDate: "",
+            endPlanSuccessDate: "",
+     
+     
+          }
+        },
+        tableKey: 0,
+        list: [
+          
+        
+        ],
+        total: 0,
+        listLoading: false,
+        temp: {},
+ 
+        
+        
+      },
+      isokDisable: false,
+      selectList: [],
+         rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+         cellStyle: { padding: 0 + 'px' }
+      
+
+      
+    }
+  },
+ watch: {
+    travelData: {
+      deep: true,
+      handler: function (item) {
+         console.log("父组件：", item)
+
+      
+          this.get_select_list()
+          this.get_table_data()
+       
+      }
+    },
+
+    radioGroup: {
+
+      handler(val) {
+
+        console.log("radioGroup:", this.radioGroup);
+
+      },
+
+    },
+ 
+ 
+  },
+  mounted() {
+     
+  },
+
+
+  created() {
+
+    console.log("父组件：", this.travelData)
+
+     this.travelData.selectList = []
+ 
+
+      this.get_select_list()
+    
+      this.get_table_data()
+ 
+  },
+  beforeDestroy() {
+    
+  },
+  methods: {
+
+
+      
+
+   
+ 
+    //获取所有下拉框的内容
+    get_select_list() {
+      GetDataByNames(this.send_select_list).then(response => {
+ 
+        this.groupNameList = response.data.getDictListSelect1.list
+        console.log("集团下拉框", this.groupNameList)
+
+ 
+         
+      })
+
+    },
+
+
+    
+
+    //加载表格
+    get_table_data() {
+      
+      this.tableObj.listLoading = true
+
+
+      this.tableObj.getdataListParm.employeeId = Cookies.get('employeid')
+      GetDataByName(this.tableObj.getdataListParm).then(response => {
+        console.log('table数据', response.data.list)
+        if (response.data.list !== null) {
+
+          this.tableObj.list = response.data.list
+          this.tableObj.pageNum = response.data.pageNum
+          this.tableObj.pageSize = response.data.pageSize
+          this.tableObj.total = response.data.total
+        } else {
+          this.tableObj.list = []
+        }
+        setTimeout(() => {
+          this.tableObj.listLoading = false
+        }, 100)
+      })
+    },
+
+    
+
+
+    //模糊查询客户
+    customer_search(queryString, cb) {
+      console.log('模糊查询输入值', queryString)
+      GetDataByName({ name: 'getCustomerNameFuzzy', page: 1, offset: 1, pagecount: 10, returntype: 'Map', parammaps: { inputvalue: queryString } }).then(response => {
+        this.customerNameList = response.data.list
+        console.log("客户名称下拉框", response)
+        cb(response.data.list)
+        // this.$refs.elautocomplete.handleFocus()
+      })
+    },
+
+    //模糊查询客户选择
+    change_customer_select(item) {
+      console.log('客户名称模糊查询选中值', item)
+      this.tableObj.getdataListParm.parammaps.customerId = item.id
+      this.tableObj.getdataListParm.parammaps.customerName = item.name
+      this.$forceUpdate()
+    },
+    //清空客户选择
+    clear_customer_select(item) {
+      document.activeElement.blur()
+      this.tableObj.getdataListParm.parammaps.customerId = ""
+      this.tableObj.getdataListParm.parammaps.customerName = ""
+      this.customerNameList = []
+    },
+
+    //客户失去焦点
+    customer_search_blur(item) {
+      console.log("客户失去焦点")
+      this.tableObj.getdataListParm.parammaps.customerId = ""
+      this.tableObj.getdataListParm.parammaps.customerName = ""
+      this.customerNameList = []
+
+    },
+
+
+    //监听 - 表单查询
+    form_search() {
+      console.log('点击了查询', this.tableObj.getdataListParm.parammaps)
+   
+      this.tableObj.getdataListParm.offset = 1
+      this.get_table_data()
+    },
+
+    //事件 - 清空查询信息
+    form_clear() {
+      console.log('点击了重置')
+      this.tableObj.getdataListParm.parammaps.travelCode  = ''
+      this.tableObj.getdataListParm.parammaps.customerId  = ''
+      this.tableObj.getdataListParm.parammaps.employeeId  = ''
+      this.tableObj.getdataListParm.parammaps.statusName  = ''
+      this.tableObj.getdataListParm.parammaps.begainCreaterDate  = ''
+      this.tableObj.getdataListParm.parammaps.endCreaterDate  = ''
+      this.tableObj.getdataListParm.parammaps.beginServiceCost  = ''
+      this.tableObj.getdataListParm.parammaps.endServiceCost  = ''
+      this.tableObj.getdataListParm.parammaps.customerName = ''
+
+      this.tableObj.getdataListParm.parammaps.inputDatetime1  = ''
+      this.tableObj.getdataListParm.parammaps.inputDatetime2  = ''
+
+      this.tableObj.getdataListParm.parammaps.beginPlanBeginDate  = ''
+      this.tableObj.getdataListParm.parammaps.endPlanBeginDate  = ''
+      this.tableObj.getdataListParm.parammaps.beginPlanSuccessDate  = ''
+      this.tableObj.getdataListParm.parammaps.endPlanSuccessDate  = ''
+    
+      this.tableObj.getdataListParm.offset = 1
+
+       this.radio = ""
+
+      this.get_table_data()
+    },
+
+
+    //监听 - 表格 - 勾选
+    change_table_selection(val) {
+      console.log('勾选数据', val)
+      this.selectList = val
+
+
+     
+      this.travelData.selectList = this.selectList 
+    },
+
+
+    
+
+    choose_one(row){
+       console.log(row)
+       this.radio= row.id
+       this.travelData.selectList = [row]
+    },
+
+
+     
+  }
+}
+</script>
+<style>
+ 
+</style>

src/components/Breadcrumb/index.vue

@@ -0,0 +1,78 @@
+<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
+      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
+      const first = matched[0]
+
+      if (!this.isDashboard(first)) {
+        matched = [{ path: '/dashboard', meta: { title: '首页' }}].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() === 'Dashboard'.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: inline-block;
+  font-size: 14px;
+  line-height: 50px;
+  margin-left: 8px;
+
+  .no-redirect {
+    color: #97a8be;
+    cursor: text;
+  }
+}
+</style>

src/components/Encapsulation/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div id="app">
+    <div class="content">
+      <div class="data-container" style="width:98%;margin:0 auto;">
+        <h3>各牧场设备统计表:</h3>
+        <el-table ref="interfaceTable" :data="dataList" border :row-style="rowStyle" :cell-style="cellStyle" style="width: 100%" :span-method="colspanMethod" :show-header="showHeader">
+          <el-table-column label="一级分类" prop="pasture" align="center" width="160" />
+          <el-table-column label="二级分类" prop="pasture1" align="center" />
+          <el-table-column label="三级分类" prop="pasture2" align="center" width="160" />
+          <el-table-column label="类型" prop="type" align="center" />
+          <el-table-column label="宝鸡1" prop="pastureName1" align="center" />
+          <el-table-column label="宝鸡2" prop="pastureName2" align="center" width="160" />
+          <!-- <el-table-column label="物流公司" prop="companyName" align="center" />
+          <el-table-column label="物流单号" prop="logisticsNo" align="center" width="160" />
+          <el-table-column label="发货时间" prop="deliveryTime" align="center" width="140" />
+          <el-table-column label="包裹信息" align="center" prop="arr">
+            <template slot-scope="scope">
+              <div v-if="scope.row.packageLong">
+                <div v-for="(item, index) in scope.row.arr" :key="index">{{ item.msg }}</div>
+              </div>
+              <div v-else>/</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="包材编号" prop="materialsCode" align="center" /> -->
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import datas from '../../data.js'
+import { handleTableSpan, handleObjectSpanMethod } from '../../util.js'
+export default {
+  components: {},
+  mixins: [],
+  data() {
+    return {
+      border: false,
+      showHeader: false,
+      dataList: [],
+      // 要合并的单元格的rowspan 数据
+      rowspanObj: {},
+      // 要纵向合并的单元格的key数组
+      mergekeys: ['pasture', 'pasture1', 'pasture2', 'logisticsNo', 'arr', 'materialsCode'],
+      rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
+      cellStyle: { padding: 0 + 'px' }
+    }
+  },
+  computed: {},
+  watch: {
+    dataList: function() {
+      this.$nextTick(function() {
+        this.$refs.interfaceTable.$el.background = 'red !important'
+        console.log(this.$refs.interfaceTable.$el)
+        console.log(this.$refs.interfaceTable)
+      })
+    }
+  },
+  created() {},
+  mounted() {
+    this.getDataList()
+  },
+  methods: {
+    getDataList() {
+      this.dataList = datas
+      console.log()
+
+      // 先处理一下数据，拿到要合并单元格的 rowspan 数据
+      this.rowspanObj = handleTableSpan(this.mergekeys, this.dataList)
+      console.log(this.rowspanObj)
+      // const length = 'mm'
+      // const weight = 'g'
+      // const arr = []
+
+      // datas.forEach((element, index) => {
+      //   element.arr = [
+      //     { msg: '长：' + element.packageLong + `${length}` },
+      //     { msg: '宽：' + element.packageWidth + `${length}` },
+      //     { msg: '高：' + element.packageHeight + `${length}` },
+      //     { msg: '重量：' + element.packageWeight + `${weight}` }
+      //   ]
+      //   element.expressPackCode = element.expressPackCode ? element.expressPackCode : '/'
+      //   element.companyName = element.companyName ? element.companyName : '/'
+      //   element.logisticsNo = element.logisticsNo ? element.logisticsNo : '/'
+      //   element.deliveryTime = element.deliveryTime ? element.deliveryTime : '/'
+      //   element.logisticsNo = element.logisticsNo ? element.logisticsNo : '/'
+      //   element.materialsCode = element.materialsCode ? element.materialsCode : '/'
+      // })
+    },
+    colspanMethod(tableObj) {
+      return handleObjectSpanMethod(tableObj, this.mergekeys, this.rowspanObj, true)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/GithubCorner/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <a href="https://github.com/PanJiaChen/vue-element-admin" target="_blank" class="github-corner" aria-label="View source on Github">
+    <svg
+      width="80"
+      height="80"
+      viewBox="0 0 250 250"
+      style="fill:#40c9c6; color:#fff;"
+      aria-hidden="true"
+    >
+      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+      <path
+        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+        fill="currentColor"
+        style="transform-origin: 130px 106px;"
+        class="octo-arm"
+      />
+      <path
+        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+        fill="currentColor"
+        class="octo-body"
+      />
+    </svg>
+  </a>
+</template>
+
+<style scoped>
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+@media (max-width:500px) {
+  .github-corner:hover .octo-arm {
+    animation: none
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out
+  }
+}
+</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/HeaderSearch/index.vue

@@ -0,0 +1,170 @@
+<template>
+  <div :class="{'show':show}" class="header-search">
+    <svg-icon class-name="search-icon" icon-class="search" @click.stop="click" />
+    <el-select ref="headerSearchSelect" v-model="search" :remote-method="querySearch" filterable default-first-option remote placeholder="输入设备编号或名称" class="header-search-select" @change="change">
+      <el-option v-for="(item,index) in options" :key="item.path" :value="item" :label="item.title.join(' > ')" />
+    </el-select>
+  </div>
+</template>
+
+<script>
+// fuse is a lightweight fuzzy-search module
+// make search results more in line with expectations
+import Fuse from 'fuse.js'
+import path from 'path'
+
+export default {
+  name: 'HeaderSearch',
+  data() {
+    return {
+      search: '',
+      options: [],
+      searchPool: [],
+      show: false,
+      fuse: undefined
+    }
+  },
+  computed: {
+    routes() {
+      return this.$store.getters.permission_routes
+    }
+  },
+  watch: {
+    routes() {
+      this.searchPool = this.generateRoutes(this.routes)
+    },
+    searchPool(list) {
+      this.initFuse(list)
+    },
+    show(value) {
+      if (value) {
+        document.body.addEventListener('click', this.close)
+      } else {
+        document.body.removeEventListener('click', this.close)
+      }
+    }
+  },
+  mounted() {
+    this.searchPool = this.generateRoutes(this.routes)
+  },
+  methods: {
+    click() {
+      this.show = !this.show
+      if (this.show) {
+        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus()
+      }
+    },
+    close() {
+      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur()
+      this.options = []
+      this.show = false
+    },
+    change(val) {
+      this.$router.push(val.path)
+      this.search = ''
+      this.options = []
+      this.$nextTick(() => {
+        this.show = false
+      })
+    },
+    initFuse(list) {
+      this.fuse = new Fuse(list, {
+        shouldSort: true,
+        threshold: 0.4,
+        location: 0,
+        distance: 100,
+        maxPatternLength: 32,
+        minMatchCharLength: 1,
+        keys: [{
+          name: 'title',
+          weight: 0.7
+        }, {
+          name: 'path',
+          weight: 0.3
+        }]
+      })
+    },
+    // Filter out the routes that can be displayed in the sidebar
+    // And generate the internationalized title
+    generateRoutes(routes, basePath = '/', prefixTitle = []) {
+      let res = []
+
+      for (const router of routes) {
+        // skip hidden router
+        if (router.hidden) { continue }
+
+        const data = {
+          path: path.resolve(basePath, router.path),
+          title: [...prefixTitle]
+        }
+
+        if (router.meta && router.meta.title) {
+          data.title = [...data.title, router.meta.title]
+
+          if (router.redirect !== 'noRedirect') {
+            // only push the routes with title
+            // special case: need to exclude parent router without redirect
+            res.push(data)
+          }
+        }
+
+        // recursive child routes
+        if (router.children) {
+          const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
+          if (tempRoutes.length >= 1) {
+            res = [...res, ...tempRoutes]
+          }
+        }
+      }
+      return res
+    },
+    querySearch(query) {
+      if (query !== '') {
+        this.options = this.fuse.search(query)
+      } else {
+        this.options = []
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-search {
+  font-size: 0 !important;
+
+  .search-icon {
+    cursor: pointer;
+    font-size: 18px;
+    vertical-align: middle;
+  }
+
+  .header-search-select {
+    font-size: 18px;
+    transition: width 0.2s;
+    width: 0;
+    overflow: hidden;
+    background: transparent;
+    border-radius: 0;
+    display: inline-block;
+    vertical-align: middle;
+
+    /deep/ .el-input__inner {
+      border-radius: 0;
+      border: 0;
+      padding-left: 0;
+      padding-right: 0;
+      box-shadow: none !important;
+      border-bottom: 1px solid #d9d9d9;
+      vertical-align: middle;
+    }
+  }
+
+  &.show {
+    .header-search-select {
+      width: 210px;
+      margin-left: 10px;
+    }
+  }
+}
+</style>